/* ==========================================================================
   referenz-frenzel.css — seitenlokale Bausteine der Referenz und des Nachweises „Treppenhaus Neubau-Bürogebäude Dresden“ (Präfix fz-)
   Version: 1.1 | 2026-10-18 | Herz und Teilen oben rechts auf dem Einstiegsbild.
   Version: 1.0 | 2026-10-14 | Quelle: Marketing/projektreferenzen/vorlagen/ (bauen_frenzel.py), Leitgedanke „zwei-zonen-treppenhaus“
   Regel (Skill rauMKult-Webseiten): nur Anordnung; Farben, Radien, Schatten und Schrift aus den Website-Token (main-v2.css, rk-wow.css),
   --ph-erhaben aus referenz-module.css, Phasenfarben --ph-a…e aus referenz-takt.css. Mobile first, Hell und Dunkel, reduzierte Bewegung
   (prefers-reduced-motion, html.no-motion, [data-motion="reduced"]), Fokus sichtbar, keine farbigen Seitenränder an Karten.
   Jeder Baustein trägt oben seinen Arbeitsnamen für die spätere Zentralisierung in rk-wow.css.
   ========================================================================== */
:root {
  /* Zonen-Flächenmuster (neutral, keine Wertungsfarben): Betonfertigteil = feine Lagen, Ortbeton = Poren */
  --fz-muster-bft: repeating-linear-gradient(0deg, color-mix(in srgb, var(--text-muted) 55%, transparent) 0 1.5px, transparent 1.5px 6px);
  --fz-muster-ob: radial-gradient(circle, color-mix(in srgb, var(--text-muted) 75%, transparent) 0 1.4px, transparent 1.8px) 0 0 / 7px 7px,
                  radial-gradient(circle, color-mix(in srgb, var(--text-muted) 55%, transparent) 0 1px, transparent 1.4px) 3.5px 3.5px / 7px 7px;
  --fz-glas: color-mix(in srgb, var(--rk-wow-card) 88%, transparent);
  /* Phasen f (Nachtrag) und g (Arbeitstag nach dem Einzug), gemischt aus den Phasen-Token von referenz-takt.css */
  --ph-f: color-mix(in srgb, var(--ph-b) 50%, var(--ph-e));
  --ph-g: color-mix(in srgb, var(--ph-a) 50%, var(--ph-c));
  --fz-etagen-top: 0px;
}
[data-phase="f"] { --ph: var(--ph-f); } [data-phase="g"] { --ph: var(--ph-g); }
:where(.fz) button { font: inherit; }
.fz .rk-wow-statement__title { overflow-wrap: break-word; hyphens: auto; }
.fz-text > p { max-width: 68ch; margin: 0 0 1em; color: var(--text-secondary); line-height: 1.65; }
.fz-text > .ref-lead { color: var(--text-primary); font-size: var(--rk-wow-fs-lead); line-height: 1.5; }
.fz-knopf-fokus:focus-visible, .fz :is(button, a, [tabindex="0"]):focus-visible { outline: 3px solid var(--rk-focus-color, currentColor); outline-offset: 2px; }

/* ─── Zonen-Etikett und Zonen-Symbol (Teil von rk-wow-zonen) ─── */
.fz-zone-ico { display: inline-block; flex: none; width: 18px; height: 18px; border: 1px solid var(--rk-wow-line-strong); border-radius: 4px; background: var(--fz-muster-bft), var(--rk-wow-card); vertical-align: -3px; }
.fz-zone-ico[data-zone="ortbeton"] { background: var(--fz-muster-ob), var(--rk-wow-card); }
.fz-zone-ico[data-zone="beide"] { background: linear-gradient(90deg, transparent 50%, var(--rk-wow-card) 50%), var(--fz-muster-bft), var(--rk-wow-card); position: relative; }
.fz-zone-ico[data-zone="beide"]::after { content: ""; position: absolute; inset: 0 0 0 50%; border-radius: 0 3px 3px 0; background: var(--fz-muster-ob); }
.fz-etikett { display: inline-flex; align-items: center; gap: 8px; max-width: 100%; padding: 6px 12px 6px 8px; border: 1px solid var(--rk-wow-line-strong); border-radius: var(--rk-wow-r-pill);
  background: var(--fz-glas); color: var(--text-primary); font-size: var(--rk-wow-fs-tag); line-height: 1.3; -webkit-backdrop-filter: blur(10px) saturate(1.2); backdrop-filter: blur(10px) saturate(1.2); box-shadow: var(--rk-wow-sh-2); }
.fz-etikett--bild { position: absolute; z-index: 2; }
.fz-etikett--oben-rechts { top: 12px; right: 12px; } .fz-etikett--oben-links { top: 12px; left: 12px; }

/* ==========================================================================
   Marker auf Bild — Zentralisierung später in rk-wow.css, Arbeitsname rk-wow-marker
   Typen aus Daten: Etikett (Glasschild mit Haltelinie), Pfeil (zeichnet sich beim Einblenden), Punkt (nummerierter Knopf, öffnet Feld).
   Lage in % des Bildes; das Bild wird nie beschnitten (sonst stimmt die Lage nicht). Ohne JS: Liste unter dem Bild.
   ========================================================================== */
.fz-marker { --fz-ar: 1; position: relative; width: min(100%, calc(var(--fz-maxh, 78vh) * var(--fz-ar))); margin-inline: auto; }
.fz-marker > img, .fz-marker > .fz-marker__bild { display: block; width: 100%; height: auto; border-radius: inherit; }
.fz-marker__ebene { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; overflow: visible; pointer-events: none; }   /* SVG ist ersetztes Element: ohne Breite/Höhe bliebe es quadratisch */
.fz-marker__ebene line, .fz-marker__ebene path { fill: none; stroke: var(--rk-wow-card); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.fz-marker__ebene .fz-marker__schatten { stroke: color-mix(in srgb, var(--rk-wow-dark-bg) 55%, transparent); stroke-width: 5; }
.fz-marker__ebene .fz-pfeil { stroke: var(--rk-wow-dark-gold); stroke-width: 4; }
.fz-marker__ebene .fz-pfeil__spitze { fill: var(--rk-wow-dark-gold); stroke: none; }
.fz-marker__anker { position: absolute; left: var(--x); top: var(--y); z-index: 1; width: 14px; height: 14px; margin: -7px 0 0 -7px; border: 2px solid var(--rk-wow-card); border-radius: 50%; background: var(--rk-wow-dark-gold); box-shadow: 0 0 0 4px color-mix(in srgb, var(--rk-wow-dark-bg) 35%, transparent); pointer-events: none; }
.fz-marker__etikett { position: absolute; left: var(--lx); top: var(--ly); z-index: 2; width: max-content; max-width: min(48%, 260px); transform: translate(var(--tx, -50%), -50%); white-space: normal; pointer-events: none; }
.fz-marker__marke { position: absolute; left: var(--lx); top: var(--ly); z-index: 2; transform: translate(var(--tx, -50%), -50%); max-width: 60%; padding: 5px 12px; border-radius: var(--rk-wow-r-pill);
  background: var(--rk-wow-dark-bg); color: var(--rk-wow-dark-ink); font-size: var(--rk-wow-fs-tag); line-height: 1.3; box-shadow: var(--rk-wow-sh-2); pointer-events: none; }
.fz-marker__knopf { position: absolute; left: var(--x); top: var(--y); z-index: 3; display: grid; place-items: center; width: 40px; height: 40px; margin: -20px 0 0 -20px; padding: 0;
  border: 2px solid var(--rk-wow-dark-ink); border-radius: 50%; background: var(--rk-wow-dark-bg); color: var(--rk-wow-dark-ink); font-size: var(--rk-wow-fs-meta); font-variant-numeric: tabular-nums;
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--rk-wow-dark-bg) 30%, transparent), var(--rk-wow-sh-2); cursor: pointer; pointer-events: auto; transition: transform .25s var(--rk-wow-ease), background-color .25s var(--rk-wow-ease); }
.fz-marker__knopf::before { content: ""; position: absolute; inset: -4px; border-radius: 50%; }   /* Tippfläche 48 px */
.fz-marker__knopf[aria-expanded="true"] { background: var(--rk-wow-dark-gold); border-color: var(--rk-wow-dark-gold); color: var(--rk-wow-dark-bg); transform: scale(1.08); }
@media (hover: hover) { .fz-marker__knopf:hover { transform: scale(1.08); } }
.fz-marker__knopf:focus-visible { outline: 3px solid var(--rk-wow-dark-ink); outline-offset: 3px; }
.fz-marker__feld { position: absolute; z-index: 4; left: clamp(8px, calc(var(--x) - 130px), calc(100% - 268px)); top: calc(var(--y) + 30px); width: 260px; padding: 14px 16px; border: 1px solid color-mix(in srgb, var(--rk-gold-text) 45%, transparent);
  border-radius: var(--rk-wow-r-md); background: var(--rk-wow-card); color: var(--text-primary); box-shadow: var(--ph-erhaben-stark); pointer-events: auto; }
.fz-marker__feld[data-oben] { top: auto; bottom: calc(100% - var(--y) + 30px); }
.fz-marker__feld[hidden] { display: none; }
.fz-marker__feld :is(h4, .fz-marker__titel) { margin: 0 34px 6px 0; font-size: var(--rk-wow-fs-title); font-weight: var(--rk-fw-regular, 400); line-height: 1.2; }
.fz-marker__feld p { margin: 0; color: var(--text-secondary); font-size: var(--rk-wow-fs-meta); line-height: 1.5; }
.fz-marker__feld .fz-marker__stufe { display: inline-block; margin-bottom: 8px; font-size: var(--rk-wow-fs-tag); letter-spacing: .1em; text-transform: uppercase; color: var(--rk-gold-text); }
.fz-marker__zu { position: absolute; top: 6px; right: 6px; display: grid; place-items: center; width: 40px; height: 40px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--text-secondary); cursor: pointer; }
.fz-marker__zu svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
/* Pfeil zeichnet sich beim Einblenden (nur mit JS und Bewegung) */
html.fz-js .fz-marker[data-fz-zeichnen] .fz-pfeil { stroke-dasharray: 700; stroke-dashoffset: 700; transition: stroke-dashoffset 1.6s cubic-bezier(.3, 0, .2, 1) .2s; }   /* Bildschirm-Pixel (non-scaling-stroke) */
html.fz-js .fz-marker[data-fz-zeichnen] .fz-pfeil__spitze { opacity: 0; transition: opacity .3s var(--rk-wow-ease) 1.2s; }
html.fz-js .fz-marker[data-fz-zeichnen] .fz-marker__marke { opacity: 0; transition: opacity .4s var(--rk-wow-ease) 1.1s; }
html.fz-js .fz-marker[data-fz-zeichnen].is-in .fz-pfeil { stroke-dashoffset: 0; }
html.fz-js .fz-marker[data-fz-zeichnen].is-in :is(.fz-pfeil__spitze, .fz-marker__marke) { opacity: 1; }
/* Liste unter dem Bild (Legende; ohne JS die einzige Darstellung der Punkte) */
.fz-marker__liste { display: grid; gap: 4px 20px; margin: 16px 0 0; padding: 0; list-style: none; counter-reset: fzm; }
@media (min-width: 640px) { .fz-marker__liste { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.fz-marker__liste li { border-bottom: 1px solid var(--rk-wow-line); }
.fz-marker__liste li > button, .fz-marker__liste li > div { all: unset; box-sizing: border-box; display: grid; grid-template-columns: 32px minmax(0, 1fr); gap: 2px 10px; width: 100%; padding: 8px 4px; border-radius: var(--rk-wow-r-sm); cursor: pointer; }
.fz-marker__liste li > button:focus-visible { outline: 3px solid var(--rk-focus-color, currentColor); outline-offset: 1px; }
@media (hover: hover) { .fz-marker__liste li > button:hover { background: var(--rk-wow-tint); } }
.fz-marker__liste .fz-nr { grid-row: span 2; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--text-primary); color: var(--rk-wow-card); font-size: var(--rk-wow-fs-tag); font-variant-numeric: tabular-nums; }
.fz-marker__liste b { font-weight: var(--rk-fw-regular, 400); color: var(--text-primary); }
.fz-marker__liste span { color: var(--text-secondary); font-size: var(--rk-wow-fs-meta); line-height: 1.45; }
@media (max-width: 599px) {
  .fz-marker__feld { position: static; width: auto; margin-top: 12px; }
  .fz-marker__knopf { width: 36px; height: 36px; margin: -18px 0 0 -18px; font-size: var(--rk-wow-fs-tag); }
  .fz-marker__etikett { max-width: 46%; }
  .fz-marker__etikett .fz-etikett { padding: 5px 10px 5px 6px; gap: 6px; }
}

/* ─── Einstieg: Naht-Split mit Zonen-Etiketten und Glas-Plakette ─── */
.fz-hero { margin-top: 4px; }
.fz-hero .rk-wow-feature__title { font-size: calc(var(--rk-wow-fs-number) * .8); }
.fz-hero__lead { margin: 0; max-width: 60ch; font-size: var(--rk-wow-fs-lead); line-height: 1.5; color: var(--text-secondary); text-wrap: pretty; }
.fz-hero__stand { display: flex; gap: 10px; align-items: baseline; margin: 0; max-width: 60ch; color: var(--text-muted); font-size: var(--rk-wow-fs-meta); line-height: 1.5; }
.fz-hero__stand::before { content: ""; flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--rk-wow-accent-line); transform: translateY(-1px); }
.fz-hero__media { margin: 0; width: min(100%, 560px); justify-self: center; }
.fz-hero__rahmen { overflow: hidden; border-radius: var(--rk-wow-r-card); box-shadow: var(--rk-wow-sh-4); background: var(--rk-wow-tint); }
.fz-hero__rahmen .fz-marker { --fz-maxh: 76vh; }
/* 18.10.2026 (Neubau, FLOW §42): Herz und Teilen oben rechts auf dem Einstiegsbild, weil unten die Plakette liegt.
   Aussehen aus referenz-herz/-teilen.css; hier nur Bezugsrahmen und Lage. */
.fz-hero__rahmen { position: relative; }
.fz-hero__rahmen > .rk-teilen-halter, .fz-hero__rahmen > .rk-herz--kopf { top: 12px; bottom: auto; }
.fz-hero__badge p { margin: 0; font-size: var(--rk-wow-fs-lead); line-height: 1.35; color: var(--text-primary); }
@media (min-width: 960px) { .fz-hero { grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); } .fz-hero__media { justify-self: end; } }
@media (max-width: 599px) { .fz-hero .rk-wow-btnrow .rk-btn { width: 100%; } }

/* ==========================================================================
   Zahlen-Treppe — Zentralisierung später in rk-wow.css, Arbeitsname rk-wow-stufen
   3–5 Zahlen auf ansteigenden Stufen, dunkle Bühne, Zähler data-rk-wow-count, Wortstufe möglich. Handy: Liste mit kleiner Stufe.
   ========================================================================== */
.fz-buehne { padding: clamp(28px, 5vw, 64px) clamp(18px, 4vw, 56px) 0; overflow: hidden; border-radius: var(--rk-wow-r-card); background: var(--rk-wow-dark-bg); box-shadow: var(--ph-erhaben-stark); }
.fz-buehne .rk-wow-statement { margin-bottom: clamp(20px, 4vw, 44px); }
.fz-stufen { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; }
.fz-stufe { position: relative; display: grid; grid-template-columns: 54px minmax(0, 1fr); gap: 16px; align-items: center; padding: 16px 0; border-top: 1px solid var(--rk-wow-dark-line); }
.fz-stufe__inhalt { min-width: 0; }
.fz-stufe__zahl { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; margin: 0; color: var(--rk-wow-dark-ink); line-height: 1; }
.fz-stufe__vor { flex-basis: 100%; font-size: var(--rk-wow-fs-meta); color: var(--rk-wow-dark-muted); }   /* „rund“ eigene Zeile, damit Zahl und Einheit zusammenbleiben */
.fz-stufe__zahl b, .fz-stufe__ein { white-space: nowrap; }
.fz-stufe__zahl b { font-weight: var(--rk-fw-regular, 400); font-size: clamp(2.6rem, 1.7rem + 3.4vw, 4.6rem); letter-spacing: var(--rk-wow-ls-tight); background: var(--rk-wow-dark-hl); -webkit-background-clip: text; background-clip: text; color: transparent; padding: .06em .04em .1em 0; }
.fz-stufe--wort .fz-stufe__zahl b { font-size: clamp(2.2rem, 1.5rem + 2.8vw, 3.8rem); }
.fz-stufe__ein { font-size: var(--rk-wow-fs-big); color: var(--rk-wow-dark-ink); }
.fz-stufe__lbl { margin: 8px 0 0; color: var(--rk-wow-dark-text); font-size: var(--rk-wow-fs-meta); line-height: 1.4; hyphens: auto; overflow-wrap: break-word; }
.fz-stufe__tritt { grid-column: 1; grid-row: 1; align-self: end; width: 100%; height: calc(14px + var(--i) * 12px); border-top: 2px solid var(--rk-wow-dark-gold); background: linear-gradient(to bottom, color-mix(in srgb, var(--rk-wow-dark-gold) 22%, transparent), transparent); border-radius: 3px 3px 0 0; }
@media (min-width: 760px) {
  .fz-stufen { grid-template-columns: repeat(var(--n, 4), minmax(0, 1fr)); align-items: end; gap: 0; }
  .fz-stufe { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto; align-content: end; gap: 14px; padding: 0; border-top: 0; }
  .fz-stufe__inhalt { padding: 0 clamp(10px, 1.6vw, 22px); }
  .fz-stufe__tritt { grid-column: 1; grid-row: 2; height: calc(30px + var(--i) * clamp(26px, 4vw, 52px)); border-radius: 0; border-right: 1px solid var(--rk-wow-dark-line); }
  .fz-stufe:last-child .fz-stufe__tritt { border-right: 0; }
}

/* ==========================================================================
   Zonen-Doppelspalte — Zentralisierung später in rk-wow.css, Arbeitsname rk-wow-zonen
   Zwei gleich gewichtete Spalten mit Zonenkopf (Flächenmuster + Name), Modus ziel (Bild + Punkte) oder befund (Bildzeilen, Tipp öffnet
   die Galerie), darunter die Zeile „beide“. Keine Wertung, keine Rot-Grün-Farben, keine Haken oder Kreuze.
   ========================================================================== */
.fz-zonen { display: grid; gap: 16px; margin: clamp(24px, 3vw, 36px) 0 0; }
@media (min-width: 640px) { .fz-zonen { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.fz-zone { display: grid; align-content: start; gap: 14px; min-width: 0; padding: clamp(14px, 2vw, 20px); border: 1px solid var(--rk-wow-line); border-radius: var(--rk-wow-r-card); background: var(--rk-wow-card); box-shadow: var(--ph-erhaben); }
.fz-zone--beide { grid-column: 1 / -1; }
.fz-zone__kopf { display: flex; align-items: center; gap: 10px; margin: 0; }
.fz-zone__kopf .fz-zone-ico { width: 28px; height: 28px; border-radius: 6px; }
.fz-zone__name { margin: 0; font-size: var(--rk-wow-fs-title); font-weight: var(--rk-fw-regular, 400); line-height: 1.15; color: var(--text-primary); }
.fz-zone__ort { margin: 2px 0 0; font-size: var(--rk-wow-fs-tag); color: var(--text-muted); }
.fz-zone__bild { position: relative; margin: 0; padding: 0; overflow: hidden; border: 0; border-radius: var(--rk-wow-r-md); background: var(--rk-wow-tint); aspect-ratio: 4 / 5; cursor: zoom-in; display: block; width: 100%; }
.fz-zone__bild img { display: block; width: 100%; height: 100%; object-fit: cover; }
.fz-zone__punkte { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.fz-zone__punkte li { display: grid; grid-template-columns: 14px minmax(0, 1fr); gap: 10px; color: var(--text-secondary); line-height: 1.5; }
.fz-zone__punkte li::before { content: ""; width: 8px; height: 8px; margin-top: .6em; border-radius: 50%; background: var(--rk-gold-text); }
.fz-zone__flaeche { margin: 0; padding-top: 12px; border-top: 1px solid var(--rk-wow-line); font-size: var(--rk-wow-fs-meta); color: var(--text-primary); }
/* Befund: Bildzeilen */
.fz-befunde { display: grid; gap: 4px; margin: 0; padding: 0; list-style: none; }
.fz-zone--beide .fz-befunde { gap: 4px 20px; }
@media (min-width: 900px) { .fz-zone--beide .fz-befunde { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.fz-befund { display: grid; grid-template-columns: 92px minmax(0, 1fr); gap: 14px; align-items: start; width: 100%; padding: 10px; border: 0; border-radius: var(--rk-wow-r-md); background: transparent; color: inherit; text-align: left; cursor: zoom-in; transition: background-color .25s var(--rk-wow-ease); }
li.fz-befund { cursor: default; }
button.fz-befund__bild { width: 100%; padding: 0; border: 0; cursor: zoom-in; }
@media (hover: hover) { .fz-befund:hover { background: var(--rk-wow-tint); } }
.fz-befund__bild { position: relative; display: block; overflow: hidden; border-radius: var(--rk-wow-r-sm); aspect-ratio: 1; background: var(--rk-wow-tint); box-shadow: var(--ph-erhaben); }
.fz-befund__bild img { display: block; width: 100%; height: 100%; object-fit: cover; }
.fz-befund__zahl svg { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 2; }
.fz-befund__zahl { position: absolute; right: 4px; bottom: 4px; display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; padding: 1px 7px; border-radius: var(--rk-wow-r-pill); background: color-mix(in srgb, var(--rk-wow-dark-bg) 80%, transparent); color: var(--rk-wow-dark-ink); font-size: var(--rk-wow-fs-tag); line-height: 1.5; }
.fz-befund__body { display: grid; gap: 4px; min-width: 0; }
.fz-befund__titel { font-size: var(--rk-wow-fs-meta); color: var(--text-primary); line-height: 1.35; }
.fz-befund__ort { font-size: var(--rk-wow-fs-tag); color: var(--rk-gold-text); }
.fz-befund__text { font-size: var(--rk-wow-fs-meta); color: var(--text-secondary); line-height: 1.5; }
@media (max-width: 420px) { .fz-befund { grid-template-columns: 72px minmax(0, 1fr); gap: 12px; padding: 8px 4px; } }
/* Schmale Zonenkarte (Zweispalter neben dem Steckbrief, Tablet): kleineres Vorschaubild; zwischen 1000 und 1279 px untereinander */
.fz-schaeden .fz-zone { container: fzzone / inline-size; }
@container fzzone (max-width: 360px) { .fz-befund { grid-template-columns: 64px minmax(0, 1fr); gap: 10px; padding: 8px 2px; } }
@media (min-width: 1000px) and (max-width: 1279px) { .fz-schaeden .fz-zonen { grid-template-columns: minmax(0, 1fr); } }
.fz-ursache { max-width: 68ch; margin: 16px 0 0; color: var(--text-secondary); line-height: 1.6; }
.fz-ph-pos-r .fz-ursache { margin-left: auto; text-align: left; }
/* Startvideo */
.fz-start { display: grid; gap: 16px; margin: clamp(20px, 3vw, 32px) 0 0; padding: 14px; border: 1px solid var(--rk-wow-line); border-radius: var(--rk-wow-r-card); background: var(--rk-wow-tint); }
.fz-start .fz-video { width: min(100%, 320px); justify-self: center; }
.fz-start figcaption { display: grid; gap: 8px; align-content: center; }
.fz-start b { font-weight: var(--rk-fw-regular, 400); font-size: var(--rk-wow-fs-title); line-height: 1.2; color: var(--text-primary); }
.fz-start span { color: var(--text-secondary); line-height: 1.6; max-width: 52ch; }
@media (min-width: 700px) { .fz-start { grid-template-columns: minmax(0, 280px) minmax(0, 1fr); align-items: center; padding: 18px; } }

/* ─── Zweispalter: Aufgabe und Schäden links, Steckbrief rechts mitlaufend ─── */
.fz-zweispalt { display: grid; column-gap: clamp(28px, 4vw, 56px); grid-template-columns: minmax(0, 1fr); grid-template-areas: "aufgabe" "steck" "schaeden"; }
.fz-aufgabe { grid-area: aufgabe; } .fz-steckbrief { grid-area: steck; margin-top: clamp(32px, 5vw, 48px); } .fz-schaeden { grid-area: schaeden; }
@media (min-width: 1000px) {
  .fz-zweispalt { grid-template-columns: minmax(0, 1fr) 340px; grid-template-areas: "aufgabe steck" "schaeden steck"; }
  .fz-steckbrief { margin-top: clamp(56px, 8vw, 112px); align-self: start; max-height: calc(100vh - var(--rk-wow-sticky-top, 110px) - 24px); overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; }
}
.fz-zweispalt .rk-wow-statement__title { font-size: clamp(2.3rem, 1.3rem + 3.2vw, 4.4rem); }
.fz-steckbrief { box-shadow: var(--ph-erhaben); }
@media (min-width: 1000px) { .fz-steckbrief { padding: 18px 20px; } .fz-steckbrief h3 { margin-bottom: 6px; } .fz-steckbrief dl > div { padding: 6px 0; } .fz-steckbrief dd { font-size: var(--rk-wow-fs-meta); line-height: 1.4; } }
.fz-steckbrief__link { display: inline-flex; align-items: center; min-height: 44px; margin-top: 8px; color: var(--text-primary); text-decoration: underline; text-underline-offset: .22em; }
.fz-steckbrief__link:hover { color: var(--rk-gold-text); }

/* ==========================================================================
   Zonenplan — seitenlokal (fz-), Kandidat für zentral bei weiteren Treppenhäusern (Arbeitsname rk-wow-zonenplan)
   Schematische Draufsicht aus Daten: Wände als Segmente mit Zonenmuster, Treppenauge, Punkte springen zu den Paaren.
   ========================================================================== */
.fz-plan { display: grid; gap: 8px; margin: 0 0 16px; }
.fz-plan__titel { margin: 0; font-size: var(--rk-wow-fs-tag); letter-spacing: .1em; text-transform: uppercase; color: var(--rk-gold-text); }
.fz-plan svg { display: block; width: 100%; max-width: 240px; height: auto; overflow: visible; }
.fz-plan .fz-plan__raum { fill: var(--rk-wow-tint); stroke: var(--rk-wow-line-strong); stroke-width: 1; }
.fz-plan .fz-plan__wand { stroke: var(--text-primary); stroke-width: 1.2; }
.fz-plan .fz-plan__wand[data-zone="betonfertigteil"] { fill: url(#fz-muster-bft); }
.fz-plan .fz-plan__wand[data-zone="ortbeton"] { fill: url(#fz-muster-ob); }
.fz-plan .fz-plan__auge { fill: var(--rk-wow-card); stroke: var(--rk-wow-line-strong); stroke-dasharray: 3 3; }
.fz-plan .fz-plan__stufe { stroke: var(--rk-wow-line-strong); stroke-width: 1; }
.fz-plan .fz-plan__fenster { stroke: var(--rk-wow-card); stroke-width: 3; }
.fz-plan .fz-plan__fenster-linie { stroke: var(--text-muted); stroke-width: 1; }
.fz-plan .fz-plan__muster-strich { stroke: var(--text-muted); stroke-width: 1; }
.fz-plan .fz-plan__muster-pore { fill: var(--text-muted); }
.fz-plan .fz-plan__muster-grund { fill: var(--rk-wow-card); }
.fz-plan .fz-plan__punkt { cursor: pointer; }
.fz-plan .fz-plan__punkt circle { fill: var(--rk-wow-dark-bg); stroke: var(--rk-wow-dark-gold); stroke-width: 2; transition: transform .2s var(--rk-wow-ease); transform-box: fill-box; transform-origin: center; }
.fz-plan .fz-plan__punkt text { fill: var(--rk-wow-dark-ink); font-size: 11px; font-family: inherit; text-anchor: middle; dominant-baseline: central; pointer-events: none; }
.fz-plan .fz-plan__punkt:hover circle, .fz-plan .fz-plan__punkt:focus-visible circle { transform: scale(1.18); fill: var(--rk-wow-dark-gold); }
.fz-plan .fz-plan__punkt:hover text, .fz-plan .fz-plan__punkt:focus-visible text { fill: var(--rk-wow-dark-bg); }
.fz-plan .fz-plan__punkt:focus-visible { outline: none; }
.fz-plan .fz-plan__punkt:focus-visible circle { stroke: var(--rk-focus-color, currentColor); stroke-width: 3; }
.fz-plan .fz-plan__lbl { fill: var(--text-muted); font-size: 10px; font-family: inherit; }
.fz-plan__legende { display: grid; gap: 6px; margin: 4px 0 0; padding: 0; list-style: none; font-size: var(--rk-wow-fs-tag); color: var(--text-secondary); line-height: 1.4; }
.fz-plan__legende li { display: grid; grid-template-columns: 18px minmax(0, 1fr); gap: 8px; align-items: start; }
.fz-plan__hinweis { margin: 0; font-size: var(--rk-wow-fs-tag); color: var(--text-muted); line-height: 1.4; }

/* ==========================================================================
   Waffel-Raster — Zentralisierung später in rk-wow.css, Arbeitsname rk-wow-waffel
   100 Kästchen nach Anteil, Legende mit Farbpunkt und Buchstabe als Knopf (hervorheben) plus Sprung ins Kapitel. Ohne JS: Tabelle.
   ========================================================================== */
.fz-waffel { display: grid; gap: clamp(20px, 4vw, 48px); align-items: center; margin-top: clamp(20px, 3vw, 32px); }
@media (min-width: 900px) { .fz-waffel { grid-template-columns: minmax(0, 440px) minmax(0, 1fr); } }
.fz-waffel__raster { display: none; grid-template-columns: repeat(10, minmax(0, 1fr)); gap: clamp(3px, .6vw, 6px); width: min(100%, 440px); margin: 0; padding: clamp(10px, 1.6vw, 16px); list-style: none; border: 1px solid var(--rk-wow-line); border-radius: var(--rk-wow-r-card); background: var(--rk-wow-card); box-shadow: var(--ph-erhaben); }
.fz-waffel.is-live .fz-waffel__raster { display: grid; }
.fz-waffel__raster li { aspect-ratio: 1; border-radius: 4px; background: var(--ph); transition: opacity .3s var(--rk-wow-ease), transform .3s var(--rk-wow-ease); }
.fz-waffel[data-hervor] .fz-waffel__raster li { opacity: .18; }
.fz-waffel[data-hervor="a"] .fz-waffel__raster li[data-phase="a"], .fz-waffel[data-hervor="b"] .fz-waffel__raster li[data-phase="b"],
.fz-waffel[data-hervor="c"] .fz-waffel__raster li[data-phase="c"], .fz-waffel[data-hervor="d"] .fz-waffel__raster li[data-phase="d"],
.fz-waffel[data-hervor="e"] .fz-waffel__raster li[data-phase="e"] { opacity: 1; transform: scale(1.06); }
.fz-waffel__legende { display: none; gap: 6px; margin: 0; padding: 0; list-style: none; }
.fz-waffel.is-live .fz-waffel__legende { display: grid; }
.fz-waffel.is-live .fz-waffel__tabelle { display: none; }
.fz-waffel__zeile { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 12px; align-items: center; padding: 6px 6px 6px 0; border-bottom: 1px solid var(--rk-wow-line); }
.fz-waffel__knopf { display: grid; grid-template-columns: 30px minmax(0, 1fr) auto; gap: 12px; align-items: center; min-height: 48px; padding: 6px 10px; border: 1px solid transparent; border-radius: var(--rk-wow-r-md); background: transparent; color: var(--text-primary); text-align: left; cursor: pointer; }
.fz-waffel__knopf[aria-pressed="true"] { border-color: var(--rk-wow-line-strong); background: var(--rk-wow-tint); }
@media (hover: hover) { .fz-waffel__knopf:hover { background: var(--rk-wow-tint); } }
.fz-buchstabe { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--ph); color: var(--ph-ink); font-size: var(--rk-wow-fs-meta); line-height: 1; }
.fz-waffel__name { line-height: 1.3; }
.fz-waffel__pz { font-size: var(--rk-wow-fs-title); font-variant-numeric: tabular-nums; color: var(--text-primary); }
.fz-waffel__sprung { display: inline-flex; align-items: center; min-height: 44px; padding: 0 6px; color: var(--text-secondary); font-size: var(--rk-wow-fs-meta); text-decoration: underline; text-underline-offset: .2em; white-space: nowrap; }
.fz-waffel__sprung:hover { color: var(--rk-gold-text); }
.fz-waffel__tabelle { width: 100%; border-collapse: collapse; }
.fz-waffel__tabelle th, .fz-waffel__tabelle td { padding: 10px 8px; border-bottom: 1px solid var(--rk-wow-line); text-align: left; color: var(--text-secondary); font-weight: var(--rk-fw-regular, 400); }
.fz-waffel__tabelle td:last-child, .fz-waffel__tabelle th:last-child { text-align: right; font-variant-numeric: tabular-nums; }
.fz-waffel__fuss { margin: 14px 0 0; max-width: 60ch; font-size: var(--rk-wow-fs-meta); color: var(--text-muted); line-height: 1.5; }

/* ==========================================================================
   Aufzugsanzeige — Zentralisierung später in rk-wow.css, Arbeitsname rk-wow-etagen
   Klebende Kapitelleiste mit Nummern; aktuelles Kapitel per IntersectionObserver in Gold, aria-current. Handy: Leiste oben. Link am Fuß.
   ========================================================================== */
.fz-etagen { display: grid; gap: clamp(20px, 3vw, 40px); margin-top: clamp(24px, 3vw, 40px); }
.fz-etagen > * { min-width: 0; }
.fz-etagen__leiste { position: sticky; top: var(--fz-etagen-top); z-index: 5; margin-inline: calc(clamp(16px, 4vw, 40px) * -1); padding: 8px clamp(16px, 4vw, 40px); background: var(--rk-wow-dark-bg); box-shadow: var(--rk-wow-sh-2); }
.fz-etagen__liste { display: grid; grid-template-columns: repeat(var(--n, 5), minmax(0, 1fr)); gap: 4px; margin: 0; padding: 0; list-style: none; }
.fz-etage { display: grid; justify-items: center; gap: 0; min-height: 52px; padding: 6px 2px; border-radius: var(--rk-wow-r-sm); color: var(--rk-wow-dark-muted); text-decoration: none; transition: color .3s var(--rk-wow-ease), background-color .3s var(--rk-wow-ease); }
.fz-etage__n { font-size: 1.35rem; line-height: 1.1; font-variant-numeric: tabular-nums; letter-spacing: .02em; }
.fz-etage__name { max-width: 100%; overflow: hidden; font-size: .78rem; line-height: 1.2; text-overflow: ellipsis; white-space: nowrap; }
.fz-etage[aria-current] { color: var(--rk-wow-dark-gold); background: color-mix(in srgb, var(--rk-wow-dark-gold) 12%, transparent); }
.fz-etage[aria-current] .fz-etage__n { text-shadow: 0 0 14px color-mix(in srgb, var(--rk-wow-dark-gold) 55%, transparent); }
@media (hover: hover) { .fz-etage:hover { color: var(--rk-wow-dark-ink); } }
.fz-etage:focus-visible, .fz-etagen__fuss:focus-visible { outline: 3px solid var(--rk-wow-dark-ink); outline-offset: 2px; }
.fz-etagen__fuss { display: none; }
.fz-etagen__anzeige { display: none; }
@media (max-width: 899px) { .fz-etage__name { font-size: var(--rk-wow-fs-tag); } }
@media (max-width: 459px) { .fz-etage__name { display: none; } .fz-etage { min-height: 48px; align-content: center; } }
@media (min-width: 900px) {
  .fz-etagen { grid-template-columns: 196px minmax(0, 1fr); align-items: start; }
  .fz-etagen__leiste { top: var(--rk-wow-sticky-top); margin: 0; padding: 16px 12px; border-radius: var(--rk-wow-r-card); box-shadow: var(--ph-erhaben-stark); }
  .fz-etagen__anzeige { display: flex; justify-content: space-between; align-items: baseline; margin: 0 6px 12px; padding: 8px 10px; border: 1px solid var(--rk-wow-dark-line); border-radius: var(--rk-wow-r-sm); color: var(--rk-wow-dark-gold); font-size: var(--rk-wow-fs-tag); letter-spacing: .14em; text-transform: uppercase; }
  .fz-etagen__anzeige b { font-weight: var(--rk-fw-regular, 400); font-size: 1.6rem; letter-spacing: 0; font-variant-numeric: tabular-nums; }
  .fz-etagen__liste { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .fz-etage { grid-template-columns: 40px minmax(0, 1fr); justify-items: start; align-items: center; gap: 8px; min-height: 48px; padding: 6px 10px; }
  .fz-etage__name { white-space: normal; overflow-wrap: normal; word-break: normal; hyphens: auto; font-size: var(--rk-wow-fs-tag); }
  .fz-etagen__fuss { display: flex; align-items: center; min-height: 44px; margin: 12px 6px 0; padding-top: 10px; border-top: 1px solid var(--rk-wow-dark-line); color: var(--rk-wow-dark-text); font-size: var(--rk-wow-fs-meta); text-decoration: underline; text-underline-offset: .2em; }
  .fz-etagen__fuss:hover { color: var(--rk-wow-dark-gold); }
}
/* Kapitel */
.fz-kapitel { display: grid; gap: 16px; padding-top: clamp(24px, 4vw, 40px); scroll-margin-top: calc(var(--fz-etagen-top) + 84px); }
.fz-kapitel + .fz-kapitel { margin-top: clamp(32px, 5vw, 64px); border-top: 1px solid var(--rk-wow-line); }
@media (min-width: 900px) { .fz-kapitel { scroll-margin-top: var(--rk-wow-sticky-top); } }
.fz-kapitel:focus { outline: none; }
.fz-kapitel__kopf { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 4px 18px; align-items: end; }
.fz-kapitel__etage { grid-row: span 2; margin: 0; font-size: clamp(3.4rem, 2.2rem + 4vw, 5.6rem); line-height: .85; letter-spacing: var(--rk-wow-ls-tight); color: transparent; -webkit-text-stroke: 1.5px var(--rk-gold-text); font-variant-numeric: tabular-nums; }
.fz-kapitel__marke { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; margin: 0; font-size: var(--rk-wow-fs-tag); letter-spacing: .1em; text-transform: uppercase; color: var(--rk-gold-text); }
.fz-kapitel__marke .ph-punkt { margin-right: 0; }
.fz-kapitel h3 { margin: 0; font-size: calc(var(--rk-wow-fs-title) * 1.14); font-weight: var(--rk-fw-regular, 400); line-height: 1.2; color: var(--text-primary); text-wrap: balance; }
.fz-kapitel .ph-mat { margin: 0; max-width: 68ch; line-height: 1.55; }

/* ==========================================================================
   Serienstreifen — Zentralisierung später in rk-wow.css, Arbeitsname rk-wow-serie
   Ein großes Bild oder Video je Folge, Fortschrittssegmente, Wischen, Pfeiltasten, Zähler, Kurztext. Kein Selbstlauf.
   Reduzierte Bewegung oder ohne JS: alle Folgen untereinander. Die Folgen sind zugleich das Storyboard für Social.
   ========================================================================== */
.fz-serie { display: grid; gap: 14px; padding: clamp(14px, 2.4vw, 24px); border: 1px solid var(--rk-wow-line); border-radius: var(--rk-wow-r-card); background: var(--rk-wow-card); box-shadow: var(--ph-erhaben); }
.fz-serie__kopf { display: grid; gap: 4px; }
.fz-serie__kicker { margin: 0; font-size: var(--rk-wow-fs-tag); letter-spacing: .12em; text-transform: uppercase; color: var(--rk-gold-text); }
.fz-serie__titel { margin: 0; font-size: var(--rk-wow-fs-title); font-weight: var(--rk-fw-regular, 400); line-height: 1.2; color: var(--text-primary); }
.fz-serie__haken { margin: 0; color: var(--text-secondary); line-height: 1.5; }
.fz-serie__segmente { display: none; gap: 4px; margin: 0; padding: 0; list-style: none; }
.fz-serie__seg { position: relative; display: block; width: 100%; height: 24px; padding: 0; border: 0; background: transparent; cursor: pointer; }
.fz-serie__seg::before { content: ""; position: absolute; left: 0; right: 0; top: 10px; height: 4px; border-radius: 2px; background: var(--rk-wow-line-strong); transition: background-color .3s var(--rk-wow-ease); }
.fz-serie__seg.is-gesehen::before { background: color-mix(in srgb, var(--rk-gold-text) 55%, var(--rk-wow-line-strong)); }
.fz-serie__seg[aria-current]::before { background: var(--rk-gold-text); }
.fz-serie__seg:focus-visible { outline: 3px solid var(--rk-focus-color, currentColor); outline-offset: 1px; border-radius: 4px; }
.fz-serie__folgen { display: grid; gap: 18px; margin: 0; padding: 0; list-style: none; }
@media (min-width: 700px) { .fz-serie__folgen { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.fz-folge { display: grid; gap: 10px; align-content: start; min-width: 0; margin: 0; }
.fz-folge__buehne { position: relative; overflow: hidden; border-radius: var(--rk-wow-r-md); background: var(--rk-wow-dark-bg); aspect-ratio: 4 / 5; }
.fz-folge__buehne > img, .fz-folge__buehne .fz-video, .fz-folge__buehne .fz-video__v { display: block; width: 100%; height: 100%; }
.fz-folge__buehne > img, .fz-folge__buehne .fz-video__v { object-fit: contain; }
.fz-folge__gross { position: absolute; left: 10px; top: 10px; z-index: 3; display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 1px solid var(--rk-wow-line-strong); border-radius: 50%; background: var(--fz-glas); color: var(--text-primary); cursor: zoom-in; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.fz-folge__gross svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.fz-folge__text { display: grid; gap: 6px; }
.fz-folge__stufe { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin: 0; font-size: var(--rk-wow-fs-tag); letter-spacing: .1em; text-transform: uppercase; color: var(--rk-gold-text); }
.fz-folge__chip { padding: 2px 10px; border: 1px solid var(--rk-wow-line-strong); border-radius: var(--rk-wow-r-pill); color: var(--text-secondary); letter-spacing: .04em; text-transform: none; }
.fz-folge__titel { margin: 0; font-size: var(--rk-wow-fs-title); font-weight: var(--rk-fw-regular, 400); line-height: 1.2; color: var(--text-primary); }
.fz-folge__text p { margin: 0; color: var(--text-secondary); line-height: 1.6; max-width: 56ch; }
.fz-serie__steuer { display: none; grid-template-columns: 48px minmax(0, 1fr) 48px; align-items: center; gap: 12px; }
.fz-serie__zahl { text-align: center; color: var(--text-muted); font-size: var(--rk-wow-fs-meta); font-variant-numeric: tabular-nums; }
.fz-runder-knopf { display: grid; place-items: center; width: 48px; height: 48px; padding: 0; border: 1px solid var(--rk-wow-line-strong); border-radius: 50%; background: var(--rk-wow-card); color: var(--text-primary); box-shadow: var(--rk-wow-sh-2); cursor: pointer; }
.fz-runder-knopf svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.fz-runder-knopf:disabled { opacity: .4; cursor: default; box-shadow: none; }
/* Live: eine Folge, Segmente, Wischen */
.fz-serie.is-live .fz-serie__segmente { display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); }
.fz-serie.is-live .fz-serie__steuer { display: grid; }
.fz-serie.is-live .fz-serie__folgen { display: block; touch-action: pan-y; }
.fz-serie.is-live .fz-folge { display: none; }
.fz-serie.is-live .fz-folge.is-an { display: grid; animation: fz-ein .45s var(--rk-wow-ease); }
.fz-serie.is-live .fz-serie__buehne-fokus:focus-visible { outline: 3px solid var(--rk-focus-color, currentColor); outline-offset: 4px; border-radius: var(--rk-wow-r-md); }
@media (min-width: 900px) {
  .fz-serie.is-live .fz-folge.is-an { grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: 24px; align-items: center; }
  .fz-serie.is-live .fz-folge__buehne { max-height: 72vh; }
}
@keyframes fz-ein { from { opacity: 0; transform: translateX(var(--fz-dx, 18px)); } to { opacity: 1; transform: none; } }
.fz-serie__einschuebe { display: grid; gap: 10px; margin: 6px 0 0; padding: 0; list-style: none; }
@media (min-width: 700px) { .fz-serie__einschuebe { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.fz-einschub { display: grid; gap: 6px; align-content: start; padding: 14px 16px; border: 1px dashed var(--rk-wow-line-strong); border-radius: var(--rk-wow-r-md); background: var(--rk-wow-tint); }
.fz-einschub__kicker { margin: 0; font-size: var(--rk-wow-fs-tag); letter-spacing: .1em; text-transform: uppercase; color: var(--rk-gold-text); }
.fz-einschub h4 { margin: 0; font-size: var(--rk-wow-fs-lead); font-weight: var(--rk-fw-regular, 400); line-height: 1.25; color: var(--text-primary); }
.fz-einschub p { margin: 0; color: var(--text-secondary); font-size: var(--rk-wow-fs-meta); line-height: 1.55; }
.fz-einschub__sprung { justify-self: start; display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0; border: 0; background: none; color: var(--text-primary); font-size: var(--rk-wow-fs-meta); text-decoration: underline; text-underline-offset: .2em; cursor: pointer; }
.fz-einschub__sprung:hover { color: var(--rk-gold-text); }
.fz-einschub__medien { display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 0; padding: 0; list-style: none; }

/* ─── Video mit Standbild, Play und Ton (eigener Baustein, nichts startet von selbst) ─── */
.fz-video { position: relative; overflow: hidden; background: var(--rk-wow-dark-bg); }
.fz-video__v { display: block; width: 100%; height: 100%; object-fit: cover; background: var(--rk-wow-dark-bg); }
.fz-video__druck { display: none; }
.fz-video__play { position: absolute; left: 50%; top: 50%; z-index: 2; display: grid; place-items: center; width: 64px; height: 64px; margin: -32px 0 0 -32px; padding: 0; border: 1px solid color-mix(in srgb, var(--rk-wow-dark-ink) 50%, transparent);
  border-radius: 50%; background: color-mix(in srgb, var(--rk-wow-dark-bg) 72%, transparent); color: var(--rk-wow-dark-ink); cursor: pointer; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); box-shadow: var(--rk-wow-sh-3); transition: opacity .3s var(--rk-wow-ease), transform .3s var(--rk-wow-ease); }
.fz-video__play svg, .fz-video__ton svg { width: 24px; height: 24px; fill: currentColor; stroke: none; }
.fz-video__play .fz-i-pause, .fz-video.is-laeuft .fz-video__play .fz-i-play { display: none; }
.fz-video.is-laeuft .fz-video__play .fz-i-pause { display: block; }
.fz-video.is-laeuft .fz-video__play { left: auto; top: auto; right: 10px; bottom: 10px; width: 48px; height: 48px; margin: 0; opacity: .9; }
.fz-video__ton { position: absolute; left: 10px; bottom: 10px; z-index: 2; display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 14px 0 10px; border: 1px solid color-mix(in srgb, var(--rk-wow-dark-ink) 40%, transparent);
  border-radius: var(--rk-wow-r-pill); background: color-mix(in srgb, var(--rk-wow-dark-bg) 72%, transparent); color: var(--rk-wow-dark-ink); font-size: var(--rk-wow-fs-tag); cursor: pointer; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.fz-video__ton svg { width: 20px; height: 20px; }
.fz-video__ton .fz-i-an, .fz-video__ton[aria-pressed="true"] .fz-i-aus { display: none; }
.fz-video__ton[aria-pressed="true"] .fz-i-an { display: block; }
.fz-video.is-laeuft.hat-controls .fz-video__ton, .fz-video.is-laeuft.hat-controls .fz-video__play { bottom: 56px; }
.fz-video__play:focus-visible, .fz-video__ton:focus-visible { outline: 3px solid var(--rk-wow-dark-ink); outline-offset: 3px; }
.fz-play { position: absolute; right: 8px; top: 8px; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--rk-wow-card); color: var(--text-primary); box-shadow: var(--rk-wow-sh-2); }
.fz-play .ref-icon { width: 16px; height: 16px; fill: currentColor; stroke: none; }

/* Kernvideo mit Kais Stimme */
.fz-kern { display: grid; gap: 16px; margin: 4px 0; padding: 14px; border: 1px solid var(--rk-wow-line); border-radius: var(--rk-wow-r-card); background: var(--rk-wow-tint); }
.fz-kern .fz-video { width: min(100%, 340px); aspect-ratio: 9 / 16; justify-self: center; border-radius: var(--rk-wow-r-md); box-shadow: var(--ph-erhaben-stark); }
.fz-kern figcaption { display: grid; gap: 8px; align-content: center; }
.fz-kern__etikett { justify-self: start; padding: 4px 12px; border: 1px solid var(--rk-gold-text); border-radius: var(--rk-wow-r-pill); color: var(--rk-gold-text); font-size: var(--rk-wow-fs-tag); letter-spacing: .12em; text-transform: uppercase; }
.fz-kern b { font-weight: var(--rk-fw-regular, 400); font-size: var(--rk-wow-fs-title); line-height: 1.2; color: var(--text-primary); }
.fz-kern span { color: var(--text-secondary); line-height: 1.6; max-width: 52ch; }
.fz-kern__ton { display: flex; gap: 10px; align-items: baseline; color: var(--text-primary) !important; font-size: var(--rk-wow-fs-meta); }
.fz-kern__ton::before { content: ""; flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--rk-wow-accent-line); }
@media (min-width: 700px) { .fz-kern { grid-template-columns: minmax(0, 300px) minmax(0, 1fr); align-items: center; padding: 18px; } }
/* Medienleiste „Weitere Aufnahmen“ */
.fz-leiste { display: grid; grid-auto-flow: column; grid-auto-columns: clamp(104px, 26vw, 136px); gap: 10px; margin: 0; padding: 2px 2px 12px; overflow-x: auto; list-style: none; scroll-snap-type: x mandatory; overscroll-behavior-x: contain; scrollbar-width: thin; scrollbar-color: var(--rk-wow-line-strong) transparent; }
.fz-leiste > li { scroll-snap-align: start; }
.fz-leiste__knopf { position: relative; display: block; width: 100%; padding: 0; overflow: hidden; border: 1px solid var(--rk-wow-line); border-radius: var(--rk-wow-r-sm); background: var(--rk-wow-tint); cursor: zoom-in; box-shadow: var(--ph-erhaben); }
.fz-leiste__knopf img { display: block; width: 100%; aspect-ratio: 3 / 4; object-fit: cover; }
@media (hover: hover) { .fz-leiste__knopf:hover { border-color: var(--rk-gold-text); } }
.fz-zwischen { margin: 6px 0 0; font-size: var(--rk-wow-fs-tag); letter-spacing: .1em; text-transform: uppercase; color: var(--text-muted); }
/* Einschübe mit Bildern (Kapitel 03, 04) */
.fz-paarbild { display: grid; gap: 14px; padding: 14px; border: 1px dashed var(--rk-wow-line-strong); border-radius: var(--rk-wow-r-card); background: var(--rk-wow-tint); }
.fz-paarbild__medien { display: grid; grid-template-columns: repeat(var(--n, 2), minmax(0, 1fr)); gap: 10px; margin: 0; padding: 0; list-style: none; }
.fz-paarbild__medien button { position: relative; display: block; width: 100%; padding: 0; overflow: hidden; border: 1px solid var(--rk-wow-line); border-radius: var(--rk-wow-r-md); background: var(--rk-wow-card); cursor: zoom-in; }
.fz-paarbild__medien img { display: block; width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.fz-paarbild__text { display: grid; gap: 6px; align-content: center; }
.fz-paarbild__text h4 { margin: 0; font-size: var(--rk-wow-fs-lead); font-weight: var(--rk-fw-regular, 400); line-height: 1.25; color: var(--text-primary); }
.fz-paarbild__text p { margin: 0; color: var(--text-secondary); line-height: 1.55; max-width: 60ch; }
.fz-paarbild__text a { justify-self: start; display: inline-flex; align-items: center; min-height: 44px; color: var(--text-primary); text-decoration: underline; text-underline-offset: .2em; }
@media (min-width: 760px) { .fz-paarbild { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); align-items: center; padding: 18px; } }
.fz-farbton { display: grid; gap: 10px; }
@media (min-width: 700px) { .fz-farbton { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); align-items: stretch; } }
.fz-farbton__neben { display: grid; gap: 10px; }
.fz-farbton button { position: relative; display: block; width: 100%; height: 100%; padding: 0; overflow: hidden; border: 1px solid var(--rk-wow-line); border-radius: var(--rk-wow-r-md); background: var(--rk-wow-tint); cursor: zoom-in; box-shadow: var(--ph-erhaben); }
.fz-farbton img { display: block; width: 100%; height: 100%; object-fit: cover; min-height: 180px; }
.fz-bildtext { position: absolute; left: 0; right: 0; bottom: 0; z-index: 1; padding: 34px 14px 12px; background: linear-gradient(to top, color-mix(in srgb, var(--rk-wow-dark-bg) 86%, transparent), transparent); color: var(--rk-wow-dark-ink); font-size: var(--rk-wow-fs-meta); line-height: 1.4; text-align: left; }

/* ==========================================================================
   Fugenschnitt — seitenlokal (fz-), Daten in texte.json → fugenschnitt (schema_bauen.py übernimmt SVG und Texte für Social)
   Querschnitt einer Betonfertigteilfuge mit leichtem Versatz, Schichten 1–5 nummeriert, Zustand „Licht“ mit Lichtstrahl am Versatz.
   ========================================================================== */
.fz-schnitt { display: grid; gap: 16px; padding: clamp(14px, 2.4vw, 24px); border: 1px solid var(--rk-wow-line); border-radius: var(--rk-wow-r-card); background: var(--rk-wow-card); box-shadow: var(--ph-erhaben); }
.fz-schnitt__kopf { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 10px 20px; }
.fz-schnitt__titel { margin: 0; font-size: var(--rk-wow-fs-title); font-weight: var(--rk-fw-regular, 400); line-height: 1.2; color: var(--text-primary); }
.fz-schalter { display: inline-flex; flex-wrap: wrap; gap: 4px; padding: 4px; border: 1px solid var(--rk-wow-line-strong); border-radius: var(--rk-wow-r-pill); background: var(--rk-wow-tint); }
.fz-schalter button { min-height: 44px; padding: 0 16px; border: 0; border-radius: var(--rk-wow-r-pill); background: transparent; color: var(--text-secondary); font-size: var(--rk-wow-fs-meta); cursor: pointer; }
.fz-schalter button[aria-pressed="true"] { background: var(--text-primary); color: var(--rk-wow-card); }
.fz-schnitt__raster { display: grid; gap: 18px; align-items: center; }
@media (min-width: 900px) { .fz-schnitt__raster { grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); } }
.fz-schnitt svg { display: block; width: 100%; height: auto; overflow: visible; }
.fz-schnitt .fz-s-teil { fill: var(--rk-wow-tint); stroke: var(--text-muted); stroke-width: 1.5; }
.fz-schnitt .fz-s-korn { fill: color-mix(in srgb, var(--text-muted) 30%, transparent); }
.fz-schnitt .fz-s-flanke { fill: none; stroke: var(--text-primary); stroke-width: 2; stroke-dasharray: 5 4; }
.fz-schnitt .fz-s-grund { fill: none; stroke: var(--rk-gold-text); stroke-width: 4; stroke-linecap: round; opacity: .85; }
.fz-schnitt .fz-s-moertel { fill: color-mix(in srgb, var(--text-muted) 55%, var(--rk-wow-card)); stroke: none; }
.fz-schnitt .fz-s-schnitt { fill: none; stroke: var(--text-primary); stroke-width: 2; }
.fz-schnitt .fz-s-retusche { fill: none; stroke: color-mix(in srgb, var(--rk-gold-text) 70%, var(--text-primary)); stroke-width: 3; }
.fz-schnitt .fz-s-marke circle { fill: var(--text-primary); }
.fz-schnitt .fz-s-marke text { fill: var(--rk-wow-card); font-size: 15px; font-family: inherit; text-anchor: middle; dominant-baseline: central; }
.fz-schnitt .fz-s-marke line { stroke: var(--text-primary); stroke-width: 1.2; }
.fz-schnitt .fz-s-luft { fill: var(--text-muted); font-size: 13px; font-family: inherit; }
.fz-schnitt .fz-s-licht { opacity: 0; transition: opacity .5s var(--rk-wow-ease); }
.fz-schnitt .fz-s-strahl { stroke: var(--rk-gold-text); stroke-width: 2; stroke-dasharray: 8 6; fill: none; }
.fz-schnitt .fz-s-hell { fill: color-mix(in srgb, var(--rk-gold-text) 22%, transparent); }
.fz-schnitt .fz-s-schatten { fill: color-mix(in srgb, var(--text-primary) 18%, transparent); }
.fz-schnitt .fz-s-versatz { stroke: var(--rk-wow-accent-line); stroke-width: 2; fill: none; }
.fz-schnitt .fz-s-versatz-text { fill: var(--text-primary); font-size: 14px; font-family: inherit; }
.fz-schnitt[data-zustand="licht"] .fz-s-licht { opacity: 1; }
.fz-schnitt[data-zustand="licht"] .fz-s-marke { opacity: .25; }
.fz-schnitt__liste { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.fz-schnitt__liste li { display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 2px 12px; }
.fz-schnitt__liste .fz-nr { grid-row: span 2; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--text-primary); color: var(--rk-wow-card); font-size: var(--rk-wow-fs-tag); }
.fz-schnitt__liste b { font-weight: var(--rk-fw-regular, 400); color: var(--text-primary); }
.fz-schnitt__liste span { color: var(--text-secondary); font-size: var(--rk-wow-fs-meta); line-height: 1.5; }
.fz-schnitt__licht { display: none; gap: 6px; padding: 14px 16px; border-radius: var(--rk-wow-r-md); background: var(--rk-wow-tint); }
.fz-schnitt__licht b { font-weight: var(--rk-fw-regular, 400); font-size: var(--rk-wow-fs-lead); color: var(--text-primary); }
.fz-schnitt__licht p { margin: 0; color: var(--text-secondary); line-height: 1.55; }
.fz-schnitt[data-zustand="licht"] .fz-schnitt__liste { display: none; }
.fz-schnitt[data-zustand="licht"] .fz-schnitt__licht { display: grid; }
.fz-schnitt__hinweis { margin: 0; font-size: var(--rk-wow-fs-tag); color: var(--text-muted); }

/* ==========================================================================
   Kartenstapel — Zentralisierung später in rk-wow.css, Arbeitsname rk-wow-stapel
   Fächer aus Bildkarten; Tipp, Wischen oder Pfeiltasten legen die oberste nach hinten; Zähler; Platzhalterkarte möglich.
   Ohne JS: alle Karten untereinander.
   ========================================================================== */
.fz-stapel { display: grid; gap: 18px; justify-items: center; margin-top: clamp(20px, 3vw, 32px); }
.fz-stapel__ort { margin: 0; max-width: 60ch; text-align: center; color: var(--text-secondary); line-height: 1.5; }
.fz-stapel__karten { display: grid; gap: 18px; width: min(100%, 440px); margin: 0; padding: 0; list-style: none; }
.fz-karte { display: grid; overflow: hidden; border: 1px solid var(--rk-wow-line); border-radius: var(--rk-wow-r-card); background: var(--rk-wow-card); box-shadow: var(--ph-erhaben); }
.fz-karte__bild { position: relative; margin: 0; background: var(--rk-wow-dark-bg); }
.fz-karte__bild .fz-marker { --fz-maxh: 54vh; }
.fz-karte__bild > img { display: block; width: 100%; height: auto; max-height: 54vh; object-fit: contain; margin-inline: auto; }
.fz-karte__text { display: grid; gap: 6px; padding: 16px 18px 18px; }
.fz-karte__stufe { display: flex; align-items: baseline; gap: 10px; margin: 0; font-size: var(--rk-wow-fs-title); line-height: 1.2; color: var(--text-primary); }
.fz-karte__stufe span { font-size: var(--rk-wow-fs-tag); letter-spacing: .12em; color: var(--rk-gold-text); font-variant-numeric: tabular-nums; }
.fz-karte__text p { margin: 0; color: var(--text-secondary); line-height: 1.55; }
.fz-karte__video { justify-self: start; display: inline-flex; align-items: center; gap: 8px; min-height: 44px; margin-top: 4px; padding: 0 14px 0 10px; border: 1px solid var(--rk-wow-line-strong); border-radius: var(--rk-wow-r-pill); background: transparent; color: var(--text-primary); font-size: var(--rk-wow-fs-meta); cursor: pointer; }
.fz-karte__video svg { width: 18px; height: 18px; fill: currentColor; }
.fz-karte--platz { border-style: dashed; border-color: var(--rk-wow-line-strong); background: var(--rk-wow-tint); box-shadow: none; }
.fz-karte--platz .fz-karte__bild { display: grid; place-items: center; min-height: 260px; background: var(--fz-muster-bft), var(--rk-wow-tint); }
.fz-karte__platzhalter { display: grid; place-items: center; width: 84px; height: 84px; border: 1px dashed var(--rk-wow-line-strong); border-radius: 50%; background: var(--rk-wow-card); color: var(--text-muted); }
.fz-karte__platzhalter svg { width: 34px; height: 34px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.fz-stapel__steuer { display: none; grid-template-columns: 48px minmax(0, 1fr) 48px; gap: 16px; align-items: center; width: min(100%, 440px); }
.fz-stapel__zahl { text-align: center; font-size: var(--rk-wow-fs-title); color: var(--text-primary); font-variant-numeric: tabular-nums; }
.fz-stapel__hinweis { margin: 0; text-align: center; font-size: var(--rk-wow-fs-tag); color: var(--text-muted); }
.fz-stapel__galerie { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 0; padding: 0; list-style: none; }
.fz-stapel__galerie button { position: relative; display: block; width: 84px; padding: 0; overflow: hidden; border: 1px solid var(--rk-wow-line); border-radius: var(--rk-wow-r-sm); background: var(--rk-wow-tint); cursor: zoom-in; }
.fz-stapel__galerie img { display: block; width: 100%; aspect-ratio: 3 / 4; object-fit: cover; }
/* Live: Karten liegen übereinander */
.fz-stapel.is-live .fz-stapel__steuer { display: grid; }
.fz-stapel.is-live .fz-stapel__karten { gap: 0; padding-bottom: 34px; touch-action: pan-y; outline: none; }
.fz-stapel.is-live .fz-stapel__karten:focus-visible { outline: 3px solid var(--rk-focus-color, currentColor); outline-offset: 6px; border-radius: var(--rk-wow-r-card); }
.fz-stapel.is-live .fz-karte { grid-area: 1 / 1; align-self: start; z-index: calc(20 - var(--p)); transform: translateY(calc(var(--p) * 11px)) scale(calc(1 - var(--p) * .035)) rotate(calc(var(--r, 0deg) * min(var(--p), 1)));
  transform-origin: 50% 100%; transition: transform .45s var(--rk-wow-ease), opacity .45s var(--rk-wow-ease), box-shadow .45s var(--rk-wow-ease); }
.fz-stapel.is-live .fz-karte[data-p="0"] { box-shadow: var(--ph-erhaben-stark); cursor: pointer; }
.fz-stapel.is-live .fz-karte:not([data-p="0"]) { pointer-events: none; }
.fz-stapel.is-live .fz-karte:not([data-p="0"]) .fz-karte__text { visibility: hidden; }
.fz-stapel.is-live .fz-karte[data-p="3"], .fz-stapel.is-live .fz-karte.is-hinten { opacity: 0; }
.fz-stapel.is-live .fz-karte.is-weg { transform: translate(var(--fz-weg, -110%), 4%) rotate(-8deg); opacity: 0; }

/* ==========================================================================
   Halten für Vorher — Zentralisierung später in rk-wow.css, Arbeitsname rk-wow-halten
   Nachher sichtbar; Drücken und Halten, Leertaste oder Knopf „Vorher zeigen“ (aria-pressed) zeigt das Vorher. Optional Stufen-Schalter
   (Vorher · Vorbereitet · Nachher). Zonen-Filter davor (aria-pressed).
   ========================================================================== */
.fz-filter { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin: clamp(18px, 3vw, 28px) 0 0; }
.fz-filter__knoepfe { display: inline-flex; flex-wrap: wrap; gap: 6px; }
.fz-filter__knoepfe button { display: inline-flex; align-items: center; gap: 8px; min-height: 48px; padding: 0 18px 0 12px; border: 1px solid var(--rk-wow-line-strong); border-radius: var(--rk-wow-r-pill); background: var(--rk-wow-card); color: var(--text-primary); font-size: var(--rk-wow-fs-meta); cursor: pointer; }
.fz-filter__knoepfe button[aria-pressed="true"] { background: var(--text-primary); color: var(--rk-wow-card); border-color: var(--text-primary); }
.fz-filter__status { margin: 0; font-size: var(--rk-wow-fs-meta); color: var(--text-muted); }
.fz-standzeile { display: flex; gap: 10px; align-items: baseline; margin: 12px 0 0; color: var(--text-secondary); font-size: var(--rk-wow-fs-meta); }
.fz-standzeile::before { content: ""; flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--rk-wow-accent-line); transform: translateY(-1px); }
.fz-paare { display: grid; gap: clamp(20px, 3vw, 32px); margin: clamp(18px, 3vw, 28px) 0 0; padding: 0; list-style: none; }
@media (min-width: 860px) { .fz-paare { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.fz-paar { display: grid; gap: 12px; align-content: start; min-width: 0; scroll-margin-top: calc(var(--rk-wow-sticky-top) + 10px); }
.fz-paar[hidden] { display: none; }
.fz-paar.is-ziel .fz-halten { box-shadow: 0 0 0 3px var(--rk-gold-text), var(--ph-erhaben-stark); }
.fz-halten { position: relative; display: grid; margin: 0; overflow: hidden; border-radius: var(--rk-wow-r-card); background: var(--rk-wow-dark-bg); aspect-ratio: 4 / 5; box-shadow: var(--ph-erhaben-stark); cursor: pointer;
  -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; touch-action: pan-y; }
.fz-halten:focus-visible { outline: 3px solid var(--rk-focus-color, currentColor); outline-offset: 3px; }
.fz-halten__bild { grid-area: 1 / 1; display: block; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .28s var(--rk-wow-ease); -webkit-user-drag: none; pointer-events: none; }
.fz-halten__bild.is-an { opacity: 1; }
.fz-halten__etikett { position: absolute; left: 12px; top: 12px; z-index: 2; display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px; border-radius: var(--rk-wow-r-pill); background: var(--rk-wow-dark-bg); color: var(--rk-wow-dark-ink); font-size: var(--rk-wow-fs-tag); letter-spacing: .1em; text-transform: uppercase; box-shadow: var(--rk-wow-sh-2); }
.fz-halten__etikett[data-stufe="nachher"] { background: var(--rk-wow-dark-ink); color: var(--rk-wow-dark-bg); }
.fz-halten__stand { position: absolute; left: 12px; bottom: 12px; z-index: 2; max-width: calc(100% - 24px); padding: 5px 12px; border-radius: var(--rk-wow-r-pill); background: var(--fz-glas); color: var(--text-primary); font-size: var(--rk-wow-fs-tag); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.fz-halten[data-zeigt]:not([data-zeigt="nachher"]) .fz-halten__stand { display: none; }
.fz-halten__zone { top: 12px; right: 12px; left: auto; }
.fz-paar__steuer { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; }
.fz-paar__knopf { display: inline-flex; align-items: center; gap: 8px; min-height: 48px; padding: 0 18px; border: 1px solid var(--rk-wow-line-strong); border-radius: var(--rk-wow-r-pill); background: var(--rk-wow-card); color: var(--text-primary); font-size: var(--rk-wow-fs-meta); cursor: pointer; }
.fz-paar__knopf[aria-pressed="true"] { background: var(--text-primary); color: var(--rk-wow-card); border-color: var(--text-primary); }
.fz-paar__hinweis { margin: 0; font-size: var(--rk-wow-fs-tag); color: var(--text-muted); }
.fz-paar__text { display: grid; gap: 6px; }
.fz-paar__kennung { display: flex; align-items: center; gap: 10px; margin: 0; font-size: var(--rk-wow-fs-tag); letter-spacing: .1em; text-transform: uppercase; color: var(--rk-gold-text); }
.fz-paar__text h3 { margin: 0; font-size: var(--rk-wow-fs-title); font-weight: var(--rk-fw-regular, 400); line-height: 1.2; color: var(--text-primary); }
.fz-paar__text p { margin: 0; color: var(--text-secondary); line-height: 1.6; max-width: 62ch; }
html:not(.fz-js) .fz-halten__bild { opacity: 1; position: relative; }
html:not(.fz-js) .fz-halten { grid-template-columns: repeat(var(--n, 2), minmax(0, 1fr)); aspect-ratio: auto; }
html:not(.fz-js) .fz-halten__bild { grid-area: auto; aspect-ratio: 4 / 5; }
html:not(.fz-js) .fz-paar__steuer, html:not(.fz-js) .fz-filter__knoepfe { display: none; }

/* ─── Merkkasten „Die ehrliche Grenze“ (dunkle Bildspalte) ─── */
.fz-grenze { display: grid; gap: 0; margin-top: clamp(32px, 5vw, 56px); overflow: hidden; border: 1px solid var(--rk-wow-line); border-radius: var(--rk-wow-r-card); background: var(--rk-wow-card); box-shadow: var(--ph-erhaben-stark); }
.fz-grenze__bild { display: grid; place-items: center; padding: clamp(14px, 2.4vw, 24px); }
.fz-grenze__bild .fz-marker { --fz-maxh: 70vh; border-radius: var(--rk-wow-r-md); overflow: hidden; }
.fz-grenze__text { display: grid; gap: 12px; align-content: center; padding: clamp(20px, 3vw, 36px); }
.fz-grenze__text .rk-wow-statement { margin: 0; }
.fz-grenze__text .rk-wow-statement__title { font-size: var(--rk-wow-fs-big); }
.fz-grenze__text p { margin: 0; max-width: 62ch; color: var(--text-secondary); line-height: 1.65; }
.fz-grenze__schnitt { grid-column: 1 / -1; padding: 0 clamp(14px, 2.4vw, 24px) clamp(14px, 2.4vw, 24px); }
@media (min-width: 900px) { .fz-grenze { grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); } }

/* ─── Ergebnis-Galerie in Gruppen ─── */
.fz-ergebnis { margin-top: clamp(40px, 6vw, 72px); }
.fz-ergebnis__kopf { display: grid; gap: 8px; max-width: 70ch; }
.fz-ergebnis__kopf h3 { margin: 0; font-size: var(--rk-wow-fs-big); font-weight: var(--rk-fw-regular, 400); line-height: 1.1; letter-spacing: var(--rk-wow-ls-tight); color: var(--text-primary); }
.fz-ergebnis__kopf p { margin: 0; color: var(--text-secondary); line-height: 1.6; }
.fz-gruppe { margin-top: clamp(20px, 3vw, 32px); }
.fz-gruppe__kopf { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 16px; margin: 0 0 12px; }
.fz-gruppe__kopf h4 { margin: 0; font-size: var(--rk-wow-fs-title); font-weight: var(--rk-fw-regular, 400); color: var(--text-primary); }
.fz-gruppe__kopf p { margin: 0; color: var(--text-secondary); font-size: var(--rk-wow-fs-meta); }
.fz-galerie { columns: 2 150px; column-gap: 10px; margin: 0; padding: 0; list-style: none; }
@media (min-width: 760px) { .fz-galerie { columns: 3 200px; column-gap: 14px; } }
.fz-galerie li { break-inside: avoid; margin: 0 0 10px; }
@media (min-width: 760px) { .fz-galerie li { margin-bottom: 14px; } }
.fz-galerie button { position: relative; display: block; width: 100%; padding: 0; overflow: hidden; border: 1px solid var(--rk-wow-line); border-radius: var(--rk-wow-r-md); background: var(--rk-wow-tint); cursor: zoom-in; box-shadow: var(--ph-erhaben); }
.fz-galerie img { display: block; width: 100%; height: auto; transition: transform .6s var(--rk-wow-ease); }
@media (hover: hover) { .fz-galerie button:hover img { transform: scale(1.03); } }
.fz-galerie .fz-etikett { position: absolute; left: 8px; bottom: 8px; z-index: 1; padding: 4px 10px 4px 6px; }
.fz-platz { display: grid; gap: 8px; justify-items: start; padding: clamp(18px, 3vw, 28px); border: 1px dashed var(--rk-wow-line-strong); border-radius: var(--rk-wow-r-card); background: var(--fz-muster-bft), var(--rk-wow-tint); }
.fz-platz p { margin: 0; max-width: 60ch; padding: 10px 14px; border-radius: var(--rk-wow-r-md); background: var(--rk-wow-card); color: var(--text-secondary); line-height: 1.55; }

/* ─── Material: Werkzeugwand und Liste in Arbeitsreihenfolge ─── */
.fz-wand { display: grid; gap: clamp(20px, 3vw, 40px); align-items: start; margin-top: clamp(20px, 3vw, 32px); }
@media (min-width: 960px) { .fz-wand { grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr); } }
.fz-wand__bild { margin: 0; }
.fz-wand__bild .fz-marker { --fz-maxh: 80vh; overflow: visible; }
.fz-wand__bild .fz-marker > img { border-radius: var(--rk-wow-r-card); box-shadow: var(--ph-erhaben-stark); }
.fz-wand__bild figcaption { margin-top: 12px; color: var(--text-secondary); font-size: var(--rk-wow-fs-meta); line-height: 1.5; }
.fz-wand__seite { display: grid; gap: 14px; }
.fz-wand__seite h3 { margin: 0; font-size: var(--rk-wow-fs-title); font-weight: var(--rk-fw-regular, 400); color: var(--text-primary); }
.fz-wand__galerie { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin: 0; padding: 0; list-style: none; }
.fz-wand__galerie button { position: relative; display: block; width: 100%; padding: 0; overflow: hidden; border: 1px solid var(--rk-wow-line); border-radius: var(--rk-wow-r-md); background: var(--rk-wow-tint); cursor: zoom-in; box-shadow: var(--ph-erhaben); }
.fz-wand__galerie img { display: block; width: 100%; aspect-ratio: 3 / 4; object-fit: cover; }
.fz-material { display: grid; gap: 0; margin: clamp(28px, 4vw, 44px) 0 0; padding: 0; list-style: none; counter-reset: fzmat; }
@media (min-width: 900px) { .fz-material { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: clamp(28px, 4vw, 56px); } }
.fz-material li { display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: 4px 16px; padding: 18px 0; border-top: 1px solid var(--rk-wow-line); }
.fz-material__n { grid-row: span 4; font-size: 2.2rem; line-height: 1; color: transparent; -webkit-text-stroke: 1.2px var(--rk-gold-text); font-variant-numeric: tabular-nums; }
.fz-material__gruppe { font-size: var(--rk-wow-fs-tag); letter-spacing: .1em; text-transform: uppercase; color: var(--rk-gold-text); }
.fz-material h3 { margin: 0; font-size: var(--rk-wow-fs-title); font-weight: var(--rk-fw-regular, 400); line-height: 1.2; color: var(--text-primary); }
.fz-material p { margin: 0; color: var(--text-secondary); line-height: 1.55; }
.fz-material .fz-produkt { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 12px; color: var(--text-primary); font-size: var(--rk-wow-fs-meta); }
.fz-produkt__shop { display: inline-flex; align-items: center; min-height: 32px; color: var(--rk-gold-text); text-decoration: underline; text-underline-offset: 3px; }
.fz-produkt__shop::after { content: " →"; white-space: pre; }
.fz-produkt__eigen { color: var(--text-secondary); font-size: var(--rk-wow-fs-tag); }
.fz-shoplink { margin: 18px 0 0; color: var(--text-secondary); font-size: var(--rk-wow-fs-meta); }
.fz-shoplink a { color: var(--rk-gold-text); text-decoration: underline; text-underline-offset: 3px; }
.fz-maschinen { max-width: 80ch; margin: 18px 0 0; padding-top: 14px; border-top: 1px solid var(--rk-wow-line); color: var(--text-secondary); font-size: var(--rk-wow-fs-meta); line-height: 1.6; }

/* ─── Fragen: .rk-faq der Website (nur Abstand) ─── */
.fz-fragen .rk-faq { margin-top: clamp(20px, 3vw, 32px); margin-inline: auto; }

/* ─── Großansicht mit Blättern (eigenes Fenster, zentriert; übernommen aus fb-gross) ─── */
.fz-gross { width: min(96vw, 1100px); max-height: 94vh; padding: 0; overflow: hidden; border: 1px solid color-mix(in srgb, var(--rk-gold-text) 45%, transparent); border-radius: var(--rk-wow-r-card); background: var(--rk-wow-card); color: var(--text-primary); box-shadow: var(--ph-erhaben-stark); }
.fz-gross::backdrop { background: color-mix(in srgb, var(--rk-wow-dark-bg) 80%, transparent); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
.fz-gross__rahmen { position: relative; display: grid; grid-template-rows: minmax(0, 1fr) auto; gap: 10px; max-height: 94vh; padding: 12px; box-sizing: border-box; }
.fz-gross__inhalt { display: grid; place-items: center; min-height: 0; overflow: hidden; border-radius: var(--rk-wow-r-md); background: var(--rk-wow-tint); touch-action: pan-y; }
.fz-gross__inhalt img, .fz-gross__inhalt video { display: block; width: auto; height: auto; max-width: 100%; max-height: calc(94vh - 160px); }
.fz-gross__fuss { display: grid; grid-template-columns: 48px minmax(0, 1fr) 48px; grid-template-areas: "z t w" ". n ."; gap: 4px 12px; align-items: center; text-align: center; }
.fz-gross__text { grid-area: t; margin: 0; color: var(--text-secondary); font-size: var(--rk-wow-fs-meta); line-height: 1.5; }
.fz-gross__zahl { grid-area: n; color: var(--text-muted); font-size: var(--rk-wow-fs-tag); }
.fz-gross__pfeil[data-fz-schritt="-1"] { grid-area: z; } .fz-gross__pfeil[data-fz-schritt="1"] { grid-area: w; }
.fz-gross__pfeil[hidden] { display: grid; visibility: hidden; }
.fz-gross__pfeil, .fz-gross__zu { display: grid; place-items: center; width: 48px; height: 48px; padding: 0; border: 1px solid var(--rk-wow-line-strong); border-radius: 50%; background: var(--rk-wow-card); color: var(--text-primary); box-shadow: var(--rk-wow-sh-2); cursor: pointer; }
.fz-gross__zu { position: absolute; top: 18px; right: 18px; z-index: 2; }
.fz-gross__pfeil:focus-visible, .fz-gross__zu:focus-visible { outline: 3px solid var(--rk-focus-color, currentColor); outline-offset: 2px; }
/* Dunkelmodus: Schalter im Großansichts-Fenster klar lesbar (Kai, 15.10.2026) */
:root[data-theme="dark"] :is(.fz-gross__pfeil, .fz-gross__zu, .nw-gross__zu) { background: var(--rk-wow-dark-bg); color: var(--rk-wow-dark-ink); border: 2px solid var(--rk-wow-dark-gold); }
:root[data-theme="dark"] :is(.fz-gross__pfeil, .fz-gross__zu, .nw-gross__zu) svg { stroke: currentColor; fill: none; stroke-width: 2.2; }
:root[data-theme="dark"] .fz-gross__pfeil svg path[fill]:not([fill="none"]) { fill: currentColor; }
:root[data-theme="dark"] :is(.fz-gross__pfeil, .fz-gross__zu, .nw-gross__zu):is(:hover, :focus-visible) { background: var(--rk-wow-dark-gold); color: var(--rk-wow-dark-bg); }
:root[data-theme="dark"] .nw-gross { background: color-mix(in srgb, var(--rk-wow-dark-text) 9%, var(--rk-wow-dark-bg)); color: var(--rk-wow-dark-text); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) :is(.fz-gross__pfeil, .fz-gross__zu, .nw-gross__zu) { background: var(--rk-wow-dark-bg); color: var(--rk-wow-dark-ink); border: 2px solid var(--rk-wow-dark-gold); }
  :root:not([data-theme="light"]) :is(.fz-gross__pfeil, .fz-gross__zu, .nw-gross__zu) svg { stroke: currentColor; fill: none; stroke-width: 2.2; }
  :root:not([data-theme="light"]) :is(.fz-gross__pfeil, .fz-gross__zu, .nw-gross__zu):is(:hover, :focus-visible) { background: var(--rk-wow-dark-gold); color: var(--rk-wow-dark-bg); }
  :root:not([data-theme="light"]) .nw-gross { background: color-mix(in srgb, var(--rk-wow-dark-text) 9%, var(--rk-wow-dark-bg)); color: var(--rk-wow-dark-text); }
}
:root[data-theme="dark"] .fz-gross { background: color-mix(in srgb, var(--rk-wow-dark-text) 9%, var(--rk-wow-dark-bg)); box-shadow: var(--ph-erhaben-stark), 0 0 80px color-mix(in srgb, var(--rk-gold-text) 18%, transparent); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .fz-gross { background: color-mix(in srgb, var(--rk-wow-dark-text) 9%, var(--rk-wow-dark-bg)); box-shadow: var(--ph-erhaben-stark), 0 0 80px color-mix(in srgb, var(--rk-gold-text) 18%, transparent); } }

/* ==========================================================================
   Nachweis — Phasen-Matrix (seitenlokal fz-matrix): Phasen × Tage mit Personenstunden, Kopfzeile je Tag, Spalte „folgt“, Handy gedreht
   ========================================================================== */
.fz-matrix-wrap { margin-top: clamp(18px, 3vw, 28px); overflow-x: auto; border: 1px solid var(--rk-wow-line); border-radius: var(--rk-wow-r-card); background: var(--rk-wow-card); box-shadow: var(--ph-erhaben); }
.fz-matrix { width: 100%; min-width: 980px; border-collapse: separate; border-spacing: 0; font-size: var(--rk-wow-fs-meta); }
.fz-matrix th, .fz-matrix td { padding: 8px 6px; border-bottom: 1px solid var(--rk-wow-line); text-align: center; vertical-align: middle; font-weight: var(--rk-fw-regular, 400); color: var(--text-secondary); }
.fz-matrix thead th { vertical-align: bottom; }
.fz-matrix__tag { display: grid; gap: 2px; justify-items: center; }
.fz-matrix__tag b { font-weight: var(--rk-fw-regular, 400); color: var(--text-primary); font-variant-numeric: tabular-nums; }
.fz-matrix__tag small { font-size: var(--rk-wow-fs-tag); color: var(--text-muted); line-height: 1.3; font-variant-numeric: tabular-nums; }
.fz-matrix__tag .fz-plus { color: var(--rk-wow-pos); }
.fz-matrix tbody th { position: sticky; left: 0; z-index: 1; min-width: 170px; padding-left: 14px; background: var(--rk-wow-card); text-align: left; color: var(--text-primary); }
.fz-matrix tbody th .ph-punkt { margin-right: 8px; }
.fz-matrix thead th:first-child { position: sticky; left: 0; z-index: 1; background: var(--rk-wow-card); }
.fz-matrix__zelle { display: inline-grid; place-items: center; min-width: 48px; min-height: 40px; padding: 0 8px; border: 0; border-radius: var(--rk-wow-r-sm); background: var(--ph); color: var(--ph-ink); font-size: var(--rk-wow-fs-meta); font-variant-numeric: tabular-nums; cursor: pointer; transition: transform .2s var(--rk-wow-ease); }
@media (hover: hover) { .fz-matrix__zelle:hover { transform: translateY(-1px); box-shadow: var(--rk-wow-sh-2); } }
.fz-matrix__folgt { color: var(--text-muted); border-left: 1px dashed var(--rk-wow-line-strong) !important; border-right: 1px dashed var(--rk-wow-line-strong) !important; background: var(--fz-muster-bft); background-blend-mode: normal; }
.fz-matrix__folgt span { display: inline-block; padding: 4px 8px; border-radius: var(--rk-wow-r-sm); background: var(--rk-wow-card); font-size: var(--rk-wow-fs-tag); }
.fz-matrix__trenn { border-left: 2px solid var(--rk-wow-line-strong) !important; }
.fz-matrix tfoot th, .fz-matrix tfoot td { color: var(--text-primary); border-bottom: 0; font-variant-numeric: tabular-nums; }
.fz-matrix tfoot th { position: sticky; left: 0; background: var(--rk-wow-card); text-align: left; padding-left: 14px; }
.fz-matrix-handy { display: none; gap: 10px; margin: clamp(18px, 3vw, 28px) 0 0; padding: 0; list-style: none; }
.fz-matrix-handy > li { display: grid; gap: 8px; padding: 14px 16px; border: 1px solid var(--rk-wow-line); border-radius: var(--rk-wow-r-md); background: var(--rk-wow-card); box-shadow: var(--ph-erhaben); }
.fz-matrix-handy__kopf { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 4px 12px; margin: 0; color: var(--text-primary); }
.fz-matrix-handy__kopf small { color: var(--text-muted); font-size: var(--rk-wow-fs-tag); }
.fz-matrix-handy__chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; }
.fz-matrix-handy--folgt { border-style: dashed !important; background: var(--rk-wow-tint) !important; box-shadow: none !important; color: var(--text-muted); }
@media (max-width: 699px) { .fz-matrix-wrap { display: none; } .fz-matrix-handy { display: grid; } }
.fz-legende { display: flex; flex-wrap: wrap; gap: 8px 18px; margin: 14px 0 0; padding: 0; list-style: none; font-size: var(--rk-wow-fs-tag); color: var(--text-secondary); }
.fz-legende b { font-weight: var(--rk-fw-regular, 400); color: var(--text-primary); margin-right: 4px; }
/* Woche und Tage */
.fz-woche__inhalt { display: grid; gap: clamp(18px, 3vw, 28px); }
.fz-nachtrag { margin: 10px 0 0; max-width: 72ch; color: var(--text-secondary); line-height: 1.6; }
.fz-tag { display: grid; gap: 14px; padding: clamp(16px, 2.6vw, 26px); border: 1px solid var(--rk-wow-line); border-radius: var(--rk-wow-r-card); background: var(--rk-wow-card); scroll-margin-top: var(--rk-wow-sticky-top); }
.fz-tag:target, .fz-tag.is-ziel { box-shadow: 0 0 0 2px var(--rk-gold-text), var(--ph-erhaben); }
.fz-tag__kopf { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 10px 24px; }
.fz-tag__kopf :is(h3, h4) { margin: 2px 0 0; font-size: var(--rk-wow-fs-title); font-weight: var(--rk-fw-regular, 400); color: var(--text-primary); }
.fz-tag__meta { margin: 0; color: var(--text-secondary); font-size: var(--rk-wow-fs-meta); font-variant-numeric: tabular-nums; }
.fz-bloecke { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.fz-block { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; padding: 12px 14px; border: 1px solid var(--rk-wow-line); border-radius: var(--rk-wow-r-md); background: var(--rk-wow-tint); }
.fz-block__kopf { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; }
.fz-block__zeit { font-size: var(--rk-wow-fs-lead); color: var(--text-primary); font-variant-numeric: tabular-nums; }
.fz-block__phase { display: inline-flex; align-items: center; gap: 6px; font-size: var(--rk-wow-fs-tag); color: var(--text-secondary); }
.fz-block__phase .fz-buchstabe { width: 24px; height: 24px; font-size: var(--rk-wow-fs-tag); }
.fz-block__std { margin-left: auto; font-size: var(--rk-wow-fs-meta); color: var(--text-primary); font-variant-numeric: tabular-nums; }
.fz-block__text { margin: 0; color: var(--text-secondary); line-height: 1.55; max-width: 72ch; }
.fz-block__fuss { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.fz-person { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px 3px 4px; border: 1px solid var(--rk-wow-line-strong); border-radius: var(--rk-wow-r-pill); background: var(--rk-wow-card); color: var(--text-primary); font-size: var(--rk-wow-fs-tag); }
.fz-person i { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--text-primary); color: var(--rk-wow-card); font-style: normal; font-size: .75rem; }
.fz-hinweise { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
.fz-hinweise li { display: grid; grid-template-columns: 18px minmax(0, 1fr); gap: 8px; color: var(--text-secondary); font-size: var(--rk-wow-fs-meta); line-height: 1.5; }
.fz-hinweise li::before { content: "i"; display: grid; place-items: center; width: 18px; height: 18px; margin-top: 2px; border: 1px solid var(--rk-wow-line-strong); border-radius: 50%; color: var(--text-muted); font-size: .7rem; font-style: italic; }
.fz-tag .nw-medien { margin-top: 4px; }
/* Korrektur, Kennzahlen, Flächen, Kosten */
.fz-korrektur { display: grid; gap: 14px; margin-top: clamp(18px, 3vw, 28px); padding: clamp(18px, 3vw, 28px); border: 1px solid var(--rk-wow-line); border-radius: var(--rk-wow-r-card); background: var(--rk-wow-tint); }
.fz-korrektur p { margin: 0; max-width: 72ch; color: var(--text-secondary); line-height: 1.6; }
.fz-korrektur .nw-tabelle-wrap { background: var(--rk-wow-card); }
.fz-alt { color: var(--text-muted); text-decoration: line-through; text-decoration-color: color-mix(in srgb, var(--text-muted) 70%, transparent); }
.fz-zwei { display: grid; gap: 16px; }
@media (min-width: 900px) { .fz-zwei { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); align-items: start; } }
.fz-tabelle-zone { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; }
.nw-tabelle .fz-zwischenzeile th, .nw-tabelle .fz-zwischenzeile td { padding-top: 16px; font-size: var(--rk-wow-fs-tag); letter-spacing: .1em; text-transform: uppercase; color: var(--rk-gold-text); }
.fz-aus { opacity: .72; cursor: not-allowed; }

/* ─── Bewegung reduziert ─── */
@media (prefers-reduced-motion: reduce) {
  .fz-halten__bild, .fz-waffel__raster li, .fz-stapel .fz-karte, .fz-etage, .fz-galerie img, .fz-matrix__zelle, .fz-marker__knopf, .fz-schnitt .fz-s-licht, .fz-video__play { transition: none !important; }
  .fz-serie.is-live .fz-folge.is-an { animation: none; }
  html.fz-js .fz-marker[data-fz-zeichnen] :is(.fz-pfeil, .fz-pfeil__spitze, .fz-marker__marke) { transition: none !important; stroke-dashoffset: 0 !important; opacity: 1 !important; }
}
html.no-motion :is(.fz-halten__bild, .fz-waffel__raster li, .fz-stapel .fz-karte, .fz-galerie img), [data-motion="reduced"] :is(.fz-halten__bild, .fz-waffel__raster li, .fz-stapel .fz-karte, .fz-galerie img) { transition: none !important; }
html.no-motion .fz-serie .fz-folge.is-an, [data-motion="reduced"] .fz-serie .fz-folge.is-an { animation: none; }
html.no-motion.fz-js .fz-marker[data-fz-zeichnen] :is(.fz-pfeil, .fz-pfeil__spitze, .fz-marker__marke),
[data-motion="reduced"].fz-js .fz-marker[data-fz-zeichnen] :is(.fz-pfeil, .fz-pfeil__spitze, .fz-marker__marke) { transition: none !important; stroke-dashoffset: 0 !important; opacity: 1 !important; }

/* ─── Druck ─── */
@media print {
  .fz-gross, .fz-etagen__leiste, .fz-serie__steuer, .fz-serie__segmente, .fz-stapel__steuer, .fz-video__play, .fz-video__ton, .fz-play, .fz-filter, .fz-paar__steuer, .fz-schalter, .fz-folge__gross { display: none !important; }
  .fz-video__v { display: none !important; } .fz-video__druck { display: block !important; width: 100%; height: auto; }
  .fz-serie .fz-folge, .fz-stapel .fz-karte { display: grid !important; position: static !important; transform: none !important; opacity: 1 !important; }
  .fz-halten__bild { opacity: 1 !important; }
  .fz-steckbrief { position: static !important; }
  .fz-paar, .fz-karte, .fz-folge, .fz-tag, .fz-zone { break-inside: avoid; page-break-inside: avoid; }
  .fz-matrix__zelle, .fz-waffel__raster li, .fz-buchstabe { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}