/* Pizza Tornado – Saison-Effekte (Schnee, Herbstlaub, Silvester-Feuerwerk) und ihre drei Kacheln.
   Gehört zu assets/js/effekte.js. Alle Klassen mit Präfix fx-. */

/* ---------- Zeichenflächen ---------- */

/* über dem Fenster: fallende Flocken/Blätter und das Feuerwerk (liegt über dem Kopf, Klicks gehen durch) */
.fx-flaeche { position: fixed; left: 0; top: 0; z-index: 46; display: block; width: 100%; height: 100vh; pointer-events: none; }
/* auf den Kacheln: Schneehauben und liegende Blätter – scrollen mit der Seite und bleiben unter dem Kopf */
.fx-hauben { position: absolute; left: 0; top: 0; z-index: 4; width: 0; height: 0; pointer-events: none; }
.fx-haube { position: absolute; display: block; pointer-events: none; }
.fx-flaeche[hidden], .fx-haube[hidden], .fx-knopf[hidden] { display: none; }

/* ---------- Knöpfe unten links: Effekte aus/an · Raketen zünden ---------- */

.fx-knoepfe { position: fixed; left: 12px; bottom: 12px; z-index: 47; display: flex; flex-direction: column-reverse; align-items: flex-start; gap: 8px; pointer-events: none; }
body:has(> .lokal-leiste) .fx-knoepfe { bottom: 62px; }
.fx-knopf { position: relative; display: inline-flex; align-items: center; height: 42px; min-width: 42px; padding: 0 11px; border: 0; border-radius: 999px;
  background: rgba(255, 255, 255, .94); color: var(--ink, #161616); font: inherit; font-size: 14px; font-weight: 700; line-height: 1; cursor: pointer;
  pointer-events: auto; box-shadow: 0 6px 18px rgba(22, 22, 22, .16), 0 0 0 1px rgba(22, 22, 22, .07);
  transition: transform .15s ease, background-color .2s ease, color .2s ease; -webkit-tap-highlight-color: transparent; }
.fx-knopf:hover { transform: translateY(-1px); }
.fx-knopf-icon { position: relative; display: grid; place-items: center; flex: none; width: 20px; height: 20px; }
.fx-knopf svg { display: block; width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.fx-knopf-text { max-width: 0; overflow: hidden; white-space: nowrap; opacity: 0; transition: max-width .3s cubic-bezier(.2, .8, .2, 1), margin .3s cubic-bezier(.2, .8, .2, 1), opacity .2s ease; }
.fx-knopf:hover .fx-knopf-text, .fx-knopf:focus-visible .fx-knopf-text, .fx-knopf.is-neu .fx-knopf-text { max-width: 220px; margin: 0 3px 0 8px; opacity: 1; }
.fx-schalter.is-aus { color: var(--muted, #5F5D58); }
.fx-schalter.is-aus .fx-knopf-icon::after { content: ""; position: absolute; left: -2px; right: -2px; top: 50%; height: 2px; margin-top: -1px; border-radius: 2px;
  background: currentColor; box-shadow: 0 0 0 1.5px #fff; transform: rotate(-45deg); }
.fx-nochmal { height: 48px; min-width: 48px; padding: 0 14px; background: #17245A; color: #FFD66B;
  box-shadow: 0 10px 24px rgba(8, 14, 46, .38), 0 0 0 1px rgba(255, 214, 107, .3); }
.fx-nochmal .fx-knopf-text { color: #fff; }
.fx-nochmal.is-neu::before { content: ""; position: absolute; inset: -5px; border-radius: inherit; border: 2px solid rgba(255, 214, 107, .75); animation: fx-ring 1.8s ease-out infinite; pointer-events: none; }
@keyframes fx-ring { from { opacity: 1; transform: scale(.94); } to { opacity: 0; transform: scale(1.14); } }
@media (max-width: 640px) {
  .fx-knoepfe { left: 10px; bottom: 10px; }
  .fx-schalter { height: 38px; min-width: 38px; padding: 0 9px; }
  .fx-schalter:not(:hover):not(:focus-visible):not(.is-neu) { opacity: .9; }
}

/* ---------- Kacheln (in .aktionen-reihe; Grundgerüst .aktion-kachel kommt vom PHP-Teil) ---------- */

.fx-kachel { isolation: isolate; container: fx-kachel / inline-size; }
.fx-kachel-deko { position: absolute; inset: 0; z-index: 0; overflow: hidden; border-radius: inherit; pointer-events: none; }
.fx-kachel-deko > * { position: absolute; }
.fx-kachel > .small-label { position: relative; z-index: 2; display: block; }
.fx-kachel-titel { position: relative; z-index: 2; display: block; max-width: 16em; margin-top: auto; padding-top: 18px; font-size: clamp(22px, 2vw, 26px); font-weight: 800; letter-spacing: -0.03em; line-height: 1.05; text-wrap: balance; }
.fx-kachel-text { position: relative; z-index: 2; display: block; max-width: 30em; margin-top: 8px; font-size: 14px; font-weight: 600; line-height: 1.4; }
.fx-kachel-knopf { position: relative; z-index: 2; align-self: flex-start; display: inline-flex; align-items: center; gap: 8px; min-height: 40px; margin-top: 16px; padding: 0 16px;
  border: 0; border-radius: 999px; font: inherit; font-size: 14px; font-weight: 800; line-height: 1.1; text-align: left; cursor: pointer; }
.fx-kachel-knopf .fx-pfeil { display: inline-block; transition: transform .2s ease; }
.fx-kachel:hover .fx-pfeil, .fx-kachel:focus-visible .fx-pfeil, .fx-kachel-knopf:focus-visible .fx-pfeil { transform: translateX(4px); }

/* Schnee: eisblau, ein großer Eiskristall, leiser Schneefall und eine Schneewehe unten */
.fx-kachel.fx-kachel-schnee { background: linear-gradient(168deg, #F2F9FF 0%, #D7ECFC 40%, #AFD5F4 100%); color: #0C2B4B; }
.aktion-kachel.fx-kachel-schnee:hover, .aktion-kachel.fx-kachel-schnee:focus-visible { color: #0C2B4B; }
.fx-kachel-schnee > .small-label { color: #1F62A3; }
.fx-kachel-schnee .fx-kachel-text { color: #2A4C6F; }
.fx-kachel-schnee .fx-kachel-knopf { background: #0F3A66; color: #fff; box-shadow: 0 6px 14px rgba(15, 58, 102, .3); }
.fx-schneefall { inset: 0; }
.fx-schneefall::before, .fx-schneefall::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; background-repeat: repeat; will-change: transform; }
.fx-schneefall::before { top: -160px; background-size: 160px 160px; animation: fx-flocken-a 18s linear infinite;
  background-image:
    radial-gradient(circle at 26px 34px, #fff 0 2.3px, rgba(150, 196, 238, .5) 3px, rgba(255, 255, 255, 0) 4.2px),
    radial-gradient(circle at 104px 112px, #fff 0 2.6px, rgba(150, 196, 238, .5) 3.3px, rgba(255, 255, 255, 0) 4.6px),
    radial-gradient(circle at 132px 46px, #fff 0 1.7px, rgba(150, 196, 238, .45) 2.4px, rgba(255, 255, 255, 0) 3.4px),
    radial-gradient(circle at 58px 138px, #fff 0 1.9px, rgba(150, 196, 238, .45) 2.6px, rgba(255, 255, 255, 0) 3.6px); }
.fx-schneefall::after { top: -100px; background-size: 100px 100px; animation: fx-flocken-b 26s linear infinite; opacity: .85;
  background-image:
    radial-gradient(circle at 14px 22px, #fff 0 1.2px, rgba(255, 255, 255, 0) 2.2px),
    radial-gradient(circle at 66px 58px, #fff 0 1.4px, rgba(255, 255, 255, 0) 2.4px),
    radial-gradient(circle at 40px 88px, #fff 0 1px, rgba(255, 255, 255, 0) 2px); }
@keyframes fx-flocken-a { to { transform: translateY(160px); } }
@keyframes fx-flocken-b { to { transform: translateY(100px); } }
.fx-kristall { top: -30px; right: -32px; width: 156px; height: 156px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' viewBox='-50 -50 100 100'%3E%3Cdefs%3E%3Cpath id='a' d='M0 -5V-45M0 -15L-7.5 -22.5M0 -15L7.5 -22.5M0 -27L-6.5 -33.5M0 -27L6.5 -33.5M0 -37L-3.6 -40.6M0 -37L3.6 -40.6'/%3E%3Cg id='s'%3E%3Cuse xlink:href='%23a' transform='rotate(0)'/%3E%3Cuse xlink:href='%23a' transform='rotate(60)'/%3E%3Cuse xlink:href='%23a' transform='rotate(120)'/%3E%3Cuse xlink:href='%23a' transform='rotate(180)'/%3E%3Cuse xlink:href='%23a' transform='rotate(240)'/%3E%3Cuse xlink:href='%23a' transform='rotate(300)'/%3E%3C/g%3E%3C/defs%3E%3Cg fill='none' stroke-linecap='round' stroke-linejoin='round'%3E%3Cuse xlink:href='%23s' stroke='%237FB4E4' stroke-width='7.4'/%3E%3Cuse xlink:href='%23s' stroke='%23FFFFFF' stroke-width='3.8'/%3E%3C/g%3E%3Cpath d='M0 -7.5L6.5 -3.75V3.75L0 7.5L-6.5 3.75V-3.75Z' fill='%23FFFFFF' stroke='%237FB4E4' stroke-width='2'/%3E%3C/svg%3E") center / contain no-repeat; opacity: .96;
  filter: drop-shadow(0 6px 10px rgba(31, 98, 163, .22)); animation: fx-drehen 120s linear infinite; }
@keyframes fx-drehen { to { transform: rotate(360deg); } }
.fx-schneehang { left: 0; right: 0; bottom: 0; height: 58px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' viewBox='0 0 320 58'%3E%3Cpath d='M0 15.8 8 15.6 16 15.7 24 16.2 32 16.9 40 17.8 48 18.7 56 19.6 64 20.2 72 20.7 80 21 88 21.1 96 21.1 104 21 112 20.9 120 20.9 128 21.1 136 21.5 144 22.3 152 23.5 160 24.9 168 26.5 176 28.4 184 30.2 192 32 200 33.5 208 34.7 216 35.4 224 35.6 232 35.2 240 34.2 248 32.8 256 30.8 264 28.6 272 26.2 280 23.8 288 21.5 296 19.5 304 17.8 312 16.6 320 15.8 320 60 0 60Z' fill='%23E4F1FC'/%3E%3Cpath d='M0 30.8 8 31 16 31.4 24 32.1 32 33.1 40 34.4 48 36 56 37.7 64 39.6 72 41.3 80 43 88 44.4 96 45.4 104 46 112 46.2 120 45.9 128 45.2 136 44 144 42.6 152 41 160 39.2 168 37.5 176 35.9 184 34.5 192 33.3 200 32.4 208 31.9 216 31.6 224 31.5 232 31.6 240 31.8 248 32 256 32.1 264 32.2 272 32.2 280 32 288 31.8 296 31.5 304 31.2 312 30.9 320 30.8 320 60 0 60Z' fill='%23C3DCF2'/%3E%3Cpath d='M0 28.6 8 28.8 16 29.2 24 29.9 32 30.9 40 32.2 48 33.8 56 35.5 64 37.4 72 39.1 80 40.8 88 42.2 96 43.2 104 43.8 112 44 120 43.7 128 43 136 41.8 144 40.4 152 38.8 160 37 168 35.3 176 33.7 184 32.3 192 31.1 200 30.2 208 29.7 216 29.4 224 29.3 232 29.4 240 29.6 248 29.8 256 29.9 264 30 272 30 280 29.8 288 29.6 296 29.3 304 29 312 28.7 320 28.6 320 60 0 60Z' fill='%23FFFFFF'/%3E%3Cpath d='M0 15.8 8 15.6 16 15.7 24 16.2 32 16.9 40 17.8 48 18.7 56 19.6 64 20.2 72 20.7 80 21 88 21.1 96 21.1 104 21 112 20.9 120 20.9 128 21.1 136 21.5 144 22.3 152 23.5 160 24.9 168 26.5 176 28.4 184 30.2 192 32 200 33.5 208 34.7 216 35.4 224 35.6 232 35.2 240 34.2 248 32.8 256 30.8 264 28.6 272 26.2 280 23.8 288 21.5 296 19.5 304 17.8 312 16.6 320 15.8' fill='none' stroke='%23FFFFFF' stroke-width='1.4' stroke-opacity='.9'/%3E%3C/svg%3E") left bottom / 320px 58px repeat-x; }

/* Herbst: warmes Orange, ein Zweig mit Laub, ein fallendes Blatt und ein Laubhaufen */
.fx-kachel.fx-kachel-herbst { background: linear-gradient(162deg, #FFD089 0%, #FCA04A 42%, #EF7432 100%); color: #2A1205; }
.aktion-kachel.fx-kachel-herbst:hover, .aktion-kachel.fx-kachel-herbst:focus-visible { color: #2A1205; }
.fx-kachel-herbst > .small-label { color: #7A2C05; }
.fx-kachel-herbst .fx-kachel-text { color: #46200A; }
.fx-kachel-herbst .fx-kachel-knopf { background: #2A1205; color: #FFE6C4; box-shadow: 0 6px 14px rgba(90, 30, 0, .3); }
.fx-zweig { top: -10px; right: -12px; width: 176px; height: 126px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' viewBox='0 0 210 150'%3E%3Cdefs%3E%3Cpath id='fahorn' d='M50 3 56 15 63 12 61 30 70 24 74 30 93 22 86 38 92 42 76 54 84 66 70 64 69 72 54 70 52 84 48 84 46 70 31 72 30 64 16 66 24 54 8 42 14 38 7 22 26 30 30 24 39 30 37 12 44 15Z'/%3E%3Cpath id='aahorn' d='M50 82L50 10 M50 78L88 26 M50 78L12 26 M50 80L80 64 M50 80L20 64'/%3E%3CclipPath id='kahorn'%3E%3Cuse xlink:href='%23fahorn'/%3E%3C/clipPath%3E%3Cpath id='feiche' d='M52 6 55 8 57 10 59 11 61 13 62 15 63 17 63 19 63 21 60 22 64 24 67 26 70 28 71 30 73 31 73 33 73 35 72 37 69 39 64 41 70 42 73 44 75 46 76 48 77 50 76 51 75 53 73 55 70 57 64 59 69 61 71 62 72 64 72 66 71 68 70 70 68 71 65 73 62 75 58 77 59 79 59 81 57 82 55 84 50 86 50 86 46 84 43 82 42 81 41 79 42 77 38 75 36 73 33 71 31 70 30 68 29 66 29 64 30 62 32 61 36 59 31 57 28 55 26 53 25 51 25 50 25 48 26 46 28 44 31 42 36 41 32 39 29 37 28 35 28 33 28 31 30 30 31 28 34 26 36 24 41 22 38 21 38 19 38 17 38 15 40 13 41 11 43 10 45 8 48 6Z'/%3E%3Cpath id='aeiche' d='M50 86L50 8 M50 20.3L58.6 13.3 M50 20.3L41.4 13.3 M50 38.5L68.1 31.5 M50 38.5L31.9 31.5 M50 56.6L71.4 49.6 M50 56.6L28.6 49.6 M50 74.8L67.1 67.8 M50 74.8L32.9 67.8'/%3E%3CclipPath id='keiche'%3E%3Cuse xlink:href='%23feiche'/%3E%3C/clipPath%3E%3Cpath id='flinde' d='M50 60 50 60 50 62 51 64 53 68 55 70 59 74 63 76 69 78 73 77 80 77 83 74 89 72 91 67 95 63 94 57 95 52 91 47 89 42 83 38 80 32 73 29 69 24 63 21 59 16 55 14 53 9 51 8 50 4 50 5 50 2 50 5 50 4 49 8 47 9 45 14 41 16 38 21 32 24 28 29 22 32 19 38 13 42 12 47 8 52 9 57 8 63 12 67 13 72 19 74 22 77 28 77 32 78 38 76 41 74 45 70 47 68 49 64 50 62 50 60Z'/%3E%3Cpath id='alinde' d='M50 60L50 7 M50 52L74 34 M50 52L26 34 M50 60L79 56 M50 60L22 56 M50 40L64 24 M50 40L36 24'/%3E%3CclipPath id='klinde'%3E%3Cuse xlink:href='%23flinde'/%3E%3C/clipPath%3E%3ClinearGradient id='vgelb' x1='.2' y1='.1' x2='.8' y2='.95'%3E%3Cstop offset='0' stop-color='%23F7C13F'/%3E%3Cstop offset='1' stop-color='%23D58C12'/%3E%3C/linearGradient%3E%3ClinearGradient id='vorange' x1='.2' y1='.1' x2='.8' y2='.95'%3E%3Cstop offset='0' stop-color='%23F28E2E'/%3E%3Cstop offset='1' stop-color='%23C4570F'/%3E%3C/linearGradient%3E%3ClinearGradient id='vrot' x1='.2' y1='.1' x2='.8' y2='.95'%3E%3Cstop offset='0' stop-color='%23E5582D'/%3E%3Cstop offset='1' stop-color='%23A9290F'/%3E%3C/linearGradient%3E%3CradialGradient id='glanz' cx='.36' cy='.3' r='.5'%3E%3Cstop offset='0' stop-color='%23FFF6D6' stop-opacity='.38'/%3E%3Cstop offset='1' stop-color='%23FFF6D6' stop-opacity='0'/%3E%3C/radialGradient%3E%3C/defs%3E%3Cpath d='M214 -6C178 18 128 36 56 64' fill='none' stroke='%236E3B17' stroke-width='5' stroke-linecap='round'/%3E%3Cpath d='M154 24C146 38 138 50 132 64' fill='none' stroke='%236E3B17' stroke-width='3.4' stroke-linecap='round'/%3E%3Cpath d='M104 46C100 52 99 56 100 60' fill='none' stroke='%236E3B17' stroke-width='2.6' stroke-linecap='round'/%3E%3Cg transform='translate(100 58) rotate(150) scale(.46) translate(-50 -99)'%3E%3Cpath d='M50 85Q53 92 51 99' fill='none' stroke='%23C4570F' stroke-width='3' stroke-linecap='round'/%3E%3Cuse xlink:href='%23feiche' fill='url(%23vorange)' stroke='%233E1804' stroke-opacity='.3' stroke-width='1.6' stroke-linejoin='round'/%3E%3Cg clip-path='url(%23keiche)'%3E%3Cuse xlink:href='%23aeiche' fill='none' stroke='%23461C04' stroke-opacity='.3' stroke-width='1.6' stroke-linecap='round'/%3E%3Crect width='100' height='100' fill='url(%23glanz)'/%3E%3C/g%3E%3C/g%3E%3Cg transform='translate(132 63) rotate(196) scale(.5) translate(-50 -99)'%3E%3Cpath d='M50 60Q53 79.5 51 99' fill='none' stroke='%23D58C12' stroke-width='3' stroke-linecap='round'/%3E%3Cuse xlink:href='%23flinde' fill='url(%23vgelb)' stroke='%233E1804' stroke-opacity='.3' stroke-width='1.6' stroke-linejoin='round'/%3E%3Cg clip-path='url(%23klinde)'%3E%3Cuse xlink:href='%23alinde' fill='none' stroke='%23461C04' stroke-opacity='.3' stroke-width='1.6' stroke-linecap='round'/%3E%3Crect width='100' height='100' fill='url(%23glanz)'/%3E%3C/g%3E%3C/g%3E%3Cg transform='translate(56 64) rotate(166) scale(.6) translate(-50 -99)'%3E%3Cpath d='M50 82Q53 90.5 51 99' fill='none' stroke='%23A9290F' stroke-width='3' stroke-linecap='round'/%3E%3Cuse xlink:href='%23fahorn' fill='url(%23vrot)' stroke='%233E1804' stroke-opacity='.3' stroke-width='1.6' stroke-linejoin='round'/%3E%3Cg clip-path='url(%23kahorn)'%3E%3Cuse xlink:href='%23aahorn' fill='none' stroke='%23461C04' stroke-opacity='.3' stroke-width='1.6' stroke-linecap='round'/%3E%3Crect width='100' height='100' fill='url(%23glanz)'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E") right top / contain no-repeat;
  transform-origin: 96% 2%; animation: fx-wiegen 5.5s ease-in-out infinite alternate; }
@keyframes fx-wiegen { from { transform: rotate(-3deg); } to { transform: rotate(4deg); } }
.fx-fallblatt { top: 92px; right: 96px; width: 28px; height: 28px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' viewBox='0 0 100 100'%3E%3Cdefs%3E%3Cpath id='fahorn' d='M50 3 56 15 63 12 61 30 70 24 74 30 93 22 86 38 92 42 76 54 84 66 70 64 69 72 54 70 52 84 48 84 46 70 31 72 30 64 16 66 24 54 8 42 14 38 7 22 26 30 30 24 39 30 37 12 44 15Z'/%3E%3Cpath id='aahorn' d='M50 82L50 10 M50 78L88 26 M50 78L12 26 M50 80L80 64 M50 80L20 64'/%3E%3CclipPath id='kahorn'%3E%3Cuse xlink:href='%23fahorn'/%3E%3C/clipPath%3E%3ClinearGradient id='vorange' x1='.2' y1='.1' x2='.8' y2='.95'%3E%3Cstop offset='0' stop-color='%23F28E2E'/%3E%3Cstop offset='1' stop-color='%23C4570F'/%3E%3C/linearGradient%3E%3CradialGradient id='glanz' cx='.36' cy='.3' r='.5'%3E%3Cstop offset='0' stop-color='%23FFF6D6' stop-opacity='.38'/%3E%3Cstop offset='1' stop-color='%23FFF6D6' stop-opacity='0'/%3E%3C/radialGradient%3E%3C/defs%3E%3Cg transform='translate(0 0)'%3E%3Cpath d='M50 82Q53 90.5 51 99' fill='none' stroke='%23C4570F' stroke-width='3' stroke-linecap='round'/%3E%3Cuse xlink:href='%23fahorn' fill='url(%23vorange)' stroke='%233E1804' stroke-opacity='.3' stroke-width='1.6' stroke-linejoin='round'/%3E%3Cg clip-path='url(%23kahorn)'%3E%3Cuse xlink:href='%23aahorn' fill='none' stroke='%23461C04' stroke-opacity='.3' stroke-width='1.6' stroke-linecap='round'/%3E%3Crect width='100' height='100' fill='url(%23glanz)'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E") center / contain no-repeat; opacity: 0;
  animation: fx-blattfall 10s ease-in-out 1.2s infinite; }
@keyframes fx-blattfall {
  0% { opacity: 0; transform: translate(0, 0) rotate(-20deg); }
  7% { opacity: 1; }
  28% { transform: translate(-30px, 34px) rotate(50deg); }
  52% { transform: translate(8px, 74px) rotate(140deg); }
  76% { opacity: 1; transform: translate(-20px, 112px) rotate(220deg); }
  88%, 100% { opacity: 0; transform: translate(-8px, 132px) rotate(250deg); }
}
.fx-laubhaufen { right: -16px; bottom: -14px; width: 232px; height: 108px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' viewBox='0 0 240 112'%3E%3Cdefs%3E%3Cpath id='fahorn' d='M50 3 56 15 63 12 61 30 70 24 74 30 93 22 86 38 92 42 76 54 84 66 70 64 69 72 54 70 52 84 48 84 46 70 31 72 30 64 16 66 24 54 8 42 14 38 7 22 26 30 30 24 39 30 37 12 44 15Z'/%3E%3Cpath id='aahorn' d='M50 82L50 10 M50 78L88 26 M50 78L12 26 M50 80L80 64 M50 80L20 64'/%3E%3CclipPath id='kahorn'%3E%3Cuse xlink:href='%23fahorn'/%3E%3C/clipPath%3E%3Cpath id='fbirke' d='M50 6 55 9 55 12 59 15 58 17 61 20 61 23 64 26 63 29 66 32 64 34 67 37 66 40 68 43 67 46 69 49 67 52 70 54 68 57 70 60 67 63 69 66 66 69 67 71 64 74 63 77 50 80 50 80 37 77 36 74 33 71 34 69 31 66 33 63 30 60 32 57 30 54 33 52 31 49 33 46 32 43 34 40 33 37 36 34 34 32 37 29 36 26 39 23 39 20 42 17 41 15 45 12 45 9 50 6Z'/%3E%3Cpath id='abirke' d='M50 80L50 9 M50 31L67 22 M50 31L33 22 M50 42L67 33 M50 42L33 33 M50 53L67 44 M50 53L33 44 M50 64L67 55 M50 64L33 55 M50 75L67 66 M50 75L33 66'/%3E%3CclipPath id='kbirke'%3E%3Cuse xlink:href='%23fbirke'/%3E%3C/clipPath%3E%3Cpath id='feiche' d='M52 6 55 8 57 10 59 11 61 13 62 15 63 17 63 19 63 21 60 22 64 24 67 26 70 28 71 30 73 31 73 33 73 35 72 37 69 39 64 41 70 42 73 44 75 46 76 48 77 50 76 51 75 53 73 55 70 57 64 59 69 61 71 62 72 64 72 66 71 68 70 70 68 71 65 73 62 75 58 77 59 79 59 81 57 82 55 84 50 86 50 86 46 84 43 82 42 81 41 79 42 77 38 75 36 73 33 71 31 70 30 68 29 66 29 64 30 62 32 61 36 59 31 57 28 55 26 53 25 51 25 50 25 48 26 46 28 44 31 42 36 41 32 39 29 37 28 35 28 33 28 31 30 30 31 28 34 26 36 24 41 22 38 21 38 19 38 17 38 15 40 13 41 11 43 10 45 8 48 6Z'/%3E%3Cpath id='aeiche' d='M50 86L50 8 M50 20.3L58.6 13.3 M50 20.3L41.4 13.3 M50 38.5L68.1 31.5 M50 38.5L31.9 31.5 M50 56.6L71.4 49.6 M50 56.6L28.6 49.6 M50 74.8L67.1 67.8 M50 74.8L32.9 67.8'/%3E%3CclipPath id='keiche'%3E%3Cuse xlink:href='%23feiche'/%3E%3C/clipPath%3E%3Cpath id='flinde' d='M50 60 50 60 50 62 51 64 53 68 55 70 59 74 63 76 69 78 73 77 80 77 83 74 89 72 91 67 95 63 94 57 95 52 91 47 89 42 83 38 80 32 73 29 69 24 63 21 59 16 55 14 53 9 51 8 50 4 50 5 50 2 50 5 50 4 49 8 47 9 45 14 41 16 38 21 32 24 28 29 22 32 19 38 13 42 12 47 8 52 9 57 8 63 12 67 13 72 19 74 22 77 28 77 32 78 38 76 41 74 45 70 47 68 49 64 50 62 50 60Z'/%3E%3Cpath id='alinde' d='M50 60L50 7 M50 52L74 34 M50 52L26 34 M50 60L79 56 M50 60L22 56 M50 40L64 24 M50 40L36 24'/%3E%3CclipPath id='klinde'%3E%3Cuse xlink:href='%23flinde'/%3E%3C/clipPath%3E%3ClinearGradient id='vbraun' x1='.2' y1='.1' x2='.8' y2='.95'%3E%3Cstop offset='0' stop-color='%23BC7A3C'/%3E%3Cstop offset='1' stop-color='%237A451A'/%3E%3C/linearGradient%3E%3ClinearGradient id='vgelb' x1='.2' y1='.1' x2='.8' y2='.95'%3E%3Cstop offset='0' stop-color='%23F7C13F'/%3E%3Cstop offset='1' stop-color='%23D58C12'/%3E%3C/linearGradient%3E%3ClinearGradient id='vocker' x1='.2' y1='.1' x2='.8' y2='.95'%3E%3Cstop offset='0' stop-color='%23D6AE34'/%3E%3Cstop offset='1' stop-color='%2393710F'/%3E%3C/linearGradient%3E%3ClinearGradient id='vorange' x1='.2' y1='.1' x2='.8' y2='.95'%3E%3Cstop offset='0' stop-color='%23F28E2E'/%3E%3Cstop offset='1' stop-color='%23C4570F'/%3E%3C/linearGradient%3E%3ClinearGradient id='vrot' x1='.2' y1='.1' x2='.8' y2='.95'%3E%3Cstop offset='0' stop-color='%23E5582D'/%3E%3Cstop offset='1' stop-color='%23A9290F'/%3E%3C/linearGradient%3E%3CradialGradient id='glanz' cx='.36' cy='.3' r='.5'%3E%3Cstop offset='0' stop-color='%23FFF6D6' stop-opacity='.38'/%3E%3Cstop offset='1' stop-color='%23FFF6D6' stop-opacity='0'/%3E%3C/radialGradient%3E%3C/defs%3E%3Cg transform='translate(36 98) rotate(-110) scale(0.42) translate(-50 -50)'%3E%3Cpath d='M50 80Q53 89 51 98' fill='none' stroke='%23D58C12' stroke-width='3' stroke-linecap='round'/%3E%3Cuse xlink:href='%23fbirke' fill='url(%23vgelb)' stroke='%233E1804' stroke-opacity='.3' stroke-width='1.6' stroke-linejoin='round'/%3E%3Cg clip-path='url(%23kbirke)'%3E%3Cuse xlink:href='%23abirke' fill='none' stroke='%23461C04' stroke-opacity='.3' stroke-width='1.6' stroke-linecap='round'/%3E%3Crect width='100' height='100' fill='url(%23glanz)'/%3E%3C/g%3E%3C/g%3E%3Cg transform='translate(62 82) rotate(75) scale(0.56) translate(-50 -50)'%3E%3Cpath d='M50 85Q53 92 51 99' fill='none' stroke='%237A451A' stroke-width='3' stroke-linecap='round'/%3E%3Cuse xlink:href='%23feiche' fill='url(%23vbraun)' stroke='%233E1804' stroke-opacity='.3' stroke-width='1.6' stroke-linejoin='round'/%3E%3Cg clip-path='url(%23keiche)'%3E%3Cuse xlink:href='%23aeiche' fill='none' stroke='%23461C04' stroke-opacity='.3' stroke-width='1.6' stroke-linecap='round'/%3E%3Crect width='100' height='100' fill='url(%23glanz)'/%3E%3C/g%3E%3C/g%3E%3Cg transform='translate(88 100) rotate(100) scale(0.5) translate(-50 -50)'%3E%3Cpath d='M50 60Q53 79.5 51 99' fill='none' stroke='%23C4570F' stroke-width='3' stroke-linecap='round'/%3E%3Cuse xlink:href='%23flinde' fill='url(%23vorange)' stroke='%233E1804' stroke-opacity='.3' stroke-width='1.6' stroke-linejoin='round'/%3E%3Cg clip-path='url(%23klinde)'%3E%3Cuse xlink:href='%23alinde' fill='none' stroke='%23461C04' stroke-opacity='.3' stroke-width='1.6' stroke-linecap='round'/%3E%3Crect width='100' height='100' fill='url(%23glanz)'/%3E%3C/g%3E%3C/g%3E%3Cg transform='translate(114 72) rotate(-100) scale(0.7) translate(-50 -50)'%3E%3Cpath d='M50 82Q53 90.5 51 99' fill='none' stroke='%23A9290F' stroke-width='3' stroke-linecap='round'/%3E%3Cuse xlink:href='%23fahorn' fill='url(%23vrot)' stroke='%233E1804' stroke-opacity='.3' stroke-width='1.6' stroke-linejoin='round'/%3E%3Cg clip-path='url(%23kahorn)'%3E%3Cuse xlink:href='%23aahorn' fill='none' stroke='%23461C04' stroke-opacity='.3' stroke-width='1.6' stroke-linecap='round'/%3E%3Crect width='100' height='100' fill='url(%23glanz)'/%3E%3C/g%3E%3C/g%3E%3Cg transform='translate(142 96) rotate(-80) scale(0.55) translate(-50 -50)'%3E%3Cpath d='M50 85Q53 92 51 99' fill='none' stroke='%23A9290F' stroke-width='3' stroke-linecap='round'/%3E%3Cuse xlink:href='%23feiche' fill='url(%23vrot)' stroke='%233E1804' stroke-opacity='.3' stroke-width='1.6' stroke-linejoin='round'/%3E%3Cg clip-path='url(%23keiche)'%3E%3Cuse xlink:href='%23aeiche' fill='none' stroke='%23461C04' stroke-opacity='.3' stroke-width='1.6' stroke-linecap='round'/%3E%3Crect width='100' height='100' fill='url(%23glanz)'/%3E%3C/g%3E%3C/g%3E%3Cg transform='translate(168 78) rotate(95) scale(0.6) translate(-50 -50)'%3E%3Cpath d='M50 60Q53 79.5 51 99' fill='none' stroke='%23D58C12' stroke-width='3' stroke-linecap='round'/%3E%3Cuse xlink:href='%23flinde' fill='url(%23vgelb)' stroke='%233E1804' stroke-opacity='.3' stroke-width='1.6' stroke-linejoin='round'/%3E%3Cg clip-path='url(%23klinde)'%3E%3Cuse xlink:href='%23alinde' fill='none' stroke='%23461C04' stroke-opacity='.3' stroke-width='1.6' stroke-linecap='round'/%3E%3Crect width='100' height='100' fill='url(%23glanz)'/%3E%3C/g%3E%3C/g%3E%3Cg transform='translate(206 60) rotate(-60) scale(0.46) translate(-50 -50)'%3E%3Cpath d='M50 80Q53 89 51 98' fill='none' stroke='%2393710F' stroke-width='3' stroke-linecap='round'/%3E%3Cuse xlink:href='%23fbirke' fill='url(%23vocker)' stroke='%233E1804' stroke-opacity='.3' stroke-width='1.6' stroke-linejoin='round'/%3E%3Cg clip-path='url(%23kbirke)'%3E%3Cuse xlink:href='%23abirke' fill='none' stroke='%23461C04' stroke-opacity='.3' stroke-width='1.6' stroke-linecap='round'/%3E%3Crect width='100' height='100' fill='url(%23glanz)'/%3E%3C/g%3E%3C/g%3E%3Cg transform='translate(194 94) rotate(122) scale(0.62) translate(-50 -50)'%3E%3Cpath d='M50 82Q53 90.5 51 99' fill='none' stroke='%23C4570F' stroke-width='3' stroke-linecap='round'/%3E%3Cuse xlink:href='%23fahorn' fill='url(%23vorange)' stroke='%233E1804' stroke-opacity='.3' stroke-width='1.6' stroke-linejoin='round'/%3E%3Cg clip-path='url(%23kahorn)'%3E%3Cuse xlink:href='%23aahorn' fill='none' stroke='%23461C04' stroke-opacity='.3' stroke-width='1.6' stroke-linecap='round'/%3E%3Crect width='100' height='100' fill='url(%23glanz)'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E") right bottom / contain no-repeat; }

/* Silvester: Nachtblau mit Sternen und kleinen Feuerwerken, Countdown bis Mitternacht */
.fx-kachel.fx-kachel-silvester { background: radial-gradient(120% 95% at 88% 0%, #2C3F92 0%, #17225F 46%, #0B1236 100%); color: #fff; }
.aktion-kachel.fx-kachel-silvester:hover, .aktion-kachel.fx-kachel-silvester:focus-within { color: #fff; }
.fx-kachel-silvester > .small-label { color: #FFD66B; }
.fx-kachel-silvester .fx-kachel-text { color: rgba(255, 255, 255, .84); }
.fx-kachel-silvester .fx-kachel-knopf { background: linear-gradient(180deg, #FFE38F 0%, #FFC531 100%); color: #161616; box-shadow: 0 6px 18px rgba(0, 0, 0, .35), inset 0 1px 0 rgba(255, 255, 255, .6); }
.fx-kachel-silvester .fx-kachel-knopf:hover { filter: brightness(1.05); }
.fx-kachel-knopf svg { display: block; width: 18px; height: 18px; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.fx-sterne { inset: 0; }
.fx-sterne::before, .fx-sterne::after { content: ""; position: absolute; inset: 0; animation: fx-funkeln 2.8s ease-in-out infinite alternate; }
.fx-sterne::before { background:
  radial-gradient(circle at 12% 18%, #fff 0 1px, rgba(255, 255, 255, 0) 1.6px), radial-gradient(circle at 34% 9%, #fff 0 .9px, rgba(255, 255, 255, 0) 1.5px),
  radial-gradient(circle at 58% 26%, #FFF1C2 0 1.2px, rgba(255, 255, 255, 0) 1.8px), radial-gradient(circle at 78% 54%, #fff 0 1px, rgba(255, 255, 255, 0) 1.6px),
  radial-gradient(circle at 22% 62%, #fff 0 .9px, rgba(255, 255, 255, 0) 1.5px), radial-gradient(circle at 92% 82%, #FFF1C2 0 1.1px, rgba(255, 255, 255, 0) 1.7px),
  radial-gradient(circle at 46% 78%, #fff 0 .8px, rgba(255, 255, 255, 0) 1.4px); }
.fx-sterne::after { animation-delay: -1.4s; background:
  radial-gradient(circle at 6% 44%, #fff 0 1.1px, rgba(255, 255, 255, 0) 1.7px), radial-gradient(circle at 40% 40%, #fff 0 .9px, rgba(255, 255, 255, 0) 1.5px),
  radial-gradient(circle at 66% 8%, #fff 0 1px, rgba(255, 255, 255, 0) 1.6px), radial-gradient(circle at 86% 36%, #FFF1C2 0 1px, rgba(255, 255, 255, 0) 1.6px),
  radial-gradient(circle at 70% 70%, #fff 0 .8px, rgba(255, 255, 255, 0) 1.4px), radial-gradient(circle at 30% 90%, #fff 0 1px, rgba(255, 255, 255, 0) 1.6px); }
@keyframes fx-funkeln { from { opacity: .35; } to { opacity: 1; } }
.fx-burst { width: 124px; height: 124px; background: #FFD66B; opacity: 0;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' viewBox='-50 -50 100 100'%3E%3Cdefs%3E%3Cg id='g'%3E%3Ccircle cx='12' r='2.6'/%3E%3Ccircle cx='21' r='2.5'/%3E%3Ccircle cx='29.5' r='2.2'/%3E%3Ccircle cx='37.5' r='1.9'/%3E%3Ccircle cx='44.5' r='1.4'/%3E%3C/g%3E%3Cg id='s'%3E%3Ccircle cx='11.2' r='2.2'/%3E%3Ccircle cx='19.5' r='2.1'/%3E%3Ccircle cx='27.4' r='1.9'/%3E%3Ccircle cx='34.9' r='1.6'/%3E%3Ccircle cx='41.4' r='1.2'/%3E%3C/g%3E%3C/defs%3E%3Cg fill='%23fff'%3E%3Ccircle r='4.2'/%3E%3Cuse xlink:href='%23g' transform='rotate(7)'/%3E%3Cuse xlink:href='%23s' transform='rotate(29.5)'/%3E%3Cuse xlink:href='%23g' transform='rotate(52)'/%3E%3Cuse xlink:href='%23s' transform='rotate(74.5)'/%3E%3Cuse xlink:href='%23g' transform='rotate(97)'/%3E%3Cuse xlink:href='%23s' transform='rotate(119.5)'/%3E%3Cuse xlink:href='%23g' transform='rotate(142)'/%3E%3Cuse xlink:href='%23s' transform='rotate(164.5)'/%3E%3Cuse xlink:href='%23g' transform='rotate(187)'/%3E%3Cuse xlink:href='%23s' transform='rotate(209.5)'/%3E%3Cuse xlink:href='%23g' transform='rotate(232)'/%3E%3Cuse xlink:href='%23s' transform='rotate(254.5)'/%3E%3Cuse xlink:href='%23g' transform='rotate(277)'/%3E%3Cuse xlink:href='%23s' transform='rotate(299.5)'/%3E%3Cuse xlink:href='%23g' transform='rotate(322)'/%3E%3Cuse xlink:href='%23s' transform='rotate(344.5)'/%3E%3C/g%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' viewBox='-50 -50 100 100'%3E%3Cdefs%3E%3Cg id='g'%3E%3Ccircle cx='12' r='2.6'/%3E%3Ccircle cx='21' r='2.5'/%3E%3Ccircle cx='29.5' r='2.2'/%3E%3Ccircle cx='37.5' r='1.9'/%3E%3Ccircle cx='44.5' r='1.4'/%3E%3C/g%3E%3Cg id='s'%3E%3Ccircle cx='11.2' r='2.2'/%3E%3Ccircle cx='19.5' r='2.1'/%3E%3Ccircle cx='27.4' r='1.9'/%3E%3Ccircle cx='34.9' r='1.6'/%3E%3Ccircle cx='41.4' r='1.2'/%3E%3C/g%3E%3C/defs%3E%3Cg fill='%23fff'%3E%3Ccircle r='4.2'/%3E%3Cuse xlink:href='%23g' transform='rotate(7)'/%3E%3Cuse xlink:href='%23s' transform='rotate(29.5)'/%3E%3Cuse xlink:href='%23g' transform='rotate(52)'/%3E%3Cuse xlink:href='%23s' transform='rotate(74.5)'/%3E%3Cuse xlink:href='%23g' transform='rotate(97)'/%3E%3Cuse xlink:href='%23s' transform='rotate(119.5)'/%3E%3Cuse xlink:href='%23g' transform='rotate(142)'/%3E%3Cuse xlink:href='%23s' transform='rotate(164.5)'/%3E%3Cuse xlink:href='%23g' transform='rotate(187)'/%3E%3Cuse xlink:href='%23s' transform='rotate(209.5)'/%3E%3Cuse xlink:href='%23g' transform='rotate(232)'/%3E%3Cuse xlink:href='%23s' transform='rotate(254.5)'/%3E%3Cuse xlink:href='%23g' transform='rotate(277)'/%3E%3Cuse xlink:href='%23s' transform='rotate(299.5)'/%3E%3Cuse xlink:href='%23g' transform='rotate(322)'/%3E%3Cuse xlink:href='%23s' transform='rotate(344.5)'/%3E%3C/g%3E%3C/svg%3E") center / contain no-repeat;
  animation: fx-knall 5.4s cubic-bezier(.15, .7, .3, 1) infinite; }
.fx-burst-1 { top: 10px; right: 14px; }
.fx-burst-2 { top: 74px; right: 112px; width: 84px; height: 84px; background: #FF86BE; animation-delay: 1.8s; }
.fx-burst-3 { top: -6px; right: 156px; width: 70px; height: 70px; background: #8FD8FF; animation-delay: 3.6s; }
@keyframes fx-knall {
  0% { opacity: 0; transform: scale(.2); }
  5% { opacity: 1; }
  38% { opacity: .95; transform: scale(1); }
  62%, 100% { opacity: 0; transform: translateY(10px) scale(1.06); }
}
.fx-countdown { position: relative; z-index: 2; display: flex; flex-wrap: wrap; gap: 6px; margin-top: 14px; font-size: 15px; font-weight: 700; font-variant-numeric: tabular-nums; }
.fx-cd-feld { display: flex; flex-direction: column; align-items: center; min-width: 52px; padding: 8px 6px 7px; border-radius: 14px;
  background: rgba(255, 255, 255, .1); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .18); }
.fx-cd-feld b { font-size: 22px; font-weight: 800; line-height: 1; letter-spacing: -0.02em; }
.fx-cd-feld small { margin-top: 5px; font-size: 11px; font-weight: 700; line-height: 1; color: rgba(255, 255, 255, .72); }
.fx-cd-feld[hidden] { display: none; }
.fx-countdown.is-neujahr { display: block; font-size: clamp(20px, 2vw, 24px); font-weight: 800; line-height: 1.15; color: #FFD66B; }
.fx-kachel-silvester.is-neujahr .fx-kachel-text { display: none; }
.fx-kachel-silvester.is-neujahr .fx-burst { animation-duration: 3.6s; }

@container fx-kachel (max-width: 330px) {
  .fx-kristall { top: -26px; right: -36px; width: 128px; height: 128px; }
  .fx-laubhaufen { width: 176px; height: 82px; }
  .fx-zweig { width: 150px; height: 108px; }
  .fx-burst-1 { top: 4px; right: 6px; width: 96px; height: 96px; }
  .fx-burst-2 { top: 2px; right: 104px; width: 54px; height: 54px; }
  .fx-burst-3 { display: none; }
  .fx-cd-feld { min-width: 47px; padding-left: 4px; padding-right: 4px; }
}
@container fx-kachel (min-width: 331px) and (max-width: 479px) {
  .fx-kachel-titel { max-width: calc(100% - 96px); } /* nicht unter Kristall, Zweig oder Feuerwerk */
}
@container fx-kachel (min-width: 480px) {
  .fx-kristall { top: -24px; right: 4px; width: 176px; height: 176px; }
  .fx-kachel-titel, .fx-kachel-text { max-width: calc(100% - 150px); }
  .fx-kachel-titel { font-size: 26px; }
  .fx-laubhaufen { width: 290px; height: 135px; }
  .fx-zweig { width: 210px; height: 150px; }
  .fx-burst-1 { top: 22px; right: 30px; width: 150px; height: 150px; }
  .fx-burst-2 { top: 110px; right: 170px; }
  .fx-burst-3 { right: 210px; }
}

@media (prefers-reduced-motion: reduce) {
  .fx-schneefall::before, .fx-schneefall::after, .fx-kristall, .fx-zweig, .fx-sterne::before, .fx-sterne::after, .fx-nochmal.is-neu::before { animation: none; }
  .fx-fallblatt { display: none; }
  .fx-burst { animation: none; opacity: .9; }
  .fx-knopf, .fx-knopf-text, .fx-kachel-knopf .fx-pfeil { transition: none; }
}

@media print {
  .fx-flaeche, .fx-hauben, .fx-knoepfe { display: none !important; }
}