/* Floating Liberty – Film-Player. CI: Jade #14b8a6, Inter, dunkles Glas. Groessen der Einblendungen skalieren mit --u
   (Buehnenbreite / 1920), nie kleiner als die Mindestgroessen. Lagen kommen aus JS (--vx/--vy/--vw/--vh = #buehne,
   --bx/--by/--bw/--bh = Video in #buehne, --sx/--sy/--sw/--sh = sichtbare Buehne, --sr/--sb = Abstand rechts/unten).
   UX-Runde 07.10.: Lese-Schleier, Kapitelmarke als Glas-Pille, Schild-Eintritt (aufklappen + scharf werden, <= 0,7 s),
   Puls nur beim Einrasten, ruhiger Halt (einzeilige Hotspots, ein gemeinsamer Atem auf dem Plus, Vignette, Zoom),
   Info-Karte neben dem Schild mit Lichtkegel, Startbild mit Titel im oberen Drittel. */

@font-face { font-family: 'Inter'; font-weight: 400; font-style: normal; font-display: swap; src: url('../schrift/Inter_opsz14_wght400.woff') format('woff'); }
@font-face { font-family: 'Inter'; font-weight: 500; font-style: normal; font-display: swap; src: url('../schrift/Inter_opsz14_wght500.woff') format('woff'); }
@font-face { font-family: 'Inter'; font-weight: 600; font-style: normal; font-display: swap; src: url('../schrift/Inter_opsz14_wght600.woff') format('woff'); }
@font-face { font-family: 'Inter Display'; font-weight: 600; font-style: normal; font-display: swap; src: url('../schrift/Inter_opsz32_wght600.woff') format('woff'); }

:root {
  --jade: #14b8a6;
  --jade-hell: #5eead4;
  --jade-tief: #022c27;
  --petrol: #031416;
  --petrol-2: #072a2e;
  --glas: rgba(255, 255, 255, .12);
  --glas-rand: rgba(255, 255, 255, .30);
  --glas-dunkel: rgba(8, 22, 26, .42);
  --schrift: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --schrift-display: 'Inter Display', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --text-schatten: 0 1px 2px rgba(0, 0, 0, .35), 0 2px 14px rgba(0, 0, 0, .22);
  --titel-schatten: 0 1px 3px rgba(0, 0, 0, .3), 0 2px 24px rgba(0, 0, 0, .45);
  --weich: cubic-bezier(.2, .8, .2, 1);
}

html, body { margin: 0; height: 100%; background: var(--petrol); color: #fff; overflow: hidden; }
body { font-family: var(--schrift); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; }
button { font-family: inherit; }
[hidden] { display: none !important; }

.film {
  --leiste-h: 74px;
  position: fixed; top: 0; left: 0; right: 0; bottom: 0; overflow: hidden;
  background: radial-gradient(ellipse at 50% 40%, var(--petrol-2) 0%, var(--petrol) 70%);
  -webkit-user-select: none; user-select: none; -webkit-tap-highlight-color: transparent; touch-action: manipulation;
  --vx: 0px; --vy: 0px; --vw: 100vw; --vh: 56.25vw; --bx: 0px; --by: 0px; --bw: 100vw; --bh: 56.25vw;
  --sx: 0px; --sy: 0px; --sw: 100vw; --sh: 56.25vw; --sr: 0px; --sb: 0px; --u: 1;
}
#safe-mess { position: absolute; visibility: hidden; pointer-events: none; padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left); }

.film :focus:not(:focus-visible) { outline: none; }
.film button:focus-visible, .film a:focus-visible, .film [tabindex]:focus-visible { outline: 2px solid var(--jade-hell); outline-offset: 3px; }
#info-karte:focus { outline: none; }

/* ------------------------------------------------------------------ Umgebung + Bild */
#umgebung { position: absolute; top: 0; left: 0; right: 0; bottom: 0; overflow: hidden; z-index: 0; }
#umgebung-bild { position: absolute; top: -8%; left: -8%; width: 116%; height: 116%; object-fit: cover; opacity: .55; filter: blur(34px) saturate(1.1) brightness(.42); -webkit-filter: blur(34px) saturate(1.1) brightness(.42); transition: opacity .8s ease; }
.film[data-modus="cover"] #umgebung { display: none; }

#buehne { position: absolute; left: var(--vx); top: var(--vy); width: var(--vw); height: var(--vh); overflow: hidden; background: #000; z-index: 1; }
#buehne-innen { position: absolute; left: var(--bx); top: var(--by); width: var(--bw); height: var(--bh); will-change: transform; }
/* Halt-Fahrt (js/fl_halt_fahrt.js): will-change bleibt DAUERHAFT an #buehne-innen (eigene Kompositing-Ebene schon vor der Fahrt,
   kein Neu-Rastern an Anfang/Ende -> kein Unschaerfe-Sprung); Transform + Ursprung setzt FL.abbildung inline */
.film-video, #standbild { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: fill; opacity: 0; pointer-events: none; }
.film-video.an { opacity: 1; }
#standbild { z-index: 3; transition: opacity .35s ease; }
#standbild.an { opacity: 1; }
#standbild:not(.an) { transition: none; }
#wisch {
  position: absolute; left: -5%; width: 110%; top: -30%; height: 160%; z-index: 4; pointer-events: none; opacity: 0;
  background: linear-gradient(to top, rgba(94, 234, 212, 0) 0%, rgba(20, 184, 166, .45) 32%, rgba(153, 246, 228, .9) 50%, rgba(20, 184, 166, .45) 68%, rgba(94, 234, 212, 0) 100%);
}

/* Vignette im Halt (Schlussbild als Buehne), Abdunklung mit Lichtkegel bei offener Info-Karte, Lese-Schleier oben links */
#vignette, #dimmer, #schleier { position: absolute; pointer-events: none; z-index: 2; opacity: 0; }
#vignette { left: var(--sx); top: var(--sy); width: var(--sw); height: var(--sh); background: radial-gradient(ellipse 75% 75% at 50% 46%, rgba(3, 20, 22, 0) 58%, rgba(3, 20, 22, .42) 100%); transition: opacity 1.2s ease; }
.film[data-zustand="halt"] #vignette { opacity: 1; }
#dimmer { left: 0; top: 0; width: 100%; height: 100%; transition: opacity .3s ease; }
.info-offen #dimmer { opacity: 1; }
#schleier { left: var(--sx); top: var(--sy); width: calc(var(--sw) * .62); height: calc(var(--sh) * .52); background: radial-gradient(ellipse 72% 68% at 0 0, rgba(3, 20, 22, .55) 0%, rgba(3, 20, 22, .3) 45%, rgba(3, 20, 22, 0) 100%); transition: opacity .6s var(--weich); }
.schleier-an #schleier { opacity: 1; }
.hoch #schleier { display: none; }

/* ------------------------------------------------------------------ Linien (SVG) */
#linien-ebene { position: absolute; top: 0; left: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; z-index: 3; }
.linie { opacity: 0; transition: opacity .45s ease; }
.linie.an { opacity: 1; }
.linie.an.kurz { opacity: 0; }
.lp { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.lp.glow { stroke: rgba(20, 184, 166, .32); stroke-width: 9px; }
.lp.sicht { stroke: var(--jade-hell); stroke-width: 2.6px; }
.lp.verdeckt { stroke: rgba(94, 234, 212, .38); stroke-width: 2px; }
.lp.wasser { stroke: var(--jade-hell); stroke-width: 2.4px; stroke-dasharray: 7 8; }
.lp.wasser-verdeckt { stroke: rgba(94, 234, 212, .4); stroke-width: 2px; stroke-dasharray: 7 8; }
/* Fassung 2.1: verdeckte Linienteile (Konfig linien.verdeckt) - K2: hinterer Ellipsenbogen nicht mehr ueber der Fassade */
.linie.verdeckt-aus .lp.verdeckt, .linie.verdeckt-aus .lp.wasser-verdeckt { display: none; }
.linie.verdeckt-gestrichelt .lp.verdeckt { stroke: rgba(94, 234, 212, .3); stroke-width: 1.6px; stroke-dasharray: 3 8; }
.info-offen #g-linien { opacity: .35; transition: opacity .3s ease; }
.achse .lp.wasser { stroke-width: 2.6px; }
.achse .lp.glow { stroke: rgba(20, 184, 166, .38); }
.stil-sonnenbahn .lp.wasser { stroke: rgba(153, 246, 228, .9); stroke-width: 2.6px; stroke-dasharray: 9 9; }
.mess .lp.sicht { stroke: #fff; stroke-width: 2.2px; }
.mess .lp.glow { stroke: rgba(255, 255, 255, .18); stroke-width: 8px; }
.pfeil { fill: none; stroke: #fff; stroke-width: 2.2px; stroke-linecap: round; stroke-linejoin: round; }
.sonne-sym { transition: opacity .4s ease; }
.sonne-kern { fill: #fde68a; }
.sonne-strahlen { fill: none; stroke: #fde68a; stroke-width: 2.4px; stroke-linecap: round; }
.sonne-hof { fill: rgba(253, 230, 138, .16); }
.fuehrung { fill: none; stroke: rgba(255, 255, 255, .95); stroke-width: 1.5px; stroke-linecap: round; stroke-linejoin: round; opacity: 0; transition: opacity .25s ease; }
.fuehrung-schatten { fill: none; stroke: rgba(0, 0, 0, .35); stroke-width: 3.5px; stroke-linecap: round; stroke-linejoin: round; opacity: 0; transition: opacity .25s ease; }
.fuehrung.an, .fuehrung-schatten.an { opacity: 1; }
#ik-linie { fill: none; stroke: var(--jade-hell); stroke-width: 1.6px; stroke-linecap: round; stroke-linejoin: round; opacity: 0; transition: opacity .3s ease .15s; }
.info-offen #ik-linie { opacity: .9; }

/* ------------------------------------------------------------------ Ebenen der Einblendungen */
#einblendungen { position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; z-index: 4; }
.ebene { position: absolute; pointer-events: none; }
#ebene-oben-links { left: calc(var(--sx) + var(--sw) * .047); top: calc(var(--sy) + var(--sh) * .065); }
#ebene-oben-rechts { right: calc(var(--sr) + var(--sw) * .042); top: calc(var(--sy) + var(--sh) * .074); }
#ebene-unten-links { left: calc(var(--sx) + var(--sw) * .047); bottom: calc(var(--sb) + var(--sh) * .10); transition: bottom .35s var(--weich); }
.leiste-an #ebene-unten-links { bottom: max(calc(var(--sb) + var(--sh) * .10), calc(var(--leiste-h) + 14px)); }
#ebene-mitte { left: var(--sx); width: var(--sw); top: calc(var(--sy) + var(--sh) * .035); display: flex; flex-direction: column; align-items: center; }
#ebene-unten-mitte { left: var(--sx); width: var(--sw); bottom: calc(var(--sb) + var(--sh) * .035); display: flex; flex-direction: column; align-items: center; transition: bottom .35s var(--weich); }
.leiste-an #ebene-unten-mitte { bottom: max(calc(var(--sb) + var(--sh) * .035), calc(var(--leiste-h) + 10px)); }
#ebene-labels { left: 0; top: 0; width: 100%; height: 100%; }

.eb { will-change: opacity, transform; }

/* Kapitelkarte: Outline-Ziffer zeichnet sich, Titel daneben; danach schrumpft sie zur Kapitelmarke (eigene Glas-Pille) */
.karte { position: absolute; left: 0; top: 0; display: flex; align-items: center; opacity: 0; transform-origin: 0 0; transition: opacity .5s ease, transform .8s var(--weich); }
.karte.an { opacity: 1; }
.karte.raus { opacity: 0; transform: scale(.5); transition: opacity .45s ease, transform .6s var(--weich); }
.karte-ziffer { display: block; height: 44px; height: max(44px, calc(var(--u) * 112px)); width: auto; overflow: visible; filter: drop-shadow(0 2px 10px rgba(0, 0, 0, .45)); }
.karte-ziffer text { font-family: var(--schrift-display); font-weight: 600; font-size: 100px; fill: rgba(94, 234, 212, 0); stroke: var(--jade-hell); stroke-width: 2px; stroke-dasharray: 360; stroke-dashoffset: 360; transition: stroke-dashoffset 1.5s cubic-bezier(.45, 0, .2, 1) .05s, fill .8s ease 1.1s; }
.karte.an .karte-ziffer text { stroke-dashoffset: 0; fill: rgba(94, 234, 212, .12); }
.karte-strich { display: block; width: 1.5px; height: 30px; height: max(30px, calc(var(--u) * 74px)); background: rgba(255, 255, 255, .6); margin: 0 14px; margin: 0 max(10px, calc(var(--u) * 26px)); transform: scaleY(0); transition: transform .6s var(--weich) .35s; }
.karte.an .karte-strich { transform: none; }
.karte-text { display: flex; flex-direction: column; }
.karte-kap { font-size: 10px; font-size: max(10px, calc(var(--u) * 16px)); font-weight: 600; letter-spacing: .2em; color: rgba(255, 255, 255, .78); text-shadow: var(--titel-schatten); opacity: 0; transform: translateY(6px); transition: opacity .5s ease .55s, transform .6s var(--weich) .55s; }
.karte-titel { font-size: 16px; font-size: max(16px, calc(var(--u) * 36px)); font-weight: 600; line-height: 1.2; white-space: nowrap; text-shadow: var(--titel-schatten); opacity: 0; transform: translateX(-10px); transition: opacity .6s ease .7s, transform .8s var(--weich) .7s; }
.karte.an .karte-kap, .karte.an .karte-titel { opacity: 1; transform: none; }

.kapitelmarke {
  position: absolute; left: 0; top: 0; display: flex; align-items: center; white-space: nowrap;
  padding: .42em .95em .44em .75em; border-radius: 999px; background: rgba(14, 30, 34, .40); border: 1px solid rgba(255, 255, 255, .26);
  -webkit-backdrop-filter: blur(14px) saturate(1.2); backdrop-filter: blur(14px) saturate(1.2);
  font-size: 13px; font-size: max(13px, calc(var(--u) * 18px)); font-weight: 500; line-height: 1.2; text-shadow: 0 1px 2px rgba(0, 0, 0, .3);
  opacity: 0; transform: translateY(-4px); transition: opacity .25s ease, transform .35s var(--weich);
}
.kapitelmarke.an { opacity: 1; transform: none; transition-delay: .25s; }
.km-nr { font-family: var(--schrift-display); font-weight: 600; color: var(--jade-hell); margin-right: .55em; letter-spacing: .02em; }

/* Titel: Maske von unten, Laufweite zieht sich zusammen, Jade-Linie waechst */
.titel { position: absolute; left: 0; top: 0; opacity: 0; transition: opacity .45s ease; }
.titel.an { opacity: 1; }
.titel-text {
  font-family: var(--schrift-display); font-weight: 600; font-size: 34px; font-size: max(32px, calc(var(--u) * 94px)); line-height: 1.05;
  white-space: nowrap; letter-spacing: .3em; text-shadow: var(--titel-schatten);
  /* 09.10.: Maskenkasten um Unterlaengen (g, y) und Schriftschatten erweitern - vorher schnitt die Maske beides an der
     Zeilenbox ab (Kunde: 'Floating Liberty an den Unterlaengen abgeschnitten, lichter grauer Rahmen'). Negativer Rand = Layout gleich. */
  padding: .14em .35em .34em; margin: -.14em -.35em -.34em;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, transparent 50%, #000 50%, #000 100%); mask-image: linear-gradient(to bottom, transparent 0%, transparent 50%, #000 50%, #000 100%);
  -webkit-mask-size: 100% 200%; mask-size: 100% 200%; -webkit-mask-position: 0 0; mask-position: 0 0;
  transform: translateY(.18em);
  transition: letter-spacing 1.25s cubic-bezier(.16, .84, .3, 1), -webkit-mask-position .9s var(--weich), mask-position .9s var(--weich), transform 1s var(--weich);
}
.titel.an .titel-text, .logo-block.an .titel-text { letter-spacing: .015em; -webkit-mask-position: 0 100%; mask-position: 0 100%; transform: none; }
.titel-linie { display: block; height: 3px; height: max(3px, calc(var(--u) * 6px)); width: 42%; margin-top: .22em; margin-top: max(6px, calc(var(--u) * 14px)); border-radius: 3px; background: var(--jade); box-shadow: 0 0 14px rgba(20, 184, 166, .6); transform: scaleX(0); transform-origin: 0 50%; transition: transform 1s var(--weich) .55s; }
.titel.an .titel-linie, .logo-block.an .titel-linie { transform: none; }

/* Untertitel: Glaspanel, gleitet hoch, Woerter gestaffelt */
.fakt {
  position: absolute; left: 0; bottom: 0; display: flex; align-items: stretch; box-sizing: border-box;
  width: max-content; max-width: calc(var(--sw) * .46);
  padding: .55em 1em .6em .78em; border-radius: 12px; border-radius: max(10px, calc(var(--u) * 20px));
  background: rgba(8, 22, 26, .44); border: 1px solid rgba(255, 255, 255, .2);
  -webkit-backdrop-filter: blur(14px) saturate(1.15); backdrop-filter: blur(14px) saturate(1.15);
  box-shadow: 0 10px 34px rgba(0, 0, 0, .18);
  font-size: 15px; font-size: max(14px, calc(var(--u) * 33px)); line-height: 1.33; font-weight: 400;
  opacity: 0; transform: translateY(12px); transition: opacity .45s ease, transform .6s var(--weich);
}
.fakt.an { opacity: 1; transform: none; }
.fakt.raus { opacity: 0; transform: translateY(-10px); transition: opacity .35s ease, transform .45s ease; }
.fakt-balken { flex: none; width: 3px; width: max(3px, calc(var(--u) * 6px)); border-radius: 3px; background: var(--jade); margin-right: .62em; box-shadow: 0 0 10px rgba(20, 184, 166, .5); transform: scaleY(0); transform-origin: 50% 0; transition: transform .5s var(--weich) .1s; }
.fakt.an .fakt-balken { transform: none; }
.fakt-text { margin: 0; text-shadow: 0 1px 2px rgba(0, 0, 0, .35); }
.w { display: inline-block; opacity: 0; transform: translateY(.35em); transition: opacity .5s ease, transform .6s var(--weich); }
.fakt.an .w { opacity: 1; transform: none; }
.fakt:not(.an) .w { transition-delay: 0s !important; transition-duration: .2s; }
.fakt-titel { top: 0; bottom: auto; margin-top: 52px; margin-top: max(52px, calc(var(--u) * 150px)); max-width: calc(var(--sw) * .5); }
.claim { position: relative; left: auto; bottom: auto; margin-top: 10px; margin-top: max(10px, calc(var(--u) * 26px)); max-width: none; }

/* Chips oben rechts */
.chip {
  position: absolute; right: 0; top: 0; display: flex; align-items: center; white-space: nowrap;
  padding: .5em 1.05em .5em .78em; border-radius: 999px;
  background: rgba(14, 30, 34, .40); border: 1px solid rgba(255, 255, 255, .3);
  -webkit-backdrop-filter: blur(14px) saturate(1.2); backdrop-filter: blur(14px) saturate(1.2);
  font-size: 12px; font-size: max(12px, calc(var(--u) * 21px)); font-weight: 500; line-height: 1.25; text-shadow: 0 1px 2px rgba(0, 0, 0, .3);
  opacity: 0; transform: translateY(-6px) scale(.96); transform-origin: 100% 50%; transition: opacity .5s ease, transform .6s var(--weich);
}
.chip.an { opacity: 1; transform: none; }
.chip .sym { width: 1.3em; height: 1.3em; margin-right: .5em; color: var(--jade-hell); flex: none; }
.chip.haupt.an .sym-uhr .zeiger { transform-origin: 12px 12px; animation: drehen 4s linear infinite; }
.chip.zustand { top: calc(max(12px, calc(var(--u) * 21px)) * 2.62); font-size: 12px; font-size: max(12px, calc(var(--u) * 18px)); background: rgba(8, 22, 26, .40); border-color: rgba(255, 255, 255, .22); }
.chip.zustand.an .welle-pfeil { animation: steigen 1.8s ease-in-out infinite; }
.chip .bogen { width: 2.1em; height: 1.2em; margin-right: .55em; flex: none; overflow: visible; }
.bogen-horizont { stroke: rgba(255, 255, 255, .35); stroke-width: 1.2px; fill: none; }
.bogen-bahn { stroke: rgba(94, 234, 212, .7); stroke-width: 1.5px; fill: none; stroke-dasharray: 2.4 2.6; }
.bogen-sonne { fill: #fde68a; filter: drop-shadow(0 0 3px rgba(253, 230, 138, .9)); }
@keyframes drehen { to { transform: rotate(360deg); } }
@keyframes steigen { 0% { transform: translateY(3px); opacity: .4; } 50% { opacity: 1; } 100% { transform: translateY(-2px); opacity: .4; } }
/* im Halt: Zeitraffer-/Zustands-Chips ausblenden (ruhiger), Hinweise "Beispiel…"/"Prinzipdarstellung" (Info-Symbol) bleiben */
.film[data-zustand="halt"] .chip.sym-uhr, .film[data-zustand="halt"] .chip.zustand { opacity: 0; transition: opacity .4s ease; }

/* Labels an den Spuren */
.label { position: absolute; left: 0; top: 0; pointer-events: none; }
.label-punkt { position: absolute; left: 0; top: 0; width: 0; height: 0; opacity: 0; transition: opacity .25s ease; }
.label.an .label-punkt { opacity: 1; }
.label-punkt .kern { position: absolute; left: -6.5px; top: -6.5px; width: 13px; height: 13px; border-radius: 50%; background: var(--jade); box-shadow: 0 0 0 2.5px rgba(255, 255, 255, .92), 0 0 14px rgba(20, 184, 166, .85); transform: scale(0); transition: transform .4s cubic-bezier(.3, 1.6, .5, 1); }
.label.an .label-punkt .kern { transform: none; }
.label-punkt .ring { position: absolute; left: -19px; top: -19px; width: 38px; height: 38px; box-sizing: border-box; border-radius: 50%; border: 2px solid rgba(45, 212, 191, .75); opacity: 0; }
/* Puls nur beim Einrasten ("Klack"), zweimal – kein Dauerpuls */
.label.an .label-punkt .ring { animation: puls 1.3s ease-out .1s 2; }
.label.an .label-punkt .ring2 { animation-delay: .45s; animation-iteration-count: 1; }
@keyframes puls { 0% { transform: scale(.3); opacity: .95; } 100% { transform: scale(1.3); opacity: 0; } }
.label-punkt .treffer { position: absolute; left: -22px; top: -22px; width: 44px; height: 44px; border-radius: 50%; }

.label-pille {
  position: absolute; left: 0; top: 0; margin: 0; display: flex; align-items: center; box-sizing: border-box;
  padding: .42em .95em .46em .72em; border-radius: 999px; white-space: nowrap; text-align: left;
  font: 500 13px/1.2 var(--schrift); font-size: max(12px, calc(var(--u) * 25px)); color: #fff; text-shadow: 0 1px 2px rgba(0, 0, 0, .35);
  background: rgba(14, 30, 34, .42); border: 1px solid rgba(255, 255, 255, .30);
  -webkit-backdrop-filter: blur(14px) saturate(1.25); backdrop-filter: blur(14px) saturate(1.25);
  box-shadow: 0 8px 26px rgba(0, 0, 0, .22);
  -webkit-appearance: none; appearance: none; cursor: default; pointer-events: none;
  opacity: 0; transition: opacity .25s ease var(--verzug, 0ms), background .25s ease, border-color .25s ease, box-shadow .25s ease;
}
.label.an .label-pille { opacity: 1; }
.label:not(.an) .label-pille { transition-delay: 0s; }
/* Eintritt: Linie zeichnet sich (0,3 s), die Pille klappt vom Linienende auf, der Text wird scharf; zusammen <= 0,7 s */
.label.an.ein .label-pille { -webkit-animation: pille-auf-r .38s var(--weich) .18s both; animation: pille-auf-r .38s var(--weich) .18s both; }
.label.an.ein.seite-l .label-pille { -webkit-animation-name: pille-auf-l; animation-name: pille-auf-l; }
.label.an.ein .label-titel { animation: scharf .24s ease .4s both; }
.label.an.ein .label-sub { animation: scharf .24s ease .48s both; }
@-webkit-keyframes pille-auf-r { from { -webkit-clip-path: inset(0 100% 0 0); } to { -webkit-clip-path: inset(0 0 0 0); } }
@keyframes pille-auf-r { from { -webkit-clip-path: inset(0 100% 0 0); clip-path: inset(0 100% 0 0); } to { -webkit-clip-path: inset(0 0 0 0); clip-path: inset(0 0 0 0); } }
@-webkit-keyframes pille-auf-l { from { -webkit-clip-path: inset(0 0 0 100%); } to { -webkit-clip-path: inset(0 0 0 0); } }
@keyframes pille-auf-l { from { -webkit-clip-path: inset(0 0 0 100%); clip-path: inset(0 0 0 100%); } to { -webkit-clip-path: inset(0 0 0 0); clip-path: inset(0 0 0 0); } }
@keyframes scharf { from { opacity: 0; filter: blur(4px); } to { opacity: 1; filter: blur(0); } }
.label-dot { flex: none; width: .38em; height: .38em; border-radius: 50%; background: var(--jade-hell); margin-right: .5em; box-shadow: 0 0 8px rgba(94, 234, 212, .8); }
.label-textbox { display: flex; flex-direction: column; }
.label.zweizeilig .label-pille { align-items: stretch; border-radius: 12px; border-radius: max(9px, calc(var(--u) * 16px)); padding: .5em 1.05em .55em .72em; }
.label.zweizeilig .label-dot { width: 3px; height: auto; border-radius: 2px; background: var(--jade); margin-right: .62em; }
.label.zweizeilig .label-titel { font-weight: 600; }
.label-sub { font-weight: 400; font-size: .8em; color: rgba(255, 255, 255, .88); margin-top: .2em; }
.label-plus { display: none; }

/* im Halt: Hotspot – einzeilig (Unterzeile steht in der Info-Karte), Jade-Rahmen, Plus mit ruhigem gemeinsamen Atem */
.label.hotspot .label-pille { pointer-events: auto; cursor: pointer; background: rgba(20, 184, 166, .24); border-color: rgba(94, 234, 212, .8); }
.label.hotspot .label-pille::before { content: ''; position: absolute; left: -6px; right: -6px; top: -8px; bottom: -8px; }
.label.hotspot .label-pille:hover { background: rgba(20, 184, 166, .4); }
.label.hotspot .label-punkt { pointer-events: auto; cursor: pointer; }
.label.hotspot .label-sub { display: none; }
.label.hotspot.zweizeilig .label-pille { border-radius: 999px; align-items: center; padding: .42em .95em .46em .72em; }
.label.hotspot.zweizeilig .label-dot { width: .38em; height: .38em; border-radius: 50%; background: var(--jade-hell); margin-right: .5em; }
.label.hotspot .label-plus { position: relative; display: inline-flex; align-self: center; align-items: center; justify-content: center; flex: none; width: 1.25em; height: 1.25em; margin-left: .6em; border-radius: 50%; background: var(--jade); color: var(--jade-tief); }
.label.hotspot .label-plus::after { content: ''; position: absolute; left: -3px; top: -3px; right: -3px; bottom: -3px; border-radius: 50%; border: 1.5px solid rgba(94, 234, 212, .8); opacity: 0; animation: atem 3.2s ease-in-out .8s infinite; }
.label.hotspot .label-plus .sym { width: 1em; height: 1em; }
@keyframes atem { 0%, 100% { transform: scale(.85); opacity: 0; } 50% { transform: scale(1.25); opacity: .9; } }
.label.hotspot.aktiv .label-pille { background: var(--jade); color: var(--jade-tief); text-shadow: none; }
.label.hotspot.aktiv .label-plus { background: #fff; transform: rotate(45deg); }
.label.hotspot.aktiv .label-plus::after { animation: none; }
.label.hotspot.aktiv .label-dot { background: var(--jade-tief); box-shadow: none; }
/* Halt: liegt ein Hotspot-Anker unter dem Untertitel, tritt der Untertitel zurueck */
.ut-weg #ebene-unten-links { opacity: 0; transition: opacity .4s ease; }
/* 09.10.: Sprecher-Untertitel im Halt weicht einem Hotspot nach oben aus statt zu verschwinden */
.ut-oben #ebene-unten-links { bottom: calc(var(--sb) + var(--sh) * .76); -webkit-animation: ut-oben-ein .45s ease both; animation: ut-oben-ein .45s ease both; }
.ut-oben #ebene-unten-links .eb { max-width: calc(var(--sw) * .38); }   /* oben schmaler: Hotspot-Anker in der Bildmitte frei lassen */
@-webkit-keyframes ut-oben-ein { from { opacity: 0; } to { opacity: 1; } } @keyframes ut-oben-ein { from { opacity: 0; } to { opacity: 1; } }
/* Info-Karte offen: uebrige Hotspots, Untertitel, Halt-Karte treten zurueck */
.info-offen .label.hotspot:not(.aktiv), .info-offen #ebene-unten-links, .info-offen #ebene-oben-rechts, .info-offen #halt-karte { opacity: .35; transition: opacity .3s ease; }
.info-offen .label.hotspot:not(.aktiv) .label-plus::after { animation: none; }
.info-offen .label.unter-karte, .info-offen .fuehrung.unter-karte, .info-offen .fuehrung-schatten.unter-karte { opacity: 0 !important; }
.label.unter-karte .label-pille, .label.unter-karte .label-punkt { pointer-events: none !important; }

/* Messlinie */
.mess-text { position: absolute; left: 0; top: 0; padding: .3em .9em .34em; border-radius: 999px; white-space: nowrap; font-size: 12px; font-size: max(12px, calc(var(--u) * 21px)); font-weight: 500; text-shadow: 0 1px 2px rgba(0, 0, 0, .35); background: rgba(14, 30, 34, .42); border: 1px solid rgba(255, 255, 255, .32); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); opacity: 0; transition: opacity .45s ease .45s; }
.mess-text.an { opacity: 1; }
.mess-text.an.kurz { opacity: 0; transition-delay: 0s; }

/* Logo + Schlusstitel (Kapitel 9) */
.logo-block { display: flex; flex-direction: column; align-items: center; opacity: 0; transition: opacity .6s ease; }
.logo-block.an { opacity: 1; }
.logo-block .logo { width: 56px; width: max(54px, calc(var(--u) * 116px)); height: auto; overflow: visible; filter: drop-shadow(0 4px 16px rgba(0, 0, 0, .4)); }
.logo-block .titel-text { margin-top: .08em; font-size: max(32px, calc(var(--u) * 100px)); }
.titel-wrap { display: flex; flex-direction: column; align-items: flex-start; }
.logo .logo-haus { fill: #334155; } .logo .logo-dach { fill: #1e293b; } .logo .logo-f1 { fill: rgba(94, 234, 212, .82); } .logo .logo-f2 { fill: rgba(20, 184, 166, .55); }
.logo .logo-kontur { fill: none; stroke: var(--jade-hell); stroke-width: 2.2px; stroke-linejoin: round; }
.logo .logo-welle { fill: none; stroke: var(--jade-hell); stroke-width: 4.5px; stroke-linecap: round; }
.logo-block .logo-haus, .logo-block .logo-dach, .logo-block .logo-f1, .logo-block .logo-f2 { opacity: 0; transition: opacity .9s ease 1s; }
.logo-block.an .logo-haus, .logo-block.an .logo-dach, .logo-block.an .logo-f1, .logo-block.an .logo-f2 { opacity: 1; }
.logo-block .logo-kontur, .logo-block .logo-welle { stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 1.3s cubic-bezier(.45, 0, .2, 1); }
.logo-block .logo-welle { transition-delay: .35s; }
.logo-block.an .logo-kontur, .logo-block.an .logo-welle { stroke-dashoffset: 0; }
/* Kontakt: Haupthandlung am Filmende (Jade gefuellt mit Pfeil) */
.eb.kontakt {
  order: 1; display: inline-flex; align-items: center; pointer-events: none; text-decoration: none; color: var(--jade-tief);
  padding: .62em 1.3em .66em 1.7em; border-radius: 999px; border: 0; background: var(--jade);
  font-size: 15px; font-size: max(15px, calc(var(--u) * 24px)); font-weight: 600; letter-spacing: .01em;
  box-shadow: 0 8px 30px rgba(20, 184, 166, .45);
  opacity: 0; transform: translateY(10px) scale(.96); transition: opacity .6s ease, transform .7s var(--weich), background .25s ease;
}
.eb.kontakt .sym { width: 1.15em; height: 1.15em; margin-left: .4em; }
.eb.kontakt.an { opacity: 1; transform: none; pointer-events: auto; }
.eb.kontakt:hover { background: #2dd4bf; }
.eb.hinweis { order: 2; margin: 10px 0 0; margin-top: max(8px, calc(var(--u) * 18px)); padding: .35em 1.1em .4em; border-radius: 999px; background: rgba(8, 22, 26, .42); font-size: 12px; font-size: max(12px, calc(var(--u) * 17px)); font-weight: 400; color: rgba(255, 255, 255, .8); text-align: center; opacity: 0; transition: opacity 1.1s ease .3s; }
.eb.hinweis.an { opacity: 1; }

/* ------------------------------------------------------------------ Abblende, Laden */
#abblende { position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: var(--petrol); opacity: 0; pointer-events: none; z-index: 20; transition-property: opacity; transition-timing-function: ease; transition-duration: .2s; }
#abblende.an { opacity: 1; }
#lade-anzeige { position: absolute; left: calc(var(--sx) + var(--sw) / 2 - 22px); top: calc(var(--sy) + var(--sh) / 2 - 22px); width: 44px; height: 44px; z-index: 21; opacity: 0; pointer-events: none; transition: opacity .3s ease; }
.laedt #lade-anzeige { opacity: 1; }
.lade-ring { display: inline-block; width: 40px; height: 40px; box-sizing: border-box; border-radius: 50%; border: 3px solid rgba(255, 255, 255, .18); border-top-color: var(--jade-hell); animation: drehen 1s linear infinite; }

/* ------------------------------------------------------------------ Halt-Karte und Info-Karte */
.glas-karte {
  position: absolute; box-sizing: border-box; color: #fff; z-index: 25;
  background: rgba(8, 24, 28, .62); border: 1px solid rgba(255, 255, 255, .22); border-radius: 18px;
  -webkit-backdrop-filter: blur(18px) saturate(1.2); backdrop-filter: blur(18px) saturate(1.2);
  box-shadow: 0 18px 54px rgba(0, 0, 0, .38);
}
#halt-karte {
  right: calc(var(--sr) + max(14px, var(--sw) * .035)); bottom: max(calc(var(--sb) + var(--sh) * .10), calc(var(--leiste-h) + 16px));
  width: 320px; width: min(460px, max(270px, calc(var(--sw) * .25)));
  padding: 1em 1.15em 1.1em; font-size: 15px; font-size: max(14px, calc(var(--u) * 20px));
  opacity: 0; transform: translateY(14px); pointer-events: none; visibility: hidden;
  transition: opacity .45s ease, transform .55s var(--weich), bottom .35s var(--weich), visibility 0s linear .55s;
}
#halt-karte.vor { visibility: visible; }
#halt-karte.an { opacity: 1; transform: none; pointer-events: auto; visibility: visible; transition: opacity .45s ease, transform .55s var(--weich), bottom .35s var(--weich), visibility 0s; }
.hk-kopf { display: flex; align-items: center; font-size: .86em; color: rgba(255, 255, 255, .8); }
.hk-kopf .sym { width: 1.25em; height: 1.25em; margin-right: .4em; color: var(--jade-hell); flex: none; }
.hk-danke { font-size: 1em; font-weight: 600; color: #fff; }
.hk-als { font-size: .68em; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--jade-hell); }
.hk-naechstes { display: flex; align-items: baseline; margin-top: .3em; }
.hk-nr { font-family: var(--schrift-display); font-weight: 600; font-size: 1.6em; line-height: 1; color: transparent; -webkit-text-stroke: 1.2px var(--jade-hell); margin-right: .4em; flex: none; }
.hk-titel { font-size: 1.22em; font-weight: 600; line-height: 1.22; }
.hk-teaser { margin: .45em 0 0; font-size: .9em; line-height: 1.4; color: rgba(255, 255, 255, .8); }
.hk-reihe { display: flex; align-items: center; margin-top: .9em; }
.hk-weiter {
  flex: 1; display: inline-flex; align-items: center; justify-content: center; height: 3.1em; min-height: 44px; padding: 0 1.2em;
  border: 0; border-radius: 999px; background: var(--jade); color: var(--jade-tief); cursor: pointer;
  font-size: 1em; font-weight: 600; letter-spacing: .01em;
  box-shadow: 0 6px 22px rgba(20, 184, 166, .4); transition: transform .2s ease, background .2s ease, opacity .4s ease, box-shadow .4s ease;
  /* Glühen erst nach 5 s ohne Eingabe, hoechstens dreimal */
  animation: einladen 2.8s ease-in-out 5s 3;
}
.hk-weiter:hover { background: #2dd4bf; transform: translateY(-1px); }
.hk-weiter .sym { width: 1.2em; height: 1.2em; margin-left: .35em; }
.hk-weiter-nr { display: none; margin-left: .4em; font-weight: 500; opacity: .8; }
.klein .hk-weiter-nr { display: inline; }
.hk-zweit { background: rgba(255, 255, 255, .08); color: #fff; border: 1.5px solid rgba(255, 255, 255, .45); box-shadow: none; animation: none; }
.hk-zweit:hover { background: rgba(255, 255, 255, .18); }
.hk-film-neu .sym { margin: 0 .45em 0 0; }
.hk-neu { flex: none; width: 3.1em; height: 3.1em; min-width: 44px; min-height: 44px; margin-left: .6em; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .3); background: rgba(255, 255, 255, .1); color: #fff; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
.hk-neu:hover { background: rgba(255, 255, 255, .2); }
.hk-neu .sym { width: 1.25em; height: 1.25em; }
.hk-tipp { display: flex; align-items: center; flex-wrap: wrap; margin: .85em 0 0; font-size: .78em; color: rgba(255, 255, 255, .8); }
.hk-plus { display: inline-flex; align-items: center; justify-content: center; width: 1.35em; height: 1.35em; margin: 0 .35em; border-radius: 50%; background: var(--jade); color: var(--jade-tief); }
.hk-plus .sym { width: 1.05em; height: 1.05em; }
@keyframes einladen { 0%, 100% { box-shadow: 0 6px 22px rgba(20, 184, 166, .4), 0 0 0 0 rgba(20, 184, 166, .35); } 50% { box-shadow: 0 6px 30px rgba(20, 184, 166, .75), 0 0 0 7px rgba(20, 184, 166, 0); } }
.art-mitte .hk-reihe { margin-top: .8em; }
/* Fassung 1.4: Halt am Szenenende ("Weiter mit 04.2 ...") - Nummer mit Szenen-Index etwas kleiner, damit der Titel Platz hat */
.art-szene .hk-nr { font-size: 1.36em; }
.art-szene .hk-reihe { margin-top: .9em; }

#info-karte {
  left: 0; top: 0; width: 320px; max-height: 70%;
  padding: 1.05em 1.3em 1.25em; overflow: auto; -webkit-overflow-scrolling: touch;
  font-size: 15px; font-size: min(17px, max(14px, calc(var(--u) * 17px)));
  opacity: 0; transform: translateY(8px) scale(.98); pointer-events: none; visibility: hidden; z-index: 26;
  transition: opacity .3s ease, transform .4s var(--weich), visibility 0s linear .4s;
}
#info-karte.an { opacity: 1; transform: none; pointer-events: auto; visibility: visible; transition: opacity .3s ease, transform .4s var(--weich), visibility 0s; }
.ik-zu { position: absolute; top: .5em; right: .5em; width: 2.4em; height: 2.4em; min-width: 36px; min-height: 36px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .25); background: rgba(255, 255, 255, .08); color: #fff; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
.ik-zu .sym { width: 1.1em; height: 1.1em; }
.ik-kap { font-size: .7em; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--jade-hell); padding-right: 2.8em; }
.ik-titel { margin: .45em 0 .1em; font-size: 1.38em; font-weight: 600; line-height: 1.2; padding-right: 1.6em; }
.ik-sub { margin: 0 0 .65em; color: var(--jade-hell); font-size: .95em; font-weight: 500; }
.ik-text { margin: 0; line-height: 1.55; color: rgba(255, 255, 255, .93); -webkit-user-select: text; user-select: text; }
.ik-titel + .ik-text { margin-top: .6em; }
.ik-bauteil { margin: .85em 0 0; padding-top: .7em; border-top: 1px solid rgba(255, 255, 255, .14); font-size: .8em; letter-spacing: .02em; color: rgba(255, 255, 255, .7); }

/* ------------------------------------------------------------------ Bedienleiste */
#leiste {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 30; box-sizing: border-box;
  padding: 18px 16px 0; padding-left: max(16px, env(safe-area-inset-left)); padding-right: max(16px, env(safe-area-inset-right)); padding-bottom: env(safe-area-inset-bottom);
  background: linear-gradient(to top, rgba(3, 20, 22, .86) 0%, rgba(3, 20, 22, .5) 55%, rgba(3, 20, 22, 0) 100%);
  opacity: 0; transform: translateY(10px); pointer-events: none; transition: opacity .4s ease, transform .45s var(--weich);
}
#leiste.zeigen { opacity: 1; transform: none; pointer-events: auto; }
.film[data-zustand="start"] #leiste, .film[data-zustand="laden"] #leiste { opacity: 0; pointer-events: none; }
.leiste-innen { display: flex; align-items: center; height: calc(var(--leiste-h) - 18px); max-width: 1600px; margin: 0 auto; }
.leiste-knoepfe { display: flex; align-items: center; flex: none; }
.knopf { width: 40px; height: 40px; margin: 0 2px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: #fff; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; transition: background .2s ease, opacity .2s ease; }
.knopf .sym { width: 22px; height: 22px; }
.knopf:hover { background: rgba(255, 255, 255, .13); }
.knopf:disabled { opacity: .32; cursor: default; background: transparent; }
.knopf-gross { width: 48px; height: 48px; margin: 0 6px; background: rgba(255, 255, 255, .14); border: 1px solid rgba(255, 255, 255, .3); }
.knopf-gross .sym { width: 24px; height: 24px; }
.knopf-text { width: auto; padding: 0 11px; border-radius: 999px; font-size: 12px; font-weight: 600; letter-spacing: .06em; }
.knopf-text span { opacity: .55; }
.knopf-text span.an { opacity: 1; color: var(--jade-hell); }
.knopf-text .trenn { opacity: .3; margin: 0 5px; }
.leiste-mitte { flex: 1; min-width: 0; margin: 0 18px; }
.leiste-zeile { display: flex; justify-content: space-between; align-items: baseline; font-size: 12.5px; color: rgba(255, 255, 255, .82); margin-bottom: 6px; }
.leiste-kapitel { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin-right: 12px; }
.lk-nr { color: var(--jade-hell); font-weight: 600; margin-right: .55em; }
.zeit { flex: none; font-variant-numeric: tabular-nums; color: rgba(255, 255, 255, .7); }
.fortschritt { position: relative; display: flex; align-items: center; height: 18px; cursor: pointer; touch-action: manipulation; }
.fs-seg { position: relative; display: flex; align-items: center; height: 100%; margin-right: 4px; min-width: 6px; }
.fs-seg:nth-last-child(2) { margin-right: 0; }
.fs-spur { position: relative; width: 100%; height: 4px; border-radius: 2px; overflow: hidden; background: rgba(255, 255, 255, .22); transition: height .2s ease, background .2s ease; }
.fortschritt:hover .fs-spur { height: 6px; }
.fs-seg.aktuell .fs-spur { background: rgba(255, 255, 255, .34); }
.fs-fuell { position: absolute; left: 0; top: 0; bottom: 0; width: 100%; background: var(--jade); transform-origin: 0 50%; transform: scaleX(0); }
.fs-seg.fertig .fs-fuell { background: rgba(20, 184, 166, .78); }
.fs-seg.fehlt { opacity: .3; cursor: not-allowed; }
.fs-tipp { position: absolute; bottom: 24px; left: 0; transform: translateX(-50%); padding: 5px 10px; border-radius: 8px; white-space: nowrap; font-size: 12px; font-weight: 500; background: rgba(8, 24, 28, .88); border: 1px solid rgba(255, 255, 255, .18); opacity: 0; pointer-events: none; transition: opacity .15s ease; }
.fs-tipp.an { opacity: 1; }
.leiste-rechts { position: relative; display: flex; align-items: center; flex: none; }
.schalter { display: inline-flex; align-items: center; height: 36px; margin-right: 6px; padding: 0 10px 0 6px; border: 0; border-radius: 999px; background: transparent; color: rgba(255, 255, 255, .86); font-size: 12.5px; font-weight: 500; cursor: pointer; }
.schalter:hover { background: rgba(255, 255, 255, .1); }
.schalter-bahn { position: relative; flex: none; width: 32px; height: 18px; margin-right: 8px; border-radius: 9px; background: rgba(255, 255, 255, .26); transition: background .2s ease; }
.schalter-knopf { position: absolute; top: 2px; left: 2px; width: 14px; height: 14px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, .3); transition: transform .2s ease; }
.schalter.an .schalter-bahn { background: var(--jade); }
.schalter-kurz { display: none; font-size: 11.5px; }
.schalter.an .schalter-knopf { transform: translateX(14px); }
/* Ton-Knopf (js/fl_ton.js): gleicher runder Knopf wie Vollbild/Kapitel; "aus" = durchgestrichenes Symbol, etwas zurueckgenommen.
   Lautstaerke-Regler nur mit Maus (Hover): Glas-Pille ueber dem Knopf wie der Kapitel-Tooltip, Spur und Fuellung wie der
   Fortschritt (4 px, Jade), Griff wie der Schalter-Knopf. --wert = Reglerstellung (setzt fl_ton.js). */
#knopf-ton.ton-aus { color: rgba(255, 255, 255, .72); }
.ton-regler { position: absolute; bottom: 100%; left: 0; margin-bottom: 10px; padding: 9px 14px; border-radius: 999px; z-index: 2;
  background: rgba(8, 24, 28, .88); border: 1px solid rgba(255, 255, 255, .18); box-shadow: 0 8px 24px rgba(0, 0, 0, .28);
  -webkit-transform: translateX(-50%) translateY(4px); transform: translateX(-50%) translateY(4px);
  opacity: 0; visibility: hidden; transition: opacity .2s ease, transform .25s var(--weich), visibility 0s linear .25s; }
@supports ((-webkit-backdrop-filter: blur(4px)) or (backdrop-filter: blur(4px))) {
  .ton-regler { background: rgba(8, 22, 26, .52); -webkit-backdrop-filter: blur(14px) saturate(1.2); backdrop-filter: blur(14px) saturate(1.2); }
}
.ton-regler.an { opacity: 1; visibility: visible; -webkit-transform: translateX(-50%); transform: translateX(-50%); transition: opacity .2s ease, transform .25s var(--weich); }
.ton-regler input { display: block; width: 96px; height: 18px; margin: 0; padding: 0; background: transparent; cursor: pointer; -webkit-appearance: none; appearance: none; }
.ton-regler input:focus { outline: none; }
.ton-regler input:focus-visible { outline: 2px solid var(--jade-hell); outline-offset: 4px; border-radius: 4px; }
.ton-regler input::-webkit-slider-runnable-track { height: 4px; border-radius: 2px; background: linear-gradient(to right, var(--jade) 0, var(--jade) var(--wert, 80%), rgba(255, 255, 255, .22) var(--wert, 80%), rgba(255, 255, 255, .22) 100%); }
.ton-regler input::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 14px; height: 14px; margin-top: -5px; border: 0; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, .3); }
.ton-regler input::-moz-range-track { height: 4px; border-radius: 2px; background: rgba(255, 255, 255, .22); }
.ton-regler input::-moz-range-progress { height: 4px; border-radius: 2px; background: var(--jade); }
.ton-regler input::-moz-range-thumb { width: 14px; height: 14px; border: 0; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, .3); }
.ruhig .ton-regler { -webkit-transform: translateX(-50%); transform: translateX(-50%); }
/* Sprecher (Fassung 1.5, js/fl_sprecher.js): kleiner Schalter "Sprecher" im Lautstaerke-Regler (nur Maus), Regler dann als
   zweizeilige Glas-Karte; im Halt bleibt "Weiter" gedimmt, solange Helmut noch spricht (Konfig ton.sprecher.halt_warten). */
.ton-regler.mit-sprecher { border-radius: 16px; padding: 10px 14px 7px; }
.sp-schalter { display: flex; align-items: center; width: 100%; margin: 8px 0 0; padding: 3px 0 2px; border: 0; background: transparent; color: rgba(255, 255, 255, .86);
  font: inherit; font-size: 12px; line-height: 1.2; letter-spacing: .01em; white-space: nowrap; cursor: pointer; }
.sp-schalter[hidden] { display: none; }
.sp-schalter:hover { color: #fff; }
.sp-bahn { position: relative; flex: none; width: 26px; height: 15px; margin-right: 8px; border-radius: 8px; background: rgba(255, 255, 255, .26); transition: background .2s ease; }
.sp-knopf { position: absolute; top: 2px; left: 2px; width: 11px; height: 11px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, .3); transition: transform .2s ease; }
.sp-schalter[aria-checked="true"] .sp-bahn { background: var(--jade); }
.sp-schalter[aria-checked="true"] .sp-knopf { -webkit-transform: translateX(11px); transform: translateX(11px); }
.sp-schalter:focus { outline: none; }
.sp-schalter:focus-visible { outline: 2px solid var(--jade-hell); outline-offset: 3px; border-radius: 6px; }
.ruhig .sp-bahn, .ruhig .sp-knopf { transition: none; }
.sprecher-wartet #halt-karte .hk-weiter { opacity: .45; box-shadow: none; animation: none; }
.sprecher-wartet #halt-karte .hk-weiter:hover { background: var(--jade); transform: none; }

/* ------------------------------------------------------------------ Startbildschirm: Titel im oberen Drittel, Haus bleibt hell */
.start { position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: 50; background: var(--petrol); transition: opacity .7s ease, visibility .7s; overflow: hidden; text-align: center; }
.start.weg { opacity: 0; visibility: hidden; pointer-events: none; }
.start-bild { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transform: scale(1.06); transition: opacity 1.4s ease, transform 9s ease-out; }
.bereit .start-bild { opacity: 1; transform: none; }
.start-verlauf { position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: linear-gradient(to bottom, rgba(3, 20, 22, .72) 0%, rgba(3, 20, 22, .38) 24%, rgba(3, 20, 22, 0) 42%, rgba(3, 20, 22, 0) 58%, rgba(3, 20, 22, .5) 76%, rgba(3, 20, 22, .82) 100%); }
.start-inhalt { position: absolute; top: 0; left: 0; right: 0; bottom: 0; display: flex; flex-direction: column; align-items: center; justify-content: space-between; box-sizing: border-box; padding: 6vh 24px 7vh; padding-top: max(6vh, env(safe-area-inset-top)); opacity: 0; transform: translateY(14px); transition: opacity 1s ease .25s, transform 1.1s var(--weich) .25s; }
.bereit .start-inhalt { opacity: 1; transform: none; }
.start-oben, .start-unten { display: flex; flex-direction: column; align-items: center; }
.start-logo .logo { width: 64px; height: auto; filter: drop-shadow(0 4px 16px rgba(0, 0, 0, .4)); }
.start-titel { margin: 10px 0 6px; font-family: var(--schrift-display); font-weight: 600; font-size: 40px; font-size: clamp(36px, 6.4vw, 96px); line-height: 1.04; letter-spacing: .01em; text-shadow: var(--titel-schatten); }
.start-unter { margin: 0; font-size: 18px; font-size: clamp(16px, 1.9vw, 24px); color: rgba(255, 255, 255, .92); text-shadow: var(--text-schatten); }
.start-knopf { position: relative; width: 84px; height: 84px; padding: 0; border: 0; border-radius: 50%; background: var(--jade); color: var(--jade-tief); cursor: pointer; display: flex; align-items: center; justify-content: center; box-shadow: 0 12px 44px rgba(20, 184, 166, .5); transition: transform .25s ease, background .25s ease; }
.start-knopf:hover { transform: scale(1.05); background: #2dd4bf; }
.start-play { width: 36px; height: 36px; margin-left: 5px; }
.start-ring { position: absolute; top: -10px; left: -10px; right: -10px; bottom: -10px; border-radius: 50%; border: 2px solid rgba(94, 234, 212, .65); animation: startpuls 2.6s ease-out infinite; }
@keyframes startpuls { 0% { transform: scale(.88); opacity: .9; } 100% { transform: scale(1.32); opacity: 0; } }
.start-knopf-text { margin-top: 14px; font-size: 15px; font-weight: 600; letter-spacing: .04em; text-shadow: var(--text-schatten); }
.start-meta { margin: 5px 0 0; font-size: 13px; color: rgba(255, 255, 255, .8); text-shadow: var(--text-schatten); }
.start-hinweis { max-width: 440px; margin: 14px 0 0; font-size: 13.5px; line-height: 1.5; color: rgba(255, 255, 255, .8); text-shadow: var(--text-schatten); }
.start-sprache { position: absolute; top: 16px; top: max(16px, env(safe-area-inset-top)); right: 16px; right: max(16px, env(safe-area-inset-right)); height: 36px; border: 1px solid rgba(255, 255, 255, .26); background: rgba(255, 255, 255, .1); color: #fff; cursor: pointer; -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.start-laden { position: absolute; left: 0; right: 0; bottom: 12%; display: flex; align-items: center; justify-content: center; font-size: 13px; color: rgba(255, 255, 255, .72); }
.start-laden .lade-ring { width: 22px; height: 22px; border-width: 2px; margin-right: 10px; }
.bereit .start-laden { display: none; }
.film:not(.bereit) .start-knopf { pointer-events: none; opacity: .5; }
/* niedrige Fenster (Handy quer): ohne Logo und Hinweis, alles passt ins Bild */
@media (max-height: 520px) {
  .start-logo, .start-hinweis { display: none; }
  .start-inhalt { padding: 18px 24px 16px; }
  .start-titel { font-size: 34px; font-size: clamp(30px, 9vh, 52px); margin-top: 0; }
  .start-unter { font-size: 15px; }
  .start-knopf { width: 68px; height: 68px; }
  .start-play { width: 30px; height: 30px; }
  .start-knopf-text { margin-top: 10px; font-size: 14px; }
}

.ladefehler { position: absolute; top: 50%; left: 50%; z-index: 60; transform: translate(-50%, -50%); width: 520px; max-width: calc(100% - 32px); box-sizing: border-box; padding: 22px 24px; border-radius: 16px; background: rgba(8, 24, 28, .92); border: 1px solid rgba(255, 255, 255, .2); text-align: center; }
.lf-titel { margin: 0 0 8px; font-weight: 600; font-size: 17px; }
.lf-detail { margin: 0; font-size: 13.5px; color: rgba(255, 255, 255, .75); line-height: 1.5; }
.lf-reihe { display: flex; justify-content: center; flex-wrap: wrap; margin-top: 16px; }
.lf-knopf { min-height: 44px; margin: 4px 6px; padding: 0 1.3em; border-radius: 999px; border: 1.5px solid rgba(255, 255, 255, .4); background: rgba(255, 255, 255, .08); color: #fff; font-size: 14px; font-weight: 600; cursor: pointer; }
.lf-knopf.lf-haupt { background: var(--jade); border-color: var(--jade); color: var(--jade-tief); }

/* ------------------------------------------------------------------ kleine Buehne (Handy quer) */
.klein { --leiste-h: 58px; }
.klein #leiste { padding-top: 12px; }
.klein .leiste-innen { height: calc(var(--leiste-h) - 12px); }
.klein .knopf { width: 36px; height: 36px; }
.klein .knopf-gross { width: 42px; height: 42px; }
.klein .leiste-zeile { margin-bottom: 3px; font-size: 11px; }
.klein .leiste-mitte { margin: 0 10px; }
.klein .schalter-text { display: none; }
.klein .schalter-kurz { display: inline; }
.klein .schalter { padding: 0 6px; }
.klein .schalter-bahn, .hoch .schalter-bahn { margin-right: 6px; }
/* kompakte Halt-Karte: nur "Weiter" (mit Kapitelnummer) und Wiederholen, Knoepfe >= 44 px */
.klein #halt-karte { width: auto; font-size: 14px; padding: 8px; border-radius: 999px; }
.klein .hk-als, .klein .hk-teaser, .klein .hk-tipp, .klein .hk-naechstes, .klein .hk-kopf:not(.hk-danke) { display: none; }
.klein .hk-danke { display: none; }
.klein .hk-reihe { margin-top: 0; }
.klein .hk-weiter { height: 46px; min-width: 150px; }
.klein .hk-neu { width: 46px; height: 46px; margin-left: 8px; }
.klein.info-offen #halt-karte, .hoch.info-offen #halt-karte { opacity: 0; pointer-events: none; }
.klein #info-karte { font-size: 13.5px; padding: .8em 1em .9em; }
.klein .ik-kap { display: none; }
.klein .ik-titel { margin-top: .1em; }
.klein .fakt { max-width: calc(var(--sw) * .62); font-size: 14px; }
.klein #ebene-unten-links { bottom: calc(var(--sb) + 10px); }
.klein.leiste-an #ebene-unten-links { bottom: max(calc(var(--sb) + 10px), calc(var(--leiste-h) + 6px)); }
.klein[data-zustand="halt"] #ebene-unten-links { opacity: 0; transition: opacity .3s ease; }
.klein .label-sub { font-size: 11px; }
.klein .eb.hinweis { order: 0; margin-top: 8px; }

/* ------------------------------------------------------------------ Hochformat */
.hoch { --leiste-h: 100px; }
.hoch #ebene-oben-links { left: 16px; top: max(18px, env(safe-area-inset-top)); }
.hoch #ebene-oben-rechts { right: 16px; top: calc(max(18px, env(safe-area-inset-top)) + 58px); }
.hoch #ebene-mitte { left: 0; width: 100%; top: max(18px, env(safe-area-inset-top)); }
.hoch #ebene-unten-links { left: 16px; right: 16px; top: calc(var(--vy) + var(--vh) + 52px); bottom: auto; }
.hoch #ebene-unten-mitte { left: 0; width: 100%; top: calc(var(--vy) + var(--vh) + 26px); bottom: auto; }
.hoch .fakt { position: absolute; top: 0; bottom: auto; max-width: 100%; font-size: 16px; }
.hoch .fakt.raus { transform: translateY(-6px); }
.hoch .fakt-titel { position: absolute; top: 0; margin-top: 48px; font-size: 15px; max-width: calc(100vw - 32px); }
.hoch .claim { position: relative; font-size: 16px; }
.hoch .karte-ziffer { height: 44px; }
.hoch .karte-strich { height: 30px; margin: 0 10px; }
.hoch .karte-titel { font-size: 18px; }
.hoch .karte-kap { font-size: 10px; }
.hoch .kapitelmarke { font-size: 13px; }
.hoch .titel-text { font-size: 34px; }
.hoch .logo-block .logo { width: 50px; }
.hoch .logo-block .titel-text { font-size: 32px; }
.hoch .chip { font-size: 12px; }
.hoch .chip.zustand { top: 34px; font-size: 12px; }
.hoch .label-pille { font-size: 12px; padding: .38em .8em .4em .6em; }
.hoch .label.zweizeilig .label-pille { border-radius: 10px; padding: .4em .8em .45em .6em; }
.hoch .label-sub { font-size: 11px; }
#ebene-labels.eng .label-sub { display: none; }
#ebene-labels.eng .label.zweizeilig .label-pille { border-radius: 999px; align-items: center; }
#ebene-labels.eng .label.zweizeilig .label-dot { width: .38em; height: .38em; border-radius: 50%; background: var(--jade-hell); margin-right: .5em; }
.hoch .label-punkt .kern { left: -5px; top: -5px; width: 10px; height: 10px; }
.hoch .label-punkt .ring { left: -14px; top: -14px; width: 28px; height: 28px; }
.hoch .label.hotspot .label-pille::before, .klein .label.hotspot .label-pille::before { top: -10px; bottom: -10px; left: -8px; right: -8px; }
.hoch .eb.kontakt { font-size: 15px; }
.hoch .eb.hinweis { font-size: 12px; margin-left: 16px; margin-right: 16px; }
.hoch[data-zustand="halt"] #ebene-unten-links { opacity: 0; transition: opacity .3s ease; }
.hoch #halt-karte { left: 16px; right: 16px; width: auto; bottom: calc(var(--leiste-h) + 10px); font-size: 15px; }
.hoch #info-karte { left: 12px !important; right: 12px; top: auto !important; width: auto !important; bottom: calc(var(--leiste-h) + 10px); max-height: calc(100% - var(--vy) - var(--vh) - var(--leiste-h) - 30px) !important; font-size: 15px; }
.hoch #leiste { padding-top: 26px; }
.hoch .leiste-innen { flex-wrap: wrap; height: auto; padding-bottom: 8px; }
.hoch .leiste-mitte { order: -1; flex: 0 0 100%; margin: 0 0 6px; }
.hoch .leiste-knoepfe { flex: 1; }
.hoch .schalter-text { display: none; }
.hoch .schalter-kurz { display: inline; }
.hoch #knopf-vollbild { display: none !important; }     /* iPhone kann kein Element-Vollbild; Platz fuer eine Zeile */
.hoch .knopf { margin: 0; }
/* Hochformat: Knoepfe + Schalter + Sprache + Ton muessen in eine Zeile unter dem Fortschritt passen (sonst bricht die Leiste
   in eine dritte Zeile um und schiebt sich unter Halt-/Info-Karte, QA 07.10. nach dem Ton-Knopf). Nur Abstaende enger, Knoepfe
   bleiben 40 px; unter 390 px Breite zeigt die Sprache nur die andere Sprache ("EN" = wechseln). */
.hoch .schalter { margin-right: 2px; padding: 0 6px 0 4px; }
.hoch .knopf-text { padding: 0 7px; }
.hoch .knopf-text .trenn { margin: 0 3px; }
@media (max-width: 389px) {
  .hoch #knopf-sprache { min-width: 40px; padding: 0 6px; }
  .hoch #knopf-sprache .trenn, .hoch #knopf-sprache span.an { display: none; }
  .hoch #knopf-sprache span { opacity: .9; }
}
.hoch #lade-anzeige { top: calc(var(--vy) + var(--vh) / 2 - 22px); }
.hoch .start-titel { font-size: 42px; }

/* ------------------------------------------------------------------ ohne Glas-Unterstuetzung */
@supports not ((-webkit-backdrop-filter: blur(4px)) or (backdrop-filter: blur(4px))) {
  .fakt, .glas-karte { background: rgba(6, 22, 26, .84); }
  .chip, .label-pille, .mess-text, .kapitelmarke { background: rgba(10, 34, 38, .78); }
}

/* ------------------------------------------------------------------ reduzierte Bewegung */
.ruhig *, .ruhig *::before, .ruhig *::after { animation: none !important; }
.ruhig .w, .ruhig .label-sub { transition: none !important; transform: none !important; }
.ruhig .eb, .ruhig .label-pille, .ruhig .titel-text, .ruhig .titel-linie, .ruhig .fakt-balken, .ruhig .karte-ziffer text,
.ruhig .karte-kap, .ruhig .karte-titel, .ruhig .karte-strich, .ruhig #halt-karte, .ruhig #info-karte, .ruhig .logo-block *, .ruhig .kapitelmarke { transition-duration: .2s !important; transition-delay: 0s !important; }
.ruhig .titel-text { letter-spacing: .015em; transform: none; }
.ruhig .start-bild { transition: opacity .4s ease; transform: none; }
.ruhig .label-punkt .ring { display: none; }