/* Saison-Modi (siehe saison.js). body.saison + body.<modus>. Nur Farbe/Deko – Layout,
   Beschriftungen und Klickflächen bleiben exakt wie im Normalbetrieb.

   Jede Jahreszeit setzt nur ihre Farben (Variablen); die Regeln darunter gelten für alle. */

body.halloween   { --sz-bg: #f7f2fb; --sz-top: linear-gradient(90deg, #2a1440, #4b1d5e 55%, #7a2d12); --sz-linie: #f97316; --sz-akz: #f97316; --sz-akz2: #c2410c; --sz-hell: #fcd9b6; --sz-tag-bg: #fff1e6; --sz-tag: #c2410c; --sz-tag-icon: '🧹 '; }
body.herbst      { --sz-bg: #fbf6ee; --sz-top: linear-gradient(90deg, #7c2d12, #b45309 55%, #a16207); --sz-linie: #f59e0b; --sz-akz: #d97706; --sz-akz2: #b45309; --sz-hell: #fde68a; --sz-tag-bg: #fef3c7; --sz-tag: #92400e; --sz-tag-icon: '🍂 '; }
body.winter      { --sz-bg: #f1f6fb; --sz-top: linear-gradient(90deg, #0c2a4d, #1e4f86 55%, #5b8fc7); --sz-linie: #bfe0ff; --sz-akz: #3b82f6; --sz-akz2: #1d4ed8; --sz-hell: #dbeafe; --sz-tag-bg: #e0f2fe; --sz-tag: #075985; --sz-tag-icon: '❄️ '; }
body.weihnachten { --sz-bg: #f8f5f0; --sz-top: linear-gradient(90deg, #7f1d1d, #b91c1c 50%, #14532d); --sz-linie: #fbbf24; --sz-akz: #dc2626; --sz-akz2: #991b1b; --sz-hell: #fde68a; --sz-tag-bg: #fee2e2; --sz-tag: #991b1b; --sz-tag-icon: '🎄 '; }
body.silvester   { --sz-bg: #f4f3fa; --sz-top: linear-gradient(90deg, #0b1026, #1e1b4b 60%, #3b2f0b); --sz-linie: #fbbf24; --sz-akz: #d4a017; --sz-akz2: #a16207; --sz-hell: #fde68a; --sz-tag-bg: #fef9c3; --sz-tag: #854d0e; --sz-tag-icon: '✨ '; }
body.fasching    { --sz-bg: #fdf7ff; --sz-top: linear-gradient(90deg, #db2777, #9333ea 35%, #2563eb 65%, #16a34a); --sz-linie: #facc15; --sz-akz: #db2777; --sz-akz2: #9333ea; --sz-hell: #fef08a; --sz-tag-bg: #fae8ff; --sz-tag: #86198f; --sz-tag-icon: '🎭 '; }
body.valentin    { --sz-bg: #fff5f8; --sz-top: linear-gradient(90deg, #9f1239, #e11d48 55%, #f472b6); --sz-linie: #fecdd3; --sz-akz: #e11d48; --sz-akz2: #be123c; --sz-hell: #ffe4e6; --sz-tag-bg: #ffe4e6; --sz-tag: #be123c; --sz-tag-icon: '💕 '; }
body.fruehling   { --sz-bg: #f6fbf4; --sz-top: linear-gradient(90deg, #15803d, #4ade80 55%, #f9a8d4); --sz-linie: #fbcfe8; --sz-akz: #16a34a; --sz-akz2: #15803d; --sz-hell: #fce7f3; --sz-tag-bg: #dcfce7; --sz-tag: #166534; --sz-tag-icon: '🌷 '; }
body.ostern      { --sz-bg: #fbf9f2; --sz-top: linear-gradient(90deg, #a78bfa, #f9a8d4 40%, #fde047 75%, #86efac); --sz-linie: #fde047; --sz-akz: #8b5cf6; --sz-akz2: #7c3aed; --sz-hell: #fff; --sz-tag-bg: #ede9fe; --sz-tag: #6d28d9; --sz-tag-icon: '🐣 '; }
body.sommer      { --sz-bg: #f4fbff; --sz-top: linear-gradient(90deg, #0369a1, #0ea5e9 50%, #fbbf24); --sz-linie: #fde047; --sz-akz: #0ea5e9; --sz-akz2: #0369a1; --sz-hell: #e0f2fe; --sz-tag-bg: #e0f2fe; --sz-tag: #075985; --sz-tag-icon: '☀️ '; }
body.viehscheid  { --sz-bg: #f6faf1; --sz-top: linear-gradient(90deg, #166534, #3f8f3a 55%, #a3a13a); --sz-linie: #fde047; --sz-akz: #4d7c0f; --sz-akz2: #3f6212; --sz-hell: #fef9c3; --sz-tag-bg: #ecfccb; --sz-tag: #3f6212; --sz-tag-icon: '🐄 '; }


/* ---- Für alle Modi ---- */
body.saison { background: var(--sz-bg); }
body.saison .topbar { background: var(--sz-top); color: #fff; border-bottom-color: var(--sz-linie); }
body.saison .topbar .ver { color: var(--sz-hell); }
body.saison .topbar .btn.ghost { background: rgba(255,255,255,.1); color: #fff; border-color: rgba(255,255,255,.3); }
body.saison .topbar .pill { background: var(--sz-akz); color: #fff; }
body.saison .brand .dot { width: auto; height: auto; background: none; font-size: 18px; line-height: 1; animation: hw-wackel 2.8s ease-in-out infinite; }
body.saison .brand .dot::before { content: var(--saison-icon); }
body.saison .tab.active { background: linear-gradient(135deg, var(--sz-akz), var(--sz-akz2)); border-color: var(--sz-akz2); }
body.saison .tag.clean { background: var(--sz-tag-bg); color: var(--sz-tag); white-space: nowrap; }
body.saison .tag.clean::before { content: var(--sz-tag-icon); }
body.saison .btn:not(.ghost) { background: linear-gradient(135deg, var(--sz-akz), var(--sz-akz2)); border-color: var(--sz-akz2); }
body.saison .login-card { box-shadow: 0 0 0 2px var(--sz-akz), 0 10px 30px rgba(0,0,0,.12); }
body.saison .card { box-shadow: 0 2px 10px rgba(0,0,0,.05); }

/* Ostern hat einen hellen Kopf -> dunkle Schrift (muss NACH den allgemeinen Regeln stehen). */
body.ostern .topbar { color: #3b0764; }
body.ostern .topbar .ver { color: #6d28d9; }
body.ostern .topbar .btn.ghost { color: #3b0764; border-color: rgba(59, 7, 100, .25); background: rgba(255,255,255,.4); }

/* Effekt-Ebenen: nie klickbar. */
.hw-layer, .hw-drift { position: fixed; inset: 0; pointer-events: none; z-index: 90; overflow: hidden; }
.hw-drift { z-index: 1; }
.hw-spark { position: absolute; line-height: 1; will-change: transform, opacity; }
@keyframes hw-wackel { 0%, 100% { transform: rotate(-8deg); } 50% { transform: rotate(8deg); } }

/* Begrüßung oben (einmal pro Tag und Sitzung). */
.hw-banner { position: fixed; top: calc(12px + env(safe-area-inset-top)); left: 50%; transform: translateX(-50%); z-index: 95;
  display: flex; align-items: center; gap: 12px; max-width: calc(100vw - 32px);
  background: var(--sz-top, #333); color: #fff; border: 1px solid var(--sz-linie, #fff); border-radius: 14px;
  padding: 10px 12px 10px 14px; box-shadow: 0 10px 30px rgba(0,0,0,.25); transition: opacity .6s, transform .6s; }
body.ostern .hw-banner { color: #3b0764; }
.hw-banner.weg { opacity: 0; transform: translate(-50%, -12px); }
.hw-banner-k { font-size: 28px; animation: hw-wackel 1.6s ease-in-out infinite; }
.hw-banner-s { font-size: 13px; color: var(--sz-hell, #eee); }
body.ostern .hw-banner-s { color: #5b21b6; }
.hw-banner button { background: none; border: 0; color: inherit; font-size: 20px; cursor: pointer; padding: 0 4px; }

/* Niesel: Dinge fallen langsam von oben nach unten und schaukeln (Blätter, Blüten, Konfetti). */
.sz-fall { position: absolute; top: -40px; line-height: 1; animation-name: hb-fall, hb-schaukel; animation-timing-function: linear, ease-in-out; animation-iteration-count: infinite, infinite; animation-direction: normal, alternate; }
.sz-plaettchen { width: 1em; height: .45em; border-radius: 2px; }
@keyframes hb-fall { 0% { top: -40px; } 100% { top: calc(100% + 40px); } }
@keyframes hb-schaukel { 0% { transform: translateX(-26px) rotate(-35deg); } 100% { transform: translateX(26px) rotate(35deg); } }

/* Schnee: weiche weiße Punkte. */
.sz-flocke { position: absolute; top: -12px; border-radius: 50%; background: #fff; box-shadow: 0 0 4px rgba(120, 160, 210, .7);
  animation-name: sz-schnee-fall, sz-schnee-wiegen; animation-timing-function: linear, ease-in-out; animation-iteration-count: infinite, infinite; animation-direction: normal, alternate; }
@keyframes sz-schnee-fall { 0% { top: -12px; } 100% { top: calc(100% + 12px); } }
@keyframes sz-schnee-wiegen { 0% { transform: translateX(-14px); } 100% { transform: translateX(14px); } }
.sz-gestoeber { z-index: 91; transition: opacity 1.2s; }
.sz-gestoeber .sz-flocke { animation-duration: 3.5s, 1.4s !important; }
.sz-gestoeber.weg { opacity: 0; }

/* Novembernebel. */
.sz-nebel { position: absolute; inset: -20% -50%; background:
  radial-gradient(ellipse 40% 18% at 30% 70%, rgba(255,255,255,.55), transparent 70%),
  radial-gradient(ellipse 35% 15% at 70% 40%, rgba(255,255,255,.45), transparent 70%),
  radial-gradient(ellipse 45% 20% at 50% 90%, rgba(255,255,255,.5), transparent 70%);
  animation: sz-nebel 40s ease-in-out infinite alternate; }
@keyframes sz-nebel { from { transform: translateX(-12%); } to { transform: translateX(12%); } }

/* Schneeball-Klatscher. */
.sz-splat { position: absolute; filter: drop-shadow(0 2px 3px rgba(80, 120, 170, .45)); }
.sz-splat svg { width: 100%; height: 100%; }

/* Weihnachten: Lichterkette an der Kopfzeile. */
.sz-lichter { position: absolute; left: 0; right: 0; bottom: -9px; height: 16px; pointer-events: none; z-index: 1;
  background: radial-gradient(circle at 50% -40%, transparent 55%, rgba(20, 30, 20, .7) 56%, transparent 62%) 0 0 / 46px 16px repeat-x; }
.sz-lichter i { position: absolute; top: 5px; width: 8px; height: 11px; margin-left: -4px; border-radius: 50% 50% 45% 45%; background: var(--f);
  box-shadow: 0 0 6px var(--f), 0 0 14px var(--f); animation: sz-birne 1.2s steps(1) infinite; }
@keyframes sz-birne { 0%, 100% { opacity: 1; } 50% { opacity: .25; box-shadow: none; } }

/* Silvester: funkelnde Sterne, Raketen, Funken. */
.sz-stern { position: absolute; width: 3px; height: 3px; border-radius: 50%; background: #fde68a; box-shadow: 0 0 6px #fde68a; animation: sz-funkeln 2.4s ease-in-out infinite; }
@keyframes sz-funkeln { 0%, 100% { opacity: .15; transform: scale(.6); } 50% { opacity: .9; transform: scale(1.3); } }
.sz-rakete { position: absolute; width: 3px; height: 26px; border-radius: 2px; background: linear-gradient(to top, transparent, #fff7c2 60%, #fff); box-shadow: 0 0 8px #fde68a; }
.sz-funke { position: absolute; width: 8px; height: 8px; border-radius: 50%; }
.sz-nacht { position: fixed; inset: 0; z-index: 89; pointer-events: none; opacity: 0; transition: opacity .8s;
  background: radial-gradient(ellipse at 50% 30%, #1b1f4a, #070818 75%); }
.sz-nacht.an { opacity: .88; }
.sz-papier { position: absolute; width: 9px; height: 5px; border-radius: 1px; }
.sz-schnuppe { position: absolute; width: 120px; height: 2px; border-radius: 2px; background: linear-gradient(90deg, #fff, rgba(255,255,255,0)); box-shadow: 0 0 8px #fff; }

/* Fasching: Luftschlangen hängen von der Kopfzeile. */
.sz-schlangen { position: absolute; left: 0; right: 0; top: 100%; height: 0; pointer-events: none; z-index: 1; }
.sz-schlangen svg { position: absolute; top: -2px; transform-origin: top center; animation: sz-baumel 3s ease-in-out infinite alternate; }
@keyframes sz-baumel { from { transform: rotate(-7deg); } to { transform: rotate(7deg); } }

/* Viehscheid: Blumengirlande unter der Kopfzeile, geschmückte Kühe. */
.sz-girlande { position: absolute; left: 0; right: 0; top: 100%; overflow: hidden; white-space: nowrap; font-size: 13px; line-height: 1; letter-spacing: 2px; pointer-events: none; z-index: 1; transform: translateY(-5px); }
.sz-kuh { position: relative; display: inline-block; margin: 0 4px; }
.sz-kuh b { position: absolute; left: 50%; top: -.45em; transform: translateX(-50%) scaleX(-1); font-size: .38em; white-space: nowrap; font-weight: normal; }
.sz-kuh em { position: absolute; left: 30%; bottom: .05em; font-size: .32em; font-style: normal; animation: hw-wackel .5s ease-in-out infinite; }

/* Sommer: Sonne oben rechts mit Strahlen, abends Glühwürmchen. */
.sz-sonne { position: absolute; top: -140px; right: -140px; width: 320px; height: 320px; border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 221, 87, .55) 0 22%, rgba(255, 221, 87, .18) 38%, transparent 62%),
  repeating-conic-gradient(rgba(255, 221, 87, .16) 0 8deg, transparent 8deg 20deg);
  animation: sz-drehen 60s linear infinite; }
@keyframes sz-drehen { to { transform: rotate(360deg); } }
.sz-gluehwurm { position: absolute; width: 5px; height: 5px; border-radius: 50%; background: #d9f99d; box-shadow: 0 0 8px 2px #bef264;
  animation-name: sz-schwirren, sz-funkeln; animation-iteration-count: infinite, infinite; animation-direction: alternate, normal; animation-timing-function: ease-in-out, ease-in-out; }
@keyframes sz-schwirren { from { transform: translate(-30px, 10px); } to { transform: translate(30px, -25px); } }

/* Ostern: Ei zum Suchen (das einzige Element, das angetippt werden darf). */
.sz-osterei { position: fixed; z-index: 92; width: 34px; height: 42px; padding: 0; border: 0; background: none; cursor: pointer;
  filter: drop-shadow(0 3px 4px rgba(0,0,0,.25)); animation: sz-ei-wackeln 1.4s ease-in-out infinite, sz-ei-rein .5s ease-out; }
.sz-osterei svg { width: 100%; height: 100%; display: block; }
@keyframes sz-ei-wackeln { 0%, 100% { transform: rotate(-8deg); } 50% { transform: rotate(8deg); } }
@keyframes sz-ei-rein { from { transform: scale(0); } to { transform: scale(1); } }

/* ---- Halloween ---- */
.hw-spider { position: absolute; top: 0; right: 22px; display: flex; flex-direction: column; align-items: center; animation: hw-baumeln 5s ease-in-out infinite; transform-origin: top center; }
.hw-spider i { width: 1px; height: 70px; background: rgba(76, 29, 149, .35); }
.hw-spider span { font-size: 22px; margin-top: -4px; opacity: .8; }
@keyframes hw-baumeln { 0%, 100% { transform: translateY(0) rotate(-4deg); } 50% { transform: translateY(24px) rotate(4deg); } }
.hw-augen { filter: drop-shadow(0 0 8px rgba(250, 204, 21, .9)); }
.hw-netz { position: absolute; font-size: 90px; opacity: .14; line-height: 1; }
.hw-netz.lo { top: 56px; left: -18px; transform: rotate(-12deg); }
.hw-netz.ru { bottom: -14px; right: -14px; transform: rotate(160deg); }
.hw-flacker { position: fixed; inset: 0; z-index: 89; pointer-events: none; opacity: 0; }

/* Große SVG-Spinne: Beine im Spinnengang (Gruppe a/b im Gegentakt), Körper wippt leicht. */
.hw-spinne-gross { position: absolute; left: 0; top: 0; will-change: transform; filter: drop-shadow(0 10px 12px rgba(0,0,0,.45)); }
.hw-spinne-gross svg { width: 100%; height: 100%; display: block; overflow: visible; }
.hw-spinne-gross .sb { transform-box: view-box; }
.hw-spinne-gross.laeuft .sb.ga.l, .hw-spinne-gross.laeuft .sb.gb.r { animation: hw-bein-a .26s ease-in-out infinite alternate; }
.hw-spinne-gross.laeuft .sb.gb.l, .hw-spinne-gross.laeuft .sb.ga.r { animation: hw-bein-b .26s ease-in-out infinite alternate; }
.hw-spinne-gross.laeuft .sk { animation: hw-wipp .13s ease-in-out infinite alternate; transform-box: view-box; transform-origin: 100px 100px; }
.hw-spinne-gross.zuckt .sb.ga { animation: hw-zuck .5s steps(2) 2; }
@keyframes hw-bein-a { from { transform: rotate(-16deg); } to { transform: rotate(14deg); } }
@keyframes hw-bein-b { from { transform: rotate(14deg); } to { transform: rotate(-16deg); } }
@keyframes hw-wipp { from { transform: translateY(-1.5px); } to { transform: translateY(1.5px); } }
@keyframes hw-zuck { 50% { transform: rotate(9deg); } }

@media (prefers-reduced-motion: reduce) {
  body.saison .brand .dot, .hw-banner-k, .hw-spider, .sz-lichter i, .sz-schlangen svg, .sz-sonne { animation: none; }
  .hw-drift { display: none; }
}