/*
 * Mathmagical Escape – Projekt EXTREMUM · Raum 1 · Gestaltung
 * Eigene CSS-Gestaltung mit lokal eingebundenen Fira-Schriften (SIL OFL 1.1).
 * Für ältere Browser gibt es Ersatzregeln (Fokus ohne :focus-visible, Dialoge ohne
 * natives <dialog>, Szene ohne aspect-ratio, kein flex-gap). Siehe README „Unterstützte Browser“.
 */
@font-face {
  font-family: "Fira Sans"; font-style: normal; font-weight: 400;
  src: url("../assets/fonts/FiraSans-Regular.woff2") format("woff2"); font-display: swap;
}
@font-face {
  font-family: "Fira Sans"; font-style: normal; font-weight: 600;
  src: url("../assets/fonts/FiraSans-SemiBold.woff2") format("woff2"); font-display: swap;
}
@font-face {
  font-family: "Fira Sans"; font-style: normal; font-weight: 700;
  src: url("../assets/fonts/FiraSans-Bold.woff2") format("woff2"); font-display: swap;
}
@font-face {
  font-family: "Fira Sans"; font-style: italic; font-weight: 400;
  src: url("../assets/fonts/FiraSans-Italic.woff2") format("woff2"); font-display: swap;
}
@font-face {
  font-family: "Fira Math"; font-style: normal; font-weight: 400;
  src: url("../assets/fonts/FiraMath-Regular.otf") format("opentype"); font-display: swap;
}

:root {
  --bg: #061015;
  --flaeche: #0c1d23;
  --flaeche-2: #11282f;
  --rand: #2b5965;
  --text: #e8f3f3;
  --text-2: #b8cfd2;
  --petrol: #5fd6d9;
  --petrol-dunkel: #0f6f74;
  --rot: #ff8a8a;
  --rot-flaeche: #3a1416;
  --gruen: #8ff0b0;
  --gruen-flaeche: #0f3020;
  --gelb: #ffd166;
  --fokus: #ffd166;
  --radius: 10px;
  --schrift: "Fira Sans", system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans", "Helvetica Neue", Arial, sans-serif;
  --mathe: "Fira Math", "Fira Sans", sans-serif;
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--schrift);
  font-size: 1rem;           /* 16 CSS-Pixel */
  line-height: 1.5;
  overflow-x: hidden;
  padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
}
h1, h2, h3, h4 { line-height: 1.25; margin: 0 0 .5rem; }
p { margin: 0 0 .75rem; }
strong { color: #fff; }

.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip {
  position: absolute; left: 8px; top: -100px; z-index: 20;
  background: var(--gelb); color: #111; padding: .75rem 1rem; border-radius: var(--radius);
  font-weight: 700;
}
.skip:focus { top: 8px; }

/* Fokus: zuerst für alle Browser über :focus, dann für neuere nur bei Tastaturbedienung.
   Browser ohne :focus-visible verwerfen die zweite Regel und zeigen den Rahmen immer. */
:focus { outline: 3px solid var(--fokus); outline-offset: 3px; }
:focus:not(:focus-visible) { outline: none; }
[tabindex="-1"]:focus { outline: none; }
[tabindex="-1"]:focus-visible { outline: 3px solid var(--fokus); outline-offset: 3px; }

/* ---------- Kopf ---------- */
.kopf {
  padding: .75rem 1rem .5rem;
  border-bottom: 1px solid var(--rand);
  background: linear-gradient(#08171c, var(--bg));
}
.kopf__marke { margin: 0; font-size: .875rem; color: var(--text-2); letter-spacing: .02em; }
.kopf__zeile { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; }
.kopf__titel { font-size: 1.25rem; margin: .1rem .75rem .3rem 0; }
.kopf__status { margin: 0 0 .1rem; }
.chip {
  display: inline-flex; align-items: center; gap: .4rem;
  padding: .3rem .7rem; border-radius: 999px; font-weight: 700; font-size: 1rem;
  border: 2px solid currentColor;
}
.chip[data-zustand="zu"] { color: var(--rot); background: var(--rot-flaeche); }
.chip[data-zustand="offen"] { color: var(--gruen); background: var(--gruen-flaeche); }

/* ---------- Layout ---------- */
.layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1rem;
  padding: 1rem;
  max-width: 64rem;
  margin: 0 auto;
}
@media (orientation: landscape) and (min-width: 560px) {
  .layout {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: "extra raum" "abschluss raum";
    align-items: start;
  }
  .extra { grid-area: extra; }
  .raum { grid-area: raum; }
  .abschluss { grid-area: abschluss; }
  .raum .szene { width: max(16rem, calc((100vh - 2rem) * 9 / 16)); min-width: 0; }
  .raum .szene { width: max(16rem, calc((100svh - 2rem) * 9 / 16)); }
  .extra .zum-raum { display: none; }
}

/* ---------- Apex ---------- */
.extra {
  background: var(--flaeche);
  border: 1px solid var(--rand);
  border-left: 4px solid var(--rot);
  border-radius: var(--radius);
  padding: .9rem 1rem .25rem;
}
.extra__titel { display: flex; align-items: center; font-family: var(--schrift); font-size: 1rem; color: var(--rot); letter-spacing: .12em; }
.extra__auge {
  width: 1.6rem; height: .5rem; margin-right: .5rem; border-radius: 999px; background: #ff5a5a;
  box-shadow: 0 0 .6rem #ff5a5a;
}
.extra__text { font-family: var(--schrift); font-size: 1rem; margin-bottom: .5rem; }
.extra .hinweis { margin-bottom: .75rem; }
.zum-raum { margin-bottom: .9rem; text-decoration: none; }
.zum-raum span { margin-left: .4rem; }
.hinweis { color: var(--text-2); }

/* ---------- Raum ---------- */
.raum:focus { outline: none; }
.szene {
  position: relative;
  aspect-ratio: 9 / 16;
  width: min(100%, 30rem, calc((100svh - 2rem) * 9 / 16));
  min-width: min(100%, 15rem);
  margin: 0 auto;
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid var(--rand);
  box-shadow: 0 1rem 2.5rem rgba(0, 0, 0, .6), inset 0 0 4rem rgba(0, 0, 0, .8);
  background: #061217;
}
@supports not (height: 100svh) {
  .szene { width: min(100%, 30rem, calc((100vh - 2rem) * 9 / 16)); }
}
.szene__bild { position: absolute; top: 0; right: 0; bottom: 0; left: 0; width: 100%; height: 100%; display: block; }

/* Türhälften fahren beim Öffnen auseinander */
.szene__tuer { transition: transform 1.6s cubic-bezier(.6, 0, .2, 1); transform-box: view-box; }
.szene[data-tuer="offen"] .szene__tuer--links { transform: translateX(-20px); }
.szene[data-tuer="offen"] .szene__tuer--rechts { transform: translateX(20px); }
.szene[data-tuer="offen"] .szene__lampe { fill: #6ff0a0; }
.szene[data-tuer="offen"] .szene__glow { opacity: 0; }
.szene[data-tuer="offen"] .szene__sensor { fill: #6ff0a0; }

/* Langsames, ruhiges Glimmen der Warnlampe (kein Blitzen) */
.szene__glow { animation: glimmen 4s ease-in-out infinite alternate; transition: opacity .8s; }
@keyframes glimmen { from { opacity: .55; } to { opacity: 1; } }
.pausiert .szene__glow { animation-play-state: paused; }

/* Interaktionsziele: sichtbar umrandete Flächen mit Beschriftung */
.ziel {
  position: absolute;
  display: flex; align-items: flex-end; justify-content: center;
  min-width: 44px; min-height: 44px;
  padding: 0;
  background: rgba(95, 214, 217, .06);
  border: 2px dashed rgba(127, 231, 226, .75);
  border-radius: 8px;
  color: var(--text);
  font: inherit;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.ziel:hover { background: rgba(95, 214, 217, .16); border-style: solid; }
.ziel:focus { outline: 3px solid var(--fokus); outline-offset: 2px; border-style: solid; }
.ziel:focus:not(:focus-visible) { outline: none; border-style: dashed; }
.ziel__text {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 44px;
  padding: .3rem .6rem;
  margin-bottom: -2px;
  background: rgba(4, 16, 20, .94);
  border: 1px solid var(--petrol);
  border-radius: 8px;
  font-weight: 700; font-size: 1rem; line-height: 1.15;
  text-align: center;
  hyphens: manual;
}
.ziel__punkt {
  position: absolute; top: 6px; left: 6px;
  width: 10px; height: 10px; border-radius: 50%;
  background: var(--petrol); box-shadow: 0 0 0 3px rgba(95, 214, 217, .3);
}
.ziel--schleuse { left: 27.8%; top: 18.1%; width: 44.4%; height: 45%; align-items: flex-start; }
.ziel--schleuse .ziel__text { margin: -2px 0 0; }
.ziel--konsole  { left: 2%;    top: 63.5%; width: 34%;   height: 31%; }
.ziel--karte    { left: 77%;   top: 38.5%; width: 21.5%; height: 16%; }
/* Beschriftung der Datenkarte unterhalb der schmalen Fläche, rechtsbündig */
.ziel--karte { justify-content: flex-end; z-index: 2; }
.ziel--karte .ziel__text { position: absolute; right: -2px; top: calc(100% + 6px); margin: 0; }
.szene[data-tuer="offen"] .ziel--schleuse { border-color: rgba(143, 240, 176, .9); }
.szene[data-tuer="offen"] .ziel--schleuse .ziel__text { border-color: var(--gruen); color: var(--gruen); }

/* ---------- Abschluss ---------- */
.abschluss {
  background: var(--gruen-flaeche);
  border: 2px solid var(--gruen);
  border-radius: var(--radius);
  padding: 1rem;
}
.abschluss h2 { color: var(--gruen); font-size: 1.25rem; }
.abschluss__art { font-weight: 700; }
.abschluss .hinweis { color: #cfe9da; }

/* ---------- Schaltflächen ---------- */
.knopf {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 48px; min-width: 48px;
  padding: .6rem 1rem;
  font: inherit; font-weight: 600;
  color: var(--text);
  background: var(--flaeche-2);
  border: 2px solid var(--rand);
  border-radius: var(--radius);
  cursor: pointer;
  text-align: left;
}
.knopf:hover { border-color: var(--petrol); }
.knopf[aria-expanded="true"] { border-color: var(--petrol); }
.knopf--primaer { background: var(--petrol); color: #04181b; border-color: var(--petrol); font-weight: 700; }
.knopf--primaer:hover { background: #82e6e8; }
.knopf--schliessen { flex: none; }
.knopf--breit { display: flex; width: 100%; }
.knopf--unterstuetzt { border-color: var(--gelb); color: var(--gelb); margin-top: .5rem; width: 100%; }
.knopf:disabled { opacity: .55; cursor: not-allowed; }
.knopfreihe { display: flex; flex-wrap: wrap; margin: 0 -.5rem -.5rem 0; }
.knopfreihe > * { margin: 0 .5rem .5rem 0; }

/* ---------- Dialoge ---------- */
.dlg {
  width: min(100% - 1rem, 36rem);
  max-width: none;
  max-height: calc(100vh - 1rem);
  max-height: calc(var(--sichtbar, 100vh) - 1rem);
  margin: auto;
  padding: 0;
  color: var(--text);
  background: var(--flaeche);
  border: 1px solid var(--rand);
  border-radius: var(--radius);
  box-shadow: 0 1.5rem 4rem rgba(0, 0, 0, .8);
  overflow: auto;
  overscroll-behavior: contain;
}
.dlg::backdrop { background: rgba(1, 6, 8, .82); }
.dlg__kopf {
  position: sticky; top: 0; z-index: 2;
  display: flex; align-items: center; justify-content: space-between;
  padding: .6rem .75rem .6rem 1rem;
  background: var(--flaeche-2);
  border-bottom: 1px solid var(--rand);
}
.dlg__kopf h2 { margin: 0 .75rem 0 0; font-size: 1.125rem; }
.dlg__inhalt { padding: 1rem; }
.dlg__inhalt h3 { font-size: 1.0625rem; margin-top: 1rem; color: var(--petrol); }
.dlg__inhalt ol { padding-left: 1.4rem; margin: 0 0 .75rem; }
.dlg__fuss { margin-top: 1rem; }
body.dlg-offen { overflow: hidden; }

/* Ersatzpfad für Browser ohne natives <dialog> (z. B. iOS Safari 13–15.3, Firefox < 98) */
.ohne-dialog dialog:not([open]) { display: none; }
.ohne-dialog dialog[open] {
  display: block;
  position: fixed; z-index: 101;
  top: .5rem; left: 0; right: 0;
  margin: 0 auto;
  -webkit-overflow-scrolling: touch;
}
.dlg-hintergrund {
  position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 100;
  background: rgba(1, 6, 8, .82);
}
.dlg-hintergrund[hidden] { display: none; }

.formel {
  font-family: var(--mathe);
  font-size: 1.25rem;
  padding: .6rem .8rem;
  background: #04161a;
  border: 1px solid var(--petrol-dunkel);
  border-radius: 8px;
  max-width: 100%;
  white-space: nowrap;
  overflow-x: auto;
  overflow-wrap: normal;
  line-height: 1.5;
}
.formel__inhalt { display: inline-block; white-space: nowrap; }
.formel--klein { font-size: 1.125rem; }
.mathe { font-family: var(--mathe); font-weight: 400; }
@media (max-width: 360px) {
  .formel { padding-inline: .6rem; font-size: 1.125rem; }
}
.zitat { font-family: var(--schrift); color: var(--text-2); }

/* ---------- Eingabe ---------- */
.zeile {
  border: 1px solid var(--rand);
  border-radius: var(--radius);
  padding: .5rem .75rem .25rem;
  margin: 0 0 .75rem;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(7.5rem, 1fr));
  gap: 0 .75rem;
  min-width: 0;
}
.zeile legend { font-weight: 700; padding: 0 .3rem; color: var(--petrol); }
.feld { min-width: 0; }
.feld label { display: block; font-size: 1rem; margin-bottom: .2rem; }
.feld input {
  width: 100%;
  min-height: 48px;
  padding: .5rem .7rem;
  font: inherit; font-family: var(--mathe); font-size: 1.125rem;
  color: var(--text);
  background: #03100f;
  border: 2px solid #4a7c86;
  border-radius: 8px;
  scroll-margin: 5rem 0 7rem;
}
.feld input:focus { outline: 3px solid var(--fokus); outline-offset: 1px; border-color: var(--fokus); }
.feld input[readonly] { opacity: .8; }
.feld__meldung { min-height: 0; margin: .25rem 0 .5rem; font-size: 1rem; color: var(--rot); }
.feld__meldung:empty { margin: 0 0 .5rem; }
.feld--fehler input { border-color: var(--rot); border-style: dashed; }
.feld--fehler .feld__meldung::before { content: "✕ "; font-weight: 700; }

.pruefen {
  position: sticky; bottom: 0; z-index: 1;
  background: var(--flaeche);
  padding: .5rem 0 .25rem;
  margin: 0 -.25rem;
  padding-inline: .25rem;
}
.pruefen .knopf--primaer { width: 100%; justify-content: center; font-size: 1.0625rem; }
.rueckmeldung { margin: .5rem 0 0; font-weight: 600; }
.rueckmeldung:empty { margin: 0; }
.rueckmeldung--fehler { color: var(--rot); }
.rueckmeldung--fehler::before { content: "! "; }
.rueckmeldung--ok { color: var(--gruen); }
.rueckmeldung--ok::before { content: "✓ "; }

/* ---------- Hilfen ---------- */
.hilfen { margin-top: 1.25rem; padding-top: .75rem; border-top: 1px solid var(--rand); }
.hilfe { margin-bottom: .5rem; }
.hilfe .knopf, .loesung > .knopf { width: 100%; }
.hilfe__text, .loesung__bestaetigen, .loesung__text {
  margin: .4rem 0 .6rem;
  padding: .7rem .8rem;
  background: #071a1f;
  border-left: 4px solid var(--petrol);
  border-radius: 0 8px 8px 0;
}
.loesung { margin-top: .75rem; }
.loesung__bestaetigen { border-left-color: var(--gelb); }
.loesung__text { border-left-color: var(--gelb); }
.loesung__text h4 { color: var(--gelb); }
.schritte { padding-left: 1.4rem; }
.schritte li { margin-bottom: .6rem; overflow-wrap: anywhere; }
.schritt { font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
.ergebnis { font-weight: 700; text-decoration: underline double; text-underline-offset: 4px; }

.noscript { padding: 1rem; background: var(--rot-flaeche); color: #fff; }

/* ---------- Reduzierte Bewegung ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

/* ---------- Erzwungene Farben (Windows-Kontrastmodus) ---------- */
@media (forced-colors: active) {
  .ziel, .knopf, .feld input, .chip, .dlg { border: 2px solid CanvasText; }
  .ziel__text { border: 1px solid CanvasText; }
}


/* Erweiterung: zwei Vorräume, bestehende Laborreihenfolge unverändert. */
[hidden] { display: none !important; }
body:not([data-abschnitt="labor"]) > .kopf,
body:not([data-abschnitt="labor"]) > .skip,
body:not([data-abschnitt="labor"]) > .layout { display:none; }
.vorbereich { max-width:44rem; margin:0 auto; padding:1rem; }
.vor-kopf { color:var(--text-2); font-size:1rem; }
.vor-panel { background:var(--flaeche); border:1px solid var(--rand); border-radius:10px; padding:1rem; }
.vor-panel h1 { font-size:1.4rem; }
.vor-label { color:var(--petrol); letter-spacing:.1em; font-weight:600; }
.vor-graph { display:block; width:100%; max-width:30rem; margin:.75rem auto; }
.vor-graph text { fill:var(--text); font-family:var(--schrift); font-size:21px; }
.vor-graph .graph-marke { fill:var(--gelb);font-size:24px;font-weight:700; }
.vor-hilfen { margin:1rem 0; }
details { border-top:1px solid var(--rand); padding:.25rem 0; }
summary { min-height:44px; padding:.6rem .1rem; cursor:pointer; color:var(--petrol);font-weight:600; }
details p { padding:.5rem; }
.mc-antworten { border:0; padding:0; margin:1rem 0; min-width:0; }
.mc-option { display:flex;align-items:flex-start;min-height:48px;padding:.75rem .5rem;border:1px solid var(--rand);border-radius:8px;margin:.6rem 0;cursor:pointer; }
.mc-option input { flex:none;margin:.35rem .6rem 0 0;width:20px;height:20px; }
.mc-option .mathe { font-size:1.125rem;overflow-wrap:normal; }
.vor-panel button { margin:.4rem 0; }

/* Zwei eigenständige Einstiegsräume mit taskbezogenen Objekt-Dialogen. */
.raum-panel h1 { font-size:1.3rem; }
.raum-dialog { margin:.6rem 0; }
.raum-anleitung { margin-bottom:.7rem; }
.raum-szene { width:100%;max-width:24rem;min-width:0; }
.raumkulisse { display:block;width:100%;height:100%;position:absolute;inset:0; }
.raumobjekt { position:absolute;border:2px dashed #66bbc3;background:rgba(41,122,141,.08);border-radius:8px;min-width:44px;min-height:44px;font:inherit;color:var(--text);padding:0;cursor:pointer;display:flex;align-items:flex-end;justify-content:center; }
.raumobjekt span { background:#071920;border:1px solid #70cfd1;padding:.45rem .55rem;border-radius:7px;font-size:1rem;font-weight:600;line-height:1.2;min-height:44px;display:flex;align-items:center;justify-content:center; }
.raumobjekt:hover { background:rgba(95,214,217,.18); }
.raumobjekt--detail1 { left:6%;top:12%;width:56%;height:34%; }
.raumobjekt--terminal1 { left:5%;top:55%;width:43%;height:30%; }
.raumobjekt--tuer1 { left:67%;top:24%;width:29%;height:57%;align-items:flex-start; }
.raumobjekt--detail2 { left:3%;top:29%;width:42%;height:40%; }
.raumobjekt--terminal2 { left:57%;top:65%;width:39%;height:26%; }
.raumobjekt--tuer2 { left:51%;top:14%;width:40%;height:45%;align-items:flex-start; }
.raumobjekt--tuer1 span,.raumobjekt--tuer2 span { color:var(--rot);font-size:1rem; }
.raumobjekt[data-locked="false"] span { color:var(--gruen);border-color:var(--gruen); }
.raum-status { margin:.8rem 0 0;min-height:3rem;color:var(--text-2); }
.instiegs-tuer { transition:transform 1.3s ease;transform-box:view-box; }
.raum-szene[data-offen="true"] .instiegs-tuer { transform:translateX(150px); }
.raum-szene[data-offen="true"] .tuerlicht,.raum-szene[data-offen="true"] .reaktorlicht { fill:#8ff0b0; }
@media (forced-colors:active) { .raumobjekt,.raumobjekt span { border:2px solid CanvasText; } }

.raumobjekt span { box-sizing:border-box;max-width:100%;min-width:0;overflow-wrap:anywhere; }
.raumobjekt--tuer1 span,.raumobjekt--tuer2 span { padding:.4rem .25rem; }

/* Fortsetzung: Energielabor, Resonanzlabor und Kernlabor. */
.folge-detail { left:5%;top:14%;width:45%;height:43%; }
.folge-konsole { left:4%;top:61%;width:47%;height:30%; }
.folge-tuer { left:60%;top:19%;width:35%;height:58%;align-items:flex-start; }
.folge-tuer span { color:var(--rot);padding:.4rem .25rem; }
.feld select { width:100%;min-height:48px;padding:.5rem .4rem;font:inherit;font-size:1rem;color:var(--text);background:#03100f;border:2px solid #4a7c86;border-radius:8px; }
.feld select[aria-invalid="true"] { border-color:var(--rot); }
.raum-szene[data-offen="true"] .kernlicht { fill:#8ff0b0; }
.finale { border:2px solid var(--petrol);padding:1.25rem;background:linear-gradient(#102d35,#061219); }
.finale h2 { font-size:1.2rem;margin-top:1.4rem; }
.finale button { margin:.4rem .4rem .4rem 0; }

/* KI-generierte Kulisse nur für Raum 1; SVG darunter bleibt Lade-Fallback. */
#einstieg-szene1 .raumfoto { position:absolute;inset:0;display:block;pointer-events:none; }
#einstieg-szene1 .raumfoto img { display:block;width:100%;height:100%;object-fit:cover; }
#einstieg-szene1 .raumobjekt--detail1 { left:3%;top:13%;width:55%;height:33%; }
#einstieg-szene1 .raumobjekt--terminal1 { left:3%;top:48%;width:55%;height:19%; }
#einstieg-szene1 .raumobjekt--tuer1 { left:65%;top:28%;width:32%;height:39%; }
#einstieg-szene1 .raumobjekt { background:transparent;border:1px solid rgba(112,207,209,.55); }
#einstieg-szene1 .raumobjekt:hover { background:rgba(95,214,217,.12); }
#einstieg-szene1 .raumobjekt span { background:rgba(3,17,23,.95);box-shadow:0 2px 8px #000; }
#einstieg-szene1 .raumobjekt[data-locked="false"] { border:2px solid var(--gruen);box-shadow:inset 0 0 22px rgba(143,240,176,.3); }
@media (forced-colors:active) { #einstieg-szene1 .raumfoto { display:none; } #einstieg-szene1 .raumobjekt { border:2px solid CanvasText; } }

/* Cinematische Folgekulissen. Bilder liegen unter den echten HTML-Schaltflächen. */
.szene .raumfoto { position:absolute;inset:0;display:block;pointer-events:none; }
.szene .raumfoto img { display:block;width:100%;height:100%;object-fit:cover; }
.szene .raumfoto ~ button { background:transparent;border:1px solid rgba(112,207,209,.55); }
.szene .raumfoto ~ button:hover { background:rgba(95,214,217,.12); }
.szene .raumfoto ~ button > span:not(.ziel__punkt) { background:rgba(3,17,23,.95);box-shadow:0 2px 8px #000; }
.szene .raumfoto ~ button[data-locked="false"],#szene[data-tuer="offen"] #btn-schleuse { border:2px solid var(--gruen);box-shadow:inset 0 0 22px rgba(143,240,176,.3); }
#szene[data-tuer="offen"] #btn-schleuse .ziel__text { color:var(--gruen);border-color:var(--gruen); }
#einstieg-szene2 .raumobjekt--detail2 { left:2%;top:29%;width:44%;height:26%; }
#einstieg-szene2 .raumobjekt--terminal2 { left:55%;top:57%;width:42%;height:23%; }
#einstieg-szene2 .raumobjekt--tuer2 { left:51%;top:20%;width:45%;height:35%; }
#szene .ziel--karte { left:80%;top:33%;width:19%;height:12%; }
#szene .ziel--konsole { left:1%;top:49%;width:38%;height:25%; }
#szene .ziel--schleuse { left:25%;top:20%;width:55%;height:37%; }
#szene .ziel__text { max-width:100%;min-width:0;overflow-wrap:anywhere;padding:.3rem .25rem; }
#szene .ziel--karte .ziel__text { position:static;max-width:100%; }
#labor-szene4 .folge-detail { left:3%;top:10%;width:45%;height:41%; }
#labor-szene4 .folge-konsole { left:3%;top:55%;width:49%;height:23%; }
#labor-szene4 .folge-tuer { left:57%;top:31%;width:39%;height:38%; }
#labor-szene5 .folge-detail { left:3%;top:19%;width:42%;height:24%; }
#labor-szene5 .folge-konsole { left:2%;top:48%;width:49%;height:21%; }
#labor-szene5 .folge-tuer { left:56%;top:25%;width:40%;height:39%; }
#labor-szene6 .folge-detail { left:3%;top:10%;width:48%;height:36%; }
#labor-szene6 .folge-konsole { left:2%;top:50%;width:53%;height:18%; }
#labor-szene6 .folge-tuer { left:61%;top:28%;width:35%;height:35%; }
@media(forced-colors:active) { .szene .raumfoto { display:none; } .szene .raumfoto ~ button { border:2px solid CanvasText; } }


/* Erzählrahmen: getrennte Startseite und Abschlussbild. */
body[data-abschnitt="intro"] #vorbereich { display:none; }
.story-intro { max-width:30rem; margin:0 auto; padding:0; }
.story-cover { position:relative; background:#040d12; }
.story-bild { display:block; }
.story-bild img { display:block; width:100%; height:auto; }
/* Hintergrundfilm nur auf der Startseite; das erste Frame dient als Fallback. */
.story-video { position:absolute; inset:0; z-index:1; width:100%; height:100%; object-fit:cover; pointer-events:none; }
.story-text { position:absolute; z-index:2; top:0; left:0; right:0; padding:1.3rem; background:linear-gradient(#040d12f5 0%,#040d12dc 72%,#040d1200 100%); padding-bottom:3rem; }
@media (prefers-reduced-motion: reduce) { .story-video { display:none; } }
.story-text h1 { font-size:clamp(1.6rem,7vw,2.3rem); line-height:1.1; margin:.5rem 0 1rem; }
.story-text p { line-height:1.5; }
.story-text .story-ton { font-size:.8rem; color:#c2d6dc; }
.story-text .knopf { min-height:48px; }
.finale .story-bild { max-width:30rem; margin:1rem auto 1.5rem; border-radius:.7rem; overflow:hidden; }
@media (max-width:350px) { .story-text { padding:1rem 1rem 2rem; } .story-text p { font-size:.9rem; } }
@media (min-width:700px) { .story-intro { padding:1rem 0; } }

/* Gemeinsame farbige Marke auf Einstieg, allen Räumen und Abschluss. */
.markenkopf { position:sticky; top:0; z-index:15; display:flex; align-items:center; justify-content:center; padding:7px 16px; background:#061015; border-bottom:1px solid #23424c; }
.markenkopf img { display:block; width:180px; max-width:100%; height:auto; }
[id^="vor"][id$="titel"], [id^="labor-titel"], #finale-titel, #raum { scroll-margin-top:70px; }
@media (max-height:500px) { .markenkopf img { width:140px; } .markenkopf { padding:4px 12px; } }

/* =====================================================================
   Gestaltung v2 (29.10.2026): einheitliche Räume, Punktschreibweise,
   Funksprüche, Fortschrittsschlösser, geräteunabhängige Umbrüche.
   ===================================================================== */
h1, h2, legend { text-wrap: balance; }

/* Kopfzeile: Marke links, Schlösser rechts; auf dem Startbild zentriert */
.markenkopf { justify-content:space-between; padding:6px max(12px, env(safe-area-inset-right)) 6px max(12px, env(safe-area-inset-left)); }
.markenkopf img { width:150px; }
body[data-abschnitt="intro"] .markenkopf { justify-content:center; }
body[data-abschnitt="intro"] .schloesser { display:none; }
.schloesser { display:flex; list-style:none; margin:0 0 0 8px; padding:0; }
.schloesser li { width:20px; height:24px; margin-left:5px; color:#3f5f68; }
.schloesser svg { display:block; width:100%; height:100%; overflow:visible; }
.schloss__buegel { transition:transform .6s ease; }
.schloesser li[data-zustand="aktuell"] { color:var(--rot); }
.schloesser li[data-zustand="offen"] { color:var(--gruen); }
.schloesser li[data-zustand="offen"] .schloss__buegel { transform:translate(5px,-3px) rotate(14deg); transform-origin:15px 11px; }
@media (max-width:340px) { .markenkopf img { width:128px; } .schloesser li { width:17px; height:21px; margin-left:4px; } }
@media (max-height:500px) { .markenkopf img { width:130px; } }

/* Einheitlicher Raum 3 im selben Rahmen wie die anderen Räume */
.layout.raum3 { display:block; max-width:44rem; margin:0 auto; padding:1rem; }
.raum3 .raum .szene, .raum3 .szene { width:100%; max-width:24rem; min-width:0; margin:0 auto; }
#szene #btn-karte { left:79%; top:33%; width:20%; height:12%; z-index:2; }
#szene #btn-konsole { left:1%; top:49%; width:40%; height:25%; }
#szene #btn-schleuse { left:25%; top:20%; width:55%; height:37%; align-items:flex-start; }
#szene #btn-karte span { position:absolute; right:-1px; top:calc(100% + 5px); }
#szene[data-tuer="offen"] #btn-schleuse { border:2px solid var(--gruen); box-shadow:inset 0 0 22px rgba(143,240,176,.3); }

/* Beschriftungen im Bild: nie umbrechen, mit der Breite leicht mitwachsen */
.szene .raumobjekt span, .raum-szene .raumobjekt span {
  white-space:nowrap; overflow-wrap:normal; hyphens:manual; max-width:none;
  font-size:.9375rem; font-size:clamp(.875rem, 3.9vw, 1rem);
  padding:.35rem .6rem; min-height:40px;
}
.raumobjekt { min-width:44px; min-height:44px; }
.folge-tuer span, .raumobjekt--tuer1 span, .raumobjekt--tuer2 span, #btn-schleuse span { color:var(--rot); }
.raumobjekt[data-locked="false"] span { color:var(--gruen); border-color:var(--gruen); }

/* Entriegelungsmoment (bei „Bewegung reduzieren“ nur Farbwechsel) */
.entriegelt-jetzt { animation:entriegeln 1.2s ease-out 2; }
@keyframes entriegeln {
  0% { box-shadow:inset 0 0 0 rgba(143,240,176,0), 0 0 0 0 rgba(143,240,176,.7); }
  50% { box-shadow:inset 0 0 30px rgba(143,240,176,.55), 0 0 0 10px rgba(143,240,176,0); }
  100% { box-shadow:inset 0 0 22px rgba(143,240,176,.3), 0 0 0 0 rgba(143,240,176,0); }
}

/* Funkspruch von Apex */
.funkspruch { margin:.7rem 0 .9rem; padding:.7rem .85rem .35rem; background:#0a161b; border:1px solid #3a2328; border-left:4px solid #ff5a5a; border-radius:8px; }
.funkspruch__kopf { display:flex; align-items:center; flex-wrap:wrap; margin-bottom:.35rem; }
.funkspruch__auge { width:1.4rem; height:.42rem; margin-right:.5rem; border-radius:999px; background:#ff5a5a; box-shadow:0 0 .6rem #ff5a5a; }
.funkspruch__name { font-weight:700; letter-spacing:.14em; color:var(--rot); font-size:.95rem; margin-right:auto; }
.funkspruch__text { margin:0 0 .5rem; color:var(--text); }
.vor-panel .funkspruch button { margin:0; }

/* Eingaben in Punktschreibweise: HP( x | y ) */
.zeile.punkt { display:block; padding:.4rem .75rem .5rem; }
.punkt-eingabe { display:flex; align-items:center; }
.punkt-eingabe .feld { flex:1 1 0; min-width:0; }
.punkt-zeichen { flex:none; font-family:var(--mathe); font-size:1.25rem; color:var(--text-2); padding:0 .3rem; }
.punkt-zeichen.punkt-name { padding-left:0; color:var(--text); }
.punkt-eingabe input { text-align:center; }
.feld input::placeholder { color:#5d7f86; opacity:1; }
.feld input[aria-invalid="true"], .feld select[aria-invalid="true"] { border-color:var(--rot); border-style:dashed; }
.punkt .feld__meldung { margin:.3rem 0 0; }
.punkt .feld__meldung:empty { display:none; }
.feld__meldung:not(:empty)::before { content:"✕ "; font-weight:700; }
.feld__meldung[data-feld]:not(:empty)::before { content:"✕ " attr(data-feld) ": "; }
.feld--fehler .feld__meldung::before { content:none; }
.punkt-art { margin-top:.55rem; }
.punkt-art label { font-size:.95rem; color:var(--text-2); }
.nullstellen { grid-template-columns:repeat(2, minmax(0,1fr)); }
.ordnung { grid-column:1 / -1; margin:.2rem 0 .4rem; font-size:1.125rem; color:var(--text-2); }
.feld--index label .mathe { font-size:1.2rem; }
.feld select { scroll-margin:5rem 0 7rem; }

/* Prüfen-Leiste: Abstand zur Wischleiste, sichtbarer Übergang */
.pruefen { padding-bottom:max(.35rem, env(safe-area-inset-bottom)); box-shadow:0 -10px 14px -6px var(--flaeche); }
.dlg__inhalt form { padding-bottom:.25rem; }

/* Multiple Choice: gut sichtbare Auswahlkreise */
.mc-option { border-color:#3b6f7a; background:#0a1b21; }
.mc-option input { -webkit-appearance:none; appearance:none; flex:none; width:22px; height:22px; margin:.15rem .7rem 0 0; border:2px solid var(--petrol); border-radius:50%; background:#03100f; }
.mc-option input:checked { background:var(--petrol); box-shadow:inset 0 0 0 4px #03100f; }
.mc-option input:focus-visible { outline:3px solid var(--fokus); outline-offset:2px; }
.mc-option:has(input:checked) { border-color:var(--petrol); background:#0d2a31; }

/* Graph: Beschriftungen mit Schutzrand über der Kurve */
.vor-graph text { paint-order:stroke; stroke:var(--flaeche); stroke-width:5px; stroke-linejoin:round; }

/* Fußzeile */
.spiel-fuss { max-width:44rem; margin:1.5rem auto 0; padding:1rem 1rem max(1.25rem, env(safe-area-inset-bottom)); color:var(--text-2); font-size:.875rem; text-align:center; border-top:1px solid #16303a; }
.spiel-fuss p { margin:0 0 .4rem; }
.spiel-fuss a { color:var(--text-2); }
body.dlg-offen .spiel-fuss { visibility:hidden; }

@media (forced-colors:active) { .funkspruch, .mc-option input { border:2px solid CanvasText; } .schloesser li { color:CanvasText; } }

/* Dialogkopf: Titel darf umbrechen, Schließen bleibt ein festes Symbolfeld */
.dlg__kopf h2 { flex:1 1 auto; min-width:0; hyphens:manual; overflow-wrap:break-word; }
.knopf--schliessen { width:48px; padding:0; justify-content:center; font-size:1.25rem; line-height:1; text-align:center; }
.raum-panel h1, .vor-panel h1 { hyphens:manual; overflow-wrap:break-word; }
.mc-option .mathe { overflow-wrap:normal; word-break:normal; }

/* EXTREMUM v23: dezente Videosteuerung auf der vorhandenen Startseite. */
.story-video { -webkit-transform:scale(1); transform:scale(1); -webkit-transition:transform 1.15s ease-in; transition:transform 1.15s ease-in; }
.story-cover.story-cover--betreten .story-video { -webkit-transform:scale(1.065); transform:scale(1.065); }
.story-filmsteuerung { position:absolute; z-index:3; left:0; right:0; bottom:0; display:flex; flex-direction:column; align-items:flex-start; gap:.55rem; padding:2.5rem 1rem 1rem; background:linear-gradient(0deg,rgba(3,12,17,.9),rgba(3,12,17,0)); pointer-events:none; }
.story-filmstatus { display:inline-flex; align-items:center; min-height:1.25rem; color:#b7d3d8; font-size:.69rem; font-weight:600; letter-spacing:.11em; text-shadow:0 1px 3px #000; }
.story-filmstatus:before { content:""; width:5px; height:5px; border-radius:50%; background:#78dade; box-shadow:0 0 7px #78dade; margin-right:.48rem; }
.story-filmsteuerung[data-status="ende"] .story-filmstatus:before { background:#ff8a8a; box-shadow:0 0 6px #ff8a8a; }
.story-filmaktionen { display:flex; flex-wrap:wrap; gap:.5rem; }
.story-filmknopf { color:#e8f3f3; background:rgba(7,23,30,.84); border:1px solid rgba(120,175,184,.65); border-radius:6px; padding:.5rem .7rem; min-height:37px; font:600 .72rem/1.2 var(--schrift); pointer-events:auto; cursor:pointer; -webkit-backdrop-filter:blur(5px); backdrop-filter:blur(5px); }
.story-filmknopf:hover { background:rgba(26,59,68,.95); border-color:#9ce2e6; }
.story-filmknopf:focus-visible { outline:3px solid var(--fokus); outline-offset:2px; }
.story-filmknopf[aria-pressed="true"] { border-color:#87e4be; color:#caffdb; }
.story-cover.story-cover--betreten .story-filmsteuerung { pointer-events:none; opacity:0; -webkit-transition:opacity .3s ease; transition:opacity .3s ease; }
.story-cover.story-cover--betreten .story-filmknopf { pointer-events:none; }
@media (prefers-reduced-motion: reduce) { .story-video { display:none; } .story-filmsteuerung { background:linear-gradient(0deg,rgba(3,12,17,.9),transparent); } .story-cover.story-cover--betreten .story-video { -webkit-transform:none; transform:none; } }
@media (max-width:350px) { .story-filmsteuerung { padding:1.5rem .7rem .7rem; } .story-filmknopf { padding:.45rem .5rem; font-size:.65rem; } }

/* EXTREMUM v24 – ruhiges filmisches Intro. Bestehendes Layout bleibt erhalten. */
.story-cover { overflow:hidden; }
.story-filmsteuerung {
  gap:.55rem; padding:1.35rem 1rem .85rem;
  background:linear-gradient(0deg,rgba(3,12,17,.94) 0%,rgba(3,12,17,.65) 55%,rgba(3,12,17,0) 100%);
}
.story-ort {
  display:inline-flex; align-items:center; gap:.45rem;
  border-left:2px solid rgba(95,214,217,.8);
  background:rgba(4,17,23,.44); color:#d1e6e9;
  padding:.32rem .58rem; font-size:.63rem; font-weight:600;
  line-height:1.35; letter-spacing:.075em;
  text-shadow:0 1px 5px #000;
}
.story-ort__marke { color:#87e5e8; font-size:.91rem; }
.story-ort__trenner { color:#70b8c0; padding:0 .17rem; }
.story-unten { width:100%; display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:.4rem .75rem; }
.story-filmstatus { font-size:.62rem; letter-spacing:.075em; }
.story-filmknopf { min-height:36px; padding:.45rem .62rem; font-size:.7rem; }
.story-filmknopf[aria-pressed="true"] { color:#c7f7eb; border-color:#74d7c0; }
@keyframes story-einblenden {
  from { opacity:0; transform:translateY(8px); }
  to { opacity:1; transform:translateY(0); }
}
@keyframes story-knopf-leuchten {
  0%,100% { box-shadow:0 0 0 rgba(95,214,217,0); }
  50% { box-shadow:0 0 17px rgba(95,214,217,.22),0 0 0 3px rgba(95,214,217,.045); }
}
@media (prefers-reduced-motion: no-preference) {
  .story-text > .vor-label { animation:story-einblenden .65s ease-out .2s both; }
  .story-text > #intro-titel { animation:story-einblenden .8s ease-out .8s both; }
  .story-text > p:not(.vor-label):not(.story-ton) { animation:story-einblenden 1s ease-out 1.6s both; }
  .story-text > #labor-betreten { animation:story-einblenden .75s ease-out 2.45s both,story-knopf-leuchten 4.4s ease-in-out 3.3s infinite; }
  .story-text > .story-ton { animation:story-einblenden .75s ease-out 2.9s both; }
  .story-filmsteuerung { animation:story-einblenden .75s ease-out .8s both; }
  .story-text > #labor-betreten:focus-visible { animation:none; opacity:1; transform:none; }
  .story-text > #labor-betreten:hover { box-shadow:0 0 20px rgba(95,214,217,.29); }
}
@media (prefers-reduced-motion: reduce) {
  .story-text > *, .story-filmsteuerung, .story-text > #labor-betreten { animation:none!important; transform:none!important; }
}
@media (max-width:350px) {
  .story-filmsteuerung { padding:1rem .7rem .7rem; }
  .story-ort { font-size:.57rem; }
  .story-unten { gap:.3rem; }
  .story-filmstatus { font-size:.57rem; }
}



/* EXTREMUM v26 – Story oben, CTA unten, Video bleibt frei sichtbar. */
.story-cover { overflow:hidden; isolation:isolate; }
.story-text.story-text--cinema {
  top:0; bottom:0; left:0; right:0;
  padding:1rem .95rem 6.6rem;
  display:block;
  background:linear-gradient(to bottom,rgba(3,12,18,.78) 0%,rgba(3,12,18,.62) 22%,rgba(3,12,18,.22) 46%,rgba(3,12,18,0) 60%);
  pointer-events:none;
}
.story-kopfzeile {
  display:flex; align-items:flex-start; justify-content:space-between; gap:.7rem;
  margin:0 0 1rem;
}
.story-ort {
  display:inline-flex; align-items:center; gap:.45rem;
  border-left:2px solid rgba(95,214,217,.8);
  background:rgba(4,17,23,.44); color:#d1e6e9;
  padding:.32rem .58rem; font-size:.63rem; font-weight:600;
  line-height:1.35; letter-spacing:.075em;
  text-shadow:0 1px 5px #000; opacity:0; transform:translateY(-6px);
  transition:opacity .5s ease, transform .5s ease;
}
.story-text--cinema.story-aktiv .story-ort,
.story-text--cinema.story-ort-aktiv .story-ort { opacity:1; transform:translateY(0); }
.story-ort__marke { color:#87e5e8; font-size:.91rem; }
.story-ort__trenner { color:#70b8c0; padding:0 .17rem; }
.story-filmknopf {
  color:#e8f3f3; background:rgba(7,23,30,.84); border:1px solid rgba(120,175,184,.65);
  border-radius:6px; padding:.48rem .62rem; min-height:36px; font:600 .7rem/1.2 var(--schrift);
  pointer-events:auto; cursor:pointer; -webkit-backdrop-filter:blur(5px); backdrop-filter:blur(5px);
}
.story-filmknopf:hover { background:rgba(26,59,68,.95); border-color:#9ce2e6; }
.story-filmknopf:focus-visible { outline:3px solid var(--fokus); outline-offset:2px; }
.story-filmknopf[aria-pressed="true"] { color:#c7f7eb; border-color:#74d7c0; }
.story-filmknopf--oben { flex:0 0 auto; align-self:flex-start; }
.story-erzaehlung {
  max-width:min(27rem,92%);
  min-height:10rem;
}
.story-text--cinema .story-zeile {
  color:#f3f7f8; font-size:clamp(1.02rem,3.5vw,1.18rem); font-weight:600;
  line-height:1.5; letter-spacing:.003em; min-height:5.6rem; margin:0;
  text-shadow:0 2px 9px #02070cee;
}
.story-zeile .story-wort { opacity:0; display:inline; transition:opacity .36s ease-out,filter .36s ease-out; filter:blur(3px); }
.story-zeile .story-wort.sichtbar { opacity:1; filter:blur(0); }
.story-cta {
  position:absolute; left:50%; bottom:5rem; transform:translateX(-50%);
  width:min(22rem,calc(100% - 1.5rem));
  display:flex; flex-direction:column; align-items:center; gap:.7rem;
  pointer-events:auto; z-index:3;
}
.story-text--cinema .story-start {
  display:inline-flex; align-items:center; justify-content:center; gap:.85rem;
  width:min(18rem,100%); margin:0 auto;
}
.story-text--cinema .story-start span { opacity:.85; font-weight:700; }
.erl-start { position:absolute; left:50%; bottom:.75rem; transform:translateX(-50%); width:min(22rem,calc(100% - 1.5rem)); }
.erl-laden { width:100%; margin:0 auto; text-align:center; }
.erl-laden__balken { width:100%; }
.erl-laden__text { margin:.35rem 0 0; font-size:.82rem; color:#d1e1e4; text-shadow:0 1px 3px #000; }
.story-filmsteuerung { position:absolute; inset:auto 0 0 0; pointer-events:none; }
.story-nachlesen { border:1px solid #24505a; border-top:0; color:#aaccd0; background:#0a1a20; padding:.65rem 1.1rem; font-size:.83rem; line-height:1.6; }
.story-nachlesen summary { color:#bce9e9; cursor:pointer; font-weight:600; }
.story-nachlesen p { margin:1rem 0 .4rem; }
.story-nachlesen summary:focus-visible { outline:2px solid var(--fokus); }
.story-cover--betreten .story-text--cinema, .story-cover--betreten .story-filmsteuerung { opacity:0; transition:opacity .4s ease; pointer-events:none; }
@keyframes story-knopf-leuchten {
  0%,100% { box-shadow:0 0 0 rgba(95,214,217,0); }
  50% { box-shadow:0 0 17px rgba(95,214,217,.22),0 0 0 3px rgba(95,214,217,.045); }
}
@media (prefers-reduced-motion:no-preference) {
  .story-text--cinema > .story-cta #labor-betreten { animation:story-knopf-leuchten 4.4s ease-in-out 1.5s infinite; }
  .story-text--cinema > .story-cta #labor-betreten:focus-visible { animation:none; }
}
@media(max-width:390px){
  .story-text.story-text--cinema { padding:.8rem .75rem 6.3rem; }
  .story-kopfzeile { gap:.45rem; margin-bottom:.85rem; }
  .story-ort { font-size:.57rem; padding:.3rem .48rem; }
  .story-filmknopf { padding:.42rem .5rem; font-size:.65rem; min-height:34px; }
  .story-erzaehlung { max-width:100%; min-height:9.5rem; }
  .story-text--cinema .story-zeile { font-size:.99rem; min-height:6.5rem; }
  .story-cta { width:calc(100% - 1rem); bottom:4.85rem; }
}
@media(prefers-reduced-motion:reduce){
  .story-text.story-text--cinema { padding-bottom:6rem; }
  .story-ort { opacity:1; transform:none; transition:none; }
  .story-text--cinema .story-zeile { min-height:auto; }
  .story-zeile .story-wort { opacity:1; filter:none; transition:none; }
}

/* EXTREMUM v28: Labor-Button kommt erst nach der kompletten Erzählung. */
.story-cover .story-cta {
  opacity:0; visibility:hidden; pointer-events:none;
  transform:translate(-50%,10px);
  transition:opacity .75s ease-out,transform .75s ease-out,visibility 0s linear .75s;
}
.story-cover .story-cta.story-cta--sichtbar {
  opacity:1; visibility:visible; pointer-events:auto;
  transform:translate(-50%,0);
  transition:opacity .85s ease-out,transform .85s ease-out;
}
@media(prefers-reduced-motion:reduce) {
  .story-cover .story-cta { transition:none; }
  .story-cover .story-cta.story-cta--sichtbar { transition:none; }
}


/* EXTREMUM v29: Einmaliger Kameraflug mit Standbild und pulsierenden Warnleuchten. */
.story-video { z-index:1; }
.story-filmstill { position:absolute; inset:0; z-index:1; display:block; width:100%; height:100%; object-fit:cover; pointer-events:none; opacity:0; }
.story-cover.story-angehalten .story-filmstill { opacity:1; }
.story-warnlichter { position:absolute; z-index:2; inset:0; pointer-events:none; opacity:0; transition:opacity .15s ease; }
.story-cover.story-angehalten .story-warnlichter { opacity:1; }
.story-warnlicht { position:absolute; display:block; transform:translate(-50%,-50%); border-radius:50%; filter:blur(.7px); animation:story-alarm 1.75s ease-in-out infinite; }
.story-warnlicht--oben { left:43.6%; top:38%; width:7.6%; height:4.1%; border-radius:12%; background:radial-gradient(ellipse,rgba(255,60,64,.8) 0%,rgba(247,36,50,.38) 30%,transparent 77%); box-shadow:0 0 14px rgba(255,40,48,.42); }
.story-warnlicht--links { left:16.2%; top:50.1%; width:6%; height:3%; background:radial-gradient(ellipse,rgba(255,53,69,.76),rgba(255,46,69,.26) 38%,transparent 75%); animation-delay:.12s; }
.story-warnlicht--rechts { left:70.2%; top:50.1%; width:6%; height:3%; background:radial-gradient(ellipse,rgba(255,53,69,.76),rgba(255,46,69,.26) 38%,transparent 75%); animation-delay:.12s; }
@keyframes story-alarm { 0%,37%,74%,100% { opacity:.17; } 10%,22%,51%,64% { opacity:1; } }
.story-text.story-text--cinema { z-index:3; padding:.85rem .96rem 6.3rem; }
.story-kopfzeile { margin-bottom:.75rem; }
.story-erzaehlung { max-width:100%; min-height:0; }
.story-text--cinema .story-zeile { min-height:0; margin:0; font-weight:500; line-height:1.34; font-size:clamp(.91rem,3.1vw,1.03rem); }
.story-absatz { margin:0 0 .5rem; line-height:1.34; color:#f3f7f8; }
.story-absatz--temp { margin:0 0 .75rem; font-weight:700; color:#b6eef0; font-size:.85em; letter-spacing:.13em; }
.story-absatz--warnung { font-weight:800; color:#fff; }
.story-zeile .story-wort { opacity:0; filter:blur(2px); transition:opacity .25s ease,filter .25s ease; }
.story-zeile .story-wort.sichtbar { opacity:1; filter:none; }
.story-text.story-text--cinema { background:linear-gradient(to bottom,rgba(3,12,18,.86) 0%,rgba(3,12,18,.66) 31%,rgba(3,12,18,.22) 58%,transparent 73%); }
.story-text--cinema.story-ort-aktiv .story-ort { opacity:1; transform:translateY(0); }
.story-cover .story-cta { bottom:4.6rem; }
.story-cover .erl-start { bottom:.5rem; }
@media(max-width:390px){
 .story-text.story-text--cinema { padding:.75rem .72rem 6rem; }
 .story-kopfzeile { margin-bottom:.56rem; }
 .story-text--cinema .story-zeile { font-size:.84rem; line-height:1.28; }
 .story-absatz { margin-bottom:.35rem; line-height:1.28; }
 .story-absatz--temp { margin-bottom:.55rem; }
 .story-cover .story-cta { bottom:4.5rem; }
}
@media(prefers-reduced-motion:reduce){
 .story-filmstill { opacity:1; }
 .story-warnlichter { display:none; }
 .story-zeile .story-wort { opacity:1; filter:none; transition:none; }
}