/* ============================================================
   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; }
/* T1 (31.08.2026): Sicherheitsabstaende im Vollbildmodus.
   Seit `viewport-fit=cover` in index.html zieht iOS die Seite bis unter die
   Rundungen, die Kamerainsel und den Streifen fuer die Wischgeste — ohne diese
   Regel liegt links und rechts Inhalt unter der Gehaeusekante. Die beiden
   Angaben gehoeren zusammen: `cover` ohne env() ist schlechter als beides
   weglassen, weil dann etwas verdeckt wird statt nur Platz zu fehlen.
   Am Rumpf und nicht an .content, damit auch Seitenleiste und Kopfzeile es
   erben; die einzelnen `env(safe-area-inset-bottom)` weiter unten bleiben,
   sie betreffen feste Leisten und sind davon nicht beruehrt. */
.app {
  padding-left: env(safe-area-inset-left, 0px);
  padding-right: env(safe-area-inset-right, 0px);
}
@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); }
/* P8: 120 → 200. Mit auto-fill entscheidet dieser eine Wert die Kachelgrösse:
   das Raster legt so viele Spalten nebeneinander, wie mit dieser Mindestbreite
   hineinpassen, und verteilt den Rest. Bei 1160 px Inhaltsbreite waren das
   neun Spalten à 122 px; mit 200 sind es fünf à rund 224 px — knapp die
   doppelte Kantenlänge, die vierfache Fläche.
   Das Seitenverhältnis der Vorschau steht in style.css bei .datei-kachel img. */
.datei-raster {  display: grid;  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));  gap: var(--raum-3); }
.datei-kachel {
  
  border: 1px solid var(--linie);
   border-radius: var(--radius-klein);
   overflow: hidden;
  
  background: var(--flaeche-seite);
   position: relative;
}
.datei-icon {

  /* P8: dieselbe Fläche wie eine echte Vorschau, damit die Kacheln in einer
     Reihe nicht unterschiedlich hoch stehen. Betrifft im Bestand am Server
     3 von 131 Dateien — zwei Textdateien und eine .eml. */
  aspect-ratio: 3 / 4;
   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) {
/* Ohne Zeigegerät gibt es kein Überfahren — die Werkzeuge müssen also stehen
   bleiben, sonst wären sie auf dem Telefon gar nicht erreichbar.

   P8: Sie stehen jetzt UNTEN statt oben. Solange die Vorschau 90 px hoch war,
   war das gleichgültig; seit sie das Dokument zeigt, verdeckten vier Knöpfe
   in der oberen linken Ecke genau den Briefkopf — also das eine Merkmal, an
   dem man eine Rechnung von einem Angebot unterscheidet. Am Fuss einer Seite
   steht nichts, was beim Erkennen hilft. */
.datei-werkzeuge {  opacity: 1;  top: auto;  bottom: calc(1.9em + var(--raum-1)); }
.datei-werkzeug-eck {  top: auto;  bottom: calc(1.9em + var(--raum-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; }
/* A3: Beschlussantrag am TOP – so, wie er in der Einladung steht. Aufklappbar,
   weil ein Antrag leicht zwanzig Zeilen lang ist und die Liste sonst kippt. */
.top-antrag {
   flex-basis: 100%;
   margin: 0 0 var(--raum-1) 0;
   font-size: var(--groesse-klein);
   color: var(--text-gedimmt);
}
.top-antrag summary {  cursor: pointer;  color: var(--gold-text);  font-weight: var(--schnitt-halb); }
.top-antrag p {  margin: var(--raum-1) 0 0 0;  white-space: pre-line;  color: var(--text); }
.top-ohne {  font-size: var(--groesse-klein);  color: var(--text-gedimmt);  font-style: italic; }
/* Die Vorschau der gelesenen Einladung im Dialog. */
.to-vorschau {  max-height: 52vh;  overflow: auto;  margin: var(--raum-3) 0;  display: grid;  gap: var(--raum-2); }
.to-punkt {  display: grid;  grid-template-columns: auto 1fr;  gap: var(--raum-2);  align-items: start;  padding: var(--raum-2);  border: 1px solid var(--flaeche-seite);  border-radius: var(--radius-klein); }
.to-punkt input[type="text"] {  width: 100%;  font: inherit; }
.to-punkt textarea {  width: 100%;  font: inherit;  font-size: var(--groesse-klein);  min-height: 3.5em;  resize: vertical; }
.to-punkt small {  color: var(--text-gedimmt);  font-size: var(--groesse-klein); }
.to-punkt.aus {  opacity: .5; }
.to-termin {  display: flex;  flex-wrap: wrap;  gap: var(--raum-2) var(--raum-4);  font-size: var(--groesse-klein);  color: var(--text-gedimmt);  margin-bottom: var(--raum-2); }
.to-hinweis {  font-size: var(--groesse-klein);  color: var(--st-wartend-text); }
/* A4: Angebotsmaske. Der Assistent (Vorlage → Objekt → Preise) läuft im Dialog,
   der Editor zeigt die Absätze des Vertrags als Textfelder. */
.ang-schritt {  display: grid;  gap: var(--raum-3);  margin: var(--raum-3) 0; }
.ang-raster {  display: grid;  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));  gap: var(--raum-2) var(--raum-3); }
.ang-raster label {  display: grid;  gap: var(--raum-1);  font-size: var(--groesse-klein);  color: var(--text-gedimmt); }
.ang-raster input, .ang-raster select {  font: inherit;  width: 100%; }
.ang-zuschlaege {  display: grid;  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));  gap: var(--raum-1) var(--raum-3); }
.ang-zuschlaege label {  display: flex;  align-items: center;  gap: var(--raum-2);  font-size: var(--groesse-klein); }
.ang-zuschlaege input[type="number"] {  width: 5em;  font: inherit; }
.ang-summe {  display: grid;  grid-template-columns: 1fr auto;  gap: var(--raum-1) var(--raum-4);  padding: var(--raum-2) var(--raum-3);  background: var(--flaeche-seite);  border-radius: var(--radius-klein);  font-size: var(--groesse-klein); }
.ang-summe strong {  color: var(--text); }
.ang-preise {  display: grid;  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));  gap: var(--raum-1) var(--raum-3); }
.ang-preise label {  display: grid;  grid-template-columns: 1fr 6.5em;  align-items: center;  gap: var(--raum-2);  font-size: var(--groesse-klein);  color: var(--text-gedimmt); }
.ang-preise input {  font: inherit;  text-align: right; }
.ang-kopf {  display: flex;  flex-wrap: wrap;  gap: var(--raum-2);  align-items: center;  margin: var(--raum-3) 0; }
.ang-kopf h2 {  flex: 1;  margin: 0;  font-size: 1.15rem; }
.ang-absaetze {  display: grid;  gap: var(--raum-1); }
.ang-absatz {  display: grid;  grid-template-columns: 2.5em 1fr auto;  gap: var(--raum-2);  align-items: start; }
.ang-absatz textarea {  width: 100%;  font: inherit;  font-size: var(--groesse-klein);  line-height: 1.45;  resize: vertical;  min-height: 2.4em;  border: 1px solid var(--flaeche-seite);  border-radius: var(--radius-klein);  padding: var(--raum-1) var(--raum-2); }
.ang-absatz.ueberschrift textarea, .ang-absatz.titel textarea {  font-weight: var(--schnitt-halb);  color: var(--text); }
.ang-absatz.liste textarea {  margin-left: var(--raum-4); }
.ang-absatz.tabelle textarea {  background: var(--flaeche-seite); }
.ang-absatz.geloescht textarea {  opacity: .4;  text-decoration: line-through; }
.ang-absatz.offen textarea {  border-color: var(--st-wartend-text);  box-shadow: inset 3px 0 0 var(--st-wartend-text); }
.ang-absatz.geaendert textarea {  border-left: 3px solid var(--gold-text); }
.ang-nr {  font-family: var(--schrift-mono);  font-size: var(--groesse-hinweis);  color: var(--text-gedimmt);  padding-top: var(--raum-1); }
.ang-absatz-knoepfe {  display: grid;  gap: 2px; }
.ang-absatz-knoepfe button {  font-size: var(--groesse-hinweis);  padding: 0 var(--raum-1);  line-height: 1.6; }
.ang-zeile {  display: flex;  gap: var(--raum-3);  align-items: center;  flex-wrap: wrap; }
.ang-zeile .ang-status {  font-size: var(--groesse-klein);  color: var(--text-gedimmt); }
.ang-offen {  font-size: var(--groesse-klein);  color: var(--st-wartend-text); }
.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.
   P8: 108 → 140 px, und sie zeigt jetzt auch PDF. Der Satz oben gilt weiter:
   sie soll erkennen lassen, was der Anhang ist, nicht ihn ausbreiten. Wer ihn
   lesen will, klickt — dafür gibt es den Betrachter. */
.mail-anhang-bild, .postfach-anhang-bild {

  display: inline-flex;
   flex-direction: column;
   gap: var(--raum-1);

  width: 140px;
   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; }
}
/* T14: Leiste ausgeblendet — die Liste rückt an den Rand, die Nachricht bekommt den Rest. */
.af-raster.leiste-zu {  grid-template-columns: minmax(300px, 360px) minmax(0, 1fr); }
.af-raster.leiste-zu > .af-filter {  display: none; }
@media (max-width: 1200px) {
.af-raster.leiste-zu {  grid-template-columns: minmax(0, 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); }
/* P1: Der Gmail-Ordnerbaum. Bewusst KEINE Pillen wie die Bahnen darunter — der
   Ordner ist der Ort einer Mail, die Bahn ein Filter darauf. Zwei Dinge, die
   verschiedenes bedeuten, dürfen nicht gleich aussehen. Ordner sind deshalb
   ruhige Zeilen, wie in Gmail. */
.af-ordnerbaum {
   display: flex;
   flex-direction: column;
   gap: 1px;
}
/* Die Einrückung kommt aus --af-ebene, das die Zeile selbst mitbringt: der
   Ordnername trägt seine Tiefe im Namen ("WEG's/Treseburger Ufer 52/02
   Versicherung"). Eine Klasse je Ebene wäre eine Grenze, die irgendwann bricht. */
.af-ordner {
   display: flex;
   align-items: center;
   gap: var(--raum-2);
   width: 100%;
   min-height: var(--hoehe-bedien);
   padding: var(--raum-1) var(--raum-2);
   padding-left: calc(var(--raum-2) + var(--af-ebene, 0) * var(--raum-4));
   border: none;
   border-radius: var(--radius-klein);
   background: transparent;
   font-family: var(--schrift-text);
   font-size: var(--groesse-klein);
   color: var(--text);
   text-align: left;
   cursor: pointer;
}
.af-ordner:hover {  background: var(--flaeche-ueberfahren); }
.af-ordner.aktiv {
   background: var(--flaeche-segment-aktiv);
   color: var(--gold-text);
   font-weight: var(--schnitt-halb);
}
/* Wie in Gmail: ein Ordner mit ungelesener Post trägt seinen Namen fett. */
.af-ordner.hat-neue {  font-weight: var(--schnitt-fett); }
.af-ordner-neu {  margin-left: auto; }
/* Die Gesamtzahl ist Beiwerk, keine Aufforderung — deshalb blass und klein. */
/* Der Ordnername in der Kopfzeile der Liste ist eine Ortsangabe, keine
   Überschrift — deshalb leiser als die Zahl davor. */
.af-liste-ordner {
   font-weight: var(--schnitt-normal);
   color: var(--text-gedimmt);
}
.af-ordner-zahl {
   margin-left: auto;
   font-size: var(--groesse-winzig);
   color: var(--text-gedimmt);
}
.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);
}
/* A1: Abstimmung in der Versammlung. */
.abst-start {  display: flex;  gap: var(--raum-2);  align-items: center;  margin: 0 0 var(--raum-2) var(--raum-6); }
/* Lucas Regel (06.09.2026): nur EIN Punkt ist zur Abstimmung freigegeben — die anderen zeigen statt des Knopfes einen leisen Hinweis. */
.abst-start.abst-gesperrt {  color: var(--text-gedimmt);  font-size: var(--groesse-klein); }
.abst-offen {  border: 1px solid var(--linie);  border-radius: var(--radius-karte);  padding: var(--raum-3);  margin: 0 0 var(--raum-3) var(--raum-6);  background: var(--flaeche-karte); }
.abst-kopf {  display: flex;  flex-wrap: wrap;  gap: var(--raum-2);  align-items: baseline;  margin-bottom: var(--raum-2); }
.abst-stand {  color: var(--text-gedimmt);  font-size: var(--groesse-klein); }
.abst-raster {  display: grid;  grid-template-columns: 1fr;  gap: var(--raum-1); }
.abst-zeile {  display: flex;  justify-content: space-between;  align-items: center;  gap: var(--raum-3);  padding: var(--raum-1) 0;  border-bottom: 1px solid var(--linie); }
.abst-zeile.abwesend {  color: var(--text-gedimmt); }
.abst-einheit small {  display: block;  color: var(--text-gedimmt);  font-size: var(--groesse-klein); }
.abst-knoepfe {  display: flex;  gap: var(--raum-1);  flex-shrink: 0; }
.abst-wahl.aktiv {  background: var(--st-aktiv-flaeche);  color: var(--st-aktiv-text);  border-color: var(--gold); }
.abst-aktionen {  display: flex;  flex-wrap: wrap;  gap: var(--raum-2);  margin-top: var(--raum-3); }
.abst-ergebnis {  display: flex;  flex-wrap: wrap;  gap: var(--raum-2);  align-items: center;  margin: 0 0 var(--raum-2) var(--raum-6);  font-size: var(--groesse-klein);  color: var(--text-gedimmt); }
.abst-prinzip {  display: flex;  gap: var(--raum-2);  align-items: center;  margin-bottom: var(--raum-2); }
.abst-rechte {  display: grid;  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));  gap: var(--raum-1); }
.abst-recht {  display: flex;  gap: var(--raum-2);  align-items: baseline; }
.abst-recht.ruht {  color: var(--text-gedimmt); }
.abst-recht small {  color: var(--text-gedimmt);  font-size: var(--groesse-klein); }
/* A2: der Eigentümername an der Stimme. Bei mehreren Eigentümern einer Einheit
   stehen sie zusammengefasst („Yorck Richter / Luca Richter") — eine Zeile,
   eine Stimme. */
.abst-eig {  color: var(--text-gedimmt);  font-weight: 400; }
.teilnahme-gast {  opacity: .82; }
@media (max-width: 767px) {
.abst-start, .abst-offen, .abst-ergebnis {  margin-left: 0; }
.abst-zeile {  flex-wrap: wrap; }
}
/* T16: die Dubletten-Tafel in der Ablage. */
.abl-dubletten {  border: 1px solid var(--linie);  border-radius: var(--radius-karte);  padding: var(--raum-3);  margin-bottom: var(--raum-3);  background: var(--flaeche-karte); }
.abl-dub-titel {  margin: var(--raum-3) 0 var(--raum-2);  font-size: var(--groesse-text); }
.abl-dub-gruppe {  border-left: 3px solid var(--linie);  padding-left: var(--raum-3);  margin-bottom: var(--raum-3); }
.abl-dub-zeile {  display: flex;  justify-content: space-between;  align-items: center;  gap: var(--raum-3);  padding: var(--raum-1) 0;  min-width: 0; }
.abl-dub-name {  min-width: 0;  overflow: hidden;  text-overflow: ellipsis; }
.abl-dub-name small {  display: block;  color: var(--text-gedimmt);  font-size: var(--groesse-klein); }
/* T13: Im Ordner ist ein Faden mit ungelesener Mail fett, wie in Gmail. */
.af-zeile.ungelesen .af-gegen,
.af-zeile.ungelesen .af-titel {  color: var(--text);  font-weight: var(--schnitt-fett); }
.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-marke-abseits {  background: var(--st-offen-flaeche);  color: var(--st-offen-text); }
.ang-drive-stand { color: var(--text-gedimmt); }
/* A8: Eigentümer-Zugänge in der Versammlungskarte */
.zug-liste {  display: grid;  gap: var(--raum-1); }
.zug-zeile {  display: flex;  flex-wrap: wrap;  gap: var(--raum-2);  align-items: baseline;  padding: var(--raum-1) 0;  border-bottom: 1px solid var(--flaeche-seite); }
.zug-zeile.zug-tot {  color: var(--text-gedimmt); }
.zug-code {  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;  font-size: var(--groesse-klein);  letter-spacing: .04em; }
.zug-korrektur {  flex-basis: 100%;  color: var(--text-gedimmt);  font-size: var(--groesse-klein); }
.zug-knoepfe {  margin-left: auto;  display: flex;  gap: var(--raum-1); }
.zug-frisch {  background: var(--flaeche-seite);  border-left: 3px solid var(--gold);  padding: var(--raum-2) var(--raum-3);  margin: var(--raum-2) 0;  font-size: var(--groesse-klein);  overflow-wrap: anywhere; }
.zug-frisch-zeile {  margin-top: var(--raum-1); }
.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;
   /* P8: eine siebte Spalte ganz vorn für die Vorschau. Feste 56 px, damit die
      Namen darunter alle an derselben Kante beginnen. */
   grid-template-columns: 56px 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) {
  /* P8: Die Vorschau bleibt als erste Spalte stehen und behält ihre Breite;
     alles Übrige rückt darunter. Sie ist auf dem schmalen Schirm eher MEHR
     wert als am grossen — dort ist der Dateiname als Erkennungsmerkmal
     abgeschnitten. Die Folgezeilen beginnen deshalb hinter der Vorschau
     (Spalte 2) und nicht am linken Rand. */
  .abl-zeile {  grid-template-columns: 56px minmax(0, 1fr) auto; }
  .abl-sp-art, .abl-sp-datum, .abl-sp-groesse, .abl-sp-wo {  grid-column: 2 / -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;
}
/* M4 (06.09.2026): die Sitzung, aus der man gerade liest — ein goldener Streifen am Rand. */
.konten-zeile.konten-aktuell {
  border-left: 3px solid var(--gold);
  padding-left: var(--raum-3);
}
.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;
}

/* ============================================================================
   P3 — MOBILE BEDIENUNG, TEIL 2: DIE APP-FLÄCHEN (29.08.2026)
   ============================================================================
   Teil 1 steht in style.css und behandelt die Grundbausteine (Kopfleiste,
   Navigation, Inhalt, Tippziele). Hier stehen die Flächen, die es nur in
   dieser Anwendung gibt — und die untere Leiste selbst.

   LEITSATZ: Kein Element, das eine Handlung trägt, verschwindet auf dem
   Telefon. Was schmal werden kann, wird schmal. Was nicht schmal werden kann
   — eine siebenspaltige Tabelle —, bekommt einen eigenen Schiebebereich statt
   einer Kürzung. Eine mobile Ansicht, die Spalten weglässt, ist eine andere
   Anwendung, und dann fragt man sich unterwegs, ob man gerade alles sieht.
   ============================================================================ */

/* ---- Stufe 1: bis 1023 px — iPad hoch und alles Kleinere ---- */
@media (max-width: 1023px) {

  /* Zweispaltige Arbeitsflächen werden einspaltig: sie sind für zwei Bereiche
     nebeneinander gebaut, und auf 768 px bleibt für den zweiten nichts, was
     ihn noch lesbar machte. */
  .doku-layout,
  .lv-akte,
  .bsp-flaeche,
  .frist-flaeche,
  .einstell-flaeche,
  .postfach-raster {
    grid-template-columns: minmax(0, 1fr);
  }

  /* Die Mail-Arbeitsfläche hat DREI Spalten (Ordner | Liste | Nachricht). Auf
     dem iPad bleiben Liste und Nachricht nebeneinander; der Ordnerbaum wandert
     als liegende Reihe darüber — ihn zu wechseln ist die seltenste der drei
     Handlungen. */
  .af-raster {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
  }
  .af-filter {
    grid-column: 1 / -1;
    flex-direction: row;
    flex-wrap: wrap;
    /* P4: Hier stand `max-height: 172px; overflow-y: auto`. Das war richtig,
       solange in dieser Spalte nur der Ordnerbaum lag. Sie traegt inzwischen
       Ordner, Stapel, Rueckschau, „Nach Akte" und „Heute" — auf dem iPad
       gemessen 951 px Inhalt in einem 157 px hohen Kasten. Aus dem Deckel war
       ein Sehschlitz geworden, und 32 Elemente lagen ausserhalb.
       Kein Deckel mehr: auf Tablet und Telefon scrollt die SEITE. */
  }
  .af-ordnerbaum {
    flex-direction: row;
    flex-wrap: wrap;
  }
  .af-ordner {
    width: auto;
  }

  /* TABELLEN WERDEN GESTAPELT, NICHT GESCHOBEN.
     
     Erster Anlauf war ein Schiebebereich je Tabelle (overflow-x: auto). Das war
     aus zwei Gründen falsch, und Luca hat den zweiten am eigenen iPhone gemerkt,
     bevor die Messung ihn zeigte:
     
     1. `overflow-x: auto` macht einen Kasten AUCH VERTIKAL scrollbar. Der
        Browser wandelt das dabei stehende `overflow-y: visible` selbsttätig in
        `auto` um — anders ist ein waagerechter Schiebebereich nicht zu bauen.
        Damit lagen plötzlich 16 Scroll-Container auf der Seite, und ein Wisch
        über einer Tabelle scrollte den Kasten statt der Seite. Das Scrollen
        „funktionierte nicht" — es traf nur das Falsche.
     2. Eine siebenspaltige Tabelle ist auf 375 px auch dann nicht lesbar, wenn
        man sie schieben kann. Man sieht immer nur zwei Spalten und weiß nach
        dem dritten Wisch nicht mehr, in welcher Zeile man ist.
     
     Gestapelt steht jedes Feld untereinander, die Zeile wird zur Karte, und es
     entsteht kein einziger neuer Scroll-Container. */
  .vg-raster,
  .fl-raster,
  .fin-raster,
  .beleg-raster,
  .kal-tag-zeile,
  .routine-raster,
  .strat-raster,
  .post-raster,
  .sch-raster,
  .dl-hist-zeile,
  .umlauf-stimme,
  .teilnahme-zeile,
  .health-zeile,
  .frist-zeile,
  .einheit-zeile,
  .onb-punkt {
    grid-template-columns: minmax(0, 1fr);
    /* `min-width: 926px` (und 900/960 bei den Geschwistern) steht fest an
       diesen Rastern und hält den Kasten auf, ganz gleich was mit den Spalten
       geschieht. Ohne diese Zeile war die Stapelung wirkungslos: die Spalte
       wurde brav zu `1fr`, und `1fr` waren dann 890 px. */
    min-width: 0;
  }

}

/* ---- P4: AUF TABLET UND TELEFON SCROLLT DIE SEITE, NICHT DER KASTEN ----

   Die drei Mail-Spalten, die Vorschlagsliste und die Dokumentenspalte haben
   je ein eigenes Scroll-Fenster (`max-height: calc(100vh - 210px)`). Auf dem
   Rechner ist das richtig: drei Spalten nebeneinander, jede für sich lesbar.
   Gestapelt wird daraus das Gegenteil — man wischt in einem Fensterchen,
   während die Seite darunter stillsteht. Genau das meinte Luca mit „das
   Scrollen funktioniert nicht".

   DIESER BLOCK STAND ERST IN DER 767er-STUFE. Auf dem iPad blieb die
   Vorschlagsliste damit gedeckelt: gemessen 320 px Fenster auf 2668 px
   Inhalt. Es ist derselbe Fehler, den ich mir in P3 schon aufgeschrieben
   hatte — „darf umbrechen/schrumpfen gehört IMMER in die 1023er-Stufe" — und
   ich habe ihn beim Schreiben dieses Blocks trotzdem wiederholt.

   `max-height: none` nimmt die Deckelung, `overflow: visible` das Fenster.
   `overscroll-behavior` entfällt hier mit Absicht — wo nichts scrollt, gibt
   es auch keine Kette zu unterbrechen. */
@media (max-width: 1023px) {
  .af-spalte,
  .auto-liste,
  .doku-haupt,
  .mt-spalte {
    max-height: none;
    overflow: visible;
  }
}

/* ---- Stufe 2: bis 767 px — Telefon ---- */
@media (max-width: 767px) {

  /* Einspaltig: drei Spalten nebeneinander sind auf 375 px keine Anordnung
     mehr, sondern drei Streifen. */
  .af-raster {
    grid-template-columns: minmax(0, 1fr);
  }
  /* P4: `.af-filter { max-height: 132px }` ist mit demselben Grund entfallen. */

  /* „Mein Tag" hat drei Spalten nebeneinander (Ich bin dran / Andere sind dran /
     Läuft). Auf 375 px sind das drei Streifen à 110 px — die Karten darin
     ragten über den Rand hinaus. Untereinander gestapelt bleibt die Ordnung
     erhalten, und jede Spalte behält ihre Überschrift. */
  .mt-spalten {
    grid-template-columns: minmax(0, 1fr);
  }

  /* Der Mailtext ist auf 76 Zeichen begrenzt — das sind 648 px, und `max-width`
     begrenzt nur nach oben, es erzwingt keinen Umbruch. Eine Mail mit langen
     Zeilen (Weiterleitungen, Kopfzeilen, Links) schob die Arbeitsfläche damit
     auf 648 px. */
  .mailz-text {
    max-width: 100%;
    overflow-wrap: anywhere;
  }

  /* Die „Heute"-Leiste sitzt in der Filterspalte, die auf dem Telefon zur
     liegenden Reihe wird. Als Flex-Kind schrumpft sie nicht von selbst und
     nahm die Breite ihres Inhalts an (632 px). */
  #af-heute {
    max-width: 100%;
    min-width: 0;
  }

  /* Das Aktenzeichen auf den Karten von „Mein Tag" ist eine Zeichenkette ohne
     Trennstelle („LV-2026-0033 Prüfung …") und schob die Karte auf 419 px. */
  .mt-karte-nummer {
    max-width: 100%;
    overflow-wrap: anywhere;
  }

  .knopf,
  .pille,
  .af-ordner,
  .af-zeile {
    min-height: 44px;
  }
  .knopf-klein {
    min-height: 40px;
    padding-left: var(--raum-3);
    padding-right: var(--raum-3);
  }
  .af-filter-wahl {
    font-size: 16px;
  }

  /* Zweispaltige Formularreihen werden einspaltig. */
  .feld-reihe,
  .frist-karte-zeile {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ---- Die untere Leiste ---- */
/* Sie liegt UNTER den Hinweisen (200) und dem Einblender (4000): ein Hinweis,
   der die Bedienleiste verdeckt, wäre richtig gedacht und falsch herum gebaut —
   die Meldung ist flüchtig, die Leiste bleibt. */
.mobil-leiste {
  display: none;
  position: fixed;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 150;
  align-items: stretch;
  background: var(--flaeche-leiste);
  border-top: 1px solid var(--linie);
  padding-bottom: env(safe-area-inset-bottom, 0px);
}
@media (max-width: 767px) {
  .mobil-leiste {
    display: flex;
  }
}
.mobil-ziel {
  display: flex;
  flex: 1 1 0;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  min-height: 56px;
  padding: var(--raum-2) 2px;
  border: none;
  background: transparent;
  color: var(--leiste-text-leise);
  font-family: var(--schrift-text);
  font-size: var(--groesse-winzig);
  cursor: pointer;
}
.mobil-ziel.aktiv {
  color: var(--gold-text);
  font-weight: var(--schnitt-halb);
}
.mobil-ziel-text {
  line-height: 1.1;
}

/* ---- Das Blatt hinter „Mehr" ---- */
.mobil-blatt {
  position: fixed;
  inset: 0;
  z-index: 3000;
}
.mobil-blatt-schleier {
  position: absolute;
  inset: 0;
  background: var(--flaeche-abdunklung);
}
.mobil-blatt-flaeche {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  display: flex;
  flex-direction: column;
  max-height: 82vh;
  background: var(--flaeche-seite);
  border-top-left-radius: var(--radius-karte);
  border-top-right-radius: var(--radius-karte);
  padding-bottom: env(safe-area-inset-bottom, 0px);
}
.mobil-blatt-kopf {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--raum-3);
  padding: var(--raum-4);
  border-bottom: 1px solid var(--linie);
  font-family: var(--schrift-text);
  font-size: var(--groesse-klein);
  font-weight: var(--schnitt-halb);
  color: var(--text);
}
.mobil-blatt-inhalt {
  padding: var(--raum-3);
  overflow-y: auto;
  /* Das Blatt liegt über der Seite; ein Wisch an seinem Ende darf die Seite
     darunter nicht mitziehen. */
  overscroll-behavior: contain;
}

/* ---- Nachtrag zu Stufe 2, am lebenden Bild gemessen ----
   Nach dem ersten Durchgang liefen noch 12 Ansichten über. Die Ursachen waren
   nicht mehr Raster, sondern Reihen, die nicht umbrechen, und Zeichenketten
   ohne Trennstelle (Prüfdetails, Dateinamen, Mailtext). */
/* LEHRE AUS DREI NACHTRÄGEN: „Darf umbrechen" und „darf schrumpfen" gehören
   IMMER in die iPad-Stufe, nie in die Telefon-Stufe. Eine Reihe, die auf
   375 px nicht nebeneinander passt, passt auf 768 px meist genauso wenig —
   und jedes Mal, wenn eine dieser Regeln erst unter 767 px galt, fiel das
   iPad wieder heraus (mails 949, eingang 800, einstellungen 812). In der
   Telefon-Stufe steht nur, was WIRKLICH nur das Telefon betrifft: die
   Navigation, die untere Leiste, Fingermaße und die 16-px-Regel gegen das
   Hineinzoomen von iOS. */
@media (max-width: 1023px) {
  /* Label und Feld untereinander statt nebeneinander — 72 Fundstellen allein
     in den Einstellungen. */
  .einstell-zeile {
    flex-wrap: wrap;
  }
  .kal-steuerung {
    flex-wrap: wrap;
  }
  .doku-felder {
    grid-template-columns: minmax(0, 1fr);
  }
  /* Ein Knopf darf schmaler werden als seine Beschriftung lang ist; die
     Beschriftung bricht dann um, statt den Knopf aus dem Bild zu schieben. */
  .knopf {
    max-width: 100%;
    white-space: normal;
  }
}

/* ---- P3, zweiter Nachtrag: die letzten beiden Fundstellen ---- */
@media (max-width: 1023px) {
  /* Der Kachel-Umschalter in den Einstellungen bleibt sichtbar (er gehört
     dorthin), muss aber umbrechen dürfen.
     `flex-wrap` allein genügt nicht: Ohne Begrenzung nimmt der Kasten die
     Breite seines Inhalts an (drei Kacheln à 136 px = 438 px) und bricht
     deshalb nie um. Erst die Grenze zwingt ihn in die zweite Zeile. */
  .modus-kacheln {
    flex-wrap: wrap;
    max-width: 100%;
    min-width: 0;
  }
  .einstell-kopf {
    flex-wrap: wrap;
    min-width: 0;
  }
  /* Adressen wie „invoice+statements+acct_1mjks3…@stripe.com" haben keine
     Trennstelle. Ohne diese Zeile schiebt eine einzige solche Adresse die
     Einstellungen um 48 px nach rechts. Die Regel steht an der Zeile, nicht
     an ihren Kindern: Element-Selektoren sind hier nicht erlaubt, und
     `overflow-wrap` vererbt sich. */
  .einstell-zeile {
    overflow-wrap: anywhere;
  }
}

/* ---- P3, dritter Nachtrag: Textumbruch gilt AUCH auf dem iPad ----
   Erst standen diese Regeln nur in der Telefon-Stufe. Auf dem iPad lief
   „Mails" damit weiter auf 949 px — ein einziger Mailtext ohne Trennstelle.
   Eine Zeichenkette, die nicht umbricht, ist auf 768 px genauso ein Problem
   wie auf 375; die Stufe war die falsche. */
@media (max-width: 1023px) {
  .health-detail,
  .einstell-hinweis,
  .mailtext-kurz,
  .einstell-zeile {
    overflow-wrap: anywhere;
  }
}

/* ---- P3: Auswahlkästchen auf dem Telefon ----
   Gemessen: 400 Kästchen à 16 px Höhe allein in der Dateiablage. 16 px trifft
   man mit dem Finger nicht zuverlässig.

   Sie werden auf 24 px vergrößert und NICHT auf die sonst geltenden 44 px:
   Ein Kästchen sitzt in einer Listenzeile neben dem Dateinamen, und 44 px
   hätten jede dieser Zeilen auseinandergezogen — aus einer überschaubaren
   Liste wäre eine Kette von Kacheln geworden. 24 px ist der Punkt, an dem das
   Treffen zuverlässig wird, ohne die Liste zu zerstören. Das ist eine bewusste
   Abweichung von der Regel, keine übersehene Stelle. */
@media (max-width: 767px) {
  /* P5-BERICHTIGUNG: Hier stand `.af-wahl, .abl-wahl` — und die Regel hat NIE
     gewirkt. Der Grundbaustein setzt `input[type="checkbox"] { width: 16px }`,
     und ein Attributselektor plus Elementname wiegt (0,1,1) gegen (0,1,0)
     einer blossen Klasse. Die 400 Kaestchen der Ablage waren also die ganze
     Zeit 16 px gross, obwohl der Kommentar daneben das Gegenteil behauptete.
     Gefunden erst beim Bauen der Begehung, wo derselbe Fehler noch einmal
     entstand. Mit `input.` davor wiegt die Regel ebenfalls (0,1,1) — und
     luvaris-app.css wird nach style.css geladen, also gewinnt sie. */
  input.af-wahl,
  input.abl-wahl {
    width: 24px;
    height: 24px;
  }
}

/* ============================================================================
   P4 — DIE AKTE AUF DEM TELEFON (29.08.2026)
   ============================================================================

   ANLASS: Luca, mit Bild vom iPhone: „Das geht so nicht. Nicht nutzbar."

   WARUM DER ERSTE ANLAUF (P3) DAS NICHT GEFUNDEN HAT — der Punkt, an dem ich
   mich geirrt habe, und der wichtigste Satz dieser Datei:

     Abgenommen wurde mit `document.documentElement.scrollWidth > innerWidth`.
     Die Akte ist `position: fixed`. Ein fest positioniertes Element steht
     NICHT im Fluss des Dokuments — sein Ueberlauf erreicht diese Zahl nie.
     Dasselbe gilt fuer jeden Dialog und fuer das Blatt hinter „Mehr".
     Die Messung war gruen, WEIL sie an der Akte vorbeigesehen hat.

   AM LEBENDEN BILD GEMESSEN, 375x812, Akte LV-2026-0026 offen:
     · #drawer-inhalt war 597 px breit in einem 374 px breiten Fenster.
     · Der Knopf „Schliessen" lag bei x = 444 — vollstaendig ausserhalb.
       Die Akte liess sich auf dem Telefon also NICHT SCHLIESSEN.
     · .drawer-kopf war 322 px hoch von 736 px Akte — 44 Prozent Kopf.
     · .drawer-tafeln blieben dadurch 281 px hoch UND scrollten in sich:
       man las die Akte durch einen Sehschlitz, waehrend die Seite stillstand.
       Das ist „das Scrollen funktioniert nicht", und zwar wortwoertlich.
     · .drawer beginnt bei `top: var(--hoehe-kopfleiste)` = 76 px. Die
       Kopfleiste ist auf dem Telefon aber 105 px hoch, weil sie umbricht.
       Die oberen 29 px der Akte lagen darunter — daher das angeschnittene
       Aktenzeichen auf Lucas Bild.

   DIE URSACHE DES ZERQUETSCHTEN TITELS, weil sie sich wiederholen wird:
     .drawer-titelzeile ist ein Flex-Kasten mit `nowrap`. Die Knopfgruppe
     trug `flex: 0 0 auto` — sie darf weder schrumpfen noch umbrechen. Sie
     nahm 557 px der 326 px breiten Zeile, und fuer den Titelblock blieb
     die Breite NULL. Sein Inhalt lief dann auf Wortbreite um:
     „Treseburger / Ufer 52, / 12347 Berlin".
     `flex-wrap: wrap` allein haette daran NICHTS geaendert: Flex bricht erst
     um, wenn ein Kind nicht mehr schrumpfen kann — und das schrumpfbare Kind
     war der Titel, nicht die Knoepfe. Erst `flex-basis: 100%` an beiden
     Kindern erzwingt zwei Zeilen.

   LEITSATZ FUER DIESEN TEIL: Auf dem Telefon ist eine Ueberlagerung eine
   SEITE, kein Panel. Ganzer Bildschirm, eigene Kopfzeile mit dem Weg zurueck,
   und genau EIN Scrollbereich.
   ============================================================================ */

@media (max-width: 767px) {

  /* Die Akte nimmt den ganzen Bildschirm. `top: var(--hoehe-kopfleiste)` ist
     auf dem Telefon falsch: der Wert ist fest, die Kopfleiste dort aber
     umgebrochen und hoeher. Statt die Zahl nachzupflegen — was beim naechsten
     Umbruch wieder bricht — deckt die Akte die Kopfleiste ab. Der Weg zurueck
     steht in ihrer eigenen Kopfzeile.
     z-index 60: ueber der Kopfleiste (50), unter den Dialogen (70/90) und
     unter dem Blatt (3000). Die untere Bedienleiste (150) bleibt bewusst
     DARUEBER sichtbar — wie bei einer aufgeschlagenen Detailseite auf iOS. */
  .drawer {
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 60;
    border-left: none;
  }

  /* Kopfzeile: zwei Etagen statt einer erzwungenen Reihe. */
  .drawer-titelzeile {
    flex-wrap: wrap;
    align-items: center;
    gap: var(--raum-2);
  }
  /* Beide Kinder auf volle Breite. Ohne das schrumpft der Titel auf null,
     siehe oben. */
  .drawer-titel-text {
    flex: 1 1 100%;
    min-width: 0;
  }
  .drawer-titel-knoepfe {
    /* order vor dem Titel: der Weg zurueck ist auf dem Telefon das Erste,
       was man braucht, nicht das Letzte. */
    order: -1;
    flex: 1 1 100%;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--raum-2);
  }
  /* „Schliessen" zuerst — es ist der Zurueck-Knopf dieser Seite. */
  #btn-drawer-schliessen {
    order: -1;
  }
  /* Die Bearbeitungszeit ist eine Auskunft, kein Bedienelement. Sie bleibt
     stehen (nichts, was etwas sagt, verschwindet), bekommt aber die zweite
     Zeile statt Platz neben den Knoepfen. */
  .akte-zeit {
    order: 1;
    flex: 1 1 100%;
  }

  /* Die Kopfzeile der Akte war ein umbrechender Flex-Kasten. Beim Umbruch
     landeten die Trennpunkte „·" am Zeilenanfang und standen als einzelnes
     Zeichen auf eigener Zeile — auf Lucas Bild gut zu sehen. Als Fliesstext
     bricht dieselbe Angabe um wie ein Satz und bleibt eine Auskunft. */
  .akte-kopfzeile {
    display: block;
    font-size: var(--groesse-text);
    line-height: 1.45;
  }
  .akte-kopf-titel {
    font-size: var(--groesse-abschnitt);
  }

  .drawer-kopf {
    padding: var(--raum-3) var(--raum-4);
  }

  /* Die Reiter als EINE liegende Reihe statt drei Etagen.
     Gemessen: sieben Reiter umgebrochen = 132 px Kopf, nur fuer die Reiter.
     Als Reihe sind es 44 px.
     Und zur Warnung aus P3 („kein overflow-x mehr"): die galt Tabellen. Dort
     war sie richtig, weil ein waagerechter Schiebebereich den Kasten AUCH
     senkrecht scrollbar macht und der Wisch dann den Kasten statt der Seite
     traf. Eine einzeilige Reiterleiste ist genau so hoch wie ihr Inhalt — es
     gibt senkrecht nichts zu scrollen, also auch nichts zu entfuehren.
     `overscroll-behavior` steht trotzdem da: am Ende der Reihe soll der Wisch
     nicht die Seite darunter mitnehmen. */
  .drawer-tabs {
    flex-wrap: nowrap;
    overflow-x: auto;
    overscroll-behavior: contain;
    padding: 0 var(--raum-4);
  }
  .drawer-tab {
    flex: none;
  }

  /* Der eine Scrollbereich der Seite. Unten Platz fuer die Bedienleiste plus
     den sicheren Bereich am Geraeterand — sonst liegt die letzte Zeile der
     Akte unter der Leiste. */
  .drawer-tafeln {
    padding: var(--raum-4) var(--raum-4) calc(84px + env(safe-area-inset-bottom, 0px));
  }
}

/* ---- P4, Nachtrag: die letzten beiden Fundstellen am lebenden Bild ---- */
@media (max-width: 1023px) {
  /* Eine Teamzeile ist [Haken] [Name] [„still seit 15 Tagen"] in einer Reihe
     ohne Umbruch. Das Abzeichen stand 59 bis 62 px ausserhalb — abgeschnitten
     von der Gruppe darum, also nach aussen unsichtbar. */
  .team-zeile {
    flex-wrap: wrap;
  }
}

/* ---- P4: Werkzeugleisten, in denen eine Gruppe die andere erdrueckt ----
   In „Vorgaenge" stehen die Statuspillen und der Umschalter Liste/Kanban in
   EINER Leiste. Der Umschalter ist `flex: 0 0 auto` (144 px, unteilbar), die
   Pillen sind `flex: 1 1 0%`. Auf 375 px blieben den Pillen 176 px — jede
   Pille bekam eine eigene Zeile, fuenf Zeilen fuer fuenf Woerter, 200 px hoch.
   Volle Breite fuer beide Gruppen: die Pillen brechen dann untereinander um
   wie vorgesehen, der Umschalter steht in seiner eigenen Zeile. */
@media (max-width: 1023px) {
  .filter-pillen {
    flex: 1 1 100%;
  }
}

/* ---- P4: „Heute" als Klappe ----
   Begruendung steht bei der Stelle, die sie baut (app.js, afHeuteZeichnen).
   Kurz: 530 von 991 px der Filterspalte auf dem Telefon.
   Auf dem Rechner ist die Klappe offen und sieht aus wie vorher; die Regeln
   hier betreffen nur den Griff, den ein <summary> mitbringt. */
.af-heute-klappe {
  margin: 0;
}
.af-heute-kopf {
  cursor: pointer;
  list-style-position: inside;
}
@media (max-width: 767px) {
  /* Zugeklappt ist der Kopf das einzige Tippziel — er bekommt Fingermass. */
  .af-heute-kopf {
    display: flex;
    align-items: center;
    min-height: 44px;
  }
}

/* ---- P4: die Stapel-Pillen auf dem Telefon ----
   In der Seitenspalte des Rechners ist jede Pille eine volle Zeile (`width`
   fest auf die Spaltenbreite) — dort ist das richtig, die Spalte ist schmal
   und die Zahl steht rechtsbündig.
   Auf dem Telefon ist die Filterspalte quer, und fünf volle Zeilen à 44 px
   sind 220 px Steuerung vor der ersten Mail. Mit eigener Breite stehen
   dieselben fünf Pillen zu zweit bis zu dritt nebeneinander.
   Bewusst KEIN waagerechter Schiebebereich: anders als bei den Reitern der
   Akte ist hier jeder Stapel eine Bahn mit einer Zahl, und die Zahlen will
   man nebeneinander sehen, nicht nacheinander suchen. */
@media (max-width: 767px) {
  .af-filter-btn {
    width: auto;
  }
  /* Die Zwischenüberschriften („Stapel", „Nach Akte") beginnen eine neue
     Reihe — sonst rutscht die erste Pille neben die Überschrift. */
  .af-filter-trenner {
    flex: 1 1 100%;
  }
}

/* ---- P4: die Akte, Reiter „Verlauf" ----
   Zwei Funde, beide erst sichtbar, seit die Messung IN die Akte hineinsieht. */
@media (max-width: 1023px) {
  /* Dateinamen wie „WE 8_Masionyte_Schaden_Dach_2026-07-14.pdf" haben keine
     Trennstelle, die ein Umbruch nutzen könnte. Der längste stand 85 px
     ausserhalb der Liste — abgeschnitten, also von aussen unsichtbar. */
  .lv-anhang-liste {
    overflow-wrap: anywhere;
  }
  /* Der Fuss des Schreiben-Bereichs traegt rechts eine Knopfgruppe ohne
     Umbruch: 393 px in einem 229 px breiten Fuss. „Senden" lag damit
     ausserhalb — der wichtigste Knopf des Bereichs.
     Der Selektor bleibt an der Fundstelle (`.verfasser-fuss .rechts`) und
     nicht an `.rechts` allein: `.rechts` heisst „rechts ausgerichtet" und
     kommt an vier verschiedenen Leisten vor, die je eigene Breiten haben.
     Eine Regel fuer alle vier waere geraten, nicht gemessen. */
  .verfasser-fuss .rechts {
    flex-wrap: wrap;
  }
}

/* ---- P4: die Filterleiste im Reiter „Verlauf" ---- */
@media (max-width: 1023px) {
  /* Zwei Knöpfe und zwei Auswahlfelder in einer Reihe ohne Umbruch: gemessen
     645 px in einem 313 px breiten Kopf. Beide Auswahlfelder lagen damit
     ausserhalb der Akte. */
  .lv-kopf .rechts {
    flex-wrap: wrap;
  }
  /* BEWUSSTE ABWEICHUNG von „auf dem Telefon scrollt die Seite, nicht der
     Kasten": die Anhangliste ist ein AUSWAHLKASTEN, kein Seiteninhalt. Ihr
     Inhalt war hier 4166 px lang — als Seitenfluss wären das dreissig
     Bildschirme Dateinamen mitten in der Akte.
     15rem (240 px) waren auf dem Telefon aber zu wenig: ein Sehschlitz, in
     dem man mehr wischt als liest. 60vh ist der Punkt, an dem der Kasten als
     eigener Bereich erkennbar bleibt und trotzdem etwas zeigt.
     `overscroll-behavior: contain` steht schon am Grundbaustein — der Wisch
     am Ende der Liste zieht die Akte darunter also nicht mit. */
  .lv-anhang-liste {
    max-height: 60vh;
  }
}

/* ---- P4: die Navigation IM Blatt ----
   Am Bild gefunden: Sie behielt im Blatt ihre Seitenleistenmasse — 200 px
   breit, der Rest des Blattes leer, und sie scrollte in sich selbst statt mit
   dem Blatt. Beides ist in der Seitenleiste richtig und im Blatt falsch.
   Der Selektor nennt das Blatt ausdruecklich; `.navigation` allein steht als
   Grundbaustein in style.css und darf hier nicht noch einmal auftauchen. */
.mobil-blatt-inhalt .navigation {
  width: 100%;
  /* Die Seitenleiste ist am Fensterrand festgemacht und auf die Resthoehe
     unter der Kopfleiste gedeckelt. Im Blatt ist beides falsch: `sticky` mit
     `top: 76px` schob sie 88 px nach unten, und `height: calc(100vh - 76px)`
     schnitt die Liste bei zwei Dritteln ab. Im Blatt scrollt das Blatt. */
  position: static;
  height: auto;
  max-height: none;
  overflow: visible;
  padding: 0;
}

/* ============================================================================
   P5 — DIE BEGEHUNG (29.08.2026)
   ============================================================================
   Lucas Auftrag: „einen Reiter der Begehung heisst. Dort moechte ich ein
   Begehungsprotokoll haben wo ich dann Checkboxen und Textflaeche habe und
   auch Fotos machen kann."

   Gebaut fuer den Keller, nicht fuer den Schreibtisch: Die ganze Zeile ist das
   Tippziel, nicht das 16-px-Kaestchen. Ein abgehakter Punkt tritt zurueck,
   damit die offenen hervortreten — das ist die einzige Frage, die man vor Ort
   an die Liste hat: was fehlt noch.
   ============================================================================ */

/* ---- Der Fortschritt in der Liste ---- */
.beg-balken {
  height: 4px;
  margin-top: var(--raum-2);
  border-radius: var(--radius-feld);
  background: var(--flaeche-vertieft);
  overflow: hidden;
}
.beg-balken span {
  display: block;
  height: 100%;
  background: var(--gold-text);
}

/* ---- Der Kopf der Checkliste ---- */
.beg-kopfzeile {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--raum-2);
  margin: var(--raum-4) 0 var(--raum-2);
}
.beg-fortschritt {
  font-size: var(--groesse-hinweis);
  font-weight: var(--schnitt-halb);
  color: var(--text-zweit);
}
.beg-abschnitt {
  margin: var(--raum-4) 0 var(--raum-1);
  font-size: var(--groesse-winzig);
  font-weight: var(--schnitt-fett);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--gold-text);
}

/* ---- Ein Punkt ---- */
.beg-punkt {
  border: 1px solid var(--linie);
  border-radius: var(--radius-feld);
  padding: var(--raum-2) var(--raum-3);
  margin-bottom: var(--raum-2);
  background: var(--flaeche-karte);
}
/* Abgehakt tritt zurueck. KEIN Durchstreichen: der Text bleibt eine Aussage
   ueber das Objekt und wird nicht ungueltig, nur weil er geprueft wurde. */
.beg-punkt.erledigt {
  background: var(--flaeche-vertieft);
}
.beg-punkt.erledigt .beg-punkt-text {
  color: var(--text-gedimmt);
}
/* Das ganze Label ist das Tippziel — 44 px, Apples Mindestmass. */
.beg-punkt-kopf {
  display: flex;
  align-items: flex-start;
  gap: var(--raum-3);
  min-height: 44px;
  padding: var(--raum-1) 0;
  cursor: pointer;
}
/* `input.` und nicht nur `.beg-haken`: siehe die Berichtigung weiter unten
   bei .af-wahl. Der Grundbaustein `input[type="checkbox"]` wiegt (0,1,1) und
   schlaegt jede blosse Klasse. Am Bild gemessen: ohne das Praefix blieb das
   Kaestchen bei 16 px, waehrend accent-color aus derselben Regel ankam — die
   Regel griff also, nur nicht mit der Breite. */
input.beg-haken {
  flex: none;
  width: 24px;
  height: 24px;
  margin: 2px 0 0;
  accent-color: var(--gold-text);
}
.beg-punkt-text {
  font-size: var(--groesse-bedien);
  line-height: 1.35;
  color: var(--text);
  overflow-wrap: anywhere;
}
.beg-punkt-zeile {
  display: flex;
  align-items: flex-start;
  gap: var(--raum-2);
  margin-top: var(--raum-1);
}
.beg-bemerkung {
  flex: 1 1 auto;
  min-width: 0;
  resize: vertical;
}
.beg-punkt-foto,
.beg-punkt-weg,
.beg-punkt-notiz {
  flex: none;
}

/* ============================================================================
   T1 (31.08.2026) — DER ZUSTAND STATT DES HAKENS
   ============================================================================
   Anlass: Lucas erste Begehung am iPad stand danach als „Abgeschlossen ·
   0 von 19 abgehakt" in der Liste. Sein Satz: „Ich wollte eher sowas wie —
   Treppenhaus Zustand Gut, Schlecht. Ich habe nicht so viel Zeit so viel zu
   tippen."

   Die alte Zeile hatte ein AUFGEKLAPPTES Textfeld an jedem der 19 Punkte. Das
   Auffaelligste an der Liste war damit die Aufforderung zu tippen — mit einer
   Hand, im Keller, ein iPad haltend.

   Deshalb hier: vier Tippziele nebeneinander, jedes mindestens 44 px hoch
   (Apples Mindestmass), und das Textfeld ist WEG, solange es nichts zu sagen
   gibt. */
/* Ein Zustandspunkt ist SCHMALER als ein Hakenpunkt. Am Bild gemessen brauchte
   er zuerst rund 200 px und drei Zeilen — bei 26 Punkten sieben Bildschirme.
   Bei einer Liste, deren ganzer Zweck „schnell" ist, ist das kein
   Schoenheitsthema: was man scrollen muss, tippt man nicht an. */
.beg-punkt-zustand {
  padding: var(--raum-1) var(--raum-3);
  margin-bottom: var(--raum-1);
}
.beg-punkt-zustand .beg-punkt-kopf {
  flex-wrap: wrap;
  min-height: 0;          /* die 44 px steckten im Knopf, nicht im Kopf */
  padding: 0;
  cursor: default;        /* kein Label mehr — der ganze Kopf ist kein Tippziel */
}
.beg-punkt-zustand .beg-punkt-text {
  flex: 1 1 12rem;
  align-self: center;
  padding: var(--raum-1) 0;
}
/* Der Text ist das Tippziel fuer die Bemerkung. Dass er eines IST, muss man
   sehen koennen — sonst ist es ein Geheimnis statt einer Bedienung. Der
   gepunktete Unterstrich ist die uebliche Kennzeichnung dafuer und kostet
   keine Zeile. */
.beg-punkt-text-tipp {
  cursor: pointer;
  text-decoration: underline dotted var(--linie);
  text-underline-offset: 3px;
}
.beg-punkt-text-tipp:hover,
.beg-punkt-text-tipp:focus-visible {
  text-decoration-color: var(--gold-text);
}
.beg-wahl {
  display: flex;
  align-items: center;
  flex: 0 0 auto;
  gap: var(--raum-1);
  margin-left: auto;
}
/* T7: „zuletzt: Mittel" — klein und ruhig neben dem Bauteil, kein Alarm. Steht
   zwischen Text und Knopfreihe; die Knopfreihe zieht sich mit margin-left:auto
   nach rechts, der Hinweis bleibt links beim Text. */
.beg-vorher {
  font-size: var(--groesse-winzig);
  color: var(--text-gedimmt);
  white-space: nowrap;
  align-self: center;
  flex: 0 0 auto;
}
/* T8: Aus einer Beanstandung ein Vorgang. Sichtbar nur bei mittel/schlecht —
   über data-zustand, das der Zustandsgriff schon pflegt; kein zweiter Weg, den
   Mangel zu erkennen. */
.beg-massnahme { display: none; margin-top: var(--raum-1); }
.beg-punkt-zustand[data-zustand="mittel"] .beg-massnahme,
.beg-punkt-zustand[data-zustand="schlecht"] .beg-massnahme {
  display: flex;
  align-items: center;
  gap: var(--raum-2);
  flex-wrap: wrap;
}
.beg-massnahme-da {
  font-size: var(--groesse-hinweis);
  color: var(--st-inarbeit-text);
  font-weight: var(--schnitt-halb);
}
@media (max-width: 767px) { button.beg-massnahme-neu { min-height: 44px; } }
/* `button.` und nicht nur `.beg-zustand`: derselbe Gewichtungsfall wie bei
   input.beg-haken darueber. Ein blosser Klassenselektor (0,1,0) verliert gegen
   jede Regel, die den Grundbaustein `button` mitnennt — und davon gibt es in
   dieser Datei mehrere. */
button.beg-zustand {
  min-height: 44px;
  min-width: 4.6rem;
  padding: 0 var(--raum-2);
  border: 1px solid var(--linie);
  border-radius: var(--radius-feld);
  background: var(--flaeche-vertieft);
  color: var(--text-zweit);
  font-size: var(--groesse-hinweis);
  font-weight: var(--schnitt-halb);
  cursor: pointer;
  /* Kein Warten auf ein moegliches Doppeltippen: iOS haelt sonst 300 ms lang
     die Antwort zurueck, und bei 26 Punkten sind das acht Sekunden Zoegern. */
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}
/* Der gewaehlte Zustand traegt Farbe. Die uebrigen bleiben grau — sonst
   leuchtet die Liste bunt und man sieht nicht mehr, wo etwas ist.
   KEINE NEUEN FARBEN: die Zustandspaare --st-*-flaeche/--st-*-text gibt es
   schon, sie sind fuer Hell und Dunkel getrennt gesetzt und in der Uebergabe
   auf Kontrast geprueft (siehe den Block bei --st-hoch-flaeche in style.css).
   Ein eigenes gruen/gelb/rot waere ein viertes Farbvokabular fuer denselben
   Zweck — und in einem der beiden Themen falsch. */
/* Der Ring in der EIGENEN Textfarbe macht „gedrueckt" lesbar, ohne sich auf den
   Farbton zu verlassen. Am Bild gefunden: „Entfaellt" benutzt die neutralen
   Zustandsfarben, und die liegen im dunklen Thema so nah an der Ruhefarbe der
   Knoepfe (--flaeche-vertieft / --text-zweit), dass gedrueckt und ungedrueckt
   gleich aussahen. Damit war „bewusst als entfaellt markiert" nicht von „noch
   nicht angesehen" zu unterscheiden — genau die Unterscheidung, auf die es bei
   einer Begehung ankommt, und dieselbe, die im Server als Kommentar steht
   („Der leere Wert ist NICHT in Ordnung").
   Der Ring hilft ausserdem dem, der Rot und Gruen nicht auseinanderhaelt. */
button.beg-zustand[aria-pressed="true"] {
  border-color: transparent;
  box-shadow: inset 0 0 0 2px currentColor;
  font-weight: var(--schnitt-fett);
}
button.beg-zustand-gut[aria-pressed="true"] {
  background: var(--st-erledigt-flaeche); color: var(--st-erledigt-text);
  border-color: var(--st-erledigt-linie);
}
button.beg-zustand-mittel[aria-pressed="true"] {
  background: var(--st-offen-flaeche); color: var(--st-offen-text);
  border-color: var(--st-offen-linie);
}
button.beg-zustand-schlecht[aria-pressed="true"] {
  background: var(--st-hoch-flaeche); color: var(--st-hoch-text);
  border-color: var(--st-hoch-text);
}
button.beg-zustand-entfaellt[aria-pressed="true"] {
  background: var(--st-neutral-flaeche); color: var(--st-neutral-text);
  border-color: var(--linie);
}
/* Eine Beanstandung soll man beim Durchscrollen FINDEN, ohne zu lesen. */
.beg-punkt-zustand[data-zustand="mittel"]   { border-left: 3px solid var(--st-offen-linie); }
.beg-punkt-zustand[data-zustand="schlecht"] { border-left: 3px solid var(--st-hoch-text); }
/* Ein beurteilter Zustandspunkt tritt NICHT zurueck wie ein abgehakter Haken:
   „schlecht" ist erledigt im Sinne von beurteilt und trotzdem das Wichtigste
   auf der Seite. */
.beg-punkt-zustand.erledigt { background: var(--flaeche-karte); }
.beg-punkt-zustand.erledigt .beg-punkt-text { color: var(--text); }

/* Die Bemerkung erscheint nur, wenn sie gebraucht wird. */
.beg-punkt-zustand .beg-punkt-zeile { display: none; }
.beg-punkt-zustand .beg-punkt-zeile.offen { display: flex; }

/* ============================================================================
   T2 (31.08.2026) — DIE AUSWAHL NEBEN DEM ZUSTAND (Heizung: Gas/Öl)
   ============================================================================
   Anlass: „Bei der Heizung soll noch die Auswahl zwischen Gas und Öl hin."
   Eine eigene Zeile UNTER dem Kopf, nicht in der Zustandsreihe — fünf, sechs
   Ziele auf einer Breite brachen am Bild schon „Schlecht" mitten im Wort ab.
   Gas und Öl sind KEIN Zustand: sie tragen deshalb nicht die gut/schlecht-Farben,
   sondern das neutrale „ausgewählt"-Paar. Der Ring in der eigenen Textfarbe macht
   die Wahl auch ohne Farbunterschied lesbar — dieselbe Lösung wie bei den
   Zustandsknöpfen, und dieselbe Hilfe für den, der Rot und Grün nicht trennt. */
.beg-auswahl {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--raum-1);
  flex-basis: 100%;
  margin: var(--raum-1) 0;
}
.beg-auswahl-lbl {
  font-size: var(--groesse-winzig);
  color: var(--text-gedimmt);
  margin-right: var(--raum-1);
}
/* `button.` aus demselben Grund wie bei button.beg-zustand: ein blosser
   Klassenselektor (0,1,0) verliert gegen jede Regel, die `button` mitnennt. */
button.beg-opt {
  min-height: 44px;
  padding: 0 var(--raum-3);
  border: 1px solid var(--linie);
  border-radius: var(--radius-feld);
  background: var(--flaeche-vertieft);
  color: var(--text-zweit);
  font-size: var(--groesse-hinweis);
  font-weight: var(--schnitt-halb);
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}
button.beg-opt[aria-pressed="true"] {
  background: var(--st-aktiv-flaeche);
  color: var(--st-aktiv-text);
  border-color: transparent;
  box-shadow: inset 0 0 0 2px currentColor;
  font-weight: var(--schnitt-fett);
}

/* ============================================================================
   T4 (01.09.2026) — UNTERSCHRIFTEN AUF DEM IPAD
   ============================================================================
   Zwei Zeichenfelder nebeneinander, auf schmalen Geräten untereinander. Der
   Canvas IST das Zeichenfeld: touch-action:none, sonst schiebt der Finger die
   Seite, statt zu unterschreiben — der eine Fehler, der ein Unterschriftsfeld
   auf dem Tablet unbrauchbar macht. */
.us-felder {
  display: flex;
  flex-wrap: wrap;
  gap: var(--raum-3);
}
.us-feld {
  flex: 1 1 260px;
  min-width: 0;
}
.us-kopf {
  font-size: var(--groesse-hinweis);
  font-weight: var(--schnitt-halb);
  color: var(--text-zweit);
  margin-bottom: var(--raum-1);
}
.us-eingaben {
  display: flex;
  gap: var(--raum-2);
  margin-bottom: var(--raum-1);
}
.us-eingaben .us-name { flex: 1 1 auto; min-width: 0; }
.us-eingaben .us-datum { flex: 0 0 auto; }
.us-pad {
  display: block;
  width: 100%;
  height: 120px;
  /* Immer helles „Papier". Am Bild im dunklen Thema gefunden: mit --flaeche-karte
     (dort dunkel) war die dunkle Tinte kaum zu sehen — eine Unterschrift, die man
     beim Schreiben nicht sieht, ist unbrauchbar. Der Canvas selbst bleibt
     transparent; dieses Weiß ist nur die Anzeige, das exportierte PNG trägt nur
     die Striche (dunkel) und passt so auf das weiße PDF. */
  background: #f7f6f2;
  border: 1px dashed var(--linie-stark);
  border-radius: var(--radius-feld);
  touch-action: none;
  /* Ein Zeichenzug ist keine Textauswahl. Ohne das markierte das Unterschreiben
     auf dem iPad den umliegenden Text (Lucas Test 01.09.). */
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
  cursor: crosshair;
}
/* Während eines Zugs (Klasse wird in usPadsBinden gesetzt) markiert im ganzen
   Dialog nichts — der sichere Riegel, falls die Auswahl doch am Feld vorbei
   anspringt. Nur für die Dauer des Zeichnens, danach ist alles wieder wählbar. */
body.zeichnet-us,
body.zeichnet-us * {
  user-select: none !important;
  -webkit-user-select: none !important;
}
.us-zeile {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--raum-2);
  margin-top: var(--raum-1);
}
.us-hinweis {
  font-size: var(--groesse-winzig);
  color: var(--text-gedimmt);
}
@media (max-width: 767px) {
  .us-feld { flex: 1 1 100%; }
  .us-pad { height: 140px; }
  .us-zeile .knopf { min-height: 44px; }
}

.beg-sammel {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--raum-2);
  margin-bottom: var(--raum-3);
}
.beg-sammel-hinweis {
  font-size: var(--groesse-winzig);
  color: var(--text-gedimmt);
}

/* ---- Der zugeklappte Rest ---- */
/* Zaehlerstaende und Raeume sind die alten Freitextfelder mit senkrechten
   Strichen. Sie bleiben — sie sind der einzige Weg, einen Zaehlerstand in die
   Historie zu bekommen — stehen aber zugeklappt, weil sie am Schreibtisch
   gefuellt werden und nicht im Keller. */
.beg-mehr {
  margin: var(--raum-4) 0;
}
.beg-mehr-kopf {
  cursor: pointer;
  padding: var(--raum-2) 0;
  font-size: var(--groesse-hinweis);
  font-weight: var(--schnitt-halb);
  color: var(--text-zweit);
}

/* T1: Die Zustandsknoepfe brauchen ihre Breite. Passen Text und vier Knoepfe
   nicht nebeneinander, gehoeren die Knoepfe unter den Text und teilen sich die
   Zeile zu gleichen Teilen — vier gleich breite Ziele trifft man blind, vier
   ungleiche nicht.
   Die Grenze steht bei 1023 px und nicht bei 767: die Zeile bricht schon auf
   dem iPad im Hochformat, und dieser Fehler ist bei LV in P4 schon einmal
   gemacht worden (Deckel in der 767er-Stufe, das iPad fiel heraus). */
@media (max-width: 1023px) {
  .beg-wahl {
    flex: 1 1 100%;
    margin-left: 0;
    margin-top: 0;
    margin-bottom: var(--raum-1);
  }
  button.beg-zustand {
    flex: 1 1 0;
    min-width: 0;
  }
  /* Der Notizknopf teilt sich die Reihe NICHT zu gleichen Teilen mit den vier
     Zustaenden — er ist ein Symbol und braucht die Breite eines Symbols. Ohne
     `flex: none` schrumpfte er die vier Beschriftungen daneben mit. */
  .beg-punkt-notiz { flex: none; }
}

@media (max-width: 767px) {
  /* Fingermass, und die Bemerkung darf zwei Zeilen hoch sein: eine einzelne
     Zeile laesst auf dem Telefon nach fuenf Woertern nichts mehr sehen. */
  .beg-mehr-kopf {
    min-height: 44px;
    display: flex;
    align-items: center;
  }
  .beg-bemerkung {
    /* 16 px ist keine Geschmacksfrage: darunter zoomt iOS beim Antippen eines
       Feldes in die Seite hinein und kommt nicht von allein zurueck. */
    font-size: 16px;
  }
  .beg-punkt-foto,
  .beg-punkt-weg,
  .beg-punkt-notiz {
    min-height: 44px;
  }
}

/* ---- P5, am Bild korrigiert: der Haken stand ÜBER dem Text ----
   `.modal label { display: flex; flex-direction: column }` gilt fuer JEDES
   Label im Dialog — dort ist es richtig (Beschriftung ueber dem Feld). Ein
   Checklistenpunkt ist aber ein Label, bei dem Kaestchen und Text
   NEBENEINANDER gehoeren. `.beg-punkt-kopf` allein (0,1,0) verlor gegen
   `.modal label` (0,2,0); der Selektor nennt den Dialog deshalb mit. */
.modal .beg-punkt-kopf {
  flex-direction: row;
  align-items: flex-start;
  gap: var(--raum-3);
  margin-bottom: 0;
  font-weight: var(--schnitt-normal);
}
/* Dieselbe Falle beim Textfeld: `.modal label` setzt einen Abstand nach unten,
   den die Punktzeile nicht braucht — sie sitzt schon in einer Karte. */
.modal .beg-punkt-zeile {
  margin-bottom: 0;
}

/* ---- P5: die Knopfleiste eines Dialogs auf schmalen Geraeten ----
   Am Bild gefunden, mit dem Begehungsdialog: vier Knoepfe (Schliessen, PDF,
   Abschliessen, Speichern) sind zusammen 381 px breit und standen in einer
   Leiste ohne Umbruch — „Schliessen" lag 96 px ausserhalb.
   Es betrifft nicht nur diesen Dialog: jeder Dialog mit drei oder mehr
   Knoepfen hat dasselbe Problem, und deshalb steht die Regel am Grundbaustein
   und nicht an der Begehung. */
@media (max-width: 1023px) {
  .modal-aktionen {
    flex-wrap: wrap;
  }
}

/* ---- P6: Woher ein Foto der Begehung stammt ----
   Nur fuer Fotos, die noch im Dokumenteneingang liegen, weil es zum Objekt
   noch keine Ablage gibt. Ein Foto ohne diese Marke liegt in der Ablage —
   die Abwesenheit ist die zweite Auskunft, deshalb steht dort nichts. */
.beg-foto-herkunft {
  position: absolute;
  left: var(--raum-1);
  bottom: var(--raum-1);
  padding: 0 var(--raum-1);
  border-radius: var(--radius-feld);
  background: var(--flaeche-abdunklung);
  color: var(--text);
  font-size: var(--groesse-winzig);
  font-weight: var(--schnitt-halb);
}

/* ===== P8: DIE VORSCHAU ====================================================
   ANLASS, wörtlich: „Die Vorschauen die man sieht müssen deutlich grösser. Ich
   möchte sehen was für eine PDF oder was für ein Bild das ist ohne darauf zu
   klicken. Also grössere Vorschaukachel + sichtbarer Inhalt."

   GEMESSENER AUSGANGSZUSTAND: LV listet an acht Stellen Dateien auf. Fünf
   zeigten kein Bild — darunter die Ablageansicht und der Dokumenteneingang.
   Die drei mit Bild taten es auf drei Arten, und die Vorschaufläche war
   überall dieselbe: rund 122 x 90 px, unabhängig von der Bildschirmgrösse,
   weil das Raster mit auto-fill Spalten NACHLEGT statt sie zu verbreitern.

   Am Server hatten 6 von 131 Dateien überhaupt eine Miniatur (nur PDF, nur in
   zwei von fünf Tabellen). Die Kachelgrösse war deshalb nur die halbe Antwort;
   die andere steht im Server: die Spalte `thumb` gibt es jetzt in allen fünf
   Tabellen, und Bilder bekommen ebenfalls eine.

   Was in diesem Block steht, ist die HÜLLE — wie gross ein Ort seine Vorschau
   zeigt. WAS gezeigt wird, entscheidet vorschauBild() in app.js, einmal für
   alle acht Stellen. */

/* Das Bild selbst, ausserhalb der Kachel. Innerhalb greift .datei-kachel img
   aus style.css — dieselbe Regel dort zu wiederholen wäre genau der Fall, den
   die Stilprüfung meldet: derselbe Selektor in beiden Blättern, und dann
   entscheidet allein die Ladereihenfolge. */
.vorschau-bild {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  background: var(--flaeche-karte);
}
.vorschau-bild.vorschau-seite {  object-position: top center; }

/* Die Ablageliste. Sie bleibt eine Tabelle — daran hängen Sortierung, Filter
   und die Sammelauswahl —, bekommt aber eine erste Spalte mit echtem Inhalt.
   56 px reichen, um eine Rechnung von einem Foto von einem Protokoll zu
   unterscheiden; eine Kachel in Kachelgrösse machte die Liste viermal so lang. */
.abl-vorschau {
  width: 56px;
  aspect-ratio: 3 / 4;
  padding: 0;
  border: 1px solid var(--linie);
  border-radius: var(--radius-feld);
  overflow: hidden;
  background: var(--flaeche-karte);
  cursor: pointer;
}
.abl-vorschau:hover {  border-color: var(--gold); }
/* Eine Zeile ohne eigene Datei — sie liegt nur in Drive, LV kennt sie nicht
   und hat nichts zu zeigen. Der Platz bleibt trotzdem stehen, sonst rutschten
   die Namen dieser Zeilen als einzige nach links. */
.abl-vorschau-leer {  border-style: dashed;  cursor: default; }
.abl-vorschau .datei-icon {
  height: 100%;
  font-size: var(--groesse-winzig);
}

/* Der Dokumenteneingang. Hier entscheidet ein Mensch, WAS das Dokument ist —
   deshalb steht die Vorschau gross neben den Feldern und nicht als Randnotiz. */
.eingang-karte {
  display: grid;
  grid-template-columns: 120px minmax(0, 1fr);
  gap: var(--raum-4);
  align-items: start;
}
.eingang-karte > *:not(.eingang-vorschau) {  grid-column: 2; }
.eingang-vorschau {
  grid-column: 1;
  grid-row: 1 / span 99;
  display: block;
  width: 120px;
  aspect-ratio: 3 / 4;
  border: 1px solid var(--linie);
  border-radius: var(--radius-feld);
  overflow: hidden;
  background: var(--flaeche-karte);
}
.eingang-vorschau:hover {  border-color: var(--gold); }
.eingang-vorschau .datei-icon {  height: 100%; }

@media (max-width: 767px) {
  /* Auf dem Telefon nebeneinander wäre beides zu schmal: 120 px Bild und der
     Rest für sechs Auswahlfelder. Die Vorschau geht deshalb über die volle
     Breite und wird flacher — sie soll das Dokument erkennbar machen, nicht
     die Felder aus dem Bild schieben. */
  .eingang-karte {  grid-template-columns: minmax(0, 1fr); }
  .eingang-karte > *:not(.eingang-vorschau) {  grid-column: 1; }
  .eingang-vorschau {  grid-row: auto;  width: 100%;  aspect-ratio: 16 / 9; }
  .eingang-vorschau .vorschau-bild {  object-position: top center; }
  /* Die Kacheln in der Akte: zwei nebeneinander statt einer Spalte voller
     Briefmarken. Bei 375 px sind das rund 165 px je Kachel — deutlich mehr als
     die 122 px, die vorher auf dem GROSSEN Schirm zu sehen waren. */
  .datei-raster {  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
}

/* ===== P9: DIE SCALARA-WARTESCHLANGE =======================================
   Eine Zeile je Dokument: Kästchen, Vorschau, Text, Wege. Bewusst dieselbe
   Anordnung wie die Ablageliste — es ist derselbe Gegenstand, nur anders
   gefragt, und wer die eine bedienen kann, kann die andere. */
.scal-zeile {
  display: grid;
  grid-template-columns: auto 56px minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--raum-3);
  padding: var(--raum-2) var(--raum-3);
}
.scal-zeile + .scal-zeile {  border-top: 1px solid var(--linie); }
.scal-zeile:hover {  background: var(--flaeche-vertieft); }
/* Die Gewichtungsfalle: input[type="checkbox"] wiegt (0,1,1) und schlägt jede
   blosse Klasse (0,1,0). Genau daran ist die Regel für die Ablage-Kästchen aus
   P3 gescheitert — sie stand vier Wochen da und hat nie gewirkt. Deshalb
   `input.` davor und nicht nur die Klasse. */
input.scal-wahl {  width: 24px;  height: 24px;  margin: 0;  flex: none; }
/* Steht an Zeilen, die kein Kästchen tragen (schon abgehakt oder
   zurückgestellt). Ohne diesen Platzhalter rutschten genau diese Zeilen als
   einzige nach links und die Liste hätte zwei Kanten. */
.scal-wahl-leer {  display: block;  width: 24px; }
.scal-vorschau {
  display: block;
  width: 56px;
  aspect-ratio: 3 / 4;
  border: 1px solid var(--linie);
  border-radius: var(--radius-feld);
  overflow: hidden;
  background: var(--flaeche-karte);
}
.scal-vorschau:hover {  border-color: var(--gold); }
.scal-vorschau .datei-icon {  height: 100%;  font-size: var(--groesse-winzig); }
.scal-text {  display: flex;  flex-direction: column;  gap: 2px;  min-width: 0; }
.scal-name {  color: var(--text);  text-decoration: none;  overflow-wrap: anywhere; }
.scal-name:hover {  text-decoration: underline; }
.scal-meta {  font-size: var(--groesse-klein);  color: var(--text-gedimmt); }
.scal-wege {  display: flex;  gap: var(--raum-2);  justify-content: flex-end; }

@media (max-width: 767px) {
  /* Die Wege wandern unter den Text, statt ihn zusammenzudrücken — dieselbe
     Bewegung wie in der Ablageliste. Vorschau und Kästchen bleiben oben. */
  .scal-zeile {  grid-template-columns: auto 56px minmax(0, 1fr); }
  .scal-wege {  grid-column: 2 / -1;  justify-content: flex-start;  flex-wrap: wrap; }
}

/* P9: Zwei Knöpfe rechts in einer Titelleiste. Die Titelleiste selbst ist
   `space-between` — zwei Knöpfe direkt darin würden auseinandergezogen, einer
   klebte am Titel. Bis hierher stand dafür ein Inline-Stil im Markup (im
   Dokumenteneingang); der ist damit ersetzt und nicht bloss ergänzt. */
.titel-knoepfe {  display: flex;  gap: var(--raum-3);  align-items: center; }

/* ===== T12: OFFLINE-ERFASSUNG (Stufe B) ======================================
   Ein Punkt, dessen Handgriff noch auf Empfang wartet, bekommt einen gestrichelten
   Rand und das Wort „wartet" hinter dem Bauteil — ruhig, kein Alarm: der Tipp ist
   nicht verloren, er ist unterwegs. Die Zeile über der Checkliste zählt die
   wartenden Schritte des offenen Protokolls und trägt den Knopf zum Nachschicken. */
.beg-punkt.beg-ausstehend { border-style: dashed; }
.beg-punkt.beg-ausstehend .beg-punkt-text::after {
  content: " · wartet";
  font-size: var(--groesse-winzig);
  font-weight: var(--schnitt-halb);
  color: var(--text-gedimmt);
}
.beg-ausstand {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--raum-2);
  margin: 0 0 var(--raum-2);
  padding: var(--raum-2) var(--raum-3);
  border: 1px dashed var(--linie);
  border-radius: var(--radius-feld);
  background: var(--flaeche-vertieft);
  font-size: var(--groesse-hinweis);
  color: var(--text-zweit);
}
/* Ein Foto, das noch nicht beim Server ist: aus der Datei auf dem Gerät gezeigt,
   leicht zurückgenommen, mit derselben Herkunftsmarke wie „Eingang". */
.datei-kachel.beg-foto-wartet { outline: 1px dashed var(--linie); }
.datei-kachel.beg-foto-wartet img { opacity: .75; }
/* Die Ausstände in der Offline-Auskunft: derselbe Zeilenbau wie die Diagnose. */
.offline-ausstaende { margin-top: var(--raum-3); }