/*! 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; will-change: transform; }
.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; } }