/* ==========================================================================
   Saison-Schmuck (Betreiber 24.10.2026) — das Gerüst für jeden Anlass

   „für alle Jahreszeiten die Seiten schmücken — ich möchte das selbst
   einstellen können" und, nach dem Entwurf: „es sollte in jedem Fall immer
   etwas episch sein, glimmern, Effekte … Halloween etwas zum Erschrecken".

   Diese Datei lädt nur, wenn gerade etwas hängt (res.locals.saison,
   app/saisonSchmuck.js) — und mit ihr GENAU EINE Anlass-Datei,
   public/css/saison/<anlass>.css. Die setzt die Farben als Variablen und
   bringt mit, was es nur bei diesem Anlass gibt. Seit dem 25.10.2026 (Plan
   „alle Saisons": fünfzehn Anlässe und Jahreszeiten); bis dahin stand
   Halloween hier mit drin.

   Die Seite trägt am <body>:
     .jt-saison                    es hängt etwas
     .jt-saison--<kennung>         was (halloween, weihnachten, jahreszeit-winter …)
     .jt-saison--anlass|--jahreszeit   Anlass (mit Karten-Ecken) oder Jahreszeit
     .jt-saison--episch|--dezent   Effekte dauerhaft oder nur beim Darüberfahren
     .jt-saison--still             die Person hat „Effekte aus" gewählt (saison.js)

   Die Variablen einer Anlass-Datei (am .jt-saison--<kennung>):
     --saison-akzent-rgb, --saison-akzent-hell-rgb   Umriss, Knopf-Ring
     --saison-glut-rgb, --saison-glimmen-rgb         warmes Glimmen
     --saison-glanz-a|b|c                            der Schimmer über der Überschrift
     --saison-knopf-bild                             das Zubehör an der Knopf-Ecke
     --saison-ecke-bild|lage|groesse|ablauf          die Karten-Ecke (nur Anlässe)

   DIE AUSNAHME VON EINER REGEL. Sonst bewegt sich auf dieser Seite nichts von
   selbst (juicer-topnav.css: „Bewegung nur auf Berührung", Betreiber
   04.09.2026). Für den Saison-Schmuck hat der Betreiber das am 24.10.2026
   ausdrücklich aufgehoben. Drei Bremsen bleiben: „weniger Bewegung" am Gerät,
   „Effekte aus" in der Fußzeile, „Dezent" im Center. Keine Blitze, kein
   Stroboskop — Lichtempfindlichkeit.

   @keyframes heißen alle „saison…": Derselbe Name in zwei Dateien lässt die
   zuletzt geladene für beide gewinnen (tests/keyframeKollisionen).
   ========================================================================== */

/* ── Grundgerüst ───────────────────────────────────────────────────────── */

.jt-saison .juicer-topnav-brand { position: relative; }

.saison-zeichen {
    position: absolute;
    left: -8px;
    top: -13px;
    width: 34px;
    height: 23px;
    transform: rotate(-14deg);
    transform-origin: 60% 90%;
    pointer-events: none;
    overflow: visible;
}

.juicer-topnav-brand:hover .saison-zeichen { animation: saisonHutWippen 520ms cubic-bezier(0.22, 1, 0.36, 1); }

/* Der Seitenkopf macht oben Platz für die Girlande — und schneidet seitlich
   ab: Wandernder Nebel oder Schnee ragte sonst über den Rand, die Seite bekam
   eine waagerechte Scrollleiste (Probe 24.10.2026). Nur seitlich (clip, nicht
   hidden): Das Kronleuchter-Licht (::before) reicht nach oben hinaus. */
.jt-saison .jt-seitenkopf {
    padding-top: calc(clamp(22px, 4vw, 44px) + clamp(46px, 7vw, 82px));
    overflow-x: clip;
}

/* Die Startseite hat ihren eigenen Kopf (leaderboard.css, .lb-hero). */
.jt-saison .lb-hero {
    isolation: isolate;
    padding-top: calc(clamp(26px, 4.4vw, 46px) + clamp(46px, 7vw, 82px));
    overflow-x: clip;
}

.saison-band {
    position: absolute;
    left: 50%;
    top: 0;
    z-index: 0;
    width: min(1100px, 100%);
    height: auto;
    transform: translateX(-50%);
    pointer-events: none;
    overflow: visible;
}

/* Licht im Seitenkopf hinter dem Titel: Mond und Nebel (Halloween), Abendlicht,
   Feuerwerk, Schneefall — Lage und Farbe stehen in der Anlass-Datei. */
.saison-mond,
.saison-nebel,
.saison-kopflicht {
    position: absolute;
    z-index: -1;
    pointer-events: none;
}

.saison-fussband {
    display: block;
    width: min(900px, 100%);
    height: auto;
    margin: 0 auto -4px;
    pointer-events: none;
}

.jt-fuss__saison { margin: var(--jt-a-3) 0 0; text-align: center; }

.saison-schalter {
    min-height: 32px;
    padding: 5px 14px;
    border: 1px solid rgba(var(--jt-messing-rgb), 0.35);
    border-radius: var(--jt-r-pille);
    background: none;
    color: var(--jt-text-leise);
    font: 600 12px/1.2 var(--jt-schrift-text);
    cursor: pointer;
}

.saison-schalter:hover { border-color: rgba(var(--jt-messing-rgb), 0.7); color: var(--jt-creme); }
.saison-schalter:focus-visible { outline: 2px solid var(--jt-fokus); outline-offset: 3px; }

/* Die Vorlagen der Momente und des Klick-Ausbruchs bleiben unsichtbar;
   saison.js spielt Kopien auf einer Bühne ab, die nichts verdeckt, was man
   anklicken will. */
.saison-momente,
.saison-klick { display: none !important; }

.saison-buehne {
    position: fixed;
    inset: 0;
    z-index: 1200;
    overflow: hidden;
    pointer-events: none;
}

.saison-buehne svg { display: block; width: 100%; height: auto; overflow: visible; }

/* Der Klick-Ausbruch (Konfetti, Blütenblätter, Funken, Krüge): ein Punkt an
   der Klickstelle, aus dem die Teile fliegen — er fängt nichts ab. */
.saison-ausbruch {
    position: fixed;
    left: var(--saison-x, 50vw);
    top: var(--saison-y, 50vh);
    z-index: 1201;
    width: 0;
    height: 0;
    pointer-events: none;
}

/* max-width: none — das Haus begrenzt Grafiken auf die Breite ihres Behälters
   (max-width: 100 %), und der Punkt ist 0 px breit: Die Funken waren beim
   ersten Klick-Anlass unsichtbar (Blatt Silvester, 25.10.2026). */
.saison-ausbruch svg { position: absolute; left: -60px; top: -60px; width: 120px; max-width: none; height: 120px; overflow: visible; }

.saison-flattern,
.saison-flamme,
.saison-funkeln,
.saison-beine,
.saison-pendeln,
.saison-wehen,
.saison-wippen,
.saison-wackeln { transform-box: fill-box; }
.saison-flattern,
.saison-funkeln,
.saison-beine,
.saison-wackeln { transform-origin: center; }
.saison-flamme,
.saison-wippen { transform-origin: 50% 100%; }
.saison-pendeln,
.saison-wehen { transform-origin: 50% 0; }

/* ── Knöpfe: Glimmen in den Farben des Anlasses, Zubehör an der Ecke ── */

.jt-saison .jt-knopf { position: relative; }

.jt-saison .jt-knopf.jt-knopf--haupt:hover,
.jt-saison .jt-knopf.jt-knopf--haupt:focus-visible {
    box-shadow:
        var(--jt-cta-schatten),
        0 0 0 2px rgba(var(--saison-akzent-rgb), 0.9),
        0 0 26px 6px rgba(var(--saison-glut-rgb), 0.45),
        0 0 46px 12px rgba(var(--saison-akzent-rgb), 0.4);
}

.jt-saison .jt-knopf.jt-knopf--haupt::before {
    content: "";
    position: absolute;
    left: -10px;
    top: -12px;
    width: 24px;
    height: 24px;
    background: var(--saison-knopf-bild, none) center / contain no-repeat;
    opacity: 0;
    transform: scale(0.4) rotate(-24deg);
    transition: opacity 180ms ease, transform 260ms cubic-bezier(0.22, 1, 0.36, 1);
    pointer-events: none;
}

.jt-saison .jt-knopf.jt-knopf--haupt:hover::before,
.jt-saison .jt-knopf.jt-knopf--haupt:focus-visible::before {
    opacity: 1;
    transform: scale(1) rotate(-12deg);
}

.jt-saison .jt-knopf.jt-knopf--neutral:hover {
    border-color: rgba(var(--saison-akzent-rgb), 0.85);
    box-shadow: 0 0 18px 2px rgba(var(--saison-akzent-rgb), 0.35);
}

.jt-saison.jt-saison--episch .jt-knopf.jt-knopf--haupt:hover { animation: saisonKnopfglut 1.6s ease-in-out infinite; }

/* ── Karten-Ecken (nur Anlässe, nicht die Jahreszeiten) ──

   Auf den großen Karten JEDER Seite (Betreiber 24.10.2026: „das mit dem
   Spinnennetz und so … fehlt fast überall"): Startseite (Mein Platz,
   Rangliste, Live-Karten), Profil (Karte, Tafeln, Konto, Zeit im Voice,
   Vitrine), Werkzeug-Seiten (wz-flaeche), die älteren Seiten (glass-card),
   das Programm (jt-programm) und der Weg hinein (mw-weg). Nur Flächen, deren
   ::after frei ist — das Podest nutzt seins selbst (bausteine.css). Die Liste
   steht HIER einmal je Regel; was in der Ecke hängt, sagt die Anlass-Datei
   über --saison-ecke-*. Episch: immer sichtbar; Dezent: beim Darüberfahren. */
.jt-saison--anlass :is(.lb-me__card, .lb-dash__board, .lb-live-card, .pk-karte, .pk-tafel, .pk-konto, .pk-werte, .pk-vitrine, .wz-flaeche, .glass-card, .jt-programm, .mw-weg) {
    position: relative;
}

.jt-saison--anlass :is(.lb-me__card, .lb-dash__board, .lb-live-card, .pk-karte, .pk-tafel, .pk-konto, .pk-werte, .pk-vitrine, .wz-flaeche, .glass-card, .jt-programm, .mw-weg)::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    z-index: 1;
    width: 84px;
    height: 120px;
    border-top-right-radius: inherit;
    background-image: var(--saison-ecke-bild, none);
    background-position: var(--saison-ecke-lage, top right);
    background-size: var(--saison-ecke-groesse, 72px 72px);
    background-repeat: no-repeat;
    opacity: 0;
    transition: opacity 300ms ease;
    pointer-events: none;
}

.jt-saison--anlass.jt-saison--episch :is(.lb-me__card, .lb-dash__board, .lb-live-card, .pk-karte, .pk-tafel, .pk-konto, .pk-werte, .pk-vitrine, .wz-flaeche, .glass-card, .jt-programm, .mw-weg)::after {
    opacity: 0.6;
    animation: var(--saison-ecke-ablauf, none);
}

/* Nicht alle im Gleichtakt — sonst wippen zehn Ecken wie ein Ballett. */
.jt-saison--anlass.jt-saison--episch :is(.pk-tafel, .lb-live-card, .wz-flaeche, .glass-card):nth-child(2n)::after { animation-duration: 11s; animation-delay: -4s; }
.jt-saison--anlass.jt-saison--episch :is(.pk-tafel, .lb-live-card, .wz-flaeche, .glass-card):nth-child(3n)::after { animation-duration: 13s; animation-delay: -7s; }

.jt-saison--anlass :is(.lb-me__card, .lb-dash__board, .lb-live-card, .pk-karte, .pk-tafel, .pk-konto, .pk-werte, .pk-vitrine, .wz-flaeche, .glass-card, .jt-programm, .mw-weg):hover::after {
    opacity: 0.95;
}

/* Umriss in der Farbe des Anlasses beim Darüberfahren — als outline, damit die
   eigenen Schatten der Karten bleiben (box-shadow zu überschreiben hätte sie
   gelöscht). Kein filter: der macht die Karte zum Bezugsrahmen für
   position: fixed darin. */
.jt-saison--anlass :is(.lb-me__card, .lb-dash__board, .lb-live-card, .pk-karte, .pk-tafel, .pk-konto, .pk-werte, .pk-vitrine, .wz-flaeche, .glass-card, .jt-programm, .mw-weg):hover {
    outline: 1px solid rgba(var(--saison-akzent-rgb), 0.7);
    outline-offset: -1px;
}

/* ── Der Rahmen um jede Seite (views/partials/saison/<anlass>/rahmen.ejs) ──

   Fest am Bildschirm, nie klickbar. Zwei obere Ecken (Zweige, Netze,
   Laternen …) und Figuren im freien Rand neben dem Inhalt (__flug). */
.saison-rahmen {
    position: fixed;
    inset: 0;
    z-index: 4;
    overflow: hidden;
    pointer-events: none;
}

.saison-rahmen__ecke {
    position: absolute;
    top: 64px;
    width: clamp(90px, 9vw, 170px);
    aspect-ratio: 1;
}

.saison-rahmen__ecke--links { left: 0; }
.saison-rahmen__ecke--rechts { right: 0; }
.saison-rahmen__ecke > svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }

/* Figuren im Rand: drei feste Plätze, die Anlass-Datei bestimmt nur das Bild. */
.saison-rahmen__flug {
    position: absolute;
    width: 44px;
    height: auto;
    overflow: visible;
}

.saison-rahmen__flug--1 { left: 2vw; top: 32vh; }
.saison-rahmen__flug--2 { right: 3vw; top: 48vh; }
.saison-rahmen__flug--3 { left: 4vw; top: 66vh; width: 32px; }

/* Was im Rand rieselt oder steigt (Schnee, Laub, Blüten, Funken, Ballons):
   schmale Streifen links und rechts, nur im freien Rand. */
.saison-rahmen__streifen {
    position: absolute;
    top: 0;
    bottom: 0;
    width: clamp(60px, 7vw, 140px);
    overflow: hidden;
}

.saison-rahmen__streifen--links { left: 0; }
.saison-rahmen__streifen--rechts { right: 0; }
.saison-rahmen__streifen > svg { position: absolute; left: 0; width: 100%; height: auto; overflow: visible; }

/* Was im Rand fällt (Laub, Schnee, Blütenblätter) oder steigt (Licht, Blasen):
   sechs Plätze je Streifen, das Bild bringt die Anlass-Datei mit
   (background-image an .saison-fallt). Ohne Bewegung unsichtbar — die
   Deckkraft kommt erst mit dem Ablauf. */
.saison-fallt {
    position: absolute;
    top: 0;
    width: 18px;
    height: 18px;
    background: center / contain no-repeat;
    opacity: 0;
}

.saison-fallt--1 { left: 10%; }
.saison-fallt--2 { left: 46%; width: 13px; height: 13px; }
.saison-fallt--3 { left: 74%; width: 16px; height: 16px; }
.saison-fallt--4 { left: 28%; width: 11px; height: 11px; }
.saison-fallt--5 { left: 60%; width: 20px; height: 20px; }
.saison-fallt--6 { left: 86%; width: 12px; height: 12px; }

/* Die Figuren und Streifen leben nur im freien Rand neben dem Inhalt
   (höchstens 34 px seitwärts). Der ist bei 1366 px Breite rund 125 px breit —
   unter 1320 px reicht er nicht mehr, dann bleiben sie weg. Am Handy liegt
   der Rand im Inhalt: Ecken kleiner. */
@media (max-width: 1320px) {
    .saison-rahmen__flug,
    .saison-rahmen__streifen { display: none; }
}

@media (max-width: 640px) {
    .saison-rahmen__ecke { width: 84px; top: 58px; }
}

/* ── Episch: was sich von selbst bewegt ── */

.jt-saison--episch .saison-flackern { animation: saisonFlackern 2.4s infinite; }
.jt-saison--episch .saison-flackern--spaet { animation: saisonFlackern 3.1s infinite 0.7s; }
.jt-saison--episch .saison-flattern { animation: saisonFlattern 0.32s infinite; }
.jt-saison--episch .saison-flattern--spaet { animation: saisonFlattern 0.36s infinite 0.12s; }
.jt-saison--episch .saison-flamme { animation: saisonFlamme 0.9s infinite; }
.jt-saison--episch .saison-flamme--spaet { animation: saisonFlamme 1.1s infinite 0.3s; }
.jt-saison--episch .saison-funkeln { animation: saisonFunkeln 3.6s infinite; }
.jt-saison--episch .saison-funkeln--spaet { animation: saisonFunkeln 4.2s infinite 1.3s; }
.jt-saison--episch .saison-funkeln--spaeter { animation: saisonFunkeln 5s infinite 2.6s; }
.jt-saison--episch .saison-pendeln { animation: saisonPendeln 3.4s ease-in-out infinite; }
.jt-saison--episch .saison-pendeln--spaet { animation: saisonPendeln 4.1s ease-in-out infinite -1.6s; }
.jt-saison--episch .saison-wehen { animation: saisonWehen 2.6s ease-in-out infinite; }
.jt-saison--episch .saison-wehen--spaet { animation: saisonWehen 3.2s ease-in-out infinite -1.1s; }
.jt-saison--episch .saison-wippen { animation: saisonWippen 2.8s ease-in-out infinite; }
.jt-saison--episch .saison-wippen--spaet { animation: saisonWippen 3.5s ease-in-out infinite -1.4s; }
.jt-saison--episch .saison-wackeln { animation: saisonWackeln 3.8s ease-in-out infinite; }
.jt-saison--episch .saison-wackeln--spaet { animation: saisonWackeln 4.6s ease-in-out infinite -2s; }
.jt-saison--episch .saison-glimmen { animation: saisonLicht 3.2s ease-in-out infinite; }
.jt-saison--episch .saison-glimmen--spaet { animation: saisonLicht 4s ease-in-out infinite -1.5s; }
.jt-saison--episch .saison-fallt--1 { animation: saisonFallen 15s linear infinite; }
.jt-saison--episch .saison-fallt--2 { animation: saisonFallen 19s linear infinite -6s; }
.jt-saison--episch .saison-fallt--3 { animation: saisonFallen 17s linear infinite -11s; }
.jt-saison--episch .saison-fallt--4 { animation: saisonFallen 22s linear infinite -3s; }
.jt-saison--episch .saison-fallt--5 { animation: saisonFallen 16s linear infinite -13s; }
.jt-saison--episch .saison-fallt--6 { animation: saisonFallen 20s linear infinite -8s; }
/* Rechts anders versetzt als links — sonst fiele alles spiegelgleich. */
.jt-saison--episch .saison-rahmen__streifen--rechts .saison-fallt--1 { animation-delay: -9s; }
.jt-saison--episch .saison-rahmen__streifen--rechts .saison-fallt--2 { animation-delay: -1s; }
.jt-saison--episch .saison-rahmen__streifen--rechts .saison-fallt--3 { animation-delay: -4s; }
.jt-saison--episch .saison-rahmen__streifen--rechts .saison-fallt--4 { animation-delay: -15s; }
.jt-saison--episch .saison-rahmen__streifen--rechts .saison-fallt--5 { animation-delay: -6s; }
.jt-saison--episch .saison-rahmen__streifen--rechts .saison-fallt--6 { animation-delay: -12s; }
/* Was steigt statt fällt (Sonnenflirren, Seifenblasen): derselbe Weg rückwärts. */
.jt-saison--episch .saison-fallt.saison-fallt--steigt { animation-direction: reverse; }
.jt-saison--episch .saison-rahmen__flug--1 { animation: saisonKreisenLinks 17s ease-in-out infinite; }
.jt-saison--episch .saison-rahmen__flug--2 { animation: saisonKreisenRechts 21s ease-in-out infinite -6s; }
.jt-saison--episch .saison-rahmen__flug--3 { animation: saisonKreisenLinks 24s ease-in-out infinite -11s; }
.saison-buehne .saison-flattern { animation: saisonFlattern 0.28s infinite; }

/* Der Schimmer über der Überschrift und das Glimmen, in den Farben des Anlasses.
   Zwei Klassen am Body (.jt-saison.jt-saison--episch), nicht eine: Die
   Werkzeug-Köpfe setzen ihren Verlauf mit html.jt-auftritt
   .jt-seitenkopf--werkzeug .jt-seitenkopf__titel (bausteine.css) — mit einer
   Klasse weniger stand dort beim Umbau am 25.10.2026 plötzlich goldene Schrift
   statt des Schimmers (Vorher-Nachher-Vergleich, News-Seite). */
.jt-saison.jt-saison--episch .jt-seitenkopf .jt-seitenkopf__titel {
    background-image: linear-gradient(100deg, var(--jt-creme) 0%, var(--jt-creme) 40%, var(--saison-glanz-a, #fffaf0) 49%, var(--saison-glanz-b, #ffb454) 53%, var(--saison-glanz-c, #f3d79a) 57%, var(--jt-creme) 64%, var(--jt-creme) 100%);
    background-size: 260% 100%;
    animation: saisonSchimmer 5.5s infinite, saisonGlimmen 3.2s infinite;
}

.jt-saison.jt-saison--episch .lb-hero .lb-hero__title { animation: saisonGlimmen 3.2s infinite; }

/* ── Bremsen: „Effekte aus" und „weniger Bewegung" ──

   Jedes Teil des Schmucks trägt eine Klasse „saison-…" — die Bremse fasst sie
   alle samt Inhalt, auch die eines Anlasses, der morgen dazukommt. Dazu die
   Stellen des Hauses, die der Schmuck bewegt: Karten-Ecken, Überschrift,
   Knöpfe. Nie alle Animationen der Seite: nur den Schmuck. */
.jt-saison--still [class*="saison-"],
.jt-saison--still [class*="saison-"] *,
.jt-saison--still :is(.lb-me__card, .lb-dash__board, .lb-live-card, .pk-karte, .pk-tafel, .pk-konto, .pk-werte, .pk-vitrine, .wz-flaeche, .glass-card, .jt-programm, .mw-weg)::after,
.jt-saison--still .jt-seitenkopf .jt-seitenkopf__titel,
.jt-saison--still .lb-hero .lb-hero__title,
.jt-saison--still .jt-knopf { animation: none !important; }
.jt-saison--still .saison-buehne,
.jt-saison--still .saison-ausbruch { display: none; }

@media (prefers-reduced-motion: reduce) {
    .jt-saison [class*="saison-"],
    .jt-saison [class*="saison-"] *,
    .jt-saison :is(.lb-me__card, .lb-dash__board, .lb-live-card, .pk-karte, .pk-tafel, .pk-konto, .pk-werte, .pk-vitrine, .wz-flaeche, .glass-card, .jt-programm, .mw-weg)::after,
    .jt-saison .jt-seitenkopf .jt-seitenkopf__titel,
    .jt-saison .lb-hero .lb-hero__title,
    .jt-saison .jt-knopf { animation: none !important; }
    .jt-saison .jt-knopf::before { transition: none; }
    .saison-buehne,
    .saison-ausbruch { display: none; }
}

/* ── Abläufe für jeden Anlass ── */

@keyframes saisonFlackern {
    0%, 100% { opacity: 0.55; }
    8% { opacity: 0.95; }
    12% { opacity: 0.6; }
    20% { opacity: 1; }
    34% { opacity: 0.7; }
    48% { opacity: 0.92; }
    60% { opacity: 0.5; }
    72% { opacity: 0.85; }
    86% { opacity: 0.62; }
}

@keyframes saisonFlattern {
    0%, 100% { transform: scaleY(1); }
    50% { transform: scaleY(0.5); }
}

@keyframes saisonFlamme {
    0%, 100% { transform: scale(1, 1); }
    30% { transform: scale(0.82, 1.18); }
    60% { transform: scale(1.1, 0.9); }
}

@keyframes saisonFunkeln {
    0%, 70%, 100% { opacity: 0; transform: scale(0.4); }
    78% { opacity: 1; transform: scale(1.15); }
    86% { opacity: 0.2; transform: scale(0.7); }
}

/* Laternen, Kugeln, Lebkuchenherzen: hängen oben fest und schwingen. */
@keyframes saisonPendeln {
    0%, 100% { transform: rotate(-6deg); }
    50% { transform: rotate(6deg); }
}

/* Wimpel, Bänder, Luftschlangen: wehen im Wind, oben fest. */
@keyframes saisonWehen {
    0%, 100% { transform: skewX(0deg) rotate(0deg); }
    30% { transform: skewX(-7deg) rotate(2deg); }
    65% { transform: skewX(5deg) rotate(-2deg); }
}

/* Mützen, Ohren, Blüten: wippen von unten her. */
@keyframes saisonWippen {
    0%, 100% { transform: rotate(0deg); }
    40% { transform: rotate(-5deg); }
    70% { transform: rotate(3deg); }
}

/* Ostereier, Schellen: wackeln kurz und ruhen lange. */
@keyframes saisonWackeln {
    0%, 62%, 100% { transform: rotate(0deg); }
    68% { transform: rotate(-9deg); }
    74% { transform: rotate(8deg); }
    80% { transform: rotate(-5deg); }
    86% { transform: rotate(3deg); }
}

/* Weiches Leuchten (Lichterketten, Laternen, Glühwürmchen) — langsam genug,
   dass es nie blitzt. */
@keyframes saisonLicht {
    0%, 100% { opacity: 0.45; }
    50% { opacity: 1; }
}

/* Fallen im Rand: von oben bis unter den Bildschirmrand, mit Schaukeln und
   Drehen; blendet sich am Anfang und Ende weich ein und aus. */
@keyframes saisonFallen {
    0% { transform: translate(0, -4vh) rotate(0deg); opacity: 0; }
    6% { opacity: 0.9; }
    25% { transform: translate(16px, 24vh) rotate(80deg); }
    50% { transform: translate(-10px, 52vh) rotate(170deg); }
    75% { transform: translate(14px, 80vh) rotate(260deg); }
    94% { opacity: 0.9; }
    100% { transform: translate(0, 106vh) rotate(350deg); opacity: 0; }
}

@keyframes saisonHutWippen {
    0% { transform: rotate(-14deg); }
    35% { transform: rotate(-24deg) translateY(-2px); }
    70% { transform: rotate(-9deg); }
    100% { transform: rotate(-14deg); }
}

/* Nur Lagen zwischen 0 % und 100 %: Die Schrift IST ihr Hintergrund, und der
   Auftritt-Glanz (bausteine.css) schaltet die Wiederholung ab — außerhalb
   dieses Bereichs fehlten Buchstaben („ESSUM", 24.10.2026). Bei 100 % steht
   das helle Band links vor der Schrift, bei 0 % rechts dahinter. */
@keyframes saisonSchimmer {
    0% { background-position: 100% 0; }
    55%, 100% { background-position: 0% 0; }
}

@keyframes saisonGlimmen {
    0%, 100% { filter: drop-shadow(0 0 8px rgba(var(--saison-glut-rgb), 0.3)) drop-shadow(0 0 22px rgba(var(--saison-akzent-rgb), 0.3)); }
    50% { filter: drop-shadow(0 0 14px rgba(var(--saison-glut-rgb), 0.6)) drop-shadow(0 0 36px rgba(var(--saison-glimmen-rgb), 0.55)); }
}

@keyframes saisonKnopfglut {
    0%, 100% { box-shadow: var(--jt-cta-schatten), 0 0 0 2px rgba(var(--saison-akzent-rgb), 0.9), 0 0 22px 5px rgba(var(--saison-glut-rgb), 0.4), 0 0 40px 8px rgba(var(--saison-akzent-rgb), 0.35); }
    50% { box-shadow: var(--jt-cta-schatten), 0 0 0 2px rgba(var(--saison-akzent-hell-rgb), 1), 0 0 34px 10px rgba(var(--saison-glut-rgb), 0.62), 0 0 64px 16px rgba(var(--saison-akzent-rgb), 0.55); }
}

@keyframes saisonKreisenLinks {
    0%, 100% { transform: translate(0, 0) rotate(-6deg); }
    25% { transform: translate(28px, -70px) rotate(8deg); }
    50% { transform: translate(34px, 30px) rotate(-4deg); }
    75% { transform: translate(8px, 90px) rotate(10deg); }
}

@keyframes saisonKreisenRechts {
    0%, 100% { transform: translate(0, 0) rotate(6deg); }
    25% { transform: translate(-30px, 60px) rotate(-8deg); }
    50% { transform: translate(-34px, -40px) rotate(4deg); }
    75% { transform: translate(-6px, -90px) rotate(-10deg); }
}