/* ── Das gemeinsame Stilblatt der öffentlichen Seiten (Posten 253/254) ──────
 *
 * Warum es das gibt: Sechs Seiten trugen sechs eigene <style>-Blöcke, und
 * daraus waren drei Dialekte geworden — datenschutz.html behauptete im
 * Kommentar „dieselben Tokens wie konto.html" und führte eigene Mint- und
 * Bernsteinfarben, die Rechtsseiten tippten 18 Radien neben der 4er-Leiter
 * (3/6/7/10/12/13/14 px). Ein Kommentar, der Gleichheit behauptet, während
 * die Werte auseinanderlaufen, ist LEHREN §8 — hier stand er auf der
 * öffentlichen Fläche.
 *
 * Was hier steht: die EINE Wahrheit über Tokens, Grundgerüst, Kopfleiste,
 * Knöpfe und Fuss. Was hier NICHT steht: die Wortmarke (`.brand .dot`) —
 * sie wird von `app/scripts/wortmarke.mjs` je Seite erzeugt und von
 * `wortmarke-waechter.mjs` byteweise gegen den Erzeuger gehalten; ein
 * erzeugtes Bild gehört zu seinem Erzeuger, nicht in ein Stilblatt. Und die
 * seitenspezifischen Abschnitte (Hero, Plattform-Karten, Rechtstext-Spalte)
 * bleiben bei ihren Seiten.
 *
 * Ausgeliefert wird die Datei vom Gateway wie die Seiten selbst:
 * `gateway/server/index.js` nimmt sie in die host-unabhängige Route auf,
 * sonst fiele `/stil.css` auf den Deck-Zweig und jede Seite stünde nackt da.
 *
 *
 * ══ DAS WARME KLEID (21.08.2026) ═══════════════════════════════════════════
 *
 * BESITZER-WORT: „Früher hatten wir die dunkelblaue Kira-Seite und App; heute
 * soll ALLES im warmen Look von Aphenius sein, weil wir Aphenius und Kira zu
 * einem gemacht haben." Es gibt eine Firma, ein Produkt, einen Auftritt.
 *
 * Bis heute stand hier eine zweite Wahrheit über dieselbe Oberfläche: ein
 * kühles Dunkelblau (`--ground: #0B0E13`), eine blaustichige Tinte
 * (`rgba(235,240,248,…)`) und sechs Akzente aus einer anderen Familie
 * (Mint #7FD4C1, Peri #8FA8E8, Bernstein #E5C078 …). Der Auftritt eine Tür
 * weiter — `site/aphenius/` — trug längst warmes Anthrazit, Creme-Tinte und
 * EINEN Akzent. Wer von der Firmenseite auf die Datenschutzerklärung klickte,
 * wechselte das Haus, ohne die Adresse zu wechseln.
 *
 * WOHER DIE WERTE KOMMEN — gelesen, nicht erfunden: aus dem Blatt der
 * Nachbarfläche, `gateway/site/aphenius.css` (Haus-Fassung, nicht die rohe
 * aus `site/aphenius/assets/index-*.css` — dort stehen `--text-micro: 9px`
 * und `--r-lg: 6px`, und beide fallen in `gateway/test/gestaltung.test.js`).
 * Die Zuordnung Marke für Marke:
 *
 *   --ground   ← --sf-0 #131210     --text-1 ← --ink-1 #eeeae0
 *   --surface  ← --sf-1 #1a1814     --text-2 ← --ink-2 #a8a395
 *   --hairline ← --line-* (warmweiss statt weiss)
 *   --text-3   ← --ink-3 #948e80    --edge   ← --stroke-figure
 *   --akzent   ← oklch(.74 .13 65), der EINE Akzent des Auftritts
 *   --amber/--coral/--moss ← --status-warn/-error/-ok, wörtlich übernommen
 *   --gold     ← --cat-2 oklch(.74 .12 95)
 *
 * WARUM HEX UND NICHT oklch: Der Auftritt schreibt oklch. Dieses Blatt wird
 * von drei Messgeräten gelesen, die hex/rgba/hsl verstehen und oklch nicht —
 * `app/src/kontrast.ts` wirft bei allem anderen ausdrücklich, und
 * `app/scripts/blaupause-waechter.mjs` rechnet mit einer Kopie dieser Marken
 * (dort G8a). Ein Farbwert, den der Wächter nicht lesen kann, ist ein Wert,
 * der nicht gemessen wird. Der oklch-Ursprung steht deshalb je Zeile daneben:
 * so bleibt die Abstammung prüfbar, ohne dass ein Wächter ausfällt.
 *
 * DIE SECHS AKZENTE HEISSEN JETZT, WAS SIE SIND: `--mint` und `--peri` hätten
 * einen Bernstein und ein Gold getragen — ein Name, der eine Farbe behauptet,
 * die der Wert nicht hat, ist LEHREN §8 in seiner stillsten Form. Aus
 * `--mint` wurde `--akzent`, aus `--mint-strong` `--akzent-hell`, aus `--peri`
 * `--gold`. `--amber`, `--coral` und `--moss` behalten ihre Namen: sie tragen
 * weiterhin Bernstein, Koralle und Moos, nur in der warmen Familie. Ein
 * Alias-Paar (`--mint: var(--akzent)`) stünde hier ausdrücklich NICHT — das
 * wären wieder zwei Namen für eine Farbe. Alle Fundstellen sind mitgezogen,
 * auch die auf `konto.html` und `laden.html`, die unter dem Dach gefaltet
 * werden und auf jedem anderen Wirt weiter ganz herauskommen.
 *
 * DIE SCHRIFT IST MITGEKOMMEN (21.08.2026). Hier stand der Gegenbeweis: Der
 * Auftritt läuft auf Geist, die beiden `.woff2` liegen unter
 * `gateway/site/fonts/` (69 652 B und 71 368 B), die CSP dieser Seiten
 * erlaubt sie ausdrücklich (`font-src 'self'`) — und erreichbar waren sie
 * trotzdem nur unter dem Dach:
 *
 *   Host aphenius.com        /fonts/Geist-Variable.woff2 → 200 font/woff2 69 652 B
 *   Host 127.0.0.1           /fonts/Geist-Variable.woff2 → 200 application/json 2 B
 *   Host irgendein.wirt.test /fonts/Geist-Variable.woff2 → 200 application/json 2 B
 *
 * Die zwei Byte waren die Antwort des Decks: `route()` kannte keine Regel für
 * `/fonts`, also fiel der Pfad auf jedem Wirt ausser dem Dach dorthin. Ein
 * `@font-face` wäre damals eine Zusage ohne Deckung auf zwei von drei Wirten
 * gewesen — und zwar eine STILLE, weil `font-display: swap` lautlos auf die
 * Systemschrift zurückfällt. Dieser Absatz nannte deshalb die fehlende Zeile:
 * eine in `route()`, nach dem Muster der Bilder. Sie liegt seit heute
 * (`/fonts`-Zweig, mit derselben Messung daneben), und damit gehört das
 * `@font-face` hierher — es steht unten, gleich vor den Marken.
 *
 * Kontrast: gemessen mit `app/src/kontrast.ts`, nicht geschätzt. Die Zahlen
 * stehen samt Gegenprobe in `gateway/test/kontrast.test.js`.
 * --text-3 = 5,74:1 auf --ground; --edge = 3,38:1 (WCAG 1.4.11).
 *
 *
 * ══ DIE EINE LEITER (23.08.2026, Welle 2 der Vereinigung) ══════════════════
 *
 * BESITZER-WORT (docs/handoff/AUFTRAG-2026-08-23-die-vereinigung.md): „Tinten,
 * Maße und Schrift überall dieselben" — entschieden in
 * docs/design/10-die-leiter.md §1–§6. Dieses Blatt, `app/src/tokens.css` und
 * `aphenius.css` sprechen seither dieselbe Leiter; `gateway/test/
 * gestaltung.test.js` hält die gemeinsamen Werte aller drei Blätter
 * gegeneinander (Schrift, Serif-Stufen, Grundstufen, Dauern, Stroma).
 * Was in dieser Welle dazukam, trägt je Marke seinen Paragraf als Kommentar:
 * Source Serif 4 (§1), die Alpha-Tinte des Designs für DECKENDEN Grund und
 * die zwei Grundstufen Leiste/Bühne (§2), Wasser und Stroma (§2.3), die
 * Fibonacci-Dauern (§4). Flächen ändert diese Welle nicht — die Werte stehen,
 * die Seiten ziehen in Welle 3 nach (docs/design/11-bauliste.md).
 */

/* Die Schrift des Hauses — selbst gehostet, wörtlich wie in `aphenius.css`.
   Die deklarierte Schrift IST die ausgelieferte Schrift: kein CDN, kein
   externer Abruf. Die beiden woff2 stammen aus dem npm-Paket `geist`
   (SIL OFL 1.1) und liegen unter `/fonts/`, zusammen mit `/fonts/OFL.txt` —
   die Lizenz verlangt, dass sie mitreist, deshalb wird sie mit ausgeliefert.
   Variable Schnitte decken 100-900 ab; `font-display: swap` hält den Rückfall
   sichtbar, bis die Datei da ist (kein unsichtbarer Text). */
@font-face {
  font-family: 'Geist';
  src: url('/fonts/Geist-Variable.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Geist Mono';
  src: url('/fonts/GeistMono-Variable.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
/* Source Serif 4 — Nutzertext und Anzeige (10-die-leiter.md §1). Adobe,
   Release 4.005R (github.com/adobe-fonts/source-serif, 20.01.2023), die zwei
   variablen TTF-Schnitte aus `source-serif-4.005_WOFF2.zip`/VAR, byte-gleich
   unter `/fonts/` UND in `app/public/fonts/` (Herkunft und SHA-256 je Datei
   in `app/public/fonts/LIESMICH.md`: Roman 940a76ed…, Italic 9d28b574…).
   Lizenz SIL OFL 1.1 mit Reserved Font Name „Source“ — sie verlangt, dass
   der Lizenztext mitreist: `/fonts/SourceSerif4-OFL.txt` liegt daneben und
   wird wie `OFL.txt` ausgeliefert (`schriften.test.js` holt jede Datei in
   `site/fonts/` durch das Tor). Variabel in Stärke 200–900 und optischer
   Größe (opsz 8–60, der Browser wählt sie); Upright und Kursive sind zwei
   Dateien, weil das Release keine eine für beides führt. */
@font-face {
  font-family: 'Source Serif 4';
  src: url('/fonts/SourceSerif4Variable-Roman.woff2') format('woff2');
  font-weight: 200 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Source Serif 4';
  src: url('/fonts/SourceSerif4Variable-Italic.woff2') format('woff2');
  font-weight: 200 900;
  font-style: italic;
  font-display: swap;
}

:root{
  /* Flächen — warmes Anthrazit statt kühlem Dunkelblau (vorher #0B0E13 und
     #141922). Enge Helligkeitsschritte, wie beim Auftritt: der Unterschied
     zwischen Grund und Tafel ist ein Hauch, keine Stufe. */
  --ground:#131210; --surface:#1a1814;
  /* Die zwei Stufen des Designs in der Familie des Baums (10 §2.1), Wert für
     Wert wie in `app/src/tokens.css` (Begründung und Messung dort): die
     Leiste/der Ausklapper zwischen Grund und Tafel (gegen beide 1,03) und die
     Bühne, die einzige Fläche UNTER dem Grund (1,04), mit ihrem Streifen. */
  --surface-leiste:#161512; --buehne:#0E0D0C; --buehne-streifen:#141311;
  /* Tinte — Creme auf Anthrazit. Vorher drei Deckkraftstufen EINER blauen
     Tinte (rgba(235,240,248,.87/.58/.50)); jetzt drei eigene Werte, weil der
     Auftritt sie so führt und weil eine deckende Farbe auf jeder Fläche
     dieselbe bleibt — die Glasflächen unten mischen sonst dreimal mit. */
  --text-1:#eeeae0; --text-2:#a8a395; --text-3:#948e80;
  /* ── Die Alpha-Tinte des Designs — ALPHA NUR AUF DECKENDEM GRUND (10 §2.2) ─
     Das Design führt seine Tinte als Deckkraft-Leiter auf dem Grund:
     0,92 / 0,75 / 0,62, Trenner (› → ·) 0,55. Über Aphenius' Panelglas reisst
     der Trenner (4,28) und jede dunkle Zustandsfarbe als Text — deshalb
     bleibt das Panel bei deckenden Werten (`tokens.css`), und die Alpha-Leiter
     steht nur dort, wo der Grund deckend ist: hier und in `aphenius.css`.
     Die drei deckenden `--text-*` oben bleiben die Tinte der HEUTIGEN Seiten;
     die Flächen, die in Welle 3 ins Design ziehen, nehmen die Alpha-Leiter.

     Gemessen mit `app/src/kontrast.ts` am 23.08.2026 auf BEIDEN Gründen —
     05-leiter-messungen (b) hatte nur #191714 gerechnet, und dieses Blatt
     ist sechs Stufen dunkler:

                        auf #131210   auf #1a1814   auf #161512 (Leiste)
       --tinte-1 0,92     14,58         13,87         14,26
       --tinte-2 0,75      9,90          9,53          9,73
       --tinte-3 0,62      7,06          6,87          6,98
       --trenner 0,55      5,79          5,67          5,74

     Alle vier halten 4,5 als Text auf beiden Gründen (der Trenner bräuchte
     als Nicht-Text nur 3,0) — keine Stufe musste gehoben werden. Die
     Tönung ist die des Designs (246,245,244), nicht die warme Creme der
     deckenden Tinte: Eine Deckkraft-Leiter nimmt ihre Wärme vom Grund. */
  --tinte-1:rgba(246,245,244,.92); --tinte-2:rgba(246,245,244,.75); --tinte-3:rgba(246,245,244,.62);
  --trenner:rgba(246,245,244,.55);
  /* Haarlinien — warmweiss statt weiss, gleiche Deckkraft wie vorher. Die
     Deckkraft bleibt absichtlich stehen: an ihr hängt die Obergrenze der
     Konstruktionslinie im Maschinenraum (blaupause.css, „stumm" ≤ 2,00:1). */
  --hairline:rgba(255,245,220,.08); --hairline-soft:rgba(255,245,220,.055); --hairline-strong:rgba(255,245,220,.16);
  --edge:rgba(255,245,220,.38);
  /* Die stille Fläche — der Hauch Warmweiss, der eine Tafel, einen Tabellenkopf
     oder eine Kachel vom Grund abhebt, ohne eine Stufe zu sein.
     Sie bekommt am 21.08.2026 einen NAMEN, weil sie den Wert schon fünfmal als
     Zahl trug (`.btn.ghost` hier, drei Stellen in `anmelden.html`) — und weil
     drei weitere Seiten daneben noch das KALTE `rgba(255,255,255,.02)` führten,
     das die Umkleide-Welle nicht erwischt hat. Ein reines Weiss über warmem
     Anthrazit legt einen blauen Film auf die Fläche; man sieht es erst im
     Vergleich zweier Tafeln nebeneinander, und dann sieht man es sofort.
     Die Deckkraft bleibt, wie sie war: getauscht wird der Ton, nicht die
     Stärke. */
  --flaeche-still:rgba(255,245,220,.02);
  /* Glas — dieselben Deckkräfte, aber über dem warmen Grund gemischt. */
  --glass-bg:rgba(26,24,20,.62); --glass-2:rgba(33,30,25,.5); --glass-filter:blur(12px) saturate(180%);
  /* Die sechs Akzente, alle in der warmen Familie. Der oklch-Ursprung steht
     dabei, damit die Abstammung zum Auftritt prüfbar bleibt.
       --akzent      oklch(.74 .13 65)   der EINE Akzent: Verweise, voller Knopf
       --akzent-hell oklch(.84 .11 65)   dieselbe Farbe, hellere Stufe: Fokus
       --gold        oklch(.74 .12 95)   --cat-2 des Auftritts, zweiter Kartenton
       --amber       --status-warn, --coral --status-error, --moss --status-ok
     Die letzten drei sind wörtlich die Zustandsfarben des Auftritts: sie
     tragen auf beiden Flächen dieselbe Bedeutung, und zwei Werte unter einer
     Bedeutung wären genau der Dialekt, gegen den dieses Blatt gebaut ist. */
  --akzent:#e39849; --akzent-hell:#fcbc7c; --gold:#c3aa48;
  --amber:#c98b4a; --coral:#d97a7a; --moss:#6b9f6a;
  /* ── Die Semantik des Designs an den Namen des Hauses (10 §2.3) ───────────
     Farbe ist Zustand. Der Farbton bleibt Hue 65 (drei Orte, drei gemessene
     Stufen), die AUFGABE kommt vom Design: `--akzent` ist FEUER — Aktivität,
     läuft, verlangt dich; nie als Fläche hinter Text und nie als Textfarbe
     (das Design führt dafür eine dunklere Textfassung). Heute trägt dieses
     Blatt den Akzent an zwei Stellen als `color:` (`.dachband a`,
     `.btn.ghost:hover`), die Seiten daneben an weiteren — sie wandern mit
     ihren Flächen (Welle 3), nicht mit dieser Marke. `--moss` ist ERDE —
     Bestand, bleibt hier, gereift; NICHT mehr „Erfolg nach Handlung".
     `--amber` Warnung (Tier 2), `--coral` Gefahr/abgewiesen. Neu, unten:
     `--wasser` (verlässt die Maschine) und `--stroma` (bewusst nicht
     ausgewertet). Luft — Haarlinien, Raster — trägt nie Bedeutung.

     Wasser: auf DECKENDEM Grund trägt dieses Blatt den Design-Wert #7aa8b8
     (kontrast.ts — 7,24 auf --ground, 6,85 auf --surface — Text und Marke);
     die App muss ihn über Glas heller nehmen (#8fb8c6, Begründung dort).
     Stroma: kalt gegen die warme Tinte (Design #1e1d1c), nie für Text und
     nie für Ränder — gegen --ground 1,11, gegen --surface 1,05: eine Fläche,
     die man als Fläche sieht, und keine, auf der etwas stehen darf. */
  --wasser:#7aa8b8; --stroma:#1e1d1c;
  --focus:var(--akzent-hell);
  /* Die 4er-Leiter der Radien — die EINZIGEN vier Stufen dieser Seiten.
     Der gebaute Auftritt führt daneben eine fünfte (`--r-lg: 6px`); sie
     bleibt draussen, weil `gateway/test/gestaltung.test.js` genau darauf
     zeigt und die Haus-Fassung von aphenius.css sie längst auf 8 nachgezogen
     hat. Eine fünfte Stufe ist kein Geschmack, sondern das Zerfasern. */
  --r-panel:16px; --r-card:8px; --r-ctl:4px; --r-pill:999px;
  --shadow-panel:0 8px 32px rgba(0,0,0,.35);
  /* Schrift: Geist, wie der Auftritt — der Grund für den Wechsel steht im Kopf
     dieser Datei. Der Systemstapel bleibt als Rückfall dahinter stehen und ist
     keine Höflichkeit: `font-display: swap` zeigt genau ihn, solange die Datei
     unterwegs ist, und er trägt die Seite, falls sie einmal nicht kommt.
     `--font-ui` und `--font-body` unterschieden sich vorher in ihrer zweiten
     Stufe (Display gegen Text); Geist ist EIN variabler Schnitt für beides,
     die Trennung bleibt trotzdem stehen — sie hängt an den Stellen, die sie
     benutzen (h1/h2/h3/.wm gegen Fliesstext), nicht am Wert. */
  --font-ui:'Geist','Segoe UI Variable Display','Segoe UI',system-ui,sans-serif;
  --font-body:'Geist','Segoe UI Variable Text','Segoe UI',system-ui,sans-serif;
  --font-mono:'Geist Mono','Cascadia Code',ui-monospace,monospace;
  /* Source Serif 4 für Nutzertext und Anzeige (10 §1) — dieselbe Marke mit
     demselben Rückfall wie in `app/src/tokens.css`: Georgia, dann `serif`.
     Eine Serife ohne Datei ist immer noch eine Serife. Abnehmer: die
     Seitenflächen, die in Welle 3 Nutzertext zeigen (Konto, Zitate). */
  --font-serif:'Source Serif 4',Georgia,serif;

  /* ══ DIE SCHRIFTLEITER DIESER SEITEN (22.08.2026, Dossier 191 R12) ═══════
     Bis heute hatte der öffentliche Auftritt GAR KEINE Leiter. Gemessen am
     Morgen des 22.08. über `stil.css` und die sechs Seiten: 106 feste
     Schriftgrössen in 15 verschiedenen Werten, davon 23 auf halben Pixeln
     (12,5 / 13,5 / 14,5 / 15,5 / 16,5). Die App führte zur selben Stunde
     ihre Grössen über sechs benannte Stufen. Eine Fläche ohne Leiter ist
     keine Gestaltung, sondern eine Sammlung von Einzelentscheidungen — und
     jede neue kostet nichts, solange nichts zählt.

     DIE HALBEN PIXEL SIND DER GRUND, warum die Leiter nicht kosmetisch ist:
     Windows skaliert in Vielfachen von 25 %. 12,5 px werden bei 125 % zu
     15,625 und je nach Lage auf 15 oder 16 gerundet — dieselbe Schrift misst
     an zwei Stellen derselben Seite verschieden. Die Begründung steht
     wörtlich in `app/src/tokens.css` bei der Schrift- und der Abstandsleiter;
     hier gilt sie genauso, nur sah sie bisher niemand nach.

     FÜNF DER SPROSSEN TRAGEN IHREN HAUSNAMEN, und zwar dort, wo dieselbe
     Sache gemeint ist — eine zweite Namenswelt wäre der Dialekt, gegen den
     die Vereinigung von Aphenius und Kira gebaut ist:

       --schrift-meta  12px  app/src/tokens.css          gleiche Sache, gleicher Wert
       --schrift-neben 13px  src-tauri/remote/index.html gleiche Sache, gleicher Wert
       --schrift-text  14px  app/src/tokens.css          gleiche Sache, gleicher Wert
       --schrift-gross 16px  app/src/tokens.css          gleiche Sache, gleicher Wert
       --zeile-locker  1.5   app/src/tokens.css          gleiche Sache, gleicher Wert
       --stark         600   app/src/tokens.css          gleiche Sache, gleicher Wert
       --sperrung-versal .08em app/src/tokens.css        NUR bei uppercase, wie dort

     WARUM `--schrift-kopf` UND NICHT `--schrift-titel`: `--schrift-titel`
     ist in `src-tauri/remote/index.html` mit 26 px belegt. Denselben Namen
     hier mit 18 px zu führen, wäre genau die stille Sorte Unwahrheit, gegen
     die dieses Blatt schon einmal umgebaut wurde (siehe `--mint`/`--akzent`
     im Kopf). Aus demselben Grund heisst die 24er-Stufe nicht
     `--schrift-code-gross` (das ist im Haus der Kopplungscode, nicht ein
     Tafelkopf) — sie trägt die Haus-BAUFORM `-gross` als grösserer
     Geschwister von `--schrift-kopf`, wie `--schrift-zahl-gross` es drüben tut.

     DIE FALTREGEL, an der jede der 106 Fundstellen hängt: nächste Sprosse,
     bei Gleichstand die grössere. Damit ist die grösste Änderung am Bild
     EIN Pixel (15→16, 17→18, 19→18), und Lesetext wird nie kleiner, ohne
     dass es jemand entschieden hätte. 29 Fundstellen behalten ihren Wert
     byte-genau, 39 ändern ihn um höchstens 1 px.

     DIE ZWEI clamp-MARKEN sind kein Geschmack, sondern vier bzw. fünf
     Abschriften desselben Werts: `clamp(26px,6vw,32px)` stand wörtlich in
     allen vier Rechtsseiten, `clamp(24px,3vw,32px)` fünfmal in
     `anmelden.html`. Vier Wahrheiten über eine Überschrift sind LEHREN §10.

     WAS HIER BEWUSST NICHT STEHT — eine Abstandsleiter aus Marken. Die
     Abstände dieser Seiten stehen unter der RASTER-Regel (Vielfache von 4),
     nicht unter Namen: 208 Fundstellen daneben, davon 42 ungerade, jede ein
     Nudge von ein bis zwei Pixeln auf einer Fläche, die heute niemand an den
     echten Breiten gemessen hat. Eine Faltung, die das Bild ändert, ist ein
     Umbau (tokens.css, wörtlich), und zwölf der Fundstellen sitzen an den
     `.fill`/`.marke`-Plaketten der FEHLT-Platzhalter, die dem Besitzer
     gehören. Sie stehen deshalb als gezählter Deckel in
     `app/scripts/seiten-leiter-waechter.mjs` — geprüft und bewusst liegen
     geblieben (LEHREN §16), und ab heute kann die Zahl nur noch fallen.

     AUCH BEWUSST NICHT: die Umbenennung von `--r-panel`/`--r-card`/`--r-ctl`
     auf die Hausnamen `--radius-*`. `gateway/site/blaupause.css:274` liest
     `var(--r-ctl)` und liegt ausserhalb der Zone dieses Postens; ein
     Umbenennen hier hinterliesse dort ein `var()` ins Leere, und zwar
     lautlos. Der Wächter hält die Stelle fest (Regel „keine Marke ohne
     Definition"), damit die offene Zeile eine Zeile bleibt und kein Vergessen. */
  --schrift-meta:12px;
  --schrift-neben:13px;
  --schrift-text:14px;
  --schrift-gross:16px;
  --schrift-kopf:18px;
  --schrift-kopf-gross:24px;
  --schrift-seitenkopf:clamp(26px,6vw,32px);
  --schrift-abschnitt:clamp(24px,3vw,32px);
  /* Die Serif-Stufen der einen Leiter (10 §1): Nutzertext 17 · 19 mit Zeile
     `--zeile-locker` (1,5), Anzeige 21 · 26 mit `--zeile-anzeige` (1,3). Die
     Design-22 fällt auf 21. Dieselben Namen und Werte wie in
     `app/src/tokens.css` — `gestaltung.test.js` hält sie gegeneinander.
     Sie stehen HIER SCHON OHNE ABNEHMER, und das ist eine Entscheidung der
     Welle (10 §14: erst die Leiter, dann die Flächen): `seiten-leiter-
     waechter.mjs::SPROSSEN_VORAUS` nennt sie einzeln und wird rot, sobald
     eine von ihnen einen Abnehmer hat und dort noch steht — die Liste ist
     eine Ratsche, keine Dauererlaubnis. */
  --schrift-serif-text:17px;
  --schrift-serif-text-gross:19px;
  --schrift-serif-anzeige:21px;
  --schrift-serif-anzeige-gross:26px;
  --zeile-anzeige:1.3;
  /* Zeilen. `--zeile-locker` ist der Hausrhythmus für atmenden Fliesstext;
     `--zeile-lese` ist die weitere Stufe der Rechtstext-Spalte, die in allen
     vier Rechtsseiten identisch stand (1.62) und dort wirklich gebraucht
     wird — 62 Zeichen Zeilenlänge lesen sich luftiger als eine Panelzeile. */
  --zeile-locker:1.5;
  --zeile-lese:1.62;
  /* Stärke und Sperrung. 600 ist die einzige Stärke des Hauses neben der
     Vorgabe 400. Die drei Sperrungen sind drei verschiedene Sachen: der
     negative Zug an Überschriften, die Marken-Zeile und der Kicker in
     Versalien — sie standen zwölfmal als Zahl da. */
  --stark:600;
  --sperrung-titel:-.01em;
  --sperrung-versal:.08em;
  --sperrung-marke:.10em;
  --sperrung-kicker:.16em;

  /* Bewegung — die Fibonacci-Leiter des Designs ist die eine Leiter (10 §4):
     micro 100 → 144, enter 200 → 233, dieselben Werte wie `tokens.css::
     --motion-micro/--motion-enter`. Die Kurve des Kommens bleibt das
     Ausrollen des Hauses; die Kurve des Designs für Einmaliges steht daneben
     und wartet auf ihren ersten Abnehmer (Welle 3, ein Blatt/ein Teil). Was
     auf diesen Seiten länger läuft, gibt es nicht: Sie haben keine Schleife
     (`prefers-reduced-motion` unten stellt den Rest still). */
  --enter:233ms cubic-bezier(0,0,0,1); --micro:144ms;
  --curve-einmalig:cubic-bezier(0.16,1,0.3,1);
  /* Fingerziel — dieselbe Untergrenze, die die Handy-Fläche kompromisslos
     hält (app/src/tokens.css, --ziel-tap) und die WCAG 2.5.8 verlangt.
     `.lnk` stand bei rund 37 px (Posten 251). */
  --ziel-tap:44px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
html,body{margin:0;padding:0;background:var(--ground);color:var(--text-1);font-family:var(--font-body);
  font-size:var(--schrift-gross);line-height:1.55;-webkit-font-smoothing:antialiased;overflow-x:hidden}
h1,h2,h3,.wm{font-family:var(--font-ui);font-weight:var(--stark);letter-spacing:var(--sperrung-titel);margin:0}
a{color:inherit;text-decoration:none}

/* Sichtbarer Fokus für Tastatur — nur bei :focus-visible, damit Maus-Klicks
   keinen Ring zeigen. Universal, damit auch [tabindex] ihn bekommt. */
:focus-visible{outline:2px solid var(--akzent);outline-offset:2px;border-radius:var(--r-ctl)}
input:focus-visible{outline-offset:0}

/* Skip-Link — erster Tab-Stopp, springt in den Hauptinhalt. */
.skip{position:absolute;left:12px;top:-48px;z-index:40;background:var(--surface);color:var(--text-1);
  border:1px solid var(--edge);border-radius:var(--r-ctl);padding:8px 14px;font-size:var(--schrift-text);
  transition:top var(--micro)}
.skip:focus{top:12px}

/* Nur für Screenreader — visuell entfernt, aber im Baum. Beide Namen, weil
   beide im Bestand stehen; einer davon verschwindet mit dem nächsten Umbau. */
.sr-only,.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* Aurora-Tiefe im Hintergrund — als Opt-in (body class="aurora"), weil die
   Betreiber-Seite bewusst nüchtern bleibt. Nur BG, nie animiertes
   backdrop-filter.

   Die drei Waschen waren Mint, Peri und Bernstein und damit die grösste
   zusammenhängende kühle Fläche der Seiten; jetzt sind es Bernstein, Gold und
   ein Hauch Koralle. Die Deckkräfte bleiben, wo sie waren (≤ .10) — die
   Wäsche soll Tiefe machen, nicht Farbe. */
body.aurora::before{content:"";position:fixed;inset:-20% -10% auto -10%;height:70vh;z-index:-1;pointer-events:none;
  background:radial-gradient(60% 55% at 30% 25%,rgba(227,152,73,.10),transparent 70%),
             radial-gradient(55% 50% at 78% 15%,rgba(195,170,72,.10),transparent 72%);
  filter:blur(30px)}
body.aurora::after{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;opacity:.5;
  background:radial-gradient(120% 80% at 50% 120%,rgba(217,122,122,.05),transparent 60%)}

.wrap{max-width:1080px;margin:0 auto;padding:0 22px}

/* Das Dachband — eine Zeile, die NUR unter aphenius.com ausgeliefert wird
   (`setzeDachband` in gateway/server/index.js; der ganze Grund steht dort).
   Es sagt einem Besucher, welche der beiden Seiten unter diesem Dach
   die Produktseite ist, und welche Aufgabe diese hier hat.

   WARUM DIE REGEL HIER STEHT UND NICHT BEIM EINSETZEN: Ein Stil, den der
   Server mitschickt, ist ein Stil, den kein Waechter dieses Hauses ansieht —
   `gestaltung.test.js` liest Dateien unter `gateway/site`, nicht erzeugten
   Text. Hier steht er unter derselben 12px-Untergrenze und derselben
   Radien-Leiter wie alles andere.

   Ueber der Kopfleiste und nicht klebend: Die Leiste ist `sticky` und gehoert
   dem Produkt; ein zweiter klebender Streifen daneben naehme dem Telefon
   Bildhoehe fuer einen Satz, den man einmal liest.

   Kontrast, gemessen mit app/src/kontrast.ts und nicht geschaetzt. Mit dem
   warmen Kleid vom 21.08.2026 sind es andere Zahlen als vorher (5,90 / 11,84
   / 10,14 galten fuer die blaue Tinte auf #141922):
   --text-2 = 7,04:1 auf --surface, --text-1 = 14,76:1, --akzent = 7,47:1.
   Alle drei ueber der AA-Schwelle 4,5; die Zahlen stehen samt Gegenprobe in
   gateway/test/kontrast.test.js, nicht nur hier. */
.dachband{margin:0;padding:10px 22px;background:var(--surface);
  border-bottom:1px solid var(--hairline);
  color:var(--text-2);font-size:var(--schrift-neben);line-height:var(--zeile-locker)}
.dachband strong{color:var(--text-1);font-weight:var(--stark)}
.dachband a{color:var(--akzent);text-decoration:underline;text-underline-offset:2px}

/* Kopfleiste der Verkaufsseiten (index/laden/konto): `header.topbar`.
   Mit Klasse und nicht am Element, weil impressum.html ein eigenes,
   nicht-klebendes `header.top` in der Textspalte führt und betrieb.html
   seine eigene nüchterne Leiste hat.

   Die Farbe ist der Grund mit Deckkraft (vorher rgba(11,14,19,.72), das
   kühle Dunkelblau) — sie liegt zwischen --ground und --surface, und beide
   sind gemessen. */
header.topbar{position:sticky;top:0;z-index:20;background:rgba(19,18,16,.72);backdrop-filter:var(--glass-filter);
  border-bottom:1px solid var(--hairline)}
header.topbar .wrap{display:flex;align-items:center;gap:14px;height:60px}
header.topbar nav{margin-left:auto;display:flex;gap:8px;align-items:center}

/* ── HIER STAND DER GRIFF DER KOPFLEISTE (20.08.–22.08.2026) ────────────────
 *
 * Der Griff-Apparat (`.kopfmenue` / `.kopfmenue-liste`, ~45 Zeilen samt
 * Begründung) faltete die Kopfleisten-Verweise von `index/laden/konto.html`
 * auf dem Telefon hinter ein `<details>`. Diese drei Seiten sind gefallen —
 * `/laden.html` faltet der Auslieferer seither um (Ziel heute: `FALTUNG` in
 * `gateway/server/index.js`; das alte `/#/kira` ist mit dem Hash-Router
 * gefallen, Dossier 201 P3-P) —, und danach stylte
 * der Block KEIN Element mehr: grep `kopfmenue` über `gateway/site/*.html`
 * fand nur noch einen Kommentar (Element-Audit 21.08.2026, B25). Toter Stil
 * ist eine zweite Wahrheit; er ist am 22.08.2026 gestrichen, nicht gefaltet.
 *
 * Was die Klasse konnte und warum sie so gebaut war, steht weiter im Kopf
 * von `app/scripts/kopfmenue-waechter.mjs` — der Wächter hält den einzigen
 * verbliebenen Griff dieses Hauses (das Inhaltsverzeichnis der
 * Datenschutzerklärung, `.toc-griff` in `datenschutz.html`) und besteht
 * seither darauf, dass jeder Griff seiner Tabelle in einer AUSGELIEFERTEN
 * Seite lebt. Wer die Kopfleiste je wieder falten muss: den Bau dort
 * nachlesen, nicht hier raten.
 *
 * Die drei `header.topbar`-Zeilen unten gehören NICHT zum Griff: Sie geben
 * der Kopfleiste von `anmelden.html` (ein Verweis + Knopf, gemessen 61 px in
 * einer Zeile) ihr Telefon-Verhalten und bleiben deshalb stehen.
 */
@media (max-width:720px){
  /* NICHT KLEBEND: 60 px, die einmal am Kopf der Seite stehen, statt 60 px,
     die immer mitfahren. */
  header.topbar{position:relative}
  header.topbar .wrap{flex-wrap:wrap;height:auto;padding-top:8px;padding-bottom:8px;gap:0 10px}
  header.topbar nav{margin-left:auto;flex:0 0 auto;justify-content:flex-end;gap:0 8px}
}

/* GEMESSEN AM 20.08.2026 auf allen drei Breiten: Die Wortmarke war 22 bis 28
   Punkte hoch — im Kopf wie im Fuss. Sie ist auf jeder Seite der Weg
   zurueck zum Anfang, und damit ein Fingerziel wie jedes andere
   (--ziel-tap, 44). Die Regel stand vorher nur im Telefon-Zweig, also
   genau dort, wo sie zufaellig aufgefallen war; sie gehoert zur Marke und
   nicht zu einer Bildbreite. Kosten: Auf den Verkaufsseiten keine (die
   Leiste ist ohnehin 60 hoch), auf den Rechtsseiten waechst die Kopfzeile
   einmalig von 66 auf 76. */
.brand{display:flex;align-items:center;gap:10px;min-height:var(--ziel-tap);font-family:var(--font-ui);font-weight:var(--stark);font-size:var(--schrift-kopf);letter-spacing:.02em}

/* Navigations- und Fusszeilen-Verweise. min-height 44 statt der gemessenen
   ~37 (Posten 251): dieselbe Zahl wie beim .btn darunter, und inline-flex,
   damit die Höhe auf einem <a> überhaupt greift. */
.lnk{display:inline-flex;align-items:center;color:var(--text-2);padding:8px 12px;min-height:var(--ziel-tap);
  border-radius:var(--r-ctl);font-size:var(--schrift-text);transition:color var(--micro)}
.lnk:hover{color:var(--text-1)}
.lnk.on{color:var(--text-1)}

.btn{display:inline-flex;align-items:center;gap:8px;justify-content:center;
     /* 44 und nicht 40: Die eigene Handy-Flaeche haelt `--ziel-tap: 44px`
        kompromisslos (app/src/tokens.css), und hier faellt der ERSTE Klick.
        44 px ist zugleich die Untergrenze aus WCAG 2.5.8 mit Reserve. */
     min-height:var(--ziel-tap);padding:0 18px;
  border-radius:var(--r-ctl);font-family:var(--font-ui);font-weight:var(--stark);font-size:var(--schrift-text);cursor:pointer;border:1px solid transparent;
  transition:transform var(--micro),border-color var(--micro),background var(--micro)}
.btn:active{transform:scale(.98)}
/* Tinte auf Farbe: #0a0a0a ist die Marke `--ink-on-color` des Auftritts,
   wörtlich übernommen (vorher #062019, ein dunkles Petrol — die Tinte des
   alten Mints). Gemessen 8,35:1 in Ruhe und 10,31:1 unter dem Zeiger.
   Der Hover-Ton ist derselbe Akzent, eine Stufe heller: oklch(.80 .13 65). */
.btn.primary{background:var(--akzent);color:#0a0a0a;box-shadow:0 6px 20px -10px var(--akzent)}
.btn.primary:hover{background:#f7ab5d}
.btn.ghost{border-color:var(--edge);color:var(--text-1);background:var(--flaeche-still)}
.btn.ghost:hover{border-color:var(--akzent);color:var(--akzent)}
/* ABSICHTLICH OHNE `pointer-events:none`: Mit dieser Eigenschaft erreicht
   kein Klick mehr den Rueckruf, der erklaert, WARUM noch nichts zu laden ist
   — genau so war der Erklaertext auf laden.html seit dem Einbau unerreichbar. */
.btn[disabled],.btn.disabled{opacity:.55;cursor:not-allowed}

/* Fuss der Verkaufsseiten. Die Rechtsseiten haben ihren eigenen, schmaleren
   Fuss und überschreiben diese Regeln in ihrem Seitenblock. */
footer{border-top:1px solid var(--hairline);padding:26px 0;color:var(--text-3);font-size:var(--schrift-neben)}
footer .wrap{display:flex;gap:16px;flex-wrap:wrap;align-items:center}
footer .sp{margin-left:auto}
footer a:hover{color:var(--text-1)}

/* DIE FUSSLEISTE DER RECHTSSEITEN IST DEREN EINZIGE NAVIGATION (20.08.2026).
   Impressum, AGB, Widerruf und Datenschutz haben keine Kopfleiste mit
   Verweisen — nur die Wortmarke und diesen Fuss. Gemessen auf 375x812: sechs
   Verweise nebeneinander, jeder 21 px hoch. Das liegt unter der Untergrenze
   von WCAG 2.5.8 (24 px) und weit unter der des Hauses (--ziel-tap, 44).

   Die Regel steht HIER und nicht viermal in vier Seitenblöcken: Die vier
   Seiten trugen vier fast gleiche Fuss-Blöcke, die schon auseinanderliefen
   (44 px Abstand oben gegen 50, `gap:8px 14px` gegen `6px 14px`) — vier
   Wahrheiten über einen Fuss, LEHREN §10.

   Die Verkaufsseiten sind nicht betroffen: Ihr Fuss führt kein `<nav>`, seine
   Verweise tragen `.lnk` und stehen damit ohnehin auf 44. */
footer nav a{display:inline-flex;align-items:center;min-height:var(--ziel-tap)}

/* Bewegung reduzieren, wenn das System es verlangt. */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.001ms!important;scroll-behavior:auto!important}
}
/* Mehr Kontrast, wenn das System es verlangt — dieselben drei Marken, die
   die Rechtsseiten schon anhoben, jetzt für alle Seiten. Die Tinte ist mit
   dem warmen Kleid deckend geworden, also stehen hier zwei hellere Cremetöne
   statt zweier höherer Deckkräfte: --text-2 steigt von 7,43:1 auf 12,28:1,
   --text-3 von 5,74:1 auf 10,20:1 (beide auf --ground, gemessen). */
@media (prefers-contrast:more){
  :root{--text-2:#d6d1c4;--text-3:#c4bfb2;--hairline:rgba(255,245,220,.24)}
}