/* ==========================================================================
   referenz-heiligenhafen.css — seitenlokale Bausteine der Referenz „Treppe mit Mikrozement im Altbau, Heiligenhafen“ (Präfix hh-)
   Version: 1.0 | 2026-10-17 | Quelle: Marketing/projektreferenzen/vorlagen/ (bauen_heiligenhafen.py, projekte/treppe-mikrozement-heiligenhafen/konzept.md)
   Leitgedanke „guss-farbprobe“: aus einem Guss mit dem Boden — erst gerade, dann Lage für Lage, am Ende die Probe Ton in Ton.
   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, kein mix-blend-mode, keine Abdunklung über den Fotos.
   Mobile first (390 px), Hell und Dunkel (Dunkelmodus erhaben), reduzierte Bewegung (prefers-reduced-motion, html.no-motion, [data-motion="reduced"]),
   Fokus sichtbar, Gold nur als Linie oder Text. Einblende-Vertrag: Ausgangszustände nur unter html.hh-js.rk-wow-motion und nur bis .is-in;
   ohne Skript, reduziert und im Druck steht alles.
   Arbeitsnamen für die Zentralisierung durch die Website-Sitzung:
     rk-wow-guss        Einstieg: Nachher-Foto läuft beim Laden wie frisch gegossen von oben nach unten ein (Decke mit welliger Fließkante und
                        Goldlinie gleitet aus dem Bild), danach liegt nichts mehr über dem Bild; Wiederholung [data-hh-guss-wdh] einmal beim Hineinscrollen
     rk-wow-bauschild   „Auf einen Blick“ als Bauschild auf zwei Pfosten: Datenzeilen, Baustoffe in Arbeitsreihenfolge mit * (Shop) und ° (eigen)
     rk-wow-kellenbahn  Arbeitsschritte als Spachtelbahn: Kelle ziehen oder Stopp antippen, die Schicht wächst bis zum Schritt; je Schritt Medium,
                        Text und Stufen-Skizze (drei Stufen von der Seite, das gerade Bearbeitete zeichnet sich in Gold)
     rk-wow-mischung    Wahlkarte Anmischen: Wasser oder Acrylharzmilch, der Eimer füllt sich mit dem gewählten Anmachmittel
     rk-wow-kornlehre   Wahlkarte Aufbau: Lagen auf Korn oder ein dicker Gang (reißt), Skizze wechselt
     rk-wow-sofortbild  Vorher/Nachher als Sofortbild-Abzüge nebeneinander (kein Regler), Chips je Paar, das Nachher-Bild „entwickelt“ sich (nur Deckkraft),
                        „In Ruhe vergleichen“ 15 s je Paar, jede Bedienung hält an (WCAG 2.2.2)
     rk-wow-farbprobe   Zwei Ringe im Foto (Boden, unterste Stufe), „Probe nehmen“ legt Lupen aus echten Bildpunkten nebeneinander
     rk-wow-video, rk-wow-gross wie Marl (Präfix hh-, mit Vorschau-Adressen pv:)
   ========================================================================== */
:where(.hh) button { font: inherit; }
.hh .rk-wow-statement__title, .hh-h1 { overflow-wrap: break-word; hyphens: auto; }
.hh :is(button, a, input, summary, [tabindex="0"]):focus-visible { outline: 3px solid var(--rk-focus-color, currentColor); outline-offset: 2px; }
.hh figure { margin: 0; min-width: 0; }
.hh figcaption { color: var(--text-secondary); font-size: var(--rk-wow-fs-meta); line-height: 1.5; }
.hh-text > p { max-width: 66ch; margin: 0 0 1em; color: var(--text-secondary); line-height: 1.65; }
.hh-text > p:last-child { margin-bottom: 0; }
.hh-h1 { margin: 0; font-size: clamp(2.05rem, 1.35rem + 2.5vw, 3.2rem); font-weight: var(--rk-fw-regular, 400); line-height: 1.05; letter-spacing: var(--rk-wow-ls-tight); color: var(--text-primary); text-wrap: balance; }
.hh-lead { margin: 0; max-width: 60ch; font-size: clamp(1.05rem, .98rem + .3vw, 1.2rem); line-height: 1.55; color: var(--text-secondary); text-wrap: pretty; }
.hh-bildknopf, .hh-guss__knopf, .hh-befund__knopf, .hh-daumen, .hh-abzug__knopf { display: block; position: relative; box-sizing: border-box; overflow: hidden; border-radius: var(--rk-wow-r-md); cursor: zoom-in; color: inherit; text-decoration: none; }
.hh-bildknopf img, .hh-guss__knopf img, .hh-befund__knopf img, .hh-daumen img, .hh-abzug__knopf img { display: block; width: 100%; height: auto; }
@media (hover: hover) { .hh-bildknopf img { transition: transform .5s var(--rk-wow-ease); } .hh-bildknopf:hover img { transform: scale(1.02); } }
.hh :is(.hh-bildknopf, .hh-befund__knopf, .hh-guss__knopf, .hh-daumen, .hh-abzug__knopf):focus-visible { outline: 3px solid var(--rk-focus-color, currentColor); outline-offset: 3px; }

/* Abstände: 48 / 64 px zwischen Blöcken, kompakte Köpfe */
.hh .ref__block { margin-top: 48px; }
@media (min-width: 960px) { .hh .ref__block { margin-top: 56px; } }
.hh .hh-kopf { margin-bottom: 22px; }
.hh-kopf--kompakt { gap: 10px; }
.hh-kopf--kompakt .rk-wow-statement__title { font-size: var(--rk-wow-fs-big); line-height: 1.06; }
.hh-kopf--gross { gap: 12px; }
.hh-kopf--gross .rk-wow-statement__title { font-size: clamp(2.1rem, 1.2rem + 3vw, 3.7rem); line-height: 1.02; }
.hh-kopf .rk-wow-statement__sub { font-size: var(--rk-wow-fs-body); max-width: 62ch; }
.hh .ph-pos-r.hh-kopf { margin-left: auto; text-align: right; justify-items: end; }
.hh .ph-pos-r.hh-kopf .rk-wow-statement__sub { margin-left: auto; }
.hh > .ref__wrap > .rk-cta { margin-top: 48px; }
@media (min-width: 960px) { .hh > .ref__wrap > .rk-cta { margin-top: 56px; } }

/* Runde Knöpfe (Pfeile) — hell und dunkel klar lesbar (FLOW §23) */
.hh-runder-knopf, .hh-gross__pfeil, .hh-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; }
.hh-runder-knopf svg, .hh-gross__pfeil svg, .hh-gross__zu svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.hh-runder-knopf:disabled { opacity: .4; cursor: default; }
@media (hover: hover) { .hh-runder-knopf:not(:disabled):hover { border-color: var(--text-primary); } }

/* ==========================================================================
   1 Guss-Einstieg — rk-wow-guss
   ========================================================================== */
.hh-einstieg { display: grid; gap: 28px; margin-top: 4px; padding: clamp(22px, 2.4vw, 32px) clamp(16px, 4vw, 48px); border-radius: var(--rk-wow-r-card); box-shadow: var(--ph-erhaben-stark); }
.hh-einstieg__text { display: grid; gap: 16px; align-content: center; min-width: 0; }
.hh-einstieg .rk-wow-btnrow { margin: 4px 0 0; }
.hh-chip { 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; }
.hh-chip__stempel { font-size: var(--rk-wow-fs-tag); letter-spacing: .12em; text-transform: uppercase; color: var(--rk-gold-text); }
.hh-chip__pfeil { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--text-primary); color: var(--rk-wow-card); }
.hh-chip__pfeil svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
@media (hover: hover) { .hh-chip:hover { border-color: var(--text-primary); } }
.hh-guss { position: relative; justify-self: center; width: min(100%, 500px); }
.hh-guss__knopf { border-radius: var(--rk-wow-r-card); box-shadow: var(--ph-erhaben-stark); }
/* Die Decke: frischer Spachtel in einem Grau aus Token, oben eine wellige Fließkante mit Goldlinie. Gleitet einmal nach unten aus dem Bild. */
.hh-guss__decke { position: absolute; inset: 0; z-index: 2; pointer-events: none; background: color-mix(in srgb, var(--text-primary) 16%, var(--rk-wow-card)); will-change: transform; }
.hh-guss__decke svg { position: absolute; left: 0; bottom: 100%; width: 100%; height: 26px; overflow: visible; }
.hh-guss__decke .hh-guss__welle { fill: color-mix(in srgb, var(--text-primary) 16%, var(--rk-wow-card)); }
.hh-guss__decke .hh-guss__kante { fill: none; stroke: var(--rk-gold-text); stroke-width: 2.4; vector-effect: non-scaling-stroke; stroke-linecap: round; }
@media (min-width: 960px) {
  .hh-einstieg { grid-template-columns: minmax(0, 1fr) minmax(0, 400px); gap: clamp(32px, 4vw, 56px); align-items: center; }
  .hh-guss { width: 100%; }
}
@media (prefers-reduced-motion: no-preference) {
  html.hh-js.rk-wow-motion .is-guss .hh-guss__decke { animation: hh-guss 1.25s cubic-bezier(.55, .05, .3, 1) .15s both; }
  html.hh-js.rk-wow-motion .is-guss .hh-guss__decke .hh-guss__welle,
  html.hh-js.rk-wow-motion .is-guss .hh-guss__decke .hh-guss__kante { animation: hh-welle 1.25s ease-in-out .15s both; }
}
@keyframes hh-guss { from { transform: translateY(0); } to { transform: translateY(calc(100% + 30px)); } }
@keyframes hh-welle { 0% { translate: 0 0; } 50% { translate: -6% 0; } 100% { translate: 0 0; } }
:root[data-theme="dark"] .hh-guss__decke, :root[data-theme="dark"] .hh-guss__decke .hh-guss__welle { background: color-mix(in srgb, var(--rk-wow-dark-ink) 22%, var(--rk-wow-dark-bg)); fill: color-mix(in srgb, var(--rk-wow-dark-ink) 22%, var(--rk-wow-dark-bg)); }
:root[data-theme="dark"] .hh-guss__decke .hh-guss__kante { stroke: var(--rk-wow-dark-gold); }
:root[data-theme="dark"] .hh-einstieg { background: color-mix(in srgb, var(--rk-wow-dark-text) 4%, transparent); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .hh-guss__decke, :root:not([data-theme="light"]) .hh-guss__decke .hh-guss__welle { background: color-mix(in srgb, var(--rk-wow-dark-ink) 22%, var(--rk-wow-dark-bg)); fill: color-mix(in srgb, var(--rk-wow-dark-ink) 22%, var(--rk-wow-dark-bg)); }
  :root:not([data-theme="light"]) .hh-guss__decke .hh-guss__kante { stroke: var(--rk-wow-dark-gold); }
  :root:not([data-theme="light"]) .hh-einstieg { background: color-mix(in srgb, var(--rk-wow-dark-text) 4%, transparent); }
}

/* ==========================================================================
   2 Bauschild „Auf einen Blick“ — rk-wow-bauschild
   ========================================================================== */
.hh-schild-halter { position: relative; width: min(100%, 960px); margin-inline: auto; padding-bottom: 40px; }
.hh-schild { position: relative; z-index: 1; overflow: hidden; border: 4px solid var(--text-primary); border-radius: var(--rk-wow-r-md); background: var(--rk-wow-card); box-shadow: var(--rk-wow-sh-3); outline: 1px solid var(--rk-wow-line-strong); outline-offset: -10px; }
.hh-schild__kopf { display: grid; gap: 4px; padding: clamp(18px, 2.6vw, 24px) clamp(22px, 4vw, 40px) 14px; border-bottom: 2px solid var(--text-primary); }
.hh-schild__kopf p { margin: 0; }
.hh-schild__marke-zeile { color: var(--rk-gold-text); font-size: var(--rk-wow-fs-tag); letter-spacing: .16em; text-transform: uppercase; }
.hh-schild__titel { margin: 0; color: var(--text-primary); font-size: var(--rk-wow-fs-big); font-weight: var(--rk-fw-regular, 400); line-height: 1.05; letter-spacing: var(--rk-wow-ls-tight); }
.hh-schild__unter { color: var(--text-secondary); font-size: var(--rk-wow-fs-meta); }
.hh-schild__koerper { display: grid; gap: 20px; padding: clamp(16px, 2.2vw, 22px) clamp(22px, 4vw, 40px); }
.hh-schild__daten { display: grid; margin: 0; }
.hh-schild__zeile { display: grid; grid-template-columns: 82px minmax(0, 1fr); gap: 12px; padding: 6px 0; border-bottom: 1px solid var(--rk-wow-line); }
.hh-schild__zeile:first-child { padding-top: 0; }
.hh-schild__zeile dt { padding-top: 3px; color: var(--text-muted); font-size: var(--rk-wow-fs-tag); letter-spacing: .1em; text-transform: uppercase; }
.hh-schild__zeile dd { margin: 0; color: var(--text-primary); font-size: var(--rk-wow-fs-meta); line-height: 1.45; }
.hh-schild__abschnitt { margin: 0 0 10px; color: var(--text-muted); font-size: var(--rk-wow-fs-tag); letter-spacing: .1em; text-transform: uppercase; }
.hh-schild__stoffe ol { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; counter-reset: none; }
.hh-schild__stoffe li { position: relative; display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 10px; align-items: start; padding: 4px 0; }
.hh-schild__stoffe li:not(:last-child)::after { content: ""; position: absolute; left: 13px; top: 30px; bottom: -3px; width: 2px; background: var(--rk-wow-line-strong); }
.hh-schild__n { position: relative; z-index: 1; display: grid; place-items: center; width: 28px; height: 28px; box-sizing: border-box; border-radius: 50%; border: 2px solid var(--text-primary); background: var(--rk-wow-card); color: var(--text-primary); font-size: var(--rk-wow-fs-tag); font-variant-numeric: tabular-nums; }
.hh-schild__stoff { display: grid; gap: 1px; font-size: var(--rk-wow-fs-meta); line-height: 1.4; color: var(--text-secondary); }
.hh-schild__stoff b { font-weight: var(--rk-fw-medium, 500); color: var(--text-primary); }
.hh-schild__marke { margin-left: 2px; color: var(--rk-gold-text); font-size: .85em; }
.hh-schild__fuss { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 20px; padding: 12px clamp(22px, 4vw, 40px) 16px; border-top: 2px solid var(--text-primary); color: var(--text-secondary); font-size: var(--rk-wow-fs-meta); line-height: 1.5; }
.hh-schild__fuss p { margin: 0; }
.hh-schild__ausfuehrung { color: var(--text-primary); }
.hh-schild__pfosten { position: absolute; left: 0; right: 0; bottom: 0; height: 60px; z-index: 0; }
.hh-schild__pfosten i { position: absolute; bottom: 0; width: 12px; height: 100%; border-radius: 3px 3px 0 0; background: color-mix(in srgb, var(--text-primary) 55%, var(--rk-wow-card)); box-shadow: var(--rk-wow-sh-1); transform-origin: 50% 100%; }
.hh-schild__pfosten i:first-child { left: 18%; } .hh-schild__pfosten i:last-child { right: 18%; }
.hh-schild__pfosten::after { content: ""; position: absolute; left: 8%; right: 8%; bottom: -1px; height: 2px; background: var(--rk-wow-line-strong); }
@media (min-width: 760px) { .hh-schild__koerper { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(24px, 4vw, 48px); } .hh-schild__zeile { grid-template-columns: 96px minmax(0, 1fr); } }
:root[data-theme="dark"] .hh-schild { background: var(--rk-wow-dark-raised); border-color: var(--rk-wow-dark-ink); outline-color: var(--rk-wow-dark-line-strong); box-shadow: var(--ph-erhaben-stark); }
:root[data-theme="dark"] .hh-schild__kopf, :root[data-theme="dark"] .hh-schild__fuss { border-color: var(--rk-wow-dark-ink); }
:root[data-theme="dark"] .hh-schild__n { background: var(--rk-wow-dark-raised); border-color: var(--rk-wow-dark-gold); }
:root[data-theme="dark"] .hh-schild__pfosten i { background: color-mix(in srgb, var(--rk-wow-dark-ink) 40%, var(--rk-wow-dark-bg)); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .hh-schild { background: var(--rk-wow-dark-raised); border-color: var(--rk-wow-dark-ink); outline-color: var(--rk-wow-dark-line-strong); box-shadow: var(--ph-erhaben-stark); }
  :root:not([data-theme="light"]) .hh-schild__kopf, :root:not([data-theme="light"]) .hh-schild__fuss { border-color: var(--rk-wow-dark-ink); }
  :root:not([data-theme="light"]) .hh-schild__n { background: var(--rk-wow-dark-raised); border-color: var(--rk-wow-dark-gold); }
  :root:not([data-theme="light"]) .hh-schild__pfosten i { background: color-mix(in srgb, var(--rk-wow-dark-ink) 40%, var(--rk-wow-dark-bg)); }
}
@media (prefers-reduced-motion: no-preference) {
  html.hh-js.rk-wow-motion .hh-schild { transition: transform .7s cubic-bezier(.3, 1.3, .55, 1) .2s, opacity .4s linear .2s; }
  html.hh-js.rk-wow-motion .hh-schild__pfosten i { transition: transform .45s var(--rk-wow-ease); }
  html.hh-js.rk-wow-motion .hh-schild__stoffe li { transition: opacity .35s var(--rk-wow-ease) calc(.7s + var(--i) * 80ms), transform .35s var(--rk-wow-ease) calc(.7s + var(--i) * 80ms); }
  html.hh-js.rk-wow-motion:not(.no-motion):not([data-motion="reduced"]) .hh-schild-halter:not(.is-in) .hh-schild { transform: translateY(40px); opacity: 0; }
  html.hh-js.rk-wow-motion:not(.no-motion):not([data-motion="reduced"]) .hh-schild-halter:not(.is-in) .hh-schild__pfosten i { transform: scaleY(0); }
  html.hh-js.rk-wow-motion:not(.no-motion):not([data-motion="reduced"]) .hh-schild-halter:not(.is-in) .hh-schild__stoffe li { opacity: 0; transform: translateX(-10px); }
}

/* ==========================================================================
   3 Ausgangslage — Bestandsfoto mit Markern, Befundkarten
   ========================================================================== */
.hh-ausgang { display: grid; gap: 0 24px; grid-template-areas: "kopf" "bild" "text"; }
.hh-ausgang > .hh-kopf { grid-area: kopf; }
.hh-ausgang__bild { grid-area: bild; margin-bottom: 24px !important; }
.hh-ausgang__text { grid-area: text; }
.hh-ausgang__bild { display: grid; gap: 10px; width: min(100%, 460px); }
.hh-ausgang__knopf, .hh-probe__knopf { box-shadow: var(--ph-erhaben-stark); }
.hh-marken-rahmen { position: relative; }
.hh-marken, .hh-ringe { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.hh-marke { position: absolute; left: var(--x); top: var(--y); display: flex; align-items: center; gap: 8px; translate: -9px -9px; }
.hh-marke i { flex: none; width: 18px; height: 18px; box-sizing: border-box; border-radius: 50%; border: 3px solid var(--rk-wow-dark-ink); background: var(--rk-gold-text); box-shadow: 0 0 0 2px var(--rk-wow-dark-bg), var(--rk-wow-sh-2); }
.hh-marke b { padding: 4px 10px; 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); font-weight: var(--rk-fw-medium, 500); letter-spacing: .04em; white-space: nowrap; box-shadow: var(--rk-wow-sh-2); }
.hh-ausgang__text { display: grid; gap: 0; align-content: start; min-width: 0; }
.hh-befunde { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin: 24px 0 0; padding: 0; list-style: none; }
.hh-befund { display: grid; gap: 8px; }
.hh-befund__knopf { box-shadow: var(--rk-wow-sh-2); aspect-ratio: 4 / 3; }
.hh-befund__knopf img { height: 100%; object-fit: cover; }
.hh-befund figcaption { display: flex; gap: 8px; align-items: baseline; color: var(--text-primary); }
.hh-befund__nr { color: var(--rk-gold-text); font-size: var(--rk-wow-fs-tag); letter-spacing: .08em; }
@media (min-width: 760px) { .hh-befunde { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (min-width: 960px) { .hh-ausgang { grid-template-columns: minmax(0, 420px) minmax(0, 1fr); grid-template-rows: auto 1fr; grid-template-areas: "bild kopf" "bild text"; column-gap: clamp(32px, 5vw, 64px); align-items: start; } .hh-ausgang__bild { margin-bottom: 0 !important; } }
@media (prefers-reduced-motion: no-preference) {
  html.hh-js.rk-wow-motion .hh-befunde li { transition: opacity .45s var(--rk-wow-ease), transform .45s var(--rk-wow-ease); }
  html.hh-js.rk-wow-motion .hh-befunde li:nth-child(2) { transition-delay: .08s; } html.hh-js.rk-wow-motion .hh-befunde li:nth-child(3) { transition-delay: .16s; } html.hh-js.rk-wow-motion .hh-befunde li:nth-child(4) { transition-delay: .24s; }
  html.hh-js.rk-wow-motion:not(.no-motion):not([data-motion="reduced"]) .hh-befunde:not(.is-in) li { opacity: 0; transform: translateY(12px); }
}

/* ==========================================================================
   4 Kellenbahn — rk-wow-kellenbahn
   Ohne Skript: alle sechs Schritte untereinander, Skizzen fertig gezeichnet, Bahn und Pfeile ausgeblendet.
   ========================================================================== */
.hh-kellenbahn { display: grid; gap: 18px; }
.hh-bahn { display: none; }
html.hh-js .hh-bahn { position: relative; display: block; height: 104px; margin: 0 48px; touch-action: pan-y; }
.hh-bahn__spur { position: absolute; left: 0; right: 0; top: 60px; height: 12px; border-radius: 6px; background: var(--rk-wow-tint); box-shadow: inset 0 1px 2px color-mix(in srgb, var(--text-primary) 20%, transparent); }
.hh-bahn__schicht { position: absolute; left: 0; top: 0; bottom: 0; width: var(--k, 0%); border-radius: 6px; background: color-mix(in srgb, var(--text-primary) 42%, var(--rk-wow-card)); border-right: 2px solid var(--rk-gold-text); }
.hh-bahn__kelle { position: absolute; left: var(--k, 0%); top: 4px; z-index: 3; width: 64px; height: 48px; margin-left: -32px; color: var(--text-primary); pointer-events: none; }
.hh-bahn__kelle svg { display: block; width: 100%; height: 100%; overflow: visible; }
.hh-kelle__blatt { fill: color-mix(in srgb, var(--text-primary) 10%, var(--rk-wow-card)); stroke: currentColor; stroke-width: 2; stroke-linejoin: round; }
.hh-kelle__steg, .hh-kelle__griff { fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; }
.hh-kelle__holz { fill: var(--rk-gold-text); stroke: currentColor; stroke-width: 1.6; }
.hh-bahn.is-ziehen .hh-bahn__kelle { color: var(--rk-gold-text); }
.hh-stopp { position: absolute; left: var(--p); top: 50px; z-index: 2; display: grid; justify-items: center; gap: 6px; width: 96px; margin-left: -48px; padding: 0; border: 0; background: none; color: var(--text-primary); cursor: pointer; }
.hh-stopp__nr { display: grid; place-items: center; width: 32px; height: 32px; box-sizing: border-box; border-radius: 50%; border: 2px solid var(--rk-wow-line-strong); background: var(--rk-wow-card); font-size: var(--rk-wow-fs-tag); font-variant-numeric: tabular-nums; transition: background-color .25s linear, border-color .25s linear, color .25s linear; }
.hh-stopp__text { font-size: var(--rk-wow-fs-tag); line-height: 1.2; text-align: center; color: var(--text-secondary); hyphens: auto; overflow-wrap: break-word; max-width: 100%; }
.hh-stopp.is-erledigt .hh-stopp__nr { border-color: var(--text-primary); }
.hh-stopp[aria-selected="true"] .hh-stopp__nr { background: var(--text-primary); border-color: var(--text-primary); color: var(--rk-wow-card); }
.hh-stopp[aria-selected="true"] .hh-stopp__text { color: var(--text-primary); }
.hh-stopp:focus-visible { outline: none; }
.hh-stopp:focus-visible .hh-stopp__nr { outline: 3px solid var(--rk-focus-color, currentColor); outline-offset: 3px; }
/* Zusätzliche Tippfläche: der ganze Knopf ist 48 px breit und hoch */
.hh-stopp::before { content: ""; position: absolute; left: 50%; top: -8px; width: 48px; height: 48px; margin-left: -24px; }
@media (max-width: 699px) {
  html.hh-js .hh-bahn { height: 96px; margin: 0 18px; }
  .hh-stopp { width: 48px; margin-left: -24px; }
  .hh-stopp__text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}
.hh-felder { display: grid; gap: 32px; min-width: 0; }
html.hh-js .hh-felder { gap: 0; }
.hh-feld { display: grid; gap: 18px; padding: clamp(16px, 3vw, 26px); border: 1px solid var(--rk-wow-line); border-radius: var(--rk-wow-r-card); background: var(--rk-wow-card); box-shadow: var(--rk-wow-sh-2); }
.hh-feld[hidden] { display: none; }
.hh-feld__medium { display: grid; gap: 8px; justify-self: center; width: min(100%, 300px); }
.hh-feld__bild { box-shadow: var(--rk-wow-sh-2); }
.hh-feld__text { display: grid; gap: 10px; align-content: start; min-width: 0; }
.hh-feld__text > p { margin: 0; color: var(--text-secondary); line-height: 1.62; }
.hh-feld__kicker { color: var(--rk-gold-text) !important; font-size: var(--rk-wow-fs-tag); letter-spacing: .1em; text-transform: uppercase; }
.hh-feld__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); }
.hh-feld__skizze { display: grid; gap: 4px 14px; align-items: end; margin-top: 4px; padding: 10px 14px; border: 1px dashed var(--rk-wow-line-strong); border-radius: var(--rk-wow-r-md); }
.hh-feld__skizze figcaption { font-size: var(--rk-wow-fs-tag); color: var(--text-muted); }
@media (min-width: 520px) { .hh-feld__skizze { grid-template-columns: minmax(0, 240px) minmax(0, 1fr); } }
.hh-feld__weitere { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 10px 16px; margin: 6px 0 0; padding: 12px 0 0; list-style: none; border-top: 1px solid var(--rk-wow-line); }
.hh-feld__weitere li { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 12px; align-items: center; }
.hh-daumen { width: 64px; aspect-ratio: 3 / 4; border-radius: var(--rk-wow-r-sm); box-shadow: var(--rk-wow-sh-1); }
.hh-daumen img { height: 100%; object-fit: cover; }
.hh-daumen__play { position: absolute; inset: 0; display: grid; place-items: center; color: var(--rk-wow-dark-ink); }
.hh-daumen__play svg { width: 26px; height: 26px; padding: 6px; border-radius: 50%; fill: currentColor; background: color-mix(in srgb, var(--rk-wow-dark-bg) 72%, transparent); box-sizing: border-box; }
.hh-daumen__text { color: var(--text-secondary); font-size: var(--rk-wow-fs-meta); line-height: 1.4; }
.hh-bahn__steuer { display: none; }
html.hh-js .hh-bahn__steuer { display: flex; align-items: center; justify-content: center; gap: 16px; }
/* Ab 960 px sind die Stopps groß genug und der Zähler steht im Feld: Weiter/Zurück nur auf dem Handy und Tablet */
@media (min-width: 960px) { html.hh-js .hh-bahn__steuer { display: none; } }
.hh-bahn__zahl, .hh-sofort__zahl { min-width: 11ch; text-align: center; color: var(--text-secondary); font-size: var(--rk-wow-fs-meta); font-variant-numeric: tabular-nums; }
@media (min-width: 700px) { .hh-feld { grid-template-columns: minmax(0, 280px) minmax(0, 1fr); align-items: start; } .hh-feld__medium { width: 100%; } }
@media (min-width: 1040px) { .hh-feld { grid-template-columns: minmax(0, 300px) minmax(0, 1fr); gap: clamp(24px, 3vw, 40px); } }
/* Stufen-Skizze: drei Stufen von der Seite, Linien aus Token, das gerade Bearbeitete in Gold */
.hh-skizze { display: block; width: 100%; max-width: 240px; height: auto; overflow: visible; }
.hh-skizze__schraffur { stroke: var(--rk-wow-line-strong); stroke-width: 1.2; }
.hh-skizze__rand { fill: none; stroke: var(--text-primary); stroke-width: 2; stroke-linejoin: miter; }
.hh-skizze__erhoehung { fill: none; stroke: var(--text-muted); stroke-width: 2; stroke-dasharray: 3 3; }
.hh-skizze__rau, .hh-skizze__pfeil, .hh-skizze__grundierung, .hh-skizze__steigung, .hh-skizze__tritt, .hh-skizze__siegel { fill: none; stroke: var(--rk-gold-text); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.hh-skizze__siegel--2 { stroke-width: 2; }
.hh-skizze__scheibe { fill: none; stroke: var(--text-primary); stroke-width: 2.4; stroke-linecap: round; }
.hh-skizze__luecke, .hh-skizze__staub { fill: var(--rk-gold-text); }
.hh-skizze__lage { fill: none; stroke: color-mix(in srgb, var(--text-primary) 55%, var(--rk-wow-card)); stroke-width: 4; }
.hh-skizze__lage.hh-skizze__an { stroke: var(--rk-gold-text); }
.hh-skizze__lage--fertig { stroke: color-mix(in srgb, var(--text-primary) 40%, var(--rk-wow-card)); stroke-width: 8; }
.hh-skizze__an[pathLength] { stroke-dasharray: 1; stroke-dashoffset: 0; }
@media (prefers-reduced-motion: no-preference) {
  html.hh-js.rk-wow-motion .hh-feld:not([hidden]) { animation: hh-feld .35s var(--rk-wow-ease) both; }
  html.hh-js.rk-wow-motion .hh-feld:not([hidden]) .hh-skizze__an[pathLength] { animation: hh-zeichne .9s var(--rk-wow-ease) calc(.2s + var(--k, 0) * .18s) both; }
  html.hh-js.rk-wow-motion .hh-feld:not([hidden]) .hh-skizze__an:not([pathLength]) { animation: hh-auftauchen .5s var(--rk-wow-ease) .5s both; }
  html.hh-js.rk-wow-motion .hh-feld:not([hidden]) .hh-skizze__tritt { animation-delay: calc(.8s + var(--k, 0) * .18s); }
  html.hh-js.rk-wow-motion .hh-bahn__kelle, html.hh-js.rk-wow-motion .hh-bahn__schicht { transition: left .45s var(--rk-wow-ease), width .45s var(--rk-wow-ease); }
  html.hh-js.rk-wow-motion .hh-bahn.is-ziehen :is(.hh-bahn__kelle, .hh-bahn__schicht) { transition: none; }
}
@keyframes hh-feld { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes hh-zeichne { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes hh-auftauchen { from { opacity: 0; transform: scale(.6); } to { opacity: 1; transform: none; } }
:root[data-theme="dark"] .hh-feld { background: var(--rk-wow-dark-raised); border-color: var(--rk-wow-dark-line); box-shadow: var(--ph-erhaben); }
:root[data-theme="dark"] .hh-stopp__nr { background: var(--rk-wow-dark-bg); color: var(--rk-wow-dark-ink); border-color: var(--rk-wow-dark-line-strong); }
:root[data-theme="dark"] .hh-stopp.is-erledigt .hh-stopp__nr { border-color: var(--rk-wow-dark-ink); }
:root[data-theme="dark"] .hh-stopp[aria-selected="true"] .hh-stopp__nr { background: var(--rk-wow-dark-bg); color: var(--rk-wow-dark-gold); border: 2px solid var(--rk-wow-dark-gold); }
:root[data-theme="dark"] .hh-bahn__spur { background: color-mix(in srgb, var(--rk-wow-dark-ink) 10%, var(--rk-wow-dark-bg)); }
:root[data-theme="dark"] .hh-bahn__schicht { background: color-mix(in srgb, var(--rk-wow-dark-ink) 45%, var(--rk-wow-dark-bg)); border-right-color: var(--rk-wow-dark-gold); }
:root[data-theme="dark"] .hh-bahn__kelle { color: var(--rk-wow-dark-ink); }
:root[data-theme="dark"] .hh-kelle__blatt { fill: var(--rk-wow-dark-raised); }
:root[data-theme="dark"] .hh-kelle__holz { fill: var(--rk-wow-dark-gold); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .hh-feld { background: var(--rk-wow-dark-raised); border-color: var(--rk-wow-dark-line); box-shadow: var(--ph-erhaben); }
  :root:not([data-theme="light"]) .hh-stopp__nr { background: var(--rk-wow-dark-bg); color: var(--rk-wow-dark-ink); border-color: var(--rk-wow-dark-line-strong); }
  :root:not([data-theme="light"]) .hh-stopp.is-erledigt .hh-stopp__nr { border-color: var(--rk-wow-dark-ink); }
  :root:not([data-theme="light"]) .hh-stopp[aria-selected="true"] .hh-stopp__nr { background: var(--rk-wow-dark-bg); color: var(--rk-wow-dark-gold); border: 2px solid var(--rk-wow-dark-gold); }
  :root:not([data-theme="light"]) .hh-bahn__spur { background: color-mix(in srgb, var(--rk-wow-dark-ink) 10%, var(--rk-wow-dark-bg)); }
  :root:not([data-theme="light"]) .hh-bahn__schicht { background: color-mix(in srgb, var(--rk-wow-dark-ink) 45%, var(--rk-wow-dark-bg)); border-right-color: var(--rk-wow-dark-gold); }
  :root:not([data-theme="light"]) .hh-bahn__kelle { color: var(--rk-wow-dark-ink); }
  :root:not([data-theme="light"]) .hh-kelle__blatt { fill: var(--rk-wow-dark-raised); }
  :root:not([data-theme="light"]) .hh-kelle__holz { fill: var(--rk-wow-dark-gold); }
}

/* ==========================================================================
   Video — Standbild + Play, startet stumm, nichts startet von selbst (rk-wow-video)
   ========================================================================== */
.hh-video { position: relative; overflow: hidden; border-radius: var(--rk-wow-r-md); background: var(--rk-wow-dark-bg); box-shadow: var(--ph-erhaben-stark); }
.hh-video__v { display: block; width: 100%; height: auto; background: var(--rk-wow-dark-bg); }
.hh-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.hh-js .hh-video__play { display: grid; }
html.hh-js .hh-video--ohne-quelle .hh-video__play { display: none; }
.hh-video__play svg, .hh-sofort__ruhe svg { width: 24px; height: 24px; fill: currentColor; }
.hh-video__play .hh-i-pause, .hh-video.is-laeuft .hh-video__play .hh-i-play { display: none; }
.hh-video.is-laeuft .hh-video__play .hh-i-pause { display: block; }
.hh-video.is-laeuft .hh-video__play { left: auto; top: 10px; right: 10px; width: 48px; height: 48px; margin: 0; opacity: .92; }
@media (hover: hover) { .hh-video__play:hover { transform: scale(1.06); } }
.hh-video__play:focus-visible { outline: 3px solid var(--rk-wow-dark-ink); outline-offset: 3px; }

/* ==========================================================================
   5 Werkstatt — rk-wow-mischung, rk-wow-kornlehre (Wahlkarten)
   Ohne Skript: beide Texte je Karte stehen untereinander mit Namen davor; die Skizze zeigt den Standard.
   ========================================================================== */
.hh-werkstatt__paar { display: grid; gap: 20px; }
@media (min-width: 900px) { .hh-werkstatt__paar { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(20px, 3vw, 32px); align-items: start; } }
.hh-wahl { display: grid; gap: 14px; padding: clamp(18px, 3vw, 28px); border: 1px solid var(--rk-wow-line); border-radius: var(--rk-wow-r-card); background: var(--rk-wow-card); box-shadow: var(--ph-erhaben); }
.hh-wahl__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); }
.hh-wahl__knoepfe { display: none; }
html.hh-js .hh-wahl__knoepfe { display: flex; flex-wrap: wrap; gap: 8px; }
.hh-wahl__knopf { min-height: 48px; padding: 8px 18px; box-sizing: border-box; border: 1px solid var(--rk-wow-line-strong); border-radius: var(--rk-wow-r-pill); background: var(--rk-wow-card); color: var(--text-primary); font-size: var(--rk-wow-fs-meta); cursor: pointer; }
.hh-wahl__knopf[aria-pressed="true"] { background: var(--text-primary); border-color: var(--text-primary); color: var(--rk-wow-card); }
@media (hover: hover) { .hh-wahl__knopf:hover { border-color: var(--text-primary); } }
.hh-wahl__bild { position: relative; display: grid; justify-items: center; gap: 6px; padding: 14px 10px 10px; border-radius: var(--rk-wow-r-md); background: var(--rk-wow-tint); }
.hh-wahl__bild svg { display: block; width: min(100%, 196px); height: auto; overflow: visible; }
.hh-wahl__bild .hh-korn__bild { width: min(100%, 300px); }
.hh-wahl__etiketten { display: flex; justify-content: center; }
.hh-wahl__etikett { padding: 3px 12px; border: 1px solid var(--rk-gold-text); border-radius: var(--rk-wow-r-pill); color: var(--rk-gold-text); font-size: var(--rk-wow-fs-tag); letter-spacing: .08em; text-transform: uppercase; }
.hh-wahl__texte { display: grid; gap: 8px; }
.hh-wahl__text { margin: 0; color: var(--text-secondary); line-height: 1.6; }
.hh-wahl__name { color: var(--text-primary); font-weight: var(--rk-fw-medium, 500); }
html.hh-js .hh-wahl__name { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.hh-wahl__fuss { margin: 0; padding-top: 10px; border-top: 1px solid var(--rk-wow-line); color: var(--text-muted); font-size: var(--rk-wow-fs-meta); line-height: 1.5; }
/* Was zur Wahl gehört: Etiketten und Skizzenzeilen immer nach data-wahl; Texte erst mit Skript */
.hh-wahl[data-wahl="wasser"] .hh-wahl__etikett:not([data-wahl-text="wasser"]), .hh-wahl[data-wahl="harzmilch"] .hh-wahl__etikett:not([data-wahl-text="harzmilch"]),
.hh-wahl[data-wahl="lagen"] .hh-korn__zeilen [data-wahl-text]:not([data-wahl-text="lagen"]), .hh-wahl[data-wahl="ein-gang"] .hh-korn__zeilen [data-wahl-text]:not([data-wahl-text="ein-gang"]) { display: none; }
html.hh-js .hh-wahl[data-wahl="wasser"] .hh-wahl__text:not([data-wahl-text="wasser"]), html.hh-js .hh-wahl[data-wahl="harzmilch"] .hh-wahl__text:not([data-wahl-text="harzmilch"]),
html.hh-js .hh-wahl[data-wahl="lagen"] .hh-wahl__text:not([data-wahl-text="lagen"]), html.hh-js .hh-wahl[data-wahl="ein-gang"] .hh-wahl__text:not([data-wahl-text="ein-gang"]) { display: none; }
/* Anmischen: Eimer, Flasche, Strahl; Pegel steigt, Anmachmittel wechselt */
.hh-misch__eimer, .hh-misch__henkel, .hh-misch__flasche { fill: none; stroke: var(--text-primary); stroke-width: 2.4; stroke-linejoin: round; stroke-linecap: round; }
.hh-misch__flasche { fill: var(--rk-wow-card); }
.hh-misch__strahl { fill: none; stroke: color-mix(in srgb, var(--rk-wow-hl-solid) 40%, var(--rk-wow-card)); stroke-width: 5; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; }
.hh-misch__fluessig--wasser { fill: color-mix(in srgb, var(--text-primary) 12%, var(--rk-wow-card)); }
.hh-misch__welle.hh-misch__fluessig--wasser { fill: none; stroke: var(--text-secondary); stroke-width: 1.6; }
.hh-misch__fluessig.hh-misch__fluessig--harzmilch { fill: color-mix(in srgb, var(--rk-wow-hl-solid) 22%, var(--rk-wow-card)); }
.hh-misch__punkt { fill: color-mix(in srgb, var(--rk-wow-hl-solid) 70%, var(--text-primary)); }
.hh-misch__fluessig--wasser, .hh-misch__fluessig--harzmilch { transition: opacity .45s linear; }
.hh-wahl[data-wahl="wasser"] .hh-misch__fluessig--harzmilch, .hh-wahl[data-wahl="harzmilch"] .hh-misch__fluessig--wasser { opacity: 0; }
.hh-misch__pegel { transform: translateY(0); }
/* Kornlehre: Lagen aus Körnern oder dicke Platte mit Riss */
.hh-korn__grund { stroke: none; }
.hh-korn__lage circle { fill: color-mix(in srgb, var(--text-primary) calc(30% + var(--k) * 12%), var(--rk-wow-card)); stroke: var(--text-primary); stroke-width: .8; }
.hh-korn__mass { fill: none; stroke: var(--rk-gold-text); stroke-width: 1.6; }
.hh-korn__platte { fill: color-mix(in srgb, var(--text-primary) 38%, var(--rk-wow-card)); stroke: var(--text-primary); stroke-width: 1.6; }
.hh-korn__riss { fill: none; stroke: var(--rk-wow-card); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 0; }
.hh-korn__nein { fill: var(--rk-wow-card); stroke: var(--rk-gold-text); stroke-width: 2.4; }
.hh-korn__nein-x { fill: none; stroke: var(--rk-gold-text); stroke-width: 2.6; stroke-linecap: round; }
.hh-korn__lagen, .hh-korn__dick { transition: opacity .35s linear; }
.hh-wahl[data-wahl="lagen"] .hh-korn__dick, .hh-wahl[data-wahl="ein-gang"] .hh-korn__lagen { opacity: 0; }
.hh-korn__zeilen { margin: 0; color: var(--text-muted); font-size: var(--rk-wow-fs-tag); letter-spacing: .06em; text-align: center; }
:root[data-theme="dark"] .hh-wahl { background: var(--rk-wow-dark-raised); border-color: var(--rk-wow-dark-line); box-shadow: var(--ph-erhaben-stark); }
:root[data-theme="dark"] .hh-wahl__knopf { background: var(--rk-wow-dark-bg); color: var(--rk-wow-dark-ink); border-color: var(--rk-wow-dark-line-strong); }
:root[data-theme="dark"] .hh-wahl__knopf[aria-pressed="true"] { background: var(--rk-wow-dark-bg); color: var(--rk-wow-dark-gold); border: 2px solid var(--rk-wow-dark-gold); }
:root[data-theme="dark"] .hh-wahl__bild { background: var(--rk-wow-dark-bg); }
:root[data-theme="dark"] :is(.hh-misch__eimer, .hh-misch__henkel, .hh-misch__flasche) { stroke: var(--rk-wow-dark-ink); }
:root[data-theme="dark"] .hh-misch__flasche { fill: var(--rk-wow-dark-raised); }
:root[data-theme="dark"] .hh-misch__fluessig--wasser { fill: color-mix(in srgb, var(--rk-wow-dark-ink) 22%, var(--rk-wow-dark-bg)); }
:root[data-theme="dark"] .hh-misch__welle.hh-misch__fluessig--wasser { stroke: var(--rk-wow-dark-ink); }
:root[data-theme="dark"] .hh-misch__fluessig.hh-misch__fluessig--harzmilch { fill: color-mix(in srgb, var(--rk-wow-hl-solid) 30%, var(--rk-wow-dark-ink)); }
:root[data-theme="dark"] .hh-korn__lage circle { fill: color-mix(in srgb, var(--rk-wow-dark-ink) calc(30% + var(--k) * 15%), var(--rk-wow-dark-bg)); stroke: var(--rk-wow-dark-ink); }
:root[data-theme="dark"] .hh-korn__platte { fill: color-mix(in srgb, var(--rk-wow-dark-ink) 40%, var(--rk-wow-dark-bg)); stroke: var(--rk-wow-dark-ink); }
:root[data-theme="dark"] :is(.hh-korn__riss) { stroke: var(--rk-wow-dark-bg); }
:root[data-theme="dark"] .hh-korn__nein { fill: var(--rk-wow-dark-bg); stroke: var(--rk-wow-dark-gold); }
:root[data-theme="dark"] :is(.hh-korn__nein-x, .hh-korn__mass) { stroke: var(--rk-wow-dark-gold); }
:root[data-theme="dark"] .hh-wahl .hh-skizze__rand { stroke: var(--rk-wow-dark-ink); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .hh-wahl { background: var(--rk-wow-dark-raised); border-color: var(--rk-wow-dark-line); box-shadow: var(--ph-erhaben-stark); }
  :root:not([data-theme="light"]) .hh-wahl__knopf { background: var(--rk-wow-dark-bg); color: var(--rk-wow-dark-ink); border-color: var(--rk-wow-dark-line-strong); }
  :root:not([data-theme="light"]) .hh-wahl__knopf[aria-pressed="true"] { background: var(--rk-wow-dark-bg); color: var(--rk-wow-dark-gold); border: 2px solid var(--rk-wow-dark-gold); }
  :root:not([data-theme="light"]) .hh-wahl__bild { background: var(--rk-wow-dark-bg); }
  :root:not([data-theme="light"]) :is(.hh-misch__eimer, .hh-misch__henkel, .hh-misch__flasche) { stroke: var(--rk-wow-dark-ink); }
  :root:not([data-theme="light"]) .hh-misch__flasche { fill: var(--rk-wow-dark-raised); }
  :root:not([data-theme="light"]) .hh-misch__fluessig--wasser { fill: color-mix(in srgb, var(--rk-wow-dark-ink) 22%, var(--rk-wow-dark-bg)); }
  :root:not([data-theme="light"]) .hh-misch__welle.hh-misch__fluessig--wasser { stroke: var(--rk-wow-dark-ink); }
  :root:not([data-theme="light"]) .hh-misch__fluessig.hh-misch__fluessig--harzmilch { fill: color-mix(in srgb, var(--rk-wow-hl-solid) 30%, var(--rk-wow-dark-ink)); }
  :root:not([data-theme="light"]) .hh-korn__lage circle { fill: color-mix(in srgb, var(--rk-wow-dark-ink) calc(30% + var(--k) * 15%), var(--rk-wow-dark-bg)); stroke: var(--rk-wow-dark-ink); }
  :root:not([data-theme="light"]) .hh-korn__platte { fill: color-mix(in srgb, var(--rk-wow-dark-ink) 40%, var(--rk-wow-dark-bg)); stroke: var(--rk-wow-dark-ink); }
  :root:not([data-theme="light"]) .hh-korn__riss { stroke: var(--rk-wow-dark-bg); }
  :root:not([data-theme="light"]) .hh-korn__nein { fill: var(--rk-wow-dark-bg); stroke: var(--rk-wow-dark-gold); }
  :root:not([data-theme="light"]) :is(.hh-korn__nein-x, .hh-korn__mass) { stroke: var(--rk-wow-dark-gold); }
  :root:not([data-theme="light"]) .hh-wahl .hh-skizze__rand { stroke: var(--rk-wow-dark-ink); }
}
@media (prefers-reduced-motion: no-preference) {
  html.hh-js.rk-wow-motion .hh-wahl.is-gewechselt .hh-misch__strahl { animation: hh-strahl .9s var(--rk-wow-ease) both; }
  html.hh-js.rk-wow-motion .hh-wahl.is-gewechselt .hh-misch__pegel { animation: hh-pegel .9s var(--rk-wow-ease) both; }
  html.hh-js.rk-wow-motion .hh-wahl.is-gewechselt[data-wahl="lagen"] .hh-korn__lage { animation: hh-lage .45s var(--rk-wow-ease) calc(var(--k) * .22s) both; }
  html.hh-js.rk-wow-motion .hh-wahl.is-gewechselt[data-wahl="ein-gang"] .hh-korn__riss { animation: hh-zeichne .8s var(--rk-wow-ease) .35s both; }
}
@keyframes hh-strahl { 0% { stroke-dashoffset: 1; } 55% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: -1; } }
@keyframes hh-pegel { from { transform: translateY(40px); } to { transform: translateY(0); } }
@keyframes hh-lage { from { opacity: 0; transform: translateY(-14px); } to { opacity: 1; transform: none; } }

/* ==========================================================================
   6 Sofortbild-Paare — rk-wow-sofortbild (kein Regler; WCAG 2.2.2: läuft nur auf Knopfdruck, jede Bedienung hält an)
   Ohne Skript: alle drei Paare untereinander, Chips und Steuerung ausgeblendet.
   ========================================================================== */
.hh-vergleich__text { max-width: 76ch; margin: -6px auto 20px; color: var(--text-secondary); line-height: 1.6; text-align: center; }
.hh-sofort { display: grid; gap: 16px; width: min(100%, 720px); margin-inline: auto; }
.hh-sofort__chips { display: none; }
html.hh-js .hh-sofort__chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.hh-paar-chip { display: inline-flex; align-items: center; gap: 8px; min-height: 48px; padding: 8px 18px; box-sizing: border-box; border: 1px solid var(--rk-wow-line-strong); border-radius: var(--rk-wow-r-pill); background: var(--rk-wow-card); color: var(--text-primary); font-size: var(--rk-wow-fs-meta); cursor: pointer; }
.hh-paar-chip__nr { color: var(--rk-gold-text); font-size: var(--rk-wow-fs-tag); letter-spacing: .08em; }
.hh-paar-chip[aria-pressed="true"] { background: var(--text-primary); border-color: var(--text-primary); color: var(--rk-wow-card); }
.hh-paar-chip[aria-pressed="true"] .hh-paar-chip__nr { color: inherit; }
@media (hover: hover) { .hh-paar-chip:hover { border-color: var(--text-primary); } }
.hh-sofort__buehne { display: grid; gap: 40px; }
html.hh-js .hh-sofort__buehne { gap: 0; }
html.hh-js .hh-paar { grid-area: 1 / 1; opacity: 0; visibility: hidden; transition: opacity .5s var(--rk-wow-ease), visibility 0s linear .5s; }
html.hh-js .hh-paar.is-an { opacity: 1; visibility: visible; transition: opacity .5s var(--rk-wow-ease), visibility 0s; }
.hh-paar { display: grid; gap: 18px; }
.hh-paar__abzuege { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(12px, 3vw, 32px); padding: 8px 4px; }
/* Ein Abzug: heller Rand, unten breiter, das Etikett steht im Rand wie mit Stift beschriftet */
.hh-abzug { display: grid; gap: 0; padding: clamp(6px, 1.2vw, 12px) clamp(6px, 1.2vw, 12px) 0; background: var(--rk-wow-card); border: 1px solid var(--rk-wow-line); border-radius: 4px; box-shadow: var(--rk-wow-sh-3); rotate: -1.6deg; }
.hh-abzug--nachher { rotate: 1.4deg; translate: 0 10px; }
.hh-abzug__knopf { border-radius: 2px; background: color-mix(in srgb, var(--text-primary) 28%, var(--rk-wow-card)); }
.hh-abzug figcaption { display: grid; place-items: center; min-height: clamp(34px, 5vw, 52px); }
.hh-abzug__etikett { color: var(--text-primary); font-size: var(--rk-wow-fs-meta); letter-spacing: .14em; text-transform: uppercase; }
.hh-abzug--nachher .hh-abzug__etikett { color: var(--rk-gold-text); }
.hh-paar__text { max-width: 62ch; margin: 0 auto; color: var(--text-secondary); line-height: 1.6; text-align: center; }
.hh-sofort__lauf { display: none; height: 3px; border-radius: 2px; background: var(--rk-wow-line); overflow: hidden; }
.hh-sofort__lauf i { display: block; width: 100%; height: 100%; background: var(--rk-gold-text); transform: scaleX(0); transform-origin: 0 50%; }
.hh-sofort.is-ruhe .hh-sofort__lauf { display: block; }
.hh-sofort__steuer, .hh-sofort__hinweis { display: none !important; }
html.hh-js .hh-sofort__steuer { display: flex !important; flex-wrap: wrap; align-items: center; justify-content: center; gap: 12px 16px; }
.hh-sofort__ruhe { display: inline-flex; gap: 10px; align-items: center; }
.hh-sofort__ruhe .hh-i-pause, .hh-sofort.is-ruhe .hh-sofort__ruhe .hh-i-play { display: none; }
.hh-sofort.is-ruhe .hh-sofort__ruhe .hh-i-pause { display: block; }
html.hh-js .hh-sofort__hinweis { display: block !important; flex: 1 1 100%; margin: 0; color: var(--text-muted); font-size: var(--rk-wow-fs-tag); text-align: center; }
@media (min-width: 960px) { html.hh-js .hh-sofort__hinweis { flex: 0 1 auto; max-width: 22ch; text-align: left; line-height: 1.35; } }
@media (max-width: 599px) { .hh-abzug { rotate: -1deg; } .hh-abzug--nachher { rotate: 1deg; translate: 0 6px; } }
:root[data-theme="dark"] .hh-abzug { background: color-mix(in srgb, var(--rk-wow-dark-ink) 92%, var(--rk-wow-dark-bg)); border-color: var(--rk-wow-dark-line-strong); box-shadow: var(--ph-erhaben-stark); }
:root[data-theme="dark"] .hh-abzug__etikett { color: var(--rk-wow-dark-bg); }
:root[data-theme="dark"] .hh-abzug--nachher .hh-abzug__etikett { color: var(--rk-wow-dark-bg); text-decoration: underline 2px var(--rk-wow-dark-gold); text-underline-offset: 5px; }
:root[data-theme="dark"] .hh-paar-chip { background: var(--rk-wow-dark-bg); color: var(--rk-wow-dark-ink); border-color: var(--rk-wow-dark-line-strong); }
:root[data-theme="dark"] .hh-paar-chip[aria-pressed="true"] { background: var(--rk-wow-dark-bg); color: var(--rk-wow-dark-gold); border: 2px solid var(--rk-wow-dark-gold); }
:root[data-theme="dark"] .hh-paar-chip__nr { color: var(--rk-wow-dark-gold); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .hh-abzug { background: color-mix(in srgb, var(--rk-wow-dark-ink) 92%, var(--rk-wow-dark-bg)); border-color: var(--rk-wow-dark-line-strong); box-shadow: var(--ph-erhaben-stark); }
  :root:not([data-theme="light"]) .hh-abzug__etikett { color: var(--rk-wow-dark-bg); }
  :root:not([data-theme="light"]) .hh-abzug--nachher .hh-abzug__etikett { color: var(--rk-wow-dark-bg); text-decoration: underline 2px var(--rk-wow-dark-gold); text-underline-offset: 5px; }
  :root:not([data-theme="light"]) .hh-paar-chip { background: var(--rk-wow-dark-bg); color: var(--rk-wow-dark-ink); border-color: var(--rk-wow-dark-line-strong); }
  :root:not([data-theme="light"]) .hh-paar-chip[aria-pressed="true"] { background: var(--rk-wow-dark-bg); color: var(--rk-wow-dark-gold); border: 2px solid var(--rk-wow-dark-gold); }
  :root:not([data-theme="light"]) .hh-paar-chip__nr { color: var(--rk-wow-dark-gold); }
}
@media (prefers-reduced-motion: no-preference) {
  /* „Entwickeln“: nur Deckkraft des Nachher-Fotos über einem Grau aus Token, kein filter */
  html.hh-js.rk-wow-motion .hh-paar.is-entwickeln .hh-abzug--nachher img { animation: hh-entwickeln 1.8s ease-out .25s both; }
  html.hh-js.rk-wow-motion .hh-paar.is-entwickeln .hh-abzug--nachher { animation: hh-auswurf .6s var(--rk-wow-ease) both; }
}
@keyframes hh-entwickeln { from { opacity: .08; } 40% { opacity: .45; } to { opacity: 1; } }
@keyframes hh-auswurf { from { translate: 0 -14px; } to { translate: 0 10px; } }

/* ==========================================================================
   7 Farbprobe — rk-wow-farbprobe
   Ohne Skript: Ringe stehen im Foto, der Satz darunter erklärt sie; Knopf und Lupen ausgeblendet.
   ========================================================================== */
.hh-probe { display: grid; gap: 24px; }
.hh-probe__bild { display: grid; gap: 10px; width: min(100%, 420px); justify-self: center; }
.hh-ring { position: absolute; left: var(--x); top: var(--y); width: 54px; height: 54px; margin: -27px 0 0 -27px; }
.hh-ring svg { display: block; width: 100%; height: 100%; overflow: visible; }
.hh-ring circle { fill: none; stroke: var(--rk-wow-dark-ink); stroke-width: 3; stroke-dasharray: 1; stroke-dashoffset: 0; }
.hh-ring::before { content: ""; position: absolute; inset: -3px; border-radius: 50%; border: 2px solid var(--rk-wow-dark-bg); opacity: .6; }
.hh-ring b { position: absolute; left: 50%; bottom: calc(100% + 4px); translate: -50% 0; padding: 3px 10px; 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); font-weight: var(--rk-fw-medium, 500); white-space: nowrap; box-shadow: var(--rk-wow-sh-2); }
.hh-probe.is-probe .hh-ring circle { stroke: var(--rk-wow-dark-gold); }
.hh-probe__seite { display: grid; gap: 16px; align-content: start; min-width: 0; }
.hh-probe__text { margin: 0; max-width: 56ch; color: var(--text-secondary); line-height: 1.6; }
.hh-probe__ohne-js { margin: 0; color: var(--text-muted); font-size: var(--rk-wow-fs-meta); }
html.hh-js .hh-probe__ohne-js { display: none; }
.hh-probe__knopf-start { display: none !important; }
html.hh-js .hh-probe__knopf-start { display: inline-flex !important; justify-self: start; }
.hh-proben { display: none; }
html.hh-js .hh-probe.is-probe .hh-proben { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; padding: 18px; border: 1px solid var(--rk-wow-line); border-radius: var(--rk-wow-r-card); background: var(--rk-wow-card); box-shadow: var(--ph-erhaben); }
.hh-muster { display: grid; justify-items: center; gap: 10px; text-align: center; }
.hh-muster__kreis { display: block; width: min(100%, 150px); aspect-ratio: 1; border-radius: 50%; background-color: var(--rk-wow-tint); background-repeat: no-repeat; border: 3px solid var(--rk-gold-text); box-shadow: var(--rk-wow-sh-3); }
.hh-muster figcaption { display: grid; gap: 2px; }
.hh-muster figcaption b { color: var(--text-primary); font-weight: var(--rk-fw-medium, 500); }
.hh-probe__hinweis { margin: 0; color: var(--text-muted); font-size: var(--rk-wow-fs-meta); line-height: 1.5; }
html.hh-js .hh-probe:not(.is-probe) .hh-probe__hinweis { display: none; }
@media (min-width: 960px) { .hh-probe { grid-template-columns: minmax(0, 380px) minmax(0, 1fr); gap: clamp(32px, 5vw, 64px); align-items: start; } .hh-probe__bild { width: 100%; } }
/* Aufruf 3 (Faltkarte) steht in der Seitenspalte der Farbprobe */
.hh-probe__seite .rk-cta { margin-top: 6px; }
.hh-probe__seite .rk-cta__falt { width: 100%; }
:root[data-theme="dark"] .hh-proben { background: var(--rk-wow-dark-raised) !important; border-color: var(--rk-wow-dark-line) !important; box-shadow: var(--ph-erhaben-stark) !important; }
:root[data-theme="dark"] .hh-muster__kreis { border-color: var(--rk-wow-dark-gold); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .hh-proben { background: var(--rk-wow-dark-raised) !important; border-color: var(--rk-wow-dark-line) !important; box-shadow: var(--ph-erhaben-stark) !important; }
  :root:not([data-theme="light"]) .hh-muster__kreis { border-color: var(--rk-wow-dark-gold); }
}
@media (prefers-reduced-motion: no-preference) {
  html.hh-js.rk-wow-motion .hh-probe.is-probe .hh-ring circle { animation: hh-zeichne .7s var(--rk-wow-ease) both; }
  html.hh-js.rk-wow-motion .hh-probe.is-probe .hh-ring--treppe circle { animation-delay: .25s; }
  html.hh-js.rk-wow-motion .hh-probe.is-probe .hh-muster { animation: hh-muster .55s cubic-bezier(.3, 1.3, .55, 1) .5s both; }
  html.hh-js.rk-wow-motion .hh-probe.is-probe .hh-muster + .hh-muster { animation-delay: .7s; }
}
@keyframes hh-muster { from { opacity: 0; transform: scale(.4); } to { opacity: 1; transform: none; } }

/* ==========================================================================
   8 Fragen — einspaltig mittig
   ========================================================================== */
.hh-fragen .rk-faq { max-width: none; }
/* Desktop: Fragen in zwei Spalten unter dem Kopf (neu gegenüber Marl: Kopf mitlaufend, Chemnitz: einspaltig) */
@media (min-width: 960px) { .hh-fragen .rk-faq { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 28px; align-items: start; } }

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

/* ─── Bewegung reduziert: alles steht, Linien fertig gezeichnet ─── */
@media (prefers-reduced-motion: reduce) {
  .hh *, .hh *::after, .hh *::before { transition: none !important; animation: none !important; }
  .hh-guss__decke { display: none !important; }
}
html:is(.no-motion, [data-motion="reduced"]) .hh :is(*, *::before, *::after) { transition: none !important; animation: none !important; }
html:is(.no-motion, [data-motion="reduced"]) .hh-guss__decke { display: none !important; }

/* ─── Druck ─── */
@media print {
  .hh-gross, .hh-video__play, .hh-bahn, .hh-bahn__steuer, .hh-sofort__chips, .hh-sofort__steuer, .hh-sofort__hinweis, .hh-sofort__lauf, .hh-guss__decke, .hh-wahl__knoepfe, .hh-probe__knopf-start { display: none !important; }
  .hh-feld[hidden] { display: grid !important; }
  .hh-paar { opacity: 1 !important; visibility: visible !important; grid-area: auto !important; }
  .hh-sofort__buehne { gap: 24px !important; }
  .hh-wahl__text { display: block !important; }
  .hh-wahl__name { position: static !important; width: auto !important; height: auto !important; clip: auto !important; }
  .hh-skizze__an[pathLength] { stroke-dashoffset: 0 !important; }
  .hh-feld, .hh-schild, .hh-paar, .hh-wahl { break-inside: avoid; }
}