/* ===========================================================================
   MDesk – Gestaltung

   ZWEI SCHICHTEN, VERBINDLICH:
   1. Grundpalette – rohe Farbwerte. Werden nirgends unmittelbar verwendet.
   2. Benannte Rollen – was die Bausteine ansprechen.

   Ein --grund-* Wert darf niemals in einem Baustein stehen. Nur so lässt
   sich die Anwendung umfärben, ohne jede Regel einzeln zu suchen; und nur
   so bleibt erkennbar, wofür eine Farbe da ist.

   Bereichsfarben und Statusfarben sind streng getrennt. Sonst liest man
   in einer gemischten Liste einen Zustand hinein, der nicht gemeint ist.
   Bereichsfarben sparsam: Streifen, nicht Fläche.

   Farbe ist nie alleiniger Träger einer Aussage – immer mit Wort oder
   Symbol. Mindestkontrast 4,5:1.
   =========================================================================== */

:root {

  /* --- 1. Grundpalette --------------------------------------------------
     Warmer Grundton: Die Neutraltöne tragen die Wärme, nicht die
     Bereichsfarben. Kopfzeile und Seitenleiste sind die größten
     Farbflächen – an ihnen entscheidet sich der Eindruck.             */

  --grund-umbra-800:   #33271d;
  --grund-umbra-600:   #4a3829;
  /* Zwischenton fuer die aktive Menuekachel: heller als die Leiste,
     dunkel genug fuer weisse Schrift. */
  --grund-umbra-400:   #63503e;
  --grund-umbra-200:   #c9bdb2;
  --grund-kastanie-600: #7a4a32;
  --grund-kastanie-100: #efe0d5;

  --grund-oliv-600:    #4f6b3a;
  --grund-oliv-100:    #e2ead8;

  --grund-petrol-600:  #1f6b6b;
  --grund-petrol-100:  #d7ebeb;

  --grund-pflaume-600: #6b4173;
  --grund-pflaume-100: #eddef0;

  --grund-rost-600:    #a8551b;
  --grund-rost-100:    #f7e3d3;

  /* Vier weitere, nur für Tags. Sie sind gedeckt wie die oberen – eine
     Signalfarbe an einem Tag sähe aus wie eine Warnung, und dafür sind
     die vier unten reserviert. */
  --grund-lehm-600:    #7a6220;
  --grund-lehm-100:    #efe6d3;

  --grund-schiefer-600: #3f4c5c;
  --grund-schiefer-100: #dfe4ea;

  --grund-moos-600:    #3c5f44;
  --grund-moos-100:    #dde9df;

  --grund-beere-600:   #7a3350;
  --grund-beere-100:   #f0dee6;

  /* Signalfarben. Sie bleiben, was sie überall sind – sie sollen nicht
     zum Farbmotiv passen, sondern auffallen. */
  --grund-signal-rot-600:   #b03a29;
  --grund-signal-rot-100:   #f8e2de;
  --grund-signal-gruen-600: #2f6b45;
  --grund-signal-gruen-100: #ddebe0;
  --grund-signal-gelb-600:  #9a6b12;
  --grund-signal-gelb-100:  #f9ecd4;
  --grund-signal-blau-600:  #2e5c8a;
  --grund-signal-blau-100:  #dfe8f2;

  --grund-neutral-900: #241d17;
  --grund-neutral-700: #4a3f36;
  --grund-neutral-500: #7a6b5e;
  --grund-neutral-300: #d6cabb;
  --grund-neutral-200: #e8ded1;
  --grund-neutral-100: #f5efe6;
  --grund-neutral-000: #fffdfa;


  /* --- 2. Rollen: Flächen und Ränder ------------------------------------ */

  --farbe-flaeche-seite:        var(--grund-neutral-100);
  --farbe-flaeche-block:        var(--grund-neutral-000);
  --farbe-flaeche-hervor:       var(--grund-neutral-200);
  --farbe-flaeche-drawer:       var(--grund-neutral-000);
  --farbe-flaeche-seitenleiste: var(--grund-umbra-600);
  --farbe-flaeche-seitenleiste-aktiv: var(--grund-umbra-400);
  --farbe-flaeche-kopf:         var(--grund-umbra-800);

  --farbe-rand-block:           var(--grund-neutral-300);
  --farbe-rand-betont:          var(--grund-neutral-500);


  /* --- 3. Rollen: Schrift ----------------------------------------------- */

  --farbe-schrift:              var(--grund-neutral-900);
  --farbe-schrift-gedaempft:    var(--grund-neutral-700);
  --farbe-schrift-invers:       var(--grund-neutral-000);
  /* Zurückgenommene Schrift auf dunklem Grund. Als eigene Farbe, nicht
     über Deckkraft: Deckkraft blendet gegen den Untergrund und wird
     unlesbar, sobald der Untergrund sich ändert. */
  --farbe-schrift-invers-gedaempft: var(--grund-umbra-200);

  /* Verweise tragen die Textfarbe: Blau gehört nicht in diese Palette.
     Dann muss die Unterstreichung die Erkennbarkeit tragen – Farbe
     allein darf die Bedeutung nicht tragen. */
  --farbe-verweis:              var(--farbe-schrift);
  --farbe-verweis-aktiv:        var(--grund-kastanie-600);


  /* --- 4. Rollen: Bereichsfarben ----------------------------------------
     Je Hauptbereich eine Farbe. Sparsam: Seitenleiste, Kopfzeile,
     schmaler Streifen am Block – keine ganzen Flächen.               */

  --farbe-bereich-klienten:       var(--grund-kastanie-600);
  --farbe-bereich-dokumente:      var(--grund-petrol-600);
  --farbe-bereich-finanzen:       var(--grund-oliv-600);
  --farbe-bereich-schreiben:      var(--grund-pflaume-600);
  --farbe-bereich-email:          var(--grund-rost-600);
  --farbe-bereich-bueroakte:      var(--grund-neutral-700);

  --farbe-bereich-klienten-hell:  var(--grund-kastanie-100);
  --farbe-bereich-dokumente-hell: var(--grund-petrol-100);
  --farbe-bereich-finanzen-hell:  var(--grund-oliv-100);
  --farbe-bereich-schreiben-hell: var(--grund-pflaume-100);
  --farbe-bereich-email-hell:     var(--grund-rost-100);
  /* Der Büroakte fehlte die helle Stufe – gebraucht seit 0.2.20 für die
     Variablennamen der Stammdaten. */
  --farbe-bereich-bueroakte-hell: var(--grund-neutral-200);


  /* --- 5. Rollen: Status ------------------------------------------------
     STRENG getrennt von den Bereichsfarben.                          */

  /* Die Tag-Farben. Ein Tag speichert den **Namen einer Rolle**, keinen
     Farbwert – so steht es in Migration 008. Die Rolle zeigt hier auf
     ein Paar aus Grund und Schrift. */
  --farbe-tag-kastanie:        var(--grund-kastanie-600);
  --farbe-tag-kastanie-hell:   var(--grund-kastanie-100);
  --farbe-tag-oliv:            var(--grund-oliv-600);
  --farbe-tag-oliv-hell:       var(--grund-oliv-100);
  --farbe-tag-petrol:          var(--grund-petrol-600);
  --farbe-tag-petrol-hell:     var(--grund-petrol-100);
  --farbe-tag-pflaume:         var(--grund-pflaume-600);
  --farbe-tag-pflaume-hell:    var(--grund-pflaume-100);
  --farbe-tag-rost:            var(--grund-rost-600);
  --farbe-tag-rost-hell:       var(--grund-rost-100);
  --farbe-tag-umbra:           var(--grund-umbra-800);
  --farbe-tag-umbra-hell:      var(--grund-umbra-200);
  --farbe-tag-lehm:            var(--grund-lehm-600);
  --farbe-tag-lehm-hell:       var(--grund-lehm-100);
  --farbe-tag-schiefer:        var(--grund-schiefer-600);
  --farbe-tag-schiefer-hell:   var(--grund-schiefer-100);
  --farbe-tag-moos:            var(--grund-moos-600);
  --farbe-tag-moos-hell:       var(--grund-moos-100);
  --farbe-tag-beere:           var(--grund-beere-600);
  --farbe-tag-beere-hell:      var(--grund-beere-100);

  --farbe-status-offen:         var(--grund-signal-rot-600);
  --farbe-status-offen-hell:    var(--grund-signal-rot-100);
  --farbe-status-erledigt:      var(--grund-signal-gruen-600);
  --farbe-status-erledigt-hell: var(--grund-signal-gruen-100);
  --farbe-status-warnung:       var(--grund-signal-gelb-600);
  --farbe-status-warnung-hell:  var(--grund-signal-gelb-100);
  /* Blau kommt in den Bereichsfarben nicht mehr vor. Damit ist es hier
     eindeutig: Was blau ist, ist ein Hinweis. */
  --farbe-status-hinweis:       var(--grund-signal-blau-600);
  --farbe-status-hinweis-hell:  var(--grund-signal-blau-100);


  /* --- 6. Rollen: Schaltflächen -----------------------------------------
     Nach Rolle, nicht je Schaltfläche.                               */

  --farbe-knopf-haupt:          var(--grund-kastanie-600);
  --farbe-knopf-haupt-schrift:  var(--grund-neutral-000);
  --farbe-knopf-neben:          var(--grund-neutral-200);
  --farbe-knopf-neben-schrift:  var(--grund-neutral-900);
  --farbe-knopf-gefahr:         var(--grund-signal-rot-600);
  --farbe-knopf-gefahr-schrift: var(--grund-neutral-000);
}


/* ===========================================================================
   Weitere Schemata: dieselben Rollen, andere Werte. Umgeschaltet über ein
   Attribut am Wurzelelement. In Sprint 1 wird nur das Grundschema
   verwendet – die Struktur muss aber drei tragen können, und das lässt
   sich nur hier belegen.
   =========================================================================== */

/* Burgund: Die Kopfzeile und die Seitenleiste tragen ein tiefes Weinrot,
   die Neutraltoene neigen sich dorthin. Alle fuenfzehn Kontrastpaare
   bestehen; das Gelb ist dunkler als im Grundschema, weil die Marke
   „vorlaeufig" dort mit 4,0 durchfaellt. */
:root[data-schema="burgund"] {
  --grund-umbra-800:   #3a1f27;
  --grund-umbra-600:   #512b35;
  --grund-umbra-400:   #6d3f4a;
  --grund-umbra-200:   #cdb9bd;
  --grund-kastanie-600: #8a2f45;
  --grund-kastanie-100: #f2dde3;
  --grund-signal-gelb-600: #8a5d0c;
  --grund-neutral-900: #231a1c;
  --grund-neutral-700: #4b3c40;
  --grund-neutral-500: #7e6b70;
  --grund-neutral-300: #d9cbce;
  --grund-neutral-200: #ecdee1;
  --grund-neutral-100: #f8f1f2;
  --grund-neutral-000: #fffcfd;
}

/* Dunkelgruen. Zwei Toene mussten dabei ausweichen: Die Klientenfarbe
   stand zunaechst nur 11 Einheiten von der Signalfarbe „erledigt"
   entfernt - ein Bereichsstreifen haette ausgesehen wie eine Marke. Mit
   dem tiefen Tannengruen sind es 24; zum Vergleich haelt die Kastanie im
   Grundschema 33 zum Signalrot. Oliv (Finanzen) weicht nach Ocker aus,
   aus demselben Grund. */
:root[data-schema="tanne"] {
  --grund-umbra-800:   #1b2b24;
  --grund-umbra-600:   #264034;
  --grund-umbra-400:   #3b5b4b;
  --grund-umbra-200:   #bac8c1;
  --grund-kastanie-600: #1c4238;
  --grund-kastanie-100: #d8e6e0;
  --grund-oliv-600:    #75651f;
  --grund-oliv-100:    #efe9cd;
  --grund-signal-gelb-600: #8a5d0c;
  --grund-neutral-900: #1a211d;
  --grund-neutral-700: #3c453f;
  --grund-neutral-500: #6c7772;
  --grund-neutral-300: #cbd3ce;
  --grund-neutral-200: #e0e7e2;
  --grund-neutral-100: #f0f4f1;
  --grund-neutral-000: #fcfefd;
}

:root[data-schema="gedaempft"] {
  --farbe-bereich-klienten:  #8a6552;
  --farbe-bereich-dokumente: #4a7d7d;
  --farbe-bereich-finanzen:  #6b7d55;
  --farbe-bereich-schreiben: #806389;
  --farbe-bereich-email:     #b57444;
}

:root[data-schema="dunkel"] {
  --farbe-flaeche-seite:        #1a1511;
  --farbe-flaeche-block:        #241d17;
  --farbe-flaeche-hervor:       #33291f;
  --farbe-flaeche-drawer:       #241d17;
  --farbe-flaeche-seitenleiste: #2b221a;
  --farbe-flaeche-kopf:         #150f0b;
  --farbe-schrift-invers-gedaempft: #a89b8d;
  --farbe-rand-block:           #453a2f;
  --farbe-rand-betont:          #6d5d4c;
  --farbe-schrift:              #f2ebe1;
  --farbe-schrift-gedaempft:    #bcaf9f;
  --farbe-knopf-neben:          #33291f;
  --farbe-knopf-neben-schrift:  #f2ebe1;
  --farbe-verweis-aktiv:        #c98a68;
}


/* ===========================================================================
   Bausteine – ausschließlich Rollen, keine Grundfarben.
   =========================================================================== */

* {
  box-sizing: border-box;
}

html,
body {
  height: 100%;
  margin: 0;
}

body {
  font-family: "Segoe UI", system-ui, sans-serif;
  font-size: 15px;
  color: var(--farbe-schrift);
  background: var(--farbe-flaeche-seite);
}

a {
  color: var(--farbe-verweis);
  text-decoration: underline;
}

a:hover {
  color: var(--farbe-verweis-aktiv);
}

body.rahmen {
  display: flex;
  flex-direction: column;
}

/* Anmeldung, Kennwortwechsel, Fehlerseite: eine Karte in der Mitte. */
body.mittig {
  display: flex;
  align-items: center;
  justify-content: center;
}

.karte {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  width: 24rem;
  padding: 1.75rem;
  background: var(--farbe-flaeche-block);
  border: 1px solid var(--farbe-rand-block);
  border-radius: 3px;
}

.karte__titel {
  margin: 0 0 0.5rem;
  font-size: 1.2rem;
}

.karte__fuss {
  margin: 0.5rem 0 0;
  font-size: 0.85rem;
  color: var(--farbe-schrift-gedaempft);
}

/* Die Zwei-Faktor-Anmeldung (0.2.76) – Entwurf `entwuerfe/zweifaktor.html`. */
.karte--breit { width: 30rem; }
.karte input.code-feld { width: 10rem; align-self: flex-start; font-size: 1.3rem; letter-spacing: 0.25em; }
.karte .knopf[disabled] { opacity: 0.45; cursor: not-allowed; }
.zf-schritte { margin: 0.3rem 0 0.4rem; padding-left: 1.3rem; }
.zf-schritte li { margin-bottom: 0.6rem; }
.zf-qr { margin: 0.5rem 0 0.3rem; }
.zf-qr svg { display: block; }
.zf-schluessel { display: block; margin-top: 0.2rem; font-size: 0.95rem; letter-spacing: 0.04em; }
.zf-notfall { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.4rem 1.5rem; margin: 0.3rem 0 0.6rem;
  padding: 0.8rem 1rem; list-style: none; border: 1px dashed var(--farbe-rand-block); }
.zf-notfall code { font-size: 1.05rem; letter-spacing: 0.06em; }
.zf-stand { display: grid; grid-template-columns: 9rem 1fr; gap: 0.6rem 1rem; margin: 0.4rem 0; }
.zf-stand dt { font-weight: 600; }
.zf-stand dd { margin: 0; }
.zf-browser { margin: 0 0 0.4rem; padding-left: 1.1rem; font-size: 0.9rem; }
@media print { .karte .knopfzeile, .karte__fuss { display: none; } }

.kopf {
  display: flex;
  align-items: baseline;
  gap: 0.75rem;
  padding: 0.9rem 1.5rem;
  background: var(--farbe-flaeche-kopf);
  color: var(--farbe-schrift-invers);
}

.kopf__name {
  font-size: 1.15rem;
  font-weight: 600;
}

.kopf__version {
  font-size: 0.85rem;
  color: var(--farbe-schrift-invers-gedaempft);
}

.kopf__benutzer {
  margin-left: auto;
}

.kopf__knopf {
  color: var(--farbe-schrift-invers);
  font: inherit;
  background: none;
  border: 1px solid currentColor;
  border-radius: 3px;
  padding: 0.15rem 0.6rem;
  cursor: pointer;
  text-decoration: none;
}

.gestell {
  display: flex;
  flex: 1;
  min-height: 0;
  /* Bezugsrahmen fuer den Drawer: So sitzt er unter der Kopfzeile,
     ohne dass deren Hoehe irgendwo als Zahl steht. */
  position: relative;
}

.seitenleiste {
  flex: 0 0 13rem;
  padding: 1rem 0;
  background: var(--farbe-flaeche-seitenleiste);
  color: var(--farbe-schrift-invers);
}

.seitenleiste ul {
  margin: 0;
  padding: 0 0.6rem;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}

.seitenleiste a,
.seitenleiste__spaeter {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.5rem 0.75rem;
  color: var(--farbe-schrift-invers);
  text-decoration: none;
  border-radius: 6px;
}

.seitenleiste a:hover {
  background: var(--farbe-flaeche-seitenleiste-aktiv);
}

/* Der Punkt, auf dem man steht, ist eine Kachel - kein Farbstreifen:
   Bereichsfarben sind hier bewusst noch nicht vergeben. */
.seitenleiste a[aria-current] {
  background: var(--farbe-flaeche-seitenleiste-aktiv);
  font-weight: 600;
}

/* Noch nicht gebaut: sichtbar, aber erkennbar untätig. Eine leere Seite
   wäre schlechter – sie sähe nach einem Fehler aus. */
.seitenleiste__spaeter {
  color: var(--farbe-schrift-invers-gedaempft);
  cursor: default;
}

.inhalt {
  flex: 1;
  padding: 1.5rem;
  overflow: auto;
}

/* Formulare bekommen eine Breite, Listen und Akten nicht: Ein Eingabefeld
   ueber zwei Bildschirmbreiten liest sich nicht besser, eine Tabelle
   schon. */
.inhalt--schmal {
  max-width: 46rem;
}

/* Kacheln nebeneinander, mit Umbruch. `auto-fill` statt `auto-fit`: Bei
   nur zwei Bloecken sollen sie ihre Breite behalten und nicht auf die
   halbe Seite auseinandergezogen werden.

   `align-items: start` – sonst zieht die hoechste Kachel einer Reihe alle
   anderen auf ihre Hoehe. */
.kacheln {
  columns: 30rem;
  column-gap: 1.25rem;
}

/* Ein Block wird nicht mitten durchgeschnitten. */
.kacheln > .block {
  break-inside: avoid;
}

/* Fuer Kacheln, die eine breite Tabelle tragen: ueber alle Spalten. */
.block--voll {
  column-span: all;
}

.block {
  margin-bottom: 1.25rem;
  /* Oben knapper als unten: Der Titel steht dicht am Rand, der Inhalt
     darunter braucht die Luft. */
  padding: 0.55rem 1.5rem 1.25rem;
  background: var(--farbe-flaeche-block);
  border: 1px solid var(--farbe-rand-block);
  border-radius: 8px;
}

/* Der Bereichsstreifen wird gesetzt, nicht geerbt: Ein Block auf der
   Übersicht gehört zu keinem Bereich und soll auch nicht so aussehen. */
.block--klienten {
  border-left: 4px solid var(--farbe-bereich-klienten);
}

.block--dokumente {
  border-left: 4px solid var(--farbe-bereich-dokumente);
}

.block--finanzen {
  border-left: 4px solid var(--farbe-bereich-finanzen);
}

.block--schreiben {
  border-left: 4px solid var(--farbe-bereich-schreiben);
}

.block--email {
  border-left: 4px solid var(--farbe-bereich-email);
}

.block--bueroakte {
  border-left: 4px solid var(--farbe-bereich-bueroakte);
}

/* Titel links, Aktion rechts. Die Linie sitzt an der Zeile, nicht am
   Titel: sonst endete sie dort, wo die Überschrift aufhört. */
.block__kopf {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 0.6rem;
  padding-bottom: 0.4rem;
  border-bottom: 1px solid var(--farbe-rand-block);
}

.block__kopf .block__titel {
  margin: 0;
  /* Ohne das schrumpft der Titel auf seine Mindestbreite und bricht
     wortweise um - bei offenem Drawer ist die Spalte schmal genug. */
  flex: 1;
  min-width: 0;
}

.abschnitt__kopf {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
}

.block__titel {
  margin: 0 0 0.75rem;
  font-size: 1rem;
  font-weight: 600;
}

.werte {
  margin: 0;
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 0.4rem 1.5rem;
}

.werte dt {
  color: var(--farbe-schrift-gedaempft);
}

.werte dd {
  margin: 0;
  font-weight: 600;
}

.hinweis {
  padding: 0.75rem 1rem;
  background: var(--farbe-status-hinweis-hell);
  border-left: 4px solid var(--farbe-status-hinweis);
  border-radius: 3px;
}

.warnung {
  padding: 0.75rem 1rem;
  background: var(--farbe-status-warnung-hell);
  border-left: 4px solid var(--farbe-status-warnung);
  border-radius: 3px;
}

.block__untertitel {
  margin: 1.5rem 0 0.5rem;
  font-size: 0.95rem;
  font-weight: 600;
}

.fussnote {
  margin: 0.4rem 0 0;
  font-size: 0.85rem;
  color: var(--farbe-schrift-gedaempft);
}

/* **Dunkel und halbfett** seit 0.2.15 (Sammlung 143): *„Ich finde die
   Maske etwas blass."* Gedämpft und dünn trat die Beschriftung hinter
   das Feld zurück, und das Feld selbst hob sich kaum ab. Entwurf:
   entwuerfe/eingabemasken-mischung.html. */
label {
  display: block;
  margin-top: 0.6rem;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--farbe-schrift);
}

/* Der Zusatz in der Beschriftung – „— Beginn des Eintrags" – bleibt
   leicht; er erklärt, er benennt nicht. */
label .gedaempft { font-weight: 400; }

/* **Keine Feldbeschriftungen**: ein Häkchen mit seinem Wort, der Knopf
   zum Hereinnehmen, „Darstellung" in der Kopfzeile, die Suche. */
label:has(> input[type="checkbox"], > input[type="radio"]) {
  font-size: 0.9rem;
  font-weight: 400;
}

label.werkzeug,
.suche label { font-weight: 400; }

/* Nicht mehr aufzaehlen, was gestaltet werden soll, sondern ausnehmen,
   was nicht dazugehoert. Die Aufzaehlung liess type=email und
   type=number auf die Browser-Voreinstellung zurueckfallen - anderer
   Rahmen, andere Abstaende. Beim naechsten Feldtyp waere es wieder
   passiert.

   Die Liste in einem einzigen :not() zu fuehren haelt die Spezifitaet
   niedrig; mit acht einzelnen :not() schluege diese Regel spaetere
   wie .suche input. */
input:not([type="checkbox"], [type="radio"], [type="hidden"], [type="file"],
            [type="submit"], [type="button"], [type="range"], [type="color"]) {
  width: 100%;
  padding: 0.45rem 0.6rem;
  font: inherit;
  color: var(--farbe-schrift);
  background: var(--farbe-flaeche-block);
  /* Kräftiger Rand seit 0.2.15 – der helle Haarstrich war das Einzige,
     was ein Feld vom Drawer trennte. */
  border: 1px solid var(--farbe-rand-betont);
  border-radius: 3px;
}

/* Wo man gerade schreibt: in der Hauptfarbe des Schemas (0.2.15). */
input:focus,
select:focus,
textarea:focus {
  outline: 2px solid var(--farbe-knopf-haupt);
  outline-offset: 0;
  border-color: var(--farbe-knopf-haupt);
}

.tabelle {
  width: 100%;
  border-collapse: collapse;
  margin-top: 0.5rem;
}

.tabelle th,
.tabelle td {
  padding: 0.4rem 0.6rem;
  text-align: left;
  border-bottom: 1px solid var(--farbe-rand-block);
}

.tabelle th {
  font-size: 0.85rem;
  font-weight: 400;
  color: var(--farbe-schrift-gedaempft);
}

/* Die Angabe traegt die Seite, ihre Beschriftung ordnet nur ein. */
.tabelle td {
  font-weight: 600;
}

.knopf {
  display: inline-block;
  margin-top: 0.75rem;
  padding: 0.45rem 1rem;
  font: inherit;
  border: 1px solid transparent;
  border-radius: 3px;
  cursor: pointer;
  text-decoration: none;
}

.knopf--haupt {
  background: var(--farbe-knopf-haupt);
  color: var(--farbe-knopf-haupt-schrift);
}

.knopf--neben {
  background: var(--farbe-knopf-neben);
  color: var(--farbe-knopf-neben-schrift);
}

.knopf--gefahr {
  background: var(--farbe-knopf-gefahr);
  color: var(--farbe-knopf-gefahr-schrift);
}

/* Farbe ist nie alleiniger Träger: Der Punkt steht vor dem Wort, und das
   Wort sagt dasselbe wie die Farbe. */
.marke {
  display: inline-block;
  padding: 0.05rem 0.5rem;
  border-radius: 999px;
  font-size: 0.85rem;
  white-space: nowrap;
}

.marke--offen {
  background: var(--farbe-status-offen-hell);
  color: var(--farbe-status-offen);
}

.marke--warnung {
  background: var(--farbe-status-warnung-hell);
  color: var(--farbe-status-warnung);
}

.marke--erledigt {
  background: var(--farbe-status-erledigt-hell);
  color: var(--farbe-status-erledigt);
}

.gedaempft {
  color: var(--farbe-schrift-gedaempft);
}

input.schmal {
  width: 5rem;
}

/* Die Tabellenzeilen der Wertelisten tragen je ein Formular. Die
   Schaltflächen sollen nebeneinander stehen und nicht die Zeile aufblähen. */
.taten {
  white-space: nowrap;
}

.taten .knopf {
  margin-top: 0;
  padding: 0.2rem 0.6rem;
  font-size: 0.85rem;
}

/* Ein Knopf, der aussieht wie die Verweise neben ihm – „Wiederherstellen"
   an den Fassungen (Sammlung 199). Ein Knopf, weil er etwas ändert. */
.verweisknopf {
  display: inline;
}

.verweisknopf button {
  padding: 0;
  font: inherit;
  color: var(--farbe-verweis);
  background: none;
  border: none;
  text-decoration: underline;
  cursor: pointer;
}

.verweisknopf button:hover {
  color: var(--farbe-verweis-aktiv);
}

.tabelle input {
  padding: 0.25rem 0.4rem;
}

/* Breite Tabellen rollen in sich, statt die Seite auseinanderzuziehen. */
.breit {
  overflow-x: auto;
}

textarea,
select {
  width: 100%;
  padding: 0.45rem 0.6rem;
  font: inherit;
  color: var(--farbe-schrift);
  background: var(--farbe-flaeche-block);
  border: 1px solid var(--farbe-rand-betont);
  border-radius: 3px;
}

.mehrfach {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 1.25rem;
}

.mehrfach__wahl {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  margin-top: 0.6rem;
  color: var(--farbe-schrift);
}

/* ---------- Klientenakte ---------- */

/* Der Titel einer Seite steht ueber ihrem Inhalt, nicht darin - so
   wie der Klientenname ueber der Akte. Ueberschriften *in* einem
   Kasten benennen dagegen den Kasten selbst (block__titel). */
.seitentitel {
  margin: 0 0 1rem;
  font-size: 1.5rem;
}

.klientenkopf {
  margin-bottom: 1rem;
}

.klientenkopf__name {
  margin: 0;
  font-size: 1.5rem;
}

.klientenkopf__kern {
  margin: 0.2rem 0 0;
  color: var(--farbe-schrift-gedaempft);
}

.register {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem;
  margin-bottom: 1.25rem;
  border-bottom: 1px solid var(--farbe-rand-block);
  padding-bottom: 0.5rem;
}

/* „Stammdaten" und „Fachliches" – zwei optische Gruppen, wie im Konzept. */
.register__gruppe {
  margin-right: 0.25rem;
  font-size: 0.85rem;
  color: var(--farbe-schrift-gedaempft);
}

.register__gruppe + .register__reiter {
  margin-right: 0.25rem;
}

.register__reiter {
  padding: 0.35rem 0.75rem;
  border: 1px solid var(--farbe-rand-block);
  border-radius: 3px;
  background: var(--farbe-flaeche-block);
  color: var(--farbe-schrift);
  text-decoration: none;
}

.register__reiter--offen {
  background: var(--farbe-bereich-klienten);
  border-color: var(--farbe-bereich-klienten);
  color: var(--farbe-schrift-invers);
}

.register__reiter--spaeter {
  color: var(--farbe-schrift-gedaempft);
  background: transparent;
  border-style: dashed;
}

.abschnitt {
  margin-top: 1rem;
  padding-top: 0.75rem;
  border-top: 1px solid var(--farbe-rand-block);
}

.block__kopf + .abschnitt {
  margin-top: 0;
  padding-top: 0;
  border-top: none;
}

.abschnitt__titel {
  margin: 0 0 0.25rem;
  font-size: 0.95rem;
  font-weight: 600;
}

.eintrag {
  margin: 0.5rem 0;
  padding: 0.6rem 0.8rem;
  background: var(--farbe-flaeche-hervor);
  border-radius: 6px;
}

/* Abgelaufen ist ein eigener Zustand, kein stiller Normalfall. */
.eintrag--abgelaufen {
  border-left: 3px solid var(--farbe-status-offen);
}

.eintrag__fuss {
  margin: 0.5rem 0 0;
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

/* Besonders geschützte Angabe – dezent, aber vorhanden. */
.geschuetzt {
  color: var(--farbe-status-warnung);
  font-weight: 600;
}

/* ---------- Stammdatenblatt zum Drucken ----------
   Am Bildschirm wie eine Seite Papier, im Druck ohne Bedienelemente.
   Das PDF macht der Browser; die Anwendung erzeugt keines – das kommt
   in Sprint 4 zusammen mit Briefkopf und Schriftarten. */

body.blatt {
  background: var(--farbe-flaeche-seite);
}

.nurbildschirm {
  display: flex;
  align-items: center;
  gap: 1rem;
  max-width: 46rem;
  margin: 1rem auto 0;
  padding: 0 1rem;
}

.blatt__inhalt {
  max-width: 46rem;
  margin: 1rem auto 3rem;
  padding: 2.5rem 3rem;
  background: var(--farbe-flaeche-block);
  border: 1px solid var(--farbe-rand-block);
}

.blatt__kopf {
  margin-bottom: 1.5rem;
  padding-bottom: 0.75rem;
  border-bottom: 2px solid var(--farbe-schrift);
}

.blatt__kopf h1 {
  margin: 0;
  font-size: 1.5rem;
}

.blatt__kopf p {
  margin: 0.2rem 0 0;
}

.blatt__stand {
  color: var(--farbe-schrift-gedaempft);
  font-size: 0.9rem;
}

.blatt__register {
  margin-top: 1.5rem;
}

.blatt__register h2 {
  margin: 0 0 0.5rem;
  padding-bottom: 0.2rem;
  font-size: 1.1rem;
  border-bottom: 1px solid var(--farbe-rand-betont);
}

/* Ein Block soll nicht über den Seitenwechsel zerrissen werden. */
.blatt__block {
  margin: 0.75rem 0 1rem;
  break-inside: avoid;
}

.blatt__block h3 {
  margin: 0 0 0.3rem;
  font-size: 1rem;
}

.blatt__block h4 {
  margin: 0.6rem 0 0.2rem;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--farbe-schrift-gedaempft);
}

.blatt__werte,
.blatt__liste {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 0.5rem;
}

.blatt__werte th {
  width: 14rem;
  padding: 0.15rem 0.5rem 0.15rem 0;
  text-align: left;
  font-weight: 400;
  vertical-align: top;
  color: var(--farbe-schrift-gedaempft);
}

.blatt__werte td,
.blatt__liste td,
.blatt__liste th {
  padding: 0.15rem 0.5rem 0.15rem 0;
  text-align: left;
  vertical-align: top;
}

.blatt__liste th {
  font-size: 0.85rem;
  font-weight: 400;
  color: var(--farbe-schrift-gedaempft);
  border-bottom: 1px solid var(--farbe-rand-block);
}

.blatt__liste td {
  border-bottom: 1px solid var(--farbe-rand-block);
}

.blatt__hinweis {
  font-style: italic;
  color: var(--farbe-schrift-gedaempft);
}

.blatt__fuss {
  margin-top: 2rem;
  padding-top: 0.5rem;
  border-top: 1px solid var(--farbe-rand-block);
  font-size: 0.8rem;
  color: var(--farbe-schrift-gedaempft);
}

@media print {
  /* Schwarz auf Weiß: Ein Ausdruck soll nicht von Flächenfarben leben,
     und die Bereichsfarbe sagt auf Papier nichts. */
  :root {
    --farbe-flaeche-seite: #ffffff;
    --farbe-flaeche-block: #ffffff;
    --farbe-schrift: #000000;
    --farbe-schrift-gedaempft: #333333;
    --farbe-rand-block: #999999;
    --farbe-rand-betont: #000000;
  }

  .nurbildschirm {
    display: none;
  }

  .blatt__inhalt {
    max-width: none;
    margin: 0;
    padding: 0;
    border: none;
  }

  @page {
    size: A4;
    margin: 20mm 18mm;
  }

  body.blatt {
    font-size: 10.5pt;
  }
}

details.block > summary {
  cursor: pointer;
}


/* ---------- Kontaktliste ----------
   Ansprechpartner sind eigene Kontakte und standen deshalb gleichrangig
   in der Liste. Jetzt stehen sie eingerueckt unter ihrer Stelle. */

.suche {
  display: flex;
  align-items: baseline;
  gap: 0.6rem;
  margin: 0 0 0.75rem;
}

.suche label {
  margin: 0;
}

.suche input {
  flex: 0 1 22rem;
  padding: 0.35rem 0.6rem;
  font: inherit;
  color: var(--farbe-schrift);
  background: var(--farbe-flaeche-block);
  border: 1px solid var(--farbe-rand-betont);
  border-radius: 6px;
}

.suche__zahl {
  font-size: 0.85rem;
  color: var(--farbe-schrift-gedaempft);
}

/* Steht vor **jedem** Namen, auch ohne Ansprechpartner - sonst faengt
   jeder zweite Name weiter links an und die Spalte franst aus. */
.klapper {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.4rem;
  height: 1.4rem;
  margin-right: 0.4rem;
  vertical-align: -0.3rem;
  color: var(--farbe-schrift-gedaempft);
  background: var(--farbe-flaeche-hervor);
  border: 1px solid var(--farbe-rand-block);
  border-radius: 4px;
  cursor: pointer;
}

.klapper:hover {
  color: var(--farbe-schrift);
  border-color: var(--farbe-rand-betont);
}

/* Der Platzhalter haelt nur die Breite. */
.klapper--leer {
  background: none;
  border-color: transparent;
  cursor: default;
}

/* Zugeklappt zeigt der Pfeil nach rechts, aufgeklappt nach unten - wie an
   einem Listenfeld. Gedreht statt zwei Zeichen: ein Weg, kein Umschalten. */
.klapper .icon {
  transition: transform 0.12s ease;
}

.klapper[aria-expanded="false"] .icon {
  transform: rotate(-90deg);
}

/* Die Einrueckung sagt, wozu die Zeile gehoert - der Name der Stelle
   steht darueber und muss nicht wiederholt werden. */
.unterzeile > td:first-child {
  padding-left: 3rem;
}

.unterzeile {
  background: var(--farbe-flaeche-hervor);
}

.unterzeile .gedaempft {
  margin-left: 0.4rem;
  font-size: 0.85rem;
}


/* ---------- Icons ----------
   Ein Sprite im Grundgeruest, eingebunden ueber <use>. Nur Umrisse: Die
   Strichfarbe kommt aus `currentColor`, damit ein Icon sich mit seinem
   Text faerbt und in jedem Farbschema stimmt - statt in jeder Datei
   eine eigene Farbe zu tragen. */

.iconvorrat {
  display: none;
}

.icon {
  width: 1.15em;
  height: 1.15em;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}


/* Ein Icon vor einer Beschriftung braucht Luft und eine gemeinsame
   Grundlinie - sonst haengt es unter dem Text. */
.knopf,
.werte a,
.eintrag__fuss a,
.block__kopf a,
.abschnitt__kopf a,
.klientenkopf__kern a,
.suche label {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}


/* Eine Angabe, die von der Stelle stammt und nicht vom Ansprechpartner.
   Zurueckgenommen, damit niemand die Zentrale fuer eine Durchwahl haelt. */
.geerbt {
  font-weight: 400;
  color: var(--farbe-schrift-gedaempft);
  border-bottom: 1px dotted var(--farbe-rand-betont);
  cursor: help;
}


/* ---------- Drawer ----------
   Er legt sich UEBER die Arbeitsflaeche und schiebt sie nicht zusammen.

   Das Konzept (5.4) verlangt das Gegenteil - aber fuer den Dokument-
   Drawer, den man neben der Arbeit liest. Bei einem Bearbeiten-Formular
   kehrt sich die Begruendung um: Wird die Flaeche schmaler, brechen die
   Bloecke um, und ausgerechnet der angeklickte rutscht aus dem Bild.
   Ueberdecken haelt das Bild ruhig; beim Schliessen steht alles dort,
   wo es war. */

:root {
  /* 34rem reichten fuer Formulare, aber nicht fuer eine PDF-Vorschau:
     Der Betrachter des Browsers blendet bei schmalem Fenster seine
     eigenen Knoepfe aus - "der ist da, aber er wird NICHT angezeigt",
     gemeldet am 03.09.2026. Der Griff verstellt sie weiterhin, und die
     eingestellte Breite bleibt gemerkt. */
  --drawer-breite: 46rem;
  /* Solange der Dokumentwähler offen ist. Der Wähler dockt daran an –
     zwei getrennte Werte ließen eine Lücke zwischen beiden. */
  --drawer-schmal: 28rem;
}

.drawer {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 5;
  display: flex;
  width: var(--drawer-breite);
  max-width: 100%;
  background: var(--farbe-flaeche-drawer);
  border-left: 1px solid var(--farbe-rand-betont);
  /* Der Schatten sagt, dass etwas darunter weiterliegt. */
  box-shadow: -12px 0 28px rgba(0, 0, 0, 0.16);
  transform: translateX(100%);
  transition: transform 0.18s ease-out;
}

.drawer--auf {
  transform: translateX(0);
}

@media (prefers-reduced-motion: reduce) {
  .drawer { transition: none; }
}

/* Woran gerade gearbeitet wird. Der Drawer deckt einen Teil der Seite zu;
   ohne Marke sucht man die Stelle nach dem Schliessen wieder. */
.wird-bearbeitet {
  outline: 2px solid var(--farbe-rand-betont);
  outline-offset: 3px;
}

/* **Die Zeile, die gerade im Drawer liegt** (0.2.18, Sammlung 146):
   getönt wie die gewählte Zeile in der Ablage, nicht mit Rahmen und
   Grau. Die Farbe ist die des Bereichs, in dem die Liste steht – die
   Ablage war damit schon immer petrol. */
tr.wird-bearbeitet {
  outline: none;
  background: var(--farbe-bereich-klienten-hell);
}

table[data-spalten="ablage"] tr.wird-bearbeitet,
table[data-spalten="posteingang"] tr.wird-bearbeitet {
  background: var(--farbe-bereich-dokumente-hell);
}

table[data-spalten^="vermoegen"] tr.wird-bearbeitet {
  background: var(--farbe-bereich-finanzen-hell);
}

.drawer[hidden] {
  display: none;
}

/* Der Griff ist schmal, seine Trefferflaeche nicht - sonst muesste man
   auf zwei Pixel zielen. */
.drawer__griff {
  flex: 0 0 0.35rem;
  margin-right: -0.35rem;
  position: relative;
  z-index: 1;
  cursor: col-resize;
}

.drawer__griff::after {
  content: "";
  position: absolute;
  inset: 0 -0.3rem;
}

.drawer__griff:hover {
  background: var(--farbe-rand-betont);
}

/* Waehrend des Ziehens darf nichts markiert werden, sonst faerbt sich die
   halbe Seite blau. */
body.zieht {
  user-select: none;
  cursor: col-resize;
}

.drawer__innen {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-width: 0;
}

.drawer__kopf {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.6rem 1rem;
  border-bottom: 1px solid var(--farbe-rand-block);
  background: var(--farbe-flaeche-hervor);
}

.drawer__titel {
  flex: 1;
  min-width: 0;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.drawer__knopf {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.7rem;
  height: 1.7rem;
  color: var(--farbe-schrift-gedaempft);
  background: none;
  border: 1px solid transparent;
  border-radius: 5px;
  text-decoration: none;
  cursor: pointer;
}

.drawer__knopf:hover {
  color: var(--farbe-schrift);
  border-color: var(--farbe-rand-block);
}

.drawer__rumpf {
  flex: 1;
  padding: 1rem;
  overflow: auto;
}

/* Im Drawer traegt schon der Kasten die Umrandung - der Block darin
   braucht keine zweite. */
.drawer__rumpf .block {
  margin: 0;
  padding: 0;
  background: none;
  border: none;
  border-radius: 0;
}

/* **Die Luft steht vor der Überschrift, nicht dahinter** (13.09.2026):
   *„Du hast bei den Überschriften davor keinen Abstand und danach einen
   großen Abstand. Umgekehrt formatieren."* Bis dahin klebte jede
   Überschrift am Bereich über ihr und schwebte über dem eigenen Inhalt.
   Die Akte hält es mit `.abschnitt` seit jeher richtig herum. */
.drawer__rumpf .block + .block { margin-top: 1.5rem; }
.drawer__rumpf .block__titel { margin-bottom: 0.35rem; }

/* Die Karte im Drawer bringt ihren oberen Abstand nicht mit - den hat
   der Block schon gesetzt. */
.drawer__rumpf .eintrag { margin: 0; }
.drawer__rumpf .eintrag + .eintrag { margin-top: 0.5rem; }

/* Ohne schwebenden Stift braucht der Wert rechts keinen Platz
   freizuhalten. */
.eintrag--ohnetat .werte { padding-right: 0; }


/* Eine Handlung, die nur aus ihrem Zeichen besteht. In der Akte stehen
   viele davon; ausgeschrieben ergaeben sie eine Wand aus "Bearbeiten".
   Der Rahmen sagt, dass es ein Knopf ist - das Zeichen allein saehe nach
   Verzierung aus. Name traegt title und aria-label. */
.tatknopf {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.6rem;
  height: 1.6rem;
  color: var(--farbe-schrift-gedaempft);
  border: 1px solid var(--farbe-rand-block);
  border-radius: 5px;
  text-decoration: none;
}

.tatknopf:hover {
  color: var(--farbe-schrift);
  border-color: var(--farbe-rand-betont);
  background: var(--farbe-flaeche-hervor);
}

/* Abgelaufenes, eingeklappt. Die Zusammenfassung traegt selbst die Marke -
   sie ist der Hinweis, dass es hier Abgelaufenes gibt. */
.verfallen {
  margin: 0.5rem 0;
}

.verfallen > summary {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.3rem 0.5rem;
  color: var(--farbe-schrift-gedaempft);
  font-size: 0.9rem;
  border-radius: 5px;
  cursor: pointer;
}

.verfallen > summary:hover {
  background: var(--farbe-flaeche-hervor);
}

.verfallen[open] > summary {
  margin-bottom: 0.25rem;
}


/* Auskunft statt Handlung: Hier ist gerade nichts zu tun, der Grund steht
   beim Ueberfahren. Sieht aus wie ein Knopf, ist aber keiner - deshalb
   ohne Zeigefinger. */
.tatknopf--auskunft {
  cursor: help;
  border-style: dashed;
}

/* Wessen Akte hier bearbeitet wird. Stand als gedaempfte Fussnote da -
   dieselbe Auszeichnung wie eine Erlaeuterung. */
.formular__klient {
  margin: 0.1rem 0 0.9rem;
  font-size: 1.15rem;
  font-weight: 600;
}


/* Etwas, das selten im Weg stehen soll. Die Zusammenfassung ist eine
   Zeile, der Inhalt kommt beim Aufklappen darunter. */
.ausklapp > summary {
  color: var(--farbe-schrift-gedaempft);
  font-weight: 400;
  cursor: pointer;
}

.ausklapp[open] > summary {
  margin-bottom: 0.2rem;
}


/* ---------- Formularfelder nebeneinander ----------
   Wie breit ein Feld steht, sagt die Feldmatrix (Spalte `Breite`) - nicht
   die Vorlage. Sonst muesste sie wissen, dass Strasse und Hausnummer
   zusammengehoeren, und jedes weitere Paar waere ein neuer Sonderfall. */

.felder {
  display: flex;
  flex-wrap: wrap;
  gap: 0 0.75rem;
}

/* **Die Felder liegen auf einer getönten Fläche** (0.2.15, Sammlung 143),
   wie die Karten der Stammdaten; die Eingaben bleiben weiß. Der Kontrast
   kommt aus der Fläche, nicht aus dem Strich.

   `.feldflaeche` für Formulare ohne Feldgruppe – Beziehung, Benutzer.
   Die Karten von Anmeldung und Kennwort sind selbst ein Kasten und
   bekommen keine zweite Fläche. */
.felder,
.feldflaeche {
  padding: 0.3rem 0.9rem 0.9rem;
  background: var(--farbe-flaeche-hervor);
  border-radius: 6px;
}

.felder + .felder { margin-top: 0.6rem; }
/* Eine Erläuterung direkt über einem Formular auf der Fläche – die
   Zielordner – klebte sonst an deren Rand (0.2.82). */
.fussnote + form.felder { margin-top: 0.6rem; }

/* Eine Angabe ohne Feld (die Kennung beim Benutzer) klebte sonst oben
   am Rand der Fläche – die Beschriftungen haben ihren Abstand selbst. */
.feldflaeche > .werte { margin-top: 0.6rem; }

/* Voll bricht die Zeile: Der Anteil von 100 % laesst nichts daneben. */
.feld {
  flex: 1 0 100%;
  min-width: 0;
}

/* Fuenf Anteile, und die Rechnung entscheidet, was zusammensteht. Die
   Vorlage weiss nichts von zusammengehoerenden Feldern - sie liest nur die
   Spalte `Breite`.

       breit  + eng    = 79 %   Strasse + Hausnummer
       schmal + breit  = 95 %   Postleitzahl + Ort
       halb   + halb   = 96 %   Vorname + Nachname
       halb   + schmal = 79 %   Anrede + Titel

   Jedes Dritte sprengte die 100 %: 79 + 31 = 110, 96 + 15 = 111. Genau
   deshalb sind es diese Werte und keine runden - mit kleineren rutschte
   die Postleitzahl in die Zeile von Strasse und Hausnummer. */
.feld--breit {
  flex: 1 1 64%;
}

.feld--halb {
  flex: 1 1 48%;
}

/* Vier nebeneinander: 4 × 23 % sind 92 %. Am 13.09.2026 dazugekommen,
   fuer die Geldanlage und das Unternehmen - die uebrigen Werte sind
   fuer Paare gemacht und liessen vier nie in eine Zeile. */
.feld--viertel {
  flex: 1 1 23%;
}

.feld--schmal {
  flex: 1 1 31%;
}

.feld--eng {
  flex: 1 1 15%;
}

/* Die Einheit steht rechts an der Eingabe, nicht darunter. */
.eingabe {
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

.eingabe input {
  flex: 1;
  min-width: 0;
}

.einheit {
  flex: none;
  color: var(--farbe-schrift-gedaempft);
}


/* Eine Ueberschrift als aufklappbare Zusammenfassung. Der Pfeil steht in
   der Zeile, nicht darueber - deshalb die Ueberschrift inline. */
.ausklapp > summary > .block__untertitel {
  display: inline;
}

.ausklapp > summary {
  margin-top: 1.5rem;
}


/* Eine abgelaufene Zeile in einer Tabelle. Der Streifen links traegt es,
   nicht die Schriftfarbe - grau gesetzter Text laese sich schlechter. */
.zeile--abgelaufen > td:first-child {
  border-left: 3px solid var(--farbe-status-offen);
}

/* Die Markenspalte drueckt sich zusammen, damit die Angaben den Platz
   behalten. */
.zeile__marken {
  white-space: nowrap;
  width: 1%;
}


/* Beschriftung, Eingabe und Knopf in einer Zeile - dafuer ist inline da. */
.inline {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
}

.inline label {
  margin: 0;
  flex: 0 0 auto;
}

.inline input {
  flex: 1 1 12rem;
  min-width: 0;
}

.inline button {
  flex: none;
}


/* Die Handlungsspalte schliesst buendig mit dem Blockrand ab - und damit
   mit dem Zeichen in der Kopfzeile darueber. Die Innenabstaende der Zelle
   ruecken es sonst um 0,6 rem nach links. */
.tabelle th:last-child,
.tabelle td:last-child {
  padding-right: 0;
  text-align: right;
  /* Kein `width: 1%`: Das schrumpft die Zelle auf ihre Mindestbreite und
     quetscht fuenf Zeichen auf zehn Pixel. `nowrap` genuegt - die Zelle
     nimmt, was ihr Inhalt braucht, und nicht mehr. */
  white-space: nowrap;
}

/* Zustand und Handlung stehen oben in der Karte, nicht darunter: Sie
   gehoeren zum Eintrag als Ganzem, nicht hinter seinen letzten Wert. */
/* Bezugsrahmen fuer das schwebende Zeichen. */
.eintrag {
  position: relative;
}

/* Nur in der Kachel schwebt es; in einer Tabellenzeile steht dasselbe
   Zeichen in seiner Zelle. */
.eintrag > .eintrag__tat {
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
}

/* Rechts bleibt Platz fuer das Zeichen, damit kein Wert darunter laeuft. */
.eintrag .werte {
  padding-right: 2.2rem;
}

.eintrag__marken {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin: 0 0 0.4rem;
  padding-right: 2.2rem;
}



/* Die Kopfzeile: der Name, ein Knopf „Einstellungen" mit Menue, Abmelden
   (Sammlung 215, Variante A, 0.2.82). Im Menue steht, was dem Benutzer
   selbst gehoert - Darstellung, Kennwort, Zwei-Faktor. Es haengt an
   `<details>`: Das klappt auch ohne Skript. Das Dreieck entfaellt, der
   Pfeil steht im Knopf. */
.kopfmenue__anker { position: relative; }
.kopfmenue__anker > summary { display: inline-block; list-style: none; user-select: none; }
.kopfmenue__anker > summary::-webkit-details-marker { display: none; }
.kopf__knopf .icon { width: 0.95rem; height: 0.95rem; vertical-align: -0.12rem; }
.kopfmenue { position: absolute; right: 0; top: calc(100% + 0.4rem); z-index: 20; min-width: 15rem;
  padding: 0.4rem 0; font-size: 0.9rem; font-weight: 400;
  background: var(--farbe-flaeche-block); color: var(--farbe-schrift);
  border: 1px solid var(--farbe-rand-block); border-radius: 6px; box-shadow: 0 6px 18px rgb(0 0 0 / 18%); }
.kopfmenue form { margin: 0; }
.kopfmenue a,
.kopfmenue button { display: block; width: 100%; margin: 0; padding: 0.35rem 0.9rem; text-align: left;
  font: inherit; color: inherit; text-decoration: none; background: none; border: 0; border-radius: 0;
  cursor: pointer; }
.kopfmenue a:hover,
.kopfmenue button:hover { background: var(--farbe-flaeche-hervor); color: inherit; }
.kopfmenue hr { border: 0; border-top: 1px solid var(--farbe-rand-block); margin: 0.3rem 0; }
.kopfmenue__titel { margin: 0; padding: 0.2rem 0.9rem; font-size: 0.8rem; color: var(--farbe-schrift-gedaempft); }
/* Die Darstellung: drei Zeilen, die gewaehlte mit Punkt. */
.kopfmenue .kopfmenue__wahl { position: relative; padding-left: 2rem; }
.kopfmenue__wahl--an::before { content: "●"; position: absolute; left: 0.9rem; top: 0.55rem; font-size: 0.7rem; }
/* Die Standardfilter der To-dos (Sammlung 241): Name links, Auswahl rechts. */
.kopfmenue__filter label { display: flex; justify-content: space-between; align-items: center; gap: 0.6rem;
  margin: 0; padding: 0.2rem 0.9rem; }
.kopfmenue__filter select { width: auto; margin: 0; }


/* ---------- Nachtrag: Ueberfahren dort, wo ein eigener Grund liegt ------
   Die allgemeine Regel `a:hover` faerbt den **Text** in die Bereichsfarbe.
   Das ist bei einem gewoehnlichen Verweis richtig - und falsch ueberall
   dort, wo der Verweis selbst einen farbigen Grund traegt: Der offene
   Registerreiter hat die Bereichsfarbe als Hintergrund, sein Text waere
   beim Ueberfahren derselbe Ton auf demselben Ton und damit unsichtbar.

   Dasselbe traf die Hauptschaltflaeche, die Kopfzeile und die
   Seitenleiste. Eine Regel, vier Stellen - deshalb stehen sie hier
   beieinander und nicht verstreut. */

.register__reiter:hover {
  background: var(--farbe-flaeche-hervor);
  color: var(--farbe-schrift);
}

.register__reiter--offen:hover {
  background: var(--farbe-bereich-klienten);
  color: var(--farbe-schrift-invers);
}

.knopf--haupt:hover  { color: var(--farbe-knopf-haupt-schrift); }
.knopf--neben:hover  { color: var(--farbe-knopf-neben-schrift); }
.knopf--gefahr:hover { color: var(--farbe-knopf-gefahr-schrift); }

.seitenleiste a:hover {
  color: var(--farbe-schrift-invers);
}


/* ---------- Eintragstabellen ----------
   Die getoente Flaeche heisst in der Akte „hier stehen erfasste Angaben".
   Eine Tabelle enthaelt dieselben Angaben wie eine Kachel - also bekommt
   sie denselben Grund. Vorher standen zwei Darstellungen derselben Sache
   auf zwei verschiedenen Untergruenden.

   Nur die Eintragstabellen: Klienten-, Kontakt- und Benutzerliste sind
   ganze Seiten und keine Angaben in einem Block. */

.tabelle--eintraege {
  background: var(--farbe-flaeche-hervor);
  border-radius: 6px;
  /* Sonst greifen die runden Ecken nicht an den Zellen. */
  overflow: hidden;
}

/* Die Ueberschriftszeile hebt sich vom Grund ab, sonst verschwimmt sie
   mit der ersten Angabe. */
.tabelle--eintraege thead th {
  padding-top: 0.5rem;
  border-bottom-color: var(--farbe-rand-betont);
}

/* Innen umlaufend Luft, aussen nicht: Das Zeichen der letzten Spalte
   bleibt buendig mit dem Zeichen in der Kopfzeile darueber. */
.tabelle--eintraege th:first-child,
.tabelle--eintraege td:first-child {
  padding-left: 0.7rem;
}

.tabelle--eintraege tbody tr:last-child > td {
  border-bottom: none;
}


/* ═══════════════════════════════════════════════ Dokumentenansicht

   Zwei Spalten: links der Ordnerbaum, rechts der Inhalt des gewählten
   Ordners. Eine Ansicht, kein zweites Programm - der Unterschied
   zwischen "alle Klienten" und "ein Klient" ist ein Filter. */

.ablage {
  display: flex;
  gap: 1.25rem;
  align-items: flex-start;
}

.ablage__baum {
  /* Fest, nicht mitwachsend: Der Baum ist zum Zielen da. Wächst er mit,
     rutschen die Ordner bei jeder Auswahl an eine andere Stelle. */
  flex: 0 0 20rem;
  padding: 0.75rem 0.5rem;
  background: var(--farbe-flaeche-block);
  border: 1px solid var(--farbe-rand-block);
  border-radius: 8px;
}

.ablage__inhalt {
  flex: 1;
  min-width: 0;
  padding: 0.75rem 1.25rem 1.25rem;
  background: var(--farbe-flaeche-block);
  border: 1px solid var(--farbe-rand-block);
  border-radius: 8px;
}

.baum,
.baum ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.baum__akte {
  padding: 0.3rem 0.4rem;
  font-weight: 600;
  cursor: pointer;
  border-radius: 5px;
}

.baum__akte:hover {
  background: var(--farbe-flaeche-hervor);
}

.baum__ordner {
  display: block;
  padding: 0.25rem 0.4rem;
  color: var(--farbe-schrift);
  text-decoration: none;
  border-radius: 5px;
}

.baum__ordner:hover {
  background: var(--farbe-flaeche-hervor);
}

/* Der gewählte Ordner in der Bereichsfarbe - dieselbe, die die
   Seitenleiste für Dokumente führt. */
.baum__ordner--offen {
  background: var(--farbe-bereich-dokumente-hell);
  color: var(--farbe-bereich-dokumente);
  font-weight: 600;
}

.filter {
  display: flex;
  gap: 0.75rem;
  align-items: center;
  margin-bottom: 1rem;
}

.suche {
  display: flex;
  gap: 0.5rem;
  margin-bottom: 1rem;
}

.suche input {
  flex: 1;
}

/* Für Beschriftungen, die der Bildschirmleser braucht und das Auge
   nicht - das Suchfeld sagt sich selbst über seinen Platzhalter. */
.verborgen {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* Der Umschalter zwischen Ablage und Posteingang. Zwei Stellungen
   derselben Ansicht, nicht zwei Seiten - deshalb Reiter und kein Menue. */
.umschalter {
  display: flex;
  gap: 0.25rem;
  margin-bottom: 1rem;
  border-bottom: 1px solid var(--farbe-rand-block);
}

.umschalter__stellung {
  padding: 0.4rem 0.9rem;
  color: var(--farbe-schrift-gedaempft);
  text-decoration: none;
  border-bottom: 2px solid transparent;
}

.umschalter__stellung--offen {
  color: var(--farbe-bereich-dokumente);
  border-bottom-color: var(--farbe-bereich-dokumente);
  font-weight: 600;
}

/* **Die zweite Reihe: Unterregister** (Sammlung 178, 24.09.2026) – nur
   wo es welche gibt, kleiner, als Pillen: Man soll die zwei Ebenen nicht
   verwechseln. */
.umschalter--unter {
  gap: 0.35rem;
  margin: -0.4rem 0 1.1rem;
  padding: 0.1rem 0 0 0.4rem;
  border-bottom: none;
}
.umschalter--unter .umschalter__stellung {
  padding: 0.25rem 0.85rem;
  font-size: 0.92rem;
  border: 1px solid var(--farbe-rand-block);
  border-radius: 999px;
}
.umschalter--unter .umschalter__stellung--offen {
  background: var(--farbe-bereich-dokumente-hell);
  border-color: var(--farbe-bereich-dokumente);
}

/* Die Anzahl am Umschalter: Sonst schaltet man um und findet nichts. */
.umschalter__zahl {
  padding: 0.05rem 0.4rem;
  font-size: 0.8em;
  background: var(--farbe-bereich-dokumente-hell);
  color: var(--farbe-bereich-dokumente);
  border-radius: 999px;
}

/* Was gezogen wird, und wohin. Beides braucht eine sichtbare Antwort -
   ein Ziehen ohne Rueckmeldung fuehlt sich kaputt an. */
.posteingang__stueck[draggable="true"] {
  cursor: grab;
}

.posteingang__stueck--zieht {
  opacity: 0.5;
}

.baum__ordner--ziel {
  outline: 2px dashed var(--farbe-bereich-dokumente);
  outline-offset: -2px;
}

/* Die Dateiliste im Explorer-Stil: Ordner und Dokumente in einer Liste,
   Ordner zuerst. Anders als bei MDok, wo nur der Baum navigiert - hier
   soll sich die Ablage auf der rechten Seite allein durchlaufen lassen. */
.dateiliste__zeile {
  cursor: default;
}

.dateiliste__zeile:hover {
  background: var(--farbe-flaeche-hervor);
}

/* Die ausgewaehlte Zeile - Tastatur und Kontextmenue beziehen sich auf
   sie. Ohne sichtbare Auswahl waere beides blind. */
.dateiliste__zeile--gewaehlt,
.dateiliste__zeile:focus {
  background: var(--farbe-bereich-dokumente-hell);
  outline: none;
}

.dateiliste__zeichen {
  display: inline-block;
  margin-right: 0.4rem;
  vertical-align: -0.15em;
  color: var(--farbe-schrift-gedaempft);
}

.dateiliste thead a {
  color: var(--farbe-schrift-gedaempft);
  text-decoration: none;
}

.dateiliste thead a:hover {
  color: var(--farbe-schrift);
}

/* Der Weg zurueck nach oben. Ohne ihn kaeme man aus einem Unterordner
   nur ueber den Baum heraus. */
.pfadleiste {
  margin: 0 0 0.75rem;
  font-size: 0.9em;
  color: var(--farbe-schrift-gedaempft);
}

/* Das Kontextmenue der Dateiliste. Es haengt am Koerper, nicht an der
   Zeile: In einer Tabellenzelle wuerde es vom Ueberlauf beschnitten. */
.kontextmenue {
  position: fixed;
  z-index: 50;
  min-width: 12rem;
  padding: 0.25rem;
  background: var(--farbe-flaeche-block);
  border: 1px solid var(--farbe-rand-betont);
  border-radius: 6px;
  box-shadow: 0 4px 12px rgb(0 0 0 / 18%);
}

.kontextmenue button {
  display: block;
  width: 100%;
  padding: 0.4rem 0.8rem;
  text-align: left;
  background: none;
  border: none;
  border-radius: 4px;
  color: var(--farbe-schrift);
  font: inherit;
  cursor: pointer;
}

.kontextmenue button:hover {
  background: var(--farbe-flaeche-hervor);
}

.neuerordner {
  margin-bottom: 0.75rem;
}

/* Die Regeln fuer das Klappzeichen an `details` sind entfallen: Der
   Baum traegt seinen eigenen Knopf, damit ein Klick auf den Namen den
   Ordner waehlt und nur das Zeichen auf- und zuklappt. Siehe
   `.baum__klappe` weiter unten. */

.dateiliste__zeile--zieht {
  opacity: 0.5;
}

/* Ein gesperrter Menueeintrag steht da, statt zu fehlen: Wer "Einfuegen"
   sucht und nicht findet, haelt es fuer kaputt - wer es blass sieht,
   weiss, dass die Zwischenablage leer ist. */
.kontextmenue button[disabled] {
  color: var(--farbe-schrift-gedaempft);
  cursor: default;
}

.kontextmenue button[disabled]:hover {
  background: none;
}

.kontextmenue hr {
  margin: 0.25rem 0.4rem;
  border: none;
  border-top: 1px solid var(--farbe-rand-block);
}

.sofortfilter {
  display: flex;
  gap: 0.5rem;
  align-items: center;
  margin: 0 0 0.5rem;
}

.sofortfilter input {
  max-width: 18rem;
}

/* ── Der Baum: Klappzeichen und Name sind zwei Dinge ────────────────
   Ein Klick auf den Namen waehlt, einer auf + oder - klappt. Beides an
   einer Stelle hiesse, dass man nicht auswaehlen kann, ohne zuzuklappen. */
.baum__zeile {
  display: flex;
  align-items: center;
  gap: 0.15rem;
}

.baum__klappe {
  flex: 0 0 1.1rem;
  width: 1.1rem;
  height: 1.1rem;
  padding: 0;
  background: none;
  border: none;
  color: var(--farbe-schrift-gedaempft);
  font: inherit;
  font-family: monospace;
  line-height: 1;
  cursor: pointer;
}

.baum__klappe::before { content: "+"; }
.baum__klappe[aria-expanded="true"]::before { content: "\2212"; }

/* Ein Ast ohne Kinder haelt den Platz frei, damit die Namen einer Ebene
   untereinander stehen. */
.baum__klappe--leer { cursor: default; }
.baum__klappe--leer::before { content: ""; }

.baum__ordner {
  flex: 1;
  min-width: 0;
}

.baum__akte {
  font-weight: 600;
}

/* Beide Spalten gleich hoch und hoch genug, dass eine Akte hineinpasst,
   ohne dass man rollt. Ohne feste Hoehe waere die Ordnerspalte so hoch
   wie ihr Inhalt - und der Baum spraenge bei jedem Ordnerwechsel. */
.ablage {
  align-items: stretch;
}

.ablage__baum,
.ablage__inhalt {
  min-height: 32rem;
  max-height: calc(100vh - 14rem);
  overflow: auto;
}

/* Eine Zelle, die sich an Ort und Stelle aendern laesst. Der Zeiger sagt
   es erst, wenn die Zeile gewaehlt ist - vorher waere es eine
   Einladung, die ins Leere geht. */
.dateiliste__zeile--gewaehlt .erfassbar {
  cursor: text;
}

.erfassbar input {
  width: 100%;
  padding: 0.1rem 0.3rem;
}

/* Was nicht gespeichert werden konnte, bleibt sichtbar - stillschweigend
   zurueckzufallen hiesse, eine Aenderung zu verlieren, von der jemand
   annimmt, sie sei da. */
.erfassbar--fehler {
  outline: 2px solid var(--farbe-status-offen);
  outline-offset: -2px;
}

/* Die Vorschau. Hoch genug, dass eine Seite lesbar ist, ohne dass man im
   Rahmen rollt - sonst rollt man zweimal. */
.vorschau {
  width: 100%;
  height: 34rem;
  border: 1px solid var(--farbe-rand-block);
  border-radius: 6px;
  background: var(--farbe-flaeche-hervor);
}

/* Waehrend Dateien ueber der Ablage schweben. Ohne sichtbare Antwort
   weiss niemand, ob das Loslassen etwas bewirkt. */
.ablage--nimmt .ablage__baum,
.ablage--nimmt .ablage__inhalt {
  outline: 2px dashed var(--farbe-bereich-dokumente);
  outline-offset: -3px;
}

/* ── Dialog ────────────────────────────────────────────────────────
   Fuer den Augenblick, in dem etwas bestaetigt oder ein Wort eingegeben
   wird. Immer eigene, nie die des Browsers: confirm und prompt tragen
   nur eine Zeile Text - und genau daran scheitern sie beim Loeschen, wo
   die Liste stehen soll, woran das Dokument haengt. */
.dialoghuelle {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  /* Die Seite bleibt sichtbar, nur zurueckgenommen: Man soll erkennen,
     worueber gerade gefragt wird. */
  background: rgb(0 0 0 / 35%);
}

.dialog {
  width: min(30rem, 100%);
  max-height: 85vh;
  overflow: auto;
  padding: 1.25rem 1.5rem 1.5rem;
  background: var(--farbe-flaeche-block);
  border-radius: 10px;
  box-shadow: 0 10px 30px rgb(0 0 0 / 25%);
}

.dialog__titel {
  margin: 0 0 0.75rem;
  font-size: 1.15rem;
}

.dialog__liste {
  margin: 0.5rem 0 1rem;
  padding-left: 1.2rem;
  color: var(--farbe-schrift-gedaempft);
}

.dialog__beschriftung {
  display: block;
  margin-bottom: 0.25rem;
  color: var(--farbe-schrift-gedaempft);
  font-size: 0.9em;
}

.dialog__knoepfe {
  display: flex;
  justify-content: flex-end;
  gap: 0.5rem;
  margin-top: 1.25rem;
}

/* Doppelt so breit, auf Ansage (Sammlung 140): Der ganze Vorrat steht
   bei Full HD ohne Rollen im Bild. */
.dialog--breit { width: min(60rem, 100%); }


/* ═══════════════════════════════════ Die Ablage, überarbeitet
   Sammlung Punkte 23–29, Review vom 02.09.2026. */

/* Punkt 23: Links stand keine Kopfzeile, rechts eine – zwei Kästen
   nebeneinander, von denen einer eine hat, sehen aus wie ein Fehler.
   Deshalb dieselbe Höhe und dieselbe Linie wie ein `th`. */
.baum__kopf {
  padding: 0.5rem 0.7rem;
  border-bottom: 1px solid var(--farbe-rand-block);
  font-weight: 600;
  font-size: 0.9rem;
  color: var(--farbe-schrift-gedaempft);
}

/* Punkt 25: in Klammern und kleiner. Ohne das las sich die Zahl als
   Teil des Namens – „Gericht und Verfahren 2". */
.baum__anzahl,
.dateiliste__anzahl {
  font-size: 0.82em;
  color: var(--farbe-schrift-gedaempft);
}

/* Punkt 24: Die Zeichen sind in der Dateiliste das Erste, was man
   liest – „Ordner oder Datei" ist die Frage vor der Bezeichnung. */
.dateiliste__zeichen .icon,
.baum__ordner .icon,
.baum__akte .icon {
  width: 1.4em;
  height: 1.4em;
}

.baum__ordner .icon,
.baum__akte .icon {
  vertical-align: -0.28em;
  margin-right: 0.15rem;
  color: var(--farbe-schrift-gedaempft);
}

/* Punkt 29: Die Werkzeugleiste. Links, was den Ort ändert; rechts, was
   die Liste einschränkt. */
.werkzeuge {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  margin-bottom: 0.7rem;
  flex-wrap: wrap;
}

.werkzeuge__links {
  display: flex;
  gap: 0.25rem;
}

.werkzeuge__rechts {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-left: auto;
}

.werkzeuge__rechts input[type="search"] {
  width: 16rem;
  margin: 0;
}

.werkzeug {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.1rem;
  height: 2.1rem;
  border: 1px solid var(--farbe-rand-block);
  border-radius: 5px;
  background: var(--farbe-flaeche-block);
  color: var(--farbe-schrift);
  cursor: pointer;
}

.werkzeug .icon {
  width: 1.25rem;
  height: 1.25rem;
}

.werkzeug:hover {
  background: var(--farbe-flaeche-hervor);
  border-color: var(--farbe-rand-betont);
}

/* Ein Werkzeug, das gerade nichts tun kann, verschwindet nicht – sonst
   springt die Leiste, und man sucht den Knopf, den man kennt. */
.werkzeug--aus {
  opacity: 0.35;
  cursor: default;
}

.werkzeug--aus:hover {
  background: var(--farbe-flaeche-block);
  border-color: var(--farbe-rand-block);
}

.haekchen {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  font-size: 0.9rem;
  white-space: nowrap;
}

/* Der Platzhalter für die Volltextsuche (Sprint 5). Sichtbar, damit man
   den Platz kennt – abgeschaltet, weil ein Häkchen, das sich setzen
   lässt und nichts tut, schlimmer ist als keins. */
.haekchen--aus {
  color: var(--farbe-schrift-gedaempft);
  cursor: not-allowed;
}

/* Punkt 32: Ausgeschnittenes steht blass, bis es eingefügt wird oder
   Escape es freigibt – wie im Explorer. Ohne das sieht man überhaupt
   nicht, dass etwas gemerkt ist. */
.dateiliste__zeile--ausgeschnitten {
  opacity: 0.45;
}

/* Zeichen im Kontextmenü (Punkt 43). Der Text steht danach, deshalb
   bekommt der Knopf eine Zeile statt eines Blocks. */
.kontextmenue button {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.kontextmenue button .icon {
  color: var(--farbe-schrift-gedaempft);
}

/* Ein gesperrter Eintrag soll auch am Zeichen erkennbar sein, nicht nur
   an der Schrift. */
.kontextmenue button:disabled .icon {
  opacity: 0.4;
}

/* Der Knopf zum Hereinnehmen (Punkt 33). Der aufklappbare Kasten ist
   weg – das Ziehen aus dem Explorer ist der Hauptweg, dieser Knopf der
   Rückfallweg. Ein Label sieht aus wie ein Knopf und öffnet die
   Dateiauswahl; das Feld selbst ist verborgen. */
.hereinnehmen {
  margin-top: 1rem;
}

.hereinnehmen label {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  cursor: pointer;
}


/* ═══════════════════════════════════ Vorschau im Drawer
   Sammlung Punkte 36–39 und 41. */

/* Punkt 38: Die Fassungen sind der seltene Fall – meist gibt es genau
   eine. Ein `details` sieht aus wie ein Block, bis man es aufklappt. */
details.block > summary.block__titel {
  cursor: pointer;
  list-style: none;
}

details.block > summary.block__titel::-webkit-details-marker {
  display: none;
}

/* Das Dreieck selbst gezeichnet – das des Browsers sitzt je nach
   Browser woanders und färbt sich nicht mit. */
details.block > summary.block__titel::before {
  content: "";
  display: inline-block;
  width: 0;
  height: 0;
  margin-right: 0.5rem;
  vertical-align: 0.1em;
  border-left: 0.4rem solid currentColor;
  border-top: 0.3rem solid transparent;
  border-bottom: 0.3rem solid transparent;
  transition: transform 0.12s ease;
}

details.block[open] > summary.block__titel::before {
  transform: rotate(90deg);
}

/* Im Drawer ist die Vorschau die Sache, um die es geht – sie bekommt,
   was da ist. Auf der ganzen Seite bleibt sie bei ihrer festen Höhe. */
.mit-drawer .drawer .vorschau,
#drawer .vorschau,
#drawer .betrachter {
  height: 60vh;
}

/* Punkt 37: Die Pfeile stehen im Drawer-Kopf, neben „In neuem Fenster".
   Ein Pfeil ohne Nachbarn bleibt stehen und wird blass – verschwände er,
   sprängen die anderen Knöpfe bei jedem Blättern. */
.drawer__knopf[data-listenknopf]:disabled {
  opacity: 0.3;
  cursor: default;
}

/* Sammlung 194 (0.2.65, Entwurf `entwuerfe/drawer-pfeile.html`,
   Variante A): *„Mach die groesser, vielleicht als Button."* Groessere
   Knoepfe mit Rahmen, in jedem Drawer, in dem geblaettert wird - und ein
   Strich trennt sie von „In neuem Fenster" und „Schliessen". */
.drawer__knopf[data-listenknopf] {
  width: 2.3rem;
  height: 2.3rem;
  border-color: var(--farbe-rand-betont);
  border-radius: 6px;
  background: var(--farbe-flaeche-block);
  color: var(--farbe-schrift);
}

.drawer__knopf[data-listenknopf] .icon {
  width: 1.35rem;
  height: 1.35rem;
  stroke-width: 2.4;
}

.drawer__knopf[data-listenknopf]:hover:not(:disabled) {
  border-color: var(--farbe-rand-betont);
  background: var(--farbe-flaeche-seite);
}

.drawer__knopf[data-listenknopf] + .drawer__knopf[data-listenknopf] {
  position: relative;
  margin-right: 0.6rem;
}

.drawer__knopf[data-listenknopf] + .drawer__knopf[data-listenknopf]::after {
  content: "";
  position: absolute;
  top: 0.2rem;
  right: -0.6rem;
  bottom: 0.2rem;
  border-right: 1px solid var(--farbe-rand-block);
}

/* Das ausgedockte Fenster (Punkt 41, nachgebessert am 03.09.2026).
   Kein Menü, kein Baum – nur das Dokument. Deshalb darf es auch die
   ganze Breite haben; die Vorschau ist hier die Sache selbst. */
body.eigenesfenster {
  display: block;
  background: var(--farbe-flaeche-seite);
}

/* Der Rand war zu breit – "Im Moment habe ich einen Riesenrand rechts
   und links neben dem Vorschaufenster" (03.09.2026). Wer ein Fenster
   ausdockt, hat es für die Vorschau ausgedockt; dann soll sie die
   Breite bekommen. */
.eigenesfenster__inhalt {
  margin: 0;
  padding: 0.8rem;
}

/* Der Block um die Vorschau bringt hier nur einen zweiten Rahmen im
   Rahmen mit. */
.eigenesfenster .block {
  margin: 0;
  padding: 0;
  border: none;
  background: none;
}

.eigenesfenster .vorschau,
.eigenesfenster .betrachter {
  height: 82vh;
}

/* Die Leiste über der Vorschau (Punkt 8, 03.09.2026). */
.vorschau__leiste {
  display: flex;
  gap: 0.5rem;
  margin-bottom: 0.6rem;
}

.vorschau__leiste .knopf {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}

/* Der Hochladen-Knopf in der Werkzeugleiste sieht aus wie die anderen,
   ist aber ein Label – nur so öffnet ein Klick die Dateiauswahl.
   `box-sizing` und die feste Höhe stehen dabei: Ein Label rechnet seine
   Maße anders als ein Knopf und saß dadurch ein paar Pixel tiefer.
   Gemeldet am 03.09.2026. */
label.werkzeug {
  cursor: pointer;
  /* **Der Rand ist die Ursache**, nicht die Schriftgroesse. Ein `label`
     bekommt weiter oben `margin-top: 0.6rem` fuer Formulare, und Flex
     zentriert die Box EINSCHLIESSLICH Rand - deshalb sass der Knopf
     4,8 px tiefer als seine Nachbarn.

     In 0.1.70 hatte ich stattdessen `box-sizing` und `line-height`
     gesetzt: am falschen Ende, und der Fehler kam zurueck. */
  margin: 0;
}

/* Und die Leiste selbst hält alle auf einer Linie, statt sie an ihrer
   Grundlinie auszurichten. */
.werkzeuge__links {
  align-items: center;
}

/* Die Pfeile im ausgedockten Fenster (03.09.2026). */
/* Links "Voriges", mittig "Fenster schließen", rechts "Nächstes"
   (03.09.2026). `space-between` verteilt sie – fällt ein Pfeil weg
   (kein Öffnerfenster), rückt der Schließen-Knopf nicht mit, weil er
   selbst die Mitte hält. */
.eigenesfenster__blaettern {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.5rem;
  margin: 0 0 0.8rem;
}

.eigenesfenster__blaettern .knopf:only-child {
  margin: 0 auto;
}

.eigenesfenster__blaettern .knopf {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
}


/* Der Kopf eines Dokuments (03.09.2026).
   Oben Name und Datum – die beiden Angaben, nach denen man ein Blatt
   wiedererkennt. Darunter eine Zeile: links wo es liegt, rechts das
   Herunterladen. */
.seitentitel--mitdatum {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
}

.seitentitel__datum {
  font-size: 0.62em;
  font-weight: 400;
  color: var(--farbe-schrift-gedaempft);
  white-space: nowrap;
}

.dokumentkopf {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin: 0 0 0.8rem;
}

.dokumentkopf__pfad {
  margin: 0;
}

.dokumentkopf__laden {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  flex: none;
  border: 1px solid var(--farbe-rand-block);
  border-radius: 5px;
  color: var(--farbe-schrift);
}

.dokumentkopf__laden:hover {
  background: var(--farbe-flaeche-hervor);
  border-color: var(--farbe-rand-betont);
}

/* Ungespeichertes im Drawer (Punkt 70, 03.09.2026).
   Der Punkt am Titel sagt, dass hier etwas offen ist – ohne ihn merkt
   man es erst, wenn gefragt wird. */
.drawer--ungespeichert .drawer__titel::after {
  content: "•";
  margin-left: 0.35rem;
  color: var(--farbe-status-warnung);
  font-size: 1.3em;
  line-height: 0;
  vertical-align: -0.1em;
}

/* „Was hängt hier dran" (04.09.2026). Der Block steht am Ende jeder
   Detailansicht und ist zugeklappt: Meistens will man das Objekt sehen,
   nicht seine Nachbarn. */
.verknuepft {
  margin: 0.2rem 0 0.8rem;
  padding-left: 1.2rem;
}

.verknuepft li {
  margin-bottom: 0.2rem;
}


/* ═══════════════════════════════ Die Visitenkarte eines Kontakts
   0.2.16, Sammlung 144: *„Ein schönerer Drawer, der einfach nur die
   Stammdaten anzeigt [...] auch mit etwas mehr Kontrast."* Gewählt aus
   drei Entwürfen (`entwuerfe/kontaktdrawer-bplus.html`): oben die
   Visitenkarte, darunter alles auf getönter Fläche – dieselbe Sprache
   wie die Karten der Akte und die Eingabemasken. */
.visite {
  position: relative;
  padding: 1rem 1.1rem 1.1rem;
  background: var(--farbe-flaeche-hervor);
  border-radius: 8px;
  border-top: 4px solid var(--farbe-bereich-klienten);
}

.visite__art {
  margin: 0;
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--farbe-bereich-klienten);
}

.visite__name { margin: 0.15rem 0 0; font-size: 1.6rem; line-height: 1.2; }
.visite__rolle { margin: 0.3rem 0 0; }

/* Zwei Spalten: links, wo er sitzt, rechts, wie man ihn erreicht. */
.visite__spalten {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.2rem 1.2rem;
  margin-top: 0.9rem;
}

.visite__zeile {
  display: flex;
  gap: 0.5rem;
  align-items: flex-start;
  margin: 0 0 0.45rem;
  font-weight: 600;
}

.visite__zeile .icon {
  flex: none;
  width: 1.1rem;
  height: 1.1rem;
  margin-top: 0.15rem;
  color: var(--farbe-bereich-klienten);
}

/* Eine lange Adresse sprengt sonst die Spalte. */
.visite__zeile a { word-break: break-word; }

.b-abschnitt { margin-top: 1.4rem; }

.b-abschnitt h2 {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  margin: 0 0 0.5rem;
  padding-bottom: 0.3rem;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  border-bottom: 2px solid var(--farbe-rand-block);
}

.b-abschnitt h2 .tatknopf { margin-left: auto; }

.zahl-marke {
  display: inline-block;
  margin-left: 0.3rem;
  padding: 0 0.45rem;
  font-size: 0.78rem;
  font-weight: 600;
  border-radius: 999px;
  background: var(--farbe-flaeche-hervor);
  color: var(--farbe-schrift);
}

.karte-b { margin: 0; padding: 0.7rem 0.9rem 0.8rem; }

/* Die IBAN in gleichbreiter Schrift: So lässt sie sich Block für Block
   mit dem Kontoauszug vergleichen. */
.iban { font-family: Consolas, "Cascadia Mono", monospace; font-size: 0.92em; letter-spacing: 0.02em; }

/* Je Ansprechpartner eine Karte: Kürzel, Name, Rolle, Erreichbarkeit. */
.kartenfolge .eintrag { margin: 0; }
.kartenfolge .eintrag + .eintrag { margin-top: 0.5rem; }

.personkarte {
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: 0.7rem;
  align-items: center;
  justify-items: start;
  padding: 0.6rem 0.8rem;
}

.personkarte > a,
.personkarte > span:not(.kuerzel):not(.eintrag__ecke) { grid-column: 2; }
.personkarte .kuerzel { grid-row: 1 / span 3; grid-column: 1; }
.personkarte__name { font-weight: 600; }
.personkarte__rolle { font-size: 0.9rem; }

.personkarte__weg {
  display: flex;
  flex-wrap: wrap;
  gap: 0.15rem 1rem;
  font-size: 0.85rem;
  color: var(--farbe-schrift-gedaempft);
}

.kuerzel {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.1rem;
  height: 2.1rem;
  border-radius: 50%;
  font-size: 0.8rem;
  font-weight: 700;
  background: var(--farbe-bereich-klienten);
  color: var(--farbe-schrift-invers);
}

.mitzeichen { display: inline-flex; align-items: center; gap: 0.35rem; }
.mitzeichen .icon { width: 1rem; height: 1rem; color: var(--farbe-bereich-klienten); }

/* ═══════════════════════════════════ Tags
   Eine Sammlung für alle Objekte (entschieden 01.09.2026).
   Die Farbe ist eine **Rolle**, kein Wert – ein gespeicherter Hexwert
   wäre in einem der fünf Schemata unlesbar. */
.tag {
  display: inline-flex;
  align-items: center;
  gap: 0.2rem;
  padding: 0.1rem 0.5rem;
  margin: 0.12rem 0.25rem 0.12rem 0;
  border-radius: 999px;
  font-size: 0.84rem;
  white-space: nowrap;
}

.tag--kastanie { background: var(--farbe-tag-kastanie-hell); color: var(--farbe-tag-kastanie); }
.tag--oliv     { background: var(--farbe-tag-oliv-hell);     color: var(--farbe-tag-oliv); }
.tag--petrol   { background: var(--farbe-tag-petrol-hell);   color: var(--farbe-tag-petrol); }
.tag--pflaume  { background: var(--farbe-tag-pflaume-hell);  color: var(--farbe-tag-pflaume); }
.tag--rost     { background: var(--farbe-tag-rost-hell);     color: var(--farbe-tag-rost); }
.tag--umbra    { background: var(--farbe-tag-umbra-hell);    color: var(--farbe-tag-umbra); }
.tag--lehm     { background: var(--farbe-tag-lehm-hell);     color: var(--farbe-tag-lehm); }
.tag--schiefer { background: var(--farbe-tag-schiefer-hell); color: var(--farbe-tag-schiefer); }
.tag--moos     { background: var(--farbe-tag-moos-hell);     color: var(--farbe-tag-moos); }
.tag--beere    { background: var(--farbe-tag-beere-hell);    color: var(--farbe-tag-beere); }

/* Das Minus nimmt die Zuordnung weg – der Tag bleibt im Vorrat. */
.tag__weg {
  border: none;
  background: none;
  padding: 0 0 0 0.1rem;
  margin: 0;
  color: inherit;
  opacity: 0.55;
  cursor: pointer;
  font-size: 1.05em;
  line-height: 1;
}

.tag__weg:hover { opacity: 1; }

.tag.waehlbar { cursor: pointer; }
.tag.waehlbar:hover { outline: 2px solid var(--farbe-rand-betont); }
.tag.schon-da { opacity: 0.4; }

/* **Im Tag-Dialog nicht blass, sondern mit Haken** (Sammlung 140). Seit
   er offen bleibt, wechselt eine Marke dort mehrmals hin und her – blass
   hieße „nicht wählbar", und das stimmt nicht mehr. */
.tag.ist-zugeordnet { box-shadow: inset 0 0 0 1.5px currentColor; font-weight: 600; }
.tag.ist-zugeordnet::before { content: "\2713"; margin-right: 0.15rem; }

.dialog__zugeordnet { margin: 0 0 0.6rem; }

.tagreihe {
  padding: 0.4rem 0.5rem;
  border: 1px solid var(--farbe-rand-block);
  border-radius: 5px;
  min-height: 2rem;
}

.tagreihe--vorrat { background: var(--farbe-flaeche-hervor); }

/* **Der Drawer wird nicht breiter, wenn der Vorrat aufklappt.**
   Gemeldet am 04.09.2026. Jede Marke trägt `white-space: nowrap`; 169
   davon in einer Reihe machen den Inhalt breiter als den Drawer, und
   der wuchs mit. Die Reihe darf umbrechen – sie tut es ohnehin –, aber
   sie darf die Breite nicht bestimmen. */
.drawer .tagreihe,
.drawer .tagvorrat { max-width: 100%; }
.drawer__rumpf { overflow-x: hidden; }

/* Der Vorrat klappt auf – sonst stünde er auf jeder Detailseite, auch
   wenn man nur liest. */
.tagvorrat { margin-top: 0.7rem; }

.tagvorrat > summary {
  cursor: pointer;
  list-style: none;
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  font-size: 0.9rem;
  color: var(--farbe-verweis);
}

.tagvorrat > summary::-webkit-details-marker { display: none; }

/* Die Pflege in den Einstellungen. */
.tagform {
  display: flex;
  align-items: flex-end;
  gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: 1rem;
}

.tagform input, .tagform select { margin: 0; }
.tagform input { width: 18rem; }

.tagzeile {
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

.tagzeile input { width: 12rem; margin: 0; }
.tagzeile select { margin: 0; }

.spalte--tags { white-space: normal; }

h2.block__titel .icon { vertical-align: -0.2em; margin-right: 0.3rem; }

/* Die Pflege klappt auf – drei Eingabefelder je Zeile schoben die
   Tabelle über den Rand. */
.tagpflege > summary {
  list-style: none;
  cursor: pointer;
}

.tagpflege > summary::-webkit-details-marker { display: none; }

.tagpflege[open] > summary {
  background: var(--farbe-flaeche-hervor);
  border-color: var(--farbe-rand-betont);
}

.tagpflege .tagzeile {
  margin-top: 0.4rem;
  flex-wrap: wrap;
}

/* Bei mehreren markierten Zeilen: „2 von 5" sagt, dass der Tag nicht
   an allen hängt. Ohne das sähe es aus, als hinge er überall. */
.tag__teilweise {
  margin-left: 0.3rem;
  font-size: 0.85em;
  opacity: 0.75;
}


/* ═══════════════════════════════════════════════════ Aktennotizen
   Sprint 2, Schritt 11. Die Aufteilung stammt aus dem Entwurf vom
   04.09.2026: entwuerfe/aktennotizen.html. */

/* Wann und von wem stehen übereinander, nicht in zwei Spalten: Mit dem
   Menü daneben bleiben der Liste gut 950 Pixel, und in einer
   8-Prozent-Spalte stand „Vertretu ng". */
.notiz__von {
  color: var(--farbe-schrift-gedaempft);
  font-size: 0.78rem;
}

/* Der Textanfang unter dem Betreff – eine Zeile, abgeschnitten. Zwei
   Zeilen machen die Liste doppelt so hoch, und man liest sie doch
   nicht. */
.notiz__anfang {
  color: var(--farbe-schrift-gedaempft);
  font-size: 0.82rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Ohne `fixed` ignoriert der Browser die `colgroup` und verteilt nach
   Inhalt: Die Inhaltsspalte nahm sich 729 von 1024 Pixeln, und in der
   Klientenspalte stand „Müll er, Anna". Im Browser gesehen. */
.notizliste { table-layout: fixed; }

.notizliste td { vertical-align: top; }
.notizliste td:first-child { white-space: nowrap; }

/* Lange Klientennamen brechen um, statt in die Nachbarspalte zu laufen. */
.notizliste td.bricht { overflow-wrap: anywhere; }

/* Der Notiztext behält seine Absätze, ohne dass HTML im Text landen
   kann. */
.notiztext {
  white-space: pre-wrap;
  margin: 0 0 0.6rem;
}

/* „Müssen wir das Datum oben rechts größer machen? Mindestens so groß
   wie den Betreff" (04.09.2026). Gedämpft bleibt es trotzdem – in voller
   Farbe stünden dort zwei gleichwertige Überschriften nebeneinander. */
.seitentitel__datum--gross { font-size: 1em; }

/* Das Pluszeichen rechtsbündig in der Überschriftszeile statt in einer
   eigenen Zeile darunter: „Dann sparen wir uns unten eine Zeile Platz." */
.block__titel--mitknopf {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.block__plus {
  border: 1px solid var(--farbe-rand-block);
  background: var(--farbe-flaeche-block);
  border-radius: 5px;
  padding: 0.15rem 0.4rem;
  cursor: pointer;
  color: var(--farbe-verweis);
  line-height: 1;
}

.block__plus:hover { border-color: var(--farbe-rand-betont); }

.block__plus.ist-offen {
  background: var(--farbe-flaeche-hervor);
  border-color: var(--farbe-rand-betont);
}

.block__plus .icon { width: 0.95rem; height: 0.95rem; display: block; }

/* Der Klient im Formular steht fest und ist kein Auswahlfeld: Wer aus
   der Akte heraus anlegt, hat ihn schon. */
.vorbelegt {
  margin: 0;
  padding: 0.4rem 0.6rem;
  background: var(--farbe-flaeche-hervor);
  border: 1px solid var(--farbe-rand-block);
  border-radius: 5px;
}

.vorbelegt .icon { vertical-align: -0.15em; margin-right: 0.25rem; }

.knopfzeile { display: flex; gap: 0.5rem; align-items: center; }
.knopfzeile .knopf { margin-top: 0; }


/* ═══════════════════════════════════════════════════ Dokumentwähler
   Der zweite Drawer, links neben dem ersten. Bestellt am 04.09.2026 als
   Werkzeug für mehrere Stellen: Aktennotiz, To-do, Schreiben, Termin. */

.drawer--waehler {
  /* **An `--drawer-breite` angedockt, nicht an einem Prozentwert.** Der
     erste Drawer ist 46rem breit; ein Prozentwert legte den zweiten
     mitten hinein. Im Entwurf zweimal passiert. */
  /* An der **schmalen** Breite: Sobald der Wähler offen ist, schrumpft
     der Erfassungsdrawer auf `--drawer-schmal`. Am vollen Wert
     angedockt klaffte eine Lücke von 288 Pixeln dazwischen. */
  right: calc(var(--drawer-schmal) + 1.5rem);
  top: 2rem;
  bottom: auto;
  /* **Um die Hälfte breiter als der erste Entwurf** (30rem), gemeldet
     am 04.09.2026: „Dialog kann mind. 50% breiter werden." Der Platz
     ist da – solange der Wähler offen ist, wird der Erfassungsdrawer
     ohnehin schmaler. */
  width: 45rem;
  max-width: calc(100% - var(--drawer-schmal) - 3rem);
  max-height: 34rem;
  border: 1px solid var(--farbe-rand-betont);
  border-radius: 6px;
  box-shadow: -10px 6px 26px rgba(0, 0, 0, 0.22);
  background: var(--farbe-flaeche-block);
}

.drawer--waehler .drawer__rumpf {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 0.7rem 0.9rem;
  overflow: hidden;
}

/* Solange der Wähler offen ist, wird der Erfassungsdrawer schmaler –
   bestellt am 04.09.2026. Ohne das passen 46rem + 30rem + Abstand nicht
   auf 1280 Pixel. */
body.waehler-offen .drawer:not(.drawer--waehler) {
  width: var(--drawer-schmal);
}

/* **Die erste Spalte breiter** – dort steht der Dateiname, und der ist
   das, wonach man sucht. Gemeldet am 04.09.2026. Die beiden anderen
   tragen Ordner und Datum und kommen mit wenig aus. */
.waehler__liste .tabelle th:first-child,
.waehler__liste .tabelle td:first-child { width: auto; }
.waehler__liste .tabelle th:nth-child(2),
.waehler__liste .tabelle td:nth-child(2) { width: 25%; }
.waehler__liste .tabelle th:nth-child(3),
.waehler__liste .tabelle td:nth-child(3) { width: 14%; white-space: nowrap; }
/* Die vierte Spalte (0.2.84): der Knopf „In eigenem Fenster ansehen". */
.waehler__liste .tabelle th:last-child,
.waehler__liste .tabelle td:last-child { width: 2.4rem; text-align: right; }

.waehler__suche { width: 100%; box-sizing: border-box; }

.waehler__pfad {
  margin: 0;
  display: flex;
  align-items: center;
  gap: 0.35rem;
}

.waehler__hoch {
  border: 1px solid var(--farbe-rand-block);
  background: var(--farbe-flaeche-block);
  border-radius: 4px;
  padding: 0.1rem 0.25rem;
  cursor: pointer;
  color: var(--farbe-verweis);
  line-height: 1;
}

.waehler__hoch .icon { width: 0.9rem; height: 0.9rem; display: block; }

/* Die Liste scrollt, das Sammelfeld bleibt stehen – sonst schiebt eine
   lange Akte den Ablegeort aus dem Bild. */
.waehler__liste {
  flex: 1 1 auto;
  min-height: 8rem;
  max-height: 14rem;
  overflow: auto;
  border: 1px solid var(--farbe-rand-block);
  border-radius: 5px;
}

.waehler__liste .tabelle { margin: 0; table-layout: fixed; }
.waehler__liste td, .waehler__liste th { font-size: 0.84rem; }

.waehler__liste thead th {
  position: sticky;
  top: 0;
  background: var(--farbe-flaeche-block);
}

.waehler__leer { padding: 1.5rem 1rem; text-align: center; margin: 0; }

.ist-ordner { cursor: pointer; }
.ist-ziehbar { cursor: grab; }

/* Was schon dranhängt oder schon gewählt ist, lässt sich nicht noch
   einmal nehmen – sonst legt man dasselbe zweimal hinein und wundert
   sich, dass nichts geschieht. */
.waehler__liste .schon-da { opacity: 0.45; cursor: default; }

/* Gestrichelt, solange es leer ist: Ein Kasten mit festem Rand sieht aus
   wie eine Liste, die gerade nichts enthält. */
.sammelfeld {
  flex: none;
  border: 2px dashed var(--farbe-rand-block);
  border-radius: 6px;
  padding: 0.5rem 0.6rem;
}

.sammelfeld.ist-ueber {
  border-color: var(--farbe-rand-betont);
  border-style: solid;
  background: var(--farbe-flaeche-hervor);
}

.sammelfeld__marke {
  margin: 0 0 0.35rem;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--farbe-schrift-gedaempft);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.sammelfeld__leer {
  margin: 0;
  padding: 0.6rem 0;
  text-align: center;
  color: var(--farbe-schrift-gedaempft);
  font-size: 0.86rem;
}

.sammelfeld__leer .icon {
  width: 1rem;
  height: 1rem;
  vertical-align: -0.15em;
  margin-right: 0.3rem;
}

.sammelliste { list-style: none; margin: 0; padding: 0; font-size: 0.84rem; }

.sammelliste li {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.25rem 0.3rem;
  border-bottom: 1px solid var(--farbe-rand-block);
}

.sammelliste li:last-child { border-bottom: none; }
.sammelliste .icon { width: 0.9rem; height: 0.9rem; flex: none; }

.sammelliste__name {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sammelliste .reihenknopf { margin-left: auto; }

.reihenknopf {
  border: none;
  background: none;
  padding: 0 0.15rem;
  margin: 0;
  color: var(--farbe-schrift-gedaempft);
  cursor: pointer;
  line-height: 1;
}

.reihenknopf:hover { color: var(--farbe-verweis); }

/* Die Anlagen an der Notiz – im Formular und in der Detailansicht. */
.anlagenliste { list-style: none; margin: 0; padding: 0; font-size: 0.88rem; }

.anlagenliste li {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.3rem 0.4rem;
  border: 1px solid var(--farbe-rand-block);
  border-radius: 5px;
  margin-bottom: 0.3rem;
}

.anlagenliste .icon { width: 0.9rem; height: 0.9rem; flex: none; }
.anlagenliste .reihenknopf { margin-left: auto; }

.feldkopf {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 0.8rem 0 0.3rem;
  font-weight: 600;
  font-size: 0.9rem;
}


/* ── Den Tag-Vorrat filtern (0.1.79) ─────────────────────────────────
   Mit 169 Tags ist eine Reihe von Marken eine Wand. Ein Feld darüber
   dünnt sie beim Tippen aus – dieselbe Machart wie der Sofortfilter der
   Ablage. */

/* **`.tag` ist `inline-flex`, und das schlägt das `hidden`-Attribut.**
   Ohne diese Regel filtert das Feld, ohne dass etwas verschwindet. */
.tag[hidden] { display: none !important; }

.tagfilter {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0 0 0.5rem;
}

.tagfilter input { flex: 1 1 auto; min-width: 0; }
.tagfilter__zahl { font-size: 0.85rem; white-space: nowrap; }


/* ── Wo ein Dokument liegt (0.1.80) ──────────────────────────────────
   Der Träger aus dem Ordner und, falls vorhanden, die zweite
   Zugehörigkeit zur Büroakte. Die Datei gibt es einmal. */

.ort__weg { margin: 0 0 0 auto; }
.ort__weg .reihenknopf { margin: 0; }

/* Das Pluszeichen im Blocktitel steht in einem Formular – ohne diese
   Zeile schöbe dessen Rand es aus der Reihe. */
.block__titel--mitknopf form { margin: 0; display: flex; }

/* Die Büroakte im Baum, wenn sie einmal darin steht. */
.baum__akte--buero { font-weight: 600; }

/* „Auch hier abgelegt" – Dokumente, die in einer Klientenakte liegen und
   über eine Kante auch zur Büroakte gehören. Eigene Gruppe, weil sie
   woanders liegen und das sichtbar bleiben soll. */
.gastliste { margin-top: 1.5rem; }
.gastliste .icon { vertical-align: -0.15em; }


/* ── Nachbesserungen vom 04.09.2026 ──────────────────────────────────

   **Der Filterknopf springt nicht mehr.** „Filter aufheben" war
   zweizeilig und schob beim Erscheinen den Inhalt darunter nach unten.
   Ein Kreuz ist einzeilig – das Problem verschwindet von selbst. */
.filter {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.filter .knopf { margin-top: 0; white-space: nowrap; }

/* Auswahlfelder sind sonst `width: 100%` – richtig im Formular, falsch
   in der Filterzeile: dort schob das Feld Beschriftung und Knoepfe je
   in eine eigene Zeile. Genau das Springen, das am 04.09.2026 gemeldet
   wurde. Hier nimmt es die Breite seines Inhalts. */
.filter select { width: auto; }

/* Das Kreuz sitzt neben „zur Akte" und muss genauso hoch sein: die
   groessere Schrift wird ueber die Zeilenhoehe wieder eingefangen, das
   senkrechte Polster bleibt das des Knopfes. */
.filter__weg {
  font-size: 1.1rem;
  line-height: 1.1;
  padding-left: 0.7rem;
  padding-right: 0.7rem;
}

/* **Die Befehlsknöpfe fast so groß wie ihr Rand** (04.09.2026). Vorher
   saß ein kleines Zeichen in einem großen Kasten. */
.werkzeug {
  padding: 0.2rem;
  line-height: 0;
}

.werkzeug .icon {
  width: 1.6rem;
  height: 1.6rem;
}

/* Der Notiztext bekommt einen Kasten – analog dem Eingabefeld im
   Drawer, damit man sieht, wo er anfängt und aufhört. */
.notizkasten {
  border: 1px solid var(--farbe-rand-block);
  border-radius: 5px;
  background: var(--farbe-flaeche-seite);
  padding: 0.6rem 0.75rem;
  margin: 0;
  white-space: pre-wrap;
  /* **So hoch wie das Eingabefeld im Drawer** – das hat `rows="8"` und
     misst damit 176 Pixel. Punkt 91 lautete „analog zum Eingabefeld";
     4rem waren zu wenig, am 05.09.2026 nachgetragen. */
  min-height: 11rem;
}

/* „Angelegt am / zuletzt geändert" steht ganz unten – Regel vom
   04.09.2026: Solche Angaben gehören immer ans Ende. */
.fussnote--stand {
  margin: 1.2rem 0 0;
  padding-top: 0.6rem;
  border-top: 1px solid var(--farbe-rand-block);
}


/* **Die Tags als Wolke** statt als Tabelle (04.09.2026). 169 Zeilen sind
   eine lange Liste; nebeneinander passen sie auf einen Blick. */
.tagwolke {
  display: flex;
  flex-wrap: wrap;
  gap: 0.2rem 0.4rem;
  align-items: flex-start;
}

.tagwolke__stueck { display: inline-flex; align-items: center; gap: 0.15rem; }

/* Wie bei `.tag`: `inline-flex` schlaegt das `hidden`-Attribut, und der
   Filter fuellte sonst ins Leere. */
.tagwolke__stueck[hidden] { display: none !important; }

/* Die Pflege klappt unter der Marke auf und darf dabei die ganze Breite
   nehmen – sonst quetscht sie sich zwischen die Nachbarn. */
.tagwolke__stueck .tagpflege[open] { position: relative; }

.tagwolke__stueck .tagpflege[open] .tagzeile {
  position: absolute;
  left: 0;
  top: 100%;
  z-index: 3;
  background: var(--farbe-flaeche-block);
  border: 1px solid var(--farbe-rand-betont);
  border-radius: 5px;
  padding: 0.5rem;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.18);
  white-space: nowrap;
}

/* Die Verwendungszahl an der Marke – „nirgends" braucht keine Zahl. */
.tag__zahl {
  margin-left: 0.3rem;
  padding: 0 0.25rem;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.12);
  font-size: 0.85em;
}


/* ═══════════════════════════════════════════════════ Listenlayout
   Nach MDesk-Listenlayout.xlsx, Stand 11.09.2026 (Sammlung 113).
   Entwurf: entwuerfe/listenlayout.html.

   **Text links, Knöpfe rechts, die Tags nehmen den Rest** (Sammlung
   101). Die Textspalten tragen ihre Breite aus dem Raster der Tabelle,
   die Knopfleiste eine feste, und die Tag-Spalte bekommt keine – sie
   nimmt, was übrig bleibt. Ohne `fixed` verteilte der Browser nach
   Inhalt und ließe die `colgroup` links liegen.

   Schmale Spalten trennen nach Silben, nicht irgendwo: `anywhere` machte
   aus der Bahnhofstraße eine „Bahnhofstraß e". Im Browser gesehen. */
.listentabelle { table-layout: fixed; }
.listentabelle td { vertical-align: top; overflow-wrap: break-word; hyphens: auto; }
.listentabelle th { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Neun Knöpfe zu 32 Pixeln mit acht Lücken zu 3 sind 312 Pixel, dazu
   der Innenabstand der Zelle links. */
.listentabelle .spalte--leiste { width: 325px; }

/* Die Klientenliste trägt zehn Knöpfe (Sammlung 139): 35 Pixel mehr. */
#klientenliste .spalte--leiste { width: 360px; }

/* Anlegen und Klientenfilter in einer Zeile (Aktennotizen, 11.09.2026).
   Außerhalb der Werkzeugleiste trägt der Filter einen Abstand nach
   unten; hier stünde er damit schief. */
.werkzeuge__links .filter { margin: 0 0 0 0.5rem; }

.knopfleiste { display: inline-flex; gap: 3px; vertical-align: top; }

/* Der Knopf: Rechteck mit runden Ecken (05.09.2026), 32 Pixel, das
   Zeichen darin 28 (10.09.2026). */
.leistenknopf {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  font: inherit;
  color: var(--farbe-schrift-gedaempft);
  background: none;
  border: 1px solid var(--farbe-rand-block);
  border-radius: 5px;
  cursor: pointer;
  text-decoration: none;
}

.leistenknopf .icon { width: 28px; height: 28px; }

.leistenknopf:hover {
  color: var(--farbe-schrift);
  border-color: var(--farbe-rand-betont);
  background: var(--farbe-flaeche-hervor);
}

/* Was es noch nicht gibt: sichtbar, aber ohne Rahmen und blass. Die
   Leiste steht vollständig da und wird nach und nach lebendig
   (Sammlung 75); wann etwas kommt, sagt der Titel. */
.leistenknopf--spaeter,
.leistenknopf--spaeter:hover {
  color: var(--farbe-schrift-gedaempft);
  background: none;
  border-color: transparent;
  opacity: 0.4;
  cursor: default;
}

/* Ein freier Platz ist so groß wie ein Knopf – sonst rückten die
   übrigen von ihrer Stelle. */
.knopfplatz { display: inline-block; width: 32px; height: 32px; }

/* Die Scheibe unter dem Plus deckt das Grundzeichen ab. Sie trägt die
   Farbe dessen, worauf sie liegt – sonst stünde auf einer markierten
   Zeile ein heller Kreis. */
.knopfzeichen__grund { fill: var(--farbe-flaeche-block); stroke: none; }
.dateiliste__zeile:hover .knopfzeichen__grund { fill: var(--farbe-flaeche-hervor); }
.dateiliste__zeile--gewaehlt .knopfzeichen__grund,
.dateiliste__zeile:focus .knopfzeichen__grund { fill: var(--farbe-bereich-dokumente-hell); }
.leistenknopf:hover .knopfzeichen__grund { fill: var(--farbe-flaeche-hervor); }

/* Die Anlagen einer Notiz mit Namen, je eine Zeile, abgeschnitten. */
.listenanlage {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 400;
  font-size: 0.86rem;
}

.listenanlage .icon {
  width: 0.95rem;
  height: 0.95rem;
  vertical-align: -0.15em;
  margin-right: 0.2rem;
}

/* Eine Notiz ohne Betreff: Der Inhalt steht allein, eine Zeile lang. */
.notiz__allein {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ══════════════════════════════════════════════ Vermögen (Sprint 3)

   Das Register nach dem Entwurf vom 12.09.2026
   (`entwuerfe/vermoegen.html`): oben die Bilanz, darunter die
   Prüfliste, dann vier Bereiche mit der Summe in der Überschrift. */

.bilanz {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem 3rem;
  margin: 0 0 1rem;
  padding: 0.8rem 1.5rem;
  background: var(--farbe-flaeche-block);
  border: 1px solid var(--farbe-rand-block);
  border-left: 4px solid var(--farbe-bereich-klienten);
}

.bilanz__teil { display: flex; gap: 2rem; }

.bilanz__stueck {
  display: flex;
  flex-direction: column;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  font-size: 1.05rem;
}

.bilanz__wort {
  font-size: 0.78rem;
  font-weight: 400;
  color: var(--farbe-schrift-gedaempft);
}

a.bilanz__wort { text-decoration: underline dotted; cursor: pointer; }
a.bilanz__wort:hover { color: var(--farbe-schrift); }

/* Die Summe abgesetzt: Sie steht auf derselben Zeile wie ihre Posten
   und soll trotzdem nicht als dritter Posten gelesen werden. */
.bilanz__stueck--summe {
  padding-left: 1.2rem;
  border-left: 1px solid var(--farbe-rand-block);
}

.bilanz__stichtag {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.85rem;
}

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

/* Der Anker: Die Überschrift des Bereichs führt zurück zur Bilanz –
   „um nicht scrollen zu müssen" (12.09.2026). */
.bereich__hoch { color: inherit; text-decoration: none; }
.bereich__hoch:hover { text-decoration: underline dotted; }

.bereich__summe {
  margin-left: 0.6rem;
  font-weight: 400;
  color: var(--farbe-schrift-gedaempft);
  font-variant-numeric: tabular-nums;
}

.vermoegen__leiste { margin: 0 0 0.8rem; }

/* ── Die Klammer in der Ecke einer Karte ──────────────────────────
   *„Neben links dem Bearbeiten-Button eine Büroklammer, die anzeigt ob
   und wenn ja wieviele Dokumente hinterlegt sind. Möchte nicht, dass
   die Seite zu voll wird."* (15.09.2026)

   Die Ecke traegt zwei Zeichen statt einem - ein Kasten haelt sie
   zusammen, statt `.eintrag__tat` zweimal an dieselbe Stelle schweben
   zu lassen. */
.eintrag__ecke {
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
  display: flex;
  align-items: center;
  gap: 0.3rem;
}

.eintrag__ecke > .tatknopf { position: static; }

/* Die Klammer traegt ihre Zahl neben sich und wird dafuer etwas breiter
   als ein Zeichenknopf. */
.anhangknopf {
  width: auto;
  min-width: 1.6rem;
  padding: 0 0.32rem;
  gap: 0.15rem;
  background: none;
  cursor: pointer;
  font: inherit;
}

/* **Ohne Anhang bleibt sie stehen, nur blass.** Weg duerfte sie nicht:
   Sonst gaebe es keinen Weg, den ersten anzuhaengen. */
.anhangknopf--leer { color: var(--farbe-schrift-gedaempft); opacity: 0.55; }

.anhangknopf__zahl { font-size: 0.78rem; font-weight: 600; }

/* Klammer und Stift in einer Tabellenzeile (0.2.14). */
.zeile__taten { display: inline-flex; align-items: center; gap: 0.3rem; white-space: nowrap; }

/* **Das Fenster der Klammer** (Sammlung 142) – statt der aufklappenden
   Zeile unter der Karte. Entwurf: entwuerfe/anhaenge-dialog.html. */
.anhangliste { list-style: none; margin: 0.25rem 0 0.75rem; padding: 0; }

.anhangliste li {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.45rem 0.2rem;
  border-bottom: 1px solid var(--farbe-rand-block);
}

.anhangliste li:first-child { border-top: 1px solid var(--farbe-rand-block); }
.anhangliste .icon { width: 1.1rem; height: 1.1rem; flex: none; }

.anhangliste__name {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.anhangliste__datum { font-size: 0.85rem; }

/* „Dokument hinzufügen" links, „Fertig" rechts. */
.dialog--anhaenge .dialog__knoepfe > :first-child:not(:last-child) { margin-right: auto; }


/* Ein erzwungener Zeilenumbruch im Feldfluss: Das nächste Feld
   beginnt eine neue Zeile, ohne dass ein Feld dafür die volle Breite
   nehmen muss. */
.felder__umbruch { flex-basis: 100%; height: 0; margin: 0; }


/* ── Weitere Angaben: der Klappteil am Ende eines Formulars ───────
   *„Könnten wir bei der Eingabe manche Felder als 'Erweitert'
   definieren? Sodass wir bei einem Girokonto dann nicht alle Felder
   sofort sieht?"* (13.09.2026) Das Muster gibt es schon: Die Akte
   klappt abgelaufene Einträge mit `<details>` ein, ohne eine Zeile
   Skript. */
.weitere {
  margin-top: 0.4rem;
  border-top: 1px solid var(--farbe-rand-block);
  padding-top: 0.6rem;
}

.weitere > summary {
  cursor: pointer;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--farbe-verweis);
  list-style: none;
}

.weitere > summary::-webkit-details-marker { display: none; }

.weitere > summary::before {
  content: "\25b8";
  display: inline-block;
  width: 1rem;
  transition: transform 0.12s;
}

.weitere[open] > summary::before { transform: rotate(90deg); }

.weitere__zahl {
  margin-left: 0.3rem;
  padding: 0 0.35rem;
  border-radius: 8px;
  background: var(--farbe-flaeche-hervor);
  color: var(--farbe-schrift-gedaempft);
  font-size: 0.8rem;
}

.weitere .felder { margin-top: 0.7rem; }


/* Beträge rechtsbündig und mit gleich breiten Ziffern – sonst steht
   das Komma in jeder Zeile woanders.

   **Beide Zellenarten ausdrücklich**, und das ist keine Schreibfaulheit:
   `.tabelle th, .tabelle td` setzt `text-align: left` und ist mit zwei
   Bestandteilen stärker als `.zahl` allein. Bis 0.2.0 stand deshalb die
   Überschrift rechts und der Betrag darunter links – am 13.09.2026
   gemeldet: *„die Spaltenüberschriften der Beträge sind rechtsbündig
   und die Wertangaben linksbündig."* */
.zahl {
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

th.zahl,
td.zahl { text-align: right; }

.vermoegensliste td { vertical-align: middle; }

/* Vier Knöpfe zu 32 Pixeln mit drei Lücken zu 3 sind 137 – die
   Vermögensliste hat keine neun Plätze (12.09.2026). */
.vermoegensliste .spalte--leiste { width: 150px; }
.vermoegensliste .marke { font-size: 0.75rem; margin-top: 0.15rem; }

/* Ein Wert ist nach zwölf Monaten zu alt (12.09.2026). Die Meldung auf
   dem Dashboard kommt mit Sprint 8; hier steht sie in der Zeile. */
.stichtag--alt {
  color: var(--farbe-status-warnung);
  text-decoration: underline dotted;
  cursor: help;
}

.nachweis { color: var(--farbe-verweis); }
.nachweis .icon { width: 1.25rem; height: 1.25rem; }
.nachweis--fehlt { color: var(--farbe-status-warnung); cursor: help; }

/* Aufgelöstes steht blass und am Ende – es zählt zum Stichtag nicht
   mehr mit. */
.aufgeloest td { opacity: 0.55; }

/* Die Prüfliste: je Art ein Stück, der Zustand an der Farbe. */
.pruefliste > summary {
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.pruefreihe {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.3rem;
  margin: 0.35rem 0;
}

.pruefreihe__gruppe {
  width: 6rem;
  flex: none;
  font-size: 0.82rem;
  color: var(--farbe-schrift-gedaempft);
}

/* Das Formular je Art ist nur der Träger des Knopfes – es darf die
   Reihe nicht umbrechen. */
.pruefform { display: contents; }

.pruef {
  font: inherit;
  font-size: 0.8rem;
  padding: 0.1rem 0.55rem;
  border-radius: 999px;
  border: 1px solid transparent;
  background: none;
}

.pruef--vorhanden {
  background: var(--farbe-status-erledigt-hell);
  color: var(--farbe-status-erledigt);
}

.pruef--nicht {
  color: var(--farbe-schrift-gedaempft);
  border-color: var(--farbe-rand-block);
  text-decoration: line-through;
  cursor: pointer;
}

.pruef--offen {
  border: 1px dashed var(--farbe-status-warnung);
  color: var(--farbe-status-warnung);
  cursor: pointer;
}

/* Der Wertverlauf im Drawer. */
.wertverlauf td { font-weight: 400; }
.wertverlauf .reihenknopf { margin-left: 0.2rem; }
.wertverlauf form { display: inline; }

/* Auflösen ist kein Löschen: Es braucht ein Datum, und das steht neben
   dem Knopf statt in einem eigenen Kasten. */
.aufloesen {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  margin: 1rem 0;
}

.aufloesen input { width: auto; margin: 0; }
.aufloesen .fussnote { flex: 1 1 100%; margin: 0; }

/* ══════════════════════════════ Spaltenbreiten ziehen (Sammlung 117)

   Ein Griff am rechten Rand jeder Überschrift, wie der des Drawers.
   Er sitzt **innerhalb** der Zelle: `th` schneidet ab, was hinausragt,
   und ein Griff halb auf dem Rand wäre halb weg. */
.listentabelle th { position: relative; }

.spaltengriff {
  position: absolute;
  top: 0;
  right: 0;
  width: 6px;
  height: 100%;
  cursor: col-resize;
  /* Unsichtbar, bis die Maus kommt: Sechs Striche über der Liste wären
     ein Gitter. */
  background: transparent;
}

.spaltengriff:hover {
  background: var(--farbe-rand-betont);
}

/* Erscheint nur, wenn etwas zu verwerfen ist – gezeichnet vom Skript. */
.spaltenzurueck {
  display: block;
  margin: 0 0 0.3rem auto;
  padding: 0.1rem 0.4rem;
  font: inherit;
  font-size: 0.78rem;
  color: var(--farbe-schrift-gedaempft);
  background: none;
  border: 1px solid var(--farbe-rand-block);
  border-radius: 3px;
  cursor: pointer;
}

.spaltenzurueck:hover {
  color: var(--farbe-schrift);
  border-color: var(--farbe-rand-betont);
}

/* ═══════════════════════════════════════ Spalten wählen (Sammlung 141)
   Entwurf: entwuerfe/spaltenwahl.html, zweite Fassung. Der Knopf sitzt
   in der Zeile, die ohnehin da ist – Seitentitel oder Blocküberschrift –,
   damit die Tabelle nicht nach unten rückt. */
.titelzeile {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin: 0 0 1rem;
}

.titelzeile > .seitentitel { margin: 0; }
.titelzeile--block { margin: 0 0 0.75rem; }
.titelzeile--block > .block__titel { margin: 0; }

.spaltenanker { position: relative; display: inline-flex; }

.spaltenknopf {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.25rem 0.65rem;
  font: inherit;
  font-size: 0.85rem;
  color: var(--farbe-schrift);
  background: var(--farbe-flaeche-block);
  border: 1px solid var(--farbe-rand-block);
  border-radius: 5px;
  cursor: pointer;
}

.spaltenknopf .icon { width: 1.1rem; height: 1.1rem; }

.spaltenknopf:hover,
.spaltenknopf[aria-expanded="true"] {
  background: var(--farbe-flaeche-hervor);
  border-color: var(--farbe-rand-betont);
}

/* Weicht die Liste von der Vorgabe ab – andere Spalten oder gezogene
   Breiten –, sitzt ein Punkt in der Ecke. Ein Wort machte den Knopf
   breiter als nötig. */
.spaltenknopf.ist-angepasst::after,
.spaltenknopf.ist-gezogen::after {
  content: "";
  position: absolute;
  top: -4px;
  right: -4px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--farbe-status-hinweis);
  border: 2px solid var(--farbe-flaeche-block);
}

.spaltenwahl {
  position: absolute;
  right: 0;
  top: calc(100% + 6px);
  z-index: 20;
  width: 42rem;
  padding: 0.9rem 1.1rem 0.8rem;
  font-size: 0.95rem;
  font-weight: 400;
  line-height: 1.4;
  text-align: left;
  background: var(--farbe-flaeche-block);
  border: 1px solid var(--farbe-rand-betont);
  border-radius: 6px;
  box-shadow: 0 6px 18px rgb(0 0 0 / 20%);
}

.spaltenwahl__titel { margin: 0 0 0.7rem; font-size: 1rem; }

/* Die Gruppen fließen in drei Spalten, keine wird zerrissen. */
.spaltenwahl__gruppen { column-count: 3; column-gap: 1.4rem; }
.spaltenwahl__gruppe { break-inside: avoid; margin-bottom: 0.7rem; }

.spaltenwahl h3 {
  margin: 0 0 0.25rem;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--farbe-schrift-gedaempft);
}

.spaltenwahl label {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.18rem 0;
  cursor: pointer;
}

.spaltenwahl input[type="checkbox"] { margin: 0; }
.spaltenwahl__vorgabe { font-size: 0.55rem; color: var(--farbe-schrift-gedaempft); }

.spaltenwahl__breiten {
  padding-top: 0.6rem;
  border-top: 1px solid var(--farbe-rand-block);
}

.spaltenwahl__breiten > span { margin-right: 0.6rem; font-size: 0.9rem; }

.spaltenwahl__fuss {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 0.8rem;
  padding-top: 0.7rem;
  border-top: 1px solid var(--farbe-rand-block);
}

.spaltenwahl__fuss .knopf { margin-top: 0; }

.spaltenwahl__verweis {
  padding: 0;
  font: inherit;
  font-size: 0.85rem;
  color: var(--farbe-verweis);
  background: none;
  border: none;
  text-decoration: underline;
  cursor: pointer;
}

.spaltenwahl__zahl { margin-left: auto; margin-right: 0.5rem; font-size: 0.85rem; }

/* Die Pruefsumme der IBAN (Sammlung 121). Sie steht neben dem Feld und
   haelt nicht auf: Wer eine halb vorliegende IBAN abtippt, soll
   speichern koennen. */
.ibanpruefung {
  margin: 0.15rem 0 0;
  font-size: 0.8rem;
  color: var(--farbe-status-erledigt);
}

.ibanpruefung--fehler {
  color: var(--farbe-status-warnung);
}

/* Die zwei Wege aus einer Position: nebeneinander, mit kleinen Knoepfen
   (Sammlung 122). Vorher standen sie untereinander, jeder mit einem
   Knopf in voller Groesse - das las sich wie zwei Abschnitte. */
.hinausraus {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
  align-items: flex-start;
  margin: 1rem 0;
}

.hinausraus__weg {
  /* 18rem trägt „Aufgelöst am", das Datumsfeld und den Knopf. Weniger,
     und der Knopf bräche um – dann stünde „Papierkorb" neben dem Datum
     des Auflösens, und niemand wüsste mehr, was wozu gehört. Am
     13.09.2026 im schmalen Drawer gesehen. */
  flex: 1 1 18rem;
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 0.4rem;
}

.hinausraus__weg label { white-space: nowrap; }
.hinausraus__weg input { width: auto; margin: 0; }
.hinausraus__weg .knopf { white-space: nowrap; }

/* Ein kleiner Knopf: Diese beiden sollen nicht nach Hauptsache
   aussehen. */
.knopf--klein {
  padding: 0.2rem 0.6rem;
  font-size: 0.85rem;
}

/* ══════════════════════ Vermögensverzeichnis (Sammlung 126)

   Ein Blatt wie das Stammdatenblatt, nur breiter: sechs Spalten je
   Position brauchen mehr als 46 rem. Am Bildschirm eine Seite Papier,
   im Druck ohne Bedienelemente. */
.blatt__inhalt--verzeichnis { max-width: 58rem; }
.nurbildschirm--breit { max-width: 58rem; }

.verz__kopf {
  margin-bottom: 1.5rem;
  padding-bottom: 0.75rem;
  border-bottom: 2px solid var(--farbe-schrift);
}

.verz__kopf h1 { margin: 0 0 0.2rem; font-size: 1.4rem; }
.verz__kopf p { margin: 0; }

/* Zwei Spalten: links die Benennung, rechts die Angabe. Ein Vordruck
   liest sich so, eine Aufzählung nicht. */
.verz__kopf dl {
  display: grid;
  grid-template-columns: 12rem 1fr;
  gap: 0.15rem 1rem;
  margin: 0.8rem 0 0;
  font-size: 0.92rem;
}

.verz__kopf dt { color: var(--farbe-schrift-gedaempft); }
.verz__kopf dd { margin: 0; }

.verz__wahl { display: flex; align-items: center; gap: 0.4rem; }
.verz__wahl input { width: auto; margin: 0; }

.verz__teil { margin: 1.8rem 0; }
.verz__teil h2 { font-size: 1.05rem; margin: 0 0 0.4rem; }

/* Der Buchstabe des Abschnitts, wie im Vordruck. */
.verz__buchstabe {
  display: inline-block;
  width: 1.5rem;
  height: 1.5rem;
  line-height: 1.5rem;
  margin-right: 0.4rem;
  text-align: center;
  background: var(--farbe-flaeche-kopf);
  color: var(--farbe-schrift-invers);
}

.verzeichnis td,
.verzeichnis th { vertical-align: top; font-size: 0.9rem; }
.verzeichnis .verz__nr { color: var(--farbe-schrift-gedaempft); }
.verzeichnis .verz__art {
  font-size: 0.8rem;
  color: var(--farbe-schrift-gedaempft);
}

.verz__zusatz { margin-top: 0.15rem; }
.verz__zusatz .marke { font-size: 0.75rem; }

/* Die Summe steht unter einem Strich – sonst liest sie sich wie eine
   weitere Position. */
.verzeichnis tfoot td { border-top: 2px solid var(--farbe-schrift); }
.verzeichnis--summe { max-width: 32rem; }
.verzeichnis--summe td:last-child { width: 10rem; }
.verz__strich td { border-top: 1px solid var(--farbe-schrift); }

.verz__schluss p { max-width: 34rem; }

/* Der Kopf der Rechnungslegung über dem Deckblatt (Sprint 12a). Die Texte
   sind länger als in der Zusammenstellung. */
.rlkopf .verzeichnis--summe { max-width: 42rem; }
.rlkopf__ende td { font-weight: 600; border-top: 1px solid var(--farbe-schrift); }
.rlkopf__konten { margin: 0.4rem 0 0; max-width: 42rem; font-size: 0.85rem; color: var(--farbe-schrift-gedaempft); }

/* Die Umsatzliste eines Kontos im Vorgang (12a) – wie im PDF, am Schirm. */
.rlliste .rlkonto { border-collapse: collapse; margin: 0 0 0.8rem; font-size: 0.92rem; }
.rlliste .rlkonto td { padding: 0.1rem 1.5rem 0.1rem 0; border: none; }
.rlliste .rlkonto td:first-child { color: var(--farbe-schrift-gedaempft); }
.rlumsaetze { width: 100%; table-layout: fixed; border-collapse: collapse; font-size: 0.9rem; }
.rlumsaetze__nr { width: 3.5rem; }
.rlumsaetze__tag { width: 7rem; }
.rlumsaetze__betrag { width: 9rem; }
.rlumsaetze__beleg { width: 7rem; }
.rlumsaetze th { padding: 0.3rem 0.5rem; font-weight: 400; color: var(--farbe-schrift-gedaempft);
  border-bottom: 1px solid var(--farbe-schrift); }
/* Rechts stehen die Beträge über `th.zahl, td.zahl` – nur das übrige links. */
.rlumsaetze th:not(.zahl) { text-align: left; }
.rlumsaetze td { padding: 0.3rem 0.5rem; vertical-align: top; overflow-wrap: anywhere;
  border-bottom: 1px solid var(--farbe-rand-block); }
.rlumsaetze .zahl { white-space: nowrap; }
.rlumsaetze__nummer { color: var(--farbe-schrift-gedaempft); }
.rlumsaetze__zweck { display: block; font-size: 0.85rem; color: var(--farbe-schrift-gedaempft); }
.rlumsaetze__fehlt { white-space: nowrap; }
.rlumsaetze__stand td,
.rlumsaetze__ende td { font-weight: 600; background: var(--farbe-flaeche-hervor); }
.rlumsaetze__stand td { border-bottom: 1px solid var(--farbe-schrift); }
.rlumsaetze__summe td { border-bottom: none; }
.rlumsaetze__summe--erste td,
.rlumsaetze__ende td { border-top: 1px solid var(--farbe-schrift); }

.verz__unterschrift {
  display: flex;
  justify-content: space-between;
  gap: 3rem;
  margin-top: 3rem;
  font-size: 0.9rem;
}

.verz__linie {
  border-top: 1px solid var(--farbe-schrift);
  padding-top: 0.2rem;
}

/* Das Hilfezeichen: Der Satz steht im `title`, nicht unter dem Knopf
   (Sammlung 127, 13.09.2026). „Diese vielleicht in einen Quicktext mit
   über ein kleines Hilfesymbol legen" – eine Seite voller Erklärsätze
   liest beim zweiten Mal niemand mehr, und weg sein sollen sie auch
   nicht.

   `tabindex` macht es mit der Tastatur erreichbar; der Browser zeigt
   den Text dann ebenso. */
.hilfe {
  display: inline-flex;
  color: var(--farbe-schrift-gedaempft);
  cursor: help;
  vertical-align: -0.15em;
}

.hilfe:hover,
.hilfe:focus { color: var(--farbe-verweis); }

.hilfe .icon { width: 1rem; height: 1rem; }


/* ── Die Stammdaten des Büros (0.2.20, Sammlung 148) ──────────────────
   Wertepaare statt Tabelle: Ein Feldsatz hat einen Eintrag, und eine
   Tabelle mit einer Zeile ist eine Tabelle zu viel. Die Beschriftung
   bekommt eine feste Spalte, damit die Werte untereinander stehen. */
.wertpaar {
  display: flex;
  gap: 0.75rem;
  align-items: baseline;
  padding: 0.22rem 0;
}

/* Rechts bleibt Platz für das Zeichen – dieselbe Regel wie bei den
   Werten in der Akte, sonst läuft der erste Wert unter den Stift. */
.eintrag__ecke + .wertpaar { padding-right: 2.2rem; }

.wertpaar__name {
  flex: 0 0 13rem;
  color: var(--farbe-schrift-gedaempft);
  font-size: 0.9rem;
}

.wertpaar__wert { font-weight: 500; }

.seitenhinweis { margin: -0.4rem 0 1rem; }

/* Die Unterschrift: ein Bild aus der Büroakte. Begrenzt, damit ein
   groß eingescanntes Blatt die Kachel nicht sprengt. */
.unterschriftfeld {
  max-width: 20rem;
  margin-bottom: 0.5rem;
  padding: 0.4rem 0.6rem;
  background: var(--farbe-flaeche-block);
  border: 1px solid var(--farbe-rand-block);
  border-radius: 3px;
}

.unterschriftfeld img { display: block; width: 100%; height: auto; }

.unterschriftwahl { display: flex; gap: 0.5rem; margin-top: 0.6rem; }

/* Freie Angaben: Name, Text, und darunter der Name der Variablen –
   er ist das, was man beim Schreiben braucht. */
.freitext { position: relative; }
.freitext__name { margin: 0 0 0.2rem; font-size: 0.95rem; }
.freitext__text { margin: 0 0 0.3rem; white-space: pre-line; }
.freitext__variable, .variablenname { margin: 0; }

.freitext__variable code, .variablenname code {
  padding: 0.1rem 0.35rem;
  border-radius: 3px;
  background: var(--farbe-bereich-bueroakte-hell);
  font-family: Consolas, "Cascadia Mono", monospace;
  font-size: 0.88rem;
}


/* ── Das Variablenverzeichnis (0.2.24, Sprint 4 Abschnitt A) ──────────
   Der Name ist das, was man abschreibt oder anklickt - er bekommt
   Gewicht und bleibt in einer Zeile. */
.varname {
  padding: 0.1rem 0.35rem;
  border-radius: 3px;
  background: var(--farbe-bereich-schreiben-hell);
  font-family: Consolas, "Cascadia Mono", monospace;
  font-size: 0.88rem;
  white-space: nowrap;
}

.beispiel { font-weight: 500; }

/* Die Erklärung darunter: drei Spalten, damit sie nicht aussieht wie
   eine Anleitung, die niemand liest. */
.varhilfe {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr));
  gap: 1.25rem;
}

.varhilfe h4 { margin: 0 0 0.3rem; font-size: 0.95rem; }
.varhilfe p { margin: 0 0 0.7rem; }

.varhilfe code {
  padding: 0.05rem 0.25rem;
  border-radius: 3px;
  background: var(--farbe-flaeche-seite);
  font-family: Consolas, "Cascadia Mono", monospace;
  font-size: 0.88rem;
}

.varblock {
  margin: 0 0 0.5rem;
  padding: 0.5rem 0.7rem;
  background: var(--farbe-flaeche-seite);
  border: 1px solid var(--farbe-rand-block);
  border-radius: 4px;
  font-family: Consolas, "Cascadia Mono", monospace;
  font-size: 0.85rem;
  line-height: 1.5;
}

/* So sieht ein unbekannter Name im Brief aus - hier als Beispiel. */
.varfehler {
  padding: 0 0.2rem;
  border-radius: 3px;
  background: var(--farbe-status-warnung-hell);
  color: var(--farbe-status-warnung);
  font-weight: 600;
}


/* ── Die Blockliste der Briefkopfvorlage (0.2.27, Sprint 4 B) ─────────
   Zahlenfelder, kein Ziehen mit der Maus: Bei DIN 5008 weiss man die
   Zahl, und Tippen ist genauer. Die Felder sind schmal und rechts
   ausgerichtet - so stehen Millimeter untereinander wie in einer
   Rechnung. */
.bloecke input.mm {
  width: 3.4rem;
  padding: 0.25rem 0.35rem;
  text-align: right;
}

.bloecke select { padding: 0.25rem 0.35rem; }

/* Einen Punkt kleiner als sonst und enger gesetzt: Die Liste teilt sich
   die Breite mit dem Blatt, und das Blatt gibt nichts ab - es ist in
   Originalgroesse oder es taugt nicht zum Nachmessen. */
.bloecke input.mm,
.bloecke select { font-size: 0.85rem; }

.bloecke td,
.bloecke th { padding-left: 0.3rem; padding-right: 0.3rem; }

/* **Feste Spaltenbreiten**, und das ist der Punkt: Bei der
   automatischen Aufteilung verhandeln zehn Spalten um 755 Pixel, und
   die Auswahlfelder verlieren - "normal" steht dann als "norm…" da. Die
   Zahlen hier sind das, was der laengste Eintrag braucht; der Rest
   bleibt dem Blocknamen, der als einziger umbrechen darf. */
.bloecke { table-layout: fixed; }

.bloecke th:nth-child(2),
.bloecke th:nth-child(3),
.bloecke th:nth-child(4),
.bloecke th:nth-child(5) { width: 4.3rem; }   /* die Zahlen    */
.bloecke th:nth-child(6),
.bloecke th:nth-child(7) { width: 6.2rem; }   /* Schnitt, Satz */
.bloecke th:nth-child(8) { width: 5.2rem; }   /* Seiten        */

/* "ohne Text" auf zwei Zeilen macht aus einer Angabe zwei. */
.bloecke td.mitte { white-space: nowrap; }

/* Die Ueberschrift darf umbrechen, der Vermerk unter dem Blocknamen
   nicht - "Oberkante 59,2" auf zwei Zeilen liest sich als zwei
   Angaben. */
.bloecke .fussnote { white-space: nowrap; }
.bloecke td { vertical-align: middle; }
/* Mit Zellenart, sonst gewinnt `.tabelle th, .tabelle td` mit seinen
   zwei Bestandteilen - derselbe Stolperstein wie bei `.zahl`. */
td.mitte,
th.mitte { text-align: center; }

/* Feste und fliessende Bloecke sind zwei verschiedene Dinge - das soll
   man in der Liste sehen, ohne die Spalte zu lesen. */
.bloecke tr.block-fluss > td:first-child { padding-left: 1.4rem; }

.bloecke tr.block-fluss > td:first-child::before {
  content: "↳";
  margin-left: -1rem;
  margin-right: 0.35rem;
  color: var(--farbe-schrift-gedaempft);
}

.fassungsliste { list-style: none; margin: 0 0 0.8rem; padding: 0; }

.fassungsliste li {
  padding: 0.35rem 0;
  border-bottom: 1px solid var(--farbe-rand-block);
}

.fassungform { display: flex; gap: 0.5rem; align-items: center; }
.fassungform input { flex: 1; min-width: 0; }


/* ── Das Blatt der Briefkopfvorlage (Sprint 4 B) ──────────────────────
   210 x 297 mm in Originalgroesse. **Nicht verkleinert:** Wer eine
   Grundlinie um einen Millimeter verschiebt, will den Millimeter sehen;
   ein skaliertes Blatt zeigt ihn als zwei Drittel davon. */
.blattraum {
  display: flex;
  justify-content: center;
  padding: 1rem 0;
  overflow: auto;
}

.blattrahmen {
  /* Innenmass, nicht Aussenmass: Mit `border-box` zoege der Rahmen zwei
     Pixel vom Blatt ab, und der Rahmen bekaeme einen Rollbalken fuer
     zwei Pixel. */
  box-sizing: content-box;
  width: 210mm;
  height: 297mm;
  flex: none;
  border: 1px solid var(--farbe-rand-block);
  background: #fff;
  box-shadow: 0 2px 10px rgb(0 0 0 / 0.25);
}


/* ── Briefkopf: Liste links, Blatt rechts (20.09.2026) ────────────────
   Beides untereinander hiess: Zahl aendern, scrollen, hinsehen,
   zurueckscrollen. Das Blatt behaelt seine Originalgroesse, schmaler
   wird die Liste - deshalb `flex: none` rechts und `min-width: 0`
   links. Ohne die Null gaebe eine Flex-Spalte ihre Inhaltsbreite nie
   auf und schoebe das Blatt aus dem Bild. */
.briefkopfseite {
  display: flex;
  align-items: flex-start;
  gap: 1.25rem;
}

.briefkopfspalte { flex: 1; min-width: 0; }
/* So breit wie das Blatt und keinen Millimeter mehr: Ohne feste Breite
   nimmt sich die Kachel die Breite ihres laengsten Textes und schiebt
   die Liste zusammen. */
.briefkopfblatt {
  flex: none;
  width: calc(210mm + 1.6rem + 2px);
  padding-left: 0.8rem;
  padding-right: 0.8rem;
}


/* ── Zahlenfelder mit Pfeilen (20.09.2026) ────────────────────────────
   **Eigene Pfeile statt `type="number"`**: Ein natives Zahlenfeld nimmt
   kein deutsches Komma an - "62,7" darin ergibt ein leeres Feld.

   Die Pfeile sitzen IM Feld, nicht daneben: Die Liste teilt sich die
   Breite mit dem Blatt, und zwei Knoepfe je Feld neben dem Feld waeren
   vier Spalten mehr. */
.stellfeld { position: relative; display: inline-block; }

.stellfeld input.mm {
  /* Schmaler geht nicht: "148,5" braucht 34 px, die Pfeile 16, und der
     Rand links noch einmal 6. */
  width: 3.6rem;
  /* Rechts Platz fuer die Pfeile, und der Text bleibt rechtsbuendig
     davor stehen. */
  padding-right: 1rem;
}

.stellpfeile {
  position: absolute;
  top: 1px;
  right: 1px;
  bottom: 1px;
  display: flex;
  flex-direction: column;
  width: 0.85rem;
}

.stellpfeile button {
  flex: 1;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  color: var(--farbe-schrift-gedaempft);
  font-size: 0.55rem;
  line-height: 1;
  cursor: pointer;
}

.stellpfeile button:hover {
  background: var(--farbe-flaeche-hervor);
  color: var(--farbe-schrift);
}

/* Die Schrittweite gehoert in den Kopf der Kachel, nicht in die
   Tabelle: Sie gilt fuer alle Zeilen. */
.schrittweite {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.85rem;
  color: var(--farbe-schrift-gedaempft);
}

.schrittweite select { width: auto; padding: 0.15rem 0.3rem; }

/* Zuruecksetzen je Block. Klein und blass - es ist der Ausweg, nicht
   der Weg. */
.werkknopf {
  float: right;
  padding: 0 0.2rem;
  border: 0;
  background: none;
  color: var(--farbe-schrift-gedaempft);
  font-size: 0.95rem;
  line-height: 1.2;
  cursor: pointer;
}

.werkknopf:hover { color: var(--farbe-schrift); }


/* ── Im Browser oder als PDF (20.09.2026) ─────────────────────────────
   Zwei Knoepfe, von denen einer gedrueckt ist - kein Auswahlfeld: Es
   sind zwei, es bleiben zwei, und man sieht auf einen Blick, welche
   Ansicht dasteht. Dieselbe Gestalt für „Werte / Felder" im Editor (C5). */
.vorschauwahl,
.feldwahl {
  margin-left: auto;
  display: flex;
  border: 1px solid var(--farbe-rand-block);
  border-radius: 6px;
  overflow: hidden;
}

.vorschauwahl button,
.feldwahl button {
  padding: 0.2rem 0.7rem;
  border: 0;
  background: var(--farbe-flaeche-block);
  color: var(--farbe-schrift-gedaempft);
  font: inherit;
  font-size: 0.85rem;
  cursor: pointer;
}

.vorschauwahl button + button,
.feldwahl button + button { border-left: 1px solid var(--farbe-rand-block); }

.vorschauwahl button.aktiv,
.feldwahl button.aktiv {
  background: var(--farbe-flaeche-hervor);
  color: var(--farbe-schrift);
  font-weight: 600;
}

.vorschauwahl button[disabled] { opacity: 0.45; cursor: default; }


/* ── Der Schreibeditor (Sprint 4, Abschnitt C) ────────────────────────
   Links der Text, rechts das Blatt. **Das Blatt behaelt seine
   Originalgroesse**, schmaler wird die Textspalte - dieselbe
   Entscheidung wie in der Blockliste des Briefkopfs. */
/* Der Kopf steht seit 0.2.30 in der linken Spalte, über dem Textfeld
   und genauso breit (Sammlung 154). Die Felder stehen untereinander:
   Empfänger, Betreff 1, Betreff 2. */
.editorkopf {
  margin-bottom: 1rem;
  padding: 0.8rem 1.25rem 1rem;
  background: var(--farbe-flaeche-block);
  border: 1px solid var(--farbe-rand-block);
  border-radius: 8px;
}

.editorkopf .feld { margin: 0 0 0.6rem; }

.editorkopf__zeile {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 0.7rem;
}

.editorkopf__taten {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  flex: none;
}

.editorkopf__akte {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin: 0;
}

/* Das Anschriftfeld oben und offen (Sammlung 158, 22.09.2026); in der
   Zeile seiner Beschriftung „übernehmen aus …". */
.beschriftungszeile {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
  margin: 0 0 0.2rem;
}
.beschriftungszeile label { margin: 0; }
/* Woher das Schreiben kam (F1): rechts, neben dem Auswahlfeld. */
.vorlagenherkunft { margin-left: auto; }
.editorkopf textarea { width: 100%; }

/* Der Name für die Liste: klein, in der Titelzeile. */
.listenname {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  flex: 1;
  min-width: 0;
  font-size: 0.85rem;
}
.listenname input { flex: 1; min-width: 0; padding: 0.2rem 0.4rem; font-size: 0.85rem; }

.editorflaeche { display: flex; align-items: flex-start; gap: 1.25rem; }

/* **Anschriftfeld und Anlagen nebeneinander** (D1, 23.09.2026, Variante
   A): Das Anschriftfeld braucht die volle Breite nicht, und die Seite
   bleibt bei 1920 x 1080 ohne Rollen. */
.kopfreihe { display: flex; gap: 1rem; align-items: stretch; }
.kopfreihe > .feld { flex: 1; min-width: 0; }
.anlagen .beschriftungszeile .knopf { margin: 0; }
.anlagen .anhangliste { margin: 0; }
.anlagen .anhangliste li { gap: 0.45rem; }
/* Ab der vierten Anlage rollt die Liste in sich - so hoch wie Gruß und
   Unterschrift daneben. */
.anlagen__liste { max-height: 7.6rem; overflow-y: auto; }
.anlagen__griff { flex: none; cursor: grab; color: var(--farbe-schrift-gedaempft); }
.anlagen__nummer { flex: none; width: 1.2rem; color: var(--farbe-schrift-gedaempft); }
.anlagen__eintrag--gezogen { opacity: 0.5; }
/* Aus der Akte eines anderen Klienten - nach einem Klientenwechsel. */
.anlagen__eintrag--fremd .anhangliste__name { color: var(--farbe-status-warnung); }
.anlagen .warnung { margin: 0.4rem 0 0; }

/* ── Der Kopf des Editors, aufgeräumt (Sammlung 179, 24.09.2026) ─────
   Oben Klient, Status und das Feld für die Liste; darunter das
   Anschriftfeld und rechts daneben höchstens fünf Knöpfe in einer
   Spalte. Das Anschriftfeld wächst auf die Höhe der Knöpfe. */
.listenfeld { flex: 1; min-width: 0; padding: 0.2rem 0.5rem; font-size: 0.9rem; }
.anschriftfeld { display: flex; flex-direction: column; }
.anschriftfeld textarea { flex: 1; }
.kopftaten {
  flex: none;
  width: 13rem;
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}
.kopftaten .knopf { margin: 0; display: flex; align-items: center; gap: 0.4rem; white-space: nowrap; }
.kopftaten .leistenform .knopf { width: 100%; }
.knopf--leise { color: var(--farbe-schrift-gedaempft); }

/* Unten: links Grußformel über Unterschrift, rechts die Anlagen. */
.schlussteil__spalte { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 0.5rem; }
/* `.feld` wächst sonst auf 100 % - in dieser Spalte hieße das: auf die
   ganze Höhe, und die Unterschrift fiele unten hinaus. */
.schlussteil__spalte .feld { flex: none; margin: 0; }
.schlussteil .anlagen { flex: 1; min-width: 0; margin: 0; }
/* Damit die Seite bei 1920 x 1080 nicht rollt: Gruß und Unterschrift
   untereinander brauchen die Höhe, die das Textfeld abgibt. */
.schreibseite--brief .schreibfeld { height: 17rem; }

/* **Wo das erzeugte PDF liegt – und woraus ein Dokument entstand** (D1,
   23.09.2026): der Weg zwischen Schreiben und Ablage, in beide
   Richtungen. */
.ablagezeile,
.herkunftzeile { display: flex; align-items: center; flex-wrap: wrap; gap: 0.4rem;
  font-size: 0.9rem; }
.ablagezeile { margin: -0.2rem 0 0.7rem; }
.ablagezeile .icon,
.herkunftzeile .icon { width: 1.1rem; height: 1.1rem; flex: none; }
.herkunftzeile { margin: 0.2rem 0 0.9rem; padding: 0.45rem 0.7rem; border-radius: 6px;
  background: var(--farbe-flaeche-hervor); }

/* Der Dialog beim Erzeugen: erst die Prüfung, dann der Ordner. */
.pruefliste { margin: 0.8rem 0 1rem; padding: 0.5rem 0.7rem; border-radius: 6px;
  background: var(--farbe-flaeche-hervor); }
.pruefliste__zeile { display: flex; gap: 0.5rem; margin: 0.2rem 0; font-size: 0.92rem; }
.pruefliste__zeile--warnung { color: var(--farbe-status-warnung); }
.pruefliste__zeile .icon { width: 1.1rem; height: 1.1rem; flex: none; }
.ordnerwahl { list-style: none; margin: 0 0 1rem; padding: 0.2rem 0; max-height: min(24rem, 45vh);
  overflow-y: auto; border: 1px solid var(--farbe-rand-betont); border-radius: 3px; }
.ordnerwahl__eintrag { display: flex; align-items: center; gap: 0.4rem;
  padding-top: 0.25rem; padding-bottom: 0.25rem; padding-right: 0.6rem; cursor: pointer; }
.ordnerwahl__eintrag .icon { width: 1.05rem; height: 1.05rem; }
.ordnerwahl__eintrag--gewaehlt { background: var(--farbe-flaeche-hervor); font-weight: 600; }
/* Ein gesperrter Knopf im Dialog sieht auch so aus - „Erzeugen" wartet
   beim ersten Mal auf den Ordner. */
.dialog__knoepfe .knopf:disabled { opacity: 0.45; cursor: default; }

/* Die linke Spalte: Kopf und Text untereinander. **Nicht unter diese
   Breite**: Ohne Untergrenze quetschte das Blatt bei einem schmalen
   Fenster die Spalte auf Fingerbreite. Lieber quer rollen als
   unbrauchbar. */
.editorspalte { flex: 1; min-width: 24rem; }

.schreibseite {
  background: var(--farbe-flaeche-block);
  border: 1px solid var(--farbe-rand-block);
  border-radius: 8px;
  overflow: hidden;
}

.schreibleiste {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem;
  padding: 0.4rem 0.7rem;
  background: var(--farbe-flaeche-hervor);
  border-bottom: 1px solid var(--farbe-rand-block);
}

.schreibleiste__luecke { flex: 1; }

/* Ein Textfeld ohne Rahmen: Der Kasten ist die Seite, nicht das Feld.

   **Fest hoch, es rollt darin** (Sammlung 167, 23.09.2026): *„Lieber
   nur im Textfeld scrollen, als die ganze Seite."* Bei 1920 × 1080 endet
   die Spalte mit diesen 22 rem gerade am Fensterrand. Kein Griff zum
   Aufziehen – das Feld soll gerade nicht wachsen. */
.schreibfeld {
  width: 100%;
  border: 0;
  border-radius: 0;
  padding: 1rem 1.1rem;
  height: 22rem;
  overflow-y: auto;
  line-height: 1.5;
}

/* ── Formatieren im Text (C3, 22.09.2026) ─────────────────────────────
   Die Knöpfe aus dem Entwurf vom 19.09.2026. Gedrückt sieht aus, was an
   der Schreibmarke gilt. */
/* **In Gruppen, kräftiger** (Sammlung 169, Variante B, 23.09.2026):
   dieselbe Form wie der Umschalter „Werte / Felder", gedrückt in der
   Hauptfarbe gefüllt. Vorher Zeichen in Textgröße ohne Rahmen, und
   gedrückt hob sich ein heller Kasten kaum vom Grund ab. */
.knopfgruppe {
  display: inline-flex;
  border: 1px solid var(--farbe-rand-betont);
  border-radius: 6px;
  overflow: hidden;
  background: var(--farbe-flaeche-block);
}
.schreibknopf {
  min-width: 2.3rem;
  height: 2.3rem;
  padding: 0 0.45rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font: inherit;
  font-size: 1.1rem;
  color: var(--farbe-schrift);
  background: none;
  border: 0;
  cursor: pointer;
}
.schreibknopf + .schreibknopf { border-left: 1px solid var(--farbe-rand-block); }
.schreibknopf .icon { width: 1.3em; height: 1.3em; stroke-width: 2.2; }
.schreibknopf:hover { background: var(--farbe-flaeche-hervor); }
.schreibknopf[aria-pressed="true"] {
  background: var(--farbe-knopf-haupt);
  color: var(--farbe-schrift-invers);
}
.schreibleiste [data-einfuegen] { margin-left: 0.6rem; }

/* Der Brieftext ist ein bearbeitbarer Bereich, kein Textfeld. Absätze
   ohne Abstand, wie auf dem Blatt (Sammlung 161): Jede Eingabe ist eine
   Zeile, eine Leerzeile ist zweimal Eingabe. */
.schreibfeld:focus {
  outline: 2px solid var(--farbe-knopf-haupt);
  outline-offset: -2px;
}
.schreibfeld p,
.schreibfeld ul,
.schreibfeld ol { margin: 0; }
/* Eine Tabelle im Text (Sammlung 174): die Zellen sichtbar, damit man
   sieht, wo man schreibt – im Brief steht nur der Strich unter dem Kopf. */
.schreibfeld table { border-collapse: collapse; width: 100%; }
.schreibfeld th,
.schreibfeld td {
  padding: 0.1rem 0.4rem;
  text-align: left;
  vertical-align: top;
  border: 1px dashed var(--farbe-rand-block);
}
.schreibfeld ul,
.schreibfeld ol { padding-left: 1.5rem; }

.schlussteil {
  display: flex;
  gap: 1rem;
  padding: 0.8rem 1.1rem 1rem;
  background: var(--farbe-flaeche-hervor);
  border-top: 1px solid var(--farbe-rand-block);
}

.schlussteil .feld--halb { flex: 1; min-width: 0; margin: 0; }
.schlussteil textarea { width: 100%; resize: vertical; }

.vorschauseite { flex: none; }

.vorschaukopf {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  margin: 0 0 0.4rem;
  font-size: 0.9rem;
  font-weight: 600;
}

.vorschauseite .blattraum { padding: 0; }


/* ── Klient und Empfänger im Editor (C6, 21.09.2026) ────────────────── */
.klientwahl { width: auto; max-width: 22rem; padding: 0.2rem 0.4rem; }

/* Das Auswahlfeld ist schmal und sagt, was es tut. */
.empfaengerwahl { flex: none; width: 10rem; }
/* So klein wie die Beschriftung daneben (Sammlung 179: *„ist riesig"*). */
.anschriftfeld .empfaengerwahl { width: auto; max-width: 11rem; padding: 0.1rem 0.3rem;
  font-size: 0.85rem; }

/* Ein Formular in der Knopfleiste darf die Leiste nicht aufbrechen:
   Der Knopf darin steht wie jeder andere. */
.leistenform { display: contents; }


/* ── Das Blatt im Editor, verkleinert (Sammlung 154, 21.09.2026) ──────
   *„vielleicht das Vorschaufenster etwas kleiner (ca 1000px hoch?)"* -
   entschieden: **verkleinern, damit die ganze Seite auf den Schirm
   passt.** Bei 1920 x 1080 bleiben unter der Kopfleiste rund 1000 px.

   `transform` verkleinert nur die Anzeige, nicht den Platzbedarf - der
   Rahmen haelt deshalb selbst die verkleinerte Groesse. Die Zwei Pixel
   sind der Rand des Rahmens. In der Blockliste des Briefkopfs bleibt
   das Blatt in Originalgroesse; dort misst man Millimeter. */
.blattraum--klein {
  /* Gerechnet, nicht geschätzt: Bei 1920 x 1080 beginnt das Blatt
     113 px unter der Fensterkante - darüber stehen Kopfleiste und
     der Umschalter. Mit 16 px Luft unten bleiben 951 px. */
  --mass: 0.845;
  display: block;
  width: calc((210mm + 2px) * var(--mass));
  height: calc((297mm + 2px) * var(--mass));
  padding: 0;
  overflow: hidden;
}

.blattraum--klein .blattrahmen {
  transform: scale(var(--mass));
  transform-origin: top left;
}

/* **Das PDF, von der Seite selbst gezeichnet** (Sammlung 170,
   23.09.2026). Dasselbe Maß wie das Blatt davor; darin rollen die
   Seiten untereinander. `scrollbar-gutter` hält dem Rollbalken seinen
   Platz frei: Erschiene er erst mit dem zweiten Blatt, änderte sich die
   Breite, auf die gezeichnet wird. Scharf ist es, weil pdf.js in
   Gerätepixeln zeichnet (vorher Sammlung 162). */
.blattraum--klein.pdfvorschau {
  overflow-y: auto;
  scrollbar-gutter: stable;
  background: var(--farbe-flaeche-hervor);
  border: 1px solid var(--farbe-rand-block);
}
.pdfblatt {
  display: block;
  background: #fff;
  box-shadow: 0 1px 4px rgb(0 0 0 / 0.25);
}
.pdfblatt + .pdfblatt { margin-top: 0.6rem; }


/* ── Die Einfügehilfe (C4, 21.09.2026) ───────────────────────────────
   Über dem Text, nicht daneben: Die linke Spalte teilt sich die Breite
   mit dem Blatt, und eine dritte Spalte quetschte das Textfeld. */
.schreibseite { position: relative; }

.einfuegehilfe {
  position: absolute;
  top: 2.9rem;
  left: 0.7rem;
  z-index: 5;
  width: min(34rem, calc(100% - 1.4rem));
  padding: 0.6rem;
  background: var(--farbe-flaeche-block);
  border: 1px solid var(--farbe-rand-block);
  border-radius: 8px;
  box-shadow: 0 6px 20px rgb(0 0 0 / 0.18);
}

.einfuegehilfe__suche { width: 100%; margin-bottom: 0.4rem; }

.einfuegehilfe__liste { max-height: 24rem; overflow-y: auto; }

.einfuegehilfe__gruppe {
  margin: 0.5rem 0 0.2rem;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--farbe-schrift-gedaempft);
}

/* Bezeichnung, Name, Wert in einer Zeile - der Wert rechts, weil man an
   ihm entscheidet. */
.einfuegehilfe__eintrag {
  display: grid;
  grid-template-columns: 9rem 13rem 1fr;
  gap: 0.6rem;
  width: 100%;
  padding: 0.25rem 0.4rem;
  border: 0;
  border-radius: 4px;
  background: none;
  font: inherit;
  font-size: 0.85rem;
  text-align: left;
  cursor: pointer;
}

.einfuegehilfe__eintrag:hover,
.einfuegehilfe__eintrag:focus { background: var(--farbe-flaeche-hervor); }

/* `display: grid` schlaegt das `hidden`-Attribut - ohne diese Zeile
   blieb beim Suchen die ganze Liste stehen. */
.einfuegehilfe__eintrag[hidden],
.einfuegehilfe__gruppe[hidden] { display: none; }

.einfuegehilfe__eintrag code { font-size: 0.8rem; overflow: hidden; text-overflow: ellipsis; }

.einfuegehilfe__wert {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  color: var(--farbe-schrift-gedaempft);
}


/* ══════════════════════ Einträge der festen Blöcke (Sammlung 156 B)

   Wie im Entwurf vom 22.09.2026: Der Stift steht rechts neben dem
   Zurücksetzen, damit der Blockname frei umbrechen kann. Die
   Eintragsliste nimmt den Platz der Blockliste ein. */
.inhaltknopf {
  float: right;
  margin-right: 0.2rem;
  padding: 0.05rem 0.2rem;
  border: 1px solid var(--farbe-rand-block);
  border-radius: 4px;
  background: var(--farbe-flaeche-block);
  color: var(--farbe-schrift);
  line-height: 1;
}
.inhaltknopf .icon { width: 0.9rem; height: 0.9rem; }

.zurueck { font-weight: normal; margin-right: 0.3rem; }

.spaltenzeile { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }

/* Eigene Spaltenbreiten, der Text bekommt den Rest. Die Regeln der
   Blockliste gelten mit - `.bloecke` -, hier stehen nur die Abweichungen. */
.eintragsliste th:nth-child(1) { width: 2rem; }
.eintragsliste th:nth-child(2) { width: 8.5rem; }
.eintragsliste th:nth-child(3) { width: auto; }
.eintragsliste th:nth-child(4) { width: 4.3rem; }
.eintragsliste th:nth-child(5) { width: 6.2rem; }
.eintragsliste th:nth-child(6) { width: 5.6rem; }
.eintragsliste th:nth-child(7) { width: 2rem; }
.eintragsliste input:not(.mm) {
  width: 100%;
  padding: 0.25rem 0.35rem;
  font-size: 0.85rem;
}
/* Die Variablen sind Code - in fester Breite liest man sie leichter. */
.eintragstext { font-family: Consolas, "Cascadia Mono", monospace; }

.reihe { display: inline-flex; flex-direction: column; margin: 0; }
.reihe button,
.eintragsknopf {
  padding: 0 0.2rem;
  border: 0;
  background: none;
  line-height: 1;
  color: var(--farbe-schrift-gedaempft);
  cursor: pointer;
}
.reihe button { font-size: 0.8rem; }
.reihe button:disabled { opacity: 0.3; cursor: default; }
.eintragsknopf:hover,
.reihe button:not(:disabled):hover { color: var(--farbe-schrift); }

/* Die Einfügehilfe liegt unter den Knöpfen, über dem Text der Hinweise. */
.eintragsknoepfe {
  position: relative;
  display: flex;
  gap: 0.5rem;
  margin: 0.6rem 0;
}
.eintragsknoepfe form { margin: 0; }

.unsichtbar {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
}


/* ══════════════════════ Feldmarken (C5, 22.09.2026)

   Die Variable im Brieftext als hinterlegtes Stück – wie die
   Feldschattierung der frühen Word-Fassungen (bestellt am 19.09.2026).
   Ein Stück, kein Text: Der Editor lässt nicht hineinschreiben. */
.feldmarke {
  padding: 0 0.15rem;
  border-radius: 2px;
  background: var(--farbe-bereich-schreiben-hell);
  box-shadow: inset 0 -1px 0 var(--farbe-bereich-schreiben);
  cursor: default;
}

/* Leer: Im Brief entfällt die Zeile; beim Schreiben soll man sehen, dass
   in der Mappe etwas fehlt. */
.feldmarke--leer {
  color: var(--farbe-schrift-gedaempft);
  font-style: italic;
}

/* **Eine Aufzählung als Liste, die Klientenliste als Tabelle** – schon
   als Marke (Sammlung 175, 23.09.2026). Weiter ein Stück, hinterlegt wie
   jede Marke; nur ihre Gestalt kommt von hier. Die Stücke tragen den
   Namen ihrer Marke: `.kopf` und `.reihe` sind anderswo vergeben – die
   Kopfleiste färbte sonst die erste Zeile der Tabelle ein. */
.feldmarke--liste,
.feldmarke--tabelle { display: block; padding: 0.1rem 0.3rem; }
.feldmarke__punkt { display: list-item; margin-left: 1.5rem; }
.feldmarke--tabelle { display: table; width: 100%; }
.feldmarke__reihe { display: table-row; }
.feldmarke__zelle { display: table-cell; padding: 0 0.6rem 0 0; }
.feldmarke__kopf { font-weight: 700; border-bottom: 1px solid currentColor; }

/* Ein Name, den es nicht gibt – ein Tippfehler von Hand. */
.feldmarke--fehler {
  background: var(--farbe-status-warnung-hell);
  box-shadow: inset 0 -1px 0 var(--farbe-status-warnung);
}

/* ══════════════════════ Die Vorlagenwahl (Abschnitt F1, 23.09.2026)

   „Neues Schreiben – aus welcher Vorlage?" Ein Listenfeld mit Suche,
   keine Auswahlknöpfe: *„da es bestimmt einige Vorlagen geben wird"*.
   Die Höhe ist fest, damit der Dialog beim Filtern nicht springt. */
.vorlagenwahl__suche { width: 100%; margin: 0.6rem 0 0.4rem; }
.vorlagenwahl__liste {
  list-style: none;
  margin: 0;
  padding: 0;
  height: 17rem;
  overflow-y: auto;
  border: 1px solid var(--farbe-rand-betont);
  border-radius: 3px;
}
.vorlagenwahl__eintrag {
  display: flex;
  flex-direction: column;
  padding: 0.35rem 0.6rem;
  cursor: pointer;
  border-bottom: 1px solid var(--farbe-rand-block);
}
/* `display: flex` schlüge sonst das `hidden` des Filters. */
.vorlagenwahl__eintrag[hidden] { display: none; }
.vorlagenwahl__eintrag .gedaempft { font-size: 0.85rem; }
.vorlagenwahl__eintrag--gewaehlt { background: var(--farbe-flaeche-hervor); }

/* Ein Feld, das Feldmarken tragen kann (Sammlung 163, 23.09.2026).
   Sieht aus wie ein Eingabefeld, ist aber ein bearbeitbarer Bereich:
   Betreff 1 und 2, Grußformel und Unterschriftsblock. Dieselben Werte
   wie `input` – der Rand, die Höhe und die Polsterung stehen dort in
   rem und gelten hier genauso. */
.feldzeile {
  padding: 0.45rem 0.6rem;
  background: var(--farbe-flaeche-block);
  border: 1px solid var(--farbe-rand-betont);
  border-radius: 3px;
  /* Einzeilig: Was beim Einfügen an Umbrüchen mitkommt, macht der
     Filter beim Speichern zu einem Leerzeichen; sichtbar wird hier
     nichts davon. */
  white-space: nowrap;
  overflow: hidden;
  min-height: 2.3rem;
}

.feldzeile--mehrzeilig {
  white-space: normal;
  overflow: auto;
  min-height: 5.9rem;
}

/* Absätze ohne Abstand, wie im Brieftext: Eine Eingabe ist eine Zeile. */
.feldzeile p { margin: 0; }

.feldzeile:focus {
  outline: 2px solid var(--farbe-knopf-haupt);
  outline-offset: 0;
  border-color: var(--farbe-knopf-haupt);
}


/* ── Einstellungen ▸ Über (Sammlung 177, 24.09.2026) ───────────────────
   Zwei Spalten: links die Angaben und die Bausteine, rechts breiter
   „Neu und behoben". Keine Kacheln - die sind Textspalten, und darin
   lässt sich keine breiter machen. */
.ueber {
  display: grid;
  grid-template-columns: minmax(26rem, 1fr) minmax(30rem, 1.25fr);
  gap: 1.25rem;
  align-items: start;
}
.ueber .block { margin: 0 0 1.25rem; }
.ueber__name { margin: 0 0 0.8rem; color: var(--farbe-schrift-gedaempft); }
.ueber__angaben { border-collapse: collapse; }
.ueber__angaben th {
  padding: 0.2rem 1.2rem 0.2rem 0;
  text-align: left;
  vertical-align: top;
  font-weight: 400;
  color: var(--farbe-schrift-gedaempft);
}
.ueber__angaben td { padding: 0.2rem 0; }
.neuigkeit { margin: 0 0 0.9rem; }
.neuigkeit__kopf { margin: 0 0 0.3rem; font-size: 0.95rem; }
.neuigkeit__liste { margin: 0; padding: 0; list-style: none; }
.neuigkeit__liste li {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  margin: 0.2rem 0;
  font-size: 0.92rem;
}
.neuigkeit--aelter summary { cursor: pointer; font-weight: 600; font-size: 0.95rem; }
.neuigkeit--aelter li { display: list-item; margin-left: 1.2rem; list-style: disc; }
/* Neu, Geändert, Behoben - gleich breit, damit die Texte in einer Flucht
   beginnen. */
.aenderung {
  flex: none;
  width: 4.6rem;
  padding: 0 0.3rem;
  text-align: center;
  font-size: 0.78rem;
  font-weight: 600;
  border-radius: 999px;
}
.aenderung--neu { background: var(--farbe-status-erledigt-hell); color: var(--farbe-status-erledigt); }
.aenderung--geaendert { background: var(--farbe-status-hinweis-hell); color: var(--farbe-status-hinweis); }
.aenderung--behoben { background: var(--farbe-status-warnung-hell); color: var(--farbe-status-warnung); }

/* ── Abschnitt D2: Liste, Drawer, Kopieren, Vorlage, Kontakt (24.09.2026) ── */

/* Der Drawer eines Schreibens: die Karte in der Farbe des Bereichs, die
   Knöpfe klein in einer Reihe - höchstens fünf, wie im Editor. */
.visite--schreiben { border-top-color: var(--farbe-bereich-schreiben); }
.drawerknoepfe { display: flex; flex-wrap: wrap; gap: 0.4rem; margin: 0.8rem 0; }
.drawerknoepfe .knopf { margin: 0; display: inline-flex; align-items: center; gap: 0.35rem; }
.vorschau--schreiben { height: 40rem; }

/* Die Dialoge: Wahlzeilen, zwei Spalten, Felder über die ganze Breite. */
.wahl { display: flex; gap: 0.5rem; align-items: baseline; margin: 0.3rem 0; font-weight: 400; }
.wahl select { width: auto; margin: 0; }
.zweispaltig { display: grid; grid-template-columns: 1fr 1fr; gap: 0.8rem; }
.vorlagenfrage input[type=text], .vorlagenfrage select,
.kontaktfrage input[type=text] { width: 100%; box-sizing: border-box; margin-bottom: 0.5rem; }
.kopierwahl .haekchen, .kontaktfrage .haekchen {
  white-space: normal; align-items: baseline; flex-wrap: wrap; margin-top: 0.4rem;
}

/* „Als Kontakt anlegen" über dem Anschriftfeld, vor „übernehmen aus …". */
.kontaktverweis { margin-left: auto; display: inline-flex; align-items: center; gap: 0.25rem; }
.kontaktverweis[hidden] { display: none; }

/* Nach dem Kopieren: die Namen des bisherigen Klienten - nur Anzeige. */
mark.fundstelle {
  background: var(--farbe-status-warnung-hell); color: inherit;
  box-shadow: inset 0 -2px 0 var(--farbe-status-warnung); padding: 0 0.1rem;
}
.fundhinweis {
  display: flex; align-items: center; gap: 0.6rem; margin: 0 0 0.6rem;
  padding: 0.3rem 0.8rem; border-radius: 6px; background: var(--farbe-status-warnung-hell);
}
.fundhinweis[hidden] { display: none; }
.fundhinweis .icon { width: 1.1rem; height: 1.1rem; flex: none; color: var(--farbe-status-warnung); }
.fundhinweis > span { flex: 1; }
.fundhinweis .knopf { margin: 0; }

/* ── Das Dashboard (0.2.47) – Entwurf `entwuerfe/dashboard.html` ── */

/* Begrüßung und Datum, rechts der Schnellstart (Sammlung 278, 0.3.15) – in
   schmalen Fenstern rutscht er darunter. */
.dashkopf { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.5rem 1rem; margin-bottom: 1rem; }
.dashkopf .seitentitel { margin: 0; }

/* Drei Spalten, jeder Block ein Drittel (24.09.2026). **Das Raster**
   (Sammlung 201, 0.2.74): Zeilen zu 32 px und 8 px Fuge, zusammen 40 px.
   Jeder Block steht genau an seinem Platz und füllt ihn – `stretch`, sonst
   nähmen die Blöcke die Höhe ihres Inhalts und ragten ineinander. Zu viel
   Inhalt rollt im Block; die Seite reicht bis zum untersten. */
.dashboard { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-rows: 32px;
  row-gap: 8px; column-gap: 1.2rem; align-items: stretch; }
.dashplatz { min-height: 0; }
.dashplatz > .dashblock { height: 100%; overflow: auto; }
.dashblock { margin: 0; }
.dashblock__kopf { display: flex; align-items: baseline; justify-content: space-between;
  gap: 1rem; margin-bottom: 0.4rem; }
.dashblock__kopf .block__titel { margin: 0; }
.dashblock__kopf .block__titel .icon { width: 1.1rem; height: 1.1rem; vertical-align: -3px;
  margin-right: 0.2rem; }
.dashblock__alle { font-size: 0.88rem; white-space: nowrap; }
.dashzahl { display: inline-block; margin-left: 0.3rem; padding: 0 0.45rem; font-size: 0.78rem;
  font-weight: 600; border-radius: 999px; background: var(--farbe-flaeche-hervor); }

/* Eine Zeile: links Titel und darunter, wer; rechts seit wann. */
.dashliste { list-style: none; margin: 0; padding: 0; }
.dashzeile { display: flex; align-items: center; gap: 1rem; padding: 0.45rem 0;
  border-bottom: 1px solid var(--farbe-rand-block); }
.dashzeile:last-child { border-bottom: none; }
.dashzeile__haupt { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.dashzeile__titel { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dashzeile__unter { font-size: 0.85rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dashzeile__rechts { flex: none; margin-left: auto; font-size: 0.85rem; white-space: nowrap;
  display: flex; align-items: center; gap: 0.5rem; }
.dashblock__mehr { margin: 0.4rem 0 0; font-size: 0.88rem; }
.dashblock__leer { margin: 0.3rem 0 0; }

/* Geburtstage (Sammlung 202): heute hervorgehoben. */
.dashzeile--heute { background: var(--farbe-flaeche-hervor); padding-left: 0.4rem; padding-right: 0.4rem; }
.dashzeile--heute .dashzeile__rechts { font-weight: 700; }

/* „Anordnen" im Drawer (Sammlung 201). */
.anordnung td, .anordnung th { vertical-align: middle; }
.anordnung td:last-child, .anordnung th:last-child { padding-right: 0.8rem; white-space: nowrap; }
.anordnung input.kurz { width: 4.5rem; margin: 0; }
.anordnung select { width: 4rem; margin: 0; }
.anordnung input[type="checkbox"] { margin: 0; }
.anordnung--fehler td { background: var(--farbe-flaeche-hervor); }
.anordnung--fehler input, .anordnung--fehler select { border-color: var(--farbe-status-warnung); }

/* ── Textbausteine (0.2.48) – Entwurf `entwuerfe/textbausteine-e.html` ── */

/* Die Liste: Kategorien als Zwischenzeilen, der Textanfang gedämpft. */
.kopfwerkzeuge { display: flex; gap: 0.6rem; align-items: center; }
.kopfwerkzeuge form { margin: 0; }
.kopfwerkzeuge .knopf { white-space: nowrap; margin: 0; }
.bausteinfilter { width: 16rem; }
.bausteinliste .gruppenzeile th { text-align: left; padding-top: 0.9rem; font-size: 0.78rem;
  letter-spacing: 0.05em; text-transform: uppercase; color: var(--farbe-schrift-gedaempft);
  border-bottom: 2px solid var(--farbe-rand-block); }
.baustein-anfang { font-size: 0.88rem; }

/* Ein Baustein: links der Editor, rechts die Knöpfe. */
.bausteinseite { display: grid; grid-template-columns: minmax(0, 1fr) 20rem; gap: 1.5rem;
  align-items: start; }
.kopfreihe--baustein { display: grid; grid-template-columns: 1fr 18rem; gap: 1rem; }
.kopfreihe--baustein .feld { margin: 0; }
.kopfreihe--baustein input, .kopfreihe--baustein select { width: 100%; box-sizing: border-box; }
.bausteinseite .schreibfeld { height: 26rem; }
.bausteinseite textarea { width: 100%; box-sizing: border-box; }
.bausteinseite__rechts .drawerknoepfe .leistenform { margin: 0; }

/* „Textbaustein einfügen": links die Liste, rechts der Text. */
.bausteinwahl { position: absolute; top: 2.9rem; left: 0.7rem; z-index: 5;
  width: min(54rem, calc(100% - 1.4rem)); padding: 0.6rem; background: var(--farbe-flaeche-block);
  border: 1px solid var(--farbe-rand-block); border-radius: 8px; box-shadow: 0 8px 24px rgb(0 0 0 / 18%); }
.bausteinwahl__suche { width: 100%; box-sizing: border-box; margin-bottom: 0.5rem; }
.bausteinwahl__rumpf { display: grid; grid-template-columns: 17rem 1fr; gap: 0.8rem; }
.bausteinwahl__liste { max-height: 22rem; overflow-y: auto; border-right: 1px solid var(--farbe-rand-block); }
.bausteinwahl__gruppe { margin: 0.5rem 0 0.2rem; font-size: 0.75rem; font-weight: 700;
  letter-spacing: 0.05em; text-transform: uppercase; color: var(--farbe-schrift-gedaempft); }
.bausteinwahl__eintrag { display: block; width: 100%; text-align: left; padding: 0.25rem 0.4rem;
  border: 0; background: none; border-radius: 4px; cursor: pointer; font: inherit; color: inherit; }
.bausteinwahl__eintrag:hover { background: var(--farbe-flaeche-hervor); }
/* Sonst schlüge `display: block` das `hidden` des Filters. */
.bausteinwahl__eintrag[hidden], .bausteinwahl__gruppe[hidden] { display: none; }
.bausteinwahl__eintrag--gewaehlt { background: var(--farbe-bereich-schreiben-hell);
  box-shadow: inset 3px 0 0 var(--farbe-bereich-schreiben); }
.bausteinwahl__vorschau { font-size: 0.9rem; max-height: 22rem; overflow-y: auto; }
.bausteinwahl__vorschau p { margin: 0; }
.bausteinwahl__titel { font-weight: 700; }
.bausteinwahl__fuss { display: flex; align-items: center; gap: 1rem; margin: 0.5rem 0 0; }
.bausteinwahl__fuss .knopf { margin: 0 0 0 auto; }

/* ── Schreibvorlagen, zweiter Schritt (F2, 0.2.49) – Entwurf
   `entwuerfe/schreibvorlagen-f2.html` ── */

/* Lücken: hervorgehoben vom Browser, nicht im Text (`luecken.js`). */
::highlight(luecke) { background-color: var(--farbe-status-warnung-hell); color: var(--farbe-status-warnung); }
.lueckenzahl { margin-left: 0.5rem; padding: 0.1rem 0.7rem; border: 1px solid var(--farbe-status-warnung);
  border-radius: 999px; background: var(--farbe-status-warnung-hell); color: var(--farbe-status-warnung);
  font: inherit; font-size: 0.85rem; font-weight: 600; cursor: pointer; white-space: nowrap; }
.lueckenzahl[hidden] { display: none; }

/* Die Vorlage: Empfänger und Tags nebeneinander. */
.kopfreihe--vorlage { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.kopfreihe--vorlage .feld { margin: 0; }
.tagzeile { display: flex; flex-wrap: wrap; gap: 0.35rem; align-items: center; min-height: 2.2rem; }
.tagzeile__wahl { width: auto; font-size: 0.85rem; padding: 0.15rem 0.3rem; }

/* Die Anlagen der Vorlage – „Vorsehen …" klappt nach oben auf. */
.anlagen--vorlage { position: relative; }
.vorsehwahl { position: absolute; right: 0; bottom: calc(100% + 0.3rem); z-index: 5; width: 54rem;
  padding: 0.6rem 0.8rem; background: var(--farbe-flaeche-block); border: 1px solid var(--farbe-rand-block);
  border-radius: 8px; box-shadow: 0 8px 24px rgb(0 0 0 / 18%); }
.vorsehwahl[hidden] { display: none; }
.vorsehwahl .fussnote { margin: 0; }
.vorsehwahl__spalten { display: grid; grid-template-columns: 1fr 2fr; gap: 1.2rem; }
.vorsehwahl__sammlung { display: grid; grid-template-columns: 1fr 1fr; column-gap: 1rem; align-content: start; }
.vorsehwahl__sammlung .vorsehwahl__gruppe { grid-column: 1 / -1; }
.vorsehwahl__gruppe { margin: 0.5rem 0 0.2rem; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.05em;
  text-transform: uppercase; color: var(--farbe-schrift-gedaempft); }
.vorsehwahl__eintrag { display: flex; justify-content: space-between; align-items: center; gap: 0.5rem;
  margin: 0; padding: 0.1rem 0.2rem; border-radius: 4px; }
.vorsehwahl__eintrag:hover { background: var(--farbe-flaeche-hervor); }
.vorsehwahl__name { flex: 1; text-align: left; padding: 0.15rem 0.2rem; border: 0; background: none;
  font: inherit; color: inherit; cursor: pointer; }
.vorsehwahl__name:disabled { color: var(--farbe-schrift-gedaempft); cursor: default; }
.vorsehwahl__art { width: auto; max-width: 9rem; font-size: 0.85rem; padding: 0 0.3rem; }

/* Im Schreiben: was die Vorlage vorsieht und fehlt. */
.anlagenhinweis { display: flex; gap: 0.4rem; align-items: flex-start; margin: 0.4rem 0 0;
  padding: 0.35rem 0.5rem; font-size: 0.85rem; background: var(--farbe-status-warnung-hell); border-radius: 4px; }
.anlagenhinweis .knopf { margin: 0 0 0 auto; white-space: nowrap; }

/* ── Die Zeile hervorgehoben (Sammlung 183, 0.2.49) – Kontakte, Klienten,
   Beziehungen, wie in der Schreibenliste. ── */
.zeilenliste > tbody > tr:hover { background: var(--farbe-flaeche-hervor); }

/* ── Auslöser (4c, 0.2.50) – Entwurf `entwuerfe/ausloeser-4c.html` ── */
.ausloeserliste td { vertical-align: top; }
.drawerteil { margin: 1rem 0 0.3rem; font-weight: 700; }
.haken { display: flex; gap: 0.4rem; align-items: center; margin: 0.6rem 0; }
/* Die Rückfrage: jede Folge ein Kästchen zum Ankreuzen. */
.folgen { display: flex; flex-direction: column; gap: 0.6rem; margin: 0.8rem 0 1rem; }
.folge { display: flex; gap: 0.6rem; align-items: flex-start; padding: 0.5rem 0.6rem;
  border: 1px solid var(--farbe-rand-block); border-radius: 6px; cursor: pointer; }
.folge input { margin-top: 0.25rem; }

/* ── Fristen unter Einstellungen (Sammlung 180, 0.2.51) ── */
.fristenliste { width: auto; min-width: 52rem; }
.fristenliste td { vertical-align: middle; padding-top: 0.25rem; padding-bottom: 0.25rem; }
.fristenliste .gruppenzeile th { text-align: left; padding-top: 0.9rem; font-size: 0.78rem;
  letter-spacing: 0.05em; text-transform: uppercase; color: var(--farbe-schrift-gedaempft);
  border-bottom: 2px solid var(--farbe-rand-block); }
.fristenliste .vorlaufzelle { white-space: nowrap; }
.fristenliste input.vorlauf { width: 5.5rem; display: inline-block; padding: 0.15rem 0.4rem; text-align: right; }
.fristenliste .knopf { margin: 0; display: inline-flex; align-items: center; gap: 0.3rem; white-space: nowrap; }
.formularfuss { display: flex; align-items: center; gap: 1rem; margin-top: 0.8rem; }
.formularfuss .knopf { margin: 0; }

/* ── „Danach" im Dialog Erzeugen (Sammlung 184, 0.2.52) ── */
.danach { margin-top: 0.6rem; }
.danach .haken { margin: 0.2rem 0 0; }

/* ── To-dos (0.2.53) – Entwurf `entwuerfe/todos-8a1.html` ── */

/* Liste · Woche · Monat rechts in der Titelzeile. */
.ansichtwahl { margin: 0; }
.todofilter label { margin-left: 0.6rem; }
.todofilter label:first-of-type { margin-left: 0; }
.filterchip { display: inline-flex; align-items: center; gap: 0.35rem; margin-left: 0.8rem;
  padding: 0.15rem 0.6rem; border: 1px solid var(--farbe-rand-block); border-radius: 999px;
  font-size: 0.9rem; }
.filterchip a { text-decoration: none; }
.wochennav { display: inline-flex; align-items: center; gap: 0.4rem; margin-left: 1rem; }
.wochennav .knopf { margin: 0; }

/* Farben wie MTask: überfällig rot, fällig gelb, erledigt grün. */
.todozeile--ueberfaellig { background: var(--farbe-status-offen-hell); }
.todozeile--faellig { background: var(--farbe-status-warnung-hell); }
.todozeile--erledigt { background: var(--farbe-status-erledigt-hell); }
.todomarke--ueberfaellig { color: var(--farbe-status-offen); }
.todomarke--faellig { color: var(--farbe-status-warnung); }
.todomarke--erledigt { color: var(--farbe-status-erledigt); }
.abhaken input { width: 1.1rem; height: 1.1rem; }
/* Zwei Knöpfe – Tags und Papierkorb, wie im Entwurf. */
.todoliste .spalte--leiste { width: 80px; }
.wiederkehr { font-weight: 700; color: var(--farbe-schrift-gedaempft); }

/* Die Woche – sieben Tage mit Samstag und Sonntag. */
.kalenderwoche { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 0.4rem;
  margin-top: 0.6rem; }
.kalendertag { min-height: 26rem; padding: 0.4rem; background: var(--farbe-flaeche-block);
  border: 1px solid var(--farbe-rand-block); border-radius: 6px; display: flex;
  flex-direction: column; gap: 0.3rem; }
.kalendertag--heute { box-shadow: inset 0 3px 0 var(--farbe-status-hinweis); }
.kalendertag__kopf { margin: 0 0 0.2rem; font-weight: 700; font-size: 0.9rem; }
.kalendertag__leer { margin: 0; }
.kalendereintrag { display: block; padding: 0.25rem 0.4rem; border-radius: 4px; font-size: 0.82rem;
  text-decoration: none; color: inherit; border: 1px solid var(--farbe-rand-block);
  overflow: hidden; text-overflow: ellipsis; }
.kalendereintrag__zeit { font-weight: 700; }

/* Der Monat – je Tag höchstens drei. */
.kalendermonat { display: grid; grid-template-columns: 2.4rem repeat(7, minmax(0, 1fr)); gap: 0.3rem;
  margin-top: 0.6rem; }
.monatskopf { margin: 0; font-weight: 700; font-size: 0.85rem; text-align: center; }
.monatstag { min-height: 7.5rem; padding: 0.3rem; background: var(--farbe-flaeche-block);
  border: 1px solid var(--farbe-rand-block); border-radius: 6px; display: flex;
  flex-direction: column; gap: 0.2rem; }
.monatstag--fremd { opacity: 0.5; }
.monatstag--heute { box-shadow: inset 0 3px 0 var(--farbe-status-hinweis); }
.monatstag__zahl { margin: 0; font-size: 0.8rem; color: var(--farbe-schrift-gedaempft); }
.monatstag .kalendereintrag { white-space: nowrap; font-size: 0.78rem; padding: 0.1rem 0.3rem; }
.monatstag__mehr { margin: 0; font-size: 0.78rem; }

/* Der Drawer: Datum und Uhrzeit nebeneinander, darunter die Knöpfe. */
.todoformular__teile { border: 0; padding: 0; margin: 0; min-width: 0; }
.datumzeit { display: flex; gap: 0.4rem; align-items: center; }
.datumzeit input[type=date] { flex: 1; min-width: 0; }
.datumzeit input[type=time] { width: 7rem; flex: none; }
.schieber { display: flex; gap: 0.3rem; margin-top: 0.35rem; flex-wrap: wrap; }
.schieber .knopf { margin: 0; padding: 0.1rem 0.5rem; }
.wiederholung { display: flex; gap: 0.35rem; align-items: center; flex-wrap: wrap; }
.wiederholung select { width: auto; }
.wiederholung [hidden] { display: none; }
input.kurz { width: 4rem; }

/* Das Dashboard: die To-dos – ihr Platz kommt seit 0.2.74 aus dem Raster. */
.todokurzliste { list-style: none; margin: 0; padding: 0; }
.todokurz { display: grid; grid-template-columns: 1.2rem 3.4rem minmax(0, 1fr) 1.2rem 8.5rem; gap: 0.5rem;
  align-items: baseline; padding: 0.22rem 0.4rem; border-bottom: 1px solid var(--farbe-rand-block);
  font-size: 0.9rem; }
.todokurz__datum { font-weight: 700; font-size: 0.82rem; }
.todokurz__titel { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.todokurz__klient { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 0.82rem;
  text-align: right; }
.todokurz__anlage .icon { width: 1rem; height: 1rem; vertical-align: -2px; }
.todokurz__klammer { border: 0; padding: 0; background: none; color: inherit;
  cursor: pointer; }

/* Einstellungen ▸ Betrieb: die zwei Werte der To-dos. */
input.wert { width: 10rem; }


/* ── Der Aufgabenplaner und die To-dos aus den Fristen (8a2, 0.2.54) ──
   Entwurf `entwuerfe/todos-8a2.html`, Bild 3 bis 5. */
.todoherkunft { display: flex; gap: 0.5rem; align-items: flex-start; margin: 0.8rem 0 0.2rem;
  padding: 0.5rem 0.7rem; border-radius: 6px; background: var(--farbe-status-warnung-hell); font-size: 0.92rem; }
.todoherkunft .icon { flex: none; margin-top: 0.15rem; }
.planerliste__fehler { color: var(--farbe-status-offen); }
.tagefeld { display: flex; align-items: center; gap: 0.4rem; margin: 0; }

/* ── Die Termine im Aufgabenplaner (Sammlung 185, 0.2.55) ── */
.termine { margin: 0.5rem 0 0.2rem; font-size: 0.95rem; }
.termine .icon { vertical-align: -2px; margin-right: 0.3rem; }
.feld[hidden] { display: none; }

/* ── Filter im Block „To-dos" (Sammlung 186, 0.2.55) ── */
.dashfilter { display: flex; gap: 0.5rem; margin: 0.2rem 0 0.6rem; }
.dashfilter select { flex: 1; min-width: 0; font-size: 0.88rem; padding: 0.2rem 0.4rem; }
/* Sammlung 239: das Suchfeld unter den beiden Auswahlfeldern. */
.dashfilter--suche { margin-top: -0.2rem; }
.dashfilter--suche input { flex: 1; min-width: 0; font-size: 0.88rem; padding: 0.2rem 0.5rem; }
.todokurz[hidden] { display: none; }

/* ── Die Vergütung (Sprint 11a1, 0.2.56) ──
   Entwurf `entwuerfe/verguetung-11a1.html`: die Matrix im Drawer, in der Akte
   links die Anträge und daneben die Status-Zeiträume, die Statistik. */
.matrixbereich { border: 1px solid var(--farbe-rand-block); border-radius: 6px; padding: 0.6rem 0.8rem;
  margin: 0.8rem 0; }
.matrixbereich__kopf { display: flex; gap: 1rem; align-items: center; margin-bottom: 0.4rem; }
.matrixbereich__kopf label { display: flex; gap: 0.4rem; align-items: center; }
.matrixbereich__kopf .reihenknopf { margin-left: auto; }
.matrixbereich__kopf input.kurz { width: 5.5rem; }
.tagefeld input[type="date"] { width: 11rem; flex: none; }
.matrixtabelle { width: 100%; border-collapse: collapse; font-size: 0.88rem; }
.matrixtabelle th { text-align: left; font-weight: 600; padding: 0.2rem 0.3rem; font-size: 0.8rem; }
.matrixtabelle td { padding: 0.15rem 0.3rem; }
.matrixtabelle input.betrag { width: 100%; text-align: right; }
.matrix__eigene { background: var(--farbe-status-hinweis-hell); }
.verguetungskopf { margin: 0.2rem 0 0.8rem; }
.verguetungsraster { display: grid; grid-template-columns: 1.3fr 1fr; gap: 1.25rem; align-items: start; }
.jahrwahl { display: flex; gap: 0.8rem; align-items: baseline; }
.listenfilter { display: flex; gap: 1rem; margin: 0.6rem 0; }
.kennzahlen { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; margin: 0.8rem 0 1rem; }
.kennzahl { display: flex; flex-direction: column; gap: 0.2rem; padding: 0.7rem 1rem; border-radius: 8px;
  background: var(--farbe-flaeche-block); border: 1px solid var(--farbe-rand-block); }
.kennzahl__name { font-size: 0.85rem; color: var(--farbe-schrift-gedaempft); }
.kennzahl__wert { font-size: 1.4rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.warnhinweis { margin: -0.3rem 0 1rem; }
.saeulen { display: grid; grid-template-columns: repeat(12, 1fr); gap: 0.4rem; height: 12rem; align-items: end;
  padding-top: 1.2rem; }
.saeule { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%; }
.saeule__balken { width: 70%; background: var(--farbe-status-warnung); border-radius: 3px 3px 0 0; }
.saeule__balken--vorher { opacity: 0.35; }
.saeule__wert { font-size: 0.7rem; color: var(--farbe-schrift-gedaempft); white-space: nowrap; }
.saeule__monat { font-size: 0.8rem; margin-top: 0.2rem; }
.jahressumme { margin: 0.6rem 0 0; }

/* ── Vergütung, zweite Stufe – 0.2.57 (11a2) ─────────────────────────── */
.nichteinzusetzen { padding: 0.5rem 0.7rem; border-radius: 6px; background: var(--farbe-status-warnung-hell); }
.nichteinzusetzen input[type="text"] { width: 100%; }

/* ── Vergütung, dritte Stufe – 0.2.59 (11a3) ─────────────────────────── */
.fehltliste { margin: 0.3rem 0 0; padding-left: 1.2rem; }
.todokurz__haken { margin: 0; }

/* ── To-dos: das Wochenende und die Kalenderwoche – Sammlung 188 (0.2.59) ─ */
.kalendertag--sa, .monatstag--sa { background: color-mix(in srgb, var(--farbe-flaeche-block), var(--farbe-status-hinweis) 10%); }
.kalendertag--so, .monatstag--so { background: color-mix(in srgb, var(--farbe-flaeche-block), var(--farbe-status-hinweis) 20%); }
.kalendertag--so .kalendertag__kopf, .monatstag--so .monatstag__zahl, .monatskopf--so { color: var(--farbe-status-offen); }
.monatskw { margin: 0; padding-top: 0.3rem; font-size: 0.8rem; font-weight: 700; text-align: center;
  color: var(--farbe-schrift-gedaempft); }

/* ── Posteingang: der Zuordnungsvorschlag – Sprint 5b (0.2.61) ──────────
   Unter der Bezeichnung (Variante B, 07.09.2026), Entwurf
   `entwuerfe/texterkennung-5b.html`. Die Stufe traegt die Umrandung, nicht
   die Farbe allein: sicher kraeftig, wahrscheinlich ruhiger, unsicher
   gestrichelt, mehrdeutig schlicht. */
.werkzeuge__links .ansichtwahl { margin: 0; }
.vorschlagszeile { display: flex; flex-wrap: wrap; align-items: center; gap: 0.2rem 0.5rem;
  margin: 0.3rem 0 0 1.9rem; }
.vorschlag { display: inline-flex; align-items: center; gap: 0.3rem; padding: 0.1rem 0.6rem;
  font-size: 0.88rem; text-decoration: none; color: var(--farbe-schrift);
  background: var(--farbe-flaeche-block); border: 1px solid var(--farbe-rand-block); border-radius: 999px; }
.vorschlag .icon { width: 0.95rem; height: 0.95rem; }
.vorschlag--sicher { border: 2px solid var(--farbe-status-erledigt); background: var(--farbe-status-erledigt-hell);
  font-weight: 600; }
.vorschlag--wahrscheinlich { border-color: var(--farbe-status-erledigt); }
.vorschlag--unsicher { border-style: dashed; }
.vorschlag__grund { font-size: 0.82rem; color: var(--farbe-schrift-gedaempft); }
.vorschlag__grund--zeile { flex-basis: 100%; }
.vorschlag__stand { font-size: 0.88rem; }
/* „Nach Klient": je Klient eine Kopfzeile. Genauer als die Regel, die die
   letzte Zelle einer Zeile nach rechts stellt. */
.listentabelle tr.gruppenkopf > td, .listentabelle tr.gruppenkopf > td:last-child {
  padding-top: 0.9rem; font-weight: 600; text-align: left;
  border-bottom: 2px solid var(--farbe-rand-betont); }

/* ── Der Import – Sammlung 189 (0.2.62) ────────────────────────────────── */
.kennzahlen--fuenf { grid-template-columns: repeat(5, 1fr); }
.kennzahl--warnung .kennzahl__wert { color: var(--farbe-status-warnung); }
.kennzahl--offen .kennzahl__wert { color: var(--farbe-status-offen); }
.probelauf__wahl { margin: 0 0 0.6rem; }
/* Das Ergebnis gehört zum Namen – nicht an den rechten Rand. */
.tabelle.probelauf td:last-child, .tabelle.probelauf th:last-child { text-align: left; }


/* ═══════════════════════════════════ Der Betrachter – Sprint 5c
   Entwurf `entwuerfe/pdf-bearbeitung-5c.html` (27.09.2026). pdf.js zeichnet
   die Seiten, `betrachter.mjs` fuehrt Seitenleiste, Werkzeuge und die
   Seitenfolge. Hoehe wie bisher die Vorschau: im Drawer 60vh, im
   ausgedockten Fenster 82vh (oben). */
.betrachter {
  display: flex;
  flex-direction: column;
  height: 34rem;
  border: 1px solid var(--farbe-rand-block);
  border-radius: 6px;
  background: var(--farbe-flaeche-block);
  overflow: hidden;
}

/* Wird die Leiste im schmalen Drawer zu eng, rutscht der rechte Teil
   (Änderungen, Rückgängig, Verwerfen, Speichern) rechtsbündig in eine
   zweite Zeile, statt über den Rand zu ragen (0.2.67). */
.betrachter__leiste {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.3rem 0.2rem;
  padding: 0.3rem 0.4rem;
  border-bottom: 1px solid var(--farbe-rand-block);
}

.betrachter__gruppe {
  display: flex;
  align-items: center;
  gap: 0.1rem;
  padding-right: 0.35rem;
  margin-right: 0.15rem;
  border-right: 1px solid var(--farbe-rand-block);
}

.betrachter__gruppe:last-child { border-right: none; }

.betrachter__knopf {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.9rem;
  height: 1.9rem;
  padding: 0 0.2rem;
  border: 1px solid transparent;
  border-radius: 5px;
  background: none;
  color: var(--farbe-schrift);
  cursor: pointer;
}

.betrachter__knopf:hover:not([disabled]) {
  background: var(--farbe-flaeche-hervor);
  border-color: var(--farbe-rand-block);
}

.betrachter__knopf.ist-an {
  background: var(--farbe-status-hinweis-hell);
  border-color: var(--farbe-status-hinweis);
}

.betrachter__knopf[disabled],
.betrachter .knopf[disabled] {
  opacity: 0.35;
  cursor: default;
}

.betrachter__knopf .icon { width: 1.15rem; height: 1.15rem; }

.betrachter__stand {
  padding-left: 0.3rem;
  font-size: 0.82rem;
  color: var(--farbe-schrift-gedaempft);
  white-space: nowrap;
}

.betrachter__rechts {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  margin-left: auto;
}

.betrachter__offen {
  font-size: 0.8rem;
  color: var(--farbe-status-warnung);
  white-space: nowrap;
}

.betrachter__koerper {
  position: relative;
  display: flex;
  flex: 1;
  min-height: 0;
}

.betrachter__seiten {
  position: relative;
  flex: none;
  width: 6.2rem;
  overflow-y: auto;
  padding: 0.6rem 0.4rem;
  border-right: 1px solid var(--farbe-rand-block);
}

.betrachter__flaeche {
  position: relative;
  flex: 1;
  overflow: auto;
  /* Der Rollbalken hat seinen Platz immer - sonst aenderte er die
     Seitenbreite, sobald er erscheint. */
  scrollbar-gutter: stable;
  padding: 0.8rem 1rem;
  background: var(--grund-neutral-300);
}

.betrachter__meldung { margin: 1rem; }

/* Die Seitenleiste: Klick waehlt, Strg und Umschalt waehlen mehrere,
   Ziehen sortiert. */
.seitenbild {
  margin: 0 auto 0.7rem;
  text-align: center;
}

.betrachter[data-bearbeitbar] .seitenbild { cursor: grab; }

.seitenbild canvas {
  display: block;
  margin: 0 auto;
  max-width: 5.2rem;
  border: 2px solid transparent;
  outline: 1px solid var(--farbe-rand-block);
  background: #fff;
}

.seitenbild.ist-aktuell canvas { outline-color: var(--farbe-rand-betont); }

.seitenbild.ist-gewaehlt canvas {
  border-color: var(--farbe-verweis);
  outline-color: var(--farbe-verweis);
}

.seitenbild__nummer {
  display: block;
  margin-top: 0.15rem;
  font-size: 0.78rem;
  color: var(--farbe-schrift-gedaempft);
}

.seitenbild__marke {
  display: inline-block;
  font-size: 0.72rem;
  color: var(--farbe-status-warnung);
}

.seitenbild.ist-geloescht canvas { opacity: 0.3; }
.seitenbild.ist-geloescht .seitenbild__nummer { text-decoration: line-through; }

/* Wohin eine gezogene Seite faellt. */
.seitenbild.ziel-davor { box-shadow: 0 -3px 0 var(--farbe-verweis); }
.seitenbild.ziel-danach { box-shadow: 0 3px 0 var(--farbe-verweis); }

.blatt {
  position: relative;
  margin: 0 auto 0.9rem;
  background: #fff;
  box-shadow: 0 1px 4px rgb(0 0 0 / 30%);
  /* Die Masse, die pdf.js fuer die Textebene erwartet. Den Massstab
     setzt `betrachter.mjs` je Blatt. */
  --scale-factor: 1;
  --user-unit: 1;
  --total-scale-factor: calc(var(--scale-factor) * var(--user-unit));
  --scale-round-x: 1px;
  --scale-round-y: 1px;
}

.blatt canvas {
  display: block;
  width: 100%;
  height: 100%;
}

.blatt.ist-geloescht canvas { opacity: 0.3; }

.blatt.ist-geloescht::after {
  content: "wird gelöscht";
  position: absolute;
  top: 1rem;
  left: 50%;
  transform: translateX(-50%);
  padding: 0.2rem 0.7rem;
  border-radius: 999px;
  background: var(--farbe-status-warnung-hell);
  color: var(--farbe-status-warnung);
  font-weight: 600;
}

/* Die Textebene von pdf.js – unsichtbarer Text ueber dem Bild, zum
   Markieren und Kopieren. Die Regeln stammen aus `web/pdf_viewer.css`
   derselben Fassung 6.3.289 (Apache-2.0), gekuerzt auf das, was hier
   gebraucht wird. */
.betrachter .textLayer {
  position: absolute;
  inset: 0;
  overflow: clip;
  opacity: 1;
  line-height: 1;
  letter-spacing: normal;
  word-spacing: normal;
  text-align: initial;
  text-size-adjust: none;
  forced-color-adjust: none;
  transform-origin: 0 0;
  z-index: 0;
  --min-font-size: 1;
  --text-scale-factor: calc(var(--total-scale-factor) * var(--min-font-size));
  --min-font-size-inv: calc(1 / var(--min-font-size));
}

.betrachter .textLayer :is(span, br) {
  position: absolute;
  color: transparent;
  white-space: pre;
  cursor: text;
  transform-origin: 0% 0%;
}

.betrachter .textLayer > :not(.markedContent),
.betrachter .textLayer .markedContent span:not(.markedContent) {
  z-index: 1;
  --font-height: 0;
  font-size: calc(var(--text-scale-factor) * var(--font-height));
  --scale-x: 1;
  --rotate: 0deg;
  transform: rotate(var(--rotate)) scaleX(var(--scale-x)) scale(var(--min-font-size-inv));
}

.betrachter .textLayer .markedContent { display: contents; }
.betrachter .textLayer ::selection { background: rgb(0 0 255 / 25%); color: transparent; }
.betrachter .textLayer br::selection { background: transparent; }
.betrachter .textLayer[data-main-rotation="90"] { transform: rotate(90deg) translateY(-100%); }
.betrachter .textLayer[data-main-rotation="180"] { transform: rotate(180deg) translate(-100%, -100%); }
.betrachter .textLayer[data-main-rotation="270"] { transform: rotate(270deg) translateX(-100%); }


/* ── Die Anmerkungen – Sprint 5c2 ─────────────────────────────────────
   Ueber der Textebene liegt je Blatt eine Schicht: Kommentare,
   Markierungen, Stempel. Gespeichert wird auf dem Server; hier wird nur
   gezeigt, wo etwas sitzt. */
.anmerkungsschicht {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
}

.anmerkungsschicht > * { pointer-events: auto; }

/* Solange ein Werkzeug in der Hand ist, faengt keine Anmerkung den Klick. */
.betrachter[data-werkzeug] .anmerkung { pointer-events: none; }
.betrachter[data-werkzeug="kommentar"] .textLayer,
.betrachter[data-werkzeug="stempel"] .textLayer,
.betrachter[data-werkzeug="text"] .textLayer { pointer-events: none; }
.betrachter[data-werkzeug="kommentar"] .blatt,
.betrachter[data-werkzeug="stempel"] .blatt { cursor: crosshair; }
.betrachter[data-werkzeug="markieren"] .blatt,
.betrachter[data-werkzeug="text"] .blatt { cursor: text; }

.kommentar {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #c9a800;
  border-radius: 3px;
  background: #ffe36b;
  color: #6b5a10;
  cursor: pointer;
}

.kommentar .icon { width: 80%; height: 80%; }

/* Traegt die Notiz ein eigenes Bild, zeichnet pdf.js es - hier nur die
   Stelle zum Anklicken. */
.kommentar--bild { border-color: transparent; background: transparent; }

.markierung {
  position: absolute;
  border-radius: 2px;
  background: rgb(255 214 0 / 40%);
  mix-blend-mode: multiply;
  cursor: pointer;
}

/* Was schon in der Datei steht, zeichnet pdf.js. */
.markierung--alt { background: transparent; mix-blend-mode: normal; }
.markierung--alt:hover { outline: 1px dashed var(--farbe-rand-betont); }

.markierung--zieht {
  background: rgb(255 214 0 / 30%);
  outline: 1px dashed #c9a800;
  pointer-events: none;
}

.anmerkung.wird-entfernt {
  outline: 2px dashed var(--farbe-status-warnung);
  opacity: 0.5;
}

.anmerkungszettel {
  position: absolute;
  z-index: 3;
  max-width: 16rem;
  padding: 0.45rem 0.6rem;
  border: 1px solid #d8c160;
  border-radius: 6px;
  background: #fff8c5;
  color: var(--grund-neutral-900);
  box-shadow: 0 4px 12px rgb(0 0 0 / 20%);
  font-size: 0.88rem;
}

.anmerkungszettel__text { margin: 0 0 0.3rem; white-space: pre-wrap; }
.anmerkungszettel__kopf { margin: 0 0 0.3rem; font-size: 0.75rem; color: #6b5a10; }
.anmerkung__eingabe { width: 100%; }

/* Der Stempel - in em zu seiner Aufschrift von 14 Punkt, dieselben Masse
   wie `pdfbearbeitung.py`: Rand 8 und 5 Punkt, Linie 2, Abstand 3. */
.stempel {
  --drehung: 0deg;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  height: 1.432em;
  padding: 0 0.571em;
  border: 0.143em solid;
  font-family: Helvetica, Arial, "Liberation Sans", sans-serif;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.071em;
  line-height: 1;
  white-space: nowrap;
}

.stempel:has(small) { height: 2.159em; }
.stempel small { margin-top: 0.214em; font-size: 0.714em; letter-spacing: 0.05em; }
.stempel--rot { color: #b3261e; }
.stempel--blau { color: #1f4e9c; }
.stempel--gruen { color: #1e7a3c; }
.stempel--schwarz { color: #222; }
.stempel--muster { font-size: 11px; }
.stempel--gross { font-size: 18px; }

.blatt .stempel {
  position: absolute;
  transform: translate(-50%, -50%) rotate(var(--drehung));
  cursor: move;
}

.stempel--geist { opacity: 0.55; border-style: dashed; pointer-events: none; }

/* Das Stempelmenue haengt unter seinem Knopf. */
.betrachter__stempelwahl { position: relative; }
.betrachter__pfeil { margin-left: 0.1rem; font-size: 0.7rem; }

.stempelmenue {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 4;
  width: 19rem;
  margin-top: 0.3rem;
  padding: 0.5rem;
  border: 1px solid var(--farbe-rand-betont);
  border-radius: 8px;
  background: var(--farbe-flaeche-block);
  box-shadow: 0 8px 22px rgb(0 0 0 / 22%);
}

.stempelmenue__eintrag {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  width: 100%;
  padding: 0.35rem 0.4rem;
  border: 1px solid transparent;
  border-radius: 5px;
  background: none;
  color: var(--farbe-schrift);
  text-align: left;
  cursor: pointer;
}

.stempelmenue__eintrag:hover { background: var(--farbe-flaeche-hervor); }
.stempelmenue__eintrag .stempel { min-width: 7.5rem; }

.stempelmenue__datum {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0.5rem 0.4rem 0.2rem;
  font-size: 0.9rem;
}

.stempelmenue .fussnote { margin: 0.3rem 0.4rem 0; }
.stempelliste td { vertical-align: middle; }

/* ── Der Text – Sammlung 195, 0.2.67 ──────────────────────────────────
   Helvetica wie der Stempel, nicht fett, ohne Rahmen; mit seiner Ecke oben
   links dort, wo getippt wurde. Zeilenhöhe 1,2 – dieselbe wie in
   `pdfbearbeitung.py`, damit er nach dem Speichern dort bleibt. */
.blatt .textvermerk {
  position: absolute;
  transform: rotate(var(--drehung, 0deg));
  transform-origin: 0 0;
  font-family: Helvetica, Arial, "Liberation Sans", sans-serif;
  line-height: 1.2;
  white-space: pre;
  cursor: move;
}

.textvermerk--rot { color: #b3261e; }
.textvermerk--blau { color: #1f4e9c; }
.textvermerk--gruen { color: #1e7a3c; }
.textvermerk--schwarz { color: #222; }
.textvermerk.ist-in-arbeit { z-index: 3; cursor: text; }

.textvermerk__eingabe {
  display: block;
  min-width: 8em;
  margin: 0;
  padding: 0;
  border: 0;
  outline: 1px dashed currentColor;
  background: rgb(255 255 255 / 75%);
  color: inherit;
  font: inherit;
  line-height: inherit;
  white-space: pre;
  overflow: hidden;
  resize: none;
  field-sizing: content;
}

/* Farbe und Größe – nur solange getippt wird, vorbelegt mit der zuletzt
   gewählten. */
.textvermerk__leiste {
  position: absolute;
  bottom: 100%;
  left: -0.4rem;
  display: flex;
  align-items: center;
  gap: 0.3rem;
  margin-bottom: 0.45rem;
  padding: 0.25rem 0.4rem;
  border: 1px solid var(--farbe-rand-betont);
  border-radius: 6px;
  background: var(--farbe-flaeche-block);
  box-shadow: 0 4px 12px rgb(0 0 0 / 18%);
  font-size: 1rem;
  line-height: 1;
  white-space: nowrap;
}

.textvermerk__farbe {
  width: 1.15rem;
  height: 1.15rem;
  padding: 0;
  border: 2px solid var(--farbe-flaeche-block);
  border-radius: 50%;
  cursor: pointer;
}

.textvermerk__farbe.ist-an { outline: 2px solid var(--farbe-verweis); }
.textvermerk__farbe--rot { background: #b3261e; }
.textvermerk__farbe--blau { background: #1f4e9c; }
.textvermerk__farbe--gruen { background: #1e7a3c; }
.textvermerk__farbe--schwarz { background: #222; }

.textvermerk__trenner {
  width: 1px;
  height: 1.3rem;
  margin: 0 0.15rem;
  background: var(--farbe-rand-block);
}

.textvermerk__groesse {
  min-width: 1.7rem;
  height: 1.7rem;
  padding: 0;
  border: 1px solid transparent;
  border-radius: 5px;
  background: none;
  color: var(--farbe-schrift);
  font-family: Helvetica, Arial, sans-serif;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
}

.textvermerk__groesse.ist-an {
  border-color: var(--farbe-status-hinweis);
  background: var(--farbe-status-hinweis-hell);
}

.textvermerk__hilfe {
  position: absolute;
  top: 100%;
  left: 0;
  margin: 0.4rem 0 0;
  padding: 0.1rem 0.4rem;
  border-radius: 4px;
  background: var(--farbe-flaeche-block);
  box-shadow: 0 2px 6px rgb(0 0 0 / 12%);
  color: var(--farbe-schrift-gedaempft);
  font-family: inherit;
  font-size: 0.75rem;
  line-height: 1.4;
  white-space: nowrap;
}

/* Text und Stempel aus der Datei zeichnet pdf.js – hier nur die Stelle zum
   Anklicken. */
.anmerkung--alt { position: absolute; cursor: pointer; }
.anmerkung--alt:hover { outline: 1px dashed var(--farbe-rand-betont); }
.anmerkungszettel .knopf + .knopf { margin-left: 0.3rem; }

/* ── Berichte (Sprint 6a, 0.2.69) – Entwurf `entwuerfe/berichte-6.html`, Bild 1 bis 3 ── */

/* Die Fragen: Themen als Zwischenzeilen, wie die Textbausteine. */
.fragenfilter { width: 16rem; }
.fragenliste td, .fragenliste th { vertical-align: top; }
.fragenliste .gruppenzeile th { text-align: left; padding-top: 0.9rem; font-size: 0.78rem;
  letter-spacing: 0.05em; text-transform: uppercase; color: var(--farbe-schrift-gedaempft);
  border-bottom: 2px solid var(--farbe-rand-block); }
.fragenliste__vorbelegung { font-size: 0.85rem; max-width: 18rem; overflow: hidden; text-overflow: ellipsis;
  white-space: nowrap; }
.fragenliste__vorlagen { white-space: nowrap; }
.vorlagenmarke { display: inline-block; min-width: 1.4rem; margin-right: 0.15rem; text-align: center;
  font-size: 0.75rem; font-weight: 700; border-radius: 4px; background: var(--farbe-bereich-schreiben-hell); }

/* Eine Frage im Drawer: die Optionen als kleine Tabelle, zum Ziehen am Griff. */
.optionen td { vertical-align: middle; padding: 0.2rem 0.4rem; }
.optionen input[type="text"] { width: 100%; box-sizing: border-box; margin: 0; }
.optionen__zusatz { display: inline-flex; gap: 0.3rem; align-items: center; white-space: nowrap; font-weight: 400; }
.frageoptionen { margin-bottom: 0.6rem; }
.frage__einfuegen { margin: 0.4rem 0 0; }
.frage__genutzt { margin: 0.2rem 0 0.6rem; padding-left: 1.2rem; }
.hinweisband { padding: 0.5rem 0.7rem; font-size: 0.88rem; background: var(--farbe-status-hinweis-hell); }
.optionen .griff, .vabschnitt .griff, .vfrage .griff { color: var(--farbe-schrift-gedaempft); cursor: grab;
  width: 1.2rem; letter-spacing: -2px; user-select: none; }
.ist-gezogen { opacity: 0.45; }

/* Die Vorlagen: links die vier, rechts die gewählte. */
.berichtsvorlagenraster { display: grid; grid-template-columns: 22rem minmax(0, 1fr); gap: 1.2rem;
  align-items: start; }
.berichtsvorlagenwahl { list-style: none; margin: 0; padding: 0; }
.berichtsvorlagenwahl li { display: flex; flex-direction: column; padding: 0.45rem 0.6rem;
  border-bottom: 1px solid var(--farbe-rand-block); }
.berichtsvorlagenwahl li.ist-gewaehlt { background: var(--farbe-flaeche-hervor); }
.berichtsvorlagenwahl .gedaempft { font-size: 0.85rem; }
.kopfreihe--berichtsvorlage { display: grid; grid-template-columns: minmax(0, 1fr) 18rem; gap: 1rem; }
.kopfreihe--berichtsvorlage .feld { margin: 0; }
.kopfreihe--berichtsvorlage input { width: 100%; box-sizing: border-box; }
.festteil { margin: 0.8rem 0; padding: 0.5rem 0.7rem; font-size: 0.88rem; color: var(--farbe-schrift-gedaempft);
  border: 1px dashed var(--farbe-rand-block); }
.vabschnitt { margin: 0.8rem 0; padding: 0.6rem 0.8rem; border: 1px solid var(--farbe-rand-block);
  background: var(--farbe-flaeche-block); }
.vabschnitt__kopf { display: flex; align-items: center; gap: 0.5rem; }
.vabschnitt__kopf input { flex: 1; margin: 0; font-weight: 700; }
.vabschnitt__kopf .knopf { margin: 0; white-space: nowrap; }
.vabschnitt__zahl { font-size: 0.85rem; white-space: nowrap; }
.vfragen { list-style: none; margin: 0.5rem 0 0; padding: 0; min-height: 1.6rem; }
.vfrage { display: grid; grid-template-columns: 1.4rem 3.4rem minmax(0, 1fr) 14rem 2rem; align-items: center;
  gap: 0.4rem; padding: 0.28rem 0; border-bottom: 1px solid var(--farbe-rand-block); font-size: 0.92rem; }
.vfrage__nr input { width: 3rem; margin: 0; padding: 0.1rem 0.3rem; font-weight: 700; }
.vfrage__art { font-size: 0.82rem; }
.poolsuche { max-width: 44rem; margin-top: 0.6rem; }
.poolsuche input[type="search"] { width: 100%; box-sizing: border-box; margin: 0; }
.poolsuche__treffer { list-style: none; margin: 0; padding: 0; max-height: 20rem; overflow-y: auto;
  border: 1px solid var(--farbe-rand-betont); border-top: none; background: var(--farbe-flaeche-block); }
.poolsuche__treffer button { display: block; width: 100%; padding: 0.35rem 0.6rem; text-align: left; border: 0;
  border-bottom: 1px solid var(--farbe-rand-block); background: none; font: inherit; font-size: 0.9rem;
  color: inherit; cursor: pointer; }
.poolsuche__treffer button:hover, .poolsuche__treffer button:focus { background: var(--farbe-flaeche-hervor); }
.poolsuche__leer { padding: 0.35rem 0.6rem; font-size: 0.9rem; }

/* Die Briefkopf-Verwaltung: Brief oder Bericht – dieselbe Gestalt wie der
   Umschalter „Im Browser / Als PDF", aber eigene Klassen: `briefkopf.js`
   sucht den Umschalter des Blattes über `.vorschauwahl`. */
.briefkopfwahl { display: flex; align-items: center; gap: 1rem; margin: 0 0 0.8rem; }
.briefkopfwahl .seitenhinweis { margin: 0; }
.briefkopfwahl__stellen { display: flex; flex: none; border: 1px solid var(--farbe-rand-block); border-radius: 6px;
  overflow: hidden; }
.briefkopfwahl__stellen a { padding: 0.2rem 0.7rem; font-size: 0.85rem; color: var(--farbe-schrift-gedaempft);
  background: var(--farbe-flaeche-block); text-decoration: none; }
.briefkopfwahl__stellen a + a { border-left: 1px solid var(--farbe-rand-block); }
.briefkopfwahl__stellen a.aktiv { background: var(--farbe-flaeche-hervor); color: var(--farbe-schrift);
  font-weight: 600; }

/* ── Vorgänge und Berichte (Sprint 6b, 0.2.70) – Entwurf `entwuerfe/berichte-6.html`, Bild 4 und 5 ── */

/* Die Akte ▸ Vorgänge: links die Liste, rechts der gewählte. */
.vorgangsraster { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 1.2rem;
  align-items: start; }
.vorgangsliste tr.ist-gewaehlt td { background: var(--farbe-flaeche-hervor); }
.vorgangskopf { margin: 0 0 0.6rem; }
.stufen { display: flex; list-style: none; margin: 0 0 0.9rem; padding: 0; }
.stufen li { flex: 1; padding: 0.3rem; text-align: center; font-size: 0.85rem; color: var(--farbe-schrift-gedaempft);
  border: 1px solid var(--farbe-rand-block); }
.stufen li + li { border-left: none; }
.stufen .stufen__jetzt { background: var(--farbe-flaeche-kopf); color: var(--farbe-schrift-invers); font-weight: 700; }
.vorgangsdokumente td { vertical-align: top; }
.vorgangsdokumente .icon { width: 1.05rem; height: 1.05rem; vertical-align: -3px; }
.vorgang .knopfzeile { display: flex; align-items: center; gap: 0.8rem; flex-wrap: wrap; }
.vorgang .knopfzeile form { margin: 0; }
.vorgang__loeschen { margin-left: auto !important; }

/* Den Bericht ausfüllen: links die Antwort, rechts die aus dem letzten Bericht. */
.berichtseite { max-width: 110rem; }
.berichtskopf { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.3rem 1rem; margin-bottom: 0.6rem; }
.berichtskopf .seitentitel { margin: 0; }
.berichtskopf__rechts { display: flex; align-items: center; gap: 0.6rem; margin-left: auto; }
.berichtskopf__rechts form { margin: 0; }
.berichtsabschnitt { margin: 1rem 0 0.3rem; padding-bottom: 0.2rem; font-size: 1.05rem;
  border-bottom: 2px solid var(--farbe-schrift); }
.antwort { display: grid; grid-template-columns: minmax(0, 1fr) 30rem; gap: 1.5rem; padding: 0.55rem 0;
  border-bottom: 1px solid var(--farbe-rand-block); }
.antwort__frage { margin-bottom: 0.25rem; font-weight: 600; }
/* **Die Felder eingerückt wie ihre Frage** (Sammlung 206, 0.2.73): Die Nummer
   steht links vor dem Wortlaut, in Höhe der Abschnittsüberschrift; alles
   darunter beginnt, wo der Wortlaut beginnt – auch seine zweite Zeile. */
.antwort__links { padding-left: 1.8rem; }
.antwort__nr { display: inline-block; min-width: 1.8rem; margin-left: -1.8rem; }
.antwort textarea, .antwort input[data-antwort] { width: 100%; box-sizing: border-box; margin: 0; }
.antwort input.kurzfeld { display: inline-block; width: 10rem; margin: 0 0.3rem 0 0; }
.antwort__hinweis { margin: 0.1rem 0 0; font-size: 0.8rem; color: var(--farbe-schrift-gedaempft); }
.herkunft { margin-left: 0.4rem; padding: 0.05rem 0.45rem; border-radius: 999px; font-size: 0.75rem; font-weight: 400;
  background: var(--farbe-bereich-klienten-hell); }
.kreuze { display: flex; flex-direction: column; align-items: flex-start; gap: 0.3rem; }
.kreuz { display: inline-flex; align-items: center; gap: 0.35rem; margin: 0; font-weight: 400; cursor: pointer; }
.kreuz input[type="checkbox"] { margin: 0; }
.kreuz--an { font-weight: 600; }
/* **So groß wie die Textfelder** (Sammlung 204, 0.2.72): Die allgemeine Regel
   für Häkchen (`label:has(> input[type="checkbox"])`, 0.9rem) wiegt mehr als
   `.kreuz` – deshalb mit `.kreuze` davor. Das nahm bis 0.2.71 auch der
   gewählten Option ihr Fett. `inherit`, nicht `1rem`: Die Textfelder erben die
   Grundschrift. */
.kreuze .kreuz { font-size: inherit; }
.kreuze .kreuz--an { font-weight: 600; }
.kreuze .antwort__zusatz { width: 28rem; margin: 0 0 0 0.3rem; padding: 0.15rem 0.4rem; font-weight: 400; }
.letztes { padding: 0.35rem 0.6rem; font-size: 0.85rem; border-left: 3px solid var(--farbe-rand-betont);
  background: var(--farbe-flaeche-seite); }
.letztes__woher { display: block; font-size: 0.75rem; color: var(--farbe-schrift-gedaempft); }
.letztes__text { display: block; white-space: pre-line; }
.letztes__nehmen { font-size: 0.8rem; }
.antwort--leer textarea, .antwort--leer input[data-antwort] { border-color: var(--farbe-status-warnung); }
.berichtsanlagen { max-width: 60rem; margin-top: 1rem; }
.leerliste { margin: 0.4rem 0 0; padding-left: 1.2rem; max-height: 16rem; overflow-y: auto; font-size: 0.9rem; }

/* ── Vermögensverzeichnis und Deckblatt (Sprint 6c, 0.2.73) – Entwurf `entwuerfe/berichte-6c.html`, Bild 2 und 3 ── */

.blattflaeche { background: var(--farbe-flaeche-seite); padding: 1rem 0; margin-top: 1rem; }
.vergleich th.zahl, .vergleich td.zahl { white-space: nowrap; }
.verzeichnis.vergleich:not(.verzeichnis--summe) { table-layout: fixed; width: 100%; }
.verzeichnis--summe.vergleich { max-width: 42rem; }
.verzeichnis--summe.vergleich td:last-child { width: auto; }
/* Die Beträge zum Eintippen – nur solange in Arbeit. Darunter „Wert vom …",
   der Monatswert und „übernehmen". */
.betragsfeld { display: block; }
.betragsfeld input { width: 100%; box-sizing: border-box; margin: 0; padding: 0.15rem 0.4rem; text-align: right; }
.betragsfeld--leer input { border-color: var(--farbe-status-warnung); }
.betragsfeld__zusatz { display: block; margin-top: 0.1rem; font-size: 0.75rem; color: var(--farbe-schrift-gedaempft);
  white-space: normal; }
.verz__nachtragen { margin: 0.4rem 0 0; font-size: 0.85rem; }
.verz__nachtragen .icon { width: 0.95rem; height: 0.95rem; vertical-align: -2px; }
/* Die Prüfliste vor dem Erzeugen – genannt, nicht gesperrt. */
.pruefhinweise { max-width: 72rem; margin-top: 0.8rem; border-left: 4px solid var(--farbe-status-warnung); }
.pruefhinweise--leer { border-left-color: var(--farbe-rand-block); }
.pruefhinweise ul { margin: 0.3rem 0 0.4rem; padding-left: 1.2rem; }
.pruefhinweise li { margin-bottom: 0.3rem; }

/* ── Der Kalender (0.2.77) – Entwurf `entwuerfe/kalender.html` ── */

/* Der Punkt in der Farbe des Kalenders – MDesk in der Farbe des Bereichs. */
.kalpunkt { display: inline-block; width: 0.7rem; height: 0.7rem; border-radius: 3px; vertical-align: -1px;
  margin-right: 0.35rem; background: var(--farbe-bereich-klienten); }
.kalpunkt--geburtstag { background: #b58b2a; }
/* Die Legende unter den Werkzeugen (0.2.78) – mit Google. */
.kallegende { display: flex; flex-wrap: wrap; align-items: center; gap: 0.3rem 1.2rem; margin: 0.2rem 0 0.6rem;
  font-size: 0.85rem; }
.kallegende__eintrag { display: inline-flex; align-items: center; }
/* Solange beim Öffnen mit Google abgeglichen wird (Sammlung 226): ein
   kleines Rad vor dem Text. */
.kalabgleich { display: inline-flex; align-items: center; gap: 0.4rem; }
.kalabgleich__rad { width: 0.75rem; height: 0.75rem; border-radius: 50%; border: 2px solid var(--farbe-rand-block);
  border-top-color: var(--farbe-schrift-gedaempft); animation: kalabgleich-drehen 0.9s linear infinite; }
@keyframes kalabgleich-drehen { to { transform: rotate(360deg); } }
/* „G" an einem Google-Termin, in der Farbe seines Kalenders. */
.termin__g { display: inline-block; margin-left: 0.3rem; padding: 0 0.25rem; border-radius: 3px; font-size: 0.65rem;
  font-weight: 700; font-style: normal; color: white; background: var(--kal); vertical-align: 1px; }
.kalziel { display: flex; flex-wrap: wrap; gap: 0.3rem 1.2rem; margin: 0; }
.googlekalender .tabelle td { vertical-align: middle; }

/* Die Woche: das Stundenraster, 44 px je Stunde (`--kal-px`). Oben die Tage,
   darunter was ganztägig ist, darunter die Stunden. */
.kalwoche {
  --kal: var(--farbe-bereich-klienten);
  --kal-px: 44px;
  display: grid; grid-template-columns: 3.4rem repeat(7, minmax(0, 1fr)); margin-top: 0.6rem;
  border: 1px solid var(--farbe-rand-block); border-radius: 6px; background: var(--farbe-flaeche-block);
  overflow: hidden; }
.kalwoche__ecke { border-bottom: 1px solid var(--farbe-rand-block); }
.kalwoche__ecke--ganz { font-size: 0.72rem; color: var(--farbe-schrift-gedaempft); padding: 0.3rem 0.2rem;
  text-align: right; border-bottom-width: 2px; }
.kalwoche__tag { padding: 0.45rem 0.5rem; font-weight: 700; font-size: 0.9rem;
  border-left: 1px solid var(--farbe-rand-block); border-bottom: 1px solid var(--farbe-rand-block); }
.kalwoche__tag--heute { box-shadow: inset 0 3px 0 var(--farbe-status-hinweis); }
.kalwoche__tag--so { color: var(--farbe-status-offen); }
.kalwoche__ganz { min-height: 2rem; padding: 0.2rem; border-left: 1px solid var(--farbe-rand-block);
  border-bottom: 2px solid var(--farbe-rand-block); display: flex; flex-direction: column; gap: 0.2rem;
  min-width: 0; }
.kalwoche__zeiten { position: relative; }
.kalwoche__zeiten span { position: absolute; right: 0.4rem; transform: translateY(-0.5em); font-size: 0.72rem;
  color: var(--farbe-schrift-gedaempft); }
.kalwoche__zeiten span:first-child { transform: none; }
.kalwoche__spalte { position: relative; border-left: 1px solid var(--farbe-rand-block);
  background-image: repeating-linear-gradient(to bottom, var(--farbe-rand-block) 0 1px, transparent 1px var(--kal-px)); }
.kalwoche__spalte[data-neu] { cursor: copy; }
.kalwoche__spalte--we { background-color: color-mix(in srgb, var(--farbe-flaeche-block), var(--farbe-status-hinweis) 8%); }
.kalwoche__spalte--heute { background-color: color-mix(in srgb, var(--farbe-flaeche-block), var(--farbe-status-hinweis) 5%); }
.kalwoche__jetzt { position: absolute; left: 0; right: 0; border-top: 2px solid var(--farbe-status-offen);
  pointer-events: none; }

/* Ein Termin im Raster – Platz und Breite setzt die Seite. */
.termin { position: absolute; overflow: hidden; padding: 0.15rem 0.35rem; border-radius: 4px;
  border-left: 4px solid var(--kal); background: color-mix(in srgb, var(--kal) 14%, var(--farbe-flaeche-block));
  color: inherit; text-decoration: none; font-size: 0.78rem; line-height: 1.25; cursor: pointer; }
.termin strong { font-weight: 700; }
.termin__zeit { color: var(--farbe-schrift-gedaempft); }
.termin__unter { display: block; color: var(--farbe-schrift-gedaempft); white-space: nowrap; overflow: hidden;
  text-overflow: ellipsis; }
.termin--kurz { white-space: nowrap; text-overflow: ellipsis; }
.termin--ganz { position: static; display: block; white-space: nowrap; text-overflow: ellipsis; }
.termin--geburtstag {
  --kal: #b58b2a;
}
.termin--todo { border-left: 3px dotted var(--farbe-schrift-gedaempft); font-style: italic; }
.termin--todo:not([class*="todozeile--"]), .termin--todo.todozeile--offen { background: var(--farbe-flaeche-block); }

/* Im Monat: dieselben Farben, schmaler. */
.termin--monat {
  --kal: var(--farbe-bereich-klienten);
  border: 0; border-left: 3px solid var(--kal);
  background: color-mix(in srgb, var(--kal) 12%, var(--farbe-flaeche-block)); }
.termin--monat.termin--todo { border-left: 3px dotted var(--farbe-schrift-gedaempft); }

/* Die Liste und die Akte. */
.tabelle .kalliste__tag th { padding-top: 0.9rem; font-size: 0.95rem; text-align: left; }
.kalliste td:first-child { white-space: nowrap; width: 9rem; }
.kalakte td:first-child { width: 10rem; }
.kalakte td:nth-child(2) { width: 8rem; }
.gedaempft-zeilen td { color: var(--farbe-schrift-gedaempft); }

/* Der Drawer: die Kontakte als Marken, dahinter die Wahl. */
.kalchips { display: flex; flex-wrap: wrap; gap: 0.4rem; align-items: center; margin: 0; }
.kalchips .filterchip { margin-left: 0; }
.kalchips__wahl { width: auto; max-width: 100%; }
.terminformular [hidden] { display: none; }


/* ---------- Bankkonten und Umsätze (Sprint 10a, 0.2.81) ----------
   Entwurf `entwuerfe/bankkonten-10a.html` in zweiter Fassung. */

/* **Beträge grün ab null, rot darunter** – wie in Banking4 (03.10.2026:
   *„Werte farbig >= 0 grün, < 0 rot"*). Der Status eines Umsatzes bekommt
   mit 10b ein eigenes Zeichen in einer eigenen Spalte – Ring und Haken,
   nach dem Wunsch vom 04.10.2026 auch rot und grün. */
.geld--plus { color: var(--farbe-status-erledigt); }
.geld--minus { color: var(--farbe-status-offen); }

/* Links die Klienten mit ihren Konten, rechts die Umsätze (*„Klienten links
   als Liste"*). Die Liste links bleibt stehen, wenn rechts gerollt wird. */
.bankseite { display: grid; grid-template-columns: 21rem minmax(0, 1fr); column-gap: 1.2rem; align-items: start; }
.kontenliste { position: sticky; top: 0; max-height: calc(100vh - 12rem); overflow: auto;
  background: var(--farbe-flaeche-block); border: 1px solid var(--farbe-rand-block); border-radius: 6px;
  padding: 0.3rem 0; }
.kontenliste a { display: block; color: inherit; text-decoration: none; }
.kontenliste a:hover { background: var(--farbe-flaeche-hervor); color: inherit; }
.kontenliste__alle { display: flex !important; justify-content: space-between; align-items: baseline; gap: 0.6rem;
  padding: 0.45rem 0.8rem; font-weight: 700; }
.kontenliste__alle span:last-child { font-weight: 400; font-size: 0.85rem; }
.kontenliste__leer { margin: 0; padding: 0.6rem 0.8rem; }
.kontengruppe { border-top: 1px solid var(--farbe-rand-block); }
/* Das Dreieck klappt, der Name wählt. */
.kontengruppe__kopf { padding: 0.45rem 0.8rem; font-weight: 700; cursor: pointer; }
.kontengruppe__kopf a { display: inline; }
/* Der Kontostand rechts neben dem Namen, die Summe rechts neben dem Klienten
   (0.2.82) – Bank-Sicht, nach allen Buchungen bis „Umsätze bis". */
.kontengruppe__summe { float: right; }
.kontozeile { position: relative; padding: 0.3rem 0.8rem 0.4rem 2.4rem; }
/* Das Logo der Bank in der Einrückung vor dem Konto (Sammlung 250, 0.3.0);
   ohne Logo die Anfangsbuchstaben. Name, Ort und BIC im `title`. */
.banklogo,
.bankzeichen { position: absolute; left: 0.5rem; top: 0.42rem; width: 1.5rem; height: 1.15rem; }
.banklogo { object-fit: contain; }
.bankzeichen { display: inline-flex; align-items: center; justify-content: center; border-radius: 3px;
  font-size: 0.62rem; font-weight: 800; line-height: 1; cursor: default;
  color: var(--farbe-schrift-invers); background: var(--farbe-schrift-gedaempft); }
/* Die Suche nach Klienten oben in der Liste (Sammlung 249, 0.3.0). */
.kontenliste__suche { display: flex; align-items: center; gap: 0.4rem; margin: 0.2rem 0.6rem 0.4rem;
  padding: 0 0.5rem; border: 1px solid var(--farbe-rand-block); border-radius: 4px;
  background: var(--farbe-flaeche-seite); }
.kontenliste__suche input { flex: 1; min-width: 0; margin: 0; border: none; background: none; padding: 0.35rem 0; }
.kontenliste__suche input:focus { outline: none; }
.kontozeile__reihe { display: flex; justify-content: space-between; align-items: baseline; gap: 0.6rem; }
.kontozeile__name { font-weight: 600; }
.kontozeile__iban, .kontozeile__unten { display: block; font-size: 0.8rem; color: var(--farbe-schrift-gedaempft); }
.kontozeile__unten { display: flex; justify-content: space-between; gap: 0.6rem; }
/* „● n neu" – was das letzte Einlesen gebracht hat (10c, 0.2.95). Wird es
   mit einer Marke daneben zu breit, rutscht die rechte Seite in eine eigene
   Zeile – „Umsätze bis …" bricht nicht mitten im Datum um. */
.kontozeile__neu { color: var(--farbe-status-hinweis); font-weight: 700; }
.kontozeile__unten { flex-wrap: wrap; row-gap: 0.15rem; }
.kontozeile__unten > span:first-child { white-space: nowrap; }
.kontozeile__unten > span:last-child { margin-left: auto; }
.kontenliste .kontozeile--gewaehlt { background: var(--farbe-bereich-finanzen-hell);
  box-shadow: inset 3px 0 0 var(--farbe-bereich-finanzen); }

/* Über der Liste, wenn links ein Konto gewählt ist. */
.kontokopf { display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap;
  margin: 0 0 0.6rem; }
.kontokopf__rechts { display: flex; align-items: center; gap: 0.6rem; }
.kontokopf .knopf { margin: 0; }
/* Die wartenden Buchungen einer IBAN (Sammlung 244). */
.wartendeliste table { width: 100%; }
.wartendeliste__zweck { display: block; color: var(--farbe-schrift-gedaempft); font-size: 0.85rem; }

/* Der Live-Filter: alles in einer Zeile, schmale Felder. */
.umsatzfilter { row-gap: 0.4rem; margin: 0; }
.umsatzfilter .kurzdatum { width: 9.5rem; margin: 0; }
.umsatzfilter .kurzbetrag { width: 6rem; margin: 0; }
/* Sammlung 238: „Filter zurücksetzen" nach dem Betrag – `hidden` verliert
   sonst gegen `display` der Knöpfe. */
.filterleeren { margin: 0 0 0 0.4rem; white-space: nowrap; }
.filterleeren[hidden] { display: none; }

/* **Die Liste: enge Zeilen, abwechselnd dezent getönt** (*„Die Umsatzzeilen
   abwechselnd farbig hinterlegen (nur sehr dezent) unabhängig von der
   Hover-Farbe, Zeilen etwas enger"*). Die Farbe unter dem Mauszeiger bleibt
   die der anderen Listen. Jede Angabe einzeilig – der Drawer zeigt alles. */
.umsatzblock { padding: 0.3rem 0.6rem 0.5rem; }
.umsatzliste th, .umsatzliste td { padding: 0.18rem 0.6rem; }
.umsatzliste td { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.umsatzliste td.zahl { font-variant-numeric: tabular-nums; }
.umsatzliste td .gedaempft { font-weight: 400; }
.umsatzliste tbody tr:nth-child(even) {
  background: color-mix(in srgb, var(--farbe-bereich-finanzen-hell) 45%, transparent); }
/* Sammlung 228: Der Text öffnet, die freie Fläche markiert – über Text die Hand. */
.umsatzliste tbody tr.dateiliste__zeile { cursor: default; }
.umsatz__text { cursor: pointer; }
.umsatz__text:hover { text-decoration: underline; }
.umsatzliste tbody tr.dateiliste__zeile:hover { background: var(--farbe-flaeche-hervor); }
.umsatzliste tbody tr.dateiliste__zeile--gewaehlt,
.umsatzliste tbody tr.dateiliste__zeile:focus { background: var(--farbe-bereich-finanzen-hell); }
.umsatz__zweck { color: var(--farbe-schrift-gedaempft); }
.umsatzliste__weiter { margin: 0.6rem 0 0; }
.umsatzliste__weiter .knopf { margin: 0 0 0 0.4rem; }

/* Der Umsatz im Drawer: der Betrag groß, darunter die Angaben. */
.umsatzbetrag { font-size: 1.6rem; font-weight: 700; margin: 0 0 0.6rem; }
.umsatzbetrag .marke { font-size: 0.85rem; font-weight: 400; vertical-align: middle; }

/* Die Akte: die Konten über der Liste – das gewählte hervorgehoben. */
.kontenkopf { margin-bottom: 0.4rem; }
.kontenkopf .zeile--gewaehlt td { background: var(--farbe-bereich-finanzen-hell); }

/* ---------- Umsatzliste und Belege (Sprint 10b, 0.2.84) ----------
   Entwurf `entwuerfe/bankkonten-10b.html` in sechster Fassung. */

/* Die Spalte „Status": offen ein roter Ring, erledigt ein grüner Haken
   (04.10.2026); die Büroklammer heißt „mit Beleg" – blau mit Fragezeichen:
   vorgeschlagen. Form und Farbe zusammen. */
.umsatzliste td.umsatzstatus { white-space: nowrap; overflow: visible; }
.belegstand { display: inline-block; width: 1.1rem; text-align: center; font-weight: 700; }
.belegstand--offen::before { content: ""; display: inline-block; width: 0.6rem; height: 0.6rem;
  border: 2px solid var(--farbe-status-offen); border-radius: 50%; vertical-align: -0.05rem; }
.belegstand--erledigt { color: var(--farbe-status-erledigt); }
.belegklammer { display: inline-block; margin-left: 0.15rem; font-size: 0.8rem; }
.belegklammer .icon { width: 0.95rem; height: 0.95rem; vertical-align: -0.15rem; }
.belegklammer--vorschlag { color: var(--farbe-status-hinweis); font-weight: 700; }
/* Neu eingelesen (10c, 0.2.95): ein blauer Punkt vor dem Status. */
.umsatzneu { color: var(--farbe-status-hinweis); font-size: 0.7rem; margin-right: 0.2rem; vertical-align: 0.1rem; }
/* Der Haken am Ende der offenen Zeile: „Erledigt ohne Beleg". */
.umsatzliste td.umsatztat { overflow: visible; text-align: right; padding-left: 0; padding-right: 0.3rem; }
.umsatztat .reihenknopf { font-weight: 700; padding: 0 0.3rem; border: 1px solid var(--farbe-rand-block);
  border-radius: 4px; background: var(--farbe-flaeche-block); }
.umsatztat .reihenknopf:hover { color: var(--farbe-status-erledigt); border-color: var(--farbe-rand-betont); }

/* **Markierte Zeilen kräftiger** als die gewählte von 10a – neben den
   Streifen der Liste hob sich die Markierung sonst kaum ab. */
.umsatzliste tbody tr.zeile--markiert,
.umsatzliste tbody tr.zeile--markiert:hover {
  background: color-mix(in srgb, var(--farbe-bereich-finanzen) 30%, var(--farbe-flaeche-block)); }
/* Die Zeile, über der ein Dokument beim Ziehen gerade hängt. */
.umsatzliste tbody tr.zeile--ziel td { background: var(--farbe-status-hinweis-hell); }
.umsatzliste tbody tr.zeile--ziel { outline: 2px dashed var(--farbe-status-hinweis); outline-offset: -2px; }

/* Über dem Filter: der Status – der meistbenutzte Filter –, der Fortschritt,
   die Werkzeuge. */
.statuszeile { display: flex; align-items: center; flex-wrap: wrap; gap: 0.5rem 1.2rem; margin: 0 0 0.6rem; }
.statuszeile .umschalter { margin: 0; padding: 0; }
.statuszeile .umschalter__stellung--offen { background: var(--farbe-bereich-finanzen-hell);
  border-color: var(--farbe-bereich-finanzen); color: var(--farbe-schrift); }
.statuszeile .umschalter__zahl { background: var(--farbe-bereich-finanzen-hell); color: var(--farbe-schrift); }
.statuszeile__rechts { margin-left: auto; display: flex; gap: 0.4rem; }
.statuszeile__rechts .knopf { margin: 0; }
.statuszeile__rechts .knopf .icon, .markierleiste .knopf .icon { width: 0.95rem; height: 0.95rem;
  vertical-align: -0.15rem; }
.knopf--gedrueckt { background: var(--farbe-bereich-finanzen-hell); border-color: var(--farbe-bereich-finanzen); }
.fortschritt { display: inline-flex; align-items: center; gap: 0.5rem; white-space: nowrap; }
.fortschritt__balken { display: inline-block; width: 9rem; height: 0.5rem; border-radius: 999px;
  background: var(--farbe-flaeche-hervor); border: 1px solid var(--farbe-rand-block); overflow: hidden; }
.fortschritt__balken span { display: block; height: 100%; background: var(--farbe-bereich-finanzen); }
.werkzeuge__rechts #alle_markieren { white-space: nowrap; }

/* Mehrere auf einmal: die Leiste über der Liste. Sie steht immer da und ist
   immer gleich hoch (Sammlung 216) – sonst rutscht die Liste beim ersten
   Markieren unter der Maus weg. Leer ist sie blass und trägt nur den Hinweis. */
.markierleiste { display: flex; align-items: center; gap: 1rem; margin: 0 0 0.5rem; padding: 0.4rem 0.8rem;
  min-height: 2.75rem; box-sizing: border-box;
  background: var(--farbe-bereich-finanzen-hell); border: 1px solid var(--farbe-bereich-finanzen);
  border-radius: 6px; }
.markierleiste--leer { background: transparent; border-color: var(--farbe-rand-block); }
.markierleiste--leer > :not(.markierleiste__hilfe),
.markierleiste:not(.markierleiste--leer) > .markierleiste__hilfe { display: none; }
.markierleiste__taten { display: flex; gap: 0.4rem; }
.markierleiste > strong, .markierleiste > a, .markierleiste__taten { flex: none; white-space: nowrap; }
.markierleiste__davon { font-weight: 400; }
/* Die Summe der markierten (Sammlung 252, 0.3.0). */
.markierleiste__summe { flex: none; white-space: nowrap; }
.markierleiste__summe span { font-weight: 700; }
.markierleiste__hilfe { min-width: 0; font-size: 0.9rem; white-space: nowrap; overflow: hidden;
  text-overflow: ellipsis; }
.markierleiste .knopf { margin: 0; }

/* „Erledigt ohne Beleg": das kleine Feld für den Vermerk – unter dem Haken
   der Zeile oder unter dem Knopf der Leiste. */
.ohnebeleg { position: absolute; z-index: 60; width: 23rem; padding: 0.7rem 0.9rem; text-align: left;
  background: var(--farbe-flaeche-block); border: 1px solid var(--farbe-rand-betont); border-radius: 6px;
  box-shadow: 0 6px 18px rgb(0 0 0 / 18%); }
.ohnebeleg label { display: block; font-weight: 600; }
.ohnebeleg label .gedaempft { font-weight: 400; }
.ohnebeleg input { width: 100%; box-sizing: border-box; margin: 0.2rem 0 0.4rem; }
.ohnebeleg__vorrat { margin: 0 0 0.6rem; font-size: 0.85rem; min-height: 1.2rem; }
.ohnebeleg__vorrat a { text-decoration: none; }
.ohnebeleg .knopfzeile { margin: 0; }
.ohnebeleg .knopfzeile .knopf { white-space: nowrap; }
.ohnebeleg .knopfzeile .gedaempft { font-size: 0.85rem; white-space: nowrap; }

/* Der Beleg am Umsatz – im Drawer und in der Belegansicht. */
.belegblock__meldung { margin: 0 0 0.5rem; }
.belegkarte { position: relative; margin-bottom: 0.5rem; }
.belegkarte p { margin: 0 0 0.35rem; }
/* Platz für die Knöpfe rechts oben – die Karte eines Vorschlags hat keine. */
.belegkarte:not(.eintrag--ohnetat) .belegkarte__kopf { padding-right: 7.5rem; }
.belegkarte__kopf a, .belegkarte__kopf strong { font-weight: 600; }
.belegkarte__kopf .icon, .vorschlagzelle .icon { width: 1rem; height: 1rem; vertical-align: -0.15rem; }
.belegkarte__gruende .marke { margin-right: 0.3rem; padding: 0 0.5rem; border-radius: 999px;
  background: var(--farbe-flaeche-block); border: 1px solid var(--farbe-rand-block); font-size: 0.8rem;
  white-space: nowrap; }
.belegkarte .knopfzeile { margin: 0.5rem 0 0; flex-wrap: wrap; }
.belegkarte .knopfzeile form { display: flex; gap: 0.5rem; margin: 0; }
.belegkarte .knopfzeile .knopf { margin: 0; }
.belegkarte__ordner { margin-left: auto !important; font-size: 0.8rem; }
.belegkarte__ordner button { color: var(--farbe-schrift-gedaempft); }
/* Sammlung 227: „Wort … künftig übergehen" steht gleich neben dem Ordner. */
.belegkarte__ordner + .belegkarte__wort { margin-left: 1rem !important; }
.belegkarte__taten { position: absolute; top: 0.4rem; right: 0.5rem; display: flex; gap: 0.2rem; }
.belegkarte__taten form { margin: 0; display: flex; }
.belegkarte__taten .tatknopf { background: var(--farbe-flaeche-block); cursor: pointer; }
.belegkarte__taten .tatknopf .icon { width: 0.95rem; height: 0.95rem; }
.belegkarte--gezeigt { box-shadow: inset 3px 0 0 var(--farbe-bereich-finanzen); }
.belegvorschau { margin-top: 0.6rem; }
.belegvorschau .betrachter__seiten { display: none; }
.ohnebelegzeile { display: flex; gap: 0.5rem; align-items: center; margin: 0.8rem 0 0; }
.ohnebelegzeile input { flex: 1; margin: 0; }
.ohnebelegzeile .knopf { margin: 0; }

/* Die Fenster: Seiten und Betragsabgleich, übertragen, gemischte Markierung. */
.belegdialog .abschnitt__titel { margin-top: 1.1rem; }
.belegdialog > p:first-child { margin-top: 0; }
.belegdialog .wahlblock { margin: 0.4rem 0 0.2rem; }
.belegdialog .wahlblock input[type="radio"] { width: auto; margin: 0.25rem 0 0; }
.belegdialog .tabelle input[type="checkbox"], .belegdialog thead input { width: auto; margin: 0; }
/* Nie höher als das Fenster – eine lange Liste rollt für sich. */
.dialog:has(.belegdialog) { max-height: calc(100vh - 3rem); overflow: auto; box-sizing: border-box; }
.belegdialog__rollen { max-height: 15.5rem; overflow: auto; margin: 0.2rem 0 0; }
.belegdialog__rollen[hidden] { display: none; }
.dialog:has(.belegdialog) .dialog__knoepfe [hidden] { display: none; }
.belegdialog__liste { margin: 0; table-layout: fixed; }
.belegdialog__liste thead th { position: sticky; top: 0; background: var(--farbe-flaeche-block); }
.belegdialog__liste td { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.belegdialog__liste th:first-child { width: 2.4rem; }
.belegdialog__liste td:first-child { text-overflow: clip; }
.belegdialog__liste th:nth-child(2) { width: 6.4rem; }
.belegdialog__liste th:nth-child(3) { width: 32%; }
.belegdialog__liste th.zahl { width: 6.8rem; }
.belegdialog__liste th:nth-child(6) { width: 8rem; }
.wahlblock .belegdialog__seiten { width: 6rem; margin: 0 0.2rem; padding: 0.1rem 0.4rem; }
.belegdialog__suche { width: 100%; box-sizing: border-box; margin: 0; }
.daumenreihe { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 0.7rem; margin: 0.5rem 0 0 1.6rem; }
.daumenblatt { display: inline-flex; flex-direction: column; align-items: center; gap: 0.2rem; padding: 0;
  font: inherit; font-size: 0.8rem; color: var(--farbe-schrift-gedaempft); background: none; border: none;
  cursor: pointer; }
.daumenblatt__seite { display: block; width: 3.6rem; height: 5.1rem; background:
  repeating-linear-gradient(#fff 0 0.45rem, #d8d8d8 0.45rem 0.5rem) content-box, #fff; padding: 0.5rem 0.4rem;
  box-sizing: border-box; border: 1px solid var(--farbe-rand-block); box-shadow: 0 1px 3px rgb(0 0 0 / 20%); }
.daumenblatt.ist-gewaehlt { color: var(--farbe-schrift); font-weight: 700; }
.daumenblatt.ist-gewaehlt .daumenblatt__seite { outline: 3px solid var(--farbe-bereich-finanzen);
  outline-offset: 1px; }
.tabelle.mischtabelle td { vertical-align: top; padding: 0.5rem 0.6rem; text-align: left; }
.tabelle.mischtabelle td.mischtabelle__zahl { width: 2.5rem; text-align: right; font-size: 1.1rem; }
.mischliste { margin: 0.3rem 0 0; padding-left: 1.6rem; }
.mischwahl { display: block; margin-top: 0.4rem; }
.mischwahl label { display: block; font-weight: 400; margin: 0.15rem 0; }
.mischwahl input { width: auto; margin: 0 0.4rem 0 0; }

/* Der Dokumentwähler: Volltext, die Fundstelle, das eigene Fenster – und
   allein neben der Umsatzliste. */
.waehler__suchzeile { display: flex; align-items: center; gap: 0.8rem; }
.waehler__suchzeile .haekchen { white-space: nowrap; }
.waehler__suchzeile .haekchen[hidden] { display: none; }
.waehler__schnipsel { margin-left: 1.9rem; font-size: 0.78rem; font-weight: 400;
  color: var(--farbe-schrift-gedaempft); white-space: normal; }
.waehler__schnipsel mark { background: #ffe66b; color: #222; }
.ansehknopf .icon { display: block; width: 1rem; height: 1rem; }
.sammelliste .ansehknopf { margin: 0 0.35rem; }
.waehler__vorhanden { border-style: solid; background: var(--farbe-flaeche-hervor); }
.waehler__vorhanden[hidden] { display: none; }
.waehler__vorhandenzeile { display: flex; align-items: center; gap: 0.5rem; }
.waehler__vorhandenwahl { display: flex; align-items: center; gap: 0.4rem; flex: 1 1 auto; min-width: 0; margin: 0;
  font-weight: 400; font-size: 0.84rem; }
.waehler__vorhandenwahl input { width: auto; margin: 0; }
.waehler__vorhandenwahl .icon { width: 0.9rem; height: 0.9rem; vertical-align: -0.1rem; }
.drawer--waehler.waehler--allein { right: 1.5rem; top: 16.5rem; max-width: calc(100% - 3rem); }
/* Beim Ziehen aus dem Wähler gibt es nichts anzuhängen – `hidden` allein
   verliert gegen `display: flex`. */
.drawer--waehler .knopfzeile[hidden] { display: none; }
.waehler__liste tr.ist-ziehbar.schon-da[draggable="true"] { cursor: grab; }

/* Die Belegansicht (E23e): links die Liste, rechts der Beleg – die Teilung
   lässt sich ziehen. */
.belegansicht--an { display: grid; grid-template-columns: minmax(0, var(--belegansicht-liste, 44%)) 0.5rem minmax(0, 1fr);
  align-items: start; }
.belegansicht__griff { align-self: stretch; cursor: col-resize; touch-action: none; background:
  linear-gradient(var(--farbe-rand-betont), var(--farbe-rand-betont)) center / 2px 3rem no-repeat; }
.belegansicht__griff[hidden], .belegansicht__beleg[hidden] { display: none; }
.belegansicht__beleg { margin: 0; padding: 0.7rem 0.9rem 0.9rem; position: sticky; top: 0;
  max-height: calc(100vh - 6rem); overflow: auto; }
.belegansicht__beleg .block { padding: 0; margin: 0.8rem 0 0; border: none; background: none; box-shadow: none; }

/* **Nur die Umsätze rollen** (Sammlung 232, 0.2.92: *„Im Moment scrollt der
   ganze Inhalt"*). Unter Bankkonten füllt die Seite das Fenster: Überschrift,
   Register, Kontokopf, Filter, Markierleiste und Spaltenköpfe stehen; links
   rollt die Kontenliste für sich, rechts nur der Block der Umsätze – in der
   Belegansicht auch der Beleg für sich. Ohne `padding-top` am Block, sonst
   scheint über den Köpfen eine halbe Zeile durch. */
.inhalt--umsaetze { display: flex; flex-direction: column; }
.inhalt--umsaetze > *, .inhalt--umsaetze .bankseite__rechts > * { flex: none; }
.inhalt--umsaetze > .bankseite { flex: 1 1 0; min-height: 22rem; align-items: stretch; }
.inhalt--umsaetze .kontenliste { position: static; max-height: none; min-height: 0; }
.inhalt--umsaetze .bankseite__rechts { display: flex; flex-direction: column; min-height: 0; }
.inhalt--umsaetze .bankseite__rechts > .belegansicht { flex: 1 1 0; min-height: 16rem; display: flex; }
.inhalt--umsaetze .bankseite__rechts > .belegansicht--an { display: grid; align-items: stretch; }
.inhalt--umsaetze .umsatzblock { flex: 1; min-width: 0; min-height: 0; margin: 0; overflow: auto; padding-top: 0; }
.inhalt--umsaetze .belegansicht__beleg { position: static; max-height: none; min-height: 0; }
.inhalt--umsaetze .umsatzliste thead th { position: sticky; top: 0; z-index: 1; background: var(--farbe-flaeche-block); }
.inhalt--umsaetze .umsatzliste tbody tr { scroll-margin-top: 2rem; }
/* In der Akte rollt die Seite: Kopf der Akte, Register und Konten rollen weg;
   Status, Filter und Markierleiste kleben oben, die Spaltenköpfe darunter –
   so tief, wie die Hülle hoch ist (`umsatzliste.js` misst sie). */
.inhalt--akte { padding-top: 0; }
.inhalt--akte > .klientenkopf { padding-top: 1.5rem; }
.inhalt--akte .umsatzkopf { position: sticky; top: 0; z-index: 2; background: var(--farbe-flaeche-seite);
  padding-top: 0.6rem; }
.inhalt--akte .umsatzkopf .markierleiste { margin-bottom: 0; }
.inhalt--akte .umsatzblock { padding-top: 0; }
.inhalt--akte .umsatzliste thead th { position: sticky; top: var(--umsatzkopf-hoehe, 0px); z-index: 1;
  background: var(--farbe-flaeche-block); }
.inhalt--akte .umsatzliste tbody tr { scroll-margin-top: calc(var(--umsatzkopf-hoehe, 0px) + 2rem); }
.inhalt--akte .belegansicht__beleg { top: var(--umsatzkopf-hoehe, 0px);
  max-height: calc(100vh - 6rem - var(--umsatzkopf-hoehe, 0px)); }

/* **Kontostände und Summen** (Sammlung 235): der Stand zu Beginn und am Ende
   des Zeitraums fett und getönt, darunter Eingänge, Ausgänge und die Summe.
   Der Text läuft über die leeren Zellen daneben. */
.umsatzliste td.umsatzrand__text { overflow: visible; }
.umsatzliste tr.umsatzrand--stand td { font-weight: 700; background: var(--farbe-flaeche-hervor); }
.umsatzliste tr.umsatzrand--summe td { border-bottom: none; }
.umsatzliste tr.umsatzrand--summe td.umsatzrand__text { color: var(--farbe-schrift-gedaempft); }
.umsatzliste tr.umsatzrand--ende td { font-weight: 700; border-top: 1px solid var(--farbe-rand-betont); }
.umsatz__kontostand { color: var(--farbe-schrift); }
.belegansicht__kopf { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; }
.belegansicht__betrag { margin-left: 0.6rem; font-weight: 700; }
.belegansicht__leer { margin: 2rem 1rem; }
/* Neben dem Beleg zeigt die Liste, was man zum Erkennen braucht: Status,
   Buchungstag, Gegenpartei, Betrag – die übrigen Spalten ruhen, und die
   gezogenen Breiten auch. */
.belegansicht--an .umsatzliste__weiter { white-space: normal; }
.belegansicht--an .umsatzliste [data-spalte]:not([data-spalte="status"], [data-spalte="tag"], [data-spalte="gegen"], [data-spalte="betrag"], [data-spalte="kontostand"]) {
  display: none; }
.belegansicht--an .umsatzliste col[data-spalte="tag"] { width: 6.4rem !important; }
.belegansicht--an .umsatzliste col[data-spalte="gegen"] { width: auto !important; }
.belegansicht--an .umsatzliste col[data-spalte="betrag"] { width: 6.6rem !important; }
.belegansicht--an .umsatzliste col[data-spalte="kontostand"] { width: 7.5rem !important; }
/* Die Summen braucht die Belegansicht nicht – in der schmalen Liste liefe
   ihr Text über den Betrag (Sammlung 235). */
.belegansicht--an .umsatzliste tr.umsatzrand--summe,
.belegansicht--an .umsatzliste tr.umsatzrand--ende { display: none; }
.belegansicht--an .spaltengriff { display: none; }

/* „Mit Vorschlag": die offenen Umsätze mit ihrem Beleg und dem Grund. */
.vorschlagkopf { display: flex; justify-content: space-between; align-items: center; gap: 1rem;
  padding: 0.3rem 0.4rem 0.5rem; }
.vorschlagkopf .knopf { margin: 0; white-space: nowrap; }
/* „nur diese zeigen" (Sammlung 266): nur die Umsätze mit früherem Beleg. */
.vorschlagkopf__frueher { display: flex; align-items: center; gap: 0.8rem; white-space: nowrap; }
.vorschlagkopf__frueher .haekchen { margin: 0; font-weight: 400; }
.umsatzzeilen--nurfrueher tr:not([data-frueher]) { display: none; }
.vorschlagliste td { padding-top: 0.25rem; padding-bottom: 0.25rem; }
.umsatzliste td.vorschlagzelle { white-space: normal; }
.vorschlagzelle .belegkarte__gruende { display: block; margin: 0.1rem 0 0 1.3rem; }
.umsatzliste td.vorschlagtaten { white-space: nowrap; text-align: right; overflow: visible; }
.vorschlagtaten .knopf { margin: 0; }
/* Der Importbericht nennt die Vorschläge – leise. */
.belegvorschlagzeile { display: flex; align-items: center; gap: 0.6rem; margin: 0.8rem 0 0; padding: 0.5rem 0.8rem;
  background: var(--farbe-status-hinweis-hell); border-radius: 6px; }
.belegvorschlagzeile span { margin-right: auto; }
.belegvorschlagzeile .knopf { margin: 0; }
.belegvorschlagzeile form { margin: 0; }

/* Einstellungen ▸ Ordnervorlagen ▸ „Belegsuche": die Ordner, in denen nicht
   gesucht wird. */
.ausschlussliste { list-style: none; margin: 0.2rem 0 0.5rem; padding: 0; }
.ausschlussliste li { display: flex; align-items: center; gap: 0.5rem; padding: 0.2rem 0.5rem;
  margin-bottom: 0.2rem; background: var(--farbe-flaeche-block); border: 1px solid var(--farbe-rand-block);
  border-radius: 5px; }
.ausschlussliste form { margin: 0 0 0 auto; }
.ausschlusszeile { display: flex; gap: 0.5rem; align-items: center; }
.ausschlusszeile input { flex: 1; margin: 0; }
.ausschlusszeile .knopf { margin: 0; }

/* Der Eingangskorb: „Nach Belegen fragen" neben der Reihenfolge. */
.werkzeuge__links .belegfrage { margin: 0 0 0 1rem; white-space: nowrap; }

/* Der Importbericht. Was auf ein Konto wartet, fällt auf. */
.importsumme { margin: 0 0 0.8rem; }
.importbericht td { vertical-align: top; }
.importbericht--offen td { background: var(--farbe-status-warnung-hell); }

/* Nicht zugeordnet: die drei Wege im Drawer – je Weg ein Punkt, darunter
   eingerückt seine Felder. */
.wahlblock { display: flex; gap: 0.6rem; align-items: flex-start; margin: 0.9rem 0 0.3rem; font-weight: 400; }
.wahlblock input { width: auto; margin: 0.25rem 0 0; }
.wahlblock__felder { margin-left: 1.6rem; }

/* Das Konto im Drawer: der Vorschlag für den Startbetrag aus der Datei. */
.startvorschlag { border-left: 3px solid var(--farbe-status-hinweis); padding: 0.2rem 0 0.2rem 0.8rem;
  margin-top: 0.8rem; }

/* Zu prüfen. */
.pruefen__einleitung { max-width: 60rem; margin: 0 0 1rem; }
.pruefall .knopfzeile { margin-top: 0.6rem; }


/* ── Das Bild des Klienten (Sammlung 155, 0.2.88) ──────────────────────
   Rund, überall dieselbe Form, in drei Größen; das Bild wird mittig
   beschnitten, nie verzerrt. **Ohne Bild der Platzhalter** – eine Figur im
   selben Kreis (05.10.2026: „der Platzhalter wird immer gezeigt"). */
.klientenbild { display: inline-flex; align-items: center; justify-content: center; flex: none; overflow: hidden;
  width: 1.4rem; height: 1.4rem; margin-right: 0.3rem; border-radius: 50%; vertical-align: middle;
  background: var(--farbe-flaeche-hervor); border: 1px solid var(--farbe-rand-block);
  color: var(--farbe-schrift-gedaempft); }
.klientenbild img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center 20%; }
.klientenbild .icon { width: 62%; height: 62%; }
.klientenbild--liste { width: 1.75rem; height: 1.75rem; margin-right: 0.55rem; }
.klientenbild--gross { width: 5.5rem; height: 5.5rem; margin-right: 0; }

/* Im Kopf der Akte: links neben Name und Kerndaten. Als Raster, damit jede
   Registerseite nur eine Zeile dafür braucht. */
.klientenkopf { display: grid; grid-template-columns: auto 1fr; column-gap: 1.1rem; align-items: center; }
.klientenkopf > * { grid-column: 2; }
.klientenkopf > .klientenkopf__bild { grid-column: 1; grid-row: 1 / span 2; }
.klientenkopf__name { align-self: end; }
.klientenkopf__kern { align-self: start; }
.klientenkopf__bild { padding: 0; border: none; background: none; border-radius: 50%; line-height: 0;
  cursor: pointer; }
.klientenkopf__bild:disabled { cursor: default; }
.klientenkopf__bild:not(:disabled):hover .klientenbild,
.klientenkopf__bild:focus-visible .klientenbild { border-color: var(--farbe-rand-betont);
  box-shadow: 0 0 0 3px var(--farbe-flaeche-hervor); }

/* „Bild ansehen": so groß, wie das Fenster es zulässt. */
.klientenbild__ganz { display: block; max-width: 100%; max-height: 65vh; margin: 0 auto; border-radius: 6px; }

/* Im Wähler: die kleine Vorschau statt des Dokument-Zeichens. */
.waehler__bildchen { width: 2.3rem; height: 2.3rem; margin-right: 0.5rem; object-fit: cover; border-radius: 4px;
  border: 1px solid var(--farbe-rand-block); vertical-align: middle; }

/* Auf dem Stammdatenblatt: rechts neben dem Namen – der Kopf umschließt es,
   damit seine Linie darunter läuft. */
.blatt__kopf { display: flow-root; }
.blatt__bild { float: right; width: 28mm; height: 28mm; margin: 0 0 2mm 6mm; object-fit: cover;
  object-position: center 20%; border-radius: 50%; }

/* ═══════════════════════════════════ E-Mail (Sprint 9a1, 0.3.3)
   Entwurf `entwuerfe/email-9a.html`, Bild 1, 1b, 5, 6. Drei Spalten: die
   Postfächer mit ihren Ordnern, die Liste, die Vorschau.

   **Die Seite rollt nicht** (Sammlung 259, 0.3.4, Entwurf
   `entwuerfe/email-liste-259-bilder/`): Die Spalten sind so hoch wie das
   Fenster und rollen jede für sich – links die Ordner („Abrufen" bleibt
   oben), in der Mitte nur die Zeilen (Kopf, Filter, Markierleiste und
   Spaltenköpfe stehen), rechts der Inhalt der E-Mail in seinem Rahmen. */
.inhalt--email { display: flex; flex-direction: column; overflow: hidden; }
.inhalt--email > * { flex: none; }
.inhalt--email > .postfachseite { flex: 1 1 0; min-height: 0; }
.postfachseite { display: grid; grid-template-columns: 15.5rem minmax(0, 1fr) minmax(0, 44%);
  grid-template-rows: minmax(0, 1fr); gap: 1rem; }
.mailordner { background: var(--farbe-flaeche-block); border: 1px solid var(--farbe-rand-block); border-radius: 6px;
  padding: 0 0 0.3rem; font-size: 0.92rem; min-height: 0; overflow: auto; }
.mailordner__abruf { display: flex; align-items: center; gap: 0.6rem; padding: 0.6rem 0.8rem 0.5rem;
  border-bottom: 1px solid var(--farbe-rand-block); position: sticky; top: 0; z-index: 1;
  background: var(--farbe-flaeche-block); }
.mailordner__abruf .knopf { margin: 0; }
.mailordner__postfach { border-bottom: 1px solid var(--farbe-rand-block); }
.mailordner__postfach summary { padding: 0.45rem 0.8rem; cursor: pointer; }
.mailordner__postfach summary > span { display: block; font-size: 0.8rem; }
.mailordner__ordner { display: flex; align-items: center; gap: 0.45rem; padding: 0.25rem 0.8rem 0.25rem 1.4rem;
  color: inherit; text-decoration: none; }
.mailordner__ordner:hover { background: var(--farbe-flaeche-hervor); }
.mailordner__ordner--gewaehlt { background: var(--farbe-bereich-email-hell);
  box-shadow: inset 3px 0 0 var(--farbe-bereich-email); font-weight: 700; }
.mailordner__zahl { margin-left: auto; font-weight: 700; color: var(--farbe-bereich-email); }
.mailordner__leer { margin: 0.3rem 0.8rem 0.6rem; font-size: 0.85rem; }
/* Ein Ordner, über dem gezogene E-Mails stehen (Sammlung 263). */
.mailordner__ordner--ziel { background: var(--farbe-bereich-email-hell);
  outline: 2px dashed var(--farbe-bereich-email); outline-offset: -2px; }
.mailliste { min-width: 0; min-height: 0; display: flex; flex-direction: column; }
.mailliste > * { flex: none; }
.mailliste > .mailliste__rollen { flex: 1 1 0; min-height: 0; overflow: auto; }
.mailliste__kopf { display: flex; align-items: center; gap: 1rem; margin: 0 0 0.5rem; }
.mailliste__titel { margin: 0; font-size: 1.05rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mailliste__suche { flex: 1; margin: 0; }
.mailliste__suche input { width: 100%; }
.mailliste__leiste { display: flex; align-items: center; gap: 0.8rem; margin: 0 0 0.5rem; }
.mailliste__stellungen { display: flex; gap: 0.4rem; margin: 0; flex-wrap: wrap; }
.mailliste__textanfang { margin: 0 0 0 auto; white-space: nowrap; font-size: 0.9rem; }
.mailliste__blaettern { display: flex; gap: 1rem; align-items: center; justify-content: center;
  margin: 0.5rem 0 0; }
.mailtabelle { table-layout: fixed; margin: 0; }
.mailtabelle thead th { position: sticky; top: 0; z-index: 1; background: var(--farbe-flaeche-seite);
  box-shadow: inset 0 -1px 0 var(--farbe-rand-block); }
/* Dichter (Sammlung 264): 27 statt 34 Pixel je Zeile. */
.mailtabelle td { vertical-align: top; padding-top: 0.2rem; padding-bottom: 0.2rem; }
.mailtabelle tbody tr { scroll-margin-top: 2.2rem; cursor: pointer; }
/* Markiert ist getönt; der Strich links sagt, welche in der Vorschau steht.
   Die Befehle über der Liste gelten den markierten (Sammlung 260, 265) – ihr
   Rahmen ist schlicht, ohne Tönung, und ohne Markierung sind die Knöpfe
   ausgegraut (*„nur den einfachen Rahmen mit gleichem Hintergrund"*). */
.markierleiste--email { background: transparent; border-color: var(--farbe-rand-block); }
.markierleiste--email .knopf:disabled { opacity: 0.45; cursor: not-allowed; }
.mailtabelle tbody tr.dateiliste__zeile--gewaehlt { background: var(--farbe-bereich-email-hell); }
.mailtabelle tbody tr.mailzeile--offen td:first-child { box-shadow: inset 4px 0 0 var(--farbe-bereich-email); }
.mailzeile__zeichen { white-space: nowrap; }
.mailzeile__zeichen .icon { width: 0.95rem; height: 0.95rem; vertical-align: -0.15rem; }
.mailzeile__punkt { color: var(--farbe-bereich-email); font-size: 0.75rem; margin-right: 0.3rem; }
.mailzeile--ungelesen .mailzeile__von, .mailzeile--ungelesen .mailzeile__betreff { font-weight: 700; }
.mailzeile__von, .mailzeile__betreff { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mailzeile__betreff { color: inherit; text-decoration: none; }
.mailzeile__anfang { display: block; font-size: 0.82rem; color: var(--farbe-schrift-gedaempft); overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap; }
.mailzeile__datum { font-size: 0.85rem; white-space: nowrap; }
.mailvorschau { display: flex; flex-direction: column; min-height: 0; overflow: auto;
  background: var(--farbe-flaeche-block); border: 1px solid var(--farbe-rand-block);
  border-radius: 6px; padding: 0.7rem 1rem 1rem; min-width: 0; }
.mailvorschau > * { flex: none; }
.mailvorschau__leer { margin: auto; }
.mailvorschau__taten { display: flex; flex-wrap: wrap; gap: 0.35rem; align-items: center; margin: 0 0 0.7rem; }
.mailvorschau__taten .knopf { margin: 0; }
/* Was erst mit 9b kommt, steht abgeblendet da. */
.mailvorschau__taten .knopf:disabled { opacity: 0.45; cursor: not-allowed; }
.mailvorschau__betreff { margin: 0.2rem 0 0.5rem; font-size: 1.2rem; }
.mailvorschau__bilder { margin: 0.6rem 0; padding: 0.35rem 0.6rem; font-size: 0.85rem;
  background: var(--farbe-status-hinweis-hell); border-radius: 4px; }
.mailvorschau__rahmen { flex: 1 1 auto; width: 100%; min-height: 18rem; margin-top: 0.6rem; background: #fff;
  border: 1px solid var(--farbe-rand-block); }
.mailvorschau__anhaenge { display: flex; flex-wrap: wrap; gap: 0.4rem; align-items: center; margin-top: 0.7rem; }
/* In der Vorschau: wo die Nachricht in der Akte liegt (Sprint 9a2, Bild 3),
   und unter „Von" der Kontakt. */
.mailvorschau__akte { margin: 0 0 0.6rem; padding: 0.45rem 0.7rem; font-size: 0.9rem;
  background: var(--farbe-status-hinweis-hell); border-left: 4px solid var(--farbe-status-hinweis);
  border-radius: 3px; }
.mailvorschau__akte .icon { width: 1rem; height: 1rem; vertical-align: -0.15rem; }
.mailvorschau__kontakt { display: block; font-size: 0.82rem; font-weight: 400;
  color: var(--farbe-schrift-gedaempft); }
/* „In die Akte legen" im Drawer (Sprint 9a2, Bild 2). Die Ordnerwahl ist die
   vom Erzeugen eines Schreibens – hier mit Auswahlknöpfen, ohne Skript. */
.mailakte .eintrag { margin-bottom: 0.8rem; }
.mailakte__beschriftung { margin: 0.7rem 0 0.25rem; font-size: 0.85rem; font-weight: 600; }
/* Niedriger als beim Erzeugen (wie im Entwurf, Bild 2): Darunter steht noch,
   was hineinkommt - der vorgeschlagene Ordner rollt in den Blick. */
.mailakte__ordner { margin-bottom: 0; }
.mailakte label.ordnerwahl__eintrag { margin-top: 0; font-size: inherit; font-weight: 400; }
.mailakte .haekchen { margin-top: 0; font-weight: 400; }
.ordnerwahl__wahl { position: absolute; opacity: 0; pointer-events: none; }
.mailakte label.ordnerwahl__eintrag:has(.ordnerwahl__wahl:checked) { background: var(--farbe-flaeche-hervor);
  font-weight: 600; }
.ordnerwahl__eintrag:has(.ordnerwahl__wahl:focus-visible) { outline: 2px solid var(--farbe-bereich-email);
  outline-offset: -2px; }
.mailakte__vorgeschlagen { font-weight: 400; }
.mailakte__titel { margin: 1.2rem 0 0.4rem; font-size: 1rem; }
.mailakte__stueck { padding: 0.5rem 0; border-top: 1px solid var(--farbe-rand-block); }
.mailakte__stueck .haekchen { white-space: normal; }
.mailakte__stueck .icon { width: 1rem; height: 1rem; flex: none; }
.mailakte__stueck input[type="text"] { display: block; width: calc(100% - 1.6rem); margin: 0.35rem 0 0 1.6rem; }
.mailakte__danach { display: flex; align-items: center; gap: 0.5rem; margin: 0.35rem 0; }
.mailakte__danach input[type="text"] { flex: 1 1 auto; width: auto; min-width: 0; }
.mailakte__danach input[type="date"] { flex: none; width: 10.5rem; }
.mailakte .knopfzeile { margin-top: 1.1rem; }
/* In der Ablage: der Anhang eingerückt unter seiner E-Mail; im Drawer des
   E-Mail-PDFs der Block „E-Mail" (Sprint 9a2, Bild 7). */
.dateiliste td.dateiliste__anhang { padding-left: 1.7rem; }
.dateiliste__haken { margin-right: 0.15rem; color: var(--farbe-schrift-gedaempft); }
.mailblock__anhang { display: block; }
.mailblock__zusatz { display: block; font-size: 0.85rem; font-weight: 400; color: var(--farbe-schrift-gedaempft); }
.block--email .werte .icon { width: 1rem; height: 1rem; vertical-align: -0.15rem; }
/* „Verschieben …" zeigt die Ordner im Kontextmenü (Sammlung 261) – bei vielen
   Ordnern rollt es, statt über den Rand zu ragen. */
.kontextmenue { max-height: calc(100vh - 16px); overflow-y: auto; }
.mailanhang { display: inline-flex; align-items: center; gap: 0.35rem; padding: 0.3rem 0.6rem;
  border: 1px solid var(--farbe-rand-block); border-radius: 4px; background: var(--farbe-flaeche-seite);
  color: inherit; text-decoration: none; font-size: 0.88rem; }

/* ── E-Mail schreiben (Sprint 9b1, 0.3.7, Entwurf `entwuerfe/email-9b1-bilder/`) ──
   Links „Neue E-Mail" neben „Abrufen" und darunter „Entwürfe in MDesk";
   **geschrieben wird rechts, anstelle der Vorschau** (*„2. b"*): oben die
   Befehle, dann Von, An, Betreff und Klient, darunter der Textteil des Briefs
   – so hoch, wie Platz ist, der Text rollt in sich –, unten die Anhänge. */
.mailordner__abruf form { margin: 0; }
.mailordner__mdesk { display: flex; align-items: center; gap: 0.45rem; padding: 0.4rem 0.8rem;
  border-bottom: 1px solid var(--farbe-rand-block); color: inherit; text-decoration: none; font-weight: 600; }
.mailordner__mdesk:hover { background: var(--farbe-flaeche-hervor); }
.mailordner__mdesk small { font-weight: 400; color: var(--farbe-schrift-gedaempft); }
.mailvorschau__taten form { display: flex; margin: 0; }
.mailvorschau > .mailschreiben { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
.mailschreiben > * { flex: none; }
/* Die Befehle bleiben in einer Zeile – wird es eng, gibt der Stand nach. */
.mailschreiben > .mailvorschau__taten { flex-wrap: nowrap; }
.mailschreiben > .mailvorschau__taten > * { flex: none; }
.mailschreiben > .mailvorschau__taten > .mailschreiben__stand { flex: 0 1 auto; min-width: 0; margin-left: auto;
  font-size: 0.85rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Meldet der Editor etwas („Gespeichert.", ein Fehler), steht es anstelle des Stands. */
.mailschreiben__stand [data-gespeichert]:not(:empty) + .mailschreiben__ruhe { display: none; }
.mailkopf { display: grid; grid-template-columns: 4.6rem minmax(0, 1fr); gap: 0.3rem 0.6rem; align-items: center;
  margin: 0 0 0.6rem; }
.mailkopf > label { margin: 0; font-size: 0.85rem; font-weight: 600; }
.mailkopf > input, .mailkopf > select { width: 100%; margin: 0; }
.mailkopf > [hidden] { display: none; }
/* Die Zeilen „Akte" und „Danach" (Sprint 9b2): Häkchen, Ordner, To-do. */
.mailkopf__akte { display: flex; align-items: center; gap: 0.7rem; min-width: 0; }
.mailkopf__akte .haekchen { margin: 0; font-weight: 400; white-space: nowrap; }
.mailkopf__akte select, .mailkopf__akte input[type="text"] { flex: 1 1 auto; width: auto; min-width: 0; margin: 0; }
.mailkopf__akte input[type="date"] { flex: none; width: 9.5rem; margin: 0; }
.mailkopf__akte[hidden] { display: none; }
/* Die Empfänger: Marken und dahinter das Feld zum Tippen, in einem Rahmen. */
.mailkopf__an { position: relative; display: flex; flex-wrap: wrap; gap: 0.3rem; align-items: center;
  min-height: 2.1rem; padding: 0.2rem 0.4rem; border: 1px solid var(--farbe-rand-betont); border-radius: 3px;
  background: var(--farbe-flaeche-block); cursor: text; }
.mailkopf__an:focus-within { outline: 2px solid var(--farbe-knopf-haupt); outline-offset: -1px; }
.mailkopf__an input { flex: 1; width: auto; min-width: 4rem; margin: 0; padding: 0.1rem; border: 0; outline: 0;
  background: none; }
.mailkopf__an input.eingabe--fehler { color: var(--farbe-status-offen); }
.mailkopf__mehr { margin-left: auto; font-size: 0.85rem; white-space: nowrap; }
.adresse { display: inline-flex; align-items: center; gap: 0.3rem; max-width: 100%; padding: 0.1rem 0.2rem 0.1rem 0.5rem;
  border: 1px solid var(--farbe-bereich-email); border-radius: 999px; background: var(--farbe-bereich-email-hell);
  font-size: 0.88rem; white-space: nowrap; cursor: default; }
.adresse b { font-weight: 600; }
.adresse__weg, .mailanhang__weg { padding: 0 0.25rem; border: 0; background: none; font: inherit; line-height: 1;
  color: var(--farbe-schrift-gedaempft); cursor: pointer; }
.adresse__weg:hover, .mailanhang__weg:hover { color: var(--farbe-schrift); }
/* Die Vorschläge unter dem Feld (Bild 3): die Beziehungen des Klienten zuerst. */
.vorschlaege { position: absolute; left: 0; top: calc(100% + 2px); z-index: 6; width: 100%; max-height: 18rem;
  overflow-y: auto; padding: 0.25rem; background: var(--farbe-flaeche-block);
  border: 1px solid var(--farbe-rand-betont); border-radius: 6px; box-shadow: 0 4px 12px rgb(0 0 0 / 18%);
  cursor: default; }
.vorschlaege__gruppe { padding: 0.25rem 0.6rem 0.05rem; font-size: 0.78rem; color: var(--farbe-schrift-gedaempft); }
.vorschlaege__eintrag { padding: 0.3rem 0.6rem; border-radius: 4px; cursor: pointer; }
.vorschlaege__eintrag--an, .vorschlaege__eintrag:hover { background: var(--farbe-flaeche-hervor); }
.vorschlaege__eintrag small { display: block; color: var(--farbe-schrift-gedaempft); }
/* Der Textteil des Briefs. In Arial, wie die E-Mail hinausgeht und wie die
   Vorschau sie zeigt. Ausrichten braucht eine E-Mail nicht – die Gruppe
   bleibt weg (Bild 1: Fett, Kursiv, Unterstrichen, Listen). */
.mailschreiben .schreibseite { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column;
  border-radius: 4px; }
.mailschreiben .schreibseite > * { flex: none; }
.mailschreiben .schreibfeld { flex: 1 1 auto; height: auto; min-height: 10rem; background: #fff; color: #222; }
.mailschreiben .schreibfeld, .signaturseite .schreibfeld { font: 15px/1.5 Arial, Helvetica, sans-serif; }
.mailschreiben .schreibleiste { padding: 0.35rem 0.5rem; }
.mailschreiben .knopfgruppe:has([data-befehl="justifyLeft"]),
.signaturseite .knopfgruppe:has([data-befehl="justifyLeft"]) { display: none; }
.mailschreiben__anhaenge { display: flex; flex-wrap: wrap; gap: 0.4rem; align-items: center; margin-top: 0.6rem; }
.mailschreiben__anhaenge--laedt { opacity: 0.55; }
.mailschreiben__warnung { font-size: 0.85rem; padding: 0.2rem 0.5rem; border-radius: 3px;
  background: var(--farbe-status-warnung-hell); }
.mailanhang a { color: inherit; }
/* Eine Datei schwebt über der E-Mail: loslassen hängt sie an. */
.mailschreiben--ziel { outline: 2px dashed var(--farbe-bereich-email); outline-offset: 4px; }
/* Über der Vorschau: an welchem Entwurf gerade geschrieben wird (Bild 6). */
.mailvorschau__entwurf { display: flex; align-items: center; gap: 0.5rem; margin: 0 0 0.6rem;
  padding: 0.35rem 0.6rem; border: 1px solid var(--farbe-rand-block); border-radius: 4px; font-size: 0.9rem; }
.mailvorschau__entwurf .icon { width: 1rem; height: 1rem; flex: none; }
.mailvorschau__entwurf > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mailvorschau__entwurf .knopf { margin: 0 0 0 auto; flex: none; }
/* Das Schreiben im eigenen Fenster (Nachtrag 14.4): so hoch wie das Fenster,
   der Text rollt in sich. */
.mailfenster { height: calc(100vh - 1.6rem); display: flex; flex-direction: column; }
body.eigenesfenster:has(.mailfenster) { background: var(--farbe-flaeche-block); }
.mailfenster > * { flex: none; }
.mailfenster > .mailschreiben { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
.mailfenster__zu { margin: 3rem auto; text-align: center; }
/* Meine Signaturen (Bild 5) – eine eigene Seite, derselbe Textteil. */
.signaturseite { max-width: 52rem; }
.signaturseite .umschalter { margin: 0.8rem 0; }
.signaturseite .schreibfeld { height: 14rem; background: #fff; color: #222; }
.signaturseite .knopfzeile { margin-top: 0.9rem; align-items: center; }

/* Einstellungen ▸ E-Mail (Bild 5): die Postfächer über die ganze Breite,
   darunter die Freigabe. */
.einstellung-email { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 1rem; columns: auto; }
.einstellung-email .block:first-child { grid-column: 1 / -1; }
.einstellung-email .abschnitt__titel { margin-top: 1.4rem; }
.einstellung-email form.inline { display: inline; }
.feld--unten { align-self: end; }

/* Die Anmeldung mit Code (Bild 6). */
.anmeldeschritte { margin: 0.4rem 0 0.8rem; padding-left: 1.3rem; line-height: 1.5; }
.anmeldeschritte li { margin: 0 0 0.7rem; }
.anmeldecode { display: flex; align-items: center; gap: 0.8rem; margin: 0.4rem 0 0; }
.anmeldecode span { font: 700 1.6rem/1 Consolas, monospace; letter-spacing: 0.12em; padding: 0.4rem 0.8rem;
  border: 1px dashed var(--farbe-rand-block); border-radius: 6px; background: var(--farbe-flaeche-seite); }
.anmeldewarten { margin: 0.4rem 0; font-size: 0.9rem; }
.anmeldewarten::before { content: "● "; color: var(--farbe-bereich-email); }

/* Sammlung 257 (0.3.3): das „i" hinter dem Namen in der Klientenliste –
   gedämpft, beim Darüberfahren kräftig. */
.infozeichen { display: inline-flex; vertical-align: -0.15rem; margin-left: 0.4rem;
  color: var(--farbe-schrift-gedaempft); }
.infozeichen .icon { width: 1.05rem; height: 1.05rem; }
.infozeichen:hover, .infozeichen:focus-visible { color: var(--farbe-schrift); }

/* Am Menüpunkt „E-Mail": die ungelesenen in den Posteingängen (Sprint 9b2). */
.seitenleiste__zahl { margin-left: auto; padding: 0 0.45rem; border-radius: 999px; background: var(--farbe-bereich-email);
  color: #fff; font-size: 0.8rem; font-weight: 700; line-height: 1.5; }
/* Am Schreiben: wann es per E-Mail hinausging. */
.versandvermerk { display: block; max-width: 11rem; }

/* Im Dokument suchen (Sammlung 268, 0.3.11): das Feld in der Leiste des
   Betrachters, die Treffer hinterlegt – der aktuelle kräftiger. */
.betrachter__suche { display: flex; align-items: center; gap: 0.25rem; }
.betrachter__suche input { width: 12rem; margin: 0; padding: 0.2rem 0.45rem; font-size: 0.9rem; }
.trefferschicht { position: absolute; inset: 0; pointer-events: none; }
.treffer { position: absolute; border-radius: 2px; background: rgb(255 221 0 / 45%); }
.treffer--aktuell { background: rgb(255 150 0 / 55%); outline: 2px solid var(--farbe-bereich-email); }
/* Eine E-Mail im Drawer auf dem Dashboard (Sammlung 269) – nur zum Lesen. */
.mailnachricht .mailvorschau__taten form { display: flex; margin: 0; }
.mailnachricht__rahmen { display: block; width: 100%; height: 55vh; min-height: 20rem; }
/* Ein IMAP-Postfach verbinden (Sprint 9c1, 0.3.12): Server und Port in einer Zeile. */
.feldpaar { display: flex; align-items: center; gap: 0.5rem; }
.feldpaar input[name$="_host"] { flex: 1; min-width: 0; }
.feldpaar input[name$="_port"] { width: 5rem; flex: none; }
/* „Neue E-Mail" an einem IMAP-Postfach: abgeblendet wie die Knöpfe über der Vorschau. */
.mailordner__abruf .knopf:disabled { opacity: 0.45; cursor: not-allowed; }
/* **Die Zeile hält ihr unsichtbares Auswahlfeld** (Sammlung 274, 0.3.13). Ohne das hingen die Felder nicht an
   ihrer Zeile: Sie rollten nicht mit der Liste, standen bei vielen Ordnern weit unter dem Kasten und machten die
   Seite unsichtbar länger – ein Klick auf einen Ordner weit unten rollte das Fenster dorthin, Seite und Drawer
   waren weg. */
.ordnerwahl__eintrag { position: relative; }
/* Die Ordnerwahl als Baum (Sammlung 273, 0.3.13, `ordnerwahl.js`): höher (rund vierzehn Zeilen, oben im Kasten),
   zugeklappte Ordner weg, der Pfeil vor einem Ordner mit Unterordnern. */
.ordnerwahl__eintrag[hidden] { display: none; }
.ordnerwahl__auf { flex: none; width: 1.1rem; height: 1.3rem; padding: 0; border: 0; background: none;
  color: inherit; line-height: 1; cursor: pointer; }
.ordnerwahl__auf::before { content: ""; display: inline-block; border-style: solid; border-color: transparent;
  border-width: 0.3rem 0 0.3rem 0.5rem; border-left-color: currentColor; }
.ordnerwahl__auf[aria-expanded="true"]::before { transform: rotate(90deg); }
.ordnerwahl__auf--leer { cursor: inherit; }
.ordnerwahl__auf--leer::before { border: 0; }
/* Die Spalte „Eingang" flatterte links (Sammlung 275, 0.3.13, *„6. C"*): rechtsbündig wie bisher, aber alle
   Ziffern gleich breit – auch in „Entwürfe in MDesk". */
.mailzeile__datum { font-variant-numeric: tabular-nums; }

/* ── 0.3.15: Kopfzeile, Schnellstart, Block „Klienten" ───────────────── */

/* Der Name führt zum Dashboard (Sammlung 279) – im Aussehen wie bisher. */
a.kopf__name,
a.kopf__name:hover { color: inherit; text-decoration: none; }
/* Zahnrad und Abmelden: nur das Zeichen, das Wort steht beim Darüberfahren
   (Sammlung 280) – „Einstellungen" heißt damit nur noch der Menüpunkt links. */
.kopf .kopf__knopf--zeichen { display: flex; padding: 0.22rem 0.4rem; }
.kopf__knopf--zeichen .icon { width: 1.15rem; height: 1.15rem; }
.kopf > .kopfmenue__anker,
.kopf > form { align-self: center; }
/* Die Auswahlfelder zur E-Mail standen ohne Einzug am linken Rand des Menüs. */
.kopfmenue__filter > select { margin: 0.2rem 0.9rem; }

/* Der Schnellstart (Sammlung 278, Entwurf `entwuerfe/schnellstart-278-bilder/bild5-zeile-rechts.png`): runde
   Knöpfe, das Zeichen der Funktion gefüllt in der Farbe ihres Bereichs. */
.schnellstart { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-left: auto; align-self: center; }
.schnellstart form { margin: 0; }
.schnellstart__knopf { display: flex; align-items: center; gap: 0.55rem; margin: 0; padding: 0.3rem 1rem 0.3rem 0.35rem;
  font: inherit; font-size: 0.95rem; font-weight: 600; color: inherit; text-decoration: none; cursor: pointer;
  background: var(--farbe-flaeche-block); border: 1px solid var(--farbe-rand-block); border-radius: 999px;
  box-shadow: 0 1px 2px rgb(0 0 0 / 8%); }
.schnellstart__knopf:hover { color: inherit; border-color: var(--bereich); }
.schnellstart__knopf--klienten {
  --bereich: var(--farbe-bereich-klienten);
}
.schnellstart__knopf--email {
  --bereich: var(--farbe-bereich-email);
}
.schnellstart__zeichen { display: grid; place-items: center; width: 2.1rem; height: 2.1rem; border-radius: 50%;
  background: var(--bereich); color: var(--farbe-schrift-invers); }
.schnellstart__zeichen .icon { width: 1.15rem; height: 1.15rem; }

/* Der Block „Klienten" (Sammlung 281, Entwurf `entwuerfe/klientenblock-281-bilder/`): ohne Titelzeile, damit er in
   zwei Zeilen des Rasters passt – links die Zahl der aktiven, groß, rechts ein paar Zahlen. */
.klientenblock { display: flex; align-items: center; gap: 1.3rem; padding: 0.3rem 1.3rem; }
.dashplatz > .klientenblock { overflow: hidden; }
.klientenblock__zahl,
.klientenblock__zahl:hover { display: flex; align-items: center; gap: 0.75rem; flex: none; color: inherit;
  text-decoration: none; }
.klientenblock__zahl strong { font-size: 2.5rem; line-height: 1; }
.klientenblock__zeichen { display: grid; place-items: center; width: 2.5rem; height: 2.5rem; border-radius: 50%;
  background: var(--farbe-bereich-klienten); color: var(--farbe-schrift-invers); }
.klientenblock__zeichen .icon { width: 1.35rem; height: 1.35rem; }
.klientenblock__wort { font-size: 0.85rem; line-height: 1.25; color: var(--farbe-schrift-gedaempft); }
.klientenblock__werte { flex: 1; min-width: 0; margin: 0; padding-left: 1.3rem;
  border-left: 1px solid var(--farbe-rand-block); display: grid; grid-template-columns: auto 1fr; gap: 0.2rem 1rem;
  font-size: 0.9rem; }
.klientenblock__werte dt { color: var(--farbe-schrift-gedaempft); }
.klientenblock__werte dd { margin: 0; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }