/*! WebFX 1.0 – 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-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-spiegel { 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-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); }
.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; }