/* ==========================================================================
   referenz-chemnitz.css — seitenlokale Bausteine der zwei Referenzen „KWG Chemnitz“ (Präfix ch-)
   Version: 2.1 | 2026-10-18 (Bezugsrahmen für Herz und Teilen im Einstieg) | Quelle: Marketing/projektreferenzen/vorlagen/ (bauen_chemnitz.py, konzept-v2.md je Seite)
   Seiten: .ch--treppe (Betonoptik-Treppenwand, Leitgedanke „handlauf-stufenlauf“ als Treppenprofil: hell, Papier, Plan),
           .ch--rasen (Designwand schwarz, „lichtprobe“: dunkel, fotografisch, Kamera und Belichtung).
   Regel (Skill rauMKult-Webseiten): nur Anordnung; Farben, Radien, Schatten und Schrift ausschließlich aus Token (main-v2.css, rk-wow.css,
   --ph-erhaben aus referenz-module.css). Keine Literalfarben, kein filter und kein mix-blend-mode, keine Abdunklung über Fotos der Wand.
   Mobile first (390 px), Hell und Dunkel, reduzierte Bewegung (prefers-reduced-motion, html.no-motion, [data-motion="reduced"]),
   Fokus sichtbar (--rk-focus-color), Gold nur als Linie oder Text, keine farbigen Seitenränder an Karten.
   Einblende-Vertrag: Ausgangszustände gelten nur unter html.ch-js.rk-wow-motion und nur bis .is-in; ohne Skript, reduziert und im Druck
   steht alles. Jeder Baustein trägt seinen Arbeitsnamen rk-wow-… für die spätere Zentralisierung durch die Website-Sitzung.
   v2 entfernt: Blickwechsel, Wunschliste, Steckbrief-Spalte, Tonwertleiste, Videoleiste, Doppelkarte, Plattenraster, Übergabe-Band,
   Zeitmarken-Leiste, Sprungknöpfe, Einordnung.
   ========================================================================== */
:root {
  --ch-gold: var(--rk-wow-dark-gold);
}
@property --ch-spalt { syntax: '<percentage>'; inherits: false; initial-value: 11.2%; }
:where(.ch) button { font: inherit; }
.ch .rk-wow-statement__title, .ch-h1 { overflow-wrap: break-word; hyphens: auto; }
.ch-text > p { max-width: 68ch; margin: 0 0 1em; color: var(--text-secondary); line-height: 1.65; }
.ch-text > p:last-child { margin-bottom: 0; }
.ch-text > .ref-lead { color: var(--text-primary); font-size: var(--rk-wow-fs-lead); line-height: 1.5; }
.ch :is(button, a, input, [tabindex="0"]):focus-visible { outline: 3px solid var(--rk-focus-color, currentColor); outline-offset: 2px; }
.ch-h1 { margin: 0; font-size: clamp(2.3rem, 1.5rem + 3.4vw, 4.1rem); font-weight: var(--rk-fw-regular, 400); line-height: 1.03; letter-spacing: var(--rk-wow-ls-tight); color: var(--text-primary); text-wrap: balance; }
.ch-lead { margin: 0; max-width: 62ch; font-size: clamp(1.08rem, .98rem + .35vw, 1.22rem); line-height: 1.55; color: var(--text-secondary); text-wrap: pretty; }
.ch-bildknopf { all: unset; box-sizing: border-box; display: block; width: 100%; cursor: zoom-in; border-radius: var(--rk-wow-r-md); overflow: hidden; }
.ch-bildknopf img { display: block; width: 100%; height: auto; transition: transform .5s var(--rk-wow-ease); }
@media (hover: hover) { .ch-bildknopf:hover img { transform: scale(1.02); } }
.ch-bildknopf:focus-visible { outline: 3px solid var(--rk-focus-color, currentColor); outline-offset: 3px; }
.ch figcaption { color: var(--text-secondary); font-size: var(--rk-wow-fs-meta); line-height: 1.5; }
.ch-film { margin: 0; display: grid; min-width: 0; }
.ch-film__text { display: grid; gap: 4px; margin-top: 10px; }
.ch-film__text b { font-weight: var(--rk-fw-regular, 400); color: var(--text-primary); font-size: var(--rk-wow-fs-body); }

/* Abstände v2: 64 px zwischen Blöcken (Desktop), kompakte Köpfe (konzept-v2.md Abschnitt 2 und 8) */
.ch .ref__block { margin-top: 48px; }
@media (min-width: 960px) { .ch .ref__block { margin-top: 64px; } }
.ch .ref__block > .ch-kopf, .ch .ch-kopf { margin-bottom: 24px; }
.ch-kopf--kompakt { gap: 10px; }
.ch-kopf--kompakt .rk-wow-statement__title { font-size: var(--rk-wow-fs-big); line-height: 1.06; }
.ch-kopf--kompakt .rk-wow-statement__sub { font-size: var(--rk-wow-fs-body); max-width: 64ch; }
.ch-kopf--gross { gap: 14px; }
.ch-kopf--gross .rk-wow-statement__title { font-size: clamp(2.3rem, 1.2rem + 3.4vw, 4.1rem); line-height: 1; }
.ch-kopf--gross .rk-wow-statement__sub { font-size: var(--rk-wow-fs-body); }
.ch .ph-pos-r.ch-kopf { margin-left: auto; text-align: right; justify-items: end; }
.ch .ph-pos-r.ch-kopf .rk-wow-statement__sub { margin-left: auto; }

/* Plakettenzeile „Gemeinschaftsprojekt mit Marc Schaum · Ideen mit Gips“ als Anker zur Visitenkarte (Arbeitsname rk-wow-plakettenzeile) */
.ch-plakette-link { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; justify-self: start; min-height: 48px; padding: 6px 6px 6px 16px; box-sizing: border-box;
  border: 1px solid var(--rk-wow-line-strong); border-radius: var(--rk-wow-r-pill); color: var(--text-primary); text-decoration: none; font-size: var(--rk-wow-fs-meta); line-height: 1.3; }
.ch-plakette-link__stempel { font-size: var(--rk-wow-fs-tag); letter-spacing: .12em; text-transform: uppercase; color: var(--rk-gold-text); }
.ch-plakette-link__pfeil { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--text-primary); color: var(--rk-wow-card); }
.ch-plakette-link__pfeil svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; transform: rotate(90deg); }
@media (hover: hover) { .ch-plakette-link:hover { border-color: var(--text-primary); } }

/* ==========================================================================
   Video — Standbild + Play, startet stumm, nichts startet von selbst (Arbeitsname rk-wow-video)
   Ohne JS: native Bedienelemente (controls im HTML), der Play-Knopf ist dann ausgeblendet. Das Play-Symbol liegt im Film; alle anderen
   Bedienelemente stehen daneben oder darunter (FLOW §27). Läuft der Film, wandert der Knopf an den Rand (Pause), damit die Mitte frei ist.
   ========================================================================== */
.ch-video { position: relative; overflow: hidden; border-radius: var(--rk-wow-r-md); background: var(--rk-wow-dark-bg); box-shadow: var(--ph-erhaben-stark); }
.ch-video__v { display: block; width: 100%; height: 100%; object-fit: cover; background: var(--rk-wow-dark-bg); }
.ch-video__play { position: absolute; left: 50%; top: 50%; z-index: 2; display: none; 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) 78%, transparent);
  color: var(--rk-wow-dark-ink); cursor: pointer; box-shadow: var(--rk-wow-sh-3); transition: transform .3s var(--rk-wow-ease); }
html.ch-js .ch-video__play { display: grid; }
html.ch-js .ch-video--ohne-quelle .ch-video__play { display: none; }
.ch-video__play svg { width: 26px; height: 26px; fill: currentColor; }
.ch-video__play .ch-i-pause, .ch-video.is-laeuft .ch-video__play .ch-i-play { display: none; }
.ch-video.is-laeuft .ch-video__play .ch-i-pause { display: block; }
.ch-video.is-laeuft .ch-video__play { left: auto; top: 10px; right: 10px; width: 48px; height: 48px; margin: 0; opacity: .92; }
@media (hover: hover) { .ch-video__play:hover { transform: scale(1.06); } }
.ch-video__play:focus-visible { outline: 3px solid var(--rk-wow-dark-ink); outline-offset: 3px; }

/* ==========================================================================
   Großansicht — eigenes Fenster mit Blättern (Arbeitsname rk-wow-gross)
   ========================================================================== */
.ch-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); }
.ch-gross::backdrop { background: color-mix(in srgb, var(--rk-wow-dark-bg) 82%, transparent); }
.ch-gross__rahmen { position: relative; display: grid; grid-template-rows: minmax(0, 1fr) auto; gap: 10px; max-height: 94vh; padding: 12px; box-sizing: border-box; }
.ch-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; }
.ch-gross__inhalt img, .ch-gross__inhalt video { display: block; width: auto; height: auto; max-width: 100%; max-height: calc(94vh - 170px); }
.ch-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; }
.ch-gross__text { grid-area: t; margin: 0; color: var(--text-secondary); font-size: var(--rk-wow-fs-meta); line-height: 1.5; }
.ch-gross__zahl { grid-area: n; color: var(--text-muted); font-size: var(--rk-wow-fs-tag); }
.ch-gross__pfeil[data-ch-schritt="-1"] { grid-area: z; } .ch-gross__pfeil[data-ch-schritt="1"] { grid-area: w; }
.ch-gross__pfeil[hidden] { display: grid; visibility: hidden; }
.ch-gross__pfeil, .ch-gross__zu, .ch-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; }
.ch-gross__pfeil svg, .ch-gross__zu svg, .ch-runder-knopf svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.ch-gross__zu { position: absolute; top: 18px; right: 18px; z-index: 2; }
.ch-gross__pfeil:focus-visible, .ch-gross__zu:focus-visible { outline: 3px solid var(--rk-focus-color, currentColor); outline-offset: 2px; }
.ch-runder-knopf:disabled { opacity: .4; cursor: default; }
/* Dunkelmodus: Schalter im Großansichts-Fenster klar lesbar (FLOW §23) */
:root[data-theme="dark"] :is(.ch-gross__pfeil, .ch-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(.ch-gross__pfeil, .ch-gross__zu):is(:hover, :focus-visible) { background: var(--rk-wow-dark-gold); color: var(--rk-wow-dark-bg); }
:root[data-theme="dark"] .ch-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"]) :is(.ch-gross__pfeil, .ch-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(.ch-gross__pfeil, .ch-gross__zu):is(:hover, :focus-visible) { background: var(--rk-wow-dark-gold); color: var(--rk-wow-dark-bg); }
  :root:not([data-theme="light"]) .ch-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); }
}

/* ==========================================================================
   Visitenkarte „Ideen mit Gips“ — Arbeitsname rk-wow-visitenkarte (beide Seiten)
   Format 85 : 55 ab 600 px (wächst mit dem Inhalt), höchstens 560 px. --schwarz: schwarzer Karton (auch im Hellmodus), feine Rillen im
   rechten Drittel (nie unter Text). --kreide: weißer Karton mit 2-px-Trittkante oben. Beim Einblenden „hingelegt“ (Desktop leicht gedreht).
   ========================================================================== */
.ch-partner__raster { display: grid; gap: 28px; align-items: center; }
.ch-partner__text { display: grid; gap: 0; min-width: 0; }
.ch-partner__satz { margin: 0; max-width: 54ch; color: var(--text-secondary); font-size: var(--rk-wow-fs-lead); line-height: 1.5; text-wrap: pretty; }
.ch-partner__schluss { display: block; margin-top: 10px; font-style: normal; font-size: var(--rk-wow-fs-big); line-height: 1.08; letter-spacing: var(--rk-wow-ls-tight); color: var(--text-primary); }
.ch-karte { position: relative; display: grid; align-content: start; gap: 5px; width: 100%; max-width: 560px; padding: clamp(22px, 3vw, 30px); box-sizing: border-box; border-radius: 14px; }
.ch-karte > * { position: relative; z-index: 1; margin: 0; }
.ch-karte__marke { font-size: var(--rk-wow-fs-big); line-height: 1; letter-spacing: var(--rk-wow-ls-tight); color: var(--rk-gold-text); }
.ch-karte__marke::after { content: ""; display: block; width: 64px; height: 1px; margin: 14px 0 8px; background: var(--rk-gold-text); }
.ch-karte__name { font-size: var(--rk-wow-fs-title); line-height: 1.15; color: var(--text-primary); }
.ch-karte__firma { color: var(--text-secondary); font-size: var(--rk-wow-fs-body); }
.ch-karte__gewerke { display: flex; flex-wrap: wrap; gap: 0; margin-top: 6px !important; padding: 0; list-style: none; color: var(--text-muted); font-size: var(--rk-wow-fs-tag); letter-spacing: .1em; text-transform: uppercase; }
.ch-karte__gewerke li + li::before { content: "·"; margin: 0 .6em; color: var(--rk-gold-text); }
.ch-karte__insta { display: inline-flex; align-items: center; gap: 10px; margin-top: 10px !important; color: var(--text-primary); font-size: var(--rk-wow-fs-body); }
.ch-karte__kanal { width: 26px; height: 26px; border-radius: 7px; }
.ch-karte__zeile { margin-top: 4px !important; max-width: 40ch; color: var(--text-secondary); font-size: var(--rk-wow-fs-meta); line-height: 1.5; }
.ch-karte__knoepfe { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 12px !important; }
.ch-karte__fuss { margin-top: 14px !important; color: var(--text-muted); font-size: var(--rk-wow-fs-tag); letter-spacing: .04em; }
@media (max-width: 599px) { .ch-karte__knoepfe .rk-btn { width: 100%; justify-content: space-between; } }
@media (min-width: 600px) { .ch-karte { aspect-ratio: 85 / 55; } }
.ch-karte--schwarz { box-shadow: var(--rk-wow-sh-3); }
.ch-karte--schwarz::before { content: ""; position: absolute; top: 0; right: 0; bottom: 0; width: 33%; z-index: 0; pointer-events: none; border-radius: 0 14px 14px 0;
  background: repeating-linear-gradient(90deg, transparent 0 5px, color-mix(in srgb, var(--rk-wow-dark-ink) 5%, transparent) 5px 6px, transparent 6px 9px, color-mix(in srgb, var(--rk-wow-dark-bg) 60%, transparent) 9px 11px); }
.ch-karte--kreide { border: 1px solid var(--rk-wow-line); border-top: 2px solid var(--text-primary); border-radius: 4px 4px 14px 14px; background: var(--rk-wow-card); box-shadow: var(--rk-wow-sh-3); }
@media (min-width: 960px) {
  .ch-partner__raster { grid-template-columns: minmax(0, 1fr) minmax(0, 560px); gap: clamp(32px, 5vw, 72px); }
  .ch-partner:not(.ch-partner--kopf-oben) .ch-partner__raster { grid-template-columns: minmax(0, 1fr) minmax(0, 460px); gap: 56px; }
  .ch-partner--r .ch-partner__raster { grid-template-columns: minmax(0, 560px) minmax(0, 1fr); }
  .ch-partner--r .ch-karte { order: -1; }
  .ch-partner--r .ch-partner__satz { margin-left: auto; text-align: left; }
  .ch-partner--r .ch-partner__schluss { text-align: right; }
  .ch-karte--schwarz { rotate: -1.5deg; }
  .ch-karte--kreide { rotate: 1deg; }
}
:root[data-theme="dark"] .ch-karte--schwarz { box-shadow: var(--ph-erhaben-stark), 0 0 0 1px var(--rk-wow-dark-gold); }
:root[data-theme="dark"] .ch-karte--kreide { background: var(--rk-wow-dark-raised); border-top-color: var(--rk-wow-dark-gold); box-shadow: var(--ph-erhaben-stark); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .ch-karte--schwarz { box-shadow: var(--ph-erhaben-stark), 0 0 0 1px var(--rk-wow-dark-gold); }
  :root:not([data-theme="light"]) .ch-karte--kreide { background: var(--rk-wow-dark-raised); border-top-color: var(--rk-wow-dark-gold); box-shadow: var(--ph-erhaben-stark); }
}

/* ==========================================================================
   Schwesterkarte — Arbeitsname rk-wow-geschwister (beide Seiten)
   Treppe: dunkel, Bild links. Black Rasen: hell, Bild rechts. Handy: Bild oben. Höchstens rund 380 px hoch (Desktop).
   ========================================================================== */
.ch-schwester { display: grid; gap: 0; overflow: hidden; border-radius: var(--rk-wow-r-card); box-shadow: var(--ph-erhaben-stark); }
.ch-schwester--hell { border: 1px solid var(--rk-wow-line); background: var(--rk-wow-card); }
.ch-schwester__bild { margin: 0; background: var(--rk-wow-tint); }
.ch-schwester__bild img { display: block; width: 100%; height: 240px; object-fit: cover; }
.ch-schwester__text { display: grid; align-content: center; gap: 10px; padding: clamp(22px, 3vw, 34px); }
.ch-schwester__titel { margin: 0; font-size: clamp(1.6rem, 1.2rem + 1.2vw, 2.2rem); font-weight: var(--rk-fw-regular, 400); line-height: 1.08; letter-spacing: var(--rk-wow-ls-tight); color: var(--text-primary); text-wrap: balance; }
.ch-schwester__text p { margin: 0; color: var(--text-secondary); line-height: 1.6; max-width: 56ch; }
.ch-schwester__text .rk-btn { justify-self: start; margin-top: 4px; }
@media (max-width: 599px) { .ch-schwester__text .rk-btn { justify-self: stretch; } }
@media (min-width: 860px) {
  .ch-schwester { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); }
  .ch-schwester__bild { position: relative; min-height: 300px; }
  .ch-schwester__bild img { position: absolute; inset: 0; height: 100%; }
  .ch-schwester--hell .ch-schwester__bild { order: 2; }
}

/* ==========================================================================
   Diptychon-Einstieg — Arbeitsname rk-wow-diptychon (Treppe)
   Zwei Hochformate als Paar, das rechte versetzt wie eine Stufe; darunter die Plakettenzeile als Anker zur Visitenkarte.
   ========================================================================== */
.ch-dip { display: grid; gap: 22px clamp(28px, 4vw, 56px); margin-top: 4px; }
.ch-dip__kopf { display: grid; gap: 14px; min-width: 0; }
.ch-dip__text { display: grid; gap: 20px; align-content: start; min-width: 0; }
.ch-dip__plakette { display: grid; min-width: 0; }
.ch-dip__bilder { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; align-items: start; padding-bottom: 24px; }
.ch-dip__fig { margin: 0; }
.ch-dip__fig--b { margin-top: 24px; }
/* Herz und Teilen im Einstieg (Neubau 18.10.2026, FLOW §42; Aussehen und Lage aus referenz-herz/-teilen.css, hier nur der Bezugsrahmen):
   Treppe auf dem rechten Bild unten rechts; Black Rasen oben rechts im Lamellen-Rahmen, weil unten der Einschub liegt */
.ch-dip__fig--b { position: relative; }
.ch-lamellen__rahmen > .rk-teilen-halter, .ch-lamellen__rahmen > .rk-herz--kopf { top: 12px; bottom: auto; z-index: 4; }
.ch-dip__knopf { all: unset; box-sizing: border-box; display: block; width: 100%; overflow: hidden; border-radius: var(--rk-wow-r-md); box-shadow: var(--rk-wow-sh-3); cursor: zoom-in; }
.ch-dip__knopf img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 4; object-fit: cover; }
.ch-dip__knopf:focus-visible { outline: 3px solid var(--rk-focus-color, currentColor); outline-offset: 3px; }
@media (min-width: 960px) {
  .ch-dip { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); grid-template-areas: "kopf kopf" "text bilder" "plak bilder"; grid-template-rows: auto auto 1fr; }
  .ch-dip__kopf { grid-area: kopf; }
  .ch-dip__text { grid-area: text; }
  .ch-dip__bilder { grid-area: bilder; }
  .ch-dip__plakette { grid-area: plak; align-content: start; }
  .ch-dip__bilder { gap: 20px; padding-bottom: 0; }
  .ch-dip__fig--b { margin-top: 13%; }
}
@media (max-width: 599px) { .ch-dip .rk-wow-btnrow .rk-btn { width: 100%; } }
:root[data-theme="dark"] .ch-dip__knopf { box-shadow: var(--ph-erhaben-stark); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .ch-dip__knopf { box-shadow: var(--ph-erhaben-stark); } }

/* ==========================================================================
   Schalplan „Auf einen Blick“ — Arbeitsname rk-wow-schalplan (Treppe)
   Ansichtsskizze der Wand (Plattenraster, Ankerlöcher, Stufen als Zickzack, Handlauf, Geschossdecke); sieben Fakten als Beschriftungen mit
   Hinweislinien (Desktop ab 1040 px, links vier, rechts drei). Handy: Zeichnung oben mit Nummern, darunter die Fakten als Liste.
   ========================================================================== */
.ch-plan { position: relative; display: grid; gap: 20px; }
.ch-plan__rahmen { overflow: hidden; border-radius: var(--rk-wow-r-md); background: var(--rk-wow-tint); box-shadow: inset 0 0 0 1px var(--rk-wow-line); }
.ch-plan__bild { display: block; width: 220%; max-width: none; margin-left: -60%; height: auto; }
.ch-plan__wand { fill: var(--rk-wow-card); stroke: var(--text-primary); stroke-width: 2; }
.ch-plan__zug { stroke-dasharray: 1; stroke-dashoffset: 0; }
.ch-plan__wand.ch-plan__zug { stroke-dasharray: none; }
.ch-plan__raster { fill: none; stroke: var(--rk-wow-line-strong); stroke-width: 1.2; }
.ch-plan__loch { fill: var(--rk-wow-line-strong); }
.ch-plan__decke { fill: none; stroke: var(--text-muted); stroke-width: 1.4; stroke-dasharray: 10 8; }
.ch-plan__decke.ch-plan__zug { stroke-dasharray: 10 8; }
.ch-plan__stufen { fill: none; stroke: var(--text-primary); stroke-width: 3; stroke-linejoin: round; }
.ch-plan__handlauf { fill: none; stroke: var(--rk-wow-hl-solid); stroke-width: 3.5; stroke-linecap: round; }
.ch-plan__leitungen { display: none; }
.ch-plan__leit { fill: none; stroke: var(--text-muted); stroke-width: 1; }
.ch-plan__punkt circle { fill: var(--rk-wow-card); stroke: var(--text-primary); stroke-width: 2; }
.ch-plan__punkt text { fill: var(--text-primary); font-size: 15px; text-anchor: middle; font-variant-numeric: tabular-nums; }
.ch-plan__fakten { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 14px 18px; margin: 0; }
.ch-plan__fakt { display: grid; gap: 2px; align-content: start; min-width: 0; }
.ch-plan__fakt dt { display: flex; align-items: center; gap: 8px; font-size: var(--rk-wow-fs-tag); letter-spacing: .12em; text-transform: uppercase; color: var(--rk-gold-text); }
.ch-plan__fakt dd { margin: 0; color: var(--text-primary); font-size: var(--rk-wow-fs-meta); line-height: 1.4; hyphens: auto; overflow-wrap: break-word; }
.ch-plan__nr { display: grid; place-items: center; flex: none; width: 24px; height: 24px; border-radius: 50%; border: 1.5px solid var(--text-primary); color: var(--text-primary); font-size: .75rem; letter-spacing: 0; font-variant-numeric: tabular-nums; }
.ch-plan__hinweis { margin: 12px 0 0; color: var(--text-muted); font-size: var(--rk-wow-fs-tag); text-align: center; }
@media (min-width: 1040px) {
  .ch-plan { display: block; aspect-ratio: 1100 / 460; }
  .ch-plan__rahmen { position: absolute; inset: 0; background: none; box-shadow: none; border-radius: 0; }
  .ch-plan__bild { width: 100%; height: 100%; margin: 0; }
  .ch-plan__rahmen::before { content: ""; position: absolute; left: 27.27%; right: 27.27%; top: 0; bottom: 0; border-radius: var(--rk-wow-r-md); background: var(--rk-wow-tint); z-index: -1; }
  .ch-plan__leitungen { display: inline; }
  .ch-plan__fakten { display: block; position: absolute; inset: 0; }
  .ch-plan__fakt { position: absolute; top: var(--y); width: 21.5%; transform: translateY(-50%); }
  .ch-plan__fakt--l { left: 0; text-align: right; justify-items: end; }
  .ch-plan__fakt--l dt { flex-direction: row-reverse; }
  .ch-plan__fakt--r { right: 0; }
  .ch-plan__nr { display: none; }
}
.ch-plan__rahmen { position: relative; isolation: isolate; }
:root[data-theme="dark"] .ch-plan__rahmen, :root[data-theme="dark"] .ch-plan__rahmen::before { background: var(--rk-wow-dark-bg); }
:root[data-theme="dark"] .ch-plan__wand { fill: var(--rk-wow-dark-bg); stroke: var(--rk-wow-dark-ink); }
:root[data-theme="dark"] :is(.ch-plan__stufen) { stroke: var(--rk-wow-dark-ink); }
:root[data-theme="dark"] .ch-plan__punkt circle { fill: var(--rk-wow-dark-bg); stroke: var(--rk-wow-dark-gold); }
:root[data-theme="dark"] .ch-plan__punkt text { fill: var(--rk-wow-dark-gold); }
:root[data-theme="dark"] .ch-plan__handlauf { stroke: var(--rk-wow-dark-gold); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .ch-plan__rahmen, :root:not([data-theme="light"]) .ch-plan__rahmen::before { background: var(--rk-wow-dark-bg); }
  :root:not([data-theme="light"]) .ch-plan__wand { fill: var(--rk-wow-dark-bg); stroke: var(--rk-wow-dark-ink); }
  :root:not([data-theme="light"]) .ch-plan__stufen { stroke: var(--rk-wow-dark-ink); }
  :root:not([data-theme="light"]) .ch-plan__punkt circle { fill: var(--rk-wow-dark-bg); stroke: var(--rk-wow-dark-gold); }
  :root:not([data-theme="light"]) .ch-plan__punkt text { fill: var(--rk-wow-dark-gold); }
  :root:not([data-theme="light"]) .ch-plan__handlauf { stroke: var(--rk-wow-dark-gold); }
}

/* ==========================================================================
   Treppenprofil mit Handlauf — Arbeitsname rk-wow-handlauf (Treppe)
   Desktop: drei Stufen-Karten quer, auf steigender Höhe (Stufe 1 um 160 px tiefer, Stufe 2 um 80 px), Trittkante oben; darüber ein Handlauf
   (SVG über allen Spalten) mit Knoten je Stufe, der Knoten der Stufe unter Zeiger/Fokus leuchtet Gold. Handy: untereinander, Linie links.
   ========================================================================== */
.ch-profil__lauf { position: relative; }
.ch-profil__handlauf { display: none; }
.ch-profil__stufen { position: relative; display: grid; gap: 22px; margin: 0; padding: 0 0 0 28px; list-style: none; }
.ch-profil__stufen::before { content: ""; position: absolute; left: 9px; top: 10px; bottom: 10px; width: 3px; border-radius: 3px; background: var(--rk-wow-hl-solid); }
.ch-stufe { position: relative; margin-left: calc(var(--s) * 8px); scroll-margin-top: var(--rk-wow-sticky-top); min-width: 0; }
.ch-stufe__knoten { position: absolute; left: calc(-28px - var(--s) * 8px + 3px); top: 18px; width: 16px; height: 16px; border-radius: 50%; border: 2px solid var(--ch-gold); background: var(--rk-wow-card); box-sizing: border-box; transition: background-color .3s var(--rk-wow-ease), box-shadow .3s var(--rk-wow-ease); }
.ch-stufe:is(:hover, :focus-within) .ch-stufe__knoten { background: var(--ch-gold); box-shadow: 0 0 0 6px color-mix(in srgb, var(--ch-gold) 30%, transparent), 0 0 18px color-mix(in srgb, var(--ch-gold) 60%, transparent); }
.ch-stufe__karte { display: grid; align-content: start; gap: 12px; padding: clamp(18px, 3vw, 26px); border: 1px solid var(--rk-wow-line); border-top: 2px solid var(--text-primary); border-radius: 4px 4px var(--rk-wow-r-card) var(--rk-wow-r-card); background: var(--rk-wow-card); box-shadow: var(--ph-erhaben); }
.ch-stufe__kopf { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 14px; margin: 0; }
.ch-stufe__nr { font-size: var(--rk-wow-fs-big); line-height: 1; letter-spacing: var(--rk-wow-ls-tight); color: var(--rk-gold-text); font-variant-numeric: tabular-nums; }
.ch-stufe__wer { font-size: var(--rk-wow-fs-tag); letter-spacing: .12em; text-transform: uppercase; color: var(--text-muted); }
.ch-stufe__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); }
.ch-stufe__text { margin: 0; color: var(--text-secondary); line-height: 1.6; }
.ch-stufe__link { justify-self: start; display: inline-flex; align-items: center; min-height: 44px; color: var(--text-primary); text-decoration: underline; text-underline-offset: .2em; }
.ch-stufe__link:hover { color: var(--rk-gold-text); }
.ch-haken-liste { display: grid; gap: 8px; margin: 2px 0 0; padding: 0; list-style: none; }
.ch-haken-liste li { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 10px; align-items: start; color: var(--text-secondary); line-height: 1.45; }
.ch-haken { color: var(--rk-gold-text); margin-top: 2px; }
.ch-film__video { width: min(100%, 300px); aspect-ratio: 9 / 16; }
@media (min-width: 960px) {
  .ch-profil__lauf { padding-top: 56px; }
  .ch-profil__handlauf { display: block; position: absolute; left: 0; right: 0; top: 0; width: 100%; height: 240px; overflow: visible; pointer-events: none; }
  .ch-profil__handlauf path { fill: none; stroke-width: 3; stroke-linecap: round; vector-effect: non-scaling-stroke; }
  .ch-profil__spur { stroke: var(--rk-wow-line-strong); }
  .ch-profil__linie { stroke: var(--ch-gold); stroke-dasharray: 1; stroke-dashoffset: 0; }
  .ch-profil__stufen { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; padding: 0; align-items: start; }
  .ch-profil__stufen::before { display: none; }
  .ch-stufe { margin: calc((2 - var(--s)) * 80px + 40px) 0 0; }
  .ch-stufe__knoten { left: 50%; top: -48px; margin-left: -8px; }
  .ch-stufe__text, .ch-haken-liste li { font-size: var(--rk-wow-fs-meta); line-height: 1.55; }
  .ch-film__video { width: min(100%, 236px); }
}
:root[data-theme="dark"] .ch-stufe__karte { border-top-color: var(--rk-wow-dark-gold); box-shadow: var(--ph-erhaben-stark); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .ch-stufe__karte { border-top-color: var(--rk-wow-dark-gold); box-shadow: var(--ph-erhaben-stark); } }

/* ==========================================================================
   Abzieh-Bühne — Arbeitsname rk-wow-abziehen (Treppe, Stufe 3)
   Poster (Folie liegt noch auf), Lasche unten rechts im Bild ist die Bedienung selbst: Ziehen oder Tippen startet den Film, die Lasche
   klappt weg. Nach dem Ende Satz + „Noch einmal ansehen“. Reduziert: kein Wegklappen, Bedienelemente, kein Selbststart.
   ========================================================================== */
.ch-abzieh { margin: 0; }
.ch-abzieh__buehne { position: relative; width: min(100%, 300px); aspect-ratio: 9 / 16; overflow: hidden; border-radius: var(--rk-wow-r-md); background: var(--rk-wow-dark-bg); box-shadow: var(--ph-erhaben-stark); }
@media (min-width: 960px) { .ch-abzieh__buehne { width: min(100%, 236px); } }
.ch-abzieh__v { display: block; width: 100%; height: 100%; object-fit: cover; }
.ch-lasche { display: none; }
html.ch-js .ch-lasche { position: absolute; right: 0; bottom: 0; z-index: 2; display: flex; align-items: flex-end; gap: 10px; padding: 0; border: 0; background: none; color: var(--rk-wow-dark-ink); cursor: grab; touch-action: none; }
.ch-lasche__text { margin-bottom: 18px; padding: 8px 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-meta); white-space: nowrap; box-shadow: var(--rk-wow-sh-3); transition: opacity .3s var(--rk-wow-ease); }
.ch-lasche__ecke { position: relative; display: block; width: 96px; height: 96px; clip-path: polygon(100% 0, 100% 100%, 0 100%); background:
  linear-gradient(135deg, transparent 50%, color-mix(in srgb, var(--rk-wow-dark-bg) 60%, transparent) 50%, transparent 57%),
  linear-gradient(135deg, transparent 50%, var(--rk-wow-dark-ink) 54%, var(--rk-wow-dark-text) 72%, var(--rk-wow-dark-muted) 100%);
  transition: clip-path .7s var(--rk-wow-ease); }
.ch-lasche__ecke::after { content: ""; position: absolute; inset: 0; background: linear-gradient(135deg, transparent 49.4%, var(--ch-gold) 50%, var(--ch-gold) 51.6%, transparent 52.2%); }
.ch-lasche:focus-visible { outline: 3px solid var(--rk-wow-dark-ink); outline-offset: -6px; }
.ch-lasche.is-zieht .ch-lasche__ecke { clip-path: polygon(100% 30%, 100% 100%, 30% 100%); }
.ch-abzieh.is-ab .ch-lasche { pointer-events: none; }
.ch-abzieh.is-ab .ch-lasche__ecke { clip-path: polygon(100% 100%, 100% 100%, 100% 100%); }
.ch-abzieh.is-ab .ch-lasche__text { opacity: 0; }
.ch-abzieh.is-ab.is-fertig .ch-lasche { display: none; }
.ch-abzieh__nach { position: absolute; left: 12px; right: 12px; bottom: 12px; z-index: 3; display: grid; gap: 10px; justify-items: start; padding: 14px 16px; border-radius: var(--rk-wow-r-md); background: var(--rk-wow-dark-bg); color: var(--rk-wow-dark-ink); box-shadow: var(--rk-wow-sh-3); }
.ch-abzieh__nach[hidden] { display: none; }
.ch-abzieh__nach p { margin: 0; line-height: 1.45; }
.ch-abzieh__nach .rk-btn { --rk-btn-secondary-bg: var(--rk-wow-dark-bg); --rk-btn-secondary-fg: var(--rk-wow-dark-ink); --rk-btn-secondary-brd: var(--rk-wow-dark-line-strong); }
.ch-abzieh__hinweis { margin: 10px 0 0; color: var(--text-muted); font-size: var(--rk-wow-fs-meta); }
html:not(.ch-js) .ch-abzieh__hinweis { display: none; }
:root[data-theme="dark"] .ch-lasche__text { border: 1px solid var(--rk-wow-dark-gold); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .ch-lasche__text { border: 1px solid var(--rk-wow-dark-gold); } }

/* ==========================================================================
   Rundgang-Leiste — Arbeitsname rk-wow-rundgang (Treppe)
   Stations-Chips, waagerechte Bildleiste mit Einrasten, Zähler „Bild 3 von 10“, Pfeile.
   ========================================================================== */
.ch-rg { display: grid; gap: 14px; }
.ch-rg__chips { display: flex; gap: 8px; margin: 0; padding: 2px 2px 6px; list-style: none; overflow-x: auto; }
.ch-rg__chips li { flex: none; }
.ch-chip { display: inline-flex; align-items: center; 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); text-decoration: none; white-space: nowrap; cursor: pointer; }
.ch-chip[aria-pressed="true"] { background: var(--text-primary); border-color: var(--text-primary); color: var(--rk-wow-card); }
@media (hover: hover) { .ch-chip:hover { border-color: var(--text-primary); } }
.ch-rg__leiste { display: flex; gap: 14px; margin: 0; padding: 4px 2px 14px; list-style: none; overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain; scroll-padding-inline: 2px; }
.ch-rg__bild { flex: 0 0 auto; max-width: 88%; scroll-snap-align: start; }
.ch-rg__bild figure { margin: 0; display: grid; gap: 8px; }
.ch-rg__knopf { all: unset; box-sizing: border-box; display: block; height: clamp(240px, 64vw, 360px); overflow: hidden; border-radius: var(--rk-wow-r-md); background: var(--rk-wow-tint); box-shadow: var(--rk-wow-sh-2); cursor: zoom-in; }
.ch-rg__knopf img { display: block; width: auto; height: 100%; max-width: 100%; object-fit: cover; }
.ch-rg__knopf:focus-visible { outline: 3px solid var(--rk-focus-color, currentColor); outline-offset: 3px; }
.ch-rg__bild figcaption { width: 0; min-width: 100%; }
.ch-rg__station { display: block; font-size: var(--rk-wow-fs-tag); letter-spacing: .1em; text-transform: uppercase; color: var(--rk-gold-text); }
.ch-rg__steuer { display: none; align-items: center; justify-content: center; gap: 16px; }
html.ch-js .ch-rg__steuer { display: flex; }
.ch-rg__zahl { min-width: 9em; text-align: center; color: var(--text-secondary); font-size: var(--rk-wow-fs-meta); font-variant-numeric: tabular-nums; }
.ch-rg__leiste:focus-visible { outline: 3px solid var(--rk-focus-color, currentColor); outline-offset: 4px; border-radius: var(--rk-wow-r-md); }
@media (min-width: 900px) { .ch-rg__chips { flex-wrap: wrap; justify-content: center; overflow: visible; } }
:root[data-theme="dark"] .ch-rg__knopf { box-shadow: var(--ph-erhaben); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .ch-rg__knopf { box-shadow: var(--ph-erhaben); } }

/* ==========================================================================
   Lamellen-Einstieg — Arbeitsname rk-wow-lamellen (Black Rasen)
   Dunkle Bühne (beide Modi), Split 5/7. Rechts #29 im 4:3-Rahmen; beim Laden öffnet sich das Bild durch neun senkrechte Lamellen (Maske,
   danach entfernt: nichts liegt dauerhaft auf der Wand). Unten links ragt ein Einschub mit #30 heraus; Tipp tauscht groß und klein.
   Ohne JS: Einschub ist ein Link auf die große Fassung. Nie zwei Bilder in voller Breite untereinander.
   ========================================================================== */
.ch-lamellen { display: grid; gap: 28px; margin-top: 4px; padding: clamp(22px, 4vw, 48px) clamp(16px, 4vw, 52px) clamp(36px, 4vw, 52px); border-radius: var(--rk-wow-r-card); box-shadow: var(--ph-erhaben-stark); }
.ch-lamellen__kopf { display: grid; gap: 14px; min-width: 0; }
.ch-lamellen__text { display: grid; gap: 18px; align-content: start; min-width: 0; }
.ch-lamellen__kopf .ch-h1 { font-size: clamp(2.3rem, 1.5rem + 3vw, 4rem); }
.ch-lamellen__buehne { position: relative; min-width: 0; }
.ch-lamellen__rahmen { position: relative; aspect-ratio: 4 / 3; }
.ch-lamellen__fig { margin: 0; position: absolute; overflow: hidden; background: var(--rk-wow-dark-card); transition: opacity .35s var(--rk-wow-ease); }
.ch-lamellen__fig img { display: block; width: 100%; height: 100%; object-fit: cover; }
.ch-lamellen__fig[data-rolle="gross"] { inset: 0; border-radius: var(--rk-wow-r-card); box-shadow: var(--ph-erhaben-stark); }
.ch-lamellen__fig[data-rolle="klein"] { z-index: 2; right: 12px; bottom: -24px; width: 36%; aspect-ratio: 4 / 3; border: 3px solid var(--rk-wow-dark-bg); border-radius: var(--rk-wow-r-md); box-shadow: var(--rk-wow-sh-3); }
.ch-lamellen.is-wechsel .ch-lamellen__fig { opacity: 0; }
.ch-lamellen__oeffnen { position: absolute; inset: 0; z-index: 1; padding: 0; border: 0; border-radius: var(--rk-wow-r-card); background: none; cursor: zoom-in; }
.ch-lamellen__tausch { position: absolute; z-index: 3; right: 12px; bottom: -24px; width: 36%; aspect-ratio: 4 / 3; display: flex; align-items: flex-end; justify-content: flex-start; padding: 0; box-sizing: border-box; border-radius: var(--rk-wow-r-md); color: var(--rk-wow-dark-ink); text-decoration: none; }
.ch-lamellen__tausch-text { position: absolute; left: 0; right: 0; top: calc(100% + 8px); font-size: var(--rk-wow-fs-meta); line-height: 1.3; text-align: right; color: var(--rk-wow-dark-text); }
.ch-lamellen__tausch svg { position: absolute; right: 8px; top: 8px; width: 34px; height: 34px; padding: 8px; box-sizing: border-box; border-radius: 50%; background: var(--rk-wow-dark-bg); fill: none; stroke: var(--rk-wow-dark-ink); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; box-shadow: 0 0 0 1px var(--rk-wow-dark-gold); }
.ch-lamellen__tausch:focus-visible, .ch-lamellen__oeffnen:focus-visible { outline: 3px solid var(--rk-wow-dark-ink); outline-offset: 3px; }
@media (hover: hover) { .ch-lamellen__tausch:hover svg { background: var(--rk-wow-dark-gold); stroke: var(--rk-wow-dark-bg); } }
.ch-lamellen .ch-plakette-link { color: var(--rk-wow-dark-ink); }
.ch-lamellen .ch-plakette-link__pfeil { background: var(--rk-wow-dark-ink); color: var(--rk-wow-dark-bg); }
@media (max-width: 599px) {
  .ch-lamellen .rk-wow-btnrow .rk-btn { width: 100%; }
}
@media (max-width: 959px) { .ch-lamellen__buehne { margin-bottom: 48px; } }
@media (min-width: 960px) {
  .ch-lamellen { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); grid-template-areas: "kopf kopf" "text bild"; align-items: start; gap: 28px clamp(32px, 4vw, 56px); }
  .ch-lamellen__kopf { grid-area: kopf; }
  .ch-lamellen__text { grid-area: text; padding-top: 4px; }
  .ch-lamellen__buehne { grid-area: bild; padding: 0 0 36px 0; }
  .ch-lamellen__fig[data-rolle="klein"], .ch-lamellen__tausch { right: auto; left: -34px; bottom: -40px; width: 34%; }
  .ch-lamellen__tausch-text { text-align: left; }
}
:root[data-theme="dark"] .ch-lamellen__fig[data-rolle="gross"] { box-shadow: var(--ph-erhaben-stark), 0 0 0 1px var(--rk-wow-dark-gold); }
:root[data-theme="dark"] .ch-lamellen__fig[data-rolle="klein"] { box-shadow: var(--ph-erhaben); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .ch-lamellen__fig[data-rolle="gross"] { box-shadow: var(--ph-erhaben-stark), 0 0 0 1px var(--rk-wow-dark-gold); }
  :root:not([data-theme="light"]) .ch-lamellen__fig[data-rolle="klein"] { box-shadow: var(--ph-erhaben); }
}
/* Ohne JS: kein Tausch, der Einschub ist ein Link auf die große Fassung */
html:not(.ch-js) .ch-lamellen__oeffnen { display: none; }

/* ==========================================================================
   Graukeil „Auf einen Blick“ — Arbeitsname rk-wow-graukeil (Black Rasen)
   Acht Felder von Papier bis tief schwarz (Tonwerte per color-mix aus Token), je Feld ein Fakt, das schwärzeste Feld ist die Auflösung.
   Desktop eine Leiste (Feld 8 breiter, Goldkante), Handy senkrecht. Beim Einblenden „belichtet“: Papier-Deckschicht blendet je Feld aus.
   ========================================================================== */
.ch-graukeil__enden { display: flex; justify-content: space-between; margin: 0 0 8px; font-size: var(--rk-wow-fs-tag); letter-spacing: .12em; text-transform: uppercase; color: var(--text-muted); }
.ch-graukeil__keil { display: grid; gap: 2px; margin: 0; padding: 2px; border-radius: var(--rk-wow-r-md); background: var(--rk-wow-line-strong); box-shadow: var(--rk-wow-sh-2); }
.ch-keil { position: relative; display: grid; grid-template-columns: minmax(0, 7.5em) minmax(0, 1fr); gap: 4px 14px; align-items: center; min-height: 56px; padding: 10px 14px; box-sizing: border-box; overflow: hidden;
  background: color-mix(in srgb, var(--rk-wow-card) var(--ton), var(--rk-wow-dark-bg)); color: var(--rk-wow-dark-bg); }
.ch-keil:first-child { border-radius: calc(var(--rk-wow-r-md) - 2px) calc(var(--rk-wow-r-md) - 2px) 0 0; }
.ch-keil:last-child { border-radius: 0 0 calc(var(--rk-wow-r-md) - 2px) calc(var(--rk-wow-r-md) - 2px); box-shadow: inset 0 2px 0 var(--rk-wow-dark-gold); }
.ch-keil--hell { color: var(--rk-wow-dark-ink); }
.ch-keil dt { font-size: var(--rk-wow-fs-tag); letter-spacing: .1em; text-transform: uppercase; opacity: .82; }
.ch-keil dd { margin: 0; font-size: var(--rk-wow-fs-meta); line-height: 1.35; hyphens: auto; overflow-wrap: break-word; }
.ch-keil:last-child dd { font-size: var(--rk-wow-fs-title); line-height: 1.1; }
.ch-keil::after { content: ""; position: absolute; inset: 0; background: var(--rk-wow-card); opacity: 0; pointer-events: none; }
@media (min-width: 960px) {
  .ch-graukeil__keil { grid-template-columns: repeat(7, minmax(0, 1fr)) minmax(0, 1.25fr); }
  .ch-keil { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto 1fr; align-content: space-between; align-items: end; min-height: 172px; padding: 12px 12px 14px; }
  .ch-keil dt { align-self: start; }
  .ch-keil:first-child { border-radius: calc(var(--rk-wow-r-md) - 2px) 0 0 calc(var(--rk-wow-r-md) - 2px); }
  .ch-keil:last-child { border-radius: 0 calc(var(--rk-wow-r-md) - 2px) calc(var(--rk-wow-r-md) - 2px) 0; }
}
:root[data-theme="dark"] .ch-keil { background: color-mix(in srgb, var(--rk-wow-dark-text) calc(var(--ton) * .34), var(--rk-wow-dark-bg)); color: var(--rk-wow-dark-ink); }
:root[data-theme="dark"] .ch-keil:last-child { box-shadow: inset 0 0 0 1px var(--rk-wow-dark-gold), var(--ph-erhaben-stark); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .ch-keil { background: color-mix(in srgb, var(--rk-wow-dark-text) calc(var(--ton) * .34), var(--rk-wow-dark-bg)); color: var(--rk-wow-dark-ink); }
  :root:not([data-theme="light"]) .ch-keil:last-child { box-shadow: inset 0 0 0 1px var(--rk-wow-dark-gold), var(--ph-erhaben-stark); }
}

/* ==========================================================================
   Probeplatten — Arbeitsname rk-wow-probeplatten (Black Rasen, Ablauf)
   Drei gezeichnete Musterplatten (Verläufe aus Token, keine Fotos): glatt dunkel · Rillen · tief schwarz mit Rillen und Glanzkante.
   Platten sind Reiter; die gewählte hebt sich. Darunter das Feld des Gangs (Text 5/12, Medien 7/12). Sticker-Aufruf klebt an der Ecke.
   Ohne JS: drei Gänge untereinander, jeder mit seiner Platte als Kopf.
   ========================================================================== */
.ch-platten3 { display: grid; gap: 18px; }
.ch-platten3__reihe { display: none; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
html.ch-js .ch-platten3__reihe { display: grid; }
.ch-platten3__knopf { all: unset; box-sizing: border-box; display: grid; gap: 10px; justify-items: start; min-width: 0; cursor: pointer; border-radius: var(--rk-wow-r-sm); transition: transform .3s var(--rk-wow-ease); }
.ch-platten3__knopf:focus-visible { outline: 3px solid var(--rk-focus-color, currentColor); outline-offset: 4px; }
.ch-platte3 { --g: color-mix(in srgb, var(--rk-wow-dark-text) 22%, var(--rk-wow-dark-bg)); display: block; width: 100%; aspect-ratio: 1; border-radius: var(--rk-wow-r-sm);
  background: linear-gradient(140deg, color-mix(in srgb, var(--rk-wow-dark-ink) 12%, transparent), transparent 46%), var(--g); box-shadow: var(--rk-wow-sh-2); transition: box-shadow .3s var(--rk-wow-ease), transform .3s var(--rk-wow-ease); }
.ch-platte3--2 { background:
  repeating-linear-gradient(90deg, transparent 0 3px, color-mix(in srgb, var(--rk-wow-dark-bg) 55%, transparent) 3px 4.5px, transparent 4.5px 7px),
  repeating-linear-gradient(90deg, transparent 0 10px, color-mix(in srgb, var(--rk-wow-dark-ink) 11%, transparent) 10px 11px, transparent 11px 17px),
  repeating-linear-gradient(90deg, transparent 0 22px, color-mix(in srgb, var(--rk-wow-dark-bg) 40%, transparent) 22px 25px, transparent 25px 31px),
  linear-gradient(140deg, color-mix(in srgb, var(--rk-wow-dark-ink) 10%, transparent), transparent 46%), var(--g); }
.ch-platte3--3 { --g: var(--rk-wow-dark-bg); background:
  linear-gradient(135deg, color-mix(in srgb, var(--rk-wow-dark-ink) 26%, transparent) 0 2%, transparent 9%),
  repeating-linear-gradient(90deg, transparent 0 3px, color-mix(in srgb, var(--rk-wow-dark-ink) 6%, transparent) 3px 4px, transparent 4px 7px),
  repeating-linear-gradient(90deg, transparent 0 13px, color-mix(in srgb, var(--rk-wow-dark-ink) 9%, transparent) 13px 14px, transparent 14px 19px),
  repeating-linear-gradient(90deg, transparent 0 27px, color-mix(in srgb, var(--rk-wow-dark-ink) 5%, transparent) 27px 29px, transparent 29px 37px), var(--g);
  box-shadow: var(--rk-wow-sh-2), inset 0 0 0 1px color-mix(in srgb, var(--rk-wow-dark-gold) 70%, transparent); }
.ch-platte3__schild { display: grid; gap: 2px; }
.ch-platte3__gang { font-size: var(--rk-wow-fs-tag); letter-spacing: .12em; text-transform: uppercase; color: var(--text-muted); }
.ch-platte3__name { font-size: var(--rk-wow-fs-body); color: var(--text-primary); }
.ch-platten3__knopf[aria-selected="true"] .ch-platte3 { transform: translateY(-6px); box-shadow: var(--rk-wow-sh-3), 0 0 0 2px var(--ch-gold); }
.ch-platten3__knopf[aria-selected="true"] .ch-platte3__gang { color: var(--rk-gold-text); }
@media (hover: hover) { .ch-platten3__knopf:hover .ch-platte3 { transform: translateY(-3px); } }
.ch-platten3__feld { position: relative; }
.ch-gang { display: grid; gap: 18px; padding: clamp(18px, 3vw, 30px); border: 1px solid var(--rk-wow-line); border-radius: var(--rk-wow-r-card); background: var(--rk-wow-card); box-shadow: var(--ph-erhaben); }
html:not(.ch-js) .ch-gang + .ch-gang { margin-top: 18px; }
html.ch-js .ch-gang[hidden] { display: none; }
.ch-gang__kopf { width: 88px; }
html.ch-js .ch-gang__kopf { display: none; }
.ch-gang__text { display: grid; gap: 10px; align-content: start; }
.ch-gang__kicker { margin: 0; font-size: var(--rk-wow-fs-tag); letter-spacing: .12em; text-transform: uppercase; color: var(--rk-gold-text); }
.ch-gang__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); }
.ch-gang__text p:last-child { margin: 0; max-width: 62ch; color: var(--text-secondary); line-height: 1.65; }
.ch-gang__medien { display: grid; gap: 14px; min-width: 0; }
.ch-platten3__filme { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; align-items: start; }
.ch-platten3__filme .ch-film__video { width: 100%; }
.ch-platten3__filme .ch-film__text { margin-top: 6px; font-size: var(--rk-wow-fs-tag); }
.ch-platten3__leiste { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin: 0; padding: 0; list-style: none; }
.ch-platten3__leiste figure { margin: 0; }
.ch-platten3__leiste .ch-bildknopf img { aspect-ratio: 4 / 3; object-fit: cover; }
.ch-platten3__leiste figcaption { margin-top: 6px; font-size: var(--rk-wow-fs-tag); line-height: 1.4; }
.ch-platten3__bild { margin: 0; max-width: 300px; }
.ch-platten3__bild figcaption { margin-top: 8px; }
@media (min-width: 960px) {
  .ch-platten3__reihe { grid-template-columns: repeat(3, 128px); gap: 22px; }
  .ch-gang { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: start; gap: clamp(24px, 3vw, 40px); }
  .ch-gang--ohne-medium { grid-template-columns: minmax(0, 1fr); }
  .ch-gang--ohne-medium .ch-gang__text { max-width: 62ch; }
  html:not(.ch-js) .ch-gang__kopf { grid-column: 1 / -1; }
  .ch-gang__medien:has(.ch-platten3__filme) { grid-template-columns: minmax(0, 420px) minmax(0, 150px); gap: 16px; align-items: start; }
  .ch-platten3__filme { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
  .ch-platten3__leiste { grid-template-columns: minmax(0, 1fr); gap: 10px; }
}
:root[data-theme="dark"] .ch-gang { box-shadow: var(--ph-erhaben-stark); }
:root[data-theme="dark"] .ch-platte3 { box-shadow: var(--ph-erhaben); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .ch-gang { box-shadow: var(--ph-erhaben-stark); } :root:not([data-theme="light"]) .ch-platte3 { box-shadow: var(--ph-erhaben); } }

/* ==========================================================================
   Lupe mit Musterkarte — Arbeitsname rk-wow-lupe (Black Rasen)
   Lupenbild (das einzige Bild über 60 % Inhaltsbreite), runder Ausschnitt mit 2,5-facher Vergrößerung aus der großen Fassung, Ring Gold.
   Darunter die Musterkarte: 13 Felder in einer Reihe (Handy wischbar), ein Tipp legt das Feld unter die Lupe. Ohne JS: Links auf die Bilder.
   ========================================================================== */
.ch-struktur__raster { display: grid; gap: clamp(20px, 3vw, 36px); align-items: start; }
.ch-struktur__text > .ref-lead { font-size: var(--rk-wow-fs-body); line-height: 1.6; }
.ch-struktur__text > p:not(.ref-lead) { font-size: var(--rk-wow-fs-meta); line-height: 1.6; }
.ch-lupe { margin: 0; display: grid; gap: 10px; min-width: 0; }
.ch-lupe__flaeche { position: relative; overflow: hidden; border-radius: var(--rk-wow-r-md); background: var(--rk-wow-tint); box-shadow: var(--rk-wow-sh-2); aspect-ratio: 4 / 3; }
.ch-lupe__bild { display: block; width: 100%; height: 100%; object-fit: cover; user-select: none; -webkit-user-drag: none; transition: opacity .25s var(--rk-wow-ease); }
.ch-lupe.is-laedt .ch-lupe__bild { opacity: .35; }
.ch-lupe__glas { --d: 120px; position: absolute; left: 0; top: 0; z-index: 2; display: none; width: var(--d); height: var(--d); margin: calc(var(--d) / -2) 0 0 calc(var(--d) / -2); border-radius: 50%;
  border: 2px solid var(--ch-gold); box-shadow: 0 0 0 1px color-mix(in srgb, var(--rk-wow-dark-bg) 60%, transparent), var(--rk-wow-sh-3); background-repeat: no-repeat; background-color: var(--rk-wow-dark-bg); pointer-events: none; }
.ch-lupe.is-sichtbar .ch-lupe__glas { display: block; }
.ch-lupe.is-an .ch-lupe__flaeche { cursor: none; touch-action: none; }
.ch-lupe__steuer { display: none; flex-wrap: wrap; align-items: center; gap: 8px 16px; }
html.ch-js .ch-lupe__steuer { display: flex; }
html.ch-js .ch-lupe__voll { display: none; }
html:not(.ch-js) .ch-lupe__steuer { display: block; }
html:not(.ch-js) .ch-lupe__knopf, html:not(.ch-js) .ch-lupe__hinweis { display: none; }
.ch-lupe__knopf svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
.ch-lupe__knopf[aria-pressed="true"] { --rk-btn-secondary-bg: var(--text-primary); --rk-btn-secondary-fg: var(--rk-wow-card); }
.ch-lupe__voll { color: var(--text-primary); text-decoration: underline; text-underline-offset: .2em; }
.ch-lupe__hinweis { flex: 1 1 260px; margin: 0; color: var(--text-muted); font-size: var(--rk-wow-fs-tag); line-height: 1.4; }
.ch-muster { margin-top: 22px; }
.ch-muster__titel { margin: 0 0 10px; font-size: var(--rk-wow-fs-tag); font-weight: var(--rk-fw-regular, 400); letter-spacing: .12em; text-transform: uppercase; color: var(--rk-gold-text); }
.ch-muster__reihe { display: grid; grid-auto-flow: column; grid-auto-columns: calc((100% - 4 * 6px) / 5.4); gap: 6px; margin: 0; padding: 2px 2px 10px; list-style: none; overflow-x: auto; scroll-snap-type: x proximity; overscroll-behavior-x: contain; }
.ch-muster__reihe li { scroll-snap-align: start; }
.ch-muster__feld { position: relative; display: block; aspect-ratio: 1; overflow: hidden; border-radius: var(--rk-wow-r-sm); background: var(--rk-wow-tint); box-shadow: var(--rk-wow-sh-1); cursor: pointer; }
.ch-muster__feld img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .5s var(--rk-wow-ease); }
@media (hover: hover) { .ch-muster__feld:hover img { transform: scale(1.06); } }
.ch-muster__feld:focus-visible { outline: 3px solid var(--rk-focus-color, currentColor); outline-offset: 2px; }
.ch-muster__feld[aria-pressed="true"] { box-shadow: 0 0 0 2px var(--ch-gold), var(--rk-wow-sh-2); }
.ch-muster__nr { position: absolute; left: 5px; bottom: 5px; padding: 1px 6px; border-radius: var(--rk-wow-r-pill); background: var(--rk-wow-dark-bg); color: var(--rk-wow-dark-ink); font-size: .75rem; font-variant-numeric: tabular-nums; }
@media (min-width: 960px) {
  .ch-struktur__raster { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .ch-lupe__glas { --d: 180px; }
  .ch-muster__reihe { grid-auto-flow: row; grid-template-columns: repeat(13, minmax(0, 1fr)); overflow: visible; padding: 0; }
}
:root[data-theme="dark"] .ch-muster__feld { box-shadow: var(--ph-erhaben); }
:root[data-theme="dark"] .ch-muster__feld[aria-pressed="true"] { box-shadow: 0 0 0 2px var(--rk-wow-dark-gold), var(--ph-erhaben); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .ch-muster__feld { box-shadow: var(--ph-erhaben); }
  :root:not([data-theme="light"]) .ch-muster__feld[aria-pressed="true"] { box-shadow: 0 0 0 2px var(--rk-wow-dark-gold), var(--ph-erhaben); }
}

/* ==========================================================================
   Lichtprobe — Arbeitsname rk-wow-licht (Black Rasen, Höhepunkt)
   Fünf Stufen = fünf echte, ungefilterte Filme derselben Wand (Poster = Stufenbild). Links der Film der gewählten Stufe (9:16), rechts
   Regler, Etiketten, Stufentext (Live-Region), Abspiel-Knopf und einmal die Wahrheitszeile. Nichts liegt über dem Bild außer dem Play-Symbol.
   Bühne bleibt dunkel. Ohne JS: fünf Filme als wischbare Reihe mit Etikett und Satz, Wahrheitszeile einmal darunter.
   ========================================================================== */
.ch-licht__buehne { display: grid; gap: 14px; padding: clamp(18px, 3vw, 34px) clamp(16px, 4vw, 40px); border-radius: var(--rk-wow-r-card); box-shadow: var(--ph-erhaben-stark); }
.ch-licht__filme { display: flex; gap: 12px; margin: 0; padding: 0 0 8px; list-style: none; overflow-x: auto; scroll-snap-type: x mandatory; }
.ch-licht__stufe { flex: 0 0 72%; scroll-snap-align: start; min-width: 0; }
.ch-licht__fig { margin: 0; display: grid; gap: 10px; }
.ch-licht__video { width: 100%; aspect-ratio: 9 / 16; }
.ch-licht__fig-text { display: grid; gap: 4px; color: var(--rk-wow-dark-text); }
.ch-licht__fig-text b { font-weight: var(--rk-fw-regular, 400); color: var(--rk-wow-dark-ink); font-size: var(--rk-wow-fs-body); }
.ch-licht__steuer { display: none; gap: 12px; align-content: start; min-width: 0; }
html.ch-js .ch-licht__steuer { display: grid; }
html.ch-js .ch-licht__filme { display: grid; overflow: visible; padding: 0; }
html.ch-js .ch-licht__stufe { grid-area: 1 / 1; opacity: 0; visibility: hidden; transition: opacity .3s var(--rk-wow-ease), visibility 0s linear .3s; }
html.ch-js .ch-licht__stufe.is-an { opacity: 1; visibility: visible; transition: opacity .3s var(--rk-wow-ease), visibility 0s; }
html.ch-js .ch-licht__fig-text { display: none; }
html.ch-js .ch-licht__video { max-height: 70vh; width: auto; max-width: 100%; margin-inline: auto; }
.ch-licht__label { font-size: var(--rk-wow-fs-tag); letter-spacing: .12em; text-transform: uppercase; color: var(--rk-wow-dark-gold); }
.ch-licht__range { width: 100%; height: 48px; margin: 0; accent-color: var(--rk-wow-dark-gold); cursor: pointer; background: transparent; }
.ch-licht__range:focus-visible { outline: 3px solid var(--rk-wow-dark-gold); outline-offset: 2px; }
.ch-licht__enden { display: flex; justify-content: space-between; margin: -8px 0 0; font-size: var(--rk-wow-fs-tag); color: var(--rk-wow-dark-muted); }
.ch-licht__etiketten { display: flex; gap: 8px; margin: 0; padding: 2px 2px 8px; list-style: none; overflow-x: auto; }
.ch-licht__etiketten li { flex: none; }
.ch-licht__etiketten button { display: inline-flex; align-items: center; gap: 10px; min-height: 48px; padding: 0 16px 0 8px; border: 1px solid var(--rk-wow-dark-line-strong); border-radius: var(--rk-wow-r-pill);
  background: transparent; color: var(--rk-wow-dark-ink); white-space: nowrap; cursor: pointer; text-align: left; }
.ch-licht__n { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; border: 1px solid var(--rk-wow-dark-line-strong); font-size: var(--rk-wow-fs-tag); font-variant-numeric: tabular-nums; }
.ch-licht__etiketten button[aria-pressed="true"] { background: var(--rk-wow-dark-ink); color: var(--rk-wow-dark-bg); border-color: var(--rk-wow-dark-ink); }
.ch-licht__etiketten button[aria-pressed="true"] .ch-licht__n { border-color: var(--rk-wow-dark-bg); }
.ch-licht__etiketten button:focus-visible { outline: 3px solid var(--rk-wow-dark-gold); outline-offset: 2px; }
.ch-licht__satz { margin: 2px 0 0; min-height: 4.7em; color: var(--rk-wow-dark-text); line-height: 1.55; }
.ch-licht__satz b { font-weight: var(--rk-fw-regular, 400); color: var(--rk-wow-dark-ink); }
.ch-licht__film { justify-self: start; gap: 10px; }
.ch-licht__film svg { width: 18px; height: 18px; fill: currentColor; }
.ch-wahrheit { display: inline-flex; align-items: center; justify-self: start; gap: 10px; margin: 0; padding-top: 12px; border-top: 1px solid var(--rk-wow-dark-gold); color: var(--rk-wow-dark-gold); font-size: var(--rk-wow-fs-lead); letter-spacing: .01em; }
.ch-wahrheit__punkt { width: 10px; height: 10px; border-radius: 50%; background: var(--rk-wow-dark-ink); box-shadow: 0 0 0 2px var(--rk-wow-dark-gold); }
.ch-lichteinfall { display: grid; gap: 10px; margin-top: clamp(24px, 3vw, 30px); }
.ch-lichteinfall__text > p { font-size: var(--rk-wow-fs-meta); line-height: 1.65; }
.ch-lichteinfall__titel { margin: 0; font-size: var(--rk-wow-fs-big); font-weight: var(--rk-fw-regular, 400); line-height: 1.08; letter-spacing: var(--rk-wow-ls-tight); color: var(--text-primary); }
@media (min-width: 900px) {
  html.ch-js .ch-licht__buehne { grid-template-columns: minmax(0, 264px) minmax(0, 1fr); grid-template-rows: auto 1fr; column-gap: clamp(28px, 4vw, 56px); align-items: start; }
  html.ch-js .ch-licht__filme { grid-row: 1 / span 2; }
  html.ch-js .ch-licht__video { width: 100%; max-height: none; }
  html.ch-js .ch-wahrheit { grid-column: 2; align-self: end; }
  .ch-licht__etiketten { flex-wrap: wrap; overflow: visible; }
  .ch-lichteinfall__text { columns: 3; column-gap: clamp(24px, 3vw, 40px); }
  .ch-lichteinfall__text > p { max-width: none; }
  .ch-licht__stufe { flex-basis: 30%; }
}

/* Fragen: Desktop zweispaltig (zehn Fragen, alle zu; halbe Höhe), Handy eine Spalte (Arbeitsname rk-wow-faq-zweispaltig) */
@media (min-width: 960px) { .ch-fragen .rk-faq { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; max-width: none; } }

/* ==========================================================================
   Einblenden (Vertrag: nur unter html.ch-js.rk-wow-motion, nur bis .is-in, alles unter 1 s)
   ========================================================================== */
@media (prefers-reduced-motion: no-preference) {
  html.ch-js.rk-wow-motion:not(.no-motion):not([data-motion="reduced"]) .ch-dip__bilder:not(.is-in) .ch-dip__fig { opacity: 0; transform: translateY(14px); }
  html.ch-js.rk-wow-motion:not(.no-motion):not([data-motion="reduced"]) .ch-dip__bilder:not(.is-in) .ch-dip__fig--b { transform: translateY(26px); }
  html.ch-js.rk-wow-motion .ch-dip__fig { transition: opacity .55s var(--rk-wow-ease), transform .55s var(--rk-wow-ease); }
  html.ch-js.rk-wow-motion .ch-dip__fig--b { transition-delay: .12s; }

  /* Lamellen: neun senkrechte Spalte öffnen sich (0,9 s), danach ist die Maske weg */
  html.ch-js.rk-wow-motion:not(.no-motion):not([data-motion="reduced"]) .ch-lamellen.is-lamellen .ch-lamellen__fig[data-rolle="gross"] {
    -webkit-mask-image: repeating-linear-gradient(90deg, var(--rk-wow-dark-bg) 0 var(--ch-spalt), transparent var(--ch-spalt) 11.12%);
    mask-image: repeating-linear-gradient(90deg, var(--rk-wow-dark-bg) 0 var(--ch-spalt), transparent var(--ch-spalt) 11.12%);
    animation: ch-lamellen .9s var(--rk-wow-ease) .1s both; }
  html.ch-js.rk-wow-motion:not(.no-motion):not([data-motion="reduced"]) .ch-lamellen.is-lamellen .ch-lamellen__fig[data-rolle="klein"] { animation: ch-einschub .6s var(--rk-wow-ease) .3s both; }

  html.ch-js.rk-wow-motion:not(.no-motion):not([data-motion="reduced"]) .ch-graukeil__keil:not(.is-in) .ch-keil::after { opacity: 1; }
  html.ch-js.rk-wow-motion .ch-keil::after { transition: opacity .25s linear calc(var(--i) * 70ms); }

  html.ch-js.rk-wow-motion .ch-plan__zug { transition: stroke-dashoffset .8s var(--rk-wow-ease); }
  html.ch-js.rk-wow-motion :is(.ch-plan__punkt, .ch-plan__leit, .ch-plan__fakt) { transition: opacity .3s var(--rk-wow-ease) calc(.5s + var(--i) * 70ms); }
  html.ch-js.rk-wow-motion:not(.no-motion):not([data-motion="reduced"]) .ch-plan:not(.is-in) .ch-plan__zug:not(.ch-plan__wand):not(.ch-plan__decke) { stroke-dashoffset: 1; }
  html.ch-js.rk-wow-motion:not(.no-motion):not([data-motion="reduced"]) .ch-plan:not(.is-in) :is(.ch-plan__punkt, .ch-plan__leit, .ch-plan__fakt, .ch-plan__loch) { opacity: 0; }

  html.ch-js.rk-wow-motion .ch-profil__linie { transition: stroke-dashoffset .9s var(--rk-wow-ease); }
  html.ch-js.rk-wow-motion:not(.no-motion):not([data-motion="reduced"]) .ch-profil__lauf:not(.is-in) .ch-profil__linie { stroke-dashoffset: 1; }

  html.ch-js.rk-wow-motion .ch-karte { transition: opacity .6s var(--rk-wow-ease), transform .6s var(--rk-wow-ease); }
  html.ch-js.rk-wow-motion:not(.no-motion):not([data-motion="reduced"]) .ch-karte:not(.is-in) { opacity: 0; transform: translateY(16px) rotate(-2.5deg); }
  html.ch-js.rk-wow-motion:not(.no-motion):not([data-motion="reduced"]) .ch-karte--kreide:not(.is-in) { transform: translateY(16px) rotate(2deg); }
}
@keyframes ch-lamellen { from { --ch-spalt: 0%; } to { --ch-spalt: 11.2%; } }
@keyframes ch-einschub { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }

/* ─── Bewegung reduziert: alles steht, Linien fertig gezeichnet, kein Leuchten, keine Drehung ─── */
@media (prefers-reduced-motion: reduce) {
  .ch *, .ch *::after, .ch *::before { transition: none !important; animation: none !important; }
  .ch-karte { rotate: 0deg !important; }
  .ch-stufe:is(:hover, :focus-within) .ch-stufe__knoten { box-shadow: none; }
  .ch-platten3__knopf[aria-selected="true"] .ch-platte3 { transform: none; }
}
html:is(.no-motion, [data-motion="reduced"]) .ch :is(*, *::before, *::after) { transition: none !important; animation: none !important; }
html:is(.no-motion, [data-motion="reduced"]) .ch-karte { rotate: 0deg !important; }
html:is(.no-motion, [data-motion="reduced"]) .ch-stufe:is(:hover, :focus-within) .ch-stufe__knoten { box-shadow: none; }
html:is(.no-motion, [data-motion="reduced"]) .ch-platten3__knopf[aria-selected="true"] .ch-platte3 { transform: none; }

/* ─── Druck ─── */
@media print {
  .ch-gross, .ch-video__play, .ch-lasche, .ch-rg__steuer, .ch-licht__steuer, .ch-lupe__steuer, .ch-profil__handlauf, .ch-abzieh__nach, .ch-platten3__reihe, .ch-lamellen__oeffnen { display: none !important; }
  .ch-licht__stufe, .ch-gang[hidden] { display: block !important; position: static !important; opacity: 1 !important; visibility: visible !important; }
  .ch-rg__leiste, .ch-licht__filme { display: grid !important; overflow: visible !important; }
  .ch-stufe, .ch-gang, .ch-karte { break-inside: avoid; transform: none !important; rotate: 0deg !important; }
}