/* ==========================================================================
   rk-wow-referenz.css — Bausteine für Referenz- und Nachweisseiten (Skill rauMKult-Webseiten, Spec 224)
   Version: 1.0 | 2026-10-15 | Spec 224: aus den seitenlokalen Bausteinen (Präfix fz-) der Referenz „Treppenhaus Neubau-Bürogebäude Dresden“
   (Marketing/projektreferenzen/vorlagen/referenz-frenzel.css, 2026-10-14) zentral übernommen und umbenannt: fz- → rk-wow-.
   Enthalten: Zahlen-Treppe (rk-wow-stufen), Zonen-Doppelspalte (rk-wow-zonen), Zonenplan (rk-wow-plan), Waffel-Raster (rk-wow-waffel),
   Serienstreifen (rk-wow-serie), Fugenschnitt (rk-wow-schnitt), Kartenstapel (rk-wow-stapel), Großansicht (rk-wow-gross),
   Phasen-Matrix (rk-wow-matrix); dazu die Hilfsbausteine Marker auf Bild (rk-wow-marker), Video mit Standbild (rk-wow-video)
   und Play-Zeichen (rk-wow-play), die Serie und Stapel brauchen. Das Verhalten steht in rk-wow-referenz.js, die Markup-Verträge in docs/rk-wow-referenz-bausteine.md.
   Geladen wird die Datei nur auf Seiten mit `rkWowReferenz: true` im Front-Matter (layouts/base.njk), nicht auf jeder Seite.
   Regel: nur Anordnung; Farben, Radien, Schatten und Schrift aus den Website-Token (main-v2.css, rk-wow.css). Mobile first, Hell und Dunkel,
   reduzierte Bewegung (prefers-reduced-motion, html.no-motion, [data-motion="reduced"]), Fokus sichtbar.
   ========================================================================== */
:root {
  /* Phasen: reinigen, füllen, retuschieren, Läufe und Decken, Nachtrag; f = Nachtrag, g = Arbeitstag nach dem Einzug (gemischt) */
  --rk-wow-ph-a: #6f8fa6; --rk-wow-ph-b: #c8a56a; --rk-wow-ph-c: #9bb08a; --rk-wow-ph-d: #8a7fb0; --rk-wow-ph-e: #d0765a;
  --rk-wow-ph-f: color-mix(in srgb, var(--rk-wow-ph-b) 50%, var(--rk-wow-ph-e));
  --rk-wow-ph-g: color-mix(in srgb, var(--rk-wow-ph-a) 50%, var(--rk-wow-ph-c));
  --rk-wow-ph-ink: #14120e;
  /* Zonen-Flächenmuster (neutral, keine Wertungsfarben): Betonfertigteil = feine Lagen, Ortbeton = Poren */
  --rk-wow-muster-bft: repeating-linear-gradient(0deg, color-mix(in srgb, var(--text-muted) 55%, transparent) 0 1.5px, transparent 1.5px 6px);
  --rk-wow-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;
  --rk-wow-glas: color-mix(in srgb, var(--rk-wow-card) 88%, transparent);
  --rk-wow-erhaben: 0 1px 2px color-mix(in srgb, var(--rk-wow-dark-bg) 10%, transparent), 0 10px 28px color-mix(in srgb, var(--rk-wow-dark-bg) 12%, transparent);
  --rk-wow-erhaben-stark: 0 2px 4px color-mix(in srgb, var(--rk-wow-dark-bg) 14%, transparent), 0 18px 48px color-mix(in srgb, var(--rk-wow-dark-bg) 22%, transparent);
}
:root[data-theme="dark"] {
  --rk-wow-erhaben: inset 0 1px 0 color-mix(in srgb, var(--rk-wow-dark-text) 9%, transparent), 0 0 0 1px color-mix(in srgb, var(--rk-wow-dark-text) 7%, transparent), 0 12px 30px color-mix(in srgb, var(--rk-wow-dark-bg) 70%, transparent), 0 0 26px color-mix(in srgb, var(--rk-wow-dark-text) 4%, transparent);
  --rk-wow-erhaben-stark: inset 0 1px 0 color-mix(in srgb, var(--rk-wow-dark-text) 14%, transparent), 0 0 0 1px color-mix(in srgb, var(--rk-wow-dark-text) 14%, transparent), 0 24px 60px color-mix(in srgb, var(--rk-wow-dark-bg) 85%, transparent), 0 0 60px color-mix(in srgb, var(--rk-wow-dark-text) 9%, transparent);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --rk-wow-erhaben: inset 0 1px 0 color-mix(in srgb, var(--rk-wow-dark-text) 9%, transparent), 0 0 0 1px color-mix(in srgb, var(--rk-wow-dark-text) 7%, transparent), 0 12px 30px color-mix(in srgb, var(--rk-wow-dark-bg) 70%, transparent), 0 0 26px color-mix(in srgb, var(--rk-wow-dark-text) 4%, transparent);
    --rk-wow-erhaben-stark: inset 0 1px 0 color-mix(in srgb, var(--rk-wow-dark-text) 14%, transparent), 0 0 0 1px color-mix(in srgb, var(--rk-wow-dark-text) 14%, transparent), 0 24px 60px color-mix(in srgb, var(--rk-wow-dark-bg) 85%, transparent), 0 0 60px color-mix(in srgb, var(--rk-wow-dark-text) 9%, transparent);
  }
}
[data-phase="a"] { --rk-wow-ph: var(--rk-wow-ph-a); } [data-phase="b"] { --rk-wow-ph: var(--rk-wow-ph-b); } [data-phase="c"] { --rk-wow-ph: var(--rk-wow-ph-c); }
[data-phase="d"] { --rk-wow-ph: var(--rk-wow-ph-d); } [data-phase="e"] { --rk-wow-ph: var(--rk-wow-ph-e); } [data-phase="f"] { --rk-wow-ph: var(--rk-wow-ph-f); } [data-phase="g"] { --rk-wow-ph: var(--rk-wow-ph-g); }
.rk-wow-phasenpunkt { display: inline-block; width: 10px; height: 10px; margin-right: 10px; border-radius: 50%; background: var(--rk-wow-ph, currentColor); vertical-align: middle; }
/* Ziel eines Sprungs (Zonenplan-Punkt, Matrix-Zelle) wird kurz markiert */
.rk-wow-ziel { box-shadow: 0 0 0 2px var(--rk-gold-text), var(--rk-wow-erhaben); }

/* ─── Zonen-Etikett und Zonen-Symbol (Teil von rk-wow-zonen) ─── */.rk-wow-zone-ico { display: inline-block; flex: none; width: 18px; height: 18px; border: 1px solid var(--rk-wow-line-strong); border-radius: 4px; background: var(--rk-wow-muster-bft), var(--rk-wow-card); vertical-align: -3px; }
.rk-wow-zone-ico[data-zone="ortbeton"] { background: var(--rk-wow-muster-ob), var(--rk-wow-card); }
.rk-wow-zone-ico[data-zone="beide"] { background: linear-gradient(90deg, transparent 50%, var(--rk-wow-card) 50%), var(--rk-wow-muster-bft), var(--rk-wow-card); position: relative; }
.rk-wow-zone-ico[data-zone="beide"]::after { content: ""; position: absolute; inset: 0 0 0 50%; border-radius: 0 3px 3px 0; background: var(--rk-wow-muster-ob); }
.rk-wow-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(--rk-wow-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); }
.rk-wow-etikett--bild { position: absolute; z-index: 2; }
.rk-wow-etikett--oben-rechts { top: 12px; right: 12px; } .rk-wow-etikett--oben-links { top: 12px; left: 12px; }


/* ==========================================================================
   Marker auf Bild (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.
   ========================================================================== */
.rk-wow-marker { --rk-wow-ar: 1; position: relative; width: min(100%, calc(var(--rk-wow-maxh, 78vh) * var(--rk-wow-ar))); margin-inline: auto; }
.rk-wow-marker > img, .rk-wow-marker > .rk-wow-marker__bild { display: block; width: 100%; height: auto; border-radius: inherit; }
.rk-wow-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 */
.rk-wow-marker__ebene line, .rk-wow-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; }
.rk-wow-marker__ebene .rk-wow-marker__schatten { stroke: color-mix(in srgb, var(--rk-wow-dark-bg) 55%, transparent); stroke-width: 5; }
.rk-wow-marker__ebene .rk-wow-pfeil { stroke: var(--rk-wow-dark-gold); stroke-width: 4; }
.rk-wow-marker__ebene .rk-wow-pfeil__spitze { fill: var(--rk-wow-dark-gold); stroke: none; }
.rk-wow-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; }
.rk-wow-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; }
.rk-wow-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; }
.rk-wow-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); }
.rk-wow-marker__knopf::before { content: ""; position: absolute; inset: -4px; border-radius: 50%; }   /* Tippfläche 48 px */
.rk-wow-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) { .rk-wow-marker__knopf:hover { transform: scale(1.08); } }
.rk-wow-marker__knopf:focus-visible { outline: 3px solid var(--rk-wow-dark-ink); outline-offset: 3px; }
.rk-wow-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(--rk-wow-erhaben-stark); pointer-events: auto; }
.rk-wow-marker__feld[data-oben] { top: auto; bottom: calc(100% - var(--y) + 30px); }
.rk-wow-marker__feld[hidden] { display: none; }
.rk-wow-marker__feld :is(h4, .rk-wow-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; }
.rk-wow-marker__feld p { margin: 0; color: var(--text-secondary); font-size: var(--rk-wow-fs-meta); line-height: 1.5; }
.rk-wow-marker__feld .rk-wow-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); }
.rk-wow-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; }
.rk-wow-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.rk-wow-js .rk-wow-marker[data-rk-wow-zeichnen] .rk-wow-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.rk-wow-js .rk-wow-marker[data-rk-wow-zeichnen] .rk-wow-pfeil__spitze { opacity: 0; transition: opacity .3s var(--rk-wow-ease) 1.2s; }
html.rk-wow-js .rk-wow-marker[data-rk-wow-zeichnen] .rk-wow-marker__marke { opacity: 0; transition: opacity .4s var(--rk-wow-ease) 1.1s; }
html.rk-wow-js .rk-wow-marker[data-rk-wow-zeichnen].is-in .rk-wow-pfeil { stroke-dashoffset: 0; }
html.rk-wow-js .rk-wow-marker[data-rk-wow-zeichnen].is-in :is(.rk-wow-pfeil__spitze, .rk-wow-marker__marke) { opacity: 1; }
/* Liste unter dem Bild (Legende; ohne JS die einzige Darstellung der Punkte) */
.rk-wow-marker__liste { display: grid; gap: 4px 20px; margin: 16px 0 0; padding: 0; list-style: none; counter-reset: fzm; }
@media (min-width: 640px) { .rk-wow-marker__liste { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.rk-wow-marker__liste li { border-bottom: 1px solid var(--rk-wow-line); }
.rk-wow-marker__liste li > button, .rk-wow-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; }
.rk-wow-marker__liste li > button:focus-visible { outline: 3px solid var(--rk-focus-color, currentColor); outline-offset: 1px; }
@media (hover: hover) { .rk-wow-marker__liste li > button:hover { background: var(--rk-wow-tint); } }
.rk-wow-marker__liste .rk-wow-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; }
.rk-wow-marker__liste b { font-weight: var(--rk-fw-regular, 400); color: var(--text-primary); }
.rk-wow-marker__liste span { color: var(--text-secondary); font-size: var(--rk-wow-fs-meta); line-height: 1.45; }
@media (max-width: 599px) {
  .rk-wow-marker__feld { position: static; width: auto; margin-top: 12px; }
  .rk-wow-marker__knopf { width: 36px; height: 36px; margin: -18px 0 0 -18px; font-size: var(--rk-wow-fs-tag); }
  .rk-wow-marker__etikett { max-width: 46%; }
  .rk-wow-marker__etikett .rk-wow-etikett { padding: 5px 10px 5px 6px; gap: 6px; }
}

/* ==========================================================================
   Zahlen-Treppe (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.
   ========================================================================== */
.rk-wow-stufen-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(--rk-wow-erhaben-stark); }
.rk-wow-stufen-buehne .rk-wow-statement { margin-bottom: clamp(20px, 4vw, 44px); }
.rk-wow-stufen { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; }
.rk-wow-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); }
.rk-wow-stufe__inhalt { min-width: 0; }
.rk-wow-stufe__zahl { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; margin: 0; color: var(--rk-wow-dark-ink); line-height: 1; }
.rk-wow-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 */
.rk-wow-stufe__zahl b, .rk-wow-stufe__ein { white-space: nowrap; }
.rk-wow-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; }
.rk-wow-stufe--wort .rk-wow-stufe__zahl b { font-size: clamp(2.2rem, 1.5rem + 2.8vw, 3.8rem); }
.rk-wow-stufe__ein { font-size: var(--rk-wow-fs-big); color: var(--rk-wow-dark-ink); }
.rk-wow-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; }
.rk-wow-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) {
  .rk-wow-stufen { grid-template-columns: repeat(var(--n, 4), minmax(0, 1fr)); align-items: end; gap: 0; }
  .rk-wow-stufe { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto; align-content: end; gap: 14px; padding: 0; border-top: 0; }
  .rk-wow-stufe__inhalt { padding: 0 clamp(10px, 1.6vw, 22px); }
  .rk-wow-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); }
  .rk-wow-stufe:last-child .rk-wow-stufe__tritt { border-right: 0; }
}

/* ==========================================================================
   Zonen-Doppelspalte (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.
   ========================================================================== */
.rk-wow-zonen { display: grid; gap: 16px; margin: clamp(24px, 3vw, 36px) 0 0; }
@media (min-width: 640px) { .rk-wow-zonen { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.rk-wow-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(--rk-wow-erhaben); }
.rk-wow-zone--beide { grid-column: 1 / -1; }
.rk-wow-zone__kopf { display: flex; align-items: center; gap: 10px; margin: 0; }
.rk-wow-zone__kopf .rk-wow-zone-ico { width: 28px; height: 28px; border-radius: 6px; }
.rk-wow-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); }
.rk-wow-zone__ort { margin: 2px 0 0; font-size: var(--rk-wow-fs-tag); color: var(--text-muted); }
.rk-wow-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%; }
.rk-wow-zone__bild img { display: block; width: 100%; height: 100%; object-fit: cover; }
.rk-wow-zone__punkte { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.rk-wow-zone__punkte li { display: grid; grid-template-columns: 14px minmax(0, 1fr); gap: 10px; color: var(--text-secondary); line-height: 1.5; }
.rk-wow-zone__punkte li::before { content: ""; width: 8px; height: 8px; margin-top: .6em; border-radius: 50%; background: var(--rk-gold-text); }
.rk-wow-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 */
.rk-wow-befunde { display: grid; gap: 4px; margin: 0; padding: 0; list-style: none; }
.rk-wow-zone--beide .rk-wow-befunde { gap: 4px 20px; }
@media (min-width: 900px) { .rk-wow-zone--beide .rk-wow-befunde { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.rk-wow-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.rk-wow-befund { cursor: default; }
button.rk-wow-befund__bild { width: 100%; padding: 0; border: 0; cursor: zoom-in; }
@media (hover: hover) { .rk-wow-befund:hover { background: var(--rk-wow-tint); } }
.rk-wow-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(--rk-wow-erhaben); }
.rk-wow-befund__bild img { display: block; width: 100%; height: 100%; object-fit: cover; }
.rk-wow-befund__zahl svg { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 2; }
.rk-wow-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; }
.rk-wow-befund__body { display: grid; gap: 4px; min-width: 0; }
.rk-wow-befund__titel { font-size: var(--rk-wow-fs-meta); color: var(--text-primary); line-height: 1.35; }
.rk-wow-befund__ort { font-size: var(--rk-wow-fs-tag); color: var(--rk-gold-text); }
.rk-wow-befund__text { font-size: var(--rk-wow-fs-meta); color: var(--text-secondary); line-height: 1.5; }
@media (max-width: 420px) { .rk-wow-befund { grid-template-columns: 72px minmax(0, 1fr); gap: 12px; padding: 8px 4px; } }

/* ==========================================================================
   Zonenplan (rk-wow-plan)
   Schematische Draufsicht aus Daten: Wände als Segmente mit Zonenmuster, Treppenauge, Punkte springen zu den Paaren.
   ========================================================================== */
.rk-wow-plan { display: grid; gap: 8px; margin: 0 0 16px; }
.rk-wow-plan__titel { margin: 0; font-size: var(--rk-wow-fs-tag); letter-spacing: .1em; text-transform: uppercase; color: var(--rk-gold-text); }
.rk-wow-plan svg { display: block; width: 100%; max-width: 240px; height: auto; overflow: visible; }
.rk-wow-plan .rk-wow-plan__raum { fill: var(--rk-wow-tint); stroke: var(--rk-wow-line-strong); stroke-width: 1; }
.rk-wow-plan .rk-wow-plan__wand { stroke: var(--text-primary); stroke-width: 1.2; }
.rk-wow-plan .rk-wow-plan__wand[data-zone="betonfertigteil"] { fill: url(#rk-wow-muster-bft); }
.rk-wow-plan .rk-wow-plan__wand[data-zone="ortbeton"] { fill: url(#rk-wow-muster-ob); }
.rk-wow-plan .rk-wow-plan__auge { fill: var(--rk-wow-card); stroke: var(--rk-wow-line-strong); stroke-dasharray: 3 3; }
.rk-wow-plan .rk-wow-plan__stufe { stroke: var(--rk-wow-line-strong); stroke-width: 1; }
.rk-wow-plan .rk-wow-plan__fenster { stroke: var(--rk-wow-card); stroke-width: 3; }
.rk-wow-plan .rk-wow-plan__fenster-linie { stroke: var(--text-muted); stroke-width: 1; }
.rk-wow-plan .rk-wow-plan__muster-strich { stroke: var(--text-muted); stroke-width: 1; }
.rk-wow-plan .rk-wow-plan__muster-pore { fill: var(--text-muted); }
.rk-wow-plan .rk-wow-plan__muster-grund { fill: var(--rk-wow-card); }
.rk-wow-plan .rk-wow-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; }
.rk-wow-plan .rk-wow-plan__punkt text { fill: var(--rk-wow-dark-ink); font-size: 11px; font-family: inherit; text-anchor: middle; dominant-baseline: central; pointer-events: none; }
.rk-wow-plan .rk-wow-plan__punkt:hover circle, .rk-wow-plan .rk-wow-plan__punkt:focus-visible circle { transform: scale(1.18); fill: var(--rk-wow-dark-gold); }
.rk-wow-plan .rk-wow-plan__punkt:hover text, .rk-wow-plan .rk-wow-plan__punkt:focus-visible text { fill: var(--rk-wow-dark-bg); }
.rk-wow-plan .rk-wow-plan__punkt:focus-visible { outline: none; }
.rk-wow-plan .rk-wow-plan__punkt:focus-visible circle { stroke: var(--rk-focus-color, currentColor); stroke-width: 3; }
.rk-wow-plan .rk-wow-plan__lbl { fill: var(--text-muted); font-size: 10px; font-family: inherit; }
.rk-wow-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; }
.rk-wow-plan__legende li { display: grid; grid-template-columns: 18px minmax(0, 1fr); gap: 8px; align-items: start; }
.rk-wow-plan__hinweis { margin: 0; font-size: var(--rk-wow-fs-tag); color: var(--text-muted); line-height: 1.4; }

/* ==========================================================================
   Waffel-Raster (rk-wow-waffel)
   100 Kästchen nach Anteil, Legende mit Farbpunkt und Buchstabe als Knopf (hervorheben) plus Sprung ins Kapitel. Ohne JS: Tabelle.
   ========================================================================== */
.rk-wow-waffel { display: grid; gap: clamp(20px, 4vw, 48px); align-items: center; margin-top: clamp(20px, 3vw, 32px); }
@media (min-width: 900px) { .rk-wow-waffel { grid-template-columns: minmax(0, 440px) minmax(0, 1fr); } }
.rk-wow-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(--rk-wow-erhaben); }
.rk-wow-waffel.is-live .rk-wow-waffel__raster { display: grid; }
.rk-wow-waffel__raster li { aspect-ratio: 1; border-radius: 4px; background: var(--rk-wow-ph); transition: opacity .3s var(--rk-wow-ease), transform .3s var(--rk-wow-ease); }
.rk-wow-waffel[data-hervor] .rk-wow-waffel__raster li { opacity: .18; }
.rk-wow-waffel[data-hervor="a"] .rk-wow-waffel__raster li[data-phase="a"], .rk-wow-waffel[data-hervor="b"] .rk-wow-waffel__raster li[data-phase="b"],
.rk-wow-waffel[data-hervor="c"] .rk-wow-waffel__raster li[data-phase="c"], .rk-wow-waffel[data-hervor="d"] .rk-wow-waffel__raster li[data-phase="d"],
.rk-wow-waffel[data-hervor="e"] .rk-wow-waffel__raster li[data-phase="e"] { opacity: 1; transform: scale(1.06); }
.rk-wow-waffel__legende { display: none; gap: 6px; margin: 0; padding: 0; list-style: none; }
.rk-wow-waffel.is-live .rk-wow-waffel__legende { display: grid; }
.rk-wow-waffel.is-live .rk-wow-waffel__tabelle { display: none; }
.rk-wow-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); }
.rk-wow-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; }
.rk-wow-waffel__knopf[aria-pressed="true"] { border-color: var(--rk-wow-line-strong); background: var(--rk-wow-tint); }
@media (hover: hover) { .rk-wow-waffel__knopf:hover { background: var(--rk-wow-tint); } }
.rk-wow-buchstabe { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--rk-wow-ph); color: var(--rk-wow-ph-ink); font-size: var(--rk-wow-fs-meta); line-height: 1; }
.rk-wow-waffel__name { line-height: 1.3; }
.rk-wow-waffel__pz { font-size: var(--rk-wow-fs-title); font-variant-numeric: tabular-nums; color: var(--text-primary); }
.rk-wow-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; }
.rk-wow-waffel__sprung:hover { color: var(--rk-gold-text); }
.rk-wow-waffel__tabelle { width: 100%; border-collapse: collapse; }
.rk-wow-waffel__tabelle th, .rk-wow-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); }
.rk-wow-waffel__tabelle td:last-child, .rk-wow-waffel__tabelle th:last-child { text-align: right; font-variant-numeric: tabular-nums; }
.rk-wow-waffel__fuss { margin: 14px 0 0; max-width: 60ch; font-size: var(--rk-wow-fs-meta); color: var(--text-muted); line-height: 1.5; }

/* ==========================================================================
   Serienstreifen (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.
   ========================================================================== */
.rk-wow-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(--rk-wow-erhaben); }
.rk-wow-serie__kopf { display: grid; gap: 4px; }
.rk-wow-serie__kicker { margin: 0; font-size: var(--rk-wow-fs-tag); letter-spacing: .12em; text-transform: uppercase; color: var(--rk-gold-text); }
.rk-wow-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); }
.rk-wow-serie__haken { margin: 0; color: var(--text-secondary); line-height: 1.5; }
.rk-wow-serie__segmente { display: none; gap: 4px; margin: 0; padding: 0; list-style: none; }
.rk-wow-serie__seg { position: relative; display: block; width: 100%; height: 24px; padding: 0; border: 0; background: transparent; cursor: pointer; }
.rk-wow-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); }
.rk-wow-serie__seg.is-gesehen::before { background: color-mix(in srgb, var(--rk-gold-text) 55%, var(--rk-wow-line-strong)); }
.rk-wow-serie__seg[aria-current]::before { background: var(--rk-gold-text); }
.rk-wow-serie__seg:focus-visible { outline: 3px solid var(--rk-focus-color, currentColor); outline-offset: 1px; border-radius: 4px; }
.rk-wow-serie__folgen { display: grid; gap: 18px; margin: 0; padding: 0; list-style: none; }
@media (min-width: 700px) { .rk-wow-serie__folgen { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.rk-wow-folge { display: grid; gap: 10px; align-content: start; min-width: 0; margin: 0; }
.rk-wow-folge__buehne { position: relative; overflow: hidden; border-radius: var(--rk-wow-r-md); background: var(--rk-wow-dark-bg); aspect-ratio: 4 / 5; }
.rk-wow-folge__buehne > img, .rk-wow-folge__buehne > video { display: block; width: 100%; height: 100%; }
.rk-wow-folge__buehne > img, .rk-wow-folge__buehne > video { object-fit: contain; }
.rk-wow-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(--rk-wow-glas); color: var(--text-primary); cursor: zoom-in; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.rk-wow-folge__gross svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.rk-wow-folge__text { display: grid; gap: 6px; }
.rk-wow-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); }
.rk-wow-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; }
.rk-wow-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); }
.rk-wow-folge__text p { margin: 0; color: var(--text-secondary); line-height: 1.6; max-width: 56ch; }
.rk-wow-serie__steuer { display: none; grid-template-columns: 48px minmax(0, 1fr) 48px; align-items: center; gap: 12px; }
.rk-wow-serie__zahl { text-align: center; color: var(--text-muted); font-size: var(--rk-wow-fs-meta); font-variant-numeric: tabular-nums; }
.rk-wow-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; }
.rk-wow-runder-knopf svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.rk-wow-runder-knopf:disabled { opacity: .4; cursor: default; box-shadow: none; }
/* Live: eine Folge, Segmente, Wischen */
.rk-wow-serie.is-live .rk-wow-serie__segmente { display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); }
.rk-wow-serie.is-live .rk-wow-serie__steuer { display: grid; }
.rk-wow-serie.is-live .rk-wow-serie__folgen { display: block; touch-action: pan-y; }
.rk-wow-serie.is-live .rk-wow-folge { display: none; }
.rk-wow-serie.is-live .rk-wow-folge.is-an { display: grid; animation: rk-wow-ein .45s var(--rk-wow-ease); }
.rk-wow-serie.is-live .rk-wow-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) {
  .rk-wow-serie.is-live .rk-wow-folge.is-an { grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: 24px; align-items: center; }
  .rk-wow-serie.is-live .rk-wow-folge__buehne { max-height: 72vh; }
}
@keyframes rk-wow-ein { from { opacity: 0; transform: translateX(var(--rk-wow-dx, 18px)); } to { opacity: 1; transform: none; } }
.rk-wow-serie__einschuebe { display: grid; gap: 10px; margin: 6px 0 0; padding: 0; list-style: none; }
@media (min-width: 700px) { .rk-wow-serie__einschuebe { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.rk-wow-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); }
.rk-wow-einschub__kicker { margin: 0; font-size: var(--rk-wow-fs-tag); letter-spacing: .1em; text-transform: uppercase; color: var(--rk-gold-text); }
.rk-wow-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); }
.rk-wow-einschub p { margin: 0; color: var(--text-secondary); font-size: var(--rk-wow-fs-meta); line-height: 1.55; }
.rk-wow-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; }
.rk-wow-einschub__sprung:hover { color: var(--rk-gold-text); }
.rk-wow-einschub__medien { display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 0; padding: 0; list-style: none; }

.rk-wow-zwischen { margin: 6px 0 0; font-size: var(--rk-wow-fs-tag); letter-spacing: .1em; text-transform: uppercase; color: var(--text-muted); }   /* Zwischenüberschrift in der Serie, z. B. über einer Medienleiste */

/* ─── Video mit Standbild, Play und Ton (eigener Baustein, nichts startet von selbst) ─── */
.rk-wow-video { position: relative; overflow: hidden; background: var(--rk-wow-dark-bg); }
.rk-wow-video__v { display: block; width: 100%; height: 100%; object-fit: cover; background: var(--rk-wow-dark-bg); }
.rk-wow-video__druck { display: none; }
.rk-wow-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); }
.rk-wow-video__play svg, .rk-wow-video__ton svg { width: 24px; height: 24px; fill: currentColor; stroke: none; }
.rk-wow-video__play .rk-wow-i-pause, .rk-wow-video.is-laeuft .rk-wow-video__play .rk-wow-i-play { display: none; }
.rk-wow-video.is-laeuft .rk-wow-video__play .rk-wow-i-pause { display: block; }
.rk-wow-video.is-laeuft .rk-wow-video__play { left: auto; top: auto; right: 10px; bottom: 10px; width: 48px; height: 48px; margin: 0; opacity: .9; }
.rk-wow-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); }
.rk-wow-video__ton svg { width: 20px; height: 20px; }
.rk-wow-video__ton .rk-wow-i-an, .rk-wow-video__ton[aria-pressed="true"] .rk-wow-i-aus { display: none; }
.rk-wow-video__ton[aria-pressed="true"] .rk-wow-i-an { display: block; }
.rk-wow-video.is-laeuft.hat-controls .rk-wow-video__ton, .rk-wow-video.is-laeuft.hat-controls .rk-wow-video__play { bottom: 56px; }
.rk-wow-video__play:focus-visible, .rk-wow-video__ton:focus-visible { outline: 3px solid var(--rk-wow-dark-ink); outline-offset: 3px; }
.rk-wow-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); }
.rk-wow-play svg { width: 16px; height: 16px; fill: currentColor; stroke: none; }

/* ==========================================================================
   Fugenschnitt (rk-wow-schnitt)
   Querschnitt einer Betonfertigteilfuge mit leichtem Versatz, Schichten 1–5 nummeriert, Zustand „Licht“ mit Lichtstrahl am Versatz.
   ========================================================================== */
.rk-wow-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(--rk-wow-erhaben); }
.rk-wow-schnitt__kopf { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 10px 20px; }
.rk-wow-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); }
.rk-wow-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); }
.rk-wow-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; }
.rk-wow-schalter button[aria-pressed="true"] { background: var(--text-primary); color: var(--rk-wow-card); }
.rk-wow-schnitt__raster { display: grid; gap: 18px; align-items: center; }
@media (min-width: 900px) { .rk-wow-schnitt__raster { grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); } }
.rk-wow-schnitt svg { display: block; width: 100%; height: auto; overflow: visible; }
.rk-wow-schnitt .rk-wow-s-teil { fill: var(--rk-wow-tint); stroke: var(--text-muted); stroke-width: 1.5; }
.rk-wow-schnitt .rk-wow-s-korn { fill: color-mix(in srgb, var(--text-muted) 30%, transparent); }
.rk-wow-schnitt .rk-wow-s-flanke { fill: none; stroke: var(--text-primary); stroke-width: 2; stroke-dasharray: 5 4; }
.rk-wow-schnitt .rk-wow-s-grund { fill: none; stroke: var(--rk-gold-text); stroke-width: 4; stroke-linecap: round; opacity: .85; }
.rk-wow-schnitt .rk-wow-s-moertel { fill: color-mix(in srgb, var(--text-muted) 55%, var(--rk-wow-card)); stroke: none; }
.rk-wow-schnitt .rk-wow-s-schnitt { fill: none; stroke: var(--text-primary); stroke-width: 2; }
.rk-wow-schnitt .rk-wow-s-retusche { fill: none; stroke: color-mix(in srgb, var(--rk-gold-text) 70%, var(--text-primary)); stroke-width: 3; }
.rk-wow-schnitt .rk-wow-s-marke circle { fill: var(--text-primary); }
.rk-wow-schnitt .rk-wow-s-marke text { fill: var(--rk-wow-card); font-size: 15px; font-family: inherit; text-anchor: middle; dominant-baseline: central; }
.rk-wow-schnitt .rk-wow-s-marke line { stroke: var(--text-primary); stroke-width: 1.2; }
.rk-wow-schnitt .rk-wow-s-luft { fill: var(--text-muted); font-size: 13px; font-family: inherit; }
.rk-wow-schnitt .rk-wow-s-licht { opacity: 0; transition: opacity .5s var(--rk-wow-ease); }
.rk-wow-schnitt .rk-wow-s-strahl { stroke: var(--rk-gold-text); stroke-width: 2; stroke-dasharray: 8 6; fill: none; }
.rk-wow-schnitt .rk-wow-s-hell { fill: color-mix(in srgb, var(--rk-gold-text) 22%, transparent); }
.rk-wow-schnitt .rk-wow-s-schatten { fill: color-mix(in srgb, var(--text-primary) 18%, transparent); }
.rk-wow-schnitt .rk-wow-s-versatz { stroke: var(--rk-wow-accent-line); stroke-width: 2; fill: none; }
.rk-wow-schnitt .rk-wow-s-versatz-text { fill: var(--text-primary); font-size: 14px; font-family: inherit; }
.rk-wow-schnitt[data-zustand="licht"] .rk-wow-s-licht { opacity: 1; }
.rk-wow-schnitt[data-zustand="licht"] .rk-wow-s-marke { opacity: .25; }
.rk-wow-schnitt__liste { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.rk-wow-schnitt__liste li { display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 2px 12px; }
.rk-wow-schnitt__liste .rk-wow-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); }
.rk-wow-schnitt__liste b { font-weight: var(--rk-fw-regular, 400); color: var(--text-primary); }
.rk-wow-schnitt__liste span { color: var(--text-secondary); font-size: var(--rk-wow-fs-meta); line-height: 1.5; }
.rk-wow-schnitt__licht { display: none; gap: 6px; padding: 14px 16px; border-radius: var(--rk-wow-r-md); background: var(--rk-wow-tint); }
.rk-wow-schnitt__licht b { font-weight: var(--rk-fw-regular, 400); font-size: var(--rk-wow-fs-lead); color: var(--text-primary); }
.rk-wow-schnitt__licht p { margin: 0; color: var(--text-secondary); line-height: 1.55; }
.rk-wow-schnitt[data-zustand="licht"] .rk-wow-schnitt__liste { display: none; }
.rk-wow-schnitt[data-zustand="licht"] .rk-wow-schnitt__licht { display: grid; }
.rk-wow-schnitt__hinweis { margin: 0; font-size: var(--rk-wow-fs-tag); color: var(--text-muted); }

/* ==========================================================================
   Kartenstapel (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.
   ========================================================================== */
.rk-wow-stapel { display: grid; gap: 18px; justify-items: center; margin-top: clamp(20px, 3vw, 32px); }
.rk-wow-stapel__ort { margin: 0; max-width: 60ch; text-align: center; color: var(--text-secondary); line-height: 1.5; }
.rk-wow-stapel__karten { display: grid; gap: 18px; width: min(100%, 440px); margin: 0; padding: 0; list-style: none; }
.rk-wow-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(--rk-wow-erhaben); }
.rk-wow-karte__bild { position: relative; margin: 0; background: var(--rk-wow-dark-bg); }
.rk-wow-karte__bild > img { display: block; width: 100%; height: auto; max-height: 54vh; object-fit: contain; margin-inline: auto; }
.rk-wow-karte__text { display: grid; gap: 6px; padding: 16px 18px 18px; }
.rk-wow-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); }
.rk-wow-karte__stufe span { font-size: var(--rk-wow-fs-tag); letter-spacing: .12em; color: var(--rk-gold-text); font-variant-numeric: tabular-nums; }
.rk-wow-karte__text p { margin: 0; color: var(--text-secondary); line-height: 1.55; }
.rk-wow-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; }
.rk-wow-karte__video svg { width: 18px; height: 18px; fill: currentColor; }
.rk-wow-karte--platz { border-style: dashed; border-color: var(--rk-wow-line-strong); background: var(--rk-wow-tint); box-shadow: none; }
.rk-wow-karte--platz .rk-wow-karte__bild { display: grid; place-items: center; min-height: 260px; background: var(--rk-wow-muster-bft), var(--rk-wow-tint); }
.rk-wow-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); }
.rk-wow-karte__platzhalter svg { width: 34px; height: 34px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.rk-wow-stapel__steuer { display: none; grid-template-columns: 48px minmax(0, 1fr) 48px; gap: 16px; align-items: center; width: min(100%, 440px); }
.rk-wow-stapel__zahl { text-align: center; font-size: var(--rk-wow-fs-title); color: var(--text-primary); font-variant-numeric: tabular-nums; }
.rk-wow-stapel__hinweis { margin: 0; text-align: center; font-size: var(--rk-wow-fs-tag); color: var(--text-muted); }
.rk-wow-stapel__galerie { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 0; padding: 0; list-style: none; }
.rk-wow-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; }
.rk-wow-stapel__galerie img { display: block; width: 100%; aspect-ratio: 3 / 4; object-fit: cover; }
/* Live: Karten liegen übereinander */
.rk-wow-stapel.is-live .rk-wow-stapel__steuer { display: grid; }
.rk-wow-stapel.is-live .rk-wow-stapel__karten { gap: 0; padding-bottom: 34px; touch-action: pan-y; outline: none; }
.rk-wow-stapel.is-live .rk-wow-stapel__karten:focus-visible { outline: 3px solid var(--rk-focus-color, currentColor); outline-offset: 6px; border-radius: var(--rk-wow-r-card); }
.rk-wow-stapel.is-live .rk-wow-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); }
.rk-wow-stapel.is-live .rk-wow-karte[data-p="0"] { box-shadow: var(--rk-wow-erhaben-stark); cursor: pointer; }
.rk-wow-stapel.is-live .rk-wow-karte:not([data-p="0"]) { pointer-events: none; }
.rk-wow-stapel.is-live .rk-wow-karte:not([data-p="0"]) .rk-wow-karte__text { visibility: hidden; }
.rk-wow-stapel.is-live .rk-wow-karte[data-p="3"], .rk-wow-stapel.is-live .rk-wow-karte.is-hinten { opacity: 0; }
.rk-wow-stapel.is-live .rk-wow-karte.is-weg { transform: translate(var(--rk-wow-weg, -110%), 4%) rotate(-8deg); opacity: 0; }

/* ─── Großansicht mit Blättern (eigenes Fenster, zentriert; übernommen aus fb-gross) ─── */
.rk-wow-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(--rk-wow-erhaben-stark); }
.rk-wow-gross::backdrop { background: color-mix(in srgb, var(--rk-wow-dark-bg) 80%, transparent); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
.rk-wow-gross__rahmen { position: relative; display: grid; grid-template-rows: minmax(0, 1fr) auto; gap: 10px; max-height: 94vh; padding: 12px; box-sizing: border-box; }
.rk-wow-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; }
.rk-wow-gross__inhalt img, .rk-wow-gross__inhalt video { display: block; width: auto; height: auto; max-width: 100%; max-height: calc(94vh - 160px); }
.rk-wow-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; }
.rk-wow-gross__text { grid-area: t; margin: 0; color: var(--text-secondary); font-size: var(--rk-wow-fs-meta); line-height: 1.5; }
.rk-wow-gross__zahl { grid-area: n; color: var(--text-muted); font-size: var(--rk-wow-fs-tag); }
.rk-wow-gross__pfeil[data-rk-wow-schritt="-1"] { grid-area: z; } .rk-wow-gross__pfeil[data-rk-wow-schritt="1"] { grid-area: w; }
.rk-wow-gross__pfeil[hidden] { display: grid; visibility: hidden; }
.rk-wow-gross__pfeil, .rk-wow-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; }
.rk-wow-gross__zu { position: absolute; top: 18px; right: 18px; z-index: 2; }
.rk-wow-gross__pfeil:focus-visible, .rk-wow-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(.rk-wow-gross__pfeil, .rk-wow-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(.rk-wow-gross__pfeil, .rk-wow-gross__zu) svg { stroke: currentColor; fill: none; stroke-width: 2.2; }
:root[data-theme="dark"] .rk-wow-gross__pfeil svg path[fill]:not([fill="none"]) { fill: currentColor; }
:root[data-theme="dark"] :is(.rk-wow-gross__pfeil, .rk-wow-gross__zu):is(:hover, :focus-visible) { background: var(--rk-wow-dark-gold); color: var(--rk-wow-dark-bg); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) :is(.rk-wow-gross__pfeil, .rk-wow-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(.rk-wow-gross__pfeil, .rk-wow-gross__zu) svg { stroke: currentColor; fill: none; stroke-width: 2.2; }
  :root:not([data-theme="light"]) :is(.rk-wow-gross__pfeil, .rk-wow-gross__zu):is(:hover, :focus-visible) { background: var(--rk-wow-dark-gold); color: var(--rk-wow-dark-bg); }
}
:root[data-theme="dark"] .rk-wow-gross { background: color-mix(in srgb, var(--rk-wow-dark-text) 9%, var(--rk-wow-dark-bg)); box-shadow: var(--rk-wow-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"]) .rk-wow-gross { background: color-mix(in srgb, var(--rk-wow-dark-text) 9%, var(--rk-wow-dark-bg)); box-shadow: var(--rk-wow-erhaben-stark), 0 0 80px color-mix(in srgb, var(--rk-gold-text) 18%, transparent); } }

/* ==========================================================================
   Phasen-Matrix (rk-wow-matrix): Phasen × Tage mit Personenstunden, Kopfzeile je Tag, Spalte „folgt“, Handy gedreht
   ========================================================================== */
.rk-wow-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(--rk-wow-erhaben); }
.rk-wow-matrix { width: 100%; min-width: 980px; border-collapse: separate; border-spacing: 0; font-size: var(--rk-wow-fs-meta); }
.rk-wow-matrix th, .rk-wow-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); }
.rk-wow-matrix thead th { vertical-align: bottom; }
.rk-wow-matrix__tag { display: grid; gap: 2px; justify-items: center; }
.rk-wow-matrix__tag b { font-weight: var(--rk-fw-regular, 400); color: var(--text-primary); font-variant-numeric: tabular-nums; }
.rk-wow-matrix__tag small { font-size: var(--rk-wow-fs-tag); color: var(--text-muted); line-height: 1.3; font-variant-numeric: tabular-nums; }
.rk-wow-matrix__tag .rk-wow-plus { color: var(--rk-wow-pos); }
.rk-wow-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); }
.rk-wow-matrix tbody th .rk-wow-phasenpunkt { margin-right: 8px; }
.rk-wow-matrix thead th:first-child { position: sticky; left: 0; z-index: 1; background: var(--rk-wow-card); }
.rk-wow-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(--rk-wow-ph); color: var(--rk-wow-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) { .rk-wow-matrix__zelle:hover { transform: translateY(-1px); box-shadow: var(--rk-wow-sh-2); } }
.rk-wow-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(--rk-wow-muster-bft); background-blend-mode: normal; }
.rk-wow-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); }
.rk-wow-matrix__trenn { border-left: 2px solid var(--rk-wow-line-strong) !important; }
.rk-wow-matrix tfoot th, .rk-wow-matrix tfoot td { color: var(--text-primary); border-bottom: 0; font-variant-numeric: tabular-nums; }
.rk-wow-matrix tfoot th { position: sticky; left: 0; background: var(--rk-wow-card); text-align: left; padding-left: 14px; }
.rk-wow-matrix-handy { display: none; gap: 10px; margin: clamp(18px, 3vw, 28px) 0 0; padding: 0; list-style: none; }
.rk-wow-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(--rk-wow-erhaben); }
.rk-wow-matrix-handy__kopf { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 4px 12px; margin: 0; color: var(--text-primary); }
.rk-wow-matrix-handy__kopf small { color: var(--text-muted); font-size: var(--rk-wow-fs-tag); }
.rk-wow-matrix-handy__chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; }
.rk-wow-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) { .rk-wow-matrix-wrap { display: none; } .rk-wow-matrix-handy { display: grid; } }
.rk-wow-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); }
.rk-wow-legende b { font-weight: var(--rk-fw-regular, 400); color: var(--text-primary); margin-right: 4px; }

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

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