/* AGENCY — Design-Tokens und Grundbausteine
 *
 * Hell zuerst. Der Grund ist ein kühles Lavendelgrau, kein Weiß: Weiß neben
 * einem fast schwarzen Band wirkt wie ein Loch, ein leicht blaustichiges Grau
 * trägt das Band als Absicht statt als Bruch. Das Hero ist genau dieses
 * dunkle Band; jeder weitere Abschnitt darf sich per data-surface="dark"
 * dazustellen, ohne dass das Seitenthema sich ändert.
 *
 * Ein Signalton: elektrisches Cyan #00E5FF. Es hat zwei Rollen, die nie
 * dieselbe Farbe haben können:
 *   FLÄCHE  — bleibt immer das reine #00E5FF, mit fast schwarzer Schrift
 *             darauf. Das ist der Knopf, der die Seite trägt.
 *   SCHRIFT — muss auf hellem Grund abgedunkelt werden, sonst steht Cyan mit
 *             1.29:1 auf dem Grund und ist schlicht nicht lesbar.
 * Rechnerisch geht beides nicht mit einem Wert: eine Farbe müsste zugleich
 * L ≤ 0.146 (4.5:1 gegen den hellen Grund) und L ≥ 0.198 (4.5:1 unter fast
 * schwarzer Schrift) haben. Deshalb ist --accent kontextabhängig (dunkles
 * Petrol auf Hell, reines Cyan auf Dunkel) und die reine Markenfläche liegt
 * getrennt in --cta-bg. Wer var(--accent) für Text ODER Rahmen benutzt,
 * bekommt damit automatisch den lesbaren Wert der jeweiligen Fläche.
 *
 * Grün bleibt für Gewinne, Rot für Verluste. Beide sind bewusst vom Akzent
 * weggedreht: Grün auf ~147° statt der 153°, die es früher hatte, weil
 * 153° neben 186° Cyan im Diagramm zusammenfließt.
 *
 * Alle Kontraste sind gerechnet, nicht geschätzt — WCAG 2.x relative
 * Leuchtdichte, 4.5:1 für Text, 3.0:1 für Diagrammlinien und für Rahmen, die
 * eine Aussage tragen. Geprüft gegen die jeweils SCHLECHTESTE Fläche der
 * Fassung, also --surface-3, nicht nur gegen --bg. Die Zahlen stehen bei den
 * Werten. `node verify.js` rechnet nach.
 *
 * ACHTUNG beim Umbauen: verify.js liest diese Datei positionell. Es sucht
 * per indexOf vier Textstellen — den Beginn des Wurzelblocks, die helle
 * Systemabfrage, die ausdrücklich helle Themenregel und die Überschrift des
 * Grundlagenteils — und schneidet daran die beiden Paletten heraus. Die vier
 * Stellen müssen in dieser Reihenfolge stehen bleiben, und in den beiden
 * geschnittenen Blöcken müssen die Farben als sechsstellige Hex-Werte stehen,
 * nicht als var() und nicht als light-dark(). Genau daran wäre die
 * naheliegende DRY-Variante gescheitert. Und: keine dieser vier Zeichenketten
 * darf oben im Kommentar wörtlich auftauchen — beim ersten Versuch stand sie
 * dort, indexOf fand den Kommentar statt des Codes, und verify.js meldete
 * jede Farbe als „nicht gefunden".
 */

:root{
  /* ── Flächen, helle Fassung ───────────────────────────────────────────
   * Vier Stufen, absichtlich flach gestaffelt. --surface ist reines Weiß,
   * damit Karten sich vom Grund lösen, ohne dass sie einen Rahmen brauchen.
   * --surface-3 ist die dunkelste helle Fläche und damit der Prüfstein für
   * jede Schriftfarbe unten. */
  --bg:#e9ebf2; --surface:#ffffff; --surface-2:#f1f2f7; --surface-3:#e1e4ee;

  /* Schrift auf Hell. Kontrast gegen --surface-3 / --bg:
   *   --ink    14.52 / 15.48
   *   --ink-2   6.78 /  7.22
   *   --muted   4.92 /  5.25   ← knappster Textwert, deshalb #596076 und
   *                              nicht das hübschere, aber mit 4.65 zu
   *                              enge #5c6479 */
  --ink:#10141c; --ink-2:#454c5c; --muted:#596076;

  /* --line ist eine Trennlinie, kein Bauteilrand: 1.31:1 gegen --bg, sie
   * soll gliedern und nicht rahmen. --line-2 ist der Rand von Knöpfen,
   * Feldern und Panels und trägt deshalb Bedeutung — 3.39:1 gegen --bg,
   * 3.18:1 gegen --surface-3, also über der 3.0-Schwelle. Wer einen Rand um
   * ein bedienbares Element zieht, nimmt --line-2. */
  --line:#c9cfde; --line-2:#767e96;

  /* Akzent auf Hell. #006b7a ist dasselbe Cyan (Farbton 187° gegen 186°),
   * nur bis zur Lesbarkeit abgedunkelt: 4.89:1 gegen --surface-3, 5.21:1
   * gegen --bg, 4.78:1 auf --accent-wash. --accent-ink ist die Stufe
   * darunter für Hover und betonte Stellen (6.87 / 7.32).
   * --accent-on ist die Schrift AUF --accent: Weiß auf #006b7a = 6.21:1. */
  --accent:#006b7a; --accent-ink:#005361; --accent-on:#ffffff;
  --accent-wash:rgba(0,229,255,.20);

  /* Gewinn/Verlust auf Hell. 5.14 / 5.48 (pos) und 5.11 / 5.45 (neg). */
  --pos:#1a6b3f; --pos-wash:rgba(26,107,63,.12);
  --neg:#b4261c; --neg-wash:rgba(180,38,28,.12);

  /* ── Serienfarben, in BEIDEN Fassungen identisch ──────────────────────
   * Das ist keine Bequemlichkeit, sondern eine Reparatur: chart.js liest
   * diese Werte mit getComputedStyle vom <html>-Element, nicht vom
   * Abschnitt, in dem das Diagramm steht. Ein Diagramm in einem dunklen
   * Abschnitt bekäme sonst die hellen Werte der Seite. Also sind sie so
   * gewählt, dass jede Linie auf BEIDEN Gründen über 3.0:1 liegt —
   * Leuchtdichte zwischen 0.111 und 0.244, das ist das gesamte Fenster,
   * in dem das überhaupt geht. Gegen --bg hell / --bg dunkel:
   *   --s1    3.46 / 4.75
   *   --s2    3.54 / 4.65
   *   --s3    3.62 / 4.54
   *   --bench 3.36 / 4.89
   * Auf der schlechtesten Fläche beider Fassungen bleibt der engste Wert
   * --bench mit 3.15 gegen --surface-3 hell. Das frühere #7b8395 lag dort
   * bei 2.99 und fiel damit knapp durch — die zwei Hundertstel sind der
   * Grund für den Wechsel.
   * --s3 ist von Türkis auf Violett gewechselt: Türkis neben Cyan war im
   * Diagramm nicht mehr auseinanderzuhalten. */
  /* Serienfarben auf hellem Grund, gemessen gegen #e1e4ee — die DUNKELSTE
   * der vier hellen Flächen und damit die schwerste. Sie standen heller und
   * erfüllten als Diagrammlinie die 3,0er Schwelle; als Text in Legende und
   * Protokoll lagen sie bei 3,2 bis 3,4. Abgedunkelt statt umgefärbt, damit
   * Linie und Beschriftung dieselbe Farbe behalten.
   */
  --s1:#2061b6; --s2:#845b15; --s3:#8041d2; --s4:#196b6b; --s5:#b62b50; --s6:#486a1b;
  --s7:#a12ba1;   /* Indexfonds — 4.90:1 */
  --bench:#5e6372;

  /* ── Rangstufen ──────────────────────────────────────────────────────────
   *
   * Fünf Stufen, fünf Farben. Vorher trugen alle dieselbe Akzentfarbe — ein
   * Master und ein Provisional sahen identisch aus, und damit sagte die
   * Stufe nichts, was die Zahl daneben nicht schon sagte.
   *
   * Die Reihenfolge ist bewusst kein Verlauf von rot nach grün: eine
   * niedrige Stufe ist kein Fehler, sondern ein junger Agent. Sie geht von
   * kühl und ruhig nach warm und laut. */
  --tier-prov:#5e6372;   /* Provisional  — schiefergrau */
  --tier-appr:#196b6b;   /* Apprentice   — teal */
  --tier-jour:#2061b6;   /* Journeyman   — blau */
  --tier-expe:#8041d2;   /* Expert       — violett */
  --tier-mast:#845b15;   /* Master       — bernstein */

  /* ── Reine Marke, kontextfrei ─────────────────────────────────────────
   * Die einzige Stelle, an der Cyan unverändert stehen bleibt. Der
   * Hauptknopf ist auf jedem Grund derselbe, das ist der Wiedererkennungs-
   * punkt der ganzen Seite. Schrift darauf: #04121a = 12.34:1, Hover-Fläche
   * #4decff mit derselben Schrift = 13.34:1. */
  --cta-bg:#00e5ff; --cta-bg-hi:#4decff; --cta-ink:#04121a;
  /* Auf hellem Grund hat die Cyanfläche selbst nur 1.29:1 gegen den Grund —
   * als Bedienelement wäre sie damit nicht als Fläche erkennbar. Der Ring
   * übernimmt das (7.3:1). Auf Dunkel braucht es ihn nicht. */
  --cta-ring:rgba(0,83,97,.55);
  /* Der Glanz oben und das farbige Streulicht unten sind das Kennzeichen
   * des Vorbilds. Der Glanz ist in beiden Fassungen gleich; das Streulicht
   * muss auf Hell blasser sein, sonst wird aus dem Leuchten ein Schmutzrand. */
  --cta-inset:inset 0 1px 0 rgba(255,255,255,.55);
  --cta-glow:0 6px 20px -8px rgba(0,150,175,.55);

  --grid-line:rgba(16,20,28,.055); --pos-ring:rgba(26,107,63,.35);
  --shadow:0 1px 2px rgba(16,20,28,.06), 0 10px 28px -18px rgba(16,20,28,.30);
  --shadow-lg:0 2px 4px rgba(16,20,28,.07), 0 26px 54px -26px rgba(16,20,28,.36);

  /* ── Schrift ──────────────────────────────────────────────────────────
   * Eine Familie für alles: Space Grotesk. Der Name --serif ist ein Erbe
   * aus der vorigen Fassung und zeigt jetzt auf dieselbe Familie wie
   * --sans. Umbenennen hieße jede Seite anfassen; der Name lügt, der Wert
   * stimmt. --display ist der neue, ehrliche Name. */
  --sans:'Space Grotesk',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  --display:var(--sans);
  --serif:var(--sans);
  --mono:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;

  /* ── Typgrößen ────────────────────────────────────────────────────────
   * clamp(min, rem + vw, max), und die Mitte ist nicht geraten: sie ist so
   * gelegt, dass die Größe bei 400 px Fensterbreite exakt den Minimalwert
   * und bei 1800 px exakt den Maximalwert trifft. Steigung = (max−min)/14
   * vw, Sockel = min − Steigung·4. Der rem-Anteil bleibt drin, damit die
   * Schriftgröße des Browsers weiter wirkt — reines vw ignoriert sie.
   *   display  40 px @400  →  92 px @1800
   *   t1       32 → 56, t2 26 → 40, t3 20 → 24
   *   lede     17 → 21, body 15 → 16.5 */
  --fs-display:clamp(2.5rem, 1.571rem + 3.714vw, 5.75rem);
  --fs-1:clamp(2rem, 1.571rem + 1.714vw, 3.5rem);
  --fs-2:clamp(1.625rem, 1.375rem + 1vw, 2.5rem);
  --fs-3:clamp(1.25rem, 1.179rem + 0.286vw, 1.5rem);
  --fs-lede:clamp(1.0625rem, 0.991rem + 0.286vw, 1.3125rem);
  --fs-body:clamp(0.9375rem, 0.911rem + 0.107vw, 1.03125rem);
  --fs-sm:13.5px; --fs-xs:12px; --fs-micro:10.5px;

  /* Enge Laufweite auf großen Graden, weite auf kleinen Versalien — das ist
   * der halbe Charakter des Vorbilds. Unter 20 px zieht --track-display die
   * Buchstaben ineinander, deshalb zwei getrennte Werte. */
  --track-display:-.03em; --track-tight:-.015em; --track-label:.14em;

  /* ── Radien ───────────────────────────────────────────────────────────
   * 10 px Knöpfe, 16 px Karten, 999 px Pillen — die Staffelung des
   * Vorbilds. --r-sm war früher 6 px und wandert damit auf 10, --r von 10
   * auf 16; beide Namen behalten ihre Rolle (klein = Bedienelement,
   * normal = Fläche), nur der Wert wächst. */
  --r-xs:6px; --r-sm:10px; --r:16px; --r-lg:20px; --r-pill:999px;

  /* ── Maße ─────────────────────────────────────────────────────────────
   * 1280 statt der früheren 1340 px: das Vorbild hält die Textspalte
   * enger, und bei 1340 rutschten die vierspaltigen Raster auseinander. */
  --wrap:1280px;
  --head-gap:14px; --head-h:54px;
  /* Wie weit etwas Klebriges unter der Kapsel stehen muss. Wer sich daran
   * hält, rutscht nie darunter — auch nicht, wenn die Kapsel später eine
   * andere Höhe bekommt. Vorher standen hier feste Pixelwerte in drei
   * Dateien, und einer davon hatte genau 6 px Luft. */
  --head-clear:calc(var(--head-h) + var(--head-gap) * 2 + 16px);
  --head-bg:rgba(255,255,255,.82);

  /* ── Dunkles Band, Rohwerte ───────────────────────────────────────────
   * Diese Werte stehen genau EINMAL. Die drei Stellen unten, an denen
   * Dunkel greift (Systemvorgabe, Themenschalter, einzelner Abschnitt),
   * verweisen nur darauf. Der Präfix --d- ist so gewählt, dass die
   * Hex-Suche in verify.js sie nicht mit den echten Tokens verwechselt.
   *
   * Kontraste gegen die schlechteste dunkle Fläche --surface-3 (#1e2430)
   * bzw. gegen --bg:
   *   --d-ink     13.75 / 17.30
   *   --d-ink-2    7.06 /  8.88
   *   --d-muted    4.79 /  6.02   ← #858fa4, nicht #7e889c: das lag bei 4.36
   *   --d-accent  10.11 / 12.72
   *   --d-pos      7.83 /  9.85
   *   --d-neg      5.25 /  6.61
   *   --d-line-2   3.27 /  4.12   (Bauteilrand, Schwelle 3.0)
   *   --d-line     1.34 gegen --bg — bewusst nur Trennlinie */
  --d-bg:#0a0c10; --d-surface:#12151c; --d-surface-2:#171b24; --d-surface-3:#1e2430;
  --d-ink:#eef1f7; --d-ink-2:#a6afc2; --d-muted:#858fa4;
  --d-line:#232935; --d-line-2:#6a7387;
  --d-accent:#00e5ff; --d-accent-ink:#7df2ff; --d-accent-on:#04121a;
  --d-accent-wash:rgba(0,229,255,.13);
  --d-pos:#46d07c; --d-pos-wash:rgba(70,208,124,.15);
  --d-neg:#ff6155; --d-neg-wash:rgba(255,97,85,.15);
    /* Serienfarben auf dunklem Grund.
   *
   * Bis hierher hatten sie keine dunkle Fassung — sie erfüllen als
   * DIAGRAMMLINIE die 3,0er Schwelle auf beiden Gründen, und das schien zu
   * reichen. Sie werden aber auch als TEXT benutzt: im Live-Protokoll steht
   * der Name des Agenten in der Farbe seiner Linie, damit man Zeile und
   * Kurve zusammenbringt. Als Text gilt 4,5 — und dort lagen sie bei 3,6
   * bis 3,9 gegen die hellste dunkle Fläche.
   *
   * Aufgehellt statt umgefärbt: der Farbton bleibt, sonst gehörten Linie
   * und Beschriftung sichtbar nicht mehr zusammen, und genau dafür sind sie
   * da. Gemessen gegen #1e2430, die hellste der vier dunklen Flächen. */
  --d-s1:#528fe0; --d-s4:#259d9d; --d-s5:#dc6a89; --d-s6:#699b27; --d-s7:#d45ed4;
  --d-tier-prov:#98a0b2; --d-tier-appr:#259d9d; --d-tier-jour:#528fe0;
  --d-tier-expe:#a77be0; --d-tier-mast:#b8801e;
  --d-s2:#b8801e; --d-s3:#a77be0;
  --d-bench:#888e9f;   /* 4.75:1 */
--d-grid-line:rgba(255,255,255,.045); --d-pos-ring:rgba(70,208,124,.45);
  --d-shadow:0 1px 2px rgba(0,0,0,.55), 0 14px 34px -20px rgba(0,0,0,.9);
  --d-shadow-lg:0 2px 6px rgba(0,0,0,.6), 0 30px 60px -26px rgba(0,0,0,.95);
  --d-head-bg:rgba(18,21,28,.78);

  color-scheme:light;
}

/* Setzt nur die Farbschemameldung an den Browser; die Palette oben ist
 * bereits die helle. Der Block bleibt außerdem stehen, weil verify.js die
 * helle Fassung hier abschneidet — siehe Kopf der Datei. */
@media (prefers-color-scheme:light){
  :root:not([data-theme="dark"]){ color-scheme:light }
}

/* Systemvorgabe dunkel, solange niemand ausdrücklich hell gewählt hat. */
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --bg:var(--d-bg); --surface:var(--d-surface);
    --surface-2:var(--d-surface-2); --surface-3:var(--d-surface-3);
    --ink:var(--d-ink); --ink-2:var(--d-ink-2); --muted:var(--d-muted);
    --line:var(--d-line); --line-2:var(--d-line-2);
    --accent:var(--d-accent); --accent-ink:var(--d-accent-ink);
    --accent-on:var(--d-accent-on); --accent-wash:var(--d-accent-wash);
    --pos:var(--d-pos); --pos-wash:var(--d-pos-wash);
    --neg:var(--d-neg); --neg-wash:var(--d-neg-wash);
    --s1:var(--d-s1); --s2:var(--d-s2); --s3:var(--d-s3);
  --s4:var(--d-s4); --s5:var(--d-s5); --s6:var(--d-s6); --s7:var(--d-s7);
  --bench:var(--d-bench);
  --tier-prov:var(--d-tier-prov); --tier-appr:var(--d-tier-appr);
  --tier-jour:var(--d-tier-jour); --tier-expe:var(--d-tier-expe);
  --tier-mast:var(--d-tier-mast);
  --grid-line:var(--d-grid-line); --pos-ring:var(--d-pos-ring);
    --shadow:var(--d-shadow); --shadow-lg:var(--d-shadow-lg);
    --head-bg:var(--d-head-bg);
    --cta-ring:transparent;
    --cta-glow:0 0 0 1px rgba(0,229,255,.22), 0 12px 34px -10px rgba(0,229,255,.5);
    color-scheme:dark;
  }
}

/* Dieselben Werte für zwei verschiedene Fragen, und deshalb in einem Zug:
 * „die ganze Seite ist dunkel" (Schalter) und „dieser eine Abschnitt ist
 * dunkel" (das Hero, und jeder weitere Abschnitt, der sich so auszeichnet).
 * Weil Custom Properties vererben, reicht das Attribut auf dem <section> —
 * alles darin, Karten, Tabellen, Diagrammrahmen, rechnet ab da mit der
 * dunklen Palette, ohne dass ein Bauteil davon wissen muss. */
:root[data-theme="dark"],
[data-surface="dark"]{
  /* Die Serienfarben müssen hier mit durch. Sie standen zuerst NUR im
   * @media-Block für die Systemvorgabe — wer den Theme-Schalter benutzte
   * oder ein dunkles Band auf heller Seite ansah, bekam dunklen Grund mit
   * den HELLEN Linienfarben darauf. Gemessen 2.96:1, im Browser gefunden,
   * nicht in dieser Datei: zwei Blöcke, die dasselbe tun sollen, driften
   * auseinander, sobald man einen davon anfasst. Deshalb prüft verify.js
   * jetzt, dass beide dieselbe Liste tragen. */
  --s1:var(--d-s1); --s2:var(--d-s2); --s3:var(--d-s3);
  --s4:var(--d-s4); --s5:var(--d-s5); --s6:var(--d-s6); --s7:var(--d-s7);
  --bench:var(--d-bench);
  --tier-prov:var(--d-tier-prov); --tier-appr:var(--d-tier-appr);
  --tier-jour:var(--d-tier-jour); --tier-expe:var(--d-tier-expe);
  --tier-mast:var(--d-tier-mast);
  --bg:var(--d-bg); --surface:var(--d-surface);
  --surface-2:var(--d-surface-2); --surface-3:var(--d-surface-3);
  --ink:var(--d-ink); --ink-2:var(--d-ink-2); --muted:var(--d-muted);
  --line:var(--d-line); --line-2:var(--d-line-2);
  --accent:var(--d-accent); --accent-ink:var(--d-accent-ink);
  --accent-on:var(--d-accent-on); --accent-wash:var(--d-accent-wash);
  --pos:var(--d-pos); --pos-wash:var(--d-pos-wash);
  --neg:var(--d-neg); --neg-wash:var(--d-neg-wash);
  --grid-line:var(--d-grid-line); --pos-ring:var(--d-pos-ring);
  --shadow:var(--d-shadow); --shadow-lg:var(--d-shadow-lg);
  --head-bg:var(--d-head-bg);
  --cta-ring:transparent;
  --cta-glow:0 0 0 1px rgba(0,229,255,.22), 0 12px 34px -10px rgba(0,229,255,.5);
  color-scheme:dark;
}

/* Der Gegenweg. Nötig, sobald die Systemvorgabe dunkel ist: dann steht die
 * dunkle Palette schon auf :root und muss hier vollständig zurückgenommen
 * werden — verweisen genügt nicht, es sind die Ausgangswerte selbst.
 * Dass hier Hex und nicht var() steht, ist zusätzlich Bedingung von
 * verify.js, das genau ab dieser Zeile die helle Fassung prüft. */
:root[data-theme="light"],
[data-surface="light"]{
  --bg:#e9ebf2; --surface:#ffffff; --surface-2:#f1f2f7; --surface-3:#e1e4ee;
  --ink:#10141c; --ink-2:#454c5c; --muted:#596076;
  --line:#c9cfde; --line-2:#767e96;
  --accent:#006b7a; --accent-ink:#005361; --accent-on:#ffffff;
  --accent-wash:rgba(0,229,255,.20);
  --pos:#1a6b3f; --pos-wash:rgba(26,107,63,.12);
  --neg:#b4261c; --neg-wash:rgba(180,38,28,.12);
  --s1:#2e7be6; --s2:#b36a0e; --s3:#8a5cf0; --bench:#787f92;
  --grid-line:rgba(16,20,28,.055); --pos-ring:rgba(26,107,63,.35);
  --shadow:0 1px 2px rgba(16,20,28,.06), 0 10px 28px -18px rgba(16,20,28,.30);
  --shadow-lg:0 2px 4px rgba(16,20,28,.07), 0 26px 54px -26px rgba(16,20,28,.36);
  --head-bg:rgba(255,255,255,.82);
  --cta-ring:rgba(0,83,97,.55);
  --cta-glow:0 6px 20px -8px rgba(0,150,175,.55);
  color-scheme:light;
}

/* ── Grundlagen ─────────────────────────────────────────────────────────── */

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:var(--sans); font-size:var(--fs-body); line-height:1.6;
  font-feature-settings:'ss01' 1;
  -webkit-font-smoothing:antialiased;
}

/* Ein ausgezeichneter Abschnitt streicht sich selbst. Ohne diese Regel
 * müsste jede Seite daran denken, und genau das vergisst man. */
[data-surface]{background:var(--bg); color:var(--ink)}

h1,h2,h3,h4{
  font-family:var(--display); font-weight:600; line-height:1.06;
  margin:0; letter-spacing:var(--track-display);
}
h1{font-size:var(--fs-1)}
h2{font-size:var(--fs-2)}
h3{font-size:var(--fs-3); line-height:1.2; letter-spacing:var(--track-tight)}
h4{font-size:1rem; letter-spacing:var(--track-tight)}
/* Der ganz große Grad. Er gehört ans Hero und an sonst nichts. */
.display{font-size:var(--fs-display); line-height:1.02; letter-spacing:var(--track-display)}
.lede{font-size:var(--fs-lede); color:var(--ink-2); line-height:1.6; max-width:38em}
p{margin:0 0 .85em}
a{color:var(--ink); text-underline-offset:3px; text-decoration-thickness:1px}
a:hover{color:var(--accent)}
button,input,select,textarea{font:inherit; color:inherit}
/* Der Fokusring nimmt --accent und nicht die reine Markenfläche: auf hellem
 * Grund hätte Cyan 1.29:1 und wäre als Ring unsichtbar. So sind es 5.21:1
 * auf Hell und 12.72:1 auf Dunkel. */
:focus-visible{outline:2px solid var(--accent); outline-offset:2px; border-radius:3px}

.num{font-family:var(--mono); font-variant-numeric:tabular-nums}
.pos{color:var(--pos)} .negc{color:var(--neg)}
.mute{color:var(--muted)}
.wrap{max-width:var(--wrap); margin:0 auto; padding:0 22px}

/* Kapitälchen-Label. Trägt die ganze Seite, deshalb ein eigener Baustein. */
.eyebrow{
  font-family:var(--mono); font-size:var(--fs-micro); letter-spacing:var(--track-label);
  text-transform:uppercase; color:var(--muted); font-weight:500;
}

/* ── Kopfzeile als schwebende Kapsel ────────────────────────────────────── */

/* Die Kopfzeile klebt nicht am Fensterrand, sie schwimmt darunter. Gestylt
 * wird sie hier und nicht in build.css, weil sie auf jeder Seite dieselbe
 * ist; `header.site` schlägt das dortige `.site` in der Spezifität, sodass
 * die Reihenfolge der <link>-Zeilen keine Rolle spielt. Die Kapsel ist das
 * .inner, nicht der Header — nur so bleibt der Balken oben durchsichtig und
 * das dunkle Band darunter durchgehend sichtbar. */
/* Die Kapsel schwebt ÜBER dem Inhalt, sie steht nicht darauf.
 *
 * Mit `sticky` belegte sie 60 px im Fluss — und weil sie vor dem ersten
 * Abschnitt steht, schien darüber ein heller Streifen durch, obwohl das
 * Hero ein dunkles Band ist. Der Seitenanfang sah aus wie ein Fehler beim
 * Zuschneiden: hell, dann eine Kante, dann dunkel.
 *
 * `fixed` nimmt sie aus dem Fluss, das Hero beginnt bei y=0 und sein
 * dunkler Grund reicht bis unter die Kapsel. Den Platz für die Kapsel gibt
 * der erste Abschnitt selbst als Innenabstand — sein Hintergrund liegt
 * darunter weiter durchgehend. */
header.site{
  position:fixed; top:var(--head-gap); left:0; right:0; z-index:40;
  background:transparent; border-bottom:0;
  padding:0 22px;
}

/* Der erste Abschnitt jeder Seite macht der Kapsel Platz — als
 * Innenabstand, nicht als Außenabstand, damit sein Hintergrund oben
 * durchläuft. */
/* Zwei Selektoren, und der erste ist kein Versehen: `.band` in site.css hat
 * (0,1,0) und wird SPÄTER geladen, schlägt ein blankes `main > :first-child`
 * (0,0,1) also glatt. Die Folge war ein Innenabstand von 64 statt 126 px —
 * die erste Zeile klebte unter der Kapsel, und zwar genau um die Differenz.
 * `:first-child.band` kommt auf (0,2,0) und gewinnt; die zweite Zeile deckt
 * die Seiten ab, deren erstes Element kein Band ist. */
/* Ein Sprung auf #board darf nicht unter der fixierten Kapsel landen. Ohne
 * scroll-margin-top steht die Überschrift des Ziels genau dahinter — man
 * klickt einen Anker an und die erste Zeile fehlt. */
/* `hidden` muss gewinnen.
 *
 * Das Attribut setzt der Browser über `display:none` in seinem eigenen
 * Stylesheet — und jede Klassenregel mit einem eigenen `display` schlägt
 * das. Auf dem Board stand deshalb ein LEERER KNOPF: `.board-more` trug
 * `display:flex`, das Element war als `hidden` markiert und wurde trotzdem
 * gezeichnet, mit einer Beschriftung, die nur im sichtbaren Fall gesetzt
 * wird. Ein Knopf ohne Text, der nichts tut.
 *
 * Diese eine Zeile schließt die ganze Gattung, statt sie Klasse für Klasse
 * nachzuziehen. */
/* Zwei dunkle Bänder direkt hintereinander verschmelzen zu einer Fläche.
 * Das Hero endet dann irgendwo im Nichts und der nächste Abschnitt fängt
 * irgendwo an — dazwischen stehen zweimal 64 px Polster ohne erkennbare
 * Kante, und genau das liest sich als „Abstand stimmt nicht".
 *
 * Eine Haarlinie und etwas weniger Polster an der Nahtstelle machen daraus
 * einen Schnitt. Gleiches gilt für zwei helle Bänder. */
[data-surface="dark"] + [data-surface="dark"],
.band + .band:not([data-surface]){
  border-top:1px solid var(--line);
}
[data-surface="dark"] + [data-surface="dark"]{
  padding-top:52px;
}

[hidden]{display:none !important}

[id]{scroll-margin-top:var(--head-clear)}

main > :first-child.band,
main > :first-child{
  /* Kapselhöhe + zweimal der Abstand + Luft. */
  padding-top:calc(var(--head-h) + var(--head-gap) * 2 + 44px);
}
header.site > .wrap.inner{
  display:flex; align-items:center; gap:22px;
  height:auto; min-height:var(--head-h);
  padding:7px 8px 7px 18px;
  border:1px solid var(--line); border-radius:var(--r-pill);
  background:var(--head-bg); box-shadow:var(--shadow-lg);
  -webkit-backdrop-filter:saturate(1.6) blur(14px);
  backdrop-filter:saturate(1.6) blur(14px);
}
/* motion.css legt beim Scrollen einen vollbreiten Balken auf `header.site`.
 * Das war für eine angeklebte Kopfzeile richtig und ist für eine schwebende
 * falsch — die Kapsel bekäme einen zweiten, rechteckigen Hintergrund hinter
 * sich. `html` davor hebt die Spezifität gerade so weit, dass es greift. */
html header.site.stuck{
  background:transparent; border-bottom-color:transparent;
  -webkit-backdrop-filter:none; backdrop-filter:none;
}
/* Der Wortmarke die Laufweite des Vorbilds geben. build.css setzt +.04em,
 * was zu einer Serifenlogik gehörte, die es hier nicht mehr gibt. */
header.site .mark{letter-spacing:-.02em; font-weight:700}

/* ── Die Kapsel auf schmalen Schirmen ───────────────────────────────────────
 *
 * Die schwebende Kapsel war nur für breit gedacht und lief unter 700 px aus
 * dem Bild: 44 px Seitenrand plus zweimal 22 px Abstand plus eine rechte
 * Gruppe, die nicht schrumpfen kann. Bei 368 px brauchte der Inhalt 340 px
 * in einer 309 px breiten Kapsel — der Knopf brach auf drei Zeilen um und
 * wurde am Rand abgeschnitten.
 *
 * Ein Knopf darf seine Beschriftung NIE umbrechen. Das steht deshalb
 * unbedingt und nicht in einer Media Query: ein umgebrochener Knopf ist
 * kaputt, egal wie breit der Schirm ist. */
.btn, .site .mark, .who-chip{white-space:nowrap}

@media (max-width:820px){
  header.site{padding-inline:14px}
  header.site > .wrap.inner{gap:12px; padding:6px 7px 6px 14px}
}

@media (max-width:620px){
  header.site{padding-inline:10px}
  header.site > .wrap.inner{gap:8px; padding:5px 6px 5px 12px; min-height:46px}
  header.site .mark{font-size:17px; gap:6px}
  header.site .mark .mk{width:17px; height:17px}
  /* Die rechte Gruppe eng setzen, aber vollständig lassen — ein Bedienelement
   * wegzublenden, weil das Fenster klein ist, nimmt jemandem eine Funktion. */
  header.site .right{gap:6px}
  header.site .right .btn{padding:6px 11px; font-size:11px; letter-spacing:.04em}
}

@media (max-width:430px){
  /* Unter 430 px reicht das Zeichen. Der Schriftzug steht drei Zeilen
   * weiter unten im Hero noch einmal, und zwar groß — hier kostet er nur
   * den Platz, den der Knopf braucht. */
  header.site .mark span{display:none}
  /* Ohne den Schriftzug schrumpft der Link auf die 17 Pixel des Zeichens.
   * WCAG 2.2 verlangt 24×24 für ein Bedienelement, und ein Ziel, das
   * kleiner ist als die Fingerkuppe, trifft man auf dem Telefon nicht.
   * Das Polster vergrößert die Fläche, das negative Außenmaß hält das
   * Zeichen an seinem Platz — sichtbar ändert sich nichts. */
  header.site .mark{padding:5px; margin:-5px}
  header.site > .wrap.inner{padding-left:10px}
}

/* ── Flächen ────────────────────────────────────────────────────────────── */

.card{
  background:var(--surface); border:1px solid var(--line);
  border-radius:var(--r); box-shadow:var(--shadow);
}
.card-pad{padding:20px 22px}

/* Nummerierter Schritt im Baukasten. Die Ziffer sitzt in der Marginalie,
 * wie eine Absatznummer in einem Vertrag. */
.step{margin-bottom:16px}
.step-head{display:flex; align-items:baseline; gap:12px; padding:16px 22px 0}
.step-n{
  font-family:var(--mono); font-size:11px; font-weight:600; color:var(--accent);
  border:1px solid var(--accent); border-radius:var(--r-xs); padding:1px 6px; flex:none;
}
.step-title{font-family:var(--display); font-size:1.125rem; font-weight:600; letter-spacing:var(--track-tight)}
.step-sub{color:var(--muted); font-size:var(--fs-sm); margin-left:auto; text-align:right}
.step-body{padding:14px 22px 20px}

/* ── Knöpfe ─────────────────────────────────────────────────────────────── */

.btn{
  display:inline-flex; align-items:center; gap:7px; cursor:pointer;
  padding:9px 16px; border-radius:var(--r-sm); border:1px solid var(--line-2);
  background:var(--surface); color:var(--ink); font-size:var(--fs-sm); font-weight:500;
  letter-spacing:-.005em;
  transition:background .12s, border-color .12s, color .12s, box-shadow .16s;
  /* Knöpfe sind auch dann Knöpfe, wenn sie ein <a> sind — sonst zieht die
   * Unterstreichung aus der Grundregel für Links mit ein. */
  text-decoration:none;
}
.btn:hover{background:var(--surface-2); border-color:var(--ink-2); color:var(--ink)}

/* Der eine Knopf, der auf jedem Grund gleich aussieht. Er nimmt --cta-bg
 * statt --accent, weil --accent auf Hell abgedunkelt ist — der Hauptknopf
 * soll aber überall dasselbe Cyan sein. Der weiße Glanz oben und das
 * farbige Streulicht unten sind das, was ihn plastisch macht; ohne den
 * inset sieht die Fläche flach und billig aus. */
.btn-primary{
  background:var(--cta-bg); border-color:var(--cta-ring); color:var(--cta-ink);
  font-weight:600;
  box-shadow:var(--cta-inset), var(--cta-glow);
}
.btn-primary:hover{
  background:var(--cta-bg-hi); border-color:var(--cta-ring); color:var(--cta-ink);
  box-shadow:var(--cta-inset), var(--cta-glow);
}
.btn-sm{padding:7px 14px; font-size:var(--fs-xs)}
.btn-ghost{border-color:transparent; background:transparent; color:var(--muted); box-shadow:none}
.btn-ghost:hover{background:var(--surface-2); color:var(--ink)}
.btn[disabled]{opacity:.45; cursor:not-allowed}

/* ── Eingaben ───────────────────────────────────────────────────────────── */

.inp,.sel{
  background:var(--surface-2); border:1px solid var(--line-2); color:var(--ink);
  border-radius:var(--r-sm); padding:6px 10px; font-size:var(--fs-sm); max-width:100%;
}
.sel{font-family:var(--sans); cursor:pointer}
.inp.num-in{font-family:var(--mono); text-align:right; width:74px}

/* Wählbare Kachel: Universum-Werte, Vorlagen, Divisionen. */
.chip{
  display:inline-flex; align-items:center; gap:6px; cursor:pointer; user-select:none;
  padding:5px 12px; border-radius:var(--r-pill); border:1px solid var(--line-2);
  background:var(--surface-2); font-size:var(--fs-xs); transition:all .12s;
}
.chip:hover{border-color:var(--ink-2)}
.chip[aria-pressed="true"]{
  background:var(--accent-wash); border-color:var(--accent); color:var(--accent-ink); font-weight:600;
}
.chip .t{font-family:var(--mono); font-size:11.5px}
/* Klarname vorn, Kürzel klein dahinter. „SPYx" allein sagt niemandem
   etwas, der es nicht schon weiß. */
.sym-n{font-size:var(--fs-xs)}
.sym-t{font-family:var(--mono); font-size:10px; color:var(--muted); margin-left:5px}
.chip[aria-pressed="true"] .sym-t{color:var(--accent-ink); opacity:.75}

/* ── Reiter ─────────────────────────────────────────────────────────────── */

.tabs{display:flex; gap:2px; border-bottom:1px solid var(--line)}
.tab{
  cursor:pointer; background:none; border:none; padding:9px 14px;
  font-size:var(--fs-sm); color:var(--muted); border-bottom:2px solid transparent; margin-bottom:-1px;
}
.tab:hover{color:var(--ink)}
.tab[aria-selected="true"]{color:var(--ink); border-bottom-color:var(--accent); font-weight:600}

/* ── Marker ─────────────────────────────────────────────────────────────── */

.tag{
  display:inline-flex; align-items:center; gap:5px; padding:2px 8px; border-radius:var(--r-xs);
  font-family:var(--mono); font-size:10px; letter-spacing:var(--track-label); text-transform:uppercase;
  border:1px solid var(--line-2); color:var(--muted); background:var(--surface-2);
}
.tag-warn{border-color:var(--accent); color:var(--accent-ink); background:var(--accent-wash)}
.tag-ok{border-color:var(--pos); color:var(--pos); background:transparent}

/* Schraffur. Markiert überall im Produkt „rückgerechnet, nicht gelaufen".
 * Diese Grenze ist das Verkaufsargument des Projekts — sie muss sichtbar
 * sein, nicht im Kleingedruckten stehen. */
.hatched{
  background-image:repeating-linear-gradient(
    -45deg, transparent 0 6px, var(--accent-wash) 6px 12px);
}

/* ── Diagramm-Umgebung ──────────────────────────────────────────────────── */

.plot{position:relative}
.plot svg{display:block; width:100%; height:auto; touch-action:pan-y}
.tip{
  position:absolute; pointer-events:none; opacity:0; transition:opacity .1s;
  background:var(--surface); border:1px solid var(--line-2); border-radius:var(--r-sm);
  padding:8px 11px; font-size:var(--fs-xs); box-shadow:var(--shadow-lg); z-index:5; white-space:nowrap;
}
.tip .th{display:block; font-family:var(--mono); font-size:10px; letter-spacing:var(--track-label);
  text-transform:uppercase; color:var(--muted); margin-bottom:3px}
.legend{display:flex; flex-wrap:wrap; gap:14px; font-size:var(--fs-xs); color:var(--ink-2)}
.legend span{display:inline-flex; align-items:center; gap:6px}
.legend i{width:16px; border-top:2.5px solid; display:inline-block}

/* ── Kennzahlenraster ───────────────────────────────────────────────────── */

.stats{display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--line)}
.stat{background:var(--surface); padding:12px 14px}
.stat .k{font-family:var(--mono); font-size:9.5px; letter-spacing:var(--track-label);
  text-transform:uppercase; color:var(--muted)}
.stat .v{font-family:var(--mono); font-size:19px; font-weight:600; margin-top:2px; letter-spacing:var(--track-tight)}
.stat .s{font-size:11px; color:var(--muted); margin-top:1px}

/* ── Tabelle ────────────────────────────────────────────────────────────── */

table.t{width:100%; border-collapse:collapse; font-size:var(--fs-xs)}
table.t th{
  text-align:left; font-family:var(--mono); font-size:9.5px; letter-spacing:var(--track-label);
  text-transform:uppercase; color:var(--muted); font-weight:500;
  padding:7px 10px; border-bottom:1px solid var(--line);
}
table.t td{padding:7px 10px; border-bottom:1px solid var(--line)}
table.t tr:last-child td{border-bottom:none}
table.t .r{text-align:right; font-family:var(--mono); font-variant-numeric:tabular-nums}

.scroll-x{overflow-x:auto; -webkit-overflow-scrolling:touch}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{transition-duration:.01ms !important; animation-duration:.01ms !important}
}

/* ── Diagramm-Bewegung ──────────────────────────────────────────────────── */

/* Der Puls sitzt am letzten Punkt der Hauptkurve, also dort, wo „jetzt" ist.
   Er markiert, dass gerade gerechnet wird — nicht, dass Kurse hereinströmen.
   Was die Daten sind, steht unter dem Diagramm. */
@keyframes ln-pulse{
  0%{r:4; opacity:.85}
  70%{r:13; opacity:0}
  100%{r:13; opacity:0}
}
.ln-pulse{animation:ln-pulse 1.9s ease-out infinite}

/* Linien laufen einmal ein. pathLength="1" im SVG macht die Länge
   unabhängig von der tatsächlichen Kurve. */
@keyframes ln-draw{ from{stroke-dashoffset:1} to{stroke-dashoffset:0} }
.ln-draw{stroke-dasharray:1; stroke-dashoffset:0; animation:ln-draw .85s ease-out}

/* Live-Marke: ein Punkt, der atmet. */
@keyframes live-dot{ 0%,100%{opacity:1} 50%{opacity:.25} }
.live-chip{
  display:inline-flex; align-items:center; gap:6px; padding:3px 10px; border-radius:var(--r-pill);
  border:1px solid var(--pos); color:var(--pos); background:transparent;
  font-family:var(--mono); font-size:10px; letter-spacing:var(--track-label); text-transform:uppercase;
}
.live-chip i{width:6px; height:6px; border-radius:50%; background:var(--pos); flex:none;
  animation:live-dot 1.4s ease-in-out infinite}

@media (prefers-reduced-motion:reduce){
  .ln-pulse, .ln-draw, .live-chip i{animation:none !important}
  .ln-draw{stroke-dasharray:none}
  .ln-pulse{opacity:.5}
}

/* ── Offene Punkte in der Bauteilschicht ────────────────────────────────
 *
 * Zwei Stellen außerhalb dieser Datei benutzen var(--accent) noch so, wie
 * es vor der Umstellung gemeint war, und sollten nachgezogen werden:
 *
 *   site.css .stepc .n — Ziffer in Akzentfarbe. Steht in einem hellen
 *     Abschnitt und ist mit dem kontextabhängigen --accent jetzt lesbar
 *     (5.21:1); vorher wäre sie mit reinem Cyan bei 1.29:1 gelandet. Nichts
 *     zu tun, hier nur als Beleg, dass die Umstellung genau das repariert.
 *
 *   ui.css .pill — Fläche in var(--accent), Schrift in var(--accent-on).
 *     Auf dem dunklen Band ist das die reine Cyanpille des Vorbilds, auf
 *     hellem Grund wird sie petrol mit weißer Schrift (6.21:1). Wer sie
 *     überall cyan will, tauscht dort --accent gegen --cta-bg und
 *     --accent-on gegen --cta-ink; lesbar ist beides.
 */