/* ===========================================================
   .Havior Studios — base layer
   Tokens aus Figma: BG #EDEDED, Rot #FA2D39, Kacheln #D9D9D9.
   Display-Font: Platzhalter-Stack, wird gegen Figma-Font getauscht.
   =========================================================== */

:root {
  /* HVR-20260912-11 (Rene 2026-09-12): Mauszeiger site-weit in Signal Rot mit
     schwarzem Rand (Pfeil und Hand als SVG-Cursor, Hotspot an der Spitze);
     Fallback auto/pointer. Der NP-Cursor im About-Bild (cursor:none) bleibt. */
  --cursor-arrow: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2224%22 height=%2224%22 viewBox=%220 0 24 24%22%3E%3Cpolygon points=%222,1 2,17.5 6.6,13.4 9.8,20.3 13,18.8 9.8,12 16.2,12%22 fill=%22%23f31a27%22 stroke=%22%2317140f%22 stroke-width=%221.5%22 stroke-linejoin=%22miter%22/%3E%3C/svg%3E") 2 1, auto;
  --cursor-hand: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2224%22 height=%2224%22 viewBox=%220 0 24 24%22%3E%3Cpath d=%22M9 1.5c-.8 0-1.4.6-1.4 1.4v8.4L5.9 9.7c-.7-.6-1.7-.6-2.3.1-.5.6-.4 1.5.2 2.1l4.4 4.9c.9 1 2.2 1.6 3.5 1.6h3.6c2.4 0 4.3-1.9 4.3-4.3v-3.3c0-.8-.6-1.4-1.4-1.4-.7 0-1.3.5-1.4 1.2V9.8c0-.8-.6-1.4-1.4-1.4-.7 0-1.3.5-1.4 1.2V8.3c0-.8-.6-1.4-1.4-1.4-.7 0-1.3.5-1.4 1.2V2.9C10.4 2.1 9.8 1.5 9 1.5z%22 fill=%22%23f31a27%22 stroke=%22%2317140f%22 stroke-width=%221.3%22 stroke-linejoin=%22miter%22/%3E%3C/svg%3E") 8 2, pointer;

  --bg: #ededed;            /* Hero-Hintergrund (Figma) */
  --fg: #17140f;
  --muted: #7d7a73;
  --brand-red: #fa2d39;     /* Logo / Statement-Kachel (Figma) */
  --signal-red: #f31a27;    /* Signal Red (Rene 2026-07-28) — Akzentrot aus Figma (= Linienfarbe) */
  --line: #f31a27;          /* Konstruktionslinien (Figma) */
  --line-w: 0.7px;         /* HVR-20260915-04 (Rene): Hintergrund-Linienstaerke nochmals um 30 % reduziert (1 px -> 0.7 px); HVR-20260915-02: 1.3 px -> 1 px; Zentrierung ueber calc(var(--line-w) / -2) */
  --tile-gray: #d9d9d9;     /* Bento-Kacheln (Figma 04) */
  --tile-label: #ffffff;
  --tile-gap: clamp(8px, 0.9vw, 16px);  /* EIN Gap überall — Kachel↔Kachel und Kachel↔Rand */
  --font-display: "Helvetica Neue", "Arial Black", system-ui, sans-serif; /* TODO: Figma-Font */
  --font-body: system-ui, -apple-system, "Segoe UI", sans-serif;
}
html { cursor: var(--cursor-arrow); }
/* HVR-20260913-01 (Rene): auf Zeiger-Geraeten ist der Cursor ein Kreis (DOM-Element .cur, folgt
   dem Zeiger per JS), der ueber klickbaren Traegern waechst; der native Cursor ist aus.
   Touch-Geraete behalten den nativen Cursor (keine Zeigerposition). NP-Badge im About-Bild
   und die Board-Cursor bleiben eigene Molekuele. */
@media (pointer: fine) {
  :root { --cursor-arrow: none; --cursor-hand: none; }
  html, html * { cursor: none !important; }
}
.cur {
  position: fixed; left: 0; top: 0; z-index: 31; /* Z-Skala 02: eine Stufe ueber der Lightbox (30), der Cursor ist die oberste Ebene */
  width: 12px; height: 12px; margin: -6px 0 0 -6px;
  pointer-events: none; opacity: 0;
  transition: opacity 0.2s ease;
}
.cur.is-visible { opacity: 1; }
.cur > i {
  display: block; width: 100%; height: 100%; border-radius: 50%;
  background: var(--signal-red);
  box-shadow: 0 0 0 1.5px rgba(237, 237, 237, 0.55); /* trennt den Kreis von roten Flaechen */
  transform: scale(1);
  transition: transform 0.2s cubic-bezier(0.65, 0, 0.35, 1);
}
.cur.is-active > i { transform: scale(2.2); }
@media (pointer: coarse) { .cur { display: none; } }
@media (prefers-reduced-motion: reduce) { .cur, .cur > i { transition: none; } }
/* UA-Defaults (Links pointer, Buttons default) wuerden den Site-Cursor unterlaufen */
a, button, summary, label, select, [role="button"], input[type="checkbox"], input[type="radio"], input[type="submit"] { cursor: var(--cursor-hand); }

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-font-smoothing: antialiased; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-body);
  line-height: 1.5;
}

/* ===========================================================
   HERO (gepinnt — die gesamte Seite)
   =========================================================== */
.hero {
  position: relative;
  height: 100vh;
  overflow: hidden;
  background: var(--bg);
}

/* --- Hover-Content-Layer (Zellen des Linienrasters) ---
   Enter: schnelles Aufblitzen (0.16s) + Mikro-Zoom-Settle des Bildes.
   Leave: weicheres Verblassen (0.35s). Assets sind bereits im
   Marken-Duotone vorbereitet — keine Filter nötig. */
.hero__cells {
  position: absolute;
  inset: 0;
  z-index: 1;
}
/* HVR-20260916-M6-Fix (Rene: "Intro 01 hat weisse Luecken bei den Bildern
   rechts"): #hero/body liegen auf --bg (#ededed, "weiss") direkt HINTER
   dieser transparenten Ebene. Jede Subpixel-Ranseite (DPR-Rundung an den
   container-type:size-Zellen, s.u.) zeigt dadurch --bg statt Markenfarbe.
   Markenrot als Grund macht jede Haarlinien-Luecke unsichtbar statt weiss.
   Merge 2026-09-19: nur mobil — auf Desktop ist .hero__cells die transparente
   Hover-Ebene ueber dem ganzen Hero, ein Grund faerbt dort den Hero komplett rot
   (Desktop-Freeze 2026-09-15 kennt diese Regel nicht). */
@media (max-width: 900px) {
  .hero__cells { background-color: var(--brand-red); }
}
.hero__cell {
  position: absolute;
  overflow: hidden;
  /* Zellen sind Größen-Container: Prozentzahlen skalieren per
     cqh/cqw proportional zur EIGENEN Zelle (Renes Skizzen-Regel) */
  container-type: size;
}
.hero__cell-img {
  position: absolute;
  inset: 0;
  background-position: center;
  background-size: cover;
  /* Assets haben roten Grund — Restflächen bei extremen Formaten
     bleiben damit nahtlos markenrot */
  background-color: var(--brand-red);
  background-repeat: no-repeat;
  opacity: 0;
  transform: scale(1.06);
  transition: opacity 0.35s ease, transform 0.5s cubic-bezier(0.22, 0.61, 0.36, 1);
  will-change: opacity, transform;
}
.hero__cell-red {
  position: absolute;
  inset: 0;
  background: var(--brand-red);
  opacity: 0;
  transition: opacity 0.35s ease;
}
.hero__cell.is-on .hero__cell-img {
  opacity: 1;
  transform: scale(1);
  transition: opacity 0.16s ease-out, transform 0.45s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.hero__cell.is-on .hero__cell-red {
  opacity: 1;
  transition: opacity 0.14s ease-out;
}

/* --- Intro-Stage: Text-Zellen (Raster 25/75) ---
   Layer ist nur während der Statement-Stage aktiv (JS/Timeline). */
.hero__cells--intro {
  opacity: 0;
  visibility: hidden;
}
/* Textblöcke: EINHEITLICHES System für alle Hover-Zellen —
   oben verankert mit identischem Padding wie die Statement-Kachel
   (2vw) → Headlines/Sublines fluchten exakt mit deren Text.
   Headline- und Subline-Größe sind in ALLEN Zellen gleich;
   nur die Prozentzahlen sind groß (füllen die Zelle, ziehen Fokus). */
.hero__cell-text {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  text-align: left;
  background: var(--brand-red);
  color: #fff;
  padding: 2vw;
  opacity: 0;
  transition: opacity 0.35s ease;
  overflow: hidden;
}
.hero__cell.is-on .hero__cell-text {
  opacity: 1;
  transition: opacity 0.16s ease-out;
}
/* Headlines: UNTERKANTE reihenweit aligned — bottom-verankert an
   der Linie knapp über der Subline (48% + 1.4vw Abstand); sie
   wachsen nach oben, die Unterkante bleibt fix (Rene 2026-07-04) */
.hero__cell-text h3 {
  font-family: var(--font-display);
  font-weight: 700;
  text-transform: uppercase;
  font-size: clamp(1rem, 1.5vw, 1.9rem);
  line-height: 1.14;
  letter-spacing: 0.015em;
  margin: 0;
  position: absolute;
  left: 2vw;
  right: 2vw;
  bottom: calc(48% + 1.4vw);
}
.hero__cell-num {
  display: block;
  font-family: var(--font-display);
  font-weight: 700;
  /* Skizzen-Regel v2 (2026-07-04): Zahl skaliert zur EIGENEN Zelle —
     Höhe 23cqh (füllt bis knapp über die 2-zeilige Headline),
     Breite 35.5cqw („80%" = 2.117em passt in den Zellinhalt).
     Dadurch gleichmäßiges Zahl↔Headline-Verhältnis in jeder Zelle. */
  font-size: clamp(2.6rem, min(23cqh, 35.5cqw), 12rem);
  line-height: 0.95;
}
.hero__cell-text p {
  font-size: clamp(0.8rem, 0.88vw, 1.05rem);
  line-height: 1.5;
  margin: 0;
  color: rgba(255, 255, 255, 0.95);
  max-width: 36ch;
  position: absolute;
  top: 52%;
  left: 2vw;
  right: 2vw;
}
/* Kompaktmodus (JS-vermessen bei Load/Resize, s. introCellFit):
   Zelle zu klein für Headline + Subline → Subline weicht, nur die
   Headline bleibt; bei größerem Viewport kehrt sie automatisch zurück */
.hero__cell--compact .hero__cell-text p { display: none; }
.hero__tile--compact .hero__body { display: none; }
/* Klick-Stationen (Hero-Ruhe → Intro, Intro → Home): Fläche ist
   klickbar, Klick fährt selbstfahrend zur nächsten Snap-Station */
.hero--clickable { cursor: var(--cursor-hand); }

/* --- HVR-20260911-02: Intro-Startzustand vor dem JS-Init (RC-B) ---
   Spiegelt exakt die GSAP-Startwerte von heroIntro() (Linien scaleY/scaleX 0,
   Glyphen opacity 0) und den Bento-Einflug (Kacheln ausserhalb). Gilt nur,
   solange <html> die Klasse js-pending traegt (Head-Script); main.js entfernt
   sie nach dem Setzen der Startwerte, GSAP-Inline-Werte uebernehmen nahtlos. */
html.js-pending #hero .hero__line--v { transform: translateX(-0.5px) scaleY(0); transform-origin: 50% 0%; }
html.js-pending #hero .hero__line--h { transform: translateY(-0.5px) scaleX(0); transform-origin: 0% 50%; }
html.js-pending #hero .hv-logo__glyph { opacity: 0; }
html.js-pending #hero .bento-tile { visibility: hidden; }

/* --- Konstruktionslinien (über den Zellen) --- */
.hero__grid {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 2;
}
.hero__line {
  position: absolute;
  background: var(--line);
  opacity: 1; /* HVR-20260914-31 (Rene): Linien in voller Farbstaerke */
}
.hero__line--v {
  top: 0;
  width: var(--line-w);
  height: 100%;
  transform: translateX(-0.5px);
}
.hero__line--h {
  left: 0;
  width: 100%;
  height: var(--line-w);
  transform: translateY(-0.5px);
}

/* --- Wortmarke (fix zentriert, kein Maus-Effekt) ---
   Liegt ÜBER der Kachel (z4): beim Einblenden der Rot-Fläche färbt
   sich das Logo synchron um (Ebenen-Effekt, JS koppelt die Tweens). */
.hero__logo-wrap {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 4;
  pointer-events: none; /* Hover trifft die Mittelzelle darunter */
}
.hv-logo {
  display: block;
  width: clamp(190px, 15vw, 300px);
  height: auto;
  color: var(--brand-red);
}

/* --- Statement-Kachel (rot) ---
   Stage 2: volle Größe, blendet per Opacity ein.
   Stage 3: schrumpft (JS) in den Grid-Slot. */
.hero__tile {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  /* %-basiert (nicht vw): fluchtet exakt mit den %-Linien,
     unabhängig von der Scrollbar-Breite */
  width: 25%;
  height: 50%;
  background: var(--brand-red);
  overflow: hidden;
  opacity: 0;
  z-index: 3;
  /* unsichtbar ≠ untastbar: darf den Hover der Mittelzelle nicht
     schlucken (für spätere Klick-Navigation gezielt reaktivieren) */
  pointer-events: none;
}
.hero__tile-inner {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 25vw;
  height: 50vh;
  padding: 2vw;
}
/* Copy-Container = volle Kachelfläche: GSAP animiert ihn (Transform),
   deshalb muss er selbst der Bezugsrahmen der 52%-Subline sein */
.hero__tile-copy {
  position: absolute;
  inset: 0;
  padding: 2vw;
}
/* Statement-Typo = exakt die Größen der Hover-Zellen (Rene:
   alle Headlines/Sublines einheitlich); Headline bottom-verankert,
   Subline auf der reihenweiten 52%-Linie — beide Kanten fluchten
   mit den Nachbarzellen der Reihe */
.hero__headline {
  font-family: var(--font-display);
  color: #fff;
  text-transform: uppercase;
  font-weight: 700;
  font-size: clamp(1rem, 1.5vw, 1.9rem);
  line-height: 1.14;
  letter-spacing: 0.015em;
  margin: 0;
  position: absolute;
  left: 2vw;
  right: 2vw;
  bottom: calc(48% + 1.4vw);
}
.hero__body {
  color: rgba(255, 255, 255, 0.95);
  font-size: clamp(0.8rem, 0.88vw, 1.05rem);
  line-height: 1.5;
  max-width: 36ch;
  margin: 0;
  position: absolute;
  top: 52%;
  left: 2vw;
  right: 2vw;
}
.hv-mark {
  display: block;
  color: #fff;
  height: auto;
}
/* zentriertes .H: festes Verhältnis zur Kachel (56 % Breite) —
   skaliert 1:1 mit der Kachel, ohne Größen-Deckel */
.hv-mark--center {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 56%;
  opacity: 0;
}
/* wanderndes .H (Wortmarke → Kachel-Ecke); Position/Größe setzt JS */
.hero__dotH {
  position: absolute;
  z-index: 4;
  color: var(--brand-red);
  opacity: 0;
  pointer-events: none;
}

/* --- Bento-Grid ---
   Gross-Kanten stoßen aneinander; jede Kachel trägt eine
   transparente Halb-Gap-Border → jeder Abstand = exakt --tile-gap.
   Der Container ist um Halb-Gap eingerückt → Außenrand = gleicher Gap. */
.hero__bento {
  position: absolute;
  inset: calc(var(--tile-gap) / 2);
  z-index: 2;
  /* Container darf die Hover-Zellen darunter nicht blockieren —
     nur die Kacheln selbst sind interaktiv */
  pointer-events: none;
}
/* HVR-20260916-M6-Fix-Korrektur (Rene-Report: Frame 77 "Intro 01" [volles
   Bildraster, .hero__cells] und Frame 78 "Intro 02" [graue Flaeche +
   Konstruktionslinien + zentrierte Statement-Karte] erschienen nie — die
   HVR-20260916-M6-Absicherung setzte auf .hero__bento UNBEDINGT Markenrot,
   .hero__bento liegt aber bei z-index:2 permanent UEBER .hero__cells
   (z-index:1) und .hero__grid (z-index:2, aber frueher im DOM -> verliert),
   deckte also beide vorherigen Stufen bei JEDEM Scroll-Stand zu, nicht nur
   in der Home-Stufe. HVR-20260916-M9-Korrektur: die urspruengliche
   .hero--home-Regel galt GLOBAL (auch Desktop) und faerbte dort die
   Kachel-Naht (dort weiterhin per echtem Border-Gap, nie border:0) von
   ihrem unveraenderten Ausgangszustand (transparent, zeigt #hero-Grund)
   auf Rot, spaeter auf Weiss um — eine auf Mobile zugeschnittene Korrektur
   haette Desktop nie anfassen sollen. Die Home-Hintergrundfarbe (jetzt
   Weiss statt Rot, s. Mobile-Regel unten fuer die "Linien fehlen"-Korrektur)
   gilt daher nur noch INNERHALB des Mobile-Blocks (@media max-width:900px),
   Desktop bleibt auf dem urspruenglichen, nie explizit gesetzten Zustand. */
.bento-tile {
  position: absolute;
  border: calc(var(--tile-gap) / 2) solid transparent;
  background: var(--tile-gray);
  background-clip: padding-box;
  cursor: var(--cursor-hand);
  will-change: transform;
  pointer-events: auto;
  transition: background-color 0.35s ease;
  overflow: hidden; /* HVR-20260913-06: Bildlage und grosse Ziffer schneiden an der Kachel */
  container-type: size; /* Ziffer skaliert in cqw zur Kachelbreite */
}
/* HVR-20260913-06 (Rene): Hover zeigt das Produktbild im Intro-Look. Gleiche Assets
   und exakt die Uebergaenge der Intro-Zellen (.hero__cell-img: 0.16 s ease-out ein,
   scale 1.06 -> 1 in 0.45 s, Grund Brand Red); die Ziffer waechst auf die Kachelbreite
   und liegt per multiply ueber dem Bild, der Titel eine Rolle groesser. */
.bento-tile__img { /* <i>, kein span: open() greift das erste span der Kachel als Label */
  position: absolute; inset: 0; z-index: 0;
  background-position: center; background-size: cover; background-repeat: no-repeat;
  background-color: var(--brand-red);
  opacity: 0; transform: scale(1.06);
  transition: opacity 0.35s ease, transform 0.5s cubic-bezier(0.22, 0.61, 0.36, 1);
  will-change: opacity, transform; pointer-events: none;
}
.bento-tile.is-on .bento-tile__img {
  opacity: 1; transform: scale(1);
  transition: opacity 0.16s ease-out, transform 0.45s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.bento-tile__big {
  /* HVR-20260913-24 (Rene, AD-Checkpoint 1, D69): die Ziffer waechst AM ORT der kleinen Nummer
     (left/top = Lage der Nummer, Origin oben links) auf die Kachelbreite zwischen den Label-
     Einzuegen, gedeckelt nur durch die Kachelhoehe (--big-fit aus bentoNumFit); der weisse Titel
     liegt darueber (z-index 2). Weiss mit multiply waere unsichtbar, deshalb overlay (D65). */
  position: absolute; z-index: 1; left: var(--num-left, 2vw); top: var(--num-top, 2vw);
  margin: 0; font-family: var(--font-display); font-weight: 700;
  font-size: var(--big-fit, min(88cqw, 45cqh)); line-height: 0.8; letter-spacing: -0.04em;
  font-variant-numeric: tabular-nums;
  /* Rueckweg (AD R1, Option A): Schnitt auf Tinte ohne Blendung, deckend schrumpfen (0.35 s wie
     Bild und Kachelgrau), Uebergabe an die kleine Nummer erst am Ende dunkel auf dunkel. */
  color: var(--fg); mix-blend-mode: normal; opacity: 0;
  transform-origin: var(--num-ox, 0) var(--num-oy, 0); /* Ink-Ecke der Ziffer (AD R3) */
  transform: scale(var(--num-s, 0.1));
  transition: opacity 0s linear 0.35s, transform 0.35s cubic-bezier(0.22, 0.61, 0.36, 1), color 0s, mix-blend-mode 0s;
  pointer-events: none;
}
.bento-tile.is-on .bento-tile__big {
  /* Hinweg (AD B1/R1): die Nummer bleibt 0.06 s stehen, bis das Kachelrot traegt, dann
     Schnitt auf die weisse Overlay-Ziffer in Startgroesse und Wachstum in 0.5 s. */
  color: #fff; mix-blend-mode: overlay; opacity: 1; transform: scale(1);
  transition: opacity 0s linear 0.06s, transform 0.5s cubic-bezier(0.22, 0.61, 0.36, 1) 0.08s, color 0s, mix-blend-mode 0s; /* ein Frame in Startgroesse vor dem Wachstum */
}
/* Home-Hover: Kachel wird rot (JS-gesteuert, nur im Home-Zustand) */
.bento-tile.is-on {
  background-color: var(--brand-red);
  transition: background-color 0.16s ease-out;
}
/* HVR-20260912-13: Titel in der Hover-Zellen-Headline-Rolle (eine Headline-Rolle
   im Hero), Padding 2vw wie .hero__cell-text (Texte fluchten), Beschriftung in
   Primärtinte auf dem Kachelgrau (Kontrast 13:1 statt 1.4:1 mit Weiß); im
   Hover-Rot (.is-on) bleibt die freigegebene weiße Beschriftung. */
.bento-tile > span {
  position: relative; z-index: 2; /* Beschriftung ueber Bild und Ziffer */
  display: block;
  padding: 2vw;
  font-family: var(--font-display);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.015em;
  font-size: clamp(1rem, 1.5vw, 1.9rem);
  line-height: 1.14;
  color: var(--fg);
  transition: color 0.35s ease;
}
.bento-tile.is-on > span {
  color: var(--tile-label);
  font-size: clamp(1.3rem, 2vw, 2.3rem); /* HVR-20260913-06: Titel im Hover eine Rolle groesser (Term-Statement) */
  transition: color 0.16s ease-out, font-size 0.3s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.bento-tile.is-on .bento-tile__no { opacity: 0; transition: opacity 0s linear 0.06s; } /* harte Uebergabe an die grosse Ziffer, wenn das Kachelrot steht (AD B1/R1) */
/* Nummer 01–08 der Entscheidungsreise über dem Titel, tabellarische Ziffern.
   HVR-20260913-24 (Rene): 1.5 x der Eyebrow-Rolle, voll deckend, mit Laufweite und
   Zeilenhoehe der grossen Ziffer gesetzt (D68), damit der Hover-Weg ohne Formsprung
   von dieser Nummer in die Kachelbreite laeuft. */
.bento-tile__no {
  display: block;
  font-size: clamp(1.2rem, 1.425vw, 1.65rem);
  letter-spacing: -0.04em;
  line-height: 0.8;
  opacity: 1;
  margin-bottom: 0.1em; /* HVR-20260914-32 (Rene): Tintenabstand Nummer zu Titel halbiert (14.4 px -> 7.2 px bei 1440; vorher 0.45em) */
  font-variant-numeric: tabular-nums;
  transition: opacity 0s linear 0.35s; /* kehrt zurueck, wenn die grosse Ziffer ihren Rueckweg beendet hat (AD B1) */
}
.bento-tile__title { display: block; }

/* --- PAGE-Overlay (Home → Page) ---
   Expandiert aus der geklickten Kachel (Rect setzt JS); trägt nur
   Konstruktionslinien (weiß) + skalierende Headline. */
.hero__page {
  position: absolute;
  background: var(--brand-red);
  z-index: 6;
  overflow: hidden;
  visibility: hidden;
  will-change: left, top, width, height;
}
/* HVR-20260917-M23 (Rene: "oben rechts ein Kreuz hin in Rot", + kritischer
   Bug "kann danach nichts mehr anklicken" nach Page-Besuch). Desktop
   behaelt .hero__tile als einzige Schliessflaeche (display:none hier) -
   die mobile Sichtbarkeit setzt die Media Query weiter unten. Eigenes,
   simples <button> statt .hero__tile: garantiert zuverlaessiges Klick-
   Verhalten (natives <button>, kein Div-mit-ARIA-role-Konstrukt), 44x44px
   Bruttoflaeche (Touch-Ziel-Minimum), Rot per Vorgabe, X per SVG-Stroke
   (kein Icon-Font noetig). z-index ueber .hero__page-lines/-side/-headline
   (Z.6xx), unter keinem sinnvollen anderen Element der Seite. */
.hero__page-close {
  display: none;
  position: absolute;
  top: 6px; right: 6px;
  width: 44px; height: 44px;
  align-items: center; justify-content: center;
  background: none; border: 0; padding: 0; margin: 0;
  cursor: var(--cursor-hand);
  z-index: 20;
  -webkit-tap-highlight-color: transparent;
}
.hero__page-close svg {
  width: 20px; height: 20px;
}
.hero__page-close path {
  fill: none;
  stroke: var(--brand-red); /* Rene: "ein Kreuz ... in Rot" */
  stroke-width: 2.4;
  stroke-linecap: round;
}
.hero__page-lines {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 5; /* HVR-20260914-31 (Rene): Template-Linien laufen ueber dem Content, auf allen Seiten (vorher nur mit Section-Chrome) */
}
.hero__pline {
  position: absolute;
  background: #fff;
  opacity: 0;
}
.hero__pline--v {
  top: 0;
  width: var(--line-w);
  height: 100%;
  transform: translateX(calc(var(--line-w) / -2)) scaleY(0);
  transform-origin: 50% 0%;
}
/* Scroll-Fortschritt (Rene 2026-08-11b): DIREKT an der linken
   Frame-Kante (x=0, links vom .H-Logo) — 1.5px, waechst per scaleY
   mit dem Seitenfortschritt. Farbe = IMMER die aktuelle Linienfarbe
   der Seite (JS synct im Scroll-Listener gegen pvLines[0], folgt
   damit auch dem Dunkel->Hell-Farbwechsel). Bewusste Ausnahme von
   der linienfreien Randspalte auf Renes Anweisung. */
.hero__page-progress {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 1.5px;
  transform: scaleY(0);
  transform-origin: 50% 0;
  z-index: 8;
}
.hero__pline--h {
  /* Start/Breite setzt JS beim Seiten-Open an der .H-Kachelkante
     (RASTERREGEL Rene 2026-08-10: Randspalte linienfrei) — die Linien
     sind bis dahin unsichtbar (scaleX 0) */
  left: 0;
  width: 100%;
  height: var(--line-w);
  transform: translateY(calc(var(--line-w) / -2)) scaleX(0);
  transform-origin: 0% 50%;
}
.hero__page-headline {
  position: absolute;
  margin: 0;
  color: #fff;
  font-family: var(--font-display);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  line-height: 1;
  white-space: nowrap;
  will-change: left, top, font-size;
  pointer-events: none; /* Wheel/Hover gehen an den Scroller durch */
}
/* gedrehtes Seitenlabel: horizontal MITTIG in der ersten Spalte,
   vertikal BÜNDIG nach oben (Rene 2026-07-04); Rotation/Zentrierung
   setzt JS (xPercent/rotation), damit GSAP die Transforms besitzt */
.hero__page-side {
  position: absolute;
  /* horizontal exakt auf der Mitte der linken Randspalte (0–3.75%,
     gleiche Spalte wie die .H-Kachel), beide Labels um 180° gedreht —
     gleiche Leserichtung (Rene 2026-08-08i) */
  left: 1.875%;
  top: 2.5%;
  transform: translateX(-50%) rotate(180deg);
  pointer-events: none;
  writing-mode: vertical-rl;
  font-family: var(--font-display);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: clamp(10px, 0.85vw, 17px);
  opacity: 0;
}
/* Section-Navigation (nur Portfolio-Seite, Rene 2026-07-29f):
   PORTFOLIO oben, ABOUT darunter (180° gedreht, mittig auf der
   gleichen Achse) — beide klickbar, aktiver Eintrag voll sichtbar.
   z-index hebt die Labels über den Scroll-Container, sonst fängt
   dieser die Klicks ab. */
.hero__page-side { z-index: 8; }
.hero__page-side--about {
  display: none;
  top: calc(2.5% + 6.92em); /* 50% weniger Abstand zu ABOUT (Rene); HVR-20260914-07: Abstand der Woerter verdoppelt (0.42em = gemessene 5.2 px bei 1440), EXPERTISE bleibt */
  /* Rotation + Zentrierung kommen aus der Basisregel — identische
     Geometrie für beide Labels */
}
.hero__page[data-page="portfolio"] .hero__page-side {
  pointer-events: auto;
  cursor: var(--cursor-hand);
}
.hero__page[data-page="portfolio"] .hero__page-side--about { display: block; }

/* --- Seiten-Inhalt: Scroller (aktuell nur Hall of Fame) --- */
.hero__page-scroll {
  position: absolute;
  inset: 0;
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior: contain;
  scrollbar-width: none;
  display: none;
}
.hero__page-scroll::-webkit-scrollbar { display: none; }
.hero__page[data-page="portfolio"] .hero__page-scroll,
.hero__page[data-page="advisory"] .hero__page-scroll,
.hero__page[data-page="workshop"] .hero__page-scroll,
.hero__page[data-page="diagnostic-report"] .hero__page-scroll,
.hero__page[data-page="how-it-works"] .hero__page-scroll { display: block; }
/* Seiten-Inhalte: nur der Block der offenen Seite ist aktiv */
.page-content { display: none; }
.hero__page[data-page="portfolio"] .page-content--portfolio { display: block; }
.hero__page[data-page="advisory"] .page-content--advisory { display: block; }
.hero__page[data-page="workshop"] .page-content--workshop { display: block; }
/* REPORT: flow-root wie HIW — die Sections tragen vertikale Margen, ein
   durchkollabierender Rand wuerde die erste Topline gegen die Seiten-
   Headline schieben. */
.hero__page[data-page="diagnostic-report"] .page-content--diagnostic-report { display: flow-root; }
/* flow-root statt block: BFC verhindert, dass die 9vh-Marge des .hiw-
   Blocks durchkollabiert und die absolute Punchline nach unten schiebt */
.hero__page[data-page="how-it-works"] .page-content--how-it-works { display: flow-root; }
.pf-stage { height: 100%; }
/* Puffer ≥ Einlauf-Slide (12vh) + Spalten-Lag-Cap (9vh): transformierte
   Kacheln dürfen die Scrollhöhe nie über das Seitenende hinaus aufblähen
   (sonst federt der Browser den Scroll am Ende zurück) */
.pf-end { height: 22vh; }

/* --- ABOUT-Sektion innerhalb der Portfolio-Page (Rene 2026-07-29):
   Headline slidet nach der Galerie von unten ein, der Hell→Dunkel-
   Wechsel läuft als Scroll-Scrub in JS --- */
/* Sections getauscht (Rene 2026-07-29j): ABOUT (Storyboard) kommt
   ZUERST auf dunklem Grund; danach viel Raum, dann slidet die
   PORTFOLIO-Headline ein und der Hintergrund blendet Dunkel->Hell */
.pf-about { margin-top: 0; }
.pf-about__head {
  position: relative;
  /* .WHY-Sequenz + Brücke füllen jetzt den Block davor (Rene 2026-07-30) */
  margin-top: 30vh;
  margin-bottom: 35vh;
  /* HVR-20260912-01 (Rene 2026-09-12): die auf 1.35 gewachsene Headline
     laeuft rechts ueber die Containerkante (1440: 422 px, 390: 110 px) und
     blaehte scrollWidth des Seiten-Scrollers auf. clip (kein Scroll-
     Container) schneidet an derselben Kante wie der Container, der Slide-in
     von unten (overflow-y) bleibt frei. Sichtbar aendert sich nichts. */
  overflow-x: clip;
}

/* ==========================================================
   .WHY (Rene 2026-07-30) — scroll-getriebene Typo-Sequenz
   zwischen WHO und Portfolio. Gepinnte 100vh-Stage, drei
   Phasen (Opening -> Begriffe -> Resolve); Ausrichtung an
   den Seiten-Rasterlinien 14.25% / 69.5%, Havior-Typo,
   Aktiv-Betonung in Signal Rot + voller Deckkraft.
   ========================================================== */
.why {
  position: relative;
  margin-top: 4vh; /* Opening startet früher (Rene 2026-07-30b) */
}
.why__stage {
  position: relative;
  height: 100vh;
  overflow: hidden; /* Begriffe laufen ohne Austritt aus der Stage */
  /* Harte Sichtkante an der linken Rasterlinie (Rene 2026-08-08d):
     die Slide-Transitions blenden ab 14.25% aus — nichts ragt über
     die letzte linke Linie in die .H-/Nav-Spalte */
  clip-path: inset(0 0 0 14.25%);
}
.why__open {
  position: absolute;
  left: 14.25%;
  top: 50%;
  /* HVR-20260911-15 (Rene D14): Zentrierung nur noch ueber GSAP yPercent -50
     in whyInit. Die CSS-Zentrierung translateY(-50%) las GSAP je nach
     Umgebung zusaetzlich als Pixel-y ein (Landepunkt 100 px versetzt). */
}
.why__open-hl,
.why__end-hl,
.what__hl,
.ws__hl {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 700;
  text-transform: uppercase;
  font-size: clamp(2.6rem, 6.4vw, 7rem);
  line-height: 0.98;
  letter-spacing: 0.01em;
  color: #ededed;
}
/* STATEMENT-SUBLINES (Regel Rene 2026-08-10): JEDE Subline unter
   einer Statement-Headline nutzt die Intro-Copy-Rolle — Regular 400,
   clamp(1rem,1.35vw,1.55rem), lh 1.5, muted 0.55, max 34em. Eine
   Rolle, keine Ausnahmen (WHY-Opening, WHY-Resolve, WHAT, Bridge). */
.why__open-sub,
.why__end-sub,
.what__sub,
.why-bridge__sub,
.ws__sub {
  margin: 2em 0 0;
  max-width: 34em;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1rem, 1.35vw, 1.55rem);
  line-height: 1.5;
  color: rgba(237, 237, 237, 0.55);
}
/* kein Opacity-Versteck: der Textblock slidet von links (Clip), die
   Begriffe faden separat mit Fahrtbeginn ein (Rene 2026-08-08g) */
.why__main {
  position: absolute;
  inset: 0;
}
/* Clip-Hülle für den Sticky-Block: Slide-in von links und Rechts-Exit
   schneiden EXAKT an der rechten vertikalen Rasterlinie (86.25% — die
   gewachsene Headline-Linie; Rene 2026-08-08g). Links schneidet die
   Stage bei 14.25%. */
.why__leftclip {
  position: absolute;
  inset: 0;
  /* beidseitig: links 14.25%-Linie, rechts 86.25%-Linie */
  clip-path: inset(0 13.75% 0 14.25%);
  pointer-events: none;
}
/* Der SATZ zentriert sich auf der Fokuslinie (50vh) — das Label hängt
   darüber; so fluchtet „YOU NEED" exakt mit dem aktiven Begriff */
.why__left {
  position: absolute;
  left: 14.25%;
  top: 50%;
  transform: translateY(-50%);
}
.why__label {
  position: absolute;
  bottom: 100%;
  left: 0;
  margin: 0 0 1.6em; /* mehr Luft zwischen Label und Satz (Refinement) */
  font-family: var(--font-display);
  font-weight: 700;
  /* exakt die .WHO-Wortmarken-Größe: die skaliert LINEAR mit der
     Viewport-Breite (2.95vw @1440 = 42.5px) — deshalb KEINE obere
     Kappung, sonst fällt .WHY auf breiten Screens zurück (Rene 2026-08-08) */
  font-size: max(1.9rem, 2.95vw);
  letter-spacing: 0.02em;
  line-height: 1;
  color: #ffffff;
}
.why__label i,
.what__label i { font-style: normal; color: var(--brand-red); }
/* .WHAT-Label: gleiches Atom wie .WHY, nur im Fluss der Head-Gruppe */
.what__label {
  margin: 0 0 1.2em;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: max(1.9rem, 2.95vw);
  letter-spacing: 0.02em;
  line-height: 1;
  color: #ffffff;
}
.why__sticky {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 700;
  text-transform: uppercase;
  /* +30% Hierarchie (Refinement 2026-08-08h): der Satz muss gegen die
     grossen Begriffe bestehen — man liest EINEN Satz über beide Spalten */
  font-size: clamp(1.7rem, 2.6vw, 3rem);
  line-height: 1.16;
  letter-spacing: 0.01em;
  color: #ededed;
}
.why__terms {
  position: absolute;
  left: 45%; /* HVR-20260914-09 (Rene): mehr Abstand zum Kontext links (vorher 40 %, Satz „TO MAKE IT WORK,“ endete auf der Wortkante) */
  top: 0;
  margin: 0;
  padding: 0;
  list-style: none;
  will-change: transform;
}
.why__term { display: block; }
/* dichterer Rhythmus (Refinement 2026-08-08h): Prev- und Next-Ghost
   bleiben immer im Frame — keine leeren Zwischenzustände */
.why__term + .why__term { margin-top: 18vh; }
.why__word {
  display: block;
  font-family: var(--font-display);
  font-weight: 700;
  text-transform: uppercase;
  font-size: clamp(2.8rem, 5.55vw, 6.4rem); /* HVR-20260914-09: mit 45 % Start endet RESOURCES. vor v3 (vorher 6.2vw lief 46 px ueber v3 bei 1440) */
  line-height: 1;
  letter-spacing: 0.01em;
  white-space: nowrap;
  /* Signal-Rot-Sweep (Rene 2026-07-30b): Text wird aus dem Verlauf
     geclippt, JS schiebt die Rot-Kanten von links nach rechts durch */
  color: transparent;
  background-image: linear-gradient(90deg, #ededed, #ededed);
  -webkit-background-clip: text;
  background-clip: text;
  opacity: 0.12; /* gedimmter Grundzustand — JS steuert die Betonung */
}
.why__desc {
  display: block;
  margin-top: 0.8em;
  font-family: var(--font-display);
  font-weight: 700;
  /* lesbarer: grösser + mehr Kontrast, bleibt sekundär (Refinement) */
  font-size: clamp(0.95rem, 1.2vw, 1.35rem);
  color: rgba(30, 30, 30, 0.85);
  opacity: 0;
}
/* Resolve: kein Opacity-Versteck mehr — steht initial per xPercent
   links außerhalb (Stage-Clip blendet ab der linken Linie aus) und
   slidet rein (Rene 2026-08-08e) */
.why__end {
  position: absolute;
  left: 14.25%;
  top: 50%;
  transform: translateY(-50%);
}
/* Brücke ins Portfolio: gleiche Headline-Größe wie das Resolve davor
   (eine Typo-Stufe, Rene 2026-08-08c) + Letter-Fill-Effekt im Stil der
   How-it-works-Punchline: Outline-Buchstaben füllen sich beim Scrollen */
.why-bridge {
  margin: 22vh 0 0 14.25%; /* doppelter Abstand zur Section davor (Rene 2026-08-09b) */
  /* HVR-20260916-11 (Rene): Breite auf v2-v3 begrenzt und Obergrenze gesenkt — lief vorher
     rechts ueber die Vertikale hinaus (kein Mass gegen die Rasterkante). */
  width: calc(var(--pg-v3, 86.25%) - var(--pg-v2, 14.25%));
  font-family: var(--font-display);
  font-weight: 700;
  text-transform: uppercase;
  font-size: clamp(2.6rem, 5.4vw, 5.6rem);
  line-height: 0.98;
  letter-spacing: 0.01em;
  color: #ededed; /* Fallback (reduced motion / ohne JS-Wrap) */
}
.why-bridge__line { display: block; }
.why-bridge__c {
  color: transparent;
  -webkit-text-stroke: 0.024em #ededed;
  transition: color 0.18s linear;
}
.why-bridge__c.is-fill { color: #ededed; }
/* Subline unter der Brücke: Typo kommt aus der gemeinsamen
   Statement-Subline-Regel (Intro-Copy-Rolle) — hier nur Position */
.why-bridge__sub {
  margin-left: 14.25%;
}

/* ==========================================================
   .WHAT (Rene 2026-08-09d, /design-section) — editorialer
   Typo-Stack statt Diagramm: Head im Fluss (Label + Statement-
   Headline + Intro), drei Disziplin-Bänder an Hairline-Toplines
   (01 BUSINESS / 02 PRODUCT / 03 EXECUTION: Nummer | Name |
   Stützsatz | technische Labels), Outcome als viertes Band.
   KEIN Pin — beruhigt die Strecke nach dem expressiven .WHY;
   Fokus: 55%-Viewportlinie -> genau EINE Signal-Rot-Nummer.
   ========================================================== */
.what {
  position: relative;
  margin-top: 14vh;
}
/* Head im Fluss (kein Pin mehr, Rene 2026-08-09d): Label +
   Statement-Headline + zwei Intro-Absätze an der 14.25%-Linie */
.what__head {
  margin-left: 14.25%;
  max-width: 72%; /* Rechtskante = 86.25%-Content-Kante (Art-Director D4) */
}
/* .WHAT-Intro: Typo kommt aus der gemeinsamen Statement-Subline-
   Regel (Intro-Copy-Rolle); hier nur der Absatz-Rhythmus */
.what__sub + .what__sub { margin-top: 1.1em; }
/* Disziplin-Bänder (Rene 2026-08-09d): vier gleichgebaute Bänder an
   Hairline-Toplines (3 Disziplinen + Outcome als Konsequenz-Band) —
   Architektur statt Diagramm. Topline = bestehendes Linien-Atom
   (ab-media__hline/pf-toplines): startet an der 14.25%-Linie und
   läuft bis zum rechten Rand. */
.what__dims {
  margin: 16vh 0 0 14.25%;
  width: 72%;
  /* alle drei Bänder EXAKT gleich hoch (Rene 2026-08-10): 1fr-Zeilen
     strecken jedes Band auf die Höhe des höchsten — eine Regel, keine
     Einzeljustage; die Nummern bleiben in der jeweiligen Bandmitte */
  display: grid;
  grid-auto-rows: 1fr;
}
.what__topline,
.ws__topline {
  position: absolute;
  top: 0;
  left: 0;
  width: calc(var(--pg-w, 100vw) - var(--pg-v2, 14.25vw)); /* HVR-20260915-05: bis zum Seitenrand */
  height: var(--line-w);
  background: #ffffff;
  opacity: 0.15;
}
.what__dim {
  position: relative;
  display: grid;
  grid-template-columns: 14% 1fr; /* Nummer | Inhalt */
  padding: 8vh 0;
}
/* Nummer: Rollin-Begriffe-Rolle (04), groß + muted — architektonischer
   Anker des Bands, vertikal exakt in der Bandmitte (align-self:center;
   Band-Paddings sind symmetrisch 8vh -> Zellmitte = Bandmitte, EINE
   Layoutregel für alle drei Reihen, Rene 2026-08-09e). Im Fokus wird
   GENAU EINE Nummer Signal Rot (JS toggelt .is-focus, Zonen
   mathematisch exklusiv: 55%-Linie liegt nur in einem Band) */
.what__num,
.ws-num {
  align-self: center;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(2.8rem, 6.2vw, 6.8rem);
  line-height: 1;
  letter-spacing: 0.01em;
  color: rgba(237, 237, 237, 0.35);
  font-variant-numeric: tabular-nums;
  transition: color 0.25s ease;
}
.what__dim-name {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 700;
  text-transform: uppercase;
  font-size: clamp(1.7rem, 2.6vw, 3rem);
  line-height: 1;
  letter-spacing: 0.01em;
  color: rgba(30, 30, 30, 0.85);
  transition: color 0.25s ease;
}
/* Beschreibung = Intro-Copy-Rolle (04, Regular 400): erklärender
   Body-Text, kontrollierte Lesebreite (Rene 2026-08-09e) */
.what__dim-desc {
  margin: 1.2em 0 0;
  max-width: 34em;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1rem, 1.35vw, 1.55rem);
  line-height: 1.5;
  color: rgba(237, 237, 237, 0.55);
}
/* Technische Labels: Eyebrow-Rolle + Logo-Punkt-Trapez (currentColor,
   Baseline-bündig — gleiche Anatomie wie die Outcome-Kästen) */
.what__topics {
  margin: 2em 0 0; /* klare Stufe Desc -> Labels (Rene 2026-08-09e) */
  display: flex;
  flex-wrap: wrap;
  column-gap: 2em;
  row-gap: 0.7em;
}
.what__topic {
  font-family: var(--font-display);
  font-weight: 700;
  text-transform: uppercase;
  font-size: clamp(0.8rem, 0.95vw, 1.1rem);
  letter-spacing: 0.14em;
  color: rgba(237, 237, 237, 0.35);
  transition: color 0.25s ease;
  white-space: nowrap;
}
.what__topic::before {
  content: '';
  display: inline-block;
  width: 0.3em;
  height: 0.25em;
  clip-path: polygon(0 0, 72.95% 0, 100% 100%, 0 100%); /* Logo-Punkt */
  background: currentColor;
  margin-right: 0.32em;
}
/* Fokus-Zustand: Nummer rot, Name voll weiß, Labels heller */
.what__dim.is-focus .what__num { color: var(--signal-red); }
.what__dim.is-focus .what__dim-name { color: #ffffff; }
.what__dim.is-focus .what__topic { color: rgba(237, 237, 237, 0.6); }
/* .WHOM-Band (Rene 2026-08-10): Brücke Disziplinen -> .GAIN.
   Gleiches Kompartiment wie die Disziplin-Bänder (Topline + 8vh) —
   die Trennung leistet die .WHOM-Wortmarke, nicht extra Leerraum
   (Band 03 muss exakt dieselbe Box-Dimension haben wie 01/02). */
.what__aud {
  position: relative;
  margin: 0 0 0 14.25%;
  width: 72%;
  padding: 8vh 0;
}
.what__aud .what__sub {
  margin-top: 1.6em;
  max-width: 34em;
}
.what__aud-grid {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: 1fr; /* gleichförmige Frames -> gleiche Höhen */
  gap: var(--tile-gap); /* Bento-Gap-Atom: Frame-Raster der Marke */
  margin: 2.4em 0 0;
  padding: 0;
}
/* Audience-Item (Rene 2026-08-10): Outline-Frame (eckig, Hairline,
   keine Füllung, kein Schatten — Frame, keine SaaS-Card) separiert
   die Zielgruppen; einheitliche Anatomie: Signal-Rot-Punkt + Name +
   Stützzeile in JEDEM Frame */
.what__aud-item {
  border: 1px solid rgba(237, 237, 237, 0.15);
  padding: 1.2em 1.6em 1.2em;
  font-family: var(--font-display);
  font-weight: 700;
  text-transform: uppercase;
  font-size: clamp(0.95rem, 1.2vw, 1.35rem);
  letter-spacing: 0.01em;
  /* HVR-20260912-16 (Rene): der Name war mit rgba(30,30,30,.85) auf dem dunklen
     Band unsichtbar, nur Punkt und Stuetzzeile blieben; Token 02: Audience-Items
     = Off-White 0.85. Der Logo-Punkt (::before) steht damit inline VOR dem Text. */
  color: rgba(237, 237, 237, 0.85);
}
/* HVR-20260912-17 (Rene): Das Kachelraster beginnt an der Textkante des Absatzes
   (v2 + Inset) und endet mit demselben Abstand vor v3; die Gaps bleiben. Damit
   liegen die Aussenkanten nicht mehr auf den Template-Linien, die Aussenrahmen
   (HVR-20260911-11 D5, vorher transparent gegen Doppelung) zeichnen wieder. */
.what__aud-grid { margin-inline: var(--content-inset); }
.what__aud-item::before {
  content: '';
  display: inline-block;
  width: 0.3em;
  height: 0.25em;
  clip-path: polygon(0 0, 72.95% 0, 100% 100%, 0 100%); /* Logo-Punkt */
  background: var(--signal-red); /* alle Zielgruppen-Punkte Signal Rot */
  margin-right: 0.32em;
}
.what__aud-note {
  display: block;
  margin-top: 0.7em;
  text-transform: none;
  font-size: clamp(0.85rem, 1.05vw, 1.2rem);
  letter-spacing: 0;
  color: rgba(237, 237, 237, 0.55);
}
/* Outcome-Ebene: editoriale Spalten (keine Cards) — viertes Band an
   derselben Topline wie die Disziplinen (Konsequenz, Rene 2026-08-09d) */
.what__outcome {
  position: relative;
  margin: 0 0 0 14.25%;
  width: 72%;
  padding-top: 8vh;
}
/* .WHOM-/.GAIN-Wortmarken in den Bändern: gleiche Atome wie .WHAT */
.what__aud .what__label,
.what__outcome .what__label { margin-bottom: 1.6em; }
.what__eyebrow,
.ws__eyebrow {
  margin: 0 0 2.4em;
  font-family: var(--font-display);
  font-weight: 700;
  text-transform: uppercase;
  font-size: clamp(0.8rem, 0.95vw, 1.1rem);
  letter-spacing: 0.14em;
  color: var(--signal-red);
}
.what__outcols {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  /* HVR-20260912-18 (Rene): gleiche Abstandsregel wie die .WHOM-Kacheln — Inset zur
     Linie beidseitig, Gap = Kachel-Gap (vorher 4 %, Kaesten auf v2/v3) */
  gap: var(--tile-gap);
  margin-inline: var(--content-inset);
  --gain-pad: clamp(0.9rem, 1.4vw, 1.65rem); /* Textachse innerhalb der Spalte fuer Kasten und Stuetzzeile */
  align-items: start; /* alle drei Module an EINER Oberkante */
}
/* Outcome-Module (Rene 2026-08-10): die roten Kästen strecken sich
   über die volle Spaltenbreite — der rechte Kasten alignt exakt an
   der 86.25%-Linie. Deterministisch ZWEIZEILIG auf allen Breiten
   (Lead-Span als Block), damit alle drei Kästen identisch hoch sind
   und der Umbruch nie von der Monitorbreite abhängt. */
/* .GAIN-Statements als Signal-Rot-Kästen (Rene 2026-08-10) — im
   Pattern der Section-Label-Rechtecke: rote Fläche, Schrift in
   Seitenhintergrund-Dunkel, eckig, kein Schatten. VOLLBREIT über
   die Grid-Spalte (rechter Kasten alignt an der 86.25%-Linie);
   der Zeilenfall ist GEAUTORT (Lead-Span als Block -> immer exakt
   zwei Zeilen, identische Kastenhöhen, monitorunabhängig). */
.what__outcol h4,
.ws__redbox {
  display: block;
  margin: 0;
  /* vertikal optisch zentriert: Versalien ohne Unterlängen -> minimal
     weniger Bodenpadding; etwas mehr Luft insgesamt (Refine 09e) */
  padding: 0.5em var(--gain-pad, 0.65em) 0.44em var(--gain-pad, 0.55em);
  background: var(--signal-red);
  font-family: var(--font-display);
  font-weight: 700;
  text-transform: uppercase;
  /* Sticky-Rolle: größere Statements füllen die vollbreiten Kästen */
  font-size: clamp(1.7rem, 2.6vw, 3rem);
  line-height: 1.1;
  letter-spacing: 0.01em;
  color: #201e1e;
}
/* Konsequenz-Node im Kasten: Baseline-bündig mit der Text-Unterkante
   (wie der Logo-Punkt der Wortmarken), 30% näher am ersten Buchstaben.
   Der Punkt hängt am LEAD-Span (erstes Wort) und ist mit ihm per
   white-space:nowrap unbrechbar gekoppelt — sonst bricht der Marker
   bei min-content allein auf Zeile 1 (Art-Director D1 2026-08-09e:
   leere Rotzeile in STRONGER EXECUTION auf allen Breiten). */
.what__outcol-lead,
.ws__redbox-lead { display: block; white-space: nowrap; } /* Zeile 1 = Punkt + Lead */
.what__outcol-lead::before,
.ws__redbox-lead::before {
  content: '';
  display: inline-block;
  width: 0.3em;
  height: 0.25em;
  clip-path: polygon(0 0, 72.95% 0, 100% 100%, 0 100%); /* Logo-Punkt */
  background: currentColor;
  margin-right: 0.32em;
}
.what__outcol p {
  margin: 1.05em 0 0; /* em-Skalenwert (02), Review 2026-08-09e */
  font-family: var(--font-display);
  font-weight: 700;
  /* Descriptor-Rolle: größere Stützzeilen zu den vollbreiten Kästen */
  font-size: clamp(0.95rem, 1.2vw, 1.35rem);
  color: rgba(237, 237, 237, 0.55);
}
@media (max-width: 900px) {
  .what__head { max-width: 80%; }
  /* Mobile: Bänder stapeln natürlich — Nummer über Name, Labels
     wrappen; keine Desktop-Zweispaltigkeit erzwingen */
  .what__dims { margin-top: 11vh; }
  .what__dim {
    display: block;
    padding: 6vh 0;
  }
  .what__num { display: block; margin-bottom: 0.55em; }
  .what__dim-name { font-size: clamp(1.6rem, 7vw, 2.6rem); }
  .what__dims { display: block; } /* gestapelt: keine 1fr-Streckung */
  /* HVR-20260911-06 (Rene D9): Badges innerhalb des Bildes, ohne gegenseitige
     Ueberlappung. Die rechten Badges ruecken um 10 % nach unten, damit linke und
     rechte Pillen (bis 174 px breit in 281 px Ebene) nie dieselbe Zeile teilen;
     Reihenfolge und Typografie unveraendert. !important nur wegen inline top. */
  /* HVR-20260917-T2-Badges-v5 (AD-Fund, 4. Review, KRITISCH + MAJOR):
     v4 loeste die Logo-Kollision, aber die reine Arithmetik blieb zu knapp:
     gemessene Pillenhoehe ist unveraendert 24px (der Chip/Padding-Wert
     bestimmt sie nicht allein - main.js positioniert den Richtungspfeil
     <i> absolut an der Pillenecke, der die Gesamthoehe trotzdem beeinflusst).
     Rechnung: der nutzbare Raum zwischen Logo-Ende (7.1% + Puffer) und
     Panel-Anfang (36% - Puffer) betraegt rechnerisch nur ~177px - fuer
     8 Pillen a 24px bleiben dabei nur ~1-2px Puffer je Zwischenraum, was
     bei Rundung wiederholt zu echten Mini-Ueberlappungen fuehrte (s.
     v2-v4 Historie). Fix: Sichtbare Badge-Anzahl auf Mobile von 8 auf 6
     reduziert (Option (c) aus dem AD-Fund) - RB (Name, bereits redundant
     mit der Signatur "B.Sc. Ing. Rene Bade" im Bio-Text darunter) und 15
     (Erfahrungsjahre, am wenigsten unterscheidungskraeftig) ausgeblendet.
     Mit nur noch 6 Pillen passen grosszuegige ~11px Zwischenraeume in
     denselben Raum - kein Grenzwert-Balanceakt mehr. Container zurueck auf
     volle Bildhoehe (kein height-Override mehr noetig), Positionen als
     ABSOLUTE %-Werte der .ab-media-Hoehe (nicht mehr relativ zu einem
     eigens verkleinerten Container - einfacher nachzurechnen). */
  .ab-badges .ab-badge:nth-child(1) { top: 7.6% !important; }
  .ab-badges .ab-badge--r:nth-child(2) { top: 12.5% !important; }
  .ab-badges .ab-badge:nth-child(3) { display: none !important; }
  .ab-badges .ab-badge--r:nth-child(4) { display: none !important; }
  .ab-badges .ab-badge:nth-child(5) { top: 17.4% !important; }
  .ab-badges .ab-badge--r:nth-child(6) { top: 22.3% !important; }
  .ab-badges .ab-badge:nth-child(7) { top: 27.2% !important; }
  .ab-badges .ab-badge--r:nth-child(8) { top: 32.1% !important; }
  /* HVR-20260918-M4 (Rene: "Batches duerfen nicht in meinem Gesicht
     haengen, sondern muessen mich zentral frei halten, nur um mich herum
     fliegen"). Gemessen: die Desktop-Inline-Ankerwerte (left/right 22-27%)
     liessen die Pillen ueber 22-78% der Bildbreite streuen - mitten durch
     Gesicht/Oberkoerper. Links-Badges auf 2-4% vom linken, Rechts-Badges
     auf 2-4% vom rechten Rand geschoben - die Pillen selbst sind schmal
     genug (bei aktueller Schriftgroesse 8px, T2-Fix), dass sie dadurch
     die mittlere Bildhaelfte (wo die Person sitzt) frei lassen. */
  .ab-badges .ab-badge:nth-child(1) { left: 3% !important; }
  .ab-badges .ab-badge--r:nth-child(2) { right: 2% !important; }
  .ab-badges .ab-badge:nth-child(5) { left: 4% !important; }
  .ab-badges .ab-badge--r:nth-child(6) { right: 3% !important; }
  .ab-badges .ab-badge:nth-child(7) { left: 2% !important; }
  .ab-badges .ab-badge--r:nth-child(8) { right: 4% !important; }
  .what__aud { padding: 6vh 0; }
  /* HVR-20260918-M7 (Rene: "bei .WHOM koennen auch 2 Kacheln nebeneinander,
     anstatt alle nur untereinander") - die Audience-Kacheln (6 Frames,
     Desktop repeat(3,1fr)) waren mobil komplett gestapelt (6 Zeilen).
     2 Spalten x 3 Zeilen statt 1 x 6, halbiert die Scrollstrecke. */
  .what__aud-grid { grid-template-columns: repeat(2, 1fr); gap: 1rem; }
  /* HVR-20260912-17: einspaltig ebenfalls um den Inset von v2/v3 abgesetzt, Rahmen bleiben */
  .what__outcome { padding-top: 6vh; }
  .what__outcols { grid-template-columns: 1fr; gap: 9vh; }
}
/* Reduzierte Bewegung: die Section ist bereits komplett statisch
   (kein Pin, keine CSS-Hides) — whatInit steigt aus, alles lesbar */
/* Schmale Viewports: kein Zweispalter erzwingen — sticky Satz oben,
   Begriffe fahren darunter durch (Rene-Brief, Mobile-Empfehlung) */
@media (max-width: 900px) {
  .why__left {
    top: 12%;
    transform: none;
  }
  /* HVR-20260911-15 (Rene D7): Label im Fluss ueber dem Statement statt absolut
     (bottom:100%) — es fiel bei 390/768 auf die Subline des Opening-Blocks */
  .why__label { position: static; margin: 0 0 0.9em; }
  .why__terms { left: var(--content-inset); }
  .why__word { font-size: clamp(2.2rem, 9vw, 4rem); }
}
/* Reduzierte Bewegung: gleiche Inhalte statisch gestapelt — kein Pin,
   keine Scroll-Kopplung; alle Begriffe voll lesbar */
@media (prefers-reduced-motion: reduce) {
  .why__stage { height: auto; overflow: visible; clip-path: none; }
  .why__open,
  .why__left,
  .why__end {
    position: static;
    transform: none;
    margin-left: 14.25%;
  }
  .why__leftclip { position: static; clip-path: none; }
  .why__open { padding-top: 4vh; }
  .why__main {
    position: static;
    opacity: 1;
    visibility: visible;
    margin-top: 10vh;
  }
  .why__label { position: static; margin: 0 0 0.9em; }
  .why__terms { position: static; margin: 6vh 0 0 40%; }
  .why__term + .why__term { margin-top: 8vh; }
  .why__word {
    opacity: 1;
    color: #ededed;
    background-image: none;
    -webkit-background-clip: initial;
    background-clip: initial;
  }
  .why__desc { opacity: 1; }
  .why__end {
    opacity: 1;
    visibility: visible;
    margin-top: 12vh;
  }
}
/* HVR-20260916-12 (Rene): "Portfolio" lief ueber die Vertikale — Ursache ist der Scale-Scrub
   in main.js (grow, bis 1.35), nicht die Schriftgroesse; der Deckel sitzt dort (abMaxScale). */
.pf-about__headline {
  font-family: var(--font-display);
  font-weight: 700;
  text-transform: uppercase;
  font-size: clamp(4rem, 8.6vw, 9rem); /* HVR-20260916-12 (Rene): Basisgroesse gesenkt — "Portfolio" lief schon in Ruhelage ueber v3 hinaus (1206 px Tinte in 1037 px Platz bei 1440) */
  line-height: 1; /* exakt für die Glyph-Metrik der Führungslinien */
  letter-spacing: 0.01em;
  color: #ededed; /* Start hell auf Dunkel → Scrub blendet auf Signal Rot (Rene) */
  margin: 0 0 0 14.25%;
}
/* HVR-20260911-06 (Ueberlauf About 390, Ursache korrigiert): die Seiten-Headline
   PORTFOLIO hat mit dem 4-rem-Mindestwert 377 px Tinte in 334 px Platz — der
   Rest lief als scrollWidth (+62 px) ueber und wurde abgeschnitten. Unter
   460 px proportional (13.5vw: 53 px bei 390, 62 px bei 460), Obergrenze 4rem. */
@media (max-width: 460px) {
  .pf-about__headline { font-size: clamp(2.5rem, 13.5vw, 4rem); }
}
/* Führungslinien wie bei PORTFOLIO: Cap-Höhe + Baseline (Top-Werte
   setzt JS aus den Glyph-Metriken; wandern beim Größer-Scrubben mit) */
.pf-about__hline {
  position: absolute;
  /* RASTERREGEL (Rene 2026-08-10): stoppt exakt an der v1-Linie —
     die Randspalte bleibt linienfrei. Die EXAKTE Startkante (= .H-
     Kachelkante) setzt JS (setAbLines); 3.75% ist nur der statische
     Fallback ohne JS. */
  left: 3.75%;
  right: 13.75%; /* HVR-20260914-05 (Regel): endet auf v3 */
  height: var(--line-w);
  background: #ffffff; /* Start im dunklen Bereich — Scrub färbt auf Signal Rot */
  opacity: 0.15;
}

/* ===========================================================
   ABOUT — Media-Kachel mit Scrub-Phasen (Vorhang, Logo, Badges,
   Split mit Mission-Text). Positionen/Transforms treibt JS.
   =========================================================== */
.ab-media {
  position: relative;
  margin-left: 14.25%;
  width: 72%; /* rechte Kante = 86.25% — bündig mit der äußeren Linie
                 und den Galerie-/Brand-Kanten (Rene 2026-07-29b) */
  height: 88vh;
}
/* Horizontale Begleitlinien ober-/unterhalb des Bildes (Rene
   2026-07-29k): volle Seitenbreite, wandern mit dem gepinnten Bild */
.ab-media__hline {
  position: absolute;
  /* HVR-20260916-10 (Rene): Linie beginnt an v1 (Menu-Linie, .H-Kachelkante), nicht am
     Rand des Medien-Kastens (v2) — rechts weiter bis zum Bildschirmrand. Der Container
     selbst startet auf v2, daher die Differenz v1-v2 als negativer Versatz. */
  left: calc(var(--pg-v1, 3.75%) - var(--pg-v2, 14.25%));
  width: calc(var(--pg-w, 100vw) - var(--pg-v1, 3.75vw));
  height: var(--line-w);
  background: #ffffff;
  opacity: 1; /* HVR-20260916-10: volle Farbstaerke (vorher 0.15, praktisch unsichtbar) */
  z-index: 4;
}
.ab-media__hline--top { top: 0; }
.ab-media__hline--bottom { bottom: 0; }
.ab-frame {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: #2a2828;
}
.ab-photo {
  position: absolute;
  top: 0; left: 0;
  width: 100%; /* HVR-20260914-37: waehrend der Seite setzt JS die Breite auf die Media-Breite in px; der Frame schneidet nur noch (kein Re-Layout und Re-Raster des Fotos beim Andocken) */
  height: 100%;
  object-fit: cover;
  display: block;
  will-change: transform;
}
.ab-curtain {
  position: absolute;
  inset: 0;
  background: var(--brand-red);
}
.ab-logo {
  position: absolute;
  color: #fff;
  height: auto;
  pointer-events: none;
  z-index: 2;
}
/* Figma-/Miro-Cursor-Badges: Pfeil + Pill, magnetisch zur Maus */
/* HVR-20260914-38 (Rene): die Desktop-Regel aus HVR-20260914-08 (rechte Badges auf
   30 / 54 / 76 / 96 %) ist zurueckgenommen; die Badges stehen wieder auf ihren
   Inline-Positionen (20 / 44 / 66 / 86 %). Die Mobil-Regel im Media Query bleibt. */
.ab-badges {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 3;
}
.ab-badge {
  position: absolute;
  opacity: 0;
  pointer-events: auto; /* Hover-Zoom der Pillen (Rene 2026-07-29c) */
  cursor: var(--cursor-arrow);
}
.ab-badge__inner {
  display: inline-block;
  position: relative;
  will-change: transform;
}
/* Figma-Cursor (Spitze oben links bei 0°); JS setzt ihn an die dem
   Gesicht zugewandte Pill-Ecke und rotiert die Spitze dorthin */
.ab-badge__inner i,
.ab-cursor > i {
  position: absolute;
  width: 16px;
  height: 16px;
  will-change: transform; /* HVR-20260914-37: Pfeilrotation pro Frame ohne Repaint der Pille */
  clip-path: polygon(0 0, 100% 36%, 52% 62%, 36% 100%);
  display: block;
}
/* Pille im Referenz-Stil: rund, dunkler Text, Monogramm-Chip links */
.ab-badge__inner b,
.ab-cursor > b {
  display: inline-flex;
  align-items: center;
  gap: 0.55em;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(10px, 0.78vw, 14px);
  letter-spacing: 0.01em;
  padding: 0.32em 1em 0.32em 0.32em;
  border-radius: 999px;
  white-space: nowrap;
}
.ab-badge__chip {
  width: 1.9em;
  height: 1.9em;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.78em;
  letter-spacing: 0;
  flex: 0 0 auto;
}
/* NP-Cursor (Rene 2026-07-30): Badge im Member-Stil folgt dem Maus-
   zeiger, aber nur INNERHALB des Fotos; Spitze des Figma-Pfeils =
   Cursor-Hotspot (0/0), die Pille hängt rechts darunter. Der native
   Cursor wird im Foto ausgeblendet, solange das Badge aktiv ist. */
.ab-cursor {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 9;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  will-change: transform;
}
.ab-cursor > i { left: 0; top: 0; }
.ab-cursor > b { margin: 15px 0 0 11px; }
.ab-frame--np,
.ab-frame--np * { cursor: none; }
/* Mission-Text rechts (erscheint im Split) */
.ab-text {
  will-change: transform, opacity; /* HVR-20260914-37: eigene Compositor-Ebene; der Einflug (x 40 -> 0, autoAlpha) des buchstabenweise gesplitteten Textes malte sonst ~1000 Spans pro Frame neu (Bisektion: ohne .ab-text 1 statt 15 Frames ueber 25 ms) */
  position: absolute;
  left: 66%;
  top: 17%; /* deutlicher Abstand unter dem Logo (Rene 2026-07-29m) */
  width: 32%;
  opacity: 0;
  z-index: 2;
}
.ab-mission {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 700;
  /* längerer Text (Rene 2026-07-29n): vmin statt vw, sonst läuft der
     Kasten auf breiten Screens über (Boxhöhe hängt an vh) */
  font-size: clamp(0.72rem, 1.5vmin, 1.2rem);
  line-height: 1.42;
  color: var(--brand-red);
}
.ab-mission + .ab-mission { margin-top: 1.05em; }
/* Name + Unterschrift (Rene 2026-07-29l) */
.ab-sign-name {
  margin: 1.1em 0 0;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(0.72rem, 1.5vmin, 1.2rem); /* läuft mit .ab-mission mit */
  color: var(--brand-red);
}
.ab-sign {
  display: block;
  width: clamp(46px, 4.2vw, 62px); /* Unterschriften-Maßstab */
  height: auto;
  margin-top: 0.6em;
}
/* WHO-Wortmarke (Rene 2026-07-29m): erscheint per Kanten-Split, wenn
   das .HAVIOR die rechte Bildkante passiert — Position/Clip setzt JS */
.ab-logo-who {
  position: absolute;
  z-index: 2;
  display: flex;
  align-items: baseline;
  gap: 0.08em;
  font-family: var(--font-display);
  font-weight: 700;
  color: #ffffff;
  letter-spacing: 0.02em;
  line-height: 1;
  clip-path: inset(0 0 0 100%);
  pointer-events: none;
}
.ab-logo-who i {
  font-style: normal;
  color: var(--brand-red);
}
/* Punkt vor .WHO/.WHY = exakte Geometrie des .HAVIOR-Logo-Punkts
   (SVG-Glyphe „dot": Trapez 8.592×7.149, rechte Kante schräg;
   Rene 2026-08-08k) — Dimension/Position wie der Font-Punkt zuvor,
   Baseline-bündig, Farbe erbt (Brand Red) */
.ab-logo-who i,
.why__label i,
.what__label i,
.sr-title i,
.sr-cta-title i {
  display: inline-block;
  width: 0.17em;
  height: 0.1415em; /* 7.149 / 8.592 der Breite */
  background: currentColor;
  clip-path: polygon(0 0, 72.95% 0, 100% 100%, 0 100%);
}
.why__label i,
.what__label i { margin-right: 0.06em; } /* Nachlauf des früheren Font-Punkts */
/* Read-Effekt (Rene 2026-07-29g): Buchstaben starten bei 30% Opacity,
   der Scroll-Fill zieht sie nach und nach auf 100% */
.ab-word { display: inline-block; }
.ab-ch { opacity: 0.3; }
.ab-end { height: 12vh; } /* Abstand zu .WHY um 2/3 reduziert (Rene 2026-07-30b) */

/* HVR-20260912-04/-05 Fix (Batch 2, 2026-09-15): der seitliche Dock-Split
   (main.js abInit, Phase D) setzt unter <=900px aus (siehe JS-Kommentar dort) —
   das Foto bleibt volle Breite/kuerzer, die Mission-Textspalte stapelt darunter
   statt seitlich in die feste 88vh-Buehne bzw. die .WHY-Sektion darunter zu
   ueberlaufen (HVR-20260912-04). Die Badge-Ebene schrumpft dadurch gar nicht
   mehr, ihre %-Positionen bleiben also in der urspruenglichen 100%-Breite
   gueltig (HVR-20260912-05 damit gegenstandslos). Muss NACH den .ab-frame/
   .ab-badges/.ab-text-Basisregeln oben stehen, sonst gewinnt die spaetere
   unbedingte Regel per Quellreihenfolge trotz Media Query. */
@media (max-width: 900px) {
  /* HVR-20260917-T2 (Rene, Ticket 2 Portfolio/About: "Text unter dem Bild
     wird abgeschnitten, keine Scrollbar soll auftauchen"). Root Cause
     gefunden per Rect-Scan: .ab-media (Basisregel oben, Z.1250) traegt ein
     nie fuer Mobile angepasstes margin-left:14.25% - auf 375px Breite
     53.4px. .ab-media__hline (Kind, absolut positioniert relativ zu
     .ab-media) berechnet seine eigene Breite unabhaengig ueber
     --pg-w/--pg-v1 (T1-Fix, jetzt ~355px), OHNE zu wissen, dass sein
     Elternrahmen bereits 53.4px nach rechts verschoben ist - Summe
     53.4+355=408.4px, 33.4px ueber den Viewport hinaus (exakt der von
     Rene gemeldete Scrollbar-Ueberlauf, per scrollWidth-Differenz
     nachgemessen). Fix: .ab-media auf denselben --content-inset-Rand wie
     der Rest der Seite (T1), Breite entsprechend auf die volle
     verfuegbare Breite (100% - 2×Inset) gebracht - Eltern- und
     Kind-Rahmen rechnen jetzt mit derselben Bezugsgroesse. */
  /* HVR-20260917-T2-Fix (finale Ursache nach Rect-Nachmessung mit expliziten
     Zahlenwerten statt DOMRect-Objekten): GSAP misst .ab-media EINMAL vor dem
     Pinning (Margin 20px, Breite X), baut daraus den .pin-spacer (spacer
     erbt margin-left 20px + width X) und setzt danach per Inline-Style
     margin:0 auf .ab-media selbst - das Spacer-margin ersetzt ab dann die
     Elementmargin, damit nichts doppelt zaehlt. Unser vorheriges
     `!important` auf margin-left verhinderte genau das: es gewann gegen
     GSAPs inline margin:0 (Inline-Styles ohne !important verlieren gegen
     externe !important-Regeln), wodurch dieselben 20px ZWEIMAL wirkten -
     einmal als Spacer-margin, einmal als Element-margin INNERHALB des
     bereits verschobenen Spacers (gemessen: .ab-media.left=40 statt 20).
     Fix: margin-left OHNE !important lassen, damit GSAPs inline margin:0
     nach der Initialmessung gewinnt. width bleibt !important, aber jetzt
     ueber 100vw (nicht 100%) berechnet - 100% reagiert sonst zirkulaer auf
     die vom Spacer selbst schon reduzierte Elternbreite. Nachmessung mit
     dieser Formel: .ab-media links=20 (Wunsch), Ueberlauf 0px. */
  /* HVR-20260918-M3 (Rene: "nutze die gesamte Bildschirmbreite fuer
     Bilder, keine Raender links und rechts" - gilt explizit auch fuer die
     Expertise-Vorhang-/Logo-Flaeche, die "auf die gesamte Bildschirmbreite
     vergroessert werden kann"). Der T2-Fix oben loeste eine Pin-Spacer-
     Ueberlappung ueber ein --content-inset-Randmass; jetzt Vollbreite statt
     Randabstand - margin:0 statt --content-inset macht die urspruengliche
     Doppelzaehlungs-Problematik ohnehin gegenstandslos (0px kann nicht
     doppelt zaehlen). Logo-Positionsformel in abInit() (main.js:1571,
     `W = () => abMedia.offsetWidth`) rechnet ohnehin relativ zu .ab-medias
     EIGENER Breite, nicht zu einem festen Randmass - zentriert bei
     Vollbreite automatisch korrekt neu. */
  .ab-media { margin-left: 0; width: 100vw !important; }
  /* HVR-20260918-M3-Fortsetzung: die Rahmenlinie rechnete bisher width als
     (--pg-w - --pg-v1) - bei jetzt randlosem .ab-media faellt das rechte
     Ende um --content-inset (~20px) VOR die neue Bildkante zurueck statt
     sie zu erreichen. Globale Linienregel (Rene: "Linien muessen immer bis
     zum Bildrand gehen ... nie im Freien enden") - hier direkt auf 0/0
     (volle Elternbreite von .ab-media, das jetzt selbst die Bildkante
     ist) statt der --pg-v1/--pg-w-Formel, die fuer die alte Randspalten-
     Geometrie kalibriert war. */
  .ab-media__hline { left: 0; right: 0; width: auto; }
  /* HVR-20260917-T2 (Fortsetzung): identisches Muster (margin-left:14.25%,
     width/max-width:72% - dieselbe Desktop-Randspalten-Konvention wie
     .ab-media) auch bei .why-bridge, .what__head/__dims, .pf-about__headline,
     .pf-brands, .pf-folio - alle nie fuer Mobile angepasst, alle mit
     demselben Ueberlauf-Risiko (Kind-Linien/-Elemente rechnen bereits mit
     dem T1-Content-Inset, der Elternrahmen aber noch mit der alten 14.25%-
     Spalte). .what__aud/__outcome/why-bridge__sub haben kein eigenes
     width/max-width (erben die Breite vom Fliesstext) - dort nur
     margin-left korrigiert. */
  .why-bridge, .why-bridge__sub, .what__head, .what__dims,
  .what__aud, .what__outcome, .pf-about__headline {
    margin-left: var(--content-inset) !important;
  }
  .what__head { max-width: calc(100% - 2 * var(--content-inset)) !important; }
  .what__dims { width: calc(100% - 2 * var(--content-inset)) !important; }
  .pf-brands, .pf-folio {
    margin-left: var(--content-inset) !important;
    width: calc(100% - 2 * var(--content-inset)) !important;
  }
  .ab-frame { height: 58%; }
  /* HVR-20260917-T2-Badges (History: v1-v4 versuchten Panel-/Logo-Kollision
     ueber eine verkleinerte .ab-badges-Container-Hoehe (58%->32%->34%->35%)
     mit darauf relativen top-%-Werten zu loesen - s. Kommentar bei den
     nth-child-Overrides oben fuer die volle Historie. v5 gibt diesen Ansatz
     auf: bei nur noch 6 sichtbaren Pillen (2 ausgeblendet) sind die
     top-Werte jetzt ABSOLUTE Prozentsaetze der vollen .ab-media-Hoehe -
     .ab-badges bleibt daher auf der Basisregel (inset:0 = 100% Hoehe),
     kein eigener Hoehen-Override mehr noetig. */
  /* HVR-20260917-T2 (Rene: "Batches ueber meinem Bild sammeln sich zu
     stark und sind zu gross, muessten verkleinert werden und duerfen mir
     nicht im Gesicht haengen"). Gemessen: 8 Pillen ueber 76% der
     Rahmenhoehe verteilt (Rect-Scan), mehrere mit negativem left (ueber
     den linken Rand hinausragend). Die Positionsformel selbst (main.js
     abInit, prozentual zur Containerbreite/-hoehe) bleibt unangetastet -
     das waere ein groesserer Eingriff in die Scrub-Choreografie; hier nur
     die PILLENGROESSE spuerbar reduziert (em-basiert: Chip und Icon
     skalieren mit der Schrift automatisch mit), das entschaerft sowohl
     "zu gross" als auch einen Teil der Haeufung (kleinere Pillen wirken
     bei gleicher Position deutlich lockerer verteilt). */
  .ab-badge__inner b { font-size: 8px; padding: 0.28em 0.85em 0.28em 0.28em; }
  /* HVR-20260917-T2-Badges-v4 (AD-Fund, 4. Review, KRITISCH): die 8-Stufen-
     Kaskade aus v3 begann bei top:1% des 34%-Containers - das liegt exakt
     in der Zone, wo main.js (Z.1597-1601, NICHT hinter isNarrow() gated,
     gilt auch mobil) das .ab-logo/.ab-logo-who-Wortzeichen bei top:5% der
     .ab-media-Hoehe dockt. Badge 2 (DM) landete bei 4.8-8.2% - direkte
     Ueberlappung (980px2/539px2 gemessen). Chip-Durchmesser und Pillen-
     Padding zusaetzlich verkleinert, um trotz Logo-Ausschlusszone genug
     Platz fuer alle 8 Pillen VOR der 36%-Panelgrenze zu behalten. */
  .ab-badge__chip { width: 1.6em; height: 1.6em; }
  /* HVR-20260917-T2 (Rene: "bei .WHY darf die Einblendung der Woerter
     nicht hinter der Headline zu sehen sein, sondern muss davor schon
     ausgeblendet oder gecuttet werden"). Root Cause: .why__stage/
     .why__leftclip/.why__open/.why__left nutzen alle das hartkodierte
     Desktop-Randmass 14.25% (nie fuer Mobile angepasst - identisches
     Muster wie .ab-media/.pf-brands/.pf-folio/.what__head oben), waehrend
     die Seiten-Headline selbst laengst auf den neuen kleinen T1-Rand
     (--content-inset) umgestellt ist (main.js anchorX, HVR-20260917-T1).
     Die Wort-Reveal-Stage sass dadurch ~33px weiter rechts als die
     Headline WOLLTE ausgeblendet sein - der Clip-Rand lag hinter statt
     vor der Headline-Kante, Woerter blieben dort sichtbar. Beide auf
     denselben Rand gebracht. */
  .why__stage { clip-path: inset(0 0 0 var(--content-inset)) !important; }
  .why__leftclip { clip-path: inset(0 var(--content-inset) 0 var(--content-inset)) !important; }
  .why__open, .why__left { left: var(--content-inset) !important; }
  /* HVR-20260917-T2-WHY-v2 (AD-Fund nach Nachmessung): der Fix oben loeste
     nur die HORIZONTALE Ueberdeckung (Begriffs-Spalte lag hinter der
     Seiten-Headline "Portfolio"). Die vom Art Director gemessene
     Ueberlappung ist eine ANDERE, VERTIKALE Kollision: .why__sticky
     ("TO MAKE IT WORK, YOU NEED") sitzt mobil bei top:12% (Rene-Brief
     "sticky Satz oben"), aber .why__terms durchlaeuft weiterhin die
     GESAMTE Buehnenhoehe. Ein CSS-Fix (clip-path, ::before-Abdeckung mit
     z-index) wurde live geprueft und verworfen: .why__word rendert trotz
     hoeherem z-index eines blickdichten Deckelements IMMER darueber
     (per Screenshot verifiziert, auch mit z-index:999 auf dem Deckel -
     vermutlich weil .why__word ueber background-clip:text + der pro-Wort
     GSAP-Transform-Skalierung einen eigenen Compositing-Layer bekommt, der
     die normale z-index-Kaskade umgeht). Der tragfaehige Fix sitzt daher
     in JS statt CSS - siehe js/main.js:1806 focusEmphasis(): Woerter, deren
     Mittelpunkt in die reservierte Headline-Zone faellt, werden dort hart
     auf opacity 0 gezogen, unabhaengig von der sonst absichtlich
     bestehenbleibenden 0.32-Mindestopazitaet ("Spur bleibt sichtbar"). */
  /* HVR-20260917-T2 (Rene: "Anzeige der Logos darf auch Anzahl in Breite
     und Hoehe geaendert werden. Zum Beispiel 4 horizontal und 3
     vertikal"). Desktop-Basisregel nutzt 6 Spalten (Z.1590) - auf 335px
     Mobile-Breite waeren das ~50px breite Kacheln, unbrauchbar klein fuer
     Logos. 12 Kacheln insgesamt (im Markup gezaehlt) passen exakt in
     4x3 statt 6x2. .pf-folio (Portfolio-Bildergalerie) bleibt unangetastet
     - die nutzt bereits 3 Flex-Spalten unabhaengig von dieser Regel und
     profitiert bereits von der oben korrigierten margin/width. */
  .pf-brands__grid { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; }
  /* AD-Checkpoint Batch 2 (minor): die Luecke zwischen Foto-Unterkante (58%)
     und Textpanel (62%) hatte keine eigene Linie und wirkte durch die
     identische Dunkelflaeche zufaellig statt beabsichtigt. */
  /* HVR-20260917-T2-Text (Rene: "Text abgeschnitten... braucht Raum und
     Platz, sodass an der Seite auf keine Scrollbar auftaucht"). Root Cause:
     .ab-frame (das Foto) fuellt bereits 100% der .ab-media-Hoehe - die
     58%/62%-Werte bestimmten NICHT die Fotogroesse, sondern nur, wie viel
     vom UNTEREN Fotobereich das dunkle Textpanel ueberdeckt. Der bisherige
     AD-Checkpoint (2026-09-15) loeste "Inhalt hoeher als Panel" mit einem
     eigenen Scroll-Container - genau das verbietet Rene jetzt explizit.
     Fix: Panel beginnt frueher (34% statt 62%) und bekommt dadurch ~72%
     statt 36% der Buehnenhoehe (ca. 450px statt 257px bei 812px Viewport,
     Foto bleibt im oberen Drittel weiterhin vollstaendig sichtbar);
     zusaetzlich Zeilenabstand/Absatzabstand/Signaturgroesse gestrafft, um
     den Rest der Luecke zu schliessen - kein Scroll-Container mehr. */
  /* HVR-20260918-lines-mobile-followup (Rene: "entferne alle horizontalen
     Linien"): dieser Divider zwischen Foto und Textpanel war die tatsaechliche
     Ursache der von Rene gemeldeten Linie waehrend des Vorhang-Lifts (sie
     stand fix bei 34% von .ab-media, unabhaengig vom Curtain-Transform -
     die box-shadow/will-change-Versuche am Curtain zielten auf die falsche
     Ursache). Beim ersten Linien-Sweep uebersehen, da .ab-media::after kein
     Name mit "line"/"hline" traegt. Ersatzlos entfernt. */
  .ab-text {
    left: 0; right: 0; width: auto;
    top: 36%;
    max-height: 62%;
    overflow: visible;
    padding: 3.4vw 6vw;
    background: rgba(32, 30, 30, 0.92);
  }
  .ab-text .ab-mission { line-height: 1.28; }
  .ab-text .ab-mission + .ab-mission { margin-top: 0.7em; }
  .ab-text .ab-sign-name { margin-top: 0.8em; }
  .ab-text .ab-sign { width: 32px; margin-top: 0.4em; }
}

/* --- Brand-Kacheln (Hall of Fame) --- */
.pf-brands {
  position: relative; /* Anker für die Label-Linie */
  margin-left: 14.25%;
  width: 72%;
}
/* Horizontale Linie an der Oberkante des Brands-Labels — Pendant zur
   Galerie-Label-Linie; links endet sie an der Rasterlinie (Rene 2026-07-30) */
.pf-brands__topline {
  position: absolute;
  top: 0;
  left: 0;
  width: calc(var(--pg-w, 100vw) - var(--pg-v2, 14.25vw)); /* HVR-20260915-05: bis zum Seitenrand */
  height: var(--line-w);
  background: var(--line);
  opacity: 0.35;
}
/* Section-Labels als Signal-Rot-Rechteck wie die AWARDS-Kachel,
   Schrift in Seiten-Hintergrundfarbe, +50% Größe (Rene 2026-07-29) */
.pf-brands__label,
.pf-folio__label {
  display: inline-block;
  font-family: var(--font-display);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: clamp(1.05rem, 1.275vw, 1.575rem);
  background: var(--signal-red);
  color: var(--bg);
  padding: 0.45em 0.9em;
  margin: 0 0 1.6vw;
}
.pf-brands__grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: clamp(8px, 0.9vw, 16px);
}
.pf-tile {
  background: var(--tile-gray);
  aspect-ratio: 1 / 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16%;
  cursor: var(--cursor-hand);
  transition: background-color 0.35s ease;
}
.pf-tile img {
  max-width: 100%;
  max-height: 52%;
  object-fit: contain;
  filter: brightness(0);            /* Logos einheitlich schwarz */
  transition: filter 0.25s ease, transform 0.25s ease;
}
.pf-tile--cta span {
  font-family: var(--font-display);
  font-weight: 700;
  text-transform: uppercase;
  font-size: clamp(0.7rem, 0.95vw, 1.2rem);
  line-height: 1.2;
  color: #17140f;
  transition: color 0.25s ease;
}
.pf-tile.is-on { background: var(--brand-red); transition: background-color 0.16s ease-out; }
/* Hover: Farbwechsel + 10%-Logo-Zoom (Rene 2026-07-28) */
.pf-tile.is-on img { filter: brightness(0) invert(1); transform: scale(1.1); }
.pf-tile.is-on span { color: #fff; }

/* --- Portfolio-Mosaik (Hall of Fame) --- */
.pf-folio {
  position: relative; /* Anker für die mitlaufende Label-Linie */
  margin: 12vh 0 0 14.25%;
  width: 72%;
}
/* Mitlaufende Horizontallinie an der Oberkante des Galerie-Labels —
   volle Seitenbreite (bricht aus der 72%-Spalte aus), Pendant zur
   h3-Linie an der Brands-Überschrift (Rene 2026-07-29d) */
.pf-folio__topline {
  position: absolute;
  top: 0;
  /* linkes Limit: vertikale Rasterlinie bei 14.25% (Rene 2026-07-30) */
  left: 0;
  width: calc(var(--pg-w, 100vw) - var(--pg-v2, 14.25vw)); /* HVR-20260915-05: bis zum Seitenrand */
  height: var(--line-w);
  background: var(--line);
  opacity: 0.35;
}
/* Hover-Zoom entfernt (Rene 2026-07-08e: „zu extrem") — statisches Raster.
   Masonry-Umbau (Rene 2026-07-28): Bilder behalten ihren ORIGINAL-Crop
   (natürliche Ratio, kein object-fit-Beschnitt) — 3 Flex-Spalten,
   Spalten trailen beim Scrollen (Lag-Effekt, JS) */
.pf-folio__grid {
  display: flex;
  align-items: flex-start;
  gap: clamp(8px, 0.9vw, 16px);
}
.pf-folio__col {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: clamp(8px, 0.9vw, 16px);
}
.pf-item {
  overflow: hidden;
  position: relative;
}
.pf-item img,
.pf-item video {
  width: 100%;
  height: auto;
  display: block;
}
.pf-item img { cursor: var(--cursor-hand); } /* Klick öffnet die Lightbox */

/* --- Portfolio-Lightbox (Rene 2026-07-29) --- */
.pf-lightbox {
  position: absolute;
  inset: 0;
  z-index: 30;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(23, 20, 15, 0.94);
}
.pf-lightbox[hidden] { display: none; }
.pf-lightbox__img {
  max-width: 78%;
  max-height: 84%;
  object-fit: contain;
  display: block;
}
.pf-lightbox__close,
.pf-lightbox__nav {
  position: absolute;
  width: 44px;
  height: 44px;
  background: transparent;
  border: 0;
  padding: 0;
  cursor: var(--cursor-hand);
  color: #ffffff;
  transition: color 0.2s ease;
  z-index: 1;
}
.pf-lightbox__close:hover,
.pf-lightbox__nav:hover,
.pf-lightbox__close:focus-visible,
.pf-lightbox__nav:focus-visible { color: var(--signal-red); }
.pf-lightbox__close { top: clamp(16px, 2vw, 32px); right: clamp(16px, 2vw, 32px); }
.pf-lightbox__close::before,
.pf-lightbox__close::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  width: 26px;
  height: 2px;
  background: currentColor;
}
.pf-lightbox__close::before { transform: translate(-50%, -50%) rotate(45deg); }
.pf-lightbox__close::after  { transform: translate(-50%, -50%) rotate(-45deg); }
.pf-lightbox__nav { top: 50%; transform: translateY(-50%); }
.pf-lightbox__nav--prev { left: clamp(16px, 2vw, 32px); }
.pf-lightbox__nav--next { right: clamp(16px, 2vw, 32px); }
.pf-lightbox__nav::before {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  width: 14px;
  height: 14px;
  border-left: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
}
.pf-lightbox__nav--prev::before { transform: translate(-30%, -50%) rotate(45deg); }
.pf-lightbox__nav--next::before { transform: translate(-70%, -50%) rotate(225deg); }
/* AWARDS: Markenrot, Wort füllt die Kachel zentriert (~90% Breite);
   Hover startet den Cursor-Orbit (eigene Ebene, kein Panel) */
.pf-item--awards {
  background: var(--brand-red);
  aspect-ratio: 10 / 3; /* flache Kachel wie im Raster-Layout (Masonry hat keine Zeilenhöhe mehr) */
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: visible;
  container-type: inline-size;
  cursor: var(--cursor-hand);
  transition: background-color 0.18s ease-out;
}
.pf-item--awards:hover { background: #201e1e; } /* HVR-20260912-12: dunkle Flaeche im Token statt Schwarz */
.pf-awards__word {
  font-family: var(--font-display);
  font-weight: 700;
  text-transform: uppercase;
  color: #fff;
  font-size: 20cqw; /* „AWARDS" ≈ 90% der Kachelbreite, zentriert */
  line-height: 1;
  letter-spacing: 0.02em;
  transition: color 0.18s ease-out;
}
.pf-item--awards:hover .pf-awards__word { color: var(--signal-red); }
/* AWARDS-Orbit: EIGENE EBENE direkt unter .hero__page (kein Panel) —
   sitzt zentriert am Cursor (xPercent/yPercent −50, x/y via quickTo),
   folgt der Maus über der AWARDS-Kachel und ist nie klickbar. Arme
   drehen um die Bühnenmitte, Frames kontern (Logos bleiben aufrecht);
   alle Transformationen setzt GSAP — CSS liefert nur Grundlayout. */
.pf-orbit {
  --stage: min(46vh, 26vw);
  --frame: calc(var(--stage) * 0.24);
  position: absolute;
  left: 0;
  top: 0;
  width: var(--stage);
  height: var(--stage);
  z-index: 5;
  pointer-events: none;
  visibility: hidden; /* GSAP autoAlpha übernimmt */
}
.pf-orbit__arm {
  position: absolute;
  inset: 0;
  will-change: transform;
}
.pf-orbit__frame {
  position: absolute;
  left: 50%;
  top: 50%;
  width: var(--frame);
  height: var(--frame);
  padding: calc(var(--frame) * 0.1);
  background: #fff;
  opacity: 0;
  will-change: transform, top;
}
.pf-orbit__frame img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}
@media (max-width: 900px) { /* HVR-Breakpoint-Konsolidierung 2026-09-15 (war 820) */
  .pf-orbit { --stage: min(38vh, 62vw); }
}

/* ============ HOW IT WORKS — Editorial-Akkordeon ============
   Volle-Breite-Zeilen auf dem Seitenraster (keine Cards): Nummer +
   Titel + Teaser + Semantik-Dots + Plus. Panel-Reveal über
   grid-template-rows mit der Referenz-Bezier cubic-bezier(.65,0,.45,1)
   — dieselbe Kurve, die die Dropbox-Motion-Seite auf ihren
   Konstruktionslinien zeichnet. Dots tragen die exakten Brieffarben
   (Ink-Ring liefert die 3:1-Kante auf Hellgrau); Icon-Striche nutzen
   kontrastfeste Töne, Labels laufen in Ink — Farbe trägt nie allein. */
.hiw {
  /* Gemeinsame Einrück-Maße: Nummernspalte + Spaltenabstand — Header-Grid
     UND Panel-Inhalt nutzen DIESELBEN Variablen (Alignment-Fix, Rene #1) */
  --hiw-col: clamp(4.2rem, 5.4vw, 6.6rem); /* Platz für die Geisternummern */
  --hiw-gap: clamp(1rem, 1.5vw, 1.6rem);
  position: relative; /* Anker für die Phasen-Navigation in der Randspalte */
  margin: 9vh 0 0 14.25%;
  width: 69.25%; /* PNG-Vorlage: Content-Feld endet bei 83.5% */
  color: #201e1e;
}
/* Kopfzeile der Sektion: Zellenlinie über Intro-Block + Navigation */
.hiw-head {
  position: relative;
  /* Abstand unter der Legende als PADDING (nicht Margin der Legende):
     Margins fallen aus dem Kasten heraus → die Nav (bottom:0) endete
     ÜBER der Zelllinie. Mit Padding reicht die rote Box exakt bis zur
     unteren Linie = geschlossene gefüllte Fläche (Rene 2026-07-25l). */
  padding: clamp(2rem, 3.2vw, 3.6rem) 0 clamp(3rem, 4.5vw, 5.5rem) var(--hiw-inset);
}
.hiw-head::before {
  content: '';
  position: absolute;
  top: 0;
  left: calc(var(--pg-v1, 3.75%) - var(--pg-v2, 14.25%)); right: calc(var(--pg-v3, 83.5%) - var(--pg-w, 100%)); /* HVR-20260915-05 (Rene): von der Kachelkante bis zum Seitenrand */
  height: var(--line-w);
  background: var(--line); /* HVR-20260914-31: volle Farbstaerke */
}
/* Statische rechte Rahmenlinie (Rene #3): fängt die horizontalen
   Akkordeon-Linien bei 69.5% ab, läuft komplett durch den Frame */
.hiw-vline {
  display: none;
  position: absolute;
  left: 83.5%; /* PNG-Vorlage: rechte Rasterlinie */
  top: 0;
  transform: scaleY(0); /* unsichtbar bis zur Einzeichnen-Animation (kein Open-Flackern) */
  transform-origin: top center;
  width: var(--line-w);
  height: 100%;
  background: #f31a27;
  opacity: 1; /* AD-Checkpoint T3 / HVR-20260914-31: volle Farbstaerke (war 0.35) */
}
.hero__page[data-page="how-it-works"] .hiw-vline { display: block; }
/* Die generische dritte Horizontale (phLines[2], sonst von anderen Seiten
   genutzt) hat auf How-it-works seit dem Kartenstapel-Umbau keine Funktion
   mehr — sie stand nur noch als starre, sinnlose Linie im Leerraum
   zwischen Punchline und Kopfbereich (Rene 2026-07-27i: „hat hier keine
   Funktion und stört nur"). Nur für diese Seite ausgeblendet — auf
   Portfolio/Advisory bleibt sie unverändert aktiv. */
.hero__page[data-page="how-it-works"] .hero__pline--h3 { display: none; }
/* Workshop-Linienrollen (Rene 2026-08-18o): Cap- und Baseline-Linie
   verschwinden MIT der Headline nach oben; die h3-Linie (unter der
   Kommentarblase) ist die WEITERGENUTZTE — sie stoppt auf 36% und
   wird die obere Board-Linie, die zweite kommt von unten auf 53.5% */
/* Punchline (Rene-Referenzbild): sitzt absolut IM ERSTEN VIEWPORT unter
   der Page-Headline (Wrapper beginnt nach dem 100vh-Stage-Spacer →
   negatives top rechnet zurück in Viewport 1) und scrollt danach mit dem
   Content mit. Buchstaben starten als Outline (text-stroke) und füllen
   sich in der Scroll-Füllphase schrittweise rot. */
.page-content--how-it-works {
  position: relative;
  /* EIN konstanter Abstand zwischen Rasterlinie und Text — überall
     (Rene: „Texte kleben an der linken Linie … konstant durchziehen");
     das display regelt das Sichtbarkeits-Gate (flow-root, s. dort) */
  --hiw-inset: clamp(1.6rem, 2.8vw, 3.4rem);
}
.hiw-punch {
  position: absolute;
  top: -53vh; /* = 47% des ersten Viewports */
  left: calc(14.25% + var(--hiw-inset));
  width: calc(69.25% - var(--hiw-inset));
  margin: 0;
  /* unsichtbar bis zum Entrance nach der Open-Transition (kein Overlay-Chaos) */
  opacity: 0;
  visibility: hidden;
  font-family: var(--font-display);
  font-weight: 700;
  /* PNG-Proportion (~2.85% der Breite); Zeilenumbrüche halten überall */
  font-size: clamp(1.8rem, 2.85vw, 3.5rem);
  line-height: 1.06;
  letter-spacing: 0.002em;
  color: var(--brand-red);
}
.hiw-punch__line { display: block; }
.hiw-punch__c {
  color: transparent;
  -webkit-text-stroke: 0.026em var(--brand-red);
  transition: color 0.18s linear;
}
.hiw-punch__c.is-fill { color: var(--brand-red); }
.hiw-head__intro {
  font-size: clamp(0.9rem, 1.45vw, 1.75rem); /* PNG-Proportion */
  line-height: 1.55;
  max-width: 52ch;
  margin: 0 0 1.1em;
  color: rgba(32, 30, 30, 0.85);
}
.hiw-head__intro--hint { color: rgba(32, 30, 30, 0.6); margin-bottom: 1.9em; }
/* Legende als getönte Icon-Pills (Rene 2026-07-24c: „visuell
   ansprechender und deutlicher") — gleiche Farb-DNA wie die Rollen-Chips */
.hiw-legend {
  list-style: none;
  display: grid; /* PNG: 2×2-Anordnung der Pills */
  grid-template-columns: repeat(2, max-content);
  gap: 0.8em 0.95em;
  margin: 0; /* Abstand zur Zelllinie liefert das Head-Padding (s. oben) */
  padding: 0;
  font-family: var(--font-display);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  font-size: clamp(0.72rem, 1.1vw, 1.3rem); /* PNG-Proportion */
}
/* Neutral, Buchstaben-Badge statt Farb-Icon (Rene 2026-07-27k, Figma-
   Vorlage „Frame 73") — klickbar, springt zur Kategorie im offenen Stepper */
.hiw-legend__item {
  display: inline-flex;
  align-items: center;
  gap: 0.65em;
  padding: 0.4em 1.2em 0.4em 0.4em;
  border-radius: 999px;
  background: transparent;
  border: 1.5px solid var(--signal-red);
  color: #201e1e;
  cursor: var(--cursor-hand);
  transition: border-color 0.25s ease, transform 0.25s ease;
}
.hiw-legend__item:hover, .hiw-legend__item:focus-visible { border-color: var(--brand-red); transform: translateY(-1px); }
.hiw-legend__item:focus-visible { outline: 2px solid var(--brand-red); outline-offset: 2px; }
.hiw-legend__badge {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  flex: none;
  background: var(--brand-red);
  color: #fff;
  font-size: 0.82em;
}

/* --- ÜBERLAPPENDER FARBKARTEN-STAPEL (Direction 4 „Overlapping Color
   Stack", Rene 2026-07-26 final aus 4 Vorschlägen gewählt): Dropbox-
   /color-Seiten-Prinzip (aktive Karte groß, Nachbarn schmal daneben)
   auf die 6 Phasen übertragen — Havior-Rot statt Regenbogen. Choreo-
   Prinzip: der Inhalt der SCHLIESSENDEN Karte blendet sofort & schnell
   aus (bevor die Karte schmaler wird — kein Textumbruch-Geflacker),
   der Inhalt der ÖFFNENDEN Karte blendet erst ein, wenn die Breite
   größtenteils steht (Exit sofort/schnell, Enter bedacht/verzögert —
   dieselbe Asymmetrie wie überall sonst auf der Seite). --- */
.hiw-stack {
  display: flex;
  align-items: stretch;
  gap: 3px;
  /* Kacheln größer, kein internes Scrollen mehr nötig (Rene 2026-07-27:
     „genug Platz nach unten" — Maß an der längsten echten Phase (Retainer)
     gemessen: 504px @1920 / 453px @1280 Inhalt + Sicherheitspuffer).
     Rene 2026-07-27m: Phase 01 (4 Bullet-Pillen) lief unten tatsächlich
     6.7px in den overflow:hidden-Rand hinein und wurde abgeschnitten —
     +50px Bodenhöhe, gemessen bis der untere Abstand exakt den oberen
     Abstand (Kartenkante zu "CORE PHASE") erreicht/übertrifft. */
  min-height: clamp(535px, 32vw, 660px);
  position: relative;
  margin: 0;
  /* Bündig innerhalb der .hiw-Spalte (Rene 2026-07-27g: die 83.5%-Linie
     bleibt die rechte GRENZE der Karten — nicht die Seitenkante. Die
     Linien selbst laufen weiterhin full-bleed bis zum Rahmen (wie beim
     Kopf), aber der Kartenstapel als INHALT hält sich an dieselbe Spalte
     wie Kopf/Legende, exakt wie „die zwei mittleren vertikalen Linien"). */
  width: 100%;
}
/* Linien laufen nie im Leeren: dieselbe Full-Bleed-Grundlinie wie über
   dem Kopf (identische Prozentwerte, da .hiw-stack jetzt wieder exakt
   die .hiw-Spaltenbreite hat) — jetzt zusätzlich oben UND unten am Stapel */
.hiw-stack::before,
.hiw-stack::after {
  content: '';
  position: absolute;
  left: calc(var(--pg-v1, 3.75%) - var(--pg-v2, 14.25%)); right: calc(var(--pg-v3, 83.5%) - var(--pg-w, 100%)); /* HVR-20260915-05 */
  height: var(--line-w);
  background: var(--line); /* HVR-20260914-31: volle Farbstaerke */
}
.hiw-stack::before { top: 0; }
.hiw-stack::after { bottom: 0; }

/* ============================================================
   HIW TON-STAPEL (K7 live, Rene 2026-08-19h): ersetzt den
   Overlapping Color Stack. Linienbox: ::before/::after haengen
   an den MODULKANTEN und bewegen sich beim Oeffnen/Schliessen
   automatisch mit (dynamische Linien). Dauer NUR unten in der
   Karte; Kopfzeile 01-03 ohne Preview, 04-06 nur Optional-Tag.
   ============================================================ */
.hiw7 {
  --off: #ededed;
  --fs-band: clamp(1.6rem, 2.6vw, 3rem);
  --fs-copy: clamp(0.9rem, 1vw, 1.15rem);
  --fs-eyebrow: clamp(0.75rem, 0.9vw, 1rem);
  --overlap: 26px;
  --radius-top: 18px;
  position: relative;
  width: 100%;
}
.hiw7::before,
.hiw7::after {
  content: '';
  position: absolute;
  left: calc(var(--pg-v1, 3.75%) - var(--pg-v2, 14.25%)); right: calc(var(--pg-v3, 83.5%) - var(--pg-w, 100%)); /* HVR-20260915-05 */
  height: var(--line-w);
  background: var(--line); /* HVR-20260914-31: volle Farbstaerke */
}
.hiw7::before { top: 0; }
.hiw7::after { bottom: 0; }
.hiw7 .eyebrow {
    font-family: var(--font-display);
    font-size: var(--fs-eyebrow);
    letter-spacing: 0.14em;
    text-transform: uppercase;
    font-weight: 600;
  }
.hiw7 .row__trigger:focus-visible { outline-offset: -3px; }
.hiw7 .row--red .row__trigger:focus-visible, .hiw7 .row--red .tab:focus-visible { outline-color: var(--off); }
.hiw7 .stack { padding-bottom: 2vh; }
.hiw7 .row {
    position: relative;
    background: var(--tone);
    border-radius: var(--radius-top) var(--radius-top) 0 0;
    color: var(--off);
  }
.hiw7 .row + .row { margin-top: calc(-1 * var(--overlap)); }
.hiw7 .row__trigger {
    display: grid;
    grid-template-columns: 4.5rem 1fr auto auto;
    align-items: center;
    gap: clamp(1rem, 2vw, 2rem);
    width: 100%;
    padding: clamp(0.55rem, 0.8vw, 0.8rem) clamp(1.4rem, 2.4vw, 2.6rem);
    background: none; border: 0; color: inherit; text-align: left;
    font: inherit; cursor: var(--cursor-hand);
  }
.hiw7 .row__no {
    font-family: var(--font-display); font-size: var(--fs-band);
    font-weight: 700; line-height: 1; color: rgba(237, 237, 237, 0.5);
  }
.hiw7 .row__title {
    font-family: var(--font-display); font-size: var(--fs-band);
    font-weight: 700; line-height: 1.05; text-transform: uppercase;
    letter-spacing: 0.01em;
  }
.hiw7 .row__meta {
    display: flex; align-items: center; gap: clamp(0.9rem, 1.4vw, 1.6rem);
  }
.hiw7 .row__opt {
    font-family: var(--font-display); font-size: var(--fs-eyebrow);
    letter-spacing: 0.14em; text-transform: uppercase; font-weight: 600;
    color: rgba(237, 237, 237, 0.45); white-space: nowrap;
  }
.hiw7 .row__arrow { display: inline-flex; will-change: transform; }
.hiw7 .row__arrow svg { display: block; }
.hiw7 .row__panel { height: 0; overflow: hidden; }
.hiw7 .row__inner {
    padding: 1.4rem clamp(1.4rem, 2.4vw, 2.6rem) calc(2.2rem + var(--overlap));
    display: grid;
    grid-template-columns: minmax(0, 38%) minmax(0, 1fr);
    column-gap: clamp(1.4rem, 2.6vw, 3rem);
    align-items: start;
    will-change: transform;
  }
.hiw7 .row__eyebrow { display: block; color: rgba(237, 237, 237, 0.7); margin-bottom: 1em; }
.hiw7 .row__teaser {
    font-family: var(--font-display); font-size: var(--fs-copy);
    font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em;
    line-height: 1.35; max-width: 52ch; margin-bottom: 0.9em; font-size: calc(var(--fs-copy) * 1.12);
  }
.hiw7 .row__intro {
    font-size: var(--fs-copy); line-height: 1.65;
    color: rgba(237, 237, 237, 0.9); max-width: 58ch;
  }
.hiw7 .tabs { display: flex; align-items: center; gap: 0.8rem; }
.hiw7 .tab__uhr {
  position: absolute;
  inset: -4px;
  width: calc(100% + 8px);
  height: calc(100% + 8px);
  pointer-events: none;
  opacity: 0;
  transform: rotate(-90deg); /* Start 12 Uhr, laeuft im Uhrzeigersinn */
}
.hiw7 .tab__uhr circle { fill: none; stroke-width: 2; }
.hiw7 .tab__uhr .uhr-track { stroke: rgba(237, 237, 237, 0.3); } /* Uhr ab Sekunde 1 erkennbar */
.hiw7 .tab__uhr .uhr-lauf {
  stroke: currentColor;
  stroke-dasharray: 100 100;
  stroke-dashoffset: 100;
}
.hiw7 .tab[aria-pressed="true"] .tab__uhr { opacity: 1; }
.hiw7 .tab {
  position: relative;
    width: 2.5rem; height: 2.5rem;
    border-radius: 50%;
    border: 1px solid rgba(237, 237, 237, 0.55);
    background: transparent;
    color: var(--off);
    font-family: var(--font-display);
    font-size: 0.92rem; font-weight: 700;
    cursor: var(--cursor-hand);
    display: inline-flex; align-items: center; justify-content: center;
    transition: border-color 0.2s ease;
  }
.hiw7 .tab:hover { border-color: var(--off); }
.hiw7 .tab[aria-pressed="true"] {
    background: rgba(237, 237, 237, 0.6); /* 60% — Ring-Uhr klar erkennbar (Rene 2026-08-19k) */
    border-color: var(--off);
    color: var(--tone);
  }
.hiw7 .tabs__labelcut { overflow: hidden; margin-left: 0.4rem; }
.hiw7 .tabs__label {
    display: block;
    color: rgba(237, 237, 237, 0.75);
    will-change: transform;
  }
.hiw7 .pillswrap { margin-top: clamp(0.9rem, 2vh, 1.4rem); min-height: 13.6rem; }
.hiw7 .pills {
  margin: 0;
  padding: 0;
    list-style: none;
    display: none;
    flex-wrap: wrap;
    gap: 0.7rem 0.75rem;
  }
.hiw7 .pills[data-active] { display: flex; }
.hiw7 .pills li { overflow: hidden; }
.hiw7 .pill {
    display: inline-flex;
    border: 1px solid rgba(237, 237, 237, 0.55);
    border-radius: 999px;
    padding: 0.68em 1.25em;
    font-size: calc(var(--fs-copy) * 0.96);
    line-height: 1.35;
    color: var(--off);
    white-space: nowrap;
    will-change: transform;
  }
.hiw7 .row__foot {
    grid-column: 1 / -1;
    display: flex; align-items: center; gap: 1rem;
    margin-top: clamp(0.5rem, 1.2vh, 0.9rem);
  }
.hiw7 .foot__rule {
    flex: 1; height: 1px;
    background: #ededed; /* HVR-20260914-31: volle Farbstaerke */
    transform-origin: left center;
    will-change: transform;
  }
.hiw7 .foot__label { color: var(--off); white-space: nowrap; }
@media (hover: hover) {
  .hiw7 .row:not([data-open]) { transition: filter 0.3s ease; }
  .hiw7 .row:not([data-open]):hover { filter: brightness(1.08); }
}
@media (max-width: 1200px) {
  .hiw7 .pill { white-space: normal; }
}
@media (max-width: 900px) {
  .hiw7 .row__trigger { grid-template-columns: 2.6rem 1fr auto; }
  .hiw7 .row__opt { display: none; }
  .hiw7 .row__meta { gap: 0.8rem; }
  .hiw7 .row__inner { grid-template-columns: 1fr; row-gap: 0.9rem; }
  .hiw7 .pillswrap { min-height: 0; }
  .hiw7 .pill { white-space: normal; }
}
@media (prefers-reduced-motion: reduce) {
  .hiw7 .row:not([data-open]):hover { transform: none; }
}

.hiw-card {
  flex: 0 1 clamp(44px, 3.4vw, 58px);
  min-width: 0;
  overflow: hidden;
  position: relative;
  background: #201e1e;
  color: #fff;
  transition: flex-basis 0.55s cubic-bezier(0.16, 1, 0.3, 1), background-color 0.4s ease;
}
.hiw-card[data-open] { flex: 1 1 640px; background: var(--brand-red); }
/* Optionale Pfade (04–06) im geschlossenen Zustand leicht ausgegraut —
   macht auf einen Blick klar, dass sie NICHT zum Kernpaket 01–03 gehören
   (Rene 2026-07-28). Öffnen-Zustand + Hover gewinnen weiterhin (höhere
   Selektor-Spezifität), bleiben also unverändert markenrot. */
.hiw-card--optional { background: #47443f; }
/* Hover-Affordanz (Rene 2026-07-27h: „damit der Besucher erkennt, dass
   dort Interaktivität zur Verfügung steht") — Farbe wandert Richtung
   Markenrot (Vorschau auf den Öffnen-Zustand) UND die Karte wird spürbar
   breiter (Peek), bleibt aber klar unter der vollen Öffnen-Breite */
.hiw-card:not([data-open]):hover { background: #4a1f1f; flex-basis: clamp(72px, 5.6vw, 100px); }
.hiw-card:not([data-open]):hover .hiw-card__no { opacity: 0.95; }
.hiw-card:not([data-open]):hover .hiw-card__spine { opacity: 1; }
/* Lücke vor den optionalen Karten — trennt die Gruppen ohne die
   durchgehende Stapel-Optik zu brechen */
.hiw-stack__gap { flex: 0 0 clamp(14px, 1.6vw, 22px); }

/* --- Dauer-/Paket-Leiste unter dem Stapel (Rene 2026-07-27k, Figma-
   Vorlage „Frame 73"): spiegelt dieselben clamp()-Werte und dasselbe Gap
   wie .hiw-stack, damit sie automatisch bündig mit den Kacheln bleibt —
   keine Pixel-Messung nötig, der Browser hält beide Zeilen über
   identische Flex-Regeln synchron. --- */
.hiw-statusrow {
  display: flex;
  align-items: stretch;
  gap: 3px;
  margin-top: clamp(8px, 1vw, 14px);
  height: clamp(32px, 2.6vw, 42px);
}
.hiw-status--core {
  flex: 0 1 clamp(44px, 3.4vw, 58px);
  min-width: 0;
  position: relative;
  border: 1px solid transparent;
  border-radius: 999px;
  transition: flex-basis 0.55s cubic-bezier(0.16, 1, 0.3, 1);
}
.hiw-status--core[data-open] { flex: 1 1 640px; border-color: var(--brand-red); }
.hiw-status__label {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: clamp(0.62rem, 0.8vw, 0.8rem);
  color: var(--brand-red);
  opacity: 0;
  white-space: nowrap;
  transition: opacity 0.3s ease 0.15s;
}
.hiw-status--core[data-open] .hiw-status__label,
.hiw-status--opt[data-open] .hiw-status__label { opacity: 1; }
.hiw-status__gap { flex: 0 0 clamp(14px, 1.6vw, 22px); }
/* flex-basis muss explizit sein (nicht 'auto') — verschachtelte Flex-
   Breite kollabiert sonst wegen min-width:0 in den Enkel-Zellen auf
   nahe 0. Wächst nur, wenn eine ihrer Zellen offen ist (:has). */
.hiw-status__optgroup {
  flex: 0 1 calc(3 * clamp(44px, 3.4vw, 58px) + 2 * 3px);
  display: flex;
  gap: 3px;
  position: relative;
  border: 1px solid rgba(32, 30, 30, 0.32);
  border-radius: 999px;
  overflow: hidden;
  transition: flex-basis 0.55s cubic-bezier(0.16, 1, 0.3, 1);
}
.hiw-status__optgroup:has(.hiw-status--opt[data-open]) { flex: 1 1 640px; border-color: #201e1e; }
.hiw-status--opt {
  flex: 0 1 clamp(44px, 3.4vw, 58px);
  min-width: 0;
  position: relative;
  transition: flex-basis 0.55s cubic-bezier(0.16, 1, 0.3, 1);
}
.hiw-status--opt[data-open] { flex: 1 1 640px; }
.hiw-status--opt .hiw-status__label { color: #201e1e; }
.hiw-status__optlabel {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: clamp(0.62rem, 0.8vw, 0.8rem);
  color: rgba(32, 30, 30, 0.55);
  white-space: nowrap;
  opacity: 1;
  transition: opacity 0.3s ease 0.15s;
}
.hiw-status__optgroup:has(.hiw-status--opt[data-open]) .hiw-status__optlabel { opacity: 0; transition-delay: 0s; }

/* persistenter Trigger (Zahl + Spalten-Titel), immer da — auch bei
   offener Karte fokussierbar, aber ohne den eigenen Stepper-Buttons
   im Weg zu stehen (pointer-events aus, sobald offen) */
.hiw-card__trigger {
  all: unset;
  position: absolute;
  inset: 0;
  cursor: var(--cursor-hand);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: space-between;
  padding: clamp(1.1rem, 1.6vw, 1.5rem) 1rem;
  z-index: 2;
}
.hiw-card__trigger:focus-visible { outline: 2px solid #fff; outline-offset: -4px; }
/* Offen: Zahl rückt auf dieselbe obere Kante wie "CORE PHASE" (Rene
   2026-07-27m — Padding matcht .hiw-card__full exakt) */
.hiw-card[data-open] .hiw-card__trigger { pointer-events: none; padding-top: clamp(1.5rem, 2vw, 2.2rem); }
.hiw-card__no {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.5rem;
  line-height: 1;
  opacity: 0.5;
  flex: none;
  font-variant-numeric: tabular-nums;
  transform: translateY(0);
  transition: opacity 0.3s ease, font-size 0.55s cubic-bezier(0.16, 1, 0.3, 1), transform 0.55s cubic-bezier(0.16, 1, 0.3, 1);
}
/* +6.5px Korrektur: line-height:1 der Zahl hat weniger "Leading" oben
   als die Eyebrow-Zeile — reiner Padding-Match reicht für echten
   Glyphen-Abgleich nicht, Feinkorrektur gemessen via Range-Rect */
/* Rene 2026-07-28: exakte Höhe statt fixer "50% größer" — Ziel ist
   Ober- UND Unterkante deckungsgleich mit "CORE PHASE"+Titel (an Phase
   02 nachgemessen: Zahl war bei 3.15rem/50% noch 5.74px zu hoch,
   Verhältnis Zielhöhe/Ist-Höhe = 0.9043 exakt herunterskaliert,
   Offset proportional mitskaliert: 6.5px × 0.9043 ≈ 5.88px). */
.hiw-card[data-open] .hiw-card__no { opacity: 1; font-size: 2.849rem; transform: translateY(5.88px); }
.hiw-card__spine {
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  font-family: var(--font-display);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  font-size: 1.23rem;
  white-space: nowrap;
  opacity: 0.85;
  transition: opacity 0.18s ease;
}
.hiw-card[data-open] .hiw-card__spine { opacity: 0; transition: opacity 0.16s ease; }

/* voller Inhalt: blendet erst ein, wenn die Breite größtenteils steht
   (delay ≈ 0.32s von 0.55s Breiten-Dauer ≈ 58%) */
.hiw-card__full {
  position: absolute;
  inset: 0;
  /* Links reserviert breiter als der Trigger-Zahl (Bugfix: die
     Geisternummer bleibt sichtbar/vergrößert, wenn die Karte offen ist —
     eigene Spalte statt Überlappung mit Eyebrow/Titel, gemessen an der
     tatsächlichen Zahlenbreite bei 1280–1920px) */
  padding: clamp(1.5rem, 2vw, 2.2rem) clamp(1.6rem, 2.6vw, 2.6rem) clamp(1.5rem, 2vw, 2.2rem) clamp(4.2rem, 4.5vw, 5.2rem);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.22s ease; /* schließen: schnell, sofort */
}
.hiw-card[data-open] .hiw-card__full {
  opacity: 1;
  pointer-events: auto;
  transition: opacity 0.4s ease 0.32s; /* öffnen: verzögert, ruhig */
}
.hiw-card__eyebrow {
  display: block;
  font-family: var(--font-display);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-size: 0.68rem;
  color: rgba(255, 255, 255, 0.7);
  margin: 0 0 0.5em;
}
.hiw-card__title {
  display: block;
  font-family: var(--font-display);
  font-weight: 700;
  text-transform: uppercase;
  font-size: clamp(1.3rem, 2.6vw, 1.9rem);
  line-height: 1.06;
  margin: 0.15em 0 0.4em;
}
.hiw-card__intro {
  font-size: clamp(0.85rem, 1.15vw, 1.05rem);
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.92);
  margin: 0 0 1.5em;
  max-width: 62ch;
}

/* --- PILLAR STEPPER (Dropbox-/framework-Prinzip, an Havior adaptiert):
   Zahlen-Dots + EIN Satz mit allen Rollen der Phase nebeneinander —
   aktive fett & weiß, Rest dünn & halbtransparent. Zeigt nur die
   Kategorien, die für diese Phase wirklich gelten (2 oder 4). --- */
.hiw-stepper__nums { display: flex; gap: 0.6em; margin-bottom: 1.2em; }
.hiw-stepper__num {
  all: unset;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.22);
  color: rgba(255, 255, 255, 0.85);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.8rem;
  text-align: center;
  line-height: 32px;
  cursor: var(--cursor-hand);
  transform-origin: center;
  transition: background-color 0.3s, color 0.3s, transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
.hiw-stepper__num:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
/* Aktiver Kreis 20% größer (Rene 2026-07-27m) — transform statt width/
   height: keine Layout-Reflows, skaliert Kreis + Buchstabe zusammen und
   bleibt dadurch automatisch zentriert */
.hiw-stepper[data-active="need"] .hiw-stepper__num[data-set="need"],
.hiw-stepper[data-active="do"] .hiw-stepper__num[data-set="do"],
.hiw-stepper[data-active="you"] .hiw-stepper__num[data-set="you"],
.hiw-stepper[data-active="get"] .hiw-stepper__num[data-set="get"] { background: #fff; color: var(--brand-red); transform: scale(1.2); }
.hiw-stepper__headline {
  font-family: var(--font-display);
  font-weight: 700;
  text-transform: uppercase;
  font-size: clamp(1rem, 1.75vw, 1.5rem);
  line-height: 1.35;
  margin: 0 0 1.1em;
  max-width: 44ch;
}
.hiw-stepper__headline span {
  all: unset;
  color: rgba(255, 255, 255, 0.4);
  cursor: var(--cursor-hand);
  font: inherit;
  text-transform: inherit;
  transition: color 0.3s;
}
.hiw-stepper[data-active="need"] .hiw-stepper__headline span[data-cat="need"],
.hiw-stepper[data-active="do"] .hiw-stepper__headline span[data-cat="do"],
.hiw-stepper[data-active="you"] .hiw-stepper__headline span[data-cat="you"],
.hiw-stepper[data-active="get"] .hiw-stepper__headline span[data-cat="get"] { color: #fff; }
.hiw-stepper__body > * { display: none; }
.hiw-stepper[data-active="need"] .hiw-stepper__body > [data-cat="need"],
.hiw-stepper[data-active="do"] .hiw-stepper__body > [data-cat="do"],
.hiw-stepper[data-active="you"] .hiw-stepper__body > [data-cat="you"],
.hiw-stepper[data-active="get"] .hiw-stepper__body > [data-cat="get"] { display: block; }
.hiw-stepper__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.5em;
  max-width: 56ch;
}
/* Bullet-Zeilen als Pillen statt reinem Text+Punkt (Rene 2026-07-27k,
   Figma-Vorlage „Frame 73") */
.hiw-stepper__list li {
  position: relative;
  padding: 0.75em 1.2em 0.75em 1.9em;
  font-size: clamp(0.82rem, 0.95vw, 0.95rem);
  font-weight: 700;
  line-height: 1.4;
  color: #fff;
  background: rgba(255, 255, 255, 0.14);
  border: 1.5px solid rgba(255, 255, 255, 0.5);
  border-radius: 999px;
}
.hiw-stepper__list li::before {
  content: '';
  position: absolute;
  left: 0.95em;
  top: 50%;
  transform: translateY(-50%);
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #fff;
}

/* --- F4 Ring-System (Rene 2026-08-19i): "How the phases connect" als
   Wachstumsringe ZWISCHEN Kopf und Ton-Stapel (ersetzt die alte
   Ablauf-Illustration). Kreiszentrum exakt AUF der 14.25%-Linie
   (= linke Kante von .hiw; das SVG clippt, nichts ueberragt die Linie
   nach links), Ringe wachsen scroll-gebunden von links nach rechts.
   Rechts die Content-Spalte: Eyebrow + Statement (Zeile 2 erst beim
   Unlock) + Beat-Panel (wechselt per Slide-Cut: Core-Liste, 04, 05, 06)
   + Legende. Linienbox wie .hiw7: Horizontale von v1 bis Seitenrand
   (left/right-Prozente identisch), zeichnen sich bei der Entrance per
   scaleX von links — nie statisch (Linien-Lebenslauf: Aufbau bei
   Entrance, positionsfest, kein Abgang). --- */
.hiwring {
  --ringsize: min(58vh, 33vw);
  /* HVR-20260912-15 (Rene): Aufzaehlung deutlicher — Zeilen bis zur Term-Statement-
     Rolle (04, Deckel 2.3rem), an die Ringgroesse gekoppelt, damit die neun
     Zeilen (2 Tags, 6 Phasen, Unlock) in jeder Buehnenhoehe zwischen den
     Boxlinien bleiben (gemessen: 1100x900 und 1024x768 liefen mit fester
     2vw-Rolle 40 px ueber die Box); Tags in der Eyebrow-Rolle, halb so gross */
  --fs-statement: clamp(1.1rem, calc(min(58vh, 33vw) / 17.5), 2.3rem);
  --fs-eyebrow: clamp(0.75rem, calc(var(--fs-statement) * 0.5), 1.1rem);
  position: relative;
  height: 100vh; /* gepinnte Buehne, Stage mittig */
  display: flex;
  /* HVR-20260912-14: Headline ueber der Box, Stage darunter, beides mittig im Pin */
  flex-direction: column;
  justify-content: center;
  align-items: stretch;
  /* Atem-Abstand zu Kopf und Ton-Stapel (Rene: Sections muessen atmen) */
  margin: clamp(2rem, 5vh, 4rem) 0 clamp(5rem, 9vh, 8rem);
}
.hiwring .eyebrow {
  font-family: var(--font-display);
  font-size: var(--fs-eyebrow);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 600;
}
/* Reveal-Cut-Atom der Section: overflow-Fenster, Inhalt slidet an der Kante */
.hiwring .rcut { overflow: hidden; display: block; }
/* HVR-20260912-14: Section-Headline in der Kapitel-Headline-Rolle (04), an der Textkante */
.hiwring__hl {
  margin: 0 0 clamp(1rem, 2.4vh, 1.8rem);
  padding-inline: var(--hiw-inset, var(--content-inset));
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(2rem, 4.2vw, 4.6rem);
  line-height: 1.08;
  letter-spacing: -0.035em;
  text-transform: uppercase;
  color: var(--fg);
}
.hiwring .rcut__in { display: block; will-change: transform; }
.hiwring__stage { position: relative; width: 100%; height: var(--ringsize); }
.hiwring__line {
  position: absolute;
  left: calc(var(--pg-v1, 3.75%) - var(--pg-v2, 14.25%)); right: calc(var(--pg-v3, 83.5%) - var(--pg-w, 100%)); /* HVR-20260915-05: von der Kachelkante bis zum Seitenrand */
  height: var(--line-w);
  background: var(--line); /* HVR-20260914-31: volle Farbstaerke */
  transform-origin: left center;
}
.hiwring__line--t { top: 0; }
.hiwring__line--b { bottom: 0; }
.hiwring__svg {
  position: absolute; left: 0; top: 0;
  height: 100%; width: auto; display: block;
}
/* SVG-Typo (viewBox-Einheiten, H = 560): EINE Label-Rolle je Ring,
   nur die Headline mittig im Band (Rene 2026-08-19k) */
.hiwring__svg .rt { font-family: var(--font-display); font-weight: 700; font-size: 27px; letter-spacing: 0.04em; }
.hiwring__svg .rt--core { fill: #ffffff; }
.hiwring__svg .rt--opt { fill: #ededed; }
.hiwring__col {
  position: absolute; right: 0; top: 50%;
  transform: translateY(-50%);
  /* Lese-Kante GEAUTORT auf der 50%-Achse der Contentbreite (AD D4).
     Kollisionsfrei per Konstruktion: --ringsize ist auf 33vw gedeckelt
     = maximal 47.65% der Stage-Breite (33 / 69.25), die Achse bleibt frei */
  width: 50%;
  z-index: 2;
}
.hiwring__st {
  font-family: var(--font-display);
  font-size: var(--fs-statement);
  line-height: 1.28;
  text-transform: uppercase;
  font-weight: 700;
  letter-spacing: -0.005em;
  /* zwischen den Gruppen: gleicher Rhythmus wie der Optional-Abstand */
  margin: 0.6em 0 0;
  color: var(--fg);
}
/* Unlock-Statement (Rene 2026-08-19k): reine Outline-Typo, die Fuellung
   laeuft scroll-gebunden von links nach rechts (clip-path auf der
   deckungsgleichen Fill-Kopie; Markup-Default = gefuellt fuer
   reduced-motion, der Animationsfall setzt den Clip in hiwInit) */
.hiwring__unlock { position: relative; display: inline-block; }
.hiwring__unlock-outline { color: transparent; -webkit-text-stroke: 1.5px var(--fg); }
.hiwring__unlock-fill { position: absolute; inset: 0; color: var(--fg); }
/* Beat-Panel: Core-Zustand definiert die Hoehe (groesster Zustand),
   Optional-Zustaende liegen absolut darueber und wechseln per Cut */
.hiwring__panel { position: relative; margin-top: 0.6em; font-size: var(--fs-statement); } /* HVR-20260912-15: Abstaende in em der Zeilenrolle, skalieren mit der Buehne */
/* Beide Gruppen dauerhaft untereinander (Rene 2026-08-19m: alle 6 Phasen
   sichtbar); die Zeilen reihen sich weiter je Ring-Beat auf */
.hiwring__state--opt { margin-top: 0.6em; }
/* HVR-20260914-03 (Rene): OPTIONAL als Leistungstreppe eine Stufe nach rechts; Stufe = Nummernspalte (01, 1.11em) plus Gap 0.85em der Zeilenrolle, die Nummern der Optional-Zeilen stehen damit auf der Titelkante der Core-Zeilen */
.hiwring__state--opt .hiwring__row .rcut__in { padding-inline-start: 1.96em; }
.hiwring__state--opt > .rcut:first-child { margin-inline-start: calc(1.96 * var(--fs-statement)); }
/* Abstand NICHT am Cut-Inhalt selbst: ein margin am rcut__in macht das
   Cut-Fenster hoeher als den Text, und bei yPercent 110 lugt die
   Glyphen-Oberkante vor dem Slide-In unten heraus (Rene 2026-08-19p) */
/* HVR-20260912-15 (AD-Checkpoint 1): Register-Tag in Primärtinte (Kontrast 13:1,
   Signal Rot bleibt der aktiven Tonleiter), Hairline auf Ink-Breite am Tag selbst
   (inline-block), terminiert also an der eigenen Tinte statt frei in der Fläche */
.hiwring__tag { width: max-content; color: var(--fg); padding-bottom: 0.45em; border-bottom: 1px solid var(--line); /* HVR-20260914-31 */ } /* .rcut__in bleibt block (Cut-Fenster), Breite = Tinte */
.hiwring__state > .rcut:first-child { margin-bottom: 0.6em; font-size: var(--fs-eyebrow); }
.hiwring__row { margin: 0; }
.hiwring__row + .hiwring__row { margin-top: 0.5em; }
.hiwring__row .rcut__in { display: flex; align-items: baseline; gap: 0.85em; }
.hiwring__no {
  font-family: var(--font-display); font-weight: 700;
  font-size: var(--fs-statement);
  font-variant-numeric: tabular-nums;
}
.hiwring__t {
  font-family: var(--font-display); font-weight: 700;
  font-size: var(--fs-statement);
  text-transform: uppercase; color: var(--fg);
}
/* HVR-20260916-M2: Knotenkette ist mobile-only, js/main.js befuellt sie aber
   unbedingt (wie .hiwplan__cal) — auf Desktop bleibt sie verborgen. */
.hiwring__vchain { display: none; }
/* Tablet-Portrait/Mobile (900, HVR-Breakpoint-Konsolidierung 2026-09-15:
   war 820, siehe design-system/03-layout-grid.md): Content oberhalb,
   Ringfeld kleiner, Linien folgen dem 6-94vw-Frame (analog .hiw-stack) */
@media (max-width: 900px) {
  /* 100vh-Pin-Buehne bleibt (Stage mittig, keine Totzone im Pin, AD D2),
     nur intern wird gestapelt: Content oben, Kette darunter. --fs-statement
     bleibt eigens skaliert (HVR-20260912-15): das Panel (.hiwring__col) mit
     den Phasen-Zeilen bleibt unveraendert bestehen und haengt weiter an
     dieser Variable — nur --ringsize/die SVG-Groesse betreffen die Kette nicht mehr. */
  .hiwring { --ringsize: min(42vh, 78vw); margin: clamp(2rem, 5vh, 3rem) 0 clamp(3rem, 6vh, 4.5rem); --fs-statement: clamp(1.1rem, calc(min(42vh, 78vw) / 17.5), 2.3rem); }
  .hiwring__col {
    position: static; transform: none; width: 100%;
    margin-bottom: 1.4rem;
    order: -1; /* Content oberhalb der Kette (F4-Mobile-Ordnung) */
  }
  /* HVR-20260916-M2-Fix (AD-Fund: 817px Dopplung derselben 6 Phasen in Panel
     UND Kette direkt hintereinander): die Einzelzeilen (.hiwring__row, je
     eine pro Phase mit Nummer+Titel) traegt jetzt ausschliesslich die Kette
     darunter — das Panel behaelt nur noch die Kopf-Tags ("Core package"/
     "Optional") und das Unlock-Statement als fuehrenden Text vor der Grafik. */
  .hiwring__row { display: none; }
  .hiwring__state { margin-bottom: 0.6rem; }
  .hiwring__stage { height: auto; display: flex; flex-direction: column; }
  /* HVR-20260916-M3-Fix: right:-6vw war auf die alte 94%-Boxbreite kalibriert
     (schloss die 6%-Luecke exakt zum Viewport-Rand). Nach der M3-Verbreiterung
     (calc(100% - var(--pg-v1) - 1.2rem)) ueberschoss die Linie um bis zu 27px
     (S0/AD-Fund bei 768px) — right:-1.2rem passt exakt zur neuen Boxkante. */
  .hiwring__line { left: -6vw; right: -1.2rem; }
  /* HVR-20260916-M2 (Rene: Ring "vertikal statt horizontal"): die Bogengrafik
     (rechte Kreishaelfte, textPath-Labels) weicht auf Mobile vollstaendig der
     Knotenkette .hiwring__vchain — Desktop-SVG bleibt unveraendert, nur hier
     ausgeblendet. Siehe js/main.js hiwInit() fuer die Sequenz-Weiche. */
  .hiwring__svg { display: none; }
  .hiwring__vchain { display: block; padding: 0.4rem 0 0; }
  .vchain__group { position: relative; padding: 22px 0; }
  .vchain__spine {
    position: absolute; top: 22px; bottom: 22px; left: 21px; width: 2px;
    background: var(--line); transform-origin: 50% 0%;
  }
  .vchain__node {
    position: relative; display: flex; align-items: center; gap: 0.9rem;
    padding: 9px 0;
  }
  .vchain__dot {
    position: relative; z-index: 1; flex: none;
    width: 44px; height: 44px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    background: var(--tone); color: var(--bg);
    font-family: var(--font-mono, monospace); font-weight: 700; font-size: 0.85rem;
  }
  .vchain__label {
    font-family: var(--font-display); font-weight: 700;
    font-size: clamp(0.95rem, 3.4vw, 1.15rem); line-height: 1.2; color: var(--fg);
  }
  .vchain__node--opt .vchain__label { color: var(--muted); }
  .vchain__gate {
    position: relative; display: flex; align-items: center; gap: 0.7rem;
    margin-left: -1px; padding: 0.3rem 0 0.3rem 21px; transform: translateX(-21px);
  }
  .vchain__gate-icon {
    flex: none; width: 30px; height: 30px; border-radius: 50%;
    background: var(--brand-red, #f31a27); display: flex; align-items: center; justify-content: center;
  }
  .vchain__gate-text { font-size: 0.8rem; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--fg); }
}

/* --- F5 Zeitplan (Rene 2026-08-19o): Projektplan-Board zwischen
   Ton-Stapel und CTA. Uebernahme aus konzepte-flow/f5.html, alle
   Selektoren auf .hiwplan gescoped. Tagesachse (DAY 0 bis 25, linear,
   1 Tag = 100%/26.5 Plotbreite), Kern-Balken 01/02/03 exakt
   proportional im Wasserfall mit Tinte-Konnektoren, CORE-PACKAGE-
   Klammer (ihre rechte Seite UEBERNIMMT die Unlock-Linie, kein
   Linien-Doppel), Unlock-Linie bei Tag 5, Optional-Balken in der
   Grau-Tonleiter. ALLE Linien der Grafik werden durch Motion
   eingefuehrt (Draw per scaleX/scaleY oder Clip-Reveal). --- */
.hiwplan {
  /* HVR-20260914-40 (Rene): Zeitachse mit lesbaren Dauern. Links eine Label-Spalte je Zeile
     (Leistung + Dauer als Zahl), der Chart rueckt um --lab-w nach rechts; die Balken tragen
     nur die Nummer, Pillen und Titel neben den Balken entfallen (standen doppelt). */
  --lab-w: clamp(10rem, 15vw, 15rem); /* absolute Breite: Label-Spalte beginnt exakt an der Plot-Kante */
  --t01: #f31a27; --t02: #b01118; --t03: #8c0d13;
  --t04: #6e6a64; --t05: #55514c; --t06: #3a3733;
  --fs-eyebrow: clamp(0.75rem, 0.9vw, 1rem);
  /* Mikro-Rolle: ALLE Chart-Annotationen nutzen genau diese Groesse */
  --fs-micro: 0.5625rem;
  --days: 26.5;
  position: relative;
  /* Atem-Abstand: hiw-spacer liegt darueber, unten Luft zur CTA */
  margin: clamp(1rem, 2.5vh, 2rem) 0 clamp(6rem, 10vh, 9rem);
}
.hiwplan .eyebrow {
  font-family: var(--font-display);
  font-size: var(--fs-eyebrow);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 600;
}
.hiwplan .cut { overflow: hidden; display: block; }
.hiwplan .cut__in { display: block; will-change: transform; }
.hiwplan .cut--abs { position: absolute; }
.hiwplan .board { position: relative; overflow: hidden; }
/* Rahmen in der Linien-Sprache der Page (Rene 2026-08-19q): Horizontale
   von v1 bis zum Seitenrand (Werte wie hiw7/hiwring), Vertikale exakt
   auf den Rasterkanten 14.25/83.5 (= Modulkanten); zeichnen per Motion */
.hiwplan .bedge { position: absolute; background: var(--line); /* HVR-20260914-31: volle Farbstaerke */ }
.hiwplan .bedge--t { top: 0; left: calc(var(--pg-v1, 3.75%) - var(--pg-v2, 14.25%)); right: calc(var(--pg-v3, 83.5%) - var(--pg-w, 100%)); /* HVR-20260915-05 */ /* HVR-20260914-05: Horizontale endet an der Vertikalen (83.5 %) */ height: 1px; transform-origin: left center; }
.hiwplan .bedge--b { bottom: 0; left: calc(var(--pg-v1, 3.75%) - var(--pg-v2, 14.25%)); right: calc(var(--pg-v3, 83.5%) - var(--pg-w, 100%)); /* HVR-20260915-05 */ /* HVR-20260914-05: Horizontale endet an der Vertikalen (83.5 %) */ height: 1px; transform-origin: left center; }
.hiwplan .bedge--l { top: 0; bottom: 0; left: -0.5px; width: 1px; transform-origin: center top; } /* wie die Template-Vertikale (translateX -0.5px): exakt dieselben Pixel */
.hiwplan .bedge--r { top: 0; bottom: 0; right: -1px; width: 1px; transform-origin: center top; } /* exakt auf .hiw-vline (83.5 %) statt 1 px daneben */
/* HVR-20260911-11 (Rene D5): Die Vertikalen liegen auf v2 und der .hiw-vline;
   die Board-Kante besitzt die Linie und deckt das Template darunter ab —
   deckend statt 0.35 alpha (= rgba(243,26,39,.35) auf #ededed), sonst
   doppelte Dichte (gemessen 83 statt 51). */
.hiwplan .bedge--l, .hiwplan .bedge--r { background: var(--line); } /* HVR-20260914-31: vorher vorgemischtes Rosa (Rot bei .35 auf Grau) */
.hiwplan .board__head {
  display: flex; justify-content: space-between; align-items: baseline;
  padding: clamp(0.8rem, 1.6vh, 1.2rem) clamp(1.2rem, 2vw, 1.8rem) 0.4rem;
}
.hiwplan .board__title { color: var(--fg); }
.hiwplan .plotin {
  position: relative;
  margin-left: clamp(1.2rem, 2vw, 1.8rem);
  padding-left: var(--lab-w); /* HVR-20260914-40: Label-Spalte */
  padding-bottom: 26px;
}
.hiwplan .dpos { left: calc(100% / var(--days) * var(--dx) + var(--ox, 0px)); }
.hiwplan .dbar {
  left: calc(100% / var(--days) * var(--dx));
  width: calc(100% / var(--days) * var(--dw));
}
.hiwplan .axis { position: relative; height: 34px; margin-bottom: 22px; }
.hiwplan .axis__line {
  position: absolute; bottom: 6px; left: 0;
  width: calc(100% / var(--days) * 25);
  height: 1.5px; background: var(--muted);
  transform-origin: left center;
}
.hiwplan .tick {
  position: absolute; bottom: 0; width: 1px; height: 6px;
  background: var(--muted); transform-origin: center top;
}
.hiwplan .cut--lab { bottom: 12px; transform: translateX(-50%); }
.hiwplan .axis__lab {
  font-family: var(--font-display); font-weight: 600;
  font-size: var(--fs-micro); letter-spacing: 0.12em;
  color: var(--muted); white-space: nowrap;
}
.hiwplan .cut--marker { top: 14px; z-index: 5; }
.hiwplan .marker {
  width: 26px; height: 26px; border-radius: 50%;
  background: var(--signal-red);
  display: flex; align-items: center; justify-content: center;
}
.hiwplan .marker svg { display: block; stroke: #ededed; stroke-width: 1.6; fill: none; stroke-linecap: square; }
.hiwplan .corewrap { position: relative; }
.hiwplan .optwrap { position: relative; margin-top: 26px; }
.hiwplan .crow { position: relative; height: 40px; margin-bottom: 16px; }
.hiwplan .crow:last-child { margin-bottom: 0; }
.hiwplan .orow { position: relative; height: 62px; margin-bottom: 12px; }
.hiwplan .orow:last-child { margin-bottom: 0; }
.hiwplan .mlab { display: block; position: absolute; left: calc(-1 * var(--lab-w)); width: calc(var(--lab-w) - 18px); top: 0; height: 40px; } /* HVR-20260914-40 */
.hiwplan .orow .mlab { top: 22px; }
.hiwplan .mlab__in { height: 100%; display: flex; flex-direction: column; justify-content: center; gap: 0.18em; }
.hiwplan .mlab__t { font-family: var(--font-display); font-weight: 600; font-size: var(--fs-eyebrow); letter-spacing: 0.08em; text-transform: uppercase; color: var(--fg); white-space: nowrap; line-height: 1.2; } /* AD-Checkpoint T3 (MAJOR): Leistungsname in der Eyebrow-Rolle (>= 12.8 px) und voller Tinte statt 9 px grau */
.hiwplan .mlab__d { font-family: var(--font-display); font-weight: 700; font-size: clamp(0.85rem, 1vw, 1.1rem); letter-spacing: 0; color: var(--fg); white-space: normal; line-height: 1.15; font-variant-numeric: tabular-nums; }
.hiwplan .cut--num2 { width: calc(100% / var(--days) * 2); }
.hiwplan .trk { position: relative; height: 100%; }
.hiwplan .bar {
  position: absolute; top: 0; height: 40px;
  border-radius: 6px; transform-origin: left center;
}
.hiwplan .bar--01 { background: var(--t01); }
.hiwplan .bar--02 { background: var(--t02); }
.hiwplan .bar--03 { background: var(--t03); }
.hiwplan .bar--04 { background: var(--t04); border-radius: 6px 0 0 6px; }
.hiwplan .bar--05 { background: var(--t05); }
.hiwplan .bar--06 { background: var(--t06); }
.hiwplan .orow .bar { top: 22px; }
.hiwplan .ghost {
  position: absolute; top: 22px; height: 40px;
  border: 1.5px dashed var(--t04); border-left: 0;
  border-radius: 0 6px 6px 0;
}
.hiwplan .cut--inbar { top: 0; height: 40px; }
.hiwplan .orow .cut--inbar { top: 22px; }
.hiwplan .inbar {
  height: 40px; display: flex; flex-direction: column; justify-content: center;
  padding-left: 8px; color: #ededed;
  font-family: var(--font-display); font-weight: 600;
  font-size: var(--fs-micro); letter-spacing: 0.02em;
  text-transform: uppercase; line-height: 1.25; white-space: nowrap;
}
.hiwplan .cut--num { width: calc(100% / var(--days)); }
.hiwplan .inbar--c { padding: 0; align-items: center; width: 100%; text-align: center; }
.hiwplan .inbar--row { flex-direction: row; align-items: center; letter-spacing: 0.06em; }
.hiwplan .cut--meta { top: 0; height: 40px; }
.hiwplan .orow .cut--meta { top: 22px; }
.hiwplan .meta { height: 40px; display: flex; align-items: center; gap: 9px; white-space: nowrap; }
.hiwplan .pill {
  display: inline-flex;
  border: 1px solid rgba(23, 20, 15, 0.4);
  border-radius: 999px;
  padding: 0.35em 0.9em;
  font-family: var(--font-display); font-weight: 600;
  font-size: var(--fs-micro); letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--fg);
  background: var(--bg); white-space: nowrap;
  line-height: 1.15;
}
.hiwplan .ttl {
  font-family: var(--font-display); font-weight: 700;
  font-size: var(--fs-micro); letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--fg); white-space: nowrap;
}
.hiwplan .cut--tag { top: 0; height: 18px; }
.hiwplan .tagline { height: 18px; display: flex; align-items: center; gap: 9px; white-space: nowrap; }
.hiwplan .tag {
  display: inline-flex;
  border: 1px solid rgba(23, 20, 15, 0.35);
  border-radius: 999px;
  padding: 0.22em 0.75em;
  font-family: var(--font-display); font-weight: 600;
  font-size: var(--fs-micro); letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--muted);
  background: var(--bg); white-space: nowrap;
  /* Seiten-Cascade vererbt line-height 1.5 — Pille wuerde ihr
     Cut-Fenster sprengen (Konzeptseite hatte line-height normal) */
  line-height: 1.15;
}
.hiwplan .stub {
  position: absolute; top: 8px; width: 17px; height: 0;
  border-top: 2px dashed var(--signal-red);
  transform-origin: left center;
}
.hiwplan .conn {
  position: absolute; width: 2px; height: 16px;
  background: var(--fg); transform-origin: center top;
}
.hiwplan .conn--1 { top: 40px; }
.hiwplan .conn--2 { top: 96px; }
.hiwplan .brk {
  position: absolute; top: -7px; bottom: -7px; left: -12px;
  right: calc(100% - 100% / var(--days) * 5 + 1px);
  pointer-events: none;
}
.hiwplan .brk__t { position: absolute; top: 0; left: 0; right: 0; height: 1px; background: #17140f; transform-origin: left center; } /* HVR-20260914-31 */
.hiwplan .brk__b { position: absolute; bottom: 0; left: 0; right: 0; height: 1px; background: #17140f; transform-origin: left center; } /* HVR-20260914-31 */
.hiwplan .brk__l { position: absolute; top: 0; bottom: 0; left: 0; width: 1px; background: #17140f; transform-origin: center top; } /* HVR-20260914-31 */
.hiwplan .cut--brklab { top: 0; left: 10px; transform: translateY(-50%); }
.hiwplan .brklab {
  font-family: var(--font-display); font-weight: 700;
  font-size: var(--fs-micro); letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--signal-red);
  background: var(--bg); padding: 0 6px; white-space: nowrap;
}
.hiwplan .ul-solid {
  position: absolute; top: -29px; bottom: -13px;
  left: calc(100% / var(--days) * 5 - 1px); width: 2px;
  background: var(--signal-red); transform-origin: center top;
  z-index: 4;
}
.hiwplan .ul-dashed {
  position: absolute; top: -13px; bottom: -26px;
  left: calc(100% / var(--days) * 5 - 1px); width: 0;
  border-left: 2px dashed var(--signal-red);
  z-index: 4;
}
/* HVR-20260916-M4: Kalenderraster ist mobile-only, js/main.js befuellt es aber
   unbedingt (wie .hiwring__vchain) — auf Desktop bleibt es verborgen. */
.hiwplan__cal { display: none; }
/* Tablet-Portrait/Mobile (900, war 820): HVR-20260916-M4 (Rene: Projektplan
   "wie ein Kalender", echte Monatsansicht) — die Desktop-Wasserfall-Timeline
   (.axis/.corewrap/.optwrap) weicht komplett einem 4-Wochen/7-Tage-Raster
   (.hiwplan__cal, js/main.js baut es aus PLAN_EVENTS). Desktop unveraendert. */
@media (max-width: 900px) {
  .hiwplan .bedge--t, .hiwplan .bedge--b { left: -6vw; right: -6vw; }
  .hiwplan .axis, .hiwplan .corewrap, .hiwplan .optwrap { display: none; }
  /* .plotin traegt links 160px Padding fuer die Desktop-Label-Spalte
     (.mlab vor .trk) — ohne die Wasserfall-Zeilen braucht das Kalenderraster
     die volle Breite, sonst quetscht sich das 7-Spalten-Grid in den Rest. */
  .hiwplan .plotin { padding-left: 0; }
  .hiwplan__cal { display: block; padding: 0.4rem 0 0.2rem; }
  .plancal__dow {
    display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 3px;
    margin-bottom: 0.6rem;
  }
  .plancal__dow span {
    font-size: 0.6rem; font-weight: 600; letter-spacing: 0.06em;
    text-align: center; color: var(--muted);
  }
  .plancal__week { margin-bottom: 0.9rem; }
  .plancal__wlabel {
    display: block; font-size: 0.65rem; font-weight: 700; letter-spacing: 0.08em;
    text-transform: uppercase; color: var(--fg); margin-bottom: 0.35rem;
  }
  .plancal__days { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 3px; }
  .plancal__day {
    position: relative; aspect-ratio: 1 / 1.15; border: 1px solid var(--line);
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 2px; padding: 2px; min-width: 0;
  }
  /* padding-top reserviert die Zeile, in der .plancal__lock oben rechts sitzt —
     der zentrierte Chip-Stapel (justify-content:center) rutscht sonst trotz
     top/right-Positionierung des Schlosses bis in dessen Ecke (AD-Fund Rest-
     Overlap 2px nach der ersten Korrektur). */
  .plancal__day--unlock { border-color: var(--brand-red, #f31a27); border-width: 1.5px; padding-top: 13px; }
  .plancal__daynum { position: absolute; top: 2px; left: 3px; font-size: 0.5rem; color: var(--muted); }
  .plancal__chip {
    width: 16px; height: 16px; border-radius: 50%;
    background: var(--tone); color: var(--bg);
    font-size: 0.5rem; font-weight: 700;
    display: flex; align-items: center; justify-content: center;
  }
  .plancal__chip--ghost { background: none; border: 1.5px dashed var(--tone); color: var(--tone); }
  /* HVR-20260916-M4-Fix (AD-Fund: Schloss ueberlappte den Chip-Stapel um
     ~33% seiner Flaeche bei 375px): Schloss neben die Tagesnummer oben statt
     hinter die Chip-Spalte unten — beide Ecken sind jetzt eindeutig getrennt. */
  .plancal__lock { position: absolute; top: 2px; right: 2px; width: 10px; height: 10px; opacity: 0.85; }
  /* Zellen mit 3+ Ereignissen am selben Tag (z.B. Tag 5: 04/05/06 starten
     gleichzeitig) stapeln sonst zu hoch fuer die Zelle — kleinere Chips,
     engerer Abstand nur in diesem Fall. */
  .plancal__day--dense .plancal__chip { width: 13px; height: 13px; font-size: 0.42rem; }
  .plancal__day--dense { gap: 1px; }
}

/* Leeres Rasterband zwischen Liste und CTA (PNG) mit Abschlusslinie */
/* Rene 2026-07-27j: die eigene Abschlusslinie hier entfernt — starr,
   bewegte sich nie mit und lief ohne Funktion links in die Randspalte
   hinein. Der Stapel hat bereits seine eigene Rahmenlinie (.hiw-stack::
   after); die leere Ruhefläche vor der CTA bleibt, nur ohne Linie. */
.hiw-spacer {
  position: relative;
  height: clamp(5rem, 8vw, 8.5rem);
}

/* --- CTA: markenrote Vollfläche (Rene #2/#5 — großes Farb-Keyframe
   zum Abschluss, Button invertiert) --- */
.hiw-cta {
  margin: clamp(4rem, 7vw, 7.5rem) 0 16vh;
  background: var(--brand-red);
  color: #fff;
  padding: clamp(2.2rem, 4vw, 4.6rem);
}
.hiw-cta__hl {
  font-family: var(--font-display);
  font-weight: 700;
  text-transform: uppercase;
  font-size: clamp(1.8rem, 3.9vw, 4.7rem); /* PNG-Proportion */
  line-height: 1.06;
  margin: 0 0 0.5em;
  max-width: 18ch;
}
.hiw-cta__copy {
  font-size: clamp(0.9rem, 1.35vw, 1.6rem);
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.9);
  margin: 0 0 1.8em;
  max-width: 52ch;
}
.hiw-cta__btn {
  display: inline-flex;
  align-items: center;
  gap: 0.8em;
  background: #fff;
  color: var(--brand-red);
  font-family: var(--font-display);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: clamp(0.82rem, 1.1vw, 1.3rem);
  padding: 1.1em 2.1em;
  text-decoration: none;
  transition: background-color 0.25s ease, color 0.25s ease;
}
.hiw-cta__btn::after {
  content: '→';
  font-family: inherit;
  transition: transform 0.3s cubic-bezier(0.65, 0, 0.45, 1);
}
.hiw-cta__btn:hover { background: #201e1e; color: #fff; }
.hiw-cta__btn:hover::after { transform: translateX(5px); }
.hiw-cta__btn:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}
/* Utility: einzelne Zeichen vom Uppercase ausnehmen (z. B. das
   Plural-s in „SMEs", Review 2026-08-09e) */
.tt-none { text-transform: none; }

/* --- Rene-Bildkorrekturen 2026-07-25f (überschreiben Vorstehendes) --- */
/* Bild 1: die zwei Kernsätze als große fette Überschrift */
.hiw-head__hl {
  margin: 0 0 0.7em;
  font-family: var(--font-display);
  font-weight: 700;
  /* so bemessen, dass JEDER Satz genau eine Zeile bleibt (kein Flatterumbruch) */
  font-size: clamp(1.35rem, 2.05vw, 2.5rem);
  line-height: 1.3;
  color: #201e1e;
  max-width: none;
}
/* Bild 5: CTA-Kasten dockt exakt an der Spacer-Linie an (keine freie Linie) */
.hiw-cta { margin-top: 0; }

@media (prefers-reduced-motion: reduce) {
  .hiw-card,
  .hiw-card__no,
  .hiw-card__full,
  .hiw-stepper__num,
  .hiw-stepper__headline span,
  .hiw-status--core,
  .hiw-status--opt,
  .hiw-status__optgroup,
  .hiw-status__label,
  .hiw-status__optlabel,
  .hiw-punch__c,
  .hiw-cta__btn::after { transition: none; }
}

@media (max-width: 900px) {
  /* HVR-20260916-M1 (Mobile Fix): .hiw und .hiw-punch beginnen an --pg-v1
     (rechte Kante der .H-Kachel, JS-gesetzt ≈ 14.25 % = 54 px bei 375 px),
     nicht mehr bei 6 % (22.5 px). Zuvor lag der Text hinter der Kachel. */
  /* HVR-20260916-M3 (Rene: "Akkordion auf volle Displaybreite"): die feste
     6%-Luecke rechts (94%-Breite) wich einem kleinen festen Rand (1.2rem) —
     naeher am Viewport-Rand, mehr Raum fuer Legend-Pills/Akkordion-Text.
     Betrifft .hiw (und damit Ring/Akkordion/Plan gemeinsam), .hiw-punch
     zieht mit, damit Titel und Body dieselbe Content-Spalte teilen. */
  .hiw { --hiw-gap: 0.9rem; margin-left: var(--pg-v1, 14.25%); width: calc(100% - var(--pg-v1, 14.25%) - 1.2rem); }
  /* Mobile nutzt v1–94vw — die 69.5%-Rahmenlinie gilt dort nicht */
  .hero__page[data-page="how-it-works"] .hiw-vline { display: none; }
  /* HVR-20260912-03 (Rene): auch die Template-Vertikalen v2 und 69.5 % setzen
     mobil aus — sie liefen ohne Bezug durch Punchline, Kopf und Karten; v1
     (Kachelkante) bleibt, die Spalte traegt sich ueber ihre Toplines.
     Rollen-Klassen wie bei --h1/--h3: ein Positionsselektor zaehlte den
     Progress-Span mit und traf v1 und v2 statt v2 und v3 (AD 2026-09-12) */
  .hero__page[data-page="how-it-works"] :is(.hero__pline--v2, .hero__pline--v3) { display: none; }
  /* HVR-20260916-M3 (Rene: "Linien reduzieren, mehr vom Screen nutzen"): die
     beiden verbleibenden Template-Horizontalen (h1 bei top:25.6%, h2 bei
     top:41%) laufen ohne Content-Bezug durch die HIW-Seite — analog zu v2/v3
     mobil deaktiviert. v1 (Pflichtgrenze der .H-Kachel) bleibt einzige Linie. */
  .hero__page[data-page="how-it-works"] :is(.hero__pline--h1, .hero__pline--h:not(.hero__pline--h1):not(.hero__pline--h3)) { display: none; }
  .hiw-punch { left: var(--pg-v1, 14.25%); width: calc(100% - var(--pg-v1, 14.25%) - 1.2rem); font-size: 7.2vw; top: -56vh; }
  /* HVR-20260911-07: Toplines des Kopfblocks, des Phasenstapels und des
     Plan-Boards enden mobil an den Seitenkanten. Links: bis zur Kachelkante (v1),
     rechts: bis zur neuen Kante (1.2rem Überstand, s.o. HVR-20260916-M3). */
  .hiw-head::before, .hiw7::before, .hiw7::after,
  .hiwplan .bedge--t, .hiwplan .bedge--b { left: calc(-1 * var(--pg-v1, 54px)); right: -1.2rem; }
}
/* HVR-20260911-13 (Rene D4): Unter ~560 px faellt die 6%-Kante der Punchline
   mit v1 (.H-Kachelkante, ~24 px) zusammen (390: 0.1 px). Mindestabstand
   0.5 x Inset, rechte Kante bleibt bei 94 %. Bei 768 liegt die Kante ohnehin
   21 px neben v1, dort bleibt alles. */
@media (max-width: 560px) {
  .hiw-punch { left: var(--pg-v1, 14.25%); width: calc(94% - var(--pg-v1, 14.25%)); }
  .page-content--how-it-works { --hiw-inset: 1rem; }
  /* HVR-20260916-M3-Fix (AD-Fund): die 2x2-Pill-Legende (max-content-Spalten)
     lief bei "What you get" nur auf sehr schmalen Phones ueber die Kante
     (max-content schrumpft nicht) — 1 Spalte NUR hier ab 560px, nicht
     pauschal im ganzen 900px-Bereich (bei 768px passte 2-spaltig laengst
     wieder, die pauschale Regel erzeugte dort hohle Pillen, AP-901-Muster). */
  .hiw-legend { grid-template-columns: 1fr; }
  .hiw-legend__item { width: 100%; }
  /* Mobil: Stapel wird zur Vertikalliste — jede Karte volle Breite,
     offene Karte wächst in der Höhe statt in der Breite */
  .hiw-stack { flex-direction: column; gap: 2px; min-height: 0; width: auto; margin: 0 1rem; }
  .hiw-stack::before,
  .hiw-stack::after { left: -6vw; right: -6vw; }
  .hiw-stack__gap { flex-basis: 14px; }
  .hiw-card { flex-basis: 56px; transition: flex-basis 0.55s cubic-bezier(0.16, 1, 0.3, 1), background-color 0.4s ease; }
  .hiw-card[data-open] { flex-basis: 560px; }
  .hiw-card__trigger { flex-direction: row; align-items: center; justify-content: flex-start; gap: 0.8em; padding: 0.9rem 1rem; }
  .hiw-card__spine { writing-mode: horizontal-tb; transform: none; margin-top: 0; }
  /* Dauer-Leiste: Mobile-Pass folgt (wie zuvor bei der Nav) — auf der
     schmalen Vertikalliste würde die gespiegelte Flex-Struktur nicht
     sauber funktionieren, daher vorerst ausgeblendet */
  .hiw-statusrow { display: none; }
}

/* ---------- Tablet-Portrait/Mobile (900, war 820) ---------- */
@media (max-width: 900px) {
  /* ============================================================
     FIGMA FIDELITY MODE (Rene 2026-09-15): "Baue meine Vorlage 1:1
     nach und wende sie auf die Mobile Ansicht an." Drei approved
     Frames, Datei y9fsU21vEKMAvzb2732gmw:
       Intro 01 -> node 2086:89  (351x758)
       Intro 02 -> node 2086:122 (351x758)
       Home     -> node 2086:123 (350x758)
     s. design-system/10-reference-pages.md fuer das Node-Register.
     Ersetzt ALLE eigenen Art-Direction-Kompositionsversuche dieser
     Session (9er-Bildraster mit Logo-Swap, Content-Fit-Kachelhoehe,
     8-Zellen-Intro-02, Pinwheel-Home) durch die gemessenen Figma-Werte.
     Alle Groessen unten sind % aus den Figma-Node-Rects (get_design_
     context), nicht geschaetzt - Herleitung je Regel im Kommentar. */
  :root {
    --hero-grid-center-col: 40.17%; /* Intro 01 Rastermitte = node 2086:108, 141/351 */
    --hero-grid-center-row: 31%;    /* Intro 01 Rastermitte = node 2086:108, 235/758 */
    --hero-statement-w: 64.67%;     /* Intro 02 Kachel = node 2086:11, 227/351 */
    --hero-statement-h: 50.53%;     /* Intro 02 Kachel = node 2086:11, 383/758 */
    --hero-home-center-col: 14.29%; /* Home .H-Box = node 2086:124, 50/350 (~quadratisch bei Mobile-Seitenverhaeltnissen) */
  }

  /* HVR-20260917-M23 (Rene: Kreuz oben rechts zum Schliessen, siehe
     base.css Basisregel weiter oben fuer die vollstaendige Begruendung).
     Nur hier, mobil, sichtbar - Desktop behaelt .hero__tile. */
  .hero__page-close { display: flex; }

  /* HVR-20260917-T2-Collision (AD-Fund): homeTile (".hero__tile", das rote
     .H, main.js:878) bleibt waehrend einer offenen Subpage als halb
     eingeblendete, fixe Klick-Flaeche links auf halber Bildschirmhoehe
     stehen (main.js:1709 setzt left:offsetWidth/2, top:50%) - ein
     Ueberbleibsel der jetzt per HVR-20260917-M23 durch das rote X ersetzten
     Schliess-Funktion. visibility:hidden statt display:none, damit
     homeTile.offsetWidth (zentral fuer --pg-v1 und weitere Layout-
     Berechnungen, main.js:4282 u.a.) unveraendert bleibt - nur das
     Fixed-Overlay-Element selbst wird auf Mobile unsichtbar UND nicht
     mehr klickbar (die Schliess-Rolle traegt bereits vollstaendig das X).
     HVR-20260918-M2 (Rene: "beim Seitenaufbau ist kurz das .H-Logo im
     Rechteck links zu sehen, das sollte nicht mehr sichtbar sein"): der
     vorherige Trigger [inert] wird von main.js erst im onComplete der
     GESAMTEN Oeffnungs-Timeline gesetzt (main.js:4401) - waehrend der
     kompletten FLIP-Flug-/Wachstums-Animation (mehrere hundert ms) blieb
     die Kachel davor sichtbar und sichtbar animierend. Trigger jetzt auf
     [data-page] am .hero__page (main.js:4316, `page.dataset.page = slug`)
     - das wird SYNCHRON am Anfang von open() gesetzt, VOR jeglicher
     Animation, und in close() wieder vollstaendig entfernt (main.js:4559,
     `delete page.dataset.page`) statt nur geleert. :has() statt Adjacent-
     Sibling-Selektor, weil .hero__page NACH .hero__tile im Markup steht
     (index.html:131 vs 162) - ein Combinator wie [attr] ~ .hero__tile
     braucht die Bedingung VOR dem Ziel im DOM, :has() nicht. */
  .hero:has(.hero__page[data-page]) .hero__tile { visibility: hidden; pointer-events: none; }

  /* HVR-20260917-T1 (Rene, Ticket 1 der Mobile-Subpage-Ueberarbeitung:
     "wir entfernen links die Menu bar und machen die Items und den
     Content auf die gesamte Display breite"). Die "Menu bar" ist die
     linke Randspalte des Desktop-Seitenrasters: --pg-v1 (main.js Z.4258,
     = homeTile.offsetWidth) und --pg-v2 (Z.4259, = GRID_V2·heroWidth =
     14.25%) stecken den Bereich ab, in dem .hero__page-side (gedrehtes
     Seitenlabel) sitzt; --pg-v3 (Z.4260) ist die rechte Content-Kante
     (86.25% bzw. seitenspezifisch). Ueberschreibt alle drei EINMALIG hier
     statt in jedem der ~15 Selektoren, die var(--pg-v1/v2/v3) referenzieren
     (calc() rechnet automatisch mit den neuen Werten weiter) - deutlich
     risikoaermer als jeden Einzelselektor umzuschreiben. !important
     noetig: main.js setzt diese Custom Properties per Inline-Style beim
     Oeffnen (page.style.setProperty), eine normale Klassenregel verliert
     dagegen immer. v1=v2 (Spinne kollabiert auf 0 Breite - Selektoren wie
     .hero__page-side, die genau in dieser Luecke sitzen, verschwinden
     dadurch automatisch mit) auf denselben Wert wie das etablierte
     --content-inset (content-spacing.css, ueberall sonst auf dieser Site
     der mobile Standard-Rand).
     --pg-v3 (rechte Kante) BEWUSST NICHT angefasst - erster Versuch
     (calc(100% - inset)) live geprueft: mehrere Linien-/Trenner-Elemente
     (.ab-media__hline, .what__topline, .pf-brands__topline,
     .pf-folio__topline, .why-bridge) nutzen "right: calc(var(--pg-v3) -
     var(--pg-w))" gegen einen ENGEREN eigenen Elternrahmen statt gegen die
     volle Heldenbreite - mit dem neuen v3 ragten sie ~33px ueber den
     Viewport hinaus (gemessen per scrollWidth-Differenz + Rect-Scan,
     sofort verworfen statt committet). Ticket bewusst auf "linke Spalte
     entfernen" verengt, bis die rechte Kante Element fuer Element sicher
     nachgezogen werden kann (Folgeticket) - besser eine echte, verifizierte
     Verbesserung als ein zweiter, neuer Ueberlauf-Bug. */
  .hero__page {
    --pg-v1: var(--content-inset) !important;
    --pg-v2: var(--content-inset) !important;
  }
  /* Die gedrehte Seitenbeschriftung ("PORTFOLIO", "ABOUT" etc.) gehoerte
     zur jetzt entfernten Randspalte - auf Mobile ohne eigene Spalte kein
     sinnvoller Platz mehr dafuer (Regel 1: kein Linksmenu mehr). */
  .hero__page-side { display: none !important; }
  /* Die 3 vertikalen Rahmenlinien (v1/v2/v3) markierten die jetzt entfernte
     Randspalte + die alte rechte Content-Kante - auf Mobile keine
     strukturelle Bedeutung mehr (Regel 5: Linien nur noch bei Ueberschrift
     und Section-Trennung, das sind die H-Linien, s. .hero__pline--h,
     NICHT die vertikalen Rahmenlinien hier). */
  .hero__page-lines .hero__pline--v { display: none !important; }

  /* --- Statement-Kachel: Ruhelage = Vollbild (HVR-20260917-M18, s.u.),
     schrumpft per main.js (fullscreen -> startW/startH) auf die
     Intro-02-Groesse. Deckungsgleich mit der JS-FROM-Groesse (main.js
     buildHeroScrub Phase A) - reiner Vor-JS/No-JS-Fallback, damit vor dem
     ersten Tick kein falsches Format aufblitzt. --- */
  .hero__tile { width: 100%; height: 100%; opacity: 1; }
  .hero__tile-inner { width: 100%; height: 100%; padding: 6vw; }
  .hero__tile-copy { padding: 6vw; }
  /* Figma node 2086:47: Wortmarke zentriert auf der VOLLEN Framebreite
     (nicht auf die Kachel bezogen), 86/351 = 24.5vw (vw statt % - .hv-logo
     liegt in .hero__logo-wrap, das selbst nur content-breit ist und damit
     kein gueltiges %-Containing-Block waere). Mobile zeigt die Rot-Zelle
     sofort (kein Hover-Umweg wie am Desktop) - Wortmarke deshalb von
     Anfang an hell. */
  .hv-logo { color: #fff; width: 24.5vw; }

  /* HVR-20260917-M16 (Rene: "das wird leider nichts! Aendere Intro 01 auf
     nur die Hintergrundfarbe. Bilder und Kacheln entfernen und nur den
     Hintergrund mit der animierten Einblendung des Logos"). Beendet den
     gesamten Versuch, das 9-Bild-Raster (Figma node 2086:89) mobil
     seitentreu nachzubilden (HVR-20260916-3 bis M15) - nach wiederholten
     Runden (Streckung, contain, cover+Position, cover+Position+Scale,
     alle mit Fidelity-Regressionen laut Rene) ist die Entscheidung, das
     Raster auf Mobile komplett zu ersetzen, keine weitere Bildjustage.
     .hero__cell bleibt auf seiner Basisregel display:none (Zeile 3050) -
     KEIN nth-child-Override mehr, das es reaktiviert: Kein Bild, keine
     Kachel, keine Linie dieses Rasters ist mobil noch sichtbar. Übrig
     bleibt nur die Hero-Grundflaeche + die bereits bestehende, unveraen-
     derte Wortmarken-Animation (.hero__logo-wrap/.hv-logo, heroIntro() in
     main.js - NICHT angefasst). Rot statt --bg (#ededed, Zeile 75), weil
     die mobile Wortmarke bewusst weiss ist (Zeile ~3038, "Wortmarke von
     Anfang an hell" - fuer Rot as Grund gedacht, deckt sich mit Figma node
     2086:87, das denselben Platz bereits rot zeigt) - #ededed dahinter
     waere fuer eine weisse Wortmarke ein Kontrastbruch. Nur die Ruhelage
     (weder .hero--statement noch .hero--home): Intro 02 (eigene helle
     Flaeche #eaeaea, Zeile weiter unten) und Home (.hero__bento-Flaeche)
     bleiben dadurch unangetastet, wie gefordert.
     WIDERRUFT (HVR-20260917-M18, Rene: "kein harter Wechsel sondern eine
     Transition, wo aus dem Fullscreen die Kachel wird"): das satte Rot
     hier unten kommt jetzt NICHT mehr von `.hero` selbst, sondern von
     .hero__tile (s.o.), das bei Ruhelage vollflaechig ist und beim
     Scrollen scroll-gebunden auf Intro-02-Kachelgroesse schrumpft (main.js
     buildHeroScrub Phase A). Damit dieses Schrumpfen die helle Intro-02-
     Flaeche graduell freilegt (statt ploetzlich beim Erreichen von
     .hero--statement), muss GENAU DIESE Flaeche schon die ganze Zeit
     dahinter liegen statt erst per Klassenwechsel einzuspringen - `.hero`
     traegt sie deshalb jetzt konstant (ausser Home, unveraendert). */
  .hero:not(.hero--home) { background: #eaeaea; }
  /* Ersetzt die vorherige mobile .hero__cell-Regel (position:relative +
     display:none + nth-child(-n+9)-Reaktivierung): ohne mobile Override
     wuerde .hero__cell auf die globale Desktop-Regel (Zeile 93, KEIN
     display:none) zurueckfallen und wieder sichtbar werden - deshalb
     weiterhin explizit ausblenden. */
  .hero__cell { display: none; }
  /* HVR-20260917-M17 (Rene: "Intro ein soll keine weissen Linien haben,
     einfach nur die Animation vom Logo auf plain Hintergrundfarbe").
     WIDERRUFT den Linien-Teil von HVR-20260917-M16 - dort noch bewusst
     unangetastet gelassen, weil .hero__grid/.hero__line auch die Intro-
     02-Rahmenlinien sind (main.js buildHeroScrub animiert ihre Position
     schon ab Scroll-Beginn Richtung Kachelkante). Ausblenden NUR in der
     Ruhelage (weder .hero--statement noch .hero--home, identisch zur
     Hintergrundfarb-Regel eine Zeile drueber) - Intro 02 selbst bleibt
     dadurch unangetastet: sobald .hero--statement gesetzt wird (Scroll-
     Fortschritt > 0.27, main.js Zeile ~590), greift diese Regel nicht
     mehr und die Linien erscheinen dort exakt in ihrer bereits von main.js
     berechneten Rahmen-Position - nur ihre Ruhelage-Sichtbarkeit vor dem
     ersten Scroll wird entfernt, nicht die Positions-/Zeichenanimation
     selbst (main.js unveraendert). */
  .hero:not(.hero--statement):not(.hero--home) .hero__grid { display: none; }

  /* --- Linien: innere Kachelkanten-Linien bleiben, aeussere Randlinien
     ausgeblendet (randloses Raster, kein Rand zum Markieren). Hell/weiss
     auf der dauerhaft roten Intro-01-Flaeche, rot sobald der Grund auf
     Intro 02 hell wird (.hero--statement, s.u.). --- */
  .hero__line { background: #fff; }
  .hero__line--v:nth-of-type(1),
  .hero__line--v:nth-of-type(4) { display: none; }
  .hero--statement .hero__line { background: var(--line); }

  /* --- Intro 02 (Figma node 2086:122): KEIN 3x3-Zellenraster mehr - nur
     heller Grund hinter der Statement-Kachel, die 4 Linien rahmen sie ein.
     Ersetzt die vorherige 8-Zellen-Text-Komposition vollstaendig. --- */
  .hero__cells--intro { display: none !important; }
  .hero--statement { background: #eaeaea; } /* Figma node 2086:6 */
  /* Figma node 2086:14: Headline TOP-verankert bei 9.69%/18.8% der Kachel,
     Breite 77.53%. Figma zeigt dort keinen Fliesstext - Rene 2026-09-16,
     nachdem er den gerenderten Stand gesehen hat: "kan jetzt bei dem Platz
     auf wieder die Subline unter die Ueberschrift mit rein in den Kasten"
     (die Kachel ist jetzt hoch genug, der Body passt). Flex-Fluss statt
     fester Prozent-Top fuer den Body: robust gegen wechselnde Headline-
     Zeilenzahl/-hoehe (2 vs. 4 Zeilen je nach Breite), Headline behaelt
     ihre Figma-Position als Padding-Top des Flex-Containers. */
  .hero__tile-copy { padding-top: 18.8%; display: flex; flex-direction: column; }
  .hero__headline { position: static; left: auto; right: auto; top: auto; bottom: auto; width: 77.53%; }
  .hero__body { display: block; position: static; left: auto; right: auto; top: auto; width: 77.53%; margin: 0.8em 0 0; }
  /* .hero__tile--compact .hero__body{display:none} (Basisregel) ist ein
     eigener, breitenbasierter Fit-Check (main.js introCellFit/fit(), Referenz
     hero.offsetHeight*0.5) - unabhaengig von Renes jetziger Anweisung
     "Subline passt jetzt rein" loeste er hier weiterhin aus und hielt den
     Body versteckt. Auf Mobile explizit zurueckgeholt: der Flex-Fluss oben
     macht die Kachel selbst so hoch wie noetig, ein Compact-Fallback ist
     hier nicht mehr das richtige Werkzeug. */
  .hero__tile--compact .hero__body { display: block; }
  /* Statement-Typo bleibt identisch zu den Hover-Zellen —
     keine Sondergrößen mehr (Rene: alles einheitlich) */
  /* Rene 2026-09-16 ("Zahlen und Titel groesser"): Home-Kachellabel deutlich
     angehoben (0.95rem/0.8em-Deckel waren auf den jetzt teils sehr grossen
     Figma-Kacheln zu klein). */
  .bento-tile > span { font-size: clamp(0.8rem, 3.6vw, 1.35rem); padding: 2vw 2.2vw; }
  .bento-tile__no { font-size: 1.05em; } /* Ziffer traegt jetzt die Fuehrung statt kleiner als der Titel zu sein */
  .bento-tile.is-on > span { font-size: clamp(0.8rem, 3.6vw, 1.35rem); } /* HVR-20260913-06: mobil keine Hover-Vergroesserung */

  /* --- Home (Figma node 2086:123): bespoke Pinwheel aus 7 Bildkacheln +
     .H-Box, absolut positioniert (wie am Desktop) statt Grid-Areas - die
     Figma-Kachelgroessen sind irregulaer und lassen sich nicht sauber auf
     ein gemeinsames Spurenraster reduzieren. Prozente 1:1 aus den Node-Rects
     (Referenz 350x758). Seitenreihenfolge nach Lesefluss (oben->unten,
     links vor rechts bei gleicher Zeile) auf die 8 Positionen verteilt;
     Figma zeigt an dieser Stelle nur generische Produktfotos ohne
     Seitenbezug - Nummern/Titel traegt weiterhin main.js (data-page-title). */
  .hero__bento { position: absolute; inset: calc(var(--tile-gap) / 2); }
  /* HVR-20260916-M9-Fix (Rene-Report: "Linien fehlen" im Home-Grid), NUR
     Mobile: jede .bento-tile stoesst hier exakt Kante-an-Kante (border:0
     weiter unten, bewusst so — siehe dortiger Kommentar), der Grund
     dahinter faerbt die Naht zwischen zwei Kacheln ein. Weiss statt des
     unveraenderten transparenten/#hero-Grunds macht jede Kachelgrenze im
     Mosaik als duenne weisse Linie sichtbar, exakt wie in Figma Frame 79.
     Nur bei .hero--home aktiv (main.js setzt die Klasse ab Progress ~0.97). */
  .hero--home .hero__bento { background-color: #fff; }
  .hero__bento .bento-tile {
    /* position:absolute (nicht relative): Figma-Kacheln sind irregulaer
       positioniert, kein Grid-Slot wie zuvor. !important schlaegt das
       Desktop-Inline-style="left:X%;top:Y%" (index.html). */
    position: absolute !important;
    min-width: 0; min-height: 0;
    border: 0;
    /* HVR-20260916-M9-Fix (Rene-Report: "Linien fehlen"): border:0 ist hier
       Absicht (die Mobile-Prozentwerte stossen exakt Kante-an-Kante, ein
       Rahmen wuerde sie auseinanderschieben) — aber ohne jede Naht bleibt
       zwischen zwei Kacheln keine Stelle, an der .hero__bento (jetzt Weiss,
       s.o.) durchscheinen kann. outline faellt NICHT in den Boxmodell-Fluss
       (verschiebt keine Position, wird von overflow:hidden nicht abgeschnitten)
       — zwei angrenzende Kacheln zeichnen je 1px Weiss an ihrer gemeinsamen
       Kante, macht jede Kachelgrenze im Mosaik als duenne weisse Linie sichtbar,
       exakt wie in Frame 79. */
    outline: 1px solid #fff;
  }
  /* !important zwingend: jede Kachel traegt ihr Desktop-Inline-
     style="left:X%;top:Y%;width:X%;height:Y%" (index.html) - Inline-Styles
     schlagen jede Klassenregel ohne !important, unabhaengig von Spezifitaet
     (gefundener Fehler: ohne !important rendertens die Desktop-Prozente
     weiter, das Mobile-Pinwheel blieb komplett wirkungslos). */
  .hero__bento .bento-tile[data-page-slug="how-it-works"]      { left: 0       !important; top: 0       !important; width: 57.143% !important; height: 23.094% !important; } /* 01 Intro - Figma node 2086:139 */
  .hero__bento .bento-tile[data-page-slug="portfolio"]         { left: 57.143% !important; top: 0       !important; width: 42.857% !important; height: 26.385% !important; } /* 02 Expertise - node 2086:120-Motiv, fuellt die einzige Figma-Luecke (node 2086:152 y0-200 war leer) */
  .hero__bento .bento-tile[data-page-slug="workshop"]          { left: 0       !important; top: 23.094% !important; width: 57.143% !important; height: 23.883% !important; } /* 03 Diagnose - node 2086:138; HVR-20260916-M2: +0.40% height -> untere Kante alignt mit .H-Box-TOP */
  .hero__bento .bento-tile[data-page-slug="diagnostic-report"] { left: 57.143% !important; top: 26.385% !important; width: 42.857% !important; height: 27.181% !important; } /* 04 Decide - node 2086:152; HVR-20260916-M2: +0.40% height -> untere Kante alignt mit .H-Box-BOTTOM */
  .hero__bento .bento-tile[data-page-slug="design-sprint"]     { left: 0       !important; top: 46.978% !important; width: 42.857% !important; height: 26.381% !important; } /* 05 Visualize - node 2086:148; HVR-20260916-M2: top +0.40% -> obere Kante alignt mit .H-Box-TOP */
  .hero__bento .bento-tile[data-page-slug="partner-network"]   { left: 42.857% !important; top: 53.566% !important; width: 57.143% !important; height: 22.819% !important; } /* 06 Connect - node 2086:136; HVR-20260916-M2: top +0.40% -> obere Kante alignt mit .H-Box-BOTTOM */
  .hero__bento .bento-tile[data-page-slug="advisory"]          { left: 0       !important; top: 73.351% !important; width: 42.857% !important; height: 26.517% !important; } /* 07 Guide - node 2086:140 */
  .hero__bento .bento-tile:not([data-page-slug])               { left: 42.857% !important; top: 76.385% !important; width: 57.143% !important; height: 23.483% !important; } /* 08 Pricing - node 2086:137 */
  /* HVR-20260916-2 (Rene, entschieden: "wie aus der Figma Vorlage ...
     Verziehe die Bilder NICHT in Groesse, Format oder Qualitaet"): wie bei
     Intro 01 (s.o.) - Figmas eigener Code setzt kein object-fit auf den
     Bild-<img>s, CSS-Initialwert object-fit:fill greift, Figma STRECKT
     jedes Bild auf die Kachelgroesse statt es zu croppen. background-size:
     100% 100% repliziert das exakt. Bildzuordnung zurueck auf die
     urspruengliche 1:1-Figma-Zuordnung (node 2086:139/152/138/152.. s.
     10-reference-pages.md) statt der Crop-Optimierung der letzten Runde,
     die mit fill hinfaellig ist. */
  .hero__bento .bento-tile[data-page-slug="how-it-works"] .bento-tile__img      { background-image: url(../assets/hero-mobile/staubsauger.jpg) !important; }
  .hero__bento .bento-tile[data-page-slug="portfolio"] .bento-tile__img         { background-image: url(../assets/hero-mobile/md24.jpg) !important; }
  .hero__bento .bento-tile[data-page-slug="workshop"] .bento-tile__img          { background-image: url(../assets/hero-mobile/teamconnect.jpg) !important; }
  .hero__bento .bento-tile[data-page-slug="diagnostic-report"] .bento-tile__img { background-image: url(../assets/hero-mobile/pdpool.jpg) !important; }
  .hero__bento .bento-tile[data-page-slug="design-sprint"] .bento-tile__img     { background-image: url(../assets/hero-mobile/sennheiser.jpg) !important; }
  .hero__bento .bento-tile[data-page-slug="partner-network"] .bento-tile__img   { background-image: url(../assets/hero-mobile/haartrockner.jpg) !important; }
  .hero__bento .bento-tile[data-page-slug="advisory"] .bento-tile__img          { background-image: url(../assets/hero-mobile/htteams.jpg) !important; }
  .hero__bento .bento-tile:not([data-page-slug]) .bento-tile__img               { background-image: url(../assets/hero-mobile/tonies.jpg) !important; }
  /* HVR-20260916-M10-Fix (Rene-Report: "Bilder sind weiterhin verzogen"):
     100% 100% (HVR-20260916-M7) wurde per Messung als Ursache bestaetigt —
     Kachel 04 (diagnostic-report) hat Seitenverhaeltnis 0.717 (157x219px),
     das zugeordnete Bild (pdpool.jpg) hat 1.781 (1024x575) — eine Diskrepanz
     von Faktor 2.5, die beim Strecken massiv sichtbar verzerrt (alle 8
     Kacheln weichen unterschiedlich stark vom jeweiligen Bild-Seiten-
     verhaeltnis ab). Figmas eigenes Rendering (Frame 79, von Rene erneut
     als Referenz geschickt) zeigt dagegen NIRGENDS sichtbare Verzerrung —
     jedes Produkt behaelt seine wahre Form. Das bedeutet: Figma beschneidet
     (wie cover), es streckt nicht unproportional. cover skaliert IMMER
     gleichmaessig (nie x/y-Verzerrung) und schneidet nur den Ueberstand ab —
     das einzige Verfahren, das "nicht verzogen" fuer alle 8 Kachel-Bild-
     Kombinationen gleichzeitig garantiert, unabhaengig von Seitenverhaeltnis-
     Diskrepanzen. Ueberschreibt HVR-20260916-M7 endgueltig. */
  .bento-tile .bento-tile__img { opacity: 1; transform: scale(1); background-position: center; background-size: cover; }
  /* HVR-20260917-M19 (Rene: Feinjustage einzelner Home-Kacheln), M21
     (Rene: "musst das Bild in Kachel 01 & 02 in die andere Richtung
     schieben" - Bild-Inhalt bewegt sich GEGENLAEUFIG zum background-
     position-Wert: hoeherer X-Wert zeigt einen weiter RECHTS liegenden
     Bildausschnitt, wodurch ein fixes Motiv relativ dazu nach LINKS
     wandert (mit konkreten Zahlen nachgerechnet: Fenster [8P, 8P+200] bei
     steigendem P -> Motivposition im Slot F-8P sinkt = wandert nach
     links). "nach links" heisst also X ERHOEHEN, nicht senken (M19 hatte
     es falsch herum); analog "nach unten" heisst Y SENKEN. transform:
     scale() bleibt seitenverhaeltnistreu (zoomt das schon unverzerrte
     cover zusaetzlich). Nur 01/02/08 in dieser Runde neu; 05 (M19, "20%
     links" -> 30%) traegt denselben Fehler, aber unbestaetigt/nicht
     Teil dieses Auftrags - siehe Rueckmeldung an Rene. */
  .hero__bento .bento-tile[data-page-slug="how-it-works"] .bento-tile__img  { transform: scale(2) !important; background-position: 130% 70% !important; } /* 01 Intro: 10% nach oben (60+10) */
  .hero__bento .bento-tile[data-page-slug="portfolio"] .bento-tile__img     { transform: scale(1.8) !important; background-position: 70% -20% !important; } /* 02 Expertise: 20% nach unten (0-20) */
  .hero__bento .bento-tile[data-page-slug="design-sprint"] .bento-tile__img { background-position: 80% center !important; } /* 05 Visualize: 20% nach links (60+20) */
  .hero__bento .bento-tile[data-page-slug="partner-network"] .bento-tile__img { transform: scale(1.3) !important; background-position: center -30% !important; } /* 06 Connect: unveraendert */
  /* HVR-20260917-M22 (Rene: "bewege das Bild ... um 30% der Kachelhoehe,
     weiter nach unten"). Praezise Einheit diesmal: background-position-
     Prozente sind relativ zum UEBERSTAND (skalierte Bildgroesse minus
     Kachelgroesse), nicht zur Kachelhoehe selbst - ein Prozentpunkt dort
     ist je nach Zoomfaktor ein anderer Pixelwert und trifft "30% der
     Kachelhoehe" nicht zuverlaessig. transform:translateY(%) dagegen ist
     per CSS-Spezifikation IMMER relativ zur eigenen (unskalierten) Box-
     Hoehe - genau die angeforderte Einheit. In "translateY(30%)
     scale(1.5)" wird scale() zuerst angewandt (rechts zuerst), translateY
     danach im AEUSSEREN (unskalierten) Koordinatenraum - der Versatz
     bleibt dadurch exakt 30% der Kachelhoehe, unabhaengig vom Zoomfaktor
     (nicht mit dem Zoom multipliziert). Bisherige background-position
     (Rahmen/Zoomausschnitt) unveraendert, dies ist ein zusaetzlicher
     Versatz obendrauf. */
  .hero__bento .bento-tile:not([data-page-slug]) .bento-tile__img          { transform: translateY(30%) scale(2.08) !important; background-position: center -130% !important; } /* 08 Pricing: nochmal 30% groesser, zentriert (scale() skaliert bereits per Default von transform-origin:center - 1.6*1.3=2.08), translateY(30%) bleibt unveraendert exakt 30% der Kachelhoehe (unabhaengig vom Zoom, s. Kommentar oben) */
  .bento-tile > span { color: var(--tile-label); }

  /* .H-Mittelmarke: Farben umgekehrt (Figma node 2086:124/125: helle Box,
     rotes .H), Groesse ueber main.js squareSide() (isNarrow-Zweig). */
  .hero--home .hero__tile { background: #fff; }
  .hero--home .hv-mark--center { color: var(--brand-red); }

  /* HVR-20260916-M2 (Rene: "wie bei Intro 01 die hellen Linien über die Bilder
     mit Animation einblenden"): Bento-Grid-Overlay-Linien. Vertikal bei den
     Kachel-Spaltentrennern (42.857%/57.143%), horizontal bei den .H-Box-Raendern
     (46.978%/53.566%). GSAP-Animation: from scaleY/scaleX 0 in isNarrow(). */
  .hero__bento .bento-line {
    display: block;
    position: absolute;
    pointer-events: none;
    z-index: 2;
    background: rgba(236, 231, 222, 0.55);
  }
  /* HVR-20260916-M5-Fix (Rene: "Linien sind nicht mit den Bildraendern
     aligned sondern haben ihr eigenes Muster"): das Bento-Mosaik ist KEIN
     gleichmaessiges Raster — die Spaltenkante liegt oberhalb der .H-Kachel
     bei 57.143% (Kacheln 01-04) und unterhalb bei 42.857% (Kacheln 05-08),
     die Zeilenkante analog nur ueber die halbe Breite (links 46.978% zw.
     03/05, rechts 53.566% zw. 04/06). Volle Spannweite ueber die GESAMTE
     Hoehe/Breite lief deshalb quer durch die Bildmitte von 04/05/01/06 statt
     an einer echten Kachelkante zu enden (AP-202 Meaningful Endpoints). Jede
     Linie bekommt jetzt nur den Abschnitt, in dem ihre Position tatsaechlich
     eine Kachelkante trifft; die .H-Kachel selbst deckt die Restspanne. */
  .bento-line--v { width: 1px; transform-origin: 50% 0; }
  .bento-line--v1 { left: 42.857%; top: 53.566%; bottom: 0; }
  .bento-line--v2 { left: 57.143%; top: 0; height: 46.978%; }
  .bento-line--h { height: 1px; transform-origin: 0 50%; }
  .bento-line--h1 { top: 46.978%; left: 0; right: 42.857%; }
  .bento-line--h2 { top: 53.566%; left: 42.857%; right: 0; }
}

/* Bento-Linien: nur im isNarrow-Branch (max-width 900px) sichtbar */
.bento-line { display: none; }

/* ===========================================================
   Vor-JS-Zustände für die Load-Intro (progressive enhancement)
   =========================================================== */
.js #hero .hero__line--v  { transform: translateX(-0.5px) scaleY(0); transform-origin: 50% 0%; }
.js #hero .hero__line--h  { transform: translateY(-0.5px) scaleX(0); transform-origin: 0% 50%; }
.js #hero .hv-logo__glyph { opacity: 0; }

/* Reduced-Motion: keine Animationen, statischer Endzustand via JS */
@media (prefers-reduced-motion: reduce) {
  .js #hero .hero__line--v  { transform: translateX(-0.5px) scaleY(1); }
  .js #hero .hero__line--h  { transform: translateY(-0.5px) scaleX(1); }
  .js #hero .hv-logo__glyph { opacity: 1; }
}


/* ==========================================================
   [GEPARKT 2026-08-18: Die Protokoll-Baender sind aus der Page in
    parked/workshop-protokoll-baender.html gewandert — die .ws-*-
    Regeln bleiben schlafend fuer eine moegliche Wiederverwendung.]
   WORKSHOP-Page (Rene 2026-08-10, Konzept A "Protokoll"):
   Band-Kompartimente an Toplines (die .WHAT-DNA), Kapitel-
   nummern in der Rollin-Rolle mit 55%-Fokus, Register/Ledger/
   Funnel als Typo-Informationsgrafiken. KEIN Pin — Editorial-
   Reveals (wsInit). Real-Assets (Miro/PDF/Netlify) folgen von
   Rene; bis dahin beschriftete Platzhalter (.ws-ph/.ws-stack/
   .ws-browser). CTA-Ziel: Calendly-Link folgt (TODO im HTML).
   ========================================================== */
.page-content--workshop {
  padding-bottom: 0; /* HVR-20260914-16 (Rene): die CTA-Section fuellt genau einen Viewport (Anlauf und Fuss aus JS), danach nur die Fusszeile als Overlay */
  /* EINE Linienfarbe pro Seite (Rene 2026-08-11): Workshop-Theme =
     Signal-Rot-Linien (wie die Template-Konstruktionslinien, lineOp
     0.4) — nie gemischt mit Weiss. Weiss bleibt DATEN-Tinte
     (Text, Balken, Trapez-Punkte), nie Linie. */
  --ws-line: var(--line); /* HVR-20260914-31 */
  --ws-frame: rgba(243, 26, 39, 0.8);
}
/* Kompartiment-Toplines: rot statt des weissen .what-Atoms */
.page-content--workshop .ws__topline { background: var(--signal-red); opacity: 1; } /* HVR-20260914-31 */
/* Hero-Ergaenzung: sitzt IM ERSTEN VIEWPORT unter der grossen
   WORKSHOP-Headline des Seiten-Templates */
.ws-hero {
  /* pf-stage (100vh Headline-Buehne) geht voraus: -42vh zieht das
     Statement in den ERSTEN Viewport auf 58vh, unter die Headline */
  margin: -42vh 0 16vh 14.25%;
  width: 72%;
  font-family: var(--font-display);
  font-weight: 700;
  text-transform: uppercase;
  font-size: clamp(1.7rem, 2.6vw, 3rem);
  line-height: 1.16;
  letter-spacing: 0.01em;
  color: rgba(30, 30, 30, 0.85);
}
/* Band-Kompartiment = .WHAT-Anatomie (Topline + 8vh + Nummer|Body) */
.ws-band {
  position: relative;
  display: grid;
  grid-template-columns: 14% 1fr;
  margin-left: 14.25%;
  width: 72%;
  padding: 8vh 0;
}
/* .ws-num erweitert das .what__num-Atom (inkl. align-self:center =
   Bandmitte, Rene 09e) — KEIN Duplikat */
.ws-band.is-focus .ws-num { color: var(--signal-red); }
.ws-body { min-width: 0; }
.ws-body .ws__hl { margin-top: 0.35em; font-size: clamp(2rem, 4.2vw, 4.6rem); }
.ws-body .ws__sub { margin-top: 1.6em; }
.ws-body .ws__sub + .ws__sub { margin-top: 1.1em; }
/* Technische Labels (Eyebrow-Rolle + Trapez-Punkt, wie .what__topic) */
.ws__tech {
  font-family: var(--font-display);
  font-weight: 700;
  text-transform: uppercase;
  font-size: clamp(0.8rem, 0.95vw, 1.1rem);
  letter-spacing: 0.14em;
  color: rgba(237, 237, 237, 0.6);
  white-space: nowrap;
}
.ws__tech i {
  display: inline-block;
  width: 0.3em;
  height: 0.25em;
  font-style: normal;
  clip-path: polygon(0 0, 72.95% 0, 100% 100%, 0 100%);
  background: currentColor;
  margin-right: 0.32em;
}
.ws--hot, .ws--hottx { color: var(--signal-red); }
.ws-note {
  margin-top: 1.6em;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(0.85rem, 1.05vw, 1.2rem);
  color: rgba(237, 237, 237, 0.35);
}
/* 01: Facts als VIER gerahmte Messzellen (Rene-Briefing 2026-08-11:
   gleiche Hoehe, eckig, duenner Rahmen, ans Grid gebunden — Anatomie
   nach APPROVED PATTERN 11 / .what__aud-item, tile-gap wie Bento;
   KEINE SaaS-Cards: Outline-Frames ohne Fuellung/Schatten).
   Rahmen in STRUKTUR-Stufe --ws-line (AD D2, Linien-Leiter: 0.4 =
   Struktur · 0.8 = Transformationskern · voll/dashed = Zustand) */
.ws-facts { display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: 1fr; gap: var(--tile-gap); margin-top: 8vh; }
/* Zellen als Spalten-Flex: Sub-Labels sitzen auf EINER gemeinsamen
   Unterkante, unabhaengig von der (geautorten) Zeilenzahl des Werts */
.ws-facts > div { border: 1px solid var(--ws-line); padding: 1.6em 1.6em 1.9em; display: flex; flex-direction: column; }
.ws-facts b {
  color: #ededed;
  display: block;
  font-family: var(--font-display);
  font-size: clamp(1.7rem, 2.6vw, 3rem);
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: 0.01em;
}
.ws-facts span {
  display: block; margin-top: auto; padding-top: 0.8em;
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(0.8rem, 0.95vw, 1.1rem);
  letter-spacing: 0.14em; text-transform: uppercase;
  color: rgba(237, 237, 237, 0.55);
}
/* 02+07: ws-flow — das GEMEINSAME Dreistufen-Fluss-Atom (Rene-
   Briefing 2026-08-11, ersetzt Leitungsdiagramm UND Analysis-Funnel):
   Stufe | Link | Stufe | Link | Stufe. Link = 1px-Signal-Rot-Linie
   mit Trapez-Pfeilspitze (Logo-Punkt-Atom als Richtungsmarker).
   Die Mittelstufe ist der Transformationspunkt (breiter: 1.2fr). */
.ws-flow {
  display: grid;
  grid-template-columns: 1fr 2.8em 1.2fr 2.8em 1fr;
  /* Kopf-Achse statt Zentrier-Vakuum (AD D1): Stufen top-aligned,
     die Links liegen AUTORISIERT auf der Titel-Achse der Frames
     (border 1px + 1.6em Padding + halbe Term-Zeile) — Verbindung
     kommuniziert die Stufenfolge entlang der Kopfzeile */
  align-items: start;
  margin-top: 8vh;
}
/* Link-Achse = Mitte der ERSTEN Titelzeile der Frames (deterministisch
   aus den Bausteinen: Border + Frame-Padding + halbe Titelzeile);
   die --proc-Variante (Band 07) addiert die Nummern-Zeile. Numerisch
   verifiziert 1440/1920 (Delta < 4px, AD D1). */
.ws-flow__link { position: relative; display: block; height: 1px; background: var(--ws-frame); margin: 0 0.4em; align-self: start; margin-top: calc(1px + 1.6rem + 0.55 * clamp(1.3rem, 2vw, 2.3rem)); }
.ws-flow--proc .ws-flow__link { margin-top: calc(1px + 1.6rem + 1.5 * clamp(0.95rem, 1.2vw, 1.35rem) + 0.55em + 0.77 * clamp(1.3rem, 2vw, 2.3rem)); }
.ws-flow__link::after {
  content: ''; position: absolute; right: -1px; top: 50%;
  width: 0.55em; height: 0.458em; /* Logo-Punkt-Ratio 1.2014 (AD D5.2) */
  transform: translateY(-50%);
  clip-path: polygon(0 0, 72.95% 0, 100% 100%, 0 100%);
  background: var(--signal-red);
}
.ws-flow__msg { margin-top: 2em; }
.ws-flow__msg .ws__tech { color: rgba(237, 237, 237, 0.55); }
.ws-flow__msg .ws--hottx { color: var(--signal-red); }
/* Stufe 1 (Band 02): drei technische Quell-Bloecke, ans Grid gebunden */
.ws-src { border-top: 1px solid var(--ws-line); padding-top: 1.1em; }
.ws-src + .ws-src { margin-top: 1.6em; }
.ws-src .ws__tech { color: rgba(237, 237, 237, 0.85); }
.ws-src p {
  margin-top: 0.7em;
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(0.85rem, 1.05vw, 1.2rem); line-height: 1.45;
  color: rgba(237, 237, 237, 0.55);
  text-transform: uppercase; letter-spacing: 0.05em;
}
/* Stufe 2 (Band 02): Project-Baseline-Frame — die zentrale Sortierung;
   Missing = Signal Rot (einzige rote Zeile) */
.ws-base { border: 1px solid var(--ws-frame); padding: 1.6em 2em 2em; }
/* EINE Titel-Rolle fuer alle ws-flow-Stufentitel (AD D3, 04-Regel
   "eine Groesse pro Rolle"): Term-Rolle; Emphase des Transformations-
   punkts kommt vom 0.8-Frame + roter Nummer, nie von der Schriftgroesse */
.ws-base > b, .ws-hypo__t, .ws-flow__t {
  color: #ededed;
  display: block;
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(1.3rem, 2vw, 2.3rem);
  line-height: 1.1;
  text-transform: uppercase;
  letter-spacing: 0.01em;
}
.ws-base__grp { margin-top: 1.6em; border-top: 1px solid var(--ws-line); padding-top: 1.1em; }
.ws-base__grp em {
  display: block; font-style: normal;
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(0.95rem, 1.2vw, 1.35rem);
  text-transform: uppercase; letter-spacing: 0.05em;
}
.ws-base__grp--c em { color: rgba(237, 237, 237, 0.85); }
.ws-base__grp--a em { color: rgba(237, 237, 237, 0.55); }
.ws-base__grp--m em { color: var(--signal-red); }
.ws-base__grp p {
  margin-top: 0.5em;
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(0.85rem, 1.05vw, 1.2rem); line-height: 1.45;
  color: rgba(237, 237, 237, 0.55);
}
/* Stufe 3 (Band 02): Hypothesen = DASHED rote Frames (offen, noch
   nicht validiert — 07-Semantik: gestrichelt = offen) */
/* ws-hypo__t: Titel-Rolle siehe gemeinsame Regel bei .ws-base > b;
   Stage-3-Kopf beginnt auf der Kopf-Achse (Padding wie Frame-Titel) */
.ws-hypo__t { padding-top: calc(1px + 1.6em); }
.ws-hypo { margin-top: 1.2em; display: grid; gap: var(--tile-gap); }
.ws-hypo span {
  display: block;
  border: 1px dashed var(--signal-red);
  padding: 0.8em 1.2em;
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(0.95rem, 1.2vw, 1.35rem);
  text-transform: uppercase; letter-spacing: 0.05em;
  color: var(--signal-red);
}
/* 03: Bottleneck-Register (Index statt Netz) — seit Rene-Briefing
   2026-08-11 OHNE Abhaengigkeits-Spalte und OHNE Legende: ID | Name |
   Kategorie (rechtsbuendig an der 86.25%-Kante); Rot = kritisch
   erklaert sich selbst */
.ws-reg { margin-top: 8vh; border-top: 1px solid var(--ws-line); }
.ws-reg__row {
  display: grid;
  grid-template-columns: 10% 1fr 30%;
  align-items: baseline;
  padding: 1.1em 0;
  border-bottom: 1px solid var(--ws-line);
}
.ws-reg__cat { text-align: right; }
.ws-reg__row b {
  font-family: var(--font-display);
  font-size: clamp(0.95rem, 1.2vw, 1.35rem);
  color: rgba(237, 237, 237, 0.35);
  font-variant-numeric: tabular-nums;
}
.ws-reg__row.ws--hot b { color: var(--signal-red); }
.ws-reg__name {
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(0.95rem, 1.2vw, 1.35rem);
  text-transform: uppercase; letter-spacing: 0.05em;
  color: rgba(30, 30, 30, 0.85);
}
.ws-reg__row.ws--hot .ws-reg__name { color: var(--signal-red); }
.ws-reg__cat, .ws-reg__dep {
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(0.8rem, 0.95vw, 1.1rem);
  letter-spacing: 0.14em; text-transform: uppercase;
  color: rgba(237, 237, 237, 0.35);
}
.ws-reg__dep { text-align: right; }
/* 04: Rangfolge mit EINDEUTIGEN Stufen (Critical/High/Medium/Low,
   Rene 2026-08-11) + Bottleneck-Namen aus dem Register; der Resource
   Lever haengt als eigenes Teilband MIT Kontextsatz direkt darunter */
.ws-prio { margin-top: 8vh; }
.ws-rank__row {
  display: grid;
  grid-template-columns: 3.2em 9.5em 1fr;
  align-items: center;
  gap: 0 1.6em;
  padding: 0.8em 0;
}
.ws-rank__row b {
  font-family: var(--font-display);
  font-size: clamp(1.7rem, 2.6vw, 3rem);
  line-height: 1;
  color: rgba(237, 237, 237, 0.35);
  font-variant-numeric: tabular-nums;
}
.ws-rank__row--crit b { color: var(--signal-red); }
.ws-rank__lvl {
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(0.8rem, 0.95vw, 1.1rem);
  letter-spacing: 0.14em; text-transform: uppercase;
  color: rgba(237, 237, 237, 0.35);
}
.ws-rank__tag { display: inline-block; justify-self: start; font-size: clamp(0.95rem, 1.2vw, 1.35rem); width: auto; }
.ws-rank__tag .ws__redbox-lead { display: inline; }
.ws-rank__name {
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(1.3rem, 2vw, 2.3rem); line-height: 1.1;
  text-transform: uppercase; letter-spacing: 0.01em;
  color: rgba(30, 30, 30, 0.85);
}
.ws-rank__row:nth-child(2) .ws-rank__name { color: rgba(237, 237, 237, 0.7); }
.ws-rank__row:nth-child(3) .ws-rank__name { color: rgba(237, 237, 237, 0.55); }
.ws-rank__row:nth-child(4) .ws-rank__name { color: rgba(237, 237, 237, 0.4); }
.ws-lever {
  margin-top: 4vh;
  border-top: 1px solid var(--ws-line);
  padding-top: 1.6em;
}
.ws-lever__sub {
  margin-top: 0.8em;
  font-family: var(--font-display); font-weight: 400;
  font-size: clamp(1rem, 1.35vw, 1.55rem); line-height: 1.5;
  max-width: 34em;
  color: rgba(237, 237, 237, 0.55);
}
.ws-lever__row { margin-top: 1.2em; display: flex; flex-wrap: wrap; gap: 0.7em 2em; }
/* 05: BTS Resource-Meter (Rene-Briefing 2026-08-11, ersetzt die
   Balkenpaare samt Legende): EINE Basislinie 0..100 je Ressource,
   drei selbsterklaerende Elemente mit Direktbeschriftung —
   Given = gefuellter muted Balken · Gap = Signal-Rot-Segment ·
   Needed = weisse vertikale Ziel-Marke. KEINE separate Legende. */
.ws-ledger { margin-top: 8vh; border-top: 1px solid var(--ws-line); }
.ws-ledger__row {
  display: grid;
  grid-template-columns: 30% 1fr;
  gap: 0 1.6em;
  align-items: center;
  padding: 1.2em 0;
  border-bottom: 1px solid var(--ws-line);
}
.ws-meter { min-width: 0; }
/* Track traegt zwei Label-Ebenen (AD D4, Direktbeschriftung AN der
   Geometrie): GAP-Label ueber der Linie am roten Segment, GIVEN (0)
   und NEEDED (an der Tick-Position) darunter — keine Legende */
.ws-meter__track { position: relative; display: block; height: 3.4em; }
.ws-meter__track::before {
  content: ''; position: absolute; left: 0; right: 0; top: 50%;
  height: 1px; background: rgba(237, 237, 237, 0.18);
}
.ws-meter__given, .ws-meter__gap {
  position: absolute; top: 50%; height: 5px;
  transform: translateY(-50%);
}
.ws-meter__given { left: 0; width: calc(var(--g) * 1%); background: rgba(237, 237, 237, 0.35); }
.ws-meter__gap { left: calc(var(--g) * 1%); width: calc((var(--n) - var(--g)) * 1%); background: var(--signal-red); }
.ws-meter__tick {
  position: absolute; top: 50%; left: calc(var(--n) * 1%);
  width: 2px; height: 16px;
  transform: translate(-50%, -50%);
  background: rgba(237, 237, 237, 0.85);
}
.ws-meter em {
  font-style: normal;
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(0.8rem, 0.95vw, 1.1rem);
  letter-spacing: 0.14em; text-transform: uppercase;
  color: rgba(237, 237, 237, 0.55);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.ws-meter em.ws-meter__gaplab {
  position: absolute; top: 0;
  left: calc((var(--g) + var(--n)) / 2 * 1%);
  transform: translateX(-50%);
  color: var(--signal-red);
}
.ws-meter__vals { position: relative; display: block; height: 1.3em; }
.ws-meter__vals em { position: absolute; bottom: 0; }
.ws-meter__vals em:first-child { left: 0; }
.ws-meter em.ws-meter__need { left: calc(var(--n) * 1%); transform: translateX(-50%); color: rgba(237, 237, 237, 0.85); }
.ws-ledger__label b {
  color: rgba(30, 30, 30, 0.85);
  display: block;
  font-family: var(--font-display);
  font-size: clamp(1.3rem, 2vw, 2.3rem);
  line-height: 1.1;
  text-transform: uppercase; letter-spacing: 0.01em;
}
.ws-ledger__label span {
  display: block; margin-top: 0.4em;
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(0.85rem, 1.05vw, 1.2rem);
  color: rgba(237, 237, 237, 0.55);
}
/* Fusszeile: NUR der Schluesselwert (Strongest gap) rot — Lever und
   Readiness weiss 0.85 (AD D4b, Rot-Oekonomie; Werte bleiben Demo
   per Rene-Briefing) */
.ws-btsfoot { margin-top: 2em; display: flex; flex-wrap: wrap; gap: 1.1em 2.4em; }
.ws-btsfoot .ws__tech { color: rgba(237, 237, 237, 0.55); }
.ws-btsfoot .ws__tech em { font-style: normal; color: rgba(237, 237, 237, 0.85); }
.ws-btsfoot .ws__tech:first-child em { color: var(--signal-red); }
/* 06: Media-Platzhalter (Outline-Frame + Diagonalen, NIE Fake-Boards) */
.ws-media { margin-top: 8vh; display: grid; grid-template-columns: 2fr 1fr; gap: var(--tile-gap); }
.ws-ph {
  position: relative;
  border: 1px solid var(--ws-line);
  min-height: 220px;
  background-image:
    linear-gradient(to top right, transparent calc(50% - 0.5px), var(--ws-line) 50%, transparent calc(50% + 0.5px)),
    linear-gradient(to bottom right, transparent calc(50% - 0.5px), var(--ws-line) 50%, transparent calc(50% + 0.5px));
}
.ws-ph--big { grid-row: span 2; min-height: 452px; }
.ws-ph--wide { grid-column: 1 / -1; min-height: 180px; }
.ws-ph span {
  position: absolute; left: 1.2em; bottom: 1.1em; right: 1.2em;
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(0.8rem, 0.95vw, 1.1rem);
  letter-spacing: 0.14em; text-transform: uppercase;
  color: rgba(237, 237, 237, 0.55);
}
.ws-ph span b { display: block; color: rgba(237, 237, 237, 0.85); margin-bottom: 0.4em; }
.ws-caps { margin-top: 2.4em; display: grid; grid-template-columns: repeat(4, 1fr); gap: 2em; }
.ws-caps b {
  display: block;
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(0.8rem, 0.95vw, 1.1rem);
  letter-spacing: 0.14em; text-transform: uppercase;
  color: rgba(30, 30, 30, 0.85);
}
.ws-caps span {
  display: block; margin-top: 0.7em;
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(0.85rem, 1.05vw, 1.2rem); line-height: 1.45;
  color: rgba(237, 237, 237, 0.55);
}
/* 07: Dreistufen-Transformation im ws-flow-Atom (Basis-Styles bei
   Band 02). Stufen als technische Frames; die Mittelstufe ist der
   Transformationspunkt (Rahmen in Frame-Staerke, Nummer rot);
   Outputs in Stufe 3 = Signal Rot (finale Entscheidungs-Outputs) */
.ws-flow__stage--frame { border: 1px solid var(--ws-line); padding: 1.6em 2em 2em; align-self: stretch; }
.ws-flow__stage--core { border-color: var(--ws-frame); }
.ws-flow__no {
  display: block; font-style: normal;
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(0.95rem, 1.2vw, 1.35rem);
  color: rgba(237, 237, 237, 0.35);
  font-variant-numeric: tabular-nums;
}
.ws-flow__stage--core .ws-flow__no { color: var(--signal-red); }
.ws-flow__t { margin-top: 0.55em; } /* Groesse: gemeinsame Titel-Rolle bei .ws-base > b */
.ws-flow__list { margin-top: 1.2em; border-top: 1px solid var(--ws-line); padding-top: 1.1em; display: flex; flex-direction: column; gap: 0.8em; align-items: flex-start; }
.ws-flow__list .ws__tech { white-space: normal; }
.ws-flow__list--out .ws__tech { color: var(--signal-red); }
/* 08: Deliverables + Result-Typen */
.ws-deliv { margin-top: 8vh; display: grid; grid-template-columns: 1fr 1fr; gap: 6%; }
.ws-deliv > div { display: grid; grid-template-rows: subgrid; grid-row: span 4; align-content: start; }
.ws-deliv__t {
  color: #ededed;
  display: block;
  font-family: var(--font-display);
  font-size: clamp(1.7rem, 2.6vw, 3rem);
  line-height: 1;
  text-transform: uppercase; letter-spacing: 0.01em;
}
.ws-deliv__s {
  display: block; margin-top: 0.8em;
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(0.8rem, 0.95vw, 1.1rem);
  letter-spacing: 0.14em; text-transform: uppercase;
  color: rgba(237, 237, 237, 0.55); /* muted: Rot nur bei Zustand (AD) */
}
.ws-stack { position: relative; height: 300px; margin-top: 2.4em; }
.ws-stack i { position: absolute; border: 1px solid var(--ws-line); background: #201e1e; width: 62%; height: 260px; }
.ws-stack i:nth-child(1) { left: 0; top: 28px; }
.ws-stack i:nth-child(2) { left: 26px; top: 14px; }
.ws-stack i:nth-child(3) { left: 52px; top: 0; border-color: var(--ws-frame); }
.ws-stack > span {
  position: absolute; left: 66px; bottom: 26px;
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(0.8rem, 0.95vw, 1.1rem);
  letter-spacing: 0.14em; text-transform: uppercase;
  color: rgba(237, 237, 237, 0.55);
}
.ws-browser { position: relative; border: 1px solid var(--ws-frame); height: 300px; margin-top: 2.4em; }
.ws-browser__bar { position: absolute; left: 0; right: 0; top: 0; height: 2.4em; border-bottom: 1px solid var(--ws-line); display: flex; align-items: center; gap: 0.5em; padding-left: 1.1em; }
.ws-browser__bar i { width: 8px; height: 6.5px; clip-path: polygon(0 0, 72.95% 0, 100% 100%, 0 100%); background: rgba(237, 237, 237, 0.35); }
.ws-browser__lab {
  position: absolute; left: 1.2em; bottom: 1.1em;
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(0.8rem, 0.95vw, 1.1rem);
  letter-spacing: 0.14em; text-transform: uppercase;
  color: rgba(237, 237, 237, 0.55);
}
/* 09: Optionale Pfade (Zeilen an Hairlines, keine Pricing-Cards) */
.ws-paths { margin-top: 8vh; border-top: 1px solid var(--ws-line); }
.ws-paths > div {
  display: grid; grid-template-columns: 14% 1fr; gap: 0 4%;
  padding: 2.4em 0; border-bottom: 1px solid var(--ws-line);
  align-items: baseline;
}
.ws-paths em {
  font-style: normal;
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(0.8rem, 0.95vw, 1.1rem);
  letter-spacing: 0.14em; text-transform: uppercase;
  color: rgba(237, 237, 237, 0.35);
}
.ws-paths b {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(1.7rem, 2.6vw, 3rem);
  line-height: 1;
  text-transform: uppercase; letter-spacing: 0.01em;
  color: rgba(30, 30, 30, 0.85);
}
.ws-paths span {
  display: block; margin-top: 0.8em;
  font-family: var(--font-display); font-weight: 400;
  font-size: clamp(1rem, 1.35vw, 1.55rem); line-height: 1.5;
  max-width: 34em;
  color: rgba(237, 237, 237, 0.55);
}
/* 10: CTA — bewusst OHNE Eyebrow (Terminal-Bruch: der Schlusspunkt
   traegt nur Statement + Handlung) */
.ws-band--cta { padding-bottom: 4vh; }
.ws-cta {
  transition: background-color 0.25s ease;
  display: inline-block;
  margin-top: 2.4em;
  font-size: clamp(1.3rem, 2vw, 2.3rem);
  text-decoration: none;
  width: auto;
}
.ws-cta:hover { background: var(--brand-red); }
.ws-cta:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
/* Deliverable-Subheads: muted (Rot nur mit Zustandsbedeutung, AD-Review) */
/* Responsive (<=900: Stapel; Mobile-Feinschliff folgt mit der
   globalen Mobile-Runde der About-Strecke) */
@media (max-width: 900px) {
  .ws-band { display: block; }
  .ws-num { display: block; margin-bottom: 0.55em; }
  .ws-facts, .ws-caps, .ws-deliv { grid-template-columns: 1fr; gap: 4vh; }
  /* Facts-Zellen gestapelt, engerer Frame-Rhythmus (Rene 2026-08-11) */
  .ws-facts { gap: 2vh; }
  /* ws-flow: horizontale Story wird vertikale Sequenz — Links werden
     vertikale Pfeil-Linien nach unten (Rene-Briefing Responsive) */
  .ws-flow { grid-template-columns: 1fr; gap: 0; }
  .ws-flow__link { width: 1px; height: 2.8em; margin: 1.2em 0 1.2em 0.15em; justify-self: start; }
  .ws-flow__link::after {
    right: auto; top: auto; left: 50%; bottom: -1px;
    transform: translateX(-50%);
  }
  .ws-reg__row { grid-template-columns: 16% 1fr 34%; }
  .ws-rank__row { grid-template-columns: 2.4em 7em 1fr; gap: 0 0.8em; }
  .ws-ledger__row { grid-template-columns: 1fr; gap: 1.1em 0; }
  .ws-media { grid-template-columns: 1fr; }
  .ws-ph--big { grid-row: auto; }
  .ws-paths > div { grid-template-columns: 1fr; gap: 1.1em 0; }
}


/* ==========================================================
   WORKSHOP INTERACTIVE BOARD (Rene 2026-08-18b, Figma Frame 75,
   alle 7 Frames vermessen): Pin ab Scroll 0 (pf-stage entfaellt),
   Template-Headline liegt UEBER der Stage wie im Figma-Canvas.
   Farbwelt: Board-Navy #0A1E4E · Ende #9DCFF3 (= .wp-Grund, Rene
   2026-08-29: die Naht zu .PHASES ist EINE Farbe) · Moderator #D967F2
   · Project Lead #6FD7FF. Items = App-Artefakte (Collage-Look) —
   Rundungen/Schatten gehoeren zur Objekt-Sprache der Artefakte,
   nicht zur Site-UI. Z-Sandwich: grid 1 < folder-back 2 < items 3
   < folder-front 4 < comment/chip/nc 8 < cursor 10 — Items
   versinken ZWISCHEN den Ordner-Ebenen. wsBoardInit steuert alles.
   ========================================================== */
.hero__page[data-page="workshop"] .pf-stage { display: none; }
.wb-stage {
  position: relative;
  height: 100vh;
  overflow: hidden;
}
.wb-stage, .wb-stage * { cursor: var(--cursor-arrow); }

/* --- Board-Raster (Frame 4/7): Horizontale starten an v1 --- */
.wb-grid {
  position: absolute; z-index: 1; pointer-events: none;
  background: #F1F1F1; opacity: 0.13;
}
.wb-grid--v { top: 0; bottom: 0; width: var(--line-w); margin-left: calc(var(--line-w) / -2); transform-origin: 50% 0; } /* HVR-20260916-08 (Rene): dieselbe Zentrierung wie .wp-l--v/.wbts__l--v, vorher am Uebergang leicht versetzt */
.wb-grid--h { left: var(--wb-v1, 49px); right: 0; height: var(--line-w); transform-origin: 0 50%; } /* HVR-20260915-05 (Rene): bis zum Seitenrand (vorher Workshop-v3 85 %) */

/* --- Items: Basis absolut (Timeline bewegt .wb-item, Magnet .wb-mag) --- */
.wb-item { position: absolute; z-index: 3; will-change: transform; }
/* VOR-JS-Lage (AP-606): wsBoardInit laeuft erst im onComplete der
   Seiten-Oeffnung, also gut eine Sekunde nach dem Klick. Bis dahin standen
   12 von 13 Items in ihrer RUHELAGE voll im Bild und verschwanden erst bei
   ~1.8s wieder (gemessen 2026-09-01, Renes Befund). visibility statt
   display, damit flugFrom() weiter messen kann — ein verstecktes Element
   behaelt sein Layout. GSAP hebt es in wsBoardInit auf. */
.page-content--workshop .wb-item,
.page-content--workshop .wb-comment__card,
.page-content--workshop .wb-comment__dot,
.page-content--workshop .wb-hlwrap,
.page-content--workshop .wb-grid,
.page-content--workshop .wb-cursor { visibility: hidden; }
.wb-mag > img, .wb-mag > svg { display: block; width: 100%; height: auto; }
.wb-item img { user-select: none; -webkit-user-drag: none; }

/* Positionen/Groessen 1:1 aus Frame 4 (Basis 2000x942) */
.wb-blueprint { left: 7.4%;  top: 10.8%; width: 12.42%; transform: rotate(-19deg); }
.wb-gicons    { left: 24.5%; top: 5.1%;  width: 12.5%; }
.wb-tasks     { left: 64%;   top: -2%;   width: 17%;   transform: rotate(-4deg); }
.wb-check     { left: 80%;   top: 6%;    width: 5%; }
.wb-fin       { left: 66.8%; top: 26%;   width: 27%;   transform: rotate(-8deg); }
.wb-sheets    { left: 92.3%; top: 45%;   width: 4.3%;  transform: rotate(6deg); }
.wb-req       { left: 6.44%; top: 72.4%; width: 25.2%; transform: rotate(-8deg); }
.wb-fotos     { left: 26.25%;top: 59.3%; width: 10.3%; z-index: 2; }
.wb-search    { left: 42.75%;top: 21.2%; width: 14.25%; }
.wb-geo       { display: none; } /* Geo-Animation entfernt (Rene 2026-08-18h) — Zone gehoert der Kommentar-Karte */
.wb-donut     { left: 74.5%; top: 70.6%; width: 15%; }

/* Artefakt-Schatten: drop-shadow folgt der ALPHA-Form des Assets —
   transparente PNG-Raender werfen KEINEN Schatten (Rene 2026-08-18d) */
.wb-tasks img, .wb-fin img, .wb-req img {
  filter: drop-shadow(0 10px 22px rgba(0, 0, 0, 0.32));
}
.wb-blueprint img { filter: drop-shadow(0 10px 20px rgba(0, 0, 0, 0.30)); }
.wb-req img { border-radius: 12px; }

/* --- Searchbar (Frame 4: mittig, Pill waechst aus der MITTE;
   graue Tipp-Zeile, Signal-Rot-Caret wie die GIF-Referenz) --- */
.wb-search .wb-mag { display: flex; justify-content: center; }
.wb-search__pill {
  height: clamp(34px, 4.6vh, 46px);
  width: 100%;
  border-radius: 999px;
  background: #F0EFED;
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.30);
  display: flex; align-items: center;
  padding: 0 clamp(10px, 0.9vw, 16px);
  overflow: hidden;
}
.wb-search__lens { width: clamp(18px, 1.5vw, 26px); height: auto; flex: 0 0 auto; }
.wb-search__line {
  display: block; height: 2px; width: 52%;
  margin-left: 0.8em;
  background: #8A8785; border-radius: 2px;
  transform-origin: 0 50%;
}
.wb-search__caret {
  display: block; width: 2.5px; height: 1.15em;
  margin-left: 3px;
  background: var(--signal-red);
  opacity: 0;
}
@keyframes wb-blink { 0%, 55% { opacity: 1; } 56%, 100% { opacity: 0; } }
.wb-live .wb-search__caret { animation: wb-blink 0.9s steps(1) infinite; }

/* --- Headline zwischen den Raster-Horizontalen (36% / 53.5%) --- */
.wb-hlwrap {
  /* z 1: UNTER Items (z 3) UND beiden Ordner-Teilen (Back z 2 / Front
     z 4) — der Ordner verdeckt die Headline beim Ueberfahren komplett;
     hlwrap steht im DOM nach dem Ordner, gleiches z wuerde die
     Rueckseite ueberdecken (Rene 2026-08-20f) */
  position: absolute; z-index: 1;
  /* 49.5% = Mitte der Linienbox (v 35/64) — Text mittig h+v (Rene
     2026-08-18h); der Clip spannt die GANZE Box (36-53.5%), damit der
     Reveal-Cut weiter EXAKT auf der unteren Rasterlinie liegt */
  left: 49.5%; top: 36%; height: 17.5%;
  width: max-content; max-width: 52%;
  display: flex; align-items: stretch;
}
.wb-hlclip { overflow: hidden; height: 100%; display: flex; align-items: center; justify-content: center; }
.wb-hl {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 700;
  text-transform: uppercase;
  /* 3.9vw statt 4.5vw: die laengste Zeile "MISS A THING" passt damit in
     die Linienbox v35-64, in der die Headline laut Kommentar oben
     zentriert sitzt. Mit 4.5vw ragte sie links aus ihrer Box heraus und
     lief in die Kommentarkarte — gemessen 141px Ueberlappung bei 1920 und
     176px bei 1492, beide Texte voll sichtbar (Rene 2026-09-01). */
  font-size: clamp(2.2rem, 3.9vw, 4.7rem);
  line-height: 1.06;
  letter-spacing: 0.01em;
  text-align: center;
  color: #fff;
}

/* --- Donut (Google-Farben aus Frame 4, Karte MITTIG auf dem Ring) --- */
.wb-donut .wb-mag { position: relative; }
.wb-donut__card {
  position: absolute; left: 50%; top: 50%;
  width: 66%;
  background: #F4F3F1; border-radius: 12px;
  box-shadow: 0 14px 30px rgba(0, 0, 0, 0.28);
  padding: 0.7em 1em 0.75em;
  text-align: center;
}
.wb-donut__card b {
  display: block;
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(0.95rem, 1.35vw, 1.5rem);
  color: #201E1E;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.wb-donut__card span {
  display: block; margin-top: 0.25em;
  font-size: clamp(0.6rem, 0.72vw, 0.8rem);
  color: #7D7A73;
}

/* --- Ordner: Wrapper OHNE transform/z (kein Stacking-Context!),
   Back/Front tragen eigene z-Indizes im Stage-Kontext --- */
.wb-folder {
  position: absolute;
  left: 41.5%; top: 63.7%; width: 17.5%;
  aspect-ratio: 350 / 305;
  pointer-events: none;
}
.wb-folder__back, .wb-folder__front {
  position: absolute; inset: 0; width: 100%; height: 100%;
  will-change: transform;
}
.wb-folder__back { z-index: 2; filter: drop-shadow(0 10px 26px rgba(0, 0, 0, 0.30)); }
.wb-folder__front { z-index: 4; }

/* --- Kommentar (Frame 2/3): Blaeschen + grosse Karte an v2 --- */
.wb-comment { position: absolute; inset: 0; z-index: 3; pointer-events: none; } /* Item-Ebene: versinkt HINTER der Ordner-Klappe (z4) */
.wb-comment__dot {
  position: absolute; left: calc(14.25% + 10px); top: calc(77.8% + 10px); /* HVR-20260914-11 (Rene): Kommentarblase unter der Linie der Subline-Kachel, nicht mehr im Text */
  width: clamp(40px, 3.2vw, 56px); height: clamp(40px, 3.2vw, 56px);
  border-radius: 50% 50% 50% 6px;
  background: #FFFFFF;
  padding: 3px;
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.35);
}
.wb-comment__dot img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; display: block; }
.wb-comment__card {
  position: absolute; left: 16.5%; top: 36%;
  /* 17% ohne grossen px-Deckel: mit clamp(300px, 29%, 460px) wuchs die
     Karte prozentual, sobald der Viewport unter ~1586px fiel (dort greift
     der 460px-Deckel nicht mehr) — ihre rechte Kante wanderte von 41% auf
     45% und schob sich in die Headline. Jetzt skalieren beide proportional,
     der Abstand zwischen Kartenkante und Headline bleibt konstant. */
  width: clamp(240px, 17%, 380px);
  background: #FFFFFF;
  border-radius: 20px;
  padding: clamp(1em, 1.6vw, 1.7em);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.35);
  transform-origin: 6% 8%;
}
.wb-comment__head { display: flex; align-items: center; gap: 0.7em; }
.wb-comment__head img { width: clamp(30px, 2.4vw, 42px); height: clamp(30px, 2.4vw, 42px); border-radius: 50%; object-fit: cover; }
.wb-comment__head b { color: #1E1E1E; font-family: var(--font-display); font-weight: 700; font-size: clamp(0.85rem, 1vw, 1.1rem); }
.wb-comment__head span { color: #9B9892; font-size: clamp(0.7rem, 0.85vw, 0.95rem); }
.wb-comment__card p {
  margin: 0.9em 0 1.1em;
  color: rgba(30, 30, 30, 0.85);
  font-size: clamp(0.85rem, 1vw, 1.1rem);
  line-height: 1.5;
  max-width: 30ch;
}
.wb-comment__reply {
  display: flex; align-items: center; justify-content: space-between;
  background: #F1F0EE;
  border-radius: 999px;
  padding: 0.55em 0.55em 0.55em 1em;
  color: #8A8785;
  font-size: clamp(0.8rem, 0.95vw, 1.05rem);
}
.wb-comment__reply i {
  font-style: normal;
  width: 1.7em; height: 1.7em;
  border-radius: 50%;
  background: #E2E1DE; color: #6E6B66;
  display: grid; place-items: center;
  font-size: 0.9em;
}

/* --- Hero-Artefakte (Frame 1) --- */
.wb-chip {
  position: absolute; z-index: 8;
  left: 60.6%; top: 16.5%;
  background: #E5E3DF; color: #2B2A28;
  font-family: ui-monospace, 'SF Mono', Menlo, monospace;
  font-weight: 700;
  font-size: clamp(1rem, 1.6vw, 1.8rem);
  letter-spacing: 0.14em;
  padding: 0.42em 0.7em 0.46em;
  border-radius: 0.5em;
  white-space: nowrap;
}
.wb-newclient {
  position: absolute; z-index: 8;
  right: 2%; top: 5%;
  display: flex; align-items: center; gap: 0.55em;
  background: #0A0A0A;
  color: #F0E24E;
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(0.78rem, 0.95vw, 1.05rem);
  padding: 0.38em 1em 0.38em 0.38em;
  border-radius: 999px;
  white-space: nowrap;
}
.wb-newclient i {
  font-style: normal;
  width: 2em; height: 2em;
  border-radius: 50%;
  background: #F0E24E; color: #0A0A0A;
  display: grid; place-items: center;
  font-size: 0.82em;
  letter-spacing: 0;
}

/* --- Testimonials (Rene 2026-08-19s): Linienzelle rechts schraeg unter
   der Headline. Zitat in der Intro-Copy-Rolle (Display 400) auf dunklem
   Grund, roter Tipp-Caret (zeitbasiert erlaubt, wie Searchbar-Caret),
   Avatare als Kreis-Buttons: aktiv = Signal-Rot-Ring + Farbe, inaktiv
   Graustufen (Signal Rot traegt den Aktiv-Zustand nicht allein — Ring
   PLUS Entsaettigung). Kein Overlap der Kreise: der Seiten-BG blendet
   im Scrub um, ein fester Ring-Hintergrund wuerde falsch stehen. --- */
/* Positions-Rahmen des Moduls = die Linienbox (Baseline-Linie bis h3).
   KEIN overflow-Cut mehr (Rene 2026-08-20d): das Modul scrollt als Teil
   des Blatts mit den Linien nach oben aus dem Viewport, ein statisches
   Cut-Fenster wuerde es mitten im Bild abschneiden. pointer-events nur
   auf dem Modul. */
/* HVR-20260912-19: Eroeffnung in der Linienbox (ersetzt den Tipper, der auf den Report
   gewandert ist, HVR-20260912-20); Rollen wie .rp-open (Sticky-Statement, Intro-Copy) */
.wb-open-clip {
  position: absolute; z-index: 8;
  left: 0; right: 0; top: 41%; bottom: 22.2%;
  pointer-events: none; overflow: hidden;
}
.wb-open {
  position: absolute;
  left: calc(14.25% + var(--content-inset)); top: 50%; /* AD-Checkpoint 3 (D3): geteilte Textachse v2 + Inset wie .rp-open, kein geerbtes Tipper-Mass */
  width: min(52%, 40em);
}
@media (max-width: 600px) {
  /* AD-Checkpoint 3 (D4): bis v3 minus Inset, oben in der Linienbox verankert, damit die
     Copy nicht unter das Kommentarblaeschen laeuft; Statement eine Stufe kleiner */
  .wb-open { top: 0.4em; width: calc(72% - 2 * var(--content-inset)); transform: none; } /* Breite setzt JS auf die Live-v3 minus Inset */
  .wb-open .wb-open__hl { font-size: clamp(1.3rem, 2vw, 2.3rem); } /* Term-Statement-Rolle (AD-Checkpoint 4) */
  .wb-open .wb-open__sub { font-size: clamp(0.85rem, 1.05vw, 1.2rem); margin-top: 0.9em; } /* Sub/Copy-Rolle */
}
.wb-open__hl {
  margin: 0;
  font-family: "HK Grotesk Wide", var(--font-display);
  font-weight: 700; text-transform: uppercase;
  font-size: clamp(1.7rem, 2.6vw, 3rem); line-height: 1.16; letter-spacing: 0.01em;
  color: var(--signal-red);
}
.wb-open__sub {
  margin: 1.2em 0 0; max-width: 34em;
  font-family: "HK Grotesk Wide", var(--font-display);
  font-weight: 400;
  font-size: clamp(1rem, 1.35vw, 1.55rem); line-height: 1.5;
  color: #ededed;
}
/* HVR-20260912-20: Tipper-Band auf dem Report (helle Seite): Flusselement unter der
   Eroeffnung, Falzlinie oben, Zitat in der Intro-Copy-Rolle, Tinten aus dem Report-Theme */
/* HVR-20260914-41 (Rene): Original-Komposition der Workshop-Fassung (3f0103b): das
   Testimonial steht in der Linienzelle direkt unter dem Statement (h3 bei 77.8 vh bis
   zum Falz bei 100 vh), linksbuendig auf der Textachse, Zitat in der Display-Rolle des
   Originals (clamp .95rem / 1.15 vw / 1.3 rem), Caret Signal Rot, runde Avatare.
   Das eigene Band mit Falzlinie (.rp--testi) ist entfallen. */
.rp-open { position: relative; }
/* 2026-09-30 (Rene, /design-section: "Testimonials gehen unter"): die Linienzelle unter dem
   Statement (h3 77.8 vh bis Falz, v2 bis v3) ist eine Signal-Rot-Kachel, alle Texte weiss.
   Die Box spannt von Kante zu Kante des Eroeffnungsblocks (= v2 bis v3, s. .rp-open ohne
   46-em-Deckel); der Text bleibt ueber das Padding auf der Textachse (Inset). Caret,
   Trenner und Avatar-Ring folgen dem Grund. Kontrast Weiss auf #f31a27 ~4.2:1 (Rene-Vorgabe). */
.rp-open__testi { position: absolute; left: 0; right: 0; bottom: 0; height: 22.2vh; display: flex; align-items: center; padding: 0 var(--content-inset); background: var(--signal-red); color: #fff; }
.rp-open__testi .wb-testi { position: static; width: auto; max-width: 34em; pointer-events: auto; }
.rp-open__testi .wb-testi__quote { font-size: clamp(0.95rem, 1.15vw, 1.3rem); line-height: 1.55; color: #fff; margin-bottom: clamp(0.8rem, 1.6vh, 1.1rem); }
.rp-open__testi .wb-testi__caret { background: #fff; }
.rp-open__testi .wb-testi__name { color: #fff; font-size: clamp(0.8rem, 0.95vw, 1.1rem); } /* Eyebrow-Rolle (AD-Checkpoint 3, D5) */
.rp-open__testi .wb-testi__role { color: #fff; font-size: clamp(0.85rem, 1.05vw, 1.2rem); letter-spacing: 0.02em; } /* Sub/Copy-Rolle */
.rp-open__testi .wb-testi__div { background: #fff; }
.rp-open__testi .wb-testi__ava { box-shadow: 0 0 0 2px var(--signal-red); }
.rp-open__testi .wb-testi__ava:focus-visible { outline-color: #fff; }
.wb-testi-clip {
  position: absolute; z-index: 8;
  left: 0; right: 0; top: 41%; bottom: 22.2%;
  pointer-events: none;
}
.wb-testi {
  position: absolute;
  pointer-events: auto;
  /* Linksbuendig in der Linienbox (Rene 2026-08-20b): Abstand zur
     v2-Linie = identisch mit dem vertikalen Abstand zu den Horizontalen
     (JS errechnet beides aus der Boxhoehe); left ist Fallback.
     Vertikal mittig via top 50% des Fensters + GSAP yPercent -50. */
  left: 16%;
  top: 50%;
  width: min(46%, 560px);
}
.wb-testi__quote {
  font-family: var(--font-display); font-weight: 400;
  font-size: clamp(0.95rem, 1.15vw, 1.3rem);
  line-height: 1.55;
  color: #ededed;
  margin: 0 0 clamp(1.1rem, 2.4vh, 1.6rem);
  /* HVR-20260918-M10 (Rene: "bei Decide geht der erste Testimonial-Text
     aus dem Bildschirmrand raus, ab dem Text danach ist er sauber
     formatiert"): live nachgemessen - der GETIPPTE (Zeichen-fuer-Zeichen
     per rAF, main.js mountTipper/tLoop) Zwischenzustand kann fuer einzelne
     Frames breiter rendern als sein Container (230px Container vs. 276px
     gemessene Breite waehrend des Tippens), obwohl derselbe Text im
     fertigen Zustand exakt in den Container passt (gegengeprueft: voller
     Text ohne Tipper-Zwischenschritte = 230px, kein Overflow). max-width
     als harte Bremse, damit KEIN Zwischenzustand des Tippers je über die
     Containerkante hinaus rendern kann, unabhaengig von der genauen
     Ursache des Zwischenzustands. */
  max-width: 100%;
  overflow-wrap: break-word;
}
.wb-testi__caret {
  display: inline-block; width: 2px; height: 1em;
  background: #f31a27; margin-left: 2px;
  vertical-align: -0.12em;
  animation: wbTestiCaret 1s steps(1) infinite;
}
@keyframes wbTestiCaret { 0%, 100% { opacity: 1; } 50% { opacity: 0; } }
.wb-testi__row { display: flex; align-items: center; gap: clamp(0.8rem, 1.1vw, 1.2rem); }
/* Avatar-Reihe 1:1 nach der 21st.dev-Vorlage (Rene 2026-08-20a):
   ueberlappende Kreise mit Ring in Hintergrundfarbe (waehrend das Modul
   sichtbar ist, steht der Grund konstant auf #201e1e — es scrollt bei
   P0-P1 raus, lange vor der Navy-Blende), aktiv scale 1.1 + Farbe,
   NICHT ausgewaehlte exakt 30% kleiner (1.1 * 0.7 = 0.77) + Graustufen */
.wb-testi__avatare { display: flex; }
.wb-testi__ava {
  position: relative;
  width: clamp(2.2rem, 2.6vw, 2.75rem); height: clamp(2.2rem, 2.6vw, 2.75rem);
  padding: 0; border: 0; border-radius: 50%; overflow: hidden;
  background: transparent; cursor: var(--cursor-hand); flex: 0 0 auto;
  filter: grayscale(1);
  transform: scale(0.77);
  box-shadow: 0 0 0 2px #201e1e;
  transition: transform 0.3s ease, filter 0.3s ease;
}
.wb-testi__ava + .wb-testi__ava { margin-left: -8px; }
.wb-testi__ava:hover, .wb-testi__ava:focus-visible { filter: grayscale(0); transform: scale(0.81); }
.wb-testi__ava:focus-visible { outline: 2px solid #f31a27; outline-offset: 2px; }
.wb-testi__ava[data-active] { filter: grayscale(0); transform: scale(1.1); z-index: 2; }
/* Gesichter-Crops (Rene 2026-08-20a: mehr Gesicht, exakt zentriert):
   deterministisch vorberechnet — Gesichtszentrum (per Raster-Overlay
   gemessen) liegt im Kreiszentrum; width/left/top aus
   Bildseitenverhaeltnis + Zoomfaktor errechnet. Die Groessen-Relation
   aktiv/inaktiv laeuft ueber die KREISE (21st.dev-Vorlage), nicht mehr
   ueber das Bild. */
.wb-testi__ava img { position: absolute; display: block; height: auto; }
.wb-testi__ava[data-idx="0"] img { width: 280%; left: -98.4%; top: -55.4%; }  /* 255x320, Gesicht (53,30) */
.wb-testi__ava[data-idx="1"] img { width: 190%; left: -54.5%; top: -42.2%; }  /* 244x320, Gesicht (55,37) */
.wb-testi__ava[data-idx="2"] img { width: 280%; left: -98.4%; top: -29.4%; }  /* 320x275, Gesicht (53,33) */
.wb-testi__div { width: 1px; height: 2.1em; background: #ededed; flex: 0 0 auto; } /* HVR-20260914-31 */
.wb-testi__wer { display: flex; flex-direction: column; gap: 0.18em; min-width: 0; }
.wb-testi__name {
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(0.82rem, 0.95vw, 1.05rem);
  color: #ededed; white-space: nowrap;
}
.wb-testi__role {
  font-family: var(--font-display); font-weight: 600;
  font-size: clamp(0.68rem, 0.8vw, 0.88rem);
  letter-spacing: 0.06em;
  color: rgba(237, 237, 237, 0.55); white-space: nowrap;
}

/* --- Multiplayer-Cursor (Moderator fuehrt, Project Lead folgt) --- */
.wb-cursor {
  position: absolute; left: 0; top: 0; z-index: 10;
  pointer-events: none;
  will-change: transform;
}
.wb-cursor svg { width: 17px; height: auto; display: block; }
.wb-cursor span {
  display: inline-block;
  margin-top: 14px;
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(0.66rem, 0.8vw, 0.95rem);
  padding: 0.32em 0.75em; border-radius: 6px;
  color: #201e1e; white-space: nowrap;
}
.wb-cursor--mod span { background: #D967F2; }
.wb-cursor--pl span { background: #6FD7FF; }

/* --- Reduced Motion: statischer Board-Zustand (Frame 4) --- */
@media (prefers-reduced-motion: reduce) {
  .page-content--workshop .wb-stage { background: #0A1E4E; }
  .wb-comment, .wb-cursor, .wb-newclient, .wb-chip { display: none; }
  .wb-testi__caret { animation: none; } /* HVR-20260912-20: Tipper steht statisch (erstes Zitat) */
  .wb-open { transform: translateY(-50%); } /* HVR-20260912-19: Ruhelage ohne JS-Zentrierung */
}
@media (max-width: 900px) {
  /* <=900 aktuell NUR Cursor-Badges aus (Touch); der restliche
     Board-Feinschliff kommt mit der globalen Mobile-Runde */
  .wb-cursor { display: none; }

  /* HVR-20260917-T3 (Rene, Ticket 3 der Mobile-Subpage-Ueberarbeitung):
     "Kommentarblase viel zu gross ... alle anderen Items viel zu klein ...
     Suchleiste zu kurz ... Folder muss weiter nach unten und groesser sein
     ... Items die in den Folder fliegen muessen angepasst werden ... 'We
     do not miss a thing' max 2-3 Zeilig statt 4". Alle Fly-in-/Sink-/
     Cover-Berechnungen in main.js (insZiel(), coverScale(), sinkWeg) lesen
     .wb-folder per getBoundingClientRect()/offsetLeft/offsetWidth LIVE zur
     Renderzeit (main.js:2505,2528,2545) - eine CSS-Grössen-/Positions-
     aenderung am Folder wird von der Flug-Choreografie automatisch
     uebernommen, ohne dass main.js angefasst werden muss. */

  /* Kommentar-Karte: clamp(240px,17%,380px) griff mobil IMMER am 240px-
     Deckel (17% von 375px = 63.75px) - das ist die "viel zu grosse" Blase.
     Deckel auf einen fuer 375px sinnvollen Wert gesenkt, Innenabstand und
     Schrift mitskaliert. */
  /* HVR-20260918-M8 (Rene: "Kommentarblase kann 50% kleiner sein und alle
     anderen Items 50% groesser, sodass die Bildflaeche gut gefuellt ist").
     Karte von clamp(150px,46%,230px) auf ~50% davon gebracht (Deckel,
     Prozentwert UND Untergrenze jeweils halbiert), Innenabstand/Schrift
     proportional mitgezogen. */
  /* HVR-20260918-comment-wider (Rene: "Kommentarblase doppelt so breit
     machen, sodass man den Text besser lesen kann") - Breite/Innenabstand
     verdoppelt (deckt sich mit dem Original-Wert vor der HVR-20260918-M8-
     Halbierung: clamp(150px,46%,230px)/clamp(0.75em,4vw,1.1em) - kein neuer
     Wert, sondern der bekannte vorherige Zustand). Schriftgroesse bleibt wie
     angewiesen unveraendert, nur die Breite wurde genannt. */
  .wb-comment__card {
    width: clamp(150px, 46%, 230px);
    padding: clamp(0.75em, 4vw, 1.1em);
  }
  .wb-comment__card p { font-size: clamp(0.5rem, 2.2vw, 0.6rem); max-width: none; margin: 0.6em 0 0.7em; }
  .wb-comment__head b { font-size: clamp(0.5rem, 2.1vw, 0.6rem); }
  .wb-comment__head span { font-size: clamp(0.44rem, 1.8vw, 0.52rem); }
  .wb-comment__reply { font-size: clamp(0.48rem, 2vw, 0.56rem); }
  .wb-comment__dot {
    width: clamp(34px, 8vw, 44px); height: clamp(34px, 8vw, 44px);
  }

  /* Board-Items: auf Mobile ohne 2x-Zoom-Referenz "verschwimmen" die
     Desktop-Prozentsaetze (12-27% eines jetzt sehr schmalen Stage) zu
     kaum lesbaren Fetzen. HVR-20260918-M8 (Rene: "alle anderen Items 50%
     groesser, sodass die Bildflaeche gut gefuellt ist") - Werte gegenueber
     der bereits 1.35x vergroesserten T3-Fassung um weitere ~50%
     angehoben; wo das zu echten Kollisionen mit Nachbar-Items/Headline/
     Folder gefuehrt haette (per Rect-Scan an mehreren Scrub-Punkten
     nachgemessen), Ankerpositionen statt Groesse nachgezogen, damit der
     Groessengewinn erhalten bleibt. */
  .wb-blueprint { width: 25.2%; }
  /* gicons left von 24.5% (Desktop-Basiswert) verschoben - bei der neuen
     Breite ueberlappte es Blueprint (7.4-32.6%) um 1680px2, bei 30% noch
     963px2. Weiter auf 34% verschoben. */
  .wb-gicons    { left: 34%; width: 25.4%; }
  .wb-tasks     { width: 34.5%; }
  /* HVR-20260918-design-loop (Art Director, POLISH-Iteration 1): .wb-check
     erbte bei der 2x-Vergroesserung (5% -> 10.2% Breite) links/top
     unveraendert von Desktop (left:80%, top:6%) - bei doppelter Breite sass
     der Haken dadurch ~1480px2 in der Tasks-Karte und verdeckte die
     Completion-Zeile, waehrend das Schwesterpaar .wb-fin/.wb-sheets fuer
     denselben Sprung eigene Ankerpositionen bekam (s.u.). Jetzt an die
     obere rechte Aussenkante der Karte versetzt (analog .wb-sheets an
     .wb-fin: Ueberlapp nur auf dem Kartenrand, nicht auf dem Inhalt). */
  .wb-check     { left: 89%; top: 11%; width: 10.2%; }
  /* .wb-fin von 21% auf 31.5% (x1.5) - bei unveraendertem left:78% waere
     die rechte Kante bei 109.5% (Overflow). Neu links unter den Top-Icons
     platziert (left:58%,top:15%) - dort ist bei den GROESSEREN
     Blueprint/Gicons/Tasks/Check-Boxen (s.o.) noch Luft bis zur
     Headline-Zone (36%). */
  .wb-fin       { left: 58%;   top: 15%; width: 31.5%; }
  .wb-sheets    { left: 86%;   width: 8.7%; }
  /* .wb-req von 24% auf ~26% (nicht volle 1.5x=36%) - bei voller
     Vergroesserung reichte die (durch die -8deg-Rotation gemessen um den
     Faktor ~1.08 aufgeweitete) rechte Kante bis 44% und ueberlappte den
     jetzt groesseren Folder (links jetzt 30%, s.u.) deutlich. 26% ist der
     groesste Wert, der noch mit Puffer vor der neuen Folder-Kante endet. */
  /* req von den vollen 1.5x (36%) auf 20% zurueckgenommen - selbst 26%
     ueberlappte den Folder noch messbar (914px2, s. Historie oben). Bei
     20% (gemessen ~21.6% durch die -8deg-Rotation) bleibt Puffer vor der
     neuen Folder-Kante (30%). */
  .wb-req       { width: 20%; }
  .wb-fotos     { width: 20.9%; }
  /* .wb-donut: volle 1.5x (26%->39%) ueberliefe rechts (69%+39%=108%) UND
     kollidiert bei 1:1-Seitenverhaeltnis (Hoehe = Breite in px) vertikal
     mit dem jetzt tieferen/groesseren Folder. Auf 30% begrenzt und nach
     oben/links gezogen (left:64%,top:58%), damit unter der Donut noch
     sichtbarer Board-Grund bleibt, bevor der Folder beginnt. */
  .wb-donut     { left: 64%;   top: 58%; width: 30%; }
  .wb-donut__card {
    width: 92%;
    padding: 0.5em 0.6em 0.55em;
  }
  .wb-donut__card b { font-size: clamp(0.55rem, 2.7vw, 0.85rem); }

  /* Suchleiste: bereits in T3 auf eine lesbare Breite gebracht - jetzt
     nochmal ~1.3x (statt voller 1.5x, um innerhalb 0-100% zu bleiben) und
     neu zentriert. top von der Basisregel (21.2%) auf 29% verschoben -
     dort ueberlappte sie sowohl Blueprint (endet ~22%) als auch das neu
     platzierte Fin (15-26.75%); bei 29% liegt sie klar darunter und noch
     mit Puffer vor der Headline-Zone (36%). */
  .wb-search { left: 15%; top: 29%; width: 60%; }

  /* Headline: max-width:52% (195px bei 375) zwang "MISS A THING" zu einem
     dritten Zeilenumbruch (4 Zeilen statt der gewuenschten 2-3, das feste
     <br> im Markup gibt bereits "We do not"/"miss a thing" vor). Auf 90%
     angehoben, Schriftgroesse mobil eigens gedeckelt, damit beide Haelften
     wieder je einzeilig passen. */
  .wb-hlwrap { max-width: 90%; }
  .wb-hl { font-size: clamp(1.7rem, 8.2vw, 2.6rem); }

  /* Ordner: 17.5% (65.6px bei 375) war zu klein fuer die "Fullscreen"-
     Wirkung beim Andocken; "weiter nach unten" - top von 63.7% auf 74%. */
  /* HVR-20260918-M8 (Rene: "Items, die in den Folder fliegen, koennen
     groesser sein und sich mehr im Bildschirm verteilen" + genereller
     50%-groesser-Auftrag). 34%->46% (nicht volle 1.5x=51%, das liesse zu
     wenig Puffer zu .wb-req links und zum Stage-Rand rechts) - main.js
     insZiel()/coverScale()/sinkWeg lesen die Folder-Groesse/-Position LIVE
     (main.js:2505,2528,2545), die Flug-/Sink-/Fullscreen-Choreografie
     passt sich automatisch an, kein main.js-Edit noetig. */
  .wb-folder { left: 30%; top: 72%; width: 46%; }
}


/* ===========================================================
   .PHASES — Workshop-Folgesection
   Figma-Node 1993:92 (Rene 2026-08-27), Canvas 2048 x 960.
   Loest Node 1922:1278 ab, in dem 04/05/06 leer waren und 03 nur
   drei Platzhalter-Primitive trug.

   FIDELITY-PRINZIP: Jede Zahl hier ist ein GEMESSENER Wert aus dem
   Node-Rendering (2048px breit = 1 Bildpunkt je Figma-Einheit,
   Genauigkeit +/-1). Umrechnung ueber EINE Einheit:
       --u = 100cqw / 2048
   Die Unruhe der Vorlage (Einzug 65-145, Rand oben 47-79) ist
   UEBERNOMMEN, nicht kalibriert — sie ist Renes Entwurf.

   ACHSEN-VERTRAG (Rene 2026-08-27) — bitte nicht vermischen:
     JS  besitzt X: wpAnchors setzt --v1/--v2/--v3 als Inline-Props.
     CSS besitzt Y: --h191/--h423/--h671/--h918 stehen HIER.
   Traegt jemand einen --h*-Wert in die JS-Liste, gewinnt Inline
   stumm gegen dieses Stylesheet (AP-401).

   FORMAT: Die Section folgt dem Desktop-Format der Live-Website
   (height:100vh wie die Nachbarsection .wb-stage), NICHT der
   Figma-Canvas-Proportion 2048/960. X bleibt breitenbasiert,
   die vier Horizontalen sind Anteile der Sectionhoehe.
   =========================================================== */

/* Marken-Fonts, NUR fuer .PHASES. Originale aus brand-assets/fonts/. */
@font-face {
  font-family: "HK Grotesk Wide";
  src: url("../assets/fonts/HKGroteskWide-Regular.otf") format("opentype");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "HK Grotesk Wide";
  src: url("../assets/fonts/HKGroteskWide-Bold.otf") format("opentype");
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Montserrat";
  src: url("../assets/fonts/Montserrat-Bold.ttf") format("truetype");
  font-weight: 700; font-style: normal; font-display: swap;
}

.wp {
  position: relative;
  width: 100%;
  /* Rene 2026-09-23: 118vh statt 100vh — Grafik UND Copy stehen dauerhaft in
     der Zelle (kein Kacheltausch mehr); Kopfband bleibt pixelgleich, der
     Zugewinn geht in die zwei Zeilen. */
  height: 118vh;
  min-height: calc(660*var(--u));   /* Sicherung fuer sehr flache Viewports */
  container-type: inline-size;      /* NUR inline — 'size' zoege alle %-Y auf 0 */
  /* Rene 2026-08-29: war #c2d9ef (Figma-Node 1922:1278, zuvor LOCKED).
     Bewusst aufgehoben fuer die nahtlose Uebergabe — identisch mit
     WB.hell/WP.grund in main.js, damit Ordner-Front, Board-Seitengrund
     und dieser Grund EINE Farbe sind. Aendern nur im Dreiklang. */
  background: #9DCFF3;
  color: #000;
  overflow: hidden;
  --u: calc(100cqw / 2048);
  --sig: var(--signal-red);

  /* X — No-JS-Fallback; mit JS gewinnt immer der gemessene Live-Anker */
  --v1: calc(75*var(--u));
  --v2: calc(289*var(--u));
  --v3: calc(1746*var(--u));

  /* Innenteiler: exakte Drittel zwischen v2 und v3, wie in der Vorlage */
  --c1: calc(var(--v2) + (var(--v3) - var(--v2)) / 3);
  --c2: calc(var(--v2) + (var(--v3) - var(--v2)) * 2 / 3);

  /* Y — Anteile der Sectionhoehe (191/423/671/918 geteilt durch 960) */
  /* HVR-20260914-14 (Rene): Endlage fokussiert den Kachelbereich; Kopf bleibt (h191), das
     Kachelraster rueckt um 6 % nach oben: Luft unter dem Raster 10.4 % = Luft ueber dem Kopf
     (vorher 4.4 % unten, das Raster stand am Viewportrand). */
  /* Rene 2026-09-23: auf 118vh umgerechnet (Kopf und untere Luft pixelgleich,
     Zeilen ~35 % hoeher): 19.896/1.18, 38.063/1.18, Mitte, 100-10.375/1.18 */
  --h191: 16.861%;
  --h423: 32.257%;
  --h671: 61.727%;
  --h918: 91.197%;
}
.wp * { box-sizing: border-box; }
/* AP-306: <i> wird hier als Zeichenflaeche benutzt, nicht semantisch.
   Ohne das erbt jedes davon die UA-Kursive, und HK Grotesk Wide hat
   keinen Italic-Schnitt — Chrome synthetisiert dann eine Schraege. */
.wp i { font-style: normal; }

/* --- Konstruktionslinien --------------------------------------------
   Gemessen: alle #f31a27, Figma-Strichstaerke 0.5, gerendert mit 1px.
   Opazitaet 0.4 = STRUKTUR-Sprosse der Workshop-Leiter (AP-503). */
/* z-index 5: die Rasterlinien sind Architektur und gehoeren ueber den
   Zellinhalt. Die Zellkante liegt exakt auf der Linienzeile, deshalb lag
   die Linie INNERHALB der Zelle und wurde von abfahrenden Illustrationen
   ueberdeckt — gemessen bis 44.5 % der Linienlaenge. Ein overflow:hidden
   auf der Zelle schuetzt die Linie nicht, sie ist kein Kind der Zelle. */
.wp-l { position: absolute; z-index: 5; background: #F1F1F1; opacity: 1; } /* HVR-20260914-31: volle Farbstaerke */ /* HVR-20260914-13 (Rene): Linien weiss wie in der Board-Section, kein Rot */
/* margin-left:-0.5px zentriert die Linie auf ihrem Anker, genau wie
   translateX(-0.5px) es bei den Seitenlinien tut. Ohne das sprang die
   Achse an der Schnittkante um 0.50/0.56/0.75px — bei DPR 2 ein bis
   anderthalb Geraetepixel, sichtbar genau dort, wo die Linie aus der
   Nachbarsection kommt. transform bleibt frei fuer GSAPs scaleY. */
.wp-l--v1   { left: var(--v1); top: 0; width: var(--line-w); height: 100%; margin-left: calc(var(--line-w) / -2); }
.wp-l--v2   { left: var(--v2); top: 0; width: var(--line-w); height: 100%; margin-left: calc(var(--line-w) / -2); }
.wp-l--v3   { left: var(--v3); top: 0; width: var(--line-w); height: 100%; margin-left: calc(var(--line-w) / -2); }
/* LINIENREGEL (Rene 2026-08-27): keine Linie endet auf freier Flaeche.
   Erlaubte Enden sind der Desktop-Rand, ein Content-Item oder eine
   Linie, auf die sie trifft. v1/v2/v3 laufen als Live-Anker in
   .wb-stage weiter und enden damit nie.
   v213 (10.40%) ist auf Renes Anweisung ERSATZLOS ENTFERNT: sie hatte
   keinen .Havior-Anker, kein Element loeste auf sie auf, und sie war
   die einzige Linie ohne Fortsetzung in der Nachbarsection. */
.wp-l--h191 { left: var(--v1); right: 0; top: var(--h191); height: var(--line-w); } /* HVR-20260915-05: bis zum Seitenrand */
.wp-l--h423 { left: var(--v1); right: 0; top: var(--h423); height: var(--line-w); } /* HVR-20260915-05: bis zum Seitenrand */
.wp-l--h918 { left: var(--v1); right: 0; top: var(--h918); height: var(--line-w); } /* HVR-20260915-05: bis zum Seitenrand */
.wp-l--h671 { left: var(--v1); right: 0; top: var(--h671); height: var(--line-w); } /* HVR-20260915-05: bis zum Seitenrand */ /* HVR-20260914-35 (Rene): Reihenlinie der BTS-Reihe laeuft wie h423/h918 ab v1 (vorher ab v2, links fehlte die Linie) */
/* Die Innenteiler sind in der Vorlage exakt die Drittel von v2..v3
   (288 + 1457/3 = 773.67 / 1259.33). Als Canvas-Absolutwerte wichen
   die drei Spalten live um 6.2u voneinander ab statt um 3u. */
.wp-l--c773 { left: var(--c1); top: var(--h423); width: var(--line-w); height: calc(var(--h918) - var(--h423)); }
.wp-l--c1260{ left: var(--c2); top: var(--h423); width: var(--line-w); height: calc(var(--h918) - var(--h423)); }

/* --- Kopf: haengt am Anker, nicht umgekehrt --------------------------
   191-69 = 122u Abstand Headline-Oberkante zur Baselinelinie,
   191-172 = 19u fuer den Punkt, 263-191 = 72u fuer den Intro.
   font-size und line-height liegen beide in --u, der Baseline-Offset
   ist damit ein fester Vielfacher von --u und trifft h191 auf JEDER
   Breite konstruktiv — ohne Messung. */
.wp-dot {
  position: absolute;
  /* Der Punkt ist KIND der Headline, nicht ihr Geschwister: so traegt er
     in beiden Modi denselben Bezug. Als Geschwister loeste er im Stapel
     gegen .wp auf und landete an der Sectionkante — die Headline las
     dort "PHASES" statt ".PHASES".
     AP-206: In der Vorlage liegt v2 auf x288 und der Punkt beginnt auf
     289, er BERUEHRT die Linie. Die Headline sitzt auf v2+25u, der
     Punkt also 24u links von ihrer Kante; 191-69-19 = 103u darunter. */
  left: calc(-24*var(--u)); top: calc(103*var(--u));
  width: calc(21*var(--u)); height: calc(19*var(--u));
  background: #F1F1F1; /* HVR-20260914-13: Punkt weiss */
  clip-path: polygon(0 0, 72.95% 0, 100% 100%, 0 100%);
}
.wp-hl {
  position: absolute;
  left: calc(var(--v2) + 25*var(--u)); top: calc(var(--h191) - 122*var(--u));  /* Referenz 313-288 */
  margin: 0;
  font-family: "Montserrat", var(--font-display);
  font-weight: 700;
  font-size: calc(100.1*var(--u));
  line-height: calc(172.172*var(--u));
  letter-spacing: 0;
  color: #000;
  white-space: nowrap;
}
.wp-intro {
  position: absolute;
  left: calc(var(--v2) + 39*var(--u)); top: calc(var(--h191) + 72*var(--u));  /* Referenz 327-288 */
  width: calc(1037*var(--u));
  margin: 0;
  font-family: "HK Grotesk Wide", var(--font-display);
  font-weight: 400;
  font-size: calc(25*var(--u));
  line-height: calc(30*var(--u));
  color: #000;
}

/* --- Rasterzellen als Bezugsrahmen ----------------------------------
   Aussenkanten sind die LIVE-Anker, nicht die Canvas-Werte — sonst
   kehrt der breitenwachsende Versatz zurueck (+3.2px @1425). */
.wp-cell { position: absolute; }
.wp-cell--c1 { left: var(--v2); width: calc(var(--c1) - var(--v2)); }
.wp-cell--c2 { left: var(--c1); width: calc(var(--c2) - var(--c1)); }
.wp-cell--c3 { left: var(--c2); width: calc(var(--v3) - var(--c2)); }
.wp-cell--r1 { top: var(--h423); height: calc(var(--h671) - var(--h423)); }
.wp-cell--r2 { top: var(--h671); height: calc(var(--h918) - var(--h671)); }

/* Zellen-Label: 6u eingerueckt, Grundlinie 37u ueber der Zeilenlinie */
/* === KACHELFUSS: Zahl und Titel ====================================
   FIDELITY, Figma-Node 1993:92, exakt aus get_design_context gelesen —
   nicht aus dem Screenshot geschaetzt:
     Zahl  Montserrat Bold 90, line-height 113.167, rgba(255,255,255,0.2)
     Titel Montserrat Bold 20, #242424, VERSALIEN
     beide linksbuendig auf 300u; Zellkante v2 = 0.1425 x 2048 = 291.84u
     -> 8.16u Einzug
     beide faktisch auf DERSELBEN Grundlinie (Zahl 658.85, Titel ~655),
     der Titel liegt also ueber der unteren Haelfte der Zahl
     Titelgrundlinie 11u ueber der Zellunterkante, an beiden Reihen
     gegengeprueft (666-655 und 916-905)

   Der vorherige Stand war meine Auslegung von "Zahl in Kachelhoehe":
   417u, Schwarz bei 7 %, an der Zellkante beschnitten, HK Grotesk Wide.
   Nichts davon steht in der Vorlage. */
.wp-cell {
  /* HVR-20260911-13 (Rene D4): Zahl und Titel mindestens 0.5 x Inset von der
     Zellkante (Tinte); 2u = Glyphenvorlauf. Figma-Wert 8.16u bleibt Untergrenze. */
  --kachel-links: max(calc(8.16*var(--u)), calc(var(--content-inset) / 2 + 2*var(--u)));
  /* Grundlinienlage, aus den Fontmetriken gerechnet und danach am
     gerenderten Stand nachgemessen. Montserrat: Ascender 0.968,
     Descender 0.251. */
  /* Werte aus der Rechnung, danach am gerenderten Stand nachgemessen und
     korrigiert: die Rechnung setzte den Titel 5.79u und die Zahl 3.86u zu
     hoch. Ziel laut Figma: Titelgrundlinie 11u ueber der Zellunterkante,
     Zahlgrundlinie 3.85u darunter (658.85 gegen 655 in der Vorlage). */
  --titel-fuss: calc(8.20*var(--u));
  --zahl-fuss: calc(-17.03*var(--u));
}
.wp-num {
  position: absolute; z-index: 0;
  left: var(--kachel-links); bottom: var(--zahl-fuss);
  font-family: "Montserrat", var(--font-display);
  font-weight: 700;
  font-size: calc(90*var(--u));
  line-height: calc(113.167*var(--u));
  color: rgba(255, 255, 255, .2);
  white-space: nowrap;
  pointer-events: none; user-select: none;
}
.wp-fuss {
  position: absolute; z-index: 3;
  left: var(--kachel-links); top: var(--titel-oben); /* Rene 2026-09-23b: Titel oben links (vorher bottom: --titel-fuss) */
  display: block;
  /* Der Strut des Kastens bestimmt die Zeilenbox mit. Ohne diese Zeile
     erbte er eine nicht-u-basierte Schriftgroesse, und die Titelgrundlinie
     driftete zwischen den Breiten: gemessen 8.82u bei 1920 gegen 10.99u
     bei 1440, wo beide 11u sein muessen. Mit identischem Strut haengt die
     Grundlinie nur noch an --u. */
  font-size: calc(20*var(--u)); line-height: 1;
}
.wp-lab {
  font-family: "Montserrat", var(--font-display);
  font-weight: 700; text-transform: uppercase;
  font-size: calc(20*var(--u)); line-height: 1;
  letter-spacing: 0; color: #242424;
  white-space: nowrap;
}

/* Die Illustration steht vor der Zahl, hinter dem Fuss. */
.wp-art { z-index: 1; }

/* Der Schacht: was die Kachel nach oben verlaesst, wird an ihrer Kante
   beschnitten. Renes Auflage, dass die Animation nur INNERHALB der
   Kachel agiert. */
.wp-cell { overflow: hidden; }

/* === TEXTZUSTAND ====================================================
   Renes Auflage: "mit Abstand zu allen Raendern sauber und gut lesbar
   ... nicht bis zum Linienrand, sondern Luft zum Atmen".

   39u links und rechts, nicht 6u wie vorher und nicht 34u wie im
   Konzept: 34u verfehlte die linke Kante des Section-Intros um 4px —
   eine Beinaheausrichtung ist schlechter als eine klare Differenz.
   39u ist exakt die Intro-Kante (base.css .wp-intro), also eine im
   Bild bereits vorhandene Linie.

   Unten haelt der Block die ZIFFERNKRONE frei: Grundlinie 11u plus
   Versalhoehe 0.7 x 90u = 63u ergibt eine Ink-Oberkante bei 74u; der
   Block endet mit Abstand darueber. Ohne das lag die kleinste Type der
   Section auf der groessten.

   flex-start statt center: bei center haengt die Oberkante an der
   Zeilenzahl, und Nachbarkacheln derselben Reihe standen um 8.4-10.9u
   gegeneinander versetzt. */
.wp-cell {
  --luft: calc(39*var(--u));        /* links/rechts: exakt die Intro-Kante */
  --luft-oben: calc(36*var(--u));   /* AD 2026-09-23: Luft oben ~ Item->Copy (vorher 22u) */
  /* Der Korridor endet ueber dem TITEL, nicht ueber der ganzen Ziffer.
     Titelgrundlinie 11u + Versalhoehe 0.7 x 20u = 14u ergibt eine
     Ink-Oberkante bei 25u; 34u laesst 9u Abstand.

     Vorher standen hier 76u, also Freiraum fuer die komplette
     Ziffernkrone. Damit blieben bei 16:9-Viewports nur 1u Reserve im
     Korridor und der Text wurde auf Laptopgroessen abgeschnitten
     (Renes Screenshot). Der Tausch ist bewusst: die Zahl ist ein Geist
     bei 20 % Weiss — Text darueber bleibt lesbar (gemessener Kontrast
     ueber der Ziffer 14.09:1 gegen 12.64:1 auf dem Grund). Ein
     abgeschnittener Satz ist der schwerere Fehler. */
  --zahl-frei: calc(34*var(--u));
  /* Rene 2026-09-23: Bildzone 144u oben, Items auf gemeinsamer Unterkante, Copy 22u darunter. */
  /* Rene 2026-09-23b: Titel oben links in der Zelle; Bildzone rueckt um Titelzeile
     (20u) + 14u Luft nach unten. */
  --titel-oben: var(--luft-oben);
  --art-bottom: calc(var(--luft-oben) + 34*var(--u) + 144*var(--u)); /* gemeinsame Unterkante aller Items */
  --copy-oben: calc(var(--art-bottom) + 34*var(--u));  /* AD 2026-09-23: eine Copy-Zeile Abstand (vorher 22u) */
}
.wp-info {
  position: absolute; z-index: 2;
  /* AD 2026-09-23 (Major): Copy teilt die Linkskante mit Zahl und Fusslabel
     (--kachel-links) — eine Kante je Zelle statt zweier um 13-16px versetzter. */
  left: var(--kachel-links); right: var(--luft);
  top: var(--copy-oben); bottom: var(--zahl-frei);
  display: flex; flex-direction: column; justify-content: flex-start;
  gap: calc(10*var(--u));
  pointer-events: none;
  /* Der Korridor klippt selbst. Bewegt werden die ZEILEN darin, nicht der
     Kasten — sonst kommt der Text von unterhalb der Zelle herauf und
     streift dabei das Titelband. Mit dem Clip existiert er unterhalb
     seines Korridors gar nicht. */
  overflow: hidden;
}
/* Eyebrow-Rolle und Sub/Copy-Rolle aus 04-typography, unveraendert
   uebernommen. Die vorherigen u-Werte lagen mit 9.14px und 10.55px bei
   1440 UNTER dem clamp-Boden der jeweils kleinsten Rolle (12.8 / 13.6px)
   — das waren zwei neue Groessen ausserhalb der Rollenordnung. */
.wp-info__k {
  margin: 0;
  font-family: "HK Grotesk Wide", var(--font-display);
  font-weight: 700; text-transform: uppercase;
  /* vmin statt vw: der Kasten haengt an der ZELLHOEHE, die Zellhoehe an
     vh. Eine vw-Kopplung laeuft ueber, sobald das Seitenverhaeltnis
     flacher wird — 04-typography Regel 2. Der Faktor haelt den Wert bei
     1920x1080 exakt wie bisher (17.6px), nimmt aber auf flachen Laptops
     mit der Kastenhoehe ab. */
  font-size: clamp(0.8rem, 1.63vmin, 1.1rem); line-height: 1.2;
  letter-spacing: .14em; color: var(--sig);
}
.wp-info__t {
  margin: 0 0 calc(6*var(--u));
  font-family: "HK Grotesk Wide", var(--font-display);
  font-weight: 400;
  font-size: clamp(0.85rem, 1.78vmin, 1.2rem); line-height: 1.45; color: #000;
}
.wp-info__t:last-child { margin-bottom: 0; }

/* Artefaktzone: zentriert in der Zelle, mit dem gemessenen Versatz der
   Vorlage. Formel: 50% - halbe Hoehe + Versatz. Damit bleibt die
   Vorlagen-Position erhalten, unabhaengig von der Zellhoehe. */
.wp-art { position: absolute; }

/* === 01_Essentials — x363 y502 295x75 ============================== */
.wp-art--ess { left: calc(74*var(--u));  top: calc(var(--art-bottom) - 75*var(--u)); width: calc(295*var(--u)); height: calc(75*var(--u)); }
.wp-ess { position: absolute; top: 0; border-radius: 50%; background: #fff; }
.wp-ess--on  { width: calc(75*var(--u)); height: calc(75*var(--u)); }
.wp-ess--off { width: calc(58*var(--u)); height: calc(58*var(--u)); top: calc(8*var(--u)); }
.wp-ess:nth-of-type(1) { left: 0; }
.wp-ess:nth-of-type(2) { left: calc(114*var(--u)); }
.wp-ess:nth-of-type(3) { left: calc(237*var(--u)); }
.wp-ess__k {                       /* Kern: gruen bestaetigt, hell offen */
  position: absolute; inset: calc(4*var(--u)); border-radius: 50%;
  background: #0f9d58;
}
.wp-ess--off .wp-ess__k { background: #d4e4f4; inset: calc(3*var(--u)); }
.wp-ess svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.wp-ess svg path { fill: none; stroke: #fff; stroke-width: calc(6*var(--u)); stroke-linecap: round; stroke-linejoin: round; }
/* Der offene Kreis traegt seit 2026-08-30 ebenfalls einen Haken, damit er
   umschaltbar ist. Versteckt wird er HIER und nicht in JS: im Stapelmodus
   (<=1380) laeuft die Aufbaukette nicht, dort haette ihn sonst niemand
   verborgen und er stuende gezeichnet im Bild. Die Pfadlaenge ist 46.33 —
   48 deckt sie sicher ab. Auf dem Desktop ueberschreibt die Kette diese
   Werte inline. */
/* opacity zusaetzlich zum Dash: `stroke-linecap: round` zeichnet auch bei
   vollstaendig zurueckgezogenem Strich noch eine Kappe — als kleiner Punkt
   im leeren Kreis sichtbar (Rene 2026-08-30). Der Dash allein reicht nicht. */
.wp-ess--off svg path { stroke-dasharray: 48; stroke-dashoffset: 48; opacity: 0; }

/* === 02_Start — x845 y480, Karten 100x128, Raster 124 ============
   KORREKTUR Rene 2026-08-27: die Karten waren zu breit. Jetzt auf
   Vorlagenmass zurueck (100u statt 126/110u), Raster 124u, Block 348u
   — damit steht auch die Zellbalance der Vorlage wieder (73u links /
   67u rechts; mit 110u-Karten war sie 72/31 und der Block klebte am
   Innenteiler c1260).
   Renes Vorgabe "Content und Text dieselbe Breite, gleichmaessiger
   Abstand zu den Raendern": der Textkasten IST die Bandbreite (70u bei
   15u Rand). Der Glyphenlauf wird darin ZENTRIERT, nicht auf die
   Kastenbreite gedehnt — die Vorlage zeigt 46u Tinte zentriert, also
   74% des Bandes.
   OFFENER ZIELKONFLIKT fuer Rene: bei dieser Geometrie misst
   "SCORE CARD" 6.3px @1425. Zehn Pixel braeuchten 109.7u Tinte und
   damit eine 140u-Karte; drei davon plus Luecken und Einzug ergeben
   542u in einer 483u-Zelle — unmoeglich. Loesbar nur ueber den String
   ("SCORE" misst 57.8u @10px und passt), und das ist eine
   Copy-Entscheidung. == */
.wp-art--cards { left: calc(72*var(--u)); top: calc(var(--art-bottom) - 128*var(--u)); width: calc(362*var(--u)); height: calc(128*var(--u)); }
.wp-card {
  position: absolute; top: 0;
  width: calc(100*var(--u)); height: calc(128*var(--u));
  background: #f7f6eb; border-radius: calc(6*var(--u));
}
.wp-card:nth-of-type(1) { left: 0; }
.wp-card:nth-of-type(2) { left: calc(124*var(--u)); }
.wp-card:nth-of-type(3) { left: calc(248*var(--u)); }
/* Die dritte Karte ist ungewertet und daher gedaempft — ihr PUNKTESTAND
   aber nicht: in der Vorlage bleibt das Badge voll schwarz (Scan y578
   liefert 0,0,0 bei gedaempftem Kartenkoerper 226,235,237). */
/* Rene 2026-08-30: aus nth-of-type wurde .is-off (Regeln weiter unten im
   Interaktionsblock). Nur so kann JEDE der drei Karten ungewertet sein.
   Die Ruhelage ist identisch — Karte 3 traegt .is-off im Markup. */
.wp-card__t {                      /* Kasten = Bandbreite, Text zentriert */
  position: absolute; left: calc(15*var(--u)); top: calc(9*var(--u));
  width: calc(70*var(--u)); text-align: center;
  font-family: "HK Grotesk Wide", var(--font-display);
  font-weight: 700;
  font-size: calc(7*var(--u)); line-height: calc(12*var(--u));
  letter-spacing: .02em; color: #4a4a46; white-space: nowrap;
}
/* Das gelbe Band ist in der Vorlage NICHT so lang wie die beiden
   anderen: 29u gegen 62u (Scan y522/y547/y572). Es traegt dieselbe
   Aussage wie der offene Kreis in 01 und Skillset 01/-/- in 05 —
   das dritte Kriterium ist noch offen. Verhaeltnis bleibt: 70 -> 33u. */
.wp-card__b { position: absolute; left: calc(15*var(--u)); width: calc(70*var(--u)); height: calc(20*var(--u)); }
.wp-card__b--r { top: calc(30*var(--u)); background: #f9ada5; }
.wp-card__b--g { top: calc(55*var(--u)); background: #ade9b5; }
.wp-card__b--y { top: calc(80*var(--u)); width: calc(33*var(--u)); background: #f9e3b3; }
.wp-card__p {
  /* Punktebadge, ragt 14u ueber die rechte Kartenkante (Vorlage: Badge
     x918-957 bei Karte bis 943). Verankert an RIGHT, damit es beim
     Wachsen nach innen laeuft statt in die Nachbarkarte. */
  /* (Kein AP-Zitat.) Die Vorlage zeigt alle drei Badges exakt 42x27u — trotz
     "12 P"/"8 P"/"0 P". Padding-basierte Auto-Breite erzeugt genau die
     Raggedness, die die Vorlage vermeidet (gemessen 52.8/46.7/46.1u). */
  position: absolute; right: calc(-14*var(--u)); top: calc(88*var(--u));
  width: calc(42*var(--u)); height: calc(27*var(--u));
  display: grid; place-items: center; padding: 0;
  background: #000; color: #fff;
  font-family: "HK Grotesk Wide", var(--font-display);
  font-weight: 700; font-size: calc(15*var(--u)); line-height: 1;
  border-radius: calc(4*var(--u)); white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

/* === 03_Categories — x1388 y480 206x137 ============================
   Gemessen (Scans x1450/x1395/x1537, y494/530/547/565/600): Es sind
   DREI Formularfelder mit Caret plus ein geoeffnetes Auswahl-Panel,
   nicht zwei blanke Pillen. Leisten x1415-1566 (152u), Hoehe 29/28u,
   je mit grauer Zeile und Caret. Panel x1388-1593 (206u), y512-583
   (72u); Zeilen 150/150/111u, die erste dunkler (223 statt 241) =
   die getroffene Wahl. Der rote Cursor sitzt auf der dritten Zeile
   und ragt unter das Panel. == */
.wp-art--cat { left: calc(128*var(--u)); top: calc(var(--art-bottom) - 137*var(--u)); width: calc(206*var(--u)); height: calc(137*var(--u)); }

/* EIN Block-Atom fuer alle drei Kaesten. Jeder traegt beide Darstellungen;
   sichtbar ist die, die --gross bestimmt (Rene 2026-08-31). Vorher gab es
   .wp-cat__bar und .wp-cat__panel als zwei verschiedene Dinge — deshalb
   konnte der Tausch nur die Kastenmasse vertauschen, nie die Grafik. */
.wp-cat__b {
  position: absolute; background: #fff; border-radius: calc(6*var(--u));
  --gross: 0;                       /* 0 = kollabiert, 1 = geoeffnet */
}
/* Ruhelage = Figma-Stand: Block 2 ist offen. Das --gross:1 steht HIER und
   nicht nur in den [data-big]-Regeln: im Stapelmodus kehrt wpInit vor
   wpInteract zurueck, data-big wird dort also nie gesetzt — und dann zeigte
   der 72u hohe Mittelblock nur die Pille (gemessen bei 390, 2026-08-31). */
.wp-cat__b--1 { top: 0;                  height: calc(29*var(--u)); left: calc(27*var(--u)); width: calc(152*var(--u)); }
.wp-cat__b--2 { top: calc(32*var(--u));  height: calc(72*var(--u)); left: 0;                 width: calc(206*var(--u)); --gross: 1; }
.wp-cat__b--3 { top: calc(109*var(--u)); height: calc(28*var(--u)); left: calc(27*var(--u)); width: calc(152*var(--u)); }

/* Kollabierte Grafik: graue Pille + Caret nach unten.
   Die Vorlage nennt top 11u bei der 29u-Leiste und 10u bei der 28u-Leiste.
   Statt beider Festwerte steht hier eine Zentrierung: jeder der drei
   Bloecke kann jetzt kollabiert sein, und die Vorlage kennt fuer Block 2
   in diesem Zustand ohnehin keinen Wert. Abweichung zur Vorlage maximal
   0.5u (28u-Fall), im 29u-Fall exakt. */
.wp-cat__z { position: absolute; left: calc(12*var(--u));
  top: 50%; transform: translateY(-50%);
  width: calc(111*var(--u)); height: calc(7*var(--u));
  background: #f1f1f1; border-radius: calc(3*var(--u)); }
/* Caret: Vorlage x1546-1558 (13u), y491-497 (7u), zeigt nach unten,
   rechter Abstand zur Leistenkante 9u. */
.wp-cat__c { position: absolute; right: calc(9*var(--u));
  top: 50%; transform: translateY(-50%);
  width: calc(13*var(--u)); height: calc(7*var(--u)); background: #e4e4e4;
  clip-path: polygon(0 0, 100% 0, 50% 100%); border-radius: 0; }

/* Geoeffnete Grafik: drei Zeilen + Caret nach OBEN
   (Vorlage x1570-1579, y527-534, rel zum Block 182/15). */
.wp-cat__c--up { right: calc(14*var(--u)); top: calc(15*var(--u));
  transform: none;
  width: calc(11*var(--u)); height: calc(8*var(--u)); background: #e0e0e0;
  clip-path: polygon(50% 0, 100% 100%, 0 100%); }
.wp-cat__row { position: absolute; left: calc(15*var(--u)); height: calc(8*var(--u));
  background: #f1f1f1; border-radius: calc(4*var(--u)); }
/* Explizite Klassen statt nth-of-type: alle Kinder sind jetzt <i>, ein
   nth-of-type(1) haette die Pille getroffen, nicht die erste Zeile. */
.wp-cat__row--1 { top: calc(15*var(--u)); width: calc(150*var(--u)); background: #dfdfdf; }
.wp-cat__row--2 { top: calc(32*var(--u)); width: calc(150*var(--u)); }
.wp-cat__row--3 { top: calc(49*var(--u)); width: calc(111*var(--u)); }

/* Welche Grafik gilt: eine Rechnung statt zweier Regelsaetze. --gross ist
   der EINE Zustand, aus dem beide Sichtbarkeiten folgen — so koennen sie
   nicht auseinanderlaufen. */
.wp-cat__z, .wp-cat__c:not(.wp-cat__c--up) { opacity: calc(1 - var(--gross)); }
.wp-cat__row, .wp-cat__c--up { opacity: var(--gross); }

/* Cursor auf der dritten Zeile, ragt unter das Panel (Scan x1537 y563-591) */
/* Querschnitte der Vorlage (y562..y592, Schrittweite 2): Spitze bei
   rel (1,0), breiteste Stelle (30,9), Schweifende (10,32) — ein volles
   Dreieck ohne Kerbe, Box 31x33u ab rel 141/81. */
/* Cursor: 31 Querschnitte der Vorlage (y562..y592, Schrittweite 1)
   ergeben Spitze (1,0), rechte Ecke (31,8), Kerbe (18,18), Schweifende
   (11,31) — ein Mauszeiger MIT Kerbe, nicht das glatte Dreieck, das
   hier vorher stand. Box 31x31u ab rel 141/81. */
.wp-cat__cur { position: absolute; left: calc(141*var(--u)); top: calc(81*var(--u));
  width: calc(33*var(--u)); height: calc(31*var(--u)); }
.wp-cat__cur svg { width: 100%; height: 100%; display: block; overflow: visible; }
.wp-cat__cur path { fill: var(--sig); }

/* === 04_Priorities — x434 y730 187x125 =============================
   Gemessen aus der Vorlage (Scans x520/x580, y753/790/828): JEDE Zeile
   ist EIN durchgehendes weisses Rounded-Rect mit dem Statusicon INNEN
   links und ZWEI grauen Textzeilen rechts davon. Die Zeilen verjuengen
   sich nach unten — Breite 187/161/135u, Hoehe 47/40/34u, Einzug
   0/13/26u. Der frueher gebaute freistehende Kreis plus separater
   leerer Balken war ein anderes Objekt und trennte 04 vom
   Zeilen-Vokabular, das 03 und 06 teilen. == */
.wp-art--pri { left: calc(145*var(--u)); top: calc(var(--art-bottom) - 125*var(--u)); width: calc(187*var(--u)); height: calc(125*var(--u)); }
.wp-pri { position: absolute; background: #fff; border-radius: calc(6*var(--u)); }
.wp-pri:nth-of-type(1) { left: 0;                 top: 0;                 width: calc(187*var(--u)); height: calc(47*var(--u)); }
.wp-pri:nth-of-type(2) { left: calc(13*var(--u)); top: calc(49*var(--u)); width: calc(161*var(--u)); height: calc(40*var(--u)); }
.wp-pri:nth-of-type(3) { left: calc(26*var(--u)); top: calc(91*var(--u)); width: calc(135*var(--u)); height: calc(34*var(--u)); }

/* Statusicon, innerhalb der Zeile */
.wp-pri__m { position: absolute; left: calc(10*var(--u)); top: calc(9*var(--u)); width: calc(29*var(--u)); height: calc(29*var(--u)); }
.wp-pri:nth-of-type(2) .wp-pri__m { top: calc(7*var(--u)); width: calc(26*var(--u)); height: calc(26*var(--u)); }
.wp-pri:nth-of-type(3) .wp-pri__m { top: calc(6*var(--u)); width: calc(23*var(--u)); height: calc(23*var(--u)); }
.wp-pri__k { position: absolute; inset: 0; border-radius: 50%; }
.wp-pri--ok   .wp-pri__k { background: #109e5a; }   /* Scan 16,158,90 */
.wp-pri--crit .wp-pri__k { background: #ee3b49; }   /* Scan 238,59,73 */
.wp-pri--warn .wp-pri__k { background: none; }      /* Dreieck statt Kreis */
.wp-pri__m svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.wp-pri__m .gl  { fill: none; stroke: #fff; stroke-width: 3.2; stroke-linecap: round; stroke-linejoin: round; }
.wp-pri__m .fl  { fill: #fff; }
.wp-pri__m .tri { fill: #fa6f1e; }                  /* Scan 250,111,30 */
.wp-pri__m .fl2 { fill: #fff; }

/* Zwei graue Textzeilen je Zeile; die zweite ist kuerzer.
   Referenz Zeile 1: x485-604 (120u) und x485-573 (89u) bei y743/757,
   also Einzug 51u und rel-y 13/27. */
.wp-pri__t { position: absolute; left: calc(51*var(--u)); height: calc(6*var(--u));
  background: #f1f1f1; border-radius: calc(3*var(--u)); }
/* AP-507: :nth-of-type zaehlt nach ELEMENTTYP. Die Kinder sind
   <i class="wp-pri__m"> + 2x <i class="wp-pri__t"> — alle <i>. Mit
   :nth-of-type(1) traf die erste Regel das ICON und lief leer, und die
   zweite Textzeile blieb ohne Regel bei width:0. :nth-child zaehlt
   die Position im Elternknoten und trifft richtig. */
.wp-pri:nth-of-type(1) .wp-pri__t:nth-child(2) { top: calc(13*var(--u)); width: calc(120*var(--u)); }
.wp-pri:nth-of-type(1) .wp-pri__t:nth-child(3) { top: calc(27*var(--u)); width: calc(89*var(--u)); }
.wp-pri:nth-of-type(2) .wp-pri__t { left: calc(45*var(--u)); }
.wp-pri:nth-of-type(2) .wp-pri__t:nth-child(2) { top: calc(11*var(--u)); width: calc(101*var(--u)); }
.wp-pri:nth-of-type(2) .wp-pri__t:nth-child(3) { top: calc(23*var(--u)); width: calc(75*var(--u)); }
.wp-pri:nth-of-type(3) .wp-pri__t { left: calc(40*var(--u)); height: calc(5*var(--u)); }
.wp-pri:nth-of-type(3) .wp-pri__t:nth-child(2) { top: calc(9*var(--u));  width: calc(84*var(--u)); }
.wp-pri:nth-of-type(3) .wp-pri__t:nth-child(3) { top: calc(20*var(--u)); width: calc(62*var(--u)); }

/* === 05_BTS-Scoring — x838 y721 343x130 ============================
   Gemessen (x890/x1000/x1150 vertikal, y734/838 horizontal):
   Label-Pille 90x22u ab rel 6/2. Der Track besteht aus DREI Segmenten
   69/71/71u mit 8u und 7u Steg; die Segmente sind 25u hoch, der
   farbige Balken nur 22u und 2u nach innen gerueckt — daraus entsteht
   der helle Ring, den die Vorlage um jedes gefuellte Segment zeigt.
   Der Balken deckt die Stege zwischen erreichten Segmenten mit ab:
   Budget/Timeline bis 147u, Skillset bis 68u. == */
.wp-art--bts { left: calc(65*var(--u)); top: calc(var(--art-bottom) - 136*var(--u)); width: calc(348*var(--u)); height: calc(136*var(--u)); }
/* Die Vorlage rahmt JEDE Zeile mit einer weissen Umriss-Pille
   (x838-1185 = 348u, y718-749 = 32u, Radius 16u). Ohne sie sind
   Label und Track zwei lose Objekte auf dem Grund — 05 waere das
   einzige Artefakt der Section ohne Behaelter. */
.wp-bts { position: absolute; left: 0; width: calc(348*var(--u)); height: calc(32*var(--u));
  border: 1px solid #fff; border-radius: calc(16*var(--u)); }
.wp-bts:nth-of-type(1) { top: 0; }
.wp-bts:nth-of-type(2) { top: calc(52*var(--u)); }
.wp-bts:nth-of-type(3) { top: calc(104*var(--u)); }
.wp-bts__l {
  position: absolute; left: calc(6*var(--u)); top: calc(4*var(--u));
  width: calc(90*var(--u)); height: calc(22*var(--u));
  background: #fff; border-radius: calc(11*var(--u));
  display: grid; place-items: center;
  /* Pixelboden wie bei den uebrigen Kleinrollen: 11u faellt bei
     Sectionbreite 1366 auf 7.34px. Bei 10px misst "TIMELINE" 80.4u
     Tinte und traegt in der 90u-Pille noch 4.8u Rand je Seite. */
  font-weight: 700; font-size: calc(11*var(--u)); letter-spacing: .04em;
  font-family: "HK Grotesk Wide", var(--font-display);
  text-transform: uppercase; color: #000;
}
.wp-bts__t { position: absolute; left: calc(118*var(--u)); top: calc(2*var(--u));
  width: calc(226*var(--u)); height: calc(25*var(--u)); }
.wp-bts__s {
  position: absolute; top: 0; height: 100%;
  background: #e1ecf7; border-radius: calc(13*var(--u));
  display: grid; place-items: center;
  /* AP-306: <i> erbt font-style:italic vom UA-Stylesheet, und HK
     Grotesk Wide hat keinen Italic-Schnitt — Chrome synthetisierte eine
     Schraegstellung an den neun Score-Ziffern. */
  font-family: "HK Grotesk Wide", var(--font-display);
  font-weight: 700; font-size: calc(11*var(--u));
  font-variant-numeric: tabular-nums; color: #dcdee2;
}
.wp-bts__s:nth-of-type(1) { left: 0;                  width: calc(69*var(--u)); }
.wp-bts__s:nth-of-type(2) { left: calc(77*var(--u));  width: calc(71*var(--u)); }
.wp-bts__s:nth-of-type(3) { left: calc(155*var(--u)); width: calc(71*var(--u)); }
/* Der Balken liegt UNTER den Segmenten (im DOM zuerst) und deckt so
   auch den Steg zwischen zwei erreichten Segmenten ab. Erreichte
   Segmente sind transparent und lassen ihn durch, offene bleiben hell.
   Kein z-index noetig, also kein zusaetzlicher Stacking-Kontext. */
/* Das erreichte Segment traegt die Fuellfarbe SELBST und legt den
   hellen Ring per inset-Schatten nach innen — so wie die Vorlage: dort
   ist das helle Segment 25u hoch, die Farbe darin nur 22u. Den Ring
   ueber ein darunterliegendes Element zu loesen ging schief: der helle
   Segmentgrund verdeckte den Balken und liess nur den Steg stehen.
   .wp-bts__f fuellt jetzt nur noch den STEG zwischen zwei erreichten
   Segmenten; es liegt im DOM zuerst und ist ueberall sonst von den
   Segmenten verdeckt. Kein z-index, kein Stacking-Kontext (AP-701).
   Die Ziffern sind halbtransparent, nicht weiss: die Vorlage zeigt auf
   Gruen 57,173,119 die Glyphe 127,181,155. */
/* AP-508: Der inset-Ring folgt dem border-radius und wickelt sich um
   die Kappen. Ein Streifen ueber dem blossen Steg (69..77u) laesst
   darum vier helle Keile stehen — bei Kappenradius 10.5u bis 8.5x4.8u
   gross, also ueber 43% der Balkenhoehe. Der Ueberdecker muss beide
   Kappen-MITTELPUNKTE erreichen: seg1 endet bei 69u (Mitte 58.5u),
   seg2 beginnt bei 77u (Mitte 87.5u) -> 56.5u bis 89.5u.
   Die Vorlage zeigt an jeder Zeile EINEN durchgehenden Gruenlauf. */
/* NEUFASSUNG Rene 2026-08-30: EIN durchgehender Strahl statt zweier
   Brueckenstuecke. Er liegt jetzt HINTER den Pillen (kein z-index, im DOM
   zuerst) und laeuft von der linken Trackkante bis zur rechten Kante der
   letzten gesetzten Pille — er aendert nur seine Breite.
   Ueber den Pillen ginge es nicht: ein durchgehender Balken wuerde die
   Ziffer der mittleren Pille verdecken. Dahinter kaeme dafuer der in
   AP-508 beschriebene Keil-Effekt des inset-Rings zurueck — deshalb
   verlieren Pillen IN EINEM LAUF ihren Ring und verschmelzen mit dem
   Strahl. Aussenkappen und Einzelpillen behalten ihn. */
.wp-bts__f { position: absolute; left: 0; top: calc(2*var(--u));
  width: 0; height: calc(21*var(--u)); border-radius: calc(10.5*var(--u));
  z-index: 1; transition: width .3s ease; }
.wp-bts[data-n="1"] .wp-bts__f { width: calc(69*var(--u)); }
.wp-bts[data-n="2"] .wp-bts__f { width: calc(148*var(--u)); }
.wp-bts[data-n="3"] .wp-bts__f { width: calc(226*var(--u)); }
.wp-bts--bud .wp-bts__f { background: #39ad77; }
.wp-bts--tim .wp-bts__f { background: #f7ee57; }
.wp-bts--ski .wp-bts__f { background: #2d7dfc; }
/* NEUFASSUNG Rene 2026-08-30: Die Pille wird NICHT mehr gefuellt. Die Farbe
   traegt allein der Strahl, der INNERHALB der Pillen durch die Ziffern 01-03
   laeuft. Aktive Pillen werden dafuer transparent und verlieren ihren
   inset-Ring — sonst zoege er eine helle Linie quer durch den Strahl.
   Die Pillen liegen per z-index ueber dem Strahl, damit die Ziffern lesbar
   bleiben; inaktive behalten ihren hellen Grund. */
.wp-bts__s { z-index: 2; }
.wp-bts__s.is-on { background: transparent; box-shadow: none; }
.wp-bts--bud .wp-bts__s.is-on { color: #7fb59b; }
.wp-bts--tim .wp-bts__s.is-on { color: #cfc85c; }
.wp-bts--ski .wp-bts__s.is-on { color: #7fa5e8; }

/* === 06_Report — x1377 y726 261x128, zwei Dokumente 99x128 ========= */
.wp-art--rep { left: calc(117*var(--u)); top: calc(var(--art-bottom) - 128*var(--u)); width: calc(261*var(--u)); height: calc(128*var(--u)); }
.wp-doc { position: absolute; top: 0; width: calc(99*var(--u)); height: calc(128*var(--u)); background: #fff; border-radius: calc(5*var(--u)); }
.wp-doc:nth-of-type(1) { left: 0; }
.wp-doc:nth-of-type(2) { left: calc(142*var(--u)); }
.wp-doc__h {
  /* Vorlage: '#'-Tinte 15x16u, Strich ab doc-rel x32/y22. Mit 18u
     Schriftgrad mass die Tinte nur 10x9u — 60% Linearmass. */
  position: absolute; left: calc(13*var(--u)); top: calc(12*var(--u));
  display: flex; align-items: center; gap: calc(8*var(--u));
  font-family: "HK Grotesk Wide", var(--font-display);
  /* Das '#' traegt die Formatfarbe seines Strichs — rot auf PDF,
     indigo auf WEB (Scan x1400 y742: 251,44,55). Schwarz laesst die
     Formatfarbe allein im Badge stehen; das ist dann die groesste
     Vollton-Rotflaeche der Section fuer eine reine Dateiangabe und
     stumpft die echte Emphase in 04 ab (AP-503). */
  font-weight: 700; font-size: calc(23*var(--u)); line-height: 1;
  color: currentColor;
}
.wp-doc--pdf .wp-doc__h { color: var(--sig); }
.wp-doc--web .wp-doc__h { color: #3b3bd6; }
/* Der Strich ist der zweite Traeger der Formatfarbe neben dem Badge
   (AP-503). Auf 45% Deckung war er ein Grauschleier; die Vorlage zeigt
   volles #f31a27 bzw. Indigo. Mass 42x5u. */
.wp-doc__rule { display: block; width: calc(42*var(--u)); height: calc(5*var(--u));
  background: currentColor; }
/* Vorlagenbreiten 49/58/61/31/23u ab doc-rel x13. Die letzte Zeile
   ist der Flatterausgang — mit 48u statt 23u las das Dokument als
   geschlossener Block statt als Absatz. */
.wp-doc__l { position: absolute; left: calc(13*var(--u)); height: calc(5*var(--u)); background: #dfdfdf; border-radius: calc(2*var(--u)); }
.wp-doc__l:nth-of-type(1) { top: calc(48*var(--u));  width: calc(49*var(--u)); }
.wp-doc__l:nth-of-type(2) { top: calc(62*var(--u));  width: calc(58*var(--u)); }
.wp-doc__l:nth-of-type(3) { top: calc(77*var(--u));  width: calc(61*var(--u)); }
.wp-doc__l:nth-of-type(4) { top: calc(91*var(--u));  width: calc(31*var(--u)); }
.wp-doc__l:nth-of-type(5) { top: calc(105*var(--u)); width: calc(23*var(--u)); }
.wp-doc__b {
  /* Vorlage: beide Doc-Badges exakt 49x27u ab doc-rel x69. */
  position: absolute; left: calc(69*var(--u)); top: calc(88*var(--u));
  width: calc(49*var(--u)); height: calc(27*var(--u));
  display: grid; place-items: center; padding: 0;
  color: #fff;
  font-family: "HK Grotesk Wide", var(--font-display);
  font-weight: 700; font-size: calc(15*var(--u)); line-height: 1;
  border-radius: calc(4*var(--u)); white-space: nowrap;
}
.wp-doc--pdf .wp-doc__b { background: var(--sig); }
.wp-doc--web .wp-doc__b { background: #3b3bd6; }

/* === .PHASES INTERAKTION (Rene 2026-08-30, Konzept B "ein aktives Objekt")
   Die Artefakte werden bedienbar, sobald die Aufbaukette durch ist. Die
   Section behauptet ein Live-Board — die Bedienbarkeit ist der Beleg dafuer,
   nicht Deko (DBX-05).

   KEINE Transforms in diesem Block. Die Kette besitzt `transform` auf allen
   Artefakt-Elementen als Inline-Style; eine CSS-Regel wuerde nie greifen und
   waere ausserdem ein zweiter Eigentuemer (/motion-design §8). Hover- und
   Klick-Bewegung liegen vollstaendig in wpInteract().

   AUSNAHME, von Rene am 2026-08-30 ausdruecklich bestaetigt: Hover skaliert
   die Items (1.04). Das weicht von DBX-09 / 11-dropbox-reference Regel 28-29
   ab (dort reagiert eine Kachel nie geometrisch auf Hover) und liegt ueber
   dem in AP-603 dokumentierten Band 0.97-1.0. Bewusste Entscheidung. === */

/* Interaktionen sind tot, bis die JEWEILIGE Kachel .is-live traegt. Die Kette
   setzt das je Zelle am Ende ihres eigenen Aufbaus (Rene 2026-08-30) — 01 ist
   also schon bedienbar, waehrend 02-06 noch entstehen. */
.wp-cell.is-live .wp-ess,
.wp-cell.is-live .wp-card,
.wp-cell.is-live .wp-cat__b,
.wp-cell.is-live .wp-pri,
.wp-cell.is-live .wp-bts__s,
.wp-cell.is-live .wp-doc { cursor: var(--cursor-hand); }

/* Konzept B: genau EINE Kachel ist scharf. Das Label traegt den Zustand —
   dasselbe Fokus-Vokabular wie die Disziplin-Baender (.is-focus). */
.wp-cell.is-armed .wp-lab { color: var(--sig); }
.wp-lab { transition: color .15s ease; }

/* 02 — inaktive Karte. Ersetzt die statische nth-of-type-Regel durch einen
   Zustand, damit jede der drei Karten inaktiv sein kann. */
.wp-card.is-off { background: #e2ebed; }
.wp-card.is-off > :not(.wp-card__p) { opacity: .45; }
.wp-card { transition: background-color .3s ease; }
.wp-card > * { transition: opacity .3s ease; }

/* 03 — der kollabierte Block klippt seine Zeilen, statt sie ueberlaufen zu
   lassen. Sie sind dort ohnehin auf opacity 0. */
.wp-cat__b { overflow: hidden; }

/* 03 — drei Zustaende: welcher Block gross ist. Als data-Attribut plus CSS,
   NICHT als Inline-Pixel aus JS: so bleibt die Geometrie an --u gebunden und
   ueberlebt jeden Resize (AP-610). Der Default (data-big="1") ist bis auf die
   Nachkommastelle der Figma-Stand — die beiden anderen Layouts stapeln
   dieselben Hoehen (29 + 29 + 72 = 130) im selben 137u-Feld.
   NEU: getauscht wird nicht mehr nur die Geometrie, sondern auch die
   Grafik — der gross werdende Block bekommt --gross:1 und damit exakt die
   Darstellung, die vorher der mittlere hatte, und umgekehrt. */
.wp-cat__b {
  transition: top .3s ease, left .3s ease, width .3s ease, height .3s ease;
}
/* Die Grafik wechselt in derselben Zeit wie die Geometrie, damit sich der
   Block WANDELT und nicht erst wandert und dann umspringt. */
.wp-cat__z, .wp-cat__c, .wp-cat__row { transition: opacity .3s ease; }

.wp-art--cat[data-big="0"] .wp-cat__b--1 { top: 0;                  height: calc(72*var(--u)); left: 0;                 width: calc(206*var(--u)); --gross: 1; }
.wp-art--cat[data-big="0"] .wp-cat__b--2 { top: calc(75*var(--u));  height: calc(29*var(--u)); left: calc(27*var(--u)); width: calc(152*var(--u)); --gross: 0; }
.wp-art--cat[data-big="0"] .wp-cat__b--3 { top: calc(109*var(--u)); height: calc(28*var(--u)); left: calc(27*var(--u)); width: calc(152*var(--u)); --gross: 0; }

.wp-art--cat[data-big="1"] .wp-cat__b--1 { top: 0;                  height: calc(29*var(--u)); left: calc(27*var(--u)); width: calc(152*var(--u)); --gross: 0; }
.wp-art--cat[data-big="1"] .wp-cat__b--2 { top: calc(32*var(--u));  height: calc(72*var(--u)); left: 0;                 width: calc(206*var(--u)); --gross: 1; }
.wp-art--cat[data-big="1"] .wp-cat__b--3 { top: calc(109*var(--u)); height: calc(28*var(--u)); left: calc(27*var(--u)); width: calc(152*var(--u)); --gross: 0; }

.wp-art--cat[data-big="2"] .wp-cat__b--1 { top: 0;                  height: calc(29*var(--u)); left: calc(27*var(--u)); width: calc(152*var(--u)); --gross: 0; }
.wp-art--cat[data-big="2"] .wp-cat__b--2 { top: calc(32*var(--u));  height: calc(28*var(--u)); left: calc(27*var(--u)); width: calc(152*var(--u)); --gross: 0; }
.wp-art--cat[data-big="2"] .wp-cat__b--3 { top: calc(65*var(--u));  height: calc(72*var(--u)); left: 0;                 width: calc(206*var(--u)); --gross: 1; }

/* 05 — Der Strahl liegt jetzt oben bei .wp-bts__f (Neufassung 2026-08-30).
   Die frueheren zwei Brueckenstuecke sind entfallen. */

/* 06 — Das Blatt-Item selbst wird zur Vorschau (Rene 2026-08-30).
   Kein eigenes Fenster mehr. Der Clip-Container liegt IM Dokument; ein
   `overflow:hidden` direkt am .wp-doc wuerde das PDF/WEB-Badge abschneiden,
   das bewusst ueber die Karte hinausragt (69u + 49u bei 99u Breite). */
.wp-doc__prev {
  position: absolute; inset: 0; overflow: hidden; display: none;
  background: #fff; border-radius: calc(5*var(--u)); z-index: 1;
}
.wp-doc.is-preview .wp-doc__prev { display: block; }
/* Im Vorschauzustand tritt die Blatt-Grafik zurueck; das Badge bleibt als
   Kennung stehen, damit die Karte ihre Gattung nicht verliert (DBX-19). */
.wp-doc.is-preview > .wp-doc__h,
.wp-doc.is-preview > .wp-doc__l { visibility: hidden; }
.wp-doc.is-preview > .wp-doc__b { z-index: 2; }
/* Die gewachsene Karte liegt ueber ihrem Nachbarn. */
.wp-doc.is-preview { z-index: 5; }
.wp-doc--pdf.is-preview { box-shadow: 0 0 0 1px var(--sig); }
.wp-doc--web.is-preview { box-shadow: 0 0 0 1px #3b3bd6; }
/* Breite und Hoehe setzt wpInteract in px und skaliert herunter: so steht die
   VOLLE Seitenbreite im Blatt und es bleibt nur vertikales Scrollen. */
.wp-doc__frame { position: absolute; left: 0; top: 0; border: 0; transform-origin: 0 0; }

/* Stapelmodus: keine Bedien-Interaktion. Die Artefakte sind dort zu klein
   fuer Treffer-Flaechen, und die Preview haette keinen Platz. Der Endzustand
   bleibt vollstaendig lesbar. */
@media (max-width: 1024px) /* Rene 2026-09-22: Stapelmodus nur Tablet-Portrait/Mobile; vorher <=1380px oder <=820px hoch */ {
  .wp-cell.is-live .wp-ess, .wp-cell.is-live .wp-card, .wp-cell.is-live .wp-cat__b,
  .wp-cell.is-live .wp-pri, .wp-cell.is-live .wp-bts__s,
  .wp-cell.is-live .wp-doc { cursor: var(--cursor-arrow); }
  .wp-doc__prev { display: none !important; }
}

@media (prefers-reduced-motion: reduce) {
  .wp-lab, .wp-card, .wp-card > *, .wp-bts__t::after { transition: none; }
}

/* === WORKSHOP-CTA (Rene 2026-08-30, Konzept B+C "Die Einfahrt") ========
   Schlusspunkt der Workshop-Seite, direkt unter .PHASES.

   Die beiden Vertikalen setzen v2 und v3 der Section nach unten fort und
   laufen BIS ZUM SEITENRAND durch (Rene 2026-08-30). Die Navy-Flaeche faehrt
   zwischen ihnen von unten ein und deckt sie in ihrem Band ab — darueber und
   darunter bleiben sie sichtbar.

   LINIENFARBE woertlich aus .wp-l: var(--signal-red) bei opacity .4, 1px, mit
   margin-left:-0.5px auf dem Anker zentriert. Keine zweite Farbe, keine
   zweite Deckungsstufe.

   ANKER: --v2/--v3 setzt wpAnchors LIVE auf dieses Element, genau wie auf
   .wp. Keine festen Prozentwerte — in Produktion gelten GRID_V2 (0.1425)
   und GRID_V3_WORKSHOP (0.85), nicht die CSS-Fallbacks der Section. */
.wpc {
  position: relative;
  --v1: 3.75%;                       /* Ende der Randspalte (03-layout-grid) */
  --v2: 14.25%;                      /* Fallback ohne JS, siehe oben */
  --v3: 85%;
  /* Anlauf und Fuss als Token, weil die Waagerechten GENAU auf der Ober-
     und Unterkante der Flaeche sitzen. Stuenden die Werte doppelt, wuerde
     der Rahmen bei der naechsten Abstandsaenderung von der Kante driften. */
  --wpc-anlauf: clamp(16.5rem, 27vh, 27rem);
  --wpc-fuss: clamp(7rem, 14vh, 14rem);
  padding-bottom: var(--wpc-fuss);
  background: #9DCFF3;               /* derselbe Grund wie .wp */
}
.hero__page[data-page="workshop"] .site-foot { position: relative; margin-top: -3.5rem; z-index: 6; } /* HVR-20260914-16: Fusszeile liegt im Fuss der CTA-Section, ohne sie zu verschieben (kein sticky: das klebte die Leiste ueber die ganze Seite) */
/* Linien-Atom: gemeinsam ist NUR die Farbe, die Geometrie tragen die
   Modifier. So koennen Senkrechte und Waagerechte nicht auf zwei
   Farbwerte auseinanderlaufen (Rene 2026-08-31: "alle die selbe signal
   red Farbe"). */
.wpc-l {
  position: absolute; pointer-events: none;
  /* HVR-20260914-36 (Rene): nach PHASES bleibt die Farbwelt der PHASES-Section
     (Workshop-Blau mit #F1F1F1-Linien), kein Wechsel mehr auf Rot oder Navy;
     volle Deckkraft nach HVR-20260914-31. Vorher var(--signal-red) bei .4. */
  background: #F1F1F1; opacity: 1;
}
.wpc-l--v { top: 0; bottom: 0; width: var(--line-w); margin-left: calc(var(--line-w) / -2); }
.wpc-l--v1 { left: var(--v1); }
.wpc-l--v2 { left: var(--v2); }
.wpc-l--v3 { left: var(--v3); }
/* Waagerechte: stoppen exakt an v1 — die Randspalte ist IMMER linienfrei
   und horizontale Linien ueberschreiten die v1-Linie NIE (03-layout-grid
   Regel 0, Rene 2026-08-10). Nach rechts laufen sie bis zur Seitenkante. */
/* Die Linien liegen VOLLSTAENDIG neben der Flaeche, nicht zentriert auf
   ihrer Kante. Zentriert lag die halbe Linie unter dem Navy; die
   verbleibende Haelfte ist 0.4-Rot direkt an einer harten Navy-Kante und
   war ueber die ganze Boxhoehe nicht mehr zu sehen — die Linie las als
   unterbrochen (gemessen und im Browser gegengeprueft 2026-08-31). Ein
   z-index half nicht: es war keine Frage der Malreihenfolge, sondern der
   Ueberdeckung. Die Positionsangabe traegt die Linienbreite selbst, weil
   margin-top ein absolutes Element mit `bottom` ohne `top` nicht bewegt. */
.wpc-l--h { left: var(--v1); right: 0; height: var(--line-w); } /* HVR-20260915-05 (Rene): bis zum Seitenrand */
.wpc-l--h1 { top: calc(var(--wpc-anlauf) - 1px); }
.wpc-l--h2 { bottom: calc(var(--wpc-fuss) - 1px); }

/* Anlaufstrecke: hier stehen die Vertikalen allein, bevor die Flaeche sie
   unten trifft. Ohne sie gaebe es kein "zwischen den Linien". */
.wpc__anlauf { height: var(--wpc-anlauf); }

/* Der Schacht klippt, damit die Flaeche wirklich AUS der Unterkante kommt
   und nicht eingeblendet wird (06 Grundsatz 1: Slides statt Fades). */
/* Die Flaeche endet an der INNENkante der beiden Senkrechten, damit sie
   die Linien nicht zur Haelfte verschluckt (siehe .wpc-l--h). Die rechte
   Kante haengt jetzt ebenfalls am LIVE-Anker --v3 statt an einem festen
   15% — beide Werte waren zwar deckungsgleich, aber nur zufaellig. */
.wpc__schacht {
  position: relative; overflow: hidden;
  margin: 0 calc(100% - var(--v3) + 0.5px) 0 calc(var(--v2) + 0.5px);
}
.wpc__flaeche {
  background: #0A1E4E; color: #fff;
  padding: clamp(2.6rem, 5vw, 4.4rem) clamp(2.2rem, 4vw, 3.6rem)
           clamp(3rem, 5.5vw, 5rem);
  /* KEIN transform hier: eine CSS-Prozentverschiebung loest GSAP in eine
     y-px-Komponente auf, die ein yPercent-Tween nicht mehr erreicht
     (AP-611-Familie). Die Startlage setzt wpcInit per gsap.set. */
}

.wpc__eyebrow {
  margin: 0 0 1.4em;
  font-family: "HK Grotesk Wide", var(--font-display);
  font-weight: 700; text-transform: uppercase;
  font-size: clamp(0.8rem, 0.95vw, 1.1rem); letter-spacing: .14em;
  color: rgba(255,255,255,.55);
}
.wpc__inhalt {
  display: grid; grid-template-columns: 1fr auto;
  column-gap: clamp(2rem, 5vw, 6rem); align-items: end;
}
.wpc__hl {
  margin: 0;
  font-family: "HK Grotesk Wide", var(--font-display);
  font-weight: 700; text-transform: uppercase;
  font-size: clamp(1.3rem, 2vw, 2.3rem);   /* Term-Statement */
  line-height: 1.1; letter-spacing: .01em; max-width: 20ch; color: #fff;
}
.wpc__copy {
  margin: 1.2em 0 0;
  font-family: "HK Grotesk Wide", var(--font-display);
  font-weight: 400;
  font-size: clamp(1rem, 1.35vw, 1.55rem); line-height: 1.5;
  max-width: 34em; color: rgba(255,255,255,.78);
}
/* Handlung: aus .hiw-cta__btn abgeleitet statt neu erfunden (AP-501) —
   inklusive Pfeil-Versatz und Fokus-Ring. Harte Kanten, kein Radius. */
.wpc__act {
  display: inline-flex; align-items: center; gap: .8em; align-self: end;
  white-space: nowrap; text-decoration: none;
  font-family: "HK Grotesk Wide", var(--font-display);
  font-weight: 700; text-transform: uppercase; letter-spacing: .08em;
  font-size: clamp(0.82rem, 1.1vw, 1.3rem);
  padding: 1.1em 2.1em;
  background: var(--signal-red); color: #fff;
  transition: background-color .25s ease, color .25s ease;
}
.wpc__act::after { content: '\2192'; font-family: inherit;
  transition: transform .3s cubic-bezier(.65,0,.45,1); }
.wpc__act:hover { background: #fff; color: var(--signal-red); }
.wpc__act:hover::after { transform: translateX(5px); }
.wpc__act:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }

/* Unterhalb 1380 erbt der CTA die Schwelle UND die Geometrie der Section:
   .wp geht dort auf margin-left:14.25%; width:70.75% und schaltet .wp-l auf
   display:none. Die Vertikalen entfallen deshalb mit — sie wuerden Linien
   zitieren, die dort nicht existieren. */
@media (max-width: 1024px) /* Rene 2026-09-22: Stapelmodus nur Tablet-Portrait/Mobile; vorher <=1380px oder <=820px hoch */ {
  .wpc-l { display: none; }
  /* Der Anlauf bleibt stehen, nur kleiner. Ausgeblendet stiess die Box im
     Stapel mit 0px direkt an .PHASES (gemessen 2026-08-31) — der Abstand
     zwischen Section und CTA gilt aber auf jeder Breite. Er traegt hier
     keine Linien mehr, sondern nur noch den Abstand. */
  .wpc { --wpc-anlauf: clamp(4.5rem, 9vh, 8rem); }
  .wpc__schacht { margin: 0 0 0 14.25%; width: 70.75%; }
  .wpc__inhalt { grid-template-columns: 1fr; row-gap: 2.2em; }
  /* nowrap aufheben: bei 390 ist die Inhaltsbreite im Schacht 196px, die
     einzeilige Handlung misst 268px und wurde vom overflow:hidden des
     Schachts abgeschnitten. Das freigegebene .hiw-cta__btn traegt kein
     nowrap und bricht dort um — dieselbe Regel gilt hier. */
  .wpc__act { justify-self: start; white-space: normal; }
}
@media (prefers-reduced-motion: reduce) {
  .wpc__act, .wpc__act::after { transition: none; }
}

/* --- Ableitung unterhalb 1380 ---------------------------------------
   Der Canvas-Modus skaliert ALLES mit der Breite, auch die Typo:
   die 15u-Rolle rendert 13.95px @1920, 10.44px @1440, 9.0px @1300.
   Unterhalb einer Sectionbreite von 1365 faellt sie unter 10px —
   dort wird die 2048er-Buehne verlassen und gestapelt gelesen.
   Schwelle 1380 Viewport = 1365 Sectionbreite bei klassischer
   Scrollbar; mit Overlay-Scrollbar 1381. Beide Modelle liegen auf
   der 10px-Klippe.
   Seit 2026-08-27 traegt KEINE Rolle der Section einen Pixelboden:
   ein max(10px, ...) auf nur einem Teil einer Groessenleiter zerreisst
   deren Beziehung genauso wie ein clamp()-Deckel (AP-303). Die Vorlage
   haelt 15u/11u = 0.733; mit Boden nur auf der 11u-Rolle lag das
   Verhaeltnis live bei 0.989 @1381 — ein Mikrolabel im Artefakt war
   dann so gross wie das benennende Zell-Label.
   Preis dieser Entscheidung: unterhalb der Schwelle faellt jede Rolle
   proportional mit. Die kleinsten sind die Kartenbeschriftung (9u) und
   die BTS-Rollen (11u). */
@media (max-width: 1024px) /* Rene 2026-09-22: Stapelmodus nur Tablet-Portrait/Mobile; vorher <=1380px oder <=820px hoch */ {
  .wp {
    height: auto; min-height: 0;
    padding: 9vh 0 11vh;
    display: flex; flex-direction: column; align-items: flex-start;
    /* (kein AP-Zitat — AP-509 ist seit 2026-09-07 die Logo-Punkt-Regel)
       EIN --u fuer die ganze Section, abgeleitet vom breitesten
       Artefakt (362u). Ein eigenes --u je Artefakt ist keine Leiter mehr:
       dieselbe 15u-Rolle rendert dann in zwei Artefakten verschieden
       (gemessen 15.00px gegen 11.43px), und die Breitenfolge der Vorlage
       kollabiert, weil jedes Artefakt einzeln auf die Spaltenbreite
       gedeckelt wird — drei wurden exakt gleich breit. */
    --u: min(1px, 70.75cqw / 362);
    /* 2026-09-28 (Rene, iPhone: "Icons groesser"): die Artefakte duerfen die Textspalte
       nach rechts verlassen; 79cqw laesst dem ueberhaengenden Punkte-Badge der dritten
       Score-Card (02) noch Luft zur Sectionkante (bei 83cqw war es angeschnitten).
       Eine Einheit fuer alle sechs bleibt (Leiter), Deckel 1.25 px im Tablet-Portrait.
       Bei 390 px: 0.85 statt 0.76 px je Einheit (+12 %), bei 768 px: 1.25 statt 1 px. */
    --u: min(1.25px, 79cqw / 362);
  }
  .wp-l { display: none; }
  /* Der fuehrende Punkt ist die Wortmarke der Site und ueberlebt JEDEN
     Breakpoint — vorher las die Headline hier "PHASES" statt ".PHASES".
     Im Stapel haengt er nicht mehr am Raster, sondern an der Headline. */
  .wp-dot {
    left: 0; top: auto; bottom: .12em;
    width: .19em; height: .17em;
  }
  /* AP-903: der Wechsel absolute -> relative loescht left/top NICHT.
     Mit --u:1px stand .wp-hl auf left:314px und wanderte als Versatz
     314px nach rechts — bei 390 waren 91% der Wortmarke abgeschnitten. */
  .wp-hl { position: relative; left: auto; top: auto; padding-left: .26em; }

  .wp-intro, .wp-cell { position: static; }
  .wp-hl, .wp-intro, .wp-cell {
    width: 70.75%; max-width: min(70.75%, 68ch);
    margin-left: 14.25%;
  }
  .wp-hl {
    font-size: clamp(2.4rem, 13vw, 4.4rem); line-height: 1.05;
    white-space: normal;
    /* HVR-20260912-02 / D4: Headline (mit Logo-Punkt) auf derselben Kante wie
       Intro und Zellen — 0.5 x Inset neben v2, rechte Kante unveraendert */
    margin-left: calc(14.25% + var(--content-inset) / 2);
    width: calc(70.75% - var(--content-inset) / 2);
    max-width: calc(70.75% - var(--content-inset) / 2);
  }
  .wp-intro { margin-top: 1.4em; font-size: clamp(.95rem, 3.6vw, 1.15rem); line-height: 1.45; }
  /* HVR-20260911-13 (Rene D4): Textbloecke nicht auf v2 — 0.5 x Inset nach
     innen, Boxbreite und rechte Kante unveraendert (box-sizing border-box) */
  .wp-intro, .wp-cell { padding-left: calc(var(--content-inset) / 2); }

  .wp-cell { height: auto; margin-top: 7vh; }
  /* Im Stapel steht der Fuss im Fluss und die Zahl bleibt in ihrer
     Figma-Groesse relativ zur Zelle — sie ist dort kein Hintergrund mehr,
     sondern sitzt neben dem Titel auf derselben Grundlinie. Der Schacht
     entfaellt: ohne Pin gibt es nichts, was ausraeumen koennte, und ein
     overflow:hidden wuerde nur Inhalt abschneiden. */
  .wp-cell { overflow: visible; }
  /* 2026-09-28: die Kachelnummer bleibt auf der bisherigen Einheit (70.75cqw/362) -
     nur die Grafiken wachsen mit dem groesseren --u der Section. */
  .wp-num { position: static; display: block; font-size: calc(60 * min(1px, 70.75cqw / 362));
            line-height: 1.1; margin-bottom: .1em; }
  /* Im Stapel gibt es in .PHASES weder Pin noch Scrub (wpInit kehrt vor
     der Scrub-Strecke zurueck). Der Text steht deshalb dauerhaft unter der
     Illustration, und die Illustration bleibt vorn. Inhalt geht auf keinem
     Geraet verloren. */
  .wp-fuss { position: static; display: block; }
  /* Im Markup folgt der Text dem Label, weil er auf dem Desktop absolut
     liegt und die Reihenfolge dort nichts bedeutet. Im Fluss stuende er
     damit VOR der Illustration (gemessen bei 390). Flex + order ruecken
     ihn ans Ende, ohne die LESEreihenfolge zu aendern: Label, Ausloeser,
     Text, dann das aria-hidden-Artefakt. */
  /* relative statt static, damit die absolute Kachelnummer die Zelle als
     Bezug hat. left/top MUESSEN dabei zurueckgesetzt werden: .wp-cell--c1/2/3
     und --r1/r2 setzen die Rasterkoordinaten des Desktops, und relative
     macht daraus einen Versatz — die Labels standen dadurch bei 390 auf drei
     verschiedenen x (107/195/284 im Muster c1/c2/c3, gemessen). */
  .wp-cell { position: relative; left: auto; top: auto;
             display: flex; flex-direction: column; align-items: flex-start; }
  .wp-info { order: 1; }
  .wp-info {
    position: static; visibility: visible; opacity: 1;
    inset: auto; pointer-events: auto; margin-top: 1.6em; gap: 1.1em;
  }
  .wp-info__k { font-size: clamp(.72rem, 2.9vw, .88rem); }
  .wp-info__t { font-size: clamp(.9rem, 3.4vw, 1.05rem); }
  .wp-lab {
    position: static; display: block;
    font-size: clamp(.85rem, 3.2vw, 1rem); line-height: 1.4;
    margin-bottom: 1.2em;
  }
  /* Die Artefakte behalten ihre Innengeometrie und skalieren als Ganzes,
     sobald die Zelle schmaler wird als ihre Vorlagenbreite: --u bleibt
     1px, solange Platz ist, und schrumpft erst darunter. Vorher wurden
     .wp-art--ess (295px) und .wp-art--cards (402px) bei 390 einfach
     abgeschnitten. Die Zelle ist 70.75% der Section, und weil .wp auch
     hier container-type:inline-size traegt, ist 70.75cqw genau das —
     kein container-type auf der Zelle selbst (R-2). */
  .wp-art { position: relative; left: auto; top: auto; }
  .wp-art--ess   { width: calc(295*var(--u)); height: calc(75*var(--u)); }
  .wp-art--cards { width: calc(362*var(--u)); height: calc(128*var(--u)); }
  .wp-art--cat   { width: calc(206*var(--u)); height: calc(137*var(--u)); }
  .wp-art--pri   { width: calc(187*var(--u)); height: calc(125*var(--u)); }
  .wp-art--bts   { width: calc(348*var(--u)); height: calc(136*var(--u)); }
  .wp-art--rep   { width: calc(261*var(--u)); height: calc(128*var(--u)); }
}

/* --- Reduced Motion --------------------------------------------------
   Der Linienaufbau in wpInit kehrt vorher zurueck; das hier ist die
   Absicherung, falls doch ein Startzustand gesetzt wurde. */
@media (prefers-reduced-motion: reduce) {
  /* Nur .wp-l wird in wpInit ueberhaupt animiert; die uebrigen Klassen
     standen hier als Vorrat fuer eine Choreografie, die es nicht gibt
     (AP-1004). Die Liste nennt jetzt genau den einen Traeger. */
  /* Nur der scaleX/scaleY-Aufbau wird zurueckgesetzt. Die Opazitaet
     bleibt auf der Struktur-Sprosse 0.4 (AP-503) — auf 1 gehoben
     sahen Reduced-Motion-Nutzer eine lautere Section, und an der
     Schnittkante brach der Wert hart gegen die 0.4 der Seitenlinien. */
  .wp-l { transform: none !important; }
}

/* ===================================================================
   REPORT — Bento-Kachel 04 "Diagnostic Report" (Rene 2026-09-02)
   ART DIRECTION MODE: fuer REPORT existiert kein Figma-Node.

   HALTUNG: die Seite ist das naechste KAPITEL der Workshop-Strecke,
   keine zweite Website. Sie erbt das Seiten-Template unveraendert
   (FLIP-Headline, v1/v2/v3 + h1/h2/h3, Fortschrittsbalken, .H-Kachel)
   und setzt darunter EIN eigenes Rastersystem an.

   GRUND: #ededed hell, Linien #f31a27 @ 0.35 — seit 2026-09-02 als
   EXPLIZITER Eintrag 'diagnostic report' in PAGE_THEMES (main.js), mit
   denselben Werten wie der fruehere Rueckfall auf das Portfolio-Theme:
   eine Entscheidung, kein Zufall. lineOp 0.35 gegen 0.4 (Workshop) ist
   Renes offene Frage.

   TINTENLEITER: dieselbe Semantik wie auf dunklem Grund, invertiert.
   0.85 primaer · 0.55 sekundaer · 0.35 tertiaer/Nummern. Keine
   vierte Stufe.

   LINIENVERTRAG (03-layout-grid, Rene 2026-08-27):
     - v2/v3 laufen als EINE Spine durch alle Sections. Weil die
       Sections lueckenlos aneinanderstossen (Abstand ueber padding,
       nie ueber margin), stossen ihre Teilstuecke exakt aneinander
       und lesen als eine Linie — und koennen am Farbschnitt trotzdem
       die Farbe wechseln.
     - Oben terminiert die Spine auf der ersten Topline, unten auf der
       Schlusslinie des CTA. Kein Ende auf freier Flaeche.
     - Horizontale starten auf v1 (Randspalte bleibt linienfrei) und
       laufen bis zum Desktop-Rand.
     - KEIN position:fixed. Die Linien liegen in ihrer Section und
       scrollen mit ihr (AP-207).
   =================================================================== */
.page-content--diagnostic-report {
  position: relative;
  /* TINTENLEITER HELL — gemessen, nicht gespiegelt.
     Die dunkle Bestandsleiter mit denselben Alphawerten zu uebernehmen
     war falsch: rgba(237,237,237,0.35) auf #201e1e ergibt 2.92:1,
     rgba(30,30,30,0.35) auf #ededed nur 2.12:1 — 27 % weniger, und auf
     der hellen Seite trug dieselbe Sprosse nicht nur Zaehler, sondern
     alle Roadmap-Owner, alle Lieferstatus und einen ganzen Satz. Die
     Section, die "every action has an owner" titelt, rendert den Owner
     dann als schlechtest lesbares Element der Seite.
     Alphawerte sind keine Semantik; Kontrastverhaeltnisse sind es.
     Gegen #ededed gerechnet:
       0.85 -> 9.28:1  primaer, traegt Aussagen
       0.65 -> 4.87:1  sekundaer, traegt Owner, Status, Labels, Saetze
       0.50 -> 3.01:1  tertiaer, NUR Zaehler und Aufzaehlungsreste */
  --rp-ink: rgba(30, 30, 30, 0.85);
  --rp-ink2: rgba(30, 30, 30, 0.65);
  --rp-ink3: rgba(30, 30, 30, 0.5);
  /* Literal, KEINE Ableitung: PAGE_THEMES liefert line und lineOp an die
     Template-Linien, nicht an dieses Stylesheet. Der Wert MUSS mit dem
     Eintrag 'diagnostic report' in main.js uebereinstimmen — beide
     aendern oder keinen (AP-401). */
  --rp-line: var(--line); /* HVR-20260914-31 */
  --rp-frame: rgba(243, 26, 39, 0.8);
}

/* --- Sectionschale + Rasteranker ------------------------------------
   Die Prozentwerte sind der No-JS-Fallback. Mit JS gewinnt immer der
   gemessene Live-Anker aus rpAnchors (v1 = .H-Kachelkante). */
.rp {
  position: relative;
  --v1: 3.75%;
  --v2: 14.25%;
  --v3: 86.25%;
}
.rp *, .rpc * { box-sizing: border-box; }
/* <i> ist hier Zeichenflaeche (Linien, Marker, Segmente) und
   Eyebrow-Ziffer, nicht Semantik. Ohne den Reset erbt jedes davon die
   UA-Kursive — sichtbar an den Kapitelziffern (AP-306). */
.rp i, .rpc i { font-style: normal; }

/* Linienatome. EIN Traeger, zwei Achsen, eine Opazitaet je Grund. */
.rp-l {
  position: absolute;
  background: var(--signal-red);
  opacity: 0.35;
  pointer-events: none;
}
/* VERTIKALE: NUR in der dunklen Section.
   Das Seiten-Template zeichnet v1/v2/v3 bereits viewport-fest ueber die
   volle Hoehe (hero__pline--v). Eigene Section-Vertikalen lagen exakt
   darauf — gemessen 0.00 px auf v2 und 0.06 px auf v3, beide 1 px,
   beide #f31a27 @ 0.35: zwei Elemente auf derselben Kante, effektiv
   0.58 statt 0.35 (AP-203).
   Nur die dunkle Section deckt die Template-Linien mit ihrem opaken
   Grund ab. Dort tritt die Vertikale als FARBWECHSEL wieder ein —
   genau der von AP-204 vorgesehene Fall "Farbwechsel-only bei Blends",
   deshalb ohne eigenen Aufbau: es ist dieselbe Linie, nicht eine neue. */
.rp-l--v { top: 0; bottom: 0; width: var(--line-w); margin-left: calc(var(--line-w) / -2); }
.rp-l--v2 { left: var(--v2); }
.rp-l--v3 { left: var(--v3); }
/* HORIZONTALE: gehoeren der Section. Sie starten auf v1 (Randspalte
   bleibt linienfrei) und laufen bis zum Desktop-Rand. */
.rp-l--h { left: var(--v1); right: 0; top: 0; height: var(--line-w); } /* HVR-20260915-05 (Rene): bis zum Seitenrand */
.rp--dunkel .rp-l { background: #ffffff; opacity: 1; } /* HVR-20260914-31 */

/* Content-Band zwischen v2 und v3 — EIN Mass fuer alle Sections */
.rp__band {
  margin-left: var(--v2);
  width: calc(var(--v3) - var(--v2));
}

/* Eyebrow: Kapitelzaehler + Rolle, Signal Rot nur auf der Ziffer */
.rp-eyebrow {
  margin: 0 0 2.4em;
  font-family: "HK Grotesk Wide", var(--font-display);
  font-weight: 700;
  text-transform: uppercase;
  font-size: clamp(0.8rem, 0.95vw, 1.1rem);
  letter-spacing: 0.14em;
  color: var(--rp-ink2);
}
.rp-eyebrow i { font-style: normal; color: var(--signal-red); margin-right: 1.2em; }

/* Kapitel-Statement — Kapitel-Headline-Rolle (04-typography).
   .rp-bridge teilt den Selektor statt ihn zu duplizieren: der vorherige
   Stand war property-gleich abgeschrieben (CLAUDE.md Paragraph 3, AP-501). */
.rp-hl,
.rp-bridge {
  margin: 0;
  font-family: "HK Grotesk Wide", var(--font-display);
  font-weight: 700;
  text-transform: uppercase;
  font-size: clamp(2rem, 4.2vw, 4.6rem);
  /* 0.98 wie .why__open-hl / .ws__hl — dieselbe Rolle, dieselbe Metrik. */
  line-height: 0.98;
  letter-spacing: 0.01em;
  color: var(--rp-ink);
}
/* Statement-Subline: IMMER Intro-Copy-Rolle (04-typography Regel 6) */
.rp-sub {
  margin: 1.6em 0 0;
  max-width: 34em;
  font-family: "HK Grotesk Wide", var(--font-display);
  font-weight: 400;
  font-size: clamp(1rem, 1.35vw, 1.55rem);
  line-height: 1.5;
  color: var(--rp-ink2);
}

/* KOPF-GRAMMATIK (Rene 2026-09-02, Entscheidung).
   Es gibt EINE: Eyebrow mit Kapitelziffer ueber der Headline, alle
   Kapitel auf v2.

   Zwischenzeitlich trugen R2 und R5 eine zweite Grammatik — die
   Kapitelziffer als Marginalie in der Spalte zwischen v1 und v2, nach
   DBX-03. Sie ist auf Renes Entscheidung ZURUECKGENOMMEN, weil sie
   gegen `03-layout-grid` Sichtkanten-Regel 1 stand ("Nichts ueberragt
   links die 14.25 %-Linie"). Rang 4 schlaegt Rang 5; die Dropbox-
   Referenz begruendet keine Ausnahme von einer als Gesetz gefuehrten
   .Havior-Regel.
   Der von AP-106 verlangte Bruch liegt seit 2026-09-07 in R5 (Treppe):
   an der Geometrie, nicht am Kopf. */

/* =================== R1 — Opening ==================================
   Sitzt IM ERSTEN VIEWPORT unter der Template-Headline, im Band
   zwischen h2 (41 %) und h3 (77.8 %) — dieselbe Mechanik wie
   .ws-hero auf der Workshop-Seite. */
/* .pf-stage (100vh Headline-Buehne) geht dem Seiteninhalt voraus —
   der negative Zug holt das Statement in den ERSTEN Viewport zurueck,
   Mechanik wie .ws-hero. Eine eigene 100vh-Buehne waere eine zweite
   gewesen und haette das Statement in den zweiten Viewport geschoben.

   height 50vh BEI margin-top -50vh ist kein Zierwert: der Block beginnt
   damit auf 50vh und endet konstruktiv auf 100vh. Die Folge-Section
   startet dadurch auf JEDER Viewporthoehe exakt am Falz, und das
   Statement liegt garantiert im Band zwischen h2 (41 %) und h3 (77.8 %).
   Ein fester -42vh traf beides nur bei 900 px Hoehe: bei 800 schnitt das
   Statement die h3-Linie, und die erste Topline stand 182 px ueber dem
   Falz. */
.rp-open {
  margin: -50vh 0 0 14.25%;
  height: 50vh;
  width: 72%;
  /* max-width 46em entfernt (2026-09-30): der Block muss bis v3 reichen, damit die
     Testimonial-Kachel (.rp-open__testi) die Linienzelle v2..v3 fuellt. Headline bricht
     per <br>, Sub ist auf 34em gedeckelt - der Textstand aendert sich nicht. */
  /* Der Block bleibt 50vh hoch, damit die Folge-Section am Falz beginnt.
     Sein INHALT sitzt aber unten und endet konstruktiv auf 77.8vh — der
     h3-Linie des Seiten-Templates. 50vh Start + 50vh Hoehe - 22.2vh
     Polster = 77.8vh. Vorher schwebte das Statement zwischen h2 und h3,
     ohne eine der drei Horizontalen zu beruehren; jetzt terminiert es
     auf der Linie, die das Band nach unten schliesst. */
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding-bottom: 22.2vh;
}
.rp-open__hl {
  margin: 0;
  font-family: "HK Grotesk Wide", var(--font-display);
  font-weight: 700;
  text-transform: uppercase;
  /* Sticky-Rolle, exakt wie .ws-hero — die Seite oeffnet mit dem
     gleichen Gewicht wie die Workshop-Seite, nicht lauter. */
  font-size: clamp(1.7rem, 2.6vw, 3rem);
  line-height: 1.16;
  letter-spacing: 0.01em;
  color: var(--rp-ink);
}
.rp-open__sub {
  margin: 1.6em 0 0;
  max-width: 34em;
  font-family: "HK Grotesk Wide", var(--font-display);
  font-weight: 400;
  font-size: clamp(1rem, 1.35vw, 1.55rem);
  line-height: 1.5;
  color: var(--rp-ink2);
}

/* =================== Sectionrhythmus ===============================
   Abstaende ausschliesslich als PADDING (vh-Skala aus 02-tokens):
   Margen wuerden Luecken zwischen den Sections reissen, und in jeder
   Luecke haette die v2/v3-Spine ein Ende auf freier Flaeche. */
/* 8vh statt 18vh: ueber dem Farbschnitt standen 161.96 px gegen 2.00 px
   darunter — ein Verhaeltnis von 81:1, das Label wirkte an der Kante
   eingeklemmt und die Leere darueber trug nichts. */
.rp--in { padding: 0 0 8vh; }
/* Der Farbschnitt DOCKT AN: die dunkle Section beginnt unmittelbar mit
   ihrem Eyebrow auf der Kante, statt beidseitig gepolstert zu sein.
   Zuvor lagen 162 px ueber und 126 px unter dem Schnitt leer — 288 px
   ohne Komposition an der staerksten Grafikkante der Seite (DBX-08). */
.rp--scope { padding: 0 0 18vh; background: #201e1e; }
/* Kein Nullwert, sondern ein bewusster optischer Einzug: die Kante
   traegt den Schnitt, das Label steht sichtbar darin statt darauf. */
.rp--scope .rp__band { padding-top: 4vh; }
/* Auch der zweite Schnitt dockt an: die letzte Bandzeile wird nicht mehr
   von einer eigenen Haarlinie geschlossen, sondern von der Farbkante
   selbst. Beides zusammen waeren zwei Elemente auf einer Kante. */
.rp--scope { padding-bottom: 0; }
.rp-band:last-child { border-bottom: none; }
.rp--pri { padding: 16vh 0 18vh; }
.rp--road { padding: 0 0 8vh; } /* HVR-20260914-20 (Rene): Freiraum nach Stufe 03 vor der Linie von 18vh auf das Bandmass 8vh */
/* Kein Fusspolster: der Anlauf des CTA traegt den Abstand allein.
   Beides zusammen ergab 285 px Leere vor der Einfahrt und nahm der
   Geste ihre Wirkung. */
.rp--out { padding: 0; }

/* =================== R2 — What goes in =============================
   Asymmetrisch: links das Statement, rechts die ZWEI Eingaenge
   (Workshop findings, BTS scoring) als Ledger — "Two inputs" in der
   Headline, zwei Zeilen im Ledger (AP-1005). */
.rp--in .rp__band { display: grid; grid-template-columns: 1fr 40%; gap: 0 6%; padding-top: 8vh; } /* HVR-20260912-26: Liste fuellt die rechte Kachelhaelfte; 40 % (AD-Checkpoint 2, D1): die Headline-Spalte traegt "FOUR INPUTS." einzeilig auf allen Breiten, Zeilenfall dreizeilig geautort */
/* REGISTER (AD 2026-09-07, D5b): die untere Hairline des Ledgers sitzt
   AUF der letzten Grundlinie der Sub-Zeile links — nicht auf deren
   Box-Unterkante. Mit `align-self: end` allein lag sie 8.16 px darunter
   (1440), an drei Breiten drei verschiedene Beinahe-Werte (AP-208).
   Der Abstand Box-Unterkante -> Grundlinie ist Descender plus halber
   Durchschuss der Sub-Rolle, also ein festes Vielfaches IHRER
   Schriftgroesse: 0.42 x Sub-clamp hebt die Linie exakt auf die
   Grundlinie, auf jeder Breite. Gemessen 1024 / 1440 / 1920 (AP-901). */
/* HVR-20260912-26 (Rene): die vier Eingaenge fuellen die ganze Kachelhoehe —
   Liste streckt sich ueber die Bandhoehe (Zeilen 1fr), Ziffer und Titel in der
   Term-Statement-Rolle (04) statt Eyebrow/Descriptor; die Register-Hairlines
   terminieren an den Spaltenkanten. Vorher: 34-%-Spalte, unten buendig,
   Titel 17 px. */
.rp-in__list { margin: calc(0.38 * clamp(0.8rem, 0.95vw, 1.1rem)) 0 calc(0.42 * clamp(1rem, 1.35vw, 1.55rem)); padding: 0; list-style: none; align-self: stretch; display: grid; grid-auto-rows: 1fr; } /* AD-Checkpoint 2 (D2, AP-208): erste Linie auf der Eyebrow-Versallinie, letzte Linie auf der Sub-Grundlinie (0.42 x Intro-Copy, D5b-Register) */
/* 3.2em Indexspalte wie .rp-now__row und das freigegebene
   .ws-rank__row: EIN Mass fuer denselben Job (zweistelliger Index). */
.rp-in__row {
  display: grid;
  min-width: 0; /* AD-Checkpoint 3 (AP-902): Zeile darf die 40-%-Spur nicht aufdruecken */
  grid-template-columns: 2.4em minmax(0, 1fr);
  align-items: center;
  padding: 0.6em 0;
  border-bottom: 1px solid var(--rp-line);
  font-size: clamp(1.3rem, 2vw, 2.3rem);
}
.rp-in__row:first-child { border-top: 1px solid var(--rp-line); }
.rp-in__row b {
  font-family: "HK Grotesk Wide", var(--font-display);
  font-weight: 700;
  font-size: inherit;
  letter-spacing: 0.01em;
  color: var(--signal-red); /* Ziffer als Schluesselinfo, wie das Kapitel-Eyebrow */
  font-variant-numeric: tabular-nums;
}
.rp-in__row span {
  font-family: "HK Grotesk Wide", var(--font-display);
  font-weight: 700;
  text-transform: uppercase;
  font-size: inherit;
  line-height: 1.1;
  letter-spacing: 0.01em;
  color: var(--rp-ink);
}

/* =================== R3 — What gets analyzed (dunkel) ==============
   Der Farbschnitt hell -> dunkel IST die Rasterlinie an dieser
   Stelle (DBX-08): kein zusaetzlicher Strich, sonst zeichnen zwei
   Elemente dieselbe Kante (AP-203).

   Sieben Report-Kapitel (Titel + Beschreibungszeile) in der .WHAT-/
   .ws-band-Anatomie: Nummer | Body. Fokus ueber die 55-%-Linie -> GENAU
   EIN Band .is-focus (Ziffer Signal Rot, Titel Primaertinte). KEINE
   Segmentbalken (Rene 2026-09-02): nur das Band "BTS scoring" traegt die
   Achsenzeile Budget · Time · Skills als reines Label. */
.rp--scope .rp-eyebrow { color: rgba(237, 237, 237, 0.55); }
.rp--scope .rp-hl { color: #ededed; }
.rp--scope .rp-sub { color: rgba(237, 237, 237, 0.55); }

.rp-scope__liste { margin: 11vh 0 0; padding: 0; list-style: none; border-top: 1px solid #ffffff; } /* HVR-20260914-31 */
.rp-band {
  position: relative;
  display: grid;
  grid-template-columns: 14% 1fr;
  align-items: center;
  gap: 0 4%;
  padding: 4vh 0;
  border-bottom: 1px solid #ffffff; /* HVR-20260914-31 */
}
/* Nummer: Rollin-Rolle, in der Bandmitte — dieselbe Anatomie wie das
   freigegebene .what__num-/.ws-num-Atom, auf hellem Seitengrund in
   der Dunkel-Section also identische Werte. */
.rp-band__n {
  align-self: center;
  font-family: "HK Grotesk Wide", var(--font-display);
  font-weight: 700;
  font-size: clamp(2.8rem, 6.2vw, 6.8rem);
  line-height: 1;
  letter-spacing: 0.01em;
  color: rgba(237, 237, 237, 0.35);
  font-variant-numeric: tabular-nums;
  transition: color 0.25s ease;
}
.rp-band.is-focus .rp-band__n { color: var(--signal-red); }
.rp-band__b { min-width: 0; }
.rp-band__t {
  margin: 0;
  font-family: "HK Grotesk Wide", var(--font-display);
  font-weight: 700;
  text-transform: uppercase;
  /* Term-Statement-Rolle */
  font-size: clamp(1.3rem, 2vw, 2.3rem);
  line-height: 1.1;
  letter-spacing: 0.01em;
  color: rgba(237, 237, 237, 0.55);
  transition: color 0.25s ease;
}
.rp-band.is-focus .rp-band__t { color: #ededed; }

/* Beschreibungszeile des Kapitels. Sie sitzt exakt dort, wo bis
   2026-09-02 die Score-Spur lag (gleiches margin-top), damit die
   Bandhoehe unveraendert bleibt. Renes Entscheidung: BTS-Indikatoren nur
   dort, wo sie echte Budget/Time/Skills-Information tragen — auf einer
   Kapitelliste tut das keine Zeile, auch nicht die mit dem Titel "BTS
   scoring", denn dort ist BTS das Thema und kein Messwert. */
.rp-band__s {
  margin: 1.2em 0 0;
  font-family: "HK Grotesk Wide", var(--font-display);
  font-weight: 700;
  /* Sub/Copy-Rolle (04-typography) */
  font-size: clamp(0.85rem, 1.05vw, 1.2rem);
  line-height: 1.45;
  color: rgba(237, 237, 237, 0.35);
  transition: color 0.25s ease;
}
.rp-band.is-focus .rp-band__s { color: rgba(237, 237, 237, 0.55); }

/* Achsenzeile. .rp-score laeuft auf der Kapitelliste nur noch als Label:
   NUR das Band "BTS scoring" traegt die drei Achsennamen (Rene
   2026-09-02, Abschnitt 04). Ruhezustand muted in der Eyebrow-Rolle,
   im Fokus eine Sprosse heller. Keine Segmente, keine Werte. */
.rp-score { margin-top: 1.2em; display: flex; flex-wrap: wrap; gap: 0.6em 2.4em; }
.rp-score__i {
  display: grid;
  grid-template-columns: auto auto;
  align-items: center;
  gap: 0 0.8em;
  font-family: "HK Grotesk Wide", var(--font-display);
  font-weight: 700;
  text-transform: uppercase;
  font-size: clamp(0.8rem, 0.95vw, 1.1rem);
  letter-spacing: 0.14em;
  color: rgba(237, 237, 237, 0.35);
  font-variant-numeric: tabular-nums;
  transition: color 0.25s ease;
}
.rp-band.is-focus .rp-score__i { color: rgba(237, 237, 237, 0.55); }
/* Die Segmentbalken (.rp-seg) sind seit Renes Entscheidung 2026-09-02
   aus dem Markup — auf einer Kapitelliste traegt keine Zeile echte
   B/T/S-Werte. Ihre Regeln sind entfernt; das Bauteil lebt im
   freigegebenen .wp-bts der Workshop-Seite weiter. */

/* =================== R4 — The main result ==========================
   Drei Roadmap-Szenarien (Budget / Time / Skillset fixed) als
   zweitoniger Statement-Stapel, darunter die Schlussregel "nothing can
   move". Der Zeilenfall der Bridge-Headline ist GEAUTORT (<br>). Kein
   Marker vor dem Statement: ein Inline-Marker brach die linke
   Sichtkante um 41.6 px (AP-201); nach links haengen darf er nicht. */

/* Mass in der Sub/Copy-Rolle wie .rp-rest — "34em" auf einem Element
   ohne eigene Schriftgroesse waere ein anderes Mass (544 gegen 514 px). */
/* HVR-20260912-29 (Rene): die drei Szenarien als Matrix ueber das Band (07:
   "Was wird priorisiert?"): drei gleichfoermige Spalten, je eine Hairline an
   der Spaltenkante, der fixierte Faktor als Schluesselwort in Signal Rot, die
   anpassenden Faktoren in der Descriptor-Rolle. Vorher: zweitoniger Stapel
   in 34em, nur Text. */
.rp-now { margin: 8vh 0 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; } /* Hairlines der drei Spalten lesen als eine Linie v2 bis v3 */
/* ZWEITONIGER STAPEL, kein Band-Modul: R4 trug dieselben Spuren
   (14 % | 1fr), dieselbe 89-px-Geisterziffer und dieselbe Textrolle wie
   die Baender in R3 — "R3 ohne Linien" (AP-106-Zusatz, AD 2026-09-07).
   Jetzt traegt der Ton die Hierarchie: der fixierte Engpass in der
   Term-Statement-Rolle und Primaertinte, die Folge in der Descriptor-
   Rolle und Sekundaertinte. Keine Ziffer, keine Hairline, kein Einzug —
   jedes dieser Mittel gehoert einem anderen Modul der Seite. */
.rp-now__row { padding: 1.1em 0; border-top: 1px solid var(--rp-line); } /* HVR-20260914-18 (Rene): Inhalt mittig zwischen den Linien, Linien enger */
.rp-now__key { font-style: normal; color: var(--signal-red); }
.rp-now__row b {
  display: block;
  font-family: "HK Grotesk Wide", var(--font-display);
  font-weight: 700;
  text-transform: uppercase;
  font-size: clamp(1.3rem, 2vw, 2.3rem);
  line-height: 1.1;
  letter-spacing: 0.01em;
  color: var(--rp-ink);
}
.rp-now__row span {
  display: block;
  margin-top: 0.35em;
  font-family: "HK Grotesk Wide", var(--font-display);
  font-weight: 700;
  font-size: clamp(0.95rem, 1.2vw, 1.35rem);
  line-height: 1.45;
  color: var(--rp-ink2);
}
/* Schlussregel "Nothing can move? Then the target must." — muted,
   Sub/Copy-Rolle, im selben Mass wie jede Copy der Seite. */
/* HVR-20260912-29, AD-Checkpoint 2 (D5): die Folge steht auf einer eigenen Rangstufe, nicht als
   viertes Szenario: Sticky-Statement (wie .rp-open__hl) mit Intro-Copy, 8 vh unter einer Schlusslinie v2 bis v3 */
.rp-rest b { display: block; margin: 0 0 0.5em; max-width: 18em; font-size: clamp(1.7rem, 2.6vw, 3rem); line-height: 1.16; text-transform: uppercase; letter-spacing: 0.01em; color: var(--rp-ink); }
.rp-rest > span { display: block; max-width: 34em; font-weight: 400; font-size: clamp(1rem, 1.35vw, 1.55rem); line-height: 1.5; color: var(--rp-ink2); }
.rp-rest {
  margin: 0;
  padding: 5vh 0; /* HVR-20260914-18 (Rene): mittig zwischen oberer und unterer Linie, weniger Freiraum (vorher 8vh Abstand plus 8vh Innenabstand oben) */
  border-top: 1px solid var(--rp-line);
  /* wie jede Copy der Seite: 34em, nicht das volle Band (AD 2026-09-07,
     vorher 1026 px Zeilenlaenge als einziger Absatz ohne Mass) */
  font-family: "HK Grotesk Wide", var(--font-display);
  font-weight: 700;
  font-size: clamp(0.85rem, 1.05vw, 1.2rem);
  color: var(--rp-ink2);
}

/* =================== R5 — How the roadmap is chosen ================
   Der Entscheidungsweg als Treppe (Details am Block unten). Die
   fruehere Achse mit zwei Logo-Punkt-Trapezen als "Gates" ist
   entfernt: der Logo-Punkt ist kein Grafikelement (AP-509). */
.rp--road .rp__band { padding-top: 8vh; }
/* --- R5: der Entscheidungsweg als TREPPE ----------------------------
   Drei Stationen. Jede beginnt ein Rasterdrittel weiter rechts als die
   vorige und traegt eine eigene Hairline, die auf v3 terminiert. Die
   Reihenfolge steht in der Geometrie — nach unten, nach rechts — und in
   der Ziffer; es gibt keinen Pfeil, keine Marke, kein Trapez. Das ist die
   einzige diagonale Komposition der Seite und bricht damit die Folge aus
   drei gleichen Dreispaltern (R5/R6/CTA), die der AD als Teppich gemessen
   hatte. Linienenden: links auf der Ziffer (Objektkante), rechts auf v3
   (Linie) — beides erlaubte Terminierungen (03-layout-grid). */
.rp-weg { list-style: none; margin: 11vh 0 0; padding: 0; }
.rp-weg__s {
  position: relative;
  display: grid;
  /* Die Term-Statement-Rolle steht auf der STATION, nicht auf Ziffer und
     Titel: nur so loesen die em-Masse von Spalte und Gap gegen die
     Ziffer auf. Auf dem li ohne eigene Schriftgroesse rechnete "1.6em"
     gegen 16 px = 25.6 px an jeder Breite — "02" (40 px @1440, 51 px
     @1920) lief aus der Zelle und ueberdeckte bei 1920 den Titel um
     6.5 px (AP-411). Festes Mass statt auto, weil HK Grotesk Wide
     keine Tabellenziffern traegt (AP-307). */
  font-size: clamp(1.3rem, 2vw, 2.3rem);
  /* HVR-20260912-30 (Rene): Ziffer in der Rollin-Rolle (04, wie die Band-Nummern
     im .WHAT), damit die Treppe als Weg liest; Spalte nimmt die Ziffernbreite */
  grid-template-columns: calc(1.45 * clamp(2.8rem, 6.2vw, 6.8rem)) minmax(0, 1fr); /* AD-Checkpoint 2 (D6, AP-307): feste Spalte in der Ziffernrolle, max-content war auto; minmax (AP-902) */
  min-width: 0;
  align-items: start; /* HVR-20260914-19 (Rene): Titel und Subline spannen die Hoehe der Ziffer (Layoutgruppe) */
  gap: 0 0.6em;
  padding: 0.9em 0 1.2em;
}
.rp-weg__s > div { align-self: stretch; display: flex; flex-direction: column; justify-content: space-between; }
.rp-weg__s .rp-weg__d { margin-top: 0.4em; }
/* Einzug als Anteil der BANDBREITE, nicht als fester Wert: die Stufe
   bleibt auf jeder Breite ein Drittel. */
/* AD-Checkpoint 3 (D31): Einzuege 30 / 60 % statt Drittel, damit Stufe 3 im Band 901 bis 1000 ihre Textspalte behaelt */
.rp-weg__s:nth-child(2) { margin-left: calc(30% + var(--content-inset)); }
.rp-weg__s:nth-child(3) { margin-left: calc(60% + var(--content-inset)); }
/* Die Hairline ist ein eigenes Element, damit sie sich von links
   zeichnen kann (scaleX) — ein border-top laesst sich nicht animieren. */
.rp-weg__l {
  position: absolute; left: 0; right: 0; top: 0;
  height: 1px; background: var(--rp-line);
  transform-origin: left center;
}
/* Ziffer in der Term-Statement-Rolle, tertiaere Tinte: sie ordnet, sie
   behauptet nichts — und sie ist bewusst NICHT die 89-px-Geisterziffer
   aus R3, damit die Treppe nicht als zweites Band-Modul liest. */
.rp-weg__s > b {
  font-family: "HK Grotesk Wide", var(--font-display);
  font-weight: 700;
  font-size: clamp(2.8rem, 6.2vw, 6.8rem); /* HVR-20260912-30: Rollin-Rolle */
  line-height: 0.9;
  letter-spacing: 0.01em;
  color: var(--rp-ink3);
  font-variant-numeric: tabular-nums;
}
.rp-weg__t {
  margin: 0;
  font-family: "HK Grotesk Wide", var(--font-display);
  font-weight: 700;
  text-transform: uppercase;
  font-size: inherit;
  line-height: 1.1;
  letter-spacing: 0.01em;
  color: var(--rp-ink);
}
.rp-weg__d {
  margin: 0.55em 0 0;
  font-family: "HK Grotesk Wide", var(--font-display);
  font-weight: 700;
  font-size: clamp(0.85rem, 1.05vw, 1.2rem);
  line-height: 1.45;
  color: var(--rp-ink2);
}

/* =================== R6 — What you receive =========================
   Kein Rahmen um die Formate. Drei gleich grosse Outline-Kaesten
   nebeneinander lesen als Kartenraster, egal ob sie Radius und
   Schatten haben — und es waere das EINZIGE kastenartige Moment der
   Seite gewesen (AP-502). Die Formate tragen Haarlinie oben, Titel,
   Satz — alle drei solid und gleichwertig (AP-510). */
.rp--out .rp__band { padding-top: 8vh; }
/* HVR-20260912-31 (Rene): das Ergebnis als Klimax im OutcomeStrip-Muster (05,
   APPROVED PATTERN 8): drei vollbreite Signal-Rot-Kaesten mit dem Format
   in der Sticky-Rolle, Stuetzzeile darunter; Gap = Kachel-Gap. Vorher: drei
   Hairline-Spalten mit Titel und Satz. */
.rp-out__grid { margin: 8vh var(--content-inset) 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-rows: 1fr; gap: 0 var(--tile-gap); --gain-pad: clamp(0.9rem, 1.4vw, 1.65rem); } /* Kaesten wie .GAIN um den Inset von v2/v3 abgesetzt (HVR-20260912-18-Regel) */
.rp-out__f {
  padding: 0;
  display: flex;
  flex-direction: column;
}
.rp-out__f b {
  display: flex;
  align-items: flex-end;
  min-height: calc(2.2em + 0.94em); /* deterministisch zweizeilige Kastenhoehe (Pattern 8), einzeilige Namen sitzen unten */
  flex-wrap: wrap;
  padding: 0.5em var(--gain-pad) 0.44em;
  background: var(--signal-red);
  font-family: "HK Grotesk Wide", var(--font-display);
  font-weight: 700;
  text-transform: uppercase;
  font-size: clamp(1.7rem, 2.6vw, 3rem);
  line-height: 1.1;
  letter-spacing: 0.01em;
  color: var(--bg);
}
/* Gewicht 700: die Regular-Ausnahme gilt laut 04-typography NUR fuer
   die Intro-Copy-Rolle. */
.rp-out__lead { display: block; width: 100%; } /* geautorter Zeilenfall wie .what__outcol-lead */
.rp-out__f p {
  margin: 1.05em 0 0;
  padding-inline: var(--gain-pad);
  font-family: "HK Grotesk Wide", var(--font-display);
  font-weight: 700;
  font-size: clamp(0.95rem, 1.2vw, 1.35rem);
  line-height: 1.45;
  color: var(--rp-ink2);
}
/* Statuslabel entfernt (AD 2026-09-07): "Included" in allen drei
   Spalten ist informationsfrei — die Headline sagt bereits
   "three working outputs" (AP-104). */
/* Keine --opt-Variante mehr: gestrichelt hiess "offen" und stand unter
   einem Label, das "Included" sagte (AP-510). Alle drei Ausgaben sind
   gleichwertig und solid. */

/* Inhaltszeile (TOC) gestrichen, AD 2026-09-07: R3 IST das
   Inhaltsverzeichnis. Eine zweite Kapitelliste mit neun anderen Namen
   widersprach "Seven chapters" (AP-1005-Zusatz). */

/* =================== CTA ===========================================
   Adaption des freigegebenen .wpc-Musters "Die Einfahrt": die Spine
   v2/v3 laeuft nach unten weiter, die Signal-Rot-Flaeche liegt
   zwischen ihnen. Die Schlusslinie terminiert die Spine — ohne sie
   endeten beide Vertikalen auf freier Flaeche. */
.rpc {
  position: relative;
  --v1: 3.75%; --v2: 14.25%; --v3: 86.25%;
  /* ANLAUF — das Erkennungsmerkmal des freigegebenen .wpc-Musters
     ("Die Einfahrt", Rene 2026-08-30): eine Strecke, in der die beiden
     Vertikalen ALLEIN stehen, bevor die Flaeche zwischen ihnen
     erscheint. Ohne sie ist das Muster nur noch eine Platte; genau das
     war der erste Stand (padding-top 1px). Anlauf und Fuss sind Token,
     weil die Waagerechten exakt auf der Ober- und Unterkante der
     Flaeche sitzen — stuenden die Werte doppelt, driftete der Rahmen
     bei der naechsten Abstandsaenderung von der Kante ab. */
  --rpc-anlauf: clamp(9rem, 16vh, 16rem);
  --rpc-fuss: clamp(7rem, 14vh, 14rem);
  /* Anlauf als PADDING, nicht als Marge am Feld: eine Marge am ersten
     Kind kollabiert aus der Section heraus. Genau dieser Fehler hat
     schon einmal die Linienfuehrung aufgerissen — hier waeren es 144 px
     Riss zwischen .rp--out und .rpc gewesen, und die Oberlinie haette
     den Anlauf doppelt gerechnet. */
  padding: var(--rpc-anlauf) 0 var(--rpc-fuss);
}
/* Die beiden Waagerechten sitzen auf den Kanten der Flaeche, nicht auf
   den Sectionkanten: links nie ueber v1 hinaus, rechts bis zum Rand. */
.rpc .rp-l--h { top: calc(var(--rpc-anlauf) - 1px); }
.rpc .rp-l--h2 { top: auto; bottom: calc(var(--rpc-fuss) - 1px); }
.rpc__schacht {
  margin: 0 calc(100% - var(--v3) + 0.5px) 0 calc(var(--v2) + 0.5px);
  /* #201e1e statt Signal Rot. Im freigegebenen .wpc traegt die FLAECHE
     den dunklen Grund und der BUTTON das Signal Rot — hier war es
     vertauscht: 405.930 px2 flaches #f31a27, 4.2 % des Dokuments, und
     die Handlung war das dunkelste Element im Bild. AP-503: Signal Rot
     traegt Bedeutung, nie Flaeche. Der Ton schliesst ausserdem die
     Klammer zur dunklen Analyse-Section. */
  background: #201e1e;
  padding: 6vh clamp(1.6rem, 3vw, 3.4rem);
}
/* Auf dunklem Grund gilt die BESTANDS-Tintenleiter (0.85 / 0.55),
   nicht die gespiegelte helle — siehe AP-507-Begruendung oben. */
.rpc__eyebrow {
  margin: 0 0 2.4em;
  font-family: "HK Grotesk Wide", var(--font-display);
  font-weight: 700;
  text-transform: uppercase;
  font-size: clamp(0.8rem, 0.95vw, 1.1rem);
  letter-spacing: 0.14em;
  color: rgba(237, 237, 237, 0.55);
}
/* Term-Statement-Rolle wie .wpc__hl — derselbe Job auf der Nachbarseite,
   dieselbe Stufe. Die Sticky-Rolle war eine Stufe zu laut. */
.rpc__hl {
  margin: 0;
  max-width: 18em;
  font-family: "HK Grotesk Wide", var(--font-display);
  font-weight: 700;
  text-transform: uppercase;
  font-size: clamp(1.3rem, 2vw, 2.3rem);
  line-height: 1.1;
  letter-spacing: 0.01em;
  color: #ededed;
}
.rpc__wege { margin: 4vh 0 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(3, 1fr); gap: 0 4%; }
.rpc__wege { border-top: 1px solid #ffffff; /* HVR-20260914-31 */ padding-top: 1.6em; }
.rpc__wege li { padding-top: 0; }
.rpc__wege b {
  display: block;
  font-family: "HK Grotesk Wide", var(--font-display);
  font-weight: 700;
  text-transform: uppercase;
  font-size: clamp(0.95rem, 1.2vw, 1.35rem);
  letter-spacing: 0.05em;
  color: #ededed;
}
/* Gewicht 700 statt 400: die Regular-Ausnahme gilt laut 04-typography
   NUR fuer die Intro-Copy-Rolle. Zwei eigene Regular-Rollen waren eine
   nicht freigegebene Erweiterung der Schriftordnung. */
.rpc__wege span {
  display: block;
  margin-top: 0.7em;
  font-family: "HK Grotesk Wide", var(--font-display);
  font-weight: 700;
  font-size: clamp(0.85rem, 1.05vw, 1.2rem);
  line-height: 1.45;
  color: rgba(237, 237, 237, 0.55);
}
/* Der Button traegt das Signal Rot, nicht die Flaeche — 1:1 die Anatomie
   von .wpc__act inklusive Pfeil-Marker und Hover-Umkehr. */
.rpc__act {
  display: inline-flex; align-items: center; gap: .8em;
  margin-top: 4vh;
  white-space: nowrap; text-decoration: none;
  font-family: "HK Grotesk Wide", var(--font-display);
  font-weight: 700; text-transform: uppercase; letter-spacing: .08em;
  font-size: clamp(0.82rem, 1.1vw, 1.3rem);
  padding: 1.1em 2.1em;
  background: var(--signal-red); color: #fff;
  transition: background-color .25s ease, color .25s ease;
}
.rpc__act::after { content: '\2192'; font-family: inherit;
  transition: transform .3s cubic-bezier(.65,0,.45,1); }
.rpc__act:hover { background: #fff; color: var(--signal-red); }
.rpc__act:hover::after { transform: translateX(5px); }
.rpc__act:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }

/* =================== Responsive ====================================
   AP-901: kein Einzelbreiten-Fix. Unter 900 werden ALLE
   mehrspaltigen Raster einspaltig, und die Bandnummer wandert ueber
   den Titel — die Prozentspalten wuerden sonst unter ihre lesbare
   Mindestbreite fallen. */
@media (max-width: 1100px) {
  .rp--in .rp__band { grid-template-columns: 1fr 40%; }
  .rp-band { grid-template-columns: 18% 1fr; }
}
@media (max-width: 900px) {
  /* Schmal wickelt die Subline auf vier bis sechs Zeilen und sprengt
     jedes Band im ersten Viewport. Das Statement steht deshalb UNTER
     der Headline-Buehne — erste Seite Headline, zweite das Statement. */
  /* HVR-20260918-M-repeat (Rene: "Texte sind... sehr zentriert mit viel
     freien Rand links und rechts, den Platz mehr nutzen"): die 14.25%/72%-
     Editorialspalte ist ein Desktop-Mass (v2-Raster). Mobil auf den
     gemeinsamen --content-inset-Rand umgestellt statt der Prozentspalte -
     derselbe Rand wie .ab-text und die bereits vollbreiten Bild-Frames. */
  /* HVR-20260918-impeccable (Rene: "zu viel Abstand zwischen Sections, wo
     nichts ist" - der Oeffnungs-Screen einer Seite zeigt mobil nur Titel +
     Linien, das Statement beginnt erst NACH einer vollen Viewport-Hoehe,
     obwohl die h3-Konstruktionslinie (77.8vh) schon den Endpunkt der
     Headline-Buehne markiert. margin-top:0 liess das Statement komplett
     UNTER dieser Buehne beginnen statt direkt danach - Rene bestaetigt
     "kompakter machen": -22.2vh zieht das Statement an die h3-Linie heran
     (derselbe Wert wie das Desktop-padding-bottom, das dort die Buehne exakt
     auf 77.8vh schliesst), OHNE die Headline/Subline zu ueberlappen, da
     beide weit oberhalb der h3-Linie enden (gemessen: Subline endet bei
     rund 36% vh, h3 bei 77.8% vh - reichlich Abstand). */
  .rp-open { margin-top: -22.2vh; margin-inline-start: var(--content-inset); width: calc(100% - 2 * var(--content-inset)); max-width: none; height: auto; padding-bottom: 12vh; }
  /* HVR-20260914-41: gestapelt unter dem Statement; 2026-09-30: als rote Kachel ueber die volle
     Spaltenbreite (negativer Rand hebt das Eltern-Padding auf), Innenabstand = Inset, damit
     Zitat, Name und Rolle auf derselben Achse stehen wie Statement und Sub. */
  .rp-open__testi { position: static; height: auto; margin: 2.4em calc(-1 * var(--content-inset)) 0; padding: clamp(1.2rem, 4vw, 1.6rem) var(--content-inset); }
  /* HVR-20260918-M10-Fortsetzung (Rene: "erste Testimonial-Text geht aus
     dem Bildschirmrand raus"): .wb-testi rendert live 326px in einem nur
     230px breiten .rp-open__testi (gemessen per getBoundingClientRect an
     Parent UND Kind) - die globale Override-Regel `.rp-open__testi
     .wb-testi{width:auto}` (Z.4412, ausserhalb jeder Media Query) gewinnt
     offenbar nicht zuverlaessig gegen die Workshop-Basisregel
     `.wb-testi{width:min(46%,560px)}` (Z.4423), sobald .rp-open__testi
     selbst durch DIESE Mobile-Regel von position:absolute (mit
     implizitem left+right-Breitenmass) auf position:static wechselt -
     ohne die feste Breitenberechnung aus left/right faellt die
     Kaskaden-Aufloesung offenbar auf die Workshop-Formel zurueck. Harte,
     unmissverstaendliche Bremse hier direkt im Mobile-Block. */
  .rp-open__testi .wb-testi { width: 100% !important; max-width: 100% !important; }
  /* HVR-20260918-testi-order (Rene: "Testimonial-Text unterhalb der Bilder
     und Namen setzen"): .wb-testi ist ein einfacher Block mit genau zwei
     Kindern in DOM-Reihenfolge Zitat -> Avatar/Name-Zeile. column-reverse
     dreht nur die visuelle Reihenfolge um (Avatare/Name zuerst, Zitat
     danach), ohne DOM oder Klassen anzufassen, die main.js per Selektor
     anspricht (Tipper schreibt weiterhin in .wb-testi__text). gap ersetzt
     den bisherigen margin-bottom am Zitat (der sae jetzt am falschen Ende). */
  .rp-open__testi .wb-testi { display: flex; flex-direction: column-reverse; gap: clamp(1.1rem, 2.4vh, 1.6rem); }
  .rp-open__testi .wb-testi__quote { margin-bottom: 0; }
  /* Der eigentliche Uebeltaeter: .wb-testi__name/.wb-testi__role haben
     BASISWEIT white-space:nowrap (main.js-Component, wiederverwendet von
     Workshop UND Report) - bei laengeren Namen/Rollen (z.B. Lorenzo
     Nucaros "Head of Product at Travel Tiger", die ERSTE der 3 Personen
     und daher das, was Rene als "erster Testimonial" beim Oeffnen zuerst
     sieht) lief der Text ueber seine 114px schmale Spalte (.wb-testi__wer,
     min-width:0 erlaubt das Schrumpfen, aber nowrap verhindert das
     Umbrechen - der Text quillt sichtbar heraus statt zu brechen).
     Umbruch statt Kuerzung: eine Person/Rolle abzuschneiden waere falsch,
     zwei Zeilen sind hier unproblematisch (das Blaeschen hat Hoehen-
     Reserve per main.js reserve()/messMax()). */
  .rp-open__testi .wb-testi__name,
  .rp-open__testi .wb-testi__role { white-space: normal; }
  .rp--in .rp__band { grid-template-columns: 1fr; gap: 8vh 0; }
  /* Gestapelt steht der Ledger UNTER dem Kopf: es gibt keine Grundlinie
     daneben, auf die er registrieren koennte — die Register-Marge
     entfaellt. */
  .rp-in__list { align-self: start; margin-bottom: 0; grid-auto-rows: auto; }
  .rp-in__row { padding: 0.75em 0; }
  .rp-band { grid-template-columns: 1fr; gap: 0.8em 0; padding: 3.2vh 0; }
  .rp-band__n { font-size: clamp(2rem, 8vw, 3.4rem); }
  /* R4 braucht schmal KEINE eigene Regel mehr: der zweitonige Stapel
     traegt Term-Statement und Descriptor mit ihren clamp-Boeden. Die
     8vw-Ziffernregel, die hier stand, traf nach dem Umbau das
     STATEMENT (54.4 px @820 gegen 34.4 px Headline — AP-302, AP-901). */
  /* Die Treppe stapelt schmal ohne Einzug: ein Drittel von 270 px
     traegt keine Ziffer mehr. Die Reihenfolge traegt dann die Ziffer
     allein. */
  .rp-weg__s:nth-child(2), .rp-weg__s:nth-child(3) { margin-left: var(--content-inset); } /* gestapelt: alle Stufenlinien ab der Ziffer-Tinte */
  .rp-now { grid-template-columns: 1fr; } /* HVR-20260912-29: Szenarien gestapelt */
  .rp-out__grid { margin-inline: var(--content-inset); }
  .rp-out__grid { grid-template-columns: 1fr; grid-auto-rows: auto; row-gap: 8vh; } /* AD-Checkpoint 2 (D8): Stapelabstand wie .what__outcome */
  .rpc__wege { grid-template-columns: 1fr; gap: 3.2vh 0; }
  /* Das freigegebene .wpc__act-Atom setzt white-space:nowrap. Mit dem
     laengeren Label "Turn the roadmap into action" (Rene 2026-09-02)
     lief die Schaltflaeche bei 375 px 65.5 px ueber v3 hinaus. Umbruch
     NUR hier unten; auf dem Desktop bleibt das Atom unveraendert. */
  .rpc__act { white-space: normal; }
}

/* Reduced Motion: rpInit ueberspringt Reveals und Linienaufbau
   vollstaendig — der Endzustand steht damit schon aus dem CSS. Hier
   bleibt nur, die beiden Zustandsuebergaenge des Fokus-Tracks
   stillzustellen; der Fokus selbst bleibt, er ist Information. */
@media (prefers-reduced-motion: reduce) {
  .rp-l { transform: none !important; }
  .rp-band__n, .rp-band__t, .rp-score__i, .rpc__act { transition: none; }
}

/* Unter 430 traegt das Band den geautorten Zeilenfall nicht mehr: HK
   Grotesk Wide laeuft breiter als der vorherige Stack, und "SEVEN
   BOTTLENECKS," ueberlief die v3-Kante um 6.1 px. Die <br> werden dort
   unterdrueckt, der Umbruch faellt an das Band. Ein geautorter Fall,
   der nicht passt, ist kein geautorter Fall. */
@media (max-width: 430px) {
  /* NUR die Headlines, deren geautorte Segmente das 270-px-Band sprengen.
     "Two inputs. / One chain." (204 / 179 px) passt und behaelt sein <br>;
     die Regel war fuer eine Headline geschrieben, die es nicht mehr gibt
     (AP-1004-Zusatz). */
  .rp-hl:not(#rp-in-hl) br, .rp-bridge br, .rp-open__hl br { display: none; }
  /* Der clamp-BODEN gibt schmal nach, nicht die Rolle: bei 375 px greift
     die 2rem-Untergrenze, und "BOTTLENECKS," misst dort als unbrechbares
     Wort 276 px gegen ein 270-px-Band. 1.7rem traegt es. Der vw-Faktor
     und der obere Deckel bleiben unveraendert — es ist dieselbe Rolle,
     nur mit einem Boden, den das Band hergibt (AP-303 sinngemaess: ein
     Deckel darf eine mitskalierende Groesse nicht sprengen, ein Boden
     ebenso wenig). */
  .rp-hl, .rp-bridge { font-size: clamp(1.7rem, 4.2vw, 4.6rem); }
}

/* Service pages: shared editorial primitives, existing brand and grid.
   Intro occupies the template's 50–100vh band. Section boundaries belong
   to the scrolling content, never to a fixed viewport overlay. */
.hero__page[data-page="design-sprint"] .hero__page-scroll,
.hero__page[data-page="partner-network"] .hero__page-scroll,
.hero__page[data-page="pricing"] .hero__page-scroll { display:block; }
.hero__page[data-page="design-sprint"] .page-content--design-sprint,
.hero__page[data-page="partner-network"] .page-content--partner-network,
.hero__page[data-page="pricing"] .page-content--pricing,
.hero__page[data-page="advisory"] .page-content--advisory { display:flow-root; }
.svc { --svc-bg:var(--bg); --svc-ink:var(--fg); --svc-muted:rgba(30,30,30,.68); --svc-rule:var(--line); /* HVR-20260914-31: volle Farbstaerke */ position:relative; color:var(--svc-ink); font-family:"HK Grotesk Wide",var(--font-display); }
.svc--dark,.svc-section--dark,.svc-cta { --svc-bg:#201e1e; --svc-ink:#ededed; --svc-muted:rgba(237,237,237,.7); --svc-rule:#ededed; /* HVR-20260914-31 */ color:var(--svc-ink); }
.svc-section--light { --svc-bg:var(--bg); --svc-ink:var(--fg); --svc-muted:rgba(30,30,30,.68); --svc-rule:#1e1e1e; /* HVR-20260914-31 */ color:var(--svc-ink); }
.svc-wrap { width:72%; margin-inline-start:14.25%; }
.svc-open { margin:-50vh 0 0 14.25%; width:72%; min-height:50vh; padding:0 0 12vh; display:flex; flex-direction:column; justify-content:flex-start; gap:1.2em; }
.svc-open h2 { font-size:clamp(1.7rem,2.6vw,3rem); line-height:1.16; text-transform:uppercase; margin:0; font-weight:700; max-width:24em; }
.svc-copy { font-size:clamp(1rem,1.35vw,1.55rem); line-height:1.5; font-weight:400; color:var(--svc-muted); max-width:34em; margin:1.2em 0 0; }
.svc-open .svc-copy { margin:0; }
.svc-eye,.price-ledger article>div>span { font-size:max(.875rem,.95vw); line-height:1.5; text-transform:uppercase; letter-spacing:.1em; font-weight:400; margin:0 0 2.4em; color:var(--svc-muted); }
.svc-open .svc-eye { margin:.7em 0 0; }
.svc-section { position:relative; padding:8vh 0; background:var(--svc-bg); }
.svc-statement { font-size:clamp(2.6rem,6.4vw,7rem); font-weight:700; line-height:1.02; letter-spacing:-.04em; text-transform:uppercase; margin:0; overflow-wrap:normal; }
.svc-title { font-size:clamp(2rem,4.2vw,4.6rem); font-weight:700; line-height:1.08; letter-spacing:-.035em; text-transform:uppercase; margin:0; }
.svc-heading { padding-bottom:8vh; }
.svc-bands { list-style:none; padding:0; margin-top:0; margin-bottom:0; }
.svc-band { display:grid; grid-template-columns:14% minmax(0,1fr); gap:var(--tile-gap); border-top:1px solid var(--svc-rule); padding:4vh 0; align-items:center; }
.svc-number { font-size:clamp(2.8rem,6.2vw,6.8rem); line-height:1; color:var(--svc-muted); font-weight:700; font-variant-numeric:tabular-nums; transition:color .25s; }
.svc-band.is-focus .svc-number { color:var(--signal-red); }
.svc-band h3,.svc-core-steps h3,.svc-offers h3 { margin:0; font-size:clamp(1.3rem,2vw,2.3rem); line-height:1.2; text-transform:uppercase; }
.svc-band .svc-copy { margin:.7em 0 0; }
.svc-split { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:8%; align-items:start; }
.svc-rhythm .svc-copy:first-child { margin:0; }
.svc-rhythm dl { margin:2.4em 0 0; }
.svc-rhythm dl>div { display:grid; grid-template-columns:1fr 3fr; gap:1.2em; padding:1.6em 0; border-top:1px solid var(--svc-rule); }
.svc-rhythm dt { font-weight:700; font-size:clamp(1rem,1.2vw,1.35rem); }
.svc-rhythm dd { margin:0; font-size:clamp(1rem,1.2vw,1.35rem); line-height:1.5; color:var(--svc-muted); }
.svc-list { list-style:none; padding:0; margin:0; }
.svc-list li { padding:1.2em 0; border-top:1px solid var(--svc-rule); font-size:clamp(1rem,1.35vw,1.55rem); line-height:1.5; }
.svc-cta { padding:12vh 0; background:var(--svc-bg); position:relative; }
.svc-cta__bottom { display:flex; justify-content:space-between; align-items:flex-end; gap:2.4em; margin-top:4vh; }
.svc-cta__bottom .svc-copy { max-width:27em; margin:0; }
.svc-button { display:inline-flex; gap:1.6em; align-items:center; justify-content:space-between; padding:1.2em 1.6em; min-height:48px; font-size:clamp(1rem,1.2vw,1.35rem); line-height:1.3; font-weight:700; background:var(--signal-red); color:#fff; text-decoration:none; transition:background .25s,color .25s; flex-shrink:0; }
.svc-button:hover { background:var(--bg); color:var(--fg); }
.svc-button:focus-visible,.svc-textlink:focus-visible,.svc-faq summary:focus-visible { outline:3px solid var(--signal-red); outline-offset:5px; }
.svc-button span { font-size:1.6em; }
.svc-textlink { display:inline-block; color:inherit; font-size:clamp(1rem,1.2vw,1.35rem); font-weight:700; text-decoration-thickness:1px; text-underline-offset:.4em; padding:.8em 0; }
.svc-textlink:hover { color:var(--signal-red); }
.svc-sprint-show { padding-top:0; }
.svc-hero-image { margin-top:0; margin-bottom:0; overflow:hidden; }
.svc-hero-image img { display:block; width:100%; height:auto; aspect-ratio:16/9; object-fit:cover; }
.svc-hero-image figcaption { display:flex; justify-content:space-between; gap:1.2em; }
.svc figcaption { font-size:max(.875rem,.95vw); line-height:1.5; padding:1.2em 0; color:var(--svc-muted); text-transform:uppercase; letter-spacing:.05em; }
.svc-studies { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:var(--tile-gap); margin-top:8vh; }
.svc-studies figure { margin:0; overflow:hidden; }
.svc-studies img { display:block; width:100%; height:auto; aspect-ratio:4/5; object-fit:cover; }
.svc-price-core { display:grid; grid-template-columns:1.4fr 1fr; gap:8%; align-items:center; }
.svc-price { font-size:clamp(2rem,4.2vw,4.6rem); font-weight:700; line-height:1; letter-spacing:-.04em; text-transform:uppercase; } /* HVR-20260912-43: EINE Preisrolle (Kapitel-Rolle) fuer Free, Ledger und Sprint */
.svc-price-core__value { border-left:1px solid var(--svc-rule); padding-left:2.4em; }
.svc-price-core__value .svc-button { margin-top:2.4em; }
.svc-core-steps { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:2.4em; margin-top:8vh; }
.svc-core-steps h3 { margin-top:1.2em; }
.svc-core-steps .svc-number { color:var(--signal-red); }
.svc-price-foot { display:flex; align-items:center; justify-content:space-between; gap:2.4em; border-top:1px solid var(--svc-rule); margin-top:8vh; padding-top:4vh; }
.svc-price-foot .svc-copy { margin:0; }
.svc-offers { margin-top:4vh; }
.svc-offers article { border-top:1px solid var(--svc-rule); padding:4vh 0; display:grid; grid-template-columns:1fr 1.6fr; gap:1.2em 2.4em; align-items:start; }
.svc-offers .svc-copy,.svc-offers .svc-eye { margin:0; }
.svc-offers .svc-textlink { padding:0; justify-self:start; }
.svc-faq details { border-top:1px solid var(--svc-rule); padding:1.6em 0; }
/* HVR-20260912-42 (AD-Checkpoint 1): kein UA-Marker (Frage- und Antwort-Tinte auf einer Achse),
   Auf/Zu-Zeichen am Zeilenende in der Textspalte */
.svc-faq summary { cursor: var(--cursor-hand); font-size:clamp(1rem,1.35vw,1.55rem); font-weight:700; line-height:1.5; list-style:none; position:relative; padding-right:1.6em; }
.svc-faq summary::-webkit-details-marker { display:none; }
.svc-faq summary::after { content:"+"; position:absolute; right:0; top:0; font-weight:400; color:var(--svc-muted); } /* absolut: die Unterstreichung der offenen Frage laeuft nicht auf das Zeichen */
.svc-faq details[open] summary::after { content:"\2212"; color:var(--signal-red); }
.svc-faq details[open] summary { color:var(--signal-red); }
/* HVR-20260912-42: eine gemeinsame Zweitachse auf der Pricing-Seite (Clarity Call, Ledger, FAQ = 1.2fr / 1fr) */
/* HVR-20260913-21 (Rene): kompakte Vorschau je Leistung plus Details-Toggle im FAQ-Muster
   (summary in der Eyebrow-Rolle mit Plus, offen Signal Rot); Preisrolle im Fuss der Diagnostic-Section. */
.price-more { margin-top:1.6em; border-top:1px solid var(--svc-rule); padding-top:1.2em; }
.price-more summary { cursor:var(--cursor-hand); list-style:none; position:relative; padding-right:1.6em; font-size:max(.875rem,.95vw); line-height:1.5; text-transform:uppercase; letter-spacing:.1em; color:var(--svc-muted); }
.price-more summary::-webkit-details-marker { display:none; }
.price-more summary::after { content:"+"; position:absolute; right:0; top:0; font-weight:400; }
.price-more[open] summary { color:var(--svc-ink); text-decoration:underline; text-decoration-color:var(--signal-red); text-underline-offset:.3em; } /* AD: ein Offen-Zustand wie das FAQ (base.css .svc-faq details[open] summary) */
.price-more[open] summary::after { content:"\2212"; color:var(--signal-red); }
.price-more summary:focus-visible { outline:3px solid var(--signal-red); outline-offset:5px; }
.price-more__list { list-style:none; margin:1.2em 0 0; padding:0; }
.price-more__list li { padding:.6em 0; border-top:1px solid var(--svc-rule); font-size:clamp(1rem,1.08vw,1.25rem); line-height:1.5; color:var(--svc-muted); }
.price-more__dl { margin:1.2em 0 0; }
.price-more__dl>div { padding:.6em 0; border-top:1px solid var(--svc-rule); }
.price-more__dl dt { font-weight:700; font-size:clamp(.95rem,1.08vw,1.2rem); line-height:1.4; }
.price-more__dl dd { margin:.2em 0 0; font-size:clamp(1rem,1.08vw,1.25rem); line-height:1.5; color:var(--svc-muted); }
.price-ledger article>div .price-more { margin-inline-end:calc(-1 * var(--content-inset)); padding-inline-end:var(--content-inset); } /* AD 21.4: rechte Spalte, Linie von der Tinte bis v3 wie das FAQ */
.price-ledger article>div>strong { text-transform:uppercase; } /* AD 21.10: Wortpreise (Included) wie FREE */
.adv-breakdown.price-cadence { margin-top:1.6em; font-size:clamp(1rem,1.08vw,1.25rem); } /* AD 21.8: Sub/Copy-Rolle statt 16 px fest; Spezifitaet ueber .adv-breakdown */
/* AD D5: Listenzeilen der Toggles enden auf derselben Strukturkante wie die Kopflinie (Divider, v3; in Section 01 v2 bis v3) */
.price-more__list li,.price-more__dl>div { margin-inline-end:calc(-1 * var(--content-inset)); padding-inline-end:var(--content-inset); }
.svc-wrap > .price-more .price-more__list li { margin-inline-start:calc(-1 * var(--content-inset)); padding-inline-start:var(--content-inset); }
.price-ledger article>div .adv-breakdown>div { margin-inline-end:calc(-1 * var(--content-inset)); padding-inline-end:var(--content-inset); } /* AD L1: Kadenz- und Sync-Zeilen der Preisspalte enden wie die Toggle-Zeilen auf v3 */
.nw { white-space:nowrap; }
.svc-price-foot .svc-price { margin:.3em 0 0; }
@media(min-width:901px) { .page-content--pricing .svc-price-core,.page-content--pricing .svc-split { grid-template-columns:1.2fr 1fr; } }
@media(max-width:900px) {
 /* HVR-20260918-M-repeat (Rene: "Texte... sehr zentriert mit viel freien
    Rand links und rechts, den Platz mehr nutzen"): 72%/14.25% ist die
    Desktop-Editorialspalte (v2-Raster). Mobil auf --content-inset umgestellt,
    wie .rp-open und .ab-text - betrifft alle svc-Seiten ohne eigenes Mobil-
    Mass (Advisory/Guide, Pricing); .sr .svc-wrap hat eine eigene, spezifischere
    Regel in design-sprint.css. */
 .svc-wrap { width:calc(100% - 2 * var(--content-inset)); margin-inline-start:var(--content-inset); }
 .svc-split,.svc-price-core { grid-template-columns:minmax(0,1fr); gap:4vh; }
 .svc-cta__bottom,.svc-price-foot { flex-direction:column; align-items:flex-start; }
 .svc-price-core__value { border-left:0; border-top:1px solid var(--svc-rule); padding:4vh 0 0; }
 .svc-core-steps { gap:1.2em; }
 .svc-statement { font-size:clamp(2rem,6.4vw,4rem); }
 .svc-title { font-size:clamp(1.7rem,4.2vw,3rem); }
 .svc-open { padding-bottom:8vh; }
 .svc-open h2 { font-size:clamp(1.4rem,2.6vw,2rem); }
 .svc-button { flex-shrink:1; }
 /* HVR-20260918-gaps-mobile (Rene: "Reduziere zu lange Leerflaechen zwischen
    den Sections"): 8vh oben+unten pro Section summierte sich an jeder
    Section-Grenze auf ~16vh (135px bei 844px Hoehe) Leerraum. Mobil auf 4vh
    halbiert - Desktop unveraendert. */
 .svc-section { padding: 4vh 0; }
}
@media(max-width:600px) {
 .svc-open { min-height:50vh; gap:.8em; }
 .svc-open .svc-eye { font-size:.875rem; letter-spacing:.03em; }
 .svc-band { grid-template-columns:minmax(0,1fr); gap:1.2em; }
 .svc-band .svc-number { font-size:2.8rem; }
 .svc-studies,.svc-core-steps,.svc-offers article { grid-template-columns:minmax(0,1fr); }
 .svc-studies { gap:4vh; }
 .svc-studies img { aspect-ratio:1; }
 .svc-hero-image img { aspect-ratio:4/5; }
 .svc-hero-image figcaption { flex-direction:column; gap:.4em; }
 .svc-statement { font-size:clamp(1.7rem,6.4vw,2.6rem); letter-spacing:-.03em; }
 .svc-title { font-size:1.7rem; }
 .svc-rhythm dl>div { grid-template-columns:minmax(0,1fr); gap:.7em; }
 .svc-button { padding:1.2em; gap:.8em; max-width:100%; }
 .svc-core-steps { gap:4vh; }
 .svc-offers article .svc-eye { grid-row:2; }
}
@media(prefers-reduced-motion:reduce) {
 .svc *, .svc *::before, .svc *::after { transition:none!important; }
}
/* Compact service intros may extend beyond the old template's third line.
   That line has no matching content boundary here and must not strike copy. */
@media(max-width:900px) {
 .hero__page:is([data-page="advisory"],[data-page="design-sprint"],[data-page="partner-network"],[data-page="pricing"]) .hero__pline--h3 { display:none; }
}
.bento-tile:focus-visible { outline:3px solid var(--signal-red); outline-offset:-5px; }
/* Small call-to-action labels need full text contrast on signal red. */
.svc-button { color:#000; }
.svc-faq details[open] summary { color:var(--svc-ink); text-decoration:underline; text-decoration-color:var(--signal-red); text-underline-offset:.3em; }
/* HVR-20260914-52 (Rene): FAQ unter "Before you commit" in voller Breite (v2 bis v3), Frage in der
   Titel-Rolle, Antwort in der Copy-Rolle mit Lesebreite; zehn Fragen. Vorher rechte Spalte des Splits. */
.svc-faq--full { margin-top:5vh; border-bottom:1px solid var(--svc-rule); }
.svc-faq--full details { padding:2em 0; }
.svc-faq--full summary { font-size:clamp(1.2rem,1.65vw,2rem); line-height:1.25; padding-right:2.4em; }
.svc-faq--full summary::after { font-size:1.2em; top:-.05em; }
.svc-faq--full .svc-copy { max-width:44em; margin-top:1em; }
.svc-faq--full summary,.svc-faq--full .svc-copy { padding-left:var(--content-inset); } /* AD-Checkpoint T3 (CRITICAL): Linie auf v2, Tinte auf der Textachse */
.svc-faq--full details { margin-left:0; } /* HVR-20260914-51: Linie der ersten Frage beginnt auf v2 wie die uebrigen (vorher Inset-Rand 28.8 px, freies Linienende) */
.adv-calculator--pricing .adv-result.adv-sync { margin-top:0; } /* HVR-20260914-51: Ergebnisspalte beginnt auf der Kopflinie des Rechners (vorher 1.6em Versatz aus .adv-sync, freies Linienende der Trennlinie) */
/* This heading receives programmatic reading focus, not an interactive role. */
.hero__page-headline:focus { outline:none; }

/* September corrections: reserve space for every headline and its own beat. */
/* Upper-row copy uses the same hover reveal as every other intro cell. */
.hero__cell--top .hero__cell-text { gap:.7em; padding:clamp(.75rem,1.5vw,2rem); }
.hero__cell--top .hero__cell-text h3 { position:static; font-size:clamp(.875rem,1.2vw,1.6rem); line-height:1.12; }
.hero__cell--top .hero__cell-text p { position:static; font-size:clamp(.875rem,.88vw,1.05rem); line-height:1.45; color:inherit; }
.hiw7 { --overlap:14px; --fs-copy:clamp(1rem,1.2vw,1.35rem); }
.hiw7 .row__trigger { min-height:calc(5.5rem + var(--overlap)); padding:1.4rem clamp(1.4rem,2.4vw,2.6rem) calc(1.4rem + var(--overlap)); grid-template-columns:4.5rem minmax(0,1fr) auto; }
.hiw7 .row__title { line-height:1.12; }
.hiw7 .row__inner { min-height:clamp(23rem,48vh,38rem); padding-top:2vh; padding-bottom:calc(4vh + var(--overlap)); grid-template-columns:minmax(0,41%) minmax(0,1fr); }
.hiw7 .row__foot { align-self:end; }
.hiw7 .pills { display:none; flex-direction:column; align-items:flex-start; }
.hiw7 .pills[data-active] { display:flex; }
.hiw7 .pill { white-space:normal; text-wrap:pretty; padding:.7em 1em; }
.hiw7 .row__opt { color:rgba(237,237,237,.72); }
.page-content--workshop .wb-folder__back,.page-content--workshop .wb-folder__front { visibility:hidden; }
.wb-static .wb-item,.wb-static .wb-folder__back,.wb-static .wb-folder__front,
.wb-static .wb-hlwrap,.wb-static .wb-grid { visibility:visible!important; }
/* HVR-20260912-23: Rollen aus 04 (Eyebrow, Term-Statement, Descriptor) in der Navy der Board-Welt
   (#0A1E4E auf #8AD2F8 = 9.6:1; vorher zwei abgeschwaechte Blautoene 6.6:1 und 9:1), Korridor
   oben und unten etwas geoeffnet, damit die groesseren Rollen in der Zelle bleiben */
.wp-info { gap:clamp(.5rem,1vh,.9rem); --luft:clamp(1.2rem,2.2vw,3rem); top:var(--copy-oben); bottom:var(--zahl-frei); }
.wp-info__k { font-size:clamp(.8rem,.95vw,1.1rem); line-height:1.4; letter-spacing:.14em; color:#0A1E4E; }
.wp-info__out { margin:0; font-family:"HK Grotesk Wide",var(--font-display); font-weight:700; font-size:clamp(1.3rem,1.72vw,2.3rem); line-height:1.1; letter-spacing:-.01em; color:#0A1E4E; } /* 1.72vw: Term-Statement-Rolle (2vw) laesst „Know what deserves attention.“ bei 1440 dreizeilig werden und aus dem Korridor laufen */
.wp-info__t { font-family:"HK Grotesk Wide",var(--font-display); font-size:clamp(.95rem,1.2vw,1.35rem); line-height:1.45; color:#0A1E4E; max-width:38ch; }
.wp-num { opacity:.1; }
/* Vertical construction lines continue over section backgrounds. */
.hero__page:is([data-page="design-sprint"],[data-page="advisory"],[data-page="pricing"],[data-page="partner-network"]) .hero__pline--v { z-index:5; }
.sprint-board { margin-top:8vh; border-top:1px solid var(--svc-rule); }
.sprint-board__intro { display:flex; justify-content:space-between; gap:1em; padding:1.5rem 0; font-size:.875rem; }
.sprint-board__intro .svc-eye { margin:0; }
.sprint-visuals { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:var(--tile-gap); }
.sprint-visuals figure { margin:0; overflow:hidden; }
.sprint-visuals img { display:block; width:100%; aspect-ratio:1; object-fit:cover; }
.sprint-visuals figcaption { display:flex; flex-direction:column; gap:.5em; padding:1.5em 0; }
.sprint-visuals figcaption b { font-size:clamp(1.3rem,2vw,2.3rem); color:var(--svc-ink); }
.sprint-visuals figcaption span { text-transform:none; letter-spacing:0; font-size:1rem; }
.sprint-packages { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); margin-top:8vh; border-block:1px solid var(--svc-rule); } /* HVR-20260912-42: 8vh aus der vh-Skala */
.sprint-packages article { padding:4vh 2vw; display:flex; flex-direction:column; }
.sprint-packages article:first-child { padding-left:0; }
.sprint-packages article:last-child { padding-right:0; }
.sprint-packages article+article { border-left:1px solid var(--svc-rule); }
.sprint-package__top { display:flex; align-items:center; gap:1.5rem; margin-bottom:3vh; }
.sprint-size { font-size:clamp(4rem,8vw,9rem); line-height:1; font-weight:700; color:var(--signal-red); }
.sprint-package__top .svc-eye { margin:0; }
.sprint-packages h3,.sprint-scope h3,.partner-path h3,.price-ledger h3 { font-size:clamp(1.25rem,1.65vw,2rem); text-transform:uppercase; line-height:1.2; margin:0; }
.sprint-packages .svc-copy { font-size:clamp(1rem,1.08vw,1.25rem); margin-bottom:2em; }
.sprint-package__price { font-size:clamp(2rem,4.2vw,4.6rem); font-weight:700; line-height:1; margin:auto 0 0; padding-top:2vh; letter-spacing:-.04em; }
/* HVR-20260913-21 (AD 21.1): Sprint-Artikel als Subgrid-Zeilen (Kopf, Titel, Preis, Vorschau, Toggle);
   ein offener Toggle waechst nur in seiner Zeile, Preise bleiben spaltenuebergreifend auf einer Hoehe. */
.sprint-packages { grid-template-rows:repeat(5,auto); }
.sprint-packages article { display:grid; grid-template-rows:subgrid; grid-row:span 5; align-content:start; }
.sprint-package__price { margin:0; align-self:end; text-transform:uppercase; }
.sprint-packages .price-more { margin-top:1.2em; margin-right:calc(-1 * var(--content-inset)); padding-right:var(--content-inset); } /* AD 21.4: Hairline von der Tinte bis zur Spaltenkante beziehungsweise v3 */ /* HVR-20260912-43: Preisrolle wie .svc-price und Ledger */
.sprint-scope { margin-top:7vh; display:grid; grid-template-columns:minmax(0,1fr) 10% minmax(0,1fr); gap:3%; border-bottom:1px solid var(--svc-rule); padding-bottom:4vh; }
.sprint-scope .svc-eye { margin-bottom:1rem; }
.sprint-scope .svc-copy { font-size:clamp(1rem,1.08vw,1.25rem); }
.sprint-times { align-self:center; text-align:center; font-size:clamp(2.8rem,6vw,6rem); color:var(--signal-red); }
.partner-path { margin:6vh 0; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); border-block:1px solid var(--svc-rule); }
.partner-path>div { padding:3vh 2vw; }
.partner-path>div:first-child { padding-left:0; }
.partner-path>div+div { border-left:1px solid var(--svc-rule); }
.partner-path .svc-copy { font-size:clamp(1rem,1.1vw,1.3rem); }
.partner-fees article { padding:0 0 4vh; }
.partner-fees article+article { border-top:1px solid var(--svc-rule); padding-top:4vh; }
.partner-fees h3 { margin:0; font-size:clamp(1.5rem,3vw,3.5rem); line-height:1.1; }
.partner-fees .svc-eye { margin-bottom:1.5em; }
.adv-hint { font-family:var(--font-display); font-size:max(.875rem,.9vw); line-height:1.55; color:var(--svc-muted); margin:1.2em 0 0; max-width:70ch; }
.adv-calculator { display:grid; grid-template-columns:1fr 1fr; margin-top:6vh; border-block:1px solid var(--svc-rule); }
.adv-controls { padding:4vh 3vw 4vh 0; }
.adv-controls fieldset { padding:0; border:0; margin:0 0 4vh; }
.adv-controls legend { padding:0; } /* HVR-20260912-41: UA-Padding 2 px, Tinte auf der Inset-Achse */
.adv-controls legend,.adv-term { font-size:clamp(1rem,1.2vw,1.35rem); line-height:1.5; font-weight:700; }
.adv-frequency { display:flex; margin-top:1.5em; }
.adv-frequency label { flex:1; cursor: var(--cursor-hand); position:relative; }
.adv-frequency input { position:absolute; opacity:0; width:100%; height:100%; margin:0; cursor: var(--cursor-hand); }
.adv-frequency span { border:1px solid var(--svc-rule); border-right:0; display:flex; justify-content:center; align-items:center; min-height:3.5rem; font-size:1.4rem; font-weight:700; transition:background .2s,color .2s; }
.adv-frequency label:last-child span { border-right:1px solid var(--svc-rule); }
.adv-frequency input:checked+span { background:var(--signal-red); color:#000; }
.adv-frequency input:focus-visible+span { outline:3px solid var(--fg); outline-offset:-5px; }
.adv-term { display:flex; flex-direction:column; gap:1em; }
.adv-term select { width:100%; min-height:3.5rem; font:inherit; padding:.7em 1em; border:1px solid var(--svc-rule); background:transparent; color:var(--svc-ink); border-radius:0; cursor: var(--cursor-hand); }
.adv-term select:focus-visible { outline:2px solid var(--signal-red); outline-offset:3px; }
.adv-result { border-left:1px solid var(--svc-rule); padding:4vh 0 4vh 3vw; }
.adv-result .svc-eye { margin-bottom:2em; }
.adv-price { display:flex; flex-direction:column; gap:.8em; margin:0; }
.adv-price output { font-size:clamp(2rem,5vw,5.8rem); font-weight:700; line-height:1; letter-spacing:-.045em; font-variant-numeric:tabular-nums; }
.adv-price span,.adv-summary { font-size:1rem; }
.adv-summary { margin-top:2em; }
.adv-breakdown { margin:2em 0; font-family:var(--font-display); font-size:1rem; }
.adv-breakdown>div { display:flex; justify-content:space-between; gap:1rem; border-top:1px solid var(--svc-rule); padding:1em 0; }
.adv-breakdown dd { margin:0; font-variant-numeric:tabular-nums; white-space:nowrap; }
.adv-total { font-weight:700; font-size:1.15rem; }
.adv-result .svc-button { margin-top:2em; }
.adv-table-wrap { overflow-x:auto; margin-top:5vh; }
.adv-table { width:100%; table-layout:fixed; border-collapse:collapse; text-align:left; font-family:var(--font-display); font-size:1rem; } /* HVR-20260912-41: vier gleiche Spalten, gleichmaessiger Ledger-Schritt */
.adv-table caption { text-align:left; padding-bottom:1.5em; font-weight:700; }
.adv-table th,.adv-table td { padding:1.2em .75em; border-block:1px solid var(--svc-rule); }
.adv-table th:first-child,.adv-table td:first-child { padding-left:0; }
.adv-table td { font-variant-numeric:tabular-nums; white-space:nowrap; }
.adv-table small { display:block; font-size:.875rem; margin-top:.5em; font-weight:400; }
.adv-table tr.is-selected { background:rgba(243,26,39,.07); }
/* HVR-20260912-41: gespiegelte Advisory-Konfiguration auf der Pricing-Seite (Ledger im Bestandsmuster) */
.adv-sync { margin-top:1.6em; }
.adv-sync .adv-breakdown { margin:1em 0 0; }
.adv-sync .adv-breakdown dt { font-weight:400; }
/* HVR-20260912-39: Zielblock nach einem Preis-Verweis — die Kante wird Signal Rot (aktiv), der Rueckweg steht im Link */
.price-ledger article.is-origin { border-top-color:var(--signal-red); }
.svc-section.is-origin > .svc-wrap > .svc-eye, .price-ledger article.is-origin h3 { color:var(--signal-red); }
.price-ledger article { display:grid; grid-template-columns:1.2fr 1fr; gap:8%; border-top:1px solid var(--svc-rule); padding:4vh 0; } /* HVR-20260912-42: 4vh aus der vh-Skala */
.price-ledger article>div>strong { display:block; font-size:clamp(2rem,4.2vw,4.6rem); line-height:1; letter-spacing:-.04em; }
.price-ledger article>div>span { display:block; margin:.9em 0 0; } /* HVR-20260912-43: Einheit im Eyebrow-Atom der Seite (.svc-eye, Selektor oben erweitert) */
/* HVR-20260913-26: Preisliste. Zeile = Phase (Eyebrow), Leistung, Preis, Einheit, Toggle; der
   Toggle traegt Beschreibung, Vorschau, Listen, Kadenzen, Sync-Block und den Seitenverweis. */
.price-ledger--list .price-row__phase { margin-bottom:.9em; }
.price-ledger--list .price-more .svc-copy { margin:1.2em 0 0; }
.price-ledger--list .price-more .price-preview { margin:1.2em 0 0; }
.price-ledger--list .price-more .adv-breakdown, .price-ledger--list .price-more .adv-sync { margin-top:1.4em; }
.price-ledger--list .price-more .svc-textlink { display:inline-block; margin-top:1.4em; }
.price-ledger--list .price-more .svc-copy + .price-more__list, .price-ledger--list .price-more .price-preview + .price-more__dl, .price-ledger--list .price-more .svc-copy + .price-more__dl { margin-top:1.2em; }
@media (min-width:601px) {
 /* AD Major 1 (2026-09-13): Leistung und Preis teilen eine Grundlinie. Zeilenraster der Ledger-Zeile:
    Phase | Leistung + Preis (baseline) | Einheit | Toggle; die beiden Spalten als Subgrid. */
 .price-ledger--list article { grid-template-rows:repeat(4,auto); row-gap:0; } /* gap:8% der Ledger-Zeile darf nicht als Zeilenabstand wirken (Prozent-Rowgap loest die Hoehe doppelt auf, der Toggle rutschte unter die naechste Linie) */
 .price-ledger--list article>div { display:grid; grid-template-rows:subgrid; grid-row:span 4; align-content:start; }
 .price-ledger--list article>div>.price-row__phase { grid-row:1; }
 .price-ledger--list article>div>h3, .price-ledger--list article>div>strong { grid-row:2; align-self:baseline; }
 .price-ledger--list article>div>span { grid-row:3; }
 .price-ledger--list article>div>details { grid-row:4; }
}
@media (max-width: 1024px) /* Rene 2026-09-22: Stapelmodus nur Tablet-Portrait/Mobile; vorher <=1380px oder <=820px hoch */ {
 .wp-info { position:static; overflow:visible; padding:1.2rem 0; gap:1rem; }
 .wp-info__out { font-size:clamp(1.25rem,2.4vw,1.7rem); }
 .wp-info__k { font-size:.875rem; }
 .wp-info__t { font-size:1rem; }
}
@media(max-width:900px) {
 .hiw7 .row__trigger { grid-template-columns:2.6rem minmax(0,1fr) auto; gap:.8rem; }
 .hiw7 .row__title { font-size:clamp(1.15rem,3vw,1.6rem); }
 .hiw7 .row__inner { grid-template-columns:minmax(0,1fr); min-height:0; padding-bottom:3rem; }
 .hiw7 .tabs { flex-wrap:wrap; gap:.7rem; }
 .hiw7 .tabs__labelcut { flex-basis:100%; margin:.5rem 0 0; }
 .hiw7 .row__foot { flex-wrap:wrap; margin-top:2em; }
 .hiw7 .foot__label { white-space:normal; }
 .adv-calculator { grid-template-columns:minmax(0,1fr); }
 .adv-controls { padding:4vh 0; }
 .adv-result { border-left:0; border-top:1px solid var(--svc-rule); padding:4vh 0; }
 .partner-path { grid-template-columns:minmax(0,1fr); }
 .partner-path>div { padding:3vh 0; }
 .partner-path>div+div { border-left:0; border-top:1px solid var(--svc-rule); }
 .sprint-package__top { gap:.6rem; flex-direction:column; align-items:flex-start; }
 .sprint-packages h3 { font-size:1.1rem; }
 .adv-table { font-size:.875rem; }
 .adv-table th,.adv-table td { padding:1em .35em; white-space:normal; }
 .adv-table th:first-child,.adv-table td:first-child { width:35%; } /* Frequenz-Spalte einzeilig, drei gleiche Wertspalten */
 .adv-table th small { display:none; } /* HVR-20260912-41: Rabattstufen stehen im Hinweis unter der Tabelle */
}
@media(max-width:600px) {
 /* HVR-Mobile-Mosaik 2026-09-15 Nachtrag: die .hero__cell--top-Ausnahme hier war
    Bestand der alten 5er-Streifen-Restackung (s. Kommentar unten) und ueberlebte
    deren Entfernung als Zombie-Regel - .hero__cell--top faerbt ausschliesslich die
    5 Intro-02-Textzellen (index.html), deren Mobile-Darstellung inzwischen komplett
    ueber .hero__cells--intro laeuft (base.css, Bento-Mosaik-Block). Einziger noch
    wirksamer Rest war overflow-wrap:anywhere/hyphens:auto auf h3 - dadurch brachen
    genau die ersten 5 der 9 Kacheln mitten im Wort ("UNCLEAR" -> "UNCLEA"+"R"),
    waehrend Kachel 6-9 (keine .hero__cell--top-Klasse) normal umbrachen. Entfernt,
    keine Ersatzregel noetig: ohne Override gilt derselbe Browser-Default wie bei
    Kachel 6-9. */
 .sprint-visuals,.sprint-packages,.sprint-scope,.price-ledger article { grid-template-columns:minmax(0,1fr); }
 .sprint-packages article { padding:4vh 0; }
 .sprint-packages article+article { border-left:0; border-top:1px solid var(--svc-rule); }
 .sprint-package__top { flex-direction:row; gap:1.5rem; }
 .sprint-board__intro { flex-direction:column; }
 .sprint-times { text-align:left; padding:2vh 0; }
 .price-ledger article { gap:2rem; }
 #rp-in-hl br { display:none; }
}


.wp-report-compact { display:none; }
@media (max-width: 1024px) /* Rene 2026-09-22: Stapelmodus nur Tablet-Portrait/Mobile; vorher <=1380px oder <=820px hoch */ {
 .wp-report-compact { display:block; width:calc(70.75% - var(--content-inset) / 2); margin:4vh 0 0 calc(14.25% + var(--content-inset) / 2); font-family:"HK Grotesk Wide",var(--font-display); font-size:1rem; line-height:1.5; } /* HVR-20260911-13 (Rene D4): Textkante 0.5 x Inset neben v2, rechte Kante unveraendert */
 .wp-report-compact details { border-block:1px solid var(--line); /* HVR-20260914-31 */ padding:1.4em 0; }
 .wp-report-compact summary { cursor: var(--cursor-hand); font-weight:700; }
 .wp-report-compact iframe { display:block; width:100%; height:70vh; margin-top:1.5em; border:0; }
 .wp-report-compact a { display:inline-block; margin-top:1.4em; color:inherit; }
 .wp-report-compact a:focus-visible,.wp-report-compact summary:focus-visible { outline:3px solid var(--signal-red); outline-offset:4px; }
 .wp-num { opacity:1; }
}

/* HVR-Mobile-Mosaik 2026-09-15: die alte 5er-Streifen-Restackung fuer
   .hero__cell--top (volle Breite, 5% Hoehe je Zeile, !important) ist durch
   das neue gemeinsame 3x2-Quadrat-Raster fuer .hero__cell unter <=900px
   ersetzt (base.css, Bento-Mosaik-Block) und wurde entfernt — sie ueberschrieb
   dort sonst per !important + spaeterer Quellreihenfolge die neuen
   Quadrat-Massse (Kollision AP-902-artig, gefunden 2026-09-15). */

.svc .adv-hint,.svc .adv-breakdown,.svc .adv-table { font-family:inherit; }
.adv-table-wrap:focus-visible { outline:2px solid var(--signal-red); outline-offset:3px; }
@media(max-width:600px) { .page-content--design-sprint .svc-hero-image img { aspect-ratio:2500/1400; object-fit:contain; } }

/* Section chrome follows the actual light/dark surface at each pixel. */
.hero__page.has-section-chrome .hero__page-lines { z-index:5; }
.hero__page.has-section-chrome .rp-l--v { visibility:hidden; }
.page-chrome-tile { position:absolute; inset:0; background:#ededed; pointer-events:none; z-index:9; } /* HVR-20260915-11 (Rene): Kachel immer im Kontrast zum Grund, auf dunklen Sections hell (vorher Dunkelbraun auf Dunkelbraun) */ /* alt: HVR-20260914-43 (Rene): auf dunklen Sections traegt die Kachel den Sectiongrund (Dunkelbraun) mit heller Marke, die Menueleiste folgt dem Hintergrund; vorher #ededed */
.page-chrome-mark { position:absolute; width:56%; height:auto; left:50%; top:50%; transform:translate(-50%,-50%); color:#201e1e; display:block; } /* HVR-20260915-11: dunkle Marke auf heller Kachel */ /* HVR-20260914-43 */
.has-section-chrome .svc-section--dark,.has-section-chrome .svc-cta,.has-section-chrome .svc--dark { --svc-rule:#ffffff; } /* HVR-20260914-31 */
.has-section-chrome .svc-section--light { --svc-rule:var(--line); } /* HVR-20260914-31 */

/* =================== Footer (HVR-20260912-10, D18 c) ==================
   Schmale Leiste am Ende jeder Overlay-Seite (im Scrollfluss, erst am
   Seitenende sichtbar), Label in der Eyebrow-Rolle, Chevron in der
   Liniensprache; das Panel faehrt von unten ein (0.4 s, Dropbox-Ease),
   schliesst per Klick und Escape. Farben folgen dem Seitengrund am
   Seitenende (JS setzt --foot-*). Inhalte sind Platzhalter. */
.site-foot { position: relative; margin-left: 14.25%; width: 72%; border-top: 1px solid var(--foot-line, var(--line)); /* HVR-20260914-31 */ color: var(--foot-ink, var(--fg)); }
.site-foot__toggle { display: flex; align-items: center; gap: 1.2em; width: 100%; min-height: 3.5rem; margin: 0; padding: 1rem var(--content-inset); border: 0; background: transparent; color: inherit; font: 700 clamp(0.8rem, 0.95vw, 1.1rem)/1.5 "HK Grotesk Wide", var(--font-display); letter-spacing: 0.14em; text-transform: uppercase; text-align: left; cursor: var(--cursor-hand); }
.site-foot__hint { font-weight: 400; opacity: 0.6; letter-spacing: 0.1em; }
.site-foot__chev { margin-left: auto; margin-right: 0.15em; width: 0.7em; height: 0.7em; border-left: 1.5px solid currentColor; border-top: 1.5px solid currentColor; transform: rotate(45deg) translate(0.1em, 0.1em); transition: transform 0.3s cubic-bezier(0.65, 0, 0.35, 1); }
.site-foot__toggle[aria-expanded="true"] .site-foot__chev { transform: rotate(225deg) translate(0.1em, 0.1em); }
.site-foot__toggle:focus-visible, .site-foot__close:focus-visible { outline: 3px solid var(--signal-red); outline-offset: 4px; }
.site-foot__panel { position: absolute; left: var(--chrome-rail, 3.75%); right: 0; bottom: 0; z-index: 7; /* unter der Prozesslinie (z 8), ab v1 (AD-Checkpoint 4) */ max-height: 70vh; overflow: auto; background: var(--foot-bg, var(--bg)); color: var(--foot-ink, var(--fg)); border-top: 1px solid var(--foot-line, var(--line)); /* HVR-20260914-31 */ transform: translateY(100%); visibility: hidden; transition: transform 0.4s cubic-bezier(0.65, 0, 0.35, 1), visibility 0s 0.4s; }
.site-foot__panel.is-open { transform: translateY(0); visibility: visible; transition: transform 0.4s cubic-bezier(0.65, 0, 0.35, 1); }
.site-foot__panel:focus { outline: none; }
.site-foot__panel-in { margin-left: 10.5%; width: 72%; padding: 8vh var(--content-inset) 8vh; /* JS setzt Rand und Breite auf die Live-Anker */ display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 var(--tile-gap); }
.site-foot__panel h3 { margin: 0 0 0.6em; font: 700 clamp(1.3rem, 2vw, 2.3rem)/1.1 "HK Grotesk Wide", var(--font-display); text-transform: uppercase; letter-spacing: 0.01em; }
.site-foot__panel p { margin: 0; max-width: 34em; font: 400 clamp(0.85rem, 1.05vw, 1.2rem)/1.45 "HK Grotesk Wide", var(--font-display); opacity: 0.75; }
.site-foot__close { grid-column: 1 / -1; justify-self: start; margin-top: 4vh; padding: 0.5em 0; border: 0; border-bottom: 1px solid currentColor; background: transparent; color: inherit; font: 700 clamp(0.8rem, 0.95vw, 1.1rem)/1.5 "HK Grotesk Wide", var(--font-display); letter-spacing: 0.14em; text-transform: uppercase; cursor: var(--cursor-hand); }
.site-foot__panel p a { color: inherit; text-decoration: none; border-bottom: 1px solid currentColor; }
.site-foot__link { display: inline-block; margin-top: 1.2em; padding: 0.3em 0; border-bottom: 1px solid currentColor; color: inherit; text-decoration: none; font: 700 clamp(0.8rem, 0.95vw, 1.1rem)/1.5 "HK Grotesk Wide", var(--font-display); text-transform: uppercase; letter-spacing: 0.06em; }
.site-foot__link:focus-visible, .site-foot__panel p a:focus-visible { outline: 3px solid var(--signal-red); outline-offset: 4px; }
/* 2026-09-28: Touch-Snapping an den Pin-Spacern ENTFERNT (Rene, Mobile-Ruckeln): scroll-snap-stop
   riss auf iOS die Wischbewegung an jedem Pin zurueck (Video: 300-400px-Spruenge); in Chromium
   klemmte der Scroll am Spacer-Ende (gemessen 2523/2523/2523). Section-Tore gibt es nur noch
   per Wheel (Desktop, js/main.js). */
@media (max-width: 900px) { .site-foot__panel-in { grid-template-columns: 1fr; row-gap: 4vh; } .site-foot__hint { display: none; } }
@media (prefers-reduced-motion: reduce) { .site-foot__panel, .site-foot__panel.is-open, .site-foot__chev { transition: none; } }
/* HVR-20260914-10 (Rene): gemessene Zeilen des WHAT-Fliesstexts als Bloecke fuer den zeilenweisen Slide von rechts */
.what__dim-desc .ln { display: block; }
/* HVR-20260914-26/-27 (Rene): Phasenleiste auf der Guide-Seite. Fuenf Phasen mit Hairline, die
   aktuelle (GUIDE) in Tinte mit Signal-Rot-Kante; zeigt, dass Product Advisory an das laufende
   Projekt nach den Phasen gebunden ist. Rollen aus den svc-Atomen (Eyebrow, Copy). */
.adv-phases { list-style:none; margin:2.4em 0 0 0; padding:0; counter-reset:phase; border-bottom:1px solid var(--svc-rule); } /* HVR-20260914-50 (Rene): Leiter auf der Textachse (Abstand zur Vertikalen wie der Text darueber), vorher mit negativem Rand an der v2-Linie */
.adv-phases li { position:relative; display:grid; grid-template-columns:2.6em minmax(0,1fr); gap:0 .9em; align-items:baseline; padding:1.6em 0; /* HVR-20260914-50; AD-Checkpoint T3: Zeilenhoehe an die rechte Leiter angenaehert, weniger Leerraum ueber der Leiter */ border-top:1px solid var(--svc-rule); font-weight:700; /* AD 2026-09-14: Schrift aus dem svc-Stack (HK Grotesk Wide), keine eigene Familie */ font-size:max(.875rem,.95vw); line-height:1.5; letter-spacing:.1em; text-transform:uppercase; color:var(--svc-muted); counter-increment:phase; }
.adv-phases li::before { content:"0" counter(phase); font-size:1em; letter-spacing:.14em; opacity:.7; } /* AD 2026-09-14: 14-px-Minimum der Service-Seiten */
.adv-phases li.is-now { color:var(--svc-ink); }
.adv-phases li.is-now::after { content:""; position:absolute; left:0; right:0; top:-1px; height:2px; background:var(--signal-red); }
.adv-phases li span { grid-column:2; display:block; margin-top:.35em; font-weight:400; font-size:clamp(.85rem,1.05vw,1.2rem); line-height:1.45; letter-spacing:0; text-transform:none; color:var(--svc-muted); }
/* AD 2026-09-14 (HVR-20260914-27): Leistungs-Ledger der Guide-Seite mit gemeinsamer Begriffsspalte (Subgrid), damit die Beschreibungen auf einer Kante stehen */
.page-content--advisory .svc-rhythm dl { display:grid; grid-template-columns:1fr 3fr; border-bottom:1px solid var(--svc-rule); } /* HVR-20260914-50: beide Leitern enden auf einer Linie */
/* HVR-20260914-50 (Rene): Section 01, beide Spalten enden unten auf derselben Linie: Spalten
   gleich hoch, linke Leiter am Spaltenende (margin-top auto). */
.page-content--advisory .svc-split { align-items:stretch; }
.page-content--advisory .svc-split > div:first-child { display:flex; flex-direction:column; }
.page-content--advisory .svc-split > div:first-child .adv-phases { margin-top:auto; padding-top:2.4em; }
@media (max-width:1024px) { /* AD-Checkpoint T3 (MAJOR bei 1024): Split stapeln, statt 791 px Leere ueber der Leiter */
  .page-content--advisory .svc-split { grid-template-columns:minmax(0,1fr); align-items:start; gap:4vh; }
  .page-content--advisory .svc-split > div:first-child .adv-phases { margin-top:2.4em; }
}
.page-content--advisory .svc-rhythm dl>div { grid-column:1 / -1; grid-template-columns:subgrid; }
/* HVR-20260914-15 (Rene): PHASES-Kacheln zeigen nur die Subline; Rolle kraeftig und in der Seitentinte */
.wp-info__t { font-weight: 400; font-size: clamp(.95rem, 1.15vw, 1.3rem); line-height: 1.45; color: #0A1E4E; max-width: 34ch; } /* HVR-20260915-08: Copy-Rolle unter dem Titel */
.wp-info__h { margin: 0 0 .45em; font-family: "Montserrat", var(--font-display); font-weight: 700; font-size: clamp(1.15rem, 1.5vw, 1.7rem); line-height: 1.1; text-transform: uppercase; color: #0A1E4E; } /* HVR-20260915-08: Titel des Textblocks */
.wp-info__k { display: block; margin: 0 0 .9em; color: var(--signal-red); }
/* HVR-20260914-28 (Rene): Pricing-Cards. Hairline-Rahmen (kein Radius, kein Schatten), Rollen
   aus den svc-Atomen: Phase (Eyebrow), Leistung (h3), Preis (Statement-Rolle), Einheit (Eyebrow),
   Liste mit Hairlines, Verweis oder Button am Fuss. GUIDE-Card doppelt breit mit dem Rechner. */
.price-cards { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:var(--tile-gap); margin-top:4vh; }
.price-card { position:relative; display:flex; flex-direction:column; min-width:0; border:1px solid var(--svc-rule); padding:4vh var(--content-inset); }
.price-card--wide { grid-column:span 2; }
.price-card .price-card__phase { margin:0 0 1.2em; }
.price-card h3 { margin:0; font-size:clamp(1.25rem,1.65vw,2rem); line-height:1.2; text-transform:uppercase; }
.price-card__price { margin:.6em 0 0; font-weight:700; font-size:clamp(2rem,3.2vw,3.4rem); line-height:1; letter-spacing:-.04em; text-transform:uppercase; }
.price-card__per { font-size:.42em; letter-spacing:0; text-transform:none; font-weight:400; color:var(--svc-muted); }
.price-card__unit { margin:.8em 0 0; font-size:max(.875rem,.95vw); line-height:1.5; letter-spacing:.1em; text-transform:uppercase; color:var(--svc-muted); }
/* HVR-20260914-51 (Rene): jede Linie in einer Karte laeuft bis an den Kartenrahmen (Linie auf Linie,
   kein freies Linienende); der Text bleibt auf dem Inset. */
.price-card__list { list-style:none; margin:2em calc(-1 * var(--content-inset)) 0; padding:0; }
.price-card__list li { padding:.6em var(--content-inset); border-top:1px solid var(--svc-rule); font-size:clamp(1rem,1.08vw,1.25rem); line-height:1.5; color:var(--svc-muted); }
.price-card__list li:last-child { border-bottom:1px solid var(--svc-rule); }
.price-card__tiers { list-style:none; margin:1.6em calc(-1 * var(--content-inset)) 0; padding:0; } /* HVR-20260914-51 */
.price-card__tiers li { display:grid; grid-template-columns:1.6em minmax(0,1fr) auto; gap:.8em; align-items:baseline; padding:.7em var(--content-inset); border-top:1px solid var(--svc-rule); font-size:clamp(1rem,1.08vw,1.25rem); line-height:1.5; color:var(--svc-muted); }
.price-card__tiers li > span:first-child { font-weight:700; color:var(--svc-ink); }
.price-card__tiers b { font-size:clamp(1.15rem,1.5vw,1.7rem); letter-spacing:-.03em; color:var(--svc-ink); }
.price-card > .svc-textlink { display:inline-block; align-self:flex-start; margin-top:auto; padding-top:2.4em; }
.price-card > .svc-button { margin-top:auto; }
.price-card > .svc-button { margin-top:2.4em; align-self:flex-start; }
.price-card.is-origin { border-color:var(--signal-red); }
.price-card.is-origin > h3 { color:var(--signal-red); }
.price-card__day { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:1.2em; align-items:baseline; margin:0 calc(-1 * var(--content-inset)) 0; padding:1.6em var(--content-inset) 0; border-top:1px solid var(--svc-rule); } /* HVR-20260914-51; AD T3: direkt an den Rechner, eine Linie */
.price-card__day .svc-eye { margin:0 0 .4em; }
.price-card__day-copy { margin:0; font-size:clamp(1rem,1.08vw,1.25rem); line-height:1.5; color:var(--svc-muted); }
.price-card__day b { font-size:clamp(1.5rem,2.2vw,2.6rem); letter-spacing:-.03em; }
.price-card__day.is-origin { border-top-color:var(--signal-red); }
.price-card__day.is-origin b { color:var(--signal-red); }
.adv-calculator--pricing { margin:2em calc(-1 * var(--content-inset)) 0; border-bottom:0; } /* AD-Checkpoint T3 (Minor): die Kopflinie des Advisory-Day-Blocks besitzt die Kante, keine 32-px-Doppellinie */ /* HVR-20260914-51: Rahmen des Rechners bis an den Kartenrahmen */
.adv-calculator--pricing .adv-controls { padding-left:var(--content-inset); padding-right:3vw; }
.adv-calculator--pricing .adv-result { padding:4vh 0; }
.adv-calculator--pricing .adv-result > * { padding-left:3vw; padding-right:var(--content-inset); }
.adv-calculator--pricing .adv-result .adv-breakdown { padding:0; }
.adv-calculator--pricing .adv-breakdown > div { padding-left:3vw; padding-right:var(--content-inset); }
.adv-calculator--pricing .adv-price { font-size:clamp(1.6rem,2.4vw,2.8rem); }
@media (max-width:1023px) { .price-cards { grid-template-columns:1fr 1fr; } .price-card--wide { grid-column:1 / -1; } }
/* HVR-20260917-T5 (Rene: "Beim Pricing koennen auch Pricing cards
   nebeneinander, anstatt alle nur untereinander"). Erster Versuch: 2
   Spalten bis 375px durchgezogen, Bullet-Liste dafuer ausgeblendet - von
   Rene per Rueckfrage EXPLIZIT abgelehnt (AskUserQuestion, Ergebnis "2
   Spalten erst ab breiteren Mobilgeraeten (~480px)"): bei sehr schmalen
   Phones (375px, iPhone SE-Klasse) bleiben die Karten mit VOLLEM Inhalt
   gestapelt (Breakpoint von 600px auf 480px gesenkt, urspruengliche
   1-Spalten-Regel sonst unveraendert); erst ab ~480px (groessere Phones)
   greift die 2-Spalten-Regel aus der 1023px-Media-Query oben, ebenfalls
   mit vollem Inhalt (bei ~240px Spaltenbreite minus Insets ausreichend
   Platz fuer die Bullet-Listen ohne Abschneiden - live geprueft). */
@media (max-width:480px) {
  .price-cards { grid-template-columns:1fr; }
  .adv-calculator--pricing { grid-template-columns:1fr; }
}
/* HVR-20260914-04/-06 (Rene): Phase als Vorsatz vor dem Schrittnamen in Ring-Legende und Akkordeon (Kachel-Namensschema DIAGNOSE, DECIDE, VISUALIZE, CONNECT, GUIDE) */
.hiwring__t { white-space:nowrap; } /* AD Critical: Legende einzeilig, Item 05 brach bei 1440 um und schob 06 auf die Linie */
/* AD 2026-09-14 (Pricing-Cards): Rahmen schliessen am Inhalt (align-items start, AP-103), das Preisregister
   der Reihe haelt eine zweizeilige Titelbox; Rechner-Ausgabe in der Card-Preisrolle (Override am Glyphen-Element) */
.price-cards { align-items:stretch; } /* HVR-20260915-12: mit Farbgruenden schliessen die Kacheln je Reihe auf einer Unterkante */
.price-card h3 { min-height:2.4em; }
.price-card > .svc-textlink { margin-top:auto; } /* HVR-20260915-12: CTA am Kachelfuss */
.price-card > .svc-button { margin-top:auto; }
.price-card > :has(+ .svc-button) { margin-bottom:2.4em; }
.adv-calculator--pricing .adv-price output { font-size:clamp(2rem,3.2vw,3.4rem); }
.adv-calculator--pricing .adv-price { display:flex; flex-wrap:wrap; align-items:baseline; gap:.3em; }
/* AD 2026-09-14 (Rechner, beide Seiten): das native Radio zeichnete nach dem Klick seinen Fokusring ueber die Ziffer */
.adv-frequency input { appearance:none; -webkit-appearance:none; outline:none; }
.adv-frequency input:focus-visible + span { outline:2px solid var(--signal-red); outline-offset:-2px; }

/* ---------- HVR-20260915-07 (Rene, zuvor HVR-20260914-64): BTS-Scoring-Section vor PHASES ---------- */
.wbts { position: relative; --v1: 3.47%; --v2: 14.25%; --v3: 85%; background: #9DCFF3; color: #0A1E4E; padding: 12vh 0 10vh; }
.wbts__l { position: absolute; z-index: 5; background: #F1F1F1; pointer-events: none; }
.wbts__l--v { top: 0; bottom: 0; width: var(--line-w); margin-left: calc(var(--line-w) / -2); }
.wbts__l--v1 { left: var(--v1); } .wbts__l--v2 { left: var(--v2); } .wbts__l--v3 { left: var(--v3); }
.wbts__inner { position: relative; margin-left: var(--v2); width: calc(var(--v3) - var(--v2)); }
.wbts__head { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 8%; align-items: end; padding: 0 var(--content-inset) 6vh; }
.wbts__hl { margin: 0; font-family: "Montserrat", var(--font-display); font-weight: 700; font-size: clamp(2.4rem, 4.9vw, 7rem); line-height: 1; letter-spacing: 0; color: #0A1E4E; }
.wbts__intro { margin: 0; max-width: 30em; font-family: "HK Grotesk Wide", var(--font-display); font-weight: 400; font-size: clamp(1rem, 1.35vw, 1.55rem); line-height: 1.5; }
.wbts__rows { border-top: 1px solid #F1F1F1; }
.wbts__legend { display: grid; grid-template-columns: 4.5em minmax(0, 1.1fr) minmax(0, 1fr); gap: 2.4em; align-items: end; padding: 0 var(--content-inset) 1.6vh; } /* AD T4 (M7), uebernommen: Beispielwerte gekennzeichnet, Stufen benannt; Spalten wie .wbts__row (gleiche em-Basis) */
.wbts__legend > span { font-family: "Montserrat", var(--font-display); font-weight: 700; font-size: max(.75rem, .85vw); letter-spacing: .1em; text-transform: uppercase; color: #0A1E4E; }
.wbts__row { display: grid; grid-template-columns: 4.5em minmax(0, 1.1fr) minmax(0, 1fr); gap: 2.4em; align-items: center; padding: 3.2vh var(--content-inset); border-bottom: 1px solid #F1F1F1; }
.wbts__n { font-family: "Montserrat", var(--font-display); font-weight: 700; font-size: clamp(2rem, 3.4vw, 4.6rem); line-height: 1; color: #F1F1F1; }
.wbts__row h3 { margin: 0 0 .4em; font-family: "Montserrat", var(--font-display); font-weight: 700; font-size: clamp(1.15rem, 1.5vw, 1.7rem); line-height: 1.2; text-transform: uppercase; }
.wbts__row p { margin: 0; max-width: 30em; font-family: "HK Grotesk Wide", var(--font-display); font-weight: 400; font-size: clamp(1rem, 1.15vw, 1.3rem); line-height: 1.5; }
.wbts__scale { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.wbts__scale i { display: flex; align-items: center; justify-content: center; height: clamp(2.4rem, 3.4vw, 3.6rem); border: 1px solid #F1F1F1; font-family: "Montserrat", var(--font-display); font-style: normal; font-weight: 700; font-size: max(.875rem, .95vw); letter-spacing: .1em; color: #F1F1F1; }
.wbts__scale i.is-on { background: #0A1E4E; border-color: #0A1E4E; }
.wbts__foot { margin: 5vh 0 0; padding: 0 var(--content-inset); max-width: 36em; font-family: "HK Grotesk Wide", var(--font-display); font-weight: 700; font-size: clamp(1.05rem, 1.35vw, 1.55rem); line-height: 1.4; }
@media (max-width: 900px) { .wbts__head, .wbts__row, .wbts__legend { grid-template-columns: minmax(0, 1fr); } .wbts__inner { margin-left: 0; width: auto; padding: 0 5%; } .wbts__l { display: none; } }

/* ---------- HVR-20260916-14 (Rene): interaktiver BTS-Rechner (Port aus ifa-pitchdeck/js/deck.js) ---------- */
.wbts__rule { margin: 0 0 3vh; padding: 0 var(--content-inset); display: flex; align-items: baseline; flex-wrap: wrap; gap: .6em 2em; font-family: "HK Grotesk Wide", var(--font-display); font-size: clamp(1rem, 1.15vw, 1.3rem); line-height: 1.5; color: #0A1E4E; }
.wbts__rule > span:first-child { flex: 1 1 24em; min-width: 0; }
.wbts__rule b { color: #0A1E4E; font-weight: 700; }
.wbts__rest { margin-left: auto; font-weight: 700; text-transform: uppercase; font-size: max(.8rem, .9vw); letter-spacing: .12em; white-space: nowrap; }
.wbts__rest b { font-variant-numeric: tabular-nums; }
.wbts__calc { border-top: 1px solid #F1F1F1; }
.wbts__axis { display: grid; grid-template-columns: 4.5em minmax(0, 1.1fr) minmax(0, 1fr); gap: 2.4em; align-items: center; padding: 3.2vh var(--content-inset); border-bottom: 1px solid #F1F1F1; }
.wbts__axis-k { font-family: "Montserrat", var(--font-display); font-weight: 700; font-size: clamp(2rem, 3.4vw, 4.6rem); line-height: 1; color: #F1F1F1; }
.wbts__axis-name { margin: 0 0 .4em; font-family: "Montserrat", var(--font-display); font-weight: 700; font-size: clamp(1.15rem, 1.5vw, 1.7rem); line-height: 1.2; text-transform: uppercase; color: #0A1E4E; }
.wbts__wahl { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.wbts__st { border: 1px solid #F1F1F1; background: none; height: clamp(2.4rem, 3.4vw, 3.6rem); font-family: "Montserrat", var(--font-display); font-weight: 700; font-size: max(.875rem, .95vw); letter-spacing: .1em; color: #0A1E4E; cursor: pointer; transition: background-color .18s ease, color .18s ease, border-color .18s ease; }
.wbts__st:focus-visible { outline: 2px solid #0A1E4E; outline-offset: 2px; }
.wbts__st.is-on { background: #0A1E4E; border-color: #0A1E4E; color: #F1F1F1; }
.wbts__st.is-on.is-knapp { background: var(--signal-red); border-color: var(--signal-red); color: #fff; } /* Rot markiert eine knappe Eins, wie im Pitchdeck */
.wbts__erg { margin-top: 5vh; padding: 0 var(--content-inset); border-top: 1px solid #F1F1F1; padding-top: 3vh; max-width: 42em; }
.wbts__erg-kopf { margin: 0; font-family: "Montserrat", var(--font-display); font-weight: 700; font-size: clamp(1.3rem, 2vw, 2.2rem); line-height: 1.1; text-transform: uppercase; color: var(--signal-red); }
.wbts__erg-was { margin: .6em 0 0; font-family: "HK Grotesk Wide", var(--font-display); font-weight: 700; font-size: max(.875rem, .95vw); letter-spacing: .1em; text-transform: uppercase; color: #0A1E4E; }
.wbts__erg-rat { margin: .8em 0 0; font-family: "HK Grotesk Wide", var(--font-display); font-weight: 400; font-size: clamp(1rem, 1.15vw, 1.3rem); line-height: 1.5; color: #0A1E4E; }
@media (max-width: 900px) { .wbts__axis { grid-template-columns: minmax(0, 1fr); } }


/* ---------- HVR-20260915-12 (Rene, zuvor HVR-20260914-76): Pricing-Karten nach Zusammenhang auf eigenen Gruenden ---------- */
.price-card[data-price-anchor="clarity-call"] { background:#b01118; /* AD T4 (M2): tiefere Rotstufe der Intro-Leiter (--t02): Weiss 7.1:1, Muted 5.7:1; Signal Rot als Grund lag bei 4.2:1 */ color:#fff; --svc-ink:#fff; --svc-muted:rgba(255,255,255,.86); --svc-rule:#fff; border-color:#fff; }
.price-card[data-price-anchor="clarity-call"] .svc-button { background:#fff; color:#b01118; }
.price-card[data-price-anchor="clarity-call"] .svc-button:hover { background:#201e1e; color:#fff; }
.price-card[data-price-anchor="workshop"] { background:#201e1e; color:#ededed; --svc-ink:#ededed; --svc-muted:rgba(237,237,237,.72); --svc-rule:#ededed; border-color:#ededed; }
.price-card[data-price-anchor="workshop"] .svc-textlink:hover { color:var(--signal-red); }
.price-card[data-price-anchor="design-sprint"],.price-card[data-price-anchor="partner-network"] { background:var(--tile-gray); }
.price-card[data-price-anchor="advisory-package"] .adv-result { background:#201e1e; color:#ededed; --svc-ink:#ededed; --svc-muted:rgba(237,237,237,.72); --svc-rule:#ededed; border-left:0; }
.price-card[data-price-anchor="advisory-package"] .adv-result .svc-eye,.price-card[data-price-anchor="advisory-package"] .adv-result .adv-hint,.price-card[data-price-anchor="advisory-package"] .adv-result .adv-summary { color:rgba(237,237,237,.72); }

/* HVR-20260918-lines-mobile (Rene: "Entferne alle horizontalen Linien auf
   allen Pages in der Mobilen Ansicht"): konsolidierter Block statt ~90
   Einzel-Overrides. Betrifft NUR horizontale Trenner/Konstruktionslinien;
   vertikale Anker (v1/v2/v3, .wb-grid--v) und Rahmen-Seitenlinien (links/
   rechts) bleiben unangetastet. !important, da die Originalregeln quer durch
   die Kaskade an vielen Spezifitaetsstufen liegen und einzeln nachzuziehen
   waere. Reine Linien-Elemente (Konstruktionslinien, Topline-Marker) werden
   ausgeblendet; border-top/-bottom bei Listen-/Card-Trennern auf 0 gesetzt
   (die Trennung traegt danach nur noch der Abstand). */
@media (max-width: 900px) {
  .hero__pline--h,
  .pf-about__hline,
  .ab-media__hline,
  .pf-brands__topline,
  .pf-folio__topline,
  .hiw-head::before,
  .hiw-stack::before,
  .hiw-stack::after,
  .hiw7::before,
  .hiw7::after,
  .wb-grid--h,
  .ws-meter__track::before,
  .hiwring__tag,
  .adv-phases li.is-now::after
  { display: none !important; }

  .what__topline, .ws__topline,
  .ws-src, .ws-base__grp, .ws-reg, .ws-reg__row, .ws-lever, .ws-ledger, .ws-ledger__row,
  .ws-flow__list, .ws-browser__bar, .ws-paths, .ws-paths > div,
  .svc-band, .svc-rhythm dl > div, .svc-list li, .svc-price-foot, .svc-offers article, .svc-faq details,
  .svc-price-core__value, .svc-faq--full,
  .price-more, .price-more__list li, .price-more__dl > div,
  .adv-breakdown > div, .adv-result, .adv-phases, .adv-phases li,
  .page-content--advisory .svc-rhythm dl,
  .site-foot, .site-foot__panel, .site-foot__close,
  .price-card__list li, .price-card__list li:last-child,
  .price-card__tiers li, .price-card__day,
  .wbts__rows, .wbts__row, .wbts__calc, .wbts__axis, .wbts__erg
  { border-top: 0 !important; border-bottom: 0 !important; border-block: 0 !important; }
}

/* HVR-20260928 (nur mobil): Rollen-Listen im How-it-works-Faecher uebereinander gestapelt,
   Panelhoehe = laengste Liste. Vorher height:auto je aktiver Liste - der 5-s-Tabwechsel der
   Ring-Uhr verschob alle Zeilen darunter und den Plan um 41 px, unabhaengig vom Scroll. */
@media (max-width: 900px) {
  .hiw7 .pillswrap { display: grid; }
  .hiw7 .pills { grid-area: 1 / 1; display: flex; visibility: hidden; }
  .hiw7 .pills[data-active] { visibility: visible; }
}