/* ============================================================
   VALMODO – FASSUNG II  „DAS FELD"
   ------------------------------------------------------------
   Zwei Akte, zwei Gestaltungen, ein Farbsystem.

   AKT I  – eine einzige Punktwolke traegt die ganze Beweisfuehrung.
            Vollbild, alles bewegt, Text schwebt als Ablesung an
            wechselnden Stellen im Rahmen.
   AKT II – nichts bewegt sich. Eine senkrechte Haarlinie, Marge
            links, Zeilen darunter. Kein Kasten auf der ganzen
            Strecke. Der Gegensatz IST die Gestaltung.

   Die Farbtokens sind zeichengleich mit Fassung I. Farbsemantik
   unveraendert: signal = gemessener Wert / aktiver Zustand / CTA,
   brass = Struktur und Marge, alert = ausschliesslich Risiko.
   ============================================================ */

/* ---------- 1. TOKENS ---------- */
:root {
  --ink-900: #0c0d10;
  --ink-900-rgb: 12, 13, 16;
  --ink-850: #101216;
  --ink-800: #14161b;
  --ink-700: #1b1e24;
  --ink-650: #21252c;
  --ink-600: #262a31;
  --ink-500: #343943;
  --ink-400: #5b626e;

  --paper:     #e9eaec;
  --paper-dim: #c3c7cd;
  --fog:       #9aa2ae;
  --fog-dim:   #7c838f;

  --signal:      #c8e02e;
  --signal-rgb:  200, 224, 46;
  --signal-lit:  #d6ec4a;
  --signal-dim:  #93a527;
  --brass:       #b4934f;
  --brass-dim:   #6e5a38;
  --brass-text:  #947944;
  --alert:       #cf5c4a;

  --f-sans:  'Archivo', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --f-mono:  'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, monospace;
  --f-serif: 'Playfair Display', Georgia, serif;

  /* Typoskala. Anders als in Fassung I: oben deutlich groesser
     (bis 8,5 rem statt 5), unten identisch – die Mikrostufen sind
     Lesbarkeitsuntergrenzen, keine Geschmacksfrage. */
  --fs-0: 0.6875rem;
  --fs-1: 0.75rem;
  --fs-2: 0.8125rem;
  --fs-3: 0.9375rem;
  --fs-4: clamp(1.0625rem, 0.99rem + 0.3vw, 1.25rem);
  --fs-5: clamp(1.25rem, 1.1rem + 0.65vw, 1.65rem);
  --d-3:  clamp(1.15rem, 1rem + 0.6vw, 1.5rem);
  --d-2:  clamp(1.85rem, 1.2rem + 2.6vw, 3.9rem);
  --d-1:  clamp(2.15rem, 1.3rem + 3.4vw, 4.7rem);
  --d-0:  clamp(2.6rem, 1.1rem + 6.6vw, 8.2rem);

  --tr-tight: -0.035em;
  --tr-0: 0;
  --tr-mono: 0.05em;
  --tr-wide: 0.16em;

  --s1: 0.25rem;  --s2: 0.5rem;   --s3: 0.75rem;  --s4: 1rem;
  --s5: 1.5rem;   --s6: 2rem;     --s7: 3rem;     --s8: 4rem;
  --s9: 6rem;     --s10: 9rem;

  --pad-x: clamp(1.25rem, 4.5vw, 5.5rem);
  --pad-y: clamp(4rem, 8vw, 9rem);
  --marg: 0px;          /* Margenspalte in Akt II, ab 62rem gesetzt */
  --gap:  clamp(1.5rem, 3vw, 3.5rem);
  --maxw: 1680px;

  --r0: 0; --r1: 2px; --rfull: 999px;

  --z-base: 1; --z-hud: 40; --z-nav: 200; --z-bar: 300;

  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --t-1: 0.15s; --t-2: 0.3s; --t-3: 0.45s; --t-4: 0.7s;
}

@media (max-width: 619px) {
  :root { --fs-0: 0.6875rem; --fs-1: 0.8125rem; --fs-2: 0.875rem; --tr-wide: 0.11em; }
}

/* ---------- 2. RESET ---------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  color-scheme: dark;
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--ink-900);
  color: var(--paper);
  font-family: var(--f-sans);
  font-size: clamp(1rem, 0.97rem + 0.12vw, 1.0625rem);
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

img, svg, canvas { display: block; max-width: 100%; }
h1, h2, h3 { margin: 0; font-weight: 600; line-height: 1.02; letter-spacing: var(--tr-tight); text-wrap: balance; }
p, dl, dd, ol, ul, figure, blockquote { margin: 0; }
ol, ul { padding: 0; list-style: none; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
strong, b { font-weight: 600; }
em { font-style: normal; }
::selection { background: rgba(var(--signal-rgb), 0.24); }

:focus-visible {
  outline: 2px solid var(--signal);
  outline-offset: 3px;
}

.skip {
  position: fixed; top: 0; left: 0; z-index: 999;
  transform: translateY(-120%);
  background: var(--signal); color: var(--ink-900);
  display: flex; align-items: center; min-height: 44px;
  padding: 0 var(--s5);
  font: 500 var(--fs-1)/1 var(--f-mono);
  letter-spacing: var(--tr-wide); text-transform: uppercase;
  transition: transform var(--t-1) var(--ease);
}
.skip:focus { transform: none; }

/* ---------- 3. BAUSTEINE ---------- */

/* Mikro-Beschriftung. Sie traegt auf dieser Fassung die gesamte
   Metaebene – es gibt keine Eyebrow-Regeln und keine Eckmarken
   mehr, nur diese eine Schriftrolle. */
.tag {
  font: 500 var(--fs-0)/1 var(--f-mono);
  letter-spacing: var(--tr-wide);
  text-transform: uppercase;
  color: var(--brass-text);
}

.lead {
  font-size: var(--fs-5);
  line-height: 1.5;
  color: var(--fog);
  max-width: 46ch;
}

.note {
  font: 400 var(--fs-1)/1.4 var(--f-mono);
  letter-spacing: var(--tr-mono);
  color: var(--fog-dim);
}

.h-0 { font-size: var(--d-0); line-height: 0.92; }
.h-1 { font-size: var(--d-1); line-height: 0.98; }
.h-2 { font-size: var(--d-2); line-height: 1.0; }
.h-3 { font-size: var(--d-3); line-height: 1.2; letter-spacing: -0.018em; }

/* Betonung ueber TON, nicht ueber Farbe: der Satz steht in --fog,
   die Aussage in --paper. Lime bleibt dem gemessenen Wert
   vorbehalten (em.v) – die Farbregel der Marke, unveraendert. */
/* DER TON MACHT DIE BETONUNG, NICHT DIE FARBE – aber beide Stufen
   muessen ueber einem bewegten Feld lesbar bleiben. --fog (7,05:1 auf
   ink-900) reicht auf ruhigem Grund; ueber der Wolke faellt der
   effektive Kontrast, weil hinter jedem zweiten Buchstaben ein heller
   Punkt steht. Die ruhige Haelfte steht deshalb auf --paper-dim
   (13,2:1), die betonte auf --paper. Der Sprung ist kleiner, aber er
   ist immer noch einer – und beide Haelften sind lesbar. */
h1, .h-2 { color: var(--paper-dim); }
h1 em, .h-2 em { color: var(--paper); }
h1 em.v, .h-2 em.v { color: var(--signal); }

/* Schaltflaechen */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 52px; padding: 0 var(--s6);
  font: 500 var(--fs-2)/1 var(--f-mono);
  letter-spacing: var(--tr-wide); text-transform: uppercase;
  border-radius: var(--r0);
  transition: background var(--t-2) var(--ease), color var(--t-2) var(--ease),
              border-color var(--t-2) var(--ease), transform var(--t-1) var(--ease);
}
.btn-primary { background: var(--signal); color: var(--ink-900); }
.btn-ghost { border: 1px solid var(--ink-400); color: var(--paper); }
@media (hover: hover) {
  .btn-primary:hover { background: var(--signal-lit); }
  .btn-ghost:hover { border-color: var(--paper); background: rgba(255,255,255,.04); }
}
.btn:active { transform: scale(0.985); }
.btn-primary:active { background: var(--signal-lit); }
.btn-ghost:active { background: rgba(255,255,255,.08); }

/* ---------- 4. KOPF ---------- */
.top {
  position: fixed; inset: 0 0 auto 0; z-index: var(--z-nav);
  display: flex; align-items: center; gap: var(--s6);
  padding: var(--s4) var(--pad-x);
  transition: background var(--t-3) var(--ease), border-color var(--t-3) var(--ease);
  border-bottom: 1px solid transparent;
}
.top.is-solid {
  background: rgba(var(--ink-900-rgb), 0.86);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  border-bottom-color: var(--ink-600);
}
.top-mark { flex: 0 0 auto; display: flex; align-items: center; min-height: 44px; }
.top-mark img { height: 28px; width: auto; }
.top-nav { display: flex; gap: var(--s6); margin-left: auto; }
/* 44 px Trefferflaeche. Die Zeile bleibt trotzdem 79 px hoch – die
   Hoehe treibt der CTA daneben, nicht der Verweis. */
.top-nav a {
  position: relative;
  display: inline-flex; align-items: center; min-height: 44px;
  font: 500 var(--fs-1)/1 var(--f-mono);
  letter-spacing: var(--tr-wide); text-transform: uppercase;
  color: var(--fog);
  transition: color var(--t-2) var(--ease);
}
.top-nav a::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: calc(50% - 0.85em); height: 1px;
  background: var(--brass); transform: scaleX(0); transform-origin: 0 50%;
  transition: transform var(--t-2) var(--ease);
}
@media (hover: hover) {
  .top-nav a:hover { color: var(--paper); }
  .top-nav a:hover::after { transform: scaleX(1); }
}
.top-cta { min-height: 42px; padding: 0 var(--s5); }

/* Der Knopf zum Menue. 44 px wie das Logo daneben – die Kopfzeile wird
   dadurch nicht hoeher, und headH in v2.js (Klemme fuer die Marken in
   Akt I) bleibt, was es war. Drei Striche, die zum Kreuz werden: nur
   transform und opacity. */
.ham {
  display: none;
  margin-left: auto;
  width: 44px; height: 44px; flex: none;
  place-content: center; gap: 5px;
}
.ham span {
  display: block; width: 20px; height: 1.5px;
  background: var(--paper);
  transition: transform var(--t-2) var(--ease), opacity var(--t-1) var(--ease);
}
.ham:active span { background: var(--signal); }   /* Signal = aktiver Zustand */
.ham.is-open span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.ham.is-open span:nth-child(2) { opacity: 0; }
.ham.is-open span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

/* Das Menue selbst: eine Flaeche unter der Kopfzeile, fuenf Zeilen mit
   Haarlinien, sonst nichts. Zustand ueber opacity + visibility; die
   visibility schaltet HART (0 s) – beim Oeffnen sofort, beim Schliessen
   erst nach dem Ausblenden –, damit kein Zustand an einer laufenden
   Transition haengt und der erste Link im selben Bild fokussierbar ist
   (dieselbe Bauform wie .mob-menu in Fassung I). Unten bleibt Platz fuer
   die Leiste, die ueber dem Menue stehen bleibt. */
.mob-menu {
  position: fixed; inset: 0; z-index: calc(var(--z-nav) - 1);
  display: none; flex-direction: column; justify-content: flex-start;
  padding: 6.5rem var(--pad-x) calc(56px + env(safe-area-inset-bottom, 0px) + var(--s6));
  background: var(--ink-900);
  opacity: 0; visibility: hidden;
  transition: opacity var(--t-2) var(--ease), visibility 0s linear var(--t-2);
}
.mob-menu.is-open {
  opacity: 1; visibility: visible;
  transition: opacity var(--t-2) var(--ease), visibility 0s linear 0s;
}
.mob-menu a {
  display: grid; grid-template-columns: 1fr auto; align-items: baseline; gap: var(--s4);
  padding: var(--s4) 0; min-height: 56px;
  border-bottom: 1px solid var(--ink-600);
}
.mob-menu a:first-child { border-top: 1px solid var(--ink-600); }
.mob-menu a span { font-size: var(--fs-5); font-weight: 600; letter-spacing: var(--tr-tight); color: var(--paper); }
.mob-menu a i {
  font: 500 var(--fs-0)/1.7 var(--f-mono);
  letter-spacing: var(--tr-wide); text-transform: uppercase;
  color: var(--brass-text); text-align: right;
}
.mob-menu a:active span { color: var(--signal); }   /* reines Touch-Element: Active ist die einzige Rueckmeldung */

@media (max-width: 900px) {
  .top-nav { display: none; }
  .top-cta { display: none; }
  .top { padding-block: var(--s3); }
  .top-mark img { height: 22px; }
  .ham { display: grid; }
  .mob-menu { display: flex; }
}

/* ============================================================
   AKT I – DAS FELD
   ============================================================ */
.act1 { position: relative; height: 840vh; }  /* 720 + 120 fuer die zweite Marktstation (09.09.2026) */
.act1-pin {
  position: sticky; top: 0;
  height: 100svh; overflow: clip;
}
.act1-canvas {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  opacity: 0;
  transition: opacity var(--t-4) var(--ease);
}
.act1-canvas.is-on { opacity: 1; }

/* Schleier. Der senkrechte Teil steht fest (Kopf oben, Ablesungen
   unten). Die zwei seitlichen FAHREN MIT DEM TEXT: --vl und --vr
   kommen aus dem Szenen-Callback und sind die Summe der gerade
   sichtbaren Ablesungen. Ein fester Schleier haette entweder die
   Schrift auf der Wolke stehen lassen oder die Wolke dort
   verschluckt, wo gerade kein Text steht – und die Ablesungen
   wechseln in dieser Fassung die Seite. */
/* VIGNETTE (24.09.2026, Paket 2): eine zweite Schicht, die das Bild zu den
   Ecken hin ruhig abdunkelt – der Blick bleibt in der Mitte, das Feld
   bekommt einen Rahmen ohne Kante. Als eigene Variable, damit die
   schmale Fassung unten sie wiederverwenden kann. */
.act1 { --vignette: radial-gradient(120% 95% at 50% 46%,
      rgba(var(--ink-900-rgb), 0) 52%,
      rgba(var(--ink-900-rgb), 0.38) 82%,
      rgba(var(--ink-900-rgb), 0.70) 100%); }
.act1-veil {
  position: absolute; inset: 0; pointer-events: none;
  background: var(--vignette), linear-gradient(180deg,
      rgba(var(--ink-900-rgb), 0.94) 0%,
      rgba(var(--ink-900-rgb), 0.30) 14%,
      rgba(var(--ink-900-rgb), 0) 30%,
      rgba(var(--ink-900-rgb), 0) 58%,
      rgba(var(--ink-900-rgb), 0.62) 84%,
      rgba(var(--ink-900-rgb), 0.94) 100%);
}
.act1-scrim { position: absolute; inset: 0; pointer-events: none; }
.act1-scrim-l {
  opacity: var(--vl, 1);
  background: linear-gradient(90deg,
    rgba(var(--ink-900-rgb), 0.72) 0%,
    rgba(var(--ink-900-rgb), 0.42) 20%,
    rgba(var(--ink-900-rgb), 0.12) 40%,
    rgba(var(--ink-900-rgb), 0) 58%);
}
.act1-scrim-r {
  opacity: var(--vr, 0.2);
  background: linear-gradient(270deg,
    rgba(var(--ink-900-rgb), 0.72) 0%,
    rgba(var(--ink-900-rgb), 0.42) 20%,
    rgba(var(--ink-900-rgb), 0.12) 40%,
    rgba(var(--ink-900-rgb), 0) 58%);
}

.act1-stage { position: absolute; inset: 0; pointer-events: none; }
/* EIGENER STAPELKONTEXT. Die Ablesungen tragen ihren Schleier als
   ::before mit z-index -1; ohne isolation liegt der im negativen
   Bereich des naechsten Kontexts – und das ist .act1-pin (sticky
   erzeugt einen). Der Schleier laege dann HINTER der Leinwand und
   waere wirkungslos. */
.act1-ui { position: absolute; inset: 0; isolation: isolate; }

/* Eine Phase = eine Ablesung. Sie stehen bewusst an WECHSELNDEN
   Stellen im Rahmen – links unten, rechts oben, mittig –, weil das
   Feld dahinter sich bewegt und der Blick mitgehen soll. Genau das
   ist der Unterschied zu einem Dokument, das man herunterliest. */
.ph {
  position: absolute;
  opacity: 0;
  pointer-events: none;
  will-change: opacity, transform;
}
/* DAS ABLESEFELD. Ein seitenbreiter Schleier muss so dunkel sein,
   dass er das Feld dort verschluckt, wo gar kein Text steht – und
   ist trotzdem genau hinter den Buchstaben am schwaechsten, weil er
   nicht weiss, wo sie stehen. Also traegt jede Ablesung ihren
   eigenen, an ihr selbst verankert. Er hat keine Kante und ist
   deshalb kein Kasten: die Ellipse laeuft auf null aus, bevor sie
   irgendwo aufhoert. Damit konnten die seitlichen Schleier von 0,90
   auf 0,72 zurueck – das Feld bleibt sichtbar, die Schrift steht. */
.ph::before {
  content: ''; position: absolute; z-index: -1; pointer-events: none;
  inset: -16vh -13vw -18vh -13vw;
  /* DIE ELLIPSE MUSS INNERHALB DER FLAECHE AUF NULL LAUFEN. Die
     Prozentwerte der Endform beziehen sich auf BREITE und HOEHE des
     Kastens, nicht auf die halbe; alles ueber 50 % wird am Rand
     abgeschnitten, und aus dem weichen Schleier wird eine harte
     Kante. Mit 120 % stand bei 1440 px ein sichtbares Rechteck quer
     durch die Partikelwolke. 48/46 % laufen sicher aus. */
  background: radial-gradient(48% 46% at 50% 50%,
    rgba(var(--ink-900-rgb), 0.90) 0%,
    rgba(var(--ink-900-rgb), 0.80) 42%,
    rgba(var(--ink-900-rgb), 0.44) 72%,
    rgba(var(--ink-900-rgb), 0) 100%);
  /* Seit 24.09.2026 steht die Tafel selbst auf 0 oder 1; ihre
     Anwesenheit (--o aus renderDom) traegt nur noch der Schleier. */
  opacity: var(--o, 1);
}
.ph.is-live { pointer-events: auto; }
/* ZEILEN HINTER EINER MASKE (24.09.2026, v2.js splitWords/lines). Jedes
   Wort ist ein Kasten mit overflow hidden, sein Inneres faehrt per
   transform. Innenabstand oben und unten, damit Umlaute und
   Unterlaengen nicht abgeschnitten werden; die negativen Raender geben
   den Platz zurueck, der Satz steht wie vorher. vertical-align top,
   weil ein Kasten mit overflow seine Grundlinie an die Unterkante legt. */
.ph .lm {
  display: inline-block; overflow: hidden; vertical-align: top;
  padding: 0.14em 0.05em 0.26em; margin: -0.14em -0.05em -0.26em;
}
.ph .li { display: inline-block; }
.ph .nw { white-space: nowrap; }
.ph > * + * { margin-top: var(--s5); }
/* Ueber dem Feld eine Stufe heller und eine Spur fetter als in Akt II:
   Archivo ist variabel, 450 kostet kein zweites Schriftfile. */
.ph .lead { color: var(--paper-dim); font-weight: 450; line-height: 1.55; }
.ph .tag { color: var(--brass); }
.ph .tag + h1, .ph .tag + .h-2 { margin-top: var(--s4); }

.ph-hero  { left: var(--pad-x); bottom: 12vh; width: min(92vw, 46rem); }
.ph-sit   { right: var(--pad-x); bottom: 14vh; width: min(90vw, 31rem); }
.ph-markt { left: var(--pad-x); bottom: 13vh; width: min(92vw, 40rem); }
.ph-markt2{ right: var(--pad-x); bottom: 14vh; width: min(90vw, 34rem); text-align: right; }
.ph-zulauf{ left: var(--pad-x); top: 22vh;    width: min(92vw, 35rem); }
.ph-sieb  { right: var(--pad-x); top: 21vh;   width: min(90vw, 27rem); text-align: right; }
/* 32 statt 35 rem: rechts davon steht das Raster in seiner eigenen Zone
   (regDist/regDX in v2.js rechnen aus diesem Rechteck). */
.ph-reg   { left: var(--pad-x); top: 22vh;    width: min(92vw, 32rem); }
.ph-erg   { left: var(--pad-x); right: var(--pad-x); bottom: 12vh; }

.ph-hero h1 { font-size: clamp(2.05rem, 1.05rem + 3.6vw, 4.5rem); line-height: 1.0; }
.ph-hero .lead { max-width: 40ch; font-size: var(--fs-4); }
.ph-act { display: flex; flex-wrap: wrap; gap: var(--s4); }
.ph-hero .note { margin-top: var(--s3); }

.scrollhint {
  display: flex; align-items: center; gap: var(--s3);
  margin-top: var(--s6);
  font: 500 var(--fs-0)/1 var(--f-mono);
  letter-spacing: var(--tr-wide); text-transform: uppercase;
  color: var(--fog-dim);
}
.scrollhint i { display: block; width: 40px; height: 1px; background: var(--brass); }

/* Die vier Zustaende: Nummer in der Marge, Satz daneben, eine
   Haarlinie je Zeile. Dieselbe Bauform wie das Protokoll unten –
   der Faden zwischen den Akten. */
.sym { position: relative; }
.sym li {
  position: relative;
  display: grid; grid-template-columns: 3rem 1fr; gap: var(--s4);
  padding: var(--s4) 0;
  font-size: var(--fs-4);
  color: var(--paper-dim);
}
/* Die Haarlinien sind Pseudo-Elemente statt Rahmen, damit sie sich im
   Umblaettern von links zeichnen koennen (--k aus v2.js, 0…1). Ohne
   Skript steht --k auf 1. */
.sym::before, .sym li::after {
  content: ''; position: absolute; left: 0; right: 0; height: 1px;
  background: var(--ink-500);
  transform: scaleX(var(--k, 1)); transform-origin: 0 50%;
}
.sym::before { top: 0; }
.sym li::after { bottom: 0; }
.sym b {
  font: 500 var(--fs-1)/1.5 var(--f-mono);
  letter-spacing: var(--tr-mono); color: var(--brass);
}

/* Kennzahlen am Ende des Felds */
.kpi { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s6); max-width: 62rem; }
.kpi dt {
  font: 500 var(--fs-0)/1.4 var(--f-mono);
  letter-spacing: var(--tr-wide); text-transform: uppercase; color: var(--fog-dim);
  margin-bottom: var(--s2);
}
.kpi dd {
  font: 600 clamp(1.8rem, 1rem + 2.6vw, 3.6rem)/1 var(--f-sans);
  letter-spacing: var(--tr-tight); color: var(--signal);
  /* Die Zahlen zaehlen seit Paket 3 hoch: gleich breite Ziffern, sonst
     zittert die Zeile bei jedem Wert. */
  font-variant-numeric: tabular-nums;
}
.kpi dd i { font-style: normal; font-size: 0.42em; color: var(--fog); letter-spacing: 0; margin-left: 0.2em; }

/* Zaehler waehrend der Pruefung */
.act1-count {
  position: absolute; left: var(--pad-x); bottom: 22vh;
  opacity: 0; pointer-events: none; isolation: isolate;
}
.act1-count::before {
  content: ''; position: absolute; z-index: -1;
  inset: -12vh -13vw;
  background: radial-gradient(48% 46% at 50% 50%,
    rgba(var(--ink-900-rgb), 0.88) 0%,
    rgba(var(--ink-900-rgb), 0.66) 46%,
    rgba(var(--ink-900-rgb), 0) 100%);
}
.act1-count b {
  display: block;
  font: 500 clamp(2.6rem, 1.4rem + 4vw, 5.4rem)/0.9 var(--f-mono);
  letter-spacing: -0.04em; color: var(--paper);
  font-variant-numeric: tabular-nums;
  transition: color var(--t-3) var(--ease);
}
.act1-count.is-hot b { color: var(--signal); }
.act1-count span {
  display: block; margin-top: var(--s2);
  font: 500 var(--fs-0)/1 var(--f-mono);
  letter-spacing: var(--tr-wide); text-transform: uppercase; color: var(--fog);
}

/* Ablesung unten rechts: welche Phase, wie weit. Sie ersetzt die
   Messskala aus Fassung I – dieselbe Aufgabe, ein Zehntel der
   Flaeche, und sie sagt zusaetzlich, WAS gerade laeuft. */
.act1-hud {
  position: absolute; right: var(--pad-x); bottom: 6vh;
  display: grid; grid-template-columns: auto auto; align-items: baseline;
  gap: 0 var(--s3); z-index: var(--z-hud);
  opacity: 0; transition: opacity var(--t-3) var(--ease);
}
.act1-hud.is-on { opacity: 1; }
.act1-hud b {
  font: 500 var(--fs-1)/1 var(--f-mono);
  letter-spacing: var(--tr-mono); color: var(--signal);
}
.act1-hud span {
  font: 500 var(--fs-0)/1 var(--f-mono);
  letter-spacing: var(--tr-wide); text-transform: uppercase; color: var(--fog);
}
.hud-bar {
  grid-column: 1 / -1; margin-top: var(--s3);
  display: block; width: 168px; height: 1px; background: var(--ink-500);
}
.hud-bar u { display: block; text-decoration: none; height: 1px; background: var(--signal); transform-origin: 0 50%; transform: scaleX(0); }

/* Projizierte Marken: Kanaele, Siebe, Schichten. Sie tragen eine
   eigene Flaeche in --ink-900, weil sie ueber der hellsten Stelle
   der Wolke stehen koennen. */
.mark {
  position: absolute; left: 0; top: 0;
  display: flex; align-items: center; gap: var(--s2);
  padding: 5px 9px 5px 7px;
  background: rgba(var(--ink-900-rgb), 0.92);
  border: 1px solid var(--ink-500);
  font: 500 var(--fs-0)/1 var(--f-mono);
  letter-spacing: var(--tr-wide); text-transform: uppercase;
  color: var(--brass-text);
  white-space: nowrap;
  opacity: 0;
  will-change: transform, opacity;
}
.mark::before { content: ''; width: 4px; height: 4px; background: var(--brass); }
.mark.is-sieve { color: var(--signal); }
.mark.is-sieve::before { background: var(--signal); }
.mark.is-layer { color: var(--paper-dim); }
.mark.is-layer b { color: var(--signal); font-weight: 500; }
.mark.is-layer.is-mass b { color: var(--paper); }

/* Ableselinie einer ausgewichenen Marke: von der Soll- zur Ist-Lage.
   1 x 1 px, ueber transform gestreckt – kein Layout, kein Paint. Sie
   liegt unter den Marken und laeuft, wo es sein muss, unter der
   Schrift hindurch, wie die Rasterlinien der Schichtung. */
.mark-line {
  position: absolute; left: 0; top: 0;
  width: 1px; height: 1px;
  background: var(--brass);
  transform-origin: 0 50%;
  opacity: 0;
  pointer-events: none;
  will-change: transform, opacity;
}
.mark-line.is-sieve { background: var(--signal); }

/* Die sechs Kanaele als feste Liste. Sie ersetzt im Hochformat die
   projizierten Marken: von sechs Marken auf einem Ring landen dort
   zwei ausserhalb der waagrechten Oeffnung, und an den Rand
   geklammert stapeln sie sich zu einem Wortsalat. */
.chlist {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--s2) var(--s4);
}
.chlist[hidden] { display: none; }
.chlist li {
  display: flex; align-items: center; gap: var(--s2);
  padding: 5px 8px 5px 6px;
  background: rgba(var(--ink-900-rgb), 0.92);
  border: 1px solid var(--ink-500);
  font: 500 var(--fs-0)/1 var(--f-mono);
  letter-spacing: var(--tr-wide); text-transform: uppercase;
  color: var(--brass-text);
}
.chlist li::before { content: ''; width: 4px; height: 4px; background: var(--brass); flex: 0 0 auto; }

/* Wenn WebGL ausfaellt oder der Nutzer weniger Bewegung will:
   Das Feld wird zu sechs ruhigen Blaettern untereinander. */
.act1.is-flat { height: auto; }
.act1.is-flat .act1-pin { position: static; height: auto; overflow: visible; }
.act1.is-flat .act1-canvas,
.act1.is-flat .act1-veil,
.act1.is-flat .act1-scrim,
.act1.is-flat .act1-stage,
.act1.is-flat .act1-count,
.act1.is-flat .act1-hud { display: none; }
.act1.is-flat .act1-ui { position: static; }
.act1.is-flat .ph {
  position: static; opacity: 1; transform: none !important; pointer-events: auto;
  width: auto; max-width: 62rem; text-align: left;
  padding: var(--pad-y) var(--pad-x);
  border-bottom: 1px solid var(--ink-600);
}
.act1.is-flat .ph-hero { padding-top: calc(var(--pad-y) + 3rem); }
.act1.is-flat .ph::before, .act1.is-flat .scrollhint { display: none; }

/* ============================================================
   AKT II – DAS PROTOKOLL
   Eine durchgehende senkrechte Haarlinie in Messing, links davon
   die Marge, rechts der Satz. Kein Kasten, kein Raster mit Rahmen,
   keine scroll-gebundene Bewegung.
   ============================================================ */
#protokoll { position: relative; max-width: var(--maxw); margin-inline: auto; }
/* Ziel des Sprunglinks, kein Bedienelement: ohne diese Zeile malt die
   globale Fokusregel einen Lime-Rahmen um die halbe Seite. */
#protokoll:focus { outline: none; }

#protokoll::before {
  content: ''; position: absolute; z-index: 0;
  left: calc(var(--pad-x) + var(--marg) + var(--gap) / 2);
  top: 0; bottom: 0; width: 1px;
  background: linear-gradient(180deg,
    transparent 0, var(--brass-dim) 6rem,
    var(--brass-dim) calc(100% - 6rem), transparent 100%);
  opacity: 0;
}
@media (min-width: 62rem) { #protokoll::before { opacity: 1; } }

.sec {
  position: relative; z-index: var(--z-base);
  display: grid; grid-template-columns: 1fr;
  gap: var(--s5);
  padding: var(--pad-y) var(--pad-x);
}
.sec + .sec { border-top: 1px solid var(--ink-600); }
/* Ankerziel unter der fixierten Kopfzeile: ohne diesen Rand landet die
   Schlagzeile hinter Logo und Navigation (Fassung I rechnet das in
   scrollToEl heraus; hier reicht die CSS-Eigenschaft, smooth steht am html). */
.sec[id] { scroll-margin-top: 5rem; }

.sec-mark {
  font: 500 var(--fs-0)/1.7 var(--f-mono);
  letter-spacing: var(--tr-wide); text-transform: uppercase;
  color: var(--brass-text);
}
.sec-mark span { color: var(--fog-dim); }

/* min-width: 0 – ein Rasterfeld ist sonst so breit wie sein breitester
   Inhalt (min-width: auto), und die Bahn der Musterblaetter ist
   14 500 px breit: bei 375 px stand die ganze Sektion so breit und die
   Seite lief 14 189 px ueber den Rand (gemessen 08.09.2026). */
.sec-body { min-width: 0; }
.sec-body > * + * { margin-top: var(--s6); }
.sec-body > .h-1 + .lead { margin-top: var(--s5); }

@media (min-width: 62rem) {
  .sec { grid-template-columns: var(--marg) minmax(0, 1fr); gap: 0 var(--gap); }
  .sec-mark { position: sticky; top: 7rem; align-self: start; }
  :root { --marg: 9rem; }
}

/* --- Kundenregister: eine Wand aus Namen, kein Kachelraster.
       Die Trennung machen Messing-Punkte, nicht Rahmen.
       DIE NAMEN MUESSEN IM QUELLTEXT DURCH ZEILENUMBRUECHE GETRENNT
       STEHEN. Ohne Leerraum zwischen den <span> gibt es zwischen
       zwei Namen keine Umbruchstelle – Raender und ::before-Inhalt
       schaffen keine –, und die Wand wird zu EINEM unteilbaren Wort:
       bei 375 px stand sie 470 px breit in einer 335 px breiten
       Spalte und trieb die ganze Sektion ueber den Rand. Der Punkt
       haengt an den Namen davor (geschuetztes Leerzeichen), die
       Umbruchstelle liefert der Leerraum aus dem Quelltext dahinter –
       so beginnt keine Zeile mit einem Trennpunkt. */
.wall { display: block; font-size: clamp(1.05rem, 0.9rem + 0.7vw, 1.6rem); line-height: 1.5; }
.wall span { color: var(--paper-dim); }
.wall span:not(:last-child)::after {
  content: '\00a0·'; color: var(--brass-dim); margin-right: 0.2em;
}

/* --- Umschalter. Er UMBRICHT am schmalen Fenster: zwei Reiter in
       Mono-Versalien mit 0,16 em Sperrung brauchen nebeneinander
       rund 400 px, in der 335-px-Spalte bei 375 px trieben sie die
       Sektion ueber den Rand. Dieselbe Falle wie .cmp-tabs in
       Fassung I – und ein waagrechter Scroll waere hier wieder die
       schlechtere Loesung: bei zwei Eintraegen versteckt er die
       halbe Navigation hinter einer Geste, die niemand vermutet. --- */
.switch { display: flex; flex-wrap: wrap; gap: 0; border-bottom: 1px solid var(--ink-600); }
.switch button {
  min-height: 46px; padding: 0 var(--s5) 0 0; margin-right: var(--s5);
  font: 500 var(--fs-1)/1 var(--f-mono);
  letter-spacing: var(--tr-wide); text-transform: uppercase;
  color: var(--fog-dim);
  position: relative;
  transition: color var(--t-2) var(--ease);
}
.switch button::after {
  content: ''; position: absolute; left: 0; right: var(--s5); bottom: -1px; height: 1px;
  background: var(--signal); transform: scaleX(0); transform-origin: 0 50%;
  transition: transform var(--t-2) var(--ease);
}
.switch button.is-on { color: var(--paper); }
.switch button.is-on::after { transform: scaleX(1); }
@media (hover: hover) { .switch button:hover { color: var(--paper-dim); } }
.switch button:active { color: var(--signal); }

/* --- Das Hauptbuch: drei Spalten, Haarlinie je Zeile --- */
.ledger[hidden] { display: none; }
.ledger-head, .ledger-row {
  display: grid; grid-template-columns: 10rem 1fr 1fr; gap: var(--gap);
  padding: var(--s4) 0;
  border-bottom: 1px solid var(--ink-600);
}
.ledger-head {
  font: 500 var(--fs-0)/1.4 var(--f-mono);
  letter-spacing: var(--tr-wide); text-transform: uppercase; color: var(--fog-dim);
  border-bottom-color: var(--ink-500);
}
.ledger-head span:last-child { color: var(--signal); }
.ledger-row > span:first-child {
  font: 500 var(--fs-1)/1.6 var(--f-mono);
  letter-spacing: var(--tr-mono); color: var(--brass-text);
}
.ledger-row > span:nth-child(2) { color: var(--fog-dim); }
.ledger-row > span:last-child { color: var(--paper); }

@media (max-width: 860px) {
  .ledger-head { display: none; }
  .ledger-row { grid-template-columns: 1fr; gap: var(--s2); padding: var(--s5) 0; }
  .ledger-row > span:nth-child(2)::before,
  .ledger-row > span:last-child::before {
    display: block;
    font: 500 var(--fs-0)/1.8 var(--f-mono);
    letter-spacing: var(--tr-wide); text-transform: uppercase;
  }
  .ledger-row > span:nth-child(2)::before { content: 'Aktiv · 10 %'; color: var(--fog-dim); }
  .ledger-row > span:last-child::before { content: 'Passiv · 70–80 %'; color: var(--signal); }
}

/* --- Die vier bisherigen Wege. Dieselbe Zeilenlogik wie das
       Hauptbuch, aber mit einem eigenen Schnitt: Nummer, Kanal mit
       Befund, Erklaerung. Der Befund steht in --fog-dim, nicht in
       --alert: das sind keine Risiken, sondern Wege, die nichts
       tragen. Alert bleibt der Insolvenz vorbehalten. --- */
.fails { border-top: 1px solid var(--ink-500); }
.fails li {
  display: grid; grid-template-columns: 3.5rem 16rem minmax(0, 1fr);
  gap: var(--s4) var(--gap); align-items: start;
  padding: var(--s6) 0;
  border-bottom: 1px solid var(--ink-600);
}
.fails-i {
  font: 500 var(--fs-1)/1.6 var(--f-mono);
  letter-spacing: var(--tr-mono); color: var(--brass-text);
}
.fails-v {
  margin-top: var(--s2);
  font: 500 var(--fs-0)/1 var(--f-mono);
  letter-spacing: var(--tr-wide); text-transform: uppercase; color: var(--fog-dim);
}
.fails li > p:last-child { color: var(--fog); max-width: 52ch; }
@media (max-width: 860px) {
  .fails li { grid-template-columns: 3rem minmax(0, 1fr); gap: var(--s3) var(--s4); }
  .fails li > p:last-child { grid-column: 2; }
}

/* --- Kennzahlen der Gruppe. Kein Kasten: eine Haarlinie oben,
       eine je Zelle unten. --- */
.figs {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0 var(--gap);
  border-top: 1px solid var(--ink-500);
}
.figs > div { padding: var(--s5) 0; border-bottom: 1px solid var(--ink-600); }
.figs dt {
  font: 500 var(--fs-0)/1.5 var(--f-mono);
  letter-spacing: var(--tr-wide); text-transform: uppercase; color: var(--fog-dim);
  margin-bottom: var(--s3);
  /* Zwei Zeilen Platz: „Jahre Expertise in der Gruppe" bricht um, und
     ohne diese Zeile stuende die 30 tiefer als die drei anderen. */
  min-height: 3em;
}
.figs dd {
  font: 600 clamp(1.7rem, 1rem + 2.2vw, 3rem)/1 var(--f-sans);
  letter-spacing: var(--tr-tight); color: var(--signal);
}
.figs dd i { font-style: normal; font-size: 0.5em; color: var(--fog); margin-left: 0.1em; }
@media (max-width: 860px) {
  .figs { grid-template-columns: 1fr 1fr; gap: 0 var(--s5); }
}

/* --- Standort. Die Karte laedt erst auf Knopfdruck; vorher steht
       hier eine Flaeche mit dem Hinweis, was beim Laden passiert. --- */
.place { display: grid; gap: var(--s6); }
@media (min-width: 62rem) {
  .place { grid-template-columns: 1.4fr 1fr; gap: var(--gap); align-items: start; }
}
.map {
  position: relative; min-height: 260px;
  border: 1px solid var(--ink-600);
  background:
    repeating-linear-gradient(0deg, transparent 0 23px, var(--ink-800) 23px 24px),
    repeating-linear-gradient(90deg, transparent 0 23px, var(--ink-800) 23px 24px),
    var(--ink-850);
}
.map iframe { width: 100%; height: 100%; min-height: 320px; border: 0; display: block; }
.map-ask {
  position: absolute; inset: 0;
  display: grid; align-content: center; justify-items: start; gap: var(--s5);
  padding: var(--s6);
}
.map-ask p { color: var(--fog); max-width: 34ch; font-size: var(--fs-3); }

/* --- Referenzen als Zeilen, nicht als Karten --- */
.cases { border-top: 1px solid var(--ink-500); }
.case {
  display: grid; gap: var(--s4);
  grid-template-columns: 10rem 12rem minmax(0, 1fr);
  align-items: start;
  padding: var(--s6) 0;
  border-bottom: 1px solid var(--ink-600);
}
.case-meta {
  font: 500 var(--fs-1)/1.7 var(--f-mono);
  letter-spacing: var(--tr-mono); color: var(--paper-dim);
}
.case-meta span { color: var(--fog-dim); }
.case-n {
  font: 600 clamp(1.9rem, 1.2rem + 2vw, 3.1rem)/0.95 var(--f-sans);
  letter-spacing: var(--tr-tight); color: var(--signal);
}
.case-n i {
  display: block; margin-top: var(--s3);
  font: 400 var(--fs-1)/1.5 var(--f-mono);
  letter-spacing: var(--tr-mono); color: var(--fog); font-style: normal;
}
.case-q {
  font-family: var(--f-serif); font-style: italic;
  font-size: clamp(1.15rem, 0.95rem + 0.8vw, 1.7rem);
  line-height: 1.35; color: var(--paper);
  text-indent: -0.42em;
}
.case-who {
  margin-top: var(--s4);
  font: 500 var(--fs-1)/1 var(--f-mono);
  letter-spacing: var(--tr-wide); text-transform: uppercase; color: var(--fog-dim);
}
@media (max-width: 860px) {
  .case { grid-template-columns: 1fr; gap: var(--s3); }
  .case-n { margin-top: var(--s2); }
}

/* --- Fahrplan --- */
.road { border-top: 1px solid var(--ink-500); }
.road li {
  display: grid; grid-template-columns: 10rem minmax(0, 1fr);
  gap: var(--s4) var(--gap);
  padding: var(--s6) 0;
  border-bottom: 1px solid var(--ink-600);
}
.road-i {
  grid-row: span 3;
  font: 500 clamp(1.6rem, 1.2rem + 1.2vw, 2.4rem)/1 var(--f-mono);
  letter-spacing: -0.03em; color: var(--brass);
}
.road-i span {
  display: block; margin-top: var(--s2);
  font-size: var(--fs-0); letter-spacing: var(--tr-wide);
  text-transform: uppercase; color: var(--fog-dim);
}
.road li p:not(.road-i):not(.road-r) { color: var(--fog); max-width: 54ch; }
.road-r {
  font: 400 var(--fs-1)/1.8 var(--f-mono);
  letter-spacing: var(--tr-mono); color: var(--paper-dim);
}
.road-r span {
  color: var(--brass-text); text-transform: uppercase;
  letter-spacing: var(--tr-wide); font-size: var(--fs-0);
  margin-right: var(--s2);
}
.road-r span + span { margin-left: var(--s5); }
@media (max-width: 860px) {
  .road li { grid-template-columns: 1fr; }
  .road-i { grid-row: auto; }
}

/* --- Produktion: vier Zeilen, vier Seiten --- */
.works { border-top: 1px solid var(--ink-500); }
.works a {
  display: grid; grid-template-columns: 4rem 1fr auto 1.5rem; align-items: baseline;
  gap: var(--s4);
  padding: var(--s5) 0;
  border-bottom: 1px solid var(--ink-600);
  transition: color var(--t-2) var(--ease);
}
.works b {
  font: 500 var(--fs-1)/1 var(--f-mono);
  letter-spacing: var(--tr-mono); color: var(--brass-text);
}
.works span { font-size: clamp(1.2rem, 1rem + 1vw, 2rem); font-weight: 600; letter-spacing: var(--tr-tight); }
.works i {
  font: 400 var(--fs-1)/1.5 var(--f-mono);
  letter-spacing: var(--tr-mono); color: var(--fog-dim); text-align: right;
}
.works a::after { content: '↗'; color: var(--signal); font-size: var(--fs-2); text-align: right; }
@media (hover: hover) { .works a:hover { color: var(--signal); } }
.works a:active { color: var(--signal-lit); }
@media (max-width: 620px) {
  .works a { grid-template-columns: 3rem 1fr 1.5rem; }
  .works i { grid-column: 2; text-align: left; }
}

/* --- Kontakt --- */
.sec-end .h-0 { color: var(--paper); }
.spec { display: grid; gap: var(--s4); max-width: 44rem; }
.spec > div { display: grid; grid-template-columns: 4.5rem 1fr; gap: var(--s4); align-items: baseline; }
.spec dt {
  font: 500 var(--fs-0)/1.8 var(--f-mono);
  letter-spacing: var(--tr-wide); text-transform: uppercase; color: var(--brass-text);
}
.spec dd { color: var(--paper-dim); }
/* Telefon und Mail sind am Telefon die zwei wichtigsten Ziele der
   Seite – sie bekommen ihre 44 px, auch wenn die Zeile dadurch
   waechst. */
.spec dd a { position: relative; display: inline-flex; align-items: center; min-height: 44px; }
.spec dd a::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: calc(50% - 0.85em); height: 1px;
  background: currentColor; transform: scaleX(0); transform-origin: 0 50%;
  transition: transform var(--t-2) var(--ease);
}
@media (hover: hover) { .spec dd a:hover::after { transform: scaleX(1); } }

/* ---------- 5. FUSS ---------- */
.foot { border-top: 1px solid var(--ink-600); background: var(--ink-850); }
.foot-in {
  max-width: var(--maxw); margin-inline: auto;
  padding: var(--s9) var(--pad-x) calc(var(--s9) + 72px);
  display: grid; gap: var(--s7);
}
.foot-claim { font-size: var(--fs-5); color: var(--paper-dim); max-width: 40ch; }
.foot-nav { display: flex; flex-wrap: wrap; gap: var(--s6); }
.foot-nav a, .foot-legal a, .foot-legal button {
  position: relative;
  display: inline-flex; align-items: center; min-height: 44px;
  font: 400 var(--fs-1)/1 var(--f-mono);
  letter-spacing: var(--tr-wide); text-transform: uppercase; color: var(--fog);
  transition: color var(--t-2) var(--ease);
}
.foot-nav a::after, .foot-legal a::after, .foot-legal button::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: calc(50% - 0.85em); height: 1px;
  background: var(--brass); transform: scaleX(0); transform-origin: 0 50%;
  transition: transform var(--t-2) var(--ease);
}
@media (hover: hover) {
  .foot-nav a:hover, .foot-legal a:hover, .foot-legal button:hover { color: var(--paper); }
  .foot-nav a:hover::after, .foot-legal a:hover::after,
  .foot-legal button:hover::after { transform: scaleX(1); }
}
.foot-legal {
  display: flex; flex-wrap: wrap; gap: var(--s5);
  padding-top: var(--s5); border-top: 1px solid var(--ink-600);
}
.foot-legal span {
  display: inline-flex; align-items: center; min-height: 44px;
  font: 400 var(--fs-1)/1 var(--f-mono);
  letter-spacing: var(--tr-mono); color: var(--fog-dim);
}
@media (min-width: 62rem) {
  .foot-in { padding-bottom: var(--s9); grid-template-columns: 1fr 1fr; }
  .foot-legal { grid-column: 1 / -1; }
  .foot-nav { justify-content: flex-end; }
}

/* ---------- 6. EINWILLIGUNG ----------
   Eine Leiste am Fuss, kein Kasten in der Mitte: sie nimmt der Seite
   nichts weg und laesst sich lesen, ohne dass man sie wegklicken
   muss. Solange sie offen ist, bleibt die mobile CTA-Leiste weg –
   zwei feste Schichten uebereinander sind am Telefon ein Viertel des
   Bildschirms. */
.ck {
  position: fixed; inset: auto 0 0 0; z-index: var(--z-bar);
  background: rgba(var(--ink-900-rgb), 0.97);
  -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
  border-top: 1px solid var(--ink-500);
}
.ck[hidden] { display: none; }
.ck-in {
  max-width: var(--maxw); margin-inline: auto;
  padding: var(--s5) var(--pad-x) calc(var(--s5) + env(safe-area-inset-bottom));
  display: grid; gap: var(--s4);
}
@media (min-width: 62rem) {
  .ck-in { grid-template-columns: minmax(0, 1fr) auto; align-items: center; }
  .ck-panel { grid-column: 1 / -1; }
}
.ck-p { font-size: var(--fs-2); color: var(--fog); max-width: 74ch; margin-top: var(--s2); }
.ck-p a { color: var(--paper-dim); text-decoration: underline; text-underline-offset: 3px; }
.ck-act { display: flex; flex-wrap: wrap; gap: var(--s3); align-items: center; }
.ck-act .btn { min-height: 46px; padding: 0 var(--s5); }
.ck-more {
  min-height: 46px; padding: 0 var(--s3);
  font: 500 var(--fs-1)/1 var(--f-mono);
  letter-spacing: var(--tr-wide); text-transform: uppercase; color: var(--fog);
  transition: color var(--t-2) var(--ease);
}
@media (hover: hover) { .ck-more:hover { color: var(--paper); } }
.ck-panel { display: grid; gap: var(--s4); padding-top: var(--s4); border-top: 1px solid var(--ink-600); }
.ck-panel[hidden] { display: none; }
.ck-row {
  display: grid; grid-template-columns: 1.9rem minmax(0, 1fr);
  min-height: 44px;
  gap: var(--s2) var(--s3); align-items: start;
  font-size: var(--fs-2); color: var(--fog);
}
.ck-row b {
  grid-column: 2; color: var(--paper-dim); font-weight: 600;
  font: 500 var(--fs-1)/1.4 var(--f-mono);
  letter-spacing: var(--tr-wide); text-transform: uppercase;
}
.ck-row span { grid-column: 2; }
.ck-row.is-opt { cursor: pointer; }
.ck-row input { grid-row: span 2; width: 22px; height: 22px; accent-color: var(--signal); margin: 2px 0 0; }
.ck-panel .btn { justify-self: start; min-height: 46px; padding: 0 var(--s5); }
html.has-ck .mobbar { display: none; }

/* ---------- 7. LEISTE AM TELEFON ---------- */
.mobbar {
  position: fixed; inset: auto 0 0 0; z-index: var(--z-bar);
  display: grid; grid-template-columns: 1fr 1.6fr;
  border-top: 1px solid var(--ink-600);
  background: rgba(var(--ink-900-rgb), 0.94);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  padding-bottom: env(safe-area-inset-bottom);
}
.mobbar a {
  display: flex; align-items: center; justify-content: center;
  min-height: 56px;
  font: 500 var(--fs-1)/1 var(--f-mono);
  letter-spacing: var(--tr-wide); text-transform: uppercase;
  color: var(--paper);
}
.mobbar a:first-child { border-right: 1px solid var(--ink-600); }
.mobbar-cta { background: var(--signal); color: var(--ink-900) !important; }
.mobbar a:active { background: var(--ink-800); }
.mobbar-cta:active { background: var(--signal-lit) !important; }
@media (min-width: 901px) { .mobbar { display: none; } }
@media (max-width: 900px) {
  .ph-hero, .ph-sit, .ph-markt, .ph-markt2 { bottom: calc(56px + 8vh); }
  .act1-count { bottom: calc(56px + 16vh); }
  .act1-hud { bottom: calc(56px + 3vh); }
}

/* ---------- 8. SCHMALE FENSTER ---------- */
@media (max-width: 860px) {
  /* Am schmalen Fenster steht JEDE Ablesung unten und ueber die volle
     Breite – die seitlichen Schleier haben dort nichts mehr abzudecken
     und wuerden nur das Feld verschlucken. Stattdessen traegt der
     senkrechte Schleier die untere Haelfte. Ohne das lag „Sie kaempfen
     um weniger als 10 %" bei 620 px mitten in der Punktwolke. */
  .act1-scrim { display: none; }
  .act1-veil {
    background: var(--vignette), linear-gradient(180deg,
      rgba(var(--ink-900-rgb), 0.94) 0%,
      rgba(var(--ink-900-rgb), 0.34) 12%,
      rgba(var(--ink-900-rgb), 0) 26%,
      rgba(var(--ink-900-rgb), 0) 40%,
      rgba(var(--ink-900-rgb), 0.62) 58%,
      rgba(var(--ink-900-rgb), 0.90) 78%,
      rgba(var(--ink-900-rgb), 0.96) 100%);
  }
  .ph { left: var(--pad-x) !important; right: var(--pad-x) !important; width: auto !important; text-align: left !important; }
  .ph-zulauf, .ph-sieb, .ph-reg { top: auto; bottom: calc(56px + 8vh); }
  .ph-erg { bottom: calc(56px + 8vh); }
  /* Der Zaehler steht am schmalen Fenster OBEN. Unten liegt die
     Ablesung, und beide zusammen ergaben dort einen Wortstapel:
     „103" lag mitten in „Drei Siebe". */
  .act1-count { top: 13vh; bottom: auto; }
  .act1-count b { font-size: clamp(2.2rem, 1.2rem + 3.4vw, 3.4rem); }
  .kpi { grid-template-columns: 1fr; gap: var(--s4); }
  .kpi > div { display: grid; grid-template-columns: 1fr auto; align-items: baseline; gap: var(--s4);
               border-bottom: 1px solid var(--ink-600); padding-bottom: var(--s2); }
  .kpi dt { margin-bottom: 0; }
  .act1-hud { display: none; }
  .sym li { grid-template-columns: 2.2rem 1fr; gap: var(--s3); padding: var(--s3) 0; font-size: var(--fs-3); }
}

/* ---------- 9. EINBLENDUNG (Akt II, EINMALIG) ----------
   Akt II hat bewusst KEINE scroll-gebundene Bewegung. Das hier ist
   eine einmalige Einblendung beim Eintritt, sonst nichts. --rp
   endet bei 1 – wer einblendet, muss bei 1 enden, sonst frisst die
   Deckkraft dauerhaft Kontrast. */
.rv { --rp: 0; opacity: var(--rp); transform: translateY(calc((1 - var(--rp)) * 10px)); }
.rv.is-in { --rp: 1; transition: opacity var(--t-4) var(--ease), transform var(--t-4) var(--ease); }

/* ---------- 10. DIE LAGE – DAS INSOLVENZ-DIAGRAMM ----------
   „Der Schreiber" aus Fassung I (Geometrie aus tools/build_chart.py dort,
   SVG in index.html erzeugt): ein Messkopf faehrt von 2019 nach 2025, in
   seinem Nachlauf entstehen die Spuren. Jede Spur ist in sechs Abschnitte
   geteilt, einen je Jahresintervall: ein einziger Pfad mit
   stroke-dashoffset liefe ueber die BOGENLAENGE, und bei unterschiedlich
   steilen Abschnitten liefe die Spurspitze dem Messkopf sichtbar davon.

   ANDERS ALS IN FASSUNG I HAENGT --p HIER NICHT AM SCROLL. Akt II bewegt
   sich nicht mit dem Scroll; der Schreiber laeuft deshalb EINMAL, wenn
   das Diagramm ins Bild kommt (initReveal setzt is-in), ueber eine
   Transition der registrierten Eigenschaft --p (2,6 s, linear – ein
   Messkopf beschleunigt nicht). Danach steht alles. Ohne @property
   springt --p auf 1: das Diagramm steht fertig da, nichts fehlt. Keine
   Dauerbewegung; bewegt werden nur transform, opacity und
   stroke-dashoffset. --alert nur hier – Insolvenzen sind das Risiko. */
@property --p { syntax: '<number>'; inherits: true; initial-value: 0; }
.chart-frame { --p: 0; position: relative; padding-top: var(--s2); }
.chart-frame.is-in {
  --p: 1;
  transition: opacity var(--t-4) var(--ease), transform var(--t-4) var(--ease), --p 2.6s linear 0.25s;
}
.chart-title {
  font: 400 var(--fs-2)/1.5 var(--f-mono); letter-spacing: var(--tr-mono);
  color: var(--paper-dim); margin-bottom: var(--s5);
}
.chart-svg { width: 100%; height: auto; overflow: visible; }
.chart-svg * { --lp: clamp(0, (var(--p) - var(--a, 0)) * var(--k, 1), 1); }
/* KEIN vector-effect: non-scaling-stroke hier. Das rechnet das Strichmuster
   im Bildschirmraum und hebelt die pathLength="1"-Normierung aus – Teile
   noch nicht gezeichneter Abschnitte wurden sichtbar. */
.chart-svg path { fill: none; }
/* Position des Messkopfs. Dieselbe Rechnung wie T_REC im Generator (0,08
   bis 0,86) – wer eine der beiden Zahlen aendert, muss die andere mitziehen. */
.chart-frame { --rec: clamp(0, (var(--p) - 0.08) * 1.282, 1); }

/* ---- Papier ---- */
.chart-grid path { stroke: var(--ink-600); stroke-width: 1; stroke-dasharray: 1; stroke-dashoffset: calc(1 - var(--lp)); }
.chart-grid .is-zero { stroke: var(--ink-500); }
.chart-threshold path { stroke: var(--brass); stroke-width: 1; stroke-dasharray: 3 4; opacity: calc(var(--lp) * 0.55); }
.chart-threshold text {
  font-family: var(--f-mono); font-size: 13px; letter-spacing: var(--tr-wide);
  fill: var(--brass); opacity: calc(var(--lp) * 0.9);
}

/* ---- Achsen ---- */
.chart-axis text { font-family: var(--f-mono); font-size: 15px; fill: var(--fog-dim); letter-spacing: var(--tr-mono); opacity: var(--lp); }
.chart-axis .chart-x { fill: var(--paper-dim); }
.chart-lab { font-family: var(--f-mono); font-size: 17px; letter-spacing: var(--tr-mono); opacity: var(--lp); }
.chart-lab.is-lead { fill: var(--alert); }
.chart-lab.is-mid  { fill: var(--brass); }
.chart-lab.is-low  { fill: var(--fog); }
.chart-lab.is-short { display: none; }
.chart-tick { stroke: var(--brass); stroke-width: 1; stroke-dasharray: 1; stroke-dashoffset: calc(1 - var(--lp)); }

/* ---- Spuren ---- */
.chart-series path { stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: calc(1 - var(--lp)); }
.chart-trace.is-lead path { stroke: var(--alert); stroke-width: 2.2; }
.chart-trace.is-mid path  { stroke: var(--brass); stroke-width: 1.6; }
.chart-trace.is-low path  { stroke: var(--fog-dim); stroke-width: 1.4; }

/* Messpunkte: Quadrate wie Klemmen im Schaltbild, keine Kreise. */
.chart-dot {
  cursor: pointer; fill: var(--ink-900); stroke-width: 1.4; opacity: var(--lp);
  transform-box: fill-box; transform-origin: 50% 50%;
  transform: scale(calc(0.4 + var(--lp) * 0.6));
  transition: stroke-width var(--t-1) var(--ease);
}
.chart-dot.is-lead { stroke: var(--alert); }
.chart-dot.is-mid  { stroke: var(--brass); }
.chart-dot.is-low  { stroke: var(--fog-dim); }
.chart-frame.is-picked .chart-dot[data-picked] { stroke-width: 3; }

/* ---- Messkopf. 786 = X1 − X0 aus tools/build_chart.py (852 − 66). ---- */
.chart-head { transform: translateX(calc(var(--rec) * 786px)); }
.chart-head-line { stroke: var(--paper); stroke-width: 1; opacity: calc(var(--rec) * (1 - var(--rec)) * 3.2 + 0.12); }
.chart-head-tick { fill: var(--brass); stroke: none; opacity: calc(var(--rec) * (1 - var(--rec)) * 3.2 + 0.12); }

/* ---- Schlussablesung ---- */
.chart-final path { stroke: var(--alert); stroke-width: 1; stroke-dasharray: 1; stroke-dashoffset: calc(1 - var(--lp)); }
.chart-final text { font-family: var(--f-mono); font-size: 13px; letter-spacing: var(--tr-mono); fill: var(--alert); opacity: var(--lp); }

.chart-dot-hit { fill: transparent; cursor: pointer; }
.chart-dot-hit:focus-visible { outline: none; stroke: var(--signal); stroke-width: 1; }

@media (max-width: 760px) {
  .chart-axis text { font-size: 26px; }
  .chart-lab { font-size: 27px; }
  .chart-final text { font-size: 28px; }
  .chart-trace.is-lead path { stroke-width: 4.5; }
  .chart-trace.is-mid path  { stroke-width: 3.2; }
  .chart-trace.is-low path  { stroke-width: 2.4; }
  .chart-axis .chart-x.is-minor { display: none; }
  .chart-lab.is-long { display: none; }
  .chart-lab.is-short { display: block; }
  .chart-threshold text { display: none; }
}
@media (max-width: 619px) {
  .chart-axis text { font-size: 33px; }
  .chart-final text { font-size: 33px; }
  .chart-axis .chart-y { display: none; }
  .chart-lab { font-size: 33px; }
}

.chart-note { font: 400 var(--fs-1)/1.6 var(--f-mono); color: var(--fog-dim); }

/* ---- Ablesefeld: Haarlinien-Zeilen im .spec-Muster, kein Kasten.
        Lime nur auf den Werten – sie sind gemessen. ---- */
.chart-read { display: grid; max-width: 44rem; border-top: 1px solid var(--ink-500); }
.chart-read > div {
  display: grid; grid-template-columns: 9rem 1fr; gap: var(--s4); align-items: baseline;
  padding: var(--s3) 0; border-bottom: 1px solid var(--ink-600);
}
.chart-read dt {
  font: 500 var(--fs-0)/1.8 var(--f-mono);
  letter-spacing: var(--tr-wide); text-transform: uppercase; color: var(--brass-text);
}
.chart-read dd { color: var(--paper-dim); }
.chart-read dd b { font-family: var(--f-mono); font-weight: 500; font-variant-numeric: tabular-nums; color: var(--signal); }
.chart-read .is-year dt { color: var(--paper); }
.chart-read .is-year dd { font: 400 var(--fs-1)/1.6 var(--f-mono); letter-spacing: var(--tr-mono); color: var(--fog); }
.chart-read .is-case dd { font-size: var(--fs-2); color: var(--fog); }
@media (max-width: 619px) {
  .chart-read > div { grid-template-columns: 1fr; gap: var(--s1); }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: 0.01ms !important; }
  .rv { --rp: 1; }
  .chart-frame { --p: 1 !important; }
}