/* Design-System „Karriere-Partner" — glaubwürdig, warm, premium.
   Quelle: cv-Repo design/design-system.md + design/wizard-mockup.html.
   Regeln: Petrol ist STRUKTUR (dunkle Blöcke, Board-Anker), Amber ist der
   EINZIGE Akzent und streng rationiert — er markiert nur den Moment, in dem
   die KI etwas Besonderes findet (Gem/Fund, Orb, Hero, Berater).
   Diese Fläche ist die Produkt-UI — das Output-Dokument (Docx/PDF im
   Lukas-Template) hat sein EIGENES Design und bleibt unberührt.

   Migration: die alten „Ruhige Kompetenz"-Tokennamen bleiben als Aliase
   bestehen, damit Templates mit Inline-var()-Bezügen nicht brechen. */

:root {
  /* Karriere-Partner-Tokens */
  --petrol: #16343B;
  --petrol-deep: #0F2429;
  --petrol-700: #22474F;
  --paper: #F3EEE6;
  --card: #FBF8F2;
  --amber: #C77B3B;
  --amber-soft: #E0A56A;
  --ink: #1A1A1A;
  --muted: #5F6A66;
  --good: #3E7A57;
  --line: rgba(22, 52, 59, .14);
  /* Runde 3: der Feldrahmen mass 1,30:1, die Flaeche 1,06:1 — auf einer
     Formularseite von 4.399 px war kein einziges Feld als Bedienelement zu
     erkennen. `--line` bleibt, was es ist (Trennlinie, absichtlich leise);
     ein Feld braucht einen Umriss, und die Schwelle dafuer ist 3:1. */
  --feld-linie: rgba(22, 52, 59, .52);

  /* Aliase (alte Namen -> neue Werte) */
  --tinte: var(--ink);
  --tinte-soft: var(--muted);  /* war nirgends definiert -> Admin-Hinweise waren voll schwarz */
  --papier: var(--paper);
  --karte: var(--card);
  --gold: var(--amber);
  --gold-tief: #8A5A2A;
  --gold-soft: #FBF1E6;
  --gold-linie: #DFC1A0;
  --blaugrau: var(--muted);
  --linie: var(--line);
  --linie-soft: rgba(22, 52, 59, .08);
  /* War an fuenf Stellen gerufen und nie definiert. Vier davon trugen den
     Rueckfall `#FFFDF9` und kamen davon; die fuenfte nicht:
     `.btn-berater:disabled { background: var(--g-weiss) }` verlor die ganze
     Eigenschaft, und der gesperrte Knopf behielt die Flaeche des offenen —
     obwohl der Kommentar darueber ausdruecklich „gedeckte Flaeche" fordert
     und Gesperrt seit X5 der DAUERZUSTAND des HR-Gates ist. Der Wert ist der
     Rueckfall der anderen vier, damit sich dort nichts verschiebt. */
  --g-weiss: #FFFDF9;
  --ok: var(--good);
  --ok-soft: #E5EFE8;
  /* Die AUSWAHL-Toenung, getrennt vom Status. `--ok-soft` ist deckend und
     sagt „so ist es"; diese hier ist durchscheinend und sagt „das hast du
     gewaehlt" — sie laesst die Flaeche darunter mitsprechen, deshalb steht sie
     unter Klick-Zielen (`.btn-secondary.selected`, `.antwort-chip.selected`).
     Bis 2026-07-27 stand sie viermal handgerechnet in zwei Dateien, mit drei
     verschiedenen Deckungen (.08/.09/.10) — der Unterschied war niemandem
     anzusehen, aber jedem Wertwechsel im Weg. */
  --ok-wahl: rgba(62, 122, 87, .08);
  --ok-linie: #C9DED0;
  --warn: #A4432D;
  --warn-soft: #F6EAE5;
  --warn-linie: #E3C4B7;

  /* Typo: Display = humanistische Grotesk, Body = warme Serif.
     (System-Stacks; Produktions-Displayfont ist ein offener Punkt.) */
  --display: 'Optima', 'Gill Sans', 'Segoe UI', system-ui, sans-serif;
  --body: Georgia, 'Iowan Old Style', 'Times New Roman', serif;
  --serif: var(--body);
  --sans: var(--display);
  --mono: var(--display); /* Utility-Labels laufen über die Display-Grotesk */

  /* --- Form-Tokens (2026-07-26) -----------------------------------------
     Farbe und Schrift waren immer tokenisiert, FORM nie: 83 Radien standen
     hart verstreut. Deshalb konnte der gefuehrte Flow eine zweite
     Formensprache entwickeln, ohne dass es auffiel (Gremium Runde 4,
     Visual Design 6,0).

     ETAPPE 2 (E2, docs/specs/2026-07-26-entscheidungen-martin.md): Die
     Flow-Werte sind jetzt der Produktstandard — das Haus zieht nach, nicht
     der Flow zurueck. Vorher standen hier 4/3/6/2 px; das Haus war flach und
     der Flow rund, und jeder Uebergang zwischen ihnen war ein Bruch.
     gefuehrt.css zeigt mit --fl-radius-* auf diese Zeilen, statt eigene
     Werte zu fuehren. Es gibt also genau EINEN Ort fuer die Form des
     Produkts: diese vier Zeilen.

     Kein Radius steht mehr hart daneben — nicht in den Stylesheets und nicht
     in den <style>-Blöcken der Templates (Waechter:
     tests/test_form_tokens.py, tests/test_design_system.py). Ein Wert ohne
     Rolle ist die Vorstufe zur naechsten Abspaltung. */
  --radius-karte: 14px;   /* Container mit eigener Flaeche: Karte, Kachel, Panel, Fieldset */
  /* == Schriftgrade: EINE Leiter ==========================================
     Angelegt 2026-07-27 (Etappe 4). Vorher war Farbe tokenisiert, Form seit
     E2 — Schriftgroesse nie: 418 harte Werte in 26 Pixelstufen, davon 131
     halbe Pixel. Jede belegte Fast-Dublette im System war ein 0,5-px-Paar
     (`.hr-before` 12 gegen `.hr-after` 12,5 zwei Zeilen auseinander;
     `.score-label .delta` 9 gegen `.score-teil .delta` 9,5 bei identischem
     Klassennamen). Deshalb GANZE Pixel: das macht diese Fehlerklasse
     konstruktiv unmoeglich, nicht bloss unerwuenscht.

     Die Stufen sind aus der Verteilung gerechnet, nicht aus dem Lehrbuch —
     unten dicht, oben duenn, weil dies eine etiketten- und listenlastige
     Cockpit-Oberflaeche ist. Eine 1,25er-Verhaeltnisskala haette die 237
     Deklarationen zwischen 12 und 13,5 px auf EINE Stufe geworfen.
     Inventur: docs/specs/2026-07-27-etappe-4-typografie.md */
  --text-mikro:  9px;   /* Delta, Fussmarke am Wert */
  --text-marke:  11px;  /* Augenbraue, Spaltentitel, Tabellenkopf */
  --text-klein:  12px;  /* Chip, Hilfstext, Etikett, Meta (Martins Entscheidung) */
  --text-basis:  13px;  /* Fliesstext, Eingabefeld, Listenzeile */
  --text-bedien: 14px;  /* Knopf, Navigation */
  --text-lead:   15px;  /* Vorspann, Kartentitel, Primaerausgang */
  --text-gross:  17px;  /* Gem-Text, Arbeitstext — der Kernmoment */
  --text-titel:  20px;  /* Abschnitts- und Panelueberschrift */
  /* Keine neunte Leiterstufe, sondern eine Geraete-Grenze: unter 16px zoomt
     iOS Safari beim Antippen eines Eingabefeldes in die Seite hinein. Steht
     hier, damit die Zahl einen Namen hat und nicht als 16 durch die Datei
     wandert; wirksam wird sie nur im `pointer: coarse`-Block. */
  --text-eingabe-mobil: 16px;
  /* Eine neunte Stufe --text-schau: 24px war geplant (Abschluss-Ueberschrift).
     Sie steht hier NICHT, weil ihr einziger Kandidat eine `font:`-Kurzform ist
     (`.g-abschluss h1 { font: 500 24px/1.2 … }`) und die Kurzformen erst in
     Etappe G zerlegt werden. Der Waechter `test_jede_stufe_hat_einen_leser`
     hat das beim Anlegen gemeldet — eine Stufe ohne Leser ist eine
     Absichtserklaerung, kein Bauteil. Sie kommt mit ihrem Leser zurueck. */

  /* ── Raum (V24) ────────────────────────────────────────────────────────
     Die letzte untokenisierte Achse. Das System kennt Namen fuer Farbe,
     Form, Schatten und acht Schriftgrade — fuer Abstand keinen einzigen:
     0 Treffer fuer `--raum`/`--abstand`/`--space`, dafuer 25 verschiedene
     px-Werte allein in dieser Datei und sechs Blockabstaende ohne
     gemeinsamen Teiler in EINER Spalte (Visuelles Design, Runden 4 und 5;
     die Linse steht seit drei Runden und nennt das als Ursache).

     Eine 4-px-Leiter, sechs Stufen. Wichtiger als die Stufen ist die
     Regel darunter: **zwischen Bloecken sind genau drei Abstaende
     erlaubt** — eng (3), normal (4), Abschnittswechsel (5). Alles
     dazwischen ist der Rhythmusbruch, den man nicht benennen kann und
     trotzdem sieht. `tests/test_drawer_raster_chromium.py` wacht darueber. */
  --raum-1: 4px;    /* innen: Etikett zu Zahl, Chip zu Chip */
  --raum-2: 8px;    /* innen: Zeile zu Zeile in einem Bauteil */
  --raum-3: 12px;   /* BLOCK eng: was zusammengehoert */
  --raum-4: 16px;   /* BLOCK normal: der Standardabstand der Flaeche */
  --raum-5: 24px;   /* BLOCK Abschnittswechsel */
  --raum-6: 32px;   /* Flaechenrand, grosse Zaesur */
  --radius-block: 11px;   /* Abschnitt, Zeile, Band, Navigationseintrag IN einer Flaeche */
  /* Die Abstands-Leiter (Gremium Runde 6, Komposition — einstimmig 6,0).
     Der Befund war ein Loch, kein Fehler: das Haus fuehrt 52 Farb-, 8 Radius-
     und 9 Typo-Tokens — und **null** Abstands-Tokens. Ausgerechnet die
     Dimension, aus der Komposition besteht, war als einzige nicht benannt.
     Gemessen: 29 verschiedene Abstandswerte in 563 Deklarationen, auf dieser
     Flaeche allein 16. Vier Paare loesten dieselbe Aufgabe doppelt; 16 und 18
     standen in derselben Zeile.

     Sechs Stufen mit Rollen. Jede ist doppelt so weit wie die vorletzte, damit
     ein Sprung als Sprung lesbar ist:
       xs  4  Marke zu Marke, Etikett zu Feld — was zusammengehoert
       s   8  Feldpolster, Knopfpolster
       m  12  Feld zu Feld innerhalb einer Gruppe
       l  16  Karteninneres, Gruppenkopf zu Inhalt
       xl 24  Karte zu Karte
       xxl 40 Abschnitt zu Abschnitt — die Naht
     Regel dazu: **Trennung >= 2x groesster Innenschritt.** Vorher war sie
     1,33x — der Rahmen trennte die Abschnitte, nicht der Raum. */
  --abstand-xs: 4px;
  --abstand-s: 8px;
  --abstand-m: 12px;
  --abstand-l: 16px;
  --abstand-xl: 24px;
  --abstand-xxl: 40px;
  --radius-feld: 10px;    /* Eingabe, Select, Dialog, Blatt */
  --radius-knopf: 10px;   /* Knopf, Chip, Badge */
  /* Konzentrisch: ein Segment IN einem gepolsterten Container braucht den
     Radius der Huelle minus deren Polster, sonst wirken die Ecken verschoben
     (`.reiter` traegt 4px Polster). Als Rechnung statt als Zahl, damit die
     Beziehung mitwandert, wenn --radius-block sich aendert. */
  --radius-innen: calc(var(--radius-block) - 4px);
  /* Probe = eine Flaeche, die etwas ZEIGT statt etwas zu tun: die Farbfelder
     einer Palette, ein Materialmuster. Sie bleibt fast kantig, damit sie nicht
     wie ein Bedienelement aussieht — Hausregel 3: die Farben der CV-Vorlagen
     gehoeren dem Dokument, nicht der Produkt-UI.
     Der Befund, der diese Rolle erzwungen hat: `.palette-felder` (13px hoch)
     las `--radius-knopf`. Bei 2px war die falsche Rolle unsichtbar, bei 10px
     wurde die Farbprobe zur Pille — im Bildvergleich aufgefallen, nicht in der
     Suite. Dieselbe Klasse Fehler wie die runden Ecken an den Farbfeldern in
     Runde 5, nur eine Ebene tiefer. */
  --radius-probe: 3px;
  --radius-pille: 20px;   /* im Flow identisch */
  /* Balken und Schienen: 999px clamped der Browser auf die halbe Hoehe — die
     Kapsel ist damit unabhaengig von der Hoehe richtig. Stufenbalken,
     Suchfortschritt und Skelettzeilen waren vorher schon Kapseln (2px auf 4px
     Hoehe); sie haben jetzt nur den Namen dafuer. */
  --radius-voll: 999px;   /* im Flow identisch — auch fuer Balken und Schienen */
  /* Schatten-Leiter (2026-07-26, W9). Die drei Schatten-Tokens hatten NULL
     Leser, daneben standen 41 harte `box-shadow`. „Flach gegen Ruhe-Schatten"
     war eine der beiden Achsen des Design-Befunds — benannt, aber nicht
     vorbereitet. Jetzt liest jedes Bauteil seine Rolle; kein Wert hat sich
     dabei geaendert.
     Die Achse kippt an EINER Zeile: `--schatten-karte` gibt der Haus-Karte
     ihre Ruhe (oder nimmt sie), `--fl-schatten-karte` in gefuehrt.css der
     Flow-Karte.
     Nicht in der Leiter: `inset`-Marken (Warnkante, Auswahlbalken) und Ringe
     ohne Versatz und Weichzeichnung (`0 0 0 Npx`) — das sind Signale, keine
     Ebenen. */
  /* Etappe 3: die Achse ist gekippt. Vorher `none` — das Haus war flach, der
     Flow trug Ruhe, und jeder Uebergang zwischen ihnen war ein Bruch (Gremium
     Runde 4, „flach gegen Ruhe-Schatten"). E2 hat entschieden, dass das Haus
     nachzieht; dass es erst jetzt geht, liegt an der Karte: „eine Zeile"
     aenderte auf dem Board NULL Pixel, weil das Board eine ANDERE Karte war.
     Jetzt lesen alle drei Haus-Karten und die Flow-Karte diese Zeile. */
  --schatten-karte: var(--schatten-ruhe);
  --schatten-ruhe: 0 8px 28px rgba(22, 52, 59, .10);
  /* Angehoben mit Etappe 3: der alte Wert (0 4px 14px) lag UNTER dem neuen
     Ruhezustand (0 8px 28px) — Anfassen haette wie Absinken gewirkt. Ein
     Waechter rechnet den Versatz jetzt nach. */
  --schatten-heben: 0 14px 34px rgba(22, 52, 59, .16);  /* Karte unter Zeiger */
  --schatten-knopf: 0 3px 12px rgba(22,52,59,.14);      /* Knopf ueber Inhalt */
  --schatten-blatt: 0 2px 12px rgba(0, 0, 0, .15);      /* Dokument in Buehne */
  /* Die beiden Knopf-Schatten. Sie standen bis 2026-07-27 nur in gefuehrt.css
     (--fl-schatten-knopf / --fl-schatten-berater), waehrend ihre LESER hier
     stehen: .btn-primary und .btn-berater sind mit Etappe 3 ins Haus gezogen,
     ihre Werte nicht. Auf einer Flaeche ohne Flow-Stylesheet waren diese
     Knoepfe damit ohne Schatten. ACHTUNG: --schatten-knopf oben ist ein
     ANDERER Wert (0 3px 12px / .14) — darauf zu zeigen waere eine
     Pixelaenderung. Deshalb zwei eigene Namen. */
  --schatten-knopf-primaer: 0 4px 14px rgba(22,52,59,.24);
  --schatten-knopf-berater: 0 4px 14px rgba(199,123,59,.32);
  --schatten-schalter: 0 1px 3px rgba(0,0,0,.3);        /* Knopf IM Schalter */
  --schatten-schwebend: 0 12px 32px rgba(15, 36, 41, .3);  /* Tipp, Tooltip */
  --schatten-dialog: 0 18px 50px rgba(15, 36, 41, .3);
  /* Abweichler, unveraendert uebernommen: das Orb-Panel traegt .35 statt .3.
     Dass der Unterschied jetzt einen Namen hat, IST der Befund — ihn
     einzuebnen waere eine Wertaenderung und gehoert in die
     Hausentscheidung. */
  --schatten-dialog-tief: 0 18px 50px rgba(15, 36, 41, .35);
  --schatten-schublade: -18px 0 48px rgba(15, 36, 41, .25);  /* von rechts */
  --schatten-leiste: 10px 0 40px rgba(15, 36, 41, .20);      /* von links */
  --schatten-boden: 0 -6px 20px rgba(15, 36, 41, .12);       /* von unten */
  /* Ring plus Schein: die Karte, an der gerade gearbeitet wird. */
  --schatten-arbeitet: 0 0 0 1px var(--amber), 0 0 18px rgba(199, 123, 59, .25);

  /* Cockpit-Kacheln: zwei der sechs Akzente standen hart im Template und in
     keinem Token (Gremium Runde 4). Werte unveraendert, neu ist der Ort. */
  --stat-im-blick: #6E6E6E;
  --stat-verschickt: #2E5A87;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--body);
  line-height: 1.6;
}

/* `.badge` stand hier bis 2026-07-27 mit — und war ein Phantom: eine eigene
   Regel hatte die Klasse nie, kein Template rendert sie. Der Variantenzaehler
   auf /design sah dadurch ein Bauteil, das es nicht gibt. */
h1, h2, h3, .btn, .wortmarke, .nav, .pill, .baustein-tag, .dok-titel,
.spalten-titel, .laedt, .fortschritt, .hinweis-chip {
  font-family: var(--display);
}

h1 {
  font-size: clamp(26px, 4.5vw, 36px);
  line-height: 1.08;
  letter-spacing: -.02em;
  text-wrap: balance;
  font-weight: 700;
}
h2, h3 { letter-spacing: -.01em; font-weight: 700; }

/* Signatur-Move: einzelnes Akzentwort in Serif-Kursiv-Amber */
h1 em, .serif-em {
  font-family: var(--body);
  font-style: italic;
  color: var(--amber);
  font-weight: 500;
}

/* Kopf */
.kopf {
  display: flex; justify-content: space-between; align-items: baseline;
  padding: 16px 28px;
  background: color-mix(in srgb, var(--paper) 92%, transparent);
  border-bottom: 1px solid var(--line);
}
.wortmarke { font-weight: 700; font-size: var(--text-titel); letter-spacing: -.02em; }
.wortmarke em { font-family: var(--body); font-style: italic; color: var(--amber); }
.untertitel { font-size: var(--text-marke); color: var(--muted); }

.inhalt { max-width: 960px; margin: 0 auto; padding: 32px 24px; }

/* Sanftes Ankommen (einmal pro Swap), still bei reduced motion */
@keyframes rise { from { opacity: 0; transform: translateY(10px); }
                  to   { opacity: 1; transform: none; } }
#wizard-inhalt, .bewerbung-karte { animation: rise .45s cubic-bezier(.2,.7,.2,1); }

/* Komponenten */
.karte {
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--radius-karte); padding: 20px 24px;
  /* pixelgleich zu „kein box-shadow" — der Unterschied ist, dass die
     Ruhe-Schatten-Achse jetzt an einer Zeile haengt statt an 41. */
  box-shadow: var(--schatten-karte);
}

.btn {
  display: inline-flex; align-items: center; gap: 8px;
  background: transparent; color: var(--ink);
  /* Runde 5: der Feld-Boden bekam `--feld-linie` (3,09:1), der Knopf blieb auf
     `--line` (1,29:1) — auf der Bausteine-Seite waren damit 24 von 25
     Bedienelementen unter der Schwelle, obwohl der Fix als erledigt galt.
     Ein Umriss, den man nicht sieht, ist kein Umriss. */
  border: 1px solid var(--feld-linie); border-radius: var(--radius-knopf); padding: 9px 18px;
  font-size: var(--text-bedien); font-weight: 600; text-decoration: none; cursor: pointer;
  transition: transform .15s, background .15s, border-color .15s;
}
.btn:hover { border-color: var(--petrol); transform: translateY(-1px); }
.btn-gold { background: var(--amber); border-color: var(--amber); color: #241205; }
.btn-gold:hover { background: var(--amber-soft); border-color: var(--amber-soft); }
/* Der kleine Knopf. Er existierte 20 Mal als Inline-Stil und nie als Klasse:
   von den 36 Inline-Schriftgroessen mit Klasse widersprachen 24 ihrer
   CSS-Regel und KEINE wiederholte sie — 21 davon derselbe Fall, `.btn` soll
   12 statt 14 px sein. Das ist kein Wildwuchs, das ist ein fehlender
   Modifikator, von Hand nachgebaut. Polster bleibt unangetastet: die 20
   Fundstellen tragen heute das volle `.btn`-Polster, alles andere waere eine
   Pixelaenderung. */
.btn--klein { font-size: var(--text-klein); }
.btn-petrol { background: var(--petrol); border-color: var(--petrol); color: var(--paper); }
.btn-petrol:hover { background: var(--petrol-700); border-color: var(--petrol-700); }
/* Destruktive Bestätigung: leiser Warn-Umriss, Füllung erst am Hover */
/* Der gesperrte Zustand des Hauses (Schlussmessung Runde 8). Es gab KEINE
   `:disabled`-Regel in design.css — die vier Cockpit-Knoepfe trugen das Attribut
   und sahen aus wie aktiv: volles Amber, Handzeiger, direkt neben „Dafuer fehlen
   dir 80 Credits". Woertlich die Klasse, die diese Serie seit sechs Runden jagt:
   die Sperre war da und schwieg. Eigene Fassung statt Verduennung — Opazitaet
   auf Amber ueber hellem Grund war schon zweimal der Fehler. */
/* Runde 6: diese Regel schrieb `--line` (1,29:1) und hat damit den
   Rahmen-Fix aus Runde 5 (`--feld-linie`, 3,09:1) still zurueckgedreht — sie
   steht spaeter in der Datei und gewinnt ueber die Reihenfolge. Dritte
   Wiederholung derselben Klasse in dieser Reihe. Ein gesperrter Knopf ist
   leiser, aber er ist immer noch ein Knopf und braucht seinen Umriss. */
.btn:disabled, .btn-gold:disabled, .btn-petrol:disabled {
  background: var(--card); border-color: var(--feld-linie); color: var(--muted);
  cursor: default; box-shadow: none; transform: none; }
.btn:disabled:hover, .btn-gold:disabled:hover, .btn-petrol:disabled:hover {
  background: var(--card); border-color: var(--feld-linie); color: var(--muted); }

.btn-warn { background: transparent; border-color: var(--warn); color: var(--warn); }
.btn-warn:hover { background: var(--warn); border-color: var(--warn); color: #fff; }

/* Der ARBEITENDE Zustand — die Luecke zwischen Klick und Antwort.

   Gemessen: 50 server-fragende Bedienelemente in den sieben Drawer-Templates,
   0 Rueckmeldungen. Der einzige `.htmx-request`-Selektor im Dokument stammte
   aus htmx' eigenem Stylesheet und greift auf `.htmx-indicator` — das hier
   nirgends steht. Der Nutzer klickt „Bewerten lassen", 300 ms bis 2 s
   passiert nichts, und der naechstliegende Reflex ist der zweite Klick. Auf
   einem Weg, der Credits kostet.

   Der lange Lauf hat seine Stimme (`.lauf-puls`, Orb, Urteilsband). Das hier
   ist die kurze Wartezeit, die niemand entworfen hat.

   Drei Entscheidungen:
   · Der GEKLICKTE Gegenstand sagt es, nichts sonst bewegt sich. Ein
     Wartezeichen an anderer Stelle laesst den Nutzer erst suchen, wozu es
     gehoert — und widerspricht „ein Primaergewicht je Ansicht".
   · Streifen statt Verduennung. Opazitaet auf gefuelltem Petrol war in dieser
     Serie zweimal der Fehler, weil das Label seinen Kontrast verliert.
     `currentColor` dreht die Streifen von allein in die richtige Richtung:
     helle auf dem gefuellten Knopf, dunkle auf dem Umriss. Eine Regel, beide
     Gruende, keine neue Farbe.
   · `pointer-events` statt `disabled`. Ein deaktiviertes Element verliert den
     Fokus — genau der Defekt, den der Fokus-Rueckweg gerade repariert hat.
     Der zweite Klick ist trotzdem weg. */
.btn.htmx-request, .v-btn.htmx-request, .tab.htmx-request,
form.htmx-request button[type="submit"],
form.htmx-request .btn {
  cursor: progress;
  pointer-events: none;
  transform: none;
  background-image: repeating-linear-gradient(-45deg,
      color-mix(in srgb, currentColor 15%, transparent) 0 7px,
      transparent 7px 14px);
  animation: arbeitet 800ms linear infinite;
}
/* 14 px Streifenabstand senkrecht zur Achse = 19.8 px entlang x (14·√2).
   Wer hier rundet, bekommt einen Ruck pro Runde. */
@keyframes arbeitet { to { background-position-x: 19.8px; } }
@media (prefers-reduced-motion: reduce) {
  .btn.htmx-request, .v-btn.htmx-request, .tab.htmx-request,
  form.htmx-request button[type="submit"], form.htmx-request .btn {
    animation: none; }
}

.pill {
  display: inline-block; font-size: 10.5px; font-weight: 600;
  letter-spacing: .06em;
  /* Kapsel seit 2026-07-27 (Martins Entscheidung): sieben der neun Chips
     waren es schon. EINE Zeile, kein Template-Eingriff — die neun Templates
     benutzen .pill, sie definieren sie nicht. --radius-pille verliert damit
     seinen letzten Chip-Leser. */
  border-radius: var(--radius-voll); padding: 2px 8px; margin-right: 4px;
  border: 1px solid var(--line); color: var(--muted);
  background: var(--card);
}
.pill-qa  { border-color: var(--ok-linie);   background: var(--ok-soft);   color: var(--good); }
.pill-hr  { border-color: var(--gold-linie); background: var(--gold-soft); color: var(--gold-tief); }
.pill-due { border-color: var(--warn-linie); background: var(--warn-soft); color: var(--warn); }
/* Aus stellensuche.css hierher geholt (Etappe 3): Varianten gehoeren neben
   ihre Geschwister, nicht in die Datei der Flaeche, die sie zuerst brauchte. */
.pill-belegt { border-color: var(--ok-linie);   background: var(--ok-soft);   color: var(--good); }
.pill-luecke { border-color: var(--warn-linie); background: var(--warn-soft); color: var(--warn); }

/* Baustein-Karte: ruhige Karte mit Amber-Kante (der rationierte Akzent) */
.baustein-karte {
  /* Etappe 3: EINE Baustein-Karte. Vorher gab es sie zweimal — `.baustein-karte`
     im Wizard und `.bs-card` auf der Bausteine-Seite, mit derselben Polsterung
     und derselben Amber-Kante unter zwei Namen. Die Kante ist jetzt Modifikator
     (`.gem`, Alias `.hero`): sie markiert den Moment, nicht die Gattung
     (Hausregel 5). Wer sie heute traegt, traegt sie weiter — der Modifikator
     steht im Markup. */
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--radius-karte); box-shadow: var(--schatten-karte);
  padding: var(--abstand-l) var(--abstand-l); margin: var(--abstand-m) 0;
}
/* Runde 6, Kartenphysik: die Kartenkante trug DREI Bedeutungen in derselben
   Geometrie — `gem` (ein Fund), `bs-hero` (eine Vorliebe) und `bs-unbelegt`
   (ein Wahrheitsdefekt), alle 3 px links, unterschieden nur im Farbton bei
   2,15:1. Eine Kante, die drei Dinge sagt, sagt keins.

   Die Kante gehoert der Wahrheit: `bs-unbelegt` behaelt sie. Hero ist eine
   Nutzerpraeferenz und traegt sein Abzeichen im Kopf der Karte, ausgeschrieben
   („☆ HERO-STORY") — das hat das Haus in Runde 2 schon entschieden, nur die
   Kante blieb stehen. */
.baustein-karte.gem { border-left: 3px solid var(--amber); }
/* == Die Augenbraue: EINE Fassung ========================================
   Vier Klassen sagten dasselbe (kleine, gesperrte Versalien ueber einer
   Ueberschrift) und keine zwei gleich:

     .baustein-tag   10,5px  600  ls .14em  --gold-tief   (10 Fundstellen)
     .bs-hero-badge  11px    700  ls  —     --gold-tief
     .design-badge   9px     700  ls .08em  --amber-soft
     .eyebrow        12px    600  ls .16em  (Farbe inline)

   Vier Groessen, zwei Gewichte, drei Sperrungen und eine, die fehlte. Die
   Struktur steht jetzt einmal; nur die FARBE bleibt je Fassung, weil sie eine
   Aussage ist (Hausregel 5) und keine Form.

   `.12em` ist nicht gemittelt, sondern gewaehlt: es ist der Wert, den die
   Nachbarn der Familie schon tragen (`.profil-form legend`, `.spalten-titel`).
   Die Groesse wird `--text-marke` (11px) — die Stufe, auf der 15 der 29
   VERSAL-gesperrten Regeln des Produkts ohnehin stehen. */
.baustein-tag, .bs-hero-badge, .design-badge, .eyebrow {
  font-family: var(--display); text-transform: uppercase;
  font-size: var(--text-marke); font-weight: 600; letter-spacing: .12em;
}
/* Nur noch die Farbe — und jede einzeln, damit die Waechter sie weiter als
   eigenes Bauteil sehen (`^.name {` ist ihre Definition von „Bauteil"). */
.baustein-tag { color: var(--gold-tief); }

/* Signatur-Element: der Gem/Spotlight — der Fund, typografisch inszeniert.
   Dunkle Petrol-Karte, Amber-Glow. NUR für den Moment, in dem die KI etwas
   Besonderes zeigt (Sofort aufgefallen, Berater-Urteil). */
.gem {
  position: relative; overflow: hidden;
  background: var(--petrol); color: #EDE7DC;
  border-radius: var(--radius-karte); padding: 18px 20px; margin: 14px 0;
}
.gem::before {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(120% 90% at 85% 10%,
              rgba(199, 123, 59, .4), transparent 55%);
}
.gem > * { position: relative; }
.gem .baustein-tag { color: var(--amber-soft); }
.gem p { font-size: var(--text-gross); line-height: 1.4; margin: 6px 0 0; }
.gem strong, .gem b { color: #fff; }
.gem a { color: var(--amber-soft); }
/* Spec 2026-08-04 E-2: der Baustein-Moment traegt einen Sekundaerknopf
   („Spaeter") auf der Gold-Flaeche. `.link-btn` faerbt hart mit `--ink`
   und waere dort Schrift auf gleicher Farbe — unsichtbar. Die Flaeche
   korrigiert ihn, genau wie `.baustein-tag` daneben. */
.gem .link-btn { color: var(--amber-soft); }
/* Der Haus-Knopf ist randlos-transparent mit `--ink` (design.css:250). Auf
   der Petrol-Fläche des `.gem` ergibt das gemessene **1,32:1** — dunkle
   Schrift auf dunklem Grund. Fünf von zwölf Perspektiven fanden das in
   Runde 1 unabhängig, an derselben Stelle: „Alle verwerfen" im
   Beraterkarten-Gate, dem Knopf, mit dem man aus einem 100-Credits-Angebot
   wieder herauskommt.

   `.gem` korrigiert seine Kinder schon für `strong`, `a`, `.baustein-tag`
   und `.preis-marke` — der Knopf hat in dieser Reihe gefehlt.

   W1 (Erstnutzer, Runde 6): der Satz, der hier stand — „die gefüllten
   Fassungen bringen ihre eigene Fläche mit und bleiben unangetastet" —
   war der Trugschluss. `.btn-petrol` bringt eine Fläche mit, und die IST
   Petrol, genau wie `.gem`. Gemessen **1,00:1** auf Fläche und Rand,
   20 Vorkommen in 10 von 17 Fällen; betroffen war unter anderem
   „Antwort einarbeiten", der bezahlte Knopf im Fragen-Panel.

   Eine eigene Fläche hilft nur, wenn sie sich vom Grund unterscheidet.
   Achte Wiederholung derselben Klasse in dieser Serie — deshalb misst
   `test_w1_eine_eigene_flaeche_ist_kein_freibrief` ab jetzt die gemalte
   Fläche gegen den gemalten Grund, statt „hat eigene Fläche" zu glauben. */
.gem .btn-petrol, .gem .btn-primary {
  background: #EDE7DC; color: var(--petrol); border-color: #EDE7DC; }
.gem .btn-petrol:hover, .gem .btn-primary:hover {
  background: #fff; border-color: #fff; }
.gem .btn:not(.btn-petrol):not(.btn-gold):not(.btn-primary) {
  color: #EDE7DC; border-color: rgba(237, 231, 220, .45); }
.gem .btn:not(.btn-petrol):not(.btn-gold):not(.btn-primary):hover {
  color: #fff; border-color: var(--amber-soft); background: transparent; }
/* Die Fläche entscheidet über die Schrift: was hier hereinkommt, erbt das
   warme Hell. Die Rückfrage im Strategie-Reiter stand am 2026-07-27 mit
   Kontrast 1,00 : 1 hier drin — Petrol auf Petrol, unsichtbar. Wächter:
   tests/test_gem_flaeche.py */
.gem .rueckfrage-frage { color: inherit; }

/* Zustände */
.fehler { border-left: 3px solid var(--warn); background: var(--warn-soft);
          padding: 10px 14px; border-radius: var(--radius-block); }
.laedt  { color: var(--muted); font-size: var(--text-klein);
          letter-spacing: .08em; text-transform: uppercase; }
/* V19 (6 Linsen, Runden 4 und 5): `.laedt` ist eine LADE-ETIKETTEN-Klasse —
   12 px, Versalien, .08em Sperrung, gemessen 4,86:1. Sie trug vier
   vollstaendige Saetze bis 110 Zeichen, mobil drei volle Versalzeilen als
   einzigen Inhalt einer Seite. Versalien sind fuer Etiketten bis drei
   Woerter; ein Satz in Versalien liest sich als Warnung, und genau das ist
   ein Leerzustand nicht.

   Der Leerzustand ist der Moment, in dem der naechste Schritt am meisten
   zaehlt. Also spricht er in der normalen Lesestimme der Flaeche. */
.leer { color: var(--muted); font-size: var(--text-basis);
        line-height: 1.55; margin: 0 0 var(--raum-3); max-width: 52ch; }
.leer a { color: var(--petrol); }

/* Navigation */
.nav { display: flex; gap: 18px; align-items: baseline; font-size: var(--text-bedien); }
.nav a { color: var(--ink); text-decoration: none; padding-bottom: 2px; }
.nav a:hover { border-bottom: 2px solid var(--petrol); }
.nav .inaktiv { color: var(--muted); opacity: .5; cursor: default; }

/* Wizard-Fortschritt: ruhige Kreise — erledigt Petrol, aktiv Amber */
/* Fortschritt — EINE Gattung (E2, Etappe 3): der beschriftete Balken.
   Vorher hatte der Flow den Balken und der Wizard nummerierte Kreise, deren
   aktueller AMBER war — ein Fortschrittsschritt ist aber kein Kernmoment
   (Hausregel 5). Werte 1:1 aus dem Flow uebernommen; der Flow nutzt jetzt denselben
   Namen. (Der erste Anlauf wollte `.g-stepper` als Alias stehen lassen —
   ein Suchlauf hat ihn ueberschrieben, und der Flow stand eine Stunde
   ohne Stepper-Stil auf main. Ein Alias, den niemand liest, ist ohnehin
   nur eine zweite Wahrheit.) */
.stepper { display: flex; gap: 8px; list-style: none; padding: 0; margin: 0 0 16px; }
.stepper li { flex: 1; min-width: 0; height: auto; }
.stepper .bar { display: block; height: 4px; border-radius: var(--radius-voll); background: var(--line); }
.stepper .txt { display: block; font: 500 10.5px/1.3 var(--display); letter-spacing: .4px;
  color: var(--muted); margin-top: 7px; white-space: nowrap; overflow: hidden;
  text-overflow: ellipsis; }
.stepper li.fertig .bar { background: var(--good); }
.stepper li.fertig .txt { color: var(--good); }
.stepper li.aktiv .bar { background: var(--petrol); }
.stepper li.aktiv .txt { color: var(--petrol-deep); font-weight: 600; }

/* --- Knopf-Rollen (Etappe 3, 2026-07-27) ---------------------------------
   Umgezogen aus `gefuehrt.css`, Werte 1:1. Sie standen dort, obwohl der
   Wizard dieses Stylesheet nicht laedt — dieselbe Fehlerklasse, die den
   Stepper eine Stunde ohne Stil auf main stehen liess. Sichtbar wurde es
   an `teilstuecke/guthaben_leer.html`: die Karte fuer ein leeres Guthaben
   rendert der Ausnahme-Handler auf JEDER Flaeche und benutzt btn-primary.
   Die `.gefuehrt …`-Kontextfassungen bleiben im Flow: Kontext darf
   abweichen, Rollen nicht.
   Inventur, Bauplan und die Testfalle: docs/specs/2026-07-27-etappe-3-knoepfe.md */
.btn-primary { background: var(--petrol); color: var(--paper); border: none; padding: 13px 22px;
  border-radius: var(--radius-knopf); font: 500 14.5px/1 var(--display); letter-spacing: .3px; cursor: pointer;
  box-shadow: var(--schatten-knopf-primaer); transition: background .15s ease, transform .15s ease; }
.btn-primary:hover { background: var(--petrol-700); transform: translateY(-1px); }
.btn-berater { background: var(--amber); color: #241205; border: none; padding: 13px 22px;
  border-radius: var(--radius-knopf); font: 500 14.5px/1 var(--display); letter-spacing: .3px; cursor: pointer;
  box-shadow: var(--schatten-knopf-berater); transition: filter .15s ease, transform .15s ease; }
.btn-berater:hover { filter: brightness(1.06); transform: translateY(-1px); }
/* Die VIERTE Sperre. Sie verduennte mit opacity: .5 — gerechnet 2,74 : 1 —
   waehrend .btn:disabled und .btn-berater:disabled je eine eigene, lesbare
   Fassung haben. Genau diese Machart verbietet test_credits_r8_regressionen
   fuer die Geschwister; fuer diese hier prueste sie niemand. Erreicht wird sie
   an vier Stellen in cockpit/gefuehrt_schritt.html, wenn das Guthaben nicht
   reicht. Fassung wie die Gruppe oben (--card / --line / --muted, 5,3 : 1). */
.btn-primary:disabled { background: var(--card); border: 1px solid var(--line);
  color: var(--muted); padding: 12px 21px;
  cursor: default; box-shadow: none; transform: none; }
.btn-secondary { background: transparent; border: 1px solid var(--line); color: var(--petrol);
  padding: 12px 20px; border-radius: var(--radius-knopf); font: 400 14px/1 var(--display); cursor: pointer; }
.btn-secondary:hover { background: rgba(22,52,59,.05); }
.btn-secondary.selected { border-color: var(--good); color: var(--good); background: var(--ok-wahl); }
.link-btn { background: none; border: none; color: var(--petrol); text-decoration: underline;
  text-underline-offset: 3px; font: 400 13px/1 var(--display); padding: 4px 2px; cursor: pointer; }
.link-btn.stumm { color: var(--muted); }
.link-btn.gefahr { color: var(--warn); }
/* X18 (Runde 7): der gesperrte Berater-Knopf war unlesbar. Gemessen: Flaeche
   1,61:1 gegen das Panel, Beschriftung 1,68:1 gegen die Flaeche — waehrend der
   Erklaersatz daneben bei 15,3:1 stand. Die HANDLUNG war das unsichtbarste
   Element des Screens, die Ausrede das sichtbarste. Ursache: `opacity: .45` auf
   Amber ueber `--gold-soft` ist die schlechteste denkbare Paarung.
   Seit X5 ist gesperrt der DAUERZUSTAND des HR-Gates (nichts ist vorgehakt) —
   also braucht er eine eigene Fassung statt einer Verduennung: gedeckte
   Flaeche, Amber-Kontur, lesbare Schrift. */
.btn-berater:disabled { background: var(--g-weiss); color: var(--gold-tief);
  border: 1.5px solid var(--gold-linie); padding: 11.5px 20.5px;
  cursor: default; box-shadow: none; filter: none; transform: none; }

/* Erste-Schritte-Tour */
.tour-highlight { position: relative; z-index: 60; border-radius: var(--radius-karte);
  box-shadow: 0 0 0 3px var(--amber), 0 0 0 9999px rgba(15, 36, 41, .6); }
.tour-tipp { position: absolute; z-index: 70; max-width: 320px;
  background: var(--card); border: 1px solid var(--gold-linie);
  border-radius: var(--radius-karte); padding: 12px 16px;
  box-shadow: var(--schatten-schwebend); }

/* KI-arbeitet: der Orb — Amber darf hier atmen (Kernmoment) */
.puls-buehne { display: flex; flex-direction: column; align-items: center;
               gap: 18px; padding: 36px 0; }
.puls { width: 90px; height: 90px; border-radius: 50%;
        background: radial-gradient(circle at 35% 30%,
                    var(--amber-soft), var(--amber));
        animation: puls-atmen 1.8s ease-in-out infinite; }
@keyframes puls-atmen {
  0%   { transform: scale(.92);
         box-shadow: 0 0 0 0 rgba(199, 123, 59, .45); }
  70%  { transform: scale(1.05);
         box-shadow: 0 0 0 26px rgba(199, 123, 59, 0); }
  100% { transform: scale(.92);
         box-shadow: 0 0 0 0 rgba(199, 123, 59, 0); }
}
.arbeits-text { font-family: var(--body); font-style: italic;
                font-size: var(--text-gross); color: var(--petrol); text-align: center;
                min-height: 1.5em; transition: opacity .4s; }
/* Die Augenbraue: kurzes Etikett ueber einem Block („System", „Prompt (in)"). */
.arbeits-hinweis { font-family: var(--display); font-size: var(--text-marke);
                   letter-spacing: .1em; text-transform: uppercase;
                   color: var(--muted); }
/* Runde 3: dieselbe Augenbraue trug 12 ganze SAETZE, neun davon auf „Mein
   Profil", der laengste 170 Zeichen ueber drei Zeilen. Versalien mit .1em
   Sperrung sind fuer Etiketten gemacht; ein Absatz darin liest sich schwer und
   sieht nach einem anderen Produkt aus als der Rest. Anleitung ist Fliesstext:
   gemischte Schreibung, keine Sperrung, Zeilenabstand zum Lesen. */
.feld-hinweis { font-size: var(--text-klein); color: var(--muted);
                line-height: 1.5; margin: var(--abstand-xs) 0 0; }
/* Ein Hinweis, der eine Folge hat („die hinteren Tools stehen nicht im
   Lebenslauf"), darf nicht so leise sein wie einer, der nur erklaert. */
.feld-hinweis--warn { color: var(--warn); font-weight: 600; }

/* Hilfshinweise-Panel (Szene 5): Satz-Anstupser als Amber-Chips */
.hinweis-panel { margin: 12px 0; }
.hinweis-titel { font-size: 12.5px; color: var(--muted); margin: 0 0 8px; }
.hinweis-chip {
  display: inline-block; margin: 0 6px 6px 0; padding: 6px 12px;
  font-size: var(--text-basis); border: 1px dashed var(--amber); border-radius: var(--radius-pille);
  background: var(--card); color: var(--gold-tief); cursor: pointer;
  transition: background .15s;
}
.hinweis-chip:hover { background: var(--gold-soft); }

/* Bonus-Leiste: Wizard-Fortschritt nach Schritt 6 (Szene 9/10) */
.bonus-leiste { font-family: var(--display); font-size: var(--text-klein);
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--muted); margin-bottom: 16px; }
.bonus-leiste .nr { color: var(--good); font-weight: 700; }
.bonus-leiste strong { color: var(--petrol); }

/* Entwurf-Ansicht (Szene 9): Anschreiben | CV nebeneinander.
   Die farbige Oberkante spiegelt das Thema des OUTPUT-Dokuments —
   bewusst dessen Akzentfarben, nicht unsere. */
.entwurf-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 760px) { .entwurf-grid { grid-template-columns: 1fr; } }
.dok-titel { font-size: var(--text-marke); letter-spacing: .12em; text-transform: uppercase;
  font-weight: 600; color: var(--muted); margin: 0 0 6px; }
.dok { background: #fff; border: 1px solid var(--line); border-radius: var(--radius-block);
  border-top: 3px solid #FFC000; padding: 14px 16px; font-size: 12.5px;
  max-height: 420px; overflow-y: auto;
  font-family: var(--body); line-height: 1.5; }
/* Markdown-Licht: die Dokumente kommen als gerenderte Textfassung
   (Überschriften/Listen/Absätze), nicht mehr als Roh-Markdown. */
.dok p { margin: 0 0 10px; }
.dok ul { margin: 0 0 10px; padding-left: 18px; }
.dok li { margin: 0 0 3px; }
.dok h3, .dok h4, .dok h5 { font-family: var(--display); margin: 14px 0 6px; }
.dok h3:first-child { margin-top: 0; }
.dok h3.md-h1 { font-size: var(--text-lead); letter-spacing: -.01em; }
.dok h4.md-h2 { font-size: var(--text-marke); letter-spacing: .1em;
  text-transform: uppercase; color: var(--blaugrau); }
.dok h5.md-h3 { font-size: var(--text-klein); }
/* Im Drawer tragen die Dokumente KEINE Docx-Themen-Kante — die echte
   Akzentfarbe wählt der Nutzer im Vorschau-Tab (Gremium: #FFC000-Kante
   ignorierte die Wahl und war reines Pseudo-Gold).

   Der Selektor hiess bis Runde 8 `.dok-grid .dok` und band damit an ein
   RASTER statt an den Drawer, den sein eigener Kommentar nennt. Die mobile
   Lesefassung (`drawer.html:605`, seit W17) rendert `.dok` ausserhalb
   dieses Rasters — dort griff die Regel also nie, und die Kante war
   zurueck: gemessen 3,0 px `#FFC000` in 5 von 8 mobilen
   Dokumente-Ansichten, das hoechstgesaettigte Pixel aller 64 Aufnahmen der
   Visuell-Nachmessung. Am Schreibtisch zeigte dasselbe Bauteil keine
   solche Kante: zwei Farbsysteme fuer ein Element ueber die Bruchstelle.

   Dieselbe Klasse wie beim Phasenriegel und bei `merke_jobstart`: die
   Regel muss dem Gegenstand gehoeren, nicht dem Behaelter, in dem er
   heute zufaellig steht. `tests/test_drawer_raster_chromium.py` (V26)
   prueft jetzt die ganze Detailansicht in beiden Breiten statt eines
   Selektors. */
.drawer .dok { border-top: 1px solid var(--line); }
.thema-blau .dok { border-top-color: #2E5A87; }
.thema-graphit .dok { border-top-color: #6E6E6E; }

/* Format-Leiste (bewusst gestufte Ambition) */
.format-leiste { margin-top: 14px; padding-top: 10px;
  border-top: 1px solid var(--line); }
.format-kachel { display: inline-block; padding: 6px 12px; margin: 0 6px 6px 0;
  border: 1px solid var(--line); border-radius: var(--radius-block); font-size: var(--text-klein);
  font-family: var(--display); }
.format-kachel.aktiv { border-color: var(--petrol); background: var(--card);
  font-weight: 600; }
.format-kachel.bald { color: var(--muted); opacity: .6; }
/* Die Pillen-Swatches der Format-Leiste (.swatch, .swatch-gold/-blau/-graphit)
   standen hier bis 2026-07-27 — unbenutzt, und mit demselben Namen wie der
   runde Farbpunkt in gefuehrt.css. Die Farbwahl laeuft seit dem Gremium
   2026-07-23 ueber teilstuecke/design_auswahl.html (.design-palette /
   .palette-felder, Farbe inline). Siehe die Notiz weiter unten am
   Vorschau-Reiter und docs/specs/2026-07-27-etappe-3-doppelungen.md */
.berater-einladung { margin-top: 16px; }

/* == Schalter, Upload, Schrift-Wahl ======================================== */
/* Aus gefuehrt.css hierher gezogen (2026-07-27). Gefunden hat das der neue
   Flaechen-Waechter (tests/test_flaechen_deckung.py):
   `teilstuecke/entwurf_ansicht.html` bindet diese drei Bauteile auch in
   **Wizard-Schritt 8 und 9** ein — und der Wizard laedt nur dieses Stylesheet.
   Der Foto-Schalter war dort also ein nackter <button>, der Upload-Knopf ein
   nackter Knopf, das Dropdown ein Browser-Default. Dritte Instanz derselben
   Fehlerklasse nach dem Stepper und `.chip-ok`.

   Beide flow-eigenen Tokens brauchten eine Antwort, und es sind zwei
   verschiedene:

   * `--g-weiss` bleibt am `.gefuehrt`-Container — es hier zu heben waere eine
     Pixelaenderung (`.chip` in der Cockpit-Liste liest es und ist heute
     absichtlich durchsichtig, gefuehrt.css:58). Also Rueckfallwert im
     `var()`, Machart wie `var(--line, #e6e0d6)` weiter unten: im Flow gewinnt
     das Token, im Wizard der Wert.
   * Der Schalter-Schatten wurde eine **Rolle im Haus**
     (`--schatten-schalter`), so wie es Etappe 3 fuer alle Schatten
     vorschreibt. Ein harter Wert im `var()`-Fallback ist keine Loesung — das
     hat `test_kein_harter_schatten_mehr` zu Recht gemeldet, und das nun
     leserlose `--fl-schatten-schalter` ebenso `test_jedes_schatten_token_hat_
     einen_leser`. Zwei Waechter, ein Befund: der Wert gehoert dorthin, wo
     sein Leser wohnt. */
.switch { width: 46px; height: 26px; border-radius: var(--radius-pille);
  background: #d8d2c4; border: none;
  position: relative; flex: none; cursor: pointer; }
.switch .knob { position: absolute; top: 3px; left: 3px; width: 20px; height: 20px;
  border-radius: 50%; background: var(--g-weiss, #FFFDF9);
  transition: left .18s ease;
  box-shadow: var(--schatten-schalter); }
.switch.on { background: var(--good); }
.switch.on .knob { left: 23px; }
.upload-btn { display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px;
  border: 1px solid var(--line); border-radius: var(--radius-knopf);
  background: var(--g-weiss, #FFFDF9); color: var(--petrol);
  font: 400 11.5px/1 var(--display); cursor: pointer; }
.upload-btn:hover { border-color: var(--petrol); }
.schrift-select { font: 400 12px/1 var(--display); color: var(--petrol);
  background: var(--g-weiss, #FFFDF9); border: 1px solid var(--line);
  border-radius: var(--radius-feld);
  padding: 6px 26px 6px 9px; cursor: pointer; max-width: 200px;
  appearance: none; -webkit-appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'><path d='M1 1l4 4 4-4' fill='none' stroke='%2316585D' stroke-width='1.5'/></svg>");
  background-repeat: no-repeat; background-position: right 9px center; }
/* `outline: none` stand hier bis 2026-07-27 und schlug mit Spezifitaet (0,2,0)
   den Qualitaets-Floor `:focus-visible` (0,1,0) aus design.css. Beim Tabben
   blieb als einziges Signal ein Rahmenwechsel — auf drei Flaechen, darunter
   Wizard 8 und 9. Der Hover-Rahmen bleibt, der Ring kommt zurueck. */
.schrift-select:hover, .schrift-select:focus { border-color: var(--petrol); }

/* Bewerbungs-Cockpit (E3): Board + Karten — Petrol trägt die Struktur */
.board-kopf { display: flex; justify-content: space-between;
  align-items: center; margin-bottom: 14px; }
.board { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px;
  align-items: start; }
/* Der Stapel-Override für schmale Geräte stand FRÜHER hier — und war
   wirkungslos, weil der Board-Feinschliff weiter unten `.board
   { grid-template-columns: repeat(5, minmax(0,1fr)) }` neu setzt und Media
   Queries die Spezifität nicht erhöhen. Er steht jetzt hinter dieser
   späteren Regel (W7/2, Runde 6); die tote Zeile ist weg, weil sie sich wie
   die Lösung las und den Befund fünf Runden lang verdeckt hat. */
.spalte { background: color-mix(in srgb, var(--petrol) 4%, var(--paper));
  border: 1px solid var(--line);
  border-top: 3px solid var(--petrol);
  border-radius: var(--radius-block); padding: 8px; min-height: 180px; }
.spalten-titel { font-size: var(--text-marke); letter-spacing: .12em; font-weight: 600;
  text-transform: uppercase; color: var(--petrol); margin: 2px 4px 8px; }
.spalten-zahl { float: right; color: var(--muted); }
/* Etappe 3: dieselbe Fassung wie jede andere Karte — Flaeche, Kante, Ecke,
   Tiefe aus derselben Quelle. Eigen bleibt, was Aufgabe ist: das Ziehen. */
.bewerbung-karte { background: var(--card); border: 1px solid var(--line);
  border-radius: var(--radius-karte); box-shadow: var(--schatten-karte);
  padding: 10px; margin-bottom: 8px; cursor: grab; }
.bewerbung-karte.arbeitet { border-color: var(--amber);
  box-shadow: var(--schatten-arbeitet); }
.karte-firma { font-family: var(--display); font-weight: 700; margin: 0; }
.karte-firma a { color: inherit; text-decoration: none; }
.karte-titel { margin: 2px 0 6px; font-size: 12.5px; color: var(--muted);
  /* 2 Zeilen, dann … — konstante Kartenhöhen sind die halbe Scanbarkeit
     (Gremium 2026-07-22); der volle Titel steht im Drawer. */
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden; }
.karte-status { font-size: 12.5px; color: var(--gold-tief); margin: 4px 0 0;
  font-style: italic; }

/* Qualitäts-Floor */
:focus-visible { outline: 2px solid var(--amber); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) {
  .puls { animation: none; box-shadow: 0 0 0 8px rgba(199, 123, 59, .2); }
  #wizard-inhalt, .bewerbung-karte { animation: none; }
  .btn, .btn:hover { transition: none; transform: none; }
}

/* Dropzone (Wizard Schritt 2) — einladend, Amber gestrichelt */
.dropzone { position: relative; display: flex; flex-direction: column;
  align-items: center; gap: 6px; text-align: center; padding: 30px;
  border: 2px dashed var(--amber); border-radius: var(--radius-feld);
  background: var(--gold-soft); cursor: pointer; color: var(--gold-tief);
  font-family: var(--display); margin: 14px 0; }
.dropzone:hover { background: #F8EAD9; }
.dropzone .up { font-size: 26px; line-height: 1; }

/* Zielbild-Bubbles (Schritt 7): antippbare Präferenzen — kein Formular-Marathon */
.bubble { display: inline-block; margin: 0 6px 6px 0; }
.bubble input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.bubble span { display: inline-block; padding: 6px 14px; font-size: var(--text-basis);
  font-family: var(--display); border: 1px solid var(--line);
  border-radius: var(--radius-pille); background: var(--card); cursor: pointer;
  transition: background .15s, border-color .15s; }
.bubble span:hover { border-color: var(--petrol); }
.bubble input:checked + span { background: var(--petrol);
  border-color: var(--petrol); color: var(--paper); }
.bubble input:focus-visible + span { outline: 2px solid var(--amber);
  outline-offset: 2px; }

/* „Anders?"-Fold für Alternativ-Töne (Ton-Palette-Gremium 2026-07-23):
   leiser Aufklapper, kein Akzent — Kern bleibt sichtbar, Rest auf Wunsch. */
.ton-mehr { margin: 2px 0 4px; }
.ton-mehr > summary { display: inline-block; list-style: none; cursor: pointer;
  font-family: var(--display); font-size: var(--text-klein); color: var(--muted);
  padding: 3px 0; border-bottom: 1px dotted var(--line); width: fit-content; }
.ton-mehr > summary::-webkit-details-marker { display: none; }
/* Runde 4: „Job-Praeferenzen" war in keiner Daumen-Messung — dort sind die
   Bedienelemente Auswahl-Blasen und ein Aufklapper, keine Felder. Gemessen
   26 von 34 Zielen unter 44 (Blase 304x34,8, Aufklapper 115x26).
   Steht hier neben den Regeln und nicht im Mobil-Block weiter oben: der liegt
   frueher in der Datei und wuerde von diesen ueberschrieben. Die Klasse traegt
   das Polster im `span`, deshalb greift die Hoehe dort. */
@media (pointer: coarse) {
  .bubble span, .ton-mehr > summary { min-height: 44px; display: inline-flex;
    align-items: center; }
}
.ton-mehr > summary:hover { color: var(--petrol); border-color: var(--petrol); }
.ton-mehr[open] > summary { margin-bottom: 8px; }

/* == Cockpit-Redesign (Spec docs/mockups/cockpit-redesign-features.md) ======
   Übersichts-Kacheln, Werkzeugleiste, Ansichten-Umschalter (§1/§2). */
.statistik { display: flex; gap: 10px; flex-wrap: wrap; margin: 12px 0 8px; }
.statistik .stat { flex: 1 1 108px; max-width: 156px; background: var(--card);
  border: 1px solid var(--line); border-top: 3px solid var(--petrol);
  border-radius: var(--radius-karte); padding: 8px 14px 7px; display: flex;
  flex-direction: column; gap: 1px; font-family: var(--display); }
.statistik .stat b { font-size: var(--text-titel); line-height: 1.1; font-weight: 700;
  color: var(--ink); font-variant-numeric: tabular-nums; }
.statistik .stat span { font-size: var(--text-mikro); font-weight: 600;
  letter-spacing: .13em; text-transform: uppercase; color: var(--muted); }
.statistik .stat-leise b { color: var(--muted); font-weight: 400; }
/* Merge M2/M3: kam mit AP3.2 (leeres Cockpit) und trug 5px hart — ein Wert
   ohne Rolle, weil M3 die Formensprache aus Etappe 2 noch nicht kannte.
   Die Zeile steht in derselben Reihe wie die Kacheln und ersetzt sie, wenn
   das Board leer ist; `.stat` liest `--radius-karte`. Also dieselbe Rolle:
   was denselben Platz einnimmt, soll dieselbe Ecke haben. */
.cockpit-willkommen { font-size: var(--text-bedien); color: var(--ink); background: var(--card);
  border: 1px solid var(--line); border-left: 3px solid var(--petrol);
  border-radius: var(--radius-karte); padding: 12px 16px; margin: 0; flex: 1 1 100%; }
.werkzeuge { display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  margin: 0 0 16px; }
.suche { flex: 1 1 280px; max-width: 560px; }
/* Das Polster stand hier bis 2026-07-27 als `10px 16px` — und war nie in
   Wirkung: Zeile 829 setzt es unbedingt und gleich spezifisch auf `11px 18px`,
   Zeile 846 zieht das linke auf 42px nach (Platz fuer die Lupe). Eine Zahl, die
   im Stylesheet steht und nichts tut, ist schlimmer als keine — der Naechste
   aendert sie und wundert sich. Der wirksame Wert steht jetzt hier. */
.suche input { width: 100%; background: var(--card);
  border: 1px solid var(--gold-linie); border-radius: var(--radius-feld);
  padding: 11px 18px; font-size: 13.5px; font-family: var(--body);
  color: var(--ink); }
.suche input:focus-visible { outline: 2px solid var(--amber);
  outline-offset: 1px; }
.ansicht-schalter { display: inline-flex; border: 1px solid var(--line);
  border-radius: var(--radius-karte); overflow: hidden; background: var(--card);
  margin-left: auto; }
.schalter { font-family: var(--display); font-size: var(--text-marke); font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase; padding: 8px 16px;
  color: var(--muted); text-decoration: none; }
.schalter:hover { color: var(--ink); }
.schalter.aktiv { background: var(--petrol); color: var(--paper); }

/* Ruhige Karte: Kopf, Score-Leiste, Schritt-Zeile, Fuß (Spec §3) */
.karte-kopf { display: flex; align-items: flex-start; gap: 6px; }
.stern { background: none; border: none; cursor: pointer; font-size: var(--text-lead);
  line-height: 1.2; padding: 1px 4px; color: rgba(22, 52, 59, .28);
  border-radius: var(--radius-block); flex: none; }
/* Amber-Diät (Gremium): Favorisieren ist eine Nutzer-Pinnnadel, kein
   KI-Fund — Petrol statt Amber. */
.stern:hover { color: var(--petrol); }
.stern.aktiv { color: var(--petrol); }
.notiz-punkt { color: var(--petrol); font-weight: 700; }
/* Score-Leiste (Kurz-Gremium 2026-07-23): zwei ruhige Zeilen — oben Match
   (der Ring trägt die Bandfarbe, eine Sprache mit der Stellensuche),
   darunter EIN Qualitäts-Slot (HR-Note bzw. Text-Check). Wert + Label
   nebeneinander, Ziffern beider Zeilen bündig. */
.score-leiste { display: flex; flex-direction: column;
  background: var(--linie-soft); border-radius: var(--radius-block); padding: 7px 10px;
  margin: 8px 0; }
.score-teil { display: inline-flex; align-items: center; gap: 6px;
  min-width: 0; font-family: var(--display); font-size: 10px;
  font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
  color: var(--muted); white-space: nowrap; }
.score-leiste .score-text { flex-direction: row; align-items: baseline;
  gap: 7px; }
.score-leiste > .score-teil + .score-teil {
  border-top: 1px solid var(--line); margin-top: 7px; padding-top: 7px;
  padding-left: 28px; /* Ring (20) + Lücke (8): Ziffern beginnen bündig */ }
/* Delta-Chip („geschätzt"/↑) läuft im Label mit */
.score-leiste .score-label { white-space: normal; }
.score-teil b { font-size: var(--text-basis); color: var(--ink);
  font-variant-numeric: tabular-nums; letter-spacing: 0; }
.score-teil small { font-weight: 400; letter-spacing: 0; }
.score-teil .delta { font-size: 9.5px; text-transform: none;
  letter-spacing: 0; }
.karte-schritt { font-family: var(--display); font-size: var(--text-klein);
  line-height: 1.45; margin: 6px 0; }
.karte-schritt .pfeil { color: var(--petrol); font-weight: 700; }
.schritt-warn { color: var(--warn); font-weight: 600; }
.schritt-amber { color: var(--gold-tief); font-weight: 600; }
/* „Dein Zug" auf Karte, Liste und To-Do. Ohne diese Zeile haetten die
   drei Flaechen beim Tonwechsel vom 2026-07-29 stillschweigend ihre
   Betonung verloren — eine Regression durch Auslassen. */
.schritt-zug { color: var(--petrol); font-weight: 600; }
.schritt-gut { color: var(--ok); font-weight: 600; }
.karte-fuss { border-top: 1px solid var(--linie-soft); padding-top: 6px;
  margin-top: 8px; font-size: var(--text-klein); color: var(--muted); }
.karte-fuss p { margin: 2px 0; }

/* Karten-Gremium 2026-07-22: stille Warte-Zeile (kein ▶), Ein-Klick-
   „Erledigt", Fällig als Amber („dein Zug", nicht „versäumt" — die rote
   pill-due anderswo, z. B. Konto, bleibt), Nachfass-Werkzeug im Drawer. */
.warte-zeile { font-family: var(--display); font-size: var(--text-klein);
  color: var(--muted); margin: 6px 0; }
.schritt-still { color: var(--muted); }
.mini-btn { font-family: var(--display); font-size: var(--text-marke); font-weight: 600;
  color: var(--petrol); background: none; border: 1px solid var(--line);
  border-radius: var(--radius-block); padding: 2px 9px; cursor: pointer; margin-left: 6px; }
.mini-btn:hover { border-color: var(--petrol); }
.bewerbung-karte .pill-due { border-color: var(--amber);
  background: var(--gold-soft); color: var(--gold-tief); }
.nachfass-box { background: var(--linie-soft); border-radius: var(--radius-karte);
  padding: 10px 12px; margin: 10px 0; }
.nachfass-box .nachfass-text { white-space: pre-line; font-size: 12.5px;
  margin: 0 0 8px; }

/* Erklär-Tooltips (Spec §3.4): unterhalb, linksbündig, kollisionssicher —
   die rechte Score-Hälfte öffnet nach links (Board-Rand!). */
[data-tipp] { position: relative; cursor: help; }
[data-tipp]:hover::after, [data-tipp]:focus-visible::after {
  content: attr(data-tipp); position: absolute;
  top: calc(100% + 8px); left: 0; z-index: 45; width: 224px;
  background: var(--petrol); color: #EDE7DC; font-family: var(--body);
  font-size: var(--text-klein); font-weight: 400; line-height: 1.5; letter-spacing: 0;
  text-transform: none; text-align: left; padding: 10px 12px;
  white-space: normal;
  border-radius: var(--radius-karte); box-shadow: var(--schatten-schwebend); }
[data-tipp]:hover::before, [data-tipp]:focus-visible::before {
  content: ""; position: absolute;
  top: calc(100% + 3px); left: 14px; border: 5px solid transparent;
  border-bottom-color: var(--petrol); z-index: 46; }
/* Board-Karten sind schmaler als der 224px-Tooltip — darum den Erklär-Tooltip
   NICHT an das einzelne Score-Teil hängen (dann ragt er in die Nachbarspalte
   oder wird am Board-Rand abgeschnitten — Martins Befund), sondern an die ganze
   Score-Leiste: er klappt in Kartenbreite gerade nach unten und bleibt immer
   innerhalb der Karte. Der Pfeil zeigt auf die gehoverte Zelle.
   Nur im Board gescoped — Tooltips anderswo bleiben. */
.score-leiste { position: relative; }
.score-leiste [data-tipp] { position: static; }
.score-leiste [data-tipp]:hover::after,
.score-leiste [data-tipp]:focus-visible::after {
  left: 0; right: 0; width: auto;
  font-size: 11.5px; line-height: 1.45; padding: 9px 11px; }
.score-leiste [data-tipp]:hover::before,
.score-leiste [data-tipp]:focus-visible::before {
  left: 16px; right: auto; }
.score-leiste > .score-teil + .score-teil[data-tipp]:hover::before,
.score-leiste > .score-teil + .score-teil[data-tipp]:focus-visible::before {
  left: 40px; }

/* Archiv-Zeilen (Spec §1.4) */
.archiv-zeile { display: flex; align-items: center; gap: 14px;
  margin-bottom: 10px; opacity: .88; }

/* Listen-Ansicht (Spec §1.2) */
.liste { width: 100%; min-width: 900px; border-collapse: separate;
  border-spacing: 0; background: var(--card); border: 1px solid var(--line);
  border-radius: var(--radius-karte); }
.liste th { font-family: var(--display); font-size: 10px; font-weight: 700;
  letter-spacing: .13em; text-transform: uppercase; color: var(--muted);
  text-align: left; padding: 12px 14px;
  border-bottom: 2px solid var(--petrol); white-space: nowrap; }
.liste td { padding: 12px 14px; border-bottom: 1px solid var(--linie-soft);
  font-size: var(--text-basis); vertical-align: middle; }
.liste tbody tr:last-child td { border-bottom: none; }
.liste tbody tr[hx-get] { cursor: pointer; }
.liste tbody tr[hx-get]:hover td { background: var(--linie-soft); }
.zeile-warn td:first-child { box-shadow: inset 3px 0 0 var(--warn); }
.l-firma { font-family: var(--display); font-weight: 700; font-size: 13.5px;
  color: var(--ink); text-decoration: none; }
.l-firma:hover { border-bottom: 2px solid var(--petrol); }
.l-titel { font-size: var(--text-klein); color: var(--muted); }
.phase-select { font-family: var(--display); font-size: var(--text-marke);
  font-weight: 600; color: var(--ink); background: var(--card);
  border: 1px solid var(--line); border-radius: var(--radius-block); padding: 4px 6px;
  cursor: pointer; }
.fav-form { display: inline; }

/* To-Do-Ansicht (Spec §1.3) */
.todo-gruppe { max-width: 900px; margin-bottom: 24px; }
.todo-gruppen-titel { font-family: var(--display); font-size: var(--text-marke);
  font-weight: 700; letter-spacing: .13em; text-transform: uppercase;
  color: var(--ink); margin: 0 0 10px; padding-bottom: 6px;
  border-bottom: 2px solid var(--petrol); display: flex; gap: 8px; }
.todo-gruppen-titel .anzahl { color: var(--muted); font-weight: 400; }
.todo-gruppen-titel.warn { border-bottom-color: var(--warn);
  color: var(--warn); }
.todo-gruppen-titel.amber { border-bottom-color: var(--amber);
  color: var(--gold-tief); }
.todo-gruppen-titel.gut { border-bottom-color: var(--good);
  color: var(--ok); }
.todo-zeile { display: flex; align-items: center; gap: 14px;
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-karte);
  padding: 12px 14px; margin-bottom: 8px; text-decoration: none;
  color: var(--ink); transition: border-color .15s; }
.todo-zeile:hover { border-color: var(--petrol); }
.todo-info { flex: 1; min-width: 0; }
.todo-firma { font-family: var(--display); font-weight: 700;
  font-size: 13.5px; }
.todo-firma small { font-weight: 400; color: var(--muted);
  font-family: var(--body); }
.todo-text { font-family: var(--display); font-size: 12.5px;
  margin-top: 2px; }
.todo-text .pfeil { color: var(--petrol); font-weight: 700; }


/* Cockpit braucht Breite: 5 Spalten + Liste (Mockup: 1460 px) */
.inhalt-breit { max-width: 1460px; }

/* Score-Grafiken wie im Mockup: Mini-Ring (Match) + Mini-Balken (Berater) */
.score-ring { flex: none; width: 20px; height: 20px; display: inline-block;
  align-self: center; }
.score-ring svg { transform: rotate(-90deg); display: block; }
.score-balken { flex: none; width: 26px; height: 5px; border-radius: var(--radius-voll);
  background: var(--line); overflow: hidden; display: inline-block;
  align-self: center; }
.score-balken i { display: block; height: 100%; border-radius: var(--radius-voll); }

/* == Board-Feinschliff: Mockup-Parität (Spalten, Karten, Drag, Rhythmus) ==== */
/* minmax(0,1fr): sonst drücken inhaltsreiche Karten ihre Spalte breiter —
   die Spalten waren dadurch sichtbar ungleich. */
.board { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; }
.spalte { min-width: 0; background: #ECE5D8;
  transition: background .15s, box-shadow .15s, border-color .15s; }
.spalte.drop-ok { background: var(--gold-soft);
  border-top-color: var(--amber);
  box-shadow: inset 0 0 0 2px var(--amber); }
.bewerbung-karte { border-radius: var(--radius-karte); padding: 12px; margin-bottom: 9px;
  min-width: 0;
  transition: transform .15s, box-shadow .15s, border-color .15s,
    opacity .15s; }
.bewerbung-karte:hover { transform: translateY(-1px);
  border-color: var(--petrol);
  box-shadow: var(--schatten-heben); }
.bewerbung-karte[hx-trigger^="click"] { cursor: pointer; }
.bewerbung-karte.dragging { opacity: .4; transform: none;
  box-shadow: var(--schatten-karte); }
.bewerbung-karte.arbeitet:hover { transform: none;
  border-color: var(--amber); }

/* Kopf-Rhythmus wie im Mockup: mehr Luft zwischen Titel, Kacheln,
   Werkzeugen und Board */
.board-kopf { margin-bottom: 2px; }
.statistik { margin: 14px 0 10px; }
.werkzeuge { margin: 0 0 22px; }
/* Polster steht jetzt in der Basisregel oben (Etappe Felder A). */

@media (prefers-reduced-motion: reduce) {
  .bewerbung-karte, .bewerbung-karte:hover, .spalte
    { transition: none; transform: none; }
}

/* Hinweis-Zeile (Mockup): kursiver Serif-Satz zwischen Kacheln und Suche */
.hinweis { font-size: 13.5px; color: var(--muted); font-style: italic;
  margin: 0 0 14px; }

/* Suche mit Lupe im Feld (Mockup) */
.suche { position: relative; }
.suche svg { position: absolute; left: 16px; top: 50%;
  transform: translateY(-50%); width: 15px; height: 15px;
  stroke: var(--muted); fill: none; stroke-width: 2;
  stroke-linecap: round; pointer-events: none; }
.suche input { padding-left: 42px; }

/* Score-Teil gestapelt wie im Mockup: Wert groß oben, Label darunter */
.score-teil { align-items: center; gap: 8px; }
.score-text { display: flex; flex-direction: column; line-height: 1.15;
  letter-spacing: 0; text-transform: none; min-width: 0; }
.score-text b { font-size: 14.5px; font-weight: 700;
  font-variant-numeric: tabular-nums; }
.score-text small { font-size: 10px; font-weight: 400;
  color: var(--muted); }
.score-label { font-size: var(--text-mikro); font-weight: 600; letter-spacing: .12em;
  text-transform: uppercase; color: var(--muted); white-space: nowrap; }
.score-label .delta { font-size: var(--text-mikro); letter-spacing: 0; }

/* Spalten durchgängig: alle gleich hoch (Grid streckt auf Zeilenhöhe) */
.board { align-items: stretch; }

/* W7/2 (Runde 6) — das Cockpit auf schmalen Geräten.
   Gemessen auf 390 px: fünf Spalten à 59 px, Karten 41 px breit, Kartentexte
   übereinander und abgeschnitten.
   Die Stapel-Regel dafür GAB es seit E3 (`@media (max-width: 900px)` weiter
   oben in dieser Datei). Sie war nur nie wirksam: der Board-Feinschliff setzt
   `.board { grid-template-columns: repeat(5, minmax(0,1fr)) }` DANACH neu,
   und eine Media Query erhöht die Spezifität nicht — dieselbe Falle wie U3/3
   im Flow. Deshalb steht der Override jetzt hinter der Fünf-Spalten-Regel.
   `min-height` muss mit: fünf leere 180-px-Spalten unter der ersten wären ein
   Kilometer Nichts. Gestapelt trägt jede Spalte nur noch ihre Überschrift,
   solange sie leer ist. Der Rest (Karten, Zieh-Momente, Drawer) bleibt, wie er
   ist — Ziehen ist auf dem Touchscreen ohnehin nicht der Weg, das Antippen
   einer Karte schon. */
@media (max-width: 900px) {
  .board { grid-template-columns: minmax(0, 1fr); align-items: start; }
  .spalte { min-height: 0; }
}

/* W7/1 (Runde 6) — die gestaltete Fehlerseite (templates/fehler.html).
   Vorher: rohes `{"detail":"Not Found"}` auf weißem Grund. Karg mit Absicht —
   eine Zahl, ein Satz, EIN Weg zurück. Die Zahl ist Struktur, also Petrol;
   Amber gehört den Baustein- und Berater-Momenten. */
.fehler-seite { max-width: 520px; margin: 8vh auto 0; text-align: center; }
.fehler-seite .fehler-code { font: 600 44px/1 var(--display);
  color: var(--petrol); opacity: .32; margin: 0 0 6px;
  letter-spacing: .04em; }
.fehler-seite h1 { margin: 0 0 10px; }
.fehler-seite .fehler-text { color: var(--muted); margin: 0 0 22px;
  line-height: 1.6; }
.fehler-seite .fehler-weg { margin: 0; }

/* Frage-Dialoge: Abbrechen nur im Board (Vollseite hat „Zurück") */
.frage-vollseite .frage-abbrechen { display: none; }

/* == Detail-Drawer (Spec §4, Mockup-Parität) ================================ */
#drawer-ziel .drawer-scrim { position: fixed; inset: 0;
  background: rgba(15, 36, 41, .45); z-index: 40; }
.drawer { position: fixed; top: 0; right: 0; bottom: 0;
  /* Breiter als das Mockup (dort 56vw/860px): das A4-Erlebnis im
     Dokumente-Reiter braucht Panel UND Blatt nebeneinander. */
  width: min(78vw, 1220px); background: var(--paper);
  border-left: 1px solid var(--line);
  box-shadow: var(--schatten-schublade); z-index: 50;
  display: flex; flex-direction: column;
  animation: drawer-rein .3s cubic-bezier(.2, .7, .2, 1); }
@keyframes drawer-rein {
  from { transform: translateX(60px); opacity: 0; }
  to { transform: none; opacity: 1; } }
@media (max-width: 900px) { .drawer { width: 100vw; } }
/* Kompakt (Martin 2026-07-24): auf Laptop-Höhe soll der Kopf wenig
   Platz nehmen — Downloads leben beim Vorschau-Blatt. */
.d-kopf { background: var(--petrol); color: #EDE7DC;
  padding: 12px 20px 0; }
.d-kopf-zeile { display: flex; justify-content: space-between; gap: 14px;
  align-items: flex-start; }
.d-firma { font-size: 18px; font-weight: 700; letter-spacing: -.01em;
  margin: 0; color: #fff; }
.d-titel { margin: 1px 0 0; font-size: 12.5px; opacity: .8;
  font-style: italic; }
.d-zu { background: rgba(237, 231, 220, .08);
  border: 1px solid rgba(237, 231, 220, .3); color: #EDE7DC;
  border-radius: var(--radius-karte); width: 32px; height: 32px; font-size: var(--text-bedien);
  cursor: pointer; flex: none; }
.d-zu:hover { border-color: var(--amber-soft); color: #fff; }
/* „…" — Archiv und Löschen, die vorher eine feste 61-px-Fußleiste
   belegten. Gleiche Fassung wie `.d-zu`, damit im Kopf nicht zwei
   Knopfsprachen stehen. */
.d-kopf-tasten { display: flex; gap: 8px; align-items: flex-start;
  flex: none; }
.d-mehr { position: relative; }
.d-mehr > summary { list-style: none; display: flex; align-items: center;
  justify-content: center; width: 32px; height: 32px; cursor: pointer;
  background: rgba(237, 231, 220, .08); color: #EDE7DC;
  border: 1px solid rgba(237, 231, 220, .3);
  border-radius: var(--radius-karte); font-size: var(--text-bedien);
  line-height: 1; }
.d-mehr > summary::-webkit-details-marker { display: none; }
.d-mehr > summary:hover { border-color: var(--amber-soft); color: #fff; }
.d-mehr-menue { position: absolute; right: 0; top: 38px; z-index: 2;
  display: flex; flex-direction: column; gap: 6px; padding: 8px;
  min-width: 190px; background: var(--paper); color: var(--ink);
  border: 1px solid var(--line); border-radius: var(--radius-block);
  box-shadow: var(--schatten-schublade); }
.d-mehr-menue .btn { width: 100%; text-align: left; }
/* Chips MIT MASSSTAB im Kopf (Mockup-Abnahme 25.07.). Sie ersetzen den
   Match-Ring samt drei Zahlenblöcken: gemessen fraßen Kopf und Fuß mobil
   bis 63,8 % der Sichthöhe, und vier nackte Zahlen waren der größte
   Einzelbefund der UX-Linse. Der Chip ist das HAUS-Bauteil (`.chip`) —
   auf Petrol bekommt er nur seine dunkle Fassung. */
.d-chips { margin: 10px 0 0; }
.d-chips .chip { background: rgba(237, 231, 220, .1);
  border-color: rgba(237, 231, 220, .22); color: #EDE7DC;
  font-size: var(--text-klein); }
.d-chips .chip b { color: #fff; font-weight: 700; }
.d-chips .chip.chip-ok { border-color: rgba(123, 176, 143, .5); }
.d-chips .chip.chip-warn { border-color: rgba(217, 138, 114, .55); }
.d-aktionen { display: flex; gap: 8px; margin: 10px 0 10px;
  flex-wrap: wrap; }
.d-btn { background: transparent;
  border: 1px solid rgba(237, 231, 220, .35); color: #EDE7DC;
  border-radius: var(--radius-block); padding: 7px 14px; font-size: 12.5px;
  font-weight: 600; font-family: var(--display); text-decoration: none; }
.d-btn:hover { border-color: var(--amber-soft); transform: none; }
/* X1 — die Reiterleiste muss erreichbar sein. Gemessen lag sie bei 375 px
   mit 463–526 px in 334 px Sichtbreite, `overflow-x` ungesetzt und
   `flex-wrap: nowrap`: zwei bis drei Reiter außerhalb des Bildes, ohne
   Scrollweg und ohne zweiten Zugang. Betraf 87 von 87 mobilen Aufnahmen.
   Jetzt: ein echter Scrollweg mit Rasterpunkten, und die Leiste bleibt
   beim Scrollen des Inhalts stehen. */
.tabs { display: flex; flex-wrap: wrap; gap: 2px; padding: 0 2px;
  margin-top: 10px; overflow-x: auto; scrollbar-width: none; }
.tabs::-webkit-scrollbar { display: none; }
.tab { border-bottom: 3px solid transparent; color: #EDE7DC;
  opacity: .65; font-family: var(--display); font-size: 11.5px;
  font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
  padding: 9px 13px 12px; text-decoration: none;
  white-space: nowrap; flex: none; }
.tab:hover { opacity: .9; }
/* V17 (Visuell, Runde 4, Census über 85 von 85 Desktop-Aufnahmen): der
   Fokusring stand nur an den zwei senkrechten Kanten — 0 Amberpixel in
   Ober- und Unterzeile, in 17 Aufnahmen sogar nur an einer Seite. Das liest
   sich nicht als Ring, sondern als Trennstrich.

   Ursache: `:focus-visible` zeichnet mit `outline-offset: 2px` ausserhalb
   des Elements, und `.tabs` hat `overflow-x: auto` — eine Achse ungleich
   `visible` macht auch die andere zum Schnitt. Nebenwirkung: Amber kehrte
   damit ausgerechnet in den Reiterkopf zurück, den Entscheidung 16 gerade
   von Amber geräumt hat (Hausregel 5).

   `-2px` zeichnet den Ring nach innen: nichts zu schneiden, kein
   Layout-Eingriff, und die Leiste behält ihren Scrollweg. */
.tab:focus-visible { outline-offset: -2px; }
/* E16 (Entscheidung 2026-07-28, nach Empfehlung): Amber traegt den
   Aktivzustand NICHT. Hausregel 5 bleibt, wie sie ist — Amber gehoert den
   Baustein- und Berater-Momenten. Ein Reiter ist Struktur, und Struktur ist
   Petrol; auf dem dunklen Kopf markiert ihn Papierweiss samt vollem
   Kontrast. Das nimmt der Flaeche eine von zwei Amber-Quellen, ohne dass
   der aktive Reiter schlechter erkennbar wird: 1,0 Deckkraft und eine
   3-px-Kante gegen 0,65 der uebrigen. */
.tab.aktiv { opacity: 1; color: #fff; border-bottom-color: #EDE7DC; }
/* Der Zähler beantwortet „liegt da überhaupt etwas?" VOR dem Klick — der
   Fassungs-Reiter war im Ist-Stand zu 83,7 % leer, und man erfuhr es erst
   danach. */
.tab-zahl { display: inline-block; margin-left: 6px; padding: 1px 6px;
  border-radius: var(--radius-voll); background: rgba(237, 231, 220, .16);
  font-size: var(--text-marke); letter-spacing: .04em; }
.tab.aktiv .tab-zahl { background: #EDE7DC; color: var(--petrol); }
/* Schmale Geräte: das Wort hinter der Zahl fällt weg. „Prüfung & Passung
   2 Fragen" war 232 px breit und schob den AKTIVEN Reiter bei 320 px aus
   dem Bild — die Zahl allein sagt dasselbe, das Wort ist der Luxus einer
   breiten Leiste. Der Umbruch darüber ist die eigentliche Sicherung: ein
   waagerechter Scrollweg in einer Kopfleiste ist eine Bedienung, die man
   nicht sieht. */
@media (max-width: 620px) {
  .tab-zahl .wort { display: none; }
  .tab { padding: 8px 10px 10px; letter-spacing: .04em; }
}
/* Der Rahmen, in dem die ganze Detailansicht steht — und bis Runde 8 der
   einzige Block ohne Bezug zum System: `22px 26px 34px`, gemessen in 28 von
   28 Desktop-Aufnahmen, und KEINER der drei Werte auf der Raum-Leiter
   (Visuell-Nachmessung 2026-07-29, Blick „Maß").

   Das ist die teuerste Art Abweichung: jeder Abstand darin wird gegen einen
   Rand gemessen, der selbst keiner Regel folgt. Die Leiter gibt es seit
   Runde 6; der Kasten, der alles enthaelt, kannte sie nicht.

   24/24/32 statt 22/26/34: seitlich zwei Pixel mehr, unten zwei weniger.
   Der Fuss bleibt die groessere Stufe, damit die letzte Zeile nicht am Rand
   klebt — das war die Absicht hinter der 34, sie hatte nur keinen Namen. */
.d-inhalt { flex: 1; overflow-y: auto;
  padding: var(--raum-5) var(--raum-5) var(--raum-6); }
/* Schmal: 2×24 px Rand kosten auf 375 px ein Achtel der Zeile — deshalb
   `--raum-4` seitlich. Der Fuss bleibt eine Stufe groesser als der Rand. */
@media (max-width: 620px) {
  .d-inhalt { padding: var(--raum-4) var(--raum-4) var(--raum-5); }
}

/* == Urteilsband ===========================================================
   Der Einstieg in die Detailansicht: Ampel + Zustand + Satz + EINE Handlung.
   Es ersetzt vier nackte Zahlen — der größte Einzelhebel der Mockup-Abnahme
   vom 25.07. (UX 6,25 -> 8,25). Genau EIN farbiges Band je Fläche: deshalb
   trägt der Rest des Reiters keine Flächenfarbe. */
.urteilsband { display: flex; align-items: center; gap: 12px;
  flex-wrap: wrap; margin: 0 0 16px; padding: 14px 18px;
  border: 1px solid var(--line); border-left-width: 4px;
  border-radius: var(--radius-block); background: var(--card); }
.urteil-ampel { width: 9px; height: 9px; border-radius: 50%; flex: none;
  background: var(--muted); }
.urteil-text { margin: 0; flex: 1 1 22ch; min-width: 0;
  font-size: var(--text-basis); line-height: 1.5; }
.urteil-text strong { font-weight: 700; }
.urteil-tat { flex: none; }
.urteilsband.ton-warn { border-left-color: var(--warn);
  background: color-mix(in srgb, var(--warn) 7%, var(--card)); }
.urteilsband.ton-warn .urteil-ampel { background: var(--warn); }
.urteilsband.ton-amber { border-left-color: var(--amber);
  background: color-mix(in srgb, var(--amber) 8%, var(--card)); }
.urteilsband.ton-amber .urteil-ampel { background: var(--amber); }
.urteilsband.ton-gut { border-left-color: var(--good); }
.urteilsband.ton-gut .urteil-ampel { background: var(--good); }
.urteilsband.ton-neutral, .urteilsband.ton-still {
  border-left-color: var(--petrol); }
.urteilsband.ton-still .urteil-ampel { background: var(--line); }

/* Die EINE Lauf-Aussage (X3). Vorher rechneten drei Stellen den Lauf
   verschieden, und ein gescheiterter Lauf blieb im offenen Drawer
   unsichtbar, weil der Poller `hx-swap="none"` trug. */
.lauf-band { display: flex; align-items: center; gap: 10px;
  margin: 0 0 16px; padding: 12px 18px; border: 1px solid var(--line);
  border-radius: var(--radius-block); background: var(--card); }
.lauf-band p { margin: 0; font-size: var(--text-klein); color: var(--muted); }
/* Lesemodus: eine ruhige Zeile statt einer Reihe gesperrter Knoepfe. */
.lese-hinweis { margin: 0 0 16px; padding: 12px 16px;
  border: 1px solid var(--line); border-radius: var(--radius-block);
  background: var(--card); font-size: var(--text-klein); color: var(--muted); }
/* V1 (12 von 12 Linsen, Runde 4) — der teuerste Einzeiler dieser Serie.
   Gemessen 1,00 bis 1,014:1: Glyphe rgb(21,51,58) auf Fläche rgb(22,52,59).
   Von 17.340 Pixeln des Knopfes waren 16.076 exakt Hintergrundfarbe; es gab
   kein einziges Textpixel. Ursache: diese Regel (0,1,1) schlägt
   `.btn-petrol { color: var(--paper) }` (0,1,0) — mein eigener W16-Fix hat
   einen `.btn btn-petrol` in den Hinweis gestellt, und der Hinweis hat ihm
   die Schrift wieder petrol gefärbt. Dunkel auf dunkel.

   Es war die einzige Handlung, die der Fall „ohne Profil" anbietet — und
   das ist der Normalzustand eines frischen Kontos. Aus einer falschen
   Antwort war keine Antwort geworden.

   `:not(.btn)` schliesst die Klasse, nicht die Fundstelle: die Textlink-
   Farbe gilt für Textlinks, ein Knopf behält seine eigene. Dieselbe
   Fehlerklasse zum vierten Mal in dieser Serie (1,00 / 1,16 / 1,32 / 1,01) —
   und dreimal davon in einem Fall, den kein Kontrast-Wächter besucht hat. */
.lese-hinweis a:not(.btn) { color: var(--petrol); }

.lauf-text { flex: 1 1 22ch; min-width: 0; }
.lauf-text strong { color: var(--ink); }
.lauf-dauer { margin-top: 3px !important; opacity: .85; }
.lauf-stop { flex: none; }
.lauf-puls { width: 8px; height: 8px; border-radius: 50%; flex: none;
  background: var(--amber); animation: lauf-puls 1.4s ease-in-out infinite; }
@keyframes lauf-puls { 0%, 100% { opacity: .35; } 50% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  .lauf-puls { animation: none; opacity: .8; } }

/* Dokumente-Reiter: EINSPALTIG, mit dem Blatt als Hauptdarsteller — so wie
   im abgenommenen Mockup. Zwischenstand dieses Umbaus waren zwei Spalten
   (Steuerung links, Blatt rechts); auf 1220 px Drawerbreite standen dann
   rund 600 px leer, weil die Steuerung nach dem Einklappen des
   Aussehen-Panels nur noch vier Knopfzeilen hoch ist. Das Dokument ist der
   Gegenstand dieses Reiters, also bekommt es die Fläche. */
.dok-raster { display: block; }
.dok-steuer, .dok-blatt { min-width: 0; }
.dok-blatt { margin-top: 16px; }
/* Das große Blatt — E5, erste Hälfte (Komposition-Runde, 2026-07-29).

   Es stand mit 760 px in einer 1070-px-Spalte, linksbündig, mit 310 px
   totem Papier rechts über 1075 px Höhe, in 5 von 5 gemessenen Fällen; der
   Beginn lag bei 450–511 px von 900, also hinter der Hälfte des
   Bildschirms, in 9 von 9. Die CSS nennt das Bauteil zwei Zeilen höher
   selbst „Hauptdarsteller".

   Die 760 px waren kein Maß, sondern ein Rest: das Glas rendert A4 mit
   794 px und wurde mit `scale(.957)` darauf gestaucht. Eine gebrochene
   Skalierung kostet Kantenschärfe an jedem Buchstaben — und zwar an dem
   Dokument, das der Nutzer der Firma schickt. Jetzt 1:1, aus EINER Zahl:
   `--blatt-w`. Damit gibt es keinen Faktor mehr, den man vergessen kann,
   und die Leerkante sinkt von 310 auf 276 px.

   Die Begleitspalte für diese Kante ist bewusst ein eigener Schritt: zwei
   Spalten waren hier schon einmal gebaut und wurden mit Messung
   zurückgenommen (siehe den Absatz über `.dok-raster`). Diesen Fehler
   wiederhole ich nicht ungeprüft — die Bedingung dafür gehört in einen
   Wächter, nicht in eine Absicht. */
.drawer .doc-sheet-gross {
  /* A4 bei 96 dpi. `--blatt-s` ist der Faktor, mit dem das Glas darauf
     gestaucht wird — am Schreibtisch 1, also gar nicht. Je Breite werden
     genau ZWEI Zahlen gesetzt statt sechs; vorher standen Kastenbreite,
     Kastenhoehe und Faktor dreimal getrennt da und mussten zueinander
     passen, ohne dass irgendwas das geprueft haette. */
  --blatt-s: 1;
  --blatt-w: calc(794px * var(--blatt-s));
  --blatt-h: calc(1123px * var(--blatt-s));
  width: var(--blatt-w); max-width: 100%; }
.drawer .doc-sheet-gross .doc-sheet-frame { width: var(--blatt-w);
  height: var(--blatt-h);
  overflow: hidden; background: #fff; position: relative; }
.drawer .doc-sheet-gross .doc-sheet-frame iframe { width: 794px;
  height: 1123px; border: 0; transform: scale(var(--blatt-s));
  transform-origin: top left; }
@media (max-width: 1100px) { .drawer .doc-sheet-gross { --blatt-s: .6297; } }
/* Auf dem Telefon ist das Blatt eine MARKE, kein Lesegegenstand: bei
   2,9 px Zeilenband versucht niemand mehr zu lesen, und der Text steht
   daneben in der Lesefassung. Die Marke bleibt, weil sie der Beweis ist,
   dass ein echtes Dokument entstanden ist — dieses Argument kam von der
   Erstnutzer-Linse gegen ein `display: none`. */
@media (max-width: 700px) { .drawer .doc-sheet-gross { --blatt-s: .3627; } }
/* Die Flow-Bauteile zentrieren sich für die Flow-Bühne. Im Drawer stehen sie
   in einer linken Spalte — dort ist zentriert nicht ruhig, sondern schief. */
.drawer .doc-tabs, .drawer .blatt-aktionen { justify-content: flex-start; }
/* „Aussehen ändern" sieht aus wie die Knöpfe daneben — es IST einer. Ein
   Dreieck-Summary neben vier Pillen wäre eine zweite Knopfsprache auf
   derselben Zeile. */
.aussehen-klappe { margin: 10px 0 0; }
.aussehen-klappe > summary { display: inline-flex; align-items: center;
  gap: 8px; cursor: pointer; list-style: none;
  border: 1px solid var(--line); border-radius: var(--radius-pille);
  background: var(--g-weiss); color: var(--ink);
  padding: 9px 18px; font: 600 var(--text-bedien)/1 var(--display); }
.aussehen-klappe > summary::-webkit-details-marker { display: none; }
.aussehen-klappe > summary::before { content: "✎"; opacity: .7; }
.aussehen-klappe > summary:hover { border-color: var(--petrol); }
.aussehen-klappe[open] > summary { border-color: var(--petrol); }
.aussehen-stand { margin: 6px 0 14px; font-size: var(--text-klein);
  color: var(--muted); }
.drawer .doc-sheet { margin: 0; }
.drawer .doc-tap-hint { text-align: left; }

/* Phase weiterschalten (Verlauf-Reiter). Ruhig gehalten: das ist keine
   Verkaufsfläche, sondern das Protokoll einer Bewerbung. */
.phase-block { margin: 0 0 20px; padding: 0 0 18px;
  border-bottom: 1px solid var(--line); }
.phase-form { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.phase-form label { width: 100%; margin: 0; color: var(--muted); }
.phase-form .v-hint { width: 100%; margin: 2px 0 0; }
.phase-form input[type="date"], .phase-form input[type="datetime-local"] {
  max-width: 220px; }

/* Fassungszeile: welches Blatt liegt hier eigentlich auf der Bühne?

   KEIN Flex. Hier stand `display:flex; gap:10px` — und Flex macht aus
   jedem Textknoten ein eigenes Element: vor dem Komma und vor dem Punkt
   klaffte je eine 10-px-Lücke („Runde 1 — Standard-Entwurf , 27.07. um
   18:58 ."). Drei von zwölf Perspektiven haben das unabhängig gemeldet, in
   11 bis 13 von 16 Fällen. Eine Zeile aus Fließtext ist Fließtext; der
   Abstand gehört an den Knopf darin, nicht zwischen die Satzzeichen. */
.fassungs-zeile { margin: 0 0 14px; font-size: var(--text-klein);
  color: var(--muted); line-height: 1.9; }
.fassungs-zeile strong { color: var(--ink); font-weight: 600; }
.fassungs-zeile .v-btn { margin-left: 10px; }

/* Prüfung & Passung: Blöcke mit Bilanz im Titel, Begründungen in Klappen.
   Der Reiter trug vorher sieben Inhaltsklassen ohne Rangfolge. */
.pruef-winkel { margin: 0 0 16px; font-size: var(--text-lead);
  line-height: 1.5; }
.pruef-block { margin: 0 0 16px; }
.pruef-bilanz { float: right; font-weight: 400; color: var(--muted);
  text-transform: none; letter-spacing: 0; }
.pruef-beleg { color: var(--muted); }
.pruef-klappe { border-top: 1px solid var(--line); padding: 10px 0 0;
  margin: 0 0 10px; }
.pruef-klappe > summary { cursor: pointer; font-size: var(--text-klein);
  color: var(--petrol); font-weight: 600; }
.pruef-klappe[open] > summary { margin-bottom: 10px; }
.dok-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 1100px) { .dok-grid { grid-template-columns: 1fr; } }
.drawer .dok { max-height: 52vh; }
.anzeige-meta { display: flex; gap: 14px; flex-wrap: wrap;
  margin: 0 0 12px; font-size: var(--text-klein); color: var(--muted); }
.anzeige-text { background: var(--card); border: 1px solid var(--line);
  border-radius: var(--radius-karte); padding: 16px 18px; font-size: var(--text-basis);
  white-space: pre-wrap; }
.match-liste { list-style: none; margin: 0; padding: 0; }
.match-liste li { padding: 8px 0 8px 24px; position: relative;
  font-size: 13.5px; border-bottom: 1px solid var(--linie-soft); }
.match-liste li::before { position: absolute; left: 2px;
  font-family: var(--display); font-weight: 700; }
.match-liste .plus::before { content: "+"; color: var(--ok); }
.match-liste .minus::before { content: "−"; color: var(--warn); }
/* „Teilweise belegt" ist ein eigener Zustand und war es in dieser Liste
   nicht: die Abdeckung kannte drei Stufen, die Liste malte zwei, und
   `teilweise` landete beim Minus. Dieselbe Zeichensprache wie im Flow
   (`gefuehrt.css:616`), damit ein „~" überall dasselbe heißt. */
.match-liste .teil::before { content: "~"; color: var(--amber); }
.match-begruendung { font-size: var(--text-basis); color: var(--muted);
  font-style: italic; margin: 12px 0 0; }
.kontakt-karte { background: var(--card); border: 1px solid var(--line);
  border-left: 3px solid var(--amber); border-radius: var(--radius-karte);
  padding: 16px 18px; display: flex; gap: 14px; align-items: flex-start;
  margin-bottom: 12px; }
.kontakt-avatar { flex: none; width: 44px; height: 44px;
  border-radius: 50%; background: var(--petrol); color: var(--paper);
  font-family: var(--display); font-size: var(--text-lead); font-weight: 700;
  display: inline-flex; align-items: center; justify-content: center; }
.kontakt-name { font-family: var(--display); font-weight: 700;
  font-size: 16px; margin: 0; }
.kontakt-rolle { margin: 0 0 8px; font-size: 12.5px;
  color: var(--muted); }
.kontakt-details { font-size: var(--text-basis); margin: 0; line-height: 1.8; }
.kontakt-details a { color: var(--gold-tief); }
.kontakt-bearbeiten { padding: 5px 12px; font-size: 11.5px; flex: none; }
.kontakt-leer { border: 1.5px dashed var(--line); border-radius: var(--radius-block);
  padding: 26px; text-align: center; color: var(--muted);
  font-size: 13.5px; font-style: italic; }
.formular { background: var(--card); border: 1px solid var(--line);
  border-radius: var(--radius-karte); padding: 18px 20px; }
.formular label { display: block; font-family: var(--display);
  font-size: 10px; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: var(--muted); margin: 12px 0 4px; }
.form-zeile { display: grid; grid-template-columns: 1fr 1fr;
  gap: 0 16px; }
.form-zeile > div:nth-child(-n+2) label { margin-top: 0; }
@media (max-width: 700px) { .form-zeile { grid-template-columns: 1fr; } }
.formular input, .notiz-feld { width: 100%; background: #fff;
  border: 1px solid var(--line); border-radius: var(--radius-karte); padding: 9px 12px;
  font-size: 13.5px; font-family: var(--body); color: var(--ink); }
.formular input:focus-visible, .notiz-feld:focus-visible {
  outline: 2px solid var(--amber); outline-offset: 1px; }
.form-aktionen { margin-top: 14px; display: flex; gap: 8px;
  align-items: center; }
.notiz-feld { min-height: 150px; resize: vertical; line-height: 1.6; }
.gespeichert { font-size: var(--text-klein); color: var(--ok); font-style: italic; }
.sprach-hinweis { font-size: var(--text-klein); color: var(--muted);
  font-style: italic; margin: 12px 0 0; }
/* PDF-Standard (Spec §11.5): docx nur noch als stille Beigabe */
.version-links { display: flex; gap: 6px; align-items: center;
  flex-wrap: wrap; }
@media (prefers-reduced-motion: reduce) {
  .drawer { animation: none; } }

/* Schnellzugriff-Chips in der Liste (Spec §1.2) */
/* EINE Chip-Reihe (Etappe 3B). Vorher sagten sechs Klassen in drei Dateien
   dasselbe — `.zeilen-chips`, `.s-chips`, `.ss-chips`, `.tk-pills`,
   `.chip-antworten` und `.opt-reihe` — mit drei Abstaenden (4/6/7 px) und drei
   Aussenabstaenden (0/8/9/10 px), von denen kein Unterschied eine Absicht war.

   Zwei Befunde aus dem Zusammenlegen:
   * Der Aussenabstand ist die AUSNAHME, nicht die Regel — drei der sechs
     hatten keinen. Also traegt ihn ein Modifikator, nicht die Basis.
   * `.opt-reihe` und `.chip-antworten` sassen auf demselben Element, und
     `.gefuehrt .opt-reihe` (0,2,0) gewann. Die Werte von `.chip-antworten`
     waren tot — sechs Klassen, aber nur fuenf haben je gewirkt. */
.chip-reihe { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.chip-reihe.zeile { flex-wrap: nowrap; }   /* in einer Tabellenzeile */
.chip-reihe.abstand { margin: 0 0 8px; }
/* EINE Chip-Fassung, im Haus. Sie stand bis 2026-07-27 doppelt: hier als Block
   (10,5px/600, Block-Radius) und in gefuehrt.css als Pille (12,5px/400) — und
   weil `cockpit/liste.html` das Flow-Stylesheet mitlaedt, gewann die Pille auf
   genau der Flaeche, fuer die diese Regel geschrieben war.

   Uebernommen ist die Pille samt Zustaenden (sie traegt das Produkt),
   erweitert um die Eigenschaften, die das Haus schon beisteuerte
   (Zeichenabstand, kein Unterstrich, kein Umbruch, Hover). Diese Vereinigung
   IST der heutige Ist-Zustand im Cockpit — deshalb ist der Umzug dort
   pixelneutral. Szene 0 haengt daran ebenfalls und wurde selbstgenuegsam
   gemacht (`landing.html`, `.col .chip`).

   `--g-weiss` bleibt absichtlich stehen: das Token ist in gefuehrt.css am
   `.gefuehrt`-Container definiert, nicht in :root. Ausserhalb bleibt die
   Fuellung durchsichtig — genau wie heute in der Liste (gemessen). Es hier
   auf `--card` zu heben waere eine Pixelaenderung; dieselbe Falle notiert
   gefuehrt.css:58 fuer den Schatten. */
.chip { display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 12px; border: 1px solid var(--line);
  border-radius: var(--radius-voll);
  font: 400 12.5px/1 var(--display); letter-spacing: .03em;
  background: var(--g-weiss); color: var(--ink);
  text-decoration: none; white-space: nowrap;
  transition: border-color .15s; }
.chip:hover { border-color: var(--petrol); }
/* ok/warn auch auf HELLEN Flächen (10.08.): bis dahin existierten die
   Zustände nur im dunklen Drawer-Kopf (`.d-chips .chip.chip-ok`, Zeile
   ~1233) — ein Gate-Chip, der sich den Wrapper nur für die Kante lieh,
   erbte dessen helle Schrift und stand unsichtbar auf der hellen Karte
   (gemessen: Kontrast 1,2:1). Kantenwerte identisch mit den
   .d-chips-Fassungen; Schrift bleibt die Tinte der Basisregel. */
.chip.chip-ok { border-color: rgba(123, 176, 143, .5); }
.chip.chip-warn { border-color: rgba(217, 138, 114, .55); }
/* §10: die Luecke darf nicht leiser sein als das Belegte. Beide Zustaende
   standen bis 2026-07-27 nur in gefuehrt.css — auf `/design`, der Seite, die
   sie beweisen soll, waren sie deshalb farblos. */
/* EINE Zustands-Konvention (Etappe 3C): getoente Fuellung + farbiger Rahmen +
   farbige Schrift, ausgedrueckt mit den vorhandenen Paaren `--*-soft` und
   `--*-linie`. Vorher gab es dafuer VIER Macharten fuer dieselbe Aussage —
   `.pill-belegt` mit den Token-Paaren, `.s-chip.ok` mit `color-mix`,
   `.chip-ok` ganz ohne Fuellung. Jetzt trifft `.chip-ok` genau dasselbe
   Tripel wie `.pill-belegt`; das ist der Punkt. */
.chip-ok { border-color: var(--ok-linie); background: var(--ok-soft);
  color: var(--good); }
.chip-warn { border-color: var(--warn-linie); background: var(--warn-soft);
  color: var(--warn); }

/* Die Augenbraue. Sie existierte zweimal und nirgends: `landing.html` regelt
   sie im eigenen <style> (12,5 px, ls .18em), `login.html` trug sie inline
   (12 px, ls .16em) — kein Stylesheet kannte die Klasse. Hier steht jetzt die
   STRUKTUR; die Landing behaelt ihre eigene Fassung (spaeterer <style>-Block,
   gleiche Spezifitaet -> sie gewinnt), damit Szene 0 unberuehrt bleibt.

   Die FARBE steht bewusst nicht hier: die Login-Augenbraue ist amber, und
   Hausregel 5 reserviert Amber fuer Baustein- und Berater-Momente. Eine
   Ausnahme inline zu lassen ist ehrlicher, als sie ins Haus-Stylesheet zu
   schreiben, wo sie wie eine Regel aussieht. Die Frage gehoert in die Etappe
   „Augenbraue" (mit `.baustein-tag`, `.bs-hero-badge`, `.design-badge`), die
   die Chip-Inventur schon vorgemerkt hat. */
/* `.eyebrow` traegt keine Farbe: die Login-Augenbraue ist amber, und ob sie
   das nach Hausregel 5 sein darf, ist eine Produktfrage — sie bleibt deshalb
   sichtbar inline, nicht als Regel getarnt. Die Landing behaelt ihre eigene
   Fassung in ihrem <style>-Block. */
.eyebrow { color: inherit; }

/* == Textrollen ===========================================================
   Sechs Klassen, eine je Stufe, fuer Text OHNE eigenes Bauteil. Sie sind
   bewusst eine Ausnahme von der Bauteil-Logik dieses Hauses, und die
   Begruendung gehoert hierher, damit niemand sie fuer den neuen Standard haelt:

   Von den 99 harten Schriftgroessen in den Templates sassen 63 auf einem
   Element OHNE jede Klasse — ein `<p>` an genau einer Stelle, ein `<span>` in
   einer Zeile. Fuer jeden davon eine Bauteilklasse zu erfinden hiesse, 25 Namen
   in das Haus zu tragen, die je einen Absatz beschreiben. Das waere schlimmer
   als das Problem: ein Designsystem mit 25 Einmal-Bauteilen erklaert nichts
   mehr.

   Wer ein echtes Bauteil hat, nimmt seine Regel — nicht diese Klassen. Sie
   sind der ehrliche Boden fuer den Rest, und ihr einziger Zweck ist, dass
   jede Groesse im Produkt auf der Leiter steht und nicht daneben. */
.t-marke  { font-size: var(--text-marke); }
.t-klein  { font-size: var(--text-klein); }
.t-basis  { font-size: var(--text-basis); }
.t-bedien { font-size: var(--text-bedien); }
.t-lead   { font-size: var(--text-lead); }
.t-gross  { font-size: var(--text-gross); }
.t-titel  { font-size: var(--text-titel); }

/* Vier Klassen trugen ihre Groesse inline statt in der Regel. Der erste Anlauf
   gab der KLASSE die Groesse — und das war zu grob, nachgezaehlt:

     .fehler       12 Fundstellen, 2 trugen eine Groesse
     .karte-firma   7 Fundstellen, 1 trug eine
     .g-plus        3 Fundstellen, 2 trugen eine

   Die uebrigen erben heute von ihrem Kontext. Eine Klassen-Regel haette also
   zehn unbeteiligte Stellen mitverschoben, ohne dass es jemand bestellt hat.
   Deshalb tragen nur die Stellen eine Textrolle, die heute schon eine Groesse
   haben.

   `.tk-firma` ist der Gegenfall und braucht die Regel: `stellensuche.css` laedt
   NACH `design.css`, also schlaegt `.tk-firma` dort jede Textrolle aus dem Haus.
   Ihr eigener Wert (14,5px) war zudem tot — beide Fundstellen ueberschrieben
   ihn inline mit 13,5px. Er steht jetzt auf der Leiter. */

/* == Auswahlfelder: EINE Machart =========================================
   Gemessen 2026-07-27: fuenf `accent-color`-Regeln mit DREI Farben —
   `--petrol` (Regler, Vorschau-Bloecke, Research-Zeile, Such-Schieber),
   `--amber` (Berater-Vorschlaege) und `--good` (HR-Einwaende). Dazu 18
   Checkboxen und 8 Radios im Markup, von denen die meisten Browser-Default
   tragen, also Systemblau — eine Farbe, die im Token-Raum dieses Produkts
   sonst NICHT vorkommt.

   Am sichtbarsten war das dort, wo es am meisten zaehlt: die drei
   Einwilligungshaken der Registrierung (Datenschutz, AGB, Marketing) waren
   nackt. Runde 6 hat fuer das Konto-Loeschen genau dieses Argument notiert —
   „der Moment, in dem Sorgfalt am meisten zaehlt".

   Petrol traegt die Struktur (Hausregel 5), also traegt es auch die Auswahl.
   `:where()` haelt die Spezifitaet auf (0,0,1), damit jede bestehende
   Kontext-Regel weiter gewinnt — `.bubble input` versteckt sein Feld auf
   1x1 px und muss das duerfen. */
input:where([type=checkbox], [type=radio], [type=range]) {
  accent-color: var(--petrol);
}
/* 16 px war schon die Groesse der beiden gestylten Faelle (`.hr-item input`,
   `.gefuehrt .research-zeile input`) — der Browser-Default liegt bei 13,3 px.
   Die groessere Trefferflaeche ist der Nebengewinn. */
input:where([type=checkbox], [type=radio]) { width: 16px; height: 16px; }

/* == Felder: EIN Boden ====================================================
   Gemessen am 2026-07-27: 38 sichtbare Felder trugen den Browser-Default —
   darunter das Interview-Antwortfeld in Wizard 4 (`#antwort-text`, das
   zentrale Eingabefeld des Produkts), der ganze Baustein-Editor, und beide
   Felder samt drei Einwilligungshaken der Registrierung, waehrend `login.html`
   mit `class="auth-form"` gestylt war. Sichtbar war das als Bruch: Georgia-
   Fliesstext mit einem Arial-Feld darin, `border: 2px inset`, Radius 0.

   Der Grund war strukturell, nicht nachlaessig: es gab in keinem Stylesheet
   einen Element-Selektor auf oberster Ebene (gezaehlt: 0). Jedes Feld war von
   seinem Container aus gestylt oder gar nicht — und damit fuer JEDEN Waechter
   dieses Repos unsichtbar, auch fuer den Flaechen-Waechter, der `class="…"`
   mit `^.name {` vergleicht. Ein `<textarea>` ohne Klasse kommt in beiden
   Listen nicht vor.

   `:where()` ist hier tragend, nicht Kosmetik: es traegt NULL Spezifitaet,
   der Boden bleibt also (0,0,1) und weicht jeder Kontext-Regel. Mit
   `:not([type=checkbox]):not(…)` waeren es (0,4,1) gewesen — mehr als
   `.formular input` (0,1,1). Gemessen hat dieser Vorschlaghammer sechs
   gedeckte Fassungen ueberschrieben, u.a. `.suche input` sein Polster fuer
   die Lupe (42px -> 12px). Mit `:where()` bleiben 11 von 14 unveraendert; die
   drei anderen aendern sich nur dort, wo sie heute GAR KEINEN Wert setzen und
   der Browser-Default griff (schwarz, Arial, kaltes Weiss).

   Checkbox, Radio, Regler und Datei-Knopf sind ausgenommen — das sind eigene
   Bauteile, keine Textfelder. Sie bleiben offen (Felder-Inventur). */
input:where(:not([type=checkbox],[type=radio],[type=range],[type=file],[type=hidden])),
textarea, select {
  font-family: var(--body); font-size: var(--text-basis);
  color: var(--ink); background: var(--g-weiss, #FFFDF9);
  border: 1px solid var(--feld-linie); border-radius: var(--radius-feld);
  padding: 9px 12px;
}

/* Auf dem Telefon hoert die Typleiter bei den Eingabefeldern auf (Runde 7,
   Linse Mobile UX). iOS Safari zoomt beim Antippen JEDES Feldes unter 16px in
   die Seite hinein — danach ist das Layout verschoben, und der Nutzer sitzt in
   einer Ansicht, die er nicht bestellt hat. Zurueckzoomen muss er selbst.
   Gemessen waren es 13 Felder zwischen 12,5 und 15px, quer durch die
   Plattform: Suche, Formular, Notiz, Rueckfrage, Quelle, Profil, Admin,
   Auth, der gefuehrte Flow. Kein Screenshot zeigt das, weil Chromium nicht
   zoomt — `tests/test_stil_linter.py` liest darum die Quelle.

   `!important` ist hier kein Notnagel, sondern die Umkehrung des Bodens
   darueber: der traegt `:where()` und damit NULL Spezifitaet, WEIL er jeder
   Kontext-Regel weichen soll. Diese hier soll das genaue Gegenteil — sie ist
   keine Gestaltungsfrage, sondern eine Geraete-Grenze, und `.formular input`
   (0,1,1) darf sie nicht ueberstimmen. Es ist die einzige Regel dieser Art.

   `pointer: coarse` statt `max-width`: gezoomt wird nach Eingabeart, nicht
   nach Breite — ein Tablet im Querformat ist breit und faehrt trotzdem rein. */
@media (pointer: coarse) {
  input:where(:not([type=checkbox],[type=radio],[type=range],[type=file],[type=hidden])),
  textarea, select {
    font-size: var(--text-eingabe-mobil) !important;
    /* Die zweite Haelfte desselben Befundes: dieselben Felder massen 33-37px
       Hoehe. Der 44er-Boden gilt fuer Knoepfe, Reiter und Klappen seit Runde
       6 — `input`, `textarea` und `select` fehlten in genau dieser Liste,
       und der Waechter, der ihn prueft, listete sie auch nicht.

       Der Block steht hier statt bei den `.drawer`-Regeln weiter unten, weil
       der Kommentar dort die Lehre selbst notiert: „Sie steht nur hinter
       `.gefuehrt` … eine Ursache, ein Ort, 519 Treffer." Ein Feld im Profil
       wird mit demselben Daumen getroffen wie eins im Drawer.

       Gemessen mit `has_touch`: 16px allein bringt das Feld auf 39px, das
       Auswahlfeld auf 41px. Wie im Flow waechst die Polsterung, nicht die
       Schrift. */
    min-height: 44px; box-sizing: border-box;
    /* Und der Folgeschaden dieser beiden Zeilen, den der X9-Waechter sofort
       gefunden hat: ein Feld in einer Flex-Reihe traegt `min-width: auto`
       und schrumpft darum nicht unter seine EIGENBREITE — die waechst mit
       dem Schriftgrad. `.quelle-zeile` hat damit ihren Knopf auf 386px in
       einer 375px-Sicht geschoben (f2, f3, f16). `min-width: 0` gibt das
       Schrumpfen zurueck; ausserhalb von Flex und Grid ist es wirkungslos,
       weil `auto` dort ohnehin 0 bedeutet. */
    min-width: 0;
  }
  /* Ein Textlink darf nicht 44px hoch WERDEN, er soll 44px hoch TREFFEN —
     dieselbe Technik wie `.drawer .lese-hinweis a`, nur nicht auf eine
     Flaeche verengt. Betrifft die Kontakt- und Quellzeilen (14-15px).
     Die Liste ist aufgezaehlt, nicht geraten: eine Regel wie `a { … }` wuerde
     auch den Link mitten im Satz aufblasen, und genau das darf sie nicht.
     Wer hier fehlt, faellt dem geweiteten V5-Waechter auf — so ist die
     Stellenanzeige (`.anzeige-meta a`, 128x14 px in f6 und f7) dazugekommen,
     nachdem der Waechter erstmals ueber alle Reiter lief.

     ACHTUNG (Runde 7): dieser Kommentar war fuenf Zeilen zu frueh geschlossen.
     Die Zeilen darunter standen nackt im Stylesheet und verschluckten die
     Regel `position: relative` — das `::after` mit `inset:-15px 0` haengte
     danach am naechsten positionierten Vorfahren statt am Link. Gemessen:
     6 von 6 Tastpunkten ueber den GANZEN 390x844-Schirm trafen den
     Kontaktlink. Dieselbe Fehlerklasse wie der gedruckte Jinja-Kommentar aus
     Runde 3, nur in CSS. */
  .kontakt-details a, .research-quelle, .anzeige-meta a { position: relative; }
  /* -15px, nicht -14: gemessen kam der Kontaktlink damit auf 43px und die
     Quellzeile auf 42 — einen Pixel unter dem Boden, den derselbe Block
     fuer alles andere setzt. */
  .kontakt-details a::after, .research-quelle::after, .anzeige-meta a::after {
    content: ''; position: absolute; inset: -15px 0;
  }

/* Zusammenfuehrung 2026-08-02. Der Block darueber stammt aus dem
   Detailansicht-Strang und ist die staerkere Fassung derselben Sache: sein
   `!important` ueberlebt jede Kontext-Regel, waehrend meine Fassung die
   Doppelungen einzeln aufloesen musste. Beide Sitzungen haben den iOS-Zoom
   unabhaengig gefunden und unabhaengig `dvh` gesetzt — dieselbe Woche,
   dieselben zwei Befunde, zwei Wege.
   Was hier steht, sind die Regeln, die es dort NICHT gibt. Sie bleiben ein
   eigener Block, damit sichtbar bleibt, woher sie kommen. */
@media (pointer: coarse) {
  /* Seit die Marke DREI Knoepfe traegt (‹ › ×, 2026-08-02), ist die
     Phantomflaeche der falsche Weg: `inset:-6px` an nebeneinanderliegenden
     Geschwistern ueberlappt sich gegenseitig, und derselbe Befund hat schon
     einmal einen destruktiven Fehlgriff erzeugt. Jetzt echte Groesse — die
     Marke waechst mit, und das ist ehrlicher als eine unsichtbare Flaeche,
     die dem Nachbarn gehoert. */
  .tag { min-height: 44px; }
  .tag-x, .tag .sortier { min-width: 32px; min-height: 44px;
    display: inline-flex; align-items: center; justify-content: center; }
  /* In gestapelten Zeilen stehen die Pfeile untereinander eng beieinander —
     dort zaehlt die Hoehe, nicht die Breite. */
  .erf-zeile .sortier, .spr-zeile .sortier,
  .kompgruppe-zeile .sortier { min-width: 36px; min-height: 44px; }

  /* Die Seitenleiste ist mobil ein Overlay, das man mit dem Daumen bedient:
     Eintraege massen 39 px, Abmelden 33, Hamburger und Chevron 30x30, die
     Guthaben-Marke 32, der Sprachumschalter 16x15.
     `.kasse-mobil` fehlt ABSICHTLICH: dieselbe Marke deckt beim Scrollen den
     Beleg, sie zu vergroessern wuerde den anderen Befund verschlimmern. */
  .sl-nav a, .sl-abmelden, .sl-toggle, .sl-oeffnen,
  .sl-guthaben { min-height: 44px; }
  .sl-toggle, .sl-oeffnen { min-width: 44px; }
  .sl-sprache a { display: inline-flex; align-items: center;
    min-height: 44px; padding: 0 8px; }

  /* Der Hausknopf selbst mass 38 px, die Reiter 35. Die 44er-Regeln des
     Detailansicht-Strangs stehen nur hinter `.drawer` — genau die Verengung,
     die sein eigener Kommentar als Lehre notiert („eine Ursache, ein Ort").
     Diese hier gilt ueberall. */
  .btn, .btn-primary, .btn-secondary, .btn-berater, .reiter-tab { min-height: 44px; }

  /* Der Speichern-Boden: „Meine Daten" ist mobil ueber acht Bildschirme lang,
     der einzige Speichern-Knopf lag am Ende hinter 71 Feldern, und kein
     Element der Flaeche klebte. `sticky` statt `fixed` — der Boden bleibt Teil
     des Formulars und nimmt am Ende keinen Platz weg. */
  .speicher-boden { position: sticky; bottom: 0; z-index: 20;
    margin: 16px -14px -14px; padding: 10px 14px calc(10px + env(safe-area-inset-bottom));
    background: var(--card); border-top: 1px solid var(--feld-linie);
    box-shadow: var(--schatten-boden); }
  .speicher-boden .btn { width: 100%; justify-content: center; }
  /* Auf dem leeren Formular klebt er nicht: dort konkurrierte er mit der Tuer
     zum Onboarding und gewann — 13 von 13 Scrollpositionen gegen 3. */
  .speicher-boden--ruhig { position: static; box-shadow: none; }

  /* `rows` zaehlt Schreibmaschinenzeilen, der Inhalt zaehlt Umbrueche: mit
     16 px sah man vom Beleg 67 %, vom CV-Satz 43 %, vom Anschreiben-Absatz
     19 % — der Schnitt lag in allen dreien mitten im Wort. */
  .bs-editor textarea { field-sizing: content; min-height: 7.5em;
    max-height: 60vh; }
}
}

/* == Skip-Link (Barrierefreiheit) ========================================= */
.skip-link { position: absolute; left: 8px; top: -60px; z-index: 100;
  background: var(--petrol); color: var(--paper); padding: 8px 14px;
  border-radius: var(--radius-karte); text-decoration: none; font-family: var(--display);
  font-size: var(--text-basis); transition: top .15s; }
.skip-link:focus { top: 8px; }

/* == Seitenleiste: App-Navigation links, ruhig, einklappbar ==============
   Ton wie die Referenz (andysburgers): helle Leiste, Haarlinie zum Inhalt,
   ruhige Textlinks; aktiver Punkt trägt den einzigen Akzent (Amber). */
/* `dvh` hinter `vh`: auf dem Telefon zaehlt `vh` die Browserleiste mit, die
   Flaeche ragt also unter die Kante und der Fuss ist unerreichbar. `dvh`
   rechnet mit der Hoehe, die gerade wirklich da ist. Die `vh`-Zeile bleibt als
   Fallback fuer Browser vor 2022 stehen — sie kostet nichts und ist der Grund,
   warum `test_stil_linter.py` das Paar prueft und nicht die Zeichenkette. */
.hat-sidebar { display: flex; align-items: stretch;
  min-height: 100vh; min-height: 100dvh; }
.seitenleiste {
  flex: 0 0 244px; width: 244px;
  background: var(--card); border-right: 1px solid var(--line);
  display: flex; flex-direction: column; padding: 22px 14px 18px;
  position: sticky; top: 0; align-self: flex-start;
  height: 100vh; height: 100dvh;
  transition: flex-basis .25s cubic-bezier(.2,.7,.2,1),
              width .25s cubic-bezier(.2,.7,.2,1),
              padding .25s cubic-bezier(.2,.7,.2,1),
              transform .25s cubic-bezier(.2,.7,.2,1); }
.sl-kopf { display: flex; align-items: center; justify-content: space-between;
  gap: 8px; padding: 0 8px; margin-bottom: 26px; }
.sl-kopf .wortmarke { font-size: var(--text-titel); }
.sl-toggle, .sl-oeffnen { flex: none; width: 30px; height: 30px;
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer; background: transparent; border: 1px solid var(--line);
  border-radius: var(--radius-knopf); color: var(--muted); font-size: var(--text-gross); line-height: 1;
  transition: border-color .15s, color .15s; }
.sl-toggle:hover, .sl-oeffnen:hover { border-color: var(--petrol);
  color: var(--ink); }
.sl-nav { display: flex; flex-direction: column; gap: 3px; }
.sl-nav a { display: flex; align-items: center; gap: 11px;
  font-family: var(--display); font-size: 14.5px; color: var(--muted);
  text-decoration: none; padding: 10px 13px; border-radius: var(--radius-block);
  border-left: 3px solid transparent; line-height: 1.3;
  transition: background .15s, color .15s, border-color .15s; }
.sl-ico { width: 18px; height: 18px; flex: none; opacity: .85; }
.sl-nav a.aktiv .sl-ico { opacity: 1; }
/* Willkommen-Block (nur nach bestätigtem Onboarding, wenn der Name feststeht) */
.sl-willkommen { margin: 0 4px 16px; padding: 12px 14px;
  background: var(--paper); border-radius: var(--radius-block); }
.sl-willkommen .wk-label { font-family: var(--display); font-size: 12.5px;
  color: var(--muted); }
.sl-willkommen .wk-name { font-family: var(--display); font-size: 18px;
  font-weight: 700; letter-spacing: -.01em; color: var(--petrol);
  line-height: 1.15; }
/* Wortmarke „Kandit." — der Punkt trägt den Amber-Akzent */
.wortmarke .punkt { color: var(--amber); font-style: normal; }
.sl-nav a:hover { background: var(--linie-soft); color: var(--ink); }
.sl-nav a.aktiv { color: var(--ink); font-weight: 700;
  background: color-mix(in srgb, var(--amber) 13%, transparent);
  border-left-color: var(--amber); }
.sl-fuss { margin-top: auto; padding: 16px 10px 0;
  border-top: 1px solid var(--line);
  display: flex; flex-direction: column; gap: 11px; }
/* E1 Guthaben im Leisten-Fuss. Ruhig gehalten: Zahl in Tinte, Wort in Grau —
   ein Saldo ist Information, kein Kernmoment (Hausregel 5, nie Amber). */
.sl-guthaben { display: block; margin: 0 0 6px; font-family: var(--display);
  font-size: 12.5px; color: var(--muted); text-decoration: none;
  padding: 6px 9px; border-radius: var(--radius-block);
  background: var(--paper); }
.sl-guthaben b { color: var(--ink); font-weight: 700; }
/* Saldo auf der Konto-Seite: eine Zahl, die man liest, ohne zu suchen. Die
   Groesse gehoert ins Stylesheet, nicht ins Template — die Skala ist sonst
   umgehbar (Waechter: test_kein_template_setzt_harte_schriftgroessen). */
.guthaben-zahl { font-family: var(--display); font-size: 22px; }
.sl-guthaben:hover { color: var(--ink); }
.sl-konto { font-size: var(--text-klein); color: var(--muted); overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap; }
.sl-abmelden { display: inline-flex; align-items: center; gap: 7px;
  align-self: flex-start; cursor: pointer; background: transparent;
  border: 1px solid var(--line); border-radius: var(--radius-knopf); padding: 7px 15px;
  font-family: var(--display); font-size: var(--text-basis); font-weight: 600;
  color: var(--ink); transition: border-color .15s; }
.sl-abmelden .sl-ico { width: 16px; height: 16px; }
.sl-abmelden:hover { border-color: var(--petrol); }
.sl-sprache { font-family: var(--display); font-size: 11.5px;
  letter-spacing: .04em; color: var(--muted); }
.sl-sprache a { color: var(--muted); text-decoration: none; }
.sl-sprache a:hover { color: var(--ink); }
.sl-sprache a.an { color: var(--gold-tief); font-weight: 700; }
.sl-wrap { flex: 1; min-width: 0; }
.sl-oeffnen { position: fixed; top: 15px; left: 15px; z-index: 46;
  display: none; background: var(--card);
  box-shadow: var(--schatten-knopf); }
.sl-chevron { display: inline-block; transition: transform .2s; }

/* Eingeklappt (Desktop): schmale Icon-Leiste — Schnellzugriff bleibt sichtbar */
.nav-zu .seitenleiste { flex: 0 0 68px; width: 68px;
  padding-left: 12px; padding-right: 12px; }
.nav-zu .wortmarke a, .nav-zu .sl-text, .nav-zu .sl-willkommen,
.nav-zu .sl-konto, .nav-zu .sl-sprache { display: none; }
.nav-zu .sl-kopf { justify-content: center; margin-bottom: 20px; }
.nav-zu .sl-nav a { justify-content: center; gap: 0;
  padding-left: 0; padding-right: 0; }
.nav-zu .sl-nav a.aktiv { border-left-color: transparent;
  background: color-mix(in srgb, var(--amber) 16%, transparent); }
.nav-zu .sl-fuss { align-items: center; padding-left: 0; padding-right: 0; }
.nav-zu .sl-abmelden { justify-content: center; width: 42px; gap: 0;
  padding-left: 0; padding-right: 0; align-self: center; }
.nav-zu .sl-chevron { transform: rotate(180deg); }

/* Mobil: Leiste als Overlay, das ganz nach links wegschwingt (Hamburger) */
@media (max-width: 860px) {
  /* Zwei Sitzungen, ein Befund: `100vh` ist auf iOS die Hoehe OHNE
     Browserleiste. Der Detailansicht-Strang hat den `vh`-Rueckfall gesetzt
     (aeltere Browser bekommen wenigstens etwas), diese Runde hat zusaetzlich
     gemessen, dass die Leiste NICHT SCROLLBAR war — 844 px hoch,
     `scrollHeight == clientHeight`, und ab 62 px Browserleiste war der
     Sprachumschalter unerreichbar. Beide Haelften gelten. */
  .seitenleiste { position: fixed; top: 0; left: 0; z-index: 48;
    height: 100vh; height: 100dvh;
    overflow-y: auto; overscroll-behavior: contain;
    box-shadow: var(--schatten-leiste); }
  /* Runde 3: `.sl-konto` (die Nutzerkennung) ragte 15 px ueber die rechte
     Kante der weggeschwungenen Leiste hinaus — auf JEDER Seite mobil stand
     ein Textfetzen am linken Bildrand. Die Leiste selbst stand auf
     `overflow: visible`, und was ausserhalb liegt, wird vom `translateX`
     nicht mitgenommen. Off-Canvas heisst: nichts davon ist zu sehen. */
  .nav-zu .seitenleiste { flex-basis: 244px; width: 244px;
    padding: 22px 14px 18px; transform: translateX(-100%);
    overflow: hidden; }
  .nav-zu .wortmarke a, .nav-zu .sl-text, .nav-zu .sl-willkommen,
  .nav-zu .sl-konto, .nav-zu .sl-sprache { display: revert; }
  .nav-zu .sl-nav a { justify-content: flex-start; gap: 11px;
    padding: 10px 13px; }
  .nav-zu .sl-abmelden { justify-content: flex-start; width: auto;
    gap: 7px; padding: 7px 15px; align-self: flex-start; }
  .sl-oeffnen, .nav-zu .sl-oeffnen { display: inline-flex; }
  .sl-wrap { width: 100%; }
  /* W7/2 (Runde 6): Der Menü-Knopf liegt `fixed` bei 15/15 und ist 30×30 groß
     — er reichte bis y=45, die Seitenüberschrift begann bei y=32. Gemessen
     auf 390 px: 21 px des Wortes „Meine" lagen UNTER dem Knopf
     (`/bewerbungen` und `/mein-profil`; `/konto` beginnt tiefer und war
     zufällig frei). Der Inhalt startet jetzt unter dem Knopf. */
  .hat-sidebar .inhalt { padding-top: 58px; }
}
@media (prefers-reduced-motion: reduce) { .seitenleiste { transition: none; } }

/* (Formular-/Tag-/Bausteine-Styles für „Mein Profil" werden weiter unten
   an ihrer bestehenden Stelle verbessert — kein Duplikat hier.) */

/* == Login / Auth: ruhige, zentrierte Spalte (kandid-Look) =============== */
.auth { max-width: 420px; margin: 7vh auto 0; }
.auth h1 { margin: 0 0 8px; }
.auth .auth-unter { color: var(--muted); font-size: var(--text-lead); margin: 0 0 26px; }
.auth-form { display: flex; flex-direction: column; gap: 15px; }
.auth-form label { font-family: var(--display); font-size: 12.5px;
  font-weight: 600; color: var(--muted); }
.auth-form input { width: 100%; margin-top: 5px; background: #fff;
  border: 1px solid var(--line); border-radius: var(--radius-feld); padding: 11px 13px;
  font-family: var(--body); font-size: var(--text-lead); color: var(--ink); }
.auth-form input:focus-visible { outline: 2px solid var(--amber);
  outline-offset: 1px; border-color: var(--amber); }
.auth-form .btn { justify-content: center; padding: 12px; margin-top: 4px; }
.auth-wechsel { margin-top: 22px; font-size: var(--text-bedien); }
.auth-hinweis { margin-top: 18px; color: var(--muted); font-size: 12.5px;
  line-height: 1.5; }

/* ── Etappe C (Spec §10): Neue-Stelle-Modal ─────────────────────────── */
.modal-scrim { position: fixed; inset: 0; z-index: 60;
  background: rgba(15, 36, 41, .45); display: flex;
  align-items: flex-start; justify-content: center; padding: 7vh 16px; }
.modal { position: relative; background: var(--card); width: 640px;
  max-width: 100%; max-height: 84vh; overflow-y: auto;
  border: 1px solid var(--line); border-radius: var(--radius-feld);
  box-shadow: var(--schatten-dialog); padding: 22px 24px; }
.modal h2 { margin: 0 32px 6px 0; }
.modal-untertitel { margin: 0 0 14px; font-size: 13.5px; color: var(--muted); }
.modal-schliessen { position: absolute; top: 12px; right: 12px;
  border: 1px solid var(--line); background: none; border-radius: var(--radius-block);
  width: 28px; height: 28px; cursor: pointer; color: var(--muted);
  font-size: var(--text-bedien); line-height: 1; }
.modal-schliessen:hover { color: var(--ink); border-color: var(--petrol); }
.modal textarea, .modal input[type="text"] { font: inherit;
  border: 1px solid var(--line); border-radius: var(--radius-block); padding: 8px 10px;
  background: #fff; box-sizing: border-box; }

/* ── Der Preis am Knopf (Runde 7 X2, ins Haus gezogen in Runde 8) ─────────
   Sie steht auf JEDER zahlenden Flaeche — Flow, Bausteine, Cockpit-Drawer.
   Ruhig und `--muted`; erst wenn es nicht reicht, traegt sie Warnfarbe, dann
   ist sie die Begruendung fuer einen gesperrten Knopf. Kein Amber: Geld ist
   kein Baustein- und kein Berater-Moment (Hausregel 5). */
/* W10 (10 von 12 Linsen, Runde 3): die Marke ist ein Inline-Element in
   einer `flex-wrap`-Reihe. Sobald die Zeile umbrach — mobil immer, auf dem
   Desktop in f5 — landete sie unter dem NAECHSTEN Knopf und nannte dessen
   Preis. Der Fix aus Z10 hat den Preis geliefert und ihn dabei falsch
   zugeordnet.

   `flex-basis: 100%` bricht die Marke immer auf eine eigene Zeile, direkt
   unter ihren Knopf. In einer nicht-flexenden Umgebung wirkt es nicht und
   schadet auch nicht.

   V8 (12 von 12 Linsen, Runde 4) — der Satz oben stimmt nicht. Die Zeile ist
   eine eigene, aber sie beginnt am **Zeilenanfang**, nicht unter dem Knopf:
   gemessene 494 bis 722 CSS px Abstand zum bepreisten Knopf und 0 bis 6 px
   zum kostenlosen daneben. Marke und Knopf sind Geschwister; kein Umbruch
   kann sie aneinander binden. Das leistet erst `.preis-paar` (preis.html) —
   ein gemeinsames Layout-Element. `flex: 0 0 100%` bleibt als Notnagel für
   die noch nicht gepaarten Stellen: dort ist „eigene Zeile" immer noch
   besser als „hinter dem nächsten Knopf". */
.preis-marke { font: 400 12.5px/1.5 var(--display); color: var(--muted);
  flex: 0 0 100%; margin-top: -2px; }
/* Knopf und Preis brechen zusammen um oder gar nicht. */
.preis-paar { display: inline-flex; flex-direction: column;
  align-items: flex-start; gap: 2px; max-width: 100%; }
.preis-paar .preis-marke { flex: 0 1 auto; margin-top: 0; }
.preis-marke.preis-fehlt { color: var(--warn); }
.preis-weg { color: var(--petrol); text-underline-offset: 2px; }
/* Ausdrueckliche Kostenfreiheit. Erst dadurch bedeutet Schweigen wieder
   „kostet nichts" statt „Preis vergessen" — drei bezahlte Wege waren bis
   Runde 2 stumm. */
.preis-gratis { color: var(--muted); font-style: italic; }
/* Nachmessung Runde 8: auf der Petrol-Flaeche des Drawers (`.gem`) stand die
   Marke mit gemessenen 2,35:1 — geliefert, aber unlesbar. Und `.gem a` faerbte
   den Weg zum Guthaben amber, ausgerechnet in dem Bauteil, dessen Kommentar
   Hausregel 5 zitiert („Geld ist kein Berater-Moment"). Beides hier zurecht. */
.gem .preis-marke { color: #EDE7DC; }   /* die eigene Fliesstextfarbe des .gem — kein Freibrief aus der Gold-Rampe (10,74:1) */
.gem .preis-marke.preis-fehlt { color: #F3C9B8; }
.gem .preis-marke .preis-weg, .gem a.preis-weg { color: #FFFDF9;
  text-decoration-thickness: 1px; }

/* ── Konto: Aufladen, Kassenbuch, Gefahr-Zone (Runde 7, X3/X20) ──────────
   Befund: der auffaelligste Knopf der Geldseite hiess „Unwiderruflich
   loeschen", und der Weg aus der Sperre endete in einem Satz ohne Empfaenger.
   Das Guthaben stand als rahmenlose Zeilenliste ohne Container. */
/* „Block", nicht „Karte": er sitzt IN einer Flaeche und traegt deshalb
   `--radius-block` (11 px). Der frueher Name hiess `.aufladen-karte` — die
   Werte waren richtig, der Name log, und nach der Lehre aus Etappe 2 ist die
   falsche Rolle gefaehrlicher als der harte Wert: sie laedt den Naechsten ein,
   dem Block Kartenwerte zu geben. */
.aufladen-block { border: 1px solid var(--line); border-left: 3px solid var(--petrol);
  border-radius: var(--radius-block); padding: 14px 16px; margin: 12px 0 18px;
  background: var(--card); max-width: 620px; }
.aufladen-block p { margin: 0 0 8px; }
.aufladen-block p:last-child { margin-bottom: 0; }
.kassenbuch { width: 100%; max-width: 620px; }
.kassenbuch .zahl { text-align: right; font-variant-numeric: tabular-nums; }
.preisliste, .gefahr-zone { max-width: 620px; margin: 18px 0 0; }
.preisliste summary, .gefahr-zone summary { cursor: pointer;
  font-family: var(--display); font-weight: 600; }
.gefahr-zone { border-top: 1px solid var(--line); padding-top: 14px; }
.gefahr-zone summary { color: var(--muted); }
@media (max-width: 560px) {
  /* Dreispaltig auf 390 px brach das Datum um und schob den Betrag zwischen
     die beiden Datumszeilen (X16). Als Liste lesbar. */
  .kassenbuch thead { display: none; }
  .kassenbuch, .kassenbuch tbody, .kassenbuch tr, .kassenbuch td { display: block;
    width: 100%; }
  .kassenbuch tr { border-bottom: 1px solid var(--line); padding: 8px 0; }
  .kassenbuch td { border: none; padding: 1px 0; }
  .kassenbuch td.zahl { text-align: left; }
  .kassenbuch td::before { content: attr(data-kopf) " "; color: var(--muted);
    font-size: 11.5px; }
}

/* ── Saldo auf Mobil (Runde 7, X2/2) ─────────────────────────────────────
   Unter 860 px ist die Seitenleiste weggeschoben; auf keinem der 16
   Mobil-Bilder war eine Credit-Zahl zu sehen — auch nicht neben einem
   gesperrten Knopf, den sie erklärt hätte. z-index 45 liegt unter Hamburger
   (46) und Off-Canvas (48), damit die Navigation ihn nie überdeckt. */
.kasse-mobil { display: none; }
@media (max-width: 860px) {
  .hat-sidebar .kasse-mobil { display: inline-flex; align-items: center;
    position: fixed; top: 15px; right: 15px; z-index: 45; min-height: 30px;
    padding: 4px 10px; border: 1px solid var(--line);
    border-radius: var(--radius-feld); background: var(--card);
    font: 400 12.5px/1 var(--display); color: var(--ink);
    text-decoration: none; }
}

/* ── Warnband über dem Inhalt (Runde 7, X12) ─────────────────────────────
   Duplikat-Hinweis und Relevanz-Guard legen sich ÜBER die Karte, statt sie zu
   ersetzen. `.neu-warnung-box` hatte bis Runde 7 in KEINEM Stylesheet eine
   Regel — im Cockpit-Dialog wie im Flow war die Warnung ein nackter Absatz.
   Warnrot, nicht Amber: eine Warnung ist kein Berater-Moment (Hausregel 5). */
.neu-warnung-box { background: var(--card); border: 1px solid var(--warn-linie);
  border-left: 4px solid var(--warn); border-radius: var(--radius-block);
  padding: 13px 16px; margin: 0 0 12px; }
.neu-warnung-box p { margin: 0 0 10px; }
.neu-warnung-knoepfe { display: flex; gap: 8px; flex-wrap: wrap; }

/* ── Die Kasse spricht (Runde 7, X1) ─────────────────────────────────────
   Ein Slot je Seite (`basis.html`), in den jede nicht gedeckte Aktion ihre
   Karte legt. z-index 80 liegt über Drawer (50), modal-scrim (60) und
   orb-scrim (70) und unter dem skip-link (100) — die Karte muss auch dann
   sichtbar sein, wenn der Klick aus einem Dialog kam.
   Kein Amber: ein Saldo ist kein Kernmoment (Hausregel 5). Die Warnkante
   trägt die Aussage, nicht die Farbe. */
#kasse-ziel { position: fixed; z-index: 80; right: 18px; bottom: 18px;
  width: 380px; max-width: calc(100vw - 32px); }
#kasse-ziel:empty { display: none; }
.kasse-karte { border-left: 3px solid var(--warn);
  box-shadow: var(--schatten-dialog-tief); }
.kasse-eyebrow { font-family: var(--mono); font-size: var(--text-marke);
  letter-spacing: .08em; text-transform: uppercase; color: var(--muted);
  margin: 0 0 4px; }
.kasse-titel { margin: 0 0 8px; font-size: 19px; }
.kasse-satz { margin: 0 0 12px; }
.kasse-wege { display: flex; gap: 8px; flex-wrap: wrap; }
@media (max-width: 560px) {
  /* Auf dem Telefon reicht die Karte über die Breite und sitzt über der
     mitlaufenden Fußleiste des Flows (die reserviert 124 px). */
  #kasse-ziel { right: 12px; left: 12px; bottom: 12px; width: auto; }
}

/* ── Etappe C (Spec §10.2): Orb-Arbeitsmoment ───────────────────────── */
.orb-scrim { position: fixed; inset: 0; z-index: 70;
  background: rgba(15, 36, 41, .55); display: flex;
  align-items: center; justify-content: center; padding: 16px; }
.orb-panel { background: var(--card); border: 1px solid var(--line);
  border-radius: var(--radius-feld); padding: 30px 34px 24px; width: 460px; max-width: 100%;
  text-align: center; box-shadow: var(--schatten-dialog-tief); }
.orb { width: 64px; height: 64px; margin: 0 auto 14px; border-radius: 50%;
  background: radial-gradient(circle at 32% 30%, var(--amber-soft),
              var(--amber) 55%, var(--petrol-deep) 130%);
  animation: orb-atmen 2.2s ease-in-out infinite; }
.orb-fertig { animation: none;
  background: radial-gradient(circle at 32% 30%, #7FB894,
              var(--good) 60%, var(--petrol-deep) 140%); }
@keyframes orb-atmen {
  0%, 100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(199, 123, 59, .35); }
  50% { transform: scale(1.07); box-shadow: 0 0 0 14px rgba(199, 123, 59, 0); } }
@media (prefers-reduced-motion: reduce) { .orb { animation: none; } }
.orb-titel { font-weight: 600; margin: 0 0 12px; }
.orb-stufen { list-style: none; margin: 0 auto 16px; padding: 0;
  text-align: left; width: fit-content; }
.orb-stufen li { font-size: 13.5px; color: var(--muted); padding: 3px 0;
  padding-left: 22px; position: relative; }
.orb-stufen li::before { content: "○"; position: absolute; left: 0;
  color: var(--line); }
.orb-stufen li.fertig { color: var(--ink); }
.orb-stufen li.fertig::before { content: "✓"; color: var(--good); }
.orb-stufen li.aktiv { color: var(--ink); font-weight: 600; }
.orb-stufen li.aktiv::before { content: "●"; color: var(--amber); }
.orb-ergebnis { margin: 0 0 8px; font-size: var(--text-lead); }
.orb-fragen { margin: 0 0 12px; font-size: var(--text-basis); color: var(--muted); }
.orb-aktionen { display: flex; gap: 10px; justify-content: center; }
.orb-hintergrund { font-size: 12.5px; }
/* Abbrechen ist bewusst leiser als „Im Hintergrund" — Ghost, dezenter
   Warnton erst beim Hover, damit es nicht mit der Standardaktion konkurriert. */
.orb-abbrechen { font-size: 12.5px; background: transparent;
  color: var(--muted); border: 1px solid var(--rahmen, #d8d2c8); }
.orb-abbrechen:hover { color: #a6402f; border-color: #a6402f; }
.drawer-loeschen { background: transparent; color: var(--muted);
  border: 1px solid var(--rahmen, #d8d2c8); font-size: 12.5px; }
.drawer-loeschen:hover { color: #a6402f; border-color: #a6402f; }
/* Archiv = der sanfte Standard-Weg im Fuß (Mockup); Löschen bleibt Ghost. */
.drawer-archiv { font-size: 12.5px; margin-right: 8px; }

/* Upsell-Card im Strategie-Tab (Spec §10.4): Runden-Konzept sichtbar */
.upsell-karte { margin-top: 18px; border: 1px solid var(--line);
  border-left: 3px solid var(--amber); border-radius: var(--radius-karte);
  background: var(--card); padding: 14px 16px; font-size: 13.5px; }
.runden-liste { margin: 8px 0; padding-left: 20px; }
.runden-liste li { margin-bottom: 5px; }

/* Versionen-Tab (Spec §10.8): eine Zeile je Runden-Fassung */
.version-zeile { display: flex; align-items: center;
  justify-content: space-between; gap: 12px; padding: 10px 12px;
  border: 1px solid var(--line); border-radius: var(--radius-karte); margin-bottom: 8px;
  background: var(--card); font-size: 13.5px; }
.version-datum { color: var(--muted); font-size: var(--text-klein); margin-left: 8px; }
/* V22: die geltende Fassung erkennt man an der Kante, nicht an der Position.
   Petrol, nicht Amber — eine Fassungsliste ist Struktur, kein Baustein- oder
   Berater-Moment (Hausregel 5). */
.version-zeile.version-aktuell { border-left: 3px solid var(--petrol); }
.version-marke { font-size: var(--text-marke); color: var(--petrol);
  letter-spacing: .04em; margin-left: 8px; }

/* Score-Dreiklang (Spec §10.9) */
.orb-fehler { animation: none;
  background: radial-gradient(circle at 32% 30%, #E0A184,
              #B0532F 60%, var(--petrol-deep) 140%); }

/* Bestätigungs-Gate (Spec §10.8): Vorschlagsliste mit an/ab-Wahl */
.vorschlags-gate form { margin-top: 10px; }
.vorschlag-zeile { display: flex; gap: 10px; align-items: flex-start;
  padding: 9px 11px; margin-bottom: 6px; border: 1px solid
  rgba(237,231,220,.28); border-radius: var(--radius-karte); cursor: pointer;
  font-size: 13.5px; line-height: 1.45;
  background: rgba(255,255,255,.06); }
.vorschlag-zeile:hover { background: rgba(255,255,255,.12); }
.vorschlag-zeile input { margin-top: 3px; accent-color: var(--amber);
  flex-shrink: 0; }
.vorschlag-zeile .vorschlag-plan { color: var(--amber-soft); }

/* Rückfragen-Loop (Spec §10.5): Antwort-Formulare im Strategie-Tab */
.rueckfrage-form { margin: 10px 0 4px; }
/* EINE Fassung, im Haus — das Bauteil steht auf zwei Flächen: hell im Flow
   (`gefuehrt_schritt.html`) und dunkel im Drawer (`.gem`). Deshalb bringt es
   Struktur mit, aber keine harte Schriftfarbe; Petrol ist der Vorschlag für
   die helle Fläche, `.gem` korrigiert oben. Vorher stand die Regel doppelt,
   und die Flow-Fassung gewann auf BEIDEN Flächen. */
.rueckfrage-frage { font: 500 15px/1.35 var(--display); color: var(--petrol);
  margin: 16px 0 8px; }
.rueckfrage-frage:first-child { margin-top: 0; }
.rueckfrage-form textarea { width: 100%; box-sizing: border-box;
  border: 1px solid rgba(237,231,220,.35); border-radius: var(--radius-karte);
  background: rgba(255,255,255,.08); color: inherit; font: inherit;
  font-size: 13.5px; padding: 7px 9px; margin-bottom: 6px; resize: vertical; }
.rueckfrage-form textarea::placeholder { color: rgba(237,231,220,.55); }

/* Vorschau-Reiter (Spec §11.5 Schritt 2): Live-A4 + Design-Schalter */
.vorschau-doc-switch { display: flex; gap: 4px; margin-bottom: 8px; }
.vorschau-schalter { display: flex; flex-direction: column; gap: 8px;
  margin-bottom: 10px; }
.v-schalter { display: flex; align-items: center; gap: 6px;
  flex-wrap: wrap; }
.v-label { font-size: var(--text-klein); font-weight: 700; color: var(--petrol);
  width: 54px; }
/* Eigene Schalter-Styles fuer den HELLEN Inhaltsbereich (nicht die
   Kopf-Klassen .tab/.d-btn, die auf Papier unlesbar sind). */
.v-doc { font-size: var(--text-basis); font-weight: 600; color: var(--petrol);
  padding: 5px 14px; border: 1px solid var(--line); border-radius: var(--radius-pille);
  background: #fff; cursor: pointer; }
.v-doc.aktiv { background: var(--petrol); color: #fff;
  border-color: var(--petrol); }
.v-btn { font: inherit; font-size: var(--text-klein); font-weight: 600;
  color: var(--petrol); background: #fff; border: 1px solid var(--line);
  border-radius: var(--radius-pille); padding: 4px 12px; cursor: pointer; }
.v-btn:hover { border-color: var(--petrol); }
.v-btn.aktiv { background: var(--petrol); color: #fff;
  border-color: var(--petrol); }
.v-hint { font-size: var(--text-marke); color: var(--blaugrau); }
/* Farb-Swatches: EINE Wahrheit — und die ist inzwischen das gemeinsame
   Teilstueck teilstuecke/design_auswahl.html (.design-palette /
   .palette-felder, Farbe inline aus den Paletten-Karten). Die runden
   .swatch/.sw-* in gefuehrt.css, auf die diese Notiz frueher zeigte, rendert
   kein Template mehr; sie stehen nur noch, weil test_swatch_css.py sie
   verlangt (eigene Aufraeumung, benannt in
   docs/specs/2026-07-27-etappe-3-doppelungen.md). */
/* Native Range-Slider einfangen (Design-Gremium: Signalblau-Fremdkörper) */
.v-crop-row input[type="range"] { accent-color: var(--petrol); }
/* Downloads + Neuer Lauf ÜBER dem Blatt (Martin 2026-07-24) */
/* V24 (Visuelles Design, Runde 5): „drei Knopfhoehen einer Reihe fallen auf
   eine". Gemessen 60 px neben 39 px — `align-items` steht im Flex-Default
   auf `stretch`, also zog ein umgebrochenes Etikett alle Nachbarn mit. Die
   Hoehe eines Knopfes soll sagen, wie wichtig er ist, nicht wie lang sein
   Text ist. */
.blatt-aktionen { display: flex; gap: var(--raum-2); align-items: center;
  justify-content: center; flex-wrap: wrap; margin: 0 0 var(--raum-3); }
/* Sidebar-Block-Häkchen: zwei ruhige Spalten, Petrol statt Browser-Blau */
.v-blocks { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 12px; }
.v-block { font-size: var(--text-klein); display: flex; gap: 6px; align-items: center;
  font-family: var(--body); }
.v-blocks input[type="checkbox"] { accent-color: var(--petrol); }
.kv-zeilen { display: flex; flex-direction: column; gap: 2px; }
.kv-zeile { display: flex; justify-content: space-between; font-size: 12.5px;
  border-bottom: 1px dashed var(--line); padding: 3px 0; }
.kv-zeile span:first-child { color: var(--blaugrau); }
/* Anzeige-Reiter: Quelle anzeigen + nachtragen */
.quelle-zeile { display: flex; gap: 8px; align-items: center;
  margin: 0 0 12px; }
.quelle-zeile input { flex: 1; border: 1px solid var(--line);
  border-radius: var(--radius-pille); padding: 6px 12px; font: inherit; font-size: 12.5px; }
.vorschau-buehne { overflow: auto; background: #e8e8e8; padding: 10px;
  border: 1px solid var(--line); border-radius: var(--radius-block); }
.v-scale { width: 366px; height: 518px; overflow: hidden; margin: 0 auto;
  box-shadow: var(--schatten-blatt); }
.vorschau-a4 { width: 794px; height: 1123px; border: 0; background: #fff;
  transform: scale(.4609); transform-origin: top left; }
/* Breiter Drawer → größeres Blatt (Martin: „wirkt zu eng") */
@media (min-width: 1100px) {
  .v-scale { width: 480px; height: 679px; }
  .vorschau-a4 { transform: scale(.6045); }
}
.v-crop { margin: 4px 0 10px; padding: 8px; border: 1px solid var(--line);
  border-radius: var(--radius-block); display: flex; flex-direction: column; gap: 6px; }
.v-crop-slider { display: flex; flex-direction: column; gap: 4px; }
.v-crop-row { display: flex; align-items: center; gap: 8px;
  font-size: var(--text-klein); color: var(--petrol); }
.v-crop-row input[type=range] { flex: 1; }
.v-blocks { display: flex; flex-wrap: wrap; gap: 4px 12px; }
.v-block { display: flex; align-items: center; gap: 4px; font-size: var(--text-klein);
  color: var(--petrol); }
.ok-hinweis { background: var(--ok-soft); border: 1px solid var(--ok-linie);
  border-left: 3px solid var(--good); color: var(--good); border-radius: var(--radius-karte);
  padding: 9px 13px; font-family: var(--display); font-size: 13.5px;
  font-weight: 600; }
/* Die Naht zwischen zwei Abschnitten war 16 px, die Bodenluft INNERHALB eines
   Abschnitts 19 — der Gruppierungssprung lag bei 1,33x, und getrennt hat der
   Rahmen, nicht der Raum (Runde 6, Komposition). Hausregel dazu: **Trennung
   >= 2x groesster Innenschritt.** Mit 40 aussen gegen 16 innen sind es 2,5x. */
.profil-form fieldset { border: 1px solid var(--line); border-radius: var(--radius-karte);
  padding: var(--abstand-l); margin: 0 0 var(--abstand-xxl); background: var(--card); }
/* Der Gruppenkopf ist die dritte Stufe der Leiter, nicht eine vierte Fassung:
   36 Seitentitel · **20 Gruppe** · 17 Abschnitt · 13 Wert. Er steht auf der
   gemeinsamen linken Kante — der Abschnittstitel stand als einziges Element
   8 px daneben, weil `legend` ein Polster traegt (Runde 6, Komposition: 267
   Zeilen auf 83 linken Kanten). */
.gruppe-kopf { font-family: var(--display); font-size: var(--text-titel);
  font-weight: 700; color: var(--ink); letter-spacing: -.01em;
  margin: var(--abstand-xxl) 0 var(--abstand-l); }
.gruppe-kopf:first-of-type { margin-top: var(--abstand-xl); }
.profil-form legend { margin-left: -8px; }

/* Auf dem Telefon zaehlt die Regel, nicht die Zahl: 40 px Naht kosteten dort
   ueber einen ganzen Bildschirm. Das Verhaeltnis bleibt bei 2,0x, indem der
   Innenschritt mitgeht — 24 aussen gegen 12 innen. */
@media (max-width: 860px) {
  .profil-form fieldset { padding: var(--abstand-m);
    margin-bottom: var(--abstand-xl); }
}
/* Die Leiter (Runde 5, visuelles Design). Gemessen war die Hierarchie
   UMGEKEHRT: der Abschnittstitel stand auf 10,5 px — der kleinsten Schrift der
   Seite — ueber 69 Feldern, deren Beschriftungen 12,5 px trugen. Dazu waren
   90,5 % aller sichtbaren Zeichen auf einer Stufe (<=13 px); zwischen 36 und
   16 px stand nichts.
   Fuenf Stufen, alle aus vorhandenen Tokens, feste Rollen fuer beide Seiten:
   36 Seitentitel · 17 Abschnitt und Kartenname · 13 Wert und Beleg ·
   12 Hinweis · 11 Feldname und Fundstelle. Der Abschnitt gibt dabei die
   Versalien ab — die gehoeren dem Etikett, nicht der Ueberschrift. */
.profil-form legend { font-family: var(--display); font-size: var(--text-gross);
  font-weight: 700; color: var(--petrol); padding: 0 var(--abstand-s); line-height: 1.25; }
.profil-form label { display: block; font-family: var(--display);
  font-size: var(--text-marke); font-weight: 600; letter-spacing: .04em;
  color: var(--muted); margin: var(--abstand-m) 0 var(--abstand-xs); }
.profil-form fieldset > label:first-of-type { margin-top: 0; }
/* Runde 4, von drei Linsen unabhaengig gefunden: diese Regel hat (0,2,1) und
   deklarierte `border`, `font` und `font-size` ein zweites Mal — damit schlug
   sie den Feld-Boden des Hauses (0,0,1) und BEIDE Fixes aus Runde 3. Auf
   „Meine Daten" standen weiter 71 von 71 Feldern auf 14 px und 1,30:1,
   waehrend das Stylesheet 16 px und 3,04:1 enthielt. Eine Medienabfrage
   erhoeht kein Gewicht.
   Die drei Deklarationen sind ersatzlos weg; Rahmen, Schriftfamilie und
   -groesse kommen aus dem Boden. Auf dem Desktop heisst das 13 px statt 14 —
   `--text-basis` ist die Stufe, die die Leiter ausdruecklich fuer
   „Eingabefeld" vorsieht, und die Flaeche folgt ihr jetzt wie der Rest. */
.profil-form input[type=text], .profil-form input[type=number],
.profil-form textarea { width: 100%; padding: var(--abstand-s) var(--abstand-m); margin-top: var(--abstand-xs);
  border-radius: var(--radius-feld); background: #fff; }
.profil-form textarea { line-height: 1.5; resize: vertical; }
.profil-form input:focus-visible, .profil-form textarea:focus-visible {
  outline: 2px solid var(--amber); outline-offset: 1px;
  border-color: var(--amber); }
.v-editor { display: flex; flex-direction: column; gap: 8px;
  margin-bottom: 10px; }
.v-edit-block { display: flex; flex-direction: column; gap: 3px; }
.v-edit-label { font-size: var(--text-marke); font-weight: 700; color: var(--petrol);
  text-transform: uppercase; letter-spacing: .5px; }
.v-editor textarea { width: 100%; padding: 6px 8px; font: inherit;
  font-size: var(--text-basis); border: 1px solid var(--line); border-radius: var(--radius-block);
  resize: vertical; }

/* Editor Option 1: Inline-Block-Editor (dokument-ähnlich, gescopt) */
.v-inline-editor { background: #fff; border: 1px solid var(--line);
  border-radius: var(--radius-block); padding: 14px 16px; margin-bottom: 10px;
  color: #1a1a1a; }
.v-inline-head { font-size: var(--text-klein); font-weight: 700; letter-spacing: 1px;
  text-transform: uppercase; color: var(--gold-tief);
  border-bottom: 1.5px solid var(--gold-linie); padding-bottom: 2px;
  margin: 12px 0 4px; }
.v-inline-block:first-child .v-inline-head { margin-top: 0; }
.v-inline-edit { white-space: pre-wrap; font-size: var(--text-basis); line-height: 1.5;
  padding: 4px 6px; border-radius: var(--radius-block); outline: none; min-height: 1.7em;
  border: 1px dashed var(--line); transition: border-color .12s; }
.v-inline-edit:empty::before { content: attr(data-ph);
  color: var(--blaugrau); }
.v-inline-edit:hover { border-color: var(--line); }
.v-inline-edit:focus { border-color: var(--amber);
  background: var(--gold-soft); }

/* Bausteine-Grid + Editor (Spec 2026-07-16) */
/* `align-items: start` statt der Voreinstellung `stretch`: sonst zieht die
   hoechste Karte einer Reihe ihre Nachbarin auf dieselbe Hoehe. Runde 4 hat es
   im teuersten Zustand gemessen — neben dem offenen Editor stand eine **1.114
   px hohe leere weisse Flaeche**, 1,24 Bildschirme, 26,5 % der Seite. Karten
   sind unterschiedlich lang; das ist keine Unordnung, sondern ihr Inhalt. */
.bs-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(320px,1fr));
  gap:var(--abstand-l); align-items: start; }
/* Der Sprung `/bausteine#bs-<id>` landet richtig, sagt aber nicht wo: mobil
   liegt die Ueberschrift der angesprungenen Karte unter dem festen Menue-Knopf
   (30x30, z46) und der Kassen-Marke (54x30, z45) — 4 von 9 Tastpunkten lieferten
   Chrom statt Karte. `scroll-margin-top` haelt die Landung frei, und ein
   `:target`-Ring sagt, welche Karte gemeint war (es gab **null** solcher Regeln). */
.baustein-karte { scroll-margin-top: 72px; }
.baustein-karte:target { outline: 2px solid var(--petrol); outline-offset: 3px; }
/* Etappe 3: dieselbe Kartenfassung. `.bs-card` las --radius-feld (10px) und
   trug keinen Schatten — die fuenfte Fassung von „Karte" neben .karte,
   .bewerbung-karte, .baustein-karte und .wcard. Dass sie mit
   `.baustein-karte` sogar dieselbe Polsterung und dieselbe Amber-Kante
   teilt, heisst: es sind ZWEI Namen fuer ein Bauteil. Sie wirklich
   zusammenzulegen (eine Klasse, ein Teilstueck) ist der naechste Schritt
   der Etappe; hier ist erst die Fassung dieselbe. */
/* Dieselbe Leiter auf der Karte: der Name stand auf `--text-lead` (15 px) und
   damit nur 1,15x ueber seinem eigenen Fliesstext — auf einer Flaeche mit elf
   Karten ist das kein Titel, sondern ein etwas fetterer Absatz. */
.baustein-karte h3 { margin:0 0 var(--abstand-s); font-size: var(--text-gross);
  line-height: 1.25; }
.bs-hero-badge { color: var(--petrol); display: inline-flex;
  align-items: center; gap: var(--abstand-xs); }
.bs-hero-badge svg { width: 13px; height: 13px; }
.baustein-karte .bullet { font-size: var(--text-basis); margin:var(--abstand-s) 0; }
.bs-fuss { display:flex; gap:var(--abstand-s); flex-wrap:wrap; align-items:center; font-size: var(--text-marke); color:var(--muted); margin-top:var(--abstand-s); }
/* Merge M2/M3: der openai-Strang hat 999px zur Rolle `--radius-voll` gemacht
   (Etappe 2, Wert unveraendert), M3 hat die Farbe von Gold auf Petrol gezogen
   (AP3.5: eine Aktion auf der Baustein-Karte ist kein Kernmoment). Beides
   gilt. `.bs-aktion` steht woertlich so in test_akzent_disziplin. */
.bs-chip { border:1px solid var(--line); border-radius:var(--radius-voll); padding:var(--abstand-xs) var(--abstand-s); }
.bs-tag { background:var(--petrol); color:#EDE7DC; border-radius:var(--radius-voll); padding:var(--abstand-xs) var(--abstand-s); font-size: var(--text-marke); }
/* Runde 3: die Karte trug als einzige Flaeche des Produkts nackte Textlinks,
   wo ueberall sonst ein Knopf steht (17 von 26 Knoepfen hier mit Hausklasse,
   32 von 37 im Rest — die Luecke sass fast ganz hier). Die Form kommt jetzt
   aus `.btn .btn--klein`; `.bs-aktion` traegt nur noch, was IHR gehoert: die
   Farbe. Kein Widerspruch zu AP3.5 — dort ging es um Gold, und das
   Hausbauteil ist neutral. Die Farbe bleibt Petrol (test_akzent_disziplin). */
.bs-aktion { color:var(--petrol); text-decoration:none; }
/* Verwerfen = weiches, reversibles Retire (kein Kernmoment) -> kein Gold-
   Akzent; zurückhaltend wie .drawer-loeschen/.orb-abbrechen, Warnton erst
   am Hover. */
.bs-verwerfen { color:var(--muted); }
.bs-verwerfen:hover { color:#a6402f; }
/* ── Der Beleg (Gremium 2026-07-29, P5/P7) ─────────────────────────────────
   Er war das leichteste Element seiner eigenen Karte: 95 gegen 2.370
   Tinte-Aequivalent der Tag-Zeile, zugeklappt hinter einem 19-px-Oeffner —
   und traegt doch die einzige nicht verhandelbare Regel des Produkts. Jetzt
   offen, mit eigener Flaeche und der Amber-Kante, die ihm nach Hausregel 5
   zusteht: ein Beleg IST der Baustein-Moment.
   Das `<details>` ist weg; die vier `summary`-Regeln darunter hatten damit
   keinen Leser mehr. */
/* Amber-Disziplin (Runde 2): der Rahmen traegt die EINE Marke der Karte und
   liegt deshalb rundum, nicht nur links — zwei gleiche Schienen 17 px
   auseinander unterschieden nichts. `--gold-linie` trennte sich mit 1,61:1 von
   der Karte, `--amber` mit 3,25:1; die 3:1-Schwelle fuer Nicht-Text war vorher
   an drei von vier Kanten verfehlt. Das Gewicht kommt jetzt aus Kontrast statt
   aus Flaeche. */
.bs-beleg { margin: var(--abstand-m) 0 var(--abstand-m); padding: var(--abstand-m) var(--abstand-m); background: var(--paper);
  border: 1px solid var(--amber); border-left-width: 3px;
  /* Runde 3: der Beleg — laut Hausregel der EINE Kernmoment der Karte — stand
     in `--text-klein`, der Stufe fuer „Chip, Hilfstext, Etikett, Meta". Farbe
     und Groesse sagten Gegenteiliges. Jetzt Fliesstext wie der CV-Satz
     darueber; groesser waere er das lauteste Element der Seite. */
  border-radius: var(--radius-block); font-size: var(--text-basis); }
/* Die Marke traegt kein Amber mehr — der Rahmen ist die Marke. Petrol hier
   heisst: dies ist Struktur der Karte, nicht ein zweiter Fund. */
.bs-beleg-marke { font-size: var(--text-marke); letter-spacing: .08em;
  text-transform: uppercase; color: var(--petrol); font-weight: 700;
  margin-bottom: var(--abstand-xs); }
.bs-beleg-text { color: var(--ink); margin: 0; line-height: 1.5; }
/* Block I: der gesprochene Satz ist 2-4x so lang wie der CV-Text. Sichtbar
   auf drei Zeilen begrenzt, damit 11 Karten die mobile Ansicht nicht
   verdoppeln — aber der Text steht VOLLSTAENDIG im Dokument: Suche, Vorlesen
   und Kopieren erreichen ihn, anders als bei dem `<details>`, das Runde 1
   hier zu Recht geruegt hat. Ungekuerzt steht er im Editor. */
/* Runde 6, der schwerste Befund der Runde: der Beleg war das EINZIGE
   geklemmte Element der Flaeche — 11 von 11 Karten, 894 px verdeckt —,
   waehrend die Behauptung darueber ungedeckelt von 62 auf 187 px wachsen
   durfte. Der Beleganteil fiel dadurch von 32,3 % auf 25,9 %: je mehr ein
   Baustein behauptet, desto kleiner sein Nachweis. Fuer ein Produkt, dessen
   erste Regel Wahrheitssicherung heisst, ist das die falsche Richtung.
   Die Klemme gehoert an den Anspruch. Der Beleg bleibt ganz. */
.baustein-karte .bullet { display: -webkit-box; -webkit-line-clamp: 4;
  -webkit-box-orient: vertical; overflow: hidden; }
/* Fundstelle ist ein Verweis, kein Zitat: kleiner, leiser, ohne Kursiv —
   nichts an ihr soll nach gesprochenem Satz aussehen. */
.bs-beleg-fundstelle { color: var(--muted); font-size: var(--text-klein);
  margin: var(--abstand-s) 0 0; overflow-wrap: anywhere; }
/* Ohne Beleg verschwand der Block einfach — und der Chip behauptete daneben
   weiter „belegt". Abwesenheit ist keine Aussage. */
.bs-beleg-leer { border-color: var(--warn-linie);
  border-left-color: var(--warn); background: var(--warn-soft); }
.bs-beleg-leer .bs-beleg-marke { color: var(--warn); }
.baustein-karte.bs-unbelegt { border-left: 3px solid var(--warn); }

/* Merkmale und Handlungen sind zwei Zeilen, nicht eine. Vorher brachen Chip,
   Tags, Staerke, „Bearbeiten" und „Verwerfen" als sechs gleichrangige
   Geschwister um: „Verwerfen" stand in 7 von 11 Karten allein auf einer
   eigenen Zeile, und in keinen zwei Karten lagen die Handlungen gleich (P14). */
.bs-merkmale { display: flex; gap: var(--abstand-s); flex-wrap: wrap; align-items: center;
  font-size: var(--text-marke); color: var(--muted); margin: var(--abstand-m) 0 0; }
.bs-gewicht { margin-left: auto; display: inline-flex; align-items: center;
  gap: var(--abstand-xs); white-space: nowrap; }
.bs-gewicht-wort, .bs-gewicht-max { color: var(--muted); }
/* Zehn Schritte, gefuellt bis zum Wert. Kein Farbwechsel nach Hoehe — ein
   schwacher Baustein ist kein Fehler, und Rot waere eine Wertung, die das
   Produkt hier nicht faellt. */
.bs-balken { display: inline-block; width: 44px; height: 4px;
  border-radius: var(--radius-voll); background: var(--linie-soft);
  overflow: hidden; }
.bs-balken i { display: block; height: 100%; background: var(--petrol); }
.bs-fuss { border-top: 1px solid var(--line); margin-top: var(--abstand-m);
  padding-top: var(--abstand-s); gap: var(--abstand-s); }
.bs-verwerfen-form { display: inline; margin: 0; }
/* Verworfen ist ein Zustand, nicht ein Loch (P9). Die Zeile bleibt an
   ihrem Platz — sonst springt das Raster, und der Nutzer weiss nicht, ob
   sein Klick angekommen ist. */
/* R5/IA: die verworfenen Zeilen stehen als eigene Liste unter dem Raster —
   leiser als die Karten, aber vorhanden, damit der Rueckweg ein Ziel behaelt. */
.bs-verworfen-liste { display: flex; flex-direction: column; gap: var(--abstand-s);
  margin-top: var(--abstand-l); }
.bs-verworfen-zeile { display: flex; align-items: center; gap: var(--abstand-m);
  padding: var(--abstand-m) var(--abstand-l); border: 1px dashed var(--line);
  border-radius: var(--radius-karte); background: var(--paper);
  color: var(--muted); font-size: var(--text-klein); }
/* Zum zweiten Mal in derselben Datei: die auto-Marge trifft das FLEX-KIND,
   und das ist hier das Formular, nicht der Knopf darin. Der Kommentar
   sechs Zeilen tiefer nennt genau diesen Fehler den Klassiker - ich habe
   ihn geschrieben und in der Zeile darueber gebrochen. */
.bs-verworfen-zeile .bs-verwerfen-form { margin-left: auto; }
.bs-verworfen-zeile .bs-aktion { color: var(--petrol); }
/* Daumenmass: „Bearbeiten" mass 52x19, „Verwerfen" 46x18 — und die
   zerstoerende Handlung war die kleinere. Runde 2 gab 40 px, Runde 3 mass
   nach: 0 von 23 Bedienelementen der Flaeche erreichten 44x44. Polster und
   Radius kommen jetzt aus `.btn`; hier bleibt nur die Mindesthoehe, und die
   trifft die Schwelle statt sie knapp zu verfehlen. */
.bs-aktion { min-height: 44px; }
/* Die auto-Marge gehoert an das Flex-Kind. `.bs-verwerfen` sitzt IM
   Formular und haette sie wirkungslos getragen — der Klassiker. */
.bs-fuss .bs-verwerfen-form { margin-left: auto; }
.bs-verwerfen:hover { background: var(--warn-soft); }

/* ── Editor ───────────────────────────────────────────────────────────────
   P12: der Editor tauscht das ganze `<article>` und verlor damit die
   Kartenueberschrift — welcher Baustein bearbeitet wurde, verriet erst das
   dritte Feld. Jetzt ein eigener Kopf, und der Editor ist als Zustand
   erkennbar statt als Formular im Raster. */
/* Runde 6, von zwei Linsen unabhaengig als groesster Hebel genannt: der
   Editor ist ein Modal in einem Kachelplatz. Er ist 5-8x so hoch wie eine
   Karte, steht aber in einer 447-px-Spalte des Kartenrasters — neben ihm
   standen **377.268 px^2 totes Papier**, und im bezahlten Zustand waren 1.651
   von 1.690 Zeilen rechts von x=780 leer. Die Berater-Gegenueberstellung
   „Dein Text / Vorschlag" quetschte sich derweil in 187 px je Spalte.
   Eine Deklaration bringt sie auf ueber 380. */
.bs-editor { padding: 0; overflow: hidden; border-color: var(--petrol);
  grid-column: 1 / -1; }
.bs-ed-kopf { background: var(--petrol); color: #fff; padding: var(--abstand-m) var(--abstand-l); }
.bs-ed-was { display: block; font-size: var(--text-marke);
  letter-spacing: .09em; text-transform: uppercase; font-weight: 700;
  color: rgba(255,255,255,.62); }
.bs-ed-name { font-family: var(--display); font-weight: 700;
  font-size: var(--text-bedien); line-height: 1.3; }
.bs-ed-koerper { padding: var(--abstand-l) var(--abstand-l) var(--abstand-xs); }
.bs-ed-fuss { border-top: 1px solid var(--line); padding: var(--abstand-m) var(--abstand-l);
  display: flex; gap: var(--abstand-s); align-items: center; flex-wrap: wrap;
  background: var(--paper); }
.bs-ed-offen { margin-left: auto; font-size: var(--text-marke);
  color: var(--warn); }
.bs-ed-zeile { display: flex; gap: var(--abstand-l); align-items: flex-start;
  flex-wrap: wrap; }
.bs-editor .feld { margin-bottom: var(--abstand-m); }
.bs-editor .feld--schmal { flex: 0 0 128px; }
/* Hilfstext unter dem Feld: ueber einem 128-px-Feld brach er ueber drei
   Zeilen und schob das Kaestchen daneben aus der Flucht. */
.bs-editor .feld-lupe--nach { margin: var(--abstand-xs) 0 0; }
.bs-editor .feld-lupe { font-family: var(--display);
  font-size: var(--text-marke); color: var(--muted); margin: 0 0 var(--abstand-xs);
  line-height: 1.45; text-transform: none; letter-spacing: 0; }
.bs-editor label { display: block; font-size: var(--text-marke);
  font-family: var(--display); font-weight: 600; margin: 0 0 var(--abstand-xs);
  color: var(--petrol); }
/* Vorher: `.bs-editor input, .bs-editor textarea { width:100% }` (0,1,1)
   schlug `input:where([type=checkbox],[type=radio])` (0,0,1) — `:where()`
   traegt null Spezifitaet. Das Hero-Kaestchen war dadurch 293 px breit und
   stand eine Zeile ueber seiner Beschriftung. */
.bs-editor input:not([type=checkbox]):not([type=radio]),
.bs-editor textarea, .bs-editor select { width: 100%; }
.bs-haken { display: flex; align-items: center; gap: var(--abstand-m); min-height: 44px;
  cursor: pointer; flex: 1; }
.bs-haken-txt { font-family: var(--display); font-weight: 600;
  font-size: var(--text-bedien); }
.bs-haken-txt small { display: block; font-weight: 400;
  font-size: var(--text-marke); color: var(--muted); }
.bs-preis-paar { display: inline-flex; align-items: center; gap: var(--abstand-m);
  flex-wrap: wrap; }

/* ── Der bezahlte Vorschlag (P1) ───────────────────────────────────────────
   Vorher ersetzte das Ergebnis den eigenen Text im Feld — ohne Vorher/
   Nachher, ohne Betrag, und ein ungefragter Klick auf „Abbrechen" warf beides
   weg. Jetzt steht er daneben und wird gewaehlt. */
/* Runde 3: der BEZAHLTE Vorschlag war mit 1,53:1 der schwaechste Rahmen der
   Flaeche — 17 px neben dem gratis Beleg bei 3,13:1. Dasselbe Argument, das
   `efec6b5` fuer den Beleg gefuehrt hat, gilt hier staerker: Hausregel 5
   nennt Baustein- UND Berater-Momente als die Heimat des Akzents.
   `--amber` waere hier 2,98:1 — die eigene Fuellung `--gold-soft` ist heller
   als das Papier, auf dem der Beleg seine 3,13:1 erreicht. Also `--gold-tief`,
   derselbe Akzent eine Stufe dunkler. Der Waechter hat die zwei Hundertstel
   gefangen, die ein Blick durchgewunken haette. */
.bs-vorschlag { border: 1px solid var(--gold-tief); background: var(--gold-soft);
  border-radius: var(--radius-block); padding: var(--abstand-m) var(--abstand-m); margin: var(--abstand-xs) 0 var(--abstand-l); }
.bs-vorschlag-marke { font-size: var(--text-marke); letter-spacing: .08em;
  text-transform: uppercase; color: var(--gold-tief); font-weight: 700;
  margin-bottom: var(--abstand-s); }
.bs-vorschlag-geld { text-transform: none; letter-spacing: 0; font-weight: 400;
  color: var(--muted); margin-left: var(--abstand-s); }
/* Q2: der Vergleich zeigt jetzt BEIDE umgeschriebenen Felder, jedes unter
   seinem eigenen Titel. Vorher wurde eins gezeigt und zwei gespeichert. */
.bs-gegen-titel { font-family: var(--display); font-weight: 600;
  font-size: var(--text-marke); color: var(--gold-tief);
  margin: var(--abstand-xs) 0 var(--abstand-xs); }
.bs-gegen-titel + .bs-gegen { margin-bottom: var(--abstand-m); }
.bs-gegen { display: grid; grid-template-columns: 1fr 1fr; gap: var(--abstand-m);
  margin-bottom: var(--abstand-m); }
.bs-spalte { background: var(--card); border: 1px solid var(--gold-linie);
  border-radius: var(--radius-feld); padding: var(--abstand-s) var(--abstand-m); }
.bs-spalte h4 { margin: 0 0 var(--abstand-xs); font-family: var(--display);
  font-size: var(--text-marke); letter-spacing: .07em; text-transform: uppercase;
  color: var(--muted); }
.bs-spalte-neu h4 { color: var(--gold-tief); }
.bs-spalte p { margin: 0; font-size: var(--text-klein); line-height: 1.5; }
.bs-vorschlag-wahl { display: flex; gap: var(--abstand-s); flex-wrap: wrap; }
@media (max-width: 860px) { .bs-gegen { grid-template-columns: 1fr; } }

/* Bubble-Tags + Erfahrung-Zeilen (Mein-Profil Daten-UX, Spec 2026-07-16) */
[x-cloak] { display: none !important; }
.tag-liste { display:flex; flex-wrap:wrap; gap:var(--abstand-s); align-items:center;
  border:1px solid var(--line); border-radius:var(--radius-feld); padding:var(--abstand-s); background:var(--card); }
/* Runde 4 hat den Preis der vergroesserten Trefferflaeche gemessen: das
   `::after` mit `inset:-6px` am Loesch-x reicht in die 6-px-Luecke der
   Nachbarzeile — 19 ueberlappende Paare, und 15 von 90 Randproben trafen ein
   FREMDES x, destruktiv und ohne Rueckfrage. Ein Daumenziel, das dem Nachbarn
   gehoert, ist kein gewonnenes Ziel.
   Steht hier und nicht im Mobil-Block weiter oben: die Kurzform `gap` eine
   Zeile drueber setzt `row-gap` sonst wieder auf 6 zurueck. */
/* Die 14 px (jetzt `l`) waren Ausgleich fuer die Phantomflaeche des
   Loesch-x, die sich zwischen zwei Zeilen ueberlappte. Seit die Knoepfe
   echte 44 px messen, gibt es nichts auszugleichen — und die Marken-Listen
   sind das schwerste Element der Seite (Tools allein ~780 px). */
@media (pointer: coarse) { .tag-liste { row-gap: var(--abstand-s); } }
/* Bauvertrag P14 (Gremium 2026-07-29): `.tag-x` mass **12 x 14 px** bei
   **202 Fundstellen** ueber die Zustaende — 168 px² gegen die 576 px², die
   WCAG 2.2 AA fuer ein Bedienziel verlangt, und der Richtwert fuer einen
   Daumen ist 44 px. Die Marke waechst mit, damit das Ziel nicht aus ihr
   herausragt. Flaechenlokal: nur `.tag`/`.erf-zeile`/`.spr-zeile` — der
   Drawer der parallelen Sitzung bleibt unberuehrt. */
.tag { display:inline-flex; align-items:center; gap:var(--abstand-xs); background:var(--petrol);
  color:#EDE7DC; border-radius:var(--radius-voll); padding:0 var(--abstand-xs) 0 var(--abstand-m);
  min-height:36px; font-size: var(--text-klein); }
/* Sortierknoepfe (2026-08-02). Sie sind Werkzeug, nicht Inhalt: leiser als das
   Loesch-x, das eine Farbe traegt, und ohne eigene Kante — die Marke hat schon
   eine. Am Rand der Liste faellt der jeweilige Knopf auf halbe Deckkraft und
   nimmt keine Klicks mehr an, statt zu verschwinden: eine Reihe Knoepfe, deren
   Anzahl je Zeile wechselt, springt beim Lesen. */
.sortier { background:none; border:0; cursor:pointer; padding:0 var(--abstand-xs);
  font: inherit; line-height:1; color:inherit; opacity:.62; }
.sortier:hover:not(:disabled) { opacity:1; }
.sortier:disabled { opacity:.22; cursor:default; }
.erf-zeile .sortier, .spr-zeile .sortier { color: var(--petrol); }
.tag-x { background:none; border:0; color:#EDE7DC; cursor:pointer;
  font-size: var(--text-bedien); line-height:1;
  width:32px; height:32px; border-radius:var(--radius-voll);
  display:inline-flex; align-items:center; justify-content:center; }
.tag-x:hover { color:var(--amber); background:rgba(255,255,255,.12); }
/* Das x der Zeilen-Editoren steht frei (nicht in einer Marke) und bekommt
   deshalb das volle Daumenmass. */
.erf-zeile .tag-x, .spr-zeile .tag-x { width:44px; height:44px; flex:none;
  color:var(--warn); border:1px solid var(--feldrand-stark, rgba(22,52,59,.38));
  background:var(--card); }
.erf-zeile .tag-x:hover, .spr-zeile .tag-x:hover { background:var(--warn-soft);
  color:var(--warn); }
/* `outline:0` stand hier bis 2026-07-27 — an einem rand- UND flaechenlosen
   Feld. Damit war der fokussierte Zustand vom unfokussierten nicht zu
   unterscheiden: es gab kein einziges Signal. Der Rahmen bleibt weg (das Feld
   sitzt in `.tag-liste`, die den Rahmen traegt), der Ring kommt zurueck. */
/* `border:0` und `background:transparent` sind Absicht — das Feld sitzt IN der
   Marken-Zeile und soll dort keine zweite Kante ziehen. Die Schriftgroesse ist
   es nicht: sie war die letzte der 68, die auf dem Telefon unter 16 px stand
   und damit hineingezoomt haette. Der Boden setzt sie, hier bleibt nur, was
   dieser Stelle wirklich gehoert. */
.tag-eingabe { border:0; background:transparent; flex:1; min-width:120px;
  padding:var(--abstand-xs); }
/* Die Breiten standen als style=flex:1 im Markup und schlugen damit JEDE
   Stylesheet-Regel - auch die Stapel-Regel fuer Telefone. Sie griff
   deshalb bei Sprachen (Klassen) und nicht bei Ausbildung, Zertifikaten
   und Projekten, also genau bei den Feldern des Befundes. */
.erf-zeile { display:flex; gap:var(--abstand-s); align-items:center; margin-bottom:var(--abstand-s); }
.erf-zeile > input { flex: 1; min-width: 0; }
.erf-zeile > input.zeile-jahr { flex: 0 0 90px; }
.erf-zeile > input.zeile-kurz { flex: 0 0 80px; }
.erf-zeile > input.zeile-label { flex: 0 0 160px; }
.rolle-kontext { display:flex; gap:8px; align-items:center; margin-bottom:6px; flex-wrap:wrap; }
.rolle-kontext .rolle-name { flex:0 0 100%; font-weight:600; font-size: var(--text-basis); }
.rolle-kontext input { flex:1 1 40%; min-width:120px; }

/* Reiter als segmentierte Umschaltung — klar als Tabs erkennbar */
.reiter { display: inline-flex; gap: var(--abstand-xs); margin: 0 0 var(--abstand-xl); max-width: 100%;
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--radius-block); padding: var(--abstand-xs); flex-wrap: wrap; }
.reiter-tab { font-family: var(--display); font-size: 13.5px; font-weight: 600;
  color: var(--muted); text-decoration: none; padding: var(--abstand-s) var(--abstand-l);
  border-radius: var(--radius-innen); transition: background .15s, color .15s; white-space: nowrap; }
.reiter-tab:hover { color: var(--ink); }
.reiter-tab.aktiv { background: var(--petrol); color: var(--paper); }
.profil-wrap { max-width: 720px; }
.profil-wrap-breit { max-width: 960px; }
/* Sprachen-Zeile: Sprache (Autocomplete) + Niveau (Dropdown) */
.spr-zeile { display: flex; gap: var(--abstand-s); align-items: center; margin-bottom: var(--abstand-s); }
.spr-zeile .spr-name { flex: 1; }
.spr-zeile .spr-niveau { width: 190px; flex: none; }
/* P14/Mobil: unter 560 px stapeln die Zeilen-Editoren. Die festen 190 px
   liessen in einer 327-px-Spalte 68 px fuer den Sprachnamen — 4 von 4
   Namen waren abgeschnitten, ebenso 4 von 4 Zertifikatsnamen. */
@media (max-width: 560px) {
  .spr-zeile, .erf-zeile { flex-wrap: wrap; }
  .spr-zeile .spr-name, .spr-zeile .spr-niveau,
  .erf-zeile > input { flex: 1 1 100%; width: auto; min-width: 0; }
}
/* Dieselbe Doppelung wie beim Textfeld, gleiche Folge (die vier Sprach-
   Auswahlen standen auf 38 px und 1,30:1). Rahmen, Familie und Groesse aus
   dem Boden. */
.profil-form select { width: 100%; background: #fff;
  border-radius: var(--radius-feld); padding: var(--abstand-s) var(--abstand-m);
  color: var(--ink); cursor: pointer; }
.profil-form select:focus-visible { outline: 2px solid var(--amber);
  outline-offset: 1px; border-color: var(--amber); }
/* Admin: Selects/Inputs ans System angleichen (waren Browser-Default) */
/* Die Admin-Flaeche bleibt, was sie ist: eine dichte Innenansicht mit kleiner
   Schrift. Sie in die Hausgestaltung zu heben ist eine Produktfrage, keine
   Typografiefrage. Was sie NICHT bleibt, ist ein Sonderfall ohne Regeln: 28 der
   99 Inline-Groessen standen hier (38 %), und sie waren keine Einzelfaelle —
   fuenf Tabellen auf 13px, fuenf Hilfstexte auf 11px, vier Kennzahlen auf 20px.
   Das sind vier Bauteile, 28 Mal von Hand geschrieben.

   `.admin table` braucht keine Klasse im Markup, weil `.admin` die ganze Seite
   umschliesst (admin.html:3). Die Tabellenbreite bleibt dort, wo sie steht —
   eine von sechs Tabellen ist absichtlich nicht 100 % breit. */
.admin table { font-size: var(--text-basis); border-collapse: collapse; }
.admin .a-meta { font-size: var(--text-marke); color: var(--tinte-soft); }
.admin .a-meta.a-warn { color: var(--warn); }
.admin .a-zahl { font-size: var(--text-titel); }
.admin .a-notiz { font-size: var(--text-basis); color: var(--tinte-soft); }
.admin .a-notiz.a-normal { font-weight: 400; }
.admin .a-klein { font-size: var(--text-klein); color: var(--tinte-soft); }
.admin select, .admin input[type=number], .admin input[type=password] {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius-feld);
  padding: 7px 10px; font-family: var(--body); font-size: var(--text-basis); color: var(--ink); }
.admin select:focus-visible, .admin input:focus-visible {
  outline: 2px solid var(--amber); outline-offset: 1px; border-color: var(--amber); }

/* --- Drawer: gefaltete Unter-Abschnitte (Detail-Ansicht 8→5, Spec §3.8) --- */
.d-abschnitt { margin: 22px 0 8px; padding-top: 14px; border-top: 1px solid var(--line);
  font: 600 11px/1 var(--display); letter-spacing: .12em; text-transform: uppercase;
  color: var(--muted); }

/* F4: Knockout-Block — Warnung (rot), kein Kernmoment (nie Amber, Regel 5). */
/* W13 (6 von 12 Linsen, Runde 3): Martins Entscheidung 4 („niemals als
   K.-o.-Kriterium aufzeigen") war nur halb umgesetzt. Der TEXT war
   entschaerft — „Eine hohe Huerde." statt „Aussichtslos.", `amber` statt
   `warn`, `role="note"` statt `role="alert"` — der BLOCK blieb in der
   Alarmfarbe. Das Band beruhigte, die Flaeche schrie: zwei Aussagen ueber
   denselben Sachverhalt in einem Bild.

   Jetzt Gold/Amber, dieselbe Familie wie das Band. Hausregel 5 bleibt
   gewahrt: das ist kein Berater-Moment, deshalb die LINIEN-Toenung
   (`--gold-linie`/`--gold-soft`) und kein volles Akzent-Amber. */
/* Die Huerde traegt Struktur, nicht den Akzent (Amber-Diaet, 2026-07-29).
   Gemessen: `f11-knockout` zeigte **15 Amber-Fundstellen und NULL warn** —
   die komplette Amber-Familie (Kante, Grund, Ueberschrift) fuer einen
   Befund ueber die Stelle. Der einzige Fall MIT warn war die in dreissig
   Sekunden behebbare leere Kasse. Die Schwere war invertiert.

   Rot ist hier trotzdem falsch: Martins Regel lautet „niemals als
   K.-o.-Kriterium aufzeigen" — eine Huerde ist Information plus ein Weg,
   kein Urteil. Und Hausregel 5 gibt Amber dem Baustein- und dem
   Berater-Moment; ein Befund ueber die Anzeige ist keiner von beiden.

   Bleibt Petrol: die Farbe der Struktur, in derselben 8-%-Dosis und mit
   derselben 4-px-Kante wie bisher. Die Form aendert sich nicht, nur die
   Zuordnung. Kein neuer Wert — `--linie-soft` gibt es seit dem Fundament. */
.knockout-block { border: 1px solid var(--line); background: var(--linie-soft);
  border-left: 4px solid var(--petrol); border-radius: var(--radius-block); padding: 12px 14px;
  margin-bottom: 14px; }
.knockout-block > strong { display: block; margin-bottom: 6px; color: var(--petrol);
  text-transform: uppercase; font-size: var(--text-klein); letter-spacing: .04em; }
.knockout-liste { margin: 0; padding-left: 18px; font-size: var(--text-basis); }
.knockout-beleg { color: var(--muted); font-style: italic; }
.knockout-hinweis { margin: 8px 0 0; font-size: 12.5px; color: var(--muted); }

/* --- Detail-Drawer: bislang ungestylte Bereiche ans System angleichen (Kat B, Gremium) --- */
.guide-panel { border-top: 1px solid var(--line); padding-top: 14px; }
.arbeitet-hinweis { font-size: 12.5px; color: var(--muted); font-style: italic; }
/* Formulare im hellen Drawer-Inhalt (Textareas/Inputs wie .notiz-feld) */
.feedback-form, .strategie-beitrag-form, .ansprech-form { margin: 8px 0 4px; }
.feedback-form textarea, .strategie-beitrag-form textarea,
.ansprech-form input, .offener-punkt-neu input {
  width: 100%; box-sizing: border-box; background: #fff;
  border: 1px solid var(--line); border-radius: var(--radius-karte); padding: 8px 10px;
  font-family: var(--body); font-size: 13.5px; color: var(--ink); resize: vertical; }
.feedback-form textarea { margin-bottom: 8px; }
.feedback-form textarea:focus-visible, .strategie-beitrag-form textarea:focus-visible,
.ansprech-form input:focus-visible, .offener-punkt-neu input:focus-visible {
  outline: 2px solid var(--amber); outline-offset: 1px; border-color: var(--amber); }
.gate-aktionen { margin-top: 12px; }
.gate-beitrag-knoepfe { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 4px; }
.offener-punkt-neu { display: flex; gap: 8px; align-items: center; margin: 8px 0 4px; }
/* Offene-Punkte-Checkliste + Recherche-Fakten: Listen ohne Default-Bullets */
.offene-punkte, .research-fakten { list-style: none; margin: 6px 0; padding: 0; }
.offene-punkte li, .research-fakten li { font-size: 13.5px; padding: 7px 0;
  border-bottom: 1px solid var(--linie-soft); }
.offene-punkte li:last-child, .research-fakten li:last-child { border-bottom: none; }
.offene-punkte li { display: flex; align-items: flex-start; gap: 8px; }
.research-fakten label { display: inline-flex; align-items: flex-start; gap: 7px; }
.punkt-toggle { background: none; border: none; cursor: pointer; font-size: var(--text-lead);
  line-height: 1; padding: 0; color: var(--petrol); flex: none; }
.research-quelle { font-size: 11.5px; color: var(--petrol); text-decoration: none; }
.research-datum { font-size: 11.5px; color: var(--muted); margin-left: 4px; }
.marker-hinweis { font-size: var(--text-klein); color: var(--muted); font-style: italic; margin: 6px 0 0; }

/* --- Dokumentdesign: Stil zuerst, Palette als unabhängige zweite Achse --- */
.design-auswahl {
  margin: 12px 0 16px;
  font-family: var(--display);
}
.design-stile {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
.design-stil {
  min-height: 74px;
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: start;
  gap: 11px;
  padding: 13px 14px;
  border: 1px solid rgba(22, 52, 59, .28);
  background: rgba(251, 248, 242, .94);
  color: var(--ink);
  text-align: left;
  cursor: pointer;
  transition: background .16s ease, color .16s ease, border-color .16s ease;
}
.design-stil + .design-stil { border-left-width: 0; }
.design-stil:hover { background: #fff; border-color: var(--petrol); }
.design-stil.aktiv {
  position: relative;
  z-index: 1;
  background: var(--petrol-deep);
  border-color: var(--petrol-deep);
  color: #fff;
  /* W6 (Runde 6) — ein Bauteil, EIN Auswahl-Signal. Dieselbe Vorlagenwahl
     rendert im Drawer und in der Flow-Ausgabe; der Balken war hier Amber
     (gemessen rgb(199,123,59)) und im Flow Petrol (rgb(34,71,79)) — der
     Nutzer sah beides binnen Minuten. Petrol gewinnt: Amber gehoert laut
     Hausregel 5 Baustein- und Berater-Momenten, eine Stilauswahl ist keines
     von beidem. Der Flow-Fork in gefuehrt.css ist damit entfallen.
     Raster und Kantenform duerfen je Kontext weiter abweichen. */
  box-shadow: inset 0 -3px 0 var(--petrol-700);
}
.design-nummer {
  color: var(--amber);
  font-family: var(--body);
  font-size: 19px;
  line-height: 1.05;
}
.design-stil-text { min-width: 0; }
.design-stil strong {
  display: block;
  font-size: var(--text-basis);
  line-height: 1.2;
}
.design-stil small {
  display: block;
  margin-top: 5px;
  color: inherit;
  font-size: 10px;
  line-height: 1.3;
  opacity: .68;
}
.design-badge {
  display: inline-block;
  margin-top: 6px;
  color: var(--amber-soft);
}
.design-paletten {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 7px;
  margin-top: 9px;
}
.design-palette {
  position: relative;
  min-width: 0;
  padding: 7px;
  border: 1px solid var(--line);
  border-radius: var(--radius-karte);
  background: rgba(255, 255, 255, .78);
  color: var(--ink);
  text-align: left;
  cursor: pointer;
}
.design-palette:hover { border-color: rgba(22, 52, 59, .5); }
.design-palette.aktiv {
  border-color: var(--petrol);
  outline: 2px solid var(--petrol);
  outline-offset: 1px;
}
.palette-felder {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  height: 13px;
  overflow: hidden;
  border-radius: var(--radius-probe);
}
.palette-felder i { display: block; }
.design-palette-name {
  display: block;
  overflow: hidden;
  margin-top: 6px;
  font-size: 10px;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.design-check {
  position: absolute;
  top: 2px;
  right: 4px;
  color: #fff;
  font-size: var(--text-marke);
  text-shadow: 0 1px 2px rgba(0, 0, 0, .7);
}
.design-stil:focus-visible,
.design-palette:focus-visible {
  outline: 3px solid var(--amber);
  outline-offset: 2px;
}
.design-erweitert {
  margin: 12px 0;
  padding-top: 9px;
  border-top: 1px solid var(--line);
}
.design-erweitert > summary {
  color: var(--petrol);
  font: 700 12px/1.3 var(--display);
  cursor: pointer;
}
.design-erweitert[open] > summary { margin-bottom: 10px; }
@media (max-width: 900px) {
  .design-stile { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .design-stil + .design-stil { border-left-width: 1px; }
  .design-stil:nth-child(n+3) { border-top-width: 0; }
  .design-paletten { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  .design-stile,
  .design-paletten { grid-template-columns: 1fr; }
  .design-stil:nth-child(n+2) { border-top-width: 0; }
  .design-palette-name { white-space: normal; }
}
/* Alter Onboarding-Wizard: dieselbe Designauswahl und echte A4-Vorschau. */
.wizard-design { margin-top: 16px; }
.wizard-design .design-auswahl { margin: 12px 0; }
.wizard-design-achse {
  display: flex; align-items: center; flex-wrap: wrap; gap: 8px;
  margin: 10px 0;
}
.wizard-design-achse form { display: inline-flex; }
.wizard-vorschau-layout { max-width: 820px; margin: 16px auto 0; }
.wizard-vorschau-layout .vorschau-buehne { min-height: 540px; }
@media (max-width: 560px) {
  .wizard-vorschau-layout .vorschau-buehne {
    padding: 6px; min-height: 0;
  }
  .wizard-design-achse { align-items: flex-start; }
}
@media (prefers-reduced-motion: reduce) {
  .design-stil { transition: none; }
}
@media print {
  .design-auswahl,
  .design-erweitert { display: none !important; }
}

/* ==========================================================================
   Bauteil-Seite /design — der Spiegel des Systems.
   Bewusst zurueckhaltend: die Seite soll die Bauteile zeigen, nicht sich
   selbst. Nutzt ausschliesslich Tokens, damit sie nicht das erste Beispiel
   fuer das Problem wird, das sie sichtbar macht.
   ========================================================================== */
.ds { max-width: 1100px; margin: 0 auto; padding-bottom: 80px; }
.ds-kopf { border-bottom: 2px solid var(--petrol); padding-bottom: 20px; margin-bottom: 26px; }
.ds-kopf h1 { margin: 8px 0 0; }
.ds-lead { color: var(--muted); max-width: 68ch; margin: 10px 0 0; }
.ds-block { background: var(--card); border: 1px solid var(--line);
  border-radius: var(--radius-karte); padding: 22px 24px; margin-bottom: 18px; }
.ds-block h2 { margin: 0 0 6px; font-size: 21px; color: var(--petrol); }
.ds-untertitel { font-size: var(--text-basis); letter-spacing: .1em; text-transform: uppercase;
  color: var(--muted); margin: 22px 0 10px; }
.ds-regeln { border-left: 4px solid var(--amber); }
.ds-regel-liste { margin: 14px 0 0; padding-left: 22px; }
.ds-regel-liste li { margin-bottom: 10px; line-height: 1.6; }
.ds-fussnote { margin: 14px 0 0; padding-top: 12px; border-top: 1px solid var(--linie-soft);
  color: var(--muted); font-size: var(--text-bedien); }
.ds-schuld { border-left: 4px solid var(--warn); }
.ds-tab { border-collapse: collapse; width: 100%; margin-top: 12px; }
.ds-tab th, .ds-tab td { text-align: left; padding: 8px 12px;
  border-bottom: 1px solid var(--linie-soft); font-size: var(--text-bedien); }
.ds-tab th { font-size: var(--text-marke); letter-spacing: .09em; text-transform: uppercase; color: var(--muted); }
.ds-zahl { font-variant-numeric: tabular-nums; }
.ds-rolle { padding: 16px 0; border-bottom: 1px solid var(--linie-soft); }
.ds-rolle:last-child { border-bottom: none; }
.ds-rolle-kopf { display: flex; align-items: baseline; gap: 12px; }
.ds-rolle-kopf h3 { margin: 0; font-size: 16px; text-transform: capitalize; }
.ds-anzahl { font-size: var(--text-klein); color: var(--muted); border: 1px solid var(--line);
  border-radius: var(--radius-pille); padding: 2px 10px; }
.ds-anzahl.viel { color: var(--warn); border-color: var(--warn); font-weight: 600; }
.ds-erklaerung { color: var(--muted); font-size: var(--text-bedien); margin: 6px 0 10px; }
.ds-klassen { display: flex; flex-wrap: wrap; gap: 6px; }
.ds-klasse { font-family: var(--mono); font-size: var(--text-klein); background: var(--paper);
  border: 1px solid var(--line); border-radius: var(--radius-block); padding: 3px 8px; }
.ds-mehrfach { color: var(--warn); font-style: normal; font-weight: 700; margin-left: 4px; }
.ds-buehne { background: var(--paper); border: 1px solid var(--line);
  border-radius: var(--radius-block); padding: 18px; margin: 14px 0; }
.ds-marke { display: block; font-size: var(--text-marke); letter-spacing: .1em; text-transform: uppercase;
  color: var(--muted); margin-bottom: 12px; }
.ds-reihe { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.ds-reihe-weit { gap: 34px; align-items: flex-start; }
.ds-hinweis { color: var(--muted); font-size: var(--text-basis); margin: 16px 0 8px; }
.ds-unterschrift { display: block; font-size: var(--text-klein); color: var(--muted); margin-top: 8px; }
.ds-swatches { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 10px; }
.ds-swatch { border: 1px solid var(--line); border-radius: var(--radius-block);
  padding: 10px; background: var(--paper); }
.ds-swatch i { display: block; height: 30px; border-radius: var(--radius-block);
  border: 1px solid var(--line); margin-bottom: 7px; }
.ds-swatch .ds-eck { background: var(--card); }
.ds-swatch b { display: block; font-family: var(--mono); font-size: 11.5px; }
.ds-swatch span { display: block; font-size: var(--text-marke); color: var(--muted); }

/* ── Das Haus beansprucht das a-Element (Runde 7, X3) ─────────────────────
   Befund: „Guthaben ansehen" neben dem gesperrten Knopf war ein ungestyltes
   `<a>` — gemessen `#0000EE`, unterstrichen. Das einzige Browser-Blau im
   Produkt, und ausgerechnet auf dem einen Screen, der über Geld spricht.

   Die Ursache war größer als der Link: es gab KEINE Basisregel für `a`, nur
   Kontextregeln (`.sl-nav a`, `.gem a` …). 27 klassenlose Anker in den
   Templates; jeder, der aus seinem Kontext fällt, wurde blau.

   `:not([class])` greift genau die klassenlosen und kann deshalb keine
   gestaltete Regel überholen. Sie steht am Ende der Datei, damit sie in der
   Kaskade niemandem in den Weg kommt. */
a:not([class]) { color: var(--petrol); text-decoration-thickness: 1px;
  text-underline-offset: 2px; }
a:not([class]):hover { color: var(--petrol-deep); }

/* ── V5 · Der 44-px-Boden gilt auch im Drawer ───────────────────────────
   Mobile UX, Gremium-Runde 4, breitester Census der Runde: **519 von 708
   Bedienelementen unter 44 px** (73,3 %), 158 sogar unter 32 px.
   `.punkt-toggle` mass 13x15 px, und `.d-zu` (32x32) war der einzige
   mobile Ausgang der ganzen Flaeche.

   Die Einzelwerte sind woertlich die Vorher-Liste, die `gefuehrt.css`
   (Block R6/2) selbst als Defekt notiert — dort steht die Reparatur seit
   Runde 6. Sie steht nur hinter `.gefuehrt`, und der Drawer hat null
   `.gefuehrt`-Vorfahren: eine Ursache, ein Ort, 519 Treffer.

   Wie im Flow waechst die Polsterung, nicht die Schrift — die Optik der
   Flaeche bleibt, die Hand trifft. */
@media (max-width: 620px) {
  /* Die Fuge, die Flex verschluckt. Gremium-Runde 5, Mobile und Tonalitaet
     unabhaengig: „Lebenslaufpasst" — gemessen 0,0 px bei <=620 px und
     3,4 px darueber, in allen vier geprueften Faellen.

     Mechanismus: in einem Flex-Behaelter wird jede zusammenhaengende
     Textfolge zu einem ANONYMEN Flex-Element, und der Leerraum ZWISCHEN
     ihnen faellt ersatzlos weg. `.doc-tab` traegt „Lebenslauf
     <small>Ziel: 2 Seiten</small>" — im HTML steht ein Leerzeichen, auf der
     Flaeche stand keins. Der Defekt lebte nur in diesem Media-Block, war
     auf dem Desktop unsichtbar und in jedem Markup-Test gruen.

     `column-gap` gibt sie zurueck: 0,28em entspricht ungefaehr der
     Leerzeichenbreite der Hausschrift. Gewacht von
     `tests/test_drawer_worte_chromium.py`, das die getrimmte Ausdehnung
     misst — der ungetrimmte Kasten enthaelt seinen Leerraum und meldet
     ueberall 0. */
  .drawer .btn, .drawer .v-btn, .drawer .d-btn,
  .drawer .chip-reihe .btn { min-height: 44px;
    display: inline-flex; align-items: center; justify-content: center;
    column-gap: .28em; }
  .drawer .doc-tab, .drawer .segmented button,
  .drawer summary { column-gap: .28em; }
  .drawer .tab { min-height: 44px; display: inline-flex; align-items: center; }
  .drawer .d-zu { min-width: 44px; min-height: 44px; }
  .drawer .d-mehr summary { min-height: 44px; display: flex;
    align-items: center; }
  .drawer .segmented button, .drawer .doc-tab { min-height: 44px;
    display: inline-flex; align-items: center; }
  .drawer .schrift-select, .drawer .appearance-toggle,
  .drawer .upload-btn { min-height: 44px; }
  .drawer summary { min-height: 44px; display: flex; align-items: center; }
  .drawer a.preis-weg { display: inline-block; padding: 12px 0; }
  /* Ein Textlink mitten im Satz darf nicht 44 px hoch WERDEN — er soll 44 px
     hoch TREFFEN. Der Kasten waechst unsichtbar um ihn herum, die Zeile
     bleibt. „Guthaben ansehen" mass 286x33 und war in `f16` einer von zwei
     Wegen aus einem leeren Konto. */
  /* Ankreuzflaechen: die `.v-block`-Chips des Aussehen-Panels und die
     Vorschlags-/Research-Zeilen mass der Census bei 22 px Hoehe. Sie tragen
     ihren Text im Label, also waechst das Label. */
  .drawer label.v-block, .drawer .vorschlag-zeile,
  .drawer .research-fakten label { min-height: 44px;
    display: inline-flex; align-items: center; }
  .drawer .lese-hinweis a, .drawer .seiten-notiz a { position: relative; }
  .drawer .lese-hinweis a::after, .drawer .seiten-notiz a::after {
    content: ''; position: absolute; inset: -9px 0; }
  /* Kasten und Schalter behalten ihre Form — die Trefferflaeche waechst
     unsichtbar um sie herum, wie `.switch` im Flow. */
  .drawer .punkt-toggle { position: relative; }
  .drawer .punkt-toggle::after { content: ''; position: absolute;
    inset: -15px -14px; }
  .drawer .switch::after { content: ''; position: absolute; inset: -9px 0; }
}

/* Entscheidung 1 (Martin, 2026-07-28): der Fassungs-Reiter ist aufgeloest.
   Der Abschnitt sitzt am Ende des Dokumente-Reiters und traegt nur, was
   AELTER ist als die Fassung, die die Zeile oben nennt — sonst stuenden
   dieselben Daten zweimal auf einem Bildschirm (V20). */
.fassungs-block { margin-top: var(--raum-5); padding-top: var(--raum-4);
  border-top: 1px solid var(--line); }

/* ══ V24 · EIN Hinweis-Bauteil, drei Gewichte ═══════════════════════════
   Befund (Visuelles Design, Runden 4 und 5): fuenf Behaelterformen fuer
   EINE Aussageklasse — „hier ist ein Hinweis". Gemessen:

     .urteilsband    14px 18px   1px + 4px links   0 0 16px
     .lauf-band      12px 18px   1px               0 0 16px
     .lese-hinweis   12px 16px   1px               0 0 16px
     .fehler         10px 14px   nur 4px links     (kein margin)
     .knockout-block 12px 14px   1px + 4px links   0 0 14px

   Vier Polsterwerte, drei Kantenbehandlungen, drei Abstaende — und in
   9 von 17 Faellen stehen zwei bis vier davon uebereinander. Das ist der
   Grund, warum die Flaeche stapelt statt zu komponieren.

   Eine Geometrie, drei Gewichte:
     URTEIL   — traegt Ton und Handlung, Kante links (Urteilsband, Huerde)
     ZUSTAND  — sagt, was gerade gilt, ruhig (Lauf, Lesemodus, Fehler)
     FUSSNOTE — Nachsatz ohne Behaelter (v-hint, marker-hinweis)

   Die alten Namen bleiben gueltig und komponieren mit: dreissig
   Vorlagenstellen umzubenennen waere Risiko ohne Gewinn — die Geometrie
   steht ab hier trotzdem an genau EINER Stelle. */
/* NUR Geometrie. Die erste Fassung setzte hier auch `border-color` und
   `background` — und weil sie spaeter in der Datei steht als die
   Einzelregeln, hat sie deren Ton abgeraeumt: der Huerden-Block verlor Gold
   und Amber (Kantenkontrast 3,13:1 -> 1,29:1, gemessen von sechs Pruefern
   an zwei getrennten Seitenladungen), `.fehler` verlor global seinen
   Oberrand auf sieben fremden Flaechen. `.hinweis` steht ausserdem gar nicht
   zur Debatte: der Name gehoert seit langem der Hinweiszeile des Boards
   (design.css:949), die dadurch von 22 auf 48 px verkastet wurde.

   Wer Bauteile zusammenzieht, darf ihre Bedeutung nicht mitziehen. */
/* Und im DRAWER, nicht ueberall. `.fehler` und `.knockout-block` leben auch
   auf Admin, Konto, Registrierung, Wizard, Profil, Editor und Login — deren
   Polster in einer Drawer-Runde mitzuaendern ist genau der Radius, den diese
   Pruefung angeprangert hat. Die Vereinheitlichung gilt der Flaeche, die
   bewertet wird. */
.drawer .urteilsband, .drawer .lauf-band, .drawer .lese-hinweis,
.drawer .fehler, .drawer .knockout-block {
  margin: 0 0 var(--raum-4);
  padding: var(--raum-3) var(--raum-4);
  border-radius: var(--radius-block);
}
/* Das Urteilsband steht hier NICHT: es traegt seinen Zustand in Grund und
   Kante, und diese Regel hat dieselbe Spezifitaet wie `.urteilsband.ton-*`
   (Zeile 1165 ff.) — bei Gleichstand gewinnt die spaetere. Gemessen in
   Runde 6: in `ton-amber` (52 Aufnahmen), `ton-neutral` (8) und `ton-warn`
   (4) waren Grund UND 4-px-Linkskante identisch; den Zustand trug allein
   ein 9x9-px-Punkt, **0,1 % der Bandflaeche**.

   Vierte Kollision aus dieser einen Regel. Die dritte war der
   Huerden-Block, den ich repariert und dabei das Band uebersehen habe.
   Die Lehre steht jetzt hier: wer Geometrie vereinheitlicht, fasst keine
   Farbe an — auch nicht die neutrale. */
.drawer .lauf-band, .drawer .lese-hinweis {
  border: 1px solid var(--line); background: var(--card);
}
.drawer .urteilsband { border: 1px solid var(--line); background: var(--card); }
/* …und danach der Ton, damit er gewinnt. Die Flaeche ist gross genug, dass
   ein 9-px-Punkt sie nicht faerbt; deshalb traegt der Grund mit. */
/* Der Satz oben („die Flaeche ist gross genug, deshalb traegt der Grund
   mit") war eine Absicht, keine Messung. Nachgemessen 2026-07-29:
   `ton-amber` gegen `ton-warn` = **1,024:1**, dE76 1,81 — zwei benachbarte
   Warmtoene in fast identischer Dosis (9 % gegen 8 %). Der Zustandsgrund
   war nicht schwach, er war NICHT VORHANDEN, und getragen hat den Zustand
   weiter allein der 9-px-Punkt. Dieselbe Klasse wie die stumme Sperre:
   **Zahlen im Kommentar sind keine Zahlen im Waechter.**

   Zwei Aenderungen. Erstens traegt „dein Zug" jetzt einen eigenen Ton in
   Petrol — die Struktur-Farbe, denn was als Naechstes dran ist, IST
   Struktur. Damit bedeutet Amber wieder genau zwei Dinge (Berater-
   Vorschlaege, HR-Blick), so wie Hausregel 5 es vorsieht; vorher trug es
   elf Zustaende von „Runde 1 steht" bis „Eine hohe Huerde". Petrol gegen
   Creme ist ein KALTER Ton und damit von beiden Warmtoenen wirklich
   unterscheidbar — nicht nur nominell.

   Zweitens bekommt warn eine deutlich hoehere Dosis. Bei 8 % gegen 9 %
   war die Alarmstufe von der Akzentstufe nicht zu trennen; jetzt liegt
   sie sichtbar tiefer. `test_v29` haelt die drei Toene auseinander. */
.drawer .urteilsband.ton-warn { border-left-color: var(--warn);
  background: color-mix(in srgb, var(--warn) 16%, var(--card)); }
.drawer .urteilsband.ton-amber { border-left-color: var(--amber);
  background: color-mix(in srgb, var(--amber) 9%, var(--card)); }
.drawer .urteilsband.ton-zug { border-left-color: var(--petrol);
  background: color-mix(in srgb, var(--petrol) 7%, var(--card)); }
.drawer .urteilsband.ton-zug .urteil-ampel { background: var(--petrol); }
.drawer .urteilsband.ton-gut { border-left-color: var(--good);
  background: color-mix(in srgb, var(--good) 7%, var(--card)); }
.drawer .urteilsband.ton-neutral, .drawer .urteilsband.ton-still {
  border-left-color: var(--petrol); }
/* Gewicht 1 — Urteil: die Kante links traegt den Ton. */
.drawer .urteilsband, .drawer .knockout-block { border-left-width: 4px; }
/* Gewicht 2 — Zustand: ruhig, kein Ton, kein Rand ausser dem Rahmen. */
.drawer .lauf-band, .drawer .lese-hinweis { border-left-width: 1px; }
/* Der Fehler ist ein Zustand mit Ton, kein eigenes Bauteil. */
.drawer .fehler { border-left: 4px solid var(--warn);
  background: color-mix(in srgb, var(--warn) 7%, var(--card)); }
/* Gewicht 3 — Fussnote: gehoert zum Vorherigen, traegt deshalb keinen
   eigenen Kasten. Sie war schon so gebaut; hier steht sie nur, damit die
   drei Gewichte als System lesbar sind. */
.drawer .v-hint, .drawer .marker-hinweis, .drawer .arbeitet-hinweis {
  margin: var(--raum-2) 0 0; padding: 0; border: 0; background: none;
  font-size: var(--text-klein); color: var(--muted); }

/* ══ V24 · Ein Basis-Schriftgrad, eine Knopf-Geometrie ══════════════════
   „Die drei Knopfhoehen einer Reihe fallen auf eine" (Visuell, Runde 5).
   Gemessen im Dokumente-Reiter: `.btn` 9px-Polster, `.d-btn` 7px + eigene
   Schriftfamilie, `.v-btn` 4px + Pillenform. Drei Hoehen nebeneinander,
   ohne dass der Unterschied etwas bedeutet. */
.d-inhalt { font-size: var(--text-basis); }
/* Nur am Schreibtisch. Die Synthese der Runde 5 hat genau diese Kollision
   angekuendigt — „erst V24, dann V5, sonst werden dieselben Knoepfe zweimal
   angefasst" — und sie ist eingetreten: diese Regel steht spaeter in der
   Datei als der 44-px-Boden und hat ihn geschlagen, gemessen 39 px in fuenf
   Faellen. Ein Media-Query hebt keine Spezifitaet, nur die Quellreihenfolge
   entscheidet; also darf die Schreibtisch-Geometrie gar nicht erst bis auf
   das Telefon durchreichen. */
@media (min-width: 621px) {
  .d-inhalt .btn, .d-inhalt .v-btn { min-height: 34px; }
}
/* ══ V25 · Amber-Disziplin im Drawer ════════════════════════════════════
   Hausregel 5: Amber gehoert Baustein- und Berater-Momenten. Im Drawer
   kam es ueber den Fokusring zurueck (V17) und ueber `.d-btn:hover` —
   beide sind Struktur, kein Berater-Moment. Der Ring bleibt sichtbar, er
   wechselt nur die Farbe je Grund: Papierweiss auf dem Petrol-Kopf,
   Petrol auf der hellen Flaeche. */
.drawer .d-kopf :focus-visible { outline-color: #EDE7DC; }
.drawer .d-inhalt :focus-visible { outline-color: var(--petrol); }
/* …und die zwei Flaechen, die innerhalb dieser Behaelter einen ANDEREN Grund
   haben. Gemessen von drei Pruefern unabhaengig, mit echtem Tab-Lauf:
   Petrol-Ring auf `.gem` (selbst petrolfarben) = **1,00:1**, 90 Fundstellen
   ueber acht (Fall,Reiter)-Paare; Papierweiss im `.d-mehr-menue` (heller
   Grund) = **1,07:1**. Vorher trug der Amber-Standardring dort 3,98:1 bzw.
   2,87:1 — die Regel hat den Ring also nicht verbessert, sondern geloescht.

   Es ist dieselbe Fehlerklasse wie `.lese-hinweis a` gegen `.btn-petrol`:
   eine Farbe nach BEHAELTER gesetzt, waehrend der Behaelter Unterflaechen
   mit anderem Grund traegt. Siebtes Mal in dieser Serie — deshalb steht die
   Regel ab hier am Grund, nicht am Ort. */
.drawer .gem :focus-visible { outline-color: #EDE7DC; }
.drawer .d-mehr-menue :focus-visible { outline-color: var(--petrol); }
.d-btn:hover { border-color: rgba(237, 231, 220, .7); }

/* ══ V24 · Der Rhythmus der Spalte entsteht an EINER Stelle ═════════════
   Gemessen ueber alle 17 Faelle x 4 Reiter x 2 Breiten, nachdem der
   Waechter scharfgestellt war: **68 von 136 Spalten** brachen die eigene
   Regel. Die Werte: 4, 6, 10, 13, 14, 18, 20 px — daneben ueberall 16.
   Keiner dieser Werte bedeutet etwas; sie sind der Rest von zwanzig
   Einzelregeln, die je fuer sich plausibel waren.

   Das ist der Grund, warum Tokens allein nichts nuetzen: eine Leiter, an
   der niemand entlanggeht, ist Dekoration. Der Abstand ZWISCHEN Bloecken
   gehoert deshalb dem Behaelter, nicht den Bloecken — wer eine Ausnahme
   braucht, schreibt sie als Ausnahme hin und begruendet sie.

   Der erste Anlauf dieser Runde hat die Tokens definiert und die alten
   Werte stehen lassen; der Waechter dazu lief ueber 4 von 68 Spalten und
   blieb gruen, nachdem ein Pruefer die ganze Geometrie geloescht hatte. */
.drawer .d-inhalt > * { margin-bottom: var(--raum-4); }

.drawer .d-inhalt > *:last-child { margin-bottom: 0; }
/* Die eine erlaubte Enge: was unmittelbar zum Vorherigen gehoert. */
.drawer .d-inhalt > .seiten-notiz,
.drawer .d-inhalt > .v-hint,
.drawer .d-inhalt > .doc-tap-hint { margin-bottom: var(--raum-3); }
/* Ein oberer Rand zaehlt genauso — `.upsell-karte` trug 18 px und war der
   letzte Bruch nach dem Umbau. Der Waechter hat ihn benannt, seit er die
   Nachbarn mitmeldet („18 px zwischen pruef-klappe → upsell-karte"); vorher
   sagte er nur die Zahl und liess mich suchen. */
.drawer .d-inhalt > * { margin-top: 0; }
.drawer .d-inhalt > .upsell-karte { margin-top: var(--raum-5); }

/* Eine Knopfhoehe, auch ueber Element-Grenzen hinweg. Gemessen in f16:
   `<a class="btn">` 42 px neben `<button class="btn">` 39 px — dieselbe
   Klasse, dieselbe Polsterung, zwei Hoehen. Ursache ist die Zeilenhoehe:
   ein `<button>` erbt `normal` vom Browser, ein `<a>` erbt 1,55 vom Rumpf.
   Das ist kein Unterschied, den irgendjemand gemeint hat.

   Bewusst nur im Drawer: dieselbe Vereinheitlichung ist im ganzen Haus
   faellig, aber app-weite Aenderungen aus einer Flaechen-Runde heraus waren
   genau der Radius, den die Pruefung dieser Runde angeprangert hat. */
.drawer .btn, .drawer .v-btn, .drawer .d-btn { line-height: 1.25; }
.d-aktionen { align-items: center; }


/* W17 · Auf dem Telefon liest man Text, nicht ein 36-%-Bild ═══════════════
   Gemessen: 6,5 px Zeilenabstand, 4,5 px Glyphenband, 34,6 bis 46,2 % der
   Scrolllaenge des Reiters. Die Lesefassung steht auf schmalen Geraeten
   zuerst; das Blatt bleibt darunter, einen Tipp von der grossen Ansicht
   entfernt. Am Schreibtisch ist es umgekehrt — dort traegt das Blatt. */
.dok-lesefassung { display: none; }
@media (max-width: 620px) {
  .drawer .dok-lesefassung { display: block; margin-bottom: var(--raum-4); }
  .drawer .dok-lesefassung .dok { max-height: 46vh; overflow-y: auto; }
  .drawer .doc-sheet-gross { opacity: .96; }
}

/* Die Schriftleiter gilt auch im gerenderten Bild ════════════════════════
   Visuelles Design nennt sie zur 8,0: „13 Grade zurueck auf 8, mit einem
   Waechter auf `font-size` wie es ihn fuer Abstand schon gibt." Gemessen im
   Drawer standen **10,0 · 10,4 · 14,0 px** neben der Leiter — Reste aus
   Regeln, die je fuer sich plausibel waren (Formular-Etikett, `<small>` in
   Prozent, Flow-Uebernahmen).

   Dieselbe Lehre wie beim Abstand: eine Leiter, an der niemand entlanggeht,
   ist Dekoration. Deshalb hier, im Drawer, die drei Ausreisser auf ihre
   naechste Stufe — und ein Waechter, der es ab jetzt merkt. */
.drawer .formular label { font-size: var(--text-marke); }
.drawer small, .drawer .score-text small { font-size: var(--text-marke); }
.drawer .dok, .drawer .dok p, .drawer .dok li { font-size: var(--text-basis); }
.drawer .rueckfrage-frage { font-size: var(--text-lead); }
/* Die fuenf gemessenen Ausreisser, je auf ihre naechste Stufe. Drei davon
   sind Halbpixel — die Klasse, die Visuell schon in Runde 4 als „97
   Halbpixel-Schriftgrade, davon vier im Drawer sichtbar" gemeldet hat. */
.drawer .design-palette-name { font-size: var(--text-marke); }   /* 10   -> 11 */
.drawer .upload-btn, .drawer .foto-hinweis,
.drawer .preis-marke, .drawer .doc-tab { font-size: var(--text-klein); }  /* 11,5 · 12,5 -> 12 */
.drawer .match-liste li, .drawer .pruef-beleg, .drawer .kontakt-leer,
.drawer .punkt-erledigt, .drawer .segmented button,
.drawer .version-zeile { font-size: var(--text-basis); }         /* 13,5 -> 13 */
.drawer .design-nummer { font-size: var(--text-titel); }         /* 19   -> 20 */

/* ── E3 · Ein Primaergewicht je Ansicht ──────────────────────────────────
   Entscheidung der Komposition-Runde (2026-07-29), Sieger mit 8,0 aus drei
   Linsen: **in der Detailansicht traegt hoechstens EIN Bedienelement eine
   gefuellte Flaeche — und es ist das, das das Urteilsband nennt.**

   Gemessen vor dem Umbau (Visuell-Nachmessung, alle drei Blicke
   unabhaengig, staerkste Konvergenz der Runde): vier petrolgefuellte
   Knoepfe mit identischer Fuellung und den Hoehen 37/37/37/38 px — 2,7 %
   Spreizung —, an vier verschiedenen linken Kanten, und der breiteste
   (209 px) ist die UNWICHTIGSTE Handlung, 48 % breiter als das Primaer des
   Zustands. Mit dem geschaerften Waechter: 106 von 144 Ansichten tragen
   mehr als eine Fuellung. Quellseitig 18 `btn-petrol` in den
   Drawer-Vorlagen gegen 1 `btn-gold`.

   Die Ursache ist keine Farbe, sondern ein Besitzverhaeltnis: jede
   Teilvorlage erklaert ihr eigenes Primaer (`drawer.html`,
   `drawer_phase.html`, `drawer_kontakt.html`, `drawer_notizen.html`) —
   **niemand besitzt die Hierarchie der Ansicht.** Statt achtzehn Stellen
   nachzuziehen, entscheidet es hier eine Regel: gefuellt ist, was das Band
   nennt; alles andere ist Stufe 2.

   Stufe 2 ist nicht die duenne Kante allein — das waere ein Unterschied
   von einer Haarlinie, und eine Linse hat genau daran den Zweitplatzierten
   scheitern lassen. Sie ist Toenung PLUS volle Petrolkante PLUS
   Petrolschrift: vier unterscheidbare Materialzustaende (voll / getoent /
   Haarlinie / Textgewicht) statt zweier. Der Ton ist kein neuer Wert,
   sondern `--linie-soft`, das es seit dem Fundament gibt.

   Amber (`.btn-gold`) bleibt ausgenommen: Hausregel 5 gibt ihm den
   Baustein- und Berater-Moment, und dort zeigt das Band keinen eigenen
   Knopf. `:disabled` bleibt unberuehrt — der gesperrte Zustand hat seine
   eigene Regel, und die zu ueberschreiben waere die Runde-8-Reparatur
   rueckwaerts. */
.drawer .d-inhalt .btn-petrol:not(.urteil-tat):not(:disabled) {
  /* OPAK gemischt, nicht durchscheinend. Der erste Anlauf nahm
     `var(--linie-soft)` — rgba mit 8 % — und der Knopf bezog seinen Grund
     damit von dem, was hinter ihm lag. Auf der Gem-Flaeche (die IST petrol)
     wurde daraus Petrol auf Petrol: **1:1**, gemessen vom X2-Waechter in
     vier Faellen. Genau der W1-Defekt, den Runde 7 behoben hat, zurueck
     durch meine neue Regel — und die vierte Kollision, die aus dem Versuch
     entsteht, Geometrie oder Farbe flaechig zu vereinheitlichen.
     `color-mix` gegen die Karte macht die Stufe unabhaengig vom Untergrund. */
  background: color-mix(in srgb, var(--petrol) 8%, var(--card));
  border-color: var(--petrol);
  color: var(--petrol);
}
.drawer .d-inhalt .btn-petrol:not(.urteil-tat):not(:disabled):hover {
  background: var(--petrol);
  color: var(--paper);
}
/* Und die Gem-Flaeche behaelt ihre eigene Antwort (W1, Runde 7): dort ist
   der Grund petrol, also ist die HELLE Fuellung die leise Stufe. Ohne diese
   Zeile schlaegt meine Regel (0,5,0) die W1-Regel `.gem .btn-petrol`
   (0,2,0) und nimmt ihr genau das, wofuer sie gebaut wurde. */
.drawer .d-inhalt .gem .btn-petrol:not(.urteil-tat):not(:disabled) {
  background: #EDE7DC; border-color: #EDE7DC; color: var(--petrol);
}
.drawer .d-inhalt .gem .btn-petrol:not(.urteil-tat):not(:disabled):hover {
  background: #fff; border-color: #fff; color: var(--petrol);
}

/* ===================================================================== */
/* Bearbeitungsflaeche einer Bewerbung (Plan 2026-07-30, Task 8)          */
/*                                                                       */
/* Alles haengt unter `[data-bewerbungseditor]`. Der uebrige Drawer wird  */
/* NICHT umgestylt — die Flaeche ersetzt ihn fuer die Dauer der Arbeit    */
/* und bringt ihre eigene Ordnung mit, statt die fremde zu verbiegen.     */
/*                                                                       */
/* Kein Amber: der Editor ist weder Gem noch Berater (Hausregel 5).       */
/* Struktur ist Petrol, Fehler ist --warn, alles andere bleibt ruhig.     */
/* ===================================================================== */

.editor-flaeche {
  display: flex; flex-direction: column; gap: var(--raum-4);
  padding: var(--raum-4) var(--raum-4) 0;
  color: var(--ink);
}
.editor-kopf { display: flex; flex-direction: column; gap: var(--raum-1); }
.editor-titel {
  margin: 0; font-family: var(--display); font-size: var(--text-titel);
  font-weight: 600; color: var(--petrol);
}
/* Der Umfang-Satz ist kein Kleingedrucktes: er nimmt die Angst, eine
   Aenderung hier gaelte ueberall. Deshalb Fliesstextgroesse und eine
   Petrol-Kante, nicht 11 px grau am Fuss. */
.editor-umfang {
  margin: 0; font-size: var(--text-basis); color: var(--muted);
  border-left: 3px solid var(--petrol); padding-left: var(--raum-2);
}

/* --- Reiter ---------------------------------------------------------- */
.editor-reiter {
  display: flex; gap: var(--raum-1); flex-wrap: wrap;
  border-bottom: 1px solid var(--line);
}
.editor-reiter-knopf {
  appearance: none; background: transparent; cursor: pointer;
  border: 1px solid transparent; border-bottom: none;
  border-radius: var(--radius-knopf) var(--radius-knopf) 0 0;
  padding: var(--raum-2) var(--raum-3);
  font-family: var(--display); font-size: var(--text-bedien);
  color: var(--muted);
}
.editor-reiter-knopf[aria-selected="true"] {
  background: var(--petrol); border-color: var(--petrol);
  color: var(--paper); font-weight: 600;
}

/* --- Zweispaltig am Schreibtisch, Formular zuerst am Telefon ---------- */
/* Die Vorschau ist die Kontrolle, nicht der Gegenstand: auf schmalen
   Geraeten steht sie deshalb UNTER dem Formular. Ein 794-px-Blatt neben
   einem Feld auf 390 px waere beides unbrauchbar. */
.editor-raster { display: grid; gap: var(--raum-4); align-items: start; }
@media (min-width: 900px) {
  .editor-raster { grid-template-columns: minmax(0, 1fr) minmax(0, 22rem); }
  .editor-vorschau { position: sticky; top: var(--raum-4); }
}
.editor-formular {
  display: flex; flex-direction: column; gap: var(--raum-5); min-width: 0;
}
.editor-vorschau {
  display: flex; flex-direction: column; gap: var(--raum-2); min-width: 0;
}
.editor-blatt {
  width: 100%; aspect-ratio: 1 / 1.414; border: 1px solid var(--line);
  border-radius: var(--radius-feld); background: #fff;
  box-shadow: var(--schatten-blatt);
}

/* --- Gruppen und Felder ---------------------------------------------- */
.editor-panel { display: flex; flex-direction: column; gap: var(--raum-5); }
.editor-gruppe {
  display: flex; flex-direction: column; gap: var(--raum-3);
  margin: 0; padding: var(--raum-4);
  border: 1px solid var(--line); border-radius: var(--radius-karte);
  background: var(--card);
}
.editor-gruppe-titel {
  margin: 0; padding: 0 var(--raum-2);
  font-family: var(--display); font-size: var(--text-marke);
  letter-spacing: .06em; text-transform: uppercase; color: var(--petrol);
}
.editor-feld { display: flex; flex-direction: column; gap: var(--raum-1); }
.editor-etikett {
  margin: 0; font-family: var(--display); font-size: var(--text-klein);
  color: var(--muted);
}
.editor-etikett-klein {
  font-family: var(--display); font-size: var(--text-marke);
  color: var(--muted);
}
.editor-notiz {
  font-size: var(--text-klein); color: var(--muted); line-height: 1.45;
}
.editor-lesewert {
  display: flex; flex-direction: column; gap: var(--raum-1); margin: 0;
  font-size: var(--text-basis);
}
/* Das wartende Bild (Task 9/10). Die Kante ist bewusst gross genug, um ein
   Gesicht zu beurteilen, und klein genug, dass sie die Feldgruppe nicht
   sprengt: der Upload kommt mit bis zu 600 px zurueck, und ohne Deckel
   stuende hier ein Portrait ueber der halben Spalte. */
.editor-foto-vorschau {
  width: 96px; height: 96px; object-fit: cover;
  border: 1px solid var(--line); border-radius: var(--radius-feld);
  background: var(--g-weiss);
}
/* Der Sprachwechsel steht abgesetzt unter der Sprach-Auskunft: er ist die
   einzige Handlung dieser Gruppe, die etwas KOSTET. Kein Amber (Hausregel 5
   — Geld ist kein Baustein- und kein Berater-Moment). */
.editor-sprachwechsel {
  display: flex; flex-direction: column; gap: var(--raum-2);
  padding-top: var(--raum-2); border-top: 1px solid var(--line);
}
.editor-sprachwechsel form {
  display: flex; flex-wrap: wrap; gap: var(--raum-2); align-items: center;
}

.editor-flaeche input[type="text"],
.editor-flaeche input[type="tel"],
.editor-flaeche input[type="url"],
.editor-flaeche input[type="number"],
.editor-flaeche select,
.editor-flaeche textarea {
  /* MERGE 2026-08-03: hier standen zusaetzlich `font: inherit`,
     `font-size`, `border`, `color`, `background` und `border-radius`. Der
     R12-Waechter aus `fix/r7-dringend` hat sie gefangen (Ratsche 25 → 28) —
     zu Recht, und der Befund ist nicht kosmetisch: (1) die Flaeche band
     ihre Kante an `--line` statt an `--feld-linie`, also an den alten
     1,30:1-Wert statt an die 3,04:1 aus Runde 3; (2) `font-size` mit
     Spezifitaet (0,1,1) schlug die iOS-16px-Grenze nicht, aber `font:
     inherit` setzte die Groesse ohnehin ein zweites Mal. Der Feld-Boden
     (`input:where(…), textarea, select`) liefert alle sechs Werte bereits.
     Bleiben durfte nur, was die Flaeche wirklich eigen hat: volle Breite
     und ihr eigenes Innenmass. */
  width: 100%; box-sizing: border-box;
  padding: var(--raum-2);
}
.editor-flaeche textarea { resize: vertical; line-height: 1.5; }
/* Fokus in Petrol, nicht in Amber: die Akzentfarbe markiert den Moment, in
   dem die KI etwas findet — nicht das Feld, in dem gerade jemand tippt.
   Der Ring wird NICHT abgeschaltet, nur eingefaerbt (test_fokus_sichtbar). */
.editor-flaeche :focus-visible {
  outline: 2px solid var(--petrol); outline-offset: 2px;
}

/* --- Fehler: sichtbare Kante UND Satz --------------------------------- */
/* Nur Farbe waere zu wenig (und fuer Rot-Gruen-Blinde gar nichts): der
   Platz traegt den Satz, das Feld traegt die Kante. */
.editor-fehler {
  display: none; font-size: var(--text-klein); color: var(--warn);
}
.editor-fehler:not(:empty) { display: block; }
.editor-flaeche [aria-invalid="true"] {
  border-color: var(--warn); background: var(--warn-soft);
}

/* --- Schalter --------------------------------------------------------- */
.editor-schalter {
  display: flex; align-items: center; gap: var(--raum-2);
  appearance: none; background: transparent; border: none; cursor: pointer;
  padding: var(--raum-1) 0; text-align: left;
  font-family: var(--display); font-size: var(--text-klein);
  color: var(--ink);
}
.editor-schalter-knopf {
  flex: none; width: 34px; height: 20px;
  border-radius: var(--radius-pille); background: var(--line);
  position: relative; transition: background .15s ease;
}
.editor-schalter-knopf::after {
  content: ""; position: absolute; top: 2px; left: 2px;
  width: 16px; height: 16px; border-radius: var(--radius-voll);
  background: var(--g-weiss); box-shadow: var(--schatten-schalter);
  transition: transform .15s ease;
}
.editor-schalter[aria-checked="true"] .editor-schalter-knopf {
  background: var(--petrol);
}
.editor-schalter[aria-checked="true"] .editor-schalter-knopf::after {
  transform: translateX(14px);
}

/* --- Listen ----------------------------------------------------------- */
.editor-liste { display: flex; flex-direction: column; gap: var(--raum-2); }
.editor-zeilen {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-direction: column; gap: var(--raum-2);
}
.editor-zeile { display: flex; align-items: center; gap: var(--raum-2); }
.editor-zeile-breit { flex-wrap: wrap; align-items: flex-end; }
.editor-unterfeld {
  display: flex; flex-direction: column; gap: var(--raum-1);
  flex: 1 1 8rem; min-width: 0;
}
.editor-zeile-leer {
  font-size: var(--text-klein); color: var(--muted); list-style: none;
}
.editor-zeilen-knoepfe { display: flex; gap: var(--raum-1); flex: none; }
/* 30 px hoch, damit der Radius (10 px) unter der Haelfte bleibt — sonst
   waere aus der Rolle „Knopf" eine Pille geworden
   (test_keine_rolle_ist_groesser_als_ihr_bauteil). */
.editor-zeilen-knopf {
  width: 30px; height: 30px; flex: none; cursor: pointer;
  background: var(--g-weiss); color: var(--petrol);
  border: 1px solid var(--line); border-radius: var(--radius-knopf);
  font-size: var(--text-bedien); line-height: 1;
}
.editor-zeilen-knopf:hover { background: var(--ok-wahl); }
.editor-zeile-neu {
  align-self: flex-start; cursor: pointer;
  background: transparent; border: 1px dashed var(--line);
  border-radius: var(--radius-knopf); padding: var(--raum-1) var(--raum-3);
  font-family: var(--display); font-size: var(--text-klein);
  color: var(--petrol);
}
.editor-kaestchen {
  display: flex; align-items: center; gap: var(--raum-2);
  font-size: var(--text-basis);
}

/* --- Dokumenttext ----------------------------------------------------- */
.editor-bloecke { display: flex; flex-direction: column; gap: var(--raum-3); }
.editor-block {
  display: flex; flex-direction: column; gap: var(--raum-1);
  padding-left: var(--raum-3); border-left: 2px solid var(--line);
}
.editor-blocktitel {
  font-family: var(--display); font-weight: 600; color: var(--petrol);
}

/* --- Systembewertung: neutral, erkennbar unbedienbar ------------------ */
/* Kein Feld, keine Kante, kein Knopf — die Flaeche selbst sagt, dass hier
   nur gelesen wird. Eine Note, in die man hineinschreiben kann, ist keine
   Note mehr. */
.editor-system {
  display: flex; flex-direction: column; gap: var(--raum-2);
  padding: var(--raum-4); background: var(--paper);
  border: 1px dashed var(--line); border-radius: var(--radius-karte);
}
.editor-system-marke {
  margin: 0; font-family: var(--display); font-size: var(--text-marke);
  letter-spacing: .06em; text-transform: uppercase; color: var(--muted);
}
.editor-messwerte {
  display: flex; flex-wrap: wrap; gap: var(--raum-4); margin: 0;
}
.editor-messwert { display: flex; flex-direction: column; gap: var(--raum-1); }
.editor-messwert dt {
  font-family: var(--display); font-size: var(--text-marke);
  color: var(--muted);
}
.editor-messwert dd {
  margin: 0; font-size: var(--text-lead); font-weight: 600;
  color: var(--petrol);
}

/* --- Klebende Handlungsleiste ---------------------------------------- */
/* Speichern darf von keiner Feldgruppe abhaengen: neun Gruppen weit nach
   unten zu scrollen, um zu sichern, ist der schnellste Weg zu verlorener
   Arbeit. `safe-area-inset-bottom` haelt sie ueber der iOS-Homeleiste. */
.editor-leiste {
  position: sticky; bottom: 0; z-index: 2;
  display: flex; align-items: center; gap: var(--raum-3); flex-wrap: wrap;
  margin: 0 calc(-1 * var(--raum-4));
  padding: var(--raum-3) var(--raum-4);
  padding-bottom: calc(var(--raum-3) + env(safe-area-inset-bottom, 0px));
  background: var(--card); border-top: 1px solid var(--line);
}
.editor-status {
  margin: 0; flex: 1 1 14rem; min-width: 0;
  font-size: var(--text-klein); color: var(--muted);
}
/* Waehrend gespeichert wird, sieht der Knopf unbedienbar aus — bedient
   wird er trotzdem nicht (`F.laeuft` sperrt). Bewusst `aria-disabled` und
   nicht `disabled`: ein echtes `disabled` nimmt dem Knopf den Fokus und
   macht ihn fuer Hilfstechnik unsichtbar, mitten in der Handlung. */
.editor-flaeche .btn[aria-disabled="true"] {
  opacity: .6; cursor: progress;
}
/* Solange etwas offen ist, sagt es die Leiste auch farblich — der Satz
   allein steht neben zwei Knoepfen und wird ueberlesen. */
[data-bewerbungseditor][data-dirty="true"] .editor-status { color: var(--ink); }
[data-bewerbungseditor][data-dirty="true"] .editor-leiste {
  border-top-color: var(--petrol);
}

/* --- Versionskonflikt: zwei Wege, beide benannt ----------------------- */
/* Klebt unter der Handlungsleiste, weil er zu ihr gehoert: hier ist gerade
   ein Speichern gescheitert, und die Entscheidung darueber gehoert an den
   Ort, an dem sie ausgeloest wurde — nicht in ein Modal, das die Flaeche
   verdeckt, auf die sich die Entscheidung bezieht. */
.editor-konflikt {
  position: sticky; bottom: 0; z-index: 2;
  display: flex; flex-direction: column; gap: var(--raum-2);
  margin: 0 calc(-1 * var(--raum-4));
  padding: var(--raum-3) var(--raum-4);
  padding-bottom: calc(var(--raum-3) + env(safe-area-inset-bottom, 0px));
  background: var(--warn-soft); border-top: 2px solid var(--warn);
}
.editor-konflikt[hidden] { display: none; }
.editor-konflikt-satz { margin: 0; font-size: var(--text-basis); }
.editor-konflikt-wege {
  display: flex; flex-wrap: wrap; gap: var(--raum-2);
}

@media (prefers-reduced-motion: reduce) {
  .editor-schalter-knopf,
  .editor-schalter-knopf::after { transition: none; }
}