/* NotarFlow — Oberfläche
   Aufteilung: Leiste · Beleg · Arbeitsfläche. Der Beleg links, die ausgelesenen
   Werte rechts und bearbeitbar — das ist die eigentliche Tätigkeit.
   Farben und Schriften nach 09-brand/BRAND.md (Brand v2 "Klarwasser", 16.08.2026):
   Weiß, Marine-Text, Blau als Akzent; fehlt/überfällig in Warnorange, belegt in Grün. */

@font-face {
  font-family: "Bricolage Grotesque";
  src: url("../vendor/fonts/bricolage.woff2") format("woff2-variations");
  font-weight: 300 800;
  font-display: swap;
}
@font-face {
  font-family: "Schibsted Grotesk";
  src: url("../vendor/fonts/schibsted.woff2") format("woff2-variations");
  font-weight: 400 700;
  font-display: swap;
}
@font-face {
  font-family: "Spline Sans Mono";
  src: url("../vendor/fonts/splinemono.woff2") format("woff2-variations");
  font-weight: 400 500;
  font-display: swap;
}

:root {
  --paper: #ffffff;
  --panel: #f2f7fd;
  --panel-tief: #e3eefb;
  --ink: #0b2239;
  --ink-soft: #43586e;
  /* C4, 21.08.: von #1478E8 auf #1272DE abgedunkelt — ein Schritt, den man
     nicht sieht und der einen Unterschied macht. Gemessen an den GERENDERTEN
     Farben (`smoke_zugang.py`, Abschnitt 4):

         #1478E8 auf Weiss  4,30 : 1   -> unter WCAG 2.2 AA (1.4.3: 4,5 : 1)
         #1272DE auf Weiss  4,68 : 1   -> erfuellt

     Betroffen war beides zugleich, weil das Verhaeltnis dasselbe ist: blaue
     SCHRIFT auf Weiss (Werkzeug-Knopf, „im Beleg", Notiz-Verweise) und weisse
     Schrift auf blauer FLAECHE (Freigeben, Suche, Zaehler). Der Farbton ist
     unveraendert, nur die Helligkeit ist um gut vier Prozent zurueckgenommen.

     Bewacht von `tests/test_kontrast.py` — wer den Wert zuruecksetzt, bekommt
     einen roten Test mit der Rechnung darin, und keine stille Regression.
     **Die Marke gehoert 09-brand/BRAND.md und nicht dieser Session**: wer den
     Ton anders haben will, waehlt einen anderen — nur eben einen, der die
     4,5 : 1 haelt. Der Befund steht im Brett. */
  --blau: #1272de;
  --blau-tief: #0c5ac2;
  --warn: #b4540a;
  --ok: #1b7f4d;
  --line: rgba(11, 34, 57, 0.14);
  --line-stark: rgba(11, 34, 57, 0.30);

  --rail: 82px;
  --spalte-arbeit: 420px;
  --kopf: 56px;

  --ease: cubic-bezier(0.16, 1, 0.3, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html, body { height: 100%; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: "Schibsted Grotesk", system-ui, sans-serif;
  font-size: 13.5px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  overflow: hidden;
}

h1, h2, h3 {
  font-family: "Bricolage Grotesque", Georgia, sans-serif;
  font-weight: 600; line-height: 1.06; letter-spacing: -0.015em; margin: 0;
}
button { font: inherit; color: inherit; cursor: pointer; }
:focus-visible { outline: 2px solid var(--blau); outline-offset: 2px; }
.num { font-variant-numeric: tabular-nums; }

/* ------------------------------------------------------------------ Gerüst */

.huelle {
  display: grid;
  grid-template-columns: var(--rail) minmax(0, 1fr) var(--spalte-arbeit);
  grid-template-rows: var(--kopf) minmax(0, 1fr);
  height: 100vh;
}

.kopf {
  grid-column: 1 / -1;
  display: flex; align-items: center; gap: 18px;
  padding: 0 18px;
  border-bottom: 1px solid var(--line-stark);
}
.marke { display: flex; align-items: center; gap: 9px; }
.marke h1 { font-size: 16.5px; font-weight: 640; }
.marke .marke-blau { color: var(--blau); }
.marke .siegel { width: 23px; height: 23px; flex: none; }
.kopf-vorgang { display: flex; align-items: baseline; gap: 11px; padding-left: 18px; border-left: 1px solid var(--line); min-width: 0; }
/* Die Urkundenart ist der zweite Text, der nachgeben darf: „Grundschuldbestellung"
   sind 21 Zeichen, und das Aktenzeichen daneben ist die Angabe, auf die es
   ankommt. Wieder gilt: Text kuerzen, Bedienung nicht (C3, 21.08.). */
.kopf-vorgang .az { font-family: "Spline Sans Mono", monospace; font-size: 13.5px; flex: none; }
.kopf-vorgang .art {
  color: var(--ink-soft); font-size: 12.5px;
  min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.kopf-rechts { margin-left: auto; color: var(--ink-soft); font-size: 12.5px; }

/* ------------------------------------------------------------------ Leiste */

.leiste {
  border-right: 1px solid var(--line-stark);
  display: flex; flex-direction: column; align-items: center;
  padding: 10px 5px; gap: 2px; overflow-y: auto;
}
/* Jeder Bereich zeigt Symbol UND Beschriftung: auf einem Tablett gibt es keinen
   Mauszeiger, der einen Titel hervorholt, und ein Symbolwald ohne Wort zwingt
   zum Raten. Der `title` bleibt (Sprachausgabe, Feinheit im Titel), das Wort
   darunter ist die eigentliche Beschriftung. */
.leiste button {
  position: relative;
  width: 100%; min-height: 46px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  padding: 6px 2px; text-align: center;
  background: none; border: none; border-radius: 8px; color: var(--ink-soft);
  transition: background 150ms var(--ease), color 150ms var(--ease);
}
/* Rollen-Sperre: display:flex oben schlaegt sonst das hidden-Attribut, und ein
   gesperrter Bereich waere trotzdem sichtbar und anklickbar. */
.leiste button[hidden] { display: none; }
.leiste button:hover { background: var(--panel-tief); color: var(--ink); }
.leiste button[aria-pressed="true"] { color: var(--blau); background: var(--panel-tief); }
.leiste svg { width: 18px; height: 18px; stroke-width: 1.5; flex: none; }
.leiste-label {
  font-size: 9.5px; line-height: 1.15; letter-spacing: 0.01em;
  max-width: 100%; overflow-wrap: anywhere; hyphens: auto;
}
.leiste-zaehler {
  position: absolute; top: 4px; right: 10px;
  background: var(--blau); color: #fff; font-size: 9.5px;
  border-radius: 7px; padding: 0 4px; line-height: 1.5;
}

.leiste-trenner { width: 44px; height: 1px; background: var(--line-stark); margin: 6px 0; flex: none; }

/* Bereichs-Zeilen in den Schubladen (Vollzug, Posteingang, Verwahrung, GwG, Termine) */
.bz { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; padding: 9px 0; border-bottom: 1px solid var(--line); }
.bz .t { font-size: 12.5px; }
.bz .s { display: block; color: var(--ink-soft); font-size: 11px; margin-top: 1px; }
.bz .st { flex: none; font-size: 10px; letter-spacing: 0.05em; text-transform: uppercase; font-weight: 600; }
.bz[data-art="ok"] .st { color: var(--ok); }
.bz[data-art="neutral"] .st { color: var(--blau-tief); }
.bz[data-art="warn"] .st { color: var(--warn); }
.bereich-titel { font-family: "Bricolage Grotesque", sans-serif; font-size: 13px; padding: 12px 0 2px; }
.bereich-titel:first-child { padding-top: 2px; }
.bereich-titel::after { content: ""; display: block; width: 22px; height: 2px; background: var(--blau); margin-top: 4px; }
.bereich-hinweis { color: var(--ink-soft); font-size: 11px; font-style: italic; margin: 8px 0 2px; }
.vz-gate { border: 1px solid var(--line-stark); border-radius: 8px; padding: 9px 11px; margin: 10px 0; font-size: 12px; }
.vz-gate .g { font-weight: 600; }
.vz-gate .s { display: block; color: var(--ink-soft); font-size: 11px; margin-top: 2px; }

/* Suche */
.suche-form { display: flex; gap: 7px; margin-bottom: 10px; }
.suche-form input { flex: 1; border: 1px solid var(--line-stark); background: var(--paper); padding: 8px 10px; font: inherit; font-size: 12.5px; color: var(--ink); border-radius: 8px; }
.suche-form button { border: 1px solid var(--blau); background: var(--blau); color: #fff; border-radius: 8px; padding: 8px 12px; font-size: 12.5px; font-weight: 600; }
.suche-beispiel { background: none; border: 1px solid var(--line-stark); border-radius: 100px; padding: 3px 10px; font-size: 11.5px; color: var(--ink-soft); margin: 0 6px 8px 0; }
.suche-beispiel:hover { border-color: var(--blau); color: var(--blau-tief); }
.treffer { border: 1px solid var(--line); border-radius: 8px; padding: 9px 11px; margin-bottom: 8px; }
.treffer .t { font-size: 12.5px; }
.treffer .q { display: block; font-size: 11px; color: var(--blau-tief); margin-top: 3px; }

/* Nachlass-Positionen in der Arbeitsspalte */
.pos { display: grid; grid-template-columns: 1fr auto; gap: 2px 10px; padding: 8px 0; border-bottom: 1px solid var(--line); }
.pos .t { font-size: 13px; }
.pos .b { font-size: 11px; color: var(--ink-soft); }
.pos .w { font-variant-numeric: tabular-nums; font-weight: 600; text-align: right; }
.pos[data-status="fehlt"] .w { color: var(--warn); font-weight: 600; }
.pos[data-status="fehlt"] .b { color: var(--warn); }
.pos-summe { display: flex; justify-content: space-between; padding: 9px 0; font-weight: 600; }
.pos-summe .w { font-variant-numeric: tabular-nums; }

/* Protokoll + Begründung */
.protokoll-eintrag { border-left: 2px solid var(--blau); padding: 2px 0 2px 10px; margin: 10px 0; }
.protokoll-eintrag .k { font-size: 11px; color: var(--ink-soft); }
.protokoll-eintrag .a { font-weight: 600; font-size: 12.5px; }
.protokoll-eintrag .txt { font-size: 12px; margin-top: 1px; }
.begruendung { margin-top: 8px; }
.begruendung textarea { width: 100%; min-height: 60px; resize: vertical; border: 1px solid var(--warn); background: var(--paper); padding: 8px 10px; font: inherit; font-size: 12.5px; color: var(--ink); border-radius: 8px; }
.begruendung .bestaetigen { margin-top: 6px; width: 100%; padding: 8px; border: 1px solid var(--warn); background: none; color: var(--warn); font-weight: 600; border-radius: 8px; }
.begruendung .bestaetigen:not([disabled]):hover { background: var(--warn); color: #fff; }
.begruendung .bestaetigen[disabled] { opacity: .45; cursor: not-allowed; }
.frist[data-stufe="ueberfaellig"] .tage { color: var(--warn); }
.frist[data-stufe="ueberfaellig"] .text { color: var(--warn); font-weight: 600; }

/* ----------------------------------------------------------------- Ansicht */

.spalte { display: flex; flex-direction: column; min-height: 0; }
.spalte--ansicht {
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr) auto;
  border-right: 1px solid var(--line-stark);
}

.dateireiter {
  display: flex; align-items: stretch;
  border-bottom: 1px solid var(--line);
  overflow-x: auto;
}
.dateireiter button {
  padding: 9px 15px; background: none; border: none;
  border-right: 1px solid var(--line);
  border-bottom: 2px solid transparent;
  color: var(--ink-soft); font-size: 12.5px; white-space: nowrap;
  display: flex; align-items: center; gap: 7px;
  transition: color 150ms var(--ease), background 150ms var(--ease);
}
.dateireiter button:hover { background: var(--panel); color: var(--ink); }
.dateireiter button[aria-selected="true"] {
  color: var(--blau); border-bottom-color: var(--blau); font-weight: 500;
}
.dateireiter .mk { width: 6px; height: 6px; flex: none; background: var(--ink-soft); }
.dateireiter button[data-status="unlesbar"] .mk { background: var(--blau); }
.dateireiter button[data-status="neu"] .mk { background: var(--blau); }

.werkzeuge {
  display: flex; align-items: center; gap: 4px;
  padding: 7px 12px; border-bottom: 1px solid var(--line);
}
.werkzeuge .trenner { width: 1px; height: 18px; background: var(--line-stark); margin: 0 5px; }
.wz, .ablage-knopf {
  background: none; border: 1px solid transparent; border-radius: 8px;
  padding: 5px 9px; font-size: 12px; color: var(--ink-soft);
  display: inline-flex; align-items: center; gap: 6px; cursor: pointer;
  transition: background 150ms var(--ease), color 150ms var(--ease), border-color 150ms var(--ease);
}
.wz:hover, .ablage-knopf:hover { background: var(--panel-tief); color: var(--ink); }
.wz[aria-pressed="true"] { border-color: var(--blau); color: var(--blau); background: var(--paper); }
.wz svg, .ablage-knopf svg { width: 15px; height: 15px; stroke-width: 1.6; }
.ablage-knopf { margin-left: auto; }

.buehne-rahmen { position: relative; overflow: hidden; background: var(--panel-tief); }
.buehne { position: absolute; inset: 0; overflow: auto; }
.buehne .pdfViewer .page {
  border: none; box-shadow: 0 1px 4px rgba(11, 34, 57, 0.18);
  margin: 16px auto; background-clip: padding-box;
}
.spalte--ansicht.bereit .buehne-rahmen::after {
  content: "Dateien loslassen";
  position: absolute; inset: 0; z-index: 9;
  display: grid; place-items: center;
  background: rgba(255, 255, 255, 0.94);
  border: 2px dashed var(--blau); color: var(--blau);
  font-weight: 500; pointer-events: none;
}

.blaettern {
  display: flex; align-items: center; gap: 8px;
  padding: 7px 14px; border-top: 1px solid var(--line);
}
.blaettern button {
  width: 26px; height: 26px; border: 1px solid var(--line-stark); background: none;
  border-radius: 8px; color: var(--ink-soft); line-height: 1;
}
.blaettern button:hover:not([disabled]) { border-color: var(--blau); color: var(--blau); }
.blaettern button[disabled] { opacity: 0.35; cursor: not-allowed; }
.blaettern .blaettern-text { margin-left: auto; color: var(--ink-soft); font-size: 12px; }

/* Fundstelle und Anmerkungsebene */
.fundstelle {
  position: absolute; background: rgba(20, 120, 232, 0.20);
  border-bottom: 1.5px solid var(--blau); pointer-events: none;
  opacity: 0; transition: opacity 200ms var(--ease); z-index: 3;
}
.fundstelle.an { opacity: 1; }
.fundstelle.blinkt { animation: blinken 1.4s var(--ease); }
@keyframes blinken {
  0%, 100% { background: rgba(20, 120, 232, 0.20); }
  30% { background: rgba(20, 120, 232, 0.38); }
}
.notiz-ebene { position: absolute; inset: 0; z-index: 4; pointer-events: none; }
.notiz-ebene.aktiv { pointer-events: auto; cursor: crosshair; }
.notiz-ebene svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.notiz-marke {
  position: absolute; width: 20px; height: 20px; transform: translate(-50%, -50%);
  background: var(--blau); color: #fff; border: none; border-radius: 50%;
  font-size: 11px; font-weight: 600; display: grid; place-items: center;
  pointer-events: auto; box-shadow: 0 1px 3px rgba(11, 34, 57, 0.32);
}

/* ------------------------------------------------------------ Arbeitsfläche */

/* `position: relative; z-index` NUR fuer die Malreihenfolge, nicht fuer das
   Layout: Die absolut positionierte Belegbuehne der mittleren Spalte kann bei
   schmaleren Fenstern breiter als ihre Rasterspalte werden und lief dann mit dem
   Text-/PDF-Layer ueber den linken Rand dieser Beteiligten-Spalte — die Felder
   wurden angeschnitten. Ein eigener Stapelkontext hier legt das Panel mit seinem
   deckenden Grund UEBER diesen Ueberlauf. Die Dokument-Ansicht selbst (Spalten-
   breite, Blattgroesse, Scrollen, Zoom, Reiter) bleibt voellig unangetastet —
   es wird nichts gestaucht oder abgeschnitten, nur die Ueberdeckung gedreht. */
.spalte--arbeit {
  background: var(--panel); border-left: 1px solid var(--line-stark);
  position: relative; z-index: 2;
}
.arbeit-koerper { overflow-y: auto; padding: 6px 18px 18px; flex: 1; }

.gruppe-titel { font-family: "Bricolage Grotesque", sans-serif; font-size: 14px; padding: 16px 0 4px; }
.gruppe-titel:first-child { padding-top: 10px; }
.gruppe-titel::after { content: ""; display: block; width: 26px; height: 2px; background: var(--blau); margin-top: 5px; }

.feld { padding: 9px 0 0; }
.feld-kopf { display: flex; align-items: baseline; gap: 8px; margin-bottom: 3px; }
.feld-label { color: var(--ink-soft); font-size: 11.5px; }
.feld-marken { margin-left: auto; display: flex; align-items: baseline; gap: 7px; font-size: 11px; }
.feld-marken .konfidenz { color: var(--ink-soft); }
.feld-marken .zwei { color: var(--ok); }
.feld-marken .quelle {
  background: none; border: none; padding: 0; color: var(--blau);
  text-decoration: underline; text-underline-offset: 2px; font-size: 11px;
}

.feld input {
  width: 100%; padding: 8px 10px; font: inherit; font-size: 13.5px; color: var(--ink);
  background: var(--paper); border: 1px solid var(--line); border-radius: 8px;
  transition: border-color 150ms var(--ease), box-shadow 150ms var(--ease);
}
.feld input:hover { border-color: var(--line-stark); }
.feld input:focus { outline: none; border-color: var(--blau); box-shadow: 0 0 0 2px rgba(20, 120, 232, 0.16); }
.feld[data-hervor="true"] input { font-family: "Bricolage Grotesque", sans-serif; font-size: 16px; }

.feld[data-fehlt="true"] input { border-color: var(--warn); background: rgba(180, 84, 10, 0.05); }
.feld[data-fehlt="true"] .feld-label::after { content: " · fehlt"; color: var(--warn); font-style: italic; }

.feld[data-korrigiert="true"] input { border-color: var(--blau); }
.feld[data-korrigiert="true"] .feld-marken .konfidenz { display: none; }
.feld-marken .feld-notizmarke {
  background: none; border: 1px solid var(--line-stark); padding: 0 5px;
  color: var(--ink-soft); font-size: 10px; letter-spacing: .03em; line-height: 1.6;
}
.feld-marken .feld-notizmarke:hover { border-color: var(--blau); color: var(--blau); }
.feld[data-blinkt="true"] input { border-color: var(--blau); box-shadow: 0 0 0 3px rgba(20, 120, 232, 0.18); }
.feld-geaendert { color: var(--blau); font-size: 11px; font-style: italic; margin-top: 3px; }
.feld-hinweis { color: var(--ink-soft); font-size: 11.5px; font-style: italic; margin-top: 3px; }

.pruefung { display: flex; gap: 8px; padding: 6px 0; align-items: flex-start; font-size: 12.5px; }
.pruefung .mk { width: 6px; height: 6px; margin-top: 6px; flex: none; }
.pruefung[data-art="ok"] .mk { background: var(--ink-soft); }
.pruefung[data-art="achtung"] .mk { background: var(--warn); }
.pruefung[data-art="offen"] .mk { background: var(--warn); }
.pruefung[data-art="offen"] { color: var(--warn); }

/* --------------------------------------------------------------- Abschluss */

.arbeit-fuss { border-top: 1px solid var(--line-stark); padding: 12px 18px; background: var(--panel); flex: none; }
.fuss-titel {
  font-size: 11px; letter-spacing: 0.07em; text-transform: uppercase;
  color: var(--ink-soft); font-weight: 600; margin-bottom: 4px;
}
.ergebnis-stueck {
  display: flex; align-items: center; gap: 8px; width: 100%; text-align: left;
  padding: 7px 0; border: none; border-bottom: 1px solid var(--line); background: none;
  transition: color 150ms var(--ease);
}
.ergebnis-stueck:hover { color: var(--blau); }
.ergebnis-stueck .art {
  margin-left: auto; font-size: 10px; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--ink-soft); border: 1px solid var(--line-stark); padding: 1px 5px;
}
.knopfreihe { display: grid; grid-template-columns: 1fr auto; gap: 8px; }
.knopf {
  display: block; width: 100%; padding: 10px;
  border: 1px solid var(--blau); background: var(--blau); color: #fff;
  font-weight: 600; border-radius: 10px;
  transition: background 150ms var(--ease);
}
.knopf:hover { background: var(--blau-tief); }
.knopf--leer { background: none; color: var(--ink-soft); border-color: var(--line-stark); white-space: nowrap; padding: 10px 14px; }
.knopf--leer:hover { background: none; border-color: var(--ink-soft); color: var(--ink); }
.knopf[disabled] { opacity: 0.45; cursor: not-allowed; }
.freigabe-hinweis { color: var(--warn); font-size: 11.5px; margin: 8px 0 0; text-align: center; }

/* --------------------------------------------------------------- Schublade */

.schublade {
  position: fixed; top: var(--kopf); left: var(--rail); bottom: 0; width: 340px;
  background: var(--paper); border-right: 1px solid var(--line-stark);
  box-shadow: 3px 0 14px rgba(11, 34, 57, 0.09);
  transform: translateX(-100%); opacity: 0; pointer-events: none;
  transition: transform 240ms var(--ease), opacity 240ms var(--ease);
  display: flex; flex-direction: column; z-index: 20;
}
.schublade.offen { transform: none; opacity: 1; pointer-events: auto; }
.schublade-kopf { padding: 13px 16px; border-bottom: 1px solid var(--line); display: flex; align-items: center; }
.schublade-kopf h2 { font-size: 15px; }
.schublade-kopf .zu { margin-left: auto; background: none; border: none; color: var(--ink-soft); font-size: 19px; line-height: 1; padding: 2px 5px; }
.schublade-tafel { display: none; flex: 1; min-height: 0; flex-direction: column; }
.schublade-tafel[data-offen="true"] { display: flex; }
.schublade-koerper { overflow-y: auto; padding: 12px 16px 18px; flex: 1; }

/* Fokus-Vollansicht der GwG-Pruefung — nur auf Instanzen, die sie als Start-/
   Fokus-Modul fuehren (`data-gwg-fokus` setzt `app.js` genau dann). Die offene
   Schublade legt sich in voller Breite rechts der Leiste ueber Dokument UND
   Beteiligte, damit die Pruefung fokussiert und ruhig als eigene Unterseite
   dasteht. Wichtig: das ist reine Ueberdeckung — an der Dokument-Spalte (Blatt,
   Scrollen, Zoom, Reiter) wird nichts geaendert; sie liegt nur darunter und ist
   mit „Zurueck zur Akte" (schliesst die Schublade) sofort wieder da. */
body[data-gwg-fokus="true"] .schublade.offen {
  left: var(--rail); right: 0; width: auto;
  box-shadow: none; border-right: none;
}

/* --------------------------------------------------------- Listen in der Schublade */

.vorgang {
  display: block; width: 100%; text-align: left; padding: 11px 0;
  border: none; border-bottom: 1px solid var(--line); background: none;
  transition: background 150ms var(--ease);
}
.vorgang:hover { background: var(--panel); }
.vorgang[aria-current="true"] { background: var(--panel-tief); }
.vorgang .zeile { display: flex; align-items: baseline; gap: 8px; }
.vorgang .az { font-family: "Spline Sans Mono", monospace; font-size: 12.5px; }
.vorgang .zustand { margin-left: auto; font-size: 10.5px; letter-spacing: 0.05em; text-transform: uppercase; color: var(--ink-soft); }
.vorgang[data-status="pruefung"] .zustand { color: var(--blau); }
.vorgang .art { font-size: 12.5px; }
.vorgang .kurz { color: var(--ink-soft); font-size: 11.5px; }

.frist {
  display: grid; grid-template-columns: auto 1fr; gap: 2px 9px; padding: 8px 4px 8px 0;
  border: none; border-bottom: 1px solid var(--line); background: none;
  width: 100%; text-align: left; align-items: center;
  transition: background 150ms var(--ease);
}
.frist:hover { background: var(--panel); }
.frist .tage { grid-row: 1 / span 2; align-self: center; font-family: "Bricolage Grotesque", sans-serif; font-size: 18px; min-width: 30px; font-variant-numeric: tabular-nums; }
.frist .text { font-size: 12.5px; }
.frist .datum { color: var(--ink-soft); font-size: 11.5px; }
.frist[data-stufe="dringend"] .tage { color: var(--warn); }
.frist[data-stufe="bald"] .tage { color: var(--blau-tief); }

/* Freigabe-Queue (Session A2). Dieselbe Zeilenform wie die Vorgangsliste, aber
   eine eigene Klasse: `.vorgang` steht in Tests und Selektoren, und zwei Listen
   unter demselben Namen zaehlen sich gegenseitig mit — auch die geschlossene,
   denn sie bleibt im DOM. */
.freigabe {
  display: block; width: 100%; text-align: left; padding: 11px 0;
  border: none; border-bottom: 1px solid var(--line); background: none;
  transition: background 150ms var(--ease);
}
.freigabe:hover { background: var(--panel); }
.freigabe[aria-current="true"] { background: var(--panel-tief); }
.freigabe .zeile { display: flex; align-items: baseline; gap: 8px; }
.freigabe .az { font-family: "Spline Sans Mono", monospace; font-size: 12.5px; }
.freigabe .zustand { margin-left: auto; font-size: 10.5px; letter-spacing: 0.05em; text-transform: uppercase; color: var(--ink-soft); }
.freigabe[data-status="pruefung"] .zustand { color: var(--blau); }
.freigabe .art { font-size: 12.5px; }
.freigabe .kurz { color: var(--ink-soft); font-size: 11.5px; }
.freigabe .offene-punkte { margin-top: 1px; }
.freigabe .chips { margin-top: 6px; }
.freigabe .frist-chip { cursor: default; }

/* --------------------------------------------------- Filterleisten & Chips */

.listen-filter { display: flex; flex-direction: column; gap: 7px; padding-bottom: 10px; margin-bottom: 10px; border-bottom: 1px solid var(--line); }
.listen-filter input[type="search"] {
  width: 100%; border: 1px solid var(--line-stark); background: var(--paper);
  padding: 7px 9px; font: inherit; font-size: 12.5px; color: var(--ink);
}
.listen-filter input[type="search"]:focus { outline: none; border-color: var(--blau); box-shadow: 0 0 0 2px rgba(20, 120, 232, 0.16); }
.chips { display: flex; flex-wrap: wrap; gap: 5px; }
.chip {
  display: inline-flex; align-items: baseline; gap: 5px;
  border: 1px solid var(--line-stark); background: none; color: var(--ink-soft);
  padding: 2px 8px; font-size: 11px;
  transition: border-color 150ms var(--ease), color 150ms var(--ease), background 150ms var(--ease);
}
.chip:hover { border-color: var(--blau); color: var(--blau); }
.chip .n { font-size: 10px; opacity: .75; }
.chip[aria-pressed="true"] { border-color: var(--blau); background: var(--panel-tief); color: var(--ink); }
.nur-offene { display: flex; align-items: center; gap: 6px; font-size: 11.5px; color: var(--ink-soft); }
.nur-offene input { accent-color: var(--blau); }

/* ---------------------------------------------------------- Quellen-Zeile */

.quelle-zeile { display: flex; align-items: baseline; gap: 7px; font-size: 11px; color: var(--ink-soft); padding-bottom: 8px; margin-bottom: 4px; border-bottom: 1px solid var(--line); }
.quelle-zeile .marke { flex: none; font-size: 9.5px; letter-spacing: .06em; text-transform: uppercase; font-weight: 600; border: 1px solid currentColor; padding: 0 5px; }
.quelle-zeile[data-art="live"] .marke { color: var(--ok); }
.quelle-zeile[data-art="demo"] .marke { color: var(--ink-soft); }
.bz .konflikt { color: var(--warn); }

/* -------------------------------------------------------------- Notizen */

.notiz-liste { display: flex; flex-direction: column; gap: 8px; }
.notiz { border: 1px solid var(--line); padding: 9px 11px; background: var(--paper); }
.notiz[data-art="zurueckweisung"] { border-left: 2px solid var(--warn); }
.notiz[data-erledigt="true"] { opacity: .58; }
.notiz[data-erledigt="true"] .inhalt { text-decoration: line-through; text-decoration-color: var(--line-stark); }
.notiz .kopfzeile { display: flex; align-items: baseline; gap: 8px; font-size: 11px; color: var(--ink-soft); }
.notiz .kopfzeile .art { text-transform: uppercase; letter-spacing: 0.05em; }
.notiz .kopfzeile .erledigt { flex: none; align-self: center; margin: 0; accent-color: var(--blau); }
.notiz .wz-reihe { margin-left: auto; display: flex; gap: 8px; flex: none; }
.notiz .zeigen { background: none; border: none; color: var(--blau); font-size: 11px; text-decoration: underline; text-underline-offset: 2px; padding: 0; }
.notiz .zeigen.loeschen { color: var(--warn); }
.notiz .inhalt { margin-top: 3px; white-space: pre-wrap; }
.notiz .inhalt--leer { color: var(--ink-soft); font-style: italic; }
.notiz .betrifft {
  margin-top: 5px; background: none; border: 1px solid var(--line-stark);
  padding: 1px 7px; font-size: 10.5px; color: var(--ink-soft);
}
.notiz .betrifft:hover { border-color: var(--blau); color: var(--blau); }
.notiz-bearbeiten { margin-top: 6px; display: flex; flex-direction: column; gap: 6px; }
.notiz-bearbeiten textarea {
  width: 100%; min-height: 64px; resize: vertical;
  border: 1px solid var(--blau); background: var(--paper);
  padding: 7px 9px; font: inherit; font-size: 12.5px; color: var(--ink);
}
.notiz-bearbeiten textarea:focus { outline: none; box-shadow: 0 0 0 2px rgba(20, 120, 232, 0.16); }
.betrifft-wahl { display: flex; align-items: center; gap: 7px; font-size: 11px; color: var(--ink-soft); }
.betrifft-wahl select { flex: 1; min-width: 0; border: 1px solid var(--line-stark); background: var(--paper); padding: 4px 6px; font: inherit; font-size: 11.5px; color: var(--ink); }
.notiz-bearbeiten-fuss { display: flex; align-items: center; gap: 10px; }
.notiz-bearbeiten-fuss .bestaetigen { border: 1px solid var(--blau); background: none; color: var(--blau); padding: 4px 12px; font-size: 11.5px; font-weight: 600; }
.notiz-bearbeiten-fuss .bestaetigen:hover { background: var(--blau); color: #fff; }
.notiz-neu { margin-top: 14px; }
.notiz-neu textarea {
  width: 100%; min-height: 74px; resize: vertical;
  border: 1px solid var(--line-stark); background: var(--paper);
  padding: 9px 10px; font: inherit; font-size: 12.5px; color: var(--ink);
}
.notiz-neu-hinweis { color: var(--ink-soft); font-size: 10.5px; font-style: italic; margin: 5px 0 0; }

.schublade-tafel--chat .schublade-koerper { display: flex; flex-direction: column; gap: 11px; }
.nachricht { max-width: 92%; font-size: 13px; }
.nachricht .von { font-size: 10.5px; letter-spacing: 0.05em; text-transform: uppercase; color: var(--ink-soft); margin-bottom: 2px; }
.nachricht--ich { align-self: flex-end; text-align: right; }
.nachricht--ich .inhalt { background: var(--panel-tief); padding: 7px 10px; display: inline-block; text-align: left; }
.nachricht--system .inhalt { border-left: 1px solid var(--line-stark); padding-left: 10px; }
.nachricht .beleg { display: block; margin-top: 5px; font-size: 11.5px; color: var(--blau); background: none; border: none; padding: 0; text-decoration: underline; text-underline-offset: 2px; }

/* Skill-Aktivität des Agenten — was er tut, während er es tut. */
.skill { align-self: stretch; border-left: 2px solid var(--line-stark); padding: 3px 0 3px 9px; font-size: 12px; }
.skill[data-phase="laeuft"] { border-left-color: var(--blau); }
.skill[data-phase="fertig"] { border-left-color: var(--ok); }
.skill[data-phase="fehler"] { border-left-color: var(--warn); }
.skill-kopf { display: flex; align-items: baseline; gap: 7px; flex-wrap: wrap; }
.skill-was { color: var(--ink-soft); }
.skill-punkt { width: 6px; height: 6px; flex: none; align-self: center; background: var(--line-stark); border-radius: 50%; }
.skill[data-phase="laeuft"] .skill-punkt { background: var(--blau); animation: skill-puls 1.2s var(--ease) infinite; }
.skill[data-phase="fertig"] .skill-punkt { background: var(--ok); }
.skill[data-phase="fehler"] .skill-punkt { background: var(--warn); }
@keyframes skill-puls { 0%, 100% { opacity: 1; } 50% { opacity: .25; } }
.skill-herkunft { font-size: 10px; letter-spacing: .04em; text-transform: uppercase; color: var(--warn); border: 1px solid var(--warn); padding: 0 4px; }
.skill-chip { margin-left: auto; font-size: 11px; border: 1px solid currentColor; padding: 0 6px; }
.skill-chip[data-art="ok"] { color: var(--ok); }
.skill-chip[data-art="warn"] { color: var(--warn); }
.skill-chip[data-art="fehler"] { color: var(--warn); }
.skill-eingabe { color: var(--ink-soft); font-size: 11px; font-style: italic; margin-top: 1px; }
.skill-datei { display: block; margin-top: 4px; font-size: 11.5px; color: var(--blau); background: none; border: none; padding: 0; text-decoration: underline; text-underline-offset: 2px; }

.chat-fuss { border-top: 1px solid var(--line); padding: 10px 12px; display: flex; gap: 7px; align-items: center; flex: none; }
.chat-fuss input {
  flex: 1; border: 1px solid var(--line-stark); background: var(--paper);
  padding: 8px 10px; font: inherit; font-size: 12.5px; color: var(--ink);
}
.diktat {
  width: 34px; height: 34px; flex: none; display: grid; place-items: center;
  border: 1px solid var(--line-stark); background: none; color: var(--ink-soft);
  transition: background 150ms var(--ease), color 150ms var(--ease), border-color 150ms var(--ease);
}
.diktat:hover { border-color: var(--blau); color: var(--blau); }
.diktat[aria-pressed="true"] {
  border-color: var(--blau); background: var(--blau); color: #fff;
  animation: diktat-puls 1.6s var(--ease) infinite; /* aus bei prefers-reduced-motion, siehe unten */
}
.diktat svg { width: 16px; height: 16px; stroke-width: 1.6; }
@keyframes diktat-puls {
  0%, 100% { box-shadow: 0 0 0 0 rgba(20, 120, 232, 0.35); }
  55% { box-shadow: 0 0 0 6px rgba(20, 120, 232, 0); }
}

/* Diktat an jedem Feld (B5). Der Knopf ist dieselbe Marke wie im Chat, nur
 * kleiner und ohne Rahmen, solange niemand ihn braucht — an einem Feld der
 * Akte steht er neben dem Wert und darf ihn nicht ueberstrahlen. */
.mit-diktat { display: block; }
.diktat-leiste { display: flex; align-items: center; gap: 6px; }
.mit-diktat > .diktat-leiste > input,
.mit-diktat > .diktat-leiste > textarea { flex: 1; min-width: 0; }
.mit-diktat--block > textarea { width: 100%; display: block; }
.mit-diktat--block > .diktat-leiste { justify-content: flex-end; margin-top: 4px; }
.diktat--klein { width: 28px; height: 28px; border-color: transparent; border-radius: 8px; }
.diktat--klein svg { width: 14px; height: 14px; }
.diktat--klein:hover { border-color: var(--blau); }
.diktat--klein[disabled] { opacity: .35; }
.diktat[data-bereit="nein"] { opacity: .4; }
.diktat-lage { display: block; font-size: 10.5px; color: var(--ink-soft); font-style: italic; }
.suche-form .mit-diktat { flex: 1; }   /* die Huelle tritt an die Stelle des Feldes */
.mit-diktat--block .diktat-lage { margin-right: auto; text-align: left; }

.leer { color: var(--ink-soft); font-style: italic; padding: 22px 0; text-align: center; font-size: 12.5px; }
.pille { font-size: 10.5px; letter-spacing: 0.05em; text-transform: uppercase; border: 1px solid var(--line-stark); padding: 2px 7px; color: var(--ink-soft); }
.pille--pruefung { border-color: var(--blau); color: var(--blau); }

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

/* --------------------------------------------------------------- Anmeldung */

.anmeldung {
  position: fixed; inset: 0; z-index: 50;
  background: linear-gradient(160deg, #f2f7fd 0%, #ffffff 55%);
  display: grid; place-items: center;
}
.anmeldung-karte {
  width: min(400px, calc(100vw - 40px));
  background: var(--paper); border: 1px solid var(--line);
  border-radius: 16px; padding: 30px 30px 22px;
  box-shadow: 0 30px 70px -40px rgba(11, 34, 57, 0.35);
}
.anmeldung-marke { display: flex; align-items: center; gap: 9px; margin-bottom: 18px; }
.anmeldung-marke svg { width: 30px; height: 30px; }
.anmeldung-marke .n { font-family: "Bricolage Grotesque", sans-serif; font-weight: 640; font-size: 19px; }
.anmeldung-marke .n b { color: var(--blau); }
.anmeldung-karte h2 { font-family: "Bricolage Grotesque", sans-serif; font-size: 19px; margin: 0 0 4px; }
.anmeldung-hinweis { color: var(--ink-soft); font-size: 12.5px; margin: 0 0 16px; }
.benutzerwahl { display: flex; flex-direction: column; gap: 8px; }
.benutzerwahl button {
  text-align: left; background: none; border: 1px solid var(--line);
  border-radius: 10px; padding: 11px 14px;
  transition: border-color 150ms var(--ease), transform 150ms var(--ease);
}
.benutzerwahl button:hover { border-color: var(--blau); transform: translateY(-1px); }
.benutzerwahl button[aria-pressed="true"] { border-color: var(--blau); background: var(--panel); }
.benutzerwahl .bn { display: block; font-weight: 600; font-size: 13.5px; }
.benutzerwahl .br { display: block; color: var(--ink-soft); font-size: 11.5px; }
.anmeldung-form { margin-top: 14px; display: flex; flex-direction: column; gap: 8px; }
.anmeldung-form[hidden] { display: none; }
.anmeldung[hidden] { display: none; }
.anmeldung-fehler { color: var(--warn); font-size: 12px; margin: 4px 0 0; }
.anmeldung-form input[data-fehler="true"] { border-color: var(--warn); box-shadow: 0 0 0 2px rgba(180, 84, 10, 0.14); }
.anmeldung-form label { font-size: 11.5px; color: var(--ink-soft); }
.anmeldung-form input {
  border: 1px solid var(--line-stark); background: var(--paper); border-radius: 8px;
  padding: 9px 11px; font: inherit; font-size: 13px; color: var(--ink);
}
.anmeldung-form input:focus { outline: none; border-color: var(--blau); box-shadow: 0 0 0 2px rgba(20, 120, 232, 0.16); }
.anmeldung-fuss { color: var(--ink-soft); font-size: 10.5px; font-style: italic; margin: 14px 0 0; }
/* Die Kopfzeile darf nicht ueberlaufen — gemessen und behoben am 21.08. (C3).
 *
 * Vorher: `.kopf-rechts` und `.kopf-benutzer` waren Flex-Container ohne
 * `min-width: 0`. Ein Flex-Kind schrumpft standardmaessig nicht unter seine
 * Inhaltsbreite; die Reihe wuchs also einfach weiter, `scrollWidth` stand bei
 * 1310 gegen `clientWidth` 1280, und weil `body` `overflow-x: hidden` traegt
 * und die Kopfzeile eine feste Hoehe hat, wanderten die hinteren Knoepfe nach
 * OBEN aus dem Fenster: der Knopf „Urkundenarten" lag bei `y = -28`. Sichtbar
 * und aktiv und trotzdem nicht anklickbar — `smoke_katalog.py` ist genau
 * daran gescheitert, zweimal, mit unterschiedlichen Verursachern.
 *
 * Es ist keine Frage von einem Knopf zu viel: mit jedem weiteren Bereich
 * (A7 Verwaltung, B3 Wissensbasis, B6 Katalog, C1 Termine …) kommt einer dazu.
 * Deshalb gibt jetzt der Name nach und nicht die Bedienung — ein abgeschnittener
 * Name ist unschoen, ein unerreichbarer Knopf ist kaputt. */
/* `min-width: 0` muss an JEDER Stelle der Kette stehen — ein Flex-Kind
 * schrumpft sonst nicht unter seine Inhaltsbreite, und eine einzige Lücke in
 * der Kette macht die ganze Regel wirkungslos. Hier sind es vier Ebenen:
 * `.kopf` → `.kopf-rechts` → `#kopf-kanzlei` → `.kopf-benutzer` → `.kopf-wer`.
 * Beim ersten Versuch fehlte `#kopf-kanzlei`, und der Ueberlauf blieb bei
 * 207 px stehen; erst mit allen vier ist er 0. */
.kopf-rechts { min-width: 0; }
#kopf-kanzlei { min-width: 0; display: block; }
.kopf-benutzer { display: flex; align-items: baseline; gap: 9px; min-width: 0; }
.kopf-benutzer .kopf-wer {
  min-width: 0; flex: 0 1 auto;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* `.abmelden` stand hier bis f2 mit in der Reihe. Der Knopf ist nicht weg — er
   liegt im Benutzer-Menü (Konzept 18, Abschnitt 5) und ist damit kein Flex-Kind
   dieser Zeile mehr. Eine Regel, die auf nichts mehr zeigt, ist die Sorte
   Ballast, die beim nächsten Umbau als Beweis missverstanden wird. */
.kopf-benutzer .nf-kopfknopf, .kopf-benutzer .rolle {
  flex: none; white-space: nowrap;
}
/* Nachtrag B3 (24.08.): der sechste Bereich hat die Reihe erneut ueberlaufen
   lassen, und C3s Satz von oben („wer als Naechster hier etwas anhaengen will,
   raeumt das zuerst auf") ist damit faellig geworden.

   **Gemessen, nicht vermutet** (Chromium, 1280 px, angemeldet als Notarin):
   `.kopf-benutzer` wollte 527 px und hatte 507 — 20 px zu viel —, und zwar
   **nachdem** `.kopf-wer` bereits auf Breite 0 geschrumpft war. Die Kette von
   C4 gibt genau so viel nach, wie der Kanzleiname breit ist; ist er weg, ist
   Schluss, und der naechste Knopf schiebt die Reihe wieder aus dem Fenster.
   Das ist kein Fehler in C4s Reparatur — sie hat den Ueberlauf von damals
   beseitigt. Es ist die Grenze ihrer Bauart, und die faellt erst auf, wenn man
   an sie stoesst.

   Zwei Zeilen, und die Reihenfolge ist die Aussage:

   1. Der Name gibt WEITER zuerst nach (Schrumpffaktor 100 gegen 1) — das ist
      unveraendert C4s Entscheidung, hier nur ausdruecklich statt zufaellig.
   2. Ist er aufgebraucht, geben die Knopfbeschriftungen nach, mit Ellipse und
      einer Untergrenze. Bei 1280 px kostet das heute rund vier Pixel je Knopf,
      also kaum einen Buchstaben.

   Der Text bleibt dabei vollstaendig im DOM: ein Screenreader liest ihn ganz
   vor, `title` zeigt ihn beim Zeigen, und die Smokes, die ihre Knoepfe ueber
   `:has-text(…)` finden, merken davon nichts.

   **Das ist eine Stufe und keine Loesung.** Sie traegt die naechsten zwei, drei
   Bereiche. Wer den zehnten anhaengt, baut die Reihe zu einem Menue um — dann
   aber als eigene Aufgabe und nicht nebenbei; die Umstellung fasst jeden Smoke
   an, der einen Kopfknopf anklickt. */
.kopf-benutzer .kopf-wer { flex: 0 100 auto; }
.kopf-benutzer .nf-kopfknopf {
  flex: 0 1 auto; min-width: 3.5em;
  overflow: hidden; text-overflow: ellipsis;
}
.kopf-benutzer .rolle { color: var(--ink-soft); font-size: 11px; }
/* --------------------------------------------------------- Tastatur-Kürzel */

.kuerzel { position: fixed; inset: 0; z-index: 60; background: rgba(11, 34, 57, 0.28); display: grid; place-items: center; }
.kuerzel[hidden] { display: none; }
.kuerzel-karte {
  width: min(380px, calc(100vw - 40px));
  background: var(--paper); border: 1px solid var(--line);
  border-radius: 14px; padding: 20px 22px 16px;
  box-shadow: 0 30px 70px -40px rgba(11, 34, 57, 0.45);
}
.kuerzel-kopf { display: flex; align-items: center; margin-bottom: 12px; }
.kuerzel-kopf h2 { font-size: 16px; }
.kuerzel-kopf .zu { margin-left: auto; background: none; border: none; color: var(--ink-soft); font-size: 19px; line-height: 1; padding: 2px 5px; }
.kuerzel-zeile { display: flex; align-items: baseline; gap: 10px; padding: 5px 0; border-bottom: 1px solid var(--line); font-size: 12.5px; }
.kuerzel-zeile kbd {
  flex: none; min-width: 118px; font-family: "Spline Sans Mono", monospace; font-size: 11px;
  border: 1px solid var(--line-stark); padding: 1px 6px; color: var(--ink-soft);
}
.kuerzel-fuss { color: var(--ink-soft); font-size: 10.5px; font-style: italic; margin: 12px 0 0; }

.freigabe-rolle { color: var(--ink-soft); font-size: 11.5px; font-style: italic; margin: 8px 0 0; text-align: center; }

/* ------------------------------------------------------- Anlage-Dialog (A1) */
/* Bewusst ans Dateiende gehängt: an dieser Datei arbeiten in Sprint 2 mehrere
 * Sessions, und ein Block am Ende macht aus einem Merge-Konflikt ein Anhängen. */

.dialog { position: fixed; inset: 0; z-index: 60; background: rgba(11, 34, 57, 0.28); display: grid; place-items: center; }
.dialog[hidden] { display: none; }
.dialog-karte {
  width: min(420px, calc(100vw - 40px));
  background: var(--paper); border: 1px solid var(--line);
  border-radius: 14px; padding: 20px 22px 16px;
  box-shadow: 0 30px 70px -40px rgba(11, 34, 57, 0.45);
}
.dialog-kopf { display: flex; align-items: center; margin-bottom: 14px; }
.dialog-kopf h2 { font-family: "Bricolage Grotesque", sans-serif; font-size: 17px; }
.dialog-kopf .zu { margin-left: auto; background: none; border: none; color: var(--ink-soft); font-size: 19px; line-height: 1; padding: 2px 5px; }
.dialog-form { display: flex; flex-direction: column; gap: 5px; }
.dialog-form label { font-size: 11.5px; color: var(--ink-soft); margin-top: 8px; }
.dialog-form label:first-of-type { margin-top: 0; }
.dialog-zusatz { font-style: italic; }
.dialog-form input, .dialog-form select, .dialog-form textarea {
  border: 1px solid var(--line-stark); background: var(--paper); border-radius: 8px;
  padding: 9px 11px; font: inherit; font-size: 13px; color: var(--ink); width: 100%;
}
.dialog-form textarea { resize: vertical; min-height: 62px; }
.dialog-form input:focus, .dialog-form select:focus, .dialog-form textarea:focus {
  outline: none; border-color: var(--blau); box-shadow: 0 0 0 2px rgba(20, 120, 232, 0.16);
}
.dialog-form input[data-fehler="true"] { border-color: var(--warn); box-shadow: 0 0 0 2px rgba(180, 84, 10, 0.14); }
.dialog-hinweis { color: var(--ink-soft); font-size: 11.5px; margin: 2px 0 0; }
.dialog-fehler { color: var(--warn); font-size: 12px; margin: 8px 0 0; }
.dialog-fehler[hidden] { display: none; }
.dialog-hinweis[hidden] { display: none; }
.dialog-knoepfe { display: flex; gap: 8px; margin-top: 16px; }
.dialog-knoepfe .knopf { flex: 1; }
.dialog-fuss { color: var(--ink-soft); font-size: 10.5px; font-style: italic; margin: 12px 0 0; }

/* „Neue Akte" über der Vorgangsliste. */
.listen-filter .knopf--neu { width: 100%; margin-bottom: 2px; }

/* Eine Akte ohne Beleg — der Normalfall in der ersten Minute nach der Anlage. */
.reiter-leer { color: var(--ink-soft); font-size: 11.5px; font-style: italic; padding: 6px 2px; }

/* Lebenszyklus-Knöpfe unter Freigeben/Zurückweisen. */
.akte-reihe { display: flex; gap: 8px; margin-top: 8px; }
.akte-reihe .knopf { flex: 1; }
/* ------------------------------------------------------------- Sprachwahl */

/* Die Sprachwahl steht in der Kopfleiste und auf der Anmeldekarte — wer sich
 * noch nicht angemeldet hat, muss die Anmeldung trotzdem lesen koennen. */

.kopf-rechts { display: flex; align-items: baseline; gap: 14px; }

.sprachwahl {
  font: inherit; font-size: 11.5px; color: var(--ink-soft);
  background: none; border: 1px solid var(--line-stark); border-radius: 6px;
  padding: 2px 4px;
}
.sprachwahl:focus-visible { outline: 2px solid var(--blau-tief); outline-offset: 1px; }

.anmeldung-sprache { display: flex; justify-content: flex-end; margin: 0 0 10px; }

/* ------------------------------------------------------- Fassungsanzeige (B7)

   Die Zahl steht in der Kopfleiste und beantwortet die erste Frage jedes
   Support-Anrufs. Sie soll lesbar sein und sonst nichts — deshalb dieselbe
   zurueckgenommene Farbe wie die Kanzleizeile daneben und kein Rahmen.

   `.warnt` ist der eine Fall, in dem sie nicht nur informiert: die Datenbank
   steht auf einem aelteren Schemastand als das Programm. Siehe js/fassung.js. */

.fassung-chip {
  font-size: 11.5px;
  color: var(--ink-soft);
  font-variant-numeric: tabular-nums;
  cursor: default;
  /* Auswaehlbar: wer anruft, soll die Zahl kopieren koennen. */
  -webkit-user-select: text;
  user-select: text;
}
.fassung-chip[hidden] { display: none; }
.fassung-chip.warnt {
  color: var(--warn);
  font-weight: 600;
}

/* -------------------------------------------------- Gespräche im Chat (A8)

   Die Liste der gespeicherten Unterhaltungen sitzt über dem Chatfenster: ein
   Kopf mit Zähler und „Neues Gespräch", darunter die aufklappbare Liste.

   Sie ist bewusst zurückgenommen — sie ist Navigation und nicht Inhalt. Was
   auffallen soll, ist das Gespräch selbst; wer die Liste braucht, sucht sie.
   Deshalb kleine Schrift, keine Flächen, und eine Trennlinie statt eines
   Kastens. Der laufende Verlauf trägt links den blauen Strich, denselben, den
   eine laufende Skill-Zeile trägt: es ist dieselbe Aussage („hier passiert
   gerade etwas") in derselben Sprache.

   Der Abschnitt wird von `js/assistent.js` gezeichnet und steht deshalb nicht
   in `index.html` — der Stil steht trotzdem hier und nicht als `<style>` im
   Skript. Stil gehört ins Stylesheet, auch wenn das Markup aus JavaScript kommt. */

.verlaeufe {
  flex: none;
  border-bottom: 1px solid var(--line);
  padding: 0 12px 8px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.verlaeufe-kopf { display: flex; align-items: center; gap: 8px; }
.verlaeufe-auf {
  flex: 1; text-align: left; background: none; border: none; padding: 2px 0;
  font: inherit; font-size: 11px; letter-spacing: 0.05em; text-transform: uppercase;
  color: var(--ink-soft);
}
.verlaeufe-auf:hover { color: var(--ink); }
.verlaeufe-auf::before { content: "\25B8"; display: inline-block; margin-right: 6px; transition: transform 150ms var(--ease); }
.verlaeufe-auf[aria-expanded="true"]::before { transform: rotate(90deg); }
.verlaeufe-neu.knopf--leer { font-size: 11px; padding: 4px 9px; }

.verlaeufe-liste { display: flex; flex-direction: column; max-height: 190px; overflow-y: auto; }
.verlaeufe-liste[hidden] { display: none; }
.verlaeufe-leer { color: var(--ink-soft); font-size: 11.5px; font-style: italic; margin: 2px 0 0; }

.verlauf-zeile { display: flex; align-items: flex-start; gap: 6px; border-left: 2px solid transparent; padding-left: 7px; }
.verlauf-zeile[data-offen="true"] { border-left-color: var(--blau); }
.verlauf-titel {
  flex: 1; min-width: 0; text-align: left; background: none; border: none;
  padding: 5px 0; font: inherit; font-size: 12px; color: var(--ink);
}
.verlauf-titel:hover { color: var(--blau); }
.verlauf-meta { display: block; font-size: 10.5px; color: var(--ink-soft); margin-top: 1px; }
.verlauf-weg {
  flex: none; width: 22px; height: 22px; margin-top: 3px; line-height: 1;
  background: none; border: none; color: var(--ink-soft); font-size: 15px;
}
.verlauf-weg:hover { color: var(--warn); }

/* --------------------------------------------- Skill-Anzeige und Chat (B8)

   Drei Ergänzungen an den Abschnitten oben, angehängt statt eingeflochten:
   `notarflow.css` ist in dieser Welle ein Hotspot, und ein Block am Ende
   kollidiert mit niemandem (dasselbe Rezept wie A8 für „Gespräche im Chat").

   1. `.skill-server` — wessen Werkzeug geantwortet hat (Vertrag V-3).
   2. `.chat-abbruch` — der Knopf, der eine laufende Antwort anhält.
   3. Umbenennen-Knopf und leerer Zustand in der Verlaufsliste. */

/* Fremdes Werkzeug: dieselbe Bauform wie `.skill-herkunft` (Kästchen, klein,
   Versalien), aber in der ruhigen Farbe und nicht in --warn. Das ist eine
   Entscheidung und kein Versehen: „aus Dokument" ist eine Herabstufung des
   Vertrauens und gehört gelb; „über dms" ist eine Auskunft über die Herkunft
   und keine Warnung. Wären beide gelb, sagte die Farbe nichts mehr. Wo es
   wirklich brenzlig wird — ein fremdes Werkzeug, das schreiben will —, steht
   die Rückfrage davor und nicht ein Farbton. */
.skill-server {
  font-size: 10px; letter-spacing: .04em; text-transform: uppercase;
  color: var(--ink-soft); border: 1px solid var(--line-stark); padding: 0 4px;
  max-width: 14em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.skill[data-server] { border-left-style: dashed; }

/* Der Abbruch-Knopf steht rechts in der Fusszeile und ist nur da, solange
   etwas läuft (`hidden` setzt das Skript). Das gesperrte Eingabefeld daneben
   bleibt lesbar — ausgegraut heisst hier „gerade nicht", nicht „kaputt". */
.chat-abbruch.knopf--leer { flex: none; font-size: 11px; padding: 5px 10px; }
/* `.knopf` setzt `display: block`, und ein Author-`display` sticht das
   `display: none`, das der Browser einem `hidden` mitgibt. Ohne diese Zeile
   stünde der Abbruch-Knopf dauerhaft da — sichtbar geworden im Smoke, und zwar
   sofort: „hidden=\"\" … unexpected value visible". Dieselbe Falle gilt für
   jeden Knopf, den ein Modul über `hidden` schaltet. */
.chat-abbruch[hidden] { display: none; }
.chat-fuss input:disabled { opacity: 0.7; cursor: default; }
.chat-fuss[data-laeuft="true"] input { border-style: dashed; }

/* Umbenennen — dieselbe Grösse wie das Löschkreuz daneben, damit die beiden
   Knöpfe am Zeilenende eine Reihe bilden und keine Treppe. */
.verlauf-um {
  flex: none; width: 22px; height: 22px; margin-top: 3px; line-height: 1;
  background: none; border: none; color: var(--ink-soft); font-size: 12px;
}
.verlauf-um:hover { color: var(--blau); }

/* Der leere Zustand ist seit B8 zweizeilig: was fehlt, und was zu tun ist. */
.verlaeufe-leer { display: flex; flex-direction: column; gap: 3px; }
.verlaeufe-leer p { margin: 0; font-size: 11.5px; color: var(--ink-soft); font-style: italic; }
.verlaeufe-leer .nf-mini { font-style: normal; font-size: 10.5px; }

/* ------------------------------------------- Basisansicht (f2, Konzept 18) */
/* Ans Dateiende gehängt, wie die Blöcke darüber: an dieser Datei arbeiten in
   jeder Welle mehrere Sessions, und ein Block am Ende macht aus einem
   Merge-Konflikt ein Anhängen.

   Zwei Dinge stehen hier, und beide sind Entlastung und kein Zuwachs:
   „Mehr" in der Leiste, und das Benutzer-Menü, das VIER Textknöpfe der
   Kopfzeile durch EINEN ersetzt. Der Überlauf-Smoke misst das Ergebnis bei
   1280 UND bei 1024 px (`smoke_erweiterungen.py`). */

/* „Mehr" ist ein Knopf wie jeder andere in der Leiste — dieselbe Größe,
   dasselbe Symbolmaß, derselbe Platz. Das ist Absicht: er ist ein Bereich
   unter Bereichen und kein Systemknopf, der sich abhebt. Ausgeklappt trägt er
   die Farbe, die auch der offene Bereich trägt. */
.leiste-mehr[aria-expanded="true"] { color: var(--blau); }
.leiste-mehr svg { width: 18px; height: 18px; }

/* Der einzeilige Hinweis beim ERSTEN Ausklappen. Er steht neben der Leiste und
   nicht darüber: was er erklärt, ist genau der Knopf, an dem er hängt. */
.leiste-hinweis {
  position: fixed; z-index: 70; max-width: 250px;
  background: var(--ink); color: var(--paper);
  border-radius: 10px; padding: 9px 12px; font-size: 11.5px; line-height: 1.45;
  box-shadow: 0 18px 40px -24px rgba(11, 34, 57, 0.6);
  pointer-events: none;
}

/* Name und Rolle sind EIN Element — siehe die Begründung in `app.js`
   (`zeichneKopfRechts`, Festlegung 4). Für die Flex-Kette heißt das eine Ebene
   mehr, und `min-width: 0` muss auch hier stehen: eine einzige Lücke in der
   Kette macht die ganze Regel wirkungslos (C4s Befund, 21.08.).
   Die Kette ist jetzt:
   `.kopf` → `.kopf-rechts` → `#kopf-kanzlei` → `.kopf-benutzer` → `.kopf-ich`
   → `.kopf-wer`. */
.kopf-ich {
  display: flex; align-items: baseline; gap: 9px;
  min-width: 0; flex: 0 100 auto;
}

/* Der Auslöser des Menüs. Er ist schmal und trägt kein Wort — vier
   Beschriftungen sind darin verschwunden, eine fünfte davor wäre der Rückweg. */
.kopf-menue-knopf {
  flex: none; background: none; border: 1px solid var(--line-stark);
  border-radius: 8px; color: var(--ink-soft);
  font-size: 11px; line-height: 1; padding: 4px 7px;
  transition: border-color 150ms var(--ease), color 150ms var(--ease);
}
.kopf-menue-knopf:hover { border-color: var(--blau); color: var(--blau-tief); }
.kopf-menue-knopf[aria-expanded="true"] { border-color: var(--blau); color: var(--blau); }

/* Das Menü selbst: ein Popover an der Kopfzeile, kein Dialog in der Mitte.
   Was hier steht, gehört zu dem Namen, unter dem es hängt. */
.kopf-menue {
  position: fixed; z-index: 65; width: 262px;
  background: var(--paper); border: 1px solid var(--line);
  border-radius: 12px; padding: 6px;
  box-shadow: 0 26px 60px -34px rgba(11, 34, 57, 0.5);
}
.kopf-menue[hidden] { display: none; }
.kopf-menue-wer {
  padding: 7px 10px 6px; font-size: 11.5px; color: var(--ink-soft);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.kopf-menue-strich { height: 1px; background: var(--line); margin: 5px 8px; }
.kopf-menue-zeile {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 4px 10px;
}
.kopf-menue-marke { font-size: 12.5px; color: var(--ink); flex: none; }
.kopf-menue-zeile select {
  flex: 1; min-width: 0; max-width: 150px;
  border: 1px solid var(--line-stark); background: var(--paper);
  border-radius: 7px; padding: 3px 6px; font: inherit; font-size: 11.5px;
  color: var(--ink);
}
.kopf-menue-eintrag {
  display: block; width: 100%; text-align: left;
  background: none; border: none; border-radius: 8px;
  padding: 6px 10px; font-size: 12.5px; color: var(--ink);
}
.kopf-menue-eintrag:hover { background: var(--panel-tief); }
/* Abmelden steht am Ende und trägt die Farbe der Verwaltung, nicht die einer
   Warnung: es ist der normale Abschluss eines Arbeitstages. */
.kopf-menue-eintrag--weg { color: var(--blau-tief); }


/* --- Modul-Sperre + Upsell (BUILD 1) ------------------------------------- */
/* Ein nicht gebuchter Baustein bleibt in der Leiste sichtbar, aber ausgegraut
   und mit einem kleinen, in reinem CSS gezeichneten Schloss (kein Emoji). Der
   Klick oeffnet den Upsell-Hinweis statt der Schublade (siehe app.js). */
.leiste button.gesperrt { position: relative; opacity: .5; }
.leiste button.gesperrt::after {
  content: ""; position: absolute; right: 8px; top: 7px;
  width: 9px; height: 7px; border: 1.5px solid currentColor; border-radius: 1px;
}
.leiste button.gesperrt::before {
  content: ""; position: absolute; right: 10.5px; top: 3px;
  width: 4px; height: 4px; border: 1.5px solid currentColor;
  border-bottom: none; border-radius: 3px 3px 0 0;
}
.leiste-hinweis.upsell { max-width: 260px; line-height: 1.35; }
.leiste-hinweis.upsell .upsell-support { margin-top: .35em; opacity: .8; font-size: .92em; }