/* Richterraster — was allein diese Anwendung betrifft.
 *
 * Tafel und Bausteine stehen in `gemeinsam/`: dort die Farben und Maße,
 * hier die Reiterleiste, die Abschnitte, die Tabellen und das Raster. Wer
 * eine Farbe oder einen Knopf braucht, holt ihn von dort und baut ihn nicht
 * ein zweites Mal.
 *
 * Eine Reiterleiste über vier Ansichten, darunter jeweils ganze Breite: Die
 * Tabellen dieser Anwendung sind breit, und eine zweite Spalte daneben nähme
 * ihnen den Platz, den sie brauchen. Der Bildschirm, für den gebaut wird, ist
 * 1920 × 1080 und größer.
 *
 * Jede Ansicht trägt ihre Farbe als eigene Variable; Feldrahmen, Schalter und
 * Abschnittsköpfe greifen über `--farbe` darauf zu. Eine neue Ansicht braucht
 * deshalb zwei Zeilen: eine hier und eine unter „Abschnitte“.
 */

/* --------------------------------------------- Die Farben dieser Anwendung */

:root {
  /* Die vier Ansichten. Die Töne kommen aus `gemeinsam/tafel.css` und werden
     hier nur benannt — so folgen sie der dunklen Fassung von selbst. */
  --personen: var(--ton-blau);
  --einheiten: var(--ton-petrol);
  --verwendungen: var(--ton-violett);
  --uebersicht: var(--ton-ocker);
  /* Gedeckt und ohne eigenen Ton: Die Einstellungen sind kein Arbeitsschritt
     neben den vieren, sondern deren Voraussetzung. */
  --einstellungen: var(--ton-grau);
}

/* ------------------------------------------------ Ansichten und Reiter */

.hauptteil { padding: 0 16px 16px; max-width: 2200px; margin: 0 auto; }

/* Reiterleiste, Reiter und Bühne stehen seit `ggg` in `gemeinsam/bausteine.css`
   — zwei Anwendungen tragen sie, und damit gehören sie nicht mehr hierher. */

/* -------------------------------------------------------------- Abschnitte */

.abschnitt {
  background: var(--flaeche);
  border: 1px solid var(--linie);
  border-radius: var(--rundung);
  border-top: 3px solid var(--farbe);
  box-shadow: var(--schatten);
  padding: 12px 16px 16px;
}

.abschnitt--personen     { --farbe: var(--personen); }
.abschnitt--einheiten    { --farbe: var(--einheiten); }
.abschnitt--verwendungen { --farbe: var(--verwendungen); }
.abschnitt--uebersicht   { --farbe: var(--uebersicht); }
.abschnitt--einstellungen { --farbe: var(--einstellungen); }
.abschnitt--leer         { --farbe: var(--text-leise); }

.abschnitt__kopf {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}

.abschnitt__titel {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--farbe);
}

/* Die Werkzeuge sitzen auf einer Grundlinie: Eine Schalterreihe trägt ihre
   Beschriftung über sich, eine Schaltfläche nicht — ohne diese Angabe
   würde die Schaltfläche auf die doppelte Höhe gezogen. */
.abschnitt__werkzeuge { display: flex; gap: 8px; align-items: flex-end; }

/* Der Fuß eines Abschnitts. Er trägt, was auch im Kopf steht: Bei fünfzig
   Zeilen steht man beim Erfassen am unteren Ende der Liste, und der Weg
   zurück nach oben zum einzigen Knopf ist ein Weg, den niemand gehen will. */
.abschnitt__fuss { display: flex; gap: 8px; margin-top: 12px; }

/* Die Rückmeldung eines Abschnitts — etwa nach dem Ausgeben. Sie steht
   zwischen der Zahl und den Werkzeugen und nimmt keinen Platz, solange sie
   nichts zu sagen hat. */
.abschnitt__meldung {
  margin: 0;
  font-size: 12px;
  color: var(--merke);
}
.abschnitt__meldung:empty { display: none; }

/* Das Raster: zwei Spalten, damit weniger senkrecht gerollt werden muss. */
.abschnitt__raster {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px 14px;
  align-items: end;
}

/* Vier Spalten für die Erfassungsmaske. Sie trägt zwanzig Felder; in zwei
   Spalten wird daraus eine Bahn, die man rollen muss, in vieren steht jeder
   Abschnitt auf einen Blick da — die ganze Maske samt Funktionsliste passt
   dann auf einen Bildschirm.

   Die Schwelle liegt bei 1100 Pixeln, nachgemessen an der längsten Angabe:
   „Vizepräsident/in des Landesgerichtes“ füllt ein Viertel davon aus und
   bleibt lesbar. Darunter sind es wieder zwei Spalten. */
.abschnitt__raster--vier { grid-template-columns: repeat(4, minmax(0, 1fr)); }

@media (max-width: 1100px) {
  .abschnitt__raster--vier { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Ein Satz unter dem Kopf, der sagt, wozu ein Abschnitt da ist. Er steht nur
   dort, wo das nicht selbstverständlich ist — in den Einstellungen etwa, wo
   eine Änderung Folgen im Bestand hat. */
.abschnitt__hinweis {
  margin: -4px 0 12px;
  max-width: 82ch;
  font-size: 13px;
  line-height: 1.5;
  color: var(--text-leise);
}

/* ---------------------------------------------------------- Teilbereiche */
/*
 * Vorrat: Ein abgesetzter Bereich innerhalb eines Abschnitts, für Felder, die
 * zusammengehören und nur bei Bedarf erscheinen — im Gebührenhelfer die
 * Deckungslücke und die Rückzahlungsempfänger. Der Beispielbeschluss braucht
 * ihn nicht; die Regeln stehen bereit, weil so etwas in jedem zweiten
 * Generator vorkommt.
 */

.teilbereich {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px 14px;
  padding: 12px;
  border: 1px dashed var(--linie-stark);
  border-radius: 6px;
  background: color-mix(in srgb, var(--farbe) 4%, transparent);
}

.teilbereich--warnung {
  border-color: color-mix(in srgb, var(--warnung) 50%, var(--linie-stark));
  background: color-mix(in srgb, var(--warnung) 6%, transparent);
}

.teilbereich__grund {
  grid-column: 1 / -1;
  margin: 0;
  font-size: 13px;
  font-weight: 600;
  color: var(--warnung);
}

.teilbereich__spalten {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 12px;
}

/* ---------------------------------------------------------------- Tabellen */

/* Der Rahmen rollt, nicht die Seite: Eine Tabelle mit fünfzig Spalten darf
   den Rumpf nicht in die Breite ziehen, sonst wandert die Kopfleiste mit.

   Er ist so breit wie die Tabelle darin und nicht so breit wie der Abschnitt:
   Sonst stünde die Umrandung über die ganze Fläche und die Tabelle klebte
   links darin. `max-width` deckelt ihn wieder, damit das Rollen bleibt, sobald
   die Tabelle breiter ist als der Platz. */
.tabelle__rahmen {
  width: fit-content;
  max-width: 100%;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  border: 1px solid var(--linie);
  border-radius: var(--rundung);
}

/* Eine Tabelle nimmt die Breite, die sie braucht, und nicht die ganze. Über
   1900 Pixel gezogen stehen fünf Spalten so weit auseinander, dass keine Zeile
   mehr als Zeile zu lesen ist — das Auge springt dann von der Sparte zur
   Funktionszahl über eine Handbreit Nichts. Wer breiter sein muss, sagt es in
   seiner eigenen Regel (`--breit`); wer schmäler wird, als er lesbar ist,
   bekommt eine Spaltenbreite. */
.tabelle { width: auto; border-collapse: collapse; font-size: 13px; }

/* Der Rahmen einer Tabelle, die Eingabefelder trägt und deshalb Platz braucht:
   Auf ihre natürliche Breite geschrumpft stünde „Bundesgleichbehandlungs-
   beauftragte/r“ in einem Feld von zwanzig Zeichen. Die Höchstbreite ist
   nachgemessen an dieser längsten Bezeichnung. */
.tabelle__rahmen--breit { width: 100%; max-width: 62rem; }
.tabelle__rahmen--breit > .tabelle { width: 100%; }

.tabelle th {
  text-align: left;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-leise);
  font-weight: 600;
  padding: 8px 10px;
  border-bottom: 1px solid var(--linie);
  background: var(--flaeche);
  position: sticky;
  top: 0;
  z-index: 1;
  white-space: nowrap;
}

.tabelle td { padding: 4px 10px; border-bottom: 1px solid var(--linie); vertical-align: middle; }
.tabelle tbody tr:last-child td { border-bottom: 0; }
.tabelle tbody tr:hover { background: color-mix(in srgb, var(--farbe) 6%, transparent); }

.tabelle__zahl { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }

/* Die Überschrift folgt ihrer Spalte. Ohne diese Zeile bliebe sie links: Die
   Regel für `th` weiter oben ist gleich gewichtig und steht davor. */
.tabelle th.tabelle__zahl { text-align: right; }

/* Eine Summe, die nicht aufgeht, wird nicht rot gemalt, sondern hervorgehoben:
   Sie ist noch kein Fehler, solange die Erfassung läuft. */
.tabelle__zahl--abweichung { color: var(--warnung); font-weight: 600; }

.tabelle__leer { color: var(--text-leise); padding: 14px 10px; text-align: center; }

/* --------------------------------------------------------------- Kataloge */

/* Die Katalogtabelle steht in einem Reiter, in dem es nichts zu vergleichen
   gibt: Die Bezeichnung darf so breit werden, wie sie will, alles andere
   bekommt genau so viel, wie es braucht. */
/* Breit genug für „BG Wr. Neustadt“: Eine Kurzform, die im eigenen Feld
   abgeschnitten steht, ist keine. */
.tabelle--katalog th:nth-child(2),
.tabelle--katalog td:nth-child(2) { width: 20ch; }
.tabelle--katalog th:nth-child(3),
.tabelle--katalog td:nth-child(3) { width: 9ch; }
.tabelle--katalog th:nth-child(4),
.tabelle--katalog td:nth-child(4) { width: 6.5rem; }
.tabelle--katalog th:last-child,
.tabelle--katalog td:last-child { width: 3rem; }

/* ----------------------------------------------------- Die Einheitenliste */

/* Eine Abteilungsnummer ist zweistellig. Das allgemeine schmale Feld misst
   200 Pixel, und solange die Tabelle über die ganze Breite ging, fiel das
   nicht auf; jetzt bestimmt jede Spalte mit, wie breit die Liste aussieht. */
.tabelle--einheiten td:nth-child(2) .eingabe { width: 8ch; }

/* Die beiden Pfeile sitzen nebeneinander und gleich breit: Sie werden im
   Wechsel geklickt, und ein Knopf, der unter dem Finger die Breite ändert,
   trifft den nächsten Klick nicht mehr. */
.tabelle__reihung { display: flex; gap: 4px; }
.tabelle__reihung .knopf { min-width: 32px; padding: 5px 6px; }

/* Je Einheitentyp eine Karte. Ihre Funktionen stehen darin und nicht in einer
   zweiten Tabelle daneben: Welche Funktion zu welchem Typ gehört, ist die
   Angabe, um die es hier geht — sie muss zu sehen sein, ohne dass jemand zwei
   Listen nebeneinanderhält. */
.katalog__typen { display: flex; flex-direction: column; gap: 14px; }

.katalog__typ {
  border: 1px solid var(--linie);
  border-radius: var(--rundung);
  padding: 12px 14px;
  background: var(--grund);
}

.katalog__kopf {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 10px 14px;
  margin-bottom: 10px;
}
/* Die Bezeichnung nimmt, was übrig bleibt; die Kurzform bleibt schmal. */
.katalog__kopf > .feld--voll { flex: 1 1 16ch; grid-column: auto; }
.katalog__kopf > .feld--schmal { flex: 0 0 20ch; }

.katalog__werkzeuge { display: flex; align-items: center; gap: 6px; margin-left: auto; }
.katalog__zahl { font-size: 12px; color: var(--text-leise); }

/* Wer nicht zählt, bleibt lesbar, tritt aber zurück. */
.tabelle__zeile--ungezaehlt td { color: var(--text-leise); }
.tabelle__zeile--mangel { box-shadow: inset 3px 0 0 var(--fehler); }

/* Ein Feld in einer Tabellenzelle bringt seine eigene Beschriftung nicht mit —
   die trägt die Spaltenüberschrift. */
.feld--in-tabelle { gap: 0; }
.feld--in-tabelle .feld__beschriftung { display: none; }
.feld--in-tabelle .eingabe { min-height: 30px; padding: 3px 6px; font-size: 13px; }
.feld--gesperrt { opacity: 0.45; }

/* ------------------------------------------------------------------ Filter */

.filter {
  background: var(--grund);
  border: 1px solid var(--linie);
  border-radius: var(--rundung);
  padding: 10px 12px;
  margin-bottom: 12px;
}

.filter__zeile { display: flex; align-items: flex-end; gap: 8px; }
.filter__zeile > .feld { flex: 1; min-width: 0; }
/* Eine Schalterreihe in der Zeile nimmt die Breite, die sie braucht, und
   nicht ihren Anteil — sonst bliebe für die Suche daneben die Hälfte. */
.filter__zeile > .feld--fest { flex: 0 0 auto; }

/* Der ausgeklappte Teil setzt sich mit einer Linie ab, damit die eine Zeile
   darüber nicht in ihm untergeht. */
.filter__mehr {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--linie);
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* --------------------------------------------------------- Sortierbare Köpfe */

/* Der Kopf bleibt ein Kopf: Die Schaltfläche erbt Schrift und Farbe und
   unterscheidet sich nur durch den Zeiger und den Pfeil, den sie trägt. */
.tabelle__sortierer {
  font: inherit;
  color: inherit;
  text-transform: inherit;
  letter-spacing: inherit;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  display: inline-flex;
  align-items: baseline;
  gap: 4px;
}

.tabelle__sortierer:hover { color: var(--farbe, var(--primaer)); }
.tabelle__sortierer--aktiv { color: var(--farbe, var(--primaer)); }

/* Der Pfeil hält seinen Platz frei, auch wenn er leer ist — sonst ruckt die
   Spaltenbreite bei jedem Wechsel der Reihung. */
.tabelle__pfeil { display: inline-block; min-width: 0.7em; font-size: 10px; }

/* Eine rechtsbündige Spalte reiht auch ihren Kopf nach rechts. */
.tabelle__zahl .tabelle__sortierer { justify-content: flex-end; }

/* ------------------------------------------------------- Die Kreuztabelle */

/* Sie steht weiter auseinander als die übrigen Tabellen: Ihre Zellen tragen
   Zahlen, und Zahlen in enger Folge liest niemand als Spalte. Dass sie nur die
   nötige Breite nimmt, sagt seit 1.6 die Regel für `.tabelle`. */
.tabelle--kreuz th, .tabelle--kreuz td { padding-left: 18px; padding-right: 18px; }

/* Die erste Spalte bleibt beim waagrechten Rollen stehen: Ohne sie wüsste
   niemand mehr, in welcher Zeile er liest. */
.tabelle--kreuz tbody td:first-child,
.tabelle--kreuz tfoot th:first-child {
  position: sticky;
  left: 0;
  background: var(--flaeche);
  font-weight: 600;
  white-space: nowrap;
}

.tabelle--kreuz tfoot th,
.tabelle--kreuz tfoot td {
  border-top: 2px solid var(--linie-stark);
  border-bottom: 0;
  padding: 6px 10px;
  font-weight: 700;
  background: var(--flaeche);
}

.tabelle--kreuz tfoot th {
  text-align: left;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

/* Die Randspalte tritt hervor, ohne die Zellen zu überstrahlen. */
.tabelle__zahl--stark { font-weight: 700; }
.tabelle--kreuz tbody td:last-child { border-left: 1px solid var(--linie); }
.tabelle--kreuz thead th:last-child { border-left: 1px solid var(--linie); }

/* ------------------------------------------------------------- Das Raster */

/* Der Rahmen rollt in beide Richtungen und bekommt eine Höhe: Ohne sie könnte
   die Kopfzeile nicht stehen bleiben, weil es nichts gäbe, worin sie stünde.
   Wie hoch, misst `ui/leistenhoehen.ts` nach — was über dem Rahmen steht, ist
   keine feste Zahl, seit die Kopfleiste umbrechen kann. Der Rückfallwert gilt
   für den Augenblick vor der ersten Messung. */
.tabelle__rahmen--raster {
  max-height: var(--rollhoehe, calc(100vh - 230px));
  overflow: auto;
  overscroll-behavior: contain;
}

/* Die Namensspalte hat eine feste Breite, weil die Summenspalte daneben
   stehen bleiben muss: Eine klebende Spalte braucht einen Abstand vom Rand,
   und der lässt sich nur angeben, wenn die Spalte davor ihn nicht ändert. */
.raster {
  width: auto;
  border-collapse: separate;
  border-spacing: 0;
  --namensbreite: 200px;
  /* Die Höhe der gedrehten Kopfzeile. Sie steht als Größe da, weil die
     Summenzeile darunter klebt und dafür wissen muss, wie weit oben sie
     hält — geraten wäre hier eine Lücke oder eine Überdeckung. */
  --kopfhoehe: 130px;
}

.raster th, .raster td {
  border-bottom: 1px solid var(--linie);
  border-right: 1px solid var(--linie);
  padding: 0;
}

/* Gedrehte Spaltenköpfe. Waagrecht bräuchte „GesA 12 Zi“ neunzig Pixel,
   senkrecht dreißig — bei fünfzig Spalten entscheidet das darüber, ob das
   Raster auf einen Bildschirm passt. `vertical-rl` samt Drehung liest von
   unten nach oben, die im deutschen Satz übliche Richtung. */
/* Angesprochen wird `.raster thead th` und nicht die Klasse allein: Die Regel
   für `.tabelle th` weiter oben wiegt gleich schwer und stünde sonst über
   dieser — die Kürzel kämen in Versalien heraus, und „GesA 12 St“ verlöre die
   Unterscheidung, die in der Groß- und Kleinschreibung steckt. */
.raster thead th {
  position: sticky;
  top: 0;
  z-index: 2;
  background: var(--flaeche);
  height: var(--kopfhoehe);
  padding: 6px 0;
  vertical-align: bottom;
  text-align: center;
  text-transform: none;
  letter-spacing: 0;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-leise);
}

.raster__gedreht {
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  white-space: nowrap;
  display: inline-block;
  max-height: 118px;
  overflow: hidden;
}

/* Die Ecke steht in beiden Richtungen fest und muss deshalb über allem liegen.
   Die Schichtung wird weiter unten gesetzt, und zwar mit derselben Genauigkeit
   wie die Regel für `.raster thead th`: Eine kürzere Auswahl wöge leichter,
   und die Spaltenköpfe schöben sich beim Rollen über die Ecke. */
.raster__ecke {
  position: sticky;
  top: 0;
  left: 0;
  background: var(--flaeche);
  vertical-align: bottom;
  padding: 6px 10px;
}

.raster thead .raster__ecke { z-index: 4; }

/* Die Namensspalte bleibt beim waagrechten Rollen stehen. */
.raster__name {
  position: sticky;
  left: 0;
  z-index: 1;
  background: var(--flaeche);
  text-align: left;
  font-weight: 400;
  padding: 2px 10px;
  white-space: nowrap;
}

.raster__ecke, .raster__name {
  width: var(--namensbreite);
  min-width: var(--namensbreite);
  max-width: var(--namensbreite);
}

/* Ein langer Doppelname wird abgeschnitten statt die Spalte zu sprengen; die
   volle Schreibweise steht im Mouseover der Zelle. */
.raster__name .verweis--knopf {
  display: block;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Dreißig Pixel je Spalte: Bei fünfzig Einheiten und der Namensspalte kommt
   das Raster damit auf rund 1700 Pixel und passt auf den Bildschirm, für den
   es gebaut ist. Mehr Platz braucht keine Zahl — drei Ziffern sind das
   Höchste, was in einer Zelle steht. */
.raster__zelle {
  width: 30px;
  min-width: 30px;
  text-align: center;
  font-variant-numeric: tabular-nums;
}

/* Eine belegte Zelle hebt sich durch ihren Grund ab, nicht durch einen
   Rahmen: Bei fünfzig Spalten nebeneinander ergäben Rahmen ein Gitter, in dem
   nichts mehr hervortritt. */
.raster__zelle--belegt { background: color-mix(in srgb, var(--uebersicht) 14%, transparent); }

.raster__wert {
  font: inherit;
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  color: inherit;
  background: none;
  border: 0;
  width: 100%;
  padding: 5px 1px;
  cursor: pointer;
}

.raster__wert:hover { background: color-mix(in srgb, var(--uebersicht) 32%, transparent); }

/* Die Summenspalte steht unmittelbar hinter dem Namen und bleibt mit ihm
   stehen: Sie gehört zur Person und nicht ans andere Ende von fünfzig
   Spalten. */
.raster__summe {
  position: sticky;
  left: var(--namensbreite);
  background: var(--flaeche);
  border-right: 1px solid var(--linie-stark);
  padding: 5px 10px;
  text-align: center;
}

/* Im Kopf klebt sie in beiden Richtungen und muss deshalb über den übrigen
   Kopfzellen liegen. */
.raster thead tr:first-child .raster__summe { z-index: 3; }

/* Außerhalb des Kopfes ist die Summenspalte keine Überschrift: Sie darf weder
   oben kleben noch die Höhe eines gedrehten Kopfes beanspruchen. */
.raster tbody .raster__summe { top: auto; z-index: 1; height: auto; }

/* Eine einheitliche Zeilenhöhe. Ohne sie wäre eine Zeile mit belegten Zellen
   höher als eine leere, und das Raster verlöre seine Kammstruktur. */
.raster tbody th, .raster tbody td { height: 28px; }

/* Die Summenzeile der Einheiten steht unter den Spaltenköpfen und bleibt mit
   ihnen stehen — so wie die Summenspalte neben dem Namen steht und mit ihm
   stehen bleibt. Angesprochen wird sie über `thead`, weil die Regel für
   `.raster thead th` sonst schwerer wöge und ihr die Höhe eines gedrehten
   Kopfes aufzwänge. */
.raster thead .raster__summenzeile th,
.raster thead .raster__summenzeile td {
  position: sticky;
  top: var(--kopfhoehe);
  z-index: 2;
  height: auto;
  background: var(--flaeche);
  border-bottom: 2px solid var(--linie-stark);
  padding: 5px 4px;
  text-align: center;
  vertical-align: middle;
  text-transform: none;
  letter-spacing: 0;
  font-size: 12px;
  font-weight: 700;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}

/* Die beiden klebenden Zellen der Zeile halten in beiden Richtungen und
   müssen deshalb über den mitlaufenden liegen. */
.raster thead .raster__summenzeile .raster__ecke {
  left: 0;
  z-index: 4;
  text-align: left;
  padding: 5px 10px;
}

.raster thead .raster__summenzeile .raster__summe {
  left: var(--namensbreite);
  z-index: 3;
  padding: 5px 10px;
}

/* ------------------------------------------------------------------ Marken */

.marke {
  display: inline-block;
  font-size: 11px;
  color: var(--text-leise);
  border: 1px solid var(--linie-stark);
  border-radius: 999px;
  padding: 0 8px;
  margin-right: 4px;
  white-space: nowrap;
}

.marke--mangel { color: var(--fehler); border-color: var(--fehler); font-weight: 600; }

/* ------------------------------------------------------------------- Zahl */

/* Die Zahl neben einer Überschrift: „45 Personen“, „Summe 90 %“. Sie steht
   links neben den Werkzeugen und nimmt den Platz dazwischen ein. */
.abschnitt__zahl {
  margin: 0;
  flex: 1;
  font-size: 12px;
  color: var(--text-leise);
  font-variant-numeric: tabular-nums;
}

/* Die drei Zahlen über der Personenliste. Sie fassen zusammen, was die Liste
   gerade zeigt — und weil sie über der Tabelle stehen, sagen sie das schon,
   bevor man fünfundvierzig Zeilen überflogen hat. */
.kennzahlen {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.kennzahl {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 96px;
  padding: 6px 12px;
  background: color-mix(in srgb, var(--farbe) 8%, transparent);
  border: 1px solid var(--linie);
  border-radius: var(--rundung);
}

.kennzahl__wert {
  font-size: 18px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.kennzahl__name {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-leise);
}

.feld__einheit { color: var(--text-leise); font-size: 13px; }

.eingabe--liste { min-height: var(--tippflaeche); }

.leer__text { margin: 0; color: var(--text-leise); max-width: 62ch; }

/* -------------------------------------------------------------- Die Person */

.person { display: flex; flex-direction: column; gap: 12px; }

.person__kopf {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 4px 0;
}

/* -------------------------------------------------------------- Steckbrief */

/* Die Zusammenfassung über der Maske: Name und Amt links, die Angaben rechts
   in einem Raster, das mitwächst. Was nicht erfasst ist, steht gar nicht da —
   deshalb hat das Raster keine feste Spaltenzahl. */
.steckbrief {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 12px 32px;
}

.steckbrief__benennung { flex: 0 1 auto; min-width: 220px; margin-right: auto; }

.steckbrief__name {
  font-size: 20px;
  letter-spacing: -0.01em;
  margin-bottom: 2px;
}

.steckbrief__amt { margin: 0; color: var(--text-leise); font-size: 13px; }

.steckbrief__marken { margin: 8px 0 0; display: flex; flex-wrap: wrap; gap: 4px; }

/* Beschriftung über dem Wert, nicht daneben: Bei acht Angaben nebeneinander
   spart das die Hälfte der Breite, und gelesen wird ohnehin spaltenweise.
   Umbrochen wird paarweise — die Paare stecken je in einem eigenen Behälter. */
.steckbrief__angaben {
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 10px 28px;
}

.steckbrief__angabe { min-width: 0; }

.steckbrief__angabe dt {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-leise);
}

.steckbrief__angabe dd {
  margin: 2px 0 0;
  font-variant-numeric: tabular-nums;
}

.steckbrief__abweichung { color: var(--warnung); font-weight: 600; }

.steckbrief__anmerkung {
  flex: 1 1 100%;
  margin: 0;
  padding-top: 10px;
  border-top: 1px solid var(--linie);
  color: var(--text-leise);
  font-size: 13px;
  white-space: pre-wrap;
  max-width: 80ch;
}

/* Der Platz zwischen „Zur Liste“ und „Löschen“, wo früher der Titel stand. */
.person__luecke { flex: 1; }

/* Funktionen links, Anmerkungen rechts. Die Funktionen sind eine Tabelle und
   bekommen zwei Drittel; die Anmerkungen sind drei Zeilen Text und brauchten
   darunter eine ganze Bildschirmbreite für nichts. Wird es eng, rücken sie
   untereinander. */
.person__zeile {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
  gap: 12px;
  align-items: start;
}

@media (max-width: 900px) {
  .person__zeile { grid-template-columns: minmax(0, 1fr); }
}

/* ---------------------------------------------------------------- Hinweise */

/* Was fehlt und was falsch ist, steht beisammen — beides ist beim Durchgehen
   einer Person zu erledigen —, aber in verschiedener Farbe: Das eine ist ein
   offener Arbeitsschritt, das andere ein Fehler in den Daten. */
.hinweise {
  background: var(--flaeche);
  border: 1px solid var(--linie);
  border-radius: var(--rundung);
  border-top: 3px solid var(--fehler);
  padding: 12px 16px;
}

.hinweise__liste { margin: 0; padding: 0; list-style: none; display: grid; gap: 4px; }

.hinweise__punkt {
  font-size: 12px;
  padding: 6px 10px;
  border-radius: 4px;
  border-left: 3px solid currentColor;
  display: flex;
  align-items: baseline;
  gap: 8px;
}

.hinweise__marke {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 700;
  flex: 0 0 auto;
  min-width: 42px;
}

.hinweise__punkt--falsch {
  color: var(--fehler);
  background: color-mix(in srgb, var(--fehler) 8%, transparent);
}

.hinweise__punkt--fehlt {
  color: var(--warnung);
  background: color-mix(in srgb, var(--warnung) 8%, transparent);
}

/* ------------------------------------------------------------- Rücksichten */

/* Was auf dem Papier nichts zu suchen hat. Der Rest der Rücksichten steht in
   `gemeinsam/bausteine.css`. */
@media print {
  .kopf, .reiterleiste, .fuss, .abschnitt__werkzeuge, .abschnitt__fuss { display: none; }
  .abschnitt { border: 0; box-shadow: none; padding: 0; }
}

/* ------------------------------------------------------ Versionsgeschichte */

/* Die Überschrift einer Fassung trägt die Nummer vorne und den Titel dahinter;
   anders als die Gruppentitel der Masken bleibt sie gemischt geschrieben — ein
   ganzer Satz in Versalien liest sich schwer. */
/* Die Hilfe steht in `gemeinsam/bausteine.css` — Abschnitt „Die Hilfe“.
   Hier standen bis September 2026 Wegweiser, Sprungliste und Text des
   Handbuchs; dasselbe noch einmal in `gsl` und `wissen`, jedes mit eigenen
   Namen. Geblieben ist ein einziger Zusatz: Die angesprungene Überschrift rückt
   von oben ab, sonst klebte sie am Rand des Schirms. */
.hilfe__abschnitt { scroll-margin-top: 8px; }

.versionen__titel {
  font-size: 14px;
  margin-bottom: 10px;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0 6px;
}

.versionen__nummer {
  color: var(--farbe);
  font-variant-numeric: tabular-nums;
}

.versionen__marke {
  font-size: 11px;
  font-weight: 400;
  color: var(--text-leise);
  border: 1px solid var(--linie-stark);
  border-radius: 999px;
  padding: 1px 8px;
}

/* Fließtext aus einer eingebetteten Markdown-Datei — Versionsgeschichte wie
   Handbuch. Die Zeilenlänge ist begrenzt: Über achtzig Zeichen hinweg findet
   das Auge den Zeilenanfang nicht wieder. */
.fliess__text { margin: 0 0 10px; max-width: 68ch; }
.fliess__text:last-child { margin-bottom: 0; }

.fliess__liste { margin: 0 0 10px; padding-left: 20px; max-width: 68ch; }
.fliess__liste:last-child { margin-bottom: 0; }
.fliess__liste li + li { margin-top: 6px; }

.maske__fussnote {
  margin: 16px 0 0;
  font-size: 12px;
  color: var(--text-leise);
}