/* ============================================================
   Luvaris Vorgänge — Stilvorlage 2 von 2
   ------------------------------------------------------------
   Hier stehen ausschließlich Ansichts- und Baustein-Zusammen-
   setzungen: Raster, Spaltenbreiten, Reihenfolge, ansichts-
   eigene Abstände. Ausschließlich Klassenselektoren.

   Drei Regeln, ohne die der alte Fehler wiederkommt:
     1. kein Element-Selektor — auch nicht als Nachfahre
        (`.karte input` verboten, `.karte .feld` erlaubt);
     2. keine Notbremse in der Gewichtung — braucht eine Ansicht
        sie, ist der Baustein falsch geschnitten und wird in
        `style.css` geändert;
     3. jeder Baustein hat eine Klasse als Einstieg; Ansichten
        benutzen diese Klasse, statt Elemente zu treffen.

   Alle Werte kommen aus dem Wertesatz in `style.css`.
   ============================================================ */
/* ===== Teil 1: das Design-Fundament ===== */
.app-title {  font-family: var(--schrift-display);  font-weight: var(--schnitt-fett);  letter-spacing: -.01em; }
/* --- App-Shell: Sidebar Navy, Topbar, Content --- */
.app {  display: grid;  grid-template-columns: 240px 1fr;  min-height: 100vh; }
.content {  padding: var(--raum-8);  max-width: 1280px; }
@media (max-width:767px) {
.app {  grid-template-columns: 1fr; }
}.karte {
  padding: var(--raum-5);
  background: var(--flaeche-karte);
  border: 1px solid var(--linie);
  border-radius: var(--radius-karte);
  padding: var(--raum-6);
}
.karte + .karte {  margin-top: var(--raum-4); }
@media (prefers-reduced-motion:reduce) {
.knopf {  transition: none; }
.knopf:hover {  transform: none; }
}
/* L1: `.knopf-still` stand hier — also VOR `.knopf`. Es steht jetzt weiter
   unten beim Grundbaustein, zusammen mit `.knopf-haupt`. Siehe dort. */
.field {  margin-bottom: var(--raum-4); }
/* --- Tabellen (dicht, für Listen) --- */
.table {  width: 100%;  border-collapse: collapse;  font-size: var(--groesse-bedien); }
/* --- Tabs (Vorgang-Detail: Übersicht/Verlauf/Aufträge/…) --- */
.tabs {
   display: flex;
   gap: var(--raum-6);
   border-bottom: 1px solid var(--linie);
   margin-bottom: var(--raum-6);
}
/* L1: Hier standen `.abzeichen-inarbeit` und `.abzeichen-aktiv`. Beide waren
   WIRKUNGSLOS — und zwar seit dem Design-Umbau, ohne dass es jemand gesehen
   hätte. Der Grund ist die Ladereihenfolge, nicht die Gewichtung: der
   Grundbaustein `.abzeichen` steht weiter unten in derselben Datei und setzt
   selbst `background` und `color`. Bei gleicher Gewichtung gewinnt die SPÄTERE
   Regel — also der Grundbaustein, nicht seine Abwandlung. Gemessen am
   02.08.2026 im Browser: beide kamen als rgb(201,201,201) auf rgb(42,42,42)
   heraus, also neutralgrau, genau wie ein Abzeichen ohne jede Abwandlung.
   Die zwei Regeln stehen jetzt beim Grundbaustein. */
/* --- Verlauf-Timeline --- */
.timeline {  border-left: 2px solid var(--linie);  padding-left: var(--raum-6); }
.timeline-item {  position: relative;  padding-bottom: var(--raum-6); }
.timeline-item::before {
   content: '';
   position: absolute;
   left: calc(-1 * var(--raum-6) - 6px);
   top: .4rem;
   width: 10px;
   height: 10px;
   border-radius: var(--radius-kreis);
   background: var(--gold);
  color: var(--text-auf-gold);
}
.timeline-item .meta {  font-size: var(--groesse-text);  color: var(--text-gedimmt); }
/* --- Controlling / KPI-Kacheln --- */
.kpis {  display: grid;  grid-template-columns: repeat(auto-fit,minmax(150px,1fr));  gap: var(--raum-4); }
.kpi {
   background: var(--flaeche-karte);
   border: 1px solid var(--linie);
   border-radius: var(--radius-karte);
   padding: var(--raum-4);
}
.kpi .label {  font-size: var(--groesse-text);  color: var(--text-gedimmt); }
.kpi .value {  font-size: var(--groesse-titel);  font-weight: var(--schnitt-halb);  color: var(--text); }
.kpi.negativ .value {  color: var(--st-hoch-text); }.knopf:focus-visible {
  outline: 2px solid var(--fokus-rand);
  outline: 2px solid var(--st-inarbeit-text);
  outline-offset: 2px;
}
/* L1: `.knopf-haupt` und `.knopf-haupt:hover` standen hier — VOR `.knopf`.
   Sie stehen jetzt hinter dem Grundbaustein. Siehe dort. */
/* ------------------------------------------------------------
   Phase 3 des Design-Umbaus, 13.08.2026: EINE Angabe je Eigenschaft.

   Was hier vorher stand, war die Ablagerung von vier Durchgängen: `.knopf`
   setzte `background` viermal, `border-radius` dreimal, `padding`,
   `font-weight` und `transition` je zweimal — und `.knopf:hover` die Fläche
   VIERMAL. Sichtbar war jeweils nur die letzte; die anderen sahen wie eine
   Erklärung aus und waren keine. Genau daran ist die Notbremse `.knopf.knopf`
   entstanden, die es jetzt nicht mehr braucht.

   Gemessen, was beim Überfahren tatsächlich gewann, bevor das hier stand:
       Fläche       var(--flaeche-leiste)      im hellen Modus #16181C —
                                              der Knopf wurde fast schwarz
       Rahmen       var(--st-inarbeit-text)    blau, ohne Anlass
       Verschiebung translateY(-1px)           von der Übergabe ausdrücklich
                                              ausgeschlossen: „keine
                                              Verschiebung, kein transform"
   Die Tafel sagt für das Überfahren nur eines: goldener Rahmen.

   Der Radius liest jetzt `--radius-pille`, wie die Tabelle der Übergabe es
   zuweist. Vorher las er `--radius-klein` — eine Abweichung von einem Pixel,
   aber wer morgen `--radius-pille` verstellt, hätte keinen Knopf bewegt. */
.knopf {
  display: inline-flex;
  align-items: center;
  gap: var(--raum-2);
  height: var(--hoehe-bedien);
  padding: 0 var(--raum-4);
  border: 1px solid var(--linie-stark);
  border-radius: var(--radius-pille);
  background: var(--flaeche-karte);
  color: var(--text);
  font-family: var(--schrift-text);
  font-size: var(--groesse-bedien);
  font-weight: var(--schnitt-halb);
  letter-spacing: var(--laufweite);
  white-space: nowrap;
  cursor: pointer;
  /* „Übergänge: 120 ms, ease-out, nur Farbe und Schatten." */
  transition: background .12s ease-out, border-color .12s ease-out, color .12s ease-out;
}
.knopf:hover {
  border-color: var(--gold);
  color: var(--text);
}
/* L1: Die Abwandlungen des Knopfes, HINTER dem Grundbaustein.
   Vorher standen `.knopf-still` 66 und `.knopf-haupt` 11 Zeilen ÜBER `.knopf` —
   bei gleicher Gewichtung gewinnt aber die spätere Regel. Von ihren
   Erklärungen kam deshalb nur an, was weiter unten die Notbremse
   `.knopf.knopf-haupt` noch einmal setzt; die Schriftstärke war nicht dabei
   und lief ins Leere. Sie ist heute in beiden Regeln dieselbe (600), also
   sah man nichts — genau das ist die Sorte Fehler, die drei Durchgänge
   überlebt: Wer morgen `.knopf-haupt` auf `fett` stellt, sieht wieder nichts.
   Gefunden von der neuen Richtung (c) der Stilprüfung. */
.knopf-haupt {
  background: var(--gold);
  border-color: var(--gold);
  color: var(--text-auf-gold);
  font-weight: var(--schnitt-halb);
}
.knopf-haupt:hover {
  background: var(--gold-hell);
  border-color: var(--gold-hell);
  color: var(--text-auf-gold);
}
/* Die Tafel führt neun Knopfvarianten. Drei davon — `.knopf-aktiv`,
   `.knopf-aus` und `.knopf-notiz-loeschen` — waren bis heute mit dem nackten
   `.knopf` buchstabengleich: gemessen dieselbe Fläche, dieselbe Schrift,
   derselbe Rahmen. Eine Variante, die man nicht von ihrem Grundbaustein
   unterscheiden kann, ist keine. */
.knopf-aktiv {
  background: var(--st-aktiv-flaeche);
  border-color: var(--gold);
  color: var(--gold-text);
}
.knopf-still {
  background: transparent;
  border-color: transparent;
  /* War `--st-inarbeit-text` und damit BLAU — die Farbe des Zustands
     „In Arbeit" an einem Knopf, der nichts über einen Zustand sagt. */
  color: var(--text-zweit);
  font-weight: var(--schnitt-halb);
}
/* `.knopf-still:hover` steht NICHT hier, sondern in style.css bei den übrigen
   Knopfzuständen. Kurz stand es an beiden Stellen — die Stilprüfung hat es unter
   (a) gemeldet, bevor es jemand sehen konnte. */
/* Deaktiviert: eigene Fläche, eigene Schrift, eigener Zeiger — statt bisher
   nur `opacity: .45`, das jede Farbe gleichmäßig ausbleicht und dabei auch
   den Rahmen mitnimmt. */
.knopf-aus {
  background: var(--flaeche-vertieft);
  border-color: var(--linie);
  color: var(--text-deaktiviert);
  cursor: not-allowed;
}
.knopf-klein {
  height: 32px;
  padding: 0 var(--raum-3);
  font-size: var(--groesse-hinweis);
}
.knopf-gefahr {
  background: var(--gefahr);
  border-color: var(--gefahr);
  color: var(--text-auf-gefahr);
}
.knopf-gefahr:hover {
  background: var(--gefahr-text);
  border-color: var(--gefahr-text);
  color: var(--text-auf-gefahr);
}
/* K3.2: `.storniert` stand seit F2 im Markup (Auftragszeile eines stornierten
   Auftrags) und hatte KEINE Regel — ein stornierter Auftrag sah aus wie ein
   laufender. Das ist der wichtigste der drei nachgetragenen Punkte: die Zeile
   ist noch da (Storno-Prinzip: nichts wird gelöscht), aber sie zählt nicht mehr.
   Durchgestrichen wird NICHT der ganze Text — bei einer Tabellenzeile mit
   Beträgen wäre das unleserlich; gedimmt und mit einem eigenen Randstreifen
   ist es an derselben Stelle erkennbar und bleibt lesbar. */
.storniert {
   opacity: 0.55;
   text-decoration: line-through;
   text-decoration-color: var(--linie-stark);
   text-decoration-thickness: 1px;
}
.storniert:hover {  opacity: 0.8; }

/* K3.2: `.upload-aktiv` wird beim Ziehen einer Datei gesetzt (vier Stellen in
   app.js) und hatte KEINE Regel — beim Ziehen war also nicht zu sehen, ob die
   Fläche überhaupt trifft. Bewusst kräftig: es ist ein Zustand, der nur
   Sekundenbruchteile dauert und in dieser Zeit eindeutig sein muss. */
.upload-aktiv {
   border-color: var(--gold);
   border-style: dashed;
   background: var(--st-aktiv-flaeche);
   color: var(--text);
}

/* K3.2: `.af-vorschlag-grad` steht an genau einer Stelle und trägt den Zusatz,
   WIE genau ein Vorschlag ist („— nur das Objekt, kein einzelner Vorgang").
   Ohne Regel stand diese Einschränkung so kräftig da wie der Vorschlag selbst. */
.af-vorschlag-grad {
   color: var(--text-gedimmt);
   font-size: var(--groesse-hinweis);
}

/* ---------- Filterleiste ---------- */
.filterleiste {
   display: flex;
   gap: var(--raum-2);
   margin-bottom: var(--raum-5);
   flex-wrap: wrap;
}
/* ---------- 1a: Vorgänge/Fälle als dichte Tabelle ---------- */
/* Divs mit CSS-Grid statt <table>: die Spaltenbreiten bleiben so über Kopf und
   Zeilen synchron, ohne Tabellen-Layout-Zwänge. Auf schmalen Fenstern scrollt
   die Karte selbst waagerecht (min-width am Raster), nicht die Seite. */
.vg-tabelle {
   background: var(--flaeche-karte);
   border: 1px solid var(--linie);
   border-radius: var(--radius-karte);
   overflow-x: auto;
   overscroll-behavior: contain;  /* K1 */
}
.vg-raster {
   display: grid;
   /* Phase 4, Ansicht 2 der Übergabe: 78px 1fr 200px 300px 130px —
      Nr. · Vorgang · Objekt · Nächster Schritt · Fällig.
      Vorher waren es SIEBEN Spalten (108 1fr 120 96 76 104 64): Status und
      Priorität hatten eigene Spalten und der Titel hatte 1fr von 820 px, also
      gerade 172. Gemessen an der laufenden Liste waren dadurch Titel wie
      „2026720 RVG-Rechnung Ad F…" und Einheiten wie „Gemeinschaf…"
      abgeschnitten — in einer Liste, in die man wegen des Titels sieht.

      Status, Priorität, Kategorie und Dateizahl sind NICHT entfallen: sie
      stehen jetzt als zweite Zeile in der Spalte „Vorgang". Damit bleibt der
      Klartext („Wartet auf Dritte", nicht nur ein farbiger Streifen) und die
      Übergabe bekommt ihre fünf Spalten. Das Fristdatum behält seine 130 px —
      abgeschnittene Fristen sind genau die Angabe, wegen der man hier sieht. */
   /* GEMESSEN, nicht uebernommen: die Uebergabe nennt 200/300/130 und rechnet
      dabei mit der ganzen Breite. LV stellt rechts ein 320-px-Panel daneben
      („Automatisch einsortiert"), das die Uebergabe nicht kennt. Mit ihren
      Zahlen blieben dem Titel von 956 px genau 168 — er brach auf fuenf Zeilen
      und die Zeile wurde 151 px hoch. Die drei festen Spalten sind deshalb
      knapper: Objekt 150, Schritt 240, Faellig 104. Der Titel bekommt 344.

      Auch die erste Spalte weicht ab: die Uebergabe nennt 78 px und meint
      Nummern der Form „#2377". LV fuehrt Aktenzeichen — „LV-2026-0025", in
      Manrope 13 px gemessen 85,4 px breit. Bei 78 brach die Nummer in zwei
      Zeilen. 92 px, und sie steht in einer. */
   grid-template-columns: 92px minmax(260px, 1fr) 150px 240px 104px;
   gap: var(--raum-3);
   min-width: 926px;
   align-items: center;
}
/* Kopf, Zeile und Zelle sind Bausteine (.tabelle-kopf, .zeile, .zelle) und
   werden in style.css beschrieben. Hier steht nur, was diese Ansicht eigen
   hat: die Spaltenbreiten oben im Raster und der waagerechte Innenabstand. */
/* L1 (b): der Statusstreifen. Ein Abzeichen in der Zeilenmitte muss man
   ansteuern, ein Streifen am Zeilenanfang steht immer an derselben Stelle —
   beim Überfliegen einer Liste ist das der Unterschied zwischen Lesen und
   Sehen. Er sitzt als Rahmen, nicht als innerer Schatten: ein Rahmen ist
   messbar (`border-left-color`), ein Schatten ist es nur über Umwege.
   Der KOPF trägt denselben Rahmen durchsichtig, sonst stünden Kopfzeile und
   Datenzeilen um vier Pixel versetzt — das Raster hat feste Spaltenbreiten. */
.vg-kopf  { padding: 0 var(--raum-4); border-left: 4px solid transparent; }
/* „Zeile: 15 px oben und unten." Die feste Höhe von 48 px muss dafür weichen —
   die Spalte „Vorgang" trägt jetzt zwei Zeilen (Titel und darunter die Art). */
.vg-zeile { padding: 15px var(--raum-4); cursor: pointer; text-align: left; width: 100%;
            height: auto; min-height: var(--hoehe-zeile); align-items: start;
            background: none; border-left: 4px solid transparent; border-right: 0; border-bottom: 0; }
.vg-zeile.status-offen     {  border-left-color: var(--st-offen-linie); }
.vg-zeile.status-in_arbeit {  border-left-color: var(--st-inarbeit-linie); }
.vg-zeile.status-wartend   {  border-left-color: var(--st-wartend-linie); }
.vg-zeile.status-erledigt  {  border-left-color: var(--st-erledigt-linie); }
.vg-titel {
   font-family: var(--schrift-text); font-size: var(--groesse-text); font-weight: var(--schnitt-halb);
   color: var(--text);
   /* Der Titel darf umbrechen. Er stand auf `nowrap` mit Auslassungspunkten,
      weil die Badges daneben Platz brauchten — die stehen jetzt in der zweiten
      Zeile. Ein abgeschnittener Titel ist in einer Vorgangsliste der teuerste
      Verlust: „Fam. Kirchner WE 5 nach Date…" sagt nicht, worum es geht. */
   line-height: 1.35;
   overflow-wrap: anywhere;
   min-width: 0;
}

.vg-zelle {
   font-family: var(--schrift-text); font-size: var(--groesse-hinweis); font-weight: var(--schnitt-halb);
   color: var(--text-gedimmt);
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
}
.vg-zelle.meta {  color: var(--text-gedimmt); }
/* AB HIER hinter dem Grundbaustein `.vg-zelle`. Sie standen davor, und damit
   gewann dessen `white-space: nowrap` gegen das `normal` der Schrittspalte —
   gemessen an der laufenden Liste: der Schritttext war abgeschnitten. Das ist
   dieselbe Falle, die die Stilprüfung unter (c) fängt; sie greift dort aber
   nur bei Namen der Form `.grundbaustein-abwandlung`. */
/* Die Spalte „Vorgang": Titel, darunter die Art. */
.vg-vorgang {  display: flex;  flex-direction: column;  gap: 3px;  min-width: 0; }
/* „darunter die Art 12 px --text-gedimmt". In LV ist die Art mehr als ein
   Wort: Kategorie, Status im Klartext, Vorrang und die Zahl der Dateien. Sie
   standen vorher in eigenen Spalten und haben den Titel zusammengedrückt. */
.vg-art {
   display: flex;
   align-items: center;
   gap: var(--raum-2);
   flex-wrap: wrap;
   font-size: var(--groesse-klein);
   font-weight: var(--schnitt-normal);
   color: var(--text-gedimmt);
   min-width: 0;
}
/* Die Spalte „Nächster Schritt" mit dem 6-px-Punkt in der Dringlichkeitsfarbe. */
.vg-schritt {
   display: flex;
   align-items: baseline;
   gap: var(--raum-2);
   white-space: normal;
   line-height: 1.4;
   overflow-wrap: anywhere;
}
.vg-schritt-punkt {
   width: 6px; height: 6px; border-radius: var(--radius-kreis);
   flex: none; margin-top: 5px;
   background: var(--text-deaktiviert);
}
.vg-schritt-punkt.ist-faellig  {  background: var(--gefahr-text); }
.vg-schritt-punkt.ist-bald     {  background: var(--gold); }
/* Kein Schritt benannt: leise, und nicht als Gedankenstrich allein — ein
   Strich sagt nicht, ob die Angabe fehlt oder ob es nichts zu tun gibt. */
.vg-schritt-leer {  color: var(--text-deaktiviert);  font-style: italic;  font-weight: var(--schnitt-normal); }
/* „Fällig" 13 px / 600, rot wenn Frist läuft. */
.vg-faellig {  font-size: var(--groesse-hinweis);  font-weight: var(--schnitt-halb);  color: var(--text-zweit); }
/* nowrap + Ellipsis am Titel: bei langem Titel schrumpft der Titel, die Badges
   bleiben daneben statt in eine zweite Zeile zu rutschen. */
.vg-badges {
   display: flex;
   align-items: center;
   gap: var(--raum-1);
   flex-wrap: nowrap;
   min-width: 0;
   overflow: hidden;
}
.vg-badges .abzeichen, .vg-badges .kat-badge {  flex: none; }
/* Fälle-Raster: ID · Titel · Einheit/Objekt · Status · Dateien (kein Fristdatum). */
.fl-raster {
   display: grid;
   grid-template-columns: 90px 1fr 160px 130px 76px;
   gap: var(--raum-2);
   min-width: 640px;
   align-items: center;
}
.tabelle-leer {  color: var(--text-gedimmt);  font-size: var(--groesse-text);  padding: var(--raum-4) var(--raum-1); }
/* Alt-Karten (Fallakten) – noch von anderen Listen genutzt */
.liste {  display: flex;  flex-direction: column;  gap: var(--raum-3); }
.akte {
  
  background: var(--flaeche-karte);
  
  border: 1px solid var(--linie);
  
  border-left: 4px solid var(--gold);
  
  border-radius: var(--radius-karte);
  
  padding: var(--raum-4) var(--raum-5);
  
  cursor: pointer;
  
  transition: transform 0.12s;
}
.akte:hover {  transform: translateY(-1px); }
.akte.status-in_arbeit {  border-left-color: var(--st-inarbeit-text); }
.akte.status-wartend {  border-left-color: var(--text-gedimmt); }
.akte.status-erledigt {  border-left-color: var(--st-erledigt-text);  opacity: 0.72; }
.akte-kopf {
   display: flex;
   align-items: center;
   gap: var(--raum-2);
   flex-wrap: wrap;
   margin-bottom: var(--raum-1);
}
.aktenzeichen {
  
  font-family: var(--schrift-mono);
   font-size: var(--groesse-hinweis);
   font-weight: var(--schnitt-halb);
  
  color: var(--gold-text);
   border: 1px solid var(--gold);
  
  border-radius: var(--radius-feld);
   padding: var(--raum-1) var(--raum-2);
   letter-spacing: 0.5px;
  
  background: var(--st-aktiv-flaeche);
}
.akte-titel {  font-size: var(--groesse-bedien);  font-weight: var(--schnitt-halb);  color: var(--text); }
.akte-meta {
   display: flex;
   gap: var(--raum-3);
   flex-wrap: wrap;
   font-size: var(--groesse-text);
   color: var(--text-gedimmt);
   align-items: center;
}
/* Phase 3: eine Angabe je Eigenschaft, wie beim Knopf. Hier stand `font-size`
   dreimal (klein, text, winzig), `font-weight` und `padding` je zweimal,
   `display` zweimal. Sichtbar war die letzte — 11 px.

   Das war die Hälfte des Befundes. Die andere: fünf der zehn Abzeichen trugen
   weiter unten eine Regel mit doppelter Klasse, die sie auf 12 px zog. Gemessen
   an allen zehn: `-aktiv`, `-erledigt`, `-hoch`, `-inarbeit`, `-offen` bei
   12 px, `.abzeichen` selbst und `-neutral`, `-prio`, `-still`, `-wartend` bei
   11 px. Zehn Abzeichen in zwei Größen, nebeneinander in derselben Zeile. */
.abzeichen {
  display: inline-flex;
  align-items: center;
  padding: var(--raum-1) var(--raum-3);
  border-radius: var(--radius-pille);
  background: var(--st-neutral-flaeche);
  color: var(--st-neutral-text);
  font-family: var(--schrift-text);
  font-size: var(--groesse-klein);
  font-weight: var(--schnitt-halb);
  letter-spacing: .01em;
  white-space: nowrap;
}
/* Die Abwandlungen des Abzeichens — ALLE, an einer Stelle, direkt hinter dem
   Grundbaustein. Zwei Dinge stehen hinter dieser Ordnung:

   1. ZWEI NAMENSRÄUME FÜR DIESELBE SACHE. Von Hand geschrieben heißt es
      `abzeichen-offen`, aus dem Zustand erzeugt heißt es `badge-offen`
      (`badge-${v.status}` in app.js). Die zweite Sorte steht im Quelltext
      nirgends als Wort — deshalb hat sie keine Stilprüfung je gesehen, und
      deshalb hatten `badge-offen`, `badge-wartend` und `badge-erledigt` bis
      zum 02.08.2026 GAR KEINE Regel: sie fielen auf `.abzeichen` zurück und
      waren untereinander buchstabengleich neutralgrau. Ab jetzt trägt jede
      Regel beide Namen, und `werkzeug/l1-statusfarben.js` liest die Liste der
      Zustände aus app.js statt sie zu pflegen.
   2. HINTER dem Grundbaustein, nicht davor. `.abzeichen` setzt selbst
      `background` und `color`. Eine Abwandlung mit gleicher Gewichtung, die
      weiter oben steht, verliert — lautlos. Genau das war `.abzeichen-inarbeit`
      und `.abzeichen-aktiv` passiert. */
.abzeichen-offen, .badge-offen {
  background: var(--st-offen-flaeche);
  color: var(--st-offen-text);
}
.abzeichen-inarbeit, .badge-in_arbeit {
  background: var(--st-inarbeit-flaeche);
  color: var(--st-inarbeit-text);
}
.abzeichen-wartend, .badge-wartend {
  background: var(--st-wartend-flaeche);
  color: var(--st-wartend-text);
}
.abzeichen-erledigt, .badge-erledigt {
  background: var(--st-erledigt-flaeche);
  color: var(--st-erledigt-text);
}
.abzeichen-hoch, .badge-hoch {
  background: var(--st-hoch-flaeche);
  color: var(--st-hoch-text);
}
.abzeichen-aktiv {
  background: var(--st-aktiv-flaeche);
  color: var(--st-aktiv-text);
}
.abzeichen-neutral {
  border: 1px solid var(--linie-stark);
  background: var(--st-neutral-flaeche);
  color: var(--st-neutral-text);
}
/* L1 (d): die Priorität. Sie stand in kräftigem Rot — viermal untereinander in
   einer Liste von vierzehn — und war damit das Lauteste der Zeile, obwohl sie
   keine Gefahr meldet. Rot bleibt der Frist und dem Schaden. Die Priorität
   behält ihr Wort und verliert ihre Farbe: Umriss statt Fläche, gedimmter Text.
   Sie ist damit nachweislich leiser als jeder Statusstreifen — gemessen als
   Kontrast gegen die Karte in `werkzeug/l1-statusfarben.js`. */
.abzeichen-prio {
  background: var(--flaeche-karte);
  color: var(--text-gedimmt);
  border: 1px solid var(--linie-stark);
  font-weight: var(--schnitt-halb);
}
.ueberfaellig {  color: var(--gefahr-text);  font-weight: var(--schnitt-halb); }
/* ---------- Kategorie-Badge & Tags (C1) ---------- */
.kat-badge {
  
  display: inline-flex;
   align-items: center;
   gap: var(--raum-1);
  
  font-size: var(--groesse-hinweis);
   font-weight: var(--schnitt-halb);
   color: var(--text-gedimmt);
  
  padding: var(--raum-1) var(--raum-2) var(--raum-1) var(--raum-2);
   border-radius: var(--radius-pille);
  
  border: 1px solid var(--linie);
   background: var(--flaeche-karte);
}
.kat-badge::before {
  
  content: '';
   width: 8px;
   height: 8px;
   border-radius: var(--radius-kreis);
  
  background: var(--kat, var(--text-gedimmt));
   flex-shrink: 0;
}
.akte-tags, .tag-zeile {  display: flex;  flex-wrap: wrap;  gap: var(--raum-1); }
.akte-tags {  margin-top: var(--raum-2); }
.tag-chip {
  
  font-size: var(--groesse-klein);
   font-weight: var(--schnitt-halb);
   color: var(--st-inarbeit-text);
  
  background: var(--st-inarbeit-flaeche);
   border-radius: var(--radius-feld);
   padding: var(--raum-1) var(--raum-2);
}
.leer {
  
  text-align: center;
   color: var(--text-gedimmt);
   padding: var(--raum-12) var(--raum-5);
  
  background: var(--flaeche-karte);
   border: 1px dashed var(--linie);
   border-radius: var(--radius-karte);
}
/* ---------- Objekt-Karten (1a) ---------- */
.objekt-raster {  display: grid;  grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));  gap: var(--raum-3); }
.objekt-karte {
  
  background: var(--flaeche-karte);
   border: 1px solid var(--linie);
  
  border-radius: var(--radius-karte);
   padding: var(--raum-5) var(--raum-5);
}
/* Kopf: links Kürzel + Name + Adresse, rechts die Kennzahl-Karten. */
.objekt-karte-kopf {
   display: flex;
   justify-content: space-between;
   align-items: flex-start;
   gap: var(--raum-4);
   flex-wrap: wrap;
   margin-bottom: var(--raum-4);
}
.objekt-karte-titel {  min-width: 0; }
.objekt-typ {
   font-family: var(--schrift-text); font-size: var(--groesse-winzig); font-weight: var(--schnitt-fett);
   letter-spacing: .06em;
   text-transform: uppercase;
   color: var(--gold-text);
}
.objekt-adresse {  font-size: var(--groesse-text);  color: var(--text-gedimmt); }
.objekt-kennzahlen {  display: flex;  gap: var(--raum-2);  flex: none; }
.kennzahl-karte {
  
  background: var(--flaeche-karte);
   border: 1px solid var(--linie);
   border-radius: var(--radius-klein);
  
  padding: var(--raum-2) var(--raum-4);
   text-align: center;
   min-width: 62px;
}
.kennzahl-wert {
   font-family: var(--schrift-text); font-size: var(--groesse-abschnitt); font-weight: var(--schnitt-fett);
   color: var(--text);
   display: flex;
   align-items: center;
   gap: var(--raum-1);
   justify-content: center;
}
.kennzahl-wert .abzeichen {  font-size: var(--groesse-winzig);  padding: var(--raum-1) var(--raum-1); }
.kennzahl-label {  font-family: var(--schrift-text); font-size: var(--groesse-klein); font-weight: var(--schnitt-halb);  color: var(--text-gedimmt);  margin-top: var(--raum-1); }
/* wrap: sonst laufen die Aktions-Buttons aus der Karte heraus, sobald mehr
   als drei drin sind (Übersicht/Einheiten/Dokumente/Verträge/Gremium/…). */
.objekt-aktionen {  display: flex;  flex-wrap: wrap;  gap: var(--raum-2); }.drawer-hintergrund {
  
  position: fixed;
   inset: 0;
   background: var(--flaeche-abdunklung);
   z-index: 40;
}
/* D5: ganze Seite statt Schublade. Die Schublade war 65vw breit und musste
   elf Reiter in zwei Zeilen unterbringen; mit fünf Reitern und benannten
   Blöcken nebeneinander braucht die Akte die volle Breite.

   Die Seitenleiste bleibt frei (left: 224px) – anders als bei der
   Vollbildansicht aus E3, die auch die Navigation verdeckte. Facilioo hält
   es genauso: Menü links stehen lassen, Akte daneben aufziehen.

   Das Drei-Scrollbalken-Problem aus E3 bleibt gebannt, weil weiterhin nur
   die Reitertafel scrollt: fester Kopf, feste Reiterleiste, ein Scrollbereich
   darunter. Der Hintergrund-Schleier entfällt – es gibt kein "außerhalb"
   mehr, und über der Navigation wäre er nur im Weg. */
.drawer {
  
  position: fixed;
   /* Beginnt unter der Kopfleiste und neben der Navigation: das Fristenbanner
      muss auch in der Akte sichtbar bleiben, und die Navigation bedienbar. */
   top: var(--hoehe-kopfleiste);
   right: 0;
   bottom: 0;
   left: var(--breite-nav);
   z-index: 45;
  
  background: var(--flaeche-karte);
  
  border-left: 1px solid var(--linie);
  
  display: flex;
   flex-direction: column;
}
@media (max-width: 767px) {
.drawer {  left: 0; }
}
/* Bewusst ohne Einfahr-Animation: eine Keyframe-Animation mit translateX(100%)
   als Startbild lässt die Schublade außerhalb des Fensters stehen, sobald die
   Zeitleiste nicht anläuft (gedrosselter Tab). Der Schmuck ist das Risiko,
   die Detailansicht unsichtbar zu machen, nicht wert. */
/* #drawer-inhalt liegt als Block zwischen Schublade und Inhalt. Ohne eigenes
   Flex-Layout wirkt das flex:1 der Tafeln ins Leere – auf niedrigen Fenstern
   wächst der Inhalt dann unten aus der Schublade heraus und ist weder sichtbar
   noch scrollbar. */
#drawer-inhalt {
   flex: 1;
   min-height: 0;
   display: flex;
   flex-direction: column;
}
.drawer-kopf {
  
  flex-shrink: 0;
   padding: var(--raum-4) var(--raum-6) var(--raum-4);
  
  border-bottom: 1px solid var(--linie);
   background: var(--flaeche-karte);
}
.drawer-titelzeile {
   display: flex;
   justify-content: space-between;
   align-items: flex-start;
   gap: var(--raum-4);
}
/* Teil A1: Eine Zeile mit allem, was den Vorgang benennt — Aktenzeichen,
   Anschrift, Einheit, Vorgangstyp, Betreff. Vorher standen dieselben Angaben
   auf drei Etagen (Krume, Titel, Kontextzeile), und die Anschrift fehlte. */
.akte-kopfzeile {
   display: flex;
   flex-wrap: wrap;
   align-items: baseline;
   gap: var(--raum-2);
   margin: 0;
   font-size: var(--groesse-abschnitt);
   line-height: 1.25;
}
.akte-kopf-titel {  font-weight: var(--schnitt-fett); }
.akte-kopf-trenner {  color: var(--text-gedimmt);  font-weight: var(--schnitt-normal); }
/* Die bisherige Bearbeitungszeit, rechts im Kopf. Sie ist eine Auskunft, kein
   Bedienelement — deshalb zurückgenommen und mit gleichbleibender Ziffernbreite,
   damit die Zahl beim Weiterlaufen nicht springt. */
.akte-zeit {
   display: inline-flex;
   align-items: center;
   gap: var(--raum-1);
   font-size: var(--groesse-klein);
   color: var(--text-gedimmt);
   font-variant-numeric: tabular-nums;
   white-space: nowrap;
}
.drawer-kopf .beschreibung-text {  font-size: var(--groesse-text);  margin-top: var(--raum-1); }
/* Lange Beschreibungen dürfen den festen Kopf nicht aufblähen. */
.drawer-mehr {  margin-top: var(--raum-2);  font-size: var(--groesse-text); }
.drawer-kopf .kontaktkarte {  margin-top: var(--raum-3);  padding: var(--raum-2) var(--raum-3); }
.drawer-kopf .fall-merkmal {  margin-top: var(--raum-3); }
.drawer-aktionen {
   display: flex;
   gap: var(--raum-2);
   margin-top: var(--raum-3);
   flex-wrap: wrap;
}
/* Dienstleister-Zuordnung: als Chip-Zeile, damit sie im festen Kopf nicht
   mehr Höhe frisst als der eigentliche Arbeitsbereich darunter hat. */
.drawer-dl {
   display: flex;
   flex-wrap: wrap;
   align-items: center;
   gap: var(--raum-2);
   margin-top: var(--raum-3);
}
.drawer-dl-titel {
  
  font-size: var(--groesse-winzig);
   letter-spacing: 1px;
   text-transform: uppercase;
  
  color: var(--gold-text);
   font-weight: var(--schnitt-halb);
}
.dl-chip {
  
  display: inline-flex;
   align-items: center;
   gap: var(--raum-1);
   font-size: var(--groesse-hinweis);
  
  padding: var(--raum-1) var(--raum-1) var(--raum-1) var(--raum-2);
   border: 1px solid var(--linie);
   border-radius: var(--radius-pille);
  
  background: var(--st-aktiv-flaeche);
}
.dl-chip .aufgabe-loeschen {  font-size: var(--groesse-klein); }
.drawer-dl-leer {  font-size: var(--groesse-hinweis);  color: var(--text-gedimmt); }
/* J1: Verknüpfte Vorgänge/Fälle – gleiche Sprache wie die Dienstleister-Leiste,
   aber mit eigenem Rand, damit die Gegenrichtung sichtbar unterscheidbar ist. */
.drawer-verkn {
   display: flex;
   flex-wrap: wrap;
   align-items: center;
   gap: var(--raum-2);
   margin-top: var(--raum-3);
   position: relative;
}
.verkn-chip {
  
  display: inline-flex;
   align-items: center;
   gap: var(--raum-1);
   font-size: var(--groesse-hinweis);
  
  padding: var(--raum-1) var(--raum-1) var(--raum-1) var(--raum-2);
   border: 1px solid var(--linie);
   border-radius: var(--radius-pille);
  
  background: var(--flaeche-vertieft);
}
/* Von der anderen Seite angelegt: gestrichelter Rand statt zweiter Farbe. */
.verkn-chip.ist-rueck {  border-style: dashed; }
.verkn-art {
   font-size: var(--groesse-winzig);
   letter-spacing: 0.4px;
   text-transform: uppercase;
   color: var(--text-gedimmt);
   font-weight: var(--schnitt-halb);
}
.verkn-ziel {
  
  background: none;
   border: none;
   padding: 0;
   cursor: pointer;
   text-align: left;
  
  font-family: var(--schrift-text);
   font-size: var(--groesse-hinweis);
   color: var(--text-gedimmt);
  
  display: inline-flex;
   align-items: center;
   gap: var(--raum-1);
}
.verkn-ziel:hover {  color: var(--gold-text);  text-decoration: underline; }
.verkn-ziel:focus-visible {  outline: 2px solid var(--gold);  outline-offset: 2px;  border-radius: var(--radius-feld); }
.verkn-kopf {
  
  font-size: var(--groesse-winzig);
   letter-spacing: 0.6px;
   font-weight: var(--schnitt-fett);
  
  color: var(--gold-text);
   font-variant-numeric: tabular-nums;
   white-space: nowrap;
}
.verkn-chip .aufgabe-loeschen {  font-size: var(--groesse-klein); }
.drawer-verkn .verkn-artwahl {  max-width: 190px;  padding: var(--raum-1) var(--raum-2);  font-size: var(--groesse-hinweis); }
.drawer-verkn .verkn-suche {
   flex: 1;
   min-width: 170px;
   max-width: 320px;
   padding: var(--raum-1) var(--raum-2);
   font-size: var(--groesse-hinweis);
}
.verkn-treffer {
  
  position: absolute;
   top: 100%;
   left: 0;
   right: 0;
   z-index: 20;
   margin-top: var(--raum-1);
  
  max-height: 260px;
   overflow-y: auto;
   background: var(--flaeche-karte);
  
  border: 1px solid var(--linie);
   border-radius: var(--radius-klein);
   padding: var(--raum-1);
  /* F7: das Scrollen bleibt hier drin */
   overscroll-behavior: contain;
}
.verkn-treffer-zeile {
  
  display: flex;
   align-items: baseline;
   gap: var(--raum-2);
   width: 100%;
   text-align: left;
  
  background: none;
   border: none;
   cursor: pointer;
   padding: var(--raum-2) var(--raum-2);
   border-radius: var(--radius-klein);
  
  font-family: var(--schrift-text);
   font-size: var(--groesse-text);
   color: var(--text-gedimmt);
}
.verkn-treffer-zeile:hover {  background: var(--st-aktiv-flaeche); }
.verkn-treffer-zeile:focus-visible {  outline: 2px solid var(--gold);  outline-offset: -2px; }
.verkn-treffer-titel {
   flex: 1;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
}
/* J2: Schadennummern im Aktenkopf. Eine ruhige Bank aus vier Feldern – sie
   soll nach Notizzettel aussehen, nicht nach Formular. */
.drawer-schaden {
  
  display: flex;
   flex-wrap: wrap;
   align-items: flex-end;
   gap: var(--raum-2);
   margin-top: var(--raum-3);
  
  padding: var(--raum-3) var(--raum-3);
   border: 1px solid var(--linie);
   border-radius: var(--radius-klein);
  
  background: var(--st-aktiv-flaeche);
}
.drawer-schaden > .drawer-dl-titel {  flex-basis: 100%; }
.schaden-felder {
   display: flex;
   flex-wrap: wrap;
   gap: var(--raum-2);
   flex: 1;
   min-width: 0;
}
.schaden-feld {
  
  display: flex;
   flex-direction: column;
   gap: var(--raum-1);
   flex: 1 1 150px;
   min-width: 130px;
  
  font-size: var(--groesse-winzig);
   letter-spacing: 0.6px;
   text-transform: uppercase;
  
  color: var(--text-gedimmt);
   font-weight: var(--schnitt-halb);
}
.schaden-aufklappen {  margin-top: var(--raum-2); }
/* J4: Duplikat-Hinweis im Anlege-Formular. Bewusst ein Hinweis, keine
   Fehlermeldung – darum warmer Sandton statt Rot. */
.dupl-hinweis {
  
  margin: calc(var(--raum-1) * -1) 0 var(--raum-3);
   padding: var(--raum-2) var(--raum-3);
   border-radius: var(--radius-klein);
  
  border: 1px solid var(--linie);
   background: var(--st-aktiv-flaeche);
  
  font-size: var(--groesse-hinweis);
   color: var(--text-gedimmt);
}
.dupl-wert {
   margin-left: auto;
   color: var(--text-gedimmt);
   font-size: var(--groesse-klein);
   font-variant-numeric: tabular-nums;
}
.dupl-fuss {
   display: block;
   margin-top: var(--raum-1);
   color: var(--text-gedimmt);
   font-size: var(--groesse-klein);
}
/* J3: Zahlungsmerker – eine ruhige Zeile, bewusst schmaler als der
   Schadenblock. Hier steht nie ein Betrag, nur ein Zustand. */
.drawer-zahl {
   display: flex;
   flex-wrap: wrap;
   align-items: center;
   gap: var(--raum-2);
   margin-top: var(--raum-3);
}
.drawer-zahl .zahl-status {  max-width: 230px;  padding: var(--raum-1) var(--raum-2);  font-size: var(--groesse-hinweis); }
.drawer-zahl .zahl-notiz {
   flex: 1;
   min-width: 200px;
   padding: var(--raum-1) var(--raum-2);
   font-size: var(--groesse-hinweis);
}
/* Finanziell offen: Zahlung · Akte · Notiz · Objekt · Zuständig · Zuletzt */
.fin-raster {
  
  display: grid;
   grid-template-columns: 180px 1fr 260px 110px 110px 100px;
  
  gap: var(--raum-2);
   min-width: 900px;
   align-items: center;
}
/* J9: Belege je Wirtschaftsjahr. Die Jahreskarten sind der Einstieg – man denkt
   in Abrechnungsjahren, nicht in Dateilisten. */
.beleg-jahre {
   display: flex;
   flex-wrap: wrap;
   gap: var(--raum-2);
   margin-bottom: var(--raum-3);
}
.beleg-jahr-karte {
  
  display: flex;
   flex-direction: column;
   gap: var(--raum-1);
   min-width: 120px;
  
  padding: var(--raum-2) var(--raum-3);
   border: 1px solid var(--linie);
   border-radius: var(--radius-klein);
  
  background: var(--flaeche-karte);
   cursor: pointer;
   text-align: left;
   font: inherit;
  
  transition: background .12s, border-color .12s;
}
.beleg-jahr-karte:hover {  background: var(--flaeche-karte); }
.beleg-jahr-karte.aktiv {  border-color: var(--gold);  background: var(--st-aktiv-flaeche); }
.beleg-raster {
  
  display: grid;
   grid-template-columns: 70px 140px minmax(200px, 1fr) 120px 90px 120px 110px;
  
  gap: var(--raum-2);
   min-width: 960px;
   align-items: center;
}
.doku-beleg-knopf {
  
  background: none;
   border: 1px solid var(--linie);
   border-radius: var(--radius-pille);
  
  padding: var(--raum-1) var(--raum-2);
   font-family: var(--schrift-text); font-size: var(--groesse-klein); font-weight: var(--schnitt-halb);
   color: var(--text-gedimmt);
  
  cursor: pointer;
   white-space: nowrap;
}
.doku-beleg-knopf:hover {  color: var(--gold-text);  border-color: var(--gold); }
.doku-beleg-knopf.aktiv {  background: var(--st-aktiv-flaeche);  color: var(--gold-text);  border-color: var(--gold); }
/* J8: Kalender-Monatsraster */
.kal-steuerung {
   display: flex;
   align-items: center;
   gap: var(--raum-2);
   margin-left: auto;
}
.kal-gitter {
  
  display: grid;
   grid-template-columns: repeat(7, minmax(0, 1fr));
   gap: var(--raum-1);
  
  background: var(--flaeche-karte);
   border: 1px solid var(--linie);
   border-radius: var(--radius-karte);
   padding: var(--raum-2);
}
.kal-kopf {
  
  font-family: var(--schrift-text); font-size: var(--groesse-winzig); font-weight: var(--schnitt-fett);
   color: var(--text-gedimmt);
  
  letter-spacing: .04em;
   text-transform: uppercase;
   text-align: center;
   padding: var(--raum-1) 0 var(--raum-1);
}
.kal-zelle {
  
  display: flex;
   flex-direction: column;
   gap: var(--raum-1);
   align-items: stretch;
  
  min-height: 92px;
   padding: var(--raum-1);
   border: 1px solid var(--linie);
   border-radius: var(--radius-klein);
  
  background: none;
   cursor: pointer;
   text-align: left;
   font: inherit;
  
  transition: background .12s, border-color .12s;
}
.kal-zelle.leer {  border: none;  cursor: default;  min-height: 0; }
.kal-zelle:not(.leer):hover {  background: var(--flaeche-karte); }
.kal-zelle.ist-heute {  border-color: var(--gold); }
.kal-zelle.ist-gewaehlt {  background: var(--st-aktiv-flaeche);  border-color: var(--gold); }
.kal-zelle:focus-visible {  outline: 2px solid var(--st-inarbeit-text);  outline-offset: -2px; }
.kal-tagzahl {  font-family: var(--schrift-mono); font-size: var(--groesse-hinweis); font-weight: var(--schnitt-halb);  color: var(--text-gedimmt); }
.kal-zelle.ist-heute .kal-tagzahl {  color: var(--gold-text); }
.kal-chip {
  
  font-family: var(--schrift-text); font-size: var(--groesse-winzig); font-weight: var(--schnitt-halb);
   color: var(--text);
  
  background: var(--flaeche-vertieft);
   border-radius: var(--radius-feld);
   padding: var(--raum-1) var(--raum-1);
  
  overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
}
.kal-chip.kal-art-strategisch {  background: var(--st-aktiv-flaeche);  color: var(--gold-text); }
.kal-chip.kal-art-wiedervorlage {  background: var(--st-neutral-flaeche); }
.kal-mehr {  font-size: var(--groesse-winzig);  color: var(--text-gedimmt); }
.kal-tag-titel {  font-family: var(--schrift-text); font-size: var(--groesse-bedien); font-weight: var(--schnitt-halb);  margin: var(--raum-4) 0 var(--raum-2); }
.kal-tag-zeile {
   display: grid;
   grid-template-columns: 130px minmax(200px, 1fr) 120px;
   gap: var(--raum-2);
   align-items: center;
}
.kal-tag-zeile:not(.ist-klickbar) {  cursor: default; }
.kal-tag-zeile:not(.ist-klickbar):hover {  background: none; }
@media (max-width: 720px) {
.kal-zelle {  min-height: 64px; }
.kal-chip {  display: none; }
}
/* J7: Routinen – Status · Bezeichnung · Intervall · Objekt · Zuletzt · Nächste */
.routine-raster {
  
  display: grid;
   grid-template-columns: 110px minmax(180px, 1fr) 120px 100px 110px 130px 330px;
  
  gap: var(--raum-2);
   min-width: 1180px;
   align-items: center;
}
.routine-raster.ist-pausiert {  opacity: 0.55; }
/* J6: Strategische Termine. Der existenzielle Rand links ist die ganze Botschaft
   dieser Ansicht: läuft die eigene Bestellung ab, endet das Mandat. */
.strat-raster {
  
  display: grid;
   grid-template-columns: 120px 180px minmax(180px, 1fr) 90px 110px 80px 290px;
  
  gap: var(--raum-2);
   min-width: 1160px;
   align-items: center;
}
.strat-raster.ist-existenziell {  border-left: 3px solid var(--gold); }
.strat-raster.ist-erledigt {  opacity: 0.55; }
.strat-aktionen {  display: flex;  gap: var(--raum-1);  flex-wrap: wrap; }
.strat-erfassung {
  
  background: var(--flaeche-karte);
   border: 1px solid var(--linie);
   border-radius: var(--radius-karte);
  
  padding: var(--raum-4) var(--raum-4);
   margin-bottom: var(--raum-4);
}
.filter-schalter {
   display: inline-flex;
   align-items: center;
   gap: var(--raum-2);
   font-size: var(--groesse-hinweis);
   color: var(--text-gedimmt);
}
/* Mein Tag: strategischer Block steht oben und trägt den goldenen Rand. */
.mt-strategisch .mt-zeile.ist-existenziell {  border-left: 3px solid var(--gold);  padding-left: var(--raum-2); }
/* J5: Postausgangsbuch – Wann · Art · Empfänger · Betreff · Akte · Objekt · Wer */
.post-raster {
  
  display: grid;
   grid-template-columns: 130px 140px 200px minmax(240px, 1fr) 120px 90px 90px;
  
  gap: var(--raum-2);
   min-width: 1040px;
   align-items: center;
}
/* Zeilen ohne Aktenbezug (storniert/umgewandelt) bleiben stehen, aber stumm. */
.post-raster:not(.ist-klickbar) {  cursor: default; }
.post-raster:not(.ist-klickbar):hover {  background: none; }
/* Register: Versicherer · Nummer · Zeichen · Stand · Akte · Objekt · Status */
.sch-raster {
  
  display: grid;
   grid-template-columns: 150px 150px 120px 130px 1fr 110px 100px;
  
  gap: var(--raum-2);
   min-width: 900px;
   align-items: center;
}
/* Reiter */
.drawer-tabs {
  
  flex-shrink: 0;
   display: flex;
   flex-wrap: wrap;
   gap: var(--raum-1);
   padding: 0 var(--raum-6);
  
  border-bottom: 1px solid var(--linie);
   background: var(--flaeche-vertieft);
}
/* Die Reiter der Akte sind Pillen (.reiter). Aussehen und Zustände stehen
   beim Baustein; hier bleibt nur, was der Kopf der Akte eigen hat. */
.drawer-tab-zahl { font-variant-numeric: tabular-nums; }
/* Der einzige Scrollbereich der Schublade. */
.drawer-tafeln {
   flex: 1;
   min-height: 0;
   overflow-y: auto;
   padding: var(--raum-5) var(--raum-6) var(--raum-12);
  /* F7: das Scrollen bleibt hier drin */
   overscroll-behavior: contain;
}
.drawer-tafel > .drawer-abschnitt:first-child {  margin-top: 0; }
@media (max-height: 760px) {
.drawer-kopf {  padding: var(--raum-3) var(--raum-6) var(--raum-3); }
.drawer-stammdaten {  margin-top: var(--raum-2);  gap: var(--raum-1) var(--raum-4); }
.drawer-aktionen, .drawer-dl {  margin-top: var(--raum-2); }

.drawer-tafeln {  padding: var(--raum-4) var(--raum-6) var(--raum-8); }
}
.drawer-abschnitt {  margin-top: var(--raum-6); }
.detail-tabelle {
   display: grid;
   grid-template-columns: 130px 1fr;
   row-gap: var(--raum-2);
   font-size: var(--groesse-bedien);
}
.beschreibung-text {  white-space: pre-wrap;  font-size: var(--groesse-bedien);  margin-top: var(--raum-2); }
/* Fristen des Vorgangs: kleiner Block oben im Chronik-Reiter, nebeneinander
   statt als eigene Spalte. Fälle haben keine Fristen und damit keinen Block. */
.frist-leiste {
   display: flex;
   flex-wrap: wrap;
   gap: var(--raum-2);
   margin-bottom: var(--raum-5);
}
.frist-leiste .frist-karte {  margin-bottom: 0;  flex: 1 1 210px;  max-width: 340px; }
.frist-karte {
  
  display: block;
   padding: var(--raum-2) var(--raum-3);
   margin-bottom: var(--raum-2);
  
  background: var(--flaeche-karte);
   border: 1px solid var(--linie);
  
  border-left: 3px solid var(--text-gedimmt);
   border-radius: var(--radius-klein);
}
.frist-karte.faellig {  border-left-color: var(--gold); }
.frist-karte.ueberfaellig {  border-left-color: var(--gefahr-text);  background: var(--st-hoch-flaeche); }
.frist-karte.erledigt {  border-left-color: var(--st-erledigt-text);  opacity: 0.65; }
.frist-datum {
   font-size: var(--groesse-bedien);
   font-weight: var(--schnitt-halb);
   color: var(--text-gedimmt);
   font-variant-numeric: tabular-nums;
}
.frist-karte.ueberfaellig .frist-datum {  color: var(--gefahr-text); }
.frist-was {  font-size: var(--groesse-text);  color: var(--text-gedimmt);  margin-top: var(--raum-1); }
.frist-rest {
   font-size: var(--groesse-klein);
   color: var(--text-gedimmt);
   margin-top: var(--raum-1);
   letter-spacing: 0.3px;
}
.frist-quelle {
   font-size: var(--groesse-winzig);
   letter-spacing: 1.2px;
   text-transform: uppercase;
   color: var(--gold-text);
   font-weight: var(--schnitt-halb);
}
.drawer-aktionen {
   display: flex;
   gap: var(--raum-2);
   margin-top: var(--raum-4);
   flex-wrap: wrap;
}
/* Chronik */
.chronik-eingabe {  display: flex;  gap: var(--raum-2);  margin-bottom: var(--raum-3); }
.notiz {
  
  border-left: 3px solid var(--linie);
   padding: var(--raum-1) 0 var(--raum-1) var(--raum-3);
   margin-bottom: var(--raum-3);
}
.notiz-zeit {  font-size: var(--groesse-hinweis);  color: var(--text-gedimmt);  font-family: var(--schrift-mono); }
.notiz-text {  white-space: pre-wrap;  font-size: var(--groesse-bedien);  margin-top: var(--raum-1); }
/* Phase 3: Die Klasse hatte ihre Regel nur INNERHALB von `.notiz`. In den
   Kosten (app.js:1611) und an der Fallnotiz steht sie aber allein — dort war
   sie ein unformatierter Browserknopf mit grauem Kasten. Jetzt trägt die Klasse
   selbst, was die Tafel für sie vorsieht: keine Fläche, roter Text, 32 px. */
.knopf-notiz-loeschen {
  display: inline-flex;
  align-items: center;
  gap: var(--raum-1);
  height: 32px;
  padding: 0 var(--raum-3);
  border: 1px solid transparent;
  border-radius: var(--radius-pille);
  background: transparent;
  color: var(--gefahr-text);
  font-family: var(--schrift-text);
  font-size: var(--groesse-hinweis);
  font-weight: var(--schnitt-halb);
  cursor: pointer;
}
.knopf-notiz-loeschen:hover {  border-color: var(--gefahr-text); }
.notiz .knopf-notiz-loeschen {
  
  background: none;
   border: none;
   color: var(--text-gedimmt);
   font-size: var(--groesse-hinweis);
   cursor: pointer;
   padding: 0;
   margin-top: var(--raum-1);
}
.notiz .knopf-notiz-loeschen:hover {  color: var(--gefahr-text);  text-decoration: underline; }
/* Dateien */
.upload-zone {
  
  border: 2px dashed var(--linie);
   border-radius: var(--radius-karte);
  
  padding: var(--raum-4);
   text-align: center;
   color: var(--text-gedimmt);
   font-size: var(--groesse-text);
  
  cursor: pointer;
   margin-bottom: var(--raum-3);
   transition: border-color 0.15s, background 0.15s;
}
.upload-zone:hover, .upload-zone.aktiv {  border-color: var(--gold);  background: var(--st-aktiv-flaeche);  color: var(--gold-text); }
.datei-raster {  display: grid;  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));  gap: var(--raum-2); }
.datei-kachel {
  
  border: 1px solid var(--linie);
   border-radius: var(--radius-klein);
   overflow: hidden;
  
  background: var(--flaeche-seite);
   position: relative;
}
.datei-icon {
  
  height: 90px;
   display: grid;
   place-items: center;
  
  font-family: var(--schrift-mono);
   font-size: var(--groesse-text);
   font-weight: var(--schnitt-fett);
   color: var(--st-inarbeit-text);
}
.datei-name {
  
  font-size: var(--groesse-klein);
   padding: var(--raum-1) var(--raum-2);
   background: var(--flaeche-karte);
  
  white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
   display: block;
  
  color: var(--text-gedimmt);
   text-decoration: none;
}
.datei-name:hover {  text-decoration: underline; }
.datei-loeschen {
  
  position: absolute;
   top: 5px;
   right: 5px;
  
  background: var(--flaeche-abdunklung);
   color: var(--text);
   border: none;
   border-radius: var(--radius-kreis);
  
  width: 22px;
   height: 22px;
   font-size: var(--groesse-hinweis);
   cursor: pointer;
   line-height: 1;
}
.datei-loeschen:hover {  background: var(--gefahr-text); }
.datei-vorschau {  display: block;  text-decoration: none; }
/* F2/F3: Werkzeuge erscheinen erst beim Überfahren der Kachel, damit das
   Raster ruhig bleibt. Auf Touch dauerhaft sichtbar (kein Hover). */
.datei-werkzeuge {
  
  position: absolute;
   top: 5px;
   left: 5px;
   display: flex;
   gap: var(--raum-1);
  
  opacity: 0;
   transition: opacity 0.15s;
}
.datei-kachel:hover .datei-werkzeuge,
.datei-werkzeuge:focus-within {  opacity: 1; }
@media (hover: none) {
.datei-werkzeuge {  opacity: 1; }
}
.datei-werkzeug {
  
  background: var(--flaeche-abdunklung);
   color: var(--text);
   border: none;
   border-radius: var(--radius-kreis);
  
  width: 22px;
   height: 22px;
   font-size: var(--groesse-klein);
   cursor: pointer;
   line-height: 1;
}
.datei-werkzeug:hover {  background: var(--flaeche-leiste); }
.datei-werkzeug:focus-visible {  outline: 2px solid var(--gold);  outline-offset: 1px; }
/* F2: Zielwahl im Zuordnen-Modal – nebeneinander statt als Spalte
   (.modal label setzt sonst flex-direction: column und kippt die Punkte). */
.dz-wahl {
   display: flex;
   flex-direction: column;
   gap: var(--raum-1);
   margin-bottom: var(--raum-3);
}.modal-hintergrund {
  position: fixed;
  inset: 0;
  background: var(--flaeche-abdunklung);
  z-index: 40;
  display: grid;
  place-items: center;
  z-index: 60;
}
/* Das Zuordnungs-Modal wird aus dem Einheiten-Modal heraus geöffnet und muss
   deshalb über ihm liegen (sonst verdeckt das später im DOM stehende Einheiten-Modal es). */
#modal-zuordnung {  z-index: 70; }
/* Fläche, Rahmen, Radius, Kopf und Fuß stehen beim Baustein .modal in
   style.css. Hier bleibt nichts mehr zu sagen; die Sonderbreiten einzelner
   Dialoge stehen weiter unten bei der jeweiligen Ansicht. */
.feld-reihe {  display: grid;  grid-template-columns: 1fr 1fr;  gap: var(--raum-3); }.modal-aktionen {
  padding: var(--raum-4) var(--raum-5);
  border-top: 1px solid var(--linie);
  position: sticky;
  bottom: 0;
  z-index: 2;
  background: var(--flaeche-karte);
  display: flex;
  justify-content: flex-end;
  gap: var(--raum-2);
  margin-top: var(--raum-1);
}
/* ---------- Verlauf ---------- */
.verlauf-liste {  display: flex;  flex-direction: column;  gap: var(--raum-2); }
.verlauf-eintrag {
  
  display: flex;
   flex-wrap: wrap;
   gap: var(--raum-1) var(--raum-2);
   align-items: baseline;
  
  font-size: var(--groesse-text);
   padding-bottom: var(--raum-2);
   border-bottom: 1px solid var(--flaeche-seite);
}
.verlauf-zeit {  font-family: var(--schrift-mono);  font-size: var(--groesse-klein);  color: var(--text-gedimmt); }
.verlauf-wer {  font-weight: var(--schnitt-halb);  color: var(--st-inarbeit-text); }
.verlauf-was {  color: var(--text-gedimmt); }
/* ---------- Stornierte Notizen (append-only) ---------- */
.stornierte-schalter {
   display: flex;
   align-items: center;
   gap: var(--raum-1);
   font-size: var(--groesse-hinweis);
   color: var(--text-gedimmt);
   margin-bottom: var(--raum-3);
}
.notiz-geloescht {  display: none; }
#notizen-liste.zeige-stornierte .notiz-geloescht {  display: block;  opacity: 0.6; }
#notizen-liste.zeige-stornierte .notiz-geloescht .notiz-text {  text-decoration: line-through; }
/* ---------- Einheiten ---------- */
.feld-optional {
   font-weight: var(--schnitt-normal);
   color: var(--text-gedimmt);
   text-transform: none;
   font-size: var(--groesse-hinweis);
}
.einheiten-liste {  margin-bottom: var(--raum-4); }
.einheiten-soll {
   font-size: var(--groesse-text);
   color: var(--text-gedimmt);
   margin-bottom: var(--raum-2);
   display: flex;
   align-items: center;
   gap: var(--raum-2);
}
.einheit-zeile {
   display: flex;
   justify-content: space-between;
   align-items: center;
   gap: var(--raum-2);
   padding: var(--raum-2) 0;
   border-bottom: 1px solid var(--flaeche-seite);
}
.einheit-detail {  font-size: var(--groesse-hinweis);  color: var(--text-gedimmt);  margin-left: var(--raum-2); }
.einheit-add-titel {
   font-size: var(--groesse-hinweis);
   letter-spacing: 1.5px;
   text-transform: uppercase;
   color: var(--gold-text);
   font-weight: var(--schnitt-halb);
   margin: var(--raum-2) 0 var(--raum-3);
}
.objekt-zahlen .abzeichen {  margin-left: var(--raum-1); }
/* ---------- Personen / Kontaktkarte ---------- */
.kontaktkarte {
   margin-top: var(--raum-3);
   padding: var(--raum-3) var(--raum-3);
   background: var(--st-aktiv-flaeche);
   border: 1px solid var(--linie);
   border-radius: var(--radius-klein);
}
.kontaktkarte-titel {
   font-size: var(--groesse-hinweis);
   letter-spacing: 1.5px;
   text-transform: uppercase;
   color: var(--gold-text);
   font-weight: var(--schnitt-halb);
   margin-bottom: var(--raum-2);
}
.kontakt-zeile {
   display: flex;
   flex-wrap: wrap;
   align-items: center;
   gap: var(--raum-2);
   font-size: var(--groesse-text);
   padding: var(--raum-1) 0;
}
.zuordnung-beendet {  opacity: 0.6; }
/* ---------- CSV-Import ---------- */
.import-hinweis {
   font-size: var(--groesse-hinweis);
   color: var(--text-gedimmt);
   margin-bottom: var(--raum-3);
   line-height: 1.5;
}
.import-vorschau {  margin: var(--raum-1) 0 var(--raum-3); }
.import-summe {
   font-size: var(--groesse-text);
   color: var(--text-gedimmt);
   margin-bottom: var(--raum-2);
   padding: var(--raum-2) var(--raum-2);
   background: var(--st-aktiv-flaeche);
   border: 1px solid var(--linie);
   border-radius: var(--radius-klein);
}
.import-tabelle {  max-height: 240px;  overflow-y: auto;   /* F7: das Scrollen bleibt hier drin */
   overscroll-behavior: contain;
}
.import-zeile {
   display: flex;
   align-items: center;
   gap: var(--raum-2);
   flex-wrap: wrap;
   padding: var(--raum-1) 0;
   border-bottom: 1px solid var(--flaeche-seite);
   font-size: var(--groesse-text);
}
.import-badge {
   font-size: var(--groesse-klein);
   font-weight: var(--schnitt-halb);
   padding: var(--raum-1) var(--raum-2);
   border-radius: var(--radius-pille);
   background: var(--st-erledigt-flaeche);
   color: var(--st-erledigt-text);
}
.import-badge.bekannt {  background: var(--st-neutral-flaeche);  color: var(--text-gedimmt); }
/* E2: Personen und Dienstleister landen in verschiedenen Verzeichnissen und
   werden in der Vorschau deshalb als getrennte Blöcke gezeigt. */
.import-gruppe {
  
  display: flex;
   align-items: baseline;
   gap: var(--raum-2);
   flex-wrap: wrap;
  
  margin: var(--raum-3) 0 var(--raum-1);
   padding-bottom: var(--raum-1);
   border-bottom: 1px solid var(--gold);
  
  font-size: var(--groesse-hinweis);
   font-weight: var(--schnitt-halb);
   letter-spacing: 0.6px;
   text-transform: uppercase;
   color: var(--text);
}
/* Eigene Klasse statt .import-hinweis: die ist bereits für die Absätze in den
   Modalen vergeben und würde sonst von hier überschrieben. */
.import-gruppe-zusatz {
   font-size: var(--groesse-klein);
   font-weight: var(--schnitt-normal);
   letter-spacing: 0;
   text-transform: none;
   color: var(--text-gedimmt);
}
.import-leer {
   padding: var(--raum-2) 0;
   font-size: var(--groesse-text);
   color: var(--text-gedimmt);
   font-style: italic;
}
.import-tabelle {  max-height: 200px; }
/* ---------- 1a: Toolbar (Pillen-Filter + Segmented) ---------- */
.vg-toolbar {
   display: flex;
   align-items: center;
   gap: var(--raum-2);
   flex-wrap: wrap;
   margin-bottom: var(--raum-2);
}
.filter-pillen {
   display: flex;
   align-items: center;
   gap: var(--raum-2);
   flex-wrap: wrap;
   flex: 1;
}.pille {
  height: 33px;
  padding: 0 var(--raum-3);
  background: transparent;
  display: inline-flex;
  align-items: center;
  gap: var(--raum-2);
  white-space: nowrap;
  font-family: var(--schrift-text);
  font-size: var(--groesse-hinweis);
  font-weight: var(--schnitt-halb);
  padding: var(--raum-2) var(--raum-3);
  border-radius: var(--radius-pille);
  background: var(--flaeche-karte);
  border: 1px solid var(--linie);
  color: var(--text-gedimmt);
  cursor: pointer;
  transition: background .15s, color .15s, border-color .15s;
}
/* DREI DOPPELTE ANGABEN standen hier, und die zweite gewann jedes Mal — die
   Bauart, die dieses Projekt „Notbremse" nennt. Gemessen am 13.08.2026:

   .pille.aktiv    `background: var(--flaeche-segment-aktiv)` (im hellen Modus
                   #E6E9EF) wurde von `var(--flaeche-leiste)` (#16181C)
                   überschrieben — und `color: var(--text)` ist im hellen Modus
                   ebenfalls #16181C. Schrift und Fläche derselbe Wert:
                   **1,00 : 1**. Die aktive Pille war im hellen Modus ein
                   schwarzer Kasten ohne Wort. Sie steht in der Filterzeile von
                   „Mein Tag", am Dichteschalter, an den Mailfiltern und ab
                   heute an den Reitern der Objektakte.
   .pille:hover    `--flaeche-ueberfahren` wurde von `--flaeche-karte`
                   überschrieben; damit tat das Überfahren an der Fläche gar
                   nichts.
   .pille:focus... `--fokus-rand` wurde von `--st-inarbeit-text` überschrieben —
                   ein Schriftton als Fokusring. Die Übergabe nennt dafür
                   ausdrücklich `--fokus-rand` und `--fokus-schein`.

   In allen drei Fällen war die ERSTE Angabe die richtige. Die zweite ist weg,
   keine neue Farbe. */
.pille:hover {
  background: var(--flaeche-ueberfahren);
  color: var(--text);
}
.pille.aktiv {
  background: var(--flaeche-segment-aktiv);
  border-color: var(--linie-stark);
  color: var(--text);
}
.pille:focus-visible {
  outline: 2px solid var(--fokus-rand);
  box-shadow: var(--fokus-schein);
  outline-offset: 2px;
}
/* Segmented Control: eine zusammenhängende Fläche mit Trennern statt
   einzelner Buttons – aktiver Teil in Navy. */
.segmented {
   display: inline-flex;
   background: var(--flaeche-karte);
   border: 1px solid var(--linie);
   border-radius: var(--radius-klein);
   overflow: hidden;
   flex: none;
}
.ansicht-umschalter {  display: inline-flex;  gap: 0;  margin-bottom: 0; }
.umschalt-btn {
  
  font-family: var(--schrift-text); font-size: var(--groesse-hinweis); font-weight: var(--schnitt-halb);
  
  padding: var(--raum-2) var(--raum-4);
   border: none;
   background: none;
  
  color: var(--text-gedimmt);
   cursor: pointer;
   transition: background 0.15s, color 0.15s;
}
.umschalt-btn:hover {  background: var(--flaeche-karte); }
.umschalt-btn.aktiv {  background: var(--flaeche-segment-aktiv);  color: var(--text);  font-weight: var(--schnitt-fett); }
.umschalt-btn:focus-visible {  outline: 2px solid var(--st-inarbeit-text);  outline-offset: -2px; }
.kanban {
   display: grid;
   grid-template-columns: repeat(4, 1fr);
   gap: var(--raum-3);
   align-items: start;
}
.kanban-spalte {  background: none;  border: none;  padding: 0; }
/* 1a: Kanban-Spaltenkopf mit Statuspunkt statt Unterstrich-Linie. */
.kanban-kopf {
   font-family: var(--schrift-text); font-size: var(--groesse-hinweis); font-weight: var(--schnitt-fett);
   color: var(--text);
   margin-bottom: var(--raum-2);
   display: flex;
   align-items: center;
   gap: var(--raum-2);
}
.kanban-kopf::before {
   content: '';
   width: 8px;
   height: 8px;
   border-radius: var(--radius-kreis);
   background: var(--st-offen-text);
   flex: none;
}
.kanban-spalte.status-in_arbeit .kanban-kopf::before {  background: var(--st-inarbeit-text); }
.kanban-spalte.status-wartend .kanban-kopf::before {  background: var(--st-neutral-text); }
.kanban-spalte.status-erledigt .kanban-kopf::before {  background: var(--st-erledigt-text); }
.kanban-anzahl {  color: var(--text-gedimmt);  font-weight: var(--schnitt-halb);  margin-left: auto; }
.kanban-drop {
   display: flex;
   flex-direction: column;
   gap: var(--raum-2);
   min-height: 48px;
   border-radius: var(--radius-klein);
   padding: var(--raum-1);
}
.kanban-drop.drueber {  background: var(--st-aktiv-flaeche);  outline: 2px dashed var(--gold); }
.kanban-karte {
  
  background: var(--flaeche-karte);
   border: 1px solid var(--linie);
  
  border-radius: var(--radius-klein);
   padding: var(--raum-3);
   cursor: grab;
}
.kanban-karte:focus-visible {  outline: 2px solid var(--st-inarbeit-text);  outline-offset: 2px; }
.kanban-karte.zieht {  opacity: 0.45; }
.kanban-az {  font-family: var(--schrift-mono); font-size: var(--groesse-klein); font-weight: var(--schnitt-halb);  color: var(--text-gedimmt);  margin-bottom: var(--raum-1); }
.kanban-titel {  font-family: var(--schrift-text); font-size: var(--groesse-hinweis); font-weight: var(--schnitt-halb);  color: var(--text);  margin-bottom: var(--raum-1); }
.kanban-meta {  font-family: var(--schrift-text); font-size: var(--groesse-klein); font-weight: var(--schnitt-halb);  color: var(--text-gedimmt); }
.kanban-pfeile {  display: flex;  gap: var(--raum-1);  margin-top: var(--raum-2); }
.knopf-pfeil {
  
  border: 1px solid var(--linie);
   background: var(--flaeche-karte);
   /* Wie jeder Knopf: `--radius-pille`. Die Maße 30 × 24 bleiben dagegen — die
      Tafel zeigt `.knopf-pfeil` als Knopf normaler Größe, in LV ist er aber der
      Statuspfeil INNERHALB einer 48-px-Zeile. 40 px hoch würde die Zeile
      sprengen. Abweichung mit Grund, nicht aus Nachlässigkeit. */
   border-radius: var(--radius-pille);

  width: 30px;
   height: 24px;
   cursor: pointer;
   color: var(--text);
   font-size: var(--groesse-text);
   line-height: 1;
}
.knopf-pfeil:hover:not(:disabled) {  background: var(--flaeche-karte); }
.knopf-pfeil:disabled {  opacity: 0.3;  cursor: default; }
/* ---------- Vorgangstypen / Checkliste (C2) ---------- */
.checkliste-fortschritt {
   font-size: var(--groesse-hinweis);
   color: var(--text-gedimmt);
   font-weight: var(--schnitt-halb);
   text-transform: none;
   letter-spacing: 0;
}
#aufgaben-liste {  margin-bottom: var(--raum-3); }
/* Sechs Regeln standen hier — `.aufgabe-block`, `.aufgabe`, `.aufgabe-text`,
   `.aufgabe-kopf`, `.aufgabe-von`, `.aufgaben-fertig`. Sie gehörten zur flachen
   Kästchenliste, die der geführte Ablauf (Phase 4, Ansicht 3) ersetzt hat;
   gezählt am 13.08.2026 kam keine der sechs Klassen noch im Markup vor. Die
   neuen Regeln heißen `.ablauf-*` und stehen am Ende dieser Datei, nach allem,
   worauf sie zugreifen. Dass sie dort stehen und nicht hier, ist Absicht —
   siehe die Begründung im Kopf jenes Abschnitts. */
.aufgabe-loeschen {
   background: none;
   border: none;
   color: var(--text-gedimmt);
   cursor: pointer;
   font-size: var(--groesse-text);
   padding: 0 var(--raum-1);
   flex-shrink: 0;
}
.aufgabe-loeschen:hover {  color: var(--gefahr-text); }
.aufgabe-frist-zeile {
   display: flex;
   align-items: center;
   gap: var(--raum-3);
   flex-wrap: wrap;
   margin: var(--raum-2) 0 var(--raum-1) var(--raum-6);
}
.aufgabe-fristen-opt {
   display: flex;
   align-items: center;
   gap: var(--raum-1);
   font-size: var(--groesse-hinweis);
   color: var(--text-gedimmt);
   cursor: pointer;
   margin: 0;
}
.aufgabe-frist-datum {
   width: auto;
   font-size: var(--groesse-hinweis);
   padding: var(--raum-1) var(--raum-1);
   font-family: var(--schrift-mono);
}
.aufgabe-frist-datum.ueberfaellig {  border-color: var(--gefahr-text);  color: var(--gefahr-text); }
.aufgabe-richtwert {  font-size: var(--groesse-klein);  color: var(--text-gedimmt);  font-style: italic; }
/* ---------- Einstellungen (C2) ---------- */
.einstell-block {
   margin-bottom: var(--raum-6);
   background: var(--flaeche-karte);
   border: 1px solid var(--linie);
   border-radius: var(--radius-karte);
   padding: var(--raum-4) var(--raum-5);
}
.einstell-kopf {
   display: flex;
   align-items: center;
   justify-content: space-between;
   margin-bottom: var(--raum-1);
   gap: var(--raum-2);
}
.einstell-hinweis {  font-size: var(--groesse-hinweis);  color: var(--text-gedimmt);  margin-bottom: var(--raum-3); }
.einstell-liste {  display: flex;  flex-direction: column; }
.einstell-zeile {
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: var(--raum-2);
   padding: var(--raum-2) 0;
   border-bottom: 1px solid var(--flaeche-seite);
}
.einstell-zeile:last-child {  border-bottom: none; }
/* F5: Wiedervorlage im Drawer-Kopf – setzen und erledigen ohne Dialogumweg. */
.wv-knopf {
   font-size: var(--groesse-klein);
   font-family: inherit;
   color: var(--gold-text);
   background: none;
  
  border: 1px solid var(--gold);
   border-radius: var(--radius-feld);
   padding: var(--raum-1) var(--raum-2);
   margin-left: var(--raum-1);
  
  cursor: pointer;
}
.wv-knopf:hover {  background: var(--st-aktiv-flaeche); }
.wv-wert {  font-weight: var(--schnitt-halb); }
.frist-art-wiedervorlage {  background: var(--st-aktiv-flaeche);  color: var(--gold-text); }
/* F1: eine veraltete oder fehlgeschlagene Sicherung muss ins Auge fallen. */
.einstell-zeile.backup-warnung {
   border-left: 3px solid var(--gefahr-text);
   padding-left: var(--raum-2);
   background: var(--st-hoch-flaeche);
}
/* ---------- Anrufe / Eingangskorb (C10) ---------- */
.anruf-erfassung {
   background: var(--flaeche-karte);
   border: 1px solid var(--linie);
   border-radius: var(--radius-karte);
   padding: var(--raum-4) var(--raum-5);
   margin-bottom: var(--raum-5);
}
.anruf-karte {  border-left-color: var(--st-inarbeit-text); }
.anruf-karte.wv-faellig {  border-left-color: var(--gefahr-text); }
.anruf-notiz {
   font-size: var(--groesse-text);
   color: var(--text-gedimmt);
   margin-top: var(--raum-2);
   white-space: pre-wrap;
}
.anruf-herkunft {  font-size: var(--groesse-hinweis);  color: var(--st-erledigt-text);  margin-top: var(--raum-2); }
.anruf-status-wahl {  padding: var(--raum-1) var(--raum-2);  background: var(--flaeche-karte); }
/* ---------- Auswertungen (C7) ---------- */
.kennzahl-raster {
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
   gap: var(--raum-3);
   margin-bottom: var(--raum-6);
}
.kennzahl-karte {
   background: var(--flaeche-karte);
   border: 1px solid var(--linie);
   border-left: 4px solid var(--gold);
   border-radius: var(--radius-karte);
   padding: var(--raum-4) var(--raum-4);
}
.kennzahl-wert {
   font-family: var(--schrift-display);
   font-size: var(--groesse-titel);
   font-weight: var(--schnitt-halb);
   color: var(--text);
}
.kennzahl-label {  font-size: var(--groesse-hinweis);  color: var(--text-gedimmt);  margin-top: var(--raum-1); }
.chart-block {
   background: var(--flaeche-karte);
   border: 1px solid var(--linie);
   border-radius: var(--radius-karte);
   padding: var(--raum-4) var(--raum-5);
   margin-bottom: var(--raum-5);
}
.chart-svg {  width: 100%;  height: auto;  display: block; }
.chart-leer {  color: var(--text-gedimmt);  font-size: var(--groesse-text); }
.dl-objekt-wahl {
   display: flex;
   flex-wrap: wrap;
   gap: var(--raum-2) var(--raum-4);
   margin-bottom: var(--raum-3);
   max-height: 140px;
   overflow-y: auto;
  /* F7: das Scrollen bleibt hier drin */
   overscroll-behavior: contain;
}
/* ---------- Fristen-Cockpit (C3) ---------- */
.ics-hinweis {
   background: var(--flaeche-karte);
   border: 1px solid var(--linie);
   border-radius: var(--radius-karte);
   padding: var(--raum-3) var(--raum-4);
   margin-bottom: var(--raum-5);
}
.ics-zeile {
   display: flex;
   align-items: center;
   gap: var(--raum-2);
   flex-wrap: wrap;
   margin-top: var(--raum-2);
}
.ics-sub {  font-size: var(--groesse-hinweis);  color: var(--text-gedimmt); }
.frist-gruppe {  margin-bottom: var(--raum-5); }
.frist-anzahl {
   background: var(--st-neutral-flaeche);
   color: var(--text-gedimmt);
   font-size: var(--groesse-klein);
   padding: var(--raum-1) var(--raum-2);
   border-radius: var(--radius-pille);
   letter-spacing: 0;
}
.frist-gruppe.ueber .frist-anzahl {  background: var(--st-hoch-flaeche);  color: var(--gefahr-text); }
.frist-zeile {
   display: grid;
   grid-template-columns: 96px 84px 1fr auto;
   align-items: center;
   gap: var(--raum-3);
   padding: var(--raum-2) var(--raum-3);
   background: var(--flaeche-karte);
   border: 1px solid var(--linie);
   border-left: 3px solid var(--linie);
   border-radius: var(--radius-klein);
   margin-bottom: var(--raum-2);
   cursor: pointer;
   transition: transform 0.1s;
}
.frist-zeile:hover {  transform: translateY(-1px); }
.frist-gruppe.ueber .frist-zeile {  border-left-color: var(--gefahr-text); }
.frist-gruppe.heute .frist-zeile {  border-left-color: var(--gold); }
.frist-datum {  font-family: var(--schrift-mono);  font-size: var(--groesse-hinweis);  color: var(--text-gedimmt); }
.frist-art {
   font-size: var(--groesse-klein);
   font-weight: var(--schnitt-halb);
   padding: var(--raum-1) var(--raum-2);
   border-radius: var(--radius-pille);
   text-align: center;
}
.frist-art-vorgang {  background: var(--st-aktiv-flaeche);  color: var(--gold-text); }
.frist-art-aufgabe {  background: var(--st-inarbeit-flaeche);  color: var(--st-inarbeit-text); }
.frist-art-rueckruf {  background: var(--st-erledigt-flaeche);  color: var(--st-erledigt-text); }
.frist-art-dokument {  background: var(--st-neutral-flaeche);  color: var(--text-gedimmt); }.modal-gross {
  width: min(var(--breite-dialog-gross), 94vw);
  width: min(760px, 94vw);
}
/* Ansicht 15: die Ablagefläche ist ein gestrichelter Rahmen auf der
   vertieften Fläche - so sieht man, wohin die Datei fallen darf. */
.doku-dropzone {
   border: 2px dashed var(--linie-stark);
   border-radius: var(--radius-karte);
   background: var(--flaeche-vertieft);
   padding: var(--raum-4) var(--raum-4);
   margin-bottom: var(--raum-4);
   transition: border-color .15s, background .15s;
}
.doku-dropzone-aktiv {  border-color: var(--gold, var(--gold));  background: var(--st-aktiv-flaeche); }
.doku-dropzone-hinweis {  margin: 0 0 var(--raum-3);  font-size: var(--groesse-bedien);  color: var(--text); }
.doku-felder {  display: grid;  grid-template-columns: 1fr 1fr;  gap: 0 var(--raum-3); }
.doku-gruppe {  margin-bottom: var(--raum-3); }
.doku-zeile {
  
  display: flex;
   align-items: center;
   gap: var(--raum-2);
   flex-wrap: wrap;
  
  padding: var(--raum-2) 0;
   border-bottom: 1px solid var(--flaeche-seite);
   font-size: var(--groesse-text);
}
.doku-name {  font-weight: var(--schnitt-halb);  color: var(--text);  text-decoration: none; }
.doku-name:hover {  text-decoration: underline; }
.doku-meta {  font-size: var(--groesse-hinweis);  color: var(--text-gedimmt); }
.doku-gueltig {  font-size: var(--groesse-hinweis);  color: var(--gold-text);  font-family: var(--schrift-mono); }
.doku-gueltig.ueberfaellig {  color: var(--gefahr-text);  font-weight: var(--schnitt-halb); }
/* ---------- D3: Versammlungen & Beschluss-Sammlung ---------- */
.vers-tab.aktiv {  background: var(--flaeche-segment-aktiv);  color: var(--text);  border-color: var(--linie-stark); }
.vers-karte {  padding: 0;  overflow: hidden; }
.vers-kopf {
   display: flex;
   justify-content: space-between;
   align-items: center;
   padding: var(--raum-4) var(--raum-5);
   cursor: pointer;
}
.vers-kopf:hover {  background: var(--st-aktiv-flaeche); }.vers-pfeil {
  display: inline-flex;
  color: var(--gold-text);
  font-size: var(--groesse-bedien);
}
.vers-detail {  padding: var(--raum-1) var(--raum-5) var(--raum-4);  border-top: 1px solid var(--flaeche-seite); }
.vers-aktionen {
   display: flex;
   gap: var(--raum-2);
   margin-top: var(--raum-3);
   flex-wrap: wrap;
}
.top-zeile {
   display: flex;
   align-items: center;
   gap: var(--raum-2);
   padding: var(--raum-2) 0;
   border-bottom: 1px solid var(--flaeche-seite);
   font-size: var(--groesse-text);
   flex-wrap: wrap;
}
.top-nr {
   font-family: var(--schrift-mono);
   font-size: var(--groesse-hinweis);
   color: var(--gold-text);
   font-weight: var(--schnitt-halb);
   flex-shrink: 0;
}
.top-titel {  flex: 1; }
.feld-reihe-3 {  grid-template-columns: 1fr 1fr 1fr; }
.feld-checkbox {  justify-content: flex-end; }
.ergebnis-badge {
   font-size: var(--groesse-klein);
   font-weight: var(--schnitt-halb);
   padding: var(--raum-1) var(--raum-2);
   border-radius: var(--radius-pille);
   white-space: nowrap;
}
.ergebnis-angenommen {  background: var(--st-erledigt-flaeche);  color: var(--st-erledigt-text); }
.ergebnis-abgelehnt {  background: var(--st-hoch-flaeche);  color: var(--gefahr-text); }
.ergebnis-ungueltig {  background: var(--st-neutral-flaeche);  color: var(--text-gedimmt); }
.ergebnis-angefochten {  background: var(--st-aktiv-flaeche);  color: var(--gold-text); }
.ergebnis-aufgehoben {  background: var(--st-neutral-flaeche);  color: var(--text-gedimmt);  text-decoration: line-through; }
.beschluss-zeile {
   background: var(--flaeche-karte);
   border: 1px solid var(--flaeche-seite);
   border-radius: var(--radius-karte);
   padding: var(--raum-3) var(--raum-4);
   margin-bottom: var(--raum-2);
}
.beschluss-kopf {
   display: flex;
   align-items: center;
   gap: var(--raum-3);
   flex-wrap: wrap;
   margin-bottom: var(--raum-1);
}
.beschluss-nr {  font-family: var(--schrift-mono);  font-weight: var(--schnitt-fett);  color: var(--text); }
.beschluss-datum {  font-size: var(--groesse-hinweis);  color: var(--text-gedimmt); }
.beschluss-anfechtung {  font-size: var(--groesse-hinweis);  color: var(--gold-text); }
.beschluss-text {  margin: 0 0 var(--raum-2);  font-size: var(--groesse-bedien);  line-height: 1.45; }
.beschluss-fuss {
   display: flex;
   align-items: center;
   gap: var(--raum-3);
   flex-wrap: wrap;
   font-size: var(--groesse-hinweis);
   color: var(--text-gedimmt);
}
.beschluss-notiz {  font-style: italic; }
.beschluss-aktionen {  margin-left: auto;  display: flex;  gap: var(--raum-2); }
/* ---------- D4: Verträge ---------- */
.vertrag-art-badge {  background: var(--flaeche-vertieft);  color: var(--text); }
.vertrag-daten {
   display: flex;
   gap: var(--raum-3);
   flex-wrap: wrap;
   font-size: var(--groesse-text);
   color: var(--text);
   margin-bottom: var(--raum-2);
}
.vertrag-stichtag {  font-weight: var(--schnitt-halb); }
.vertrag-stichtag.bald {  color: var(--gold-text); }
.vertrag-stichtag.ueberfaellig {  color: var(--gefahr-text); }
.modal-checkzeile {  justify-content: center; }
/* ---------- Interner Datei-Viewer ---------- */
#modal-viewer {  z-index: 90; }.modal-viewer {
  width: min(var(--breite-dialog-ansicht), 96vw);
  width: min(1040px, 96vw);
  height: 92vh;
  max-height: 92vh;
  padding: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.viewer-kopf {
  
  display: flex;
   align-items: center;
   justify-content: space-between;
   gap: var(--raum-3);
  
  padding: var(--raum-3) var(--raum-4) var(--raum-3) var(--raum-5);
   border-bottom: 1px solid var(--flaeche-seite);
   flex-shrink: 0;
}
.viewer-name {
   font-weight: var(--schnitt-halb);
   color: var(--text);
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
}
.viewer-aktionen {  display: flex;  gap: var(--raum-2);  flex-shrink: 0; }
.viewer-body {
   flex: 1;
   overflow: auto;
   display: flex;
   background: var(--flaeche-seite);
   min-height: 0;
  /* F7: das Scrollen bleibt hier drin */
   overscroll-behavior: contain;
}
.viewer-body-text {  background: var(--flaeche-karte); }
.viewer-text {
  
  width: 100%;
   margin: 0;
   padding: var(--raum-4) var(--raum-5);
   font-family: var(--schrift-mono);
  
  font-size: var(--groesse-text);
   line-height: 1.55;
   white-space: pre-wrap;
   word-break: break-word;
   color: var(--text-gedimmt);
}
.viewer-hinweis {
   margin: auto;
   text-align: center;
   color: var(--text-gedimmt);
   padding: var(--raum-8) var(--raum-8);
   display: grid;
   gap: var(--raum-4);
   justify-items: center;
}
/* ---------- D6: Dokumenten-Ansicht mit Ordnern ---------- */
/* F6: Ordnerliste und Dokumentenliste scrollen für sich.
   Gemessen war die Ordnerliste 1898 px hoch in einem 800-px-Fenster, beide
   Spalten auf `overflow-y: visible` – man scrollte also die ganze Seite nach
   unten, um einen Ordner zu wählen, und wieder nach oben, um die Dokumente zu
   sehen, die oben mit 163 px Höhe standen.
   Der Block bekommt deshalb eine begrenzte Höhe (Fenster minus Kopfleiste und
   Filterzeile), und beide Spalten scrollen darin. `min-height: 0` ist nötig,
   sonst wächst eine Rasterzelle über ihre Zeile hinaus und der Deckel wirkt
   nicht. */
/* Die Uebergabe nennt fuer Ansicht 6 genau 260 px. Der Baum hatte 240; zwanzig
   Pixel mehr kosten die Liste nichts und ersparen dem laengsten Ordnernamen den
   Umbruch.

   DIESER KOMMENTAR STEHT ABSICHTLICH VOR DEM BLOCK, nicht darin. `f-prueflauf.js`
   prüft „die Rasterzeile ist an den Behaelter gebunden" mit einem Fenster von
   700 Zeichen ab `.doku-layout {` — vier Zeilen Kommentar im Block schoben
   `grid-template-rows` aus diesem Fenster, und die Prüfung schlug fehl, obwohl
   die Regel unverändert dastand. Die Prüfung ist damit spröde; sie hier
   umzuschreiben, damit mein Kommentar hineinpasst, wäre aber die falsche
   Richtung. Der Kommentar zieht um, die Prüfung bleibt. */
.doku-layout {
   display: grid;
   grid-template-columns: 260px 1fr;
   gap: var(--raum-4);
   align-items: stretch;
   /* 19rem ist gemessen, nicht geraten: der Block beginnt bei y=286 (Kopfleiste
      und Filterzeile darüber), und bei 800 px Fensterhöhe soll seine Unterkante
      im Fenster bleiben. 800 - 304 = 496, Unterkante 782. */
   max-height: calc(100vh - 19rem);
   min-height: 22rem;
   /* Der Deckel allein genügt nicht: die Rasterzeile richtet sich sonst nach
      ihrem Inhalt und wächst über den Behälter hinaus (gemessen: Behälter
      560 px, Zeile 1898 px). minmax(0, 1fr) bindet die Zeile an den Behälter,
      erst dann können die Spalten in sich scrollen. */
   grid-template-rows: minmax(0, 1fr);
}
.doku-layout > * {  min-height: 0;  overflow-y: auto;
  /* F7: das Scrollen bleibt hier drin */
   overscroll-behavior: contain; }
/* A3: In der Liste gibt es keinen Baum – dann darf seine Spalte auch nicht
   stehenbleiben. `hidden` am Baum nimmt ihn aus dem Fluss, die Rasterspalte
   bliebe aber 240 px breit reserviert; die Namensspalte hätte 240 px weniger. */
.doku-layout.ohne-baum {  grid-template-columns: 1fr; }
@media (max-width: 860px) {
.doku-layout {  grid-template-columns: 1fr; }
}
.doku-baum {
  
  background: var(--flaeche-karte);
   border: 1px solid var(--flaeche-seite);
   border-radius: var(--radius-karte);
  
  padding: var(--raum-1);
}
.baum-eintrag {
  
  display: flex;
   align-items: center;
   gap: var(--raum-2);
   padding: var(--raum-2) var(--raum-2);
   border-radius: var(--radius-klein);
  
  font-size: var(--groesse-text);
   color: var(--text-gedimmt);
   cursor: pointer;
}
.baum-eintrag:hover {  background: var(--st-aktiv-flaeche); }
.baum-eintrag.aktiv {  background: var(--st-aktiv-flaeche);  color: var(--gold-text); }
.baum-eintrag.aktiv .baum-anzahl {  color: var(--text); }
.baum-eintrag.baum-ziel {  outline: 2px dashed var(--gold);  outline-offset: -2px;  background: var(--st-aktiv-flaeche); }
.ordner-icon {  color: var(--gold-text);  flex-shrink: 0; }
.baum-eintrag.aktiv .ordner-icon {  color: var(--gold-text); }
.baum-name {
   flex: 1;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
}
.baum-anzahl {  font-size: var(--groesse-klein);  color: var(--text-gedimmt);  font-family: var(--schrift-mono); }
.baum-aktionen {  display: flex;  gap: var(--raum-1);  opacity: 0; }
.baum-eintrag:hover .baum-aktionen, .baum-eintrag:focus-within .baum-aktionen {  opacity: 1; }
.baum-trenner {  height: 1px;  background: var(--flaeche-seite);  margin: var(--raum-1) var(--raum-1); }
.doku-breadcrumb {
   display: flex;
   align-items: center;
   gap: var(--raum-1);
   flex-wrap: wrap;
   margin-bottom: var(--raum-3);
   font-size: var(--groesse-text);
}
.krume {
   background: none;
   border: none;
   padding: var(--raum-1) var(--raum-1);
   border-radius: var(--radius-feld);
   color: var(--st-inarbeit-text);
   cursor: pointer;
   font-size: var(--groesse-text);
}
.krume:hover {  background: var(--st-aktiv-flaeche); }
.krume.aktiv {  color: var(--text);  font-weight: var(--schnitt-halb); }
.krume-pfeil {  color: var(--text-gedimmt); }
.doku-griff {
   color: var(--text-gedimmt);
   cursor: grab;
   font-size: var(--groesse-text);
   flex-shrink: 0;
}
.doku-zeile[draggable="true"]:active {  cursor: grabbing; }
.doku-ordner-wahl {
   width: auto;
   font-size: var(--groesse-hinweis);
   padding: var(--raum-1) var(--raum-1);
   max-width: 170px;
   margin-left: auto;
}
.unterordner-zeile {  cursor: pointer; }
.unterordner-zeile:hover {  background: var(--st-aktiv-flaeche); }
/* K2.4: Der Treffer war EINE Zeile mit `white-space: nowrap` und
   `text-overflow: ellipsis`. Gemessen: 773 px Inhalt in einem 710 px breiten
   Knopf — der Absender stand da und lag hinter dem Rand. Jetzt zwei Zeilen: die
   Kennzeile, darunter die Merkmale. Das Kürzen bleibt, aber je Zeile, damit
   nicht die zweite die erste verdrängt. */
.suche-treffer {
  
  display: block;
   width: 100%;
   text-align: left;
   background: none;
   border: none;
  
  padding: var(--raum-2) var(--raum-2);
   border-radius: var(--radius-klein);
   font-size: var(--groesse-text);
   color: var(--text);
   cursor: pointer;
}
.suche-titel,
.suche-meta {
   display: block;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
}
.suche-meta {
   margin-top: 1px;
   font-size: var(--groesse-hinweis);
   color: var(--text-gedimmt);
}
.suche-treffer:hover, .suche-treffer:focus-visible {  background: var(--st-aktiv-flaeche); }
.suche-leer {  padding: var(--raum-3);  font-size: var(--groesse-text);  color: var(--text-gedimmt); }
/* N5.2: In der Gruppe „Bereiche" steht hinter dem Namen, in welcher Rubrik der
   Bereich liegt — sonst findet man ihn zwar, weiß aber beim nächsten Mal
   wieder nicht, wo er steht. */
.suche-bereich-rubrik {  color: var(--text-gedimmt);  font-size: var(--groesse-hinweis); }
/* ---------- D5: Aktivitäts-Feed ---------- */
.aktivitaet-zeile {
  
  display: flex;
   align-items: baseline;
   gap: var(--raum-3);
   flex-wrap: wrap;
  
  padding: var(--raum-2) var(--raum-3);
   background: var(--flaeche-karte);
   border: 1px solid var(--flaeche-seite);
   border-radius: var(--radius-klein);
   margin-bottom: var(--raum-2);
  
  font-size: var(--groesse-text);
}
.aktivitaet-zeile.klickbar {  cursor: pointer; }
.aktivitaet-zeile.klickbar:hover {  border-color: var(--gold); }
.aktivitaet-zeit {
   font-family: var(--schrift-mono);
   font-size: var(--groesse-hinweis);
   color: var(--text-gedimmt);
   flex-shrink: 0;
}
.aktivitaet-entitaet {  background: var(--flaeche-vertieft);  color: var(--text); }
.aktivitaet-text {  flex: 1;  min-width: 200px; }
.aktivitaet-bearbeiter {  font-size: var(--groesse-hinweis);  color: var(--gold-text); }
/* ---------- B: Die Objektseite ----------
   Name, Anschrift und ALLE Kennzahlen in einer Zeile oben. Vorher standen die
   fünf Zahlen bei y = 160, 668 und 1176 — nicht weil sie so gesetzt waren,
   sondern weil die ganze Seite in das Kartenraster der Objektliste gepourt
   wurde und deren Rasterzeilen sich streckten. */
.objekt-kopf {
   display: flex;
   flex-wrap: wrap;
   align-items: center;
   gap: var(--raum-4);
   padding: var(--raum-3) var(--raum-4);
   margin-bottom: var(--raum-4);
   background: var(--flaeche-karte);
   border: 1px solid var(--linie);
   border-radius: var(--radius-karte);
}
.objekt-kopf-titel {  display: flex;  flex-wrap: wrap;  align-items: baseline;  gap: var(--raum-3); }
.objekt-kopf-aktionen {  display: flex;  align-items: center;  gap: var(--raum-2);  margin-left: auto; }
.kennzahlen {
   display: flex;
   flex-wrap: wrap;
   gap: var(--raum-5);
}
.kennzahl-teil {  display: block;  font-weight: var(--schnitt-normal);  color: var(--text-gedimmt);  font-size: var(--groesse-hinweis); }
/* Drei Spalten, drei Fragen. `align-items: stretch` ist hier Absicht: die
   Spalten sollen gleich hoch sein. Damit der Inhalt darin trotzdem oben
   aneinandersteht statt über die Höhe verteilt zu werden, ist jede Spalte
   selbst ein Flexstapel mit `flex-start`. Genau das fehlte vorher. */
.objekt-spalten {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   gap: var(--raum-4);
   align-items: stretch;
}
.objekt-spalte {
   display: flex;
   flex-direction: column;
   justify-content: flex-start;
   gap: var(--raum-3);
   min-width: 0;
}
.objekt-spalte-frage {
   margin: 0;
   font-size: var(--groesse-hinweis);
   text-transform: uppercase;
   letter-spacing: 1px;
   color: var(--text-gedimmt);
}
.objekt-fuss {
   display: flex;
   justify-content: flex-end;
   margin-top: var(--raum-5);
   padding-top: var(--raum-3);
   border-top: 1px solid var(--linie);
}
.objekt-weg {  margin-left: auto;  color: var(--gold-text);  font-size: var(--groesse-klein); }
@media (max-width: 1100px) {
  .objekt-spalten {  grid-template-columns: 1fr; }
}
/* ---------- D5: Objekt-Dashboard ---------- */
.dash-kopf {
   display: flex;
   align-items: baseline;
   gap: var(--raum-3);
   flex-wrap: wrap;
   margin-bottom: var(--raum-4);
}
.dash-abschnitt {
   background: var(--flaeche-karte);
   border: 1px solid var(--flaeche-seite);
   border-radius: var(--radius-karte);
   padding: var(--raum-3) var(--raum-4);
   margin-bottom: var(--raum-4);
}
/* In den drei Spalten macht `gap` den Abstand – ein zusätzlicher Rand darunter
   wäre der doppelte. */
.objekt-spalte .dash-abschnitt {  margin-bottom: 0; }
.objekt-karte.klickbar {  cursor: pointer; }
.objekt-karte.klickbar:hover {  border-color: var(--gold); }
.dash-zeile {
   display: flex;
   align-items: baseline;
   gap: var(--raum-2);
   flex-wrap: wrap;
   padding: var(--raum-1) 0;
   border-bottom: 1px solid var(--flaeche-seite);
   font-size: var(--groesse-text);
}
.dash-zeile:last-child {  border-bottom: none; }
.dash-zeile.klickbar {  cursor: pointer;  border-radius: var(--radius-klein); }
.dash-zeile.klickbar:hover {  background: var(--st-aktiv-flaeche); }
.dash-zeile-titel {  flex: 1;  min-width: 140px; }
.frist-titel {  font-size: var(--groesse-bedien);  color: var(--text);  font-weight: var(--schnitt-halb); }
.frist-objekt {  font-size: var(--groesse-hinweis);  color: var(--text-gedimmt);  text-align: right; }
@media (max-width: 620px) {
.frist-zeile {  grid-template-columns: 1fr auto; }
.frist-objekt {  display: none; }
}
@media (max-width: 767px) {
.feld-reihe {  grid-template-columns: 1fr; }
.detail-tabelle {  grid-template-columns: 110px 1fr; }
}
/* E3: kleine Tastenkennzeichnung im Schließen-Knopf */
.taste-hinweis {
  
  font-size: var(--groesse-winzig);
   letter-spacing: 0.5px;
   color: var(--text-gedimmt);
  
  border: 1px solid var(--linie);
   border-radius: var(--radius-feld);
   padding: var(--raum-1) var(--raum-1);
   margin-left: var(--raum-1);
}
/* ---------- Fälle (E4) ---------- */
.fall-karte {  border-left-color: var(--st-inarbeit-text); }
.fall-vorschau {
   margin-top: var(--raum-2);
   font-size: var(--groesse-text);
   color: var(--text-gedimmt);
   line-height: 1.45;
}
.fall-merkmal {
  
  margin-top: var(--raum-3);
   padding: var(--raum-2) var(--raum-3);
   font-size: var(--groesse-hinweis);
   line-height: 1.45;
   color: var(--text-gedimmt);
  
  background: var(--st-aktiv-flaeche);
   border: 1px solid var(--linie);
   border-radius: var(--radius-klein);
}
/* ---------- Fotos (E5) ---------- */
.foto-galerie {  display: grid;  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));  gap: var(--raum-3); }
.foto-kachel {
  
  background: var(--flaeche-karte);
   border: 1px solid var(--linie);
   border-radius: var(--radius-karte);
  
  overflow: hidden;
   display: flex;
   flex-direction: column;
}
.foto-herkunft {
  
  justify-self: start;
   font-size: var(--groesse-winzig);
   font-weight: var(--schnitt-halb);
   letter-spacing: 0.8px;
  
  text-transform: uppercase;
   padding: var(--raum-1) var(--raum-2);
   border-radius: var(--radius-pille);
  
  background: var(--st-neutral-flaeche);
   color: var(--text-gedimmt);
}
.foto-herkunft-vorgang {  background: var(--st-aktiv-flaeche);  color: var(--gold-text); }
.foto-herkunft-fall {  background: var(--st-inarbeit-flaeche);  color: var(--st-inarbeit-text); }
.foto-herkunft-protokoll {  background: var(--st-erledigt-flaeche);  color: var(--st-erledigt-text); }
.foto-quelle {  color: var(--text-gedimmt);  line-height: 1.35;  overflow-wrap: anywhere; }
.foto-datum {  color: var(--text-gedimmt);  font-size: var(--groesse-klein); }
/* `opacity: .45` ist hier entfallen: Fläche, Rahmen und Schrift stehen oben bei
   `.knopf-aus` als eigene Werte. Das Durchsichtigmachen hätte sie noch einmal
   ausgeblichen und dabei auch den Rahmen mitgenommen. `pointer-events` bleibt —
   das ist die Sperre, nicht die Optik. */
.knopf-aus {  pointer-events: none; }.modal-breit {
  width: min(var(--breite-dialog-breit), 96vw);
  width: min(980px, 96vw);
  max-height: 92vh;
  overflow-y: auto;
  overscroll-behavior: contain;
}
.onb-kopf {
   display: flex;
   justify-content: space-between;
   align-items: flex-start;
   gap: var(--raum-3);
   margin-bottom: var(--raum-3);
}
.onb-unterzeile {  font-size: var(--groesse-text);  color: var(--text-gedimmt); }
.onb-liste {
   display: flex;
   flex-direction: column;
   gap: var(--raum-2);
   margin: var(--raum-3) 0;
}
.onb-eintrag {
  
  display: grid;
   gap: var(--raum-1);
   text-align: left;
   cursor: pointer;
  
  background: var(--flaeche-karte);
   border: 1px solid var(--linie);
  
  border-left: 3px solid var(--gold);
   border-radius: var(--radius-klein);
   padding: var(--raum-3) var(--raum-3);
  
  font-family: var(--schrift-text);
}
.onb-eintrag:hover {  background: var(--flaeche-seite); }
.onb-eintrag-titel {  font-size: var(--groesse-bedien);  font-weight: var(--schnitt-halb);  color: var(--text); }
.onb-eintrag-meta {  font-size: var(--groesse-hinweis);  color: var(--text-gedimmt); }
.onb-leiste {
   display: flex;
   align-items: center;
   gap: var(--raum-2);
   flex-wrap: wrap;
   margin-bottom: var(--raum-3);
}
.onb-balken {
   flex: 1;
   min-width: 120px;
   height: 7px;
   background: var(--flaeche-seite);
   border-radius: var(--radius-pille);
   overflow: hidden;
}
.onb-balken-fuell {  height: 100%;  background: var(--st-erledigt-text);  transition: width 0.2s; }
.onb-fortschritt {
   font-size: var(--groesse-hinweis);
   color: var(--text-gedimmt);
   font-variant-numeric: tabular-nums;
}
.onb-abschnitt {  margin-top: var(--raum-5); }
.onb-punkt {
  
  display: grid;
   grid-template-columns: minmax(0, 1fr) auto minmax(140px, 240px) auto;
  
  align-items: center;
   gap: var(--raum-2);
   padding: var(--raum-1) 0;
   border-bottom: 1px solid var(--flaeche-seite);
}
.onb-wann {  font-size: var(--groesse-klein);  color: var(--text-gedimmt);  white-space: nowrap; }
.onb-bemerkung {  font-size: var(--groesse-hinweis);  padding: var(--raum-1) var(--raum-2); }
@media (max-width: 767px) {
.onb-punkt {  grid-template-columns: minmax(0, 1fr) auto; }
.onb-wann, .onb-bemerkung {  grid-column: 1 / -1; }
}
/* ---------- Mail-Sammelbecken (E7/E9) ---------- */
.mail-karte {  border-left-color: var(--st-inarbeit-text);  cursor: default; }
.mail-karte:hover {  transform: none; }
.mail-zugeordnet {  border-left-color: var(--st-erledigt-text); }
.mail-ziel {  color: var(--st-erledigt-text);  font-weight: var(--schnitt-halb); }
/* .mail-vorschau entfernt: die Vorschau lebt jetzt in .mailtext-summary und
   ist dort immer aufklappbar. Eine reine Vorschau ohne Weg zum Volltext war
   genau die Kürzung, die zweimal zurückkam. */
.mail-vorschlag {
  
  display: flex;
   align-items: center;
   gap: var(--raum-2);
   flex-wrap: wrap;
  
  margin-top: var(--raum-2);
   padding: var(--raum-2) var(--raum-3);
   font-size: var(--groesse-text);
  
  background: var(--st-aktiv-flaeche);
   border: 1px solid var(--gold);
   border-radius: var(--radius-klein);
}
.mail-vorschlag-text {  flex: 1;  min-width: 200px;  color: var(--text-gedimmt); }
.mail-anhaenge {
   display: flex;
   flex-wrap: wrap;
   gap: var(--raum-1);
   margin-top: var(--raum-2);
}
.mail-anhang {
  
  font-size: var(--groesse-hinweis);
   padding: var(--raum-1) var(--raum-2);
   border-radius: var(--radius-pille);
   text-decoration: none;
  
  background: var(--flaeche-seite);
   border: 1px solid var(--linie);
   color: var(--text-gedimmt);
}
.mail-anhang:hover {  background: var(--flaeche-vertieft); }
.mail-aktionen {
   display: flex;
   align-items: center;
   gap: var(--raum-2);
   flex-wrap: wrap;
   margin-top: var(--raum-3);
}
.mail-eintrag {  padding: var(--raum-2) 0;  border-bottom: 1px solid var(--flaeche-seite); }
.mail-eintrag-betreff {
   font-size: var(--groesse-bedien);
   font-weight: var(--schnitt-halb);
   color: var(--text);
   margin-top: var(--raum-1);
}
.mail-eintrag-fuss {
   display: flex;
   align-items: center;
   gap: var(--raum-2);
   flex-wrap: wrap;
   margin-top: var(--raum-2);
}
.ansicht-fehler {
  
  padding: var(--raum-2) var(--raum-3);
   margin-bottom: var(--raum-3);
   border-radius: var(--radius-klein);
   font-size: var(--groesse-text);
  
  background: var(--st-hoch-flaeche);
   border: 1px solid var(--melden-fehler);
   color: var(--gefahr-text);
}
/* ---------- Versammlungs-Dokumente (E8) ---------- */
.vers-dokumente {
   display: flex;
   flex-direction: column;
   gap: var(--raum-1);
   margin-bottom: var(--raum-2);
}
.vers-dok {
   display: flex;
   align-items: center;
   gap: var(--raum-2);
   flex-wrap: wrap;
   padding: var(--raum-1) 0;
   border-bottom: 1px solid var(--flaeche-seite);
   font-size: var(--groesse-text);
}
.vers-dok-quelle {  font-size: var(--groesse-klein);  color: var(--text-gedimmt);  letter-spacing: 0.3px; }
.vers-dok .aufgabe-loeschen {  margin-left: auto; }
/* ---------- Objekt-Notizen (E11) ---------- */
.objnotiz {  padding: var(--raum-3) 0;  border-bottom: 1px solid var(--flaeche-seite); }
.objnotiz-text {
   font-size: var(--groesse-bedien);
   white-space: pre-wrap;
   margin-top: var(--raum-1);
   color: var(--text-gedimmt);
}
.objnotiz-aktionen {  display: flex;  gap: var(--raum-2);  margin-top: var(--raum-2); }
.objnotiz-eingabe {  width: 100%;  font-size: var(--groesse-bedien); }
/* ---------- Eingebettete Mails ---------- */
.mail-anhang-mail {
  
  background: var(--st-inarbeit-flaeche);
   border-color: var(--st-inarbeit-text);
   color: var(--text);
  
  font-weight: var(--schnitt-halb);
}
.mail-anhang-mail:hover {  background: var(--st-inarbeit-flaeche); }
.mail-anhang-groesse {  color: var(--text-gedimmt);  font-size: var(--groesse-klein);  margin-left: var(--raum-1); }
.mailansicht-kopf {
   margin-bottom: var(--raum-3);
   padding-bottom: var(--raum-3);
   border-bottom: 1px solid var(--linie);
}
/* Mailtext niemals kürzen — EINE Klasse für alle Mailansichten.
   Kein line-clamp, kein max-height, kein text-overflow: der Text steht
   vollständig da, gescrollt wird vom umgebenden Panel. Frühere Deckelungen
   (.mailansicht-text 45vh, .postfach-text 46vh) sind hier aufgegangen. */
.mailtext {
  
  white-space: pre-wrap;
   word-break: break-word;
  
  font-family: var(--schrift-text); font-size: var(--groesse-text); font-weight: var(--schnitt-normal); line-height: 1.65;
   color: var(--text-gedimmt);
}
.mailtext-leer {  color: var(--text-gedimmt);  font-style: italic; }
/* Aufklappbarer Volltext, wo die Ansicht nur die Vorschau geladen hat. */
.mailtext-block {  margin-top: var(--raum-2); }
.mailtext-summary {
  
  cursor: pointer;
   font-size: var(--groesse-text);
   color: var(--text-gedimmt);
   line-height: 1.45;
  
  white-space: pre-wrap;
   list-style: none;
}
.mailtext-summary::-webkit-details-marker {  display: none; }
.mailtext-summary .klapp-pfeil {  color: var(--gold-text); }
.mailtext-block[open] > .mailtext-summary {  color: var(--gold-text);  font-weight: var(--schnitt-halb);  white-space: normal; }

/* Aufgeklappt verschwindet die Vorschau – sonst stünden die ersten 220
   Zeichen zweimal untereinander. */
.mailtext-zu {  display: none; }
.mailtext-block[open] .mailtext-kurz {  display: none; }
.mailtext-block[open] .mailtext-zu {  display: inline; }
.mailtext-block > .mailtext {  margin-top: var(--raum-2);  padding-left: var(--raum-3);  border-left: 2px solid var(--linie); }
/* F7: Zeitraum-Schnellwahl im Beiratsbericht */
.bericht-vorgaben {
   display: flex;
   gap: var(--raum-1);
   flex-wrap: wrap;
   margin-bottom: var(--raum-3);
}
/* F9: Serienfristen – Pflegeformular und Statusfarben der nächsten Fälligkeit */
.serie-form {
   background: var(--flaeche-seite);
   border: 1px solid var(--linie);
   border-radius: var(--radius-karte);
  
  padding: var(--raum-3) var(--raum-4);
   margin-bottom: var(--raum-4);
}
.serie-datum.faellig {  color: var(--gold-text);  font-weight: var(--schnitt-halb); }
.serie-datum.ueberfaellig {  color: var(--gefahr-text);  font-weight: var(--schnitt-halb); }
.einstell-zeile.serie-inaktiv {  opacity: 0.55; }
.frist-art-serienfrist {  background: var(--st-erledigt-flaeche);  color: var(--st-erledigt-text); }
/* F10: Aufwandserfassung im Drawer */
.aufwand-erfassen {
   display: flex;
   flex-wrap: wrap;
   gap: var(--raum-1);
   margin-bottom: var(--raum-2);
}
.aufwand-liste {  display: flex;  flex-direction: column;  margin-top: var(--raum-2); }
.aufwand-zeile {
   display: flex;
   align-items: center;
   gap: var(--raum-2);
   padding: var(--raum-2) 0;
  
  border-bottom: 1px solid var(--flaeche-seite);
   font-size: var(--groesse-text);
}
.aufwand-zeile:last-child {  border-bottom: none; }
.aufwand-zeile.abgerechnet {  opacity: 0.6; }
.aufwand-datum {  color: var(--text-gedimmt);  white-space: nowrap;  min-width: 84px; }
.aufwand-dauer {
   font-weight: var(--schnitt-halb);
   color: var(--text);
   white-space: nowrap;
   min-width: 64px;
}
.aufwand-text {  flex: 1;  min-width: 0; }
.aufwand-betrag {
   font-weight: var(--schnitt-halb);
   color: var(--text);
   white-space: nowrap;
  
  font-variant-numeric: tabular-nums;
}
.aufwand-summe {
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: var(--raum-2);
  
  margin-top: var(--raum-3);
   padding-top: var(--raum-2);
   border-top: 2px solid var(--gold);
  
  font-size: var(--groesse-bedien);
   color: var(--text);
}
.aufwand-objekt {
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: var(--raum-2);
  
  padding: var(--raum-2) 0;
   border-bottom: 1px solid var(--flaeche-seite);
}
.aufwand-objekt:last-of-type {  border-bottom: none; }
.aufwand-objekt-zahlen {
   display: flex;
   align-items: center;
   gap: var(--raum-3);
   white-space: nowrap;
}
.einstell-zeile.abgerechnet {  opacity: 0.62; }
.filter-datum {
   display: flex;
   flex-direction: row;
   align-items: center;
   gap: var(--raum-1);
  
  font-size: var(--groesse-text);
   color: var(--text-gedimmt);
}
/* ---------- Onboarding-Assistent (G1) ---------- */
.assi-schritte {
   display: flex;
   flex-wrap: wrap;
   gap: var(--raum-1);
   list-style: none;
   padding: 0;
   margin: 0 0 var(--raum-4);
}
.assi-schritt {
   display: flex;
   align-items: center;
   gap: var(--raum-1);
   font-size: var(--groesse-hinweis);
   font-weight: var(--schnitt-halb);
  
  color: var(--text-gedimmt);
   background: var(--flaeche-seite);
   border-radius: var(--radius-pille);
   padding: var(--raum-1) var(--raum-3) var(--raum-1) var(--raum-1);
}
.assi-schritt.aktiv {  color: var(--text);  background: var(--flaeche-segment-aktiv); }
.assi-schritt.fertig { color: var(--text-auf-gold);  background: var(--gold); }
.assi-nr {
   display: grid;
   place-items: center;
   width: 20px;
   height: 20px;
   border-radius: var(--radius-kreis);
  
  background: var(--flaeche-vertieft);
   font-size: var(--groesse-klein);
}
.assi-schritt.aktiv .assi-nr {  background: var(--flaeche-ueberfahren); }
.assi-hinweis {
   font-size: var(--groesse-text);
   color: var(--text-gedimmt);
   margin: 0 0 var(--raum-3);
   line-height: 1.5;
}
.assi-serie {
   display: flex;
   align-items: flex-end;
   gap: var(--raum-2);
   flex-wrap: wrap;
   margin-bottom: var(--raum-3);
}
.assi-liste {
   display: flex;
   flex-wrap: wrap;
   gap: var(--raum-2);
   margin-bottom: var(--raum-3);
}
.assi-liste.assi-dl {
   flex-direction: column;
   gap: var(--raum-1);
   max-height: 320px;
   overflow-y: auto;
  /* F7: das Scrollen bleibt hier drin */
   overscroll-behavior: contain;
}
.assi-chip {
   background: var(--flaeche-seite);
   border-radius: var(--radius-klein);
   padding: var(--raum-1) var(--raum-2);
   font-size: var(--groesse-text);
   color: var(--text);
}
.assi-leer {  font-size: var(--groesse-text);  color: var(--text-gedimmt);  font-style: italic; }
.assi-check {
   display: flex;
   align-items: center;
   gap: var(--raum-2);
   font-size: var(--groesse-text);
   font-weight: var(--schnitt-normal);
  
  color: var(--text);
   margin: 0;
   padding: var(--raum-1) var(--raum-2);
   border-radius: var(--radius-klein);
   cursor: pointer;
}
.assi-check:hover {  background: var(--flaeche-seite); }
.assi-serie-zeile {  width: 100%; }
.assi-fertig {
   font-size: var(--groesse-hinweis);
   color: var(--st-erledigt-text);
   font-weight: var(--schnitt-halb);
}
.assi-aktion {
   display: flex;
   align-items: center;
   gap: var(--raum-3);
   margin-bottom: var(--raum-3);
}
.assi-zaehler {  font-size: var(--groesse-text);  color: var(--text-gedimmt); }
/* ---------- Zählerstands-Historie (G4) ---------- */
.modal-zusatz {
   font-size: var(--groesse-bedien);
   font-weight: var(--schnitt-normal);
   color: var(--text-gedimmt);
   font-family: var(--schrift-text);
}
.zaehler-neu {
   display: flex;
   align-items: flex-end;
   gap: var(--raum-2);
   flex-wrap: wrap;
   margin-bottom: var(--raum-4);
  
  padding-bottom: var(--raum-4);
   border-bottom: 1px solid var(--linie);
}
.zaehler-block {
   border: 1px solid var(--linie);
   border-radius: var(--radius-karte);
   padding: var(--raum-3);
   margin-bottom: var(--raum-3);
}
.zaehler-block.inaktiv {  opacity: .6; }
.zaehler-kopf {
   display: flex;
   align-items: center;
   gap: var(--raum-2);
   flex-wrap: wrap;
   margin-bottom: var(--raum-2);
}
.zaehler-kopf .knopf {  margin-left: auto; }
.zaehler-warnung {  font-size: var(--groesse-hinweis);  font-weight: var(--schnitt-halb);  color: var(--gefahr-text); }
.zaehler-linie {
   width: 100%;
   height: 90px;
   display: block;
   margin-bottom: var(--raum-2);
}
.zaehler-tabelle {  width: 100%;  border-collapse: collapse;  font-size: var(--groesse-text); }
.zaehler-hinweis {  color: var(--gefahr-text);  font-size: var(--groesse-hinweis); }
.zaehler-erfassen {
   display: flex;
   gap: var(--raum-2);
   align-items: center;
   margin-top: var(--raum-2);
}
.zaehler-leer {  color: var(--text-gedimmt);  font-size: var(--groesse-text);  font-style: italic; }
/* ---------- Übersicht mit Fristen-Ampel (G6) ---------- */
.uebersicht-summe {
   display: flex;
   align-items: center;
   gap: var(--raum-2);
   font-size: var(--groesse-text);
   color: var(--text-gedimmt);
}
.uebersicht-summe .ampel-punkt {  margin-left: var(--raum-2); }
.uebersicht-warnung {  color: var(--gefahr-text);  font-weight: var(--schnitt-halb);  margin-left: var(--raum-2); }
.uebersicht-hinweis {  margin-left: var(--raum-2);  font-style: italic; }
.ampel-punkt {
   display: inline-block;
   width: 10px;
   height: 10px;
   border-radius: var(--radius-kreis);
   flex: none;
}
.ampel-punkt.rot {  background: var(--gefahr-text); }
.ampel-punkt.gelb {  background: var(--gold); color: var(--text-auf-gold); }
.ampel-punkt.gruen {  background: var(--st-erledigt-text); }
.uebersicht-kacheln {
   display: grid;
   gap: var(--raum-3);
  
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
}
.uebersicht-kachel {
   display: flex;
   flex-direction: column;
   gap: var(--raum-1);
   text-align: left;
  
  background: var(--flaeche-karte);
   border: 1px solid var(--linie);
   border-left: 4px solid var(--linie);
  
  border-radius: var(--radius-karte);
   padding: var(--raum-4);
   cursor: pointer;
  
  font-family: inherit;
   transition: transform .12s ease;
}
.uebersicht-kachel:hover {  transform: translateY(-2px); }
.uebersicht-kachel.ampel-rot {  border-left-color: var(--gefahr-text); }
.uebersicht-kachel.ampel-gelb {  border-left-color: var(--gold); }
.uebersicht-kachel.ampel-gruen {  border-left-color: var(--st-erledigt-text); }
.kachel-ampel {
   display: flex;
   align-items: center;
   gap: var(--raum-1);
   font-size: var(--groesse-klein);
   font-weight: var(--schnitt-halb);
  
  letter-spacing: .05em;
   text-transform: uppercase;
   color: var(--text-gedimmt);
}
.kachel-name {  font-size: var(--groesse-bedien);  color: var(--text);  font-family: var(--schrift-display); }
.kachel-adresse, .kachel-zahlen {  font-size: var(--groesse-hinweis);  color: var(--text-gedimmt); }
.kachel-frist {
   font-size: var(--groesse-text);
   color: var(--text-gedimmt);
   margin-top: var(--raum-1);
  
  padding-top: var(--raum-2);
   border-top: 1px solid var(--flaeche-seite);
}
.kachel-frist.leer {  color: var(--text-gedimmt);  font-style: italic; }
.kachel-datum {
   font-family: var(--schrift-mono);
   font-variant-numeric: tabular-nums;
  
  color: var(--text);
   font-weight: var(--schnitt-halb);
   margin-right: var(--raum-1);
}
.kachel-warnung {  font-size: var(--groesse-hinweis);  font-weight: var(--schnitt-halb);  color: var(--gefahr-text); }
/* ---------- Jahreswechsel-Assistent (G8) ---------- */
.jab-schritte {
   display: flex;
   flex-wrap: wrap;
   gap: var(--raum-1);
   list-style: none;
   padding: 0;
   margin: 0 0 var(--raum-4);
}
.jab-schritt {
   display: flex;
   align-items: center;
   gap: var(--raum-1);
   font-size: var(--groesse-hinweis);
   font-weight: var(--schnitt-halb);
  
  color: var(--text-gedimmt);
   background: var(--flaeche-seite);
   border-radius: var(--radius-pille);
   padding: var(--raum-1) var(--raum-3) var(--raum-1) var(--raum-1);
}
.jab-schritt.aktiv {  color: var(--text);  background: var(--flaeche-segment-aktiv); }
.jab-schritt.fertig { color: var(--text-auf-gold);  background: var(--gold); }
.jab-nr {
   display: grid;
   place-items: center;
   width: 20px;
   height: 20px;
   border-radius: var(--radius-kreis);
  
  background: var(--flaeche-vertieft);
   font-size: var(--groesse-klein);
}
.jab-schritt.aktiv .jab-nr {  background: var(--flaeche-ueberfahren); }
.jab-hinweis {
   font-size: var(--groesse-text);
   color: var(--text-gedimmt);
   margin: 0 0 var(--raum-3);
   line-height: 1.5;
}
.jab-liste {
   display: flex;
   flex-direction: column;
   gap: var(--raum-1);
   max-height: 380px;
   overflow-y: auto;
   margin-bottom: var(--raum-3);
  /* F7: das Scrollen bleibt hier drin */
   overscroll-behavior: contain;
}
.jab-zeile {
   display: flex;
   align-items: center;
   gap: var(--raum-3);
   padding: var(--raum-2) var(--raum-2);
  
  border: 1px solid var(--linie);
   border-radius: var(--radius-klein);
   background: var(--flaeche-karte);
}
.jab-zeile-text {
   display: flex;
   flex-wrap: wrap;
   align-items: baseline;
   gap: var(--raum-2);
   flex: 1;
   min-width: 0;
}
.jab-titel-text {  font-size: var(--groesse-text);  color: var(--text-gedimmt); }
.jab-aktionen {
   display: flex;
   gap: var(--raum-1);
   align-items: center;
   flex: none;
}
.jab-alt {  font-size: var(--groesse-klein);  font-weight: var(--schnitt-halb);  color: var(--gefahr-text); }
.jab-leer {  color: var(--text-gedimmt);  font-size: var(--groesse-text);  font-style: italic; }
.jab-warnung {
   background: var(--st-hoch-flaeche);
   border-left: 3px solid var(--gefahr-text);
  
  padding: var(--raum-2) var(--raum-3);
   border-radius: var(--radius-klein);
   font-size: var(--groesse-text);
   color: var(--text-gedimmt);
   margin-bottom: var(--raum-3);
}
.jab-gut {
   background: var(--st-erledigt-flaeche);
   border-left: 3px solid var(--st-erledigt-text);
  
  padding: var(--raum-2) var(--raum-3);
   border-radius: var(--radius-klein);
   font-size: var(--groesse-text);
   color: var(--text-gedimmt);
   margin-bottom: var(--raum-3);
}
.jab-aktion-reihe {
   display: flex;
   align-items: center;
   gap: var(--raum-3);
   flex-wrap: wrap;
}
.jab-status {  font-size: var(--groesse-text);  color: var(--st-erledigt-text);  font-weight: var(--schnitt-halb); }
#jab-zusammenfassung {
   width: 100%;
   font-family: var(--schrift-mono);
   font-size: var(--groesse-hinweis);
   line-height: 1.6;
}
/* ---------- Ruhend: Pause und Wiedervorlage ---------- */
.ruh-summe {
   display: flex;
   align-items: baseline;
   gap: var(--raum-2);
   font-size: var(--groesse-text);
   color: var(--text-gedimmt);
}
.ruh-zaehler {  font-weight: var(--schnitt-halb);  color: var(--text); }
.ruh-zeile {
   display: flex;
   align-items: center;
   gap: var(--raum-3);
   flex-wrap: wrap;
  
  background: var(--flaeche-karte);
   border: 1px solid var(--linie);
   border-left: 4px solid var(--text-gedimmt);
  
  border-radius: var(--radius-karte);
   padding: var(--raum-2) var(--raum-3);
   margin-bottom: var(--raum-2);
}
.ruh-zeile.grund-pause {  border-left-color: var(--text-gedimmt); }
.ruh-zeile.grund-wiedervorlage {  border-left-color: var(--gold); }
.ruh-datum {
   font-family: var(--schrift-mono);
   font-variant-numeric: tabular-nums;
  
  font-size: var(--groesse-text);
   font-weight: var(--schnitt-halb);
   color: var(--text);
   flex: none;
   min-width: 92px;
}
.ruh-grund {
   font-size: var(--groesse-klein);
   font-weight: var(--schnitt-halb);
   letter-spacing: .05em;
   text-transform: uppercase;
  
  color: var(--text-gedimmt);
   background: var(--flaeche-seite);
   border-radius: var(--radius-pille);
   padding: var(--raum-1) var(--raum-2);
   flex: none;
}
.ruh-titel {
   flex: 1;
   min-width: 220px;
   text-align: left;
   background: none;
   border: 0;
   padding: 0;
  
  font: inherit;
   font-size: var(--groesse-bedien);
   color: var(--text-gedimmt);
   cursor: pointer;
}
.ruh-titel:hover {  color: var(--text);  text-decoration: underline; }
.ruh-notiz {  font-size: var(--groesse-hinweis);  color: var(--text-gedimmt);  font-style: italic; }
.ruh-leer {  color: var(--text-gedimmt);  font-size: var(--groesse-text);  font-style: italic; }
.ruh-drawer {
   display: flex;
   align-items: center;
   gap: var(--raum-2);
   flex-wrap: wrap;
   margin: var(--raum-3) 0;
}
.ruh-drawer.ruht {
   background: var(--flaeche-seite);
   border-left: 3px solid var(--gold);
  
  border-radius: var(--radius-klein);
   padding: var(--raum-2) var(--raum-3);
}
.ruh-marke {
   font-size: var(--groesse-hinweis);
   font-weight: var(--schnitt-halb);
   color: var(--text);
  
  background: var(--flaeche-seite);
   border-radius: var(--radius-pille);
   padding: var(--raum-1) var(--raum-3);
}
.ruh-schnellwahl {
   display: flex;
   gap: var(--raum-2);
   flex-wrap: wrap;
   margin-bottom: var(--raum-3);
}
/* ---------- Gesamtakte (G9) ---------- */
.ga-status {
   font-size: var(--groesse-hinweis);
   color: var(--text-gedimmt);
   font-weight: var(--schnitt-halb);
   align-self: center;
}
/* ---------- Startseite "Mein Tag" (H1) ---------- */
/* Kopfzeile darf umbrechen, statt den Titel zu quetschen. */
#ansicht-mein-tag .titelleiste {  flex-wrap: wrap;  gap: var(--raum-2) var(--raum-4); }
.mt-zaehler {
   display: flex;
   align-items: baseline;
   gap: var(--raum-3);
   flex-wrap: wrap;
   font-size: var(--groesse-text);
   color: var(--text-gedimmt);
}
.mt-kennzahl {  font-size: var(--groesse-text);  color: var(--text); }
.mt-kennzahl.dringend {  color: var(--gefahr-text); }
.mt-block {  margin-bottom: var(--raum-6); }
.mt-block-titel {
   font-size: var(--groesse-klein);
   font-weight: var(--schnitt-fett);
   letter-spacing: .08em;
   text-transform: uppercase;
  
  color: var(--gold-text);
   margin: 0 0 var(--raum-2);
   padding-bottom: var(--raum-1);
   border-bottom: 1px solid var(--linie);
  
  font-family: var(--schrift-text);
   display: flex;
   align-items: center;
   gap: var(--raum-2);
}
.mt-anzahl {
   background: var(--flaeche-seite);
   color: var(--text-gedimmt);
   border-radius: var(--radius-pille);
  
  padding: var(--raum-1) var(--raum-2);
   font-size: var(--groesse-klein);
   letter-spacing: 0;
}
.mt-zeile {
   display: flex;
   align-items: center;
   gap: var(--raum-3);
   flex-wrap: wrap;
   padding: var(--raum-2) var(--raum-3);
  
  background: var(--flaeche-karte);
   border: 1px solid var(--linie);
   border-left: 3px solid var(--linie);
  
  border-radius: var(--radius-klein);
   margin-bottom: var(--raum-1);
}
.mt-zeile.ueberfaellig {  border-left-color: var(--gefahr-text); }
.mt-datum {
   font-family: var(--schrift-mono);
   font-variant-numeric: tabular-nums;
  
  font-size: var(--groesse-hinweis);
   font-weight: var(--schnitt-halb);
   color: var(--text);
   flex: none;
   min-width: 92px;
}
.mt-art {
   font-size: var(--groesse-klein);
   font-weight: var(--schnitt-halb);
   letter-spacing: .04em;
   text-transform: uppercase;
  
  color: var(--text-gedimmt);
   background: var(--flaeche-seite);
   border-radius: var(--radius-pille);
   padding: var(--raum-1) var(--raum-2);
   flex: none;
}
.mt-titel {
   flex: 1;
   min-width: 200px;
   text-align: left;
   background: none;
   border: 0;
   padding: 0;
  
  font: inherit;
   font-size: var(--groesse-bedien);
   color: var(--text-gedimmt);
}
.mt-leer {
   color: var(--text-gedimmt);
   font-size: var(--groesse-text);
   font-style: italic;
   margin: 0;
}
.mt-mails {
   background: var(--flaeche-seite);
   border: 1px solid var(--linie);
   border-radius: var(--radius-klein);
  
  padding: var(--raum-2) var(--raum-4);
   font: inherit;
   font-size: var(--groesse-bedien);
   color: var(--text);
   cursor: pointer;
}
.mt-mails:hover {  background: var(--gold); color: var(--text-auf-gold); }
.mt-verlauf {
   display: flex;
   align-items: baseline;
   gap: var(--raum-3);
   flex-wrap: wrap;
  
  font-size: var(--groesse-text);
   color: var(--text-gedimmt);
   padding: var(--raum-1) 0;
   border-bottom: 1px solid var(--flaeche-seite);
}
/* ---------- H2: Befehlspalette (Cmd+K) ---------- */
/* Nur für Screenreader: die Palette trägt ihre Überschrift nicht sichtbar,
   das Eingabefeld erklärt sich selbst. Ein aria-label am Dialog wäre möglich,
   eine echte Überschrift ist für Vorlesesoftware aber die verlässlichere Wahl. */
.visuell-versteckt {
  
  position: absolute;
   width: 1px;
   height: 1px;
   overflow: hidden;
  
  clip: rect(0 0 0 0);
   clip-path: inset(50%);
   white-space: nowrap;
}
/* .modal-hintergrund zentriert senkrecht – eine Palette gehört nach oben,
   sonst springt sie beim Tippen mit wachsender Trefferliste hin und her. */
.befehl-hintergrund {  align-items: start;  padding-top: 12vh; }
.befehl-modal {  width: min(620px, 94vw);  padding: 0;  overflow: hidden; }
.befehl-eingabe {
  
  width: 100%;
   border: 0;
   border-bottom: 1px solid var(--linie);
  
  padding: var(--raum-4) var(--raum-5);
   font: inherit;
   font-size: var(--groesse-abschnitt);
   color: var(--text-gedimmt);
  
  background: var(--flaeche-karte);
}
.befehl-eingabe:focus {  outline: none; }
.befehl-eingabe::placeholder {  color: var(--text-gedimmt); }
.befehl-liste {  max-height: 52vh;  overflow-y: auto;  padding: var(--raum-1);   /* F7: das Scrollen bleibt hier drin */
   overscroll-behavior: contain;
}
.befehl-gruppe {
  
  font-size: var(--groesse-klein);
   font-weight: var(--schnitt-halb);
   letter-spacing: .06em;
   text-transform: uppercase;
  
  color: var(--text-gedimmt);
   padding: var(--raum-2) var(--raum-3) var(--raum-1);
}
.befehl-treffer {
  
  display: flex;
   align-items: baseline;
   gap: var(--raum-2);
   width: 100%;
   text-align: left;
  
  background: none;
   border: 0;
   border-radius: var(--radius-klein);
   padding: var(--raum-2) var(--raum-3);
  
  font: inherit;
   font-size: var(--groesse-bedien);
   color: var(--text-gedimmt);
   cursor: pointer;
}
/* Die Auswahl folgt der Tastatur, nicht dem Mauszeiger: ein :hover, das die
   Markierung mitverschiebt, kämpft mit den Pfeiltasten um dieselbe Anzeige. */
.befehl-treffer[aria-selected="true"] {  background: var(--flaeche-segment-aktiv);  color: var(--text); }
.befehl-treffer[aria-selected="true"] .befehl-zusatz {  color: var(--linie); }
.befehl-zusatz {
   font-size: var(--groesse-hinweis);
   color: var(--text-gedimmt);
   margin-left: auto;
   flex: none;
}
.befehl-aktion-symbol {
   flex: none;
   width: 18px;
   text-align: center;
   color: var(--gold-text);
}
.befehl-treffer[aria-selected="true"] .befehl-aktion-symbol {  color: var(--gold-text); }
.befehl-leer {
   color: var(--text-gedimmt);
   font-size: var(--groesse-text);
   font-style: italic;
   padding: var(--raum-4) var(--raum-5);
}
.befehl-fuss {
  
  display: flex;
   gap: var(--raum-4);
   border-top: 1px solid var(--linie);
  
  padding: var(--raum-2) var(--raum-5);
   font-size: var(--groesse-klein);
   color: var(--text-gedimmt);
   background: var(--flaeche-seite);
}
.befehl-fuss kbd {
  
  font-family: var(--schrift-mono);
   font-size: var(--groesse-klein);
   background: var(--flaeche-karte);
  
  border: 1px solid var(--linie);
   border-radius: var(--radius-feld);
   padding: var(--raum-1) var(--raum-1);
   margin-right: var(--raum-1);
}
/* ---------- H3: Ereignisdatum in der Chronik ---------- */
/* Bewusst unter der Eingabe und leise gesetzt: der Normalfall ist "heute",
   das Feld soll nur auffallen, wenn jemand wirklich etwas nachtraegt. */
.notiz-ereignis {
  
  display: flex;
   align-items: center;
   gap: var(--raum-2);
   flex-wrap: wrap;
  
  margin: calc(var(--raum-1) * -1) 0 var(--raum-3);
   font-size: var(--groesse-hinweis);
   color: var(--text-gedimmt);
}
.notiz-ereignis-hinweis {  font-size: var(--groesse-hinweis);  color: var(--text-gedimmt); }
/* Weicht das Ereignis von der Erfassung ab, traegt die Zeile zwei Angaben —
   das darf man sehen, es ist der Grund fuer das Feld. */
.notiz-zeit {  font-variant-numeric: tabular-nums; }
/* ---------- H4: Stillstands-Warnung ---------- */
/* Gelb wie die Ampelstufe, der es entspricht — nicht rot: Stillstand ist ein
   Hinweis, keine verletzte Frist. Gold statt eines schrillen Warntons, damit
   es sich in die Akte einfuegt statt sie zu uebertoenen. */
/* N3.3: Diese Regel hiess .abzeichen-wartend und ueberschrieb damit JEDES
   neutrale Abzeichen der App mit Gold — auch „nicht bewertet" und den
   Schadenstatus, die mit Stillstand nichts zu tun haben. Eigener Name, eigene
   Wirkung. */
.abzeichen-still {
  background: var(--st-aktiv-flaeche);
  color: var(--gold-text);
  border: 1px solid var(--gold); }
/* In "Mein Tag" traegt die Zeile links denselben goldenen Balken, mit dem die
   ueberfaellige Zeile ihren roten traegt — gleiche Sprache, andere Dringlichkeit. */
.mt-zeile.mt-still {  border-left-color: var(--gold); }
.mt-still .mt-datum {  color: var(--gold-text); }
/* ---------- H6: Team-Steuerung ---------- */
.team-summe {  font-family: var(--schrift-text); font-size: var(--groesse-hinweis); font-weight: var(--schnitt-halb);  color: var(--text-gedimmt); }
.team-toolbar {
   display: flex;
   align-items: center;
   gap: var(--raum-3);
   flex-wrap: wrap;
   margin-bottom: var(--raum-4);
}
/* Umverteilen-Leiste erscheint nur bei Auswahl. */
.team-umverteilen {
   display: flex;
   align-items: center;
   gap: var(--raum-2);
   margin-left: auto;
  
  background: var(--flaeche-seite);
   border: 1px solid var(--linie);
   border-radius: var(--radius-klein);
   padding: var(--raum-1) var(--raum-2) var(--raum-1) var(--raum-3);
}
.team-auswahl-info {  font-family: var(--schrift-text); font-size: var(--groesse-hinweis); font-weight: var(--schnitt-halb);  color: var(--text);  white-space: nowrap; }
.team-gruppe {
   background: var(--flaeche-karte);
   border: 1px solid var(--linie);
   border-radius: var(--radius-karte);
   overflow: hidden;
   margin-bottom: var(--raum-3);
}
.team-gruppe-kopf {
   display: flex;
   align-items: center;
   gap: var(--raum-2);
   padding: var(--raum-3) var(--raum-4);
   background: var(--flaeche-seite);
}
.team-gruppe-name {  font-family: var(--schrift-text); font-size: var(--groesse-text); font-weight: var(--schnitt-fett);  color: var(--text); }
.team-gruppe-kopf.unzugewiesen .team-gruppe-name {  color: var(--text-gedimmt);  font-style: italic; }
.team-gruppe-zahl {
   font-family: var(--schrift-text); font-size: var(--groesse-klein); font-weight: var(--schnitt-fett);
   color: var(--text-gedimmt);
  
  background: var(--flaeche-seite);
   border-radius: var(--radius-pille);
   padding: var(--raum-1) var(--raum-2);
}
.team-liste {  display: flex;  flex-direction: column; }
/* Zeile als Label: Klick irgendwo schaltet die Checkbox. */
.team-zeile {
   display: flex;
   align-items: center;
   gap: var(--raum-3);
   padding: var(--raum-3) var(--raum-4);
  
  border-top: 1px solid var(--linie);
   cursor: pointer;
}
.team-zeile:hover {  background: var(--flaeche-karte); }
.team-check {
   width: auto;
   margin: 0;
   flex: none;
   cursor: pointer;
}
.team-kennung {
   font-family: var(--schrift-mono); font-size: var(--groesse-klein); font-weight: var(--schnitt-halb);
   color: var(--text-gedimmt);
   flex: none;
   min-width: 96px;
}
.team-titel {
   font-family: var(--schrift-text); font-size: var(--groesse-text); font-weight: var(--schnitt-halb);
   color: var(--text);
   flex: 1;
  
  overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
   min-width: 0;
}
.team-frist {
   font-family: var(--schrift-text); font-size: var(--groesse-hinweis); font-weight: var(--schnitt-halb);
   color: var(--text-gedimmt);
   flex: none;
   min-width: 84px;
   text-align: right;
  
  font-variant-numeric: tabular-nums;
}
/* ---------- H7: Kostenverfolgung ---------- */
.kosten-warnung {
  
  background: var(--st-hoch-flaeche);
   color: var(--st-hoch-text);
  
  border: 1px solid var(--melden-fehler);
   border-radius: var(--radius-klein);
  
  padding: var(--raum-3) var(--raum-3);
   font-family: var(--schrift-text); font-size: var(--groesse-text); font-weight: var(--schnitt-fett);
   margin-bottom: var(--raum-3);
}
.kosten-summen {
   display: flex;
   gap: var(--raum-2);
   margin-bottom: var(--raum-3);
   flex-wrap: wrap;
}
.kosten-summe-karte {
  
  flex: 1;
   min-width: 110px;
   background: var(--flaeche-karte);
   border: 1px solid var(--linie);
  
  border-radius: var(--radius-klein);
   padding: var(--raum-2) var(--raum-3);
   display: flex;
   flex-direction: column;
   gap: var(--raum-1);
}
.kosten-summe-karte.ueber-schwelle {  border-color: var(--melden-fehler);  background: var(--st-hoch-flaeche); }
.kosten-erfassen {
   display: flex;
   gap: var(--raum-2);
   flex-wrap: wrap;
   align-items: center;
   margin-bottom: var(--raum-1);
}
.kosten-erfassen #feld-kosten-betrag {  width: 130px; }
.kosten-liste {  display: flex;  flex-direction: column;  margin-top: var(--raum-1); }
.kosten-zeile {
   display: flex;
   align-items: center;
   gap: var(--raum-2);
   padding: var(--raum-2) 0;
  
  border-bottom: 1px solid var(--linie);
}
.kosten-text {
   flex: 1;
   font-size: var(--groesse-text);
   color: var(--text-gedimmt);
   min-width: 0;
}
.kosten-datum {
   font-family: var(--schrift-mono); font-size: var(--groesse-hinweis); font-weight: var(--schnitt-halb);
   color: var(--text-gedimmt);
   flex: none;
   min-width: 84px;
   text-align: right;
}
.kosten-betrag {
   font-family: var(--schrift-text); font-size: var(--groesse-text); font-weight: var(--schnitt-fett);
   color: var(--text);
   flex: none;
   min-width: 96px;
   text-align: right;
  
  font-variant-numeric: tabular-nums;
}
/* ===== H8: Umlaufbeschluss-Tracker ===== */
.umlauf-leiste {
   display: flex;
   align-items: center;
   gap: var(--raum-3);
   flex-wrap: wrap;
   margin-bottom: var(--raum-3);
}
.umlauf-status {
   font-size: var(--groesse-klein);
   font-weight: var(--schnitt-halb);
   padding: var(--raum-1) var(--raum-2);
   border-radius: var(--radius-pille);
   white-space: nowrap;
  
  vertical-align: middle;
   margin-left: var(--raum-1);
}
.umlauf-status-laufend {  background: var(--st-inarbeit-flaeche);  color: var(--st-inarbeit-text); }
.umlauf-status-zustande {  background: var(--st-erledigt-flaeche);  color: var(--st-erledigt-text); }
.umlauf-status-gescheitert {  background: var(--st-hoch-flaeche);  color: var(--gefahr-text); }
.umlauf-status-abgebrochen {  background: var(--flaeche-seite);  color: var(--text-gedimmt); }
.umlauf-text {
   font-size: var(--groesse-bedien);
   color: var(--text-gedimmt);
   margin: var(--raum-1) 0 var(--raum-2);
}
.umlauf-meta {  font-size: var(--groesse-hinweis);  color: var(--text-gedimmt);  margin-bottom: var(--raum-2); }
.umlauf-stimmen {  display: flex;  flex-direction: column;  gap: var(--raum-1); }
.umlauf-stimme {
   display: grid;
   grid-template-columns: 1fr 130px 120px 84px;
   gap: var(--raum-2);
   align-items: center;
  
  padding: var(--raum-1) 0;
   border-bottom: 1px solid var(--zeilenlinie, var(--linie));
}
.umlauf-stimme-name {  font-size: var(--groesse-text);  color: var(--text-gedimmt); }
.umlauf-stimme-wahl, .umlauf-form-wahl {  font-size: var(--groesse-hinweis);  padding: var(--raum-1) var(--raum-1); }
.umlauf-stimme-eingang {  font-family: var(--schrift-mono); font-size: var(--groesse-hinweis); font-weight: var(--schnitt-halb);  color: var(--text-gedimmt);  text-align: right; }
.umlauf-stimme-fest {  font-size: var(--groesse-hinweis);  font-weight: var(--schnitt-halb);  text-align: center; }
.umlauf-stimme-ja {  color: var(--st-erledigt-text); }
.umlauf-stimme-nein {  color: var(--gefahr-text); }
.umlauf-stimme-enthaltung, .umlauf-stimme-offen {  color: var(--text-gedimmt); }
.umlauf-feststellung {
   display: flex;
   gap: var(--raum-2);
   flex-wrap: wrap;
   margin: var(--raum-3) 0 var(--raum-1);
}
.umlauf-beschluss-info {  font-size: var(--groesse-text);  color: var(--st-erledigt-text);  margin: var(--raum-2) 0; }
.umlauf-hinweis {
   display: flex;
   align-items: center;
   gap: var(--raum-2);
   flex-wrap: wrap;
   margin: var(--raum-2) 0;
  
  padding: var(--raum-2) var(--raum-3);
   background: var(--flaeche-seite);
   border-radius: var(--radius-karte);
   font-size: var(--groesse-hinweis);
   color: var(--text-gedimmt);
}
.frist-art-umlauf {  background: var(--st-aktiv-flaeche);  color: var(--gold-text); }
/* ===== H9: ETV-Vorbereitung (Anwesenheit) ===== */
.quorum {
   font-size: var(--groesse-hinweis);
   font-weight: var(--schnitt-halb);
   color: var(--gold-text);
   text-transform: none;
   letter-spacing: 0;
   margin-left: var(--raum-1);
}
.teilnahme-liste {  display: flex;  flex-direction: column;  gap: var(--raum-1); }
.teilnahme-zeile {
   display: grid;
   grid-template-columns: 1fr 220px;
   gap: var(--raum-2);
   align-items: center;
  
  padding: var(--raum-1) 0;
   border-bottom: 1px solid var(--zeilenlinie, var(--linie));
}
.teilnahme-anwesend {
   display: flex;
   align-items: center;
   gap: var(--raum-2);
   font-size: var(--groesse-text);
   color: var(--text-gedimmt);
   cursor: pointer;
}
.teilnahme-vollmacht {  font-size: var(--groesse-hinweis);  padding: var(--raum-1) var(--raum-2); }
.teilnahme-vollmacht:disabled {  background: var(--flaeche-seite);  color: var(--text-gedimmt); }
.vers-baustein {  font-size: var(--groesse-hinweis);  padding: var(--raum-1) var(--raum-2);  max-width: 220px; }
/* ===== H10: Dienstleister-Historie & Bewertung ===== */
.dl-karte {  cursor: pointer; }
.dl-karte:focus-visible {  outline: 2px solid var(--gold);  outline-offset: 2px; }
.dl-karte-bewertung {  margin: var(--raum-1) 0 var(--raum-1); }
.dl-sterne {  color: var(--gold-text);  font-size: var(--groesse-bedien);  letter-spacing: 1px; }
.dl-sterne-rest {  color: var(--linie); }
.dl-sterne-leer {  color: var(--text-gedimmt);  font-size: var(--groesse-hinweis);  letter-spacing: 0; }
.dl-detail-kopf {  margin-bottom: var(--raum-3); }
.dl-kennzahlen {
   display: grid;
   grid-template-columns: repeat(4, 1fr);
   gap: var(--raum-3);
   margin: var(--raum-3) 0 var(--raum-1);
}
.dl-kennzahlen .kennzahl-karte {  text-align: center;  padding: var(--raum-3); }
.dl-sterne-wahl {
   display: flex;
   gap: var(--raum-1);
   align-items: center;
   margin: var(--raum-1) 0 var(--raum-2);
}
.dl-stern-btn {
   background: none;
   border: none;
   cursor: pointer;
   font-size: var(--groesse-titel);
   line-height: 1;
   color: var(--linie);
   padding: var(--raum-1);
}
.dl-stern-btn.aktiv {  color: var(--gold-text); }
.dl-stern-btn:hover {  color: var(--gold-text); }
.dl-stern-clear {  font-size: var(--groesse-bedien);  color: var(--text-gedimmt);  margin-left: var(--raum-2); }
#dl-bewertung-notiz {
   width: 100%;
   margin: var(--raum-1) 0 var(--raum-2);
   padding: var(--raum-2);
   border: 1px solid var(--linie);
   border-radius: var(--radius-karte);
   font: inherit;
}
.dl-hist-liste {
   display: flex;
   flex-direction: column;
   gap: var(--raum-1);
   margin-bottom: var(--raum-1);
}
.dl-hist-zeile {
   display: grid;
   grid-template-columns: 96px 1fr 140px 88px 150px;
   gap: var(--raum-2);
   align-items: center;
  
  padding: var(--raum-1) var(--raum-1);
   border-bottom: 1px solid var(--zeilenlinie, var(--linie));
   font-size: var(--groesse-text);
}
.dl-hist-zeile[role="button"] {  cursor: pointer; }
.dl-hist-zeile[role="button"]:hover {  background: var(--flaeche-seite); }
.dl-hist-az {  font-family: var(--schrift-mono); font-size: var(--groesse-hinweis); font-weight: var(--schnitt-halb);  color: var(--gold-text); }
.dl-hist-titel {
   color: var(--text-gedimmt);
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
}
.dl-hist-objekt {  color: var(--text-gedimmt);  font-size: var(--groesse-hinweis); }
.dl-hist-status {  font-size: var(--groesse-klein);  font-weight: var(--schnitt-halb); }
.dl-hist-status.status-erledigt {  color: var(--st-erledigt-text); }
.dl-hist-status.status-offen, .dl-hist-status.status-in_arbeit, .dl-hist-status.status-wartend {  color: var(--st-inarbeit-text); }
.dl-hist-zeit {  font-family: var(--schrift-mono); font-size: var(--groesse-klein); font-weight: var(--schnitt-halb);  color: var(--text-gedimmt);  text-align: right; }
/* ===== H12: Vorher-Nachher-Fotopaare ===== */
.foto-paare {  margin-top: var(--raum-2); }
.foto-paar {
   border: 1px solid var(--linie);
   border-radius: var(--radius-karte);
   padding: var(--raum-2);
   margin-bottom: var(--raum-2);
   background: var(--flaeche-karte);
}
.foto-paar-bilder {  display: grid;  grid-template-columns: 1fr 1fr;  gap: var(--raum-2); }
.foto-paar-text {  font-size: var(--groesse-text);  color: var(--text-gedimmt);  margin: var(--raum-2) 0; }
.foto-paar-form {
   display: flex;
   flex-wrap: wrap;
   gap: var(--raum-2);
   align-items: end;
   margin-top: var(--raum-2);
}
/* ===== H14: Auswertung Aufwand & Auslastung ===== */
.chart-kopf {
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: var(--raum-3);
   flex-wrap: wrap;
}
.chart-caption {
   font-size: var(--groesse-text);
   color: var(--text-gedimmt);
   margin: var(--raum-1) 0 var(--raum-2);
}
.chart-unter {
   font-size: var(--groesse-text);
   font-weight: var(--schnitt-halb);
   color: var(--text-gedimmt);
   margin: var(--raum-3) 0 var(--raum-1);
}
/* ===== H15: Selbsttest / Healthcheck ===== */
.health-ampel {
   display: inline-block;
   width: 11px;
   height: 11px;
   border-radius: var(--radius-kreis);
   margin-left: var(--raum-2);
   vertical-align: middle;
   background: var(--linie);
}
.health-ampel.health-ok {  background: var(--st-erledigt-text); }
.health-ampel.health-warnung {  background: var(--gold); color: var(--text-auf-gold); }
.health-ampel.health-fehler {  background: var(--gefahr-text); }
/* TB-H1: Die erste Spalte war 14 px breit — das Maß des Punktes, der hier bis
   zum Design-Umbau stand. Seither steht dort ein Abzeichen mit dem Wort
   „Fehler"; es hat white-space:nowrap und lief über die Spaltengrenze in den
   Namen hinein. Im Testbericht las sich die Zeile deshalb „fehlDrive-Spiegel".
   Die Spalte ist jetzt so breit wie das längste Wort („Hinweis") und die Zeile
   oben ausgerichtet, damit ein zweizeiliger Text das Abzeichen nicht mittig
   wegschiebt. */
.health-zeile {
   display: grid;
   grid-template-columns: 76px 200px 1fr;
   gap: var(--raum-2);
   align-items: start;
   padding: var(--raum-2) 0;
   border-bottom: 1px solid var(--zeilenlinie, var(--linie));
   font-size: var(--groesse-text);
}
.health-zeile > .abzeichen {  justify-content: center;  overflow: hidden; }
.health-punkt {
   width: 10px;
   height: 10px;
   border-radius: var(--radius-kreis);
   background: var(--text-gedimmt);
}
.health-ok .health-punkt {  background: var(--st-erledigt-text); }
.health-warnung .health-punkt {  background: var(--gold); color: var(--text-auf-gold); }
.health-fehler .health-punkt {  background: var(--gefahr-text); }
.health-name {  font-weight: var(--schnitt-halb);  color: var(--text); }
.health-detail {  color: var(--text-gedimmt); }
.health-fehler .health-detail {  color: var(--gefahr-text); }
/* ===== I3: Postfach-Reiter (Gmail readonly) ===== */
.postfach-kopf-links {
   display: flex;
   align-items: center;
   gap: var(--raum-4);
   flex-wrap: wrap;
}
.postfach-suchzeile {  display: flex;  gap: var(--raum-2);  align-items: center; }
.pille-zahl {  opacity: .7;  font-weight: var(--schnitt-fett); }
.postfach-raster {
   display: grid;
   grid-template-columns: minmax(280px, 380px) 1fr;
   gap: var(--raum-4);
   align-items: start;
   margin-top: var(--raum-4);
}
@media (max-width: 900px) {
.postfach-raster {  grid-template-columns: 1fr; }
}
.postfach-liste {
   display: flex;
   flex-direction: column;
   gap: var(--raum-2);
   max-height: calc(100vh - 230px);
   overflow-y: auto;
   padding-right: var(--raum-1);
  /* F7: das Scrollen bleibt hier drin */
   overscroll-behavior: contain;
}
.postfach-zeile {
  
  border: 1px solid var(--linie);
   border-radius: var(--radius-karte);
   background: var(--flaeche-karte);
   padding: var(--raum-3) var(--raum-3);
  
  cursor: pointer;
   transition: border-color .15s, background .15s;
}
.postfach-zeile:hover {  border-color: var(--gold); }
.postfach-zeile.aktiv {
   border-color: var(--linie-stark);
   box-shadow: inset 0 1px 1px rgba(0,0,0,.35);
   background: var(--flaeche-karte);
}
.postfach-zeile.ist-abgelegt {  opacity: .58; }
.postfach-zeile-kopf {
   display: flex;
   justify-content: space-between;
   gap: var(--raum-2);
   align-items: baseline;
}
.postfach-von {
   font-family: var(--schrift-text); font-size: var(--groesse-text); font-weight: var(--schnitt-halb);
   color: var(--text);
   display: inline-flex;
   align-items: center;
   gap: var(--raum-1);
   min-width: 0;
}
.postfach-von, .postfach-betreff, .postfach-snippet {  overflow: hidden;  text-overflow: ellipsis;  white-space: nowrap; }
.postfach-datum {
   font-size: var(--groesse-klein);
   color: var(--text-gedimmt);
   white-space: nowrap;
   flex-shrink: 0;
}
.postfach-kat-punkt {
   width: 9px;
   height: 9px;
   border-radius: var(--radius-kreis);
   display: inline-block;
   flex-shrink: 0;
}
.postfach-betreff {  font-family: var(--schrift-text); font-size: var(--groesse-text); font-weight: var(--schnitt-halb);  color: var(--text-gedimmt);  margin-top: var(--raum-1); }
.postfach-haken {  color: var(--st-erledigt-text);  font-weight: var(--schnitt-fett);  margin-right: var(--raum-1); }
.postfach-clip {  margin-right: var(--raum-1); }
.postfach-snippet {  font-size: var(--groesse-hinweis);  color: var(--text-gedimmt);  margin-top: var(--raum-1); }
.postfach-tags-mini {
   display: flex;
   gap: var(--raum-1);
   flex-wrap: wrap;
   margin-top: var(--raum-1);
   white-space: normal;
}
.postfach-mehr-zeile {
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: var(--raum-2);
   padding: var(--raum-2) var(--raum-1) var(--raum-1);
}
.postfach-mehr-info {  font-size: var(--groesse-klein);  color: var(--text-gedimmt); }
.postfach-vorschau {
   border: 1px solid var(--linie);
   border-radius: var(--radius-karte);
   background: var(--flaeche-karte);
   padding: var(--raum-5) var(--raum-5);
   min-height: 320px;
}
.postfach-leer {  color: var(--text-gedimmt);  font-size: var(--groesse-text);  padding: var(--raum-5) var(--raum-1); }
.postfach-hinweis-block {
   border: 1px dashed var(--linie);
   border-radius: var(--radius-karte);
   padding: var(--raum-4);
   background: var(--flaeche-karte);
}
.postfach-vorschau-meta {
   display: flex;
   flex-direction: column;
   gap: var(--raum-1);
   font-size: var(--groesse-hinweis);
   color: var(--text-gedimmt);
}
.postfach-aktionsleiste {
   display: flex;
   flex-wrap: wrap;
   gap: var(--raum-2);
   align-items: center;
   margin: var(--raum-4) 0;
   padding: var(--raum-3) 0;
   border-top: 1px solid var(--linie);
   border-bottom: 1px solid var(--linie);
}
.postfach-badge {
   font-family: var(--schrift-text); font-size: var(--groesse-hinweis); font-weight: var(--schnitt-halb);
   color: var(--st-erledigt-text);
   background: var(--st-erledigt-flaeche);
   padding: var(--raum-1) var(--raum-3);
   border-radius: var(--radius-pille);
}
/* ------------------------------------------------------------
   `--flaeche-leiste` mit `--text` — vierzehnmal in beiden Vorlagen
   ------------------------------------------------------------
   Gefunden am 13.08.2026 mit einer Suche über beide Stilvorlagen, nachdem
   dasselbe Paar an der aktiven Pille aufgefallen war. Die Bauart stammt aus der
   Zeit, in der es nur den dunklen Modus gab: eine aktive Taste bekam die dunkle
   Leistenfläche und die helle Grundschrift, und das trug.

   Im hellen Modus ist `--flaeche-leiste` #16181C — und `--text` ebenfalls
   #16181C. Schrift und Fläche derselbe Wert, **1,00 : 1**: das Wort auf der
   aktiven Taste war nicht schwach, es war weg. Betroffen waren die aktive
   Pille, der aktive Ordner im Ablagebaum, die Reiter der Versicherung, die
   Schritte zweier Assistenten, die Auswahl in der Befehlsliste, drei
   Mailfilter, zwei Zähler und der Hauptknopf der Akte.

   Ersetzt durch `--flaeche-segment-aktiv` — die Rolle, die genau dafür da ist
   („aktive Segmenttaste, aktiver Reiter") und in beiden Modi trägt. Keine neue
   Farbe. Der Ablagebaum bekommt das Paar, das die Übergabe für ihn nennt:
   `--st-aktiv-flaeche` mit `--gold-text`.

   Zwei der vierzehn Fundstellen sind KEINE Mängel und deshalb unverändert:
   `.navigation` wird von der Leisten-Rolle weiter unten überschrieben
   (gemessen: 31 Texte in der Leiste, alle über 4,5 : 1), und `.bearbeiter-avatar`
   trägt keinen Text.
   ------------------------------------------------------------ */
.knopf.aktiv {
  background: var(--flaeche-segment-aktiv);
  border-color: var(--linie-stark);
  color: var(--text);
}
.postfach-vorschlag {  font-size: var(--groesse-hinweis);  color: var(--text-gedimmt);  margin-bottom: var(--raum-3); }
.postfach-tags-editor {
   display: flex;
   flex-wrap: wrap;
   gap: var(--raum-2);
   align-items: center;
   margin-bottom: var(--raum-3);
   padding: var(--raum-3);
   background: var(--flaeche-karte);
   border: 1px solid var(--linie);
   border-radius: var(--radius-karte);
}
.postfach-tag-option {
   font-size: var(--groesse-hinweis);
   color: var(--text-gedimmt);
   display: inline-flex;
   gap: var(--raum-1);
   align-items: center;
   cursor: pointer;
}
.postfach-anhaenge {
   display: flex;
   flex-wrap: wrap;
   gap: var(--raum-2);
   margin-bottom: var(--raum-3);
}
.postfach-anhang {
   display: inline-flex;
   align-items: center;
   gap: var(--raum-1);
   font-size: var(--groesse-hinweis);
   color: var(--text);
   background: var(--flaeche-seite);
   border: 1px solid var(--linie);
   border-radius: var(--radius-klein);
   padding: var(--raum-1) var(--raum-2);
   text-decoration: none;
}
.postfach-anhang:hover {  border-color: var(--gold); }
.postfach-anhang-groesse {  color: var(--text-gedimmt); }
/* .postfach-text ist durch die zentrale .mailtext ersetzt (kein max-height). */
.postfach-fuss {
   margin-top: var(--raum-3);
   font-size: var(--groesse-klein);
   color: var(--text-gedimmt);
   font-style: italic;
}
/* HIER STAND DIE NOTBREMSE, und sie ist am 13.08.2026 entfallen.
   Acht Regeln mit doppelter Klasse (`.knopf.knopf`, `.knopf.knopf-haupt`, …)
   haben die Grundregeln überstimmt, weil die Abwandlungen damals VOR ihrem
   Grundbaustein standen. Seit dem L1-Durchgang stehen sie dahinter, und seit
   Phase 3 setzt jede Regel jede Eigenschaft genau einmal — damit hatte die
   Notbremse nichts mehr zu bremsen und war nur noch die zweite Stelle, an der
   dasselbe steht. Zwei Stellen laufen auseinander; eine nicht.

   Nicht ersatzlos: `.knopf.knopf-gefahr` war die EINZIGE Stelle, an der die
   Gefahrschrift `--text-auf-gefahr` gewann. Ohne sie wäre `.knopf-gefahr` auf
   sein zweites `color: var(--gefahr-text)` gefallen — rote Schrift auf roter
   Fläche. Deshalb trägt `.knopf-gefahr` oben jetzt nur noch einen `color`. */
/* Die fünf Doppelklassen-Regeln der Abzeichen sind hier entfallen. Größe,
   Polsterung und Laufweite, die sie fünfmal wiederholten, stehen jetzt einmal
   im Grundbaustein — und gelten damit für alle zehn statt für fünf. */
/* ---------- 2. Formularraster ---------- */
/* Zweispaltiges Raster für Dialoge; bricht unter 640px auf eine
   Spalte um. `.breit` zieht ein Feld über beide Spalten. */
.lv-raster {  display: grid;  grid-template-columns: 1fr 1fr;  gap: var(--raum-4); }
.lv-raster .breit {  grid-column: 1 / -1; }
@media (max-width: 640px) {
.lv-raster {  grid-template-columns: 1fr; }
}
/* ---------- 3. Kopfzeile über Listen ---------- */
.lv-kopf {
   display: flex;
   align-items: center;
   gap: var(--raum-4);
   margin-bottom: var(--raum-4);
}
.lv-kopf .rechts {  margin-left: auto;  display: flex;  gap: var(--raum-2); }
/* ---------- 4. Leerzustand ---------- */
.lv-leer {
   color: var(--text-gedimmt);
   font-size: var(--groesse-bedien);
   padding: var(--raum-6) 0;
   text-align: center;
}
.kpi .value {  font-variant-numeric: tabular-nums; }
/* ---------- 6z. Kompakter Kopf der Detailansicht ----------

   Mit den vier neuen Reitern der Phasen 1 bis 4 stand der feste Kopf der
   Schublade rund 1200px hoch, bevor der Reiterinhalt anfing – auf einem
   normalen Bildschirm war vom Editor nichts mehr zu sehen. Der Kopf zeigt
   deshalb nur noch fünf Angaben; alles Weitere liegt hinter „Details".
   -------------------------------------------------------------- */
.drawer-titel-knoepfe {
   display: flex;
   gap: var(--raum-2);
   align-items: flex-start;
   flex: none;
}
/* Diese Regel stammt aus der Zeit, als die Angaben als fünf Etiketten im
   festen Kopf standen und in einer Zeile bleiben mussten. Seit Teil A2 sind es
   Beschriftung-und-Wert-Paare in einem Block; die Spaltenvorgabe kommt jetzt
   von .drawer-stammdaten selbst. Bliebe sie hier stehen, überschriebe sie die
   neue — genau das tat sie beim ersten Anlauf, und der Block wuchs auf 406 px. */
.drawer-stammdaten.kompakt {
  
  gap: var(--raum-1) var(--raum-6);
   margin-top: var(--raum-2);
}
/* Der aufgeklappte Bereich bekommt eine eigene Höhengrenze und scrollt selbst.
   Ohne sie wäre das Aufklappen bei einer vollen Akte genau das Problem, das
   dieser Umbau löst – nur einen Klick später. */
.drawer-details {  max-height: 42vh;  overflow-y: auto;  overscroll-behavior: contain;  margin-top: var(--raum-2); }  /* K1 */
.drawer-details > .drawer-stammdaten {  margin-top: var(--raum-2); }
/* Reiterleiste etwas enger, damit elf Reiter in zwei knappe Zeilen passen. */
.drawer-tabs {  gap: 0 var(--raum-1); }
/* ---------- 6a. Kommunikation (Phase 2) ---------- */
/* Werkzeugleiste über dem Editor. */
.lv-werkzeuge {
   display: flex;
   align-items: center;
   gap: var(--raum-1);
   flex-wrap: wrap;
   margin-bottom: var(--raum-2);
}
.lv-werkzeuge .rechts {
   margin-left: auto;
   display: flex;
   align-items: center;
   gap: var(--raum-2);
}
.lv-werkzeuge-hinweis {  font-size: var(--groesse-text);  color: var(--text-gedimmt);  margin-left: var(--raum-2); }
.lv-uhr {
   font-variant-numeric: tabular-nums;
   font-weight: var(--schnitt-halb);
   color: var(--text);
   min-width: 3.5rem;
}
/* Der Editor selbst. Feste Mindesthöhe, damit er nicht bei jedem Zeichen
   springt; der Platzhaltertext verschwindet, sobald etwas drinsteht. */
.lv-editor {
  
  min-height: 7rem;
   max-height: 22rem;
   overflow-y: auto;
  /* K1: Dieser Behälter scrollt — also gehört die Eigenschaft hierher. Die
     Prüfung zählte bis K1 nur, WIE OFT `overscroll-behavior` vorkommt (>= 17),
     nicht, ob sie an JEDEM Scrollbehälter steht. Neun hatten sie nicht. */
  overscroll-behavior: contain;
  
  border: 1px solid var(--linie);
   border-radius: var(--radius-feld);
  
  /* A1e: Der Editor lag auf --flaeche-karte und stand in einer Karte, die
     dieselbe Fläche hat – zwei gleiche Töne nebeneinander, also gar keine
     Kante. Jetzt die hellste Flächenrolle des Wertesatzes plus die kräftige
     Linie: heller als die Karte UND mit sichtbarem Rand. Der Wertesatz bleibt
     unverändert, es kommt kein neuer Wert dazu. */
  background: var(--flaeche-ueberfahren);
   border-color: var(--linie-stark);
   padding: var(--raum-2) var(--raum-3);
   line-height: 1.55;
}
.lv-editor:focus {  outline: none;  border-color: var(--gold);  box-shadow: var(--fokus-schein); }
.lv-editor:empty::before {  content: attr(data-platzhalter);  color: var(--text-gedimmt); }
/* Vorschlagsliste für = @ #. Sitzt unter dem Editor statt schwebend über ihm:
   in einer Schublade mit eigenem Scrollbereich läuft ein absolut positioniertes
   Menü sonst aus dem sichtbaren Bereich heraus. */
.lv-vorschlag {
  
  border: 1px solid var(--linie);
   border-top: none;
  
  border-radius: 0 0 var(--radius-feld) var(--radius-feld);
  
  background: var(--flaeche-karte);
   max-height: 12rem;
   overflow-y: auto;
  /* K1: Dieser Behälter scrollt — also gehört die Eigenschaft hierher. Die
     Prüfung zählte bis K1 nur, WIE OFT `overscroll-behavior` vorkommt (>= 17),
     nicht, ob sie an JEDEM Scrollbehälter steht. Neun hatten sie nicht. */
  overscroll-behavior: contain;
}
.lv-vorschlag-zeile {
  
  display: block;
   width: 100%;
   text-align: left;
   font: inherit;
   font-size: var(--groesse-bedien);
  
  padding: var(--raum-2) var(--raum-3);
   border: none;
   background: none;
   cursor: pointer;
}
.lv-vorschlag-zeile:hover, .lv-vorschlag-zeile:focus {  background: var(--flaeche-karte);  outline: none; }
/* Empfängerwahl. */
.lv-empfaenger-block {
   border: 1px solid var(--linie);
   border-radius: var(--radius-feld);
   padding: var(--raum-4);
   margin-top: var(--raum-4);
}
.lv-empfaenger-wahl {
   display: flex;
   align-items: center;
   gap: var(--raum-2);
   margin-bottom: var(--raum-1);
   font-weight: var(--schnitt-normal);
   color: var(--text);
}
.lv-empfaenger-wahl [data-beteiligt-weg] {  margin-left: auto; }
.lv-gruppe {
   display: inline-flex;
   align-items: center;
   gap: var(--raum-1);
   font-weight: var(--schnitt-normal);
   margin: 0;
}
/* Empfängerzeilen unter einem Timeline-Eintrag: wer hat es über welchen Weg
   bekommen – und wer eben nicht. */
.lv-empfaenger {
   list-style: none;
   padding: 0;
   margin: var(--raum-2) 0 0;
   font-size: var(--groesse-bedien);
}
.lv-eintrag-text {  margin-top: var(--raum-1); }
/* Schmale Angabenleiste statt Kacheln. Eine Zeile trägt so viel Information
   wie eine Kachelreihe, kostet aber ein Sechstel der Höhe – und die geht sonst
   dem Schreibfeld darunter ab. */
.lv-leiste {
  
  display: flex;
   align-items: center;
   gap: var(--raum-2);
   flex-wrap: wrap;
  
  padding: var(--raum-2) var(--raum-3);
   margin-bottom: var(--raum-2);
  
  background: var(--flaeche-karte);
   border: 1px solid var(--linie);
  
  border-radius: var(--radius-feld);
   font-size: var(--groesse-bedien);
}
.lv-leiste .rechts {
   margin-left: auto;
   display: flex;
   align-items: center;
   gap: var(--raum-1);
}
.lv-leiste-titel {
   font-size: var(--groesse-hinweis);
   letter-spacing: .08em;
   text-transform: uppercase;
   color: var(--text-gedimmt);
}
.lv-leiste-teil {  color: var(--text-gedimmt); }
.lv-leiste-teil::before {  content: '·';  margin-right: var(--raum-2); }
/* Mail-Kennwort (Phase 3): die Marke soll zum Kopieren einladen. */
.lv-kennwort {  margin-bottom: var(--raum-4); }
.lv-marke {
  
  display: inline-block;
   font-family: ui-monospace, 'SF Mono', Menlo, monospace;
  
  font-size: var(--groesse-bedien);
   background: var(--st-inarbeit-flaeche);
   color: var(--st-inarbeit-text);
  
  border-radius: var(--radius-feld);
   padding: var(--raum-1) var(--raum-2);
   user-select: all;
}
/* Aktiver Filterknopf über der Timeline. */
.lv-filter.aktiv {  background: var(--st-aktiv-flaeche);  color: var(--text);  font-weight: var(--schnitt-halb); }
/* ---------- 6. Frist-Ampel ---------- */
/* Verbindliche Zuordnung aus dem Design-Fundament: aktiv gelb,
   bald ablaufend warn, abgelaufen rot, erledigt grün. Die
   Zuordnung Zustand → Klasse passiert im Frontend, damit sie
   nur an einer Stelle steht. */
.lv-frist {  display: inline-flex;  align-items: center;  gap: var(--raum-1); }
.lv-frist::before {
   content: '';
   width: 8px;
   height: 8px;
   border-radius: var(--radius-kreis);
   background: currentColor;
   flex: none;
}
/* ---------------------------------------------------------------
   7 — Vorsortierter Posteingang
   ---------------------------------------------------------------
   Ein Vorschlag ist keine Tatsache. Er wird deshalb ruhiger gesetzt
   als eine bestätigte Zuordnung: gestrichelter Rand statt Fläche,
   Gold nur als schmale Kante. Erst das Ja macht daraus einen Haken.
   Die Begründung steht immer beim Ziel — ein Vorschlag ohne Grund
   ist eine Behauptung. */
.postfach-vorsort {
  
  margin-top: var(--raum-2);
   padding: var(--raum-1) var(--raum-2);
  
  border: 1px dashed var(--gold);
   border-radius: var(--radius-klein);
  
  background: var(--st-aktiv-flaeche);
  
  display: flex;
   flex-direction: column;
   gap: var(--raum-1);
}
.postfach-vorsort-ziel {
  
  font-size: var(--groesse-klein);
   font-weight: var(--schnitt-fett);
   color: var(--text);
  
  overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
}
.postfach-vorsort-grund {  font-size: var(--groesse-winzig);  color: var(--text-gedimmt);  font-style: italic; }
/* Der Vorschlag in der Detailansicht: dort ist Platz für die beiden
   Antworten darauf, also stehen sie direkt darunter. */
.postfach-vorschlag {
  
  border: 1px dashed var(--gold);
   border-radius: var(--radius-klein);
  
  padding: var(--raum-2) var(--raum-3);
   background: var(--st-aktiv-flaeche);
}
.postfach-vorschlag-grund {
   font-size: var(--groesse-klein);
   color: var(--text-gedimmt);
   font-style: italic;
   margin-top: var(--raum-1);
}
.postfach-vorschlag-knoepfe {  display: flex;  gap: var(--raum-2);  margin-top: var(--raum-2); }
/* ---------------------------------------------------------------
   10 — D5a: die Akte auf der ganzen Seite
   ---------------------------------------------------------------
   Kopfzeile nach Facilioo-Muster (Screenshot 05): Brotkrume, Titel,
   darunter eine Kontextzeile mit Aktenzeichen, Objekt, Einheit und
   Typ. Vorher stand über dem Titel nur das Aktenzeichen; das Objekt
   fand man erst in den Stammdaten darunter. */
.drawer-krume {
  
  display: flex;
   align-items: center;
   gap: var(--raum-2);
  
  font-size: var(--groesse-klein);
   color: var(--text-gedimmt);
   margin-bottom: var(--raum-1);
}
.drawer-krume-zurueck {
  
  background: none;
   border: 0;
   padding: 0;
   cursor: pointer;
  
  font: inherit;
   color: var(--gold-text);
   text-decoration: underline;
}
.drawer-krume-zurueck:hover {  color: var(--text); }
.drawer-kontext {
  
  margin: var(--raum-1) 0 0;
   font-size: var(--groesse-hinweis);
   color: var(--text-gedimmt);
  
  display: flex;
   flex-wrap: wrap;
   align-items: center;
   gap: var(--raum-2);
}
/* Das Aktenzeichen behält seine Auszeichnung, steht jetzt aber in der
   Kontextzeile statt über dem Titel. */
.drawer-kontext .aktenzeichen {  margin: 0; }
/* Auf der vollen Breite hat der Kopf Platz für mehr als zwei Spalten;
   in der Schublade waren 132px Mindestbreite richtig, hier wirken sie
   zerfleddert. */
/* Teil A2: „Allgemeine Daten" - kompakt, zweispaltig, Beschriftung links und
   Wert rechts, wie in der Vorlage. Vorher stand die Beschriftung UEBER dem
   Wert; das war fuer den festen Kopf gedacht, wo die Liste ueber die ganze
   Breite lief. Als Block in der Uebersicht kostete dieselbe Anordnung 303 px
   Hoehe und schob die drei Spalten aus dem Fenster. Nebeneinander sind es zwei
   Paare je Zeile - halb so viele Zeilen. */
.drawer-stammdaten {  display: grid;  grid-template-columns: repeat(2, max-content minmax(0, 1fr));  align-items: baseline; }
@media (max-width: 900px) {
.drawer-stammdaten {  grid-template-columns: max-content minmax(0, 1fr); }
}
/* ---------------------------------------------------------------
   11 — D5b: fünf Reiter, benannte Blöcke, Aktionsspalte
   ---------------------------------------------------------------
   Facilioo teilt die Übersicht in Kästen mit Titelleiste, jeder
   beantwortet eine Frage (Screenshot 05: Allgemeine Daten,
   Sachverhalt, Ansprechpartner, Aufgaben, Zuständige Mitarbeiter,
   Wer sieht das, Wo findet es statt). Rechts daneben stehen die
   Aktionen als eigene Spalte. Bei uns lagen dieselben Angaben in
   einer Feldwüste hinter „Details ▾". */
.lv-akte {
  
  display: grid;
   grid-template-columns: minmax(0, 1fr) 232px;
  
  gap: var(--raum-6);
   align-items: start;
}
.lv-akte-haupt {
   display: flex;
   flex-direction: column;
   gap: var(--raum-4);
   min-width: 0;
}
/* Teil A3: Drei Spalten nebeneinander statt einer Säule — Sachverhalt,
   Beteiligte, Checkliste. Das ist der eigentliche Unterschied zur Vorlage:
   gestapelt schob LV alles Wichtige nach unten (gemessen: 1719 px Inhalt bei
   800 px Fenster).
   `align-items: stretch` und `min-height: 0` sind der Abnahmepunkt „keine
   Spalte schwebt allein in leerem Raum, alle drei sind gleich hoch": ohne sie
   wäre jede Spalte so hoch wie ihr eigener Inhalt. Der Deckel hält die drei im
   Fenster; wo mehr drinsteht, scrollt die Spalte in sich. */
.akte-spalten {
   display: grid;
  /* ZWEI Spalten seit dem 13.08.2026, vorher drei. Die dritte war die
     Checkliste; sie ist zum geführten Ablauf geworden und steht jetzt unter den
     beiden über die volle Breite — bei 208 px Spaltenbreite brach ihre
     Fristzeile auf 139 px Höhe um, je Schritt. Der Name der Klasse trägt
     deshalb keine Zahl mehr. */
   grid-template-columns: repeat(2, minmax(0, 1fr));
  /* Wie bei F6: der Deckel allein genügt nicht. Ohne minmax(0, 1fr) richtet
     sich die Rasterzeile nach ihrem Inhalt und wächst darüber hinaus —
     gemessen: Behälter 352 px, Spalten 638 px. */
   grid-template-rows: minmax(0, 1fr);
   gap: var(--raum-4);
   align-items: stretch;
  /* Der Deckel kommt aus der Messung (akteDreiEinpassen), nicht aus einer
     festen Zahl: wie viel Platz bleibt, hängt davon ab, was über den Spalten
     steht, und das ist von Akte zu Akte verschieden. Hier steht nur die
     Untergrenze, damit eine sehr volle Akte die Spalten nicht auf null drückt. */
   min-height: 11rem;
}
.akte-spalten > .lv-block {
   min-height: 0;
   overflow-y: auto;
  /* F7 gilt auch hier: das Scrollen bleibt in der Spalte. */
   overscroll-behavior: contain;
}
/* Unter 1200 px wären zwei Spalten schmaler als eine Telefonnummer. */
@media (max-width: 1200px) {
.akte-spalten {  grid-template-columns: 1fr;  max-height: none; }
}
/* Teil A2 + A3: Der Kopfbereich der Übersicht — allgemeine Daten links, der
   Stand rechts daneben. Untereinander kosteten die beiden Standzeilen 98 px,
   und die drei Spalten begannen dadurch so weit unten, dass sie aus dem
   Fenster fielen. */
/* Beim ersten Anlauf wurde nebeneinander SCHLECHTER: der Datenblock wurde
   schmaler, sein Raster brach auf mehr Zeilen um, und der Kopfbereich wuchs von
   354 auf 441 px. Ursache war die alte Bauart mit `display: contents` — die
   Paare wurden einzeln eingeordnet und fielen beim Umbruch auseinander.
   Seit G2 ist jedes Paar selbst ein Rasterfeld; damit trägt der Datenblock
   auch die halbe Breite. Erneut gemessen an LV-2026-0002: Kopfbereich
   367 → 256 px, die drei Spalten enden bei 712 statt 812. */
.akte-kopfbereich {
   display: grid;
   grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
   align-items: start;
   gap: var(--raum-3) var(--raum-5);
}
/* Unter 1200 px teilt sich schon die Aktenansicht selbst auf; dann ist auch
   hier untereinander richtig. */
@media (max-width: 1200px) {
.akte-kopfbereich {  grid-template-columns: minmax(0, 1fr); }
}
.akte-stand {  min-width: 0; }
.akte-teilkopf {
   margin: var(--raum-4) 0 var(--raum-2);
   font-size: var(--groesse-klein);
   color: var(--text-gedimmt);
   text-transform: uppercase;
   letter-spacing: .04em;
}
/* G1: Die Bewohner stehen an der Einheit nebeneinander in EINER Zeile, nur
   Rolle und Name. Untereinander mit Telefon und Mail waren sie 79 px hoch und
   wiederholten Zeichen für Zeichen, was in der Spalte „Beteiligte" steht. */
.einheit-bewohner {  display: inline-flex;  flex-wrap: wrap;  gap: var(--raum-1) var(--raum-3); }
.bewohner-zeile {  display: inline-flex;  flex-wrap: nowrap;  align-items: baseline;  gap: var(--raum-1); }
/* Unter 1080px hätte die Aktionsspalte weniger Platz als ihre längste
   Beschriftung; dort rutscht sie unter die Blöcke. */
@media (max-width: 1080px) {
.lv-akte {  grid-template-columns: 1fr; }
}
.lv-akte-aktionen {
  
  display: flex;
   flex-direction: column;
   gap: var(--raum-1);
  
  position: sticky;
   top: 0;
}
.lv-akte-aktionen .knopf {  width: 100%;  text-align: center;  justify-content: center; }
.lv-akte-aktionen .ga-status {  font-size: var(--groesse-klein);  color: var(--text-gedimmt); }
/* Ein benannter Block. Die Beschriftung folgt der Auszeichnung, die
   „Mein Tag" schon benutzt: klein, gesperrt, in Gold. */
.lv-block {
  
  border: 1px solid var(--linie);
   border-radius: var(--radius-karte);
  
  background: var(--weiss, var(--flaeche-karte));
   padding: var(--raum-3) var(--raum-4) var(--raum-4);
}
.lv-block-zahl {
  
  font-size: var(--groesse-winzig);
   font-weight: var(--schnitt-fett);
   color: var(--text);
  
  background: var(--st-aktiv-flaeche);
   border-radius: var(--radius-klein);
   padding: var(--raum-1) var(--raum-2);
  
  font-variant-numeric: tabular-nums;
   letter-spacing: 0;
}
.lv-block-leer {  color: var(--text-gedimmt);  font-size: var(--groesse-text);  margin: 0; }
/* Die Stammdaten sitzen jetzt in einem Block und brauchen dort keinen
   zusätzlichen Abstand nach oben mehr. */
.lv-block > .drawer-stammdaten {  margin-top: 0; }
/* Mit fünf statt elf Reitern passt die Leiste wieder in eine Zeile und
   darf atmen. */
.drawer-tabs {  gap: 0 var(--raum-2);  flex-wrap: wrap; }
/* ---------------------------------------------------------------
   12 — Mails: Richtung auf einen Blick
   ---------------------------------------------------------------
   Die Tabelle `mails` hat keine Richtungsspalte; der Server leitet
   sie aus von/an gegen die eigene Maildomäne ab. Bisher stand über
   jeder Mail nur „Datum · Absender" — bei einer Akte mit zwölf
   Mails war nicht zu erkennen, was wir geschickt und was uns
   erreicht hat, und schon gar nicht, was fremde Korrespondenz ist.

   Drei Mittel gleichzeitig, weil Farbe allein zu wenig ist:
   ein Pfeil, ein Wort und ein farbiger Streifen am linken Rand. */
.mail-richtung {
  
  flex: none;
   display: inline-flex;
   align-items: center;
   gap: var(--raum-1);
  
  font-size: var(--groesse-winzig);
   font-weight: var(--schnitt-fett);
   letter-spacing: .04em;
  
  text-transform: uppercase;
   padding: var(--raum-1) var(--raum-2);
   border-radius: var(--radius-klein);
  
  white-space: nowrap;
}
.mail-richtung-gesendet {  background: var(--st-erledigt-flaeche);  color: var(--st-erledigt-text); }
.mail-richtung-empfangen {  background: var(--flaeche-vertieft);   color: var(--text); }
..mail-richtung-abgelegt {  background: var(--flaeche-vertieft);   color: var(--st-inarbeit-text); }
/* Marken sitzen obendrauf, nicht daneben: eine weitergeleitete Mail ist
   trotzdem eine empfangene. Deshalb schlichter als die Richtung. */
.mail-marke {
  
  flex: none;
   font-size: var(--groesse-winzig);
   color: var(--text);
  
  border: 1px solid var(--linie);
   border-radius: var(--radius-klein);
   padding: var(--raum-1) var(--raum-2);
  
  white-space: nowrap;
}
.mail-marke-kopie {  border-style: dashed; }
.mail-partner {
   color: var(--text);
   font-size: var(--groesse-hinweis);
   min-width: 0;
  
  overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
}
/* Nur das Verhältniswort bleibt zurückgenommen – es ist Grammatik, keine
   Angabe. Gedämpft, aber nicht ausgeblichen. */
.mail-partner-wort {  color: var(--st-inarbeit-text); }
/* Der Streifen am linken Rand. Ohne ihn muss man beim Überfliegen jede
   Zeile einzeln lesen. */
.mail-eintrag, .mail-kompakt-zeile {  border-left: 3px solid transparent;  padding-left: var(--raum-3); }
.mail-hat-gesendet {  border-left-color: var(--melden-erfolg); }
.mail-hat-empfangen {  border-left-color: var(--linie-stark); }
.mail-hat-abgelegt {  border-left-color: var(--linie); }
.mail-eintrag-kopf {
  
  display: flex;
   align-items: center;
   gap: var(--raum-2);
   flex-wrap: wrap;
  
  margin-bottom: var(--raum-1);
}
.mail-eintrag-datum, .mail-kompakt-datum {
  
  margin-left: auto;
   flex: none;
   font-size: var(--groesse-hinweis);
   color: var(--text);
  
  font-variant-numeric: tabular-nums;
}
/* Knappe Fassung für die Übersicht: eine Zeile je Mail, nur lesen. */
.mail-kompakt {  display: flex;  flex-direction: column; }
.mail-kompakt-zeile {
  
  display: flex;
   align-items: center;
   gap: var(--raum-2);
  
  padding-top: var(--raum-1);
   padding-bottom: var(--raum-1);
  
  border-bottom: 1px solid var(--flaeche-seite);
}
.mail-kompakt-zeile:last-child {  border-bottom: 0; }
.mail-kompakt-betreff {
  
  font-size: var(--groesse-text);
   font-weight: var(--schnitt-halb);
   color: var(--text);
  
  min-width: 0;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
}
.lv-block-mehr {  margin-top: var(--raum-2); }
/* In der Mail-Liste (Rubrik „Mails") steht die Richtung vor dem Betreff. */
.mail-karte .akte-kopf {  flex-wrap: wrap;  gap: var(--raum-2); }
@media (max-width: 767px) {
.mail-kompakt-zeile {  flex-wrap: wrap; }
.mail-kompakt-datum {  margin-left: 0; }
}
/* Mailtext und Vorschauzeile standen in --grau ((Farbwert)) bzw. --tinte
   ((Farbwert)). Beides ist Luca zu blass gewesen; hier gilt jetzt durchgehend
   Luvaris-Navy. Betrifft die Vorschau und den aufgeklappten Volltext in
   Vorgangsakte, Mail-Liste und Postfach gleichermaßen — dieselbe Schrift
   soll überall dieselbe Farbe haben. */
.mailtext {  color: var(--text); }
.mailtext-summary {  color: var(--text); }
/* Aufgeklappt bleibt die Zusammenfassung Gold: sie ist dann ein Schalter
   („Volltext einklappen"), keine Textzeile mehr. */
/* ---------------------------------------------------------------
   13 — Zitierte Vormails im Mailtext trennen
   ---------------------------------------------------------------
   Ein Mailtext trägt die ganze Vorgeschichte mit sich. Als
   durchlaufender Text sah das aus wie eine einzige lange Mail: das
   Ende der einen und der Anfang der nächsten gingen ineinander
   über. Jetzt eine beschriftete Trennlinie dazwischen, der
   Kopfblock als kleine Tafel, und je Zitatebene eine Einrückung
   mit Randlinie. */
.mailtext-geteilt {  white-space: normal; }
.mailtext-koerper {  white-space: pre-wrap;  word-break: break-word; }
.mailtext-teil + .mailtext-teil {  margin-top: var(--raum-3); }
.mailtext-trenner {
  
  display: flex;
   align-items: center;
   gap: var(--raum-2);
  
  margin: var(--raum-5) 0 var(--raum-3);
}
.mailtext-trenner::before, .mailtext-trenner::after {
  
  content: '';
   flex: 1;
   height: 1px;
   background: var(--linie);
}
/* Der Kopfblock der zitierten Mail: zwei Spalten, damit Von, Gesendet, An und
   Betreff untereinander fluchten statt als vier Fließtextzeilen zu wirken. */
.mailtext-kopfzeilen {
  
  display: grid;
   grid-template-columns: auto minmax(0, 1fr);
   gap: var(--raum-1) var(--raum-2);
  
  margin: 0 0 var(--raum-2);
   padding: var(--raum-2) var(--raum-3);
  
  background: var(--flaeche-seite);
   border-radius: var(--radius-klein);
   font-size: var(--groesse-hinweis);
   line-height: 1.45;
}
/* Je tiefer das Zitat, desto weiter eingerückt – bis vier Stufen, danach
   bringt es nichts mehr und frisst nur Breite. */
.mailtext-zitat {  border-left: 2px solid var(--linie);  padding-left: var(--raum-3); }
.mailtext-tiefe-2 {  margin-left: var(--raum-2); }
.mailtext-tiefe-3 {  margin-left: var(--raum-5); }
.mailtext-tiefe-4 {  margin-left: var(--raum-8); }
/* ---------------------------------------------------------------
   14 — Reiter „Mails": Gespräche statt Einzelmails
   ---------------------------------------------------------------
   Zwölf Mails an einem Vorgang sind meistens drei oder vier
   Gespräche, die mehrfach hin und her gingen. Flach untereinander
   sieht man das nicht: derselbe Betreff steht viermal da, nur mit
   einem weiteren „AW:" davor, und jede Mail trägt die ganze
   Vorgeschichte noch einmal mit sich.

   Vier Hebel: nach Gespräch klammern, eine Zeile je Mail,
   Vorgeschichte eingeklappt, Filter nach Richtung. */
.mailk-kopf {  align-items: flex-start;  flex-wrap: wrap;  gap: var(--raum-2); }
.mailk-filter {  display: flex;  gap: var(--raum-1);  flex-wrap: wrap; }
.mailk-filter .knopf.aktiv { 
  background: var(--flaeche-segment-aktiv);  border-color: var(--linie-stark);  color: var(--text); }
.mailk-zahl {  opacity: .65;  font-variant-numeric: tabular-nums;  margin-left: var(--raum-1); }
/* Ein Gespräch. Der Kopf sagt worum es geht, wie oft und über welchen
   Zeitraum – das ersetzt viermal denselben Betreff. */
.mailg {
  
  border: 1px solid var(--linie);
   border-radius: var(--radius-karte);
  
  background: var(--flaeche-karte);
   margin-bottom: var(--raum-2);
   overflow: hidden;
}
.mailg-kopf {
  
  display: flex;
   align-items: baseline;
   gap: var(--raum-2);
  
  padding: var(--raum-2) var(--raum-3);
   background: var(--flaeche-seite);
  
  border-bottom: 1px solid var(--linie);
}
.mailg-titel {
  
  font-size: var(--groesse-text);
   font-weight: var(--schnitt-fett);
   color: var(--text);
  
  min-width: 0;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
}
.mailg-zahl {
  
  flex: none;
   font-size: var(--groesse-winzig);
   font-weight: var(--schnitt-fett);
   color: var(--text);
  
  background: var(--st-aktiv-flaeche);
   border-radius: var(--radius-klein);
   padding: var(--raum-1) var(--raum-2);
  
  font-variant-numeric: tabular-nums;
}
.mailg-spanne {
  
  flex: none;
   margin-left: auto;
   font-size: var(--groesse-klein);
   color: var(--st-inarbeit-text);
  
  font-variant-numeric: tabular-nums;
   white-space: nowrap;
}
/* Eine Zeile je Mail; gelesen wird erst beim Aufklappen. */
.mailz {  border-top: 1px solid var(--linie); }
.mailz:first-of-type {  border-top: 0; }
.mailz-zeile {
  
  display: flex;
   align-items: center;
   gap: var(--raum-2);
   cursor: pointer;
  
  padding: var(--raum-2) var(--raum-3) var(--raum-2) var(--raum-2);
   list-style: none;
}
.mailz-zeile::-webkit-details-marker {  display: none; }
.mailz-zeile .klapp-pfeil {  color: var(--gold-text); }
.mailz[open] > .mailz-zeile {  background: var(--flaeche-seite); }

.mailz-zeile:hover {  background: var(--flaeche-seite); }
.mailz-klammer {  flex: none;  font-size: var(--groesse-klein);  color: var(--text); }
.mailz-datum {
  
  flex: none;
   margin-left: auto;
   font-size: var(--groesse-hinweis);
   color: var(--text);
  
  font-variant-numeric: tabular-nums;
}
.mailz-inhalt {  padding: var(--raum-1) var(--raum-3) var(--raum-4) var(--raum-8); }
.mailz-betreff {
  
  font-size: var(--groesse-text);
   font-weight: var(--schnitt-halb);
   color: var(--text);
   margin-bottom: var(--raum-2);
}
/* Der eigentliche Hebel: die zitierte Vorgeschichte steht ohnehin als eigene
   Mail in derselben Liste. Standardmäßig zu. */
.mailtext-vorgeschichte {  margin-top: var(--raum-4); }
@media (max-width: 767px) {
.mailz-zeile {  flex-wrap: wrap; }
.mailz-datum {  margin-left: 0; }
.mailz-inhalt {  padding-left: var(--raum-4); }
}
/* Platzhalter-Liste unter dem Baustein-Editor: klickbar statt nur lesbar. */
.platzhalter-chip {
  
  font: inherit;
   font-size: var(--groesse-klein);
   cursor: pointer;
  
  background: var(--flaeche-seite);
   color: var(--text);
  
  border: 1px solid var(--linie);
   border-radius: var(--radius-pille);
  
  padding: var(--raum-1) var(--raum-2);
   margin: 0 var(--raum-1) var(--raum-1) 0;
}
.platzhalter-chip:hover {  background: var(--gold);  border-color: var(--gold); color: var(--text-auf-gold); }
/* ---------------------------------------------------------------
   15 — Empfängergruppen und Vorschau
   ---------------------------------------------------------------
   Vorher stand hier eine einzige Auswahl „zusätzlich alle am
   Objekt", die zu niemandem auflöste und stillschweigend nichts
   versendete. Jetzt vier Gruppen — und darunter namentlich, wen
   sie erreichen. Ein Rundschreiben an alle Eigentümer will man
   gesehen haben, bevor es rausgeht. */
.lv-gruppen {
  
  display: flex;
   align-items: center;
   gap: var(--raum-2);
   flex-wrap: wrap;
  
  margin-top: var(--raum-2);
   padding-top: var(--raum-2);
  
  border-top: 1px solid var(--linie);
}
.lv-gruppen-titel {
  
  font-size: var(--groesse-winzig);
   font-weight: var(--schnitt-fett);
   letter-spacing: .06em;
  
  text-transform: uppercase;
   color: var(--gold-text);
}
.lv-gruppe {
   display: inline-flex;
   align-items: center;
   gap: var(--raum-1);
   font-size: var(--groesse-hinweis);
   color: var(--text);
}
.lv-vorschau {  margin-top: var(--raum-2); }
.lv-vorschau-block {
  
  border: 1px solid var(--linie);
   border-radius: var(--radius-karte);
  
  background: var(--flaeche-seite);
   padding: var(--raum-2) var(--raum-3);
}
.lv-vorschau-ok {  font-size: var(--groesse-klein);  color: var(--st-erledigt-text); }
/* Fehlende Adressen sind der Grund, warum es diese Vorschau gibt – deshalb
   fällt der Block dann von selbst auf und ist gleich aufgeklappt. */
.lv-vorschau-warn {  font-size: var(--groesse-klein);  font-weight: var(--schnitt-fett);  color: var(--gefahr-text); }
.lv-vorschau-liste {  list-style: none;  margin: var(--raum-2) 0 0;  padding: 0; }
.lv-vorschau-name {  font-weight: var(--schnitt-halb);  color: var(--text); }
.lv-vorschau-detail {  font-size: var(--groesse-klein);  color: var(--st-inarbeit-text); }
.lv-vorschau-mail {  margin-left: auto;  font-size: var(--groesse-klein);  color: var(--text); }
.lv-vorschau-fehlt .lv-vorschau-mail {  color: var(--gefahr-text);  font-style: italic; }
.lv-vorschau-leer {  font-size: var(--groesse-hinweis);  color: var(--text);  line-height: 1.5; }
/* ---------------------------------------------------------------
   16 — Bilder in Mails
   ---------------------------------------------------------------
   Was in einer Mail wie eine Tabelle aussieht, ist oft ein
   eingefügtes Bild. In der Textfassung blieb davon nur die Marke
   [cid:image003.png@…] stehen — an genau der Stelle, an der die
   Zahlen standen. Jetzt steht dort das Bild.

   Dazu zwei Ergänzungen: Bildanhänge zeigen sich als Vorschau
   statt als Dateiname (bei „image001.jpg" sagt der Name nichts),
   und über jeder Mail steht ein Umschalter zur Originalansicht —
   dem HTML, wie der Absender es geschickt hat. */
.mailtext-bild {
  
  display: block;
   margin: var(--raum-3) 0;
   padding: 0;
  
  max-width: 100%;
}
/* Bildanhang als Kachel: Vorschau oben, Name darunter. Die Kachel bleibt
   klein — sie ersetzt einen Chip, sie ist keine Galerie. */
.mail-anhang-bild, .postfach-anhang-bild {
  
  display: inline-flex;
   flex-direction: column;
   gap: var(--raum-1);
  
  width: 108px;
   padding: var(--raum-1);
   text-align: left;
   vertical-align: top;
}
/* Umschalter Text | Original. Zwei feste Ansichten, keine Klappe. */
.mail-ansicht {  display: inline-flex;  gap: 0;  margin: 0 0 var(--raum-2); }
.mail-ansicht-btn {
  
  border: 1px solid var(--linie);
   background: var(--flaeche-seite);
  
  color: var(--st-inarbeit-text);
   font-size: var(--groesse-klein);
   font-weight: var(--schnitt-halb);
  
  padding: var(--raum-1) var(--raum-3);
   cursor: pointer;
}
.mail-ansicht-btn:first-child {  border-radius: var(--radius-klein) 0 0 var(--radius-klein); }
.mail-ansicht-btn:last-child {  border-radius: 0 var(--radius-klein) var(--radius-klein) 0;  border-left: 0; }
.mail-ansicht-btn.aktiv {  background: var(--flaeche-segment-aktiv);  border-color: var(--linie-stark);  color: var(--text); }
/* Der Rahmen mit dem fremden HTML. Er hat keine Skriptrechte (siehe
   mailOriginalRahmen in app.js); hier steht nur, wie er aussieht. */
.mail-original {
  
  display: block;
   width: 100%;
   height: 320px;
   border: 1px solid var(--linie);
  
  border-radius: var(--radius-klein);
   background: var(--flaeche-karte);
}
.mail-original-hinweis {
  
  margin: var(--raum-2) 0 0;
   font-size: var(--groesse-klein);
   line-height: 1.45;
   color: var(--st-inarbeit-text);
}
.mail-original-mehr {  margin-top: var(--raum-2); }
/* ---------------------------------------------------------------
   17 — Antworten (Block 1b)
   ---------------------------------------------------------------
   Im Mails-Reiter ließ sich lesen, aber nicht reagieren. Die drei
   Aktionen stehen jetzt unter jeder Mail, und der Schreiben-Dialog
   trägt bei einer Antwort seinen Bezug im Kopf. */
.mail-antwortknoepfe {
  
  display: flex;
   gap: var(--raum-2);
   flex-wrap: wrap;
  
  margin: var(--raum-3) 0 var(--raum-1);
}
.lv-antwortbezug {
  
  margin: 0 0 var(--raum-3);
   padding: var(--raum-2) var(--raum-3);
  
  background: var(--flaeche-seite);
   border-left: 3px solid var(--gold);
   border-radius: 0 var(--radius-klein) var(--radius-klein) 0;
  
  font-size: var(--groesse-hinweis);
   line-height: 1.45;
   color: var(--text);
}
/* Anhänge zum Anhaken: eine Liste, keine Kachelwand. Beim Weiterleiten sind
   die der Ursprungsmail schon angehakt, beim Antworten keiner. */
.lv-anhaenge {
  
  margin: 0 0 var(--raum-3);
   padding: var(--raum-2) var(--raum-3);
  
  border: 1px solid var(--linie);
   border-radius: var(--radius-klein);
  
  /* Eine Mail mit acht Anhängen an einem Vorgang mit dreizehn Dateien ergibt
     21 Zeilen. Ungebremst schöbe die Liste Betreff und Text aus dem Dialog. */
  max-height: 220px;
   overflow-y: auto;
  /* K1: Dieser Behälter scrollt — also gehört die Eigenschaft hierher. Die
     Prüfung zählte bis K1 nur, WIE OFT `overscroll-behavior` vorkommt (>= 17),
     nicht, ob sie an JEDEM Scrollbehälter steht. Neun hatten sie nicht. */
  overscroll-behavior: contain;
}
.lv-anhang-quelle {
  
  margin: var(--raum-1) 0 var(--raum-1);
   font-size: var(--groesse-klein);
   font-weight: var(--schnitt-fett);
   color: var(--st-inarbeit-text);
}
/* Kollisionsfix: `.modal label` aus style.css stellt jedes Label im Dialog
   als Spalte (Beschriftung über Feld). Für ein Kästchen mit Dateinamen
   daneben ist das falsch herum – hier gilt die Zeile. Ein Selektorteil mehr,
   damit die Spezifität reicht; das ist der dokumentierte Zweck dieser Datei. */
.modal .lv-anhang-wahl {
  
  display: flex;
   flex-direction: row;
   align-items: center;
   gap: var(--raum-2);
  
  padding: var(--raum-1) 0;
   font-size: var(--groesse-hinweis);
   font-weight: var(--schnitt-normal);
   color: var(--text);
}
.lv-anhang-groesse {  margin-left: auto;  font-size: var(--groesse-klein);  color: var(--st-inarbeit-text); }
/* Status und Fälligkeit im Kopf der Akte (Block 1b). Beides sind jetzt
   Bedienelemente, sollen aber nicht wie Formularfelder aussehen: sie stehen in
   einer Zeile mit fünf Angaben und dürfen sie nicht sprengen. Die Statusfarbe
   bleibt erhalten – als Streifen links, weil ein farbig gefülltes Auswahlfeld
   neben vier ruhigen Angaben schreit. */
.drawer-stammdaten .kopf-status,
.drawer-stammdaten .kopf-datum {
  
  width: auto;
   max-width: 100%;
  
  padding: var(--raum-1) var(--raum-2);
   font-size: var(--groesse-text);
  
  border: 1px solid var(--linie);
   border-radius: var(--radius-klein);
   background: var(--flaeche-karte);
}
.drawer-stammdaten .kopf-status {  border-left-width: 4px; }
.drawer-stammdaten .kopf-status[data-stand="offen"] {  border-left-color: var(--st-offen-text); }
.drawer-stammdaten .kopf-status[data-stand="in_arbeit"] {  border-left-color: var(--st-inarbeit-text); }
.drawer-stammdaten .kopf-status[data-stand="wartend"] {  border-left-color: var(--st-neutral-text); }
.drawer-stammdaten .kopf-status[data-stand="erledigt"] {  border-left-color: var(--st-erledigt-text); }
/* ---------------------------------------------------------------
   18 — Aus der Mail vorbelegt (M5)
   ---------------------------------------------------------------
   Ein Vorgang, der aus einer Mail entsteht, hat Felder aus zwei
   Quellen: getippte und gelesene. Die gelesenen tragen eine Marke,
   damit niemand einen geratenen Wert für einen geprüften hält.
   Durchgezogen = sicher (Betreff, Text). Gestrichelt = plausibel,
   also nachsehen (Objekt, Einheit, Kategorie, Typ, Priorität). */
.lv-ausmail-legende {
  
  margin: 0 0 var(--raum-3);
   padding: var(--raum-2) var(--raum-3);
  
  background: var(--flaeche-seite);
   border-left: 3px solid var(--gold);
   border-radius: 0 var(--radius-klein) var(--radius-klein) 0;
  
  font-size: var(--groesse-hinweis);
   line-height: 1.5;
   color: var(--text);
}
.modal .aus-mail {  border-left: 3px solid var(--gold); }
.modal .aus-mail-plausibel {  border-left-style: dashed; }
/* ---------------------------------------------------------------
   19 — Erkannte Schadennummern (M2)
   ---------------------------------------------------------------
   Was in der Mail steht, mit Herkunft daneben. Eingetragen wird
   nur auf Klick – und mehrere Nummern in einer Mail heissen
   ausdrücklich: hier entscheidet niemand automatisch. */
.postfach-nummern {
  
  margin: var(--raum-3) 0;
   padding: var(--raum-2) var(--raum-3);
  
  background: var(--flaeche-seite);
   border: 1px solid var(--linie);
   border-radius: var(--radius-klein);
}
.postfach-nummern-titel {
  
  font-size: var(--groesse-klein);
   font-weight: var(--schnitt-fett);
   letter-spacing: .06em;
  
  text-transform: uppercase;
   color: var(--st-inarbeit-text);
   margin-bottom: var(--raum-1);
}
.postfach-nummer {
  
  display: flex;
   align-items: center;
   gap: var(--raum-2);
   flex-wrap: wrap;
  
  padding: var(--raum-1) 0;
   font-size: var(--groesse-hinweis);
}
.postfach-nummer-herkunft {  font-size: var(--groesse-klein);  color: var(--st-inarbeit-text); }
.postfach-nummer-bekannt {
   font-size: var(--groesse-klein);
   color: var(--st-erledigt-text);
   font-weight: var(--schnitt-halb);
}
.postfach-nummer-hinweis {  font-size: var(--groesse-klein);  color: var(--st-inarbeit-text);  margin: var(--raum-1) 0 0; }
.postfach-nummer-warnung {
  
  margin: var(--raum-2) 0 0;
   font-size: var(--groesse-klein);
   line-height: 1.45;
   color: var(--gefahr-text);
   font-weight: var(--schnitt-halb);
}
.postfach-nummer-quelle {  padding: var(--raum-1) var(--raum-1);  font-size: var(--groesse-klein);  width: auto; }
/* ---------------------------------------------------------------
   20 — Kontaktvorschlag aus der Signatur (M4)
   --------------------------------------------------------------- */
.postfach-kontakt {
  
  margin: var(--raum-3) 0;
   padding: var(--raum-2) var(--raum-3);
  
  background: var(--flaeche-seite);
   border: 1px solid var(--linie);
   border-radius: var(--radius-klein);
}
.lv-kontakt-raster {
  
  display: grid;
   grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  
  gap: var(--raum-1) var(--raum-2);
   margin: var(--raum-2) 0;
}
.modal .lv-kontakt-feld, .lv-kontakt-feld {  display: flex;  flex-direction: column;  gap: var(--raum-1); }
.lv-kontakt-aktionen {
   display: flex;
   gap: var(--raum-2);
   align-items: center;
   flex-wrap: wrap;
}
/* ---------------------------------------------------------------
   21 — Mail-Vorlagen (Reihe V)
   ---------------------------------------------------------------
   Die Auswahl sitzt in der Werkzeugleiste des Editors, neben den
   Bausteinen — sie ist die Ebene darüber, nicht deren Ersatz. */
.lv-vorlagenwahl {
   width: auto;
   max-width: 200px;
   padding: var(--raum-1) var(--raum-1);
   font-size: var(--groesse-hinweis);
}
/* A7: Kategorie- und Gewerkfilter über der Timeline. Dieselben Maße wie die
   Vorlagenwahl – sie stehen in derselben Zeile wie die Filterknöpfe. */
.lv-filter-wahl {
   width: auto;
   max-width: 190px;
   padding: var(--raum-1) var(--raum-1);
   font-size: var(--groesse-hinweis);
}
/* Offene Platzhalter fallen auf: sie stehen im Text UND werden hier benannt. */
.lv-vorlage-offen {  color: var(--gefahr-text);  font-weight: var(--schnitt-halb); }
/* ---------------------------------------------------------------
   22 — Eingeklappte Filter (D2)
   ---------------------------------------------------------------
   Die benannten Ansichten stehen als Segmentschalter oben. Die
   Filterbatterie darunter stand immer offen und schob die Liste um
   zwei Zeilen nach unten, obwohl sie meistens auf „alle" stand.
   Facilioo macht es genauso: wenige sichtbare Einstiege, der Rest
   auf Anforderung. */
.lv-filterklappe {  margin-bottom: var(--raum-1); }
/* Gesetzte Filter tragen ihre Zahl im Schalter – ein eingeklappter Filter,
   der still etwas ausblendet, wäre eine Falle. */
.lv-filterzahl {
  
  min-width: 18px;
   padding: 0 var(--raum-1);
   border-radius: var(--radius-pille);
  
  background: var(--flaeche-segment-aktiv);
   color: var(--text);
   font-size: var(--groesse-klein);
   font-weight: var(--schnitt-fett);
   text-align: center;
}
.lv-filterklappe .filterleiste {  margin-top: var(--raum-2); }
.lv-fristbanner-punkt {  font-size: var(--groesse-bedien); }
.lv-fristbanner-pfeil {
   margin-left: auto;
   font-weight: var(--schnitt-fett);
   font-size: var(--groesse-hinweis);
   opacity: .85;
}
/* ---------------------------------------------------------------
   24 — Mail-Einblender (D3)
   ---------------------------------------------------------------
   Seitlich, kurz, verschwindet von selbst. Nur für Mails, die auf
   eine Bestätigung warten – nicht bei jeder eingehenden Mail, sonst
   ist es im 30-Sekunden-Takt Dauerrauschen. */
.lv-einblender {
  
  position: fixed;
   right: 18px;
   bottom: 18px;
   z-index: 4000;
  
  width: 300px;
   max-width: calc(100vw - 36px);
  
  padding: var(--raum-3) var(--raum-3);
   border-radius: var(--radius-karte);
   cursor: pointer;
  
  background: var(--flaeche-segment-aktiv);
   color: var(--text);
  
  transform: translateY(140%);
   opacity: 0;
  
  transition: transform .3s ease, opacity .3s ease;
   pointer-events: none;
}
.lv-einblender.lv-einblender-an {  transform: translateY(0);  opacity: 1;  pointer-events: auto; }
.lv-einblender-kopf {
   font-size: var(--groesse-klein);
   font-weight: var(--schnitt-fett);
   letter-spacing: .05em;
  
  text-transform: uppercase;
   color: var(--gold-text);
   margin-bottom: var(--raum-1);
}
.lv-einblender-text {  font-size: var(--groesse-text);  font-weight: var(--schnitt-halb); }
.lv-einblender-grund {
   font-size: var(--groesse-klein);
   opacity: .8;
   margin-top: var(--raum-1);
   line-height: 1.4;
}
/* ---------------------------------------------------------------
   25 — Mail-Arbeitsfläche (S1)
   ---------------------------------------------------------------
   Drei Spalten, eine Bewegung: Stapel wählen, Unterhaltung wählen,
   antworten. Keine neue Palette – dieselben Marken-Token wie überall,
   dieselbe Schrift. Die Spalten scrollen einzeln, damit die Filter
   links und der Kopf der Nachricht rechts stehen bleiben. */
.af-kopf {  align-items: center;  gap: var(--raum-4);  flex-wrap: wrap; }
.af-suchzeile {
   display: flex;
   gap: var(--raum-2);
   align-items: center;
   margin-left: auto;
   flex-wrap: wrap;
}
.af-raster {
  
  display: grid;
  
  grid-template-columns: 200px minmax(300px, 360px) minmax(0, 1fr);
  
  gap: var(--raum-4);
  
  align-items: start;
  
  margin-top: var(--raum-4);
}
@media (max-width: 1200px) {
.af-raster {  grid-template-columns: 180px minmax(0, 1fr); }
.af-nachricht {  grid-column: 1 / -1; }
}
@media (max-width: 820px) {
.af-raster {  grid-template-columns: 1fr; }
}
.af-spalte {  max-height: calc(100vh - 210px);  overflow-y: auto;   /* F7: das Scrollen bleibt hier drin */
   overscroll-behavior: contain;
}
/* Links: die Stapel. Ein Stapel ohne Inhalt zeigt keine Zahl – eine
   0 daneben wäre eine Angabe, die nichts sagt. */
.af-filter {
   display: flex;
   flex-direction: column;
   gap: var(--raum-1);
   padding-right: var(--raum-1);
}
/* Die Bahnen sind Filterpillen (.pille), untereinander statt nebeneinander.
   Aussehen und Zustände stehen beim Baustein; hier steht nur, dass sie die
   ganze Spaltenbreite nehmen und ihre Zahl rechts tragen. */
.af-filter-btn { width: 100%; justify-content: flex-start; text-align: left; }
.af-filter-zahl { margin-left: auto; }
.af-filter-trenner {
  
  margin: var(--raum-3) 0 var(--raum-1);
   padding: 0 var(--raum-2);
  
  font-size: var(--groesse-winzig);
   font-weight: var(--schnitt-fett);
   letter-spacing: .06em;
   text-transform: uppercase;
   color: var(--text-gedimmt);
}
.af-filter-wahl {  width: 100%;  margin-bottom: var(--raum-1);  font-size: var(--groesse-hinweis); }
.af-warnung {
   font-size: var(--groesse-klein);
   color: var(--text-gedimmt);
   line-height: 1.45;
   margin: var(--raum-3) var(--raum-2) 0;
}
/* Mitte: eine Zeile je Unterhaltung. Die Vorgeschichte bleibt in der
   Zeile verborgen und öffnet sich rechts. */
.af-liste {
   display: flex;
   flex-direction: column;
   gap: var(--raum-1);
   padding-right: var(--raum-1);
}
/* F2: Kopfzeile mit der exakten Gesamtzahl + „Weitere laden" am Ende. */
.af-liste-kopf {
  
  font-family: var(--schrift-text); font-size: var(--groesse-klein); font-weight: var(--schnitt-halb);
   letter-spacing: .3px;
   text-transform: uppercase;
  
  color: var(--text-gedimmt);
   padding: var(--raum-1) var(--raum-1) var(--raum-1);
}
.af-mehr {
  
  margin: var(--raum-1) 0 var(--raum-1);
   padding: var(--raum-2) var(--raum-3);
   width: 100%;
  
  border: 1px dashed var(--linie);
   border-radius: var(--radius-klein);
   background: transparent;
  
  font-family: var(--schrift-text); font-size: var(--groesse-text); font-weight: var(--schnitt-halb);
   color: var(--text);
   cursor: pointer;
}
.af-mehr:hover {  background: var(--flaeche-seite);  border-style: solid; }
.af-mehr:disabled {  opacity: .6;  cursor: default; }
/* I1: Das Auswahlkästchen steht NEBEN der Zeile. In der Zeile ginge es nicht –
   sie ist ein <button>, und der bekäme jeden Klick zuerst. */
.af-zeile-halter {
   display: flex;
   align-items: center;
   gap: var(--raum-2);
   min-width: 0;
}
.af-zeile-halter > .af-zeile {  min-width: 0; }
.af-wahl {  flex: none;  margin: 0; }
.af-wahlleiste {  flex-wrap: wrap; }
.af-wahl-zahl {  color: var(--text-gedimmt);  font-size: var(--groesse-klein); }
.af-zeile {
  
  display: flex;
   flex-direction: column;
   gap: var(--raum-1);
   width: 100%;
   text-align: left;
   cursor: pointer;
  
  border: 1px solid var(--linie);
   border-radius: var(--radius-karte);
   background: var(--flaeche-karte);
   padding: var(--raum-2) var(--raum-3);
  
  font: inherit;
   transition: border-color .15s, background .15s;
}
.af-zeile:hover {  border-color: var(--gold); }
.af-zeile.aktiv {
   border-color: var(--linie-stark);
   background: var(--flaeche-karte);
   box-shadow: inset 0 1px 1px rgba(0,0,0,.35);
}
.af-zeile-kopf {
   display: flex;
   justify-content: space-between;
   gap: var(--raum-2);
   align-items: baseline;
}
.af-gegen {
   font-family: var(--schrift-text, var(--schrift-text)); font-size: var(--groesse-text); font-weight: var(--schnitt-halb);
   color: var(--text);
  
  overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
}
.af-datum {
   font-size: var(--groesse-klein);
   color: var(--text-gedimmt);
   white-space: nowrap;
   flex-shrink: 0;
}
.af-titel {
   font-size: var(--groesse-text);
   color: var(--text-gedimmt);
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
}
.af-zeile-fuss {
   display: flex;
   gap: var(--raum-1);
   flex-wrap: wrap;
   align-items: center;
   margin-top: var(--raum-1);
}
/* Der Vorgangsbezug als Kennzeichen an der Unterhaltung. */
.af-akte {
  
  font-family: var(--schrift-text, var(--schrift-text)); font-size: var(--groesse-winzig); font-weight: var(--schnitt-fett);
   letter-spacing: .02em;
  
  background: var(--flaeche-vertieft);
   color: var(--text);
   border-radius: var(--radius-pille);
   padding: var(--raum-1) var(--raum-2);
}
/* L2.2: Hier stand `var(--gold-dark, var(--gold))`. `--gold-dark` gibt es
   nicht; wegen des Ersatzwerts fiel das keiner Prüfung auf und die Farbe war
   in Wahrheit einfach `--gold`. Es war der letzte von 386 Textknoten, die im
   hellen Modus unter 4,5 : 1 lagen. */
.af-akte-fall {  background: var(--st-aktiv-flaeche);  color: var(--gold-text); }
.af-akte-offen {
   background: transparent;
   color: var(--text-gedimmt);
   border: 1px dashed var(--linie);
}
.af-objekt {  font-size: var(--groesse-winzig);  color: var(--text-gedimmt); }
.af-marke {
   font-family: var(--schrift-text, var(--schrift-text)); font-size: var(--groesse-winzig); font-weight: var(--schnitt-fett);
   border-radius: var(--radius-pille);
   padding: var(--raum-1) var(--raum-2);
}
.af-marke-offen {  background: var(--st-offen-flaeche);  color: var(--st-offen-text); }
.af-marke-wartend {  background: var(--st-inarbeit-flaeche);  color: var(--st-inarbeit-text); }
.af-marke-vorschlag {  background: var(--st-aktiv-flaeche);  color: var(--st-aktiv-text); }
.af-marke-gmail {  background: var(--st-inarbeit-flaeche);  color: var(--st-inarbeit-text); }
.af-zahl, .af-klammer {  font-size: var(--groesse-winzig);  color: var(--text-gedimmt); }
/* Rechts: die Nachricht mit allen Aktionen an Ort und Stelle. */
.af-nachricht {
  
  border: 1px solid var(--linie);
   border-radius: var(--radius-karte);
   background: var(--flaeche-karte);
  
  padding: var(--raum-4) var(--raum-6);
   min-height: 320px;
}
.af-nachricht-meta {
   display: flex;
   gap: var(--raum-4);
   flex-wrap: wrap;
   font-size: var(--groesse-klein);
   color: var(--text-gedimmt);
}
.af-aktionsleiste {
  
  display: flex;
   gap: var(--raum-2);
   flex-wrap: wrap;
   align-items: center;
  
  margin: var(--raum-4) 0;
   padding-bottom: var(--raum-2);
   border-bottom: 1px solid var(--linie);
}
.af-aktion-trenner {
   width: 1px;
   height: 20px;
   background: var(--linie);
   margin: 0 var(--raum-1);
}
.af-ziel {  max-width: 320px;  font-size: var(--groesse-hinweis); }
.af-badge {
   font-family: var(--schrift-text, var(--schrift-text)); font-size: var(--groesse-hinweis); font-weight: var(--schnitt-halb);
   color: var(--st-erledigt-text);
   background: var(--st-erledigt-flaeche);
  
  border-radius: var(--radius-pille);
   padding: var(--raum-1) var(--raum-2);
}

.af-vorschlag-grund {
   font-size: var(--groesse-klein);
   opacity: .85;
   margin-top: var(--raum-1);
   line-height: 1.45;
}
.af-vorschlag-knoepfe {  display: flex;  gap: var(--raum-2);  margin-top: var(--raum-2); }
.af-verlauf {  display: flex;  flex-direction: column;  gap: var(--raum-2); }
.af-nachricht-block {
   border: 1px solid var(--linie);
   border-radius: var(--radius-feld);
   background: var(--flaeche-karte);
}
/* F6a: Der Fließtext einer Nachricht bekommt eine Höchstbreite, damit die
   Zeilen auf der breiten Fläche nicht überlang werden. Die Originalansicht
   (eigenes HTML) und Bilder dürfen die volle Breite nutzen. */
.af-nachricht .mailz-text {  max-width: 76ch; }
.af-leer {  color: var(--text-gedimmt);  font-size: var(--groesse-text);  padding: var(--raum-4) var(--raum-1); }
/* Heute-Leiste in der Arbeitsfläche (S2). Was keine Mail ist, aber heute
   Arbeit macht – kompakt in der Filterspalte statt als zweiter Bildschirm.
   Ist nichts zu tun, ist die Leiste gar nicht da. */
.af-heute-dringend {
  
  display: inline-block;
   margin-left: var(--raum-1);
   padding: 0 var(--raum-1);
   border-radius: var(--radius-pille);
  
  background: var(--st-hoch-flaeche);
   color: var(--st-hoch-text);
   font-size: var(--groesse-winzig);
   font-weight: var(--schnitt-fett);
}
.af-heute-liste {  display: flex;  flex-direction: column;  gap: var(--raum-1); }
.af-heute-zeile {
  
  display: flex;
   flex-direction: column;
   gap: var(--raum-1);
   width: 100%;
   text-align: left;
   cursor: pointer;
  
  border: 0;
   background: transparent;
   padding: var(--raum-1) var(--raum-2);
   border-radius: var(--radius-feld);
  
  border-left: 3px solid transparent;
   font: inherit;
}
.af-heute-zeile:hover {  background: var(--flaeche-vertieft); }
.af-heute-zeile.dringend {  border-left-color: var(--st-hoch-text); }
.af-heute-text {
   font-size: var(--groesse-hinweis);
   font-weight: var(--schnitt-halb);
   color: var(--text-gedimmt);
  
  overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
}
.af-heute-neben {  font-size: var(--groesse-winzig);  color: var(--text-gedimmt); }
.af-heute-mehr {
  
  margin-top: var(--raum-1);
   border: 0;
   background: transparent;
   cursor: pointer;
  
  padding: var(--raum-1) var(--raum-2);
   text-align: left;
   font-family: var(--schrift-text, var(--schrift-text)); font-size: var(--groesse-klein); font-weight: var(--schnitt-halb);
  
  color: var(--text);
   text-decoration: underline;
   text-underline-offset: 2px;
}
/* Bereiche-Dialog (S3-B). Eine Zeile je Bereich, Schalter links, der Hinweis
   „enthält Einträge" rechts – damit man vor dem Ausblenden sieht, was drin ist. */
.bereich-zeile {
  
  display: flex;
   align-items: center;
   gap: var(--raum-2);
  
  padding: var(--raum-2) var(--raum-1);
   border-bottom: 1px solid var(--linie);
}
.bereich-zeile:last-child {  border-bottom: 0; }
.bereich-zeile.ist-fest {  opacity: .7; }
.bereich-name {  font-size: var(--groesse-text);  font-weight: var(--schnitt-halb);  color: var(--text-gedimmt); }
.bereich-hinweis {  margin-left: auto;  font-size: var(--groesse-klein);  color: var(--text-gedimmt); }
/* ===============================================================
   26 — Drei Ebenen in der Akte (S4)
   ===============================================================
   Ebene 1 Identität: der Kopf. Durchgehend hinterlegt statt einer
   Reihe einzelner Kärtchen, und beim Scrollen angeheftet – wer weit
   unten in der Chronik liest, soll weiter sehen, in welcher Akte er
   ist und wann sie fällig wird.
   Ebene 2 Arbeitsfläche: eine helle Fläche. Abschnitte trennt die
   Überschrift und der Abstand, nicht eine Umrandung je Abschnitt.
   Kästen bleiben den echten Einzelobjekten – Mail, Frist, Auftrag.
   Ebene 3 Nebeninformation: Zeitstempel, Bearbeiter, Zähler. Klein,
   gedämpft, ohne Rahmen.
   Schrift und Farben bleiben, wie sie waren. Keine neue Palette. */
/* --- Ebene 1 ---------------------------------------------------- */
.drawer-kopf {
  
  position: sticky;
   top: 0;
   z-index: 30;
  
  background: linear-gradient(180deg, var(--flaeche-karte) 0%, var(--flaeche-karte) 100%);
}
/* Angeheftet reicht die Kopfzeile allein – die Brotkrume darüber ist
   beim Scrollen nur noch Höhe. Sie bleibt sichtbar, solange oben. */
.drawer-kopf .drawer-stammdaten {  gap: var(--raum-1) var(--raum-6); }
/* --- Ebene 2 ---------------------------------------------------- */
/* Der Block verliert seine Umrandung. Was bleibt, ist die Überschrift
   und der Abstand darunter – dieselbe Auszeichnung wie vorher, nur
   ohne Kasten drumherum. */
.lv-akte-haupt > .lv-block { 
  border: 0;  background: transparent; 
  padding: 0 0 var(--raum-2); }
.lv-akte-haupt {  gap: var(--raum-6); }
/* Kästen in Kästen: die Karten INNERHALB eines Blocks (Fristen, Kosten,
   Versicherung) trugen einen zweiten Rahmen im ersten. Der äußere ist weg,
   der innere bleibt – er umschließt ein echtes Einzelobjekt. */
.lv-akte-haupt > .lv-block > .karte {  border: 0;  padding: 0;  background: transparent; }
.lv-akte-haupt > .lv-block > .karte + .karte {  margin-top: var(--raum-4); }.verlauf-zeit, .verlauf-wer, .notiz-zeit, .mailz-datum, .af-datum, .aufgabe-von, .aufgabe-richtwert { 
  font-size: var(--groesse-klein);  color: var(--text-gedimmt);  border: 0; }
.hinweis-klein {
  padding: 0;
  font-size: var(--groesse-hinweis);
  margin: var(--raum-1) 0 var(--raum-2);
  font-size: var(--groesse-klein);
  color: var(--text-gedimmt);
  border: 0;
}
/* HINTER `.hinweis-klein`, und das ist der Punkt: der Block traegt die Klassen
   `hinweis hinweis-klein af-vorschlag`, und `.hinweis-klein` setzt `border: 0`.
   Stand `.af-vorschlag` davor, gewann bei gleicher Gewichtung die spaetere
   Regel — gemessen am laufenden Block: `border: none 0px` statt des
   gestrichelten Goldrahmens. Dieselbe Falle wie bei `.knopf` und bei der
   Schrittspalte der Vorgangsliste; sie faellt nur auf, wenn man nachsieht. */
/* Phase 4, Ansicht 4: „Vorschlagsblock in der Vorschau: gestrichelter Rahmen
   --gold, Fläche --st-aktiv-flaeche." Der gestrichelte Rahmen ist hier keine
   Verzierung: er unterscheidet den VORSCHLAG (etwas, das noch bestätigt werden
   muss) von einer Meldung, die etwas feststellt. Der Block trug bisher den
   durchgezogenen Rahmen von `.hinweis`. */
.af-vorschlag {
  background: var(--st-aktiv-flaeche);
   border: 1px dashed var(--gold);
   border-radius: var(--radius-feld);
   padding: var(--raum-3) var(--raum-3);
   margin-bottom: var(--raum-4);

  font-size: var(--groesse-text);
   color: var(--st-aktiv-text);
}
/* --- Aktionen neu geordnet -------------------------------------- */
/* Eine hervorgehobene Hauptaktion, zwei bis drei häufige daneben, der
   Rest unter einem Menü. Löschen steht abgesetzt ganz unten – vorher
   war es der achte gleich aussehende Knopf in einer Reihe von acht. */
.lv-akte-aktionen .knopf-haupt {
  
  background: var(--flaeche-segment-aktiv);
   color: var(--text);
   border-color: var(--linie-stark);
   font-weight: var(--schnitt-halb);
}
.lv-akte-aktionen .knopf-haupt:hover {  filter: brightness(1.1); }
.akte-mehr {  margin-top: var(--raum-1); }
.akte-mehr .knopf {  margin-top: var(--raum-1); }
.akte-loeschen { 
  margin-top: var(--raum-6);  padding-top: var(--raum-2); 
  border-top: 1px solid var(--linie); }
/* --- Formularzeilen (Wartungsreihe) ----------------------------- */
/* Ankreuzfeld und Beschriftung standen versetzt, und der Text brach
   mitten im Wort um: das Feld war fest breit, die Beschriftung floss
   daneben. Jetzt liegen beide in einer Zeile auf gemeinsamer Grundlinie,
   und umgebrochen wird zwischen Wörtern. */
.lv-gruppe {
  
  display: flex;
   align-items: flex-start;
   gap: var(--raum-2);
  
  line-height: 1.45;
   overflow-wrap: normal;
   word-break: normal;
   hyphens: none;
}
.field.breit .lv-gruppe + .lv-gruppe {  margin-top: var(--raum-2); }
/* ================================================================
   F0b — App-eigene Dialoge und Rückmeldungen (Toasts).
   Ersetzen prompt/alert/confirm. Schrift und Farben aus den
   bestehenden Marken-Token, keine neue Palette.
   ================================================================ */
/* --- Toasts: kurze Rückmeldungen unten rechts --- */
#lv-toasts {
  
  position: fixed;
   right: 18px;
   bottom: 18px;
   z-index: 200;
  
  display: flex;
   flex-direction: column;
   gap: var(--raum-2);
   align-items: flex-end;
  
  max-width: min(420px, calc(100vw - 36px));
   pointer-events: none;
}
.lv-toast {
  
  pointer-events: auto;
   position: relative;
  
  background: var(--flaeche-karte);
   color: var(--text, var(--text));
  
  border: 1px solid var(--linie);
   border-left: 4px solid var(--linie-stark);
  
  border-radius: var(--radius-klein);
   padding: var(--raum-3) var(--raum-8) var(--raum-3) var(--raum-3);
  
  font-family: var(--schrift-text); font-size: var(--groesse-text); font-weight: var(--schnitt-halb);
   line-height: 1.4;
  
  max-width: 100%;
   word-break: break-word;
  
  animation: lv-toast-ein 0.18s ease-out;
}
.lv-toast-erfolg {  border-left-color: var(--st-erledigt-text); }
.lv-toast-fehler {  border-left-color: var(--gefahr-text); }
.lv-toast-warnung {  border-left-color: var(--gold); }

/* B6 (Ideensammlung 03.08.): Das Ausfall-Banner — EIN Zustand statt zwanzig
   Toasts, wenn der Server nicht erreichbar ist. Über den Toasts (z-index),
   volle Breite, damit es nicht wie eine Einzelmeldung aussieht, sondern wie
   das, was es ist: ein Zustand der ganzen Anwendung. */
.lv-ausfall {
  position: fixed;
   top: 0; left: 0; right: 0;
   z-index: 210;

  background: var(--flaeche-karte);
   color: var(--text);
   border-bottom: 3px solid var(--gefahr-text);

  padding: var(--raum-3) var(--raum-4);
   text-align: center;

  font-family: var(--schrift-text); font-size: var(--groesse-text); font-weight: var(--schnitt-halb);
   line-height: 1.4;
}
.lv-toast-weg {
  
  position: absolute;
   top: 7px;
   right: 8px;
   width: 22px;
   height: 22px;
  
  border: none;
   background: none;
   cursor: pointer;
   color: var(--text-gedimmt);
  
  font-size: var(--groesse-text);
   line-height: 1;
   border-radius: var(--radius-feld);
}
.lv-toast-weg:hover {  background: var(--flaeche-vertieft);  color: var(--text); }
.lv-toast-aus {  animation: lv-toast-aus 0.2s ease-in forwards; }
@media (prefers-reduced-motion: reduce) {
.lv-toast, .lv-toast-aus {  animation: none; }
}
/* --- Dialoge: bauen auf .modal / .modal-hintergrund auf --- */
.lv-dialog-hg {  animation: lv-toast-ein 0.15s ease-out; }
.lv-dialog-aus {  animation: lv-toast-aus 0.15s ease-in forwards; }
.lv-dialog {  padding: var(--raum-6) var(--raum-6); }
.lv-dialog-titel {  margin: 0 0 var(--raum-2);  font-family: var(--schrift-text); font-size: var(--groesse-abschnitt); font-weight: var(--schnitt-fett);  color: var(--text); }
.lv-dialog-text {
   margin: 0 0 var(--raum-1);
   font-size: var(--groesse-bedien);
   line-height: 1.5;
   color: var(--text, var(--text));
   white-space: pre-wrap;
}
.lv-dialog-hinweis {
   margin: var(--raum-1) 0 0;
   font-size: var(--groesse-hinweis);
   line-height: 1.45;
   color: var(--text-gedimmt);
}
.lv-dialog-feld {
  
  width: 100%;
   margin-top: var(--raum-3);
   padding: var(--raum-2) var(--raum-3);
   font-family: var(--schrift-text); font-size: var(--groesse-bedien); font-weight: var(--schnitt-normal);
  
  border: 1px solid var(--linie);
   border-radius: var(--radius-klein);
   background: var(--flaeche-karte);
   color: var(--text, var(--text));
  
  box-sizing: border-box;
}
.lv-dialog-feld:focus {
   outline: 2px solid var(--st-inarbeit-text);
   outline-offset: 1px;
   border-color: var(--st-inarbeit-text);
}
.lv-dialog-knoepfe {  margin-top: var(--raum-4); }
/* --- Auswahl-Liste im Dialog (z. B. Zwischenstand-Vorlage) --- */
.lv-dialog-auswahl {
   margin-top: var(--raum-3);
   display: flex;
   flex-direction: column;
   gap: var(--raum-2);
}
.lv-auswahl-zeile {
  
  display: flex;
   align-items: flex-start;
   gap: var(--raum-2);
   padding: var(--raum-3) var(--raum-3);
  
  border: 1px solid var(--linie);
   border-radius: var(--radius-klein);
   cursor: pointer;
  
  transition: border-color 0.12s, background 0.12s;
}
.lv-auswahl-zeile:hover {  background: var(--flaeche-seite); }
.lv-auswahl-zeile:has(input:checked) {  border-color: var(--linie-stark);  background: var(--flaeche-vertieft); }
.lv-auswahl-inhalt {  display: flex;  flex-direction: column;  gap: var(--raum-1); }
.lv-auswahl-name {  font-family: var(--schrift-text); font-size: var(--groesse-bedien); font-weight: var(--schnitt-halb);  color: var(--text); }
.lv-auswahl-hinweis {  font-size: var(--groesse-hinweis);  color: var(--text-gedimmt);  line-height: 1.4; }
/* --- G5: Der Bestätigungsdialog vor der Ablage ---
   Vier Angaben untereinander, die oberste ist der Name, wie er in Drive stehen
   wird. Er steht oben, weil er das Ergebnis der drei darunter ist. */
.lv-abl-feld {
   display: flex;
   flex-direction: column;
   gap: var(--raum-1);
   margin-top: var(--raum-3);
}
.lv-abl-bez {  font-size: var(--groesse-klein);  color: var(--text-gedimmt); }
.lv-abl-hinweis {  font-size: var(--groesse-hinweis);  color: var(--text-gedimmt); }
.lv-abl-name {
   font-family: var(--schrift-mono);
   font-size: var(--groesse-text);
   color: var(--text);
   overflow-wrap: anywhere;
   padding: var(--raum-2) var(--raum-3);
   background: var(--flaeche-vertieft);
   border-radius: var(--radius-klein);
}
.lv-abl-wert {  font-size: var(--groesse-bedien);  color: var(--text); }
/* --- H3: Was ändert sich? ---
   Derselbe Dialog, zweite Betriebsart. Diese Zeilen stehen GANZ OBEN, noch vor
   dem Namen: die Frage beim Umstellen ist nicht „wie heißt es nachher", sondern
   „was passiert überhaupt" — und die Antwort betrifft auch den Ordner, was ohne
   Gegenüberstellung niemand sieht. */
.lv-abl-diff {
   display: flex;
   flex-direction: column;
   gap: var(--raum-1);
   padding: var(--raum-2) var(--raum-3);
   background: var(--flaeche-vertieft);
   border-radius: var(--radius-klein);
   margin-bottom: var(--raum-2);
}
.lv-abl-diffzeile {
   display: grid;
   grid-template-columns: 5rem minmax(0, 1fr);
   gap: 0 var(--raum-2);
   font-size: var(--groesse-hinweis);
   line-height: 1.5;
}
.lv-abl-diffbez {  grid-row: span 2;  color: var(--text-gedimmt); }
.lv-abl-diffalt {  color: var(--text-gedimmt);  overflow-wrap: anywhere; }
.lv-abl-diffneu {  color: var(--text);  font-weight: var(--schnitt-halb);  overflow-wrap: anywhere; }
/* --- H4: Die Vorschau der Sammelbearbeitung ---
   Je Zeile alter Name → neuer Name, darunter der Ordnerwechsel. Zeilen ohne
   Änderung sind gedimmt, damit man auf einen Blick sieht, wie viele der
   dreißig gewählten wirklich gemeint sind. */
.lv-abl-vorschau {
   max-height: 22rem;
   overflow-y: auto;
   overscroll-behavior: contain;
   margin-top: var(--raum-3);
   border: 1px solid var(--linie);
   border-radius: var(--radius-klein);
}
.lv-abl-vzeile {
   display: grid;
   grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
   gap: 0 var(--raum-3);
   padding: var(--raum-2) var(--raum-3);
   border-bottom: 1px solid var(--linie);
   font-size: var(--groesse-hinweis);
}
.lv-abl-vzeile:last-child {  border-bottom: 0; }
.lv-abl-vname {  color: var(--text-gedimmt);  overflow-wrap: anywhere; }
.lv-abl-vneu {  color: var(--text);  font-weight: var(--schnitt-halb);  overflow-wrap: anywhere; }
.lv-abl-vordner {  grid-column: 1 / -1;  color: var(--text-gedimmt);  font-family: var(--schrift-mono);  font-size: var(--groesse-hinweis); }
.lv-abl-vgrund {  color: var(--text-gedimmt); }
.lv-abl-vgleich {  opacity: 0.55; }
.lv-abl-vfehler .lv-abl-vgrund {  color: var(--gefahr-text); }
/* Der Umstell-Knopf an einer Dateikachel sitzt bei den übrigen Werkzeugen. */
.datei-werkzeug-eck {  position: absolute;  top: var(--raum-1);  right: var(--raum-1); }
/* F5: Freitextfeld „nächster Schritt" in der Übersicht. */
/* Teil A3: eine Zeile, nicht drei Etagen. Beschriftung, Feld und Knopf stehen
   nebeneinander — gestapelt kostete der Block 100 px, und die drei Spalten
   darunter begannen dadurch bei y=661 statt bei 601. */
/* J7: Beschriftung über das Feld, Knopf unter das Feld, und das Feld wächst in
   den Leerraum, der unter der Karte ohnehin schon dalag (gemessen: 37 px).
   Vorher war das eine flex-ZEILE — Beschriftung, einzeiliges Feld und Knopf
   nebeneinander; die Breite ging an die beiden Beschriftungen, und für den Satz
   blieben 338 px auf 52 px Höhe, mit Rollleiste schon für den Hinweistext. */
.naechster-schritt {
  margin-top: var(--raum-2);
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--raum-1);
  flex: 1 1 auto;
  min-height: 0;
}
.naechster-schritt > label {
  font-size: var(--groesse-hinweis);
  color: var(--text-zweit);
}
/* Dieselbe Bauart wie #feld-schreiben-text: der Rest der Höhe geht an das Feld,
   mit einer Mindesthöhe für vier Zeilen. Kein Nachrechnen in JavaScript — das
   wäre eine zweite Mechanik für dieselbe Sache. */
.naechster-schritt > textarea {
  flex: 1 1 auto;
  min-height: 5.6em;
  resize: vertical;
  line-height: 1.4;
}
.naechster-schritt > .knopf {  align-self: flex-start; }
/* Der Hilfetext STEHT — er verschwindet nicht beim ersten Zeichen. Die Größe
   ist die des Wertesatzes für Hinweistext, nicht eine eigene. */
.feld-hilfe {
  margin: 0;
  font-size: var(--groesse-hinweis);
  color: var(--text-zweit);
}
/* Damit das Feld überhaupt wachsen KANN, muss die Karte die Rasterzeile füllen
   und ihr Inhalt eine Spalte sein. `align-items: start` am Raster bleibt für
   alles andere: nur diese Zelle streckt sich. */
.akte-kopfbereich > .akte-stand {  align-self: stretch; }
.akte-stand > .lv-block {
  height: 100%;
  display: flex;
  flex-direction: column;
}

/* F7: Person-Zuordnung – Auswahl mit „+ Neu" und die Anlege-Miniatur. */
.zuordnung-personwahl {  display: flex;  gap: var(--raum-2);  align-items: center; }
.zuordnung-neu {
  
  margin: var(--raum-2) 0 var(--raum-3);
   padding: var(--raum-3);
   border: 1px dashed var(--linie);
  
  border-radius: var(--radius-klein);
   background: var(--flaeche-vertieft);
}
.zuordnung-neu .modal-aktionen {  margin-top: var(--raum-2); }
#zuordnung-mieter-felder {  margin-bottom: var(--raum-1); }
/* R3: Zwischenstand-Dialog. Der Vorschlag zeigt die Ereignisse seit dem letzten
   Zwischenstand mit sichtbarer Herkunft; Sachstand ist Pflicht. */
#modal-zwischenstand .modal {  max-width: 640px; }
.zw-ereignisse {
   list-style: none;
   margin: var(--raum-1) 0 var(--raum-3);
   padding: var(--raum-2) var(--raum-2);
  
  border: 1px solid var(--linie);
   border-radius: var(--radius-klein);
   background: var(--flaeche-vertieft);
  
  max-height: 180px;
   overflow-y: auto;
   font-size: var(--groesse-text);
  /* F7: das Scrollen bleibt hier drin */
   overscroll-behavior: contain;
}
.zw-ereignisse:empty {  display: none; }
.zw-herkunft {  font-weight: var(--schnitt-halb);  color: var(--text); }
.zw-ev-text {  color: var(--text); }
.zw-datum {  color: var(--text-gedimmt);  font-size: var(--groesse-hinweis);  white-space: nowrap; }
/* Z3: Quellen, die nicht in den Vorschlag gehen, bleiben sichtbar – nur leiser. */
.zw-intern {  opacity: 0.7; }
.zw-grund {
   display: block;
   color: var(--text-gedimmt);
   font-size: var(--groesse-hinweis);
}
.zw-leer {
   margin: var(--raum-1) 0 var(--raum-3);
   padding: var(--raum-2) var(--raum-3);
   border: 1px dashed var(--linie);
  
  border-radius: var(--radius-klein);
   color: var(--text-gedimmt);
   font-size: var(--groesse-text);
}
.feld-pflicht {  color: var(--gefahr-text);  font-size: var(--groesse-hinweis);  font-weight: var(--schnitt-halb); }
.zw-termin-zeile {  display: grid;  grid-template-columns: 1fr 1fr;  gap: var(--raum-3); }
.zw-sperr {  color: var(--gefahr-text); }
@media (max-width: 560px) {
.zw-termin-zeile {  grid-template-columns: 1fr; }
}
/* `flex-wrap`: reicht die Breite nicht fuer Liste UND Panel, rutscht das Panel
   unter die Liste, statt ihr die Spalten wegzunehmen. Die Liste ist der Zweck
   der Ansicht; das Panel ist die Zugabe. */
.vg-flaeche {  display: flex;  flex-wrap: wrap;  gap: var(--raum-6);  align-items: flex-start; }
.vg-haupt {  flex: 1 1 912px;  min-width: 0;  max-width: 1400px; }
.auto-panel {
  
  width: 280px;
   flex: 0 1 280px;
   position: sticky;
   top: 20px;
  
  border: 1px solid var(--linie);
   border-radius: var(--radius-karte);
   background: var(--flaeche-karte);
  
  padding: var(--raum-3) var(--raum-3) var(--raum-2);
}
.auto-panel-kopf {
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: var(--raum-2);
}
.auto-panel-hinweis {
   font-size: var(--groesse-hinweis);
   color: var(--text-gedimmt);
   margin: var(--raum-1) 0 var(--raum-2);
   line-height: 1.45;
}
.auto-liste {
   display: flex;
   flex-direction: column;
   gap: var(--raum-2);
   max-height: calc(100vh - 220px);
   overflow-y: auto;
  /* F7: das Scrollen bleibt hier drin */
   overscroll-behavior: contain;
}
.auto-leer {
   font-size: var(--groesse-hinweis);
   color: var(--text-gedimmt);
   line-height: 1.5;
   margin: var(--raum-1) 0 var(--raum-2);
}
.auto-eintrag {
  
  display: block;
   width: 100%;
   text-align: left;
   cursor: pointer;
  
  border: 1px solid var(--linie);
   border-radius: var(--radius-klein);
   background: var(--flaeche-vertieft);
  
  padding: var(--raum-2) var(--raum-3);
   font: inherit;
}
.auto-eintrag:hover {  border-color: var(--gold);  background: var(--st-aktiv-flaeche); }
.auto-betreff {
  
  font-size: var(--groesse-text);
   font-weight: var(--schnitt-halb);
   color: var(--text);
   line-height: 1.35;
  
  display: -webkit-box;
   -webkit-line-clamp: 2;
   -webkit-box-orient: vertical;
   overflow: hidden;
}
.auto-meta {
   display: flex;
   justify-content: space-between;
   gap: var(--raum-2);
   margin-top: var(--raum-1);
   font-size: var(--groesse-klein);
}
.auto-akte {  font-weight: var(--schnitt-halb);  color: var(--text); }
.auto-zeit {  color: var(--text-gedimmt);  white-space: nowrap; }
.auto-grund {
   font-size: var(--groesse-klein);
   color: var(--text-gedimmt);
   font-style: italic;
   margin-top: var(--raum-1);
}
@media (max-width: 1200px) {
.vg-flaeche {  flex-direction: column; }
.vg-haupt {  max-width: none;  width: 100%; }
.auto-panel {  position: static;  width: 100%;  flex-basis: auto; }
.auto-liste {  max-height: 320px; }
}
/* ---------- Schreiben-/Antwort-Dialog: Arbeitsfläche statt Zettel ----------
   Der Basisdialog ist min(540px, 92vw) – das reicht für ein Formular mit drei
   Feldern, nicht zum Verfassen einer Mail samt Zitat und Anhangliste. Hier
   bekommt er die Maße, die die Aufgabe verlangt: breit genug für ganze Zeilen,
   hoch genug, dass Text und Zitat zusammen sichtbar bleiben.

   Der Dialog wird zur Spalte (flex), damit das Textfeld den Rest der Höhe
   bekommt, statt bei festen acht Zeilen zu bleiben. Alles darüber behält seine
   natürliche Höhe. */
#modal-schreiben .modal {
  
  width: min(1180px, 96vw);
  
  height: min(92vh, 1040px);
  
  max-height: 92vh;
  
  display: flex;
  
  flex-direction: column;
}
/* A1: Kopf, Inhalt, Fuß — genau ein Bereich scrollt.
   Vorher war der Dialog eine flache Liste von Feldern in einem scrollenden
   Kasten, und die Fußleiste klebte per sticky darüber. Damit lag sie ÜBER den
   letzten Zeilen des Textfelds: der Text lief unter der Leiste weiter, und der
   Versuch, ihn herunterzurollen, bewegte mal das Feld und mal den ganzen
   Dialog. Jetzt hat der Fuß seinen eigenen Platz, der Kopf auch, und
   dazwischen scrollt der Inhalt. */
#modal-schreiben .modal {  overflow: hidden; }
#modal-schreiben .modal > h2,
#modal-schreiben .modal > .modal-aktionen {  flex: none; }
#modal-schreiben .modal-inhalt {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  /* K1: Dieser Behälter scrollt — also gehört die Eigenschaft hierher. Die
     Prüfung zählte bis K1 nur, WIE OFT `overscroll-behavior` vorkommt (>= 17),
     nicht, ob sie an JEDEM Scrollbehälter steht. Neun hatten sie nicht. */
  overscroll-behavior: contain;
  display: flex;
  flex-direction: column;
  padding: 0;
}
#modal-schreiben .modal-inhalt > * {  flex: none; }
/* A1d: „Senden" klebte am rechten Rand. Der Grund war eine alte Regel, die dem
   Fuß die seitliche Polsterung nahm, damit die klebende Leiste bündig mit dem
   Inhalt lief. Ohne sticky braucht es das nicht mehr — der Fuß bekommt den
   Abstand des Bausteins zurück. */
#feld-schreiben-text {

  flex: 1 1 auto;

  min-height: 220px;

  resize: vertical;

  line-height: 1.5;
}
/* Das Textfeld ist die Hauptsache: es bekommt den Rest der Höhe. */
#modal-schreiben .modal-inhalt > label:has(> #feld-schreiben-text) {
  flex: 1 1 auto;
  min-height: 240px;
  display: flex;
  flex-direction: column;
  margin-bottom: var(--raum-2);
}
/* A1a: „Datei vom Rechner" steht direkt unter der Anhangliste. */
.schreiben-anhang-zufuegen {
  display: flex;
  align-items: center;
  gap: var(--raum-2);
  margin-bottom: var(--raum-4);
  flex-wrap: wrap;
}
/* Die Postanschrift braucht keine Höhe zu stehlen. */
#feld-schreiben-empfaenger {  min-height: 62px;  resize: vertical; }
/* Eine lange Anhangliste scrollt in sich, statt den Editor wegzuschieben. */
#schreiben-anhangwahl {  max-height: 150px;  overflow-y: auto;  overscroll-behavior: contain; }  /* K1 */
#modal-schreiben .lv-anhaenge {  margin-bottom: var(--raum-3); }
/* Der Erklärtext der drei Wege ist beim Antworten ohnehin ausgeblendet; beim
   freien Schreiben darf er ruhig kleiner sein als der Editor. */
#modal-schreiben .import-hinweis {  font-size: var(--groesse-hinweis);  line-height: 1.45; }
/* Schmale Fenster: die Spalte bleibt, nur niedriger. Der Inhalt behält seinen
   eigenen Rollbereich – sonst läge der Fuß wieder über dem Text. */
@media (max-width: 900px) {
#modal-schreiben .modal {
   width: 96vw;
   height: auto;
   max-height: 92vh;
}
#modal-schreiben .modal-inhalt > label:has(> #feld-schreiben-text) {  min-height: 0; }
#feld-schreiben-text {  min-height: 200px; }
}
/* ---------- Verknüpfen-Dialog ---------- */
#modal-verknuepfen .modal {  width: min(760px, 94vw); }
.vk-liste {
  
  max-height: 46vh;
   overflow-y: auto;
  
  border: 1px solid var(--linie, var(--linie));
   border-radius: var(--radius-klein);
  
  margin-bottom: var(--raum-3);
   background: var(--flaeche-karte);
  /* F7: das Scrollen bleibt hier drin */
   overscroll-behavior: contain;
}
.vk-eintrag {
  
  display: block;
   width: 100%;
   text-align: left;
   cursor: pointer;
  
  background: none;
   border: 0;
   border-bottom: 1px solid var(--linie, var(--linie));
  
  padding: var(--raum-2) var(--raum-3);
   font: inherit;
   color: inherit;
}
.vk-eintrag:last-child {  border-bottom: 0; }
.vk-eintrag:hover:not(:disabled) {  background: var(--flaeche-karte); }
.vk-eintrag:disabled {  opacity: .5;  cursor: default; }
.vk-titel {
   display: block;
   font-weight: var(--schnitt-halb);
   color: var(--text);
   margin-bottom: var(--raum-1);
}
.vk-zeile {
   display: flex;
   flex-wrap: wrap;
   gap: var(--raum-2);
   align-items: baseline;
   font-size: var(--groesse-hinweis);
   color: var(--text-gedimmt);
}
.vk-klein {  font-size: var(--groesse-klein);  margin-top: var(--raum-1); }
.vk-richtung {  font-weight: var(--schnitt-halb); }
.vk-akte {  font-family: var(--schrift-mono, monospace); }
.vk-zeit {  margin-left: auto;  white-space: nowrap; }
/* Richtungspfeil in der Unterhaltungsliste. Zurückhaltend: er soll die Zeile
   nicht dominieren, sondern verhindern, dass eigene Post wie fremde aussieht. */
.af-richtung {
  
  color: var(--gold, var(--gold));
  
  font-weight: var(--schnitt-fett);
  
  margin-right: var(--raum-1);
}
.lv-ungespeichert-marke {
  
  display: inline-block;
  
  margin-left: var(--raum-2);
  
  padding: var(--raum-1) var(--raum-2);
  
  border: 1px solid var(--gold, var(--gold));
  
  border-radius: var(--radius-klein);
  
  font-size: var(--groesse-klein);
  
  line-height: 1.6;
  
  color: var(--gold-dunkel, var(--gold));
  
  background: var(--st-aktiv-flaeche);
  
  white-space: nowrap;
}
/* M1: Eine Frist, die ruht, sieht anders aus als eine, die drückt. Sie steht
   da, weil sie zur Akte gehört – aber sie zählt nicht mit, und das muss man
   sehen, ohne es nachzurechnen. */
.frist-karte.ruht {  opacity: .68;  border-style: dashed; }
.frist-karte.ruht .frist-rest {  color: var(--text-gedimmt);  font-style: italic; }
/* K5: Ein Vertrag in der Versicherungsliste bekommt sein eigenes Kreuz –
   vorher ging er nur weg, wenn man die ganze Versicherung löschte. */
.vers-vertrag {  display: inline-flex;  align-items: center;  gap: var(--raum-1); }
.vers-vertrag .knopf {  opacity: 0;  transition: opacity .12s;  padding: 0 var(--raum-1); }
.vers-vertrag:hover .knopf, .vers-vertrag .knopf:focus-visible {  opacity: 1; }
/* K19: Die Termin-Notiz steht sichtbar unter dem Datum statt nur im Tooltip. */
.kopf-notiz {
  
  display: block;
   margin-top: var(--raum-1);
   font-size: var(--groesse-klein);
   line-height: 1.35;
  
  color: var(--text-gedimmt);
   max-width: 22ch;
}
/* K4: Der Vorgangs-Dialog hatte 540 px, der Schreiben-Dialog daneben 1180 –
   für ein Formular mit fünfzehn Feldern ist das zu schmal. Zwei Spalten,
   wo Platz ist, damit man nicht 1425 px weit scrollt. */
#modal-vorgang .modal {  max-width: 820px; }
/* N4b: Interner Höchstbetrag. Drei Zustände, ohne Ampel-Kirmes: in Ordnung
   bleibt unauffällig, knapp wird golden, überschritten rot. Der Betrag selbst
   steht immer gleich groß da – nur der Zusatz daneben ändert die Farbe. */
.budget-zeile {
   display: flex;
   flex-wrap: wrap;
   align-items: baseline;
   gap: var(--raum-2);
}
.budget-stand {  font-size: var(--groesse-hinweis); }
.budget-ok .budget-stand {  color: var(--text-gedimmt); }
.budget-knapp .budget-stand {  color: var(--gold-dunkel, var(--gold));  font-weight: var(--schnitt-halb); }
.budget-ueber .budget-stand {  color: var(--gefahr-text);  font-weight: var(--schnitt-halb); }
.budget-notiz, .budget-herkunft {
  
  display: block;
   margin-top: var(--raum-1);
   font-size: var(--groesse-klein);
   color: var(--text-gedimmt);
   line-height: 1.4;
}
.budget-herkunft {  opacity: .8; }
/* ===== G4: Drei Bahnen im Mailbereich ===================================== */
/* Die ruhige Bahn ist je Absender gefaltet: eine Zeile pro Absender statt
   203 einzelnen. Zugeklappt heißt nie gelöscht – ein Klick öffnet alles. */
.af-bahn-hinweis {
  
  padding: var(--raum-2) var(--raum-3);
   margin: 0;
   font-size: var(--groesse-hinweis);
   line-height: 1.5;
  
  color: var(--text-gedimmt);
   background: var(--flaeche-karte);
  
  border-bottom: 1px solid var(--linie, var(--linie));
}
.af-gruppe {  border-bottom: 1px solid var(--linie, var(--linie)); }
.af-gruppe-kopf {
  
  display: flex;
   align-items: baseline;
   gap: var(--raum-2);
   width: 100%;
  
  padding: var(--raum-2) var(--raum-3);
   background: none;
   border: 0;
   font: inherit;
  
  text-align: left;
   cursor: pointer;
   color: inherit;
}
.af-gruppe-kopf:hover {  background: var(--flaeche-karte); }
.af-gruppe-kopf::before {
  
  content: "▸";
   color: var(--text-gedimmt);
   font-size: var(--groesse-klein);
   transition: transform .12s;
}
.af-gruppe-kopf.offen::before {  transform: rotate(90deg); }
.af-gruppe-name {
   flex: 1;
   font-weight: var(--schnitt-halb);
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
}
.af-gruppe-zahl {
  
  font-family: var(--schrift-mono, monospace);
   font-size: var(--groesse-klein);
  
  background: var(--linie, var(--flaeche-vertieft));
   color: var(--text);
  
  border-radius: var(--radius-klein);
   padding: var(--raum-1) var(--raum-2);
}
.af-gruppe-inhalt {  background: var(--flaeche-karte); }
.af-gruppe-stumm {
  
  display: block;
   width: 100%;
   padding: var(--raum-2) var(--raum-3);
   border: 0;
  
  border-top: 1px dashed var(--linie, var(--linie));
  
  background: none;
   font: inherit;
   font-size: var(--groesse-hinweis);
   color: var(--gold-dunkel, var(--gold));
  
  text-align: left;
   cursor: pointer;
}
.af-gruppe-stumm:hover {  background: var(--st-aktiv-flaeche); }
/* Wie lange ist es still? Nur in „Wartet auf Antwort" – dort ist es die
   eigentliche Auskunft. Ab zehn Tagen wird es deutlich. */
.af-marke-still {  color: var(--text-gedimmt); }
.af-marke-still-lang {  color: var(--gefahr-text);  font-weight: var(--schnitt-halb); }
/* Gleiche Anzeigenamen, verschiedene Adressen: „SCALARA GmbH" stand dreimal
   untereinander. Die Adresse macht den Unterschied sichtbar. */
.af-gruppe-adresse {
   display: block;
   font-weight: var(--schnitt-normal);
   font-size: var(--groesse-klein);
   color: var(--text-gedimmt);
}
/* ===== G5: Eine Hauptsache in der Leseansicht ============================= */
/* „Antworten" ist das, was in neun von zehn Fällen passiert. Es darf so
   aussehen. Alles Übrige liegt unter „…" – erreichbar, aber nicht im Weg. */
.af-aktionsleiste {  align-items: center;  gap: var(--raum-2); }
.af-haupt {  padding: var(--raum-2) var(--raum-5);  font-weight: var(--schnitt-halb); }
/* Die Akte als Auskunft, nicht als Knopf: sie sagt, wohin die Unterhaltung
   gehört, und lässt sich anklicken. */
.af-akte-verweis {
  
  display: inline-flex;
   flex-direction: column;
   align-items: flex-start;
  
  gap: var(--raum-1);
   padding: var(--raum-1) var(--raum-2);
   border: 1px solid var(--gold, var(--gold));
  
  border-radius: var(--radius-klein);
   background: var(--st-aktiv-flaeche);
  
  font: inherit;
   font-size: var(--groesse-hinweis);
   font-weight: var(--schnitt-halb);
   color: var(--gold-dunkel, var(--gold));
  
  cursor: pointer;
   line-height: 1.25;
}
.af-akte-verweis:hover {  background: var(--st-aktiv-flaeche); }
/* G5: Die Anschrift für einen Brief steht eingeklappt im Schreiben-Dialog.
   Sie ist einen Klick entfernt statt an erster Stelle – das Feld wird beim
   Senden einer Mail gar nicht verwendet. */
.schreiben-brief {
  
  border: 1px solid var(--linie, var(--linie));
   border-radius: var(--radius-klein);
  
  padding: var(--raum-2) var(--raum-3);
   margin-bottom: var(--raum-3);
   background: var(--flaeche-karte);
}
/* Der Text ist die Hauptsache des Dialogs. Vorher startete das Feld mit 83 px
   in einem 828 px hohen Fenster – vier Zeilen zum Schreiben. */
#feld-schreiben-text {  min-height: 260px; }
/* ===== G6: Die Akte beantwortet drei Fragen ============================== */
/* 1. Worum geht es — Sachverhalt und die Menschen dazu, in EINEM Block.
   Vorher bekam der Sachverhalt 71 px und die Kontakte standen bei Pixel 1341. */
.lv-worum-kontakt {
   margin-top: var(--raum-3);
   padding-top: var(--raum-3);
   border-top: 1px dashed var(--linie, var(--linie));
}
/* 2. Wo stehen wir — eine Zeile statt drei getrennter Fortschrittsbegriffe.
   Was drinsteht, ist das, was man am Telefon sagen würde. */
.lv-stand {
  
  display: flex;
   flex-wrap: wrap;
   align-items: baseline;
   gap: var(--raum-1) var(--raum-3);
  
  margin: 0;
   font-size: var(--groesse-text);
   color: var(--text-gedimmt);
}
.lv-stand-haupt { 
  font-size: var(--groesse-bedien);  font-weight: var(--schnitt-halb);  color: var(--text); }
.lv-stand-wartet {  color: var(--gold-dunkel, var(--gold));  font-weight: var(--schnitt-halb); }
.lv-stand-frist {  font-variant-numeric: tabular-nums; }
/* K3.2: `.lv-stand-ruht` stand seit G3 im Markup und hatte KEINE Regel — „ruht"
   las sich wie normaler Fließtext neben „angelegt am". Dabei ist es die eine
   Angabe in dieser Zeile, die sagt, dass hier gerade nichts passiert. Es bekommt
   den Ton der wartenden Zustände, aber nicht deren Gold: „ruht" ist kein
   Warten auf jemanden, sondern eine bewusst angehaltene Akte. */
.lv-stand-ruht {
   color: var(--st-neutral-text);
   font-weight: var(--schnitt-halb);
   font-style: italic;
}
.lv-stand-offen::before, .lv-stand-frist::before, .lv-stand-wartet::before, .lv-stand-seit::before { 
  content: "·";  margin-right: var(--raum-2);  color: var(--linie, var(--text-gedimmt)); }
.lv-stand-seit::before {  content: none; }
/* G3: Der gesetzte nächste Schritt, direkt unter der Standzeile. Eigene Zeile,
   weil ein ganzer Satz zwischen den Kurzangaben nicht lesbar wäre. */
.lv-stand-schritt {
   display: flex;
   flex-wrap: wrap;
   align-items: baseline;
   gap: var(--raum-1) var(--raum-2);
   margin: var(--raum-2) 0 0;
   font-size: var(--groesse-text);
}
.lv-stand-schritt-bez {  color: var(--text-gedimmt);  font-size: var(--groesse-klein); }
.lv-stand-schritt-text {  flex: 1 1 12rem;  min-width: 0;  color: var(--text);  font-weight: var(--schnitt-halb); }
/* 3. Was ist als Nächstes zu tun — steht jetzt oben statt bei Pixel 1378. */
.lv-akte-haupt > .lv-block:nth-child(3) .naechster-schritt {  margin: 0; }
/* Der Hinweis auf verknüpfte Vorgänge, die jetzt unten stehen. */
.lv-verkn-hinweis {  margin: 0 0 var(--raum-2);  font-size: var(--groesse-hinweis);  color: var(--text-gedimmt); }
.lv-textknopf {
  
  background: none;
   border: 0;
   padding: 0;
   font: inherit;
  
  color: var(--gold-dunkel, var(--gold));
   text-decoration: underline;
   cursor: pointer;
}

/* ---------- Ansicht 1: Arbeitsfläche Mail ---------- */
/* Die Bahnen tragen lange Namen („Ungeordnet und unbeantwortet"). Der Baustein
   .pille hält den Text in einer Zeile — hier darf er umbrechen, denn gekürzt
   wird kein Text. Die Höhe wächst mit. */
.af-filter-btn { white-space: normal; height: auto; min-height: var(--hoehe-bedien);
                 padding-top: var(--raum-1); padding-bottom: var(--raum-1); }
/* Eine Unterhaltung ist eine .zeile — mit Farben, Überfahren und Trennlinie
   des Bausteins. Nur die feste Höhe kann sie nicht übernehmen: eine Zeile
   trägt Gegenstelle, Betreff und Marken untereinander, und in 40 px stünde
   davon genau eine. Der Text bleibt, die Zeile wächst. */
.af-zeile { height: auto; }

/* Der aktive Reiter der Akte trägt zusätzlich zum Baustein-Zustand die
   Marken-Kontur, damit man ihn in einer Reihe von sieben sofort findet. */
.drawer-tab[aria-selected="true"] { background: var(--flaeche-segment-aktiv);
  border-color: var(--gold); color: var(--text); }

/* ---------- A8b: Rückschau auf automatisch eingestufte Post ---------- */
/* Eine Liste zum Durchsehen, nicht zum Arbeiten: Datum und Absender oben,
   Betreff groß, Begründung klein darunter. Zurückgeholtes bleibt stehen und
   ist an der goldenen Kante zu erkennen. */
#modal-rueckschau .modal-inhalt {  max-height: 70vh;  overflow-y: auto;  overscroll-behavior: contain; }  /* K1 */
.rs-haeufung {  margin: var(--raum-4) 0; }
.rs-haeufung ul {  margin: var(--raum-2) 0 0 var(--raum-5); }
.rs-zeile {
  border-bottom: 1px solid var(--linie);
  padding: var(--raum-3) 0;
}
.rs-zeile:last-child {  border-bottom: 0; }
.rs-zurueck {  border-left: 3px solid var(--gold);  padding-left: var(--raum-3); }
.rs-kopf {  display: flex;  align-items: center;  gap: var(--raum-3); }
.rs-datum {  font-size: var(--groesse-hinweis);  color: var(--text-gedimmt);  white-space: nowrap; }
.rs-absender {  font-size: var(--groesse-hinweis);  color: var(--text-zweit);  overflow: hidden;  text-overflow: ellipsis; }
.rs-kopf .knopf {  margin-left: auto;  flex: none; }
.rs-betreff {  margin-top: var(--raum-1);  color: var(--text); }
.rs-grund {  margin-top: var(--raum-1);  font-size: var(--groesse-hinweis);  color: var(--text-gedimmt); }
.af-rueckschau {  width: 100%;  margin-top: var(--raum-2);  justify-content: flex-start;  text-align: left;  white-space: normal;  height: auto; }

/* ---------- E1: Ablage in Google Drive ---------- */
/* Der Dialog zeigt vor dem Ablegen genau zwei Dinge groß: wie die Datei heißen
   und wo sie liegen wird. Beides ist danach nur noch in Drive zu ändern, und
   der Sortierer liest den Namen — deshalb steht er hier und nicht im Kleinen. */
.drive-zeile {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--raum-4);
}
.drive-vorschau {
  margin-top: var(--raum-4);
  padding: var(--raum-4);
  border: 1px solid var(--linie);
  border-radius: var(--radius-feld);
  background: var(--flaeche-vertieft);
}
.drive-vorschau-marke {
  font-size: var(--groesse-hinweis);
  color: var(--text-gedimmt);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.drive-vorschau-name {
  margin: var(--raum-1) 0 var(--raum-3);
  font-family: var(--schrift-mono);
  color: var(--text);
  word-break: break-word;
}
.drive-vorschau-ordner {
  margin-top: var(--raum-1);
  font-family: var(--schrift-mono);
  color: var(--gold-text);
}
/* Der Zustand an der Dateikachel. „wartet" ist bewusst sichtbar und nicht
   dezent: ein stiller Rückstand ist genau der Fehler, den E1.6 abstellen soll. */
.drive-marke {
  display: inline-flex;
  align-items: center;
  gap: var(--raum-1);
  font-size: var(--groesse-hinweis);
}
.drive-marke-gespiegelt { color: var(--melden-erfolg); }
.drive-marke-warteschlange { color: var(--melden-hinweis); }
.drive-marke-aufgegeben { color: var(--melden-fehler); }
/* N1.2c: „bewusst nicht gespiegelt" ist eine Entscheidung, kein Fehlschlag –
   deshalb gedämpft und nicht in Warnfarbe. „ohne Objekt" dagegen schon: dort
   fehlt die Angabe, aus der sich der Zielordner ergäbe. */
.drive-marke-nicht_vorgesehen { color: var(--text-gedimmt); }
.drive-marke-ohne_objekt { color: var(--melden-hinweis); }

/* ===== N2.1: die Ablage des Objekts, örtlich und in Drive ==================
   Eine Zeile je Datei. Die Herkunft steht als Abzeichen daran, weil sie die
   Frage beantwortet, die man an diese Liste hat: liegt das Ding schon dort,
   wo SCALARA es sucht? Farbe nur, wo sie etwas trennt — „bewusst nicht
   gespiegelt" ist eine Entscheidung und bekommt deshalb keine Warnfarbe. */
.ablage-stand {
  font-size: var(--groesse-hinweis);
  color: var(--text-gedimmt);
  font-weight: var(--schnitt-normal);
  margin-left: var(--raum-3);
}
.ablage-luecke {
  margin: var(--raum-2) 0;
  padding: var(--raum-2) var(--raum-3);
  border: 1px solid var(--melden-hinweis);
  border-radius: var(--radius-feld);
  color: var(--text-zweit);
  font-size: var(--groesse-klein);
}
/* J3: Was im Objektordner daneben liegt. Dieselbe Bauart wie die Lücke oben —
   ein Hinweis, keine Warnung: die Dateien fehlen nicht, sie sind nur nicht
   geführt. Deshalb der ruhigere Rahmen. */
.ablage-daneben {
  margin: var(--raum-2) 0;
  padding: var(--raum-2) var(--raum-3);
  border: 1px solid var(--linie);
  border-radius: var(--radius-feld);
  color: var(--text-zweit);
  font-size: var(--groesse-klein);
}
.ablage-zaehler {
  display: flex;
  flex-wrap: wrap;
  gap: var(--raum-2);
  margin: var(--raum-2) 0;
}
.ablage-beides { background: var(--st-erledigt-flaeche); color: var(--st-erledigt-text); }
.ablage-nur-lv { background: var(--flaeche-vertieft); color: var(--text-gedimmt); }
/* Der dritte Fall ist der Gewinn dieser Ansicht: Unterlagen, die LV nicht
   kennt. Deshalb trägt er als einziger die Markenfarbe. */
.ablage-nur-drive { background: var(--flaeche-vertieft); color: var(--gold-text); }
.ablage-offen { background: var(--st-hoch-flaeche); color: var(--st-hoch-text); }
.ablage-leiste {
  display: flex;
  align-items: center;
  gap: var(--raum-3);
  margin: var(--raum-2) 0 var(--raum-3);
}
.ablage-suche { flex: 1; min-width: 180px; }
.ablage-baum {
  border: 1px solid var(--linie);
  border-radius: var(--radius-karte);
  overflow: hidden;
}
.ablage-knoten + .ablage-knoten { border-top: 1px solid var(--linie); }
.ablage-knoten-kopf {
  display: flex;
  align-items: center;
  gap: var(--raum-3);
  width: 100%;
  padding: var(--raum-2) var(--raum-3);
  background: transparent;
  border: 0;
  color: var(--text);
  text-align: left;
  cursor: pointer;
  font-size: var(--groesse-text);
}
.ablage-knoten-kopf:hover { background: var(--flaeche-vertieft); }
.ablage-knoten.offen .ablage-knoten-kopf { background: var(--flaeche-vertieft); }
.ablage-knoten-name { flex: 1; font-family: var(--schrift-mono); font-size: var(--groesse-klein); }
.ablage-knoten-zahl { color: var(--text-gedimmt); font-size: var(--groesse-klein); }
.ablage-dateien { border-top: 1px solid var(--linie); }
.ablage-zeile {
  display: grid;
  grid-template-columns: minmax(0, 2fr) auto auto minmax(0, 1.2fr) auto;
  align-items: center;
  gap: var(--raum-3);
  padding: var(--raum-2) var(--raum-3);
}
.ablage-zeile + .ablage-zeile { border-top: 1px solid var(--linie); }
.ablage-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ablage-meta { color: var(--text-gedimmt); font-size: var(--groesse-klein); white-space: nowrap; }
.ablage-grund {
  color: var(--text-gedimmt);
  font-size: var(--groesse-hinweis);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ablage-rueckstand .ablage-grund { color: var(--melden-hinweis); }
.ablage-wege { display: flex; gap: var(--raum-2); justify-content: flex-end; }
@media (max-width: 1100px) {
  .ablage-zeile { grid-template-columns: minmax(0, 1fr) auto; }
  .ablage-meta, .ablage-grund { grid-column: 1 / -1; }
  .ablage-wege { grid-column: 1 / -1; justify-content: flex-start; }
}

/* ===== A3: Die Ablage als Liste ===========================================
   Der Befund aus A1 war ein Rasterfehler: die Namensspalte war `minmax(0, 2fr)`
   in einem 306 px breiten Block, dessen feste Spalten schon 415 px brauchten.
   Sie fiel auf 0 px zusammen und `overflow: hidden` verschluckte sie lautlos.
   Deshalb hier zwei Vorkehrungen: die Namensspalte hat eine MINDESTBREITE, und
   sie schneidet nicht ab, sondern bricht um. Eine Spalte, die zu wenig Platz
   hat, soll die Zeile höher machen — nicht ihren Inhalt verschwinden lassen. */
.abl-suche {  flex: 1;  min-width: 220px; }
.abl-ansichten {  display: flex;  gap: var(--raum-1);  margin-left: auto; }
.abl-kopf {
   display: flex;
   flex-wrap: wrap;
   align-items: center;
   gap: var(--raum-2);
   margin: 0 0 var(--raum-2);
   font-size: var(--groesse-klein);
   color: var(--text-zweit);
}
.abl-stand {  color: var(--text-gedimmt);  margin-left: auto; }
/* K2.3: Der Ablage-Rückstand, jetzt unter Dokumente statt in den Einstellungen.
   Er trägt den Warnton der Kopfzeile, weil er eine offene Arbeit ist — aber als
   Randlinie, nicht als Fläche: er steht über der Liste, die man eigentlich lesen
   will, und darf sie nicht zudecken. Die inneren Klassen (`einstell-kopf`,
   `einstell-hinweis`, `einstell-liste`) bleiben, wie sie waren — der Block ist
   verschoben, nicht neu gebaut. */
.abl-rueckstand-block {
   margin: 0 0 var(--raum-3);
   padding: var(--raum-3);
   border: 1px solid var(--linie);
   border-left: 3px solid var(--melden-hinweis);
   border-radius: var(--radius-karte);
   background: var(--flaeche-karte);
}
.abl-rueckstand-block h3 {
   margin: 0;
   font-size: var(--groesse-abschnitt);
}

/* K2.2: Die Zeile, die sagt, welche Filter noch stehen. Bewusst ein Hinweiston
   und kein Warnton: ein gesetzter Filter ist kein Fehler, er ist nur leicht zu
   übersehen. Nur die Randlinie trägt Farbe, damit sie im Blickfeld liegt, ohne
   die Liste darunter zu überstrahlen. */
.abl-filter-aktiv {
   display: flex;
   flex-wrap: wrap;
   align-items: center;
   gap: var(--raum-2);
   margin: 0 0 var(--raum-2);
   padding: var(--raum-2) var(--raum-3);
   border-left: 3px solid var(--melden-hinweis);
   border-radius: var(--radius-klein);
   background: var(--flaeche-vertieft);
   font-size: var(--groesse-klein);
   color: var(--text-zweit);
}
.abl-warn {  color: var(--melden-hinweis); }
.abl-liste {
   border: 1px solid var(--linie);
   border-radius: var(--radius-karte);
   overflow: hidden;
}
.abl-zeile {
   display: grid;
   grid-template-columns: minmax(15rem, 4fr) 7rem 6.5rem 4.5rem 9rem auto;
   align-items: start;
   gap: var(--raum-3);
   padding: var(--raum-2) var(--raum-3);
}
.abl-zeile + .abl-zeile {  border-top: 1px solid var(--linie); }
.abl-zeile.klickbar {  cursor: pointer; }
.abl-zeile.klickbar:hover {  background: var(--flaeche-vertieft); }
.abl-kopfzeile {
   background: var(--flaeche-vertieft);
   font-size: var(--groesse-klein);
   color: var(--text-gedimmt);
   align-items: center;
}
.abl-sort {
   background: transparent;
   border: 0;
   padding: 0;
   color: var(--text-gedimmt);
   font-size: var(--groesse-klein);
   font-family: inherit;
   text-align: left;
   cursor: pointer;
}
.abl-sort:hover {  color: var(--text); }
.abl-sp-name {  display: flex;  flex-direction: column;  gap: 2px;  min-width: 0; }
/* F4: Das Kästchen steht neben dem Namen, nicht darüber - sonst schöbe es die
   Zeile auseinander, und der Name war schon einmal das Opfer des Rasters. */
.abl-namezeile {  display: flex;  align-items: baseline;  gap: var(--raum-2);  min-width: 0; }
.abl-wahl {  flex: none;  margin: 0; }
/* TB-H10b: Die Leiste stand ÜBER der Liste und schob sie beim Anhaken der
   ersten Zeile um ihre eigene Höhe nach unten — der zweite Klick traf dann die
   falsche Zeile. Gemessen im Testbericht: 52 px.

   Sie liegt jetzt als überlagernde Leiste am unteren Fensterrand: sie nimmt der
   Liste keinen Platz weg, sie verschiebt nichts, und sie ist von jeder
   Scrollposition aus erreichbar. Die Liste bekommt unten so viel Luft, dass die
   letzte Zeile nicht darunter verschwindet. */
.abl-wahlleiste {
   position: fixed;
   left: 50%;
   bottom: var(--raum-4);
   transform: translateX(-50%);
   z-index: 40;
   display: flex;
   align-items: center;
   gap: var(--raum-3);
   max-width: calc(100vw - 2 * var(--raum-4));
   padding: var(--raum-3) var(--raum-4);
   border: 1px solid var(--linie-stark);
   border-radius: var(--radius-karte);
   background: var(--flaeche-erhoben, var(--flaeche-vertieft));
   box-shadow: 0 6px 24px rgb(0 0 0 / 35%);
}
/* Solange etwas gewählt ist, endet die Liste über der Leiste. */
.abl-liste-luft {  padding-bottom: 84px; }
/* Der ganze Punkt von A1: nicht abschneiden, sondern umbrechen. */
.abl-name {  overflow-wrap: anywhere;  line-height: 1.35; }
.abl-titel {  color: var(--text-gedimmt);  font-size: var(--groesse-klein); }
/* TB-H10i */
.abl-titel-bez {  color: var(--text-gedimmt);  opacity: 0.75; }
.abl-gueltig {  color: var(--text-gedimmt);  font-size: var(--groesse-hinweis); }
.abl-gueltig.ueberfaellig {  color: var(--gefahr-text); }
.abl-sp-art,
.abl-sp-datum,
.abl-sp-groesse {  font-size: var(--groesse-klein);  color: var(--text-zweit); }
.abl-sp-groesse {  font-variant-numeric: tabular-nums; }
.abl-datumquelle {  display: block;  color: var(--text-gedimmt);  font-size: var(--groesse-hinweis); }
.abl-leerwert {  color: var(--text-gedimmt); }
.abl-sp-wo {  display: flex;  flex-direction: column;  gap: 2px;  min-width: 0; }
.abl-grund {  color: var(--text-gedimmt);  font-size: var(--groesse-hinweis);  overflow-wrap: anywhere; }
.abl-sp-wege {  display: flex;  gap: var(--raum-2);  justify-content: flex-end;  align-items: flex-start; }
.abl-rueckstand .abl-grund {  color: var(--melden-hinweis); }
/* Schmaler Bildschirm: die festen Spalten wandern unter den Namen, statt ihn
   zusammenzudrücken. */
@media (max-width: 1200px) {
  .abl-zeile {  grid-template-columns: minmax(0, 1fr) auto; }
  .abl-sp-art, .abl-sp-datum, .abl-sp-groesse, .abl-sp-wo {  grid-column: 1 / -1; }
  .abl-kopfzeile {  display: none; }
}
.baum-ueberschrift {
   display: flex;
   flex-wrap: wrap;
   align-items: center;
   gap: var(--raum-2);
   margin: 0;
   padding: var(--raum-2) var(--raum-3);
   font-size: var(--groesse-hinweis);
   text-transform: uppercase;
   letter-spacing: 1px;
   color: var(--text-gedimmt);
}
.doku-dropzone-summary {
   cursor: pointer;
   font-weight: var(--schnitt-halb);
   list-style: none;
}

/* ===== N2.2: Dokumenteneingang ============================================
   Ein Stapel, kein Formular: die Datei steht oben, darunter die vier Fragen,
   die sie zum Dokument machen. An jeder Antwort steht, woher der Vorschlag
   kommt — und wo nichts abgeleitet werden konnte, steht das auch. */
.eingang-dropzone {
  border: 1px dashed var(--linie-stark);
  border-radius: var(--radius-karte);
  padding: var(--raum-5);
  text-align: center;
  margin-bottom: var(--raum-4);
}
.eingang-dropzone-aktiv { border-color: var(--gold); background: var(--flaeche-vertieft); }
.eingang-karte { padding: var(--raum-4); margin-bottom: var(--raum-3); }
.eingang-kopf {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: var(--raum-3);
  margin-bottom: var(--raum-3);
}
.eingang-name { font-weight: var(--schnitt-halb); }
.eingang-meta { color: var(--text-gedimmt); font-size: var(--groesse-klein); }
.eingang-felder {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: var(--raum-3);
  margin-bottom: var(--raum-3);
}
/* Die Begründung steht UNTER dem Feld, nicht daneben: sie gehört zur Antwort,
   nicht zur Frage. */
.eingang-warum {
  display: block;
  margin-top: var(--raum-1);
  font-size: var(--groesse-hinweis);
  color: var(--text-gedimmt);
}
.eingang-warum-leer { color: var(--melden-hinweis); }

/* N2.3: „→ Dokument" steht an JEDEM Anhang, nicht einmal am Block. Wer den
   Knopf sucht, sucht ihn bei der Datei, die er meint. */
.mail-anhang-paar { display: inline-flex; align-items: center; gap: var(--raum-1); }
.mail-anhang-aktion {
  background: transparent;
  border: 1px solid var(--linie);
  border-radius: var(--radius-pille);
  color: var(--text-gedimmt);
  font-size: var(--groesse-hinweis);
  padding: 0 var(--raum-2);
  height: 20px;
  cursor: pointer;
  white-space: nowrap;
}
.mail-anhang-aktion:hover { color: var(--gold-text); border-color: var(--gold); }
/* N2.1: eine Dublette ist kein Fehlschlag – der Inhalt liegt in Drive, nur
   unter einem anderen Eintrag. Gedämpft wie „bewusst nicht gespiegelt". */
.drive-marke-dublette { color: var(--text-gedimmt); }

/* ===== N4: Besprechungen ===================================================
   Die Protokollfläche wird WÄHREND des Gesprächs bedient. Was hier zählt, ist
   nicht Schmuck, sondern Trefferfläche und Lesbarkeit auf einen Blick: große
   Notizfelder, ein Anwesenheitshaken, der sich mit einem Klick trifft, und ein
   Sicherungsstand, den man aus zwei Metern Abstand lesen kann. */

/* --- Liste --- */
.bsp-karte {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--raum-4);
  cursor: pointer;
}
.bsp-karte:hover { background: var(--flaeche-ueberfahren); }
/* Die Besprechung von heute ist die, um die es geht. */
.bsp-heute { border-left: 3px solid var(--gold); }
.bsp-karte-marken { display: flex; gap: var(--raum-2); flex-wrap: wrap; }

/* --- Kopf und Terminleiste --- */
.bsp-kopf-rechts { display: flex; align-items: center; gap: var(--raum-3); flex-wrap: wrap; }
.bsp-kopf-info { color: var(--text-zweit); font-size: var(--groesse-klein); }
.bsp-termin {
  background: var(--flaeche-karte);
  border: 1px solid var(--linie);
  border-radius: var(--radius-karte);
  padding: var(--raum-3) var(--raum-4);
  margin-bottom: var(--raum-4);
}
.bsp-termin-zeile { display: flex; align-items: center; gap: var(--raum-3); flex-wrap: wrap; }
.bsp-termin-stand { color: var(--text-gedimmt); font-size: var(--groesse-klein); }
.bsp-termin-trenner {
  width: 1px;
  align-self: stretch;
  background: var(--linie);
  margin: 0 var(--raum-2);
}

/* --- Die Fläche: Punkte links, Teilnehmer und Protokoll rechts --- */
.bsp-flaeche {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(260px, 1fr);
  gap: var(--raum-5);
  align-items: start;
}
@media (max-width: 1100px) {
  .bsp-flaeche { grid-template-columns: minmax(0, 1fr); }
}
.bsp-spalte-breit, .bsp-spalte-schmal { min-width: 0; }

/* --- Punkte --- */
.bsp-top {
  background: var(--flaeche-karte);
  border: 1px solid var(--linie);
  border-radius: var(--radius-karte);
  padding: var(--raum-3);
  margin-bottom: var(--raum-3);
}
.bsp-top-kopf { display: flex; align-items: center; gap: var(--raum-2); }
.bsp-top-nr {
  color: var(--gold-text);
  font-weight: var(--schnitt-halb);
  min-width: 1.4em;
  font-variant-numeric: tabular-nums;
}
.bsp-top-titel {
  flex: 1;
  background: transparent;
  border: 1px solid transparent;
  font-weight: var(--schnitt-halb);
}
.bsp-top-titel:hover { border-color: var(--linie); }
/* Das Notizfeld ist der Ort, an dem während des Gesprächs getippt wird –
   deshalb bekommt es die Fläche, nicht der Rahmen darum. */
.bsp-notiz {
  width: 100%;
  margin-top: var(--raum-2);
  min-height: 4.5em;
  resize: vertical;
  line-height: 1.5;
}

/* --- Ein Formular je Eingabe: Enter legt an, ohne Maus --- */
.bsp-neu {
  display: flex;
  gap: var(--raum-2);
  margin: var(--raum-3) 0 var(--raum-5);
  flex-wrap: wrap;
}
/* Der Designdurchgang hat festgelegt: in dieser Datei nur Klassen, keine
   Element-Selektoren. Die breiten Felder tragen deshalb eine eigene Klasse. */
.bsp-neu-feld { flex: 1; min-width: 140px; }

/* --- Der Sicherungsstand. Er sagt, WANN zuletzt gesichert wurde – nicht, dass
       gesichert werde. --- */
.bsp-stand-ok { color: var(--melden-erfolg); }
.bsp-stand-laeuft { color: var(--text-gedimmt); }
.bsp-stand-fehler { color: var(--melden-fehler); font-weight: var(--schnitt-halb); }

/* --- Ergebnisse --- */
.bsp-ergebnis {
  display: flex;
  align-items: center;
  gap: var(--raum-2);
  padding: var(--raum-2) var(--raum-3);
  border-bottom: 1px solid var(--linie);
  flex-wrap: wrap;
}
.bsp-ergebnis-fertig .bsp-ergebnis-text { color: var(--text-gedimmt); text-decoration: line-through; }
.bsp-ergebnis-text { flex: 1; min-width: 200px; }
.bsp-ergebnis-meta { color: var(--text-gedimmt); font-size: var(--groesse-klein); }
.bsp-ergebnis-hak { display: flex; align-items: center; }

/* --- Teilnehmer --- */
.bsp-teilnehmer-zeile {
  display: flex;
  align-items: baseline;
  gap: var(--raum-2);
  padding: var(--raum-2) 0;
  border-bottom: 1px solid var(--linie);
  flex-wrap: wrap;
}
.bsp-teilnehmer-meta { color: var(--text-gedimmt); font-size: var(--groesse-hinweis); flex: 1; }
.bsp-teilnehmer-neu { margin: var(--raum-3) 0 var(--raum-5);  display: flex;  flex-direction: column;  gap: var(--raum-2); }
.bsp-teilnehmer-neu > .knopf { width: 100%; }

/* Teilnehmer wählen (17.08.2026).
   `.bsp-moeglich` und `.bsp-moeglich-meta` standen hier bis heute — je Person
   ein Knopf über die ganze Breite der schmalen Spalte. Sie sind mit ihrem
   Markup gegangen; eine Regel ohne Markup ist genau das, was die Stilprüfung
   an anderer Stelle als (b) meldet, nur in der anderen Richtung. */
.bsp-tn-suche {  width: 100%; }
.bsp-tn-schnell {
  display: flex;
  flex-wrap: wrap;
  gap: var(--raum-2);
  margin: var(--raum-3) 0;
}
/* Höhe begrenzt und scrollend: bei dreizehn Personen wächst der Dialog sonst
   über den Schirm, und die Knöpfe darunter sind nicht mehr zu sehen. */
.bsp-tn-liste {
  max-height: min(46vh, 420px);
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  border-top: 1px solid var(--linie);
  border-bottom: 1px solid var(--linie);
  padding: var(--raum-2) 0;
}
/* EINE Zeile je Person — und der Selektor muss `.modal label` schlagen.
//
   Zwei Messungen, zwei Fehler: erst `flex-wrap: wrap` mit `margin-left: auto`
   an der Adresse (daraus wurden DREI Zeilen je Person), dann `flex-wrap:
   nowrap` allein — das half nicht, weil `.modal label` in style.css
   `flex-direction: column` setzt und mit (0,1,1) über `.bsp-tn-zeile` (0,1,0)
   gewinnt. Das Haus hat dafür längst die Form: `.modal label.dz-radio`. Also
   genauso, statt am Markup zu drehen.

   Nicht umbrechen, sondern kürzen: die Adresse ist das, was am ehesten weg
   darf — „ohne Adresse" steht kurz genug, um immer ganz da zu sein. */
.modal label.bsp-tn-zeile {
  display: flex;
  flex-direction: row;
  align-items: baseline;
  gap: var(--raum-3);
  flex-wrap: nowrap;
  margin-bottom: 0;
  padding: var(--raum-2);
  border-radius: var(--radius-klein);
  cursor: pointer;
  font-size: var(--groesse-bedien);
  font-weight: var(--schnitt-normal);
  transition: background-color .12s ease-out;
}
.modal label.bsp-tn-zeile > input[type="checkbox"] {  flex: none;  width: auto;  margin: 0; }
.modal label.bsp-tn-zeile:hover {  background: var(--st-aktiv-flaeche); }
/* Wer schon auf der Liste steht, bleibt sichtbar statt zu verschwinden — sonst
   sucht man ihn und weiss nicht, ob er fehlt oder schon da ist. */
.modal label.bsp-tn-zeile.ist-dabei {  color: var(--text-gedimmt);  cursor: default; }
.modal label.bsp-tn-zeile.ist-dabei:hover {  background: none; }
.bsp-tn-name {  font-weight: var(--schnitt-halb);  flex: 0 1 auto;  white-space: nowrap; }
.bsp-tn-meta {
  color: var(--text-zweit);
  font-size: var(--groesse-hinweis);
  flex: 0 1 auto;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.bsp-tn-mail {
  color: var(--text-gedimmt);
  font-size: var(--groesse-hinweis);
  flex: 1 1 auto;
  text-align: right;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.bsp-tn-marke {
  padding: 0 var(--raum-2);
  border: 1px solid var(--linie);
  border-radius: var(--radius-klein);
  background: var(--flaeche-vertieft);
  color: var(--text-zweit);
  font-size: var(--groesse-winzig);
  white-space: nowrap;
}
.bsp-protokoll-aktionen { display: flex; flex-direction: column; gap: var(--raum-2); align-items: stretch; }

/* ===================================================================
   N6.2 — Der eine Verfasser
   ===================================================================
   Kein Fenster über dem Inhalt, sondern eine Fläche IM Inhalt, dort wo
   die Unterhaltung steht. Deshalb keine Abdunklung, kein position:fixed,
   kein eigener Scrollbereich: er wächst mit seinem Gastgeber und rollt
   mit ihm. Genau ein Exemplar im Dokument — es wird verschoben, nie
   kopiert. */
.verfasser {
  border: 1px solid var(--linie-stark);
  border-radius: var(--radius-karte);
  background: var(--flaeche-karte);
  padding: var(--raum-4);
  margin-top: var(--raum-4);
  display: flex;
  flex-direction: column;
  gap: var(--raum-3);
}
.verfasser-kopf { display: flex; align-items: center; gap: var(--raum-3); flex-wrap: wrap; }
.verfasser-titel { font-size: var(--groesse-titel); margin: 0; }
.verfasser-kopf-rechts { display: flex; gap: var(--raum-2); }
/* Antworten / Allen antworten / Weiterleiten: Umschalter, keine Dialoge.
   Der geltende Modus trägt dieselbe Auszeichnung wie ein aktiver Reiter. */
.verfasser-modus { display: flex; gap: var(--raum-1); }
.verfasser-modus .knopf-aktiv {
  background: var(--flaeche-segment-aktiv);
  border-color: var(--gold);
  color: var(--text);
}
.verfasser-betriebsart {
  display: flex;
  flex-direction: column;
  gap: var(--raum-1);
  padding: var(--raum-2) var(--raum-3);
  background: var(--flaeche-vertieft);
  border-radius: var(--radius-feld);
}
.verfasser-betriebsart-titel {
  font-size: var(--groesse-hinweis);
  color: var(--text-gedimmt);
  text-transform: uppercase;
  letter-spacing: .06em;
}
.verfasser-betriebsart-wahl { display: flex; align-items: baseline; gap: var(--raum-2); margin: 0; }
.verfasser-felder { display: flex; flex-direction: column; gap: var(--raum-1); }
.verfasser-werkzeuge { display: flex; align-items: center; gap: var(--raum-1); flex-wrap: wrap; }
/* Das Textfeld ist der Grund, warum die Fläche da ist – es bekommt den
   meisten Platz und wächst mit dem Text. */
.verfasser-text { min-height: 11rem; max-height: 32rem; }
.verfasser-zitat { border-top: 1px solid var(--linie); padding-top: var(--raum-2); }
.verfasser-zitat-kopf { cursor: pointer; color: var(--text-gedimmt); font-size: var(--groesse-hinweis); }
.verfasser-zitat-text { min-height: 5rem; max-height: 18rem; color: var(--text-gedimmt); margin-top: var(--raum-2); }
.verfasser-kreis:not([hidden]) { display: block; }
.verfasser-fuss {
  display: flex;
  align-items: center;
  gap: var(--raum-3);
  flex-wrap: wrap;
  border-top: 1px solid var(--linie);
  padding-top: var(--raum-3);
}
.verfasser-fuss .rechts { margin-left: auto; display: flex; gap: var(--raum-2); }
/* Solange der Verfasser geschlossen ist, wohnt er hier. Der Platz selbst
   ist unsichtbar – ohne ihn müsste das Element gelöscht und neu gebaut
   werden, und der Entwurf im Feld wäre weg. */
.verfasser-parkplatz { display: none; }
.tasten-taste { width: 8rem; white-space: nowrap; }

/* Die Uhr steht neben ihrem Knopf, nicht darunter – sie gehört zu ihm. */
.lv-zeitfeld { display: flex; align-items: center; gap: var(--raum-2); }

/* I4: Was bei einer Umstellung WEGFÄLLT. Es steht als eigener Block unter dem
   Vergleich, nicht als Farbunterschied im Namen – ein Verlust, den man suchen
   muss, ist keiner, der genannt wurde. */
.lv-abl-verlust {
   display: flex;
   flex-direction: column;
   gap: var(--raum-1);
   margin-top: var(--raum-2);
   padding: var(--raum-2) var(--raum-3);
   border-radius: var(--radius-klein);
   background: var(--flaeche-vertieft);
}
.lv-abl-verlustzeile {
   font-size: var(--groesse-klein);
   color: var(--melden-hinweis);
   overflow-wrap: anywhere;
}
.lv-abl-vverlust {  border-left: 2px solid var(--melden-hinweis); }

/* J4: Das Dokumentdatum ist ein Textfeld, kein `type="date"` — es muss drei
   Genauigkeiten halten können (2026-07-23, 2026-07, 1993), und dafür gibt es
   in HTML kein Eingabefeld. Der Preis ist der fehlende Kalender; der Gewinn
   ist, dass eine Teilungsurkunde von 1993 ihr Datum behalten darf.
   Breite und Schrift wie ein Datumsfeld, damit die Zeile nicht springt. */
.feld-dokumentdatum {
  font-variant-numeric: tabular-nums;
  max-width: 14ch;
}

/* ---------- M-A2: die zweite Fläche im Betrachter ----------
   Kein zweiter Betrachter, sondern eine Spalte NEBEN dem Dokument. Das Fenster
   wird breiter, sobald sie offen ist — sonst schrumpfte das Dokument auf die
   halbe Breite, und man hätte den Text gegen die Ansicht eingetauscht. */
.viewer-flaechen {
  flex: 1;
  display: flex;
  min-height: 0;
  overflow: hidden;
}
.viewer-flaechen > .viewer-body {  flex: 1;  min-width: 0; }
.modal-viewer.mit-text {  width: min(1480px, 97vw); }
.viewer-textflaeche {
  width: 46ch;
  max-width: 46vw;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  min-height: 0;
  border-left: 1px solid var(--linie-stark);
  background: var(--flaeche-karte);
}
.viewer-text-kopf {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--raum-3);
  padding: var(--raum-3) var(--raum-4);
  border-bottom: 1px solid var(--flaeche-seite);
  flex-shrink: 0;
}
/* Die Herkunft steht IMMER dabei: „Textebene" heißt, es ist der Text der
   Datei; „maschinell erkannt" heißt, eine Ziffer kann ein Buchstabe sein.
   Der Auftrag nennt genau diesen Fall — eine abgetippte Rechnungsnummer. */
.viewer-text-marke {
  font-size: var(--groesse-klein);
  color: var(--text-gedimmt);
  display: flex;
  align-items: center;
  gap: var(--raum-2);
  min-width: 0;
}
.viewer-text-rumpf {
  flex: 1;
  overflow: auto;
  overscroll-behavior: contain;
  padding: var(--raum-4);
  display: flex;
  flex-direction: column;
  gap: var(--raum-4);
}
.viewer-text-seite {  display: grid;  gap: var(--raum-2); }
.viewer-text-seitenzahl {
  font-size: var(--groesse-klein);
  color: var(--text-deaktiviert);
  letter-spacing: .04em;
  text-transform: uppercase;
}
.viewer-text-inhalt {
  margin: 0;
  font-family: var(--schrift-mono);
  font-size: var(--groesse-klein);
  line-height: 1.6;
  white-space: pre-wrap;
  word-break: break-word;
  color: var(--text);
  user-select: text;
}
.viewer-text-leer {
  color: var(--text-gedimmt);
  display: grid;
  gap: var(--raum-3);
  justify-items: start;
}
.viewer-text-fortschritt {
  font-size: var(--groesse-klein);
  color: var(--st-inarbeit-text);
}

/* ---------- M-A4: was durchsucht wurde, und was nicht ---------- */
.abl-textstand {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--raum-2) var(--raum-3);
  padding: var(--raum-3) var(--raum-4);
  margin-bottom: var(--raum-3);
  border-radius: var(--radius-feld);
  background: var(--flaeche-vertieft);
  font-size: var(--groesse-klein);
  color: var(--text-gedimmt);
}
.abl-textstand strong {  color: var(--text); }
.abl-textliste {
  margin-bottom: var(--raum-3);
  padding: var(--raum-3) var(--raum-4);
  border-radius: var(--radius-feld);
  border: 1px solid var(--linie-stark);
  background: var(--flaeche-karte);
  max-height: 40vh;
  overflow: auto;
  overscroll-behavior: contain;
}
.abl-textliste-zeile {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--raum-3);
  padding: var(--raum-2) 0;
  font-size: var(--groesse-klein);
  border-bottom: 1px solid var(--flaeche-seite);
}
.abl-textliste-zeile:last-child {  border-bottom: 0; }
.abl-textliste-grund {  color: var(--text-gedimmt);  flex-shrink: 0; }
/* Die Fundstelle unter dem Namen: der Satz, in dem das Suchwort steht. Ohne
   sie weiß man nicht, WARUM ein Dokument getroffen wurde. */
.abl-fundstelle {
  display: block;
  font-size: var(--groesse-klein);
  color: var(--text-gedimmt);
  line-height: 1.5;
  margin-top: var(--raum-1);
}
.abl-fundstelle mark {
  background: var(--st-offen-flaeche);
  color: var(--st-offen-text);
  border-radius: 2px;
  padding: 0 2px;
}
.abl-fundstelle-seite {  color: var(--text-deaktiviert); }
.abl-textstand-wege {
  display: flex;
  flex-wrap: wrap;
  gap: var(--raum-2);
  margin-left: auto;
}
/* Der laufende Erstlauf. Er steht in derselben Zeile wie die Zahlen — was
   gerade passiert, gehört neben das, was schon da ist. */
.abl-lauf-leiste {
  flex-basis: 100%;
  display: flex;
  align-items: center;
  gap: var(--raum-3);
  padding-top: var(--raum-2);
  border-top: 1px solid var(--linie-stark);
  color: var(--st-inarbeit-text);
}

/* ---------- M-B2/B3: die fünf Anhangquellen ----------
   Die beiden neuen Abschnitte (Objektdokumente, Drive) haben eine Suche und
   eine eigene Scrollfläche: an einer Akte hängen ein halbes Dutzend Dateien,
   am Objekt 354. */
.lv-anhang-zahl {
  font-weight: var(--schnitt-normal);
  color: var(--text-deaktiviert);
  font-variant-numeric: tabular-nums;
}
.lv-anhang-suche {  margin: var(--raum-2) 0; }
.lv-anhang-suchfeld {  width: 100%; }
.lv-anhang-liste {
  max-height: 15rem;
  overflow: auto;
  overscroll-behavior: contain;
  border: 1px solid var(--linie-stark);
  border-radius: var(--radius-feld);
  padding: var(--raum-2);
}
.lv-anhang-rest {
  margin: var(--raum-2) 0 0;
  font-size: var(--groesse-klein);
  color: var(--text-gedimmt);
}
/* B3: „Über der Grenze wird das gesagt, BEVOR man auf Senden drückt." */
.lv-anhang-summe {
  margin: var(--raum-3) 0 0;
  padding-top: var(--raum-2);
  border-top: 1px solid var(--flaeche-seite);
  font-size: var(--groesse-klein);
  color: var(--text-gedimmt);
  font-variant-numeric: tabular-nums;
}
.lv-anhang-summe-warnung {
  color: var(--gefahr-text);
  font-weight: var(--schnitt-halb);
}
/* Eingeklappt, solange nichts daraus gewählt ist — sonst wächst der Verfasser
   um 400 Pixel, und das Textfeld rutscht aus dem Bild. */
.lv-anhang-klappe > summary {  cursor: pointer;  list-style: revert; }
.lv-anhang-klappe[open] > summary {  margin-bottom: var(--raum-2); }

/* ============================================================
   Phase 4 des Design-Umbaus, 13.08.2026 — Ansicht 1 „Heute"
   ============================================================
   Die Übergabe: „In zehn Sekunden sehen, was heute zu tun ist."
   Drei gleich breite Spalten NACH HANDLUNGSBEDARF, nicht nach Tabelle:
   Frist läuft · Du bist am Zug · Warten auf andere.

   Woher die Einteilung kommt — LV führt sie schon, sie stand nur nie so da:
     Frist läuft        faellig_am <= heute, dazu die strategischen Vorläufe
     Du bist am Zug     Status offen/in Arbeit, Wiedervorlagen von heute,
                        fällige Zwischenstände, was 14 Tage unberührt liegt
     Warten auf andere  Status „wartet auf Dritte", dazu die Nachfassvorschläge
                        aus der Beauftragung
   Jeder Vorgang steht in GENAU EINER Spalte; die Frist gewinnt vor dem Status.

   EIN RADIUS ABWEICHEND, und zwar bewusst: die Übergabe nennt für die
   Vorgangskarte 12 px, sagt aber im gleichen Text „es gibt weiterhin vier
   Radien und keinen fünften". Beides zusammen geht nicht. Es gilt die Regel,
   nicht die Einzelzahl — die Karte liest `--radius-karte`.
   ------------------------------------------------------------ */
.mt-filterzeile {
  display: flex;
  align-items: center;
  gap: var(--raum-2);
  margin-bottom: var(--raum-4);
  flex-wrap: wrap;
}
/* Die Zählzeile steht rechts — „und rechts eine Zählzeile". */
.mt-filter-zahl {
  margin-left: auto;
  font-size: var(--groesse-hinweis);
  color: var(--text-gedimmt);
  font-variant-numeric: tabular-nums;
}
/* Der Dichteschalter steht ganz rechts, hinter der Zählzeile: er ordnet nicht,
   er verdichtet. Zwei Pillen, weil es zwei Zustände sind und ein Wort mehr
   sagt als ein Symbol — „Klartext statt Kürzel". */
.mt-dichte {  display: flex;  gap: var(--raum-1);  flex: none; }
/* ---------- die Tafel: eine Fensterhöhe, nicht beliebig lang ----------

   GEMELDETER MANGEL: „Die Mein-Tag-Übersicht ist grundsätzlich gut, aber da
   braucht es eine Lösung gegen langes Scrollen."

   Vorher wuchsen die drei Spalten nach unten weiter, so weit die Arbeit reicht.
   Bei fünfzehn Karten je Spalte sind das über 4.000 px Seite — und wer unten
   ankommt, sieht die Spaltenköpfe nicht mehr und weiß nicht, in welcher Spalte
   er liest.

   Drei Griffe, gemessen statt geschätzt:

   1. Die TAFEL ist an die Fensterhöhe gebunden, nicht an ihren Inhalt. Jede
      Spalte scrollt für sich. Damit wird die SEITE nie länger als ein Fenster,
      und die drei Spalten bleiben nebeneinander vergleichbar.
   2. Der SPALTENKOPF klebt oben in seiner Spalte und trägt die Anzahl. Man
      weiß beim Scrollen immer, wo man ist und wie viel noch kommt.
   3. Ein DICHTESCHALTER („Ausführlich / Kompakt"). Kompakt lässt an der Karte
      alles weg, was Verlauf ist, und behält, was Handlung ist: Frist, Titel,
      Ort. Gemessen an denselben Daten: Karte 214 px -> 78 px, also knapp
      dreimal so viele Karten je Fensterhöhe. Er überlebt die Sitzung.

   Die abgezogene Höhe ist gerechnet: Kopfleiste 76 + Titelleiste 72 +
   Filterzeile 40 + ihr Rand 16 + Polsterung der Arbeitsfläche 2 x 24 = 252.
   `dvh` statt `vh`, weil auf dem Handy die Adressleiste mitwandert. */
.mt-spalten {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--raum-4);
  align-items: stretch;
  margin-bottom: var(--raum-8);
  height: calc(100dvh - 252px);
  /* Unter etwa 560 px Fensterhöhe wäre die Tafel niedriger als eine einzige
     ausführliche Karte. Dann gewinnt die Karte, und die Seite scrollt wieder —
     das ist besser als eine Spalte, in der nichts ganz zu sehen ist. */
  min-height: 320px;
}
.mt-spalte {
  display: flex;
  flex-direction: column;
  gap: var(--raum-3);
  min-width: 0;
  /* Jede Spalte scrollt für sich. `min-height: 0` ist die Pflichtzeile in einem
     Raster: ohne sie wächst die Spalte über ihre Zelle hinaus, statt zu
     scrollen. */
  min-height: 0;
  overflow-y: auto;
  /* K1: Dieser Behälter scrollt — also gehört die Eigenschaft hierher. */
  overscroll-behavior: contain;
  scrollbar-width: thin;
  /* Platz für die Bildlaufleiste, damit die Karten beim Erscheinen nicht
     springen, und für den Schatten der Karte beim Überfahren. */
  padding-right: var(--raum-1);
}
.mt-spalte-kopf {
  display: flex;
  align-items: center;
  gap: var(--raum-2);
  font-size: var(--groesse-text);
  font-weight: var(--schnitt-fett);
  color: var(--text);
  margin: 0;
  /* Klebt oben in der eigenen Spalte. Die Fläche darunter muss deckend sein,
     sonst scheinen die Karten durch. `--flaeche-seite` ist der Grund, auf dem
     die Ansicht liegt. */
  position: sticky;
  top: 0;
  z-index: 1;
  background: var(--flaeche-seite);
  padding: var(--raum-2) 0;
  border-bottom: 1px solid var(--linie);
}
/* Der Punkt sagt, welcher Art die Spalte ist — und daneben steht das Wort.
   „Klartext statt Kürzel und Farbcodes": der Punkt ist die Zugabe, nicht die
   Aussage. */
.mt-punkt {  width: 8px;  height: 8px;  border-radius: var(--radius-kreis);  flex: none; }
.mt-punkt-frist    {  background: var(--gefahr-text); }
.mt-punkt-zug      {  background: var(--gold); }
.mt-punkt-warten   {  background: var(--st-wartend-linie); }
.mt-spalte-leer {
  padding: var(--raum-5) var(--raum-4);
  border: 1px dashed var(--linie);
  border-radius: var(--radius-karte);
  color: var(--text-gedimmt);
  font-size: var(--groesse-hinweis);
  line-height: var(--zeilenhoehe);
}

/* ---------- die Vorgangskarte ---------- */
.mt-karte {
  display: flex;
  flex-direction: column;
  gap: var(--raum-3);
  padding: var(--raum-4);
  background: var(--flaeche-karte);
  border: 1px solid var(--linie);
  border-top: 3px solid var(--linie-stark);
  border-radius: var(--radius-karte);
  text-align: left;
  min-width: 0;
  /* „Übergänge: 120 ms, ease-out, nur Farbe und Schatten." */
  transition: border-color .12s ease-out, box-shadow .12s ease-out;
}
.mt-karte:hover        {  border-color: var(--gold);  box-shadow: var(--schatten-karte); }
/* Die Karte selbst ist KEIN Knopf. Sie trägt zwei: den Titel und die
   Handlung — und ein Knopf im Knopf ist ungültiges Markup. */
.mt-karte-titel:focus-visible,
.mt-karte-knopf:focus-visible {  outline: 2px solid var(--fokus-rand);  outline-offset: 2px; }
.mt-karte-knopf {  width: 100%;  justify-content: center;  height: 38px;  position: relative; }
/* Der Text steht mittig, der Pfeil rechts am Rand — wie in der Übergabe. Der
   Pfeil ist deshalb aus dem Fluss genommen und an die rechte Kante geheftet,
   sonst schöbe er den Text aus der Mitte. */
.mt-karte-knopf-pfeil {
  position: absolute;
  right: var(--raum-3);
  width: 16px;
  height: 16px;
}
.mt-karte-frist  {  border-top-color: var(--gefahr-text); }
.mt-karte-zug    {  border-top-color: var(--gold); }
/* Die Wartespalte ist ruhiger: vertiefte Fläche, kein Knopf. Wer hier etwas
   tun könnte, steht in einer anderen Spalte. */
.mt-karte-warten {  border-top-color: var(--st-wartend-linie);  background: var(--flaeche-vertieft); }


.mt-karte-kopf {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--raum-2);
}
.mt-karte-frist-zeile {
  font-size: var(--groesse-winzig);
  font-weight: var(--schnitt-fett);
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--text-gedimmt);
}
.mt-karte-frist-zeile.ist-faellig {  color: var(--gefahr-text); }
/* Kommende Frist: der Goldton der Marke, damit ein Termin sich von „Ohne Frist"
   (grau) und von einer abgelaufenen Frist (rot) unterscheidet. */
.mt-karte-frist-zeile.ist-terminiert {  color: var(--gold-text); }
.mt-karte-nummer {
  font-family: var(--schrift-mono);
  font-size: var(--groesse-winzig);
  color: var(--text-deaktiviert);
  flex: none;
}
/* Die Übergabe nennt 16 px. Eine 16-px-Rolle gibt es nicht — der gelieferte
   Wertesatz kennt 11, 12, 13, 14, 19, 26. Es gilt die Regel der Übergabe
   selbst: „kein neuer Wert, sondern die nächstliegende bestehende Rolle."
   Genommen ist `--groesse-abschnitt` (19), nicht `--groesse-text` (14):
   der Kartentitel IST die Überschrift seiner Karte und muss über der
   Objektzeile (13) stehen. Bei 14 wäre die Rangfolge weg. */
.mt-karte-titel {
  font-size: var(--groesse-abschnitt);
  font-weight: var(--schnitt-halb);
  line-height: 1.35;
  color: var(--text);
  margin: 0;
  overflow-wrap: anywhere;
  /* Als Knopf im Fließtext: keine Fläche, kein Rahmen, aber anklickbar. */
  background: none;
  border: 0;
  padding: 0;
  text-align: left;
  font-family: var(--schrift-text);
  cursor: pointer;
}
.mt-karte-titel:hover {  color: var(--gold-text); }
.mt-karte-objekt {
  font-size: var(--groesse-hinweis);
  color: var(--text-gedimmt);
  overflow-wrap: anywhere;
}
/* ---------- der Schrittblock ---------- */
/* Er steht NUR da, wenn ein Schritt benannt ist. Ein leerer goldener Kasten
   mit der Überschrift „Nächster Schritt" behauptet, es gäbe einen. */
.mt-schritt {
  padding: 11px var(--raum-3);
  background: var(--st-aktiv-flaeche);
  border-radius: var(--radius-feld);
}
.mt-schritt-ueber {
  /* Übergabe: 10 px. Kleinste vorhandene Rolle ist 11 (`--groesse-winzig`) —
     gleiche Regel wie beim Kartentitel, kein neuer Wert. */
  font-size: var(--groesse-winzig);
  font-weight: var(--schnitt-fett);
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--gold-text);
  margin-bottom: var(--raum-1);
}
.mt-schritt-text {
  font-size: var(--groesse-text);
  font-weight: var(--schnitt-halb);
  color: var(--text);
  line-height: 1.4;
  overflow-wrap: anywhere;
}
/* Wenn kein Schritt benannt ist, sagt die Karte das — leise, und ohne die
   goldene Fläche, die einem Schritt vorbehalten bleibt. */
.mt-schritt-fehlt {
  font-size: var(--groesse-hinweis);
  color: var(--text-deaktiviert);
  font-style: italic;
}
/* ---------- der Fortschritt ---------- */
.mt-fortschritt {  display: flex;  gap: var(--raum-1);  }
.mt-fortschritt-teil {  height: 4px;  flex: 1;  border-radius: 2px;  background: var(--flaeche-vertieft); }
.mt-fortschritt-teil.erledigt {  background: var(--gold); }
.mt-fortschritt-teil.aktuell  {  background: var(--st-offen-linie); }
.mt-fortschritt-wort {
  font-size: var(--groesse-winzig);
  color: var(--text-deaktiviert);
  font-variant-numeric: tabular-nums;
}
/* ---------- die Wartezeile ---------- */
/* „Erinnerung ging am 11.8. raus" — Klartext statt Uhrensymbol. */
.mt-karte-wartewort {
  font-size: var(--groesse-hinweis);
  color: var(--gold-text);
  overflow-wrap: anywhere;
}
/* ---------- die Kennzahlkarte ---------- */
/* Sie stand bis heute in der Navigationsleiste. Dort war sie 137 px hoch und
   92 px breit — „Wartet auf Dritte" brach in zwei Zeilen um, und die Leiste
   lief unten aus dem Fenster. Die Übergabe sieht sie ohnehin hier vor:
   dunkle Fläche in BEIDEN Modi, Zahl 32 px, Beschriftung 12 px. */
.mt-kennzahlkarte {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(96px, 1fr));
  gap: var(--raum-4);
  padding: var(--raum-5);
  background: var(--flaeche-leiste);
  border-radius: var(--radius-karte);
  margin-bottom: var(--raum-8);
}
.mt-kennzahl-block {  display: flex;  flex-direction: column;  gap: 2px;  min-width: 0; }
.mt-kennzahl-zahl {
  font-family: var(--schrift-mono);
  font-size: 32px;
  font-weight: var(--schnitt-fett);
  line-height: 1.1;
  color: var(--leiste-text);
  font-variant-numeric: tabular-nums;
}
.mt-kennzahl-zahl.ist-null {  color: var(--leiste-text-leise); }
.mt-kennzahl-wort {
  font-size: var(--groesse-klein);
  color: var(--leiste-text-leise);
  overflow-wrap: anywhere;
}

/* ---------- kompakt: die zweite Dichte ----------

   Diese Regeln stehen absichtlich HIER, nach allen `.mt-*`-Regeln darüber, und
   nicht bei der Tafel, wo sie thematisch hingehören. Sie greifen auf `.mt-karte`,
   `.mt-schritt`, `.mt-fortschritt` zu — steht eine Abwandlung vor ihrem
   Grundbaustein, prüft `stilpruefung.js` das unter (c) an. Dass hier die
   Gewichtung ohnehin genügen würde, ist kein Grund: die Reihenfolge soll
   tragen, nicht die Rechnung.

   Was verschwindet, ist kein Zufall. Es bleibt, was zum HANDELN nötig ist: die
   Frist, der Titel, der Ort, das Aktenzeichen. Es geht, was den VERLAUF
   erzählt: der nächste Schritt im Wortlaut, der Fortschrittsbalken, der Grund
   des Wartens, der Knopf — den Vorgang öffnet auch der Titel.

   Weggelassen wird mit `display: none`, nicht mit einem zweiten Kartenbauplan
   im JavaScript. Zwei Bauplaene laufen auseinander: die eine Fassung bekommt
   ein Feld, die andere nicht, und niemand merkt es. So ist es EINE Karte, die
   sich zusammenzieht — und der Schalter wirkt ohne neues Zeichnen. */
.mt-spalten.ist-kompakt .mt-schritt,
.mt-spalten.ist-kompakt .mt-schritt-fehlt,
.mt-spalten.ist-kompakt .mt-fortschritt,
.mt-spalten.ist-kompakt .mt-fortschritt-wort,
.mt-spalten.ist-kompakt .mt-karte-wartewort,
.mt-spalten.ist-kompakt .mt-karte-knopf {  display: none; }
.mt-spalten.ist-kompakt {  gap: var(--raum-3); }
.mt-spalten.ist-kompakt .mt-spalte {  gap: var(--raum-2); }
.mt-spalten.ist-kompakt .mt-karte {  gap: var(--raum-1);  padding: var(--raum-3); }
.mt-spalten.ist-kompakt .mt-karte-titel {  font-size: var(--groesse-text); }

/* ============================================================
   Phase 4 — Ansicht 8 „Einstellungen": die Vorschaukacheln
   ============================================================
   Die Übergabe: „drei Vorschaukacheln (Hell / Dunkel / Nach System), aktive
   Kachel mit 2 px --gold". Der kompakte Umschalter in der Kopfleiste BLEIBT
   ein Segment — dort ist kein Platz für Kacheln, und beide werden weiterhin
   aus derselben Liste (MODUS_STELLUNGEN) gezeichnet.

   Die dritte Kachel zeigt beide Paletten schräg geteilt. Das ist keine
   Verzierung: „Nach System" ist keine Farbe, sondern eine Frage — und eine
   halb/halb geteilte Kachel ist die einzige Vorschau, die das sagen kann.
   ------------------------------------------------------------ */
.modus-kacheln {  display: flex;  gap: var(--raum-3);  flex-wrap: wrap; }
.modus-kachel {
  display: flex;
  flex-direction: column;
  gap: var(--raum-2);
  padding: var(--raum-2);
  background: var(--flaeche-karte);
  border: 2px solid var(--linie);
  border-radius: var(--radius-karte);
  cursor: pointer;
  font-family: var(--schrift-text);
  transition: border-color .12s ease-out;
}
.modus-kachel:hover         {  border-color: var(--gold); }
.modus-kachel:focus-visible {  outline: 2px solid var(--fokus-rand);  outline-offset: 2px; }
.modus-kachel[aria-pressed="true"] {  border-color: var(--gold); }
.modus-kachel-bild {
  position: relative;
  width: 116px;
  height: 74px;
  border-radius: var(--radius-feld);
  overflow: hidden;
  /* Der Rahmen sitzt innen, damit die helle Kachel auf weißem Grund nicht
     randlos verschwimmt. */
  box-shadow: inset 0 0 0 1px var(--linie);
}
.modus-kachel-bild-hell   {  background: var(--vorschau-hell-flaeche); }
.modus-kachel-bild-dunkel {  background: var(--vorschau-dunkel-flaeche); }
/* Nach System: links hell, rechts dunkel, schräg getrennt. */
.modus-kachel-bild-system {
  background: linear-gradient(114deg,
    var(--vorschau-hell-flaeche) 0 49.4%,
    var(--vorschau-dunkel-flaeche) 50.6% 100%);
}
/* Die Andeutung einer Oberfläche: Leiste links, Karte rechts, goldene Zeile.
   Gold ist in beiden Modi derselbe Wert, deshalb liest der Strich `--gold`. */
.modus-kachel-leiste {
  position: absolute; left: 0; top: 0; bottom: 0; width: 22px;
  background: var(--vorschau-dunkel-flaeche);
}
.modus-kachel-karte {
  position: absolute; left: 30px; right: 8px; top: 12px; height: 22px;
  border-radius: 3px;
}
.modus-kachel-karte-hell   {  background: var(--vorschau-hell-karte); }
.modus-kachel-karte-dunkel {  background: var(--vorschau-dunkel-karte); }
.modus-kachel-strich {
  position: absolute; left: 30px; top: 42px; width: 42px; height: 6px;
  border-radius: 3px; background: var(--gold);
}
.modus-kachel-wort {
  font-size: var(--groesse-hinweis);
  font-weight: var(--schnitt-halb);
  color: var(--text-zweit);
  text-align: center;
}
.modus-kachel[aria-pressed="true"] .modus-kachel-wort {  color: var(--text); }

/* ============================================================
   Phase 4 — Ansicht 7 „Fristen und Termine"
   ============================================================
   Übergabe: `1fr 340px`. Links nach Wochen gruppiert, je Eintrag eine Karte
   mit 4-px-Kante links in der Artfarbe, einem 58-px-Datumsblock (Tag 20 px /
   700, Monat 11 px), Titel 15 px / 600, Ort 13 px und rechts ein Art-Abzeichen.

   NICHT gebaut ist die rechte Liste „gesetzliche Fristen", und der Grund gehört
   hierher: LV führt an keiner Frist ein Merkmal, das sie als gesetzlich
   ausweist. Welche der Fristen eine Rechtsfolge trägt, wäre eine rechtliche
   Einordnung — die trifft nicht die Stilvorlage. Rechts steht deshalb, was
   belegbar ist: das Kalender-Abo und der Weg zu „Abläufe und Gültigkeiten",
   wo die Vertragsstichtage und wiederkehrenden Fristen schon liegen.
   ------------------------------------------------------------ */
.frist-flaeche {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 340px;
  gap: var(--raum-6);
  align-items: start;
}
.frist-spalte-rechts {  display: flex;  flex-direction: column;  gap: var(--raum-4);  position: sticky;  top: var(--raum-5); }
/* Die Wochenüberschrift trägt ihren Zeitraum: „Diese Woche · 10. bis 16. August".
   Ein „Diese Woche" ohne Datum ist beim zweiten Hinsehen wieder eine Frage. */
.frist-woche-spanne {
  font-size: var(--groesse-hinweis);
  font-weight: var(--schnitt-normal);
  color: var(--text-gedimmt);
  letter-spacing: 0;
  text-transform: none;
}
.frist-karte-zeile {
  display: grid;
  grid-template-columns: 58px minmax(0, 1fr) auto;
  gap: var(--raum-3);
  align-items: center;
  width: 100%;
  padding: var(--raum-3) var(--raum-4);
  margin-bottom: var(--raum-2);
  background: var(--flaeche-karte);
  border: 1px solid var(--linie);
  border-left: 4px solid var(--linie-stark);
  border-radius: var(--radius-karte);
  text-align: left;
  cursor: pointer;
  font-family: var(--schrift-text);
  transition: border-color .12s ease-out, box-shadow .12s ease-out;
}
.frist-karte-zeile:hover         {  border-color: var(--gold);  box-shadow: var(--schatten-karte); }
.frist-karte-zeile:focus-visible {  outline: 2px solid var(--fokus-rand);  outline-offset: 2px; }
/* Die Kante links trägt die Art. Dieselben Farben wie die Abzeichen der Art,
   damit Kante und Abzeichen dasselbe sagen. */
.frist-karte-zeile.ist-ueberfaellig    {  border-left-color: var(--gefahr-text); }
.frist-karte-zeile.ist-heute           {  border-left-color: var(--gold); }
.frist-karte-zeile.ist-wartend         {  border-left-color: var(--st-wartend-linie); }
.frist-datum-block {  display: flex;  flex-direction: column;  align-items: center;  gap: 0; }
.frist-datum-tag {
  font-family: var(--schrift-mono);
  font-size: 20px;
  font-weight: var(--schnitt-fett);
  line-height: 1.1;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}
.frist-datum-monat {
  font-size: var(--groesse-winzig);
  font-weight: var(--schnitt-halb);
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--text-gedimmt);
}
.frist-karte-zeile.ist-ueberfaellig .frist-datum-tag,
.frist-karte-zeile.ist-ueberfaellig .frist-datum-monat {  color: var(--gefahr-text); }
.frist-karte-mitte {  display: flex;  flex-direction: column;  gap: 2px;  min-width: 0; }
.frist-karte-titel {
  font-size: var(--groesse-text);
  font-weight: var(--schnitt-halb);
  color: var(--text);
  line-height: 1.35;
  overflow-wrap: anywhere;
}
.frist-karte-ort {
  font-size: var(--groesse-hinweis);
  color: var(--text-gedimmt);
  overflow-wrap: anywhere;
}

/* ============================================================
   Phase 4 — Ansicht 3 „Vorgang (Detail)": der geführte Ablauf
   ============================================================
   Die Übergabe nennt diese Ansicht „das Herzstück". Drei Zustände, drei Formen:

     erledigt   24-px-Kreis in `--st-erledigt-flaeche` mit Haken, Text
                `--text-zweit`, rechts der Zeitstempel
     aktuell    aufgeklappt auf `--st-aktiv-flaeche`, Nummer im goldenen Kreis,
                Titel eine Stufe größer, Frist rechts, darunter Hauptknopf und
                die Vorschau des nächsten Schrittes
     kommend    leerer Kreis mit Nummer, Text `--text-gedimmt`

   DIESE REGELN STEHEN AM ENDE DER DATEI, und das ist kein Zufall: `.ablauf-offen`
   enthält `.aufgabe-frist-zeile`, `.aufgabe-fristen-opt` und `.aufgabe-richtwert`
   aus dem Block weiter oben. Eine Abwandlung vor ihrem Grundbaustein prüft
   `stilpruefung.js` unter (c) an — und sie wäre wirkungslos.

   ZWEI ABWEICHUNGEN von der Übergabe, beide mit Grund:
   * Der Fortschrittsbalken ist NICHT 140 px fest, sondern `flex: 1` bis maximal
     140. Er sitzt in der Akte, nicht auf einer freien Fläche; bei 340 px Spalte
     stünde ein fester Balken über den Rand.
   * Der Titel des aktuellen Schrittes liest `--groesse-abschnitt` (19 px), nicht
     die genannten 17. Ein 17-px-Rollenwert existiert im Wertesatz nicht, und die
     Übergabe sagt: fehlt ein Wert, gilt die NÄCHSTE vorhandene Rolle, kein
     neuer Wert. Die nächste ist 19.
   ------------------------------------------------------------ */
.ablauf {  display: flex;  flex-direction: column;  gap: var(--raum-1); }
.ablauf-kopf {
  display: flex;
  align-items: center;
  gap: var(--raum-3);
  padding-bottom: var(--raum-2);
  margin-bottom: var(--raum-2);
  border-bottom: 1px solid var(--linie);
}
.ablauf-kopf-wort {
  font-size: var(--groesse-hinweis);
  color: var(--text-zweit);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.ablauf-balken {
  flex: 1 1 auto;
  max-width: 140px;
  height: 4px;
  border-radius: 2px;
  background: var(--flaeche-vertieft);
  overflow: hidden;
}
.ablauf-balken-fuell {  display: block;  height: 100%;  background: var(--gold); }

.ablauf-schritt {
  border-radius: var(--radius-klein);
  /* „Übergänge: 120 ms, ease-out, nur Farbe und Schatten." */
  transition: background .12s ease-out, border-color .12s ease-out;
}
.ablauf-zeile {
  display: flex;
  align-items: center;
  gap: var(--raum-3);
  min-height: 34px;
  padding: var(--raum-1) var(--raum-2);
}
/* Der Kreis IST das Kästchen. Das Kästchen selbst ist unsichtbar, aber nicht
   weg: LV lässt Schritte in beliebiger Reihenfolge abhaken, und wer mit der
   Tastatur arbeitet, braucht es. Deshalb `clip-path` statt `display: none` —
   ein ausgeblendetes Feld ist nicht mehr fokussierbar. */
.ablauf-kreis {
  position: relative;
  flex: none;
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-kreis);
  cursor: pointer;
  margin: 0;
}
.ablauf-kreis input {
  position: absolute;
  width: 24px;
  height: 24px;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}
.ablauf-kreis:focus-within {  outline: 2px solid var(--fokus-rand);  outline-offset: 2px; }
.ablauf-kreis-zeichen {
  font-size: var(--groesse-klein);
  font-weight: var(--schnitt-fett);
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.ablauf-wort {
  flex: 1;
  min-width: 0;
  font-size: var(--groesse-bedien);
  overflow-wrap: anywhere;
}
.ablauf-zeit {
  flex: none;
  font-size: var(--groesse-klein);
  color: var(--text-gedimmt);
  font-variant-numeric: tabular-nums;
}
.ablauf-zeit.ist-ueberfaellig {  color: var(--gefahr-text); }
.ablauf-offen {  padding: 0 var(--raum-2) var(--raum-2); }
.ablauf-handlung {
  display: flex;
  align-items: center;
  gap: var(--raum-3);
  flex-wrap: wrap;
  /* Auf die Textkante des Schrittes ausgerichtet: 8 (Polsterung der Zeile)
     + 24 (Kreis) + 12 (Lücke) = 44, minus die 8, die `.ablauf-offen` schon
     mitbringt. */
  margin: var(--raum-2) 0 0 36px;
}
.ablauf-naechster {
  font-size: var(--groesse-klein);
  color: var(--text-gedimmt);
  overflow-wrap: anywhere;
}

/* ---------- erledigt ---------- */
.ablauf-schritt.ist-erledigt .ablauf-kreis {
  background: var(--st-erledigt-flaeche);
  border: 1px solid var(--st-erledigt-linie);
}
.ablauf-schritt.ist-erledigt .ablauf-kreis-zeichen {  color: var(--st-erledigt-text); }
/* Kein Durchstreichen. Es war vorher da und ist bewusst weg: durchgestrichener
   Text ist schwerer zu lesen als leiser Text, und erledigte Schritte werden
   gelesen — man prüft an ihnen, was schon geschehen ist. Der Haken und der
   Zeitstempel sagen dasselbe, ohne die Schrift zu beschädigen. */
.ablauf-schritt.ist-erledigt .ablauf-wort {  color: var(--text-zweit); }

/* ---------- der aktuelle ---------- */
/* KEIN Rahmen im Ruhezustand, und das ist gelesen statt gewählt: die Übergabe
   sagt zum aktuellen Schritt nur „liegt auf `--st-aktiv-flaeche`" — von einem
   Rahmen steht dort nichts. Ich hatte zuerst `--st-aktiv-linie` geschrieben;
   diese Rolle gibt es nicht (der Zustand „aktiv" führt Fläche und Schrift, keine
   Linie), und die Übergabe verbietet neue Werte. Der durchsichtige Rahmen hält
   nur den Platz, damit das Überfahren nichts verschiebt — genau das schließt die
   Übergabe aus. */
.ablauf-schritt.ist-aktuell {
  background: var(--st-aktiv-flaeche);
  border: 1px solid transparent;
  padding: var(--raum-2) 0;
}
.ablauf-schritt.ist-aktuell .ablauf-kreis {  background: var(--gold); }
.ablauf-schritt.ist-aktuell .ablauf-kreis-zeichen {  color: var(--text-auf-gold); }
.ablauf-schritt.ist-aktuell .ablauf-wort {
  font-size: var(--groesse-abschnitt);
  font-weight: var(--schnitt-fett);
}

/* ---------- kommend ---------- */
.ablauf-schritt.ist-kommend .ablauf-kreis {  border: 1px solid var(--linie-stark); }
.ablauf-schritt.ist-kommend .ablauf-kreis-zeichen,
.ablauf-schritt.ist-kommend .ablauf-wort {  color: var(--text-gedimmt); }
/* Kommende Schritte tragen ihre Fristzeile leiser: sie ist bedienbar, aber sie
   soll nicht mit dem aktuellen Schritt um Aufmerksamkeit streiten. */
.ablauf-schritt.ist-kommend .ablauf-offen {  padding-bottom: var(--raum-1); }
/* Überfahren: `--gold` als Rahmen, keine Verschiebung, kein transform. */
.ablauf-schritt:hover {  background: var(--flaeche-ueberfahren); }
.ablauf-schritt.ist-aktuell:hover {  background: var(--st-aktiv-flaeche);  border-color: var(--gold); }

/* ============================================================
   Phase 4 — Ansicht 5 „Objektakte": Kopfkarte, Reiter, Einheiten
   ============================================================
   Am Ende der Datei, nach `.objekt-kopf`, `.kennzahl-wert` und `.abzeichen`,
   auf die diese Regeln zugreifen — siehe (c) in `stilpruefung.js`.

   DREI ABWEICHUNGEN von der Übergabe, alle drei mit Grund:
   * Der „Bildplatz 120 × 84" trägt kein Bild, sondern das Kürzel des Objekts.
     LV führt zu einem Objekt kein Foto; ein Rahmen, der nie gefüllt wird,
     behauptet eine Funktion.
   * Die Übergabe nennt drei Kennzahlen, LV hat sechs, die alle etwas Echtes
     zählen. Die drei genannten stehen vorn, die übrigen bleiben.
   * Die Einheitentabelle hat drei Spalten (70px 1fr 120px), nicht vier: einen
     „Status" führt LV an der Einheit nicht. Das Abzeichen sagt, was da ist —
     bewohnt oder unbewohnt.
   ------------------------------------------------------------ */
.objekt-marke {
  flex: none;
  width: 120px;
  height: 84px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-klein);
  background: var(--flaeche-vertieft);
  border: 1px solid var(--linie);
  color: var(--text-zweit);
  /* `--schrift-titel` hatte ich hier stehen; die Rolle gibt es nicht. Gefunden
     hat es nicht die Stilprüfung, sondern die Wache „Stilvorlagen stimmig" im
     k1-Sammellauf — sie prüft, ob jede benutzte Rolle auch erklärt ist. Die
     Schriftrollen heißen `--schrift-text`, `--schrift-display`, `--schrift-mono`;
     für ein großes Merkzeichen ist `--schrift-display` die richtige. */
  font-family: var(--schrift-display);
  font-size: var(--groesse-abschnitt);
  font-weight: var(--schnitt-fett);
  text-align: center;
  overflow-wrap: anywhere;
  padding: var(--raum-2);
}
/* „Adresse 24 px / 700" — einen 24-px-Rollenwert gibt es im Wertesatz nicht.
   Die nächste vorhandene Rolle ist `--groesse-titel` (26 px); die Übergabe sagt
   für diesen Fall ausdrücklich: nächste vorhandene Rolle, kein neuer Wert. */
.objekt-kopf h2 {
  margin: 0;
  font-size: var(--groesse-titel);
  font-weight: var(--schnitt-fett);
}
/* „Zahl 22 px / 700" — auch 22 gibt es nicht. Nächste Rolle: 19. */
.objekt-kopf .kennzahl-wert {
  font-size: var(--groesse-abschnitt);
  font-weight: var(--schnitt-fett);
}
.objekt-reiter {
  display: flex;
  align-items: center;
  gap: var(--raum-2);
  flex-wrap: wrap;
  margin-bottom: var(--raum-4);
}
/* Die Pille „Überblick" ist die Seite, auf der man steht: sie ist aktiv und
   führt nirgendwohin. `disabled` allein würde sie ausgrauen — hier soll sie
   markiert sein, nicht abgeschaltet aussehen. */
.objekt-reiter .pille.aktiv[disabled] {  cursor: default;  opacity: 1; }

/* Der Umschaltpunkt unten fragt nach der Breite des BEHÄLTERS, nicht des
   Fensters: dieselbe Tabelle steht in einer 328-px-Spalte der Objektakte und
   könnte morgen über die volle Breite stehen. Ein Fenstermaß würde beide
   gleich behandeln und läge in einem der beiden Fälle falsch. */
.einheit-tabelle {  display: flex;  flex-direction: column;  container-type: inline-size; }
/* GEMESSEN, und daraus folgt die Umschaltung: in der 328 px breiten Spalte der
   Objektakte bleiben nach 70 (Einheit) + 120 (Abzeichen) + 2 x 12 (Lücken) nur
   102 px für den Namen. „FRD Wohnkonzept GmbH - Sascha Falk" brach dort auf
   126 px Höhe um, sechs Zeilen für eine Zeile Auskunft. Die Übergabe rechnet
   ihre Tabelle in einer 1fr-Spalte neben 340 px — also mit dem Doppelten.
   Unter 420 px Behälterbreite stapelt die Zeile deshalb: Einheit und Abzeichen
   oben, der Name darunter über die ganze Breite. Drei Spalten, die nicht
   passen, sind keine Tabelle mehr. */
.einheit-kopf,
.einheit-zeile {
  display: grid;
  grid-template-columns: 70px minmax(0, 1fr) 120px;
  gap: var(--raum-3);
  align-items: center;
}
@container (max-width: 420px) {
  .einheit-kopf {  display: none; }
  .einheit-zeile {
    grid-template-columns: 70px minmax(0, 1fr);
    row-gap: var(--raum-1);
  }
  .einheit-zeile .abzeichen {  grid-column: 2;  grid-row: 1;  justify-self: end; }
  .einheit-bewohner {  grid-column: 1 / -1;  grid-row: 2; }
}
.einheit-kopf {
  padding: 0 var(--raum-2) var(--raum-1);
  border-bottom: 1px solid var(--linie);
  font-size: var(--groesse-winzig);
  font-weight: var(--schnitt-halb);
  letter-spacing: .8px;
  text-transform: uppercase;
  color: var(--text-gedimmt);
}
.einheit-zeile {
  min-height: var(--hoehe-zeile);
  padding: var(--raum-1) var(--raum-2);
  border-bottom: 1px solid var(--linie);
  border-radius: var(--radius-klein);
  transition: background .12s ease-out;
}
.einheit-zeile:hover {  background: var(--flaeche-ueberfahren); }
.einheit-nr {
  font-family: var(--schrift-mono);
  font-size: var(--groesse-hinweis);
  color: var(--text-zweit);
}
.einheit-bewohner {  font-size: var(--groesse-bedien);  overflow-wrap: anywhere; }

/* Der Satz an der Ablagefläche. Er steht unter dem Ziehen-oder-Auswählen und
   sagt, was LV mit der Datei tut — und was nicht. Warum er anders lautet als in
   der Übergabe, steht als Kommentar an der Stelle in index.html. */
.doku-dropzone-satz {
  margin: 0 0 var(--raum-3);
  font-size: var(--groesse-hinweis);
  line-height: var(--zeilenhoehe);
  color: var(--text-gedimmt);
  max-width: 62ch;
}

/* ============================================================
   Phase 4 — Ansicht 8 „Einstellungen": 230px 1fr
   ============================================================
   Fünfzehn Blöcke, gestapelt: wer „Eigenvergabe-Schwelle" sucht, scrollt an
   vierzehn anderen vorbei. Links steht deshalb ein Verzeichnis, das aus den
   Überschriften gelesen wird (einstellIndexZeichnen in app.js) — es klebt am
   oberen Rand, damit es beim Scrollen durch die Blöcke stehen bleibt.

   Es sind ANKER, keine Reiter. Ein Reitersatz würde vierzehn Blöcke verbergen,
   und dann findet man durch Suchen im Browser (Strg+F) nichts mehr. Die
   Übergabe sagt „links Abschnitte, rechts Karten" — das ist beides erfüllt,
   ohne etwas zu verstecken.
   ------------------------------------------------------------ */
.einstell-flaeche {
  display: grid;
  grid-template-columns: 230px minmax(0, 1fr);
  gap: var(--raum-6);
  align-items: start;
}
.einstell-index {
  display: flex;
  flex-direction: column;
  gap: 2px;
  position: sticky;
  top: calc(var(--hoehe-kopfleiste) + var(--raum-4));
  max-height: calc(100dvh - var(--hoehe-kopfleiste) - var(--raum-8));
  overflow-y: auto;
  /* K1: Dieser Behälter scrollt — also gehört die Eigenschaft hierher. */
  overscroll-behavior: contain;
  scrollbar-width: thin;
}
.einstell-index-punkt {
  display: block;
  width: 100%;
  padding: var(--raum-2) var(--raum-3);
  border: 1px solid transparent;
  border-radius: var(--radius-feld);
  background: transparent;
  color: var(--text-zweit);
  font-family: var(--schrift-text);
  font-size: var(--groesse-hinweis);
  font-weight: var(--schnitt-halb);
  text-align: left;
  cursor: pointer;
  /* „Übergänge: 120 ms, ease-out, nur Farbe und Schatten." */
  transition: background .12s ease-out, color .12s ease-out, border-color .12s ease-out;
}
/* „Überfahren: Karten und Zeilen bekommen --gold als Rahmen; keine
   Verschiebung, kein transform." */
.einstell-index-punkt:hover {  border-color: var(--gold);  color: var(--text); }
.einstell-index-punkt:focus-visible {  outline: 2px solid var(--fokus-rand);  outline-offset: 2px; }
.einstell-index-punkt.aktiv {
  background: var(--st-aktiv-flaeche);
  color: var(--gold-text);
}
.einstell-blocks {  min-width: 0; }
/* Unter 1000 px steht das Verzeichnis über den Blöcken statt daneben — 230 px
   von 700 wären ein Drittel der Fläche für ein Inhaltsverzeichnis. */
@media (max-width: 1000px) {
  .einstell-flaeche {  grid-template-columns: 1fr; }
  .einstell-index {  position: static;  flex-direction: row;  flex-wrap: wrap;  max-height: none; }
  .einstell-index-punkt {  width: auto; }
}

/* ============================================================
   Themen (14.08.2026) — die Merkliste eines Objekts
   ============================================================
   Was ansteht, bevor es eine Akte ist. Die Karte trägt vier Auskünfte und
   sonst nichts: Stand, Objekt, das Thema selbst und wie viel Arbeit schon
   daran hängt.

   Am Ende der Datei, nach `.abzeichen` und `.knopf`, auf die sie zugreift —
   `stilpruefung.js` prüft unter (c), ob eine Abwandlung vor ihrem
   Grundbaustein steht.
   ------------------------------------------------------------ */
.thema-karte {
  display: flex;
  flex-direction: column;
  gap: var(--raum-2);
  padding: var(--raum-4);
  margin-bottom: var(--raum-3);
  background: var(--flaeche-karte);
  border: 1px solid var(--linie);
  /* Die Kante links sagt den Stand noch einmal in Farbe — das Abzeichen sagt
     ihn im Klartext. Farbe ist hier die Zugabe, nicht die Aussage. */
  border-left: 3px solid var(--st-offen-linie);
  border-radius: var(--radius-karte);
  /* „Übergänge: 120 ms, ease-out, nur Farbe und Schatten." */
  transition: border-color .12s ease-out, box-shadow .12s ease-out;
}
/* „Überfahren: Karten und Zeilen bekommen --gold als Rahmen; keine
   Verschiebung, kein transform." */
.thema-karte:hover {  border-color: var(--gold);  box-shadow: var(--schatten-karte); }
.thema-karte.ist-ruht     {  border-left-color: var(--st-wartend-linie); }
.thema-karte.ist-erledigt {  border-left-color: var(--st-erledigt-linie);  background: var(--flaeche-vertieft); }
.thema-kopf {
  display: flex;
  align-items: center;
  gap: var(--raum-3);
  flex-wrap: wrap;
}
.thema-objekt {
  font-size: var(--groesse-hinweis);
  color: var(--text-gedimmt);
  overflow-wrap: anywhere;
}
.thema-zeit {
  margin-left: auto;
  font-size: var(--groesse-klein);
  color: var(--text-gedimmt);
  font-variant-numeric: tabular-nums;
}
/* Der Titel ist ein Knopf, weil er etwas tut (öffnet den Dialog) — aber er
   sieht aus wie eine Überschrift, weil er eine ist. */
.thema-titel {
  border: 0;
  background: none;
  padding: 0;
  text-align: left;
  font-family: var(--schrift-display);
  font-size: var(--groesse-abschnitt);
  font-weight: var(--schnitt-fett);
  color: var(--text);
  cursor: pointer;
  overflow-wrap: anywhere;
}
.thema-titel:hover {  color: var(--gold-text); }
.thema-titel:focus-visible {  outline: 2px solid var(--fokus-rand);  outline-offset: 2px; }
.thema-notiz {
  margin: 0;
  font-size: var(--groesse-bedien);
  line-height: var(--zeilenhoehe);
  color: var(--text-zweit);
  white-space: pre-line;
  max-width: 78ch;
}
.thema-fuss {
  display: flex;
  align-items: center;
  gap: var(--raum-3);
  flex-wrap: wrap;
  margin-top: var(--raum-1);
}
.thema-arbeit {
  font-size: var(--groesse-hinweis);
  color: var(--text-zweit);
}
.thema-arbeit.ist-offen {  color: var(--gold-text);  font-weight: var(--schnitt-halb); }
/* Ein Thema ohne Vorgang ist der Normalfall, nicht ein Mangel — also leise. */
.thema-arbeit-leer {  color: var(--text-gedimmt);  font-style: italic; }
.thema-knoepfe {  display: flex;  gap: var(--raum-2);  margin-left: auto;  flex-wrap: wrap; }

/* Die Zeile unter der Vorgangsliste: was „Aktuell" nicht zeigt (14.08.2026).
   Leise, aber nicht versteckt — sie ist die Gegenleistung dafür, dass die Liste
   still kürzen darf. */
.vg-abgelegt {
  display: flex;
  align-items: center;
  gap: var(--raum-3);
  flex-wrap: wrap;
  margin: var(--raum-4) 0 0;
  padding: var(--raum-3) var(--raum-4);
  border-top: 1px solid var(--linie);
  font-size: var(--groesse-hinweis);
  color: var(--text-gedimmt);
}

/* Die Themenzeile im Kopf der Akte: Auswahl und „Neu …" nebeneinander, die
   Auswahl nimmt den Rest. Ohne diese Zeile stapelten sich beide untereinander
   (das `dd` ist ein Block) und die Auswahl war 114 px breit — für einen Titel
   wie „Dämmen der Kaltwasserleitungen im Keller" unbrauchbar. */
/* UMLAUF, und zwar zwingend: seit die Zeile zusätzlich sagt, WIE der Vorgang
   geführt wird (Marke + Knopf), standen vier Dinge nebeneinander und das
   Auswahlfeld war auf 30 px zusammengedrückt — im Bild stand dort „ZZ-Prü".
   Derselbe Fehler wie beim ersten Bau der Zeile, nur eine Stufe später. Mit
   `1 1 220px` behält die Auswahl ihre Lesbarkeit und der Rest rutscht in die
   zweite Reihe, statt ihr die Breite zu nehmen. */
.vorgang-thema-zeile {
  display: flex;
  align-items: center;
  gap: var(--raum-2);
  flex-wrap: wrap;
  min-width: 0;
}
.vorgang-thema-zeile select {  flex: 1 1 220px;  min-width: 0; }
.vorgang-thema-zeile .knopf {  flex: none; }
.vorgang-thema-zeile .thema-nur-marke {  flex: none; }

/* Die Vorgänge AN einem Thema, auf der Karte (14.08.2026).
   Sie stehen hier nicht als Schmuck: seit ein Vorgang „nur unter dem Thema"
   geführt werden kann, ist diese Liste der einzige Ort, an dem er noch in
   einer Liste steht. Deshalb dieselbe Bauart wie die Zeilen der Objektakte —
   wer sie dort bedient hat, bedient sie hier auch. */
.thema-vorgaenge {
  display: flex;
  flex-direction: column;
  border-top: 1px solid var(--linie);
  padding-top: var(--raum-2);
}
.thema-vorgang {
  display: flex;
  align-items: baseline;
  gap: var(--raum-2);
  flex-wrap: wrap;
  padding: var(--raum-1) var(--raum-2);
  font-size: var(--groesse-bedien);
  border-radius: var(--radius-klein);
  transition: background-color .12s ease-out;
}
.thema-vorgang.klickbar {  cursor: pointer; }
.thema-vorgang.klickbar:hover {  background: var(--st-aktiv-flaeche); }
.thema-vorgang:focus-visible {  outline: 2px solid var(--fokus-rand);  outline-offset: 2px; }
/* „nur hier" — der Vorgang steht in keiner anderen Liste. Klartext statt
   Farbcode, und leise: es ist eine Auskunft über die Führung, keine Warnung. */
.thema-nur-marke {
  padding: 0 var(--raum-2);
  border: 1px solid var(--linie);
  border-radius: var(--radius-klein);
  background: var(--flaeche-vertieft);
  color: var(--text-zweit);
  font-size: var(--groesse-winzig);
  white-space: nowrap;
}

/* Die Wiedervorlage im Kopf der Themenkarte (14.08.2026). Leise, solange der
   Tag in der Zukunft liegt — und deutlich, sobald er da ist: dann ist sie der
   Grund, warum das Thema unter „Mein Tag" steht. Klartext, kein Farbcode
   allein: „Wiedervorlage 20.08.2026" sagt es auch ohne die Farbe. */
.thema-wv {
  font-size: var(--groesse-klein);
  color: var(--text-gedimmt);
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}
.thema-wv.ist-faellig {  color: var(--gold-text);  font-weight: var(--schnitt-halb); }

/* Zusammenführung im Kopf der Akte (25.08.2026).
   Zwei Richtungen, ein Aussehen: „hierher zusammengeführt" ist eine Auskunft,
   „dieser Vorgang ist aufgegangen" eine Warnung. Deshalb dieselbe Form, aber
   die Quelle in der Meldefarbe — wer hier landet und weiterarbeitet, arbeitet
   am falschen Ort, und das muss man sehen, bevor man tippt. */
.akte-zusammen-hinweis {
  display: flex;
  align-items: center;
  gap: var(--raum-2);
  flex-wrap: wrap;
  margin: 0 0 var(--raum-3);
  padding: var(--raum-3) var(--raum-4);
  border: 1px solid var(--linie);
  border-radius: var(--radius-feld);
  background: var(--flaeche-vertieft);
  color: var(--text-zweit);
  font-size: var(--groesse-hinweis);
}
.akte-zusammen-hinweis.ist-quelle {
  border-color: var(--melden-hinweis);
  background: var(--st-aktiv-flaeche);
  color: var(--text);
}

/* Blättern im Betrachter (25.08.2026). Zwischen Dateinamen und Aktionen, weil
   es zum Ort gehört und nicht zum Tun: „3 von 12" beantwortet dieselbe Frage
   wie der Name darüber — wo bin ich. */
.viewer-blaettern {
  display: flex;
  align-items: center;
  gap: var(--raum-2);
  flex: none;
}
.viewer-position {
  color: var(--text-gedimmt);
  font-size: var(--groesse-hinweis);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* ===== A: Anmeldung und Konten ===== */
/* Der Schleier liegt ueber ALLEM, auch ueber den Dialogen (hoechster Bestand:
   4000) - eine abgelaufene Sitzung soll keinen halb offenen Dialog freilegen. */
.anmeldung-schleier {
  position: fixed;
  inset: 0;
  z-index: 5000;
  display: grid;
  place-items: center;
  background: var(--flaeche-seite);
}
.anmeldung-karte {
  width: min(92vw, 380px);
  background: var(--flaeche-karte);
  border: 1px solid var(--linie);
  border-radius: 12px;
  padding: 26px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.anmeldung-karte h1 {
  margin: 0;
  font-size: 21px;
}
.anmeldung-karte label {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 13px;
  color: var(--text-zweit);
}
.anmeldung-fehler {
  color: var(--gefahr-text);
  margin: 0;
  min-height: 1.2em;
}

.konten-block {
  margin-top: 18px;
}
.konten-block h2 {
  margin: 0 0 8px;
  font-size: 16px;
}
.konten-zeile {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid var(--linie);
  flex-wrap: wrap;
}
.konten-zeile.konten-aus {
  opacity: .55;
}
.konten-name {
  font-weight: 600;
}
.konten-meta {
  color: var(--text-gedimmt);
  font-size: 12px;
  margin-top: 2px;
}
.konten-knoepfe {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.schluessel-frisch {
  margin: 10px 0;
  padding: 12px;
  background: var(--flaeche-vertieft);
  border: 1px solid var(--linie-stark);
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: flex-start;
}
/* user-select: all - ein Klick markiert den ganzen Schluessel. Er wird genau
   einmal angezeigt; wer den Kopierknopf verfehlt, soll ihn nicht muehsam
   zeichenweise markieren muessen. */
.schluessel-wert {
  word-break: break-all;
  user-select: all;
  font-size: 13px;
}

/* ===== B: Aufgaben ===== */
.aufgaben-neu {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin: 12px 0 16px;
}
/* Der Text traegt die Zeile, Datum und Objekt sind Beiwerk - deshalb waechst
   nur das Textfeld. 220px Mindestbreite wie bei .vorgang-thema-zeile select:
   darunter wird Tippen zur Zumutung. */
.aufgaben-neu input[type="text"], .aufgaben-neu #auf-neu-text {
  flex: 1 1 220px;
}
.aufgabe-zeile {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 0;
  border-bottom: 1px solid var(--linie);
}
.aufgabe-zeile.ist-erledigt .aufgabe-titel {
  color: var(--text-gedimmt);
  text-decoration: line-through;
}
.aufgabe-haken {
  margin-top: 3px;
  flex: 0 0 auto;
}
.aufgabe-mitte {
  flex: 1 1 auto;
  min-width: 0;
}
.aufgabe-titel {
  font-weight: 600;
}
.aufgabe-meta {
  color: var(--text-gedimmt);
  font-size: 12px;
  margin-top: 2px;
}
.aufgabe-akte {
  color: var(--gold-text);
}
.aufgabe-frist {
  white-space: nowrap;
}
.aufgabe-frist.ist-faellig {
  color: var(--gefahr-text);
  font-weight: 600;
}
.aufgabe-knoepfe {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  flex: 0 0 auto;
}