/* ============================================================================
   Leitstand -- das Layout der Startseite.

   WARUM EIGENE DATEI. Die Startseite ist keine Kachelsammlung, sondern eine
   Lage: was ist der Stand, wo klemmt es, wo geht es weiter. Die guten Teile der
   alten dashboard.css -- .sec/.sec-head, .hint, .doc-empty, .pagefoot -- sind
   hier uebernommen, damit der Leitstand eigenstaendig steht.

   ---------------------------------------------------------------------------
   GESTALTUNGSREGELN (Neufassung 18.09.2026)

   Vorher sah die Seite aus wie ein Verwaltungsbrett von 2015: farbige Rahmen um
   jede Kennzahl, ein Schatten unter jeder Flaeche, vierundzwanzig Bedienelemente
   in einer Reihe. Jedes Mittel fuer sich war begruendet, zusammen ergaben sie
   Laerm. Fuenf Regeln halten das jetzt zusammen:

   G1  FARBE MARKIERT EIN PROBLEM, NIE EINEN ERFOLG.
       Eine Null ohne Befund ist neutral -- kein gruener Rahmen, kein gruener
       Wert. Gruen sagen wir nur dort, wo Gruen METHODIK ist (AP "Niedrig",
       Reifegrad-Segment), nicht als Lob. Wer Erfolg einfaerbt, verbraucht die
       Aufmerksamkeit, die der echte Alarm braucht.

   G2  EINE FLAECHENEBENE.
       Weisse Flaeche, Haarlinie, Radius -- fertig. Kein Schatten im Ruhezustand.
       Schatten (und Mint) markieren ANFASSBARKEIT und erscheinen erst beim
       Ueberfahren. Vorher trug jede Karte dauerhaft einen Schatten, wodurch
       keine mehr hervorstach.

   G3  HIERARCHIE UEBER GROESSE UND RUHE, NICHT UEBER RAHMEN.
       Was wichtig ist, ist groesser oder steht allein. Ein Rahmen ist eine
       Behauptung von Wichtigkeit, die sich nicht steigern laesst.

   G4  8-PX-RASTER. Abstaende sind 4, 8, 12, 16, 24, 32, 40. Keine krummen
       Zwischenwerte -- die sind der Grund, warum Seiten "irgendwie unruhig"
       wirken, ohne dass man den Finger drauflegen kann.

   G5  ZAHLEN SIND TABELLARISCH UND RECHTSBUENDIG, wo sie verglichen werden.
       font-variant-numeric: tabular-nums ueberall, wo Ziffern untereinander
       stehen -- sonst wandert das Komma und die Spalte flimmert.

   ---------------------------------------------------------------------------
   DIE ZWEI SEITENREGELN, DIE NUR IM STYLESHEET LEBEN

     R1  "0 heisst geprueft und nichts gefunden. Ein Strich heisst nicht
         gemessen." Der Strich (.ls-strich) und das nicht messbare Segment
         (.rg-unmessbar) muessen sich vom Wert 0 UNTERSCHEIDEN -- und zwar nicht
         allein durch Farbe: .rg-unmessbar ist grau UND schraffiert, damit die
         Unterscheidung auch ohne gute Farbtrennung ankommt.
     R5  Der Weg in den Arbeitsplatz haengt nie an einer Kennzahl. Fehlt eine
         Kennzahl, wird ihre Spalte AUSGEBLENDET statt auf 0 gesetzt. Genau
         dafuer steht die [hidden]-Regel weiter unten: ein Block mit
         display:flex ignoriert das Attribut sonst stillschweigend.

   KEIN FARBWERT IN DIESER DATEI. Alle Farben kommen als var(--...) aus
   tokens.css. Die Datenfarben sind Methodik (Regelwerk K7-A), kein Geschmack.
   Ein Waechter in leitstand-css.test.mjs liest die Datei als Text und faellt
   um, sobald doch einer auftaucht.

   KEIN DARK-MODE. Das Projekt hat keinen.
   ============================================================================ */
@import "./base.css";

/* ---------------------------------------------------------------------------
   1  Rahmen, Seitengeruest, Sticky-Footer
   --------------------------------------------------------------------------- */

/* Die Seite darf NIE waagerecht scrollen. Breite Inhalte (die Liste, die
   Diagramme) scrollen in ihrem eigenen Behaelter -- siehe .vt-scroll unten. */
body { overflow-x: hidden; }

/* Sticky-Footer: der App-Behaelter fuellt mindestens die Viewporthoehe, der
   Inhalt dehnt sich, die Fusszeile sitzt unten. */
#app { min-height: 100vh; display: flex; flex-direction: column; }

.ls {
  width: 100%; max-width: 1240px; margin: 0 auto; padding: 0 32px 56px;
  flex: 1 0 auto; min-width: 0;
}

/* R5/R7 -- ohne diese Zeile bliebe ein ausgeblendeter Block sichtbar: das
   display:flex/grid der Regeln unten ueberschreibt das [hidden]-Attribut. */
.ls[hidden], .ls [hidden], .ov[hidden], .ov [hidden] { display: none !important; }

/* R7 -- nicht gedeckte Aktionen sind abgeschaltet MIT Begruendung im title. */
.ls button:disabled[title], .ov button:disabled[title] { cursor: help; }

/* --- Seitenkopf -------------------------------------------------------------
   EINE Zeile, kein Hero. Wer die Startseite oeffnet, will wissen, was zu tun
   ist -- nicht begruesst werden. Die Markenzeile darueber ist bewusst leise:
   sie ist eine Signatur, keine Ueberschrift. Vorher stand sie in Mint und fett
   und war damit das Auffaelligste der ganzen Seite. */
.ls-kopf {
  padding: 40px 0 20px; margin-bottom: 24px;
  border-bottom: 1px solid var(--border-soft);
}
.ls-kopf .eyebrow {
  font-size: 10px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase;
  color: var(--brand-grey); margin: 0 0 10px;
}
.ls-kopf p { color: var(--text-muted); font-size: 14px; line-height: 1.5; margin: 0; }
.ls-kopf p b {
  font-family: var(--font-display); font-weight: 600; font-size: 20px;
  color: var(--brand-navy); letter-spacing: -.01em;
}
.ls-kopf .badge { margin-left: 4px; vertical-align: 1px; }

/* Der Satz, der an die Stelle einer Zahl tritt (R2: keine AP-Zahl ohne Ketten).
   Er sieht bewusst NICHT wie eine Fehlermeldung aus -- fehlende Ketten sind ein
   Datenstand, kein Defekt. */
.ls-hinweis {
  padding: 14px 16px; margin: 16px 0; border-radius: var(--radius);
  background: var(--bg-panel); border: 1px solid var(--border-soft);
  border-left: 2px solid var(--brand-grey-2);
  color: var(--text-muted); font-size: var(--fs-sm); line-height: 1.5;
}
.ls-hinweis b { color: var(--text); font-weight: 600; }

/* R1 -- die Darstellung von "nicht gemessen". Gedankenstrich, gedaempft, mit
   Hilfe-Cursor: die Begruendung steht im title. Niemals eine 0. */
.ls-strich {
  color: var(--text-faint); cursor: help; font-weight: 400;
  letter-spacing: .04em; text-decoration: none;
}

/* Abschnittsgeruest. Mehr Luft als vorher (40 statt 26): Abschnitte trennen
   sich durch Abstand, nicht durch Linien oder Kaesten (G3). */
.sec { margin: 40px 0; }
.sec-head { display: flex; align-items: baseline; gap: 12px; margin: 0 0 16px; flex-wrap: wrap; }
.sec-head h3 {
  font-size: 18px; margin: 0; color: var(--text); font-weight: 600;
  letter-spacing: -.01em;
}
.hint { color: var(--text-muted); font-size: var(--fs-xs); line-height: 1.45; }

/* ---------------------------------------------------------------------------
   2  Lagezeile -- die Kacheln

   G1 IN REINFORM. Vorher trug jede Kachel einen farbigen RAHMEN (rot, orange,
   gruen) plus eine farbige Zahl. Vier bunt umrandete Kaesten nebeneinander
   sagen nichts mehr, weil alles gleich laut ist. Jetzt: eine Flaeche, eine
   Haarlinie -- und der einzige Farbtraeger ist die ZAHL, und auch die nur,
   wenn sie ein Problem meldet.
   --------------------------------------------------------------------------- */
.ls-lage {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(212px, 1fr));
  gap: 12px; margin: 0 0 8px;
}
.ls-kachel {
  display: flex; flex-direction: column; align-items: flex-start; gap: 4px; min-width: 0;
  background: var(--bg); border: 1px solid var(--border-soft); border-radius: var(--radius);
  padding: 18px 20px 16px;
  /* Die Kachel IST ein <button> (Klick setzt den Filter der Uebersicht), und ein
     Button zentriert seinen Text von Haus aus. Ohne diese Zeile stehen vier
     mittige Kaesten in einer sonst durchweg linksbuendigen Seite. */
  text-align: left;
  transition: border-color .12s, box-shadow .12s;
}
/* G2 -- Schatten und Mint erscheinen erst beim Ueberfahren; sie sagen
   "anfassbar", nicht "wichtig". */
a.ls-kachel { text-decoration: none; color: inherit; }
a.ls-kachel:hover, button.ls-kachel:hover {
  border-color: var(--brand-grey-2); box-shadow: var(--shadow);
}
.ls-kachel-zahl {
  font: 600 32px/1.05 var(--font-display); color: var(--brand-navy);
  font-variant-numeric: tabular-nums; letter-spacing: -.02em;
}
.ls-kachel-text { font-size: var(--fs-sm); color: var(--text); line-height: 1.35; }
/* R4 -- der Nenner steht neben der Zahl, nicht in einer Fussnote. */
.ls-kachel-neben {
  font-size: var(--fs-xs); color: var(--text-faint); font-variant-numeric: tabular-nums;
  line-height: 1.4;
}
/* Nur die Zahl traegt die Farbe -- kein Rahmen, keine Flaeche (G1/G3). */
.ls-kachel.warn .ls-kachel-zahl { color: var(--warn); }
.ls-kachel.danger .ls-kachel-zahl { color: var(--ap-h); }
/* G1: "ok" ist AUSDRUECKLICH neutral. Die Regel steht hier, damit die
   Entscheidung sichtbar ist und niemand sie versehentlich "nachruestet" --
   ein gruener Wert fuer "nichts gefunden" waere Lob statt Information. */
.ls-kachel.ok .ls-kachel-zahl { color: var(--brand-navy); }
/* R1 in CSS: eine Kachel mit Strich ist nie alarmiert. */
.ls-kachel:has(.ls-strich) .ls-kachel-zahl { color: var(--text-faint); }

/* ---------------------------------------------------------------------------
   3  Fortsetzen -- der Weg zurueck in die Arbeit
   R5: diese Pillen haengen an KEINER Kennzahl. Sie stehen auch dann, wenn die
   ganze Lage aus Strichen besteht.
   --------------------------------------------------------------------------- */
.ls-fort {
  display: flex; flex-direction: column; gap: 12px; min-width: 0;
  background: var(--bg); border: 1px solid var(--border-soft); border-radius: var(--radius);
  padding: 16px 20px; margin-top: 12px;
}
.ls-fort-kopf { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.ls-fort-kopf b { font-size: var(--fs-data); color: var(--text); font-weight: 600; }
.ls-fort-kopf .hint { margin-left: auto; }
.ls-fort-pillen { display: flex; flex-wrap: wrap; gap: 6px; min-width: 0; }
.ls-pille {
  display: inline-flex; align-items: center; gap: 6px; max-width: 100%;
  padding: 6px 12px; border: 1px solid var(--border-soft); border-radius: var(--radius-sm);
  background: var(--bg); color: var(--text-muted); font-size: var(--fs-xs);
  text-decoration: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  transition: border-color .12s, color .12s, background-color .12s;
}
.ls-pille:hover { border-color: var(--brand-mint); background: var(--brand-mint-soft); color: var(--text); }
.ls-pille .badge { font-size: 9.5px; }

/* ---------------------------------------------------------------------------
   4  Risiko -- Matrix und Verteilung (Diagramme aus charts.js/charts.css)

   DAS LOCH. Vorher waren es zwei gleich breite Spalten: links ein 20 px hoher
   Balken, rechts eine 230 px hohe Matrix -- darunter links 200 px Nichts. Die
   Fussnote stand als drittes Geschwister UNTER beiden und konnte die Luecke
   nicht fuellen.
   Jetzt ist .ls-risiko selbst das Raster und .ls-risiko-spalten loest sich per
   `display: contents` auf, ohne dass ein Render-Modul angefasst wurde.

   DREI ANLAEUFE, und die ersten zwei waren derselbe Fehler.
   (1) Fussnote in die linke Spalte: die Matrix bestimmt weiter die Zeilenhoehe,
       also klaffte es nun zwischen Legende und Fussnote.
   (2) Balken mittig zur Matrix: das Loch wanderte nach OBEN, zwischen
       Ueberschrift und Balken.
   Beide Male habe ich die Luecke verschoben statt sie zu fuellen, weil die
   linke Spalte schlicht wenig zu sagen hat -- ein Balken und drei Pillen gegen
   eine 300 px hohe Matrix.

   (3) Also andersherum aufgeteilt, NEBENEINANDER statt UNTEREINANDER:
       Zeile 1  der Balken mit seiner Legende, breit ueber beide Spalten
       Zeile 2  die Matrix links, die Fussnote rechts daneben
   Jetzt traegt jede Zelle etwas, nichts wird gestreckt, und die Lesefolge
   stimmt: erst die Verteilung, dann das Detail mit seiner Erklaerung.
   --------------------------------------------------------------------------- */
.ls-risiko {
  min-width: 0;
  display: grid; grid-template-columns: auto minmax(0, 1fr);
  column-gap: 40px; row-gap: 20px; align-items: start;
}
.ls-risiko > .sec-head { grid-column: 1 / -1; }
/* Der Eigenrand des Hinweises MUSS hier weg: das Raster liefert den Abstand
   schon ueber row-gap, beides zusammen ergibt die doppelte Luecke. Sichtbar
   wird das nur im Leerzustand (R2-Zweig), wo der Hinweis das einzige Kind ist —
   deshalb faellt es beim Bauen mit Daten nicht auf. */
.ls-risiko > .ls-hinweis { grid-column: 1 / -1; margin: 0; }
/* Die beiden Kinder werden selbst zu Rasterfeldern. */
.ls-risiko-spalten { display: contents; }
.ls-risiko-spalten > * { min-width: 0; }
/* Der Balken oben ueber die ganze Breite, aber gedeckelt: ueber 1200 px gezogen
   sieht ein gestapelter Balken aus wie eine Fortschrittsanzeige, und die
   Beschriftung in den Segmenten verliert den Bezug zur Flaeche, die sie meint. */
.ls-risiko-spalten > :first-child {
  grid-column: 1 / -1; grid-row: 2; max-width: 680px;
}
.ls-risiko-spalten > :nth-child(2) { grid-column: 1; grid-row: 3; }
.ls-risiko .ap { font-size: 10px; padding: 1px 7px; margin-left: 0; }
/* R4 auch hier: die Fussnote traegt den Nenner ("94 von 101 Ketten voll
   bewertet") und die Herkunft der Zahl, nicht eine Entschuldigung. */
.ls-fussnote {
  grid-column: 2; grid-row: 3; align-self: start;
  margin: 0; font-size: var(--fs-xs); color: var(--text-faint); line-height: 1.6;
  max-width: 54ch;
}
.ls-fussnote b { color: var(--text-muted); font-weight: 600; }

/* ---------------------------------------------------------------------------
   5  Entscheidungen -- was heute jemand in die Hand nehmen muss

   Als ruhige Liste auf eigener Flaeche. Das Datum stand vorher fett, rot und
   im Monospace -- drei Betonungen fuer eine Information. Jetzt traegt die
   Ueberfaelligkeit die Farbe und sonst nichts (G1/G3).
   --------------------------------------------------------------------------- */
.ls-entsch {
  display: flex; flex-direction: column; min-width: 0;
  background: var(--bg); border: 1px solid var(--border-soft); border-radius: var(--radius);
  overflow: hidden;
}
.ls-entsch-zeile {
  display: grid; grid-template-columns: 40px minmax(0, 1fr) 160px 124px 96px;
  gap: 12px; align-items: center;
  padding: 10px 16px; border-bottom: 1px solid var(--border-soft);
  font-size: var(--fs-sm);
}
.ls-entsch-zeile:last-child { border-bottom: none; }
.ls-entsch-zeile:hover { background: var(--bg-panel); }
/* Feste Badge-Breite: sonst wackelt die erste Spalte je nach Buchstabe. */
.ls-e-ap { display: flex; justify-content: flex-start; }
.ls-e-ap .ap, .ls-e-ap .ap-h, .ls-e-ap .ap-m, .ls-e-ap .ap-n, .ls-e-ap .ap-none {
  min-width: 28px; text-align: center; margin-left: 0;
}
.ls-e-name {
  font-weight: 500; color: var(--text);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ls-e-name a { color: inherit; text-decoration: none; }
.ls-e-name a:hover { color: var(--brand-mint); }
.ls-e-doc {
  font-size: var(--fs-xs); color: var(--text-faint);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ls-e-resp {
  font-size: var(--fs-xs); color: var(--text-muted);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ls-e-termin {
  text-align: right; font: 400 var(--fs-sm) var(--font-ui);
  font-variant-numeric: tabular-nums; color: var(--text-muted); white-space: nowrap;
}
.ls-e-termin.danger { color: var(--ap-h); font-weight: 600; }
/* R1 gilt auch in der Zeile: 411 Massnahmen haben KEINEN Termin. Dort steht ein
   Strich -- kein erfundenes Datum und keine "0 Tage ueberfaellig". */
.ls-e-termin .ls-strich { font-weight: 400; }
.ls-entsch-zeile .act-dot, .ov-zeile .act-dot { flex: 0 0 auto; vertical-align: -1px; }

/* ---------------------------------------------------------------------------
   6  Luecken -- gegen die ROLLE des Fehlers gezaehlt (R3), immer mit Nenner (R4)
   --------------------------------------------------------------------------- */
.ls-luecken {
  display: flex; flex-direction: column; min-width: 0;
  background: var(--bg); border: 1px solid var(--border-soft); border-radius: var(--radius);
  overflow: hidden;
}
.ls-l-zeile {
  display: grid; grid-template-columns: 116px minmax(0, 1fr);
  gap: 16px; align-items: baseline;
  padding: 10px 16px; border-bottom: 1px solid var(--border-soft);
}
.ls-l-zeile:last-child { border-bottom: none; }
.ls-l-zahl {
  text-align: right; font: 600 18px var(--font-display);
  font-variant-numeric: tabular-nums; color: var(--text); white-space: nowrap;
}
.ls-l-zahl .ls-strich { font-size: 18px; }
/* Der Nenner sitzt direkt hinter der Zahl ("102 von 214") -- eigen gesetzt,
   damit die Zahl traegt und der Bezug trotzdem nie fehlt. */
.ls-l-nenner {
  font: 400 var(--fs-xs) var(--font-ui); font-variant-numeric: tabular-nums;
  color: var(--text-faint); margin-left: 5px; white-space: nowrap;
}
.ls-l-text { font-size: var(--fs-sm); color: var(--text); line-height: 1.45; }
.ls-l-text .hint { display: block; margin-top: 2px; }

/* ---------------------------------------------------------------------------
   7  Wirksamkeit -- vorher/nachher je Massnahmenstand
   --------------------------------------------------------------------------- */
.ls-wirk { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.ls-wirk .ch-fig { margin: 0; }
.ls-wirk .ls-hinweis { margin: 0; }

/* ---------------------------------------------------------------------------
   8  Reifegrad -- ein Band aus sieben Segmenten (die sieben Schritte)

   R1 IN CSS: "leer" (nichts eingetragen) und "nicht messbar" (die Kennzahl
   gibt es nicht) sind ZWEI Zustaende. Sie duerfen nicht gleich aussehen, und
   sie duerfen sich nicht allein in der Farbe unterscheiden -- deshalb traegt
   .rg-unmessbar eine Schraffur. Wer Farben schlecht trennt, sieht trotzdem:
   das hier wurde nicht gemessen.

   Die Segmente waren 11 px hoch bei 3 px Abstand und wirkten als Klotzreihe.
   Jetzt flacher und mit klarerer Rundung -- ein Band, kein Balkendiagramm.
   --------------------------------------------------------------------------- */
.rg { display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px; margin: 2px 0 4px; min-width: 96px; }
.rg-seg {
  height: 8px; border-radius: 2px; cursor: help;
  background-color: var(--border-soft);
}
.rg-leer { background-color: var(--bg); box-shadow: inset 0 0 0 1px var(--border); }
.rg-teil { background-color: var(--warn); }
.rg-voll { background-color: var(--ok); }
.rg-unmessbar {
  background-color: var(--border-soft);
  background-image: repeating-linear-gradient(
    45deg,
    var(--text-faint) 0 2px,
    transparent 2px 5px
  );
}
.rg-stand {
  display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap;
  font-size: var(--fs-xs); color: var(--text-muted); font-variant-numeric: tabular-nums;
}
.rg-stand b { color: var(--text); font-weight: 600; }

/* ---------------------------------------------------------------------------
   9  Uebersicht -- Suche, Filter, Karten und die (spaeter virtualisierte) Liste

   DIE PILLENWUESTE. .ov-bar war ein flaches Flex mit sieben Geschwistern:
   Suchfeld, Filterblock (fuenf Auswahlfelder + fuenf Schaltpillen + ein
   Hinweissatz), Zaehler und vier Umschaltergruppen -- rund vierundzwanzig
   Bedienelemente, die sich in zwei Reihen selbst umbrachen. Man sah nicht, was
   FILTERT (die Menge kleiner macht) und was UMSCHALTET (dieselbe Menge anders
   zeigt).

   Jetzt drei Zeilen mit je einer Aufgabe:
     1  Suchen                          -- und rechts, wie viel uebrig ist
     2  Einschraenken (Filter)          -- Auswahlfelder, dann Schaltpillen
     3  Darstellen (Umschalter)         -- Ansicht, Revisionen, Gruppe, Sortierung
   Das Raster kommt ohne Markup-Aenderung aus; nur die vier Umschalter brauchten
   einen gemeinsamen Behaelter (.ov-modi), sonst waeren sie einzeln in die
   Spalten gerutscht.
   --------------------------------------------------------------------------- */
.ov { min-width: 0; }

.ov-bar {
  display: grid; grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px 16px; align-items: center; margin-bottom: 16px;
}
.ov-suche {
  grid-column: 1; grid-row: 1; min-width: 0;
  padding: 8px 12px; font-size: var(--fs-data);
  border: 1px solid var(--border-soft); border-radius: var(--radius-sm); background: var(--bg);
}
/* R4 -- "24 von 64", nie "24". */
.ov-zahl {
  grid-column: 2; grid-row: 1;
  font-size: var(--fs-xs); color: var(--text-faint);
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.ov-filter {
  grid-column: 1 / -1; grid-row: 2;
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px; min-width: 0;
}
.ov-filter select {
  padding: 5px 8px; font-size: var(--fs-xs); color: var(--text-muted);
  border: 1px solid var(--border-soft); border-radius: var(--radius-sm); background: var(--bg);
  max-width: 190px;
}
/* Der Hinweissatz hinter den Pillen gehoert nicht in die Reihe -- er bricht auf
   eine eigene Zeile um und bleibt leise. */
.ov-filter > .hint { flex: 1 0 100%; color: var(--text-faint); margin-top: 2px; }
.ov-chip {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 5px 12px; border: 1px solid var(--border-soft); border-radius: 999px;
  background: var(--bg); color: var(--text-muted); font-size: var(--fs-xs);
  white-space: nowrap; transition: border-color .12s, background-color .12s, color .12s;
}
.ov-chip:hover { border-color: var(--brand-grey-2); background: var(--bg-soft); }
/* G1/G3 -- ein gesetzter Filter war vorher ein voll ausgefuellter Navy-Block.
   Fuenf davon nebeneinander erschlugen die Seite. Jetzt eine ruhige Tinte mit
   klarer Kante: erkennbar gesetzt, ohne zu schreien. */
.ov-chip[aria-pressed="true"] {
  background: var(--sel-bg); border-color: var(--accent); color: var(--accent); font-weight: 600;
}
/* Die vier Umschaltergruppen (Ansicht / Revisionen / Gruppe / Sortierung). */
.ov-modi {
  grid-column: 1 / -1; grid-row: 3;
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  padding-top: 4px; border-top: 1px solid var(--border-soft);
}
/* Ein Block, keine losen Knoepfe: der Zustand soll als GRUPPE lesbar sein. */
.ov-seg {
  display: inline-flex; flex: 0 0 auto; overflow: hidden;
  border: 1px solid var(--border-soft); border-radius: var(--radius-sm); background: var(--bg);
}
.ov-seg button {
  border: 0; border-radius: 0; background: transparent;
  padding: 5px 12px; font-size: var(--fs-xs); color: var(--text-muted);
  transition: background-color .12s, color .12s;
}
.ov-seg button:hover { background: var(--bg-soft); color: var(--text); }
.ov-seg button + button { border-left: 1px solid var(--border-soft); }
/* Hier IST der satte Zustand richtig: ein Umschalter hat genau einen aktiven
   Wert, und der muss auf einen Blick lesbar sein. Anders als beim Filter, wo
   fuenf Pillen gleichzeitig gesetzt sein koennen. */
.ov-seg button[aria-pressed="true"] { background: var(--accent); color: var(--accent-ink); font-weight: 600; }

/* --- Kartenansicht ---------------------------------------------------------- */
.ov-karten { display: grid; grid-template-columns: repeat(auto-fill, minmax(268px, 1fr)); gap: 12px; }
.ov-karte {
  display: flex; flex-direction: column; gap: 8px; min-width: 0;
  background: var(--bg); border: 1px solid var(--border-soft); border-radius: var(--radius);
  padding: 16px 18px;
  transition: border-color .12s, box-shadow .12s;
}
.ov-karte:hover { border-color: var(--brand-grey-2); box-shadow: var(--shadow); }
.ov-karte .hint { line-height: 1.45; }
.ov-karte-kopf { display: flex; align-items: baseline; gap: 8px; min-width: 0; }
/* Der Titel öffnet das Dokument — und sieht seit Runde 16 auch so aus (M1210-92: fett und
   schwarz wie eine Überschrift, wurde er im Meeting nicht als Weg ins Dokument erkannt).
   Unterstrichen wie ein Verweis; daneben steht „Öffnen" als eigener Knopf (kartenAktionen). */
.ov-karte-kopf a {
  flex: 1 1 auto; min-width: 0; color: var(--accent); font-weight: 600; font-size: var(--fs-data);
  text-decoration: underline; text-decoration-color: var(--brand-grey); text-underline-offset: 2px;
  /* overflow:hidden (für die Auslassungspunkte) schnitt die Unterstreichung unter der Grundlinie ab */
  padding-bottom: 3px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ov-karte-kopf a:hover { color: var(--accent); text-decoration-color: currentColor; }
.ov-karte-kopf .badge { flex: 0 0 auto; }
/* Revisionswahl IN der Karte: eine Serie ist eine Karte, nicht fuenf. */
.ov-revwahl {
  font-size: var(--fs-xs); padding: 4px 7px; max-width: 100%;
  border: 1px solid var(--border-soft); border-radius: var(--radius-sm); background: var(--bg);
}

/* --- Listenansicht ----------------------------------------------------------
   VORAUSSETZUNG DER SPAETEREN VIRTUALISIERUNG (Kopfkommentar von vtable.js,
   Punkte 1 und 2):
     1. UNIFORME Zeilenhoehe aus EINER Quelle -- vtable.js setzt --vt-row am
        Scroll-Container, das Stylesheet leitet die Hoehe daraus ab.
     2. table-layout: fixed plus colgroup, sonst leitet der Browser die Spalten-
        breiten aus den GERADE sichtbaren Zeilen ab und die Spalten springen.
   Deshalb duerfen Datenzellen hier nicht umbrechen: eine umbrechende Zelle
   macht ihre Zeile hoeher als --vt-row und bricht Punkt 1. */
.ov .vt-scroll {
  overflow: auto; max-height: 62vh; min-height: 0;
  border: 1px solid var(--border-soft); border-radius: var(--radius); background: var(--bg);
}
.ov-tab {
  width: 100%; table-layout: fixed; border-collapse: collapse;
  font: var(--fs-sm) var(--font-ui); background: var(--bg);
}
.ov-tab th, .ov-tab td {
  text-align: left; padding: 6px 12px; border-bottom: 1px solid var(--border-soft);
  vertical-align: middle;
}
/* Spaltenkoepfe als leise Beschriftung, nicht als graue Leiste: Versalien,
   klein, gesperrt. Die Tabelle soll unter dem Kopf beginnen, nicht darin. */
.ov-tab th {
  position: sticky; top: 0; z-index: 1;
  background: var(--bg); color: var(--text-faint);
  font: 600 10px/1.2 var(--font-ui); letter-spacing: .1em; text-transform: uppercase;
  white-space: nowrap; padding-top: 10px; padding-bottom: 10px;
  border-bottom: 1px solid var(--border);
}
.ov-tab tbody tr { height: var(--vt-row, 38px); }
.ov-tab tbody td { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ov-tab tr.vt-pad td { padding: 0; border: 0; }
/* Gruppenkopf einer Serie -- traegt die Serie, nicht eine Revision. */
.ov-grp { background: var(--bg-panel); }
.ov-grp td { font-weight: 600; color: var(--brand-navy); }
.ov-zeile:hover { background: var(--bg-panel); }
.ov-zeile a { color: var(--text); text-decoration: none; font-weight: 500; }
.ov-zeile a:hover { color: var(--brand-mint); }
/* Der Name öffnet das Dokument — in der Liste wie auf der Karte als Verweis erkennbar (M1210-92;
   Gegenprüfung 13.10.2026: geändert war nur die Karte, in der Liste stand der Name weiter schwarz
   und ohne Linie, und einen Knopf „Öffnen" hat die Zeile nicht). */
.ov-zeile a[data-act="open"] {
  color: var(--accent); text-decoration: underline; text-decoration-color: var(--brand-grey); text-underline-offset: 2px;
}
.ov-zeile a[data-act="open"]:hover { color: var(--accent); text-decoration-color: currentColor; }
/* Aeltere Revision unter der aktuellen: eingerueckt und gedaempft, damit
   "aktuell" ohne zweite Beschriftung erkennbar bleibt. */
.ov-rev td { color: var(--text-muted); }
.ov-rev td:first-child { padding-left: 28px; box-shadow: inset 3px 0 0 var(--border-soft); }
/* Aufklapper der Serie. Kein eigener Rahmen -- er sitzt IN der Zeile. */
.ov-auf {
  border: 0; background: transparent; padding: 0 6px 0 0; line-height: 1;
  color: var(--brand-grey); font-size: var(--fs-sm);
}
.ov-auf:hover { background: transparent; color: var(--brand-mint); }
.ov-auf[aria-expanded="true"] { color: var(--accent); }
/* Kennzahlspalte. Fehlt die Kennzahl ganz, entfaellt die SPALTE (R5) -- sie
   wird nie mit 0 gefuellt. Ein Strich hier ist ein Einzelwert, keine Spalte.
   G5: tabellarische Ziffern, rechtsbuendig -- in der UI-Schrift statt im
   Monospace, das in einer Datenzeile wie Code aussah. */
.ov-num {
  text-align: right; font: 400 var(--fs-sm) var(--font-ui);
  font-variant-numeric: tabular-nums; color: var(--text-muted);
}
.ov-num .ls-strich { font-family: var(--font-ui); }
/* Leerzustand der Liste (auch als vtable-Leerzeile): mehrzeilig, also ohne die
   Kuerzungsregeln der Datenzeilen. */
.ov-leer, .ov-tab tr.vt-empty td {
  white-space: normal; overflow: visible; text-align: center;
  padding: 32px 16px; border: 0; color: var(--text-muted); font-size: var(--fs-sm);
}

/* Kein einziges Dokument -- fuehrt statt duerrem Hinweis. */
.doc-empty {
  text-align: center; padding: 48px 24px; background: var(--bg-panel);
  border: 1px dashed var(--border-soft); border-radius: var(--radius);
}
.doc-empty h4 { font: 600 var(--fs-h1) var(--font-display); color: var(--brand-navy); margin: 0 0 8px; }
.doc-empty p { color: var(--text-muted); font-size: 14px; margin: 0 0 16px; }

/* ---------------------------------------------------------------------------
   10  Fusszeile
   --------------------------------------------------------------------------- */
.pagefoot {
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap; flex-shrink: 0;
  padding: 20px 32px; margin-top: 24px; border-top: 1px solid var(--border-soft);
  font-size: var(--fs-xs); color: var(--text-faint); background: var(--bg);
}
.pagefoot .sig { font-family: var(--font-display); color: var(--brand-navy); font-weight: 600; }
.pagefoot .spacer { flex: 1; }

/* ---------------------------------------------------------------------------
   11  Schmales Fenster -- bei hoechstens 820px kippt alles einspaltig.
   Nicht "responsiv" um der Sache willen: der Leitstand wird auf dem Weg in die
   Besprechung am Telefon gelesen, und dort ist eine gequetschte Fuenf-Spalten-
   Zeile unlesbar.
   --------------------------------------------------------------------------- */
@media (max-width: 820px) {
  .ls { padding: 0 16px 32px; }
  .ls-kopf { padding: 24px 0 16px; margin-bottom: 16px; }
  .sec { margin: 32px 0; }
  .ls-lage { grid-template-columns: 1fr; }

  /* Das Raster der Risikozone faellt auf eine Spalte zurueck. Die festen
     Platzierungen MUESSEN dabei mit zurueckgenommen werden: ein `grid-column: 2`
     auf eine Spalte 2, die es nicht mehr gibt, legt der Browser stillschweigend
     als implizite Spalte an -- die Fussnote stuende dann rechts neben der Seite
     statt unter der Matrix. */
  .ls-risiko { grid-template-columns: minmax(0, 1fr); column-gap: 0; }
  .ls-risiko-spalten > :first-child { grid-column: 1; grid-row: auto; }
  .ls-risiko-spalten > :nth-child(2) { grid-column: 1; grid-row: auto; }
  .ls-fussnote { grid-column: 1; grid-row: auto; max-width: none; }

  /* Die Entscheidungszeile bricht um: Badge links, alles andere untereinander
     rechts. Die Spaltenbreiten von oben liessen hier je Zelle drei Woerter. */
  .ls-entsch-zeile { grid-template-columns: 40px minmax(0, 1fr); row-gap: 2px; align-items: start; }
  .ls-e-ap { grid-row: span 4; padding-top: 2px; }
  .ls-e-name, .ls-e-doc, .ls-e-resp, .ls-e-termin { grid-column: 2; text-align: left; }

  .ov-bar { grid-template-columns: minmax(0, 1fr); }
  .ov-suche, .ov-zahl { grid-column: 1; }
  .ov-zahl { grid-row: 2; }
  .ov-filter { grid-row: 3; }
  .ov-modi { grid-row: 4; }
  .ov-karten { grid-template-columns: 1fr; }
  .ov .vt-scroll { max-height: 70vh; }
}

/* ============================================================================
   Zone I — Spezialwerkzeuge und Methodik.

   HERKUNFT: diese Regeln standen bis zum 18.09.2026 in dashboard.css. Sie sind
   mitgezogen, weil leitstand-view.js die beiden Bausteine werkzeugeHtml() und
   methodikRefHtml() aus dashboard-view.js UNVERAENDERT weiterbenutzt.
   ============================================================================ */
/* --- Methodik & Referenz (einklappbar, default zu) --------------------------- */
.methodik {
  margin: 40px 0 12px; border: 1px solid var(--border-soft); border-radius: var(--radius);
  background: var(--bg); padding: 16px 20px;
}
.methodik summary {
  cursor: pointer; font: 600 var(--fs-h2) var(--font-ui); color: var(--brand-navy);
  padding: 4px 0; list-style: none;
}
.methodik summary::-webkit-details-marker { display: none; }
.methodik summary::before { content: "▸ "; color: var(--brand-grey); }
.methodik[open] summary::before { content: "▾ "; }
.methodik[open] summary { margin-bottom: 12px; }

/* 7-Schritte-Prozess */
.steps { display: grid; grid-template-columns: repeat(7, 1fr); gap: 8px; }
.step {
  position: relative; text-align: center; padding: 16px 8px 12px; border-radius: var(--radius);
  background: var(--bg); border: 1px solid var(--border-soft); opacity: .55;
}
.step.on { opacity: 1; border-color: var(--brand-grey-2); }
.step.on::after { content: ""; position: absolute; left: 12px; right: 12px; bottom: -1px; height: 2px; background: var(--brand-mint); border-radius: 2px; }
.step img { height: 34px; width: auto; }
.step .sn { display: block; font-size: 10px; font-weight: 700; color: var(--brand-grey); letter-spacing: .08em; margin-bottom: 4px; }
.step .sl { display: block; font-size: 10.5px; color: var(--text); margin-top: 6px; line-height: 1.3; }
@media (max-width: 760px) { .steps { grid-template-columns: repeat(4, 1fr); } }

/* Verb-Schaustück */
.verbs { display: flex; flex-wrap: wrap; gap: 8px; }
.verb {
  display: inline-flex; align-items: center; gap: 8px; background: var(--bg); border: 1px solid var(--border-soft);
  border-radius: 999px; padding: 5px 13px 5px 5px;
}
.verb img { height: 24px; width: 24px; border-radius: 50%; }
.verb b { font-size: var(--fs-sm); color: var(--col-function); font-weight: 700; }
.verb span { font-size: 10.5px; color: var(--text-muted); }

/* --- Spezialwerkzeuge (einklappbar, default zu) ------------------------------
   Gleiche Bauform wie .methodik: ein ruhiger, zugeklappter Block. Die Regeln
   stehen absichtlich NEBEN .methodik statt als gemeinsame Klasse: ein geteilter
   Selektor haette beim naechsten Umbau des einen den anderen mitgezogen. */
.werkzeuge {
  margin: 24px 0 12px; border: 1px solid var(--border-soft); border-radius: var(--radius);
  background: var(--bg); padding: 16px 20px;
}
.werkzeuge summary {
  cursor: pointer; font: 600 var(--fs-h2) var(--font-ui); color: var(--brand-navy);
  padding: 4px 0; list-style: none;
}
.werkzeuge summary::-webkit-details-marker { display: none; }
.werkzeuge summary::before { content: "▸ "; color: var(--brand-grey); }
.werkzeuge[open] summary::before { content: "▾ "; }
.werkzeuge[open] summary { margin-bottom: 12px; }

.tool-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; }
.tool-card {
  display: flex; flex-direction: column; gap: 4px; text-decoration: none;
  padding: 14px 16px; border: 1px solid var(--border-soft); border-radius: var(--radius);
  background: var(--bg-soft); transition: border-color .12s, box-shadow .12s;
}
.tool-card:hover { border-color: var(--brand-mint); box-shadow: var(--shadow); }
.tool-card b { color: var(--text); font-size: var(--fs-data); font-weight: 600; }
.tool-card span { color: var(--text-muted); font-size: var(--fs-xs); line-height: 1.4; }

/* ============================================================================
   Verwaltungsdialoge — Revision anlegen, Status setzen, Serie umbenennen.

   Sie haengen in der Huelle aus chrome.js (.dc-overlay/.dc-modal, Regeln in
   base.css); hier steht nur ihr Innenleben. Getrennt gehalten, weil sie eine
   andere Aufgabe haben als die Seite: nicht BERICHTEN, sondern eine Folge
   ankuendigen und bestaetigen lassen.

   G1 gilt auch hier, und zwar strenger: die einzige Farbe im Dialog ist die
   Warnung vor einem sperrenden Status. Ein Dialog, in dem drei Dinge farbig
   sind, hat keine Warnung mehr.
   ============================================================================ */
.gv { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.gv-lead { margin: 0; font-size: var(--fs-data); color: var(--text); line-height: 1.5; }
.gv-lead b { font-weight: 600; color: var(--brand-navy); }

.gv-feld { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.gv-feld > span { font-size: var(--fs-xs); color: var(--text-muted); }
.gv-feld > span i { font-style: normal; color: var(--text-faint); }
.gv-feld input {
  padding: 8px 12px; font-size: var(--fs-data); min-width: 0;
  border: 1px solid var(--border-soft); border-radius: var(--radius-sm); background: var(--bg);
}
.gv-hint { margin: -8px 0 0; font-size: var(--fs-xs); color: var(--text-faint); line-height: 1.5; }
.gv-hint b { color: var(--text-muted); font-weight: 600; }

/* Das Haekchen traegt einen ganzen Satz, keine zwei Woerter: was „Inhalt
   mitkopieren" bedeutet, sind an EXAMPLE 767 Zeilen. */
.gv-check {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 12px 14px; border: 1px solid var(--border-soft); border-radius: var(--radius);
  background: var(--bg-panel); font-size: var(--fs-sm); line-height: 1.5;
}
.gv-check input { margin-top: 2px; flex: 0 0 auto; }
.gv-check b { font-weight: 600; color: var(--text); }
.gv-check i { font-style: normal; color: var(--text-muted); }

.gv-wahlen {
  display: flex; flex-direction: column;
  border: 1px solid var(--border-soft); border-radius: var(--radius); overflow: hidden;
}
.gv-wahl {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 14px; font-size: var(--fs-sm); cursor: pointer;
  border-bottom: 1px solid var(--border-soft);
}
.gv-wahl:last-child { border-bottom: none; }
.gv-wahl:hover { background: var(--bg-panel); }
.gv-wahl i { font-style: normal; color: var(--text-faint); }
/* Kein Rot an der AUSWAHL — die Warnung kommt erst, wenn sie getroffen ist.
   Ein dauerhaft rot markierter Eintrag liest sich als „verboten", dabei ist
   „freigegeben" der Normalfall am Ende eines Vorgangs. */
.gv-wahl-sperrt span { color: var(--text-muted); }

.gv-warnung {
  margin: 0; padding: 12px 14px; border-radius: var(--radius);
  background: var(--ap-h-soft); border: 1px solid var(--ap-h);
  color: var(--text); font-size: var(--fs-sm); line-height: 1.5;
}

.gv-aktionen { display: flex; justify-content: flex-end; gap: 8px; flex-wrap: wrap; }

/* ============================================================================
   Nachtrag 19.09.2026 — was beim Umzug aus dashboard.css liegen blieb.

   Der Kopf dieser Datei behauptet, „die guten Teile der alten dashboard.css"
   seien uebernommen, und nennt .sec/.sec-head, .hint, .doc-empty, .pagefoot.
   Fuenf weitere Regelsaetze wurden weiter VERGEBEN, aber nicht mitgenommen —
   ihr Markup steht seitdem ungestylt da. Ein Stylesheet meldet das nicht: die
   Klasse ist ja im HTML, sie hat nur keine Regel. Gefunden hat es erst ein
   Abgleich der vergebenen Klassen gegen die Ladekette.
   ============================================================================ */

/* Der Dialog „Neue FMEA" war vollstaendig ungestylt: Beschriftungen und Felder
   liefen als Fliesstext, der Modal blieb auf 940 px (risk.css) statt 460, das
   „oder"-Trennelement war eine nackte Textzeile, und die Fehlermeldung nicht
   rot. Woertlich aus dashboard.css uebernommen. */
.dc-modal:has(.nd-form) { max-width: 460px; }
.nd-form { display: flex; flex-direction: column; }
.nd-form label { font-size: var(--fs-xs); font-weight: 700; color: var(--text-muted); margin: 12px 0 4px; }
.nd-form input, .nd-form select { width: 100%; padding: 8px 10px; }
.nd-form .primary { margin-top: 18px; }
.nd-form .nd-or { display: flex; align-items: center; gap: 10px; margin: 16px 0 10px; }
.nd-form .nd-or::before, .nd-form .nd-or::after { content: ""; flex: 1; height: 1px; background: var(--border-soft); }
.nd-form .nd-or span { font-size: var(--fs-xs); color: var(--text-faint); text-transform: uppercase; letter-spacing: .08em; }
.nd-hint { font-size: var(--fs-xs); color: var(--text-faint); margin: 8px 0 0; }
.nd-msg { font-size: var(--fs-sm); margin-top: 12px; min-height: 1em; color: var(--text-muted); }
.nd-msg.err { color: var(--danger); }

/* Die Aktionsknoepfe jeder Dokumentkarte klebten ohne Abstand aneinander und
   brachen nicht um. */
.doc-actions { display: flex; gap: 6px; margin-top: 4px; flex-wrap: wrap; }
/* Die seltenen Schritte des Lebenszyklus (Serie, Revision, Löschen) stehen leise unter den
   häufigen — im Meeting traf VS „Revision", als er das Dokument öffnen wollte (M1210-92).
   Sie bleiben bedienbar und gesperrt mit Grund wie vorher; nur der Rahmen fällt weg (G3). */
.doc-actions-selten { gap: 2px; margin-top: 0; }
.doc-actions-selten button {
  border-color: transparent; background: transparent; color: var(--text-muted);
  padding: 2px 6px; font-size: var(--fs-xs);
}
.doc-actions-selten button:hover:not(:disabled) { background: var(--bg-soft); border-color: var(--border-soft); color: var(--text); }

/* Die erklaerende Nebenzeile der Abschnittskoepfe stand in voller Textgroesse
   gleichwertig neben der Ueberschrift — genau die Hierarchie, die G3 im Kopf
   dieser Datei verlangt, war weg. */
.sec-head .note { font-size: var(--fs-xs); color: var(--text-muted); }

/* Der R5-Hinweis „Kennzahlen nicht verfuegbar, die Spalten sind ausgeblendet"
   verlor seine Flaeche und fiel als beilaeufiger Kleintext unter den Tisch —
   ausgerechnet die Meldung, die den Unterschied zwischen „0" und „nicht
   gemessen" traegt. */
.hint.stats-unavailable {
  display: block; padding: 14px 16px; margin: 18px 0;
  background: var(--bg-panel); border: 1px solid var(--border-soft); border-radius: var(--radius);
}

/* Der Zustandspunkt klebte ohne Zwischenraum am ersten Buchstaben
   („●Sichtpruefung") und verschmolz optisch mit ihm zu einem Zeichen. */
.ls-entsch-zeile .act-dot { margin-right: 6px; }

/* --- Freigabeliste, Stufe 1 (lesend) -------------------------------------
   Sie beantwortet „wer darf was an diesem Dokument". Geaendert wird hier noch
   nichts, und das steht dran (R7) — ein Kasten, der aussieht wie ein Formular
   und keines ist, waere die schlechtere Loesung. */
.gv-doc { font-weight: 650; margin: 0 0 8px; }
.gv-hinweis, .gv-leer, .gv-lesend, .gv-fehler, .gv-laedt {
  font-size: var(--fs-sm); line-height: 1.5; margin: 0 0 10px; color: var(--text-muted);
}
.gv-lesend { margin-top: 10px; padding-top: 8px; border-top: 1px solid var(--border-soft); }
.gv-lesend code { font-family: var(--font-mono); font-size: var(--fs-xs); }
.gv-fehler { color: var(--danger); }
.gv-tab { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); }
.gv-tab th {
  text-align: left; padding: 4px 8px; border-bottom: 1px solid var(--border);
  font-size: var(--fs-xs); color: var(--text-muted); font-weight: 700;
}
.gv-tab td { padding: 5px 8px; border-bottom: 1px solid var(--border-soft); vertical-align: top; }
/* Eine Liste, die gerade keine Wirkung hat (Zugriffsart „Organisation"), wird
   gedaempft gezeigt statt verschwiegen — verschwiegen waere die Behauptung, es
   gebe sie nicht. */
.gv-ohne-wirkung { opacity: .7; }
.gv-person { font-weight: 600; }
.gv-mail, .gv-note { color: var(--text-muted); font-size: var(--fs-xs); }
.gv-mail { display: block; }
.gv-rolle { font-style: italic; }
.gv-stufe { font-variant-numeric: tabular-nums; }
.gv-bis { font-variant-numeric: tabular-nums; }
.gv-unbefristet { color: var(--text-faint); }
/* Abgelaufen heisst: wirkt NICHT mehr. Das ist eine Sperre, kein Erfolg (G1). */
.gv-abgelaufen { color: var(--warn); font-weight: 650; }
.gv-aus td { opacity: .6; }
.gv-note { max-width: 22ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* --- Zugriffsliste, Stufe 2 (bearbeitbar) -------------------------------- */
.zg-doc { font-weight: 650; margin: 0 0 10px; }
.zg-warnung, .zg-leer, .zg-lesend {
  font-size: var(--fs-sm); line-height: 1.5; margin: 0 0 10px; color: var(--text-muted);
}
.zg-warnung { color: var(--warn); }

/* Die Zugriffsart steht OBEN, weil sie ueber die Wirkung der ganzen Liste
   entscheidet. Eine gepflegte Liste bei „Organisation" tut nichts. */
.zg-arten { display: grid; gap: 6px; margin-bottom: 12px; }
.zg-art {
  display: grid; grid-template-columns: 20px 1fr; gap: 8px; align-items: start;
  padding: 7px 10px; border: 1px solid var(--border-soft); border-radius: var(--radius-sm);
  font-size: var(--fs-sm); line-height: 1.45;
}
.zg-art i { font-style: normal; color: var(--text-muted); font-size: var(--fs-xs); }
.zg-art-an { border-color: var(--accent); background: var(--bg-soft); }

.zg-tab { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); margin-bottom: 12px; }
.zg-tab th {
  text-align: left; padding: 4px 8px; border-bottom: 1px solid var(--border);
  font-size: var(--fs-xs); color: var(--text-muted); font-weight: 700;
}
.zg-tab td { padding: 5px 8px; border-bottom: 1px solid var(--border-soft); vertical-align: middle; }
.zg-person { font-weight: 600; }
.zg-mail, .zg-note { color: var(--text-muted); font-size: var(--fs-xs); }
.zg-mail { display: block; }
.zg-rolle { font-style: italic; cursor: help; }
.zg-bis { font-variant-numeric: tabular-nums; }
.zg-unbefristet { color: var(--text-faint); }
/* Abgelaufen heisst: wirkt NICHT mehr. Eine Sperre, kein Erfolg (G1). */
.zg-abgelaufen { color: var(--warn); font-weight: 650; }
.zg-aus td { opacity: .6; }
/* Eine Zeile, die gerade keine Wirkung hat (Zugriffsart „Organisation") —
   gedaempft gezeigt, nicht verschwiegen. */
.zg-still td { opacity: .65; }
.zg-note { max-width: 20ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.zg-tat { text-align: right; }
.zg-stufe { font-size: var(--fs-xs); padding: 2px 6px; }
.zg-weg {
  font-size: var(--fs-xs); padding: 2px 8px; border: 1px solid var(--border-soft);
  background: transparent; color: var(--text-muted); border-radius: var(--radius-sm);
}
.zg-weg:hover { border-color: var(--danger); color: var(--danger); }

.zg-neu {
  border: 1px solid var(--border-soft); border-radius: var(--radius-sm);
  padding: 10px 12px; display: grid; gap: 8px;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}
.zg-neu legend { font-size: var(--fs-xs); font-weight: 700; color: var(--text-muted); padding: 0 4px; }
.zg-neu-art, .zg-neu-wer { grid-column: 1 / -1; display: flex; gap: 14px; align-items: center; flex-wrap: wrap; }
.zg-neu-art label { font-size: var(--fs-sm); display: inline-flex; gap: 5px; align-items: center; }
.zg-feld { display: grid; gap: 3px; font-size: var(--fs-xs); color: var(--text-muted); }
.zg-feld i { font-style: normal; color: var(--text-faint); }
.zg-feld-weit { grid-column: 1 / -1; }
.zg-neu .primary { grid-column: 1 / -1; justify-self: start; }
/* Wer die Organisation nicht verwaltet, bekommt keine Mitgliederliste — das
   wird gesagt, nicht durch ein leeres Auswahlfeld angedeutet. */
.zg-keine-liste {
  font-size: var(--fs-xs); color: var(--text-muted); line-height: 1.45;
  max-width: 60ch; cursor: help;
}