/* ===========================================================================
   MBK 2035 — Fachseiten (Unterseiten): Fachwissen, technische Visualisierung,
   Conversion. Dieselbe Welt wie die Startseite (body.e-welt, huelle2035.css),
   aber ruhig: keine Bühne, kein 3D, eine technische Szene je Seite.
   ---------------------------------------------------------------------------
   Farben: nur Grautöne (R = G = B) und das Marken-Rot #f1080d / rgba(241, 8, 13, a)
   (Farbregel 2035, test/marke2035.test.mjs). Alle Regeln greifen nur unter
   .seite--fach, die übrigen Seiten bleiben unberührt.
   =========================================================================== */

.seite--fach {
  --f-text: #d4d4d4;
  --f-text-leise: #a0a0a0;
  --f-linie: rgba(255, 255, 255, .12);
  --f-linie-stark: rgba(255, 255, 255, .22);
  --f-kopf: 64px;
  --f-lese: 66ch;
  --f-breite: 1240px;
}
.seite--fach main { background: var(--t0); color: var(--f-text); overflow-wrap: break-word; }   /* bricht nur Wörter, die allein nicht in die Zeile passen (200 % Textzoom, 320 px) */
.seite--fach [id] { scroll-margin-top: calc(var(--f-kopf) + 1.5rem); }
.seite--fach :focus-visible { outline: 2px solid var(--rot-glut); outline-offset: 3px; }

.f-wrap { width: min(100% - 2.5rem, var(--f-breite)); margin-inline: auto; position: relative; }

/* --- Typografie ----------------------------------------------------------- */
.f-eyebrow {
  display: flex; align-items: center; gap: .7rem; margin: 0 0 1.1rem;
  font-size: .74rem; font-weight: 700; letter-spacing: var(--spur); text-transform: uppercase; color: var(--rot-glut);
  overflow-wrap: anywhere;   /* 200 % Textzoom bei 320 px: „FACHBEGRIFF“ ragte über den Hero (overflow: hidden) */
}
.f-eyebrow::before { content: ""; width: 1.8rem; height: 1px; background: rgba(241, 8, 13, .7); flex: none; }
.f-titel {
  font-size: clamp(2.35rem, 5.4vw, 4.4rem); line-height: 1.02; letter-spacing: -.035em;
  font-weight: 700; color: #fff; margin: 0 0 1.25rem; text-wrap: balance; max-width: 16ch;
  overflow-wrap: break-word; hyphens: auto;   /* 200 % Textzoom auf dem Telefon: lange Einzelwörter (Rückstauklappe) */
}
/* Lange Titel (Frage oder Doppelpunkt): eine Stufe kleiner, damit die H1 nicht über drei Zeilen läuft */
.f-titel--lang { font-size: clamp(2.1rem, 4.1vw, 3.3rem); max-width: 22ch; }
.f-lead { font-size: clamp(1.06rem, 1.45vw, 1.24rem); line-height: 1.6; color: #b9b9b9; max-width: 52ch; margin: 0 0 2rem; overflow-wrap: break-word; }
.f-label {
  font-size: .7rem; font-weight: 700; letter-spacing: var(--spur); text-transform: uppercase;
  color: var(--scan); font-variant-numeric: tabular-nums; margin: 0 0 .9rem;
}

/* --- Pfad (Breadcrumb) ---------------------------------------------------- */
.f-pfad { display: flex; flex-wrap: wrap; align-items: center; gap: .45rem; margin: 0 0 2.2rem; font-size: .78rem; letter-spacing: .06em; color: var(--f-text-leise); }
.f-pfad a { color: var(--f-text-leise); text-decoration: none; border-bottom: 1px solid var(--f-linie-stark); }
.f-pfad a:hover, .f-pfad a:focus-visible { color: #fff; border-bottom-color: var(--rot-glut); }
.f-pfad__trenner { color: #6b6b6b; }
.f-pfad [aria-current] { color: var(--text-2035); }

/* --- 1. Hero -------------------------------------------------------------- */
.f-hero {
  position: relative; overflow: hidden; padding: clamp(2.5rem, 7vw, 5.5rem) 0 clamp(2.5rem, 6vw, 4.5rem);
  border-bottom: 1px solid var(--f-linie);
  background-color: var(--t0);
  background-image:
    linear-gradient(rgba(255, 255, 255, .035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .035) 1px, transparent 1px);
  background-size: 64px 64px; background-position: -1px -1px;
}
.f-hero::after { /* Abdunklung zum Text hin: das Raster bleibt Hintergrund, nie Konkurrenz */
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(90deg, rgba(7, 7, 7, .92) 0%, rgba(7, 7, 7, .55) 55%, rgba(7, 7, 7, .2) 100%);
}
.f-hero__raster { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(2rem, 4vw, 3.5rem); align-items: center; }
@media (min-width: 980px) { .f-hero__raster { grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr); } }
.f-hero__aktionen { display: flex; flex-wrap: wrap; gap: .8rem 1.2rem; align-items: center; margin: 0; }
.f-hero__aktionen .btn { border-radius: 2px; }
/* Buttons im Inhalt: bei 200 % Textzoom auf 320 px darf „Rückstau-Check starten“ umbrechen statt über den Rand zu ragen */
.seite--fach main .btn { max-width: 100%; overflow-wrap: anywhere; text-align: center; }
.f-hero__zweit { color: var(--text-2035); font-weight: 700; font-size: .95rem; text-decoration: none; border-bottom: 1px solid var(--rot-glut); padding-bottom: 2px; }
.f-hero__zweit:hover, .f-hero__zweit:focus-visible { color: #fff; }

/* Kennzeichnung: kleine technische Zeichnung neben dem Titel - statisch, ohne Bewegung */
.f-kennung { margin: 0; border: 1px solid var(--f-linie-stark); background: rgba(10, 10, 10, .82); }
.f-kennung svg { display: block; width: 100%; height: auto; }
.f-kennung text { font-family: var(--font); paint-order: stroke; stroke: #0a0a0a; stroke-width: 3px; stroke-linejoin: round; }
@media (max-width: 640px) { .f-kennung text { font-size: 17px; letter-spacing: .5px; } }
.f-kennung figcaption {
  display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; padding: .6rem .9rem;
  border-top: 1px solid var(--f-linie); font-size: .66rem; font-weight: 700; letter-spacing: var(--spur);
  text-transform: uppercase; color: var(--f-text-leise); overflow-wrap: anywhere;
}

/* --- 2. Kurz erklärt ------------------------------------------------------ */
/* Grids ohne Spaltenangabe unterhalb des Umbruchpunkts bekommen minmax(0, 1fr): sonst wächst die implizite
   auto-Spalte bei 200 % Textzoom auf die Mindestbreite des Inhalts und schiebt die Seite über den Rand
   (Befund 05.10.2026: 479–576 px Dokumentbreite bei 320/390 px Gerät). Bei 100 % ändert das nichts. */
.f-kurz { padding: clamp(2.5rem, 6vw, 4.5rem) 0; border-bottom: 1px solid var(--f-linie); }
.f-kurz__box { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.2rem 3rem; max-width: 980px; }
@media (min-width: 900px) { .f-kurz__box { grid-template-columns: 11rem minmax(0, 1fr); } }
.f-kurz__box h2 { font-size: .74rem; font-weight: 700; letter-spacing: var(--spur); text-transform: uppercase; color: var(--rot-glut); margin: .45rem 0 0; }
.f-kurz__box p { margin: 0; font-size: clamp(1.18rem, 2vw, 1.5rem); line-height: 1.5; color: #f0f0f0; letter-spacing: -.01em; text-wrap: pretty; overflow-wrap: break-word; }

/* --- 3. Technischer Erklärmoment ----------------------------------------- */
.f-technik { padding: clamp(3rem, 7vw, 5.5rem) 0; background: var(--t1); border-bottom: 1px solid var(--f-linie); }
.f-technik__kopf { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1rem 3rem; margin-bottom: 1.5rem; }
@media (min-width: 900px) { .f-technik__kopf { grid-template-columns: minmax(0, 1fr) auto; align-items: end; } }
/* Große Schrift (Textzoom): die auto-Spalte des Schalters nahm bei 980–1100 px und 200 % fast alles, die Überschrift stand in
   Ein-Buchstaben-Spalten (Befund Gegenprüfung 05.10.2026). Dann untereinander. Container = Kopf selbst, NICHT der Abschnitt:
   Container-Abfragen erzeugen Layout-Containment, und die fixierten Radio-Knöpfe (.f-wahl) dürfen keinen neuen Bezugsrahmen
   bekommen. 50rem: bei 100 % ist der Kopf ab 900 px mindestens 860 px (53,75rem) breit – dort greift es nie. */
.f-technik__kopf { container: f-kopf / inline-size; }
@container f-kopf (max-width: 50rem) { .f-technik__kopf > * { grid-column: 1 / -1; } }
.f-technik__kopf h2 { font-size: clamp(1.6rem, 3.2vw, 2.4rem); color: #fff; margin: 0; letter-spacing: -.02em; max-width: 34ch; }

/* Zustandsschalter: echte Radio-Knöpfe - funktioniert ohne JavaScript, per Tastatur
   (Pfeiltasten) und mit Screenreader. Die Knöpfe stehen VOR dem Bild (Geschwister-Selektor).
   Fixiert im Sichtfeld: Ein Klick auf ein Label fokussiert den Knopf - stünde er am Abschnittsanfang,
   spränge die Seite dorthin (Befund 05.10.2026: 550-630 px). Bei Tastaturbedienung holt site.js das
   Label in den Blick. */
.f-wahl { position: fixed; top: 50%; left: 0; margin: 0; opacity: 0; pointer-events: none; width: 1px; height: 1px; }
.f-zustand { display: inline-flex; flex-wrap: wrap; border: 1px solid var(--f-linie-stark); background: rgba(255, 255, 255, .02); }
.f-zustand label {
  display: inline-flex; align-items: center; gap: .55rem; min-height: 46px; padding: .55rem 1.1rem; cursor: pointer;
  font-size: .72rem; font-weight: 700; letter-spacing: var(--spur); text-transform: uppercase; color: var(--f-text-leise);
  border-right: 1px solid var(--f-linie); transition: color .25s, background-color .25s;
}
.f-zustand label:last-child { border-right: 0; }
.f-zustand label, .f-stufen label { scroll-margin: calc(var(--f-kopf) + 1rem) 0 7rem; }   /* Tastatur: nicht unter Kopf oder Sticky-Leiste */
.f-zustand label::before { content: ""; width: 9px; height: 9px; border: 1px solid currentColor; border-radius: 50%; flex: none; }
.f-zustand label:hover { color: #fff; }
@media (max-width: 640px) {
  .f-zustand { display: grid; grid-auto-columns: minmax(0, 1fr); grid-auto-flow: column; width: 100%; container: zustand / inline-size; }
  .f-zustand label { justify-content: center; text-align: center; }
}
/* Vergrößerte Schrift auf dem Telefon: Zustände untereinander, lange Wörter dürfen umbrechen. rem folgt der Grundschrift
   (body steht fest auf 17 px, em würde nicht mitwachsen). 16rem = 256 px bei 100 %: greift erst unter 296 px Fensterbreite,
   ab 320 px bleibt das abgenommene Bild unverändert (Leiste dort 280 px = 17,5rem). */
@container zustand (max-width: 16rem) {
  .f-zustand label { grid-column: 1; min-width: 0; overflow-wrap: anywhere; border-right: 0; border-bottom: 1px solid var(--f-linie); }
  .f-zustand label:last-child { border-bottom: 0; }
}

.f-schema { margin: 0; position: relative; border: 1px solid var(--f-linie-stark); background: #0a0a0a; container-type: inline-size; }
.f-schema svg { display: block; width: 100%; height: auto; }
/* Beschriftung im Schnitt: Versalien, mit dunklem Lichthof, damit sie auf Linien lesbar bleibt.
   Die Schriftgröße folgt der tatsächlichen Bildbreite (Container-Query), nicht dem Fenster: dieselbe Zeichnung steht
   mal voll breit, mal im Zweispalter. Schnitte mit 800er-Zeichenfläche tragen .f-schema--800, die übrigen sind 600 breit.
   Rückfall ohne Container-Queries: unter 640 px Fensterbreite groß und ohne Detailetiketten. */
.f-schema text {
  font-family: var(--font); font-weight: 700; font-size: 12px; letter-spacing: 1.6px;
  paint-order: stroke; stroke: #0a0a0a; stroke-width: 3px; stroke-linejoin: round;
}
/* Nummern an Ablaufstellen: Namen stehen in der Legende .f-nummern unter dem Bild */
.f-schema .t-nr { font-size: 15px; letter-spacing: 0; }
/* Ebenen-Beschriftung: einzeilig (.t-breit), im schmalen Bild zweizeilig rechtsbündig (.t-schmal) – frei von Leitungen */
.f-schema .t-schmal { display: none; }
@media (max-width: 640px) {
  .f-schema text { font-size: 21px; letter-spacing: .6px; stroke-width: 6px; }
  .f-schema .t-detail { display: none; }
  .f-schema text.t-nr { font-size: 26px; }
  .f-schema .t-schmal { display: inline; }
  .f-schema .t-breit { display: none; }
}
@container (min-width: 761px) {
  .f-schema--gross text { font-size: 13px; }
  .f-schema--gross text.t-nr { font-size: 16px; }
}
@container (min-width: 601px) and (max-width: 760px) {
  .f-schema--800 text { font-size: 15px; letter-spacing: 1px; stroke-width: 4px; }
  .f-schema--800 .t-detail { display: none; }
  .f-schema--800 text.t-nr { font-size: 20px; }
}
@container (max-width: 600px) {
  .f-schema--800 text { font-size: 21px; letter-spacing: .6px; stroke-width: 6px; }
  .f-schema--800 .t-detail { display: none; }
  .f-schema--800 text.t-nr { font-size: 26px; }
  .f-schema--800 .t-schmal { display: inline; }
  .f-schema--800 .t-breit { display: none; }
}
@container (min-width: 421px) and (max-width: 600px) {
  .f-schema:not(.f-schema--800) text { font-size: 15px; letter-spacing: 1px; stroke-width: 4px; }
  .f-schema:not(.f-schema--800) .t-detail { display: none; }
}
@container (max-width: 420px) {
  .f-schema:not(.f-schema--800) text { font-size: 21px; letter-spacing: .6px; stroke-width: 6px; }
  .f-schema:not(.f-schema--800) .t-detail { display: none; }
}
/* Zwei Zustände nebeneinander (z. B. Hybrid): gleich gewichtet, unter 900 px untereinander */
.f-paar { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.25rem; }
@media (min-width: 900px) { .f-paar { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.f-schema__kopf {
  display: flex; align-items: baseline; gap: .7rem; margin: 0; padding: .75rem 1rem; border-bottom: 1px solid var(--f-linie);
  font-size: .78rem; font-weight: 700; letter-spacing: var(--spur); text-transform: uppercase; color: #fff; overflow-wrap: anywhere;
}
.f-schema__kopf span { color: var(--rot-glut); font-variant-numeric: tabular-nums; }
.f-paar__teil { min-width: 0; }
.f-paar__text { margin: 1rem 0 0; color: var(--f-text); line-height: 1.65; padding-left: 1rem; border-left: 2px solid var(--f-linie-stark); }
.f-paar__text strong { color: #fff; }
.f-schema__fuss {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: .4rem 1.5rem; padding: .7rem 1rem;
  border-top: 1px solid var(--f-linie); font-size: .66rem; font-weight: 700; letter-spacing: var(--spur);
  text-transform: uppercase; color: var(--f-text-leise); overflow-wrap: anywhere;
}
/* Jede Angabe ist ein eigenes Flex-Element: umgebrochen wird zuerst zwischen den Angaben. Kein nowrap – bei 200 %
   Textzoom muss eine lange Angabe in sich umbrechen dürfen (sonst Querüberlauf, Befund 05.10.2026). */
.f-legende { display: flex; flex-wrap: wrap; gap: .5rem 1.4rem; list-style: none; margin: 1rem 0 0; padding: 0; font-size: .8rem; color: var(--f-text-leise); }
.f-legende li { display: inline-flex; align-items: center; gap: .55rem; }
.f-legende i { display: inline-block; width: 1.6rem; height: 0; border-top: 2px solid #8c8c8c; }
.f-legende i.f-legende--rse { border-top: 2px dashed var(--rot-glut); }
.f-legende i.f-legende--wasser { height: .55rem; border: 0; background: linear-gradient(rgba(255, 255, 255, .3), rgba(127, 127, 127, .45)); }
.f-legende i.f-legende--grau { border-top: 2px dashed #7f7f7f; }
.f-legende i.f-legende--druck { border-top: 3px solid #b0b0b0; }

.f-nummern li { min-width: 0; overflow-wrap: anywhere; hyphens: auto; display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: start; }   /* hängender Einzug; lange Wörter im schmalen Seitenrand (Textzoom) */
.f-nummern { list-style: none; margin: 1rem 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: .4rem 1.4rem; font-size: .84rem; color: var(--f-text); }
.f-nummern b { display: inline-grid; place-items: center; min-width: 1.45rem; height: 1.45rem; margin-right: .45rem; border: 1px solid var(--f-linie-stark); font-size: .72rem; color: #fff; }

/* Zustandstexte unter dem Bild: genau einer sichtbar. Ohne CSS-Unterstützung stehen alle da. */
.f-zustandstexte { margin-top: 1.4rem; max-width: var(--f-lese); }
.f-zustandstext { display: none; margin: 0; padding-left: 1rem; border-left: 2px solid var(--f-linie-stark); color: var(--f-text); line-height: 1.65; }
.f-zustandstext strong { color: #fff; }

/* Ebenen im Bild: .z--a ist der Grundzustand, .z--b der zweite usw. Der Schalter blendet um. */
.f-schema .z { transition: opacity .7s ease; }
.f-schema .z--b, .f-schema .z--c, .f-schema .z--d, .f-schema .z--e { opacity: 0; }
.f-schema .z--nur-a { opacity: 1; }

/* Gewählter Zustand. Die Radio-Knöpfe stehen vor allen übrigen Bausteinen der Szene; "~ *" erreicht
   Schalter, Stufenliste, Bild und Texte, auch wenn sie in eigenen Blöcken stecken. */
.f-wahl--a:checked ~ * label.f-zustand--a, .f-wahl--b:checked ~ * label.f-zustand--b, .f-wahl--c:checked ~ * label.f-zustand--c,
.f-wahl--d:checked ~ * label.f-zustand--d, .f-wahl--e:checked ~ * label.f-zustand--e { color: #fff; background: rgba(255, 255, 255, .06); }
.f-wahl--a:checked ~ * label.f-zustand--a::before, .f-wahl--b:checked ~ * label.f-zustand--b::before, .f-wahl--c:checked ~ * label.f-zustand--c::before,
.f-wahl--d:checked ~ * label.f-zustand--d::before, .f-wahl--e:checked ~ * label.f-zustand--e::before { background: var(--rot-glut); border-color: var(--rot-glut); }
.f-wahl--a:focus-visible ~ * label.f-zustand--a, .f-wahl--b:focus-visible ~ * label.f-zustand--b, .f-wahl--c:focus-visible ~ * label.f-zustand--c,
.f-wahl--d:focus-visible ~ * label.f-zustand--d, .f-wahl--e:focus-visible ~ * label.f-zustand--e { outline: 2px solid var(--rot-glut); outline-offset: -2px; }
.f-wahl--a:checked ~ * .f-zustandstext--a, .f-wahl--b:checked ~ * .f-zustandstext--b, .f-wahl--c:checked ~ * .f-zustandstext--c,
.f-wahl--d:checked ~ * .f-zustandstext--d, .f-wahl--e:checked ~ * .f-zustandstext--e { display: block; }
/* Bildebenen: jede Stufe blendet ihre Ebene ein (.z--b ...); .z--nur-a verschwindet, sobald nicht A gewählt ist.
   Eine Ebene, die in mehreren Stufen gilt, trägt mehrere Klassen (z. B. z--c z--d). */
.f-wahl--b:checked ~ * .z--b, .f-wahl--c:checked ~ * .z--c, .f-wahl--d:checked ~ * .z--d, .f-wahl--e:checked ~ * .z--e { opacity: 1; }
.f-wahl--b:checked ~ * .z--nur-a, .f-wahl--c:checked ~ * .z--nur-a, .f-wahl--d:checked ~ * .z--nur-a, .f-wahl--e:checked ~ * .z--nur-a { opacity: 0; }

/* Ohne Zustandsschalter (eine Ansicht) bleibt alles stehen */
.f-schema--statisch .z { opacity: 1 !important; }

/* Stufenliste (z. B. „Wie entsteht Rückstau“): Labels als nummerierte Schritte */
.f-stufen { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: .1rem; counter-reset: stufe; }
.f-stufen label {
  display: grid; grid-template-columns: 2.6rem minmax(0, 1fr); gap: .8rem; align-items: baseline; cursor: pointer;
  padding: .85rem .9rem; border-left: 2px solid var(--f-linie); color: var(--f-text-leise); transition: color .25s, border-color .25s, background-color .25s;
}
.f-stufen label:hover { color: #fff; }
.f-stufen__nr { font-size: .74rem; font-weight: 700; letter-spacing: var(--spur); font-variant-numeric: tabular-nums; }
.f-stufen__titel { display: block; color: inherit; font-weight: 700; }
.f-stufen__text { display: block; font-size: .92rem; line-height: 1.55; margin-top: .25rem; }
.f-stufen label.f-zustand--a, .f-stufen label.f-zustand--b, .f-stufen label.f-zustand--c, .f-stufen label.f-zustand--d, .f-stufen label.f-zustand--e { background: none; }
.f-wahl--a:checked ~ * .f-stufen label.f-zustand--a, .f-wahl--b:checked ~ * .f-stufen label.f-zustand--b, .f-wahl--c:checked ~ * .f-stufen label.f-zustand--c,
.f-wahl--d:checked ~ * .f-stufen label.f-zustand--d, .f-wahl--e:checked ~ * .f-stufen label.f-zustand--e { color: #fff; border-left-color: var(--rot-glut); background: rgba(255, 255, 255, .04); }
.f-technik__raster { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2rem; }
@media (min-width: 980px) { .f-technik__raster { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); align-items: start; } }
/* Referenzseite Rückstauebene: Schnitt auf dem Desktop stärker gewichtet (Bildbreite ≈ +12 %), Beschriftung eine Stufe größer */
@media (min-width: 1180px) { .f-technik__raster--gross { grid-template-columns: minmax(0, 3fr) minmax(0, 1fr); } }   /* darunter 2fr/1fr: sonst wird die Seitenspalte zu schmal */
.f-technik__seite { min-width: 0; }
.f-technik__seite .f-zustandstexte { margin-top: 1.2rem; }
/* Unter 980 px: die Stufen als Nummernleiste direkt unter dem Bild, der Stufentext darunter. Der Titel bleibt
   für Screenreader im Label; sichtbar steht er im Stufentext. */
@media (max-width: 979px) {
  .f-stufen { grid-template-columns: none; grid-auto-columns: minmax(0, 1fr); grid-auto-flow: column; gap: 0; border: 1px solid var(--f-linie-stark); }
  .f-stufen label { grid-template-columns: minmax(0, 1fr); justify-items: center; min-height: 48px; padding: .7rem .2rem; border-left: 0; border-right: 1px solid var(--f-linie); }
  .f-stufen li:last-child label { border-right: 0; }
  .f-stufen__nr { font-size: .9rem; }
  .f-stufen__titel { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
  .f-wahl--a:checked ~ * .f-stufen label.f-zustand--a, .f-wahl--b:checked ~ * .f-stufen label.f-zustand--b, .f-wahl--c:checked ~ * .f-stufen label.f-zustand--c,
  .f-wahl--d:checked ~ * .f-stufen label.f-zustand--d, .f-wahl--e:checked ~ * .f-stufen label.f-zustand--e { box-shadow: inset 0 -2px 0 var(--rot-glut); }
}

/* --- 4./5. Inhalt mit Navigation ----------------------------------------- */
.f-inhalt { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2.5rem; padding: clamp(3rem, 7vw, 5.5rem) 0; }
@media (min-width: 1180px) { .f-inhalt { grid-template-columns: 13.5rem minmax(0, 1fr); gap: 4.5rem; } }
.f-toc { align-self: start; }
@media (min-width: 1180px) { .f-toc { position: sticky; top: calc(var(--f-kopf) + 2rem); } }
.f-toc__titel { font-size: .66rem; font-weight: 700; letter-spacing: var(--spur); text-transform: uppercase; color: var(--f-text-leise); margin: 0 0 .8rem; }
.f-toc ol { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: .1rem; counter-reset: toc; }
.f-toc a {
  display: grid; grid-template-columns: 2rem minmax(0, 1fr); gap: .5rem; align-items: baseline; padding: .45rem 0;
  font-size: .82rem; line-height: 1.35; color: var(--f-text-leise); text-decoration: none; counter-increment: toc;
}
.f-toc a::before { content: counter(toc, decimal-leading-zero); font-size: .68rem; font-weight: 700; letter-spacing: .08em; color: #6b6b6b; font-variant-numeric: tabular-nums; }
.f-toc a::before { color: #8c8c8c; }   /* Ziffern 6,0 : 1 auf t0 */
.f-toc a:hover, .f-toc a:focus-visible { color: #fff; }
.f-toc a[aria-current="true"] { color: #fff; }
.f-toc a[aria-current="true"]::before { color: var(--rot-glut); }
@media (max-width: 1179px) {
  .f-toc { border: 1px solid var(--f-linie); padding: 1rem 1.1rem; }
  .f-toc ol { grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr)); column-gap: 1.5rem; }
}

.f-text { min-width: 0; }
.f-teil { padding: 0 0 clamp(2.5rem, 5vw, 3.75rem); margin: 0 0 clamp(2.5rem, 5vw, 3.75rem); border-bottom: 1px solid var(--f-linie); }
.f-teil:last-child { border-bottom: 0; margin-bottom: 0; padding-bottom: 0; }
.f-teil > h2 { font-size: clamp(1.45rem, 2.6vw, 2.05rem); line-height: 1.15; letter-spacing: -.02em; color: #fff; margin: 0 0 1.1rem; max-width: 30ch; text-wrap: balance; }
.f-teil > h3, .f-teil .f-zwei h3 { font-size: 1.12rem; color: #fff; margin: 1.6rem 0 .5rem; }
.f-teil p, .f-teil li { max-width: var(--f-lese); line-height: 1.7; font-size: 1.0625rem; color: var(--f-text); overflow-wrap: break-word; hyphens: auto; }
.f-teil p { margin: 0 0 1.15rem; text-wrap: pretty; }
/* Rhythmus: der erste Absatz unter der Abschnittsüberschrift führt in den Abschnitt ein – etwas größer und heller,
   damit lange Abschnitte einen Einstieg haben (kein neuer Inhalt, nur Gewichtung) */
.f-teil > h2 + p:not(.f-quelle) { color: #e8e8e8; }
@media (min-width: 900px) { .f-teil > h2 + p:not(.f-quelle) { font-size: 1.15rem; line-height: 1.65; max-width: 61ch; } }   /* mobil nur heller: größer würde lange Einstiege massiger machen */
.f-teil strong { color: #fff; }
.f-teil a { color: #fff; text-decoration-color: var(--rot-glut); text-underline-offset: 3px; }
.f-teil a:hover, .f-teil a:focus-visible { color: var(--text-2035); text-decoration-thickness: 2px; }
.f-teil ul, .f-teil ol { margin: 0 0 1.2rem; padding-left: 1.25rem; }
.f-teil li { margin: 0 0 .55rem; }
.f-teil li::marker { color: var(--rot-glut); }

/* Zwei Spalten: links die Einordnung, rechts die Erklärung (ab 900 px) */
.f-zwei { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.5rem 3rem; }
@media (min-width: 900px) { .f-zwei { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.f-zwei > * > :first-child { margin-top: 0; }
.f-zwei > * { min-width: 0; }

/* Aufzählung als nummerierte Prüfpunkte (z. B. Ebenen, Voraussetzungen) */
.f-punkte { max-width: calc(var(--f-lese) + 4.5rem); list-style: none; padding: 0 !important; display: grid; grid-template-columns: minmax(0, 1fr); gap: 1px; background: var(--f-linie); border: 1px solid var(--f-linie); counter-reset: punkt; }
.f-punkte > li { margin: 0 !important; padding: 1.05rem 1.15rem 1.05rem 3.4rem; background: var(--t0); position: relative; max-width: none !important; counter-increment: punkt; }
.f-punkte > li::before { content: counter(punkt, decimal-leading-zero); position: absolute; left: 1.15rem; top: 1.1rem; font-size: .72rem; font-weight: 700; letter-spacing: .08em; color: var(--rot-glut); font-variant-numeric: tabular-nums; }
/* Aufzählung ohne Rangfolge (z. B. Ursachen): gleiche Kästen, keine Ziffern */
.f-punkte--ohne-nr > li { padding-left: 1.15rem; }
.f-punkte--ohne-nr > li::before { content: none; }

/* Drei Wege des Wassers (Abgrenzung): Linienmuster wie in den Schnitten - durchgezogen = über die Leitung,
   gestrichelt = über das Gelände, gepunktet = aus einem Gewässer über das Gelände */
.f-wege { max-width: calc(var(--f-lese) + 4.5rem); list-style: none; padding: 0 !important; margin: 1.4rem 0 1.2rem !important; display: grid; grid-template-columns: minmax(0, 1fr); gap: 1px; background: var(--f-linie); border: 1px solid var(--f-linie); }
.f-wege > li { margin: 0 !important; max-width: none !important; padding: 1rem 1.15rem; background: var(--t0); display: grid; grid-template-columns: 3rem minmax(0, 1fr); gap: .25rem 1.1rem; align-items: baseline; }
.f-wege__muster { grid-row: span 2; align-self: center; width: 3rem; height: 0; border-top: 2px solid #e6e6e6; }
/* große Schrift auf dem Telefon: Linienmuster über dem Text statt daneben (sonst Ein-Zeichen-Spalte bei 320 px und 200 %) */
.f-wege { container: f-wege / inline-size; }
@container f-wege (max-width: 16rem) { .f-wege > li { grid-template-columns: minmax(0, 1fr); } .f-wege__muster { grid-row: auto; } }
.f-wege__muster--gelaende { border-top: 2px dashed #8c8c8c; }
.f-wege__muster--gewaesser { border-top: 3px dotted #8c8c8c; }
.f-wege__art { font-size: .72rem; font-weight: 700; letter-spacing: var(--spur); text-transform: uppercase; color: #fff; }

/* Wichtiger Hinweis */
.f-hinweis { margin: 1.5rem 0; padding: 1.1rem 1.25rem; border: 1px solid var(--f-linie-stark); border-left: 3px solid var(--rot-glut); background: rgba(255, 255, 255, .025); max-width: calc(var(--f-lese) + 2.5rem); }
.f-hinweis--neutral { border-left-color: var(--f-linie-stark); }   /* Beispiel statt Warnung: ohne roten Balken */
.f-hinweis p { margin: 0; }
.f-hinweis p + p { margin-top: .6rem; }
.f-hinweis__titel { display: block; font-size: .7rem; font-weight: 700; letter-spacing: var(--spur); text-transform: uppercase; color: #ededed; margin: 0 0 .45rem; }   /* Rot nur im Balken: kleiner roter Text erreicht hier nur 4,3 : 1 */

/* Quellen und Belege: klein, aber lesbar (#a0a0a0 auf #070707: 7,7 : 1) */
.f-quelle { font-size: .86rem !important; line-height: 1.6 !important; color: var(--f-text-leise) !important; }
.f-quelle a { color: #d6d6d6 !important; }

/* Medienmodul: technische Referenz- und Produktabbildungen (KESSEL) in einem dunklen technischen Rahmen mit Kennung,
   Bildfläche und Unterschrift. Bilder werden nicht verändert oder abgedunkelt; eine weiße Bildfläche gibt es nur, wenn
   das Original weißen Grund hat (.f-medium--weiss, Produktfotos). Keine Radien (System 2035). */
.f-medium { margin: 1.75rem 0; max-width: 100%; min-width: 0; background: #111; border: 1px solid var(--f-linie-stark); padding: .8rem; }
.f-medium .f-medium__kennung {
  /* .f-medium davor: sonst gewinnt .f-teil p (0,1,1) und die Kennung erscheint in Lesetextgröße (Befund Gegenprüfung RC).
     mehrzeilig erlaubt: einzeilig summierte die Flexzeile alle Mindestbreiten (Textzoom 200 %: 521 px Überlauf) */
  display: flex; flex-wrap: wrap; align-items: center; gap: .3rem .6rem; margin: 0 0 .75rem; max-width: none; font-size: .68rem; line-height: 1.4; font-weight: 700; overflow-wrap: anywhere;
  letter-spacing: var(--spur); text-transform: uppercase; color: var(--f-text-leise);
}
.f-medium__kennung::before { content: ""; flex: none; width: 1.2rem; height: 1px; background: rgba(241, 8, 13, .8); }
.f-medium__kennung b { color: #fff; font-weight: 700; white-space: nowrap; }
.f-medium__bild { background: #0d0d0d; }
.f-medium--weiss .f-medium__bild { background: #fff; padding: clamp(.75rem, 2.5vw, 1.5rem); }
.f-medium__bild img { display: block; max-width: 100%; height: auto; margin: 0 auto; }
.f-medium .f-medium__text { overflow-wrap: break-word; hyphens: auto; margin: .8rem 0 0; font-size: .84rem; line-height: 1.55; color: var(--f-text-leise); }
.f-medium__text a { color: #d6d6d6; text-decoration-color: var(--rot-glut); text-underline-offset: 3px; }
.f-medium__text a:hover, .f-medium__text a:focus-visible { color: #fff; }

/* --- FAQ ------------------------------------------------------------------ */
.f-faq { padding: clamp(3rem, 7vw, 5.5rem) 0; background: var(--t1); border-top: 1px solid var(--f-linie); }
.f-faq__raster { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.5rem 4rem; }
@media (min-width: 980px) { .f-faq__raster { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); } }
.f-faq h2 { font-size: clamp(1.6rem, 3.2vw, 2.4rem); color: #fff; margin: 0; letter-spacing: -.02em; max-width: 16ch; }
.f-faq__liste h3 { font-size: 1.12rem; color: #fff; margin: 0; padding: 1.4rem 0 .55rem; border-top: 1px solid var(--f-linie); }
.f-faq__liste h3:first-child { padding-top: 0; border-top: 0; }
.f-faq__liste p { margin: 0 0 1.4rem; color: var(--f-text); line-height: 1.7; max-width: var(--f-lese); }

/* --- Abschluss / CTA ------------------------------------------------------ */
.f-cta { padding: clamp(3.5rem, 8vw, 6.5rem) 0; border-top: 1px solid var(--f-linie); background: var(--t0); }
.f-cta__box { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.5rem 4rem; align-items: end; }
@media (min-width: 980px) { .f-cta__box { grid-template-columns: minmax(0, 1.2fr) auto; } }
/* wie beim Technik-Kopf: bei großer Schrift untereinander statt Text in einer Restspalte (980 px, 200 %: 4 px breit) */
.f-cta__box { container: f-cta / inline-size; }
@container f-cta (max-width: 50rem) { .f-cta__box > * { grid-column: 1 / -1; } }
.f-cta h2 { font-size: clamp(1.9rem, 4vw, 3.2rem); line-height: 1.05; letter-spacing: -.03em; color: #fff; margin: 0 0 1rem; max-width: 20ch; }
.f-cta p { color: var(--f-text); line-height: 1.7; max-width: 58ch; margin: 0; }
.f-cta p + p { margin-top: .8rem; }
.f-cta p a { color: #fff; text-decoration-color: var(--rot-glut); text-underline-offset: 3px; }
.f-cta .btn { border-radius: 2px; }
.f-cta .f-eyebrow { color: var(--rot-glut); margin: 0 0 1.1rem; max-width: none; line-height: 1.4; }
.f-cta__aktion { display: grid; grid-template-columns: minmax(0, 1fr); gap: .8rem; justify-items: start; max-width: 24rem; }
.f-cta .f-cta__tel { color: var(--f-text-leise); font-size: .9rem; }
.f-cta__tel a { color: #fff; }
/* Primärbutton im Inhalt: Weiß auf Rot hat 4,4 : 1 – ab 18,66 px fett gilt die Großtext-Grenze 3 : 1 */
.seite--fach main .btn--gross { font-size: 1.17rem; }

/* --- Ruhige Bewegung: einmaliges Einblenden der Szene beim ersten Sichtkontakt (site.js, data-reveal).
   .f-zeichnen setzt site.js erst, wenn der Beobachter läuft – ohne Skript oder bei einem Fehler steht die Zeichnung. */
.f-zeichnen .seite--fach .f-schema[data-reveal] .z-linie { stroke-dasharray: var(--laenge, 900); stroke-dashoffset: var(--laenge, 900); }
.f-zeichnen .seite--fach .f-schema[data-reveal].ist-aktiv .z-linie { stroke-dashoffset: 0; transition: stroke-dashoffset 1.6s cubic-bezier(.22, 1, .36, 1); }

@media (prefers-reduced-motion: reduce) {
  .f-schema .z, .f-zustand label, .f-stufen label { transition: none !important; }
  .f-zeichnen .seite--fach .f-schema[data-reveal] .z-linie { stroke-dasharray: none; stroke-dashoffset: 0; }
}

/* --- Druck ------------------------------------------------------------------ */
@media print {
  .seite--fach main, .f-hero, .f-technik, .f-faq, .f-cta { background: #fff !important; color: #000 !important; }
  .f-hero::after { display: none; }
  .f-zustandstext { display: block !important; }
  .f-schema .z-linie { stroke-dasharray: none !important; stroke-dashoffset: 0 !important; }
}