/* Pizza Tornado – Halloween (Saison-Aktion). Stimmung, Deko, Gutschein-Kürbis und Kachel.
   Alles hängt an body.sz-halloween – ist die Aktion aus, wird diese Datei gar nicht geladen.
   „Effekte aus“ des Besuchers → body.sz-halloween-aus → alles wieder ganz normal. */

/* ---------- Stimmung: Stärke (leicht/mittel/stark) direkt aus data-sz-halloween ---------- */
body.sz-halloween {
  --szh-karte: #FFF8EC; --szh-weich: #FAF1E3; --szh-grund: #F1E6D4; --szh-linie: #E8DCC8;
  --szh-nacht: #2A1E40; --szh-nacht2: #120E1B; --szh-vig: .38; --szh-nebel: .72;
}
body.sz-halloween[data-sz-halloween*='"dunkel":"leicht"'] {
  --szh-karte: #FFFBF4; --szh-weich: #FAF5EC; --szh-grund: #F2EBDF; --szh-linie: #E7E0D3;
  --szh-nacht: #3A3446; --szh-nacht2: #24212B; --szh-vig: .22; --szh-nebel: .55;
}
body.sz-halloween[data-sz-halloween*='"dunkel":"stark"'] {
  --szh-karte: #F8EDDA; --szh-weich: #F3E6D0; --szh-grund: #ECDDC6; --szh-linie: #E0CFB4;
  --szh-nacht: #1C1130; --szh-nacht2: #08060D; --szh-vig: .55; --szh-nebel: .88;
}
body.sz-halloween:not(.sz-halloween-aus) {
  --card: var(--szh-karte); --soft: var(--szh-weich); --bg: var(--szh-grund); --line: var(--szh-linie);
  background-color: var(--szh-nacht2);
  background-image: linear-gradient(90deg, rgba(10, 6, 20, var(--szh-vig)) 0, rgba(10, 6, 20, 0) 13%, rgba(10, 6, 20, 0) 87%, rgba(10, 6, 20, var(--szh-vig)) 100%),
    linear-gradient(180deg, var(--szh-nacht) 0, var(--szh-nacht2) 900px);
  background-repeat: no-repeat;
}
/* Werbezeile oben: Kürbis-Orange statt Gelb (Text bleibt dunkel) */
body.sz-halloween:not(.sz-halloween-aus) .topbar { background: linear-gradient(90deg, #EE7A1E, #FFA43C 50%, #EE7A1E); }
/* Was direkt auf dem dunklen Hintergrund steht: hell schreiben */
body.sz-halloween:not(.sz-halloween-aus) .crumbs ol,
body.sz-halloween:not(.sz-halloween-aus) .crumbs a { color: #DCD4EA; }
body.sz-halloween:not(.sz-halloween-aus) .crumbs a:hover,
body.sz-halloween:not(.sz-halloween-aus) .crumbs [aria-current] { color: #fff; }
body.sz-halloween:not(.sz-halloween-aus) .crumbs li + li::before { color: #9389A8; }
body.sz-halloween:not(.sz-halloween-aus) .site-footer { color: #CDC4DC; }
body.sz-halloween:not(.sz-halloween-aus) .site-footer a { color: #F3EEFA; }
body.sz-halloween:not(.sz-halloween-aus) .site-footer a:hover { color: #FFB35C; }
body.sz-halloween:not(.sz-halloween-aus) .site-footer .footer-brand { color: #fff; }
body.sz-halloween:not(.sz-halloween-aus) .site-footer .footer-label { color: #CDC4DC; }
body.sz-halloween:not(.sz-halloween-aus) .site-footer .footer-small,
body.sz-halloween:not(.sz-halloween-aus) .site-footer .footer-small a { color: #ABA1BF; }
body.sz-halloween:not(.sz-halloween-aus) .site-footer .app-btn { background: #0B0911; box-shadow: 0 0 0 1px rgba(255, 255, 255, .22); }

/* ---------- Deko-Ebenen (alle mit .sz-halloween-deko → bei „Effekte aus“ weg) ---------- */
body.sz-halloween-aus .sz-halloween-deko { display: none !important; }
.sz-halloween-deko { pointer-events: none; }
/* Spinnen, Geister, Fledermäuse: kleine Zeichenflächen, die per transform wandern; Faden = feine Linie */
.sz-halloween-figur { position: fixed; left: 0; top: 0; z-index: 39; will-change: transform; }
.sz-halloween-faden { position: fixed; left: 0; top: 0; z-index: 39; width: 2px; height: 100px;
  background: linear-gradient(90deg, rgba(74, 62, 98, .42) 50%, rgba(240, 236, 252, .7) 50%); /* auf hellen Karten und dunklem Grund sichtbar */
  transform-origin: 50% 0; will-change: transform; }

/* Himmel hinter dem Inhalt: Verlauf, Sterne, Mond, ziehende Wolken */
/* liegt oben auf der Seite (scrollt mit, keine eigene Vollbild-Ebene = billig beim Zusammensetzen); Nachtverlauf und
   seitliche Vignette stecken im body-Hintergrund */
.sz-halloween-himmel { position: absolute; left: 0; right: 0; top: 0; height: max(100vh, 720px); z-index: -1; overflow: hidden; opacity: 0; transition: opacity 1.1s ease;
  background: radial-gradient(70vmax 46vmax at 86% -4%, rgba(132, 104, 182, .34), rgba(132, 104, 182, 0) 70%); }
body.sz-halloween-bereit .sz-halloween-himmel { opacity: 1; }
.sz-halloween-sterne, .sz-halloween-sterne2 { position: absolute; left: 0; right: 0; top: 0; height: 70%;
  background-image: radial-gradient(1.4px 1.4px at 7% 12%, #fff 50%, transparent 52%), radial-gradient(1px 1px at 21% 31%, #fff 50%, transparent 52%),
    radial-gradient(1.2px 1.2px at 33% 8%, #fff 50%, transparent 52%), radial-gradient(1px 1px at 46% 22%, #fff 50%, transparent 52%),
    radial-gradient(1.5px 1.5px at 58% 5%, #fff 50%, transparent 52%), radial-gradient(1px 1px at 67% 36%, #fff 50%, transparent 52%),
    radial-gradient(1.3px 1.3px at 79% 19%, #fff 50%, transparent 52%), radial-gradient(1px 1px at 93% 42%, #fff 50%, transparent 52%),
    radial-gradient(1px 1px at 14% 52%, #fff 50%, transparent 52%), radial-gradient(1.2px 1.2px at 39% 47%, #fff 50%, transparent 52%);
  background-size: 640px 420px; opacity: .55; }
.sz-halloween-sterne2 { background-position: 310px 190px; opacity: .3; }
.sz-halloween-mond { position: absolute; top: 18px; right: clamp(14px, 5vw, 110px); width: 104px; height: 104px; }
.sz-halloween-mond::before { content: ""; position: absolute; inset: -110px; border-radius: 50%; background: radial-gradient(closest-side, rgba(255, 238, 200, .34), rgba(255, 238, 200, .1) 48%, rgba(255, 238, 200, 0)); }
.sz-halloween-mond svg { position: relative; display: block; width: 100%; height: 100%; }
.sz-halloween-wolke { position: absolute; left: 0; width: 420px; height: 110px; opacity: .9; }
.sz-halloween-wolke svg { display: block; width: 100%; height: 100%; }
.sz-halloween-wolke-1 { top: 54px; }
.sz-halloween-wolke-2 { top: 128px; width: 300px; height: 80px; opacity: .7; }
.sz-halloween-wolke-3 { top: 6px; width: 520px; height: 130px; opacity: .55; }

/* Nebel (über dem Inhalt, unter dem Seitenkopf) */
.sz-halloween-nebel { position: fixed; left: 0; bottom: 0; z-index: 38; display: block; width: 100%; height: 26vh; opacity: 0; transition: opacity 1.6s ease; }
body.sz-halloween-bereit .sz-halloween-nebel { opacity: var(--szh-nebel); }

/* Spinnennetze in den oberen Ecken (unter dem Kopf) und an Karten-Ecken */
.sz-halloween-eckennetz { position: fixed; top: 0; z-index: 39; width: 210px; height: 210px; }
.sz-halloween-eckennetz.is-links { left: 0; }
.sz-halloween-eckennetz.is-rechts { right: 0; }
.sz-halloween-netz svg, .sz-halloween-eckennetz svg { display: block; width: 100%; height: 100%; overflow: visible; }
.sz-halloween-eckennetz .sz-halloween-netz-innen { width: 100%; height: 100%; }
.sz-halloween-eckennetz.is-rechts .sz-halloween-netz-innen { transform: scaleX(-1); }

/* Auflage: Kürbisse und Netze, die auf Karten sitzen (Seitenkoordinaten, scrollt mit) */
.sz-halloween-auflage { position: absolute; left: 0; top: 0; z-index: 4; width: 0; height: 0; }
.sz-halloween-auflage > * { position: absolute; left: 0; top: 0; }
.sz-halloween-netz.is-rechts svg { transform: scaleX(-1); }

/* ---------- Kürbislaterne (überall gleich gebaut) ---------- */
.sz-halloween-kuerbis { display: block; }
.sz-halloween-kuerbis > svg, .sz-halloween-kuerbis-svg { position: relative; display: block; width: 100%; height: 100%; overflow: visible; }
.sz-halloween-halo { position: absolute; left: 50%; top: 60%; width: 210%; height: 175%; transform: translate(-50%, -50%); border-radius: 50%;
  background: radial-gradient(closest-side, rgba(255, 150, 40, .42), rgba(255, 122, 24, .14) 55%, rgba(255, 122, 24, 0)); will-change: opacity; }
.sz-halloween-flacker { position: absolute; left: 24%; right: 24%; top: 44%; bottom: 12%; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(255, 226, 140, .5), rgba(255, 190, 70, 0)); opacity: .9; }
.sz-halloween-deckel { transform-box: fill-box; transform-origin: 18% 100%; transition: transform .6s cubic-bezier(.3, 1.5, .5, 1); }
.is-offen .sz-halloween-deckel { transform: translate(-5px, -21px) rotate(-15deg); }
.is-offen .sz-halloween-flacker { opacity: 1; }
.is-klopf .sz-halloween-kuerbis-svg { animation: sz-halloween-klopf .66s cubic-bezier(.3, .7, .4, 1) both; transform-origin: 50% 96%; }

/* Ecken unten: Kürbisse (links neben den Knöpfen, rechts der Gutschein-Kürbis) */
.sz-halloween-ecke { position: fixed; bottom: 0; z-index: 45; height: 92px; }
.sz-halloween-ecke > .sz-halloween-kuerbis { position: absolute; bottom: 0; }
.sz-halloween-ecke-links { left: 62px; width: 130px; }
body:has(> .lokal-leiste) .sz-halloween-ecke-links { left: 150px; }
.sz-halloween-ecke-rechts { right: 4px; width: 200px; }

/* Der besondere, leuchtende Gutschein-Kürbis */
.sz-halloween-sonder { position: fixed; right: 16px; bottom: 6px; z-index: 48; width: 100px; height: 94px; outline-offset: 2px; border-radius: 26px;
  transition: transform .25s cubic-bezier(.3, 1.4, .5, 1); }
.sz-halloween-sonder:hover { transform: translateY(-3px) rotate(-2deg); }
.sz-halloween-sonder:focus-visible { outline: 3px solid #FFB24A; }
.sz-halloween-sonder .sz-halloween-halo { width: 250%; height: 210%; background: radial-gradient(closest-side, rgba(255, 166, 50, .55), rgba(255, 128, 24, .2) 52%, rgba(255, 128, 24, 0)); }
.sz-halloween-puls { position: absolute; left: -8%; right: -8%; top: 14%; bottom: -6%; border-radius: 50%;
  box-shadow: 0 0 0 2px rgba(255, 190, 90, .55), 0 0 22px 6px rgba(255, 150, 40, .35); animation: sz-halloween-puls 2.4s cubic-bezier(.2, .7, .3, 1) infinite; }
.sz-halloween-schild { position: absolute; right: 62px; bottom: 74px; padding: 5px 10px 6px; border-radius: 9px; white-space: nowrap;
  background: linear-gradient(180deg, #8C5A2E, #6A3F1C); color: #FFE7BF; font-size: 13px; font-weight: 800; letter-spacing: .01em; line-height: 1.1;
  box-shadow: inset 0 1px 0 rgba(255, 220, 170, .35), inset 0 -2px 0 rgba(0, 0, 0, .25), 0 6px 14px rgba(20, 8, 30, .4);
  transform-origin: 85% -14px; animation: sz-halloween-schild 3.8s ease-in-out infinite; }
.sz-halloween-schild::before, .sz-halloween-schild::after { content: ""; position: absolute; top: -13px; width: 1.5px; height: 14px; background: #C9A57A; }
.sz-halloween-schild::before { left: 18%; transform: rotate(16deg); }
.sz-halloween-schild::after { right: 14%; transform: rotate(-12deg); }
.sz-halloween-sonder .sz-halloween-kuerbis { position: absolute; inset: 0; }
.sz-halloween-sonder.is-satt .sz-halloween-puls { display: none; }

/* ---------- Gutschein-Dialog ---------- */
.sz-halloween-dialog .sz-dialog-karte { --metal: #FFF8EC; --sz-farbe: #C9500C; background: #FFF8EC; }
.sz-halloween-szene { position: relative; height: 178px; overflow: hidden; border-radius: 30px 30px 0 0;
  background: radial-gradient(60% 90% at 50% 112%, rgba(255, 150, 40, .55), rgba(255, 150, 40, 0) 70%), radial-gradient(30% 50% at 86% 18%, rgba(255, 240, 200, .3), rgba(255, 240, 200, 0)),
    linear-gradient(180deg, #2E2148, #1A1330 70%, #241736); }
.sz-halloween-szene-mond { position: absolute; right: 44px; top: 20px; width: 40px; height: 40px; border-radius: 50%;
  background: radial-gradient(circle at 36% 34%, #FFFBEA, #F2E3B4 62%, #D7C08A); box-shadow: 0 0 30px 8px rgba(255, 236, 190, .25); }
.sz-halloween-szene .sz-halloween-sterne { height: 100%; background-size: 300px 180px; opacity: .7; }
.sz-halloween-szene-kuerbis { position: absolute; left: 50%; bottom: -8px; width: 150px; height: 140px; margin-left: -75px; }
.sz-halloween-szene-suess { position: absolute; left: 50%; top: 0; width: 320px; height: 150px; margin-left: -160px; overflow: visible; }
.sz-halloween-bonbon { transform-box: fill-box; transform-origin: center; animation: sz-halloween-schweben 2.6s ease-in-out infinite alternate; }
.sz-halloween-bonbon:nth-child(2n) { animation-duration: 3.1s; animation-delay: -.8s; }
.sz-halloween-bonbon:nth-child(3n) { animation-duration: 2.2s; animation-delay: -1.4s; }
.sz-halloween-szene-flug { position: absolute; left: 30px; top: 26px; width: 120px; height: 50px; }

/* ---------- Kachel ---------- */
.sz-halloween-kachel { min-height: 250px; color: #FFF6E8;
  background: radial-gradient(52% 58% at 82% 80%, rgba(255, 136, 32, .36), rgba(255, 136, 32, 0) 70%),
    linear-gradient(162deg, #31234D 0%, #1D1532 52%, #120D1F 100%);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .06); }
.sz-halloween-kachel:hover { color: #FFF6E8; box-shadow: 0 16px 34px rgba(30, 10, 50, .38), inset 0 0 0 1.5px rgba(255, 170, 80, .45); }
.sz-halloween-kachel:focus-visible { outline-color: #FF9B33; }
.sz-halloween-kachel-nacht { inset: 0; overflow: hidden; border-radius: inherit; }
.sz-halloween-kachel-sterne { position: absolute; inset: 0 0 30% 0; opacity: .75;
  background-image: radial-gradient(1.3px 1.3px at 12% 22%, #FFF6DA 50%, transparent 55%), radial-gradient(1px 1px at 34% 12%, #FFF6DA 50%, transparent 55%),
    radial-gradient(1.2px 1.2px at 57% 30%, #FFF6DA 50%, transparent 55%), radial-gradient(1px 1px at 76% 9%, #FFF6DA 50%, transparent 55%), radial-gradient(1.4px 1.4px at 90% 44%, #FFF6DA 50%, transparent 55%);
  background-size: 260px 160px; }
.sz-halloween-kachel-mond { position: absolute; right: 8px; top: -2px; width: 96px; height: 96px; }
.sz-halloween-kachel-fledermaeuse { position: absolute; right: 92px; top: 26px; width: 84px; height: 42px; animation: sz-halloween-flattern 5s ease-in-out infinite alternate; }
.sz-halloween-kachel-huegel { position: absolute; left: -10%; right: -10%; bottom: -46px; height: 96px; border-radius: 50% 50% 0 0;
  background: radial-gradient(60% 100% at 70% 100%, #0E0A16, #150F21 70%, rgba(21, 15, 33, 0) 100%); }
.sz-halloween-kachel-extra { display: none; position: absolute; left: 44%; bottom: 0; width: 220px; height: 60px; }
.sz-halloween-kachel { container-type: inline-size; }
@container (min-width: 600px) {
  .sz-halloween-kachel-extra { display: block; }
  .sz-halloween-kachel-titel { max-width: 46%; }
  .sz-halloween-kachel-text { max-width: 42%; }
}
.sz-halloween-kachel-netz { position: absolute; left: 0; top: 0; width: 104px; height: 104px; }
.sz-halloween-kachel-pendel { position: absolute; left: calc(61% - 14px); top: 0; width: 28px; height: 82px; transform-origin: 50% 0; animation: sz-halloween-pendel 4.2s ease-in-out infinite alternate; }
.sz-halloween-kachel-faden { position: absolute; left: 13.5px; top: 0; width: 1px; height: 58px; background: linear-gradient(180deg, rgba(240, 232, 255, .1), rgba(240, 232, 255, .6)); }
.sz-halloween-kachel-spinne { position: absolute; left: 0; top: 50px; width: 28px; height: 31px; }
.sz-halloween-kachel-nebel { position: absolute; left: -10%; right: -10%; bottom: -20px; height: 74px; border-radius: 50%;
  background: radial-gradient(50% 50% at 50% 50%, rgba(200, 190, 232, .22), rgba(200, 190, 232, 0)); }
.sz-halloween-kachel-kuerbis { right: -4px; bottom: 2px; width: min(47%, 186px); aspect-ratio: 120 / 112; }
.sz-halloween-kachel-glut { position: absolute; left: 50%; top: 58%; width: 200%; height: 170%; transform: translate(-50%, -50%); border-radius: 50%;
  background: radial-gradient(closest-side, rgba(255, 150, 40, .45), rgba(255, 122, 24, .12) 56%, rgba(255, 122, 24, 0)); will-change: opacity; }
.sz-halloween-kachel:hover .sz-halloween-kachel-kuerbis svg { animation: sz-halloween-wackeln .7s ease-in-out; transform-origin: 50% 96%; }
.sz-halloween-kachel-label { color: #FFB45C; }
.sz-halloween-kachel-titel { display: block; max-width: 64%; margin-top: 8px; color: #fff; font-size: clamp(25px, 2.3vw, 31px); font-weight: 800; line-height: 1.04; letter-spacing: -0.035em; text-wrap: balance; }
.sz-halloween-kachel-text { display: block; max-width: 57%; margin: 10px 0 18px; color: rgba(255, 244, 228, .88); font-size: 14.5px; line-height: 1.45; text-wrap: pretty; }
.sz-halloween-kachel-knopf { align-self: flex-start; display: inline-flex; align-items: center; gap: 8px; min-height: 44px; margin-top: auto; padding: 0 18px; border-radius: 999px;
  background: linear-gradient(180deg, #FFAA45, #F07A1C); color: #1E1206; font-size: 15px; font-weight: 800;
  box-shadow: 0 6px 18px rgba(240, 122, 28, .38), inset 0 1px 0 rgba(255, 255, 255, .45); transition: transform .2s ease, box-shadow .2s ease; }
.sz-halloween-kachel:hover .sz-halloween-kachel-knopf { transform: translateY(-1px); box-shadow: 0 8px 24px rgba(255, 140, 40, .55), inset 0 1px 0 rgba(255, 255, 255, .45); }
.sz-halloween-kachel .sz-halloween-ohne, .sz-halloween-kachel[data-gutschein="0"] .sz-halloween-mit { display: none; }
.sz-halloween-kachel[data-gutschein="0"] .sz-halloween-ohne { display: inline; }
.sz-halloween-kachel[data-gutschein="0"] .sz-halloween-kachel-text.sz-halloween-ohne { display: block; }
body.sz-halloween-aus .sz-halloween-sonder { display: none !important; }
@media (max-width: 380px) {
  .sz-halloween-kachel-titel { max-width: 70%; }
  .sz-halloween-kachel-text { max-width: 60%; font-size: 14px; }
}

/* ---------- Handy ---------- */
@media (max-width: 640px) {
  .sz-halloween-eckennetz { width: 128px; height: 128px; }
  .sz-halloween-ecke-links { left: 54px; width: 70px; height: 60px; }
  .sz-halloween-ecke-rechts { width: 120px; height: 70px; }
  .sz-halloween-sonder { right: 8px; bottom: 4px; width: 74px; height: 70px; }
  .sz-halloween-schild { right: 46px; bottom: 56px; font-size: 12px; padding: 4px 8px 5px; }
  .sz-halloween-nebel { height: 26vh; }
}

/* ---------- Bewegungen ---------- */
@keyframes sz-halloween-puls { 0% { opacity: .9; transform: scale(.82); } 70% { opacity: 0; transform: scale(1.28); } 100% { opacity: 0; transform: scale(1.28); } }
@keyframes sz-halloween-schild { 0%, 100% { transform: rotate(-4deg); } 50% { transform: rotate(3deg); } }
@keyframes sz-halloween-klopf {
  0% { transform: none; } 12% { transform: rotate(-6deg) translateY(-2px); } 24% { transform: rotate(5deg); } 36% { transform: rotate(-5deg) translateY(-2px); }
  48% { transform: rotate(4deg); } 60% { transform: rotate(-3deg) translateY(-1px); } 74% { transform: rotate(2deg); } 100% { transform: none; }
}
@keyframes sz-halloween-wackeln { 0%, 100% { transform: none; } 25% { transform: rotate(-4deg); } 55% { transform: rotate(3deg); } 80% { transform: rotate(-1.5deg); } }
@keyframes sz-halloween-flattern { from { transform: translate(0, 0); } to { transform: translate(-6px, 5px); } }
@keyframes sz-halloween-pendel { from { transform: rotate(-9deg); } to { transform: rotate(9deg); } }
@keyframes sz-halloween-schweben { from { transform: translateY(0) rotate(-8deg); } to { transform: translateY(-7px) rotate(10deg); } }

body.sz-halloween-aus .sz-halloween-kachel *, body.sz-halloween-aus .sz-halloween-kachel *::before { animation: none !important; }
@media (prefers-reduced-motion: reduce) {
  .sz-halloween-puls, .sz-halloween-schild,
  .sz-halloween-kachel-pendel, .sz-halloween-kachel-fledermaeuse, .sz-halloween-bonbon,
  .sz-halloween-kachel:hover .sz-halloween-kachel-kuerbis svg, .is-klopf .sz-halloween-kuerbis-svg { animation: none !important; }
  .sz-halloween-deckel, .sz-halloween-sonder, .sz-halloween-himmel, .sz-halloween-nebel, .sz-halloween-kachel-knopf { transition: none !important; }
  .sz-halloween-sonder:hover { transform: none; }
}
@media print { .sz-halloween-deko, .sz-halloween-sonder { display: none !important; } }
@media (forced-colors: active) { .sz-halloween-deko { display: none !important; } }