/* Inter selbst gehostet (#131) — Latin-Subset mit Umlauten, statische Schnitte,
   ausgeliefert über app.ts-Routen (Icon-Muster). 400/600 sind im HTML vorgeladen. */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/inter-400.woff2') format('woff2');
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/fonts/inter-500.woff2') format('woff2');
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/fonts/inter-600.woff2') format('woff2');
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/fonts/inter-700.woff2') format('woff2');
}

/* =====================================================================
   prama Design-Token (#131) — Variante A „Vibrant", eingefrorener Stand
   der Sign-off-Schleife (previews/VERDIKTE.md). Die Verdikte sind als
   DIE Werte eingebacken: Dichte „Mittel", Akzent „Gezügelt", Light Mode.
   Quelle: previews/variant-a/schale-preview.html + variant-a.md.
   ===================================================================== */
:root {
  color-scheme: light;
  font-family: var(--schrift-familie);
  line-height: var(--zeile-basis);

  /* ── Schrift ── */
  --schrift-familie: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --gewicht-normal: 400;
  --gewicht-halbfett: 600;
  --gewicht-titel: 700;
  --spation-titel: -0.02em;
  --spation-etikett: 0.06em;
  --zeile-eng: 1.25;
  --zeile-mittel: 1.35;
  --zeile-basis: 1.5;
  --schrift-xs: 0.75rem; /* 12px — Etiketten, Badges, Zeitstempel */
  --schrift-s: 0.8125rem; /* 13px — Meta, Chips, leise Aktionen */
  --schrift-m: 0.9375rem; /* 15px — Kartentitel, Bedienelemente */
  --schrift-basis: 1rem; /* 16px — Fließtext, Mikro-Beschriftung */
  --schrift-xl: 1.25rem; /* 20px — Wortmarke, Detail-/Dialogtitel */
  --schrift-xxl: 1.5rem; /* 24px — Seitentitel */

  /* ── Raum (4er-Raster) ── */
  --raum-0: 0.25rem;
  --raum-1: 0.5rem;
  --raum-2: 0.75rem;
  --raum-3: 1rem;
  --raum-4: 1.25rem;
  --raum-5: 1.5rem;
  --raum-6: 2rem;
  --raum-7: 3rem;

  /* ── Rhythmus der Abschnitte (#493): drei Abstände, sonst keine ── */
  --rhythmus-kopf: var(--raum-2); /* Überschrift → ihr erster Inhalt */
  --rhythmus-gruppe: var(--raum-4); /* Ende einer Gruppe → nächstes Etikett */
  --rhythmus-block: var(--raum-6); /* Ende eines Blocks (oder Seitentitel) → nächster Block-Titel */

  /* ── Radien ── */
  --radius-karte: 16px;
  --radius-knopf: 12px;
  --radius-eingabe: 8px;
  --radius-pille: 999px;

  /* ── Maße ── */
  --hoehe-bedienung: 2.75rem; /* 44px Mindest-Touchziel */
  --strich: 1px;
  --strich-zustand: 3px; /* linke Zustands-Kante der Zubringer-Karte */
  --strich-fokus: 3px;
  --fokus-abstand: 2px;
  --punkt: 0.5rem; /* Dringend-Marke */
  --punkt-versatz: 0.375rem;
  --symbol-xs: 0.75rem;
  --symbol-s: 1.125rem;
  --mikro-groesse: 10.5rem; /* Held-Mikrofon 168px */
  --mikro-symbol: 2.25rem;
  --puls-weite: 1.75rem;
  --schub: 2px;
  --leiste-breite: 15rem;
  --rail-breite: 4.25rem; /* Symbol-Rail: die Gestalt der Leiste am Praxis-Tablet */
  --spur-min: 20rem; /* EINE Mindestspur für alle Karten-Raster einer Fläche (umbruchfähig) */
  --inhalt-schmal: 44rem;
  --inhalt-breit: 76rem;
  --inhalt-mittel: 60rem; /* Lesebreite der Modul-Fenster ab 1024px (Modul 2, #155) */
  --dialog-breite: 26rem;
  --modul-fenster-breite: 58rem; /* Doku-Overlay: min(58rem, --fenster-breite-max) */
  --einstellungen-breite: 52rem; /* Lesebreite der Verwaltungs-Karten */
  --index-breite: 11rem; /* Verwaltungs-Index im Fenster */
  --index-eintrag-hoehe: 2.25rem; /* 36px sichtbar, 44px effektiv via ::after */
  --feld-breite: 16rem; /* Eingabebreite in Settings-Zeilen */
  --fenster-breite: 67.5rem; /* Verwaltungs-Fenster: 1080px … */
  --fenster-breite-max: 94vw; /* … bzw. 94vw */
  --fenster-hoehe: 88vh; /* Fensterhöhe (intern scrollend) */
  --textfeld-hoehe: 4.5rem;
  --aufnahme-freiraum: 13rem; /* Ergänzung: Platzbedarf des Aufnahme-Panels (#125) — im Preview nicht vorhanden */
  --zahl-min: 1.75rem;
  --cta-breite: 20rem;
  --held-hoehe: 55vh;
  /* Held-Säule des zweispaltigen Behandler-Startbilds (#200): so breit, dass die
     Zubringer-Spalte auf der vollen Arbeitsfläche genau --inhalt-schmal trägt. */
  --held-saeule: 24rem;
  --schein-groesse: 30rem;

  /* ── Dichte „Mittel" (Runde-2-Verdikt, fest eingebacken) ── */
  --dichte-polster-mittel: 0.875rem; /* 14px Karten-Innenraum */

  /* ── Marke (Orange) ── */
  --marke: #EF7B33; /* Leuchtakzent: Puls, Punkte, Schein — nur Nicht-Text */
  --marke-tief: #C2410C; /* Füllflächen + Fokusring — Weiß darauf 5,2:1 */
  --marke-tiefer: #9E3509; /* Hover auf Füllflächen — Weiß darauf 7,1:1 */
  --marke-text: #9A3412; /* Orange als Textfarbe — 6,4:1 auf --marke-flaeche */
  --marke-flaeche: #FDEEE2; /* getönte Orange-Fläche */
  --marke-puls: rgba(239, 123, 51, 0.45);
  --marke-puls-aus: rgba(239, 123, 51, 0);
  --mikro-verlauf: linear-gradient(180deg, #CC470C 0%, #A93A08 100%); /* beide Enden ≥4,5:1 zu Weiß */
  --held-schein: radial-gradient(closest-side, #FDEEE2 0%, rgba(253, 238, 226, 0) 100%);

  /* ── Dringend (Rot — sticht die Marke aus) ── */
  --dringend: #AF1D25; /* Weiß darauf 6,9:1; auf --grund 6,1:1 */
  --dringend-flaeche: #FBEDED;
  --dringend-linie: #F2D2D1;

  /* ── Neutral (warme Grautöne) ── */
  --grund: #FFFAF6; /* Seitengrund, warmes Off-White */
  --flaeche: #FFFFFF; /* Karten, Eingaben, Leiste */
  --sand: #F6EDE4; /* stille Füllung: Status-Badge, Ghost-Hover */
  --linie: #F0E5D9; /* Kartenränder, Trennlinien */
  --linie-stark: #DCCBBA; /* Eingabe-/Chipränder, neutraler Punkt */
  --tinte: #201A15; /* Primärtext */
  --tinte-gedaempft: #6B6259; /* Sekundärtext — ≥5,2:1 auf allen hellen Flächen */
  --schrift-hell: #FFFFFF;
  --kulisse: rgba(32, 26, 21, 0.45);
  --kulisse-fenster: rgba(32, 26, 21, 0.35); /* Fenster-Backdrop (mit Weichzeichnung) */
  --weichzeichnung: 8px; /* backdrop-filter des Fenster-Backdrops */

  /* ── Schatten (warm getönt, nie kaltes Grau) ── */
  --schatten-karte: 0 1px 2px rgba(63, 34, 10, 0.04), 0 4px 12px rgba(63, 34, 10, 0.06);
  --schatten-schwebend: 0 2px 6px rgba(63, 34, 10, 0.05), 0 12px 28px rgba(63, 34, 10, 0.1);
  --schatten-dialog: 0 8px 20px rgba(63, 34, 10, 0.1), 0 28px 72px rgba(63, 34, 10, 0.28);
  --schatten-mikro: 0 6px 14px rgba(194, 65, 12, 0.22), 0 18px 44px rgba(239, 123, 51, 0.35);
  --schatten-mikro-hover: 0 8px 18px rgba(194, 65, 12, 0.26), 0 22px 52px rgba(239, 123, 51, 0.45);
  --schatten-fenster: 0 12px 32px rgba(63, 34, 10, 0.14), 0 32px 96px rgba(63, 34, 10, 0.3);

  /* ── Fokus ── */
  --fokus: var(--marke-tief);

  /* ── Bewegung ── */
  --tempo: 150ms;
  --tempo-leiste: 200ms; /* Leisten-Pin: Aus-/Einfahren, Schweben */
  --puls-dauer: 2.6s;

  /* ── Ebenen ── */
  --ebene-kopf: 10;
  --ebene-leiste: 40;
  --ebene-fenster: 800; /* Verwaltungs-Fenster */
  --ebene-dialog: 900;
  --ebene-sperre: 1000;

  /* ── Symbole (Masken; Farbe kommt aus dem jeweiligen Token) ── */
  --symbol-mikrofon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='9' y='2' width='6' height='12' rx='3'/%3E%3Cpath d='M5 11a7 7 0 0 0 14 0'/%3E%3Cpath d='M12 18v4'/%3E%3C/svg%3E");
  --symbol-haken: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12.5l5 5L20 6.5'/%3E%3C/svg%3E");
  --symbol-pfeil: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h13'/%3E%3Cpath d='M12 5l7 7-7 7'/%3E%3C/svg%3E");
  /* Ergänzung zum Sheet: Personen-Symbol für den Ecke-Chip — er trägt neben dem
     Symbol den sichtbaren Namen und die Rolle (kein Initialen-Datenfluss, #175). */
  /* Trichter des Filter-Knopfs der Aufgaben-Fläche (#482). */
  --symbol-filter: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 5h18l-7 8.5V19l-4 2v-7.5z'/%3E%3C/svg%3E");
  --symbol-person: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='8' r='4'/%3E%3Cpath d='M4 21c0-4 3.6-6.5 8-6.5s8 2.5 8 6.5'/%3E%3C/svg%3E");
  /* Die Leiste trägt Symbole, seit sie sich am Praxis-Tablet auf eine Rail
     zusammenzieht: dort ist das Symbol die Marke, das Etikett die Beschriftung. */
  --symbol-haus: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 11l8-7 8 7'/%3E%3Cpath d='M6 9.5V20h12V9.5'/%3E%3C/svg%3E");
  --symbol-liste: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 6h11M9 12h11M9 18h11'/%3E%3Ccircle cx='4.5' cy='6' r='1'/%3E%3Ccircle cx='4.5' cy='12' r='1'/%3E%3Ccircle cx='4.5' cy='18' r='1'/%3E%3C/svg%3E");
  --symbol-eingang: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 13l3-8h12l3 8v6H3z'/%3E%3Cpath d='M3 13h6a3 3 0 0 0 6 0h6'/%3E%3C/svg%3E");
  --symbol-blick: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 12s3.5-6.5 10-6.5S22 12 22 12s-3.5 6.5-10 6.5S2 12 2 12z'/%3E%3Ccircle cx='12' cy='12' r='2.5'/%3E%3C/svg%3E");
  --symbol-doku: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 2h9l4 4v16H6z'/%3E%3Cpath d='M14 2v5h5'/%3E%3Cpath d='M9 13h7M9 17h7'/%3E%3C/svg%3E");
  --symbol-zahnrad: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3Cpath d='M12 2v3M12 19v3M2 12h3M19 12h3M4.9 4.9l2.1 2.1M17 17l2.1 2.1M19.1 4.9L17 7M7 17l-2.1 2.1'/%3E%3C/svg%3E");
  --symbol-glocke: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9a6 6 0 0 1 12 0c0 5 2 6.5 2 6.5H4S6 14 6 9z'/%3E%3Cpath d='M10 19a2 2 0 0 0 4 0'/%3E%3C/svg%3E");
  --symbol-menue: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M4 7h16M4 12h16M4 17h16'/%3E%3C/svg%3E");
  --symbol-einklappen: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 4v16'/%3E%3Cpath d='M20 12H9'/%3E%3Cpath d='M13 7l-4 5 4 5'/%3E%3C/svg%3E");
}

/* =====================================================================
   Betreiber-Konsole (ADR-0019) — eigene, schlanke Fläche OHNE Praxis-Kontext.

   Die Token stehen NICHT hier: `src/app.ts` stellt diesem Stylesheet den
   `:root`-Block aus `schale.css` voran (DESIGN.md §2 nennt ihn den einzigen
   Token-Vertrag). Ein zweiter Satz Werte würde still auseinanderlaufen; hier
   stehen darum nur die Regeln, die es in der Schale nicht gibt.
   ===================================================================== */

*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
  max-width: var(--inhalt-breit);
  margin: 0 auto;
  padding: var(--raum-4) var(--raum-4) var(--raum-7);
  font-family: var(--schrift-familie);
  font-size: var(--schrift-basis);
  line-height: var(--zeile-basis);
  color: var(--tinte);
  background: var(--grund);
  -webkit-font-smoothing: antialiased;
}

h1,
h2,
h3,
h4,
h5 {
  font-weight: var(--gewicht-titel);
  letter-spacing: var(--spation-titel);
  line-height: var(--zeile-eng);
  color: var(--tinte);
}

/* ── Kopfzeile ─────────────────────────────────────────────────────── */

#konsoleKopf {
  display: flex;
  flex-wrap: wrap;
  gap: var(--raum-2);
  align-items: baseline;
  justify-content: space-between;
  padding-bottom: var(--raum-3);
  border-bottom: var(--strich) solid var(--linie);
}

#konsoleKopf h1 {
  margin: 0;
  font-size: var(--schrift-xl);
}

/* Die Konsole sagt an der Wortmarke, dass sie nicht die Praxis-Schale ist. */
#konsoleKopf h1 span {
  display: inline-block;
  margin-left: var(--raum-1);
  padding: 0 var(--raum-1);
  font-size: var(--schrift-xs);
  font-weight: var(--gewicht-halbfett);
  letter-spacing: var(--spation-etikett);
  text-transform: uppercase;
  color: var(--marke-text);
  background: var(--marke-flaeche);
  border-radius: var(--radius-pille);
}

#konsoleKonto {
  display: flex;
  gap: var(--raum-2);
  align-items: center;
  font-size: var(--schrift-s);
  color: var(--tinte-gedaempft);
}

#konsoleBetriebslinks {
  display: flex;
  flex-wrap: wrap;
  gap: var(--raum-2) var(--raum-3);
  margin-top: var(--raum-5);
  padding-top: var(--raum-2);
  border-top: var(--strich) solid var(--linie);
  font-size: var(--schrift-xs);
  color: var(--tinte-gedaempft);
}

#konsoleBetriebslinks a {
  color: inherit;
}

#konsoleWarnung {
  margin: var(--raum-3) 0 0;
  padding: var(--raum-2) var(--raum-3);
  font-size: var(--schrift-s);
  color: var(--dringend);
  background: var(--dringend-flaeche);
  border: var(--strich) solid var(--dringend-linie);
  border-radius: var(--radius-eingabe);
}

/* ── Navigation ────────────────────────────────────────────────────── */

#konsoleNav {
  display: flex;
  flex-wrap: wrap;
  gap: var(--raum-1);
  margin: var(--raum-4) 0 var(--raum-5);
}

#konsoleNav button[aria-current='true'] {
  color: var(--schrift-hell);
  background: var(--marke-tief);
  border-color: var(--marke-tief);
}

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

/* Die Konsole schaltet ihre vier Flächen über `hidden` um. Das Attribut ist nur
   eine Regel der Browser-Vorgabe und fällt gegen JEDE eigene `display`-Regel —
   ein `main { display: block }` genügte, und alle vier Flächen standen
   gleichzeitig da. Der Riegel steht darum hier, nicht im Vertrauen darauf. */
[hidden] {
  display: none !important;
}

/* Die drei Türen (Anmeldung, Einrichtung, Wiederherstellung) sind Konto-Flächen, keine
   Arbeitsflächen: eine schmale, mittige Spalte. Über die volle Breite gezogen sieht eine
   Anmeldung mit einem Knopf aus, als fehlte der halbe Bildschirm. */
.konsoleTuer {
  max-width: 34rem;
  margin: var(--raum-5) auto 0;
}

.konsoleKarte {
  margin: 0 0 var(--raum-5);
  padding: var(--raum-4);
  background: var(--flaeche);
  border: var(--strich) solid var(--linie);
  border-radius: var(--radius-karte);
  box-shadow: var(--schatten-karte);
}

/* Karten-Kopf mit Handgriff rechts: die Überschrift sagt, was in der Karte steht, der
   Griff daneben gehört zur ganzen Karte — nicht ans Ende ihrer Liste. */
.konsoleKartenKopf {
  display: flex;
  flex-wrap: wrap;
  gap: var(--raum-2);
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: var(--raum-2);
}

.konsoleKartenKopf h3 {
  margin: 0;
}

.konsoleKartenKopfRechts {
  display: flex;
  gap: var(--raum-2);
  align-items: center;
}

.konsoleKartenKopf button {
  min-height: auto;
  padding: var(--raum-0) var(--raum-2);
  font-size: var(--schrift-xs);
}

/* Wie viele Zeilen stehen da? Eine Liste ohne Zahl zwingt zum Zählen. */
.konsoleZaehler {
  font-size: var(--schrift-xs);
  font-variant-numeric: tabular-nums;
  color: var(--tinte-gedaempft);
}

.konsoleKarte > section {
  margin-top: var(--raum-4);
  padding-top: var(--raum-4);
  border-top: var(--strich) solid var(--linie);
}

.konsoleBereich > h2,
main > .konsoleKarte > h2 {
  margin: 0 0 var(--raum-2);
  font-size: var(--schrift-xxl);
}

h3 {
  margin: 0 0 var(--raum-2);
  font-size: var(--schrift-xl);
}

h4 {
  margin: var(--raum-4) 0 var(--raum-1);
  font-size: var(--schrift-m);
}

h5 {
  margin: var(--raum-3) 0 var(--raum-0);
  font-size: var(--schrift-s);
  letter-spacing: var(--spation-etikett);
  text-transform: uppercase;
  color: var(--tinte-gedaempft);
}

p {
  margin: 0 0 var(--raum-2);
  font-size: var(--schrift-s);
  color: var(--tinte-gedaempft);
}

/* ── Bedienelemente ────────────────────────────────────────────────── */

label {
  display: block;
  margin: var(--raum-2) 0;
  font-size: var(--schrift-s);
  font-weight: var(--gewicht-halbfett);
  color: var(--tinte);
}

input,
select,
textarea {
  display: block;
  width: 100%;
  max-width: var(--inhalt-schmal);
  margin-top: var(--raum-0);
  padding: var(--raum-1) var(--raum-2);
  /* 16px: kleinere Formfelder lassen iOS-Safari beim Fokus hineinzoomen. */
  font: inherit;
  font-size: var(--schrift-basis);
  font-weight: var(--gewicht-normal);
  color: var(--tinte);
  background: var(--flaeche);
  border: var(--strich) solid var(--linie-stark);
  border-radius: var(--radius-eingabe);
}

textarea {
  min-height: var(--textfeld-hoehe);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: var(--schrift-s);
  resize: vertical;
}

/* Monospace ist für das, was ein Rechner liest — Prompts, Begriffslisten, JSON. Ein
   Satz an Menschen (der Grund eines Zugangs) gehört in die Schrift der Fläche. */
textarea.konsoleFliesstext {
  font-family: var(--schrift-familie);
  font-size: var(--schrift-basis);
}

/* Ein Kästchen ist kein Textfeld: ohne eigene Breite zieht die Feldregel oben es über
   die halbe Karte und schiebt seine Beschriftung in die nächste Zeile. */
.konsoleHaken {
  display: flex;
  gap: var(--raum-2);
  align-items: baseline;
}

.konsoleHaken input[type='checkbox'] {
  flex: 0 0 auto;
  width: auto;
  max-width: none;
  margin: 0;
}

/* Zahl und Einheit gehören in eine Zeile — »Tage« unter dem Feld liest sich wie eine
   eigene Beschriftung. Die Feldbreite sagt zugleich, wie lang die Eingabe wird. */
.konsoleFeldMitEinheit > span {
  display: flex;
  gap: var(--raum-1);
  align-items: baseline;
  margin-top: var(--raum-0);
  font-weight: var(--gewicht-normal);
  color: var(--tinte-gedaempft);
}

.konsoleFeldMitEinheit input {
  width: 6rem;
  margin-top: 0;
  font-variant-numeric: tabular-nums;
}

/* Die Breite eines Feldes ist eine Ansage über seinen Inhalt: ein Modellname ist ein
   Bezeichner, kein Absatz. */
.konsoleFeldKurz {
  max-width: 24rem;
}

/* Ein sechsstelliger Code in einem 44rem breiten Feld sieht aus, als fehlte etwas. */
.konsoleCodeFeld {
  /* Sechs Ziffern plus Sperrsatz: knapper, und die letzte Ziffer wird abgeschnitten. */
  width: 11ch;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.2em;
}

.konsolePflicht {
  margin-left: var(--raum-1);
  padding: 0 var(--raum-1);
  font-size: var(--schrift-xs);
  font-weight: var(--gewicht-halbfett);
  letter-spacing: var(--spation-etikett);
  text-transform: uppercase;
  color: var(--tinte-gedaempft);
  background: var(--sand);
  border-radius: var(--radius-pille);
}

button {
  min-height: var(--hoehe-bedienung);
  padding: 0 var(--raum-3);
  font: inherit;
  font-size: var(--schrift-m);
  font-weight: var(--gewicht-halbfett);
  color: var(--tinte);
  background: var(--flaeche);
  border: var(--strich) solid var(--linie-stark);
  border-radius: var(--radius-knopf);
  cursor: pointer;
}

button:hover {
  background: var(--sand);
}

/* Dieselben Stufen-Namen wie in der Schale (DESIGN.md §3 „Knöpfe", #464) — die Konsole
   erbt nur den Token-Block, darum stehen die Werte hier; die Angleichung ist Paket H von #463. */
button.knopf--primaer {
  color: var(--schrift-hell);
  background: var(--marke-tief);
  border-color: var(--marke-tief);
}

button.knopf--primaer:hover {
  background: var(--marke-tiefer);
}

button:disabled {
  cursor: not-allowed;
  opacity: 0.55;
}

/* Ein Rücksetzen auf die Vorgabe ist kein gleichrangiger dritter Weg neben den beiden
   Speicher-Knöpfen — es steht daneben und tritt einen Schritt zurück. */
button.knopf--leise {
  color: var(--tinte-gedaempft);
  background: none;
  border-color: transparent;
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

button.knopf--leise:hover {
  color: var(--tinte);
  background: var(--sand);
}

/* Armierte Zwei-Klick-Knöpfe wie in der Schale (`schale.css`): der scharfe Zustand
   alarmiert im Dringend-Rot — der eine konkurrenzlose Alarm-Kanal des Systems. */
button[data-armiert='true'],
button[data-armiert='true']:hover {
  color: var(--schrift-hell);
  background: var(--dringend);
  border-color: var(--dringend);
}

:focus-visible {
  outline: var(--strich-fokus) solid var(--fokus);
  outline-offset: var(--fokus-abstand);
}

/* ── Betriebs-Übersicht ────────────────────────────────────────────────
   Vier Zustände, KEIN neues Farbtoken: die Palette ist warm und erdig, und
   Vollrot bleibt der konkurrenzlose Alarm-Kanal (DESIGN.md §2, Dominanz-Regel).
   Unterschieden wird darum über Fläche UND Form UND Wort — nie über Farbe
   allein: `ok` trägt den Haken auf stiller Sandfläche, `warnung` den
   Marken-Punkt auf getönter Fläche, `kritisch` den vollen Dringend-Punkt auf
   Dringend-Fläche, `unbekannt` einen hohlen Ring auf leerer Fläche. */

#betriebKopf {
  display: flex;
  flex-wrap: wrap;
  gap: var(--raum-2) var(--raum-3);
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--raum-4);
}

.betriebUrteil {
  flex: 1 1 var(--inhalt-schmal);
  min-width: 0;
  margin: 0;
  padding: var(--raum-2) var(--raum-3);
  font-size: var(--schrift-m);
  font-weight: var(--gewicht-halbfett);
  color: var(--tinte);
  background: var(--sand);
  border: var(--strich) solid var(--linie);
  border-left: var(--strich-zustand) solid var(--linie-stark);
  border-radius: var(--radius-eingabe);
}

.betriebUrteil[data-stufe='warnung'] {
  color: var(--marke-text);
  background: var(--marke-flaeche);
  border-color: var(--marke-flaeche);
  border-left-color: var(--marke);
}

.betriebUrteil[data-stufe='kritisch'] {
  color: var(--dringend);
  background: var(--dringend-flaeche);
  border-color: var(--dringend-linie);
  border-left-color: var(--dringend);
}

#betriebStandZeile {
  display: flex;
  gap: var(--raum-2);
  align-items: center;
  font-size: var(--schrift-xs);
  color: var(--tinte-gedaempft);
}

#betriebStandZeile button {
  min-height: auto;
  padding: var(--raum-0) var(--raum-2);
  font-size: var(--schrift-xs);
}

/* EINE Mindestspur für alle Karten dieser Fläche (DESIGN.md, `--spur-min`). Das
   `min(100%, …)` hält die Regel auch dort, wo die Spur breiter wäre als die
   Fläche — sonst liefe das Raster schmal über den Rand hinaus. */
#betriebRaster {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--spur-min)), 1fr));
  gap: var(--raum-3);
  align-items: start;
}

.betriebKarte {
  margin: 0;
  min-width: 0;
}

/* Die Pipeline-Tabelle braucht Breite, sobald das Raster mehrspurig läuft. */
@media (min-width: 60rem) {
  .betriebKarteBreit {
    grid-column: 1 / -1;
  }
}

.betriebKarteKopf {
  display: flex;
  flex-wrap: wrap;
  gap: var(--raum-1) var(--raum-2);
  align-items: baseline;
  justify-content: space-between;
}

.betriebKarteKopf h3 {
  margin: 0;
  font-size: var(--schrift-m);
}

.betriebStufe {
  display: inline-flex;
  gap: var(--raum-0);
  align-items: center;
  padding: 0 var(--raum-2);
  font-size: var(--schrift-xs);
  font-weight: var(--gewicht-halbfett);
  letter-spacing: var(--spation-etikett);
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--tinte-gedaempft);
  background: var(--sand);
  border: var(--strich) solid transparent;
  border-radius: var(--radius-pille);
}

.betriebStufe::before {
  content: '';
  width: var(--punkt);
  height: var(--punkt);
  flex: 0 0 auto;
  border-radius: var(--radius-pille);
  background: currentColor;
}

/* `ok` ist ein Haken, kein Punkt: der stille Normalfall soll auch ohne Farbe
   als »erledigt« lesbar sein. */
.betriebStufe[data-stufe='ok']::before {
  width: var(--symbol-xs);
  height: var(--symbol-xs);
  border-radius: 0;
  -webkit-mask: var(--symbol-haken) center / contain no-repeat;
  mask: var(--symbol-haken) center / contain no-repeat;
}

.betriebStufe[data-stufe='ok'] {
  color: var(--tinte);
}

.betriebStufe[data-stufe='warnung'] {
  color: var(--marke-text);
  background: var(--marke-flaeche);
}

.betriebStufe[data-stufe='warnung']::before {
  background: var(--marke);
}

.betriebStufe[data-stufe='kritisch'] {
  color: var(--dringend);
  background: var(--dringend-flaeche);
  border-color: var(--dringend-linie);
}

.betriebStufe[data-stufe='unbekannt'] {
  color: var(--tinte-gedaempft);
  background: var(--flaeche);
  border-color: var(--linie-stark);
}

/* Hohler Ring: »weiß ich nicht« ist ausdrücklich keine Entwarnung. */
.betriebStufe[data-stufe='unbekannt']::before {
  background: none;
  border: var(--strich) solid currentColor;
}

.betriebAuskunft {
  margin: var(--raum-1) 0 var(--raum-2);
}

.betriebZeilen {
  display: grid;
  gap: var(--raum-2);
  margin-top: var(--raum-2);
}

.betriebZeile {
  display: grid;
  grid-template-columns: var(--punkt) minmax(0, 1fr) auto;
  gap: var(--raum-0) var(--raum-2);
  align-items: baseline;
  padding-bottom: var(--raum-1);
  border-bottom: var(--strich) solid var(--linie);
}

.betriebZeile:last-child {
  padding-bottom: 0;
  border-bottom: 0;
}

.betriebZeile::before {
  content: '';
  width: var(--punkt);
  height: var(--punkt);
  align-self: center;
  border-radius: var(--radius-pille);
  background: var(--linie-stark);
}

.betriebZeile[data-stufe='warnung']::before {
  background: var(--marke);
}

.betriebZeile[data-stufe='kritisch']::before {
  background: var(--dringend);
}

.betriebZeile[data-stufe='unbekannt']::before {
  background: none;
  border: var(--strich) solid var(--linie-stark);
}

.betriebZeileName {
  font-size: var(--schrift-s);
  font-weight: var(--gewicht-halbfett);
  color: var(--tinte);
}

.betriebZeileZeit {
  font-size: var(--schrift-xs);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  color: var(--tinte-gedaempft);
}

.betriebZeileText {
  grid-column: 2 / -1;
  margin: 0;
  font-size: var(--schrift-xs);
  color: var(--tinte-gedaempft);
}

.betriebZeile[data-stufe='kritisch'] .betriebZeileText {
  color: var(--dringend);
}

#betriebLaeufe .betriebZeile {
  grid-template-columns: var(--punkt) minmax(0, 1fr) auto;
}

.betriebTabelle {
  width: 100%;
  margin-top: var(--raum-1);
  overflow-x: auto;
}

.betriebTabelle table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--schrift-s);
}

.betriebTabelle th,
.betriebTabelle td {
  padding: var(--raum-1) var(--raum-2) var(--raum-1) 0;
  text-align: left;
  border-bottom: var(--strich) solid var(--linie);
}

.betriebTabelle th {
  font-size: var(--schrift-xs);
  font-weight: var(--gewicht-halbfett);
  letter-spacing: var(--spation-etikett);
  text-transform: uppercase;
  color: var(--tinte-gedaempft);
}

.betriebTabelle td.betriebZahl,
.betriebTabelle th.betriebZahl {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.betriebTabelle td.betriebZahlFehler {
  font-weight: var(--gewicht-halbfett);
  color: var(--dringend);
}

/* Die Gründe gehören zur Fehlerspalte darüber; die Aufruf-Tabelle ist eine
   eigene Auskunft und braucht sichtbaren Abstand, sonst lesen sie sich als eine. */
#betriebPipelineGruende {
  margin: var(--raum-1) 0 0;
}

#betriebPipelineAufrufe {
  margin-top: var(--raum-5);
}

.betriebFussnote {
  margin: var(--raum-3) 0 0;
  font-size: var(--schrift-xs);
  color: var(--tinte-gedaempft);
}

/* Der Weg zur Quelle steht am Fuß der Karte, die aus ihr lebt. */
.betriebQuelle {
  margin: var(--raum-3) 0 0;
  font-size: var(--schrift-xs);
}

.betriebQuelle a[hidden] {
  display: none;
}

.betriebQuelle a::after {
  content: ' ↗';
}

#betriebBau .betriebZeile::before {
  display: none;
}

#betriebBau .betriebZeile {
  grid-template-columns: minmax(0, 1fr) auto;
}

#betriebBauKennung {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  color: var(--tinte);
}

.werkbankKnoepfe {
  display: flex;
  flex-wrap: wrap;
  gap: var(--raum-2);
  margin-top: var(--raum-2);
}

.werkbankAktivierungWarnung {
  display: flex;
  align-items: flex-start;
  gap: var(--raum-2);
  padding: var(--raum-2);
  color: var(--dringend);
  font-weight: var(--gewicht-halbfett);
  background: var(--dringend-flaeche, var(--sand));
  border: var(--strich) solid var(--dringend);
  border-radius: var(--radius-eingabe);
}

.werkbankAktivierungWarnung input {
  flex: 0 0 auto;
  /* Ohne eigene Breite zieht die globale Feldregel (`width: 100%`) das Kästchen
     über die halbe Karte und schiebt seinen Text an den rechten Rand. */
  width: auto;
  max-width: none;
  margin-top: var(--raum-0);
}

/* ── Werkbank: Ebenen, Reiter, Prüfstand ───────────────────────────── */

/* Die Ebene entscheidet über ALLES darunter — sie steht darum ganz oben und
   sieht anders aus als ein gewöhnliches Feld. */
.werkbankEbenenLeiste {
  display: flex;
  flex-wrap: wrap;
  gap: var(--raum-3);
  align-items: center;
  margin-bottom: var(--raum-3);
  padding: var(--raum-2) var(--raum-3);
  background: var(--sand);
  border-radius: var(--radius-eingabe);
}

.werkbankEbenenFeld {
  display: flex;
  gap: var(--raum-2);
  align-items: center;
  margin: 0;
  white-space: nowrap;
}

.werkbankEbenenFeld select {
  width: auto;
  min-width: 18rem;
  margin-top: 0;
}

.werkbankEbenenText {
  flex: 1 1 16rem;
  min-width: 0;
  margin: 0;
}

#werkbankReiter {
  display: flex;
  flex-wrap: wrap;
  gap: var(--raum-1);
  margin: var(--raum-4) 0 var(--raum-3);
  padding-bottom: var(--raum-1);
  border-bottom: var(--strich) solid var(--linie);
}

#werkbankReiter button[aria-current='true'] {
  color: var(--schrift-hell);
  background: var(--marke-tief);
  border-color: var(--marke-tief);
}

.werkbankFeldZeile {
  display: flex;
  flex-wrap: wrap;
  gap: var(--raum-3);
}

.werkbankFeldZeile label {
  flex: 1 1 16rem;
  min-width: 0;
}

.werkbankEingabeWahl {
  display: flex;
  flex-wrap: wrap;
  gap: var(--raum-3);
  margin: var(--raum-2) 0;
}

.werkbankEingabeWahl label {
  display: flex;
  gap: var(--raum-1);
  align-items: center;
  margin: 0;
}

.werkbankEingabeWahl input {
  width: auto;
  margin: 0;
}

.werkbankAufnahmeStand {
  margin: var(--raum-2) 0;
  font-weight: var(--gewicht-halbfett);
  color: var(--tinte);
}

/* Läuft das Mikrofon, muss man es am Knopf sehen — nicht nur an einer Textzeile. */
#werkbankAufnahmeSchalter[data-laeuft='true'] {
  color: var(--schrift-hell);
  background: var(--dringend);
  border-color: var(--dringend);
}

#werkbankAufnahmeHoeren {
  width: 100%;
  max-width: var(--inhalt-schmal);
  margin: var(--raum-1) 0 var(--raum-2);
}

.werkbankLeise {
  font-size: var(--schrift-xs);
}

.werkbankAktivZeile:not(:empty) {
  padding: var(--raum-1) var(--raum-2);
  color: var(--marke-text);
  background: var(--marke-flaeche);
  border-radius: var(--radius-eingabe);
}

/* Was gilt, was liegt bereit — eine Zeile je Aussage. In EINEN Absatz gepresst liest
   niemand mehr heraus, welche Fassung gerade an den Anbieter geht. */
.werkbankAktivZeile p,
.werkbankZustand p {
  margin: 0;
  font-size: var(--schrift-s);
}

.werkbankAktivZeile p + p,
.werkbankZustand p + p {
  margin-top: var(--raum-0);
}

.werkbankZustand {
  margin: 0 0 var(--raum-2);
}

/* Die wirksame Fassung ist die Antwort auf »was läuft gerade« — sie trägt die Tinte
   der Fläche, die Nebenstände bleiben gedämpft. */
.werkbankZustandWirksam {
  display: flex;
  flex-wrap: wrap;
  gap: var(--raum-1);
  align-items: baseline;
  color: var(--tinte) !important;
  font-weight: var(--gewicht-halbfett);
}

/* Der Block, in dem der Live-Betrieb umgelegt wird: abgesetzt, mit eigener Überschrift
   und der Bestätigung unmittelbar über dem Knopf, den sie freigibt. */
.werkbankAktivierung {
  margin-top: var(--raum-4);
  padding-top: var(--raum-3);
  border-top: var(--strich) solid var(--linie);
}

.werkbankAktivierung h4 {
  margin-top: 0;
}

.werkbankUngespeichert:not([hidden]) {
  padding: var(--raum-1) var(--raum-2);
  color: var(--dringend);
  background: var(--dringend-flaeche);
  border: var(--strich) solid var(--dringend-linie);
  border-radius: var(--radius-eingabe);
}

/* Zwei Läufe nebeneinander: das ist der Kern des Urteilens. `minmax(0, 1fr)`,
   damit ein langes Transkript die Spalte nicht aufreißt. */
.werkbankLaeufe {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--raum-4);
}

@media (min-width: 60rem) {
  .werkbankLaeufe:has(.werkbankLauf[data-slot='b']:not([hidden])) {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }
}

.werkbankLauf {
  min-width: 0;
  margin-bottom: 0;
}

.werkbankLaufKopf {
  display: flex;
  gap: var(--raum-2);
  align-items: baseline;
  justify-content: space-between;
}

.werkbankLaufKopf h4 {
  margin: 0;
  font-size: var(--schrift-xl);
}

.werkbankLauf select,
.werkbankLauf input {
  /* Zweispaltig soll das Feld die Spalte füllen; einspaltig darf ein Modellname keine
     70 Zeichen breite Zeile vortäuschen. */
  max-width: min(100%, var(--inhalt-schmal));
}

/* Ein Lauf ohne Ergebnis sagt das, statt eine leere Fläche zu zeigen. */
.werkbankLaufLeer {
  margin: 0;
  font-style: italic;
  color: var(--tinte-gedaempft);
}

.werkbankLaufErgebnis {
  margin-top: var(--raum-3);
}

.werkbankLaufErgebnis:not(:empty) {
  padding-top: var(--raum-3);
  border-top: var(--strich) solid var(--linie);
}

/* Die Herkunft eines Ergebnisses ist keine Fußnote: welche Fassung, welche Ebene,
   welches Modell — das ist die halbe Antwort auf »ist das besser geworden«. */
.werkbankHerkunft {
  display: flex;
  flex-wrap: wrap;
  gap: var(--raum-1);
  margin: 0 0 var(--raum-2);
}

.werkbankMarke {
  padding: 0 var(--raum-1);
  font-size: var(--schrift-xs);
  font-weight: var(--gewicht-halbfett);
  color: var(--tinte);
  background: var(--sand);
  border-radius: var(--radius-pille);
}

.werkbankMarke[data-ebene='praxis'] {
  color: var(--marke-text);
  background: var(--marke-flaeche);
}

.werkbankMarke[data-art='fluechtig'] {
  color: var(--dringend);
  background: var(--dringend-flaeche);
}

/* ── Ausgaben ──────────────────────────────────────────────────────── */

pre,
.konsoleUri {
  max-width: 100%;
  margin: var(--raum-1) 0;
  padding: var(--raum-2);
  overflow-x: auto;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: var(--schrift-s);
  color: var(--tinte);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  background: var(--sand);
  border-radius: var(--radius-eingabe);
}

.konsoleQr {
  width: fit-content;
  max-width: 100%;
  margin: var(--raum-3) 0;
  padding: var(--raum-2);
  background: #fff;
  border-radius: var(--radius-eingabe);
}

.konsoleQr svg {
  display: block;
  max-width: min(100%, 18rem);
  height: auto;
}

[role='alert']:not(:empty) {
  color: var(--dringend);
}

.konsoleLeer {
  font-style: italic;
  color: var(--tinte-gedaempft);
}

#werkbankFassungenListe > p,
#werkbankModelleAktivierungen > p {
  margin: 0 0 var(--raum-1);
  padding-bottom: var(--raum-1);
  font-size: var(--schrift-s);
  color: var(--tinte);
  border-bottom: var(--strich) solid var(--linie);
}

#werkbankFassungenListe button,
#werkbankModelleAktivierungen button {
  min-height: auto;
  padding: var(--raum-0) var(--raum-1);
  font-size: var(--schrift-xs);
}

/* Ein leeres `pre` oder eine leere URI-Zeile ist trotzdem ein grauer Balken — sie
   stehen sonst als Platzhalter da, wo es nichts zu zeigen gibt. */
pre:empty,
.konsoleUri:empty {
  display: none;
}

/* Die Folge eines scharf geschalteten Griffs — wie in der Geräteliste (#348). */
.konsoleFolge:not([hidden]) {
  margin: var(--raum-2) 0 0;
  padding: var(--raum-2);
  font-size: var(--schrift-s);
  font-weight: var(--gewicht-halbfett);
  color: var(--dringend);
  background: var(--dringend-flaeche);
  border: var(--strich) solid var(--dringend-linie);
  border-radius: var(--radius-eingabe);
}

/* ── Geräteliste der Passkeys ──────────────────────────────────────── */

/* Eine Zeile je Gerät: links, wer es ist und wann es zuletzt herführte, rechts der
   Widerruf. Das Entfernen bleibt dabei ein VOLLER Bedien-Griff — ein Widerruf soll
   nicht kleiner sein als das, was er anrichtet. */
.passkeyZeile {
  display: flex;
  flex-wrap: wrap;
  gap: var(--raum-2);
  align-items: center;
  justify-content: space-between;
  padding: var(--raum-3) 0;
  border-bottom: var(--strich) solid var(--linie);
}

.passkeyZeile:last-child {
  border-bottom: 0;
}

.passkeyAngaben {
  /* Ein frei benanntes Gerät kann jedes Wort tragen — es soll die Zeile umbrechen,
     nicht die Karte sprengen. */
  flex: 1 1 20ch;
  min-width: 0;
  overflow-wrap: anywhere;
}

.passkeyName {
  display: flex;
  flex-wrap: wrap;
  gap: var(--raum-1);
  align-items: baseline;
  margin: 0;
  font-size: var(--schrift-m);
  color: var(--tinte);
}

/* Der Passkey, der die laufende Sitzung geöffnet hat — dieselbe Pille wie die
   Wortmarke im Kopf, damit die Kennzeichnung nicht nach Warnung aussieht. */
.passkeyMarke {
  padding: 0 var(--raum-1);
  font-size: var(--schrift-xs);
  font-weight: var(--gewicht-halbfett);
  letter-spacing: var(--spation-etikett);
  text-transform: uppercase;
  color: var(--marke-text);
  background: var(--marke-flaeche);
  border-radius: var(--radius-pille);
}

.passkeyMeta {
  margin: var(--raum-0) 0 0;
  font-size: var(--schrift-s);
  color: var(--tinte-gedaempft);
}

/* Was der zweite Klick anrichtet — scharf geschaltet sichtbar unter dem Gerät. */
.passkeyFolge {
  margin: var(--raum-1) 0 0;
  font-size: var(--schrift-s);
  font-weight: var(--gewicht-halbfett);
  color: var(--dringend);
}

.passkeyKnoepfe {
  display: flex;
  flex: 0 0 auto;
  flex-wrap: wrap;
  gap: var(--raum-1);
}

/* Ein erklärender Hinweis, der einen Zustand einordnet — getönt statt rot: die
   gesperrte Handlung ist die Regel, kein Fehler. Erst der Zustand, aus dem eine
   Aussperrung entsteht (ein einziges Gerät), trägt die Dringend-Tönung. */
.konsoleHinweis {
  padding: var(--raum-1) var(--raum-2);
  color: var(--marke-text);
  background: var(--marke-flaeche);
  border-radius: var(--radius-eingabe);
}

.konsoleHinweis.konsoleHinweisDringend {
  color: var(--dringend);
  background: var(--dringend-flaeche);
  border: var(--strich) solid var(--dringend-linie);
}

#werkbankProbePraxisHinweis:not(:empty) {
  padding: var(--raum-1) var(--raum-2);
  color: var(--marke-text);
  background: var(--marke-flaeche);
  border-radius: var(--radius-eingabe);
}

/* Ein Lauf ohne Ergebnis ist der Befund, den man sucht — er steht als Block, nicht als
   rote Zeile zwischen zwei grauen. */
.werkbankProbeFehler {
  padding: var(--raum-2);
  font-weight: var(--gewicht-halbfett);
  color: var(--dringend);
  background: var(--dringend-flaeche);
  border: var(--strich) solid var(--dringend-linie);
  border-radius: var(--radius-eingabe);
}

details {
  margin-top: var(--raum-4);
  font-size: var(--schrift-s);
}

summary {
  min-height: var(--hoehe-bedienung);
  padding: var(--raum-1) 0;
  font-weight: var(--gewicht-halbfett);
  cursor: pointer;
}

/* ── API-Mitschnitt ───────────────────────────────────────────────── */

.mitschnittFilter {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr));
  gap: var(--raum-2);
}

.mitschnittZeile {
  min-width: 0;
  padding: var(--raum-2) 0;
  border-bottom: var(--strich) solid var(--linie);
}

.mitschnittZeile:last-child {
  border-bottom: 0;
}

.mitschnittZeileKopf,
.mitschnittDetailKopf {
  display: flex;
  flex-wrap: wrap;
  gap: var(--raum-2);
  align-items: center;
  justify-content: space-between;
  min-width: 0;
}

/* Links steht, WAS die Zeile ist (Praxis und Zweck), rechts, was man mit ihr tun kann.
   Umgekehrt — Etikett links, Name am rechten Rand — muss man jede Zeile zweimal lesen. */
.mitschnittZeileName {
  display: flex;
  flex-wrap: wrap;
  gap: var(--raum-1) var(--raum-2);
  align-items: baseline;
  min-width: 0;
  margin: 0;
  font-size: var(--schrift-m);
  color: var(--tinte);
}

.mitschnittZeileZeit {
  font-size: var(--schrift-xs);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  color: var(--tinte-gedaempft);
}

/* Ein Aufruf, nicht zwei Zeilen: die Ebenen sind Schichten DESSELBEN Aufrufs und stehen
   darum als zwei Griffe an einer Zeile. Der rohe bleibt dabei laut. */
.mitschnittEbenen {
  display: flex;
  flex: 0 0 auto;
  flex-wrap: wrap;
  gap: var(--raum-1);
}

.mitschnittEbenen button {
  min-height: auto;
  padding: var(--raum-0) var(--raum-2);
  font-size: var(--schrift-xs);
  letter-spacing: var(--spation-etikett);
}

.mitschnittEbenen button.mitschnittRohTaste {
  color: var(--dringend);
  background: var(--dringend-flaeche);
  border-color: var(--dringend-linie);
}

.mitschnittEbenen button.mitschnittRohTaste:hover {
  color: var(--schrift-hell);
  background: var(--dringend);
}

.mitschnittMarke {
  display: inline-block;
  padding: var(--raum-0) var(--raum-1);
  font-size: var(--schrift-xs);
  font-weight: var(--gewicht-halbfett);
  letter-spacing: var(--spation-etikett);
  color: var(--marke-text);
  background: var(--marke-flaeche);
  border-radius: var(--radius-pille);
}

.mitschnittMarkeRoh {
  color: var(--dringend);
  background: var(--dringend-flaeche);
  border: var(--strich) solid var(--dringend-linie);
}

.mitschnittZeileMeta {
  margin-top: var(--raum-1);
  overflow-wrap: anywhere;
}

#mitschnittDetail {
  scroll-margin-top: var(--raum-3);
}

#mitschnittDetail.mitschnittDetailRoh {
  border-color: var(--dringend-linie);
}

#mitschnittDetailMeta {
  display: grid;
  grid-template-columns: minmax(7rem, max-content) minmax(0, 1fr);
  gap: var(--raum-1) var(--raum-3);
  margin: var(--raum-3) 0;
}

#mitschnittDetailMeta dt {
  font-weight: var(--gewicht-halbfett);
}

#mitschnittDetailMeta dd {
  min-width: 0;
  margin: 0;
  overflow-wrap: anywhere;
}

#mitschnittDetail pre {
  max-height: 32rem;
  overflow: auto;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

@media (max-width: 34rem) {
  #mitschnittDetailMeta {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ── Audit ─────────────────────────────────────────────────────────────
   Ein Protokoll wird gescannt, nicht gelesen: WER auf WAS, wann — und erst
   darunter, warum. Sechs Angaben in einer Zeile zwingen zum Lesen von vorn. */

.auditZeile {
  padding: var(--raum-3) 0;
  border-bottom: var(--strich) solid var(--linie);
}

.auditZeile:last-child {
  border-bottom: 0;
}

.auditKopf {
  display: flex;
  flex-wrap: wrap;
  gap: var(--raum-1) var(--raum-2);
  align-items: baseline;
  justify-content: space-between;
}

.auditZiel {
  display: flex;
  flex-wrap: wrap;
  gap: var(--raum-1);
  align-items: baseline;
  min-width: 0;
  margin: 0;
  font-size: var(--schrift-m);
  color: var(--tinte);
  overflow-wrap: anywhere;
}

.auditZeit {
  font-size: var(--schrift-xs);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  color: var(--tinte-gedaempft);
}

.auditMeta,
.auditGrund {
  margin: var(--raum-0) 0 0;
  font-size: var(--schrift-s);
  color: var(--tinte-gedaempft);
}

.auditGrund {
  color: var(--tinte);
}

/* Ein Zugang, der JETZT offen steht, ist die einzige Zeile mit Gegenwart — sie trägt
   die Marken-Tönung, die abgelaufenen bleiben still. */
.auditMarke {
  padding: 0 var(--raum-1);
  font-size: var(--schrift-xs);
  font-weight: var(--gewicht-halbfett);
  letter-spacing: var(--spation-etikett);
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--tinte-gedaempft);
  background: var(--sand);
  border-radius: var(--radius-pille);
}

.auditMarke[data-stand='offen'] {
  color: var(--marke-text);
  background: var(--marke-flaeche);
}

/* ── Praxen (#547) ────────────────────────────────────────────────────
   Der eine Seitenkopf der Konsole: Titel links, die Handgriffe der ganzen Fläche
   rechts daneben. Er steht ÜBER den Karten, nicht in einer davon — sonst hinge
   »Praxis anlegen« an der Liste statt an der Fläche. ── */
.konsoleSeitenKopf {
  display: flex;
  flex-wrap: wrap;
  gap: var(--raum-2);
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: var(--raum-4);
}

.konsoleSeitenKopf h2 {
  margin: 0;
  font-size: var(--schrift-xxl);
}

.konsoleSeitenAktionen {
  display: flex;
  flex-wrap: wrap;
  gap: var(--raum-2);
}

/* Die Handgriffe je Zeile bleiben lesbar schmal — sie sind der Nebenweg der Zeile,
   nicht ihr Inhalt. */
.praxenGriffe {
  display: flex;
  flex-wrap: wrap;
  gap: var(--raum-1);
  justify-content: flex-end;
}

.praxenGriffe button {
  min-height: auto;
  padding: var(--raum-0) var(--raum-2);
  font-size: var(--schrift-xs);
  white-space: nowrap;
}

/* Eine Vorführ- oder Rauchtest-Zeile gehört dem Betreiber: getönt, nicht alarmiert. */
#praxenTabelle tr[data-art='demo'] td[data-spalte='art'],
#praxenTabelle tr[data-art='rauchtest'] td[data-spalte='art'] {
  color: var(--marke-text);
}

/* Einmalige Zugangsdaten: sie stehen als Paare da und sollen zum Abschreiben taugen. */
.konsoleZugangsdaten {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--raum-0) var(--raum-2);
  margin: var(--raum-2) 0;
}

.konsoleZugangsdaten dt {
  font-size: var(--schrift-s);
  color: var(--tinte-gedaempft);
}

.konsoleZugangsdaten dd,
.praxenZugangsZeile {
  margin: 0;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: var(--schrift-s);
  overflow-wrap: anywhere;
}