/*! WebFX 1.4 – Effekt-Bibliothek für Premium-Webseiten (openTS GmbH)
   Gehört zu webfx.js. Keine Schriften, keine Farben der Seite – nur Aufbau und Bewegung.
   Anpassen über CSS-Variablen am Effekt-Element:
     --fx-rand        Innenabstand links/rechts der Texte (Standard 1.25rem)
     --fx-schleier    Verlauf hinter Texten auf Bildern
     --fx-akzent      Farbe für Linien, Punkte, Knöpfe
     --fx-hg          Grundfarbe einer Bühne (sieht man, wenn Bilder noch laden)
*/
:root { --fx-rand: 1.25rem; --fx-akzent: #ffb020; --fx-schleier: linear-gradient(to top, rgba(6, 10, 16, .86) 0%, rgba(6, 10, 16, .62) 50%, rgba(6, 10, 16, 0) 100%); }

/* ---------- Bühne (gemeinsam für szene, bildfolge, zoomfahrt, farbwelt, wisch, durchblick) ---------- */
.fx-buehne { contain: paint; position: relative; height: 100vh; height: 100svh; min-height: 18rem; display: grid; grid-template-areas: "s"; grid-template-rows: minmax(0, 1fr); grid-template-columns: minmax(0, 1fr); background: var(--fx-hg, #0c1117); color: #fff; }
.fx-buehne > * { grid-area: s; min-width: 0; min-height: 0; }
.fx-klebt { height: calc(100vh + var(--fx-weg, 150vh)); height: calc(100svh + var(--fx-weg, 150vh)); background: var(--fx-hg, #0c1117); }
.fx-klebt > .fx-buehne { position: -webkit-sticky; position: sticky; top: 0; }
.fx-bilder { position: relative; overflow: hidden; }
.fx-bilder > img, .fx-bilder > picture > img, .fx-bild-voll { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.fx-bilder > picture { position: absolute; inset: 0; }
.fx-bild { will-change: opacity, transform; transform-origin: 50% 50%; }
.fx-bilder > .fx-bild ~ .fx-bild, .fx-bilder > picture ~ picture .fx-bild { opacity: 0; }
.fx-buehne > .fx-ebenen { pointer-events: none; position: relative; z-index: 1; }
.fx-voll { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }

/* Geteilte Bühne: Handy Bild oben / Text unten, Desktop Text links / Bild rechts */
.fx-buehne.fx-geteilt { grid-template-areas: "s" "t"; grid-template-rows: minmax(0, 1fr) auto; }
.fx-buehne.fx-geteilt > .fx-texte { grid-area: t; background: none; text-shadow: none; padding-top: .6rem; color: inherit; }
@media (min-width: 900px) and (orientation: landscape) {
  .fx-buehne.fx-geteilt { grid-template-areas: "t s"; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); grid-template-rows: minmax(0, 1fr); }
  .fx-buehne.fx-geteilt > .fx-texte { align-self: center; padding: 2rem 0 2rem max(var(--fx-rand), 6vw); }
}

/* Texte auf der Bühne: alle Phasen liegen in derselben Zelle, nur eine ist sichtbar */
.fx-texte { position: relative; z-index: 2; text-shadow: 0 1px 12px rgba(0, 0, 0, .35); align-self: end; display: grid; grid-template-areas: "t"; padding: 3.5rem var(--fx-rand) calc(1.4rem + env(safe-area-inset-bottom, 0px)); background: var(--fx-schleier); pointer-events: none; }
.fx-texte > * { grid-area: t; align-self: end; max-width: 40rem; }
.fx-phase { will-change: opacity, transform; }
.fx-phase ~ .fx-phase { opacity: 0; visibility: hidden; }
.fx-texte a, .fx-texte button { pointer-events: auto; }

/* Phasen-Wahl (Knöpfe oben auf der Bühne) */
.fx-wahl { position: relative; align-self: start; justify-self: start; display: flex; flex-wrap: wrap; gap: .4rem; padding: .9rem var(--fx-rand) 0; z-index: 2; max-width: 100%; }
.fx-wahl-knopf { font: inherit; font-size: .875rem; line-height: 1.2; min-height: 44px; padding: .55rem .9rem; border-radius: 999px; border: 1px solid rgba(255, 255, 255, .35); background: rgba(10, 14, 20, .45); color: #fff; cursor: pointer; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); display: inline-flex; align-items: center; gap: .45rem; }
.fx-wahl-knopf[aria-pressed="true"] { background: #fff; color: #0c1117; border-color: #fff; }
.fx-wahl-knopf:focus-visible { outline: 3px solid var(--fx-akzent); outline-offset: 2px; }
.fx-wahl-knopf .fx-farbpunkt { width: .85rem; height: .85rem; border-radius: 50%; background: var(--fx-punkt, #fff); box-shadow: 0 0 0 1px rgba(255, 255, 255, .6); flex: none; }

/* Deko-Ebene für fliegende Teile (ohne Text, darf beschneiden) */
.fx-deko { margin: 0; position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.fx-deko > * { position: absolute; left: 0; top: 0; will-change: transform, opacity; display: block; }
.fx-ebenen { position: relative; }

/* ---------- Bildfolge ---------- */
.fx-leinwand { width: 100%; height: 100%; display: block; }
.fx-poster { width: 100%; height: 100%; object-fit: contain; transition: opacity .3s; }
.fx-regler-zeile { position: relative; z-index: 3; align-self: start; justify-self: stretch; padding: 1rem var(--fx-rand) 0; display: none; }
.fx-ruhig .fx-regler-zeile { display: block; }
.fx-regler-zeile label { display: block; font-size: .875rem; margin-bottom: .25rem; }
.fx-regler-zeile input[type=range] { width: 100%; min-height: 44px; accent-color: var(--fx-akzent); }

/* ---------- Röntgen ---------- */
.fx-roentgen { position: relative; margin: 0; }
.fx-roentgen-bild { position: relative; overflow: hidden; aspect-ratio: var(--fx-format, 16 / 10); border-radius: var(--fx-runde, 0); background: #0d2742; }
.fx-roentgen-bild img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.fx-oben { will-change: clip-path; }
.fx-linie { position: absolute; inset: 0; pointer-events: none; will-change: transform; }
.fx-linie::before { content: ""; position: absolute; left: -1px; top: 0; bottom: 0; width: 2px; background: var(--fx-akzent); box-shadow: 0 0 18px 3px var(--fx-akzent); }
.fx-punkt { position: absolute; width: 44px; height: 44px; margin: -22px 0 0 -22px; border-radius: 50%; border: 0; padding: 0; background: transparent; cursor: pointer; display: grid; place-items: center; font: inherit; font-size: .8rem; font-weight: 700; color: #0c1117; }
.fx-punkt::before { content: ""; position: absolute; width: 26px; height: 26px; border-radius: 50%; background: rgba(255, 255, 255, .9); box-shadow: 0 0 0 2px rgba(0, 0, 0, .25); transition: transform .3s, background .3s, box-shadow .3s; }
.fx-punkt > span { position: relative; }
.fx-punkt.fx-an::before { background: var(--fx-akzent); box-shadow: 0 0 0 6px rgba(255, 176, 32, .25), 0 0 22px 4px rgba(255, 176, 32, .55); }
.fx-punkt[aria-expanded="true"]::before { transform: scale(1.25); }
.fx-punkt:focus-visible { outline: 3px solid var(--fx-akzent); outline-offset: 2px; }
.fx-info { min-height: 3em; padding: .8rem 0 .2rem; }
.fx-roentgen .fx-regler-zeile { display: block; padding: .3rem 0 0; }

/* ---------- Typo ---------- */
.fx-spreizen { position: relative; }
.fx-spreizen .fx-kern, .fx-spreizen .fx-rest { display: inline-block; will-change: transform, opacity; }
.fx-wortlauf { margin: 0; overflow: hidden; pointer-events: none; -webkit-user-select: none; user-select: none; }
.fx-zeile { white-space: nowrap; will-change: transform; line-height: 1.05; }
.fx-zeile > span { display: inline-block; padding-right: .35em; }
.fx-bildschrift { -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; background-size: cover; background-position: center; }
.fx-durchblick .fx-maske { width: 100%; height: 100%; display: block; overflow: hidden; }   /* kein will-change: das SVG wird nicht mehr skaliert (Falle 21) */
.fx-durchblick .fx-danach { align-self: end; }
.fx-unsichtbar { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* ---------- Text-Auftritt ---------- */
/* Das Wort bleibt an seinem Platz (Textzoom-Prüfungen messen die Textlage!) – es wird von unten nach oben
   aufgedeckt (kein Verschieben). Vorher unsichtbar (opacity 0), danach normaler Text. */
.fx-tr-wartet .fx-w { display: inline-block; vertical-align: top; }
.fx-tr-wartet .fx-wi { display: inline-block; opacity: 0; -webkit-clip-path: inset(100% 0 0 0); clip-path: inset(100% 0 0 0); transition: clip-path .7s cubic-bezier(.2, .75, .2, 1), -webkit-clip-path .7s cubic-bezier(.2, .75, .2, 1), opacity .3s ease-out; }
.fx-tr-fertig .fx-wi { -webkit-clip-path: none !important; clip-path: none !important; transition: none !important; }
.fx-tr-los .fx-wi { opacity: 1; -webkit-clip-path: inset(0 0 0 0); clip-path: inset(0 0 0 0); }   /* nie über den eigenen Kasten hinaus (Trefferfläche!) */

/* ---------- Aufziehen ---------- */
.fx-aufziehen { position: relative; overflow: hidden; margin: 0; }
.fx-aufziehen > img { display: block; width: 100%; height: 100%; object-fit: cover; will-change: transform, clip-path; }

/* ---------- Netz ---------- */
.fx-netz { position: relative; margin: 0; aspect-ratio: 16 / 10; overflow: hidden; }
.fx-netz > img, .fx-netz > svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.fx-netz-linien { will-change: clip-path; }
.fx-netz-knoten circle { transition: opacity .35s; }
.fx-puls { transform-box: fill-box; transform-origin: center; animation: fx-puls 2.4s ease-out infinite; }
@keyframes fx-puls { from { transform: scale(.6); opacity: .9; } to { transform: scale(3.2); opacity: 0; } }

/* ---------- Abschnittswechsel ---------- */
.fx-wechsel { position: relative; isolation: isolate; transition: color .6s; }
.fx-hg { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.fx-hg-klebt { position: -webkit-sticky; position: sticky; top: 0; height: 100vh; height: 100lvh; }
.fx-hg-farbe { position: absolute; inset: 0; opacity: 0; transition: opacity .8s ease; }
.fx-hg-farbe.fx-an { opacity: 1; }

/* ---------- Zahl, Glanz ---------- */
.fx-zahl { font-variant-numeric: tabular-nums; display: inline-block; text-align: right; }
.fx-glanz { position: relative; contain: paint; isolation: isolate; }   /* contain statt overflow: kein Überlauf nach außen */
.fx-glanz::after { content: ""; position: absolute; top: -20%; bottom: -20%; left: 0; width: 40%; background: linear-gradient(100deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, .45) 50%, rgba(255, 255, 255, 0) 100%); transform: translateX(-160%) skewX(-12deg); pointer-events: none; }
.fx-glanz.fx-glanz-los::after { animation: fx-glanz 1.4s cubic-bezier(.3, .6, .3, 1) .2s 1 both; }
@keyframes fx-glanz { to { transform: translateX(360%) skewX(-12deg); } }

/* ---------- Ruhige Fassung (prefers-reduced-motion) ---------- */
.fx-ruhig .fx-bild, .fx-ruhig .fx-phase { transition: none !important; }
.fx-ruhig.fx-netz .fx-puls, .fx-ruhig .fx-puls { animation: none; opacity: 0; }
@media (prefers-reduced-motion: reduce) {
  .fx-tr-wartet .fx-wi { transform: none !important; transition: none !important; opacity: 1 !important; -webkit-clip-path: none !important; clip-path: none !important; }
  .fx-glanz::after { display: none; }
  .fx-puls { animation: none; opacity: 0; }
  .fx-hg-farbe, .fx-wechsel { transition: none; }
}
/* szene mit hartem Übergang (data-uebergang="kreis|wisch"): Text tauscht schnell, nie leer, nie zwei halb (19.10.2026, Saray) */
.fx-text-schnell .fx-phase { opacity: 0; visibility: hidden; transform: translate3d(0, 10px, 0); transition: opacity .12s ease, transform .18s ease, visibility 0s linear .12s; will-change: auto; }
.fx-text-schnell .fx-phase.fx-aktiv { opacity: 1; visibility: visible; transform: none; transition: opacity .18s ease .05s, transform .22s cubic-bezier(.2, .7, .2, 1) .05s, visibility 0s; }
.fx-uebergang-kreis .fx-bild, .fx-uebergang-wisch .fx-bild { will-change: clip-path, transform; }
.fx-kreisrand { position: absolute; width: 200px; height: 200px; margin: 0; border-radius: 50%; pointer-events: none; z-index: 1; opacity: 0;
  box-shadow: 0 0 0 2px rgba(255, 246, 225, .75), 0 0 22px 6px rgba(255, 214, 150, .45), inset 0 0 18px 4px rgba(255, 214, 150, .35); transform: translate(-50%, -50%) scale(0); will-change: transform, opacity; }
.fx-ruhig .fx-kreisrand { display: none; }
@media (prefers-reduced-motion: reduce) { .fx-text-schnell .fx-phase, .fx-text-schnell .fx-phase.fx-aktiv { transition: none; } }

/* =====================================================================================
   NEU 20.10.2026 – Effekte aus den Vorbild-Filmen 6–12 (webfx.js 1.1)
   ===================================================================================== */
/* Leinwand-Bühnen (kettenreaktion, linienfeld) */
.fx-buehne > .fx-leinwand { pointer-events: none; }
/* lichtstimmung */
.fx-lichtstimmung { position: relative; isolation: isolate; transition: color .5s; }
.fx-ls { z-index: -1; }
.fx-lichtstimmung > :not(.fx-ls) { position: relative; z-index: 1; }   /* Inhalt sicher über Himmel und Sonne */
.fx-ls > .fx-ls-lage { position: absolute; inset: 0; width: 100%; height: 100%; }
.fx-ls > .fx-ls-lage + .fx-ls-lage { opacity: 0; }
.fx-ls > .fx-ls-sonne { left: 50%; top: 34%; width: min(70vw, 34rem); height: min(70vw, 34rem); border-radius: 50%; opacity: 0; transform: translate3d(-50%, 60%, 0); }
/* neon */
.fx-neon { position: relative; isolation: isolate; display: inline-block; color: var(--fx-neon, #ff5a1f); text-shadow: 0 0 .08em currentColor, 0 0 .35em rgba(255, 90, 31, .45); font-variant-numeric: tabular-nums; }
.fx-neon-umriss { color: transparent; -webkit-text-stroke: 2px var(--fx-neon, #ff5a1f); text-shadow: 0 0 .25em rgba(255, 90, 31, .55); }
.fx-neon .fx-neon-text { display: inline-block; opacity: .12; transition: opacity .2s; }
.fx-neon.fx-neon-an .fx-neon-text { opacity: 1; animation: fx-neon-an 1s steps(1, end) 1 both; }
.fx-neon::after { content: attr(data-fx-spiegel); pointer-events: none; position: absolute; z-index: -1; left: 0; right: 0; top: 100%; -webkit-clip-path: inset(45% 0 0 0); clip-path: inset(45% 0 0 0); transform: scaleY(-1); transform-origin: 50% 50%; opacity: .22; pointer-events: none; -webkit-user-select: none; user-select: none;
  -webkit-mask-image: linear-gradient(to top, rgba(0, 0, 0, .9), transparent 70%); mask-image: linear-gradient(to top, rgba(0, 0, 0, .9), transparent 70%); filter: blur(1.5px); }
.fx-neon.fx-neon-klick .fx-neon-text { animation: fx-neon-klick .35s cubic-bezier(.2, .8, .2, 1) 1; }
@keyframes fx-neon-an { 0% { opacity: .15; } 8% { opacity: 1; } 14% { opacity: .2; } 22% { opacity: 1; } 30% { opacity: .5; } 36%, 100% { opacity: 1; } }
@keyframes fx-neon-klick { from { transform: translate3d(0, -.18em, 0); opacity: .3; } to { transform: none; opacity: 1; } }
/* raumfahrt / nahaufnahmen */
.fx-raumfahrt .fx-bild { will-change: opacity, transform; }
.fx-rf-zaehler { grid-area: t; align-self: start; justify-self: end; margin-top: -2.6rem; display: flex; align-items: center; gap: .7rem; font-size: .8rem; letter-spacing: .14em; opacity: .85; pointer-events: none; font-variant-numeric: tabular-nums; }
.fx-rf-zaehler i { display: block; width: 4.5rem; height: 2px; background: rgba(255, 255, 255, .25); overflow: hidden; }
.fx-rf-zaehler b { display: block; height: 100%; background: currentColor; transform-origin: 0 50%; transform: scaleX(0); }
.fx-rf-geist { grid-area: t; align-self: end; pointer-events: none; opacity: 0; position: relative; z-index: 0; }
.fx-raumfahrt .fx-phase { position: relative; z-index: 1; }
.fx-rf-geist > * { margin: 0; }
.fx-rf-geist.fx-rf-weg { animation: fx-rf-geist .6s ease-out 1 both; }
@keyframes fx-rf-geist { from { opacity: .55; transform: translate3d(0, 0, 0); } to { opacity: 0; transform: translate3d(0, -.6em, 0); } }
.fx-rf-nummern .fx-nummer { display: block; font-size: clamp(2.6rem, 9vw, 5.5rem); line-height: 1; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.fx-rf-nummern .fx-rf-geist { align-self: start; }
/* bildinbild */
.fx-bildinbild { position: relative; contain: paint; isolation: isolate; }
.fx-bildinbild > .fx-hinten { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -1; will-change: transform; }
.fx-bildinbild .fx-karte { margin: 0; overflow: hidden; border-radius: 14px; box-shadow: 0 40px 90px rgba(0, 0, 0, .5), 0 0 0 1px rgba(255, 255, 255, .18); will-change: transform; transform-origin: 50% 60%; }
.fx-bildinbild .fx-karte > img, .fx-bildinbild .fx-karte > video { display: block; width: 100%; height: 100%; object-fit: cover; }
/* schaerfen */
.fx-sf-teil { position: relative; isolation: isolate; }
.fx-sf-geist { position: absolute !important; inset: 0; margin: 0 !important; z-index: -1; pointer-events: none; filter: blur(9px); text-shadow: 0 0 18px currentColor; opacity: 0; }
/* einflug */
.fx-einflug { --fx-ef-spur: rgba(255, 255, 255, .22); }
.fx-ef-text { display: inline-block; will-change: transform; }
.fx-ef-wartet .fx-ef-text { transform: translate3d(-42vw, 0, 0) skewX(-14deg); opacity: 0;
  text-shadow: -.25em 0 0 var(--fx-ef-spur), -.55em 0 0 var(--fx-ef-spur), -.9em 0 0 var(--fx-ef-spur), -1.3em 0 0 var(--fx-ef-spur); }
.fx-ef-los .fx-ef-text { transform: none; opacity: 1; text-shadow: 0 0 0 transparent, 0 0 0 transparent, 0 0 0 transparent, 0 0 0 transparent;
  transition: transform .75s cubic-bezier(.16, .84, .24, 1), opacity .2s linear, text-shadow .75s cubic-bezier(.16, .84, .24, 1); }
.fx-ef-punkt { display: inline-block; width: .2em; height: .2em; margin-left: .06em; border-radius: 50%; background: var(--fx-akzent, #ffb020); box-shadow: 0 0 .35em var(--fx-akzent, #ffb020); vertical-align: baseline; }
.fx-ef-wartet .fx-ef-punkt { opacity: 0; transform: translate3d(0, -1.6em, 0); }
.fx-ef-los .fx-ef-punkt { animation: fx-ef-punkt .9s cubic-bezier(.3, .7, .4, 1) .55s 1 both; }
@keyframes fx-ef-punkt { 0% { opacity: 0; transform: translate3d(0, -1.6em, 0) scale(.6); } 20% { opacity: 1; } 55% { transform: translate3d(0, 0, 0) scale(1.25, .75); } 72% { transform: translate3d(0, -.35em, 0) scale(.95, 1.05); } 88% { transform: translate3d(0, 0, 0) scale(1.06, .94); } 100% { opacity: 1; transform: none; } }
.fx-ef-fertig .fx-ef-text { will-change: auto; }
/* zeitplan */
.fx-zeitplan { margin: 0; }
.fx-zp-eingabe { display: flex; align-items: center; gap: .6rem; min-height: 3.2rem; padding: .55rem .55rem .55rem 1.1rem; border-radius: 1.6rem; background: var(--fx-akzent, #ffb020); color: #1b1407; font-weight: 700; }
.fx-zp-text { flex: 1; min-width: 0; }
.fx-zp-rest { visibility: hidden; }
.fx-zp-tippt .fx-zp-getippt::after { content: ""; display: inline-block; width: 2px; height: 1.05em; margin-left: 1px; vertical-align: -.15em; background: currentColor; }
.fx-zp-knopf { flex: none; display: grid; place-items: center; width: 2.4rem; height: 2.4rem; border-radius: 50%; background: #fff; color: #1b1407; }
.fx-zp-plan { list-style: none; margin: 1.2rem 0 0; padding: 0; display: grid; gap: .55rem; }
.fx-zp-plan > li { display: grid; grid-template-columns: minmax(6.5rem, 30%) 1fr; align-items: center; gap: .8rem; font-size: .92rem; }
.fx-zp-plan > li > span { overflow-wrap: anywhere; }
.fx-zp-spur { position: relative; height: 1.25rem; border-radius: 6px; background: rgba(255, 255, 255, .06); }
.fx-zp-spur > i { position: absolute; top: 0; bottom: 0; border-radius: 6px; background: currentColor; transform-origin: 0 50%; transform: scaleX(0); will-change: transform; }
.fx-zp-fertig { display: inline-block; margin-top: 1rem; padding: .45rem .9rem; border-radius: 999px; background: rgba(255, 255, 255, .1); font-size: .85rem; opacity: 0; transform: translate3d(0, 8px, 0); transition: opacity .3s, transform .3s; }
.fx-zp-fertig.fx-an, .fx-ruhig .fx-zp-fertig { opacity: 1; transform: none; }
/* wuerfelfeld */
.fx-wuerfelfeld { position: relative; margin: 0; overflow: hidden; aspect-ratio: 16 / 10; }
.fx-wuerfelfeld > .fx-leinwand { position: absolute; inset: 0; width: 100%; height: 100%; display: block; pointer-events: none; }
@media (max-width: 700px) { .fx-wuerfelfeld { aspect-ratio: 4 / 5; } }
/* kurve */
.fx-kurve { position: relative; margin: 0; }
.fx-kurve-bild { display: block; width: 100%; height: clamp(11rem, 34vw, 19rem); overflow: visible; }
.fx-kurve-saeule { fill: rgba(255, 255, 255, .12); transform-box: fill-box; transform-origin: 50% 100%; transform: scaleY(0); }
.fx-kurve-funke { position: absolute; left: 0; top: 0; width: 14px; height: 14px; margin: -7px 0 0 -7px; border-radius: 50%; background: #fff; pointer-events: none; opacity: 0;
  box-shadow: 0 0 0 4px var(--fx-akzent, #ffb020), 0 0 24px 8px var(--fx-akzent, #ffb020); will-change: transform; }
.fx-kurve-zahl { font-variant-numeric: tabular-nums; display: inline-block; }
/* schockwelle */
.fx-schockwelle { position: relative; display: grid; place-items: center; isolation: isolate; }
.fx-sw-deko { z-index: -1; }
.fx-sw-deko > i { left: 50%; top: 50%; border-radius: 50%; }
.fx-sw-kern { width: 9rem; height: 9rem; background: radial-gradient(circle at 35% 30%, #ffd2c4, var(--fx-akzent, #e8402a) 45%, rgba(0, 0, 0, .55) 100%); box-shadow: 0 0 60px 10px var(--fx-akzent, #e8402a); transform: translate(-50%, -50%) scale(0); }
.fx-sw-teil { width: 14px; height: 14px; background: var(--fx-akzent, #e8402a); box-shadow: 0 0 12px var(--fx-akzent, #e8402a); transform: translate(-50%, -50%) scale(0); }
.fx-sw-ring { width: 80px; height: 80px; box-sizing: border-box; border: 2px solid var(--fx-akzent, #e8402a); opacity: 0; transform: translate(-50%, -50%) scale(0); }
/* bento */
.fx-bento-raster { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: minmax(0, 1fr); gap: .6rem; padding: 4.4rem var(--fx-rand) 1.2rem; height: 100%; box-sizing: border-box; }
@media (min-width: 900px) { .fx-bento-raster { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .9rem; padding: 4.6rem max(var(--fx-rand), 4vw) 2rem; } }
.fx-kachel { position: relative; border-radius: 16px; contain: paint; background: rgba(255, 255, 255, .06); display: flex; flex-direction: column; justify-content: flex-end; padding: .7rem .8rem; color: #fff; will-change: transform, opacity; min-height: 0; }
.fx-kachel > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.fx-kachel > b, .fx-kachel > span { position: relative; font-size: .82rem; line-height: 1.25; }
.fx-kachel.fx-ziel { background: none; }
.fx-bento-voll { position: relative; z-index: 0; pointer-events: none; overflow: hidden; }   /* unter dem Raster: Beschriftung der Ziel-Kachel bleibt oben */
.fx-bento-voll > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; will-change: transform; }
.fx-bento .fx-danach { z-index: 3; opacity: 0; visibility: hidden; }
.fx-ruhig.fx-bento .fx-buehne { height: auto; display: block; }
.fx-ruhig.fx-bento .fx-bento-voll { display: none; }
.fx-ruhig.fx-bento .fx-bento-raster { height: auto; grid-auto-rows: 9rem; }
.fx-ruhig.fx-bento .fx-danach { opacity: 1; visibility: visible; background: none; padding-top: 1rem; }
.fx-bento-kopie { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* tippen */
.fx-tp-rest { visibility: hidden; }
.fx-tp-cursor { display: inline-block; width: 2px; height: 1em; margin: 0 1px -.12em; background: currentColor; animation: fx-blinken 1s steps(1, end) infinite; }
.fx-tp-fertig .fx-tp-cursor { display: none; }
@keyframes fx-blinken { 50% { opacity: 0; } }
/* zerlegen */
.fx-zerlegen { position: relative; margin: 0; }
.fx-zl-stapel { position: relative; aspect-ratio: 16 / 11; contain: paint; }   /* abgehobene Schichten bleiben im Rahmen (auch für Treffer/Taps) */
@media (max-width: 700px) { .fx-zl-stapel { aspect-ratio: 4 / 5; } .fx-schicht { left: 0; width: 58%; } .fx-zl-schild { left: 57%; font-size: .8rem; padding-left: 1.1rem; } .fx-zl-aufbau .fx-zl-stapel { contain: none; }   /* Modus aufbau: Schichten fallen von oben herein, die klebende Bühne (.fx-zl-kleber) schneidet ab */
.fx-zl-aufbau .fx-zl-schild { hyphens: manual; }
@media (max-width: 700px) {
  .fx-zl-aufbau .fx-zl-stapel { margin-bottom: 2.2em; }
  .fx-zl-aufbau .fx-schicht { left: 8%; width: 84%; }
  .fx-zl-aufbau .fx-zl-schild { left: 0; right: 0; top: auto; bottom: -2em; margin: 0; padding: 0; text-align: center; transform: none !important; transition: opacity .2s; }
  .fx-zl-aufbau .fx-zl-schild::before { display: none; }
  .fx-zl-aufbau .fx-zl-schild:not(.fx-zl-neuest) { opacity: 0 !important; visibility: hidden !important; }
}
.fx-zl-schild::before { width: .8rem; } }
.fx-schicht { position: absolute; left: 2%; top: 0; width: 62%; height: 100%; object-fit: contain; will-change: transform; pointer-events: none; }
.fx-zl-schild { position: absolute; left: 64%; right: 0; top: 50%; margin-top: -.75em; font-size: .9rem; line-height: 1.3; padding-left: 1.4rem; overflow-wrap: anywhere; hyphens: auto; opacity: 0; visibility: hidden; will-change: transform, opacity; }
.fx-zl-schild::before { content: ""; position: absolute; left: 0; top: .65em; width: 1rem; height: 1px; background: currentColor; opacity: .6; }
/* konfigurator */
.fx-konfig fieldset { border: 0; margin: 0 0 1rem; padding: 0; min-width: 0; }
.fx-konfig legend { font-size: .8rem; letter-spacing: .14em; text-transform: uppercase; opacity: .7; margin-bottom: .5rem; padding: 0; }
.fx-konfig label { display: inline-flex; align-items: center; gap: .5rem; min-height: 44px; padding: .45rem .9rem; margin: 0 .35rem .45rem 0; border-radius: 12px; border: 1px solid rgba(255, 255, 255, .22); cursor: pointer; }
.fx-konfig label.fx-gewaehlt { border-color: var(--fx-akzent, #ffb020); box-shadow: 0 0 0 1px var(--fx-akzent, #ffb020), 0 0 22px rgba(255, 176, 32, .25); }
.fx-konfig label { position: relative; }
.fx-konfig label > input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }   /* ganze Fläche ist das Feld (≥ 44 px), Anzeige über ::before */
.fx-konfig label::before { content: ""; flex: none; width: 1rem; height: 1rem; border-radius: 4px; border: 2px solid currentColor; opacity: .7; box-sizing: border-box; }
.fx-konfig label.fx-kf-radio::before { border-radius: 50%; }
.fx-konfig label.fx-gewaehlt::before { opacity: 1; border-color: var(--fx-akzent, #ffb020); background: var(--fx-akzent, #ffb020); box-shadow: inset 0 0 0 2px #111; }
.fx-konfig label:focus-within { outline: 3px solid var(--fx-akzent, #ffb020); outline-offset: 2px; }
.fx-kf-bild { position: relative; }
.fx-kf-bild .fx-belag { opacity: 0; transition: opacity .25s; }
.fx-kf-bild .fx-belag.fx-an { opacity: 1; }
.fx-belag.fx-kf-pop { animation: fx-kf-pop .5s cubic-bezier(.2, .9, .3, 1.3) 1; transform-box: fill-box; transform-origin: center; }
@keyframes fx-kf-pop { from { transform: scale(1.6) translate(0, -8%); opacity: 0; } to { transform: none; opacity: 1; } }
.fx-kf-stempel { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); font-size: clamp(2rem, 7vw, 3.6rem); font-weight: 700; color: rgba(255, 255, 255, .92); text-shadow: 0 2px 18px rgba(0, 0, 0, .55); pointer-events: none; white-space: nowrap; }
.fx-kf-stempel.fx-kf-schlag { animation: fx-kf-schlag .45s cubic-bezier(.2, .9, .3, 1.2) 1; }
@keyframes fx-kf-schlag { from { transform: translate(-50%, -50%) scale(1.8); opacity: 0; } to { transform: translate(-50%, -50%) scale(1); opacity: 1; } }
.fx-kf-preis { font-variant-numeric: tabular-nums; }
/* durchflug */
.fx-durchflug .fx-bilder > .fx-df-glas { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; opacity: 0; visibility: hidden; pointer-events: none; will-change: transform, opacity; }
/* entschluesseln */
.fx-ez-wort { white-space: nowrap; }
.fx-ez-z { position: relative; }
.fx-ez-offen { color: transparent; }
.fx-ez-offen::after { content: attr(data-z); position: absolute; left: 50%; top: 0; transform: translateX(-50%); color: var(--fx-ez-farbe, var(--fx-akzent, #ffb020)); opacity: .85; }
/* streifen */
.fx-streifen { position: relative; margin: 0; overflow: hidden; }
.fx-streifen > img, .fx-streifen > picture > img { display: block; width: 100%; height: 100%; object-fit: cover; }
.fx-st-deko > img { width: 100%; height: 100%; object-fit: cover; }
/* balkenwisch */
.fx-balkenwisch { position: relative; margin: 0; overflow: hidden; }
.fx-balkenwisch > img, .fx-balkenwisch > picture > img { display: block; width: 100%; height: 100%; object-fit: cover; will-change: clip-path; }
.fx-bw-deko > .fx-bw-balken { top: 0; bottom: 0; height: 100%; box-shadow: 0 0 40px rgba(0, 0, 0, .35); }
/* fokusliste */
.fx-fokusliste { list-style: none; padding: 0; margin: 0; }
.fx-fokusliste > li, .fx-fokusliste .fx-fl-wort { opacity: .3; filter: blur(3px); transition: opacity .35s ease, filter .35s ease, transform .35s ease; transform-origin: 0 50%; }
.fx-fokusliste .fx-nah { opacity: .5; filter: blur(1.5px); }
.fx-fokusliste .fx-aktiv { opacity: 1; filter: none; transform: translate3d(.12em, 0, 0); position: relative; z-index: 1; }   /* unscharfe Nachbarn (filter = eigene Ebene) nie über dem scharfen Wort */
.fx-ruhig.fx-fokusliste > li, .fx-ruhig.fx-fokusliste .fx-fl-wort { opacity: 1; filter: none; }
/* schachtel (CSS-3D) */
.fx-schachtel { margin: 0; }
.fx-sch-raum { position: relative; perspective: 1500px; perspective-origin: 50% 30%; display: grid; place-items: center; }
.fx-sch-box { position: relative; width: 0; height: 0; transform-style: preserve-3d; will-change: transform; }
.fx-sch-f { position: absolute; box-sizing: border-box; }
.fx-sch-vorne, .fx-sch-hinten { width: var(--b); height: var(--h); left: calc(var(--b) / -2); top: calc(var(--h) / -2); }
.fx-sch-vorne { transform: translateZ(calc(var(--t) / 2)); background: linear-gradient(180deg, #232326, #161618); display: grid; place-items: center; color: #fff; font-weight: 800; letter-spacing: .06em; font-size: calc(var(--h) * .2); text-transform: uppercase; border-top: 3px solid var(--fx-akzent, #e8402a); }
.fx-sch-hinten { transform: rotateY(180deg) translateZ(calc(var(--t) / 2)); background: #1c1c1f; }
.fx-sch-links, .fx-sch-rechts { width: var(--t); height: var(--h); left: calc(var(--t) / -2); top: calc(var(--h) / -2); background: linear-gradient(90deg, #121214, #1f1f22); }
.fx-sch-links { transform: rotateY(-90deg) translateZ(calc(var(--b) / 2)); }
.fx-sch-rechts { transform: rotateY(90deg) translateZ(calc(var(--b) / 2)); }
.fx-sch-boden, .fx-sch-inhalt { width: var(--b); height: var(--t); left: calc(var(--b) / -2); top: calc(var(--t) / -2); }
.fx-sch-boden { transform: translateY(calc(var(--h) / 2)) rotateX(90deg); background: #0e0e10; }
.fx-sch-inhalt { transform: translateY(calc(var(--h) / 2 - 2px)) rotateX(90deg); padding: 6%; }
.fx-sch-scharnier { position: absolute; left: 0; top: 0; width: 0; height: 0; transform-style: preserve-3d; }
.fx-sch-deckel { width: var(--b); height: var(--t); left: calc(var(--b) / -2); top: 0; transform-origin: 50% 0; transform: rotateX(90deg); transform-style: preserve-3d; background: linear-gradient(160deg, #26262a, #18181b); display: grid; place-items: center; }
.fx-sch-druck { color: #fff; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; font-size: calc(var(--b) * .05); padding: .4em .8em; border: 2px solid var(--fx-akzent, #e8402a); border-radius: 999px; }
.fx-sch-lasche { position: absolute; left: 0; right: 0; top: 100%; height: calc(var(--h) * .3); transform-origin: 50% 0; transform: rotateX(-90deg); background: #1b1b1e; border-bottom: 3px solid var(--fx-akzent, #e8402a); }
.fx-sch-innen { position: absolute; inset: 0; transform: translateZ(-1px); background: linear-gradient(180deg, #5a4636, #3a2d24); box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .08); }
@media (prefers-reduced-motion: reduce) {
  .fx-neon.fx-neon-an .fx-neon-text, .fx-neon.fx-neon-klick .fx-neon-text, .fx-rf-geist.fx-rf-weg, .fx-ef-los .fx-ef-punkt, .fx-belag.fx-kf-pop, .fx-kf-stempel.fx-kf-schlag, .fx-tp-cursor { animation: none !important; }
  .fx-fokusliste > li, .fx-fokusliste .fx-fl-wort { transition: none; }
}
.fx-ruhig .fx-neon-text { opacity: 1; }

/* leben (23.10.2026) */
.fx-leben { position: relative; isolation: isolate; }
.fx-leben-leinwand { position: absolute; left: 0; top: 0; pointer-events: none; z-index: 1; }

/* =====================================================================================
   NEU 24.10.2026 – Effekte aus den Vorbild-Filmen 13 und 14 (webfx.js 1.2)
   ===================================================================================== */
/* 04 b roentgen data-modus="gitter": klebende Bühne, Drahtgitter-Kanten leuchten nacheinander */
.fx-rg-gitter { --fx-hg: transparent; background: transparent; }
.fx-rg-gitter > .fx-rg-kleber { position: -webkit-sticky; position: sticky; top: 0; height: 100vh; height: 100svh; display: flex; flex-direction: column; justify-content: center; gap: .6rem; }
.fx-rg-gitter .fx-roentgen-bild { width: min(100%, calc((100svh - 6.5rem) * 1.6)); margin: 0 auto; flex: none; }
.fx-rg-gitter .fx-info { width: min(100%, calc((100svh - 6.5rem) * 1.6)); margin: 0 auto; }
.fx-rg-gitter:not(.fx-ruhig) .fx-regler-zeile { display: none; }   /* am Scroll gesteuert; Regler nur in der ruhigen Fassung */
svg.fx-gitter { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.fx-gitter-kante, .fx-gitter-glimm > * { fill: none; stroke: var(--fx-gitter, #9ad8ff); stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; }
.fx-gitter-glimm > * { stroke-width: 18; opacity: .2; transition: opacity .25s, stroke-width .25s; }
.fx-gitter-kante.fx-hell { stroke: #fff; }
.fx-gitter-glimm > .fx-hell { opacity: .5; stroke-width: 26; }

/* 41 globus */
.fx-globus { --fx-hg: #050b16; }
.fx-globus .fx-buehne { background: radial-gradient(ellipse at 50% 58%, #0c1d36 0%, #050b16 68%); }
.fx-gl-ziel { display: block; width: 100%; height: 100%; object-fit: cover; opacity: 0; visibility: hidden; will-change: transform, opacity; }
.fx-gl-ziel img { display: block; width: 100%; height: 100%; object-fit: cover; }
.fx-globus .fx-leinwand { position: relative; z-index: 1; pointer-events: none; }
.fx-gl-nadel { position: absolute; left: 50%; top: 50%; z-index: 2; width: 0; height: 0; opacity: 0; visibility: hidden; pointer-events: none; }
.fx-gl-punkt { position: absolute; left: -9px; top: -9px; width: 18px; height: 18px; border-radius: 50%; background: var(--fx-akzent); box-shadow: 0 0 0 3px #fff, 0 4px 14px rgba(0, 0, 0, .45); }
.fx-gl-punkt::after { content: ""; position: absolute; inset: -3px; border-radius: 50%; border: 2px solid var(--fx-akzent); opacity: 0; }
.fx-gelandet .fx-gl-punkt::after { animation: fx-gl-ring 2.4s ease-out infinite; }
@keyframes fx-gl-ring { 0% { transform: scale(1); opacity: .9; } 100% { transform: scale(4.2); opacity: 0; } }
.fx-gl-ort { position: absolute; left: 0; bottom: 20px; transform: translateX(-50%); margin: 0; width: max-content; max-width: min(86vw, 22rem); white-space: normal; overflow-wrap: anywhere; text-align: center; font-weight: 700; font-size: .95rem; line-height: 1.3; padding: .45rem .8rem; border-radius: .6rem; background: rgba(8, 14, 24, .86); color: #fff; box-shadow: 0 6px 20px rgba(0, 0, 0, .35); }
@media (prefers-reduced-motion: reduce) { .fx-gelandet .fx-gl-punkt::after { animation: none; } }

/* 42 kachelkugel */
.fx-kachelkugel { --fx-hg: #060c18; }
.fx-kachelkugel .fx-buehne { background: radial-gradient(ellipse at 50% 45%, #10213a 0%, #060c18 70%); }
.fx-kachelkugel .fx-leinwand { position: relative; z-index: 0; pointer-events: none; }
.fx-kk-zahl { position: relative; z-index: 2; align-self: start; justify-self: center; margin-top: 47svh; transform: translateY(-55%); text-align: center; pointer-events: none; line-height: 1.2; text-shadow: 0 2px 18px rgba(0, 0, 0, .55); }
.fx-kk-wert { display: block; font-size: clamp(3.4rem, 13vw, 8.5rem); font-weight: 800; font-variant-numeric: tabular-nums; letter-spacing: -.02em; color: #fff; }
.fx-kk-zahl > span { display: block; font-size: clamp(.9rem, 2.2vw, 1.1rem); color: #cfe3ff; opacity: 0; transition: opacity .4s; }
.fx-kk-fertig .fx-kk-zahl > span, .fx-ruhig .fx-kk-zahl > span { opacity: 1; }

/* 43 bildschirmflug */
.fx-bildschirmflug { --fx-hg: #0d1016; }
.fx-bildschirmflug .fx-buehne { background: radial-gradient(ellipse at 50% 30%, #2b313d 0%, #0d1016 72%); }
.fx-bf-raum { position: relative; z-index: 0; display: grid; place-items: center; perspective: 1300px; perspective-origin: 50% 28%; pointer-events: none; }
.fx-bf-flaeche { position: relative; width: min(86vw, 1100px, calc((100svh - 9rem) * 1.6)); aspect-ratio: 16 / 10; transform-origin: 50% 50%; border-radius: 10px; box-shadow: 0 30px 70px rgba(0, 0, 0, .55), 0 0 0 1px rgba(255, 255, 255, .08); margin-bottom: 6svh; }
.fx-bf-flaeche > picture, .fx-bf-flaeche > img, .fx-bf-flaeche > picture > img { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: 10px; }
.fx-bf-spiegel { position: absolute; left: 0; right: 0; top: 100%; height: 55%; margin-top: 6px; overflow: hidden; opacity: .28; pointer-events: none; -webkit-mask-image: linear-gradient(to bottom, #000 0%, transparent 85%); mask-image: linear-gradient(to bottom, #000 0%, transparent 85%); }
.fx-bf-spiegel > picture, .fx-bf-spiegel > img { display: block; width: 100%; height: calc(100% / .55); transform: scaleY(-1); }
.fx-bf-spiegel img { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: 10px; }
.fx-bildschirmflug .fx-texte { z-index: 2; }

/* 44 begleiter – Bahn klebt unten am Bildschirm, solange man durch die Kapitel scrollt */
.fx-begleiter { position: relative; --fx-bg-grund: rgba(10, 14, 20, .82); --fx-bg-text: #f2eee7; --fx-bg-linie: rgba(255, 255, 255, .28); }
.fx-bg-bahn { position: -webkit-sticky; position: sticky; bottom: 0; z-index: 5; height: 84px; margin-top: 2rem; background: var(--fx-bg-grund); color: var(--fx-bg-text); border-top: 1px solid rgba(255, 255, 255, .1); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); padding-bottom: env(safe-area-inset-bottom, 0px); box-sizing: content-box; }
.fx-bg-spur { position: absolute; left: 0; right: 0; top: 0; height: 34px; pointer-events: none; }
.fx-bg-spur::before { content: ""; position: absolute; left: 3%; right: 3%; top: 33px; height: 2px; border-radius: 1px; background: var(--fx-bg-linie); }
.fx-bg-huerde { position: absolute; top: 21px; width: 10px; height: 13px; margin-left: -5px; border-radius: 2px 2px 0 0; background: var(--fx-bg-linie); }
.fx-bg-halte { position: absolute; inset: 0; }
.fx-bg-halt { position: absolute; top: 29px; transform: translateX(-50%); min-width: 44px; min-height: 48px; padding: 0 2px; border: 0; background: none; color: inherit; font: inherit; font-size: .8rem; line-height: 1.2; display: flex; flex-direction: column; align-items: center; gap: 9px; cursor: pointer; max-width: 9rem; }
.fx-bg-halt-punkt { width: 10px; height: 10px; border-radius: 50%; background: var(--fx-bg-grund); box-shadow: 0 0 0 2px var(--fx-bg-linie); transition: background .2s, box-shadow .2s; }
.fx-bg-halt.fx-erreicht .fx-bg-halt-punkt { box-shadow: 0 0 0 2px var(--fx-akzent); }
.fx-bg-halt.fx-aktiv .fx-bg-halt-punkt { background: var(--fx-akzent); box-shadow: 0 0 0 2px var(--fx-akzent), 0 0 12px var(--fx-akzent); }
.fx-bg-halt-name { opacity: .7; white-space: nowrap; }
.fx-bg-halt.fx-aktiv .fx-bg-halt-name { opacity: 1; font-weight: 700; }
.fx-bg-halt:focus-visible { outline: 3px solid var(--fx-akzent); outline-offset: 2px; border-radius: 6px; }
@media (max-width: 520px) { .fx-bg-halt-name { display: none; } .fx-bg-halt.fx-aktiv .fx-bg-halt-name { display: block; } }   /* schmal: nur das aktuelle Kapitel beschriftet (Name steht zusätzlich im aria-label) */
.fx-bg-figur { position: absolute; left: 0; top: -15px; width: 44px; height: 50px; padding: 0; border: 0; background: none; cursor: pointer; will-change: transform; z-index: 2; }
.fx-bg-figur:focus-visible { outline: 3px solid var(--fx-akzent); outline-offset: 2px; border-radius: 8px; }
.fx-bg-svg { display: block; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.fx-bg-schatten { fill: rgba(0, 0, 0, .35); }
.fx-bg-rumpf { fill: var(--fx-akzent); }
.fx-bg-kopf { fill: #f1dcc0; }
.fx-bg-muetze { fill: #24303d; }
.fx-bg-auge { fill: #1b222b; }
.fx-bg-mund { fill: none; stroke: #1b222b; stroke-width: 1.4; stroke-linecap: round; }
.fx-bg-bein { fill: none; stroke: #24303d; stroke-width: 4.5; stroke-linecap: round; transform-box: view-box; }
.fx-bg-arm { fill: none; stroke: var(--fx-akzent); stroke-width: 4; stroke-linecap: round; transform-box: view-box; filter: brightness(.82); }
.fx-bg-bein-h { transform-origin: -4px -14px; transform: rotate(var(--b1, 0deg)); }   /* view-box: Ursprung = Nutzer-Koordinaten (0,0), nicht die linke obere Ecke */
.fx-bg-bein-v { transform-origin: 4px -14px; transform: rotate(var(--b2, 0deg)); }
.fx-bg-arm-h { transform-origin: -9px -33px; transform: rotate(var(--b2, 0deg)); }
.fx-bg-arm-v { transform-origin: 9px -33px; transform: rotate(var(--b1, 0deg)); }
.fx-bg-koerper { transform: translateY(var(--wipp, 0px)); }
.fx-bg-springt .fx-bg-bein-h { transform: rotate(-24deg); }
.fx-bg-springt .fx-bg-bein-v { transform: rotate(30deg); }
.fx-bg-springt .fx-bg-arm-h, .fx-bg-springt .fx-bg-arm-v { transform: rotate(150deg); }

/* 45 lichtspuren */
.fx-lichtspuren { --fx-ls-grund: #0b0e13; position: relative; isolation: isolate; contain: paint; margin: 0; min-height: clamp(24rem, 78svh, 46rem); display: grid; align-content: start; background: var(--fx-ls-grund); color: #fff; }
.fx-lichtspuren > .fx-leinwand { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.fx-ls-text { padding: 2rem var(--fx-rand) 2.2rem; max-width: 40rem; text-shadow: 0 2px 14px rgba(0, 0, 0, .6); }   /* Text oben, Spuren in der unteren Hälfte (webfx.js misst die Texthöhe) */

/* 46 sternausbruch – Abschluss-Karte */
.fx-sternausbruch { position: relative; isolation: isolate; text-align: center; }
.fx-sa-funken { position: absolute; left: 0; top: 0; width: 100%; height: 100%; z-index: -1; pointer-events: none; }   /* genau so groß wie die Karte: nie über Nachbar-Text (Falle 21), nie breiter (Falle 2) */
.fx-sa-knopf { position: relative; display: inline-grid; place-items: center; width: clamp(5.5rem, 20vw, 8.5rem); aspect-ratio: 1 / 1; padding: 0; margin: 0 auto 1rem; border: 0; border-radius: 50%; background: none; color: var(--fx-akzent); cursor: pointer; }
.fx-sa-knopf:focus-visible { outline: 3px solid var(--fx-akzent); outline-offset: 4px; }
.fx-sa-zeichen { width: 100%; height: 100%; display: block; }
.fx-sa-zeichen svg, .fx-sa-zeichen img { display: block; width: 100%; height: 100%; fill: currentColor; }
.fx-sa-hof { position: absolute; inset: -55%; z-index: -1; border-radius: 50%; pointer-events: none; opacity: 0; background: radial-gradient(circle, rgba(255, 236, 200, .8) 0%, rgba(255, 176, 32, .32) 28%, rgba(255, 176, 32, 0) 62%); }
.fx-sa-titel { position: relative; }
.fx-sa-titel::after { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0; background: linear-gradient(105deg, rgba(255, 255, 255, 0) 40%, rgba(255, 255, 255, .6) 50%, rgba(255, 255, 255, 0) 60%) no-repeat; background-size: 300% 100%; background-position: 100% 0; mix-blend-mode: soft-light; }   /* Glanz wandert per background-position – kein transform, also nie breiter als die Überschrift */
/* vor dem Zünden (nur wenn WebFX läuft): Stern klein, Schrift verdeckt, Rest leise */
.fx-sternausbruch[data-fx-an="1"]:not(.fx-sa-an) .fx-sa-zeichen { transform: scale(0) rotate(-60deg); opacity: 0; }
.fx-sternausbruch[data-fx-an="1"]:not(.fx-sa-an) .fx-sa-titel { opacity: 0; }   /* nicht per clip-path verstecken: unsichtbar geclippter Text wird von Prüfungen als „verdeckt“ gemeldet */
.fx-sternausbruch[data-fx-an="1"]:not(.fx-sa-an) .fx-sa-text { opacity: 0; }
.fx-sa-an .fx-sa-zeichen { animation: fx-sa-stern .95s cubic-bezier(.2, .9, .25, 1.2) both; }
.fx-sa-an .fx-sa-hof { animation: fx-sa-hof 1.8s ease-out both; }
.fx-sa-an .fx-sa-titel { animation: fx-sa-titel .8s cubic-bezier(.2, .7, .2, 1) .42s both; }
.fx-sa-an .fx-sa-titel::after { animation: fx-sa-glanz 1s ease-in-out 1.05s both; }
.fx-sa-an .fx-sa-text { animation: fx-sa-text .7s ease-out .95s both; }
@keyframes fx-sa-stern { 0% { transform: scale(0) rotate(-60deg); opacity: 0; } 55% { transform: scale(1.18) rotate(6deg); opacity: 1; } 100% { transform: scale(1) rotate(0); opacity: 1; } }
@keyframes fx-sa-hof { 0% { opacity: 0; transform: scale(.4); } 22% { opacity: 1; transform: scale(1.1); } 100% { opacity: .35; transform: scale(1); } }
@keyframes fx-sa-titel { 0% { opacity: 0; -webkit-clip-path: inset(0 100% 0 0); clip-path: inset(0 100% 0 0); transform: translateX(-.4em); } 1% { opacity: 1; } 100% { opacity: 1; -webkit-clip-path: inset(0 0 0 0); clip-path: inset(0 0 0 0); transform: none; } }
@keyframes fx-sa-glanz { 0% { opacity: 1; background-position: 100% 0; } 100% { opacity: 1; background-position: 0 0; } }
@keyframes fx-sa-text { 0% { opacity: 0; transform: translateY(.6em); } 100% { opacity: 1; transform: none; } }
.fx-sa-fertig .fx-sa-zeichen, .fx-sa-fertig .fx-sa-titel, .fx-sa-fertig .fx-sa-text, .fx-sa-fertig .fx-sa-titel::after { animation: none !important; }
.fx-sa-fertig .fx-sa-hof { animation: none; opacity: .35; }
@media (prefers-reduced-motion: reduce) { .fx-sa-an .fx-sa-zeichen, .fx-sa-an .fx-sa-titel, .fx-sa-an .fx-sa-text, .fx-sa-an .fx-sa-titel::after, .fx-sa-an .fx-sa-hof { animation: none; } .fx-sa-an .fx-sa-hof { opacity: .35; } }

/* =====================================================================================
   NEU 24.10.2026 abends – Effekte aus Vorbild-Film 15 (webfx.js 1.3)
   ===================================================================================== */
/* 47 buchstabenfall */
.fx-bf-wort { display: inline-flex; flex-wrap: wrap; max-width: 100%; }   /* Buchstaben bleiben zusammen – nur ein Wort, das breiter als die Zeile ist, darf umbrechen (Schrift 150 %) */
.fx-bf-z, .fx-bf-w { display: inline-block; }
.fx-bf-wartet .fx-bf-z, .fx-bf-wartet .fx-bf-w { opacity: 0; }
.fx-bf-los .fx-bf-z { animation: fx-bf-fall .78s cubic-bezier(.3, 0, .5, 1) calc(var(--i) * var(--fx-bf-takt, 55ms)) both; }
.fx-bf-los .fx-bf-w { animation: fx-bf-flug .7s cubic-bezier(.2, .7, .2, 1) calc(var(--fx-bf-start, 600ms) + var(--i) * 70ms) both; }
@keyframes fx-bf-fall { 0% { opacity: 0; transform: translate3d(0, -1.7em, 0) rotate(var(--r, 0deg)); } 14% { opacity: 1; } 55% { transform: translate3d(0, 0, 0) scale(1.08, .86); } 72% { transform: translate3d(0, -.26em, 0) rotate(calc(var(--r, 0deg) * .15)); } 87% { transform: translate3d(0, 0, 0) scale(1.03, .97); } 100% { opacity: 1; transform: none; } }
@keyframes fx-bf-flug { 0% { opacity: 0; transform: translate3d(2.4em, -.5em, 0) rotate(7deg); } 55% { opacity: 1; } 100% { opacity: 1; transform: none; } }
.fx-bf-fertig .fx-bf-z, .fx-bf-fertig .fx-bf-w { animation: none; }

/* 48 farbflut – klebende Bühne: vorher (hell) · Ball · Flut (Markenfarbe) · nachher (hell) */
.fx-farbflut { --fx-hg: var(--fx-ff-grund, #f3eee6); --fx-ff-grund: #f3eee6; --fx-ff-text: #1f1b17; }
.fx-farbflut .fx-buehne { background: var(--fx-ff-grund); color: var(--fx-ff-text); }
.fx-ff-vorher, .fx-ff-flut, .fx-ff-nachher { display: grid; place-items: center; align-content: center; text-align: center; padding: 2rem var(--fx-rand); }
.fx-ff-vorher { position: relative; z-index: 2; }
.fx-ff-ball { position: absolute; left: 0; top: 0; z-index: 1; border-radius: 50%; background: var(--fx-flut); box-shadow: inset -.3em -.4em .8em rgba(0, 0, 0, .18); opacity: 0; visibility: hidden; will-change: transform; pointer-events: none; }
.fx-ff-flut { position: relative; z-index: 3; background: var(--fx-flut); color: #fff; visibility: hidden; will-change: clip-path; }
.fx-ff-nachher { position: relative; z-index: 4; background: var(--fx-ff-grund); color: var(--fx-ff-text); visibility: hidden; will-change: clip-path; }
.fx-ff-inhalt { max-width: 40rem; transition: opacity .25s; }
.fx-farbflut.fx-ruhig { height: auto; }
.fx-farbflut.fx-ruhig .fx-buehne { height: auto; min-height: 0; display: block; }
.fx-farbflut.fx-ruhig .fx-ff-vorher, .fx-farbflut.fx-ruhig .fx-ff-flut, .fx-farbflut.fx-ruhig .fx-ff-nachher { visibility: visible; min-height: 60vh; }
.fx-farbflut.fx-ruhig .fx-ff-ball { display: none; }

/* 49 spaltenlauf */
.fx-spaltenlauf { max-width: calc((100svh - 6rem) * 1.6); margin-left: auto; margin-right: auto; display: grid; grid-template-columns: repeat(var(--fx-sl-n, 4), minmax(0, 1fr)); gap: clamp(.5rem, 1.4vw, 1rem); align-items: start; contain: paint; padding-bottom: 2.5rem; }
.fx-sl-spalte { display: grid; gap: clamp(.5rem, 1.4vw, 1rem); will-change: transform; }
.fx-sl-spalte:nth-child(even) { margin-top: 2.5rem; }
.fx-sl-spalte img, .fx-sl-spalte picture { display: block; width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; border-radius: var(--fx-runde, 12px); }
.fx-sl-wartet .fx-sl-spalte { opacity: 0; }
.fx-sl-los .fx-sl-spalte { animation: fx-sl-lauf 1.05s cubic-bezier(.16, .84, .3, 1.06) calc(var(--i) * 90ms) both; }
@keyframes fx-sl-lauf { 0% { opacity: 0; transform: translate3d(0, calc(var(--weg) * 120%), 0) scaleY(2.2); } 20% { opacity: .85; } 70% { transform: translate3d(0, calc(var(--weg) * -1.5%), 0) scaleY(.98); } 100% { opacity: 1; transform: none; } }
.fx-sl-fertig .fx-sl-spalte { animation: none; will-change: auto; }

/* 50 merkkarte */
.fx-merkkarte { position: relative; }
.fx-mk-buehne { display: grid; grid-template-areas: "k"; grid-template-columns: minmax(0, 1fr); justify-items: center; align-items: center; }
.fx-mk-buehne > * { grid-area: k; }
.fx-mk-karte { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .8rem; align-items: start; width: min(100%, 34rem); transition: transform .45s cubic-bezier(.5, 0, .3, 1), opacity .35s; transform-origin: 50% 50%; }
.fx-mk-inhalt { border-radius: 1rem; overflow: hidden; background: #fff; color: #1d1a16; box-shadow: 0 24px 50px rgba(0, 0, 0, .3); }
.fx-mk-inhalt img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; }
.fx-mk-aktionen { display: grid; gap: .5rem; }
.fx-mk-aktion { display: grid; place-items: center; width: 48px; min-height: 48px; padding: 0; border: 0; border-radius: 50%; background: #1d1a16; color: #fff; cursor: pointer; text-decoration: none; font: inherit; position: relative; }
.fx-mk-aktion svg { width: 22px; height: 22px; fill: currentColor; }
.fx-mk-aktion .fx-mk-text { display: none; }   /* Name steht im aria-label (webfx.js) – versteckter Text würde als „abgeschnitten“ gemeldet */
.fx-mk-aktion:focus-visible, .fx-mk-pille:focus-visible { outline: 3px solid var(--fx-akzent); outline-offset: 3px; }
.fx-mk-aktion[aria-pressed="true"] { background: var(--fx-mk-farbe, #d23c4f); }
.fx-mk-wartet .fx-mk-aktion { opacity: 0; transform: translate3d(-18px, 0, 0) scale(.6); }
.fx-mk-los .fx-mk-aktion { animation: fx-mk-raus .5s cubic-bezier(.3, 1.5, .5, 1) calc(.15s + var(--i) * 90ms) both; }
@keyframes fx-mk-raus { from { opacity: 0; transform: translate3d(-18px, 0, 0) scale(.6); } to { opacity: 1; transform: none; } }
.fx-mk-funken { position: absolute; left: 50%; top: 50%; width: 0; height: 0; pointer-events: none; }
.fx-mk-funken > i { position: absolute; left: -3px; top: -3px; width: 6px; height: 6px; border-radius: 50%; background: var(--fx-mk-farbe, #d23c4f); animation: fx-mk-funke .75s cubic-bezier(.2, .7, .3, 1) both; }
.fx-mk-funken > i.fx-mk-herz { left: -7px; top: -7px; width: 14px; height: 14px; background: none; color: var(--fx-mk-farbe, #d23c4f); }
.fx-mk-funken > i.fx-mk-herz svg { width: 100%; height: 100%; fill: currentColor; }
@keyframes fx-mk-funke { 0% { opacity: 1; transform: translate3d(0, 0, 0) scale(.4); } 70% { opacity: 1; } 100% { opacity: 0; transform: translate3d(var(--dx), var(--dy), 0) scale(1); } }
.fx-mk-pille { display: none; align-items: center; gap: .5rem; min-height: 48px; padding: .6rem 1.3rem; border: 0; border-radius: 999px; background: var(--fx-mk-farbe, #d23c4f); color: #fff; font: inherit; font-weight: 700; cursor: pointer; box-shadow: 0 12px 30px rgba(0, 0, 0, .3); }
.fx-mk-pille svg { width: 20px; height: 20px; fill: currentColor; }
.fx-mk-gefaltet .fx-mk-karte { transform: scale(.18); opacity: 0; visibility: hidden; transition: transform .45s cubic-bezier(.5, 0, .3, 1), opacity .35s .1s, visibility 0s .45s; }
.fx-mk-gefaltet .fx-mk-pille { display: inline-flex; animation: fx-mk-pille .45s cubic-bezier(.3, 1.4, .5, 1) .2s both; }
@keyframes fx-mk-pille { from { opacity: 0; transform: scale(.4, .2); } to { opacity: 1; transform: none; } }

/* 25 b zeitplan data-modus="suche" */
.fx-zp-ergebnis { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: 1rem; }
.fx-zp-suche:not(.fx-zp-zeigt):not(.fx-ruhig) .fx-zp-ergebnis > * { opacity: 0; transform: translate3d(0, 12px, 0) scale(.92); }
.fx-ruhig .fx-zp-ergebnis > * { animation: none !important; }
.fx-zp-zeigt .fx-zp-ergebnis > * { animation: fx-zp-plopp .5s cubic-bezier(.3, 1.45, .5, 1) calc(var(--i) * 80ms) both; }
@keyframes fx-zp-plopp { from { opacity: 0; transform: translate3d(0, 12px, 0) scale(.92); } to { opacity: 1; transform: none; } }

/* 16 b netz data-modus="pins" */
.fx-netz.fx-pins { position: relative; aspect-ratio: auto; overflow: visible; margin: 0 auto; width: min(100%, calc((100svh - 7rem) * 1.6)); }   /* ganze Karte passt auch in flache Fenster (1600×560) */
.fx-pins-karte { position: relative; aspect-ratio: var(--fx-format, 16 / 10); overflow: hidden; border-radius: var(--fx-runde, 14px); }
.fx-pins-karte > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.fx-pin { position: absolute; z-index: 1; transform: translate(-50%, -100%); display: grid; place-items: end center; min-width: 44px; min-height: 44px; padding: 0 0 6px; border: 0; background: none; cursor: pointer; font: inherit; }
.fx-pin-schild { position: relative; display: inline-block; padding: .3rem .6rem; border-radius: 999px; background: #fff; color: #1d1a16; font-size: .8rem; font-weight: 700; line-height: 1.2; white-space: nowrap; box-shadow: 0 4px 12px rgba(0, 0, 0, .22); transition: background .2s, color .2s, transform .25s cubic-bezier(.3, 1.5, .5, 1); }
.fx-pin-schild::after { content: ""; position: absolute; left: 50%; bottom: 1px; width: 8px; height: 8px; margin-left: -4px; background: inherit; transform: rotate(45deg); z-index: -1; }
.fx-pin.fx-pin-an { z-index: 2; }
.fx-pin.fx-pin-an .fx-pin-schild { background: #1d1a16; color: #fff; transform: scale(1.15); }
.fx-pin:focus-visible .fx-pin-schild { outline: 3px solid var(--fx-akzent); outline-offset: 2px; }
.fx-pins-wartet .fx-pin { opacity: 0; }
.fx-pins-los .fx-pin { animation: fx-pin-plopp .45s cubic-bezier(.3, 1.6, .5, 1) calc(var(--i) * 90ms) both; }
@keyframes fx-pin-plopp { from { opacity: 0; transform: translate(-50%, -60%) scale(.3); } to { opacity: 1; transform: translate(-50%, -100%); } }

@media (prefers-reduced-motion: reduce) { .fx-bf-los .fx-bf-z, .fx-bf-los .fx-bf-w, .fx-sl-los .fx-sl-spalte, .fx-mk-los .fx-mk-aktion, .fx-mk-funken, .fx-zp-zeigt .fx-zp-ergebnis > *, .fx-pins-los .fx-pin, .fx-mk-gefaltet .fx-mk-pille { animation: none !important; } .fx-mk-karte { transition: none; } }

/* =====================================================================================
   NEU 25.10.2026 – Effekte aus Vorbild-Film 16 (webfx.js 1.4)
   ===================================================================================== */
/* 51 speisekarte – Bild je Gericht */
.fx-speisekarte { display: grid; gap: clamp(1rem, 3vw, 2.5rem); align-items: center; }
@media (min-width: 800px) { .fx-speisekarte { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); } }
.fx-sk-bilder { position: relative; aspect-ratio: 4 / 3; overflow: hidden; border-radius: var(--fx-runde, 14px); background: #2a1c14; max-height: calc(100svh - 4rem); }
@media (min-width: 800px) { .fx-sk-bilder { aspect-ratio: 9 / 10; } }
.fx-sk-bild { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; opacity: 0; visibility: hidden; transform: scale(1.05); transition: opacity .55s ease, transform 1.1s cubic-bezier(.2, .7, .2, 1), visibility 0s linear .55s; }
.fx-sk-bild.fx-aktiv { opacity: 1; visibility: visible; transform: none; transition: opacity .55s ease, transform 1.1s cubic-bezier(.2, .7, .2, 1), visibility 0s; }
.fx-sk-wartet .fx-sk-bild.fx-aktiv { transform: scale(1.08); }
.fx-sk-liste { list-style: none; margin: 0; padding: 0; display: grid; gap: .25rem; }
.fx-sk-gericht { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .1rem 1rem; width: 100%; min-height: 48px; padding: .75rem .9rem; border: 0; border-radius: .7rem; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; transition: background .25s; }
.fx-sk-gericht strong { grid-column: 1; font-size: 1.1rem; }
.fx-sk-gericht span { grid-column: 1; opacity: .75; font-size: .92rem; }
.fx-sk-gericht em { grid-column: 2; grid-row: 1; font-style: normal; font-variant-numeric: tabular-nums; }
.fx-sk-gericht[aria-pressed="true"] { background: rgba(255, 255, 255, .08); box-shadow: inset 3px 0 0 var(--fx-akzent); }
.fx-sk-gericht:focus-visible { outline: 3px solid var(--fx-akzent); outline-offset: 2px; }
.fx-ruhig .fx-sk-bild, .fx-ruhig .fx-sk-bild.fx-aktiv { transition: none; transform: none; }

/* 52 wendekarte – Karte dreht sich um */
.fx-wendekarte { display: grid; justify-items: center; gap: 1rem; }
.fx-wk-karte { position: relative; display: grid; width: min(100%, 34rem); perspective: 1400px; }   /* beide Seiten in derselben Zelle: die Karte wächst mit dem Text (Schrift 150 %) */
.fx-wk-vorne, .fx-wk-hinten { grid-area: 1 / 1; position: relative; min-height: calc(min(100vw - 2.5rem, 34rem) * .75); border-radius: var(--fx-runde, 16px); overflow: hidden; -webkit-backface-visibility: hidden; backface-visibility: hidden; transition: transform .8s cubic-bezier(.45, .05, .25, 1), visibility 0s linear .4s; box-shadow: 0 24px 50px rgba(0, 0, 0, .35); }
.fx-wk-vorne { transform: rotateY(0deg); }
.fx-wk-vorne img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.fx-wk-hinten { transform: rotateY(-180deg); visibility: hidden; display: grid; align-content: center; padding: clamp(1.2rem, 4vw, 2.4rem); background: var(--fx-wk-farbe, #4a1416); color: #f6ece2; }
.fx-wk-gedreht .fx-wk-vorne { transform: rotateY(180deg); visibility: hidden; }
.fx-wk-gedreht .fx-wk-hinten { transform: rotateY(0deg); visibility: visible; }
.fx-wk-drehen { min-height: 44px; padding: .55rem 1.1rem; border-radius: 999px; border: 1px solid currentColor; background: none; color: inherit; font: inherit; cursor: pointer; }
.fx-wk-drehen:focus-visible { outline: 3px solid var(--fx-akzent); outline-offset: 3px; }
.fx-ruhig .fx-wk-vorne, .fx-ruhig .fx-wk-hinten { transition: none; }

/* 53 kartenfaecher – Zahl + Karten fächern auf */
.fx-kartenfaecher { display: grid; gap: 1.5rem; align-items: center; }
@media (min-width: 800px) { .fx-kartenfaecher { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); } }
.fx-kfa-stapel { position: relative; height: clamp(15rem, 42vw, 24rem); max-height: calc(100svh - 6rem); contain: paint; }
.fx-kfa-stapel > * { position: absolute; left: 50%; top: 12%; width: clamp(7rem, 30%, 12rem); aspect-ratio: 3 / 4; object-fit: cover; border-radius: 10px; border: 6px solid #f6efe4; box-shadow: 0 14px 30px rgba(0, 0, 0, .35); transform-origin: 50% 100%; will-change: transform; background: #f6efe4; }
.fx-kfa-los .fx-kfa-stapel > * { transition: transform .9s cubic-bezier(.25, 1.2, .35, 1) calc(var(--i) * 70ms); }
.fx-kartenfaecher .fx-kfa-zahl strong { display: block; font-size: clamp(3rem, 10vw, 6rem); line-height: 1.1; font-variant-numeric: tabular-nums; }
@media (prefers-reduced-motion: reduce) { .fx-kfa-los .fx-kfa-stapel > *, .fx-sk-bild, .fx-wk-vorne, .fx-wk-hinten { transition: none !important; } }

/* 54 tageslauf – Uhr, Licht, „Jetzt geöffnet?“ */
.fx-tageslauf { --fx-hg: #1a1410; }
.fx-tl-bilder { position: relative; overflow: hidden; }
.fx-tl-bild { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.fx-tl-bilder > .fx-tl-bild ~ .fx-tl-bild { opacity: 0; visibility: hidden; }
.fx-tl-licht { position: relative; z-index: 1; pointer-events: none; background: radial-gradient(ellipse at 30% 20%, rgba(255, 196, 120, .55), rgba(255, 150, 60, .25) 60%, rgba(255, 140, 50, 0)); mix-blend-mode: soft-light; opacity: 0; }
.fx-tl-anzeige { position: relative; z-index: 2; align-self: start; justify-self: end; margin: clamp(.8rem, 3vw, 2rem) var(--fx-rand); padding: .8rem 1rem; border-radius: 1rem; background: rgba(12, 10, 8, .72); color: #fff; text-align: right; max-width: min(22rem, calc(100% - 2 * var(--fx-rand))); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.fx-tl-uhr { margin: 0; font-size: clamp(2.2rem, 7vw, 3.6rem); line-height: 1.15; font-weight: 700; font-variant-numeric: tabular-nums; }
.fx-tl-status { margin: .1rem 0 .5rem; font-weight: 700; color: #8ee6a6; }
.fx-tl-zu .fx-tl-status { color: #ffb4a8; }
.fx-tl-zeile { display: flex; flex-wrap: wrap; gap: .4rem .6rem; justify-content: flex-end; align-items: center; }
.fx-tl-jetzt { min-height: 44px; padding: .45rem .9rem; border-radius: 999px; border: 1px solid rgba(255, 255, 255, .5); background: none; color: #fff; font: inherit; cursor: pointer; }
.fx-tl-jetzt:focus-visible { outline: 3px solid var(--fx-akzent); outline-offset: 2px; }
.fx-tl-info { flex-basis: 100%; font-size: .85rem; color: #e8e2d8; min-height: 1.2em; }
.fx-tl-regler { display: block; margin-top: .6rem; font-size: .85rem; text-align: left; }
.fx-tl-regler input { display: block; width: 100%; min-height: 44px; accent-color: var(--fx-akzent); }
.fx-tageslauf .fx-texte { z-index: 2; }

/* 55 hauslicht – Leitung + Fenster gehen an */
.fx-hauslicht { --fx-hg: transparent; background: transparent; }
.fx-hauslicht > .fx-hl-kleber { position: -webkit-sticky; position: sticky; top: 0; height: 100vh; height: 100svh; display: flex; flex-direction: column; justify-content: center; gap: .6rem; }
.fx-hl-bild { position: relative; width: min(100%, calc((100svh - 6.5rem) * 1.6)); margin: 0 auto; aspect-ratio: 16 / 10; overflow: hidden; border-radius: var(--fx-runde, 14px); background: #0b1530; flex: none; }
.fx-hl-bild > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
svg.fx-hl-leitung { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 2; }
.fx-hl-leitung path { fill: none; stroke: #fff4d6; stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; }
.fx-hl-leitung .fx-hl-glimm { stroke: #ffc864; stroke-width: 16; opacity: .3; }
.fx-hl-kopf { fill: #fff; filter: drop-shadow(0 0 6px #ffd27a); transition: opacity .2s; }
.fx-hl-fenster { position: absolute; z-index: 1; opacity: 0; background: linear-gradient(180deg, rgba(255, 214, 140, .95), rgba(255, 170, 80, .85)); mix-blend-mode: screen; box-shadow: 0 0 22px 6px rgba(255, 190, 100, .45); transition: opacity .6s ease; pointer-events: none; }
.fx-hl-fenster.fx-an { opacity: 1; }
.fx-hauslicht figcaption { width: min(100%, calc((100svh - 6.5rem) * 1.6)); margin: 0 auto; }
.fx-ruhig .fx-hl-fenster { transition: none; }

/* 56 schalter – Licht im Foto schalten */
.fx-schalter { margin: 0; display: grid; gap: 1rem; }
@media (min-width: 900px) { .fx-schalter { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); align-items: center; } }
.fx-lsch-bild { position: relative; aspect-ratio: 16 / 10; overflow: hidden; border-radius: var(--fx-runde, 14px); background: #0e1320; }
.fx-lsch-ebene { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; transition: opacity .45s ease; }
.fx-lsch-leiste { display: grid; gap: 1rem; }
.fx-lsch-knoepfe { display: grid; grid-template-columns: repeat(auto-fit, minmax(6.5rem, 1fr)); gap: .6rem; }
.fx-lsch-knopf { display: grid; justify-items: center; gap: .5rem; min-height: 96px; padding: .8rem .5rem; border-radius: .9rem; border: 1px solid rgba(255, 255, 255, .22); background: rgba(255, 255, 255, .05); color: inherit; font: inherit; cursor: pointer; }
.fx-lsch-wippe { position: relative; width: 30px; height: 44px; border-radius: 7px; background: #e9e4da; box-shadow: inset 0 0 0 2px rgba(0, 0, 0, .15); }
.fx-lsch-wippe::after { content: ""; position: absolute; left: 5px; right: 5px; top: 5px; height: 15px; border-radius: 4px; background: #c9c2b5; transition: transform .2s; }
.fx-lsch-knopf[aria-pressed="true"] { border-color: var(--fx-akzent); background: rgba(255, 176, 32, .14); }
.fx-lsch-knopf[aria-pressed="true"] .fx-lsch-wippe::after { transform: translateY(19px); background: var(--fx-akzent); }
.fx-lsch-knopf:focus-visible { outline: 3px solid var(--fx-akzent); outline-offset: 2px; }
.fx-lsch-dimmer { display: grid; gap: .3rem; font-size: .9rem; }
.fx-lsch-dimmer input { width: 100%; min-height: 44px; accent-color: var(--fx-akzent); }
.fx-lsch-aus .fx-lsch-dimmer { opacity: .5; }
.fx-ruhig .fx-lsch-ebene, .fx-ruhig .fx-lsch-wippe::after { transition: none; }

/* 57 sauberwischen – Scheibe putzen */
.fx-sauberwischen { --fx-hg: transparent; background: transparent; margin: 0; }
.fx-sauberwischen > .fx-swi-kleber { position: -webkit-sticky; position: sticky; top: 0; height: 100vh; height: 100svh; display: flex; flex-direction: column; justify-content: center; gap: .6rem; }
.fx-swi-bild { position: relative; width: min(100%, calc((100svh - 6.5rem) * 1.6)); margin: 0 auto; aspect-ratio: 16 / 10; overflow: hidden; border-radius: var(--fx-runde, 14px); flex: none; touch-action: pan-y; cursor: grab; background: #8a8478; }
.fx-swi-bild > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.fx-swi-schmutz { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; pointer-events: none; }
.fx-swi-abzieher { position: absolute; left: -9px; top: 0; z-index: 2; width: 18px; visibility: hidden; pointer-events: none; border-radius: 5px; background: linear-gradient(90deg, #2b2b2b, #4a4a4a 40%, #1a1a1a); box-shadow: 0 6px 14px rgba(0, 0, 0, .35); will-change: transform; }
.fx-swi-griff { position: absolute; right: 100%; top: 42%; width: 46px; height: 16%; min-height: 12px; border-radius: 6px 0 0 6px; background: var(--fx-akzent); }
.fx-sauberwischen figcaption { width: min(100%, calc((100svh - 6.5rem) * 1.6)); margin: 0 auto; }

/* 08 b ebenen data-modus="schweben" */
.fx-schweben { position: relative; contain: paint; }
.fx-schweben .fx-schweb { position: absolute; z-index: 0; height: auto; pointer-events: none; will-change: transform; filter: drop-shadow(0 18px 18px rgba(0, 0, 0, .3)); }
.fx-schweben > :not(.fx-schweb) { position: relative; z-index: 1; }
.fx-tl-bilder > picture { position: absolute; inset: 0; display: block; }