/* Saison & Ereignisse (10.10.2026) — Akzent ueber der Marke, nie statt ihr. Logo (.marke) und Schrift bleiben unberuehrt.
   Bewegung nur in .saison-buehne (Startkopf .eh, Entdecken-Kopf #saison-kopf), immer hinter Text und Knoepfen,
   pointer-events: none. «Weniger Bewegung»: keine Ebene, keine Animation — nur Farbe und Gruss. */
:root { --saison-a: #ff4f7a; --saison-b: #8b3dff; --saison-glut: rgba(255,79,122,.2) }

/* Gruss-Schild im Startkopf: dunkles Glas mit Akzentlicht — liest sich auf Film, Dunkel und Hell gleich */
.saison-gruss { display: inline-flex; align-items: center; gap: 10px; margin: 0 0 14px; padding: 7px 14px 7px 10px; border-radius: 999px;
  background: rgba(22, 10, 28, .72); color: #fff; font-weight: 700; font-size: .92rem; letter-spacing: .01em;
  border: 1px solid color-mix(in srgb, var(--saison-a) 55%, transparent); box-shadow: 0 0 0 1px rgba(255,255,255,.04) inset, 0 8px 28px var(--saison-glut);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px) }
.saison-gruss::before, .saison-kopf::before { content: ""; flex: none; width: 10px; height: 10px; border-radius: 50%; position: relative; z-index: 2;
  background: radial-gradient(circle at 40% 40%, #fff7e0 0 18%, var(--saison-a) 45%, transparent 72%); box-shadow: 0 0 12px 3px var(--saison-a) }
/* Handy: Musik-Knopf und «Mehr als nur online!» sitzen oben im Film — das Schild beginnt darunter, nie darueber */
@media (max-width: 760px) { .saison-gruss { font-size: .85rem } }   /* 18.10.: den Abstand nach oben haelt jetzt .eh-text (meeyo.css, freies Band) */
.saison-vorschau { font-size: .68rem; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; padding: 2px 7px; border-radius: 6px; background: rgba(255,255,255,.14); color: #fff }

/* Entdecken-Kopf: schmales Band ueber den Reitern, eigene Hoehe im Fluss — deckt nichts zu */
.saison-kopf { position: relative; overflow: hidden; display: flex; align-items: center; justify-content: center; gap: 10px; margin: 0 auto 14px; max-width: 560px;
  min-height: 46px; padding: 8px 16px; border-radius: 16px; color: #fff; font-weight: 700; font-size: .92rem; text-align: center;
  background: radial-gradient(120% 160% at 50% 120%, var(--saison-glut), transparent 60%), linear-gradient(180deg, #1d0f28, #140818);
  border: 1px solid color-mix(in srgb, var(--saison-a) 40%, transparent) }
.saison-kopf > :not(.saison-ebene) { position: relative; z-index: 2 }

/* Startkopf: ein Hauch Akzentlicht hinter dem Titel */
.eh.saison-buehne::before { content: ""; position: absolute; z-index: 0; inset: -10% -5% auto -5%; height: 70%; pointer-events: none;
  background: radial-gradient(55% 60% at 30% 40%, var(--saison-glut), transparent 70%) }
.eh.saison-buehne > .eh-text { position: relative; z-index: 2 }

/* Die Ebene selbst */
.saison-ebene { position: absolute; inset: 0; z-index: 1; pointer-events: none; overflow: hidden; border-radius: inherit }
.saison-leinwand { position: absolute; inset: 0; width: 100%; height: 100% }

/* Halloween (Fotos + Film, static/saison/halloween): Licht, Aeste, Bodennebel, Kuerbisse mit flackernder Kerze */
.saison-ebene.sh-ebene { -webkit-mask-image: linear-gradient(to right, transparent, #000 6%, #000 94%, transparent), linear-gradient(to bottom, transparent, #000 4%, #000 90%, transparent);
  -webkit-mask-composite: source-in; mask-image: linear-gradient(to right, transparent, #000 6%, #000 94%, transparent), linear-gradient(to bottom, transparent, #000 4%, #000 90%, transparent); mask-composite: intersect }
@media (max-width: 760px) { .saison-ebene.sh-ebene { -webkit-mask-image: none; mask-image: none } }
.sh-licht { position: absolute; inset: 0;
  background: radial-gradient(60% 45% at 30% 104%, rgba(255, 122, 26, .30), transparent 70%), radial-gradient(45% 40% at 88% 100%, rgba(139, 61, 255, .26), transparent 70%),
    radial-gradient(40% 45% at 6% 0%, rgba(255, 150, 60, .20), transparent 70%) }
.sh-aeste { position: absolute; left: -2%; top: -6%; width: min(42%, 500px); height: auto; opacity: .92;
  -webkit-mask-image: radial-gradient(100% 90% at 0 0, #000 30%, transparent 70%); mask-image: radial-gradient(100% 90% at 0 0, #000 30%, transparent 70%) }
:root[data-theme="light"] .sh-aeste { opacity: .55 }
.sh-nebel { position: absolute; left: 0; bottom: 0; width: 100%; height: 58%; object-fit: cover; opacity: .82; mix-blend-mode: screen;
  -webkit-mask-image: linear-gradient(to top, #000 30%, transparent 100%); mask-image: linear-gradient(to top, #000 30%, transparent 100%) }
.sh-kuerbis { position: absolute; bottom: 0 }
.sh-kuerbis img { display: block; width: 100%; height: auto; position: relative }
.sh-hell { display: none !important }
:root[data-theme="light"] .sh-hell { display: block !important } :root[data-theme="light"] .sh-dunkel { display: none !important }
.sh-schein { position: absolute; left: 10%; right: 10%; top: 15%; bottom: -10%; border-radius: 50%; background: radial-gradient(closest-side, rgba(255, 140, 30, .55), transparent);
  filter: blur(14px); animation: sh-flackern 2.8s ease-in-out infinite }
.sh-kuerbis img.sh-dunkel { animation: sh-kerze 3.4s ease-in-out infinite }
@keyframes sh-flackern { 0%, 100% { opacity: .75 } 18% { opacity: .95 } 30% { opacity: .62 } 47% { opacity: .9 } 63% { opacity: .7 } 80% { opacity: 1 } }
@keyframes sh-kerze { 0%, 100% { filter: brightness(1) } 22% { filter: brightness(1.12) } 35% { filter: brightness(.93) } 58% { filter: brightness(1.08) } 76% { filter: brightness(.97) } }
.sh-k-paar { left: 33%; width: clamp(170px, 19vw, 250px) }
.sh-k-fratze { left: 0; width: clamp(110px, 11vw, 150px); bottom: -6px }
.sh-k-band { right: 6px; bottom: -4px; width: 64px }
/* Handy: der Film ist der Grund — nur Licht, Nebel und das Kuerbispaar in der Ecke unten rechts, klein */
@media (max-width: 760px) {   /* der Startkopf ist hoeher als der Schirm: Nebel und Kuerbisse sitzen am unteren Rand des ERSTEN Bildschirms (Kopfzeile ~113 px) */
  .sh-nebel { top: calc(100svh - 113px - 300px); bottom: auto; height: 300px; opacity: .75; -webkit-mask-image: linear-gradient(to top, transparent, #000 35%, #000 60%, transparent); mask-image: linear-gradient(to top, transparent, #000 35%, #000 60%, transparent) }
  .sh-k-paar { left: auto; right: -6px; top: calc(100svh - 113px - 140px); bottom: auto; width: 118px }
}
/* 19.10.2026 «Gratis zuerst» am Handy: im Startkopf steht keine Filmschleife als Grund, sondern Text und darunter der Film «Echt» — der
   «erste Bildschirm» ist dort Text. Nebel und Kuerbispaar sitzen am unteren Rand des Startkopfs, in einem freien Band unter dem Film
   (gemessen ausrichtung_pruefen 19.10.: das Paar lag bei 390/414 px auf «Real people. Real encounters.»). */
@media (max-width: 760px) {
  .eh.saison-buehne:not(:has(> .eh-film)):has(.sh-k-paar) { padding-bottom: 130px }
  .eh:not(:has(> .eh-film)) .sh-nebel { top: auto; bottom: 0 }
  .eh:not(:has(> .eh-film)) .sh-k-paar { top: auto; bottom: 0 }
}
/* Heller Modus: Nebel als grauer Dunst (umgekehrt, multipliziert), Licht leiser, Kuerbisse mit ihrem Stueck Nacht */
:root[data-theme="light"] .sh-nebel { mix-blend-mode: multiply; filter: invert(1) sepia(.3) hue-rotate(220deg); opacity: .32 }
:root[data-theme="light"] .sh-licht { opacity: .6 }
:root[data-theme="light"] .sh-schein { opacity: .5 }
:root[data-theme="light"] .sh-k-fratze { display: none }   /* hell: nur das Paar — die einzelne Fratze wirkt auf hellem Grund trueb */
@media (max-width: 760px) { :root[data-theme="light"] .sh-nebel { mix-blend-mode: screen; filter: none; opacity: .7 } :root[data-theme="light"] .sh-licht { opacity: 1 } }
/* Entdecken-Band: Nebel liegt im Band */
.saison-kopf .sh-nebel { height: 100%; opacity: .55 }

/* Weihnachten: Lichterkette oben */
.sn-kette { position: absolute; left: 0; right: 0; top: 0; height: 30px }
.sn-kette i { position: absolute; width: 7px; height: 7px; border-radius: 50%; background: #ffe3a3; box-shadow: 0 0 10px 3px rgba(255, 200, 110, .7);
  animation: sn-funkeln 2.6s ease-in-out infinite alternate }
.sn-kette i:nth-child(3n) { background: #ffb36b } .sn-kette i:nth-child(4n) { background: #fff4d8 }
@keyframes sn-funkeln { from { opacity: .45 } to { opacity: 1 } }

/* Sommer: warmes Licht, einmal */
.sn-sonne { position: absolute; right: -10%; top: -30%; width: 70%; aspect-ratio: 1; border-radius: 50%; opacity: 0;
  background: radial-gradient(circle, rgba(255, 214, 120, .38), rgba(255, 160, 90, .12) 45%, transparent 70%); animation: sn-ein 6s ease-out forwards }

/* Nach ~30 s: still. Endlos-Animationen anhalten (Nebel bleibt als Hauch stehen) */
.saison-still .sh-schein, .saison-still .sh-kuerbis img, .saison-still .sn-kette i { animation-play-state: paused }

@media (prefers-reduced-motion: reduce) {
  .saison-ebene:not(.saison-statisch) { display: none }
  .saison-statisch, .saison-statisch * { animation: none !important; transition: none !important }
}

/* 10.10. (Owner: «hammer realistisch»): Halloween lebt von der Nacht — im hellen Design bekommt der Startkopf trotzdem die Nachtbuehne,
   mit den Nacht-Kuerbissen und Nebel auf dunklem Grund. Text bleibt lesbar (weiss), Knoepfe unveraendert in der Marke. */
:root[data-saison="halloween"] .eh.saison-buehne { background: radial-gradient(70% 60% at 25% 95%, rgba(255, 110, 20, .22), transparent 70%),
    radial-gradient(60% 55% at 90% 10%, rgba(139, 61, 255, .22), transparent 70%), linear-gradient(180deg, #1b0c24 0%, #12071a 100%);
  border-radius: 0 0 36px 36px; padding-inline: clamp(16px, 3vw, 40px); margin-inline: calc(-1 * clamp(16px, 3vw, 40px)); color: #fff }
:root[data-saison="halloween"] .eh.saison-buehne .eh-text h1 { color: #fff }
:root[data-saison="halloween"] .eh.saison-buehne .eh-zweck { color: rgba(255, 255, 255, .9) }
:root[data-saison="halloween"] .eh.saison-buehne .eh-symbole li { color: #fff }
:root[data-saison="halloween"] .eh.saison-buehne .eh-claim { color: #ffb38a }
:root[data-saison="halloween"] .eh.saison-buehne .knopf.leise { background: rgba(255, 255, 255, .12); color: #fff; border-color: rgba(255, 255, 255, .25) }
:root[data-saison="halloween"] .eh.saison-buehne .sh-hell { display: none !important }
:root[data-saison="halloween"] .eh.saison-buehne .sh-dunkel { display: block !important }
:root[data-saison="halloween"][data-theme="light"] .eh.saison-buehne .sh-aeste { opacity: .92 }

/* 10.10. (Owner): Saison auf der ganzen Seite, nicht ueberladen — getoenter Grund und eine leuchtende Linie oben, auf jeder Seite */
:root[data-saison] body { background-image: radial-gradient(900px 520px at 100% 0%, color-mix(in srgb, var(--saison-glut) 18%, transparent), transparent 70%),
    radial-gradient(800px 520px at 0% 100%, color-mix(in srgb, var(--saison-b) 12%, transparent), transparent 70%); background-attachment: fixed }
:root[data-saison] body::before { content: ""; position: fixed; z-index: 60; top: 0; left: 0; right: 0; height: 3px; pointer-events: none;
  background: linear-gradient(90deg, var(--saison-a), var(--saison-b), var(--saison-a)); opacity: .85 }
.saison-ecke { position: fixed; z-index: 5; left: 14px; bottom: 14px; width: 92px; height: auto; pointer-events: none; opacity: .92;
  filter: drop-shadow(0 6px 18px rgba(255, 120, 30, .45)) }
@media (prefers-reduced-motion: no-preference) { .saison-ecke { animation: sh-kerze 3.4s ease-in-out infinite } }
@media print { .saison-ecke, :root[data-saison] body::before { display: none } }