/* ===========================================================================
   MBK FLOW 2035 — Layout der Erlebnisseite.
   Setzt system2035.css voraus. Die 3D-Bühne liegt FEST hinter dem Inhalt;
   der Inhalt scrollt darüber. Ohne WebGL bleibt alles lesbar und bedienbar.
   =========================================================================== */

/* --- Bühne: eine einzige feste Fläche für die gesamte Reise -------------- */
.e-buehne { position: fixed; inset: 0; z-index: 0; pointer-events: none; background: var(--t0); }
.e-buehne canvas { display: block; width: 100%; height: 100%; }
/* Abdunklung über der Bühne (Desktop ≥ 1180 px): Navigatorband 0–12 % auf .55,
   ab 54 % eine Rampe bis 62 % auf .88 unter der Textspalte, dazu der Bodenverlauf.
   Ohne sie steht weiße Schrift auf dem hellen Modell. */
.e-buehne::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(90deg, rgba(0, 0, 0, .55) 0%, rgba(0, 0, 0, .55) 11%, rgba(0, 0, 0, 0) 13%, rgba(0, 0, 0, 0) 54%, rgba(0, 0, 0, .88) 62%, rgba(0, 0, 0, .88) 100%),
    linear-gradient(to top, rgba(0, 0, 0, .92), rgba(0, 0, 0, 0) 28%);
}
/* Unter 1180 px: die Bühne steht im oberen Fenster (BILDZONE mobil y .09–.43), darunter ein Scrim ab 44 %. */
@media (max-width: 1179px) {
  .e-buehne::after {
    background: linear-gradient(180deg, rgba(0, 0, 0, .35) 0%, rgba(0, 0, 0, 0) 8%, rgba(0, 0, 0, 0) 40%, rgba(0, 0, 0, .88) 44%, rgba(0, 0, 0, .88) 100%);
  }
}
.e-buehne__ersatz { position: absolute; inset: 0; display: grid; place-items: center; }
.e-buehne__ersatz img { width: 100%; height: 100%; object-fit: cover; opacity: .5; }

/* Statusanzeige der Bühne — technisch, keine erfundenen Messwerte */
.e-status { position: fixed; right: clamp(.9rem, 2vw, 2rem); bottom: clamp(.9rem, 2vw, 2rem); z-index: 35; display: none; gap: .55rem; align-items: center; padding: .45rem .8rem; font-size: .64rem; font-weight: 700; letter-spacing: var(--spur); text-transform: uppercase; color: var(--text-leise); }
@media (min-width: 900px) { .e-status { display: flex; } }
.e-status[data-aus] { display: none; }
.e-status__punkt { width: 7px; height: 7px; border-radius: 50%; background: var(--scan); box-shadow: 0 0 10px var(--scan); }
.e-status__wert { color: var(--scan); font-variant-numeric: tabular-nums; }

/* --- Inhalt über der Bühne ---------------------------------------------- */
.e-welt > main { position: relative; z-index: 2; }
.e-kapitel { --flaeche: 0; }
/* Kapitel ohne eigene Fläche lassen die Bühne durchscheinen */
.e-kapitel--durchsicht { background: transparent; }
.e-kapitel--grund { background: linear-gradient(180deg, transparent, var(--t1) 18%, var(--t1) 82%, transparent); }

/* --- Hero ---------------------------------------------------------------- */
.e-hero { min-height: 100svh; display: grid; align-content: center; }
.e-hero__zeile { display: flex; flex-wrap: wrap; gap: .6rem 1.6rem; margin: 0 0 2rem; padding: 0; list-style: none; }
.e-hero__zeile li { font-size: .72rem; font-weight: 700; letter-spacing: var(--spur); text-transform: uppercase; color: var(--text-leise); display: flex; align-items: center; gap: .55rem; }
.e-hero__zeile li::before { content: ""; width: 5px; height: 5px; background: var(--scan); flex: none; }
.e-hero__aktionen { display: flex; flex-wrap: wrap; gap: .9rem; margin-bottom: 2.2rem; }
.e-hero__marke { font-size: .76rem; letter-spacing: var(--spur); text-transform: uppercase; color: var(--text-leise); }
.e-hero__marke strong { color: var(--text-2035); }
.e-hinab { display: inline-flex; align-items: center; gap: .6rem; font-size: .66rem; font-weight: 700; letter-spacing: var(--spur); text-transform: uppercase; color: var(--text-leise); text-decoration: none; margin-top: 2.4rem; }
.e-hinab__spur { width: 1px; height: 38px; background: linear-gradient(to bottom, var(--scan), transparent); }

/* --- Verfahrenswahl (Reinigung, Sanierung) ------------------------------ */
.e-verfahren { display: grid; gap: .55rem; margin: 1.6rem 0 0; padding: 0; list-style: none; }
.e-verfahren__knopf {
  width: 100%; text-align: left; display: grid; grid-template-columns: 2.2rem 1fr; align-items: start; gap: .9rem;
  padding: .85rem 1rem; background: rgba(255,255,255,.025); border: 1px solid var(--glas-kante); border-radius: var(--panel-radius);
  color: var(--text-leise); font: inherit; cursor: pointer; transition: background-color .3s, border-color .3s, color .3s;
}
.e-verfahren__knopf:hover { border-color: var(--scan-kante); color: var(--text-2035); }
.e-verfahren__knopf:focus-visible { outline: 2px solid var(--scan); outline-offset: 2px; }
.e-verfahren__knopf[aria-pressed="true"] { background: var(--scan-weich); border-color: var(--scan-kante); color: #fff; }
.e-verfahren__nr { font-size: .68rem; font-weight: 700; letter-spacing: .08em; color: var(--scan); font-variant-numeric: tabular-nums; padding-top: .15rem; }
.e-verfahren__name { display: block; font-weight: 700; color: inherit; margin-bottom: .2rem; }
.e-verfahren__text { display: block; font-size: .88rem; line-height: 1.5; color: var(--text-leise); }

/* --- Technik-Verweis: technische Sprache statt Fließtext-Link ------------
   Sitzt als Geschwister NACH dem Knopf (kein Link im Knopf), optisch in dessen
   Textspalte. Versalien wie die Overlays, der Pfeil rückt 2 px. */
.e-verfahren > li { position: relative; }
.e-verfahren__knopf { padding-bottom: 2.45rem; }
.e-technik {
  position: absolute; left: calc(1rem + 2.2rem + .9rem + 1px); bottom: .55rem; z-index: 1;
  display: inline-flex; align-items: center; gap: .45rem; min-height: 28px; padding: 0 .1rem;
  font-size: .64rem; font-weight: 700; letter-spacing: var(--spur); text-transform: uppercase;
  color: var(--scan); text-decoration: none; transition: color .25s;
}
.e-technik__pfeil { display: inline-block; transition: transform .25s cubic-bezier(.22,1,.36,1); }
.e-technik:hover, .e-technik:focus-visible { color: #fff; }
.e-technik:hover .e-technik__pfeil, .e-technik:focus-visible .e-technik__pfeil { transform: translateX(2px); }
.e-technik:focus-visible { outline: 2px solid var(--scan); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { .e-technik__pfeil { transition: none; } }

/* --- Zustandsschalter Normalbetrieb | Rückstau (nur mit laufender Bühne) ---- */
.e-zustand {
  display: grid; grid-template-columns: 1fr 1fr; gap: 2px; padding: 2px; margin: 0 0 1.3rem;
  border: 1px solid var(--glas-kante); border-radius: var(--panel-radius); background: rgba(0, 0, 0, .35);
}
.e-welt:not(.e-aktiv) .e-zustand { display: none; }
.e-zustand__teil {
  display: inline-flex; align-items: center; justify-content: center; gap: .55rem; min-height: 44px; padding: .5rem .8rem;
  font: inherit; font-size: .66rem; font-weight: 700; letter-spacing: var(--spur); text-transform: uppercase;
  color: var(--text-leise); background: transparent; border: 0; border-radius: 1px; cursor: pointer;
  transition: background-color .3s, color .3s;
}
.e-zustand__teil::before { content: ""; width: 7px; height: 7px; border-radius: 50%; border: 1px solid currentColor; flex: none; transition: background-color .3s, border-color .3s; }
.e-zustand__teil:hover { color: var(--text-2035); }
.e-zustand__teil[aria-pressed="true"] { background: var(--scan-weich); color: #fff; }
.e-zustand__teil[aria-pressed="true"]::before { background: #fff; border-color: #fff; }
.e-zustand__teil[data-zustand="rueckstau"][aria-pressed="true"]::before { background: var(--rot); border-color: var(--rot); }
.e-zustand__teil:focus-visible { outline: 2px solid var(--scan); outline-offset: 2px; }
/* Zustandsmarker A/C: Gerät klein und grau, darunter der Zustand weiß in einer Zeile */
.e-marker--zustand .e-marker__text { color: var(--text-leise); }
.e-marker__zustand { display: block; margin-top: .2rem; padding-top: .2rem; border-top: 1px solid var(--glas-kante); color: #fff; }
.e-marker__zustand span { white-space: nowrap; }   /* umbricht nur zwischen den Begriffen */

/* --- Vorher / Nachher ---------------------------------------------------- */
.e-vn { position: relative; margin-top: 1.6rem; }
.e-vn__regler { width: 100%; margin: .9rem 0 .3rem; accent-color: var(--scan); }
.e-vn__beschriftung { display: flex; justify-content: space-between; font-size: .66rem; font-weight: 700; letter-spacing: var(--spur); text-transform: uppercase; }
.e-vn__vorher { color: var(--rot-glut); }
.e-vn__nachher { color: var(--scan); }

/* --- System-Explorer: Gebäudeschnitt ------------------------------------ */
.e-explorer { position: relative; }
.e-explorer__buehne { position: relative; }
.e-explorer svg { width: 100%; height: auto; display: block; }
.e-explorer__punkt {
  position: absolute; transform: translate(-50%, -50%); width: 30px; height: 30px; border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, .22); background: rgba(11, 11, 11, .82); color: #a0a0a0; cursor: pointer;
  display: grid; place-items: center; font-size: .66rem; font-weight: 700; padding: 0;
  transition: background-color .25s, border-color .25s, transform .25s;
}
.e-explorer__punkt:hover, .e-explorer__punkt:focus-visible { background: rgba(11, 11, 11, .9); border-color: rgba(255, 255, 255, .7); color: #fff; transform: translate(-50%, -50%) scale(1.12); }
.e-explorer__punkt:focus-visible { outline: 2px solid var(--scan); outline-offset: 2px; }
/* Aktiv: roter Ring, dunkle Fuge, helle Außenkante (Rot berührt nie Weiß: kein Rosa-Saum);
   inaktive Punkte treten zurück. Größe bleibt 30 px, sonst verdeckt der Punkt das Bauteil. */
.e-explorer__punkt[aria-pressed="true"] {
  z-index: 31; background: #0b0b0b; color: #fff; border: 2px solid #f1080d;
  box-shadow: 0 0 0 2px #0b0b0b, 0 0 0 3px rgba(255, 255, 255, .85);
}
/* Scanring: neutral, nie rot */
.e-explorer__punkt[aria-pressed="true"]::before {
  content: ""; position: absolute; inset: -7px; border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, .42); pointer-events: none;
  animation: e-explorer-scan 2.8s cubic-bezier(.22, 1, .36, 1) infinite;
}
@keyframes e-explorer-scan { 0% { transform: scale(.85); opacity: .9; } 70%, 100% { transform: scale(1.35); opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  .e-explorer__punkt[aria-pressed="true"]::before { animation: none; transform: scale(1.1); opacity: .5; }
}
/* Desktop: Punkt 1 ist ab dem Laden gewählt. Liefe sein Scanring schon in der Tafel, spränge er beim
   Wechsel in den Raum mit (≈ 440 px) und erhöhte die Layoutverschiebung (CLS) – also erst im Raum. */
@media (min-width: 1180px) {
  .e-explorer:not(.e-raum) .e-explorer__punkt[aria-pressed="true"]::before { content: none; }
}
.e-explorer__tafel { margin-top: 1.2rem; padding: 1.2rem 1.4rem; min-height: 8.5rem; }
.e-explorer__tafel h3 { margin: 0 0 .5rem; font-size: 1.05rem; color: #fff; }
.e-explorer__tafel p { margin: 0; color: var(--text-leise); font-size: .95rem; line-height: 1.6; }

/* --- Problemnavigation --------------------------------------------------- */
.e-problem { display: grid; gap: .6rem; grid-template-columns: 1fr; margin: 1.8rem 0 0; }
@media (min-width: 760px) { .e-problem { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.e-problem a {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 64px;
  padding: 1rem 1.2rem; text-decoration: none; color: var(--text-2035);
  background: rgba(255,255,255,.025); border: 1px solid var(--glas-kante); border-radius: var(--panel-radius);
  transition: background-color .3s, border-color .3s, transform .3s cubic-bezier(.22,1,.36,1);
}
.e-problem a:hover, .e-problem a:focus-visible { background: var(--scan-weich); border-color: var(--scan-kante); transform: translateX(4px); }
.e-problem a:focus-visible { outline: 2px solid var(--scan); outline-offset: 2px; }
.e-problem__pfeil { color: var(--scan); flex: none; }

/* --- Markenabschluss ----------------------------------------------------- */
.e-marke { text-align: center; }
.e-marke__satz { font-size: clamp(1.9rem, 5.2vw, 4rem); line-height: 1.04; letter-spacing: -.03em; font-weight: 700; color: #fff; margin: 0 0 1.6rem; }
.e-marke__satz span { display: block; }
.e-marke__satz span:last-child { color: var(--rot-glut); }
.e-marke__logo { margin: 0 auto 2.2rem; width: 220px; }

/* --- Mobil: eigene Gestaltung, keine zusammengeschobene Desktopfassung --- */
@media (max-width: 760px) {
  /* Telefon (SVG-Tafel): inaktive Punkte 26 px, damit 6/7/8/11 sich nicht überlagern (≥ 24 px, WCAG 2.5.8) */
  .e-explorer__punkt:not([aria-pressed="true"]) { width: 26px; height: 26px; font-size: .6rem; }
  /* Mobil: Bühnenfenster oben, Scrim ab 44 % (siehe .e-buehne::after unter 1180 px). */
  /* 40vw statt 58vw: Der Pflichttext an der Rückstauebene (Anker bei etwa
     0,48·W) passte mit 58vw (und 44vw) auf 375–412 px auf keiner Seite ganz
     ins Bild; experience2035.js blendet ihn dann aus. */
  .e-marker__text { max-width: 40vw; }
  .e-titel, .e-marke__satz { text-shadow: 0 2px 26px rgba(0, 0, 0, .92), 0 0 2px rgba(0, 0, 0, .7); }
  .e-lead, .e-hero__zeile li, .e-hero__marke, .e-eyebrow { text-shadow: 0 1px 14px rgba(0, 0, 0, .9); }
  .e-kapitel { min-height: auto; padding: 3.4rem 0; }
  .e-hero { min-height: 92svh; }
  /* Auf dem Telefon bekommt jedes Panel einen eigenen Grund, damit Text über
     der Bühne immer lesbar bleibt — Glas allein trägt bei kleinem Kontrast nicht. */
  .e-panel { background: rgba(10, 10, 10, .86); }
  /* Dasselbe für den Lead im Kapitel: Er liegt mobil über dem Bühnenfenster, rote Linie und
     Pegellinie liefen sonst mitten durch die Wörter (Kapitel „Gefahr“, gemessen bei 390 px). */
  .e-kapitel .e-lead { background: rgba(10, 10, 10, .86); padding: .6rem .75rem; margin-inline: -.75rem; }
  /* Regler und Hinweis in „Lösungen“ laufen mobil über das Modell: gleicher Lesegrund */
  .e-kapitel .e-vn { background: rgba(10, 10, 10, .86); padding: .6rem .75rem; margin-inline: -.75rem; }
  .e-marker__linie { display: none; }
  .e-marker__text { font-size: .6rem; padding: .22rem .45rem; }
  .e-hero__aktionen .e-btn { flex: 1 1 100%; }
}

/* --- Ohne JavaScript / ohne WebGL --------------------------------------- */
.e-welt:not(.e-aktiv) .e-status { display: none; }
.no-js .e-buehne { background: linear-gradient(170deg, #131313, #070707 60%); }

/* Sprungziele aus Navigation und Fussbereich. Der Abstand verhindert, dass
   der feste Kopf das Ziel verdeckt. */
.e-anker { display: block; height: 0; scroll-margin-top: 90px; }
[id] { scroll-margin-top: 90px; }

/* --- Abgrenzung, Diagnose, KESSEL: eigene Bloecke im Kapitel ------------ */
.e-abgrenzung, .e-diagnose, .e-kessel { margin-top: clamp(3rem, 6vw, 5rem); }
.e-abgrenzung .e-spalten, .e-diagnose .e-spalten { margin-top: 1.2rem; }
.e-label--warm { color: var(--rot-glut); }
.e-label--warm::before { background: rgba(241, 8, 13, .5); }

/* --- Wartung: Ablauf in drei Schritten ---------------------------------- */
.e-schritte { list-style: none; margin: 0; padding: 0; display: grid; gap: .8rem; }
.e-schritte li { display: grid; grid-template-columns: 2.2rem 1fr; gap: .9rem; align-items: start; }

/* --- Abschluss ---------------------------------------------------------- */
.e-marke__satz--ruhig span:last-child { color: var(--scan); }
.e-marke__dreizeiler { margin: 1.6rem 0 0; font-size: .78rem; font-weight: 700; letter-spacing: var(--spur);
  text-transform: uppercase; color: var(--text-leise); display: flex; gap: .9rem; justify-content: center; flex-wrap: wrap; }
.e-marke__dreizeiler span:last-child { color: var(--rot-glut); }

/* --- Rechtsbündige Auszeichnung: die Bloecke ruecken nach rechts, der
   Fliesstext darin bleibt linksbuendig lesbar. --------------------------- */
.e-welt .e-lead { margin-left: auto; }
.e-hero__zeile, .e-hero__aktionen { justify-content: flex-end; }
.e-hero__marke, .e-hinab { margin-left: auto; }
.e-hero { text-align: right; }
.e-hero .e-lead { text-align: left; }
.e-vn, .e-verfahren, .e-problem, .e-schritte { text-align: left; }
.e-vn { margin-left: auto; max-width: 46ch; }
/* Markenabschluss bleibt als Block rechts, Inhalt darin linksbuendig. */
.e-marke { text-align: right; }
.e-marke__logo { margin-left: auto; margin-right: 0; }
.e-marke__dreizeiler { justify-content: flex-end; }
.e-marke .e-lead { text-align: left; }
/* In zweispaltigen Kapiteln steht die Glasflaeche links vom Text: dort wirkt
   rechtsbuendig nur, wenn die Spalte selbst rechts endet. */
@media (max-width: 760px) {
  .e-hero, .e-marke { text-align: right; }
  .e-titel { text-align: right; }
}
/* Die vier Vertrauensanker standen auf unterschiedlicher Hoehe, weil die
   Spalten mittig ausgerichtet sind. Als Reihe gehoeren sie auf eine Linie. */
.e-marke .e-spalten { align-items: stretch; }
.e-marke .e-spalten .e-glas { display: flex; flex-direction: column; }

/* --- Platz fuer den System-Navigator -------------------------------------
   Der Navigator liegt fest am linken Rand. Der Inhalt ist 1240 px breit und
   mittig; zwischen 1180 und rund 1700 px Fensterbreite bleibt links kein
   Rand mehr uebrig, und der Navigator lag auf Ueberschrift und Fliesstext.
   Deshalb bekommt der Inhalt eine eigene Gasse, solange der Navigator da ist. */
@media (min-width: 1180px) {
  .e-welt > main { padding-left: 230px; }
}

/* ===========================================================================
   2035 „Der lebende Schnitt“ — Layout für die Bühne (Integration F)
   =========================================================================== */

/* --- Rechte Textspalte ab 1180 px ---------------------------------------
   Für alle (auch ohne WebGL), damit beim Start der Bühne kein Layoutsprung
   entsteht. Die Handlung liegt in den linken 55 % (BILDZONE desktop), der Text
   beginnt bei 56vw: main hat links 230 px Gasse, also 56vw − 230px Rand. */
@media (min-width: 1180px) {
  :is(#rueckstau, #rueckstauebene, #gebaeude, #gefahr, #loesungen, #wartung) > .e-kapitel__inhalt {
    width: auto; max-width: none; flex: 1 1 0; min-width: 0;
    margin-left: calc(56vw - 230px); margin-right: max(2rem, 6vw);
  }
  :is(#rueckstau, #rueckstauebene, #gebaeude, #gefahr, #loesungen, #wartung) .e-spalten--2 { grid-template-columns: minmax(0, 1fr); }
  #rueckstau .e-titel { font-size: clamp(2.4rem, 4.1vw, 4.6rem); }
}
/* Die Bühne trägt #gebaeude und #wartung selbst — ohne den Grundverlauf. */
.e-aktiv #gebaeude.e-kapitel--grund, .e-aktiv #wartung.e-kapitel--grund { background: transparent; }

/* --- Unter 1180 px: Bühnenfenster oben -------------------------------------
   Jedes der sechs Kapitel beginnt unter dem Fenster der Bühne (44svh). */
@media (max-width: 1179px) {
  :is(#rueckstau, #rueckstauebene, #gebaeude, #gefahr, #loesungen, #wartung).e-kapitel { padding-top: 44svh; }
  /* Bühnenfenster vor der Verfahrenstafel: Zustandsschalter und Gerät stehen gleichzeitig im Bild. */
  .js #loesungen .e-spalten--2 > .e-panel { margin-top: 34svh; }
}

/* --- Qualitätsstufe: ohne teure Hintergrundunschärfe ----------------------- */
.e-welt:is([data-stufe="mittel"], [data-stufe="niedrig"], [data-stufe="spar"]) .e-glas,
.e-welt:is([data-stufe="mittel"], [data-stufe="niedrig"], [data-stufe="spar"]) .kopf {
  -webkit-backdrop-filter: none; backdrop-filter: none; background: rgba(10, 10, 10, .86);
}

/* --- RSE-DOM-Linie (Desktop, Kapitel 02) ------------------------------------ */
.e-rse-linie {
  position: fixed; left: 0; top: 0; width: 0; height: 1px; margin-top: -.5px;
  background: #f1080d; opacity: 0; pointer-events: none; will-change: transform, opacity;
}

/* --- Vorher/Nachher-Trennlinie (Stufe hoch) --------------------------------- */
.e-vergleich {
  position: fixed; left: 0; top: 13vh; height: 77vh; width: 1px; margin-left: -.5px;
  background: #fff; display: none; pointer-events: none; will-change: transform;
}
.e-vergleich[data-an] { display: block; }
.e-vergleich__etikett {
  position: absolute; top: -1.6rem; font-size: .62rem; font-weight: 700; letter-spacing: var(--spur);
  text-transform: uppercase; color: #fff; white-space: nowrap;
}
.e-vergleich__etikett--ohne { right: .6rem; }
.e-vergleich__etikett--mit { left: .6rem; }

/* --- Explorer im Raum (Desktop, Kapitel 03) --------------------------------
   Das SVG tritt zurück, die zwölf Knöpfe sitzen auf den Bauteilen der Bühne.
   Position je Bild über --ex/--ey (px, aus der Projektion); Tab-Reihenfolge
   bleibt die des Markups. */
.e-explorer.e-raum svg { visibility: hidden; height: 0; }
.e-explorer.e-raum .e-explorer__punkt {
  position: fixed; left: 0; top: 0; z-index: 30;
  transform: translate3d(var(--ex, 0px), var(--ey, 0px), 0) translate(-50%, -50%);
  transition: background-color .25s, border-color .25s;   /* keine Transform-Verzögerung je Bild */
}
.e-explorer.e-raum .e-explorer__punkt:hover, .e-explorer.e-raum .e-explorer__punkt:focus-visible {
  transform: translate3d(var(--ex, 0px), var(--ey, 0px), 0) translate(-50%, -50%) scale(1.12);
}
/* Leitlinie: kurz, schräg nach rechts oben zur Tafel – waagerecht läge sie bei den Punkten 1 und 12
   auf der roten RSE-Linie */
.e-explorer.e-raum .e-explorer__punkt[aria-pressed="true"]::after {
  content: ""; position: absolute; left: calc(50% + 13px); top: calc(50% - 13px);
  width: clamp(20px, 2vw, 32px); height: 1px; pointer-events: none;
  transform: rotate(-45deg); transform-origin: 0 50%;
  background: linear-gradient(90deg, rgba(255, 255, 255, .9), rgba(255, 255, 255, 0));
  box-shadow: 0 1px 0 rgba(0, 0, 0, .6);
}

/* --- Ersatzwege: Poster je Kapitel -----------------------------------------
   Nur mit [data-ersatz] (kein WebGL2, Datensparen, reduzierte Bewegung,
   Kontextverlust, Fehler). CSS lädt nur das Poster des aktuellen Kapitels. */
.e-buehne[data-ersatz] { background: #000 center / cover no-repeat; }
.e-buehne[data-ersatz][data-kapitel="rueckstau"] { background-image: url("/2035/poster/rueckstau-desktop.webp"); }
.e-buehne[data-ersatz][data-kapitel="rueckstauebene"] { background-image: url("/2035/poster/rueckstauebene-desktop.webp"); }
.e-buehne[data-ersatz][data-kapitel="gebaeude"] { background-image: url("/2035/poster/gebaeude-desktop.webp"); }
.e-buehne[data-ersatz][data-kapitel="gefahr"] { background-image: url("/2035/poster/gefahr-desktop.webp"); }
.e-buehne[data-ersatz][data-kapitel="loesungen"] { background-image: url("/2035/poster/loesungen-desktop.webp"); }
.e-buehne[data-ersatz][data-kapitel="wartung"] { background-image: url("/2035/poster/wartung-desktop.webp"); }
.e-buehne[data-ersatz][data-kapitel="mbk"] { background-image: url("/2035/poster/mbk-desktop.webp"); }
@media (max-width: 1179px) {
  .e-buehne[data-ersatz] { background-position: center top; }
  .e-buehne[data-ersatz][data-kapitel="rueckstau"] { background-image: url("/2035/poster/rueckstau-mobil.webp"); }
  .e-buehne[data-ersatz][data-kapitel="rueckstauebene"] { background-image: url("/2035/poster/rueckstauebene-mobil.webp"); }
  .e-buehne[data-ersatz][data-kapitel="gebaeude"] { background-image: url("/2035/poster/gebaeude-mobil.webp"); }
  .e-buehne[data-ersatz][data-kapitel="gefahr"] { background-image: url("/2035/poster/gefahr-mobil.webp"); }
  .e-buehne[data-ersatz][data-kapitel="loesungen"] { background-image: url("/2035/poster/loesungen-mobil.webp"); }
  .e-buehne[data-ersatz][data-kapitel="wartung"] { background-image: url("/2035/poster/wartung-mobil.webp"); }
  .e-buehne[data-ersatz][data-kapitel="mbk"] { background-image: url("/2035/poster/mbk-mobil.webp"); }
}
@media (prefers-reduced-motion: reduce) {
  .e-buehne, .e-marker { transition: none !important; }
}

/* Die Statuszeile ist ein Teil der Buehne, nicht des Textes. Rechts unten lag
   sie auf Karten und Fliesstext der rechten Spalte (Kapitel Loesungen: auf
   "Zustand pruefen"). Auf Desktop steht sie deshalb links unten in der
   Buehnenzone, wo kein Text liegt. */
@media (min-width: 900px) {
  .e-status { right: auto; left: clamp(.9rem, 2vw, 2rem); }
}
/* Navigator ueber hellem Schnittmodell: ohne dunklen Saum war die graue
   Beschriftung auf weissen Waenden kaum lesbar. */
.e-nav-system a { text-shadow: 0 0 6px #000, 0 0 2px #000; }

/* ===========================================================================
   Prototyp gefin — Kapitel 04 beruhigt, Schlussszene
   =========================================================================== */

/* --- 04 Gefahr: der Text steht, die Leitung erzählt ---------------------- */
.e-gefahr__kopf { position: relative; z-index: 0; }
.e-gefahr__kopf > :last-child { margin-bottom: 0; }
@media (min-width: 1180px) {
  /* Kernstrecke wie bisher (1,35–1,47 Bildhöhen bis #oberflaechenwasser): Anstieg, Umkehr
     und Austritt behalten ihren Scrollweg; Überschrift und Lead bleiben dabei stehen. */
  #gefahr .e-gefahr__kern { min-height: 118svh; }
  #gefahr .e-gefahr__kopf { position: sticky; top: max(7rem, 16svh); }
  /* Lesegrund ohne Kante: rote Linie und Pegellinie laufen sonst durch den Lead (wie mobil). */
  #gefahr .e-gefahr__kopf::before { content: ""; position: absolute; inset: -3rem -4rem -3rem -7rem; z-index: -1; pointer-events: none;
    background: linear-gradient(90deg, rgba(4, 4, 4, 0), rgba(4, 4, 4, .94) 6rem);
    -webkit-mask-image: linear-gradient(180deg, transparent, #000 3rem, #000 calc(100% - 3rem), transparent);
    mask-image: linear-gradient(180deg, transparent, #000 3rem, #000 calc(100% - 3rem), transparent); }
}
@media (max-width: 1179px) {
  #gefahr .e-gefahr__kern { min-height: 108svh; }
}

/* --- Abgrenzung Rückstau / Oberflächenwasser: Überschrift + drei Zeilen ---- */
.e-abgrenzung { min-height: 62svh; }
.e-abgrenzung__titel { margin-bottom: 1.6rem; }
.e-abgrenzung__liste { list-style: none; margin: 0 0 0 auto; padding: 0; max-width: 46ch; display: grid; gap: .55rem; }
.e-abgrenzung__weg { font-size: clamp(1rem, 1.3vw, 1.18rem); line-height: 1.5; color: var(--text-leise); padding-left: 2.6rem; position: relative; }
.e-abgrenzung__art { color: #fff; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; font-size: .86em; }
/* Linienmuster = Legende der Bühne: weiß durchgezogen (Leitung), grau gestrichelt (Gelände) */
.e-abgrenzung__muster { position: absolute; left: 0; top: .78em; width: 1.9rem; height: 0; border-top: 2px solid #fff; }
.e-abgrenzung__weg--ofw .e-abgrenzung__muster { border-top: 2px dashed #7f7f7f; }
.e-abgrenzung__schluss { margin: 1.3rem 0 0 auto; max-width: 46ch; font-size: clamp(1.02rem, 1.4vw, 1.22rem); line-height: 1.6; color: var(--text-2035); }
@media (max-width: 760px) {
  .e-abgrenzung__liste, .e-abgrenzung__schluss { background: rgba(10, 10, 10, .86); padding: .6rem .75rem; margin-inline: -.75rem; }
  /* Überschrift mit demselben Lesegrund, direkt an der Liste: Die weiße Wegelinie läuft mobil sonst hinter den Buchstaben durch */
  .e-abgrenzung__titel { background: rgba(10, 10, 10, .86); padding: .6rem .75rem .9rem; margin: 0 -.75rem; }
  .e-abgrenzung { min-height: 52svh; }
}

/* --- Schlussszene (#mbk) ---------------------------------------------------- */
#mbk.e-finale { display: block; min-height: 0; padding: 0; }
.e-finale__strecke { position: relative; min-height: 150svh; padding: var(--rhythmus) 0; }
.e-finale__strecke > .e-kapitel__inhalt { position: sticky; top: max(7rem, calc(50svh - 14rem)); }
@media (min-width: 1180px) {
  #mbk .e-finale__strecke > .e-kapitel__inhalt { width: auto; max-width: none; margin-left: calc(56vw - 230px); margin-right: max(2rem, 6vw); }
}
@media (max-width: 1179px) {
  .e-finale__strecke { min-height: 0; padding: 44svh 0 26svh; }
  .e-finale__strecke > .e-kapitel__inhalt { position: relative; top: auto; }
}
.e-marke__satz--finale { font-size: clamp(2.05rem, 3.75vw, 4.6rem); line-height: .98; letter-spacing: -.005em; text-transform: uppercase; margin: 0 0 1.7rem; }
.e-marke__satz--finale span { color: var(--text-leise); }
/* Zu Beginn der Fahrt steht die Zeile über der hellen Nahansicht: Schatten statt Fläche, damit das
   Gesamtbild am Ende nicht abgedunkelt wird */
.e-marke__satz--finale, .e-marke__domain, .e-marke__dreizeiler { text-shadow: 0 2px 28px rgba(0, 0, 0, .95), 0 0 3px rgba(0, 0, 0, .8); }
.e-marke__satz--finale span:last-child { color: #fff; }
.e-marke__domain { margin: 0 0 .45rem; font-size: clamp(1rem, 1.25vw, 1.15rem); font-weight: 700; letter-spacing: .03em; color: var(--text-2035); }
.e-finale .e-marke__dreizeiler { margin: 0; }
.e-marke__aktion { margin: 2.4rem 0 0; }
.e-btn--finale { min-height: 66px; padding: 1.15rem 2.4rem; font-size: clamp(1rem, 1.15vw, 1.12rem); text-transform: uppercase; letter-spacing: .08em; }
.e-marke__neben { margin: 1.2rem 0 0; display: flex; justify-content: flex-end; align-items: center; gap: .7rem; font-size: .7rem; font-weight: 700; letter-spacing: var(--spur); text-transform: uppercase; color: var(--text-leise); }
.e-marke__neben a { color: var(--text-2035); text-decoration: none; padding: .55rem 0; border-bottom: 1px solid transparent; transition: border-color .25s, color .25s; }
.e-marke__neben a:hover, .e-marke__neben a:focus-visible { color: #fff; border-bottom-color: var(--rot); }
@media (max-width: 760px) {
  .e-btn--finale { width: 100%; }
  .e-marke__satz--finale { font-size: clamp(1.9rem, 8.6vw, 2.6rem); }
}

/* --- Betriebsblock unter der Schlussszene ---------------------------------- */
.e-betrieb { position: relative; z-index: 2; background: linear-gradient(180deg, transparent, var(--t1) 9rem, var(--t1) calc(100% - 6rem), transparent); padding: clamp(5rem, 9vw, 8rem) 0 var(--rhythmus); }
.e-betrieb__inhalt { width: min(100% - 2.5rem, 1240px); margin-inline: auto; }
.e-betrieb__logo { display: block; width: 168px; height: auto; margin: 0 0 1.4rem; }
.e-betrieb__text { margin: 0 0 .9rem; max-width: 62ch; color: var(--text-leise); line-height: 1.6; }
.e-betrieb__text a { color: #fff; text-decoration-color: var(--rot); text-underline-offset: 3px; }
.e-betrieb__anker { list-style: none; padding: 0; margin: 2rem 0 2.2rem; display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); border-top: 1px solid var(--glas-kante); }
.e-betrieb__anker li { padding: 1.1rem 1.4rem 1.2rem 0; border-bottom: 1px solid var(--glas-kante); }
.e-betrieb__anker .e-label { margin: 0 0 .45rem; }