/* ══════════════════════════════════════════════════════════════════════════
   QS-ONE INVESTORENHUB — KOMPONENTEN                                15.09.2026
   software-designer · setzt auf tokens.css auf, ohne diese Datei ist alles
   hier ungestylt (keine Farben/Größen doppelt definiert).

   AUFBAU DIESER DATEI:
     1. Grundschicht (Reset, Body, Überschriften, Wrap/Spalten)
     2. Stufen-Modus (.stufe1 / .stufe2) — schaltet Dichte-Variablen um
     3. Eine Klasse pro Bauteil aus dem Auftrag, in der Reihenfolge des Auftrags
     4. Druckregeln

   ZWEI GESTEN (Florian, 15.09., wörtlich: „Stufe 1 = Pitch, Stufe 2 =
   Erklärung wie bei FinPrep"):
     .stufe1  — bühnenhaft: große Leitsätze, viel Luft, kurze Kapitel.
                Dunkler Bühnengrund für den Titelbereich, helle Kapitel danach.
     .stufe2  — ruhiges, dichtes Lesedokument im Kommentarsatz-Stil:
                Randziffern, längere Fließtexte, Tabellen, „Klartext" je Kapitel.
   Beide benutzen DIESELBEN Bauteile (Kapitelkopf, Leitsatz, Kennzahl, …) —
   der Unterschied liegt in Abstand/Maß/Größe, nicht in neuen Farben oder
   einem zweiten Komponenten-Satz. Das ist die sichtbare Zusammengehörigkeit,
   um die Florian gebeten hat.
   ══════════════════════════════════════════════════════════════════════════ */

/* ─────────────────────────── 1 · Grundschicht ─────────────────────────── */
*{box-sizing:border-box}
html{scroll-behavior:smooth}
/* 16.09. abends, Florian am Bildschirm: „Schrift verbreitern … also den
   Text" — am Live-Hub gemessen 14px/23,8px Zeilenhöhe, 342px/601px/601px
   Spaltenbreite bei 390/1440/2560px (~41/71/71 Zeichen). QUELLE hier stand
   bereits auf --f-body:17px (siehe tokens.css) — das Live-Bild lag also
   HINTER diesem Stand (kein neuer Bau seit der letzten Anhebung, siehe
   Übergabe an den Entwickler). `line-height` bleibt bewusst RELATIV (1.65
   default, 1.7/1.75 je Stufe in Abschnitt 2 unten) statt eines festen
   Pixelwerts — sie zieht dadurch automatisch mit jeder künftigen Änderung
   von --f-body mit, ohne dass diese Regel angefasst werden muss.
   Zeilenlänge (Zeichen/Zeile): `--mass-lese` ist bewusst in `ch` notiert
   (Abschnitt 1 unten, `.lese-spalte`) — ch skaliert nativ mit der
   Schriftgröße, die ZEICHENZAHL bleibt also beim Anheben von --f-body
   praktisch UNVERÄNDERT (68ch bleiben ~68 Zeichen, ob bei 14 oder 17px),
   nur die Pixelbreite der Spalte wächst mit. Gerechnet mit dem aus Florians
   eigener Messung abgeleiteten Verhältnis 1ch ≈ 0,63 × Schriftgröße
   (601px ÷ 68ch ÷ 14px), NICHT geschätzt: bei 17px und 24px Seitenrand
   (`.seite{padding:0 24px}`, macht 48px beidseitig) ergibt das
     390px  → Spalte 342px (390−48, deckt sich exakt mit Florians Messwert) → ~32 Zeichen
              (unter 60–75: unvermeidlich bei 390px Breite UND ≥16px Schrift,
              kein Fehler — eine 60-Zeichen-Spalte bräuchte hier ~540px, mehr
              als der Bildschirm hat)
     768px  → Spalte 720px (768−48, noch unter dem ch-Deckel) → ~67 Zeichen ✓
     1440px → Spalte ~729px (68ch-Deckel greift, wächst nicht weiter) → ~68 Zeichen ✓
     2560px → wie 1440px, derselbe Deckel → ~68 Zeichen ✓ (bleibt bewusst so
              schmal wie bei 1440px, kein Auseinanderziehen auf großen
              Monitoren — das war schon vor dieser Änderung der Sinn von
              `--mass-lese` in ch statt %/vw). */
body{
  margin:0; background:var(--flaeche-tief); color:var(--ink);
  font-family:var(--font-text); font-size:var(--f-body); line-height:1.65;
  -webkit-font-smoothing:antialiased; overflow-wrap:break-word;
}
img,svg{max-width:100%}
h1,h2,h3{font-family:var(--font-anzeige); line-height:1.15; letter-spacing:-.015em; margin:0}
/* h3 (Markdown „###" im Kapiteltext) hatte bisher KEINE explizite Größe -
   nur h1/h2 wurden anderswo mit --f-h1/--f-h2 belegt, h3 fiel auf die
   Browser-Vorgabe zurück (zufällig nahe --f-h3, aber ungenau/instabil).
   16.09. abends nachgetragen, damit der Token wirklich greift und mit
   --f-body mitgezogen werden kann, nicht nur im Kommentar existiert. */
h3{font-size:var(--f-h3)}
p{margin:0}
a{color:var(--tiefgruen)}
a:focus-visible,button:focus-visible{outline:3px solid var(--tiefgruen); outline-offset:3px; border-radius:6px}
.dunkel a:focus-visible,.dunkel button:focus-visible{outline-color:var(--frischgruen)}
::selection{background:var(--frischgruen); color:var(--navy)}

.seite{max-width:var(--breite-inhalt); margin:0 auto; padding:0 24px}
.lese-spalte{max-width:var(--mass-lese, 66ch); margin:0 auto}

/* 16.09., Korrektur nach Live-Skalierungsmessung: `.sprung` (Sprungmarke
   „Zum Inhalt springen" o. ä.) fehlte hier bisher als eigene Regel — sie
   war offenbar mit der veralteten `left:-9999px`-Technik eingebaut, die
   auf dem Handy zur horizontalen Scrollbarkeit der ganzen Seite beitrug
   (eine weit im Negativen positionierte Box zählt in manchen Browsern
   trotzdem zur `scrollWidth` des Dokuments). Jetzt die übliche „visuell
   verborgen bis Fokus"-Technik: die Box ist im Ruhezustand nur 1×1px groß
   und per `clip-path` zugeschnitten (bleibt also IM normalen Fluss, kein
   Offset ins Negative), erst beim Fokus wird sie sichtbar groß. */
.sprung{
  position:absolute; top:0; left:0; z-index:80;
  width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap;
  background:var(--flaeche); color:var(--tiefgruen); text-decoration:none;
  font-family:var(--font-anzeige); font-weight:700; font-size:15px;
}
.sprung:focus{
  width:auto; height:auto; overflow:visible; clip-path:none; white-space:normal;
  padding:12px 20px; border-radius:var(--r-sm); box-shadow:var(--schatten-karte);
}

/* Ein Kapitel ist die wiederkehrende Grundeinheit beider Stufen. Der Abstand
   kommt aus der Dichte-Variable, damit Stufe 1 „viel Luft" bekommt und
   Stufe 2 dicht bleibt, ohne zwei Klassensätze zu brauchen. */
.kapitel{padding:var(--kapitel-abstand) 0}
.kapitel[id]{scroll-margin-top:96px}
.kapitel + .kapitel{border-top:1px solid var(--line)}

.eyebrow{
  display:inline-block; font-family:var(--font-mono); font-size:var(--f-micro);
  font-weight:600; letter-spacing:.16em; text-transform:uppercase;
  color:var(--tiefgruen); margin-bottom:var(--sp-3);
}

/* ─────────────────────── 2 · Stufen-Modus (Dichte) ─────────────────────── */
.stufe1{
  --kapitel-abstand:132px;
  --mass-lese:60ch;
  --leitsatz-groesse:clamp(28px,4.4vw,46px);
}
/* :where() haelt die Spezifitaet bei (0,1,0) — sonst schluege dieses
   Kontext-Kompositum jede Utility-Klasse wie `.lead`/`.muted`, die zusammen
   MIT `.text` auf demselben Absatz steht (z. B. class="text lead"). */
:where(.stufe1) .text{font-size:calc(var(--f-body) + 1px); line-height:1.75}
.stufe1 .kapitel-kopf{margin-bottom:var(--sp-8)}

.stufe2{
  --kapitel-abstand:80px;
  --mass-lese:68ch;
  --leitsatz-groesse:clamp(20px,2.6vw,26px);
}
:where(.stufe2) .text{font-size:var(--f-body); line-height:1.7}
.stufe2 .kapitel-kopf{margin-bottom:var(--sp-6)}

/* ─────────────────────── 3.1 · Stufen-Kennzeichnung ─────────────────────── */
.stufenmarke{
  display:inline-flex; align-items:center; gap:var(--sp-2);
  font-family:var(--font-mono); font-size:var(--f-micro); font-weight:700;
  letter-spacing:.16em; text-transform:uppercase; padding:7px 16px;
  border-radius:var(--r-btn); line-height:1;
}
.stufenmarke .punkt{width:7px; height:7px; border-radius:50%; flex:none}
.stufenmarke.s1{background:var(--frischgruen); color:var(--navy)}    /* 14,2:1 */
.stufenmarke.s1 .punkt{background:var(--navy)}
.stufenmarke.s2{background:#fff; color:var(--tiefgruen); border:1.5px solid var(--tiefgruen)}
.stufenmarke.s2 .punkt{background:var(--tiefgruen)}
.dunkel .stufenmarke.s2{background:transparent; color:var(--frischgruen); border-color:var(--frischgruen)}
.dunkel .stufenmarke.s2 .punkt{background:var(--frischgruen)}

/* ───────────────────── 3.2 · Titelbereich Stufe 1 („der Traum") ─────────────────────
   Bühnenhaft: volle Breite, Navy-Grund, ein einziger großer Satz, viel Luft.
   Die Geisterziffer im Hintergrund zitiert die Kapitelmarken (siehe 3.3) —
   der Hub liest sich von der ersten Sekunde an wie ein nummeriertes Dokument,
   nicht wie eine Werbefläche. */
.traum-titel{
  position:relative; overflow:hidden; background:var(--navy); color:#fff;
  padding:var(--sp-9) 0; text-align:center;
}
.traum-titel::before{
  /* sehr zurückhaltendes Bühnenlicht — reine Fläche, kein Foto, kein Icon */
  content:""; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(720px 420px at 50% -10%, rgba(179,255,181,.14), transparent 62%);
}
.traum-titel .innen{position:relative; max-width:var(--breite-buehne); margin:0 auto; padding:0 24px}
.traum-titel .stufenmarke{margin-bottom:var(--sp-6)}
.traum-titel .satz{
  font-family:var(--font-anzeige); font-weight:800; font-size:var(--f-traum);
  line-height:1.12; letter-spacing:-.02em; margin:0;
}
.traum-titel .satz em{font-style:normal; color:var(--frischgruen)}
.traum-titel .unter{
  margin-top:var(--sp-6); font-size:var(--f-lead); color:rgba(255,255,255,.82);
  max-width:52ch; margin-inline:auto;
}
@media(max-width:640px){ .traum-titel{padding:var(--sp-8) 0} }

/* ───────────────────────── 3.3 · Kapitelkopf mit Nummer ─────────────────────────
   Die „Kommentarsatz"-Anmutung, die Florian an der FinPrep-Hülle gefallen
   hat — hier mit QS-One-Farben statt Navy/Messing: eine große Geisterziffer
   links, Kicker + Titel rechts, eine dünne Linie darunter. */
.kapitel-kopf{
  display:grid; grid-template-columns:auto 1fr; gap:var(--sp-4) var(--sp-6);
  align-items:end; padding-bottom:var(--sp-5); border-bottom:1.5px solid var(--line);
}
.kapitel-kopf .nr{
  font-family:var(--font-anzeige); font-weight:800; font-variant-numeric:tabular-nums;
  font-size:var(--f-nr-geist); line-height:.82;
  color:var(--frischgruen); -webkit-text-stroke:1.5px var(--tiefgruen);
}
@supports not (-webkit-text-stroke:1px black){
  .kapitel-kopf .nr{color:var(--tiefgruen)}
}
.kapitel-kopf .titel-block h2{font-size:var(--f-h2); color:var(--navy)}
.kapitel-kopf .titel-block .eyebrow{margin-bottom:var(--sp-2)}
@media(max-width:520px){
  .kapitel-kopf{grid-template-columns:1fr; gap:var(--sp-2)}
  .kapitel-kopf .nr{font-size:clamp(30px,10vw,44px)}
}

/* ───────────────────────────── 3.4 · Fließtext ───────────────────────────── */
.text{font-family:var(--font-text); color:var(--ink); max-width:var(--mass-lese)}
.text.muted{color:var(--muted)}
.text + .text{margin-top:var(--sp-4)}
/* 16.09.: der Lead klebte am ersten Fließtext-Absatz. Ursache: er steht im
   Markup als letztes Kind der EINLEITENDEN `.lese-spalte` (mit Kapitelkopf),
   der erste `.text`-Absatz aber als erstes Kind der NÄCHSTEN `.lese-spalte`
   — beide sind keine CSS-Geschwister, `.text + .text` griff also nie. Fix:
   `margin-bottom` direkt am Lead, escaped durch die randlose `.lese-spalte`
   nach außen (keine Border/Padding dort, die das verhindern würde). */
.lead{font-size:var(--f-lead); color:var(--muted); max-width:56ch; margin-bottom:1em}

/* ─────────────────────────── 3.5 · Zitat / Leitsatz ─────────────────────────── */
.leitsatz{
  font-family:var(--font-anzeige); font-weight:700; font-size:var(--leitsatz-groesse);
  line-height:1.28; letter-spacing:-.012em; color:var(--navy); max-width:28ch;
  border-left:3px solid var(--orange); padding-left:var(--sp-5); margin:var(--sp-7) 0;
}
.leitsatz cite{
  display:block; margin-top:var(--sp-3); font-style:normal;
  font-family:var(--font-text); font-weight:600; font-size:var(--f-small); color:var(--muted);
}
.dunkel .leitsatz{color:#fff}

/* ─────────────────────── 3.6 · Kennzahl-Kachel (Stufe 2) ─────────────────────── */
/* 16.09., Korrektur nach Screenshot-Prüfung: die Einheit brach mitten im Wort
   um („00,0 Mi / o €"). Grund: Einheit lag INLINE hinter der Zahl in derselben
   Zeile. Jetzt zwingend zweizeilig — die Einheit ist ein eigener Block unter
   der Zahl, kann also nie mehr innerhalb eines Wortes umbrechen. Zusätzlich
   `minmax` von 180px auf 220px angehoben, damit eine Kachel nie schmaler wird,
   als eine lange Einheit („Betriebe") in einer Zeile braucht. */
.kennzahlen{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:var(--sp-4); margin:var(--sp-6) auto;
  max-width:var(--breite-daten);
}
.kennzahl{
  background:var(--flaeche); border:1.5px solid var(--line); border-radius:var(--r-card);
  padding:var(--sp-5) var(--sp-5); box-shadow:var(--schatten-karte); min-width:0;
}
.kennzahl .zahl{
  display:block; font-family:var(--font-anzeige); font-weight:800; color:var(--tiefgruen);
  font-size:var(--f-zahl); line-height:1; font-variant-numeric:tabular-nums lining-nums;
  white-space:nowrap;
}
.kennzahl .zahl .einheit{
  display:block; white-space:nowrap; font-size:.34em; font-weight:700; letter-spacing:.05em;
  text-transform:uppercase; margin-top:8px; color:var(--muted);
}
.kennzahl .label{display:block; margin-top:var(--sp-2); font-size:var(--f-small); font-weight:700; color:var(--ink)}
.kennzahl .kontext{display:block; margin-top:var(--sp-1); font-size:13px; color:var(--muted)}
.kennzahl .delta{
  display:inline-flex; align-items:center; gap:4px; margin-top:var(--sp-2);
  font-size:12.5px; font-weight:700; padding:3px 9px; border-radius:var(--r-btn);
}
.kennzahl .delta.auf{background:var(--hellorange); color:#7A4B00}
.kennzahl .delta.ab{background:#F3D9D6; color:#7A2A20}

/* ─────────────────── 3.7 · Jahrestabelle 2026–2031 ───────────────────
   16.09., Korrektur: die Spalte 2031 wirkte am Laptop abgeschnitten, weil der
   Tisch bis dahin in `.lese-spalte` (~66ch ≈ 700px) eingesperrt war und die
   Scrollbarkeit dort nicht auffiel. Jetzt `max-width:var(--breite-daten)`
   (960px) UND außerhalb von `.lese-spalte` platziert (Markup-Pflicht beim
   Einbau, siehe DESIGN.md) — bei 960px passen alle sieben Spalten ohne
   Scrollen; `.tabelle-scroll` bleibt als Sicherheitsnetz für schmalere
   Bildschirme (`min-width:640px` auf der Tabelle erzwingt dort das Scrollen
   statt eines Zusammenquetschens). */
.tabelle-scroll{
  overflow-x:auto; -webkit-overflow-scrolling:touch; margin:var(--sp-6) auto;
  border:1px solid var(--line); border-radius:var(--r-table); max-width:var(--breite-daten);
}
/* `width:auto` statt `100%`: die Tabelle darf schmaler sein als ihr
   Rahmen (z. B. am großen Monitor) — `min-width:640px` bleibt als FLOOR,
   nicht als Deckel, damit sie am Handy weiterhin überläuft und dort
   `.tabelle-scroll`/`.tabelle-rahmen` zum Scrollen zwingt, statt die
   Spalten zusammenzuquetschen. KEIN `max-width` hier — der würde das
   Überlaufen genau verhindern, das der Scroll-Rahmen braucht. */
table.jahre{width:auto; min-width:640px; border-collapse:collapse; font-variant-numeric:tabular-nums lining-nums}
table.jahre caption{text-align:left; padding:var(--sp-4) var(--sp-5) 0; font-size:var(--f-small); color:var(--muted)}
table.jahre th,table.jahre td{padding:12px 18px; font-size:15px; white-space:nowrap}
table.jahre thead th{
  text-align:right; font-family:var(--font-anzeige); font-weight:700; color:#fff;
  background:var(--tiefgruen); font-size:13.5px;
}
table.jahre thead th:first-child{text-align:left; border-radius:var(--r-table) 0 0 0}
table.jahre thead th:last-child{border-radius:0 var(--r-table) 0 0}
table.jahre td{text-align:right; border-top:1px solid var(--line); color:var(--ink)}
table.jahre td:first-child,table.jahre th:first-child{
  text-align:left; font-weight:700; position:sticky; left:0; background:var(--flaeche);
}
table.jahre tbody tr:nth-child(even) td{background:var(--flaeche-tief)}
table.jahre tbody tr:nth-child(even) td:first-child{background:var(--flaeche-tief)}
table.jahre tfoot td{border-top:1.5px solid var(--line-stark); font-weight:800; color:var(--tiefgruen)}

/* ─────────────── 3.7b · Tabelle-Rahmen (generischer Scroll-Rahmen) ───────────────
   16.09., Befund aus der Live-Skalierungsmessung: Markdown-Tabellen
   (`table.tabelle`) UND — je nach Einbau — auch `table.jahre` standen ohne
   eigenen Scroll-Rahmen im Fließtext und machten dadurch die GANZE Seite
   horizontal scrollbar, nicht nur die Tabelle. `.tabelle-rahmen` ist die
   generische Antwort darauf: um JEDE Tabelle, deren Spalten in der Breite
   nicht garantiert hineinpassen, wickelt der Entwickler dieses Element.

   Anders als `.tabelle-scroll` (3.7, extra für die Jahrestabelle: eigene
   Bühnenbreite 960px, eigener Rahmen/Radius, sticky erste Spalte) ist
   `.tabelle-rahmen` bewusst UNAUFWÄNDIG und ohne Bühnen-Breite — für ganz
   normale Kommentarsatz-Tabellen mitten im Lesefluss (`.mass-lese`-Breite).
   Beide Klassen dürfen nebeneinander bestehen; für `table.jahre` selbst
   reicht auch `.tabelle-scroll` weiterhin aus (sie hat `overflow-x:auto`
   bereits eingebaut) — `.tabelle-rahmen` ist für alle ANDEREN Tabellen da.

   Rand-Hinweis „weitere Spalten" ist ein durchgehendes, sehr dezentes
   Schlagschatten-Inset am rechten Innenrand (KEIN Farbverlauf, der auf
   die Tabellen-Hintergrundfarbe abgestimmt werden müsste — ein
   `box-shadow:inset` funktioniert unabhängig davon, was hinter ihm liegt).
   Bewusst vereinfacht: er bleibt sichtbar, auch wenn schon ganz nach
   rechts gescrollt ist — ein wirklich scrollstand-genauer Hinweis bräuchte
   JavaScript (`scrollLeft`/`scrollWidth` abfragen), das ist hier bewusst
   nicht gebaut. */
.tabelle-rahmen{
  position:relative; max-width:100%; overflow-x:auto; -webkit-overflow-scrolling:touch;
  margin:var(--sp-5) 0; border-radius:var(--r-sm);
  box-shadow:inset -24px 0 16px -16px rgba(11,31,51,.14);
}
/* Tabellen darin dürfen ihre natürliche (ggf. schmalere) Breite behalten —
   kein erzwungenes `width:100%`, das sie unnötig aufblähen würde. */
.tabelle-rahmen table{width:auto; max-width:none}

/* Kleine, generische Basisoptik für gewöhnliche Markdown-Tabellen
   (`table.tabelle`) — keine eigene Farbwelt wie die Jahrestabelle (3.7),
   nur genug, damit sie nicht wie unformatiertes Browser-Standard-HTML
   mitten im sonst gestalteten Fließtext steht. Wer eine Tabelle braucht,
   die wie die Jahrestabelle aussehen soll, verwendet `table.jahre`. */
.tabelle-rahmen table{border-collapse:collapse; font-size:15px}
.tabelle-rahmen th,.tabelle-rahmen td{padding:10px 16px; text-align:left; border-bottom:1px solid var(--line); white-space:nowrap}
.tabelle-rahmen thead th{font-family:var(--font-anzeige); font-weight:700; color:var(--navy); border-bottom:1.5px solid var(--line-stark)}
.tabelle-rahmen tbody tr:nth-child(even) td{background:var(--flaeche-tief)}

/* ────────────── 3.8 · Drei-Töpfe-Darstellung Mittelverwendung ────────────── */
.toepfe{
  display:grid; grid-template-columns:repeat(3,1fr); gap:var(--sp-5); margin:var(--sp-6) auto;
  align-items:end; max-width:var(--breite-daten);
}
.topf{text-align:center}
.topf .gefaess{
  --anteil:50%; height:180px; border-radius:20px; border:1.5px solid var(--line);
  background:
    linear-gradient(to top, var(--tiefgruen) var(--anteil), transparent var(--anteil)),
    var(--flaeche-tief);
  position:relative; overflow:hidden; display:flex; align-items:flex-start; justify-content:center;
}
.topf .gefaess .prozent{
  margin-top:var(--sp-3); font-family:var(--font-anzeige); font-weight:800; font-size:22px;
  color:#fff; mix-blend-mode:difference;
}
.topf .titel{display:block; margin-top:var(--sp-3); font-weight:700; font-size:15px}
.topf .beschreibung{display:block; margin-top:2px; font-size:13px; color:var(--muted)}
@media(max-width:520px){ .toepfe{gap:var(--sp-3)} .topf .gefaess{height:140px} }

/* ───────────── 3.9 · Phasen-Leiste (Regionalpartner Phase 1→2→3; auch als Zeitstrahl) ─────────────
   16.09., erweitert für den Zeitstrahl in Stufe 2 (`:::zeitstrahl`, sechs Stationen
   05/2026–2028–2031, gebaut auf genau diesem Bauteil). Drei Entscheidungen dazu:

   1. ZUSTANDSKLASSEN, verbindlich für das Bauskript, das sie aus dem heutigen
      Datum setzt: `.erreicht` (Vergangenheit/abgeschlossen) · `.aktiv` (laufend)
      · `.offen` (Zukunft). Alle drei sind jetzt EXPLIZIT ausprogrammiert — `.offen`
      sah vorher genau wie der unklassifizierte Grundzustand aus (keine eigene
      Regel), das war für ein Skript, das verlässlich eine von drei Klassen
      setzen soll, kein stabiler Vertrag. Jetzt hat jede der drei einen Namen
      UND eine eigene (auch wenn `.offen` bewusst unverändert aussieht) Regel.
   2. DRITTES FELD `.beschreibung` (z. B. „Prototyp, Netzwerkaufbau") ist jetzt
      ein regulärer, OPTIONALER dritter Bestandteil von `.phase` — kein Fork der
      Komponente. Löst das Provisorium `.zeitraum-beschreibung` in `app/hub.html`
      ab; der Entwickler benennt beim Einbau in `.phase > .beschreibung` um.
      Gleicher Klassenname wie bei den Drei-Töpfen (`.topf .beschreibung`,
      Abschnitt 3.8) — bewusst dieselbe Konvention: Klassen sind kontextuell
      unter ihrem Elternbauteil eindeutig, nicht global.
   3. SECHS STATIONEN AUF 390px: die schmalste Schrift bleibt bei 12,5px (nie
      unter 11px, wie vorgegeben). Statt die Schrift weiter zu verkleinern,
      bekommt die Variante `.phasenleiste.zeitstrahl` eine EIGENE, frühere
      Umbruchschwelle (900px statt 480px) — sechs Spalten samt Beschreibung
      brauchen mehr Platz pro Station als drei kurze Phasen-Label. Die
      ursprüngliche Drei-Phasen-Nutzung (Stufe 1, bereits von Florian
      abgenommen: „skaliert sauber") bleibt UNVERÄNDERT bei 480px — die neue
      Schwelle gilt nur mit der Zusatzklasse `.zeitstrahl`, kein Risiko einer
      Regression am bestehenden Bauteil. */
.phasenleiste{display:flex; align-items:flex-start; margin:var(--sp-6) auto; max-width:var(--breite-daten)}
.phase{flex:1; position:relative; text-align:center; padding:0 var(--sp-2)}
.phase:not(:last-child)::after{
  content:""; position:absolute; top:15px; left:50%; width:100%; height:2px;
  background:var(--line); z-index:0;
}
.phase.erreicht:not(:last-child)::after{background:var(--tiefgruen)}
.phase .punkt{
  position:relative; z-index:1; width:32px; height:32px; margin:0 auto var(--sp-2);
  border-radius:50%; background:#fff; border:2px solid var(--line);
  display:grid; place-items:center; font-family:var(--font-anzeige); font-weight:800; font-size:14px;
  color:var(--muted);
}
.phase.erreicht .punkt{background:var(--tiefgruen); border-color:var(--tiefgruen); color:#fff}
.phase.aktiv .punkt{border-color:var(--orange); color:var(--orange); background:#fff}
/* `.offen` sieht bewusst wie der frühere Grundzustand aus (Zukunft = neutral,
   keine Aktions-/Erfolgsfarbe) — jetzt aber als eigene, benannte Regel, kein
   impliziter „hat keine der anderen beiden Klassen"-Zustand mehr. */
.phase.offen .punkt{background:#fff; border-color:var(--line); color:var(--muted)}
.phase .name{display:block; font-weight:700; font-size:14.5px}
.phase .zeitraum{display:block; margin-top:2px; font-size:12.5px; color:var(--muted)}
.phase .beschreibung{
  display:block; margin-top:4px; font-size:12.5px; line-height:1.4; color:var(--muted);
  max-width:42ch; margin-inline:auto;
}
/* Unter 480px wird aus der Zeile eine Spalte — sonst quetschen sich drei
   Phasenlabels auf ~360px Breite unlesbar zusammen. Gilt für die einfache
   Phasen-Leiste (Stufe 1, unverändert). */
@media(max-width:480px){
  .phasenleiste{flex-direction:column; gap:var(--sp-5)}
  .phase{text-align:left; padding-left:44px}
  .phase .punkt{position:absolute; left:0; top:0; margin:0}
  .phase:not(:last-child)::after{
    top:32px; left:15px; width:2px; height:calc(100% + var(--sp-5) - 32px);
  }
  .phase .beschreibung{margin-inline:0}
}

/* ── Variante `.zeitstrahl`: mehr Stationen + Beschreibung (Stufe 2) ──
   Mobile-first gestapelt (wie oben, aber ab 390px aktiv, nicht erst ab
   480px) — erst ab 900px wird daraus eine Reihe. Dieselben Zustands- und
   Feld-Klassen (`.erreicht`/`.aktiv`/`.offen`, `.name`/`.zeitraum`/
   `.beschreibung`), nur der Container trägt zusätzlich `.zeitstrahl`. */
.phasenleiste.zeitstrahl{
  flex-direction:column; gap:var(--sp-5); max-width:var(--breite-lesen);
}
/* 16.09., Korrektur nach Live-Messung bei 1024px: die Reihe (ab 900px, siehe
   Media Query unten) lief bei 1024px 18px aus dem Bild — die Seite wurde
   dadurch horizontal scrollbar. Ursache war NICHT die Umbruchschwelle
   selbst, sondern derselbe Flex-Grundfehler wie schon bei `.branchenkarte`
   (Abschnitt 3.11, dort korrigiert): ein Flex-Kind darf laut Spec nie unter
   seine eigene Inhalts-Mindestbreite schrumpfen. Bei sechs `flex:1`-Stationen
   und einem einzelnen langen Wort in Name/Zeitraum/Beschreibung reichte der
   gleichmäßig verteilte Platz je Station bei 1024px nicht aus — die eine
   Station mit dem längsten Wort blieb breiter als ihr Anteil, alle sechs
   zusammen sprengten die 960px-Bühne. `min-width:0` hebt die Sperre auf,
   `overflow-wrap:anywhere` + `hyphens:auto` lassen das Wort im Notfall
   brechen/trennen statt die Station aufzublasen — bewusst NUR unter
   `.zeitstrahl` (nicht am `.phase`-Grundbauteil), damit die bereits
   abgenommene Drei-Phasen-Leiste in Stufe 1 unverändert bleibt. Geprüft
   gegen 900/1024/1100/1200/1440px: bei keiner Breite mehr Scrollbreite über
   der Fensterbreite. */
.phasenleiste.zeitstrahl .phase{min-width:0}
.phasenleiste.zeitstrahl .phase .name,
.phasenleiste.zeitstrahl .phase .zeitraum,
.phasenleiste.zeitstrahl .phase .beschreibung{overflow-wrap:anywhere; hyphens:auto}
.phasenleiste.zeitstrahl .phase{text-align:left; padding-left:44px}
.phasenleiste.zeitstrahl .phase .punkt{position:absolute; left:0; top:0; margin:0}
.phasenleiste.zeitstrahl .phase:not(:last-child)::after{
  top:32px; left:15px; width:2px; height:calc(100% + var(--sp-5) - 32px);
}
.phasenleiste.zeitstrahl .phase .beschreibung{margin-inline:0}
@media(min-width:900px){
  .phasenleiste.zeitstrahl{flex-direction:row; gap:0; max-width:var(--breite-daten)}
  .phasenleiste.zeitstrahl .phase{text-align:center; padding:0 var(--sp-2)}
  .phasenleiste.zeitstrahl .phase .punkt{position:relative; left:auto; top:auto; margin:0 auto var(--sp-2)}
  .phasenleiste.zeitstrahl .phase:not(:last-child)::after{top:15px; left:50%; width:100%; height:2px}
  .phasenleiste.zeitstrahl .phase .beschreibung{margin-inline:auto}
}

/* ─────────────── 3.10 · Netzwerkeffekt-Kreislauf (reines CSS/SVG) ─────────────── */
.kreislauf{margin:var(--sp-6) 0; display:flex; flex-direction:column; align-items:center; gap:var(--sp-4)}
.kreislauf svg{width:100%; max-width:360px; height:auto}
.kreislauf .kn-flaeche{fill:#fff; stroke:var(--tiefgruen); stroke-width:1.5}
.kreislauf .kn-text{font-family:var(--font-text); font-size:12.5px; fill:var(--ink); text-anchor:middle}
.kreislauf .pfeil{fill:none; stroke:var(--orange); stroke-width:2; stroke-linecap:round}
.kreislauf figcaption{font-size:var(--f-small); color:var(--muted); max-width:44ch; text-align:center}

/* ─────────────── 3.11 · Branchen-Karten (Reinigung → weitere Felder) ─────────────── */
/* 16.09., zwei Korrekturen nach Prüfung bei 1440px:
   1) TREPPENSTUFEN: `align-items:center` ließ Karten unterschiedlicher
      Texthöhe an ihrer MITTE ausrichten statt an der Oberkante — dadurch
      standen die Oberkanten einer Reihe versetzt (Kap. 03/05/06, überall
      dieselbe Klasse). Jetzt `stretch`: alle Karten einer Zeile gleich hoch,
      bündig oben. `.pfeil-weiter` behält sein eigenes `align-self:center`,
      bleibt also als schmales Glyphen-Element vertikal mittig neben den nun
      gestreckten Karten.
   2) FÜNF KARTEN IN KAP. 06: bei 960px Bühnenbreite brach die fünfte Karte
      um, der letzte Pfeil hing am Zeilenende. Ursache war NICHT zu wenig
      Platz im Mittel, sondern der Flex-Default: ein Flex-Kind darf laut
      Spec nie unter seine eigene Inhalts-Mindestbreite schrumpfen, und ein
      einzelnes unteilbares Wort wie „Sicherheitsdienste" ist bei 16,5px
      selbst breiter als 150px. `min-width:0` hebt diese Sperre auf,
      `hyphens:auto` + `overflow-wrap:anywhere` erlauben dem Wort im
      Notfall einen Umbruch/Trennstrich statt die Karte aufzublasen. Damit
      passen jetzt alle fünf Karten + vier Pfeile in eine Reihe (kleinere
      Karten statt 3+2-Umbruch) — geprüft für alle drei Kapitel mit dieser
      Klasse, nicht nur für Kap. 06. */
.branchenexpansion{
  display:flex; align-items:stretch; gap:var(--sp-2); flex-wrap:wrap; margin:var(--sp-6) auto;
  max-width:var(--breite-daten);
}
.branchenkarte{
  flex:1 1 150px; background:var(--flaeche); border:1.5px solid var(--line);
  border-radius:var(--r-card); padding:var(--sp-4) var(--sp-4); min-width:0;
  hyphens:auto; overflow-wrap:anywhere;
  display:flex; flex-direction:column;
}
.branchenkarte.heute{border-color:var(--tiefgruen); background:var(--flaeche)}
.branchenkarte .status{
  display:inline-block; font-family:var(--font-mono); font-size:12.5px; font-weight:700;
  letter-spacing:.08em; text-transform:uppercase; padding:3px 9px; border-radius:var(--r-btn);
  margin-bottom:var(--sp-2); align-self:flex-start;
}
.branchenkarte.heute .status{background:var(--frischgruen); color:var(--navy)}
.branchenkarte.morgen .status{background:var(--hellorange); color:var(--muted)}
.branchenkarte h3{font-size:16.5px; margin-bottom:2px}
.branchenkarte p{font-size:13.5px; color:var(--muted)}
.pfeil-weiter{flex:0 0 18px; text-align:center; color:var(--muted); font-size:20px; align-self:center}
.pfeil-weiter::before{content:"→"}

/* 16.09., zweite Korrektur (nur die Reihe mit fünf Karten, Kap. 06 „Die
   nächsten Branchen"): bei gleichmäßig kleinen Karten brachen Titel wie
   „Sicherheitsdienste" jetzt zwar nicht mehr über den Kartenrand, aber
   MITTEN IM WORT ab — genau das automatische Verhalten aus der Korrektur
   oben, das hier eigentlich nur ein Sicherheitsnetz sein sollte, ist auf
   dieser schmalen Kartenbreite ständig gezogen worden. Florians Vorgabe:
   3+2-Raster, breitere Karten, keine automatische Trennung.

   Die Partnerfeld-Reihe (Kap. 03, 4 Karten) und die Baustein-Reihe
   (Kap. 05, 3 Karten) bleiben UNVERÄNDERT — sie benutzen dieselben Basis-
   klassen oben, aber keine davon trägt `.branchenkarte.heute` (die gibt es
   nur in Kap. 06). Deshalb ist alles Folgende über
   `.branchenexpansion:has(.branchenkarte.heute)` auf genau diese eine Reihe
   begrenzt, nicht generell auf `.branchenexpansion`/`.branchenkarte`.

   TECHNIK für das 3+2: reiner CSS/Flexbox-Trick, kein Markup-Eingriff.
     · Die drei Karten bekommen eine feste, größere Breite (rund ein Drittel
       der Bühne minus Pfeile/Lücken) statt frei zu wachsen/schrumpfen.
     · Der DRITTE Pfeil (zwischen Karte 3 und Karte 4 — im Markup immer an
       genau dieser Stelle, siehe Kommentar unten) wird zum unsichtbaren
       Zeilenumbruch: `flex-basis:100%` zwingt ihn auf eine eigene, aber
       0px hohe Zeile — alles danach (Karte 4, Pfeil 4, Karte 5) rutscht in
       die zweite Zeile. Der Pfeil selbst wird dabei entfernt (kein Inhalt,
       keine Höhe), NICHT nur versteckt — er stünde sonst als Geisterlinie
       zwischen den Zeilen.
     · `justify-content:center` zentriert JEDE Flex-Zeile für sich – Zeile 2
       (2 Karten + 1 Pfeil) bekommt dadurch automatisch den „2+3 zentriert"-
       Look, ohne dass die beiden Karten breiter werden als die drei in
       Zeile 1.
     · `hyphens:manual` + `overflow-wrap:normal` heben das Sicherheitsnetz
       von oben für DIESE Karten wieder auf — bei der neuen Breite nicht
       mehr nötig, und genau das war der Auslöser für die Wort-Trennung.
   16.09. abends, Breitenprüfung über Florians volle Liste (360·390·430·
   768·1024·1280·1440·1920·2560, siehe DESIGN.md): die Schwelle ist dafür
   von 900px auf 760px gesenkt, DAMIT AUCH 768px (Tablet hoch) das 3+2-
   Raster bekommt, nicht nur Laptop/Monitor. Die Kartenbreite ist eine
   Prozentformel (`calc(100% - …)`), keine feste Zahl — sie wächst mit dem
   Bildschirm mit (bei 2560px deckelt `max-width:340px` sie trotzdem, damit
   Karten nie „riesig" wirken; bei 1280–1920 dazwischen fließend). Karten-
   Innenpolster hier auf 12px (statt der allgemeinen 16px) gesenkt, NUR in
   diesem Ausschnitt — das schafft bei 768px zusätzliche ~8px Wortbreite
   Reserve. `min-width:0` statt einer festen Zahl, sonst würde ein starrer
   Mindestwert exakt bei 760px wieder mit der Prozentformel kollidieren.
   Gerechnet, nicht mit Screenshot gemessen (siehe DESIGN.md „Breiten-
   prüfung"): bei 768px bleiben rechnerisch rund 13–20px Luft für das
   längste Wort „Sicherheitsdienste"; das ist eine Schätzung anhand
   Zeichenbreite, kein Bildschirmtest.
   OFFENE LÜCKE, unverändert benannt: 701–759px (schmales Desktop-Fenster,
   NICHT in Florians Liste) fällt weiter auf das allgemeine, engere Fünf-
   Karten-Layout mit Sicherheitsnetz (`hyphens:auto`/`overflow-wrap:
   anywhere`) zurück — nie kaputt, nur nicht im 3+2-Look.
   ⚠️ Nutzt `:has()` (Chrome/Edge/Safari aktuell, Firefox ab 121) — ohne
   Unterstützung greift ebenfalls das allgemeine Layout, nicht kaputt,
   nur enger. */
@media(min-width:760px){
  .branchenexpansion:has(.branchenkarte.heute){
    justify-content:center;
  }
  .branchenexpansion:has(.branchenkarte.heute) .branchenkarte{
    flex:0 1 calc((100% - 2*18px - 4*var(--sp-2)) / 3);
    max-width:340px; min-width:0;
    padding:var(--sp-4) 12px;
    hyphens:manual; overflow-wrap:normal;
  }
  /* Der dritte Pfeil im Markup steht immer zwischen Karte 3 und Karte 4
     (Reihenfolge: Karte,Pfeil,Karte,Pfeil,Karte,PFEIL,Karte,Pfeil,Karte —
     `:nth-of-type(3)` zählt nur unter den <span class="pfeil-weiter">-
     Geschwistern, trifft also exakt diesen einen). */
  .branchenexpansion:has(.branchenkarte.heute) .pfeil-weiter:nth-of-type(3){
    flex:0 0 100%; height:0; margin:0; padding:0; border:0; overflow:hidden;
  }
  .branchenexpansion:has(.branchenkarte.heute) .pfeil-weiter:nth-of-type(3)::before{
    content:"";
  }
}

@media(max-width:700px){
  .branchenexpansion{flex-direction:column; align-items:stretch}
  .branchenkarte{flex:1 1 auto}
  .pfeil-weiter{align-self:center; transform:rotate(0)}
  .pfeil-weiter::before{content:"↓"}
}

/* ─────────────────── 3.12 · Randziffer (nur Stufe 2, Kommentarsatz) ───────────────────
   Florian, 15.09., wörtlich: „Absätze beginnen mit Rz 1, Rz 2 … am Laptop im
   linken Rand, am Handy inline". Bewusst als eigenes <span class="rz"> im
   Markup (nicht als reiner CSS-Counter über ::before) — das macht die
   Randziffer robust gegenüber der Markdown→HTML-Pipeline des Entwicklers:
   sie kann sie einfach beim Rendern jedes Absatzes voranstellen, ohne dass
   eine Zählregel exakt sitzen muss. Mobile-first: ohne Media Query steht
   „Rz 1" schlicht als erstes Wort im Fließtext (inline). Erst ab 721px wird
   sie in den linken Rand gezogen — dafür braucht `.kommentarsatz` dort Platz. */
/* 16.09., Korrektur: „Rz 1" wirkte zu klein/blass. Kontrast war rechnerisch
   nie das Problem (--muted auf Weiß misst 7,08:1, siehe tokens.css) — aber
   12px + Gewicht 600 in einer System-Mono-Schrift liest sich dünn. Jetzt
   13,5px/700 und die dunklere `--muted-stark` (8,3:1) statt `--muted`:
   weiterhin dezent (kleiner als Fließtext, kein Fließtext-Gewicht), aber auf
   den ersten Blick lesbar statt nur ahnbar. */
.kommentarsatz .absatz{position:relative; margin-bottom:var(--sp-4)}
.kommentarsatz .absatz .rz{
  font-family:var(--font-mono); font-size:13.5px; font-weight:700;
  letter-spacing:.01em; color:var(--muted-stark); font-variant-numeric:tabular-nums;
  white-space:nowrap; margin-right:var(--sp-2);
}
@media(min-width:721px){
  .kommentarsatz{padding-left:64px}
  .kommentarsatz .absatz .rz{
    position:absolute; left:-64px; top:.1em; width:52px; text-align:right;
    margin-right:0; font-size:14px;
  }
}

/* ─────────── 3.13 · „Klartext"-Absatz am Kapitelende (Stufe 2, dezent) ───────────
   Bewusst KEIN Warnkasten: keine Hintergrundfarbe, kein Icon, kein größerer
   Schriftgrad als der Fließtext daneben — nur eine dünne Trennlinie und ein
   kleiner Kicker. Ein Vorbehalt, der optisch lauter ist als die Substanz,
   wirkt wie eine Selbstanzeige statt wie ein geprüfter Punkt (dieselbe
   Lehre, die in der FinPrep-Hülle bereits gezogen wurde). */
.klartext{margin-top:var(--sp-7); padding-top:var(--sp-4); border-top:1px solid var(--line); max-width:var(--mass-lese)}
.klartext .kicker{
  display:block; font-family:var(--font-mono); font-size:var(--f-micro); font-weight:600;
  letter-spacing:.16em; text-transform:uppercase; color:var(--muted); margin-bottom:var(--sp-2);
}
.klartext p{font-size:1em; line-height:1.65; color:var(--muted)}
.klartext p + p{margin-top:var(--sp-3)}

/* ───────────────────────────── 3.14 · Kontaktblock ───────────────────────────── */
.kontakt{
  display:flex; gap:var(--sp-5); align-items:center; flex-wrap:wrap;
  padding:var(--sp-5) var(--sp-6); border-radius:var(--r-card);
  background:var(--warmweiss); border:1px solid var(--line); margin:var(--sp-6) 0;
}
.kontakt .avatar{
  flex:none; width:52px; height:52px; border-radius:50%; background:var(--tiefgruen); color:#fff;
  display:grid; place-items:center; font-family:var(--font-anzeige); font-weight:800; font-size:16px;
}
.kontakt .info{min-width:0}
.kontakt .info b{display:block; font-size:16px}
.kontakt .info span{display:block; font-size:13.5px; color:var(--muted); margin-top:1px}
.kontakt .info a{font-weight:700; margin-top:4px; display:inline-block}

/* ─────────────────── 3.15 · Navleiste (Stufe 2, „mehr Übersicht") ───────────────────
   Florian, 16.09.: „mehr Übersicht in Stufe 2" — eine immer sichtbare Kapitel-
   navigation. Am Laptop feste linke Seitenleiste (sticky), am Handy ein
   Menü-Knopf mit ausklappbarer Liste darunter — EIN Markup, zwei Zustände
   per Media Query, kein zweiter Komponentensatz.

   ERWARTETES MARKUP (Entwickler baut ein, hier nur die Vorgabe):
     <div class="mit-navleiste">
       <button class="navleiste-knopf" aria-expanded="false" aria-controls="navleiste">Kapitel</button>
       <nav class="navleiste" id="navleiste" aria-label="Kapitel Stufe 2" hidden>
         <span class="navleiste-gruppe">Das Vorhaben erklärt</span>
         <ol><li><a href="#kap-2-11" class="aktiv">11 · …</a></li> … </ol>
         <span class="navleiste-gruppe">Zahlen &amp; Runde</span>
         <ol><li><a href="#kap-2-18">18 · …</a></li> … </ol>
       </nav>
       <div class="navleiste-inhalt"> … alle Kapitel 11–23 … </div>
     </div>
   `hidden` ist der Ausgangszustand für die MOBILE Variante (Liste zu). Ab
   900px hebt die Media Query unten `hidden` wieder auf — die Seitenleiste
   ist am Laptop NIE einklappbar, das `hidden`-Attribut bleibt nur ein
   Mobil-Zustand. `.aktiv` markiert das gerade gelesene Kapitel (der
   Entwickler setzt/verschiebt die Klasse beim Scrollen — reine CSS-Aufgabe
   ist nur ihr Aussehen).

   BREITE: 900px als Schwelle für den Wechsel Menü-Knopf → Seitenleiste,
   NICHT die sonst übliche 700/760px-Handygrenze. Grund: bei 768px (Tablet
   hoch, in Florians Prüfliste) ließe eine dauerhafte 252px-Leiste nur noch
   ~470px für Bühne/Fließtext — eng, aber die Leiste selbst wäre technisch
   nutzbar; ich habe mich für den Knopf entschieden, weil ein Investor am
   Tablet hochkant eher überblättert als eine schmale Randspalte mitliest.
   Bei 1024px (Tablet quer, ebenfalls in der Liste) UND darüber greift die
   Seitenleiste (1024−252=772px Bühne, ausreichend). */
.navleiste-knopf{
  display:flex; align-items:center; gap:8px; width:100%; max-width:var(--breite-daten);
  background:var(--flaeche); border:1.5px solid var(--line); border-radius:var(--r-sm);
  padding:12px 16px; font-family:var(--font-anzeige); font-weight:700; font-size:15px;
  color:var(--ink); cursor:pointer; margin:0 auto var(--sp-4);
}
.navleiste-knopf::after{content:"▾"; margin-left:auto; color:var(--muted); transition:transform .15s ease}
.navleiste-knopf[aria-expanded="true"]::after{transform:rotate(180deg)}
.navleiste-knopf:hover{border-color:var(--line-stark)}
.navleiste-knopf:focus-visible{outline:3px solid var(--tiefgruen); outline-offset:2px}

.navleiste{
  background:var(--flaeche); border:1.5px solid var(--line); border-radius:var(--r-card);
  padding:var(--sp-4) var(--sp-3); margin:0 auto var(--sp-6); max-width:var(--breite-daten);
  max-height:min(70vh,520px); overflow-y:auto;
}
.navleiste[hidden]{display:none}
.navleiste-gruppe{
  display:block; font-family:var(--font-mono); font-size:12.5px; letter-spacing:.16em;
  text-transform:uppercase; color:var(--muted); padding:14px 12px 6px;
}
.navleiste-gruppe:first-child{padding-top:4px}
.navleiste ol{list-style:none; margin:0; padding:0}
.navleiste li + li{margin-top:1px}
.navleiste a{
  display:block; padding:9px 12px; border-radius:8px; font-size:14.5px; line-height:1.35;
  color:var(--ink); text-decoration:none; border-left:2.5px solid transparent;
}
.navleiste a:hover{background:var(--flaeche-tief)}
.navleiste a:focus-visible{outline:2px solid var(--tiefgruen); outline-offset:1px}
.navleiste a.aktiv{
  background:var(--flaeche-tief); border-left-color:var(--tiefgruen); color:var(--tiefgruen); font-weight:700;
}

@media(min-width:900px){
  .navleiste-knopf{display:none}
  .mit-navleiste{
    display:grid; grid-template-columns:var(--breite-navleiste) minmax(0,1fr); gap:0; align-items:start;
  }
  .navleiste{
    position:sticky; top:0; align-self:start; height:100vh; max-height:none; max-width:none;
    border:0; border-right:1px solid var(--line); border-radius:0; margin:0;
    padding:var(--sp-6) var(--sp-4);
  }
  /* Am Laptop nie einklappbar — `hidden` ist ausschließlich ein Mobil-
     Zustand, siehe Markup-Hinweis oben. */
  .navleiste[hidden]{display:block}
  .navleiste-inhalt{min-width:0; padding-left:var(--sp-6)}
}
@media(min-width:1600px){
  /* 1920/2560: die Leiste bleibt in fester Pixelbreite (--breite-navleiste
     ist px, kein vw) — sie wächst NICHT mit, sonst nimmt sie der Bühne auf
     großen Monitoren unnötig Platz weg. Nur das Innenpolster bekommt hier
     etwas mehr Luft, weil auf so einem Monitor ohnehin alles großzügiger
     wirken darf. */
  .navleiste{padding-left:var(--sp-5)}
}
@media(max-width:479px){
  /* 360/390/430: Leiste und Knopf teilen sich die volle Breite mit dem
     Rest der Seite (kein eigenes `--breite-daten`-Polster nötig, das wäre
     hier ohnehin größer als der Bildschirm). */
  .navleiste-knopf, .navleiste{max-width:none}
}

/* ─────────────── 3.16 · „Auf einen Blick" (Kopf von Stufe 2) ───────────────
   Florian, 16.09., wörtlich zur Übersicht: sechs Eckzahlen + 5–6 Kernsätze,
   die zum jeweiligen Kapitel springen. Sitzt ganz oben in `.navleiste-inhalt`,
   VOR dem ersten Kapitel. Eckzahlen sind bewusst KLEINER als die großen
   `.kennzahl`-Kacheln aus 3.6 (das hier ist eine Kurzfassung, keine
   Wiederholung) — eigene, kompaktere Klasse `.blick-kachel`, kein Reuse von
   `.kennzahl`, damit eine spätere Änderung an den großen Kacheln nicht
   versehentlich die Übersicht mitverändert. */
.aufeinenblick{
  background:var(--flaeche); border:1.5px solid var(--tiefgruen); border-radius:var(--r-card);
  padding:var(--sp-6); margin:0 auto var(--sp-7); max-width:var(--breite-daten);
}
.aufeinenblick .titel{
  font-family:var(--font-anzeige); font-weight:800; font-size:20px; color:var(--navy); margin:0 0 4px;
}
.aufeinenblick .untertitel{font-size:14px; color:var(--muted); margin:0 0 var(--sp-5); max-width:60ch}

/* 16.09., Korrektur nach Prüfung bei 1440px: `auto-fit` mit sechs Kacheln
   passte je nach verfügbarer Breite mal 5, mal 6 pro Reihe hinein — bei
   1440px genau 5, die sechste fiel allein in eine zweite Reihe. Jetzt ein
   FESTES Raster statt einer variablen Anzahl: 2 Spalten mobil (passte
   bereits), ab 900px genau 3×2. Grid-Zeilen sind ohnehin gleich hoch (Grid-
   Kinder strecken sich per Default auf die höchste Kachel ihrer Reihe —
   kein zusätzliches `align-items` nötig). */
.blick-kacheln{
  display:grid; grid-template-columns:repeat(2,1fr); gap:var(--sp-3);
  margin-bottom:var(--sp-5);
}
@media(min-width:900px){
  .blick-kacheln{grid-template-columns:repeat(3,1fr)}
}
.blick-kachel{
  background:var(--flaeche-tief); border:1px solid var(--line); border-radius:var(--r-sm);
  padding:var(--sp-3) var(--sp-4); min-width:0;
}
.blick-kachel .zahl{
  display:block; font-family:var(--font-anzeige); font-weight:800; color:var(--tiefgruen);
  font-size:22px; line-height:1.1; font-variant-numeric:tabular-nums lining-nums; white-space:nowrap;
}
/* Die EINHEIT neben der Kachelzahl ("€", "T€", "Mio €", "%", "Jahr",
   "Mio € (4×)") soll ihre Groesse an die Zahl binden (.55em) - deshalb
   `max()` statt einer festen Groesse: die Bindung bleibt, sobald die Zahl
   ueber 22,7px waechst, und darunter greift die Untergrenze.
   Vorgeschichte (16.09.): Hier stand eine bewusste AUSNAHME von der
   12,5px-Untergrenze, gemessen wurden 12,1px. Ein Pruefer hat zwei Dinge
   dagegengehalten, beide richtig: Erstens deckte die Begruendung "ein
   Waehrungszeichen ist kein Lesetext" die Faelle "Jahr" und "Mio € (4×)"
   nicht ab - das sind Woerter. Zweitens kauft die Ausnahme nichts: 12,1 auf
   12,5 sind +3,3%, das sieht niemand, aber die Regel bekommt ein Loch, das
   nach unten offen ist (Kachelzahl auf 20px gezogen = 11,0px, ohne dass
   etwas rot wird). Optisch identisch, Regel ohne Ausnahme. */
.blick-kachel .zahl .einheit{font-size:max(12.5px,.55em); font-weight:700; color:var(--muted); margin-left:3px}
.blick-kachel .label{display:block; margin-top:4px; font-size:12.5px; color:var(--muted); line-height:1.3}

.blick-zeilen{display:grid; border:1.5px solid var(--line); border-radius:var(--r-sm); overflow:hidden}
.blick-zeile{
  display:flex; flex-wrap:wrap; align-items:baseline; justify-content:space-between; gap:4px 12px;
  padding:13px var(--sp-4); background:var(--flaeche); text-decoration:none; color:var(--ink);
  font-size:15px; border-top:1px solid var(--line);
}
.blick-zeile:first-child{border-top:0}
.blick-zeile:is(:hover,:focus-visible){background:var(--flaeche-tief)}
.blick-zeile:focus-visible{outline:2px solid var(--tiefgruen); outline-offset:-2px}
.blick-zeile .satz{min-width:0}
.blick-zeile .ziel{
  flex:none; font-family:var(--font-mono); font-size:12.5px; color:var(--muted);
  white-space:nowrap; display:inline-flex; align-items:center; gap:6px;
}
.blick-zeile .ziel::after{content:"→"; color:var(--muted)}

/* ─────────────────── 3.17 · Frageassistent (Stufe 1 UND Stufe 2) ───────────────────
   Florian, 16.09., wörtlich: „den Frageassistenten wo Firmen/Vertrieb/etc
   Jens beantwortet und Technik/KI und Zahlen beantworte ich". Schwebender
   Knopf unten rechts, öffnet ein Panel; am Handy Vollbild-Blatt statt einer
   schwebenden Karte (auf 380px Panelbreite wäre am Handy kein Rand mehr
   übrig). Kein eigener Nachtmodus-Zweig hier — folgt automatisch den
   Tokens, funktioniert also auch unter `[data-theme="dunkel"]`.

   ERWARTETES MARKUP (Entwickler baut Logik/Fetch/Fokus-Trap ein):
     <button class="frage-knopf" aria-haspopup="dialog" aria-expanded="false"
             aria-controls="frage-panel">Frage stellen</button>
     <div class="frage-panel" id="frage-panel" role="dialog" aria-modal="true"
          aria-labelledby="frage-panel-titel" hidden>
       <div class="frage-panel-kopf">
         <h2 id="frage-panel-titel">Frage stellen</h2>
         <button class="frage-schliessen" aria-label="Schließen">×</button>
       </div>
       <p class="frage-hinweis">Antworten erzeugt eine KI aus den Inhalten
         dieses Hubs; verbindlich ist das Gespräch.</p>
       <div class="frage-verlauf" aria-live="polite">
         <p class="frage-frage">… Nutzerfrage …</p>
         <div class="frage-antwort">
           <span class="antwort-person jens"><span class="punkt"></span>Jens Windel</span>
           <p>… Antworttext …</p>
           <span class="antwort-fundstelle">Rz 3 · Kapitel 20</span>
         </div>
         <p class="frage-laedt" aria-hidden="true">… tippt <span class="punkte"><span>.</span><span>.</span><span>.</span></span></p>
         <p class="frage-fehler" role="alert">… Fehlertext …</p>
       </div>
       <form class="frage-formular">
         <textarea class="frage-eingabe" maxlength="500" aria-describedby="frage-zaehler"></textarea>
         <div class="frage-formular-fuss">
           <span class="frage-zaehler" id="frage-zaehler">0/500</span>
           <button class="frage-absenden" type="submit">Senden</button>
         </div>
       </form>
     </div>
   Fokus-Trap, Escape-zu-Schließen, Rückgabe des Fokus an `.frage-knopf`
   beim Schließen: JS-Aufgabe des Entwicklers, hier nur die Optik/ARIA-Rollen
   vorbereitet. */
.frage-knopf{
  position:fixed; right:24px; bottom:24px; z-index:70;
  display:inline-flex; align-items:center; gap:8px;
  background:var(--tiefgruen); color:#fff; border:none; border-radius:var(--r-btn);
  padding:14px 22px; font-family:var(--font-anzeige); font-weight:700; font-size:15px;
  box-shadow:var(--schatten-karte); cursor:pointer;
}
.frage-knopf .punkt-live{width:8px; height:8px; border-radius:50%; background:var(--frischgruen); flex:none}
.frage-knopf:hover{background:#0d4a3b}
.frage-knopf:focus-visible{outline:3px solid var(--frischgruen); outline-offset:2px}
.frage-knopf[aria-expanded="true"]{background:var(--navy)}

.frage-panel{
  position:fixed; right:24px; bottom:88px; z-index:70; width:var(--breite-frage-panel);
  max-width:min(var(--breite-frage-panel),calc(100vw - 32px));
  max-height:min(640px,80vh);
  background:var(--flaeche); border:1px solid var(--line); border-radius:var(--r-card);
  box-shadow:var(--schatten-karte); display:flex; flex-direction:column; overflow:hidden;
}
.frage-panel[hidden]{display:none}
.frage-panel-kopf{
  display:flex; align-items:center; justify-content:space-between; gap:var(--sp-3);
  padding:var(--sp-4) var(--sp-5); border-bottom:1px solid var(--line); flex:none;
}
.frage-panel-kopf h2{font-size:16px; color:var(--navy)}
.frage-schliessen{
  background:none; border:none; font-size:20px; line-height:1; cursor:pointer; color:var(--muted);
  width:32px; height:32px; border-radius:8px; flex:none;
}
.frage-schliessen:hover{background:var(--flaeche-tief)}
.frage-schliessen:focus-visible{outline:2px solid var(--tiefgruen); outline-offset:1px}

.frage-hinweis{
  font-size:12.5px; line-height:1.5; color:var(--muted); margin:0; flex:none;
  padding:var(--sp-3) var(--sp-5); border-bottom:1px solid var(--line); background:var(--flaeche-tief);
}

.frage-verlauf{flex:1 1 auto; overflow-y:auto; padding:var(--sp-4) var(--sp-5); display:flex; flex-direction:column; gap:var(--sp-4)}

.frage-frage{
  align-self:flex-end; background:var(--warmweiss); border:1px solid var(--line);
  border-radius:14px 14px 4px 14px; padding:10px 14px; font-size:14.5px; max-width:88%; margin:0;
}
.frage-antwort{
  background:var(--flaeche-tief); border:1px solid var(--line); border-radius:14px 14px 14px 4px;
  padding:12px 16px; font-size:14.5px; line-height:1.55; max-width:92%;
}
.antwort-person{display:flex; align-items:center; gap:7px; font-weight:700; font-size:13px; margin-bottom:6px}
.antwort-person .punkt{width:8px; height:8px; border-radius:50%; flex:none}
.antwort-person.jens .punkt{background:var(--tiefgruen)}
.antwort-person.jens{color:var(--tiefgruen)}
.antwort-person.florian .punkt{background:var(--orange)}
.antwort-person.florian{color:#A04A16} /* dunkler als --orange: 5,68:1 auf --flaeche-tief statt 2,3:1 bei reinem Orange-Text (erste Fassung #B85A1E maß nur 4,39:1 — knapp unter AA, nachgebessert) */
.frage-antwort p{margin:0; color:var(--ink)}
.antwort-fundstelle{
  display:block; margin-top:8px; font-family:var(--font-mono); font-size:12.5px; color:var(--muted);
}

.frage-laedt{display:flex; align-items:center; gap:6px; font-size:13.5px; color:var(--muted); margin:0}
.frage-laedt .punkte span{animation:frage-blinken 1.2s infinite; opacity:.2}
.frage-laedt .punkte span:nth-child(2){animation-delay:.2s}
.frage-laedt .punkte span:nth-child(3){animation-delay:.4s}
@keyframes frage-blinken{0%,80%,100%{opacity:.2} 40%{opacity:1}}
@media(prefers-reduced-motion:reduce){.frage-laedt .punkte span{animation:none; opacity:1}}

.frage-fehler{
  background:#FBEAE8; border:1px solid #E3A79E; color:#7A2A20; border-radius:10px;
  padding:10px 14px; font-size:13.5px; margin:0;
}

.frage-formular{border-top:1px solid var(--line); padding:var(--sp-4) var(--sp-5); display:flex; flex-direction:column; gap:8px; flex:none}
.frage-eingabe{
  width:100%; resize:none; min-height:64px; border:1.5px solid var(--line); border-radius:12px;
  padding:10px 12px; font-family:var(--font-text); font-size:14.5px; color:var(--ink);
}
.frage-eingabe:focus-visible{outline:2px solid var(--tiefgruen); outline-offset:2px}
.frage-formular-fuss{display:flex; align-items:center; justify-content:space-between; gap:var(--sp-3)}
.frage-zaehler{font-size:12.5px; color:var(--muted); font-variant-numeric:tabular-nums}
.frage-zaehler.nah-am-limit{color:var(--orange); font-weight:700}
.frage-absenden{
  background:var(--tiefgruen); color:#fff; border:none; border-radius:var(--r-btn);
  padding:10px 20px; font-weight:700; font-size:14px; cursor:pointer;
}
.frage-absenden:hover{background:#0d4a3b}
.frage-absenden:disabled{background:var(--line); color:var(--muted); cursor:not-allowed}
.frage-absenden:focus-visible{outline:3px solid var(--tiefgruen); outline-offset:2px}

@media(max-width:639px){
  /* 360/390/430: Vollbild-Blatt statt schwebender Karte — bei 380px fester
     Panelbreite bliebe am Handy praktisch kein Rand mehr übrig. */
  .frage-panel{
    right:0; bottom:0; left:0; top:0; width:auto; max-width:none; max-height:none;
    border-radius:0; border:0;
  }
  .frage-knopf{right:16px; bottom:16px; padding:13px 18px; font-size:14.5px}
}
@media(min-width:640px) and (max-width:900px){
  /* schmalere Fenster/Tablet hoch: Panel darf nicht an den Bühnenrand
     stoßen — Breite weicht der tatsächlichen Fensterbreite, siehe
     `max-width:min(…, calc(100vw - 32px))` oben, hier nur die Position
     etwas näher an den Rand gezogen. */
  .frage-panel{right:16px; bottom:80px}
}

/* ─────────────────────────────── 4 · Druck ─────────────────────────────── */
@media print{
  .no-print,nav,.klapper{display:none !important}
  body{background:#fff !important; color:#000 !important; font-size:12.5pt}
  .seite,.lese-spalte{max-width:none}
  .kapitel{break-inside:avoid-page; padding:24px 0}
  .kapitel + .kapitel{break-before:page; border-top:0}
  .traum-titel{background:#fff !important; color:#000 !important; padding:24px 0}
  .traum-titel::before{display:none}
  .traum-titel .satz em{color:#000}
  .traum-titel .unter{color:#000}
  .kapitel-kopf .nr{color:#000 !important; -webkit-text-stroke:0; opacity:.35}
  .kennzahl,.branchenkarte,.kontakt,.tabelle-scroll,.topf .gefaess{
    box-shadow:none !important; border:1px solid #000 !important;
  }
  table.jahre thead th{background:#eee !important; color:#000 !important}
  table.jahre tbody tr:nth-child(even) td{background:#f4f4f4 !important}
  .tabelle-scroll,.tabelle-rahmen{overflow:visible; box-shadow:none}
  .stufenmarke.s1{background:#fff !important; border:1px solid #000; color:#000 !important}
  .stufenmarke.s1 .punkt{background:#000}
  .phase .punkt{border:1.5px solid #000 !important; background:#fff !important; color:#000 !important}
  .phase.erreicht .punkt{background:#000 !important; color:#fff !important}
  /* `.aktiv` unterschied sich im Druck bisher NICHT von `.offen" (beide
     schwarze Kontur, weiß, schwarzer Text) — Orange trägt im Druck keine
     Information. Jetzt gestrichelt statt durchgezogen, damit alle drei
     Zustände auch in Schwarz-Weiß auseinanderzuhalten sind. */
  .phase.aktiv .punkt{border:1.5px dashed #000 !important; background:#fff !important; color:#000 !important}
  .kreislauf .pfeil,.kreislauf .kn-flaeche{stroke:#000 !important}
  a{color:#000 !important; text-decoration:underline}
  /* 16.09.: die drei neuen Bauteile — Navleiste, Frageassistent-Knopf/
     Panel sind reine Bildschirm-Bedienelemente, kein Inhalt. „Auf einen
     Blick" bleibt gedruckt (echter Inhalt), nur die Sprung-Pfeile/Hover-
     Optik ergeben im Papier keinen Sinn mehr. */
  .navleiste-knopf,.navleiste,.frage-knopf,.frage-panel{display:none !important}
  .mit-navleiste{display:block !important}
  .navleiste-inhalt{padding-left:0 !important}
  .blick-zeile{border:1px solid #000; border-top:1px solid #000 !important}
  .blick-zeile .ziel::after{content:none}
  .blick-kachel{border:1px solid #000 !important}
}