/* ============================================================
   Flamingo Saison-Overlay · Stand 06.11.2026
   Weihnachten, Ostern, Pride, Halloween/Herbst als Schicht über
   der fertigen Website. Gebaut sind „weihnachten“ und „ostern“.

   Grundsatz: Das Overlay fasst das Grunddesign nicht an. Es legt
   eigene, feste Ebenen über die Seite, alle mit pointer-events:
   none und aria-hidden. Steht der Schalter auf aus, ist auf
   html kein data-saison gesetzt und von alledem ist nichts da.
   Kein Abschnitt, kein Text, kein Abstand ändert sich.

   Ebenen (z-index der Website: Kopfzeile 50, Vorhang 1000):
     43  Dunst (Reif / Frühlingslicht in den Ecken)
     45  Fall (Schnee / Blüten, Canvas)
     46  Wer vorbeikommt (Rentier / Osterhase)
     48  Kette unter der Kopfzeile
     60  Schalter
   Der Kopfschmuck sitzt im Hero direkt am Flamingokopf, die
   Figuren in den Lücken neben den Zwischenrufen.
   ============================================================ */

:root {
  --saison-schnee: #ffffff;
  --saison-eis: #c5ffff;          /* Ice */
  --saison-tuerkis: #74f1eb;
  --saison-ingo: #e11d73;
  --saison-gelb: #ff9700;
  --saison-berry: #250026;
}

/* ---------- Schalter ----------------------------------------
   Liegt immer auf der Seite, auch im Normalmodus, sonst käme man
   nicht zurück. Optik vom Schalter „Handwerk ⟷ KI“ geborgt. */

.saison-schalter {
  position: fixed; z-index: 60;
  right: max(16px, env(safe-area-inset-right));
  bottom: max(16px, env(safe-area-inset-bottom));
  display: flex; align-items: center;
  transition: opacity .3s, transform .3s;
}
.saison-knopf {
  display: inline-flex; align-items: center; gap: 10px; cursor: pointer;
  border: 0; border-radius: 999px; padding: 9px 14px 9px 12px;
  background: var(--saison-berry); color: #fff;
  font: 500 12px/1 var(--mono, ui-monospace, monospace);
  letter-spacing: .08em; text-transform: uppercase;
  box-shadow: 0 10px 34px rgba(37, 0, 38, .28);
  transition: background .3s, box-shadow .3s, transform .2s;
}
.saison-knopf:hover { transform: translateY(-1px); }
.saison-knopf:focus-visible { outline: 3px solid var(--saison-tuerkis); outline-offset: 3px; }
.saison-knopf .saison-icon { display: block; width: 16px; height: 16px; flex: none; opacity: .6; transition: opacity .3s, transform .6s cubic-bezier(.2,.8,.2,1); }
.saison-knopf .saison-icon svg { display: block; width: 100%; height: 100%; }
.saison-bahn { position: relative; flex: none; width: 34px; height: 18px; border-radius: 999px; background: rgba(255, 255, 255, .28); }
.saison-bahn i { position: absolute; top: 3px; left: 3px; width: 12px; height: 12px; border-radius: 50%; background: #fff;
  transition: transform .4s cubic-bezier(.2,.8,.2,1), background .3s; }

.saison-knopf[aria-checked="true"] { background: var(--saison-ingo); }
.saison-knopf[aria-checked="true"] .saison-bahn i { transform: translateX(16px); background: var(--saison-eis); }
.saison-knopf[aria-checked="true"] .saison-icon { opacity: 1; }
/* Die Schneeflocke dreht sich beim Einschalten, das Osterei wackelt nur —
   ein Ei auf dem Kopf sähe aus wie ein Fehler */
.saison-schalter--weihnachten .saison-knopf[aria-checked="true"] .saison-icon { transform: rotate(180deg); }
.saison-schalter--ostern .saison-knopf[aria-checked="true"] .saison-icon { animation: saison-wackeln .7s ease-in-out; }
@keyframes saison-wackeln { 25% { transform: rotate(-14deg); } 60% { transform: rotate(10deg); } }

/* Im Handy-Menü und im Editor stört der Schalter nur */
.menue-offen .saison-schalter { opacity: 0; pointer-events: none; transform: translateY(8px); }

/* Unter 1100 px wohnt unten die Daumen-Pille (Menü · Wo bin ich · Let's talk,
   css/vogel.css). Der Saison-Schalter setzt sich darüber und fährt mit ihr
   nach unten, wenn sie beim Scrollen verschwindet. */
@media (max-width: 1100px) {
  .saison-schalter { bottom: calc(80px + env(safe-area-inset-bottom, 0px)); }
  .nav-an.daumen-weg .saison-schalter { transform: translateY(64px); transition: transform .4s cubic-bezier(.2, .8, .2, 1); }
}

@media (max-width: 720px) {
  .saison-knopf { padding: 9px 12px; }
  .saison-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}

/* ---------- Deko-Ebenen -------------------------------------
   Werden von saison.js nur angelegt, wenn ein Thema läuft, und
   wieder entfernt, wenn es ausgeht. */

.saison-ebene { position: fixed; pointer-events: none; }

/* Dunst: zu Weihnachten Reif, zu Ostern warmes Frühlingslicht */
.saison-dunst {
  inset: 0; z-index: 43;
  background:
    radial-gradient(58vw 30vh at 0% 0%, rgba(197, 255, 255, .40), transparent 72%),
    radial-gradient(52vw 26vh at 100% 0%, rgba(116, 241, 235, .24), transparent 72%),
    radial-gradient(74vw 22vh at 50% 100%, rgba(197, 255, 255, .24), transparent 76%);
  opacity: 0; transition: opacity 1.2s ease;
}
[data-saison="ostern"] .saison-dunst {
  background:
    radial-gradient(58vw 32vh at 0% 0%, rgba(255, 151, 0, .13), transparent 72%),
    radial-gradient(52vw 28vh at 100% 0%, rgba(225, 29, 115, .08), transparent 72%),
    radial-gradient(74vw 22vh at 50% 100%, rgba(255, 214, 140, .16), transparent 76%);
}
/* width/height ausdrücklich: ein <canvas> ist ein ersetztes Element und bliebe
   sonst bei seinen 300 × 150 Eigenmaßen stehen, trotz inset: 0 */
.saison-fall { inset: 0; width: 100%; height: 100%; z-index: 45; opacity: 0; transition: opacity 1.2s ease; }
.saison-kette {
  left: 0; right: 0; top: var(--kopf-h, 72px); z-index: 48; height: 52px;
  opacity: 0; transform: translateY(-12px);
  transition: opacity .7s ease, transform .7s cubic-bezier(.2,.8,.2,1);
}
.saison-kette svg { display: block; width: 100%; height: 100%; overflow: visible; }

/* Da: einblenden */
[data-saison] .saison-dunst,
[data-saison] .saison-fall { opacity: 1; }
[data-saison] .saison-kette { opacity: 1; transform: none; }
.menue-offen .saison-kette { opacity: 0; }
/* Die Kette hängt an der Kopfzeile: fährt diese beim Runterscrollen weg
   (html.kopf-weg, css/vogel.css), geht die Kette im selben Takt mit. */
.nav-an.kopf-weg .saison-kette {
  opacity: 0;
  transform: translateY(-100%) translateY(calc(-1 * var(--kopf-h, 72px)));
  transition: transform .3s cubic-bezier(.6, 0, .9, .4), opacity .3s;
}

/* Lichterkette: jede Birne glimmt in eigenem Takt (Verzögerung aus saison.js) */
.saison-birne { animation: saison-glimm 3.2s ease-in-out infinite; transform-box: fill-box; transform-origin: 50% 0; }
.saison-schein { animation: saison-schein 3.2s ease-in-out infinite; transform-box: fill-box; transform-origin: 50% 50%; }
@keyframes saison-glimm { 0%, 100% { opacity: .72; } 50% { opacity: 1; } }
@keyframes saison-schein { 0%, 100% { opacity: .18; transform: scale(.82); } 50% { opacity: .5; transform: scale(1.12); } }

/* Eierkette: jedes Ei pendelt am Faden, um den Punkt, an dem es hängt */
.saison-ei-haengt { animation: saison-pendeln 3.4s ease-in-out infinite; transform-box: fill-box; transform-origin: 50% 0; }
@keyframes saison-pendeln { 0%, 100% { transform: rotate(-7deg); } 50% { transform: rotate(7deg); } }

/* ---------- Kopfschmuck auf dem Hero-Flamingo ---------------
   Liegt als Geschwister neben dem Kopfbild im selben Kasten:
   gleiche Größe, gleicher Drehpunkt. saison.js kopiert jeden
   Frame die Transformation des Bildes, damit Mütze und Ohren
   jedes Nicken mitmachen. Die SVG rechnet im Koordinatensystem
   des Kopfbildes (216 × 296), das Auge liegt bei 65,8 | 60,6 —
   darum sitzt alles pixelgenau auf dem Schädel. */
.saison-kopfschmuck {
  position: absolute; display: block; pointer-events: none; max-width: none; z-index: 4;
  width: 3.672em; height: auto;
  left: calc(50% - 1.1186em); top: calc(50% - 1.0302em);
  transform-origin: 30.46% 20.47%;
  overflow: visible;
  opacity: 0;   /* Deckkraft und Drehung kommen jeden Frame vom Kopfbild (saison.js) */
}

/* ---------- Statt Satzpunkt: Christbaumkugel oder Osterei ----
   Das Zeichen bleibt stehen und hält die Breite, es wird nur
   durchsichtig. Kugel bzw. Ei sitzen darüber, alles in em: sie
   wachsen also mit der Überschrift mit. */
.saison-kugel { position: relative; display: inline-block; }
.saison-kugel-zeichen { color: transparent; }
.saison-kugel i {
  position: absolute; left: 50%; bottom: .01em;
  width: .23em; height: .23em; margin-left: -.115em; border-radius: 50%;
  background: radial-gradient(circle at 34% 30%, rgba(255, 255, 255, .85), rgba(255, 255, 255, 0) 52%), var(--kugel, var(--saison-ingo));
  /* innerer Rand, damit auch die helle Kugel auf weißem Papier rund wirkt */
  box-shadow: inset 0 -.035em .06em rgba(37, 0, 38, .28), 0 .02em .05em rgba(37, 0, 38, .18);
}
/* Kappe der Christbaumkugel */
.saison-kugel i::before {
  content: ""; position: absolute; left: 50%; top: -.055em;
  width: .075em; height: .06em; margin-left: -.0375em;
  border-radius: .015em .015em 0 0; background: var(--saison-gelb);
}
/* Osterei: oben schmaler als unten, mit glattem weißem Band — kein
   Zickzack (Zweideutigkeits-Check), keine Kappe */
.saison-kugel--ei i {
  width: .19em; height: .25em; margin-left: -.095em; bottom: .005em;
  border-radius: 50% 50% 50% 50% / 58% 58% 42% 42%;
  background:
    radial-gradient(circle at 34% 28%, rgba(255, 255, 255, .8), rgba(255, 255, 255, 0) 45%),
    linear-gradient(transparent 50%, rgba(255, 255, 255, .85) 50%, rgba(255, 255, 255, .85) 62%, transparent 62%),
    var(--kugel, var(--saison-ingo));
}
.saison-kugel--ei i::before { display: none; }
/* Solange der Flamingo Kugel oder Ei trägt, ist sie im Titel nicht da */
.saison-kugel--weg i { opacity: 0; }

/* Was der Flamingo in „Wie wir arbeiten“ aufhebt: js/flamingo.js bewegt
   dafür einen eigenen Punkt (.flamingo-punkt), saison.js macht eine Kugel
   oder ein Ei daraus. Größe, Form und Farbe setzt es dort in Pixeln, hier
   kommt nur die Kappe der Kugel dazu — in Prozent, damit sie mitwächst. */
.saison-kugel-flug::before {
  content: ""; position: absolute; left: 50%; top: -26%;
  width: 34%; height: 28%; transform: translateX(-50%);
  border-radius: 14% 14% 0 0; background: var(--saison-gelb);
}
.saison-kugel-flug--ei::before { display: none; }

/* ---------- Figuren in den Lücken ---------------------------
   Schneemänner und Osternester stehen neben den Zwischenrufen,
   absolut gesetzt: die Zeile rückt kein Stück. Unter 900 px ist
   daneben kein Platz, dort bleiben sie weg. */
.saison-buehne { position: relative; }
.saison-figur {
  position: absolute; bottom: 4px; z-index: 2; pointer-events: none;
  /* Nie höher als die Lücke, in der sie stehen: sonst ragt etwa der Zylinder
     in den Abschnitt darüber, und auf dunklem Grund sieht Berry auf Berry
     aus, als wäre er abgeschnitten. */
  height: min(calc(var(--figur-h, 142px) * var(--gross, 1)), calc(100% - 8px));
  opacity: 0; animation: saison-auftauchen .8s ease .25s forwards;
}
.saison-figur--schneemann { --figur-h: 142px; }
.saison-figur--nest { --figur-h: 96px; }
.saison-figur svg { display: block; height: 100%; width: auto; }
/* Der Zwischenruf läuft über die ganze Breite, sein Satz steht mittig —
   die Figuren stellen sich in den Rand links und rechts davon. */
.saison-figur--links { left: clamp(16px, 8vw, 180px); }
.saison-figur--rechts { right: clamp(16px, 8vw, 180px); }
@keyframes saison-auftauchen { to { opacity: 1; } }
@media (max-width: 900px) { .saison-figur { display: none; } }

/* ---------- Wer ab und zu vorbeikommt -----------------------
   Die Bahn bewegt sich seitwärts, die Figur darin wippt bzw. hüpft —
   zwei Ebenen, damit sich die Bewegungen nicht ins Gehege kommen. */
.saison-vorbei { left: 0; right: 0; height: 0; z-index: 46; }
.saison-vorbei-bahn { position: absolute; left: 0; top: 0; transform: translateX(-32vw); opacity: 0; }
.saison-vorbei svg { display: block; height: auto; }

/* Rentier: fliegt oben in wechselnder Höhe */
.saison-vorbei--rentier { top: var(--hoehe, 16vh); }
.saison-vorbei--rentier svg { width: clamp(100px, 12vw, 180px); }
.saison-vorbei--rentier.fliegt .saison-vorbei-bahn { animation: saison-flug 13s linear; }
.saison-vorbei--rentier.fliegt svg { animation: saison-wippen 1.8s ease-in-out infinite; }
@keyframes saison-flug {
  0% { transform: translateX(-32vw); opacity: 0; }
  7%, 93% { opacity: 1; }
  100% { transform: translateX(132vw); opacity: 0; }
}
@keyframes saison-wippen { 0%, 100% { transform: translateY(0) rotate(-2deg); } 50% { transform: translateY(-10px) rotate(2deg); } }

/* Osterhase: hoppelt unten am Rand entlang. Am Handy höher, über der
   Daumen-Pille, sonst verschwände er dahinter. */
.saison-vorbei--hase { top: auto; bottom: calc(18px + env(safe-area-inset-bottom, 0px)); }
.saison-vorbei--hase .saison-vorbei-bahn { top: auto; bottom: 0; }
.saison-vorbei--hase svg { width: clamp(70px, 7vw, 112px); transform-origin: 50% 100%; }
.saison-vorbei--hase.fliegt .saison-vorbei-bahn { animation: saison-hoppelweg 15s linear; }
.saison-vorbei--hase.fliegt svg { animation: saison-hopser .64s cubic-bezier(.3, 0, .7, 1) infinite; }
@keyframes saison-hoppelweg {
  0% { transform: translateX(-12vw); opacity: 0; }
  4%, 96% { opacity: 1; }
  100% { transform: translateX(112vw); opacity: 0; }
}
@keyframes saison-hopser {
  0%, 100% { transform: translateY(0) scale(1.06, .9); }
  18% { transform: translateY(-6px) scale(.96, 1.05) rotate(-3deg); }
  50% { transform: translateY(-38px) scale(1, 1) rotate(-6deg); }
  82% { transform: translateY(-6px) scale(.98, 1.03) rotate(2deg); }
}
@media (max-width: 1100px) {
  .saison-vorbei--hase { bottom: calc(132px + env(safe-area-inset-bottom, 0px)); }
}

/* ---------- Ruhiger Modus -----------------------------------
   Wer Bewegung abbestellt hat, bekommt Schnee und Blüten, die
   stehen: saison.js zeichnet sie einmal und lässt sie stehen.
   Rentier und Hase kommen gar nicht erst. */
@media (prefers-reduced-motion: reduce) {
  .saison-birne, .saison-schein, .saison-ei-haengt { animation: none; }
  .saison-figur { animation: none; opacity: 1; }
  .saison-schein { opacity: .34; }
  .saison-knopf, .saison-knopf:hover, .saison-bahn i, .saison-knopf .saison-icon { transition: none; transform: none; animation: none; }
  .saison-knopf[aria-checked="true"] .saison-bahn i { transform: translateX(16px); }
}

/* ---------- Druck --------------------------------------------- */
@media print {
  .saison-schalter, .saison-ebene, .saison-kopfschmuck, .saison-figur { display: none !important; }
}