/*
 * Gestaltung der Kanzleiverwaltung.
 *
 * Alle Farben, Abstände und Schriftgrößen sind als Variablen definiert und
 * lassen sich hier an einer Stelle ändern. Die Gestaltung ist bewusst ruhig:
 * viel Weißraum, wenige Farben, klare Abstufungen. Türkis ist die einzige
 * Signalfarbe und markiert ausschließlich, wo man gerade ist.
 */

:root {
  /* --- Kanzleifarben (Abschnitt 11 des Leitfadens) --- */
  --farbe-primaer: #1a3c5e;
  --farbe-primaer-dunkel: #12293f;
  --farbe-primaer-tief: #0d1f2f;
  --farbe-primaer-hell: #eef3f8;
  --farbe-akzent: #58ccc6;
  --farbe-akzent-dunkel: #2fa9a3;
  --farbe-akzent-flaeche: #edfaf9;

  /* --- Neutrale Abstufungen ---
     „Leise“ trug früher #74838f und kam damit auf 3,90:1 gegen Weiß –
     nötig sind 4,5:1. Ausgerechnet diese Farbe steht überall dort, wo
     die Schrift ohnehin klein ist: Tabellenköpfe, Nebenangaben,
     Hilfetexte, Beschriftungen der Kennzahlen. Jetzt 5,47:1; die
     Abstufung zu „gedämpft“ bleibt erhalten. */
  --farbe-text: #16202b;
  --farbe-text-gedaempft: #4a5a6a;
  --farbe-text-leise: #5d6b78;
  --farbe-text-platzhalter: #6b7a87;
  --farbe-linie: #e2e8ee;
  --farbe-linie-kraeftig: #cfd8e1;
  --farbe-linie-ruhig: #eef1f4;
  --farbe-flaeche: #ffffff;
  --farbe-flaeche-leise: #f7f9fb;
  --farbe-hintergrund: #f2f5f8;

  /* --- Fokus ---
     Der Fokusring war ein durchscheinender Türkisschimmer: gegen Weiß
     gerechnet 1,20:1 bis 1,34:1, während WCAG 1.4.11 für Bedienelemente
     3:1 verlangt. Wer mit der Tastatur arbeitete, sah praktisch nicht,
     wo er steht. Jetzt volldeckend und abgesetzt, damit der Ring auch
     auf einer dunklen Schaltfläche erkennbar bleibt.

     Zwei Fassungen: die dunkle für helle Flächen, die helle für die
     Kopf- und die Seitenleiste. */
  --farbe-fokus: #1a3c5e;
  --farbe-fokus-hell: #58ccc6;
  --fokus-breite: 2px;
  --fokus-abstand: 2px;

  /* --- Zustandsfarben --- */
  --farbe-warnung: #a8620a;
  --farbe-warnung-flaeche: #fdf6ec;
  --farbe-warnung-linie: #e8c89a;
  --farbe-fehler: #a4291c;
  --farbe-fehler-flaeche: #fdf1f0;
  --farbe-fehler-linie: #e8b3ad;
  --farbe-erfolg: #1a6b3c;
  --farbe-erfolg-flaeche: #eef7f1;
  --farbe-erfolg-linie: #a9d3ba;
  /* Der ruhige Zustand: etwas ist geschehen und in Ordnung, aber noch nicht
     abgeschlossen – eine fakturierte, noch offene Rechnung etwa. Die Farbe
     wurde in Phase 7 benutzt, aber nie festgelegt; die Kennzeichen
     „fakturiert“ und „teilbezahlt“ standen deshalb ohne Fläche da.
     6,96:1 auf der eigenen Fläche, wie die drei Farben darüber. */
  --farbe-hinweis: #14567f;
  --farbe-hinweis-flaeche: #eaf2f9;
  --farbe-info-linie: #cfdce8;
  /* Die laufende Stoppuhr im dunklen Kopf: dort braucht die Warnung
     einen hellen Ton, die Zustandsfarben oben sind für weiße Flächen. */
  --farbe-warnung-punkt: #f0b429;
  --farbe-warnung-hell: #ffd98a;
  /* Das Vorjahr im Auswertungsschaubild. Es trägt zusätzlich eine
     Schraffur, denn Farbe allein unterscheidet nicht. */
  --farbe-vorjahr: #9fb2c6;

  /* --- Abstände --- */
  --abstand-winzig: 0.25rem;
  --abstand-klein: 0.5rem;
  --abstand: 1rem;
  --abstand-gross: 1.75rem;
  --abstand-riesig: 2.75rem;

  /* --- Form --- */
  --radius-klein: 4px;
  --radius: 8px;

  /* Höhe eines einzeiligen Bedienelements – Eingabe-, Datums- und
     Auswahlfeld. Als Variable, weil jede Art ihre eigene innere Gestaltung
     mitbringt und „min-height“ allein sie nicht auf dieselbe Höhe bringt.
     Der Wert entspricht der bisher größten der drei Höhen; nichts wird
     dadurch enger. */
  --hoehe-bedienelement: 2.6rem;

  /* Breite eines Feldes, das nur eine kurze Angabe trägt: ein Datum, ein
     Name aus einer Liste. Als Variable, damit solche Felder nebeneinander
     gleich breit bleiben – ein Datumsfeld von 224 und ein Auswahlfeld von
     589 Pixeln in derselben Zeile sah aus, als sei etwas zerbrochen. */
  --breite-kurzfeld: 14rem;
  --radius-gross: 12px;
  --schatten-leicht: 0 1px 2px rgba(22, 32, 43, 0.05);
  --schatten: 0 1px 3px rgba(22, 32, 43, 0.07), 0 6px 20px -8px rgba(22, 32, 43, 0.12);
  --schatten-hoch: 0 12px 32px -10px rgba(22, 32, 43, 0.28);

  /* --- Schrift ---
     Avenir entspricht der Schrift des Logos und ist auf den Rechnern der
     Kanzlei vorhanden. Die Oberfläche wird im Browser dargestellt, nicht auf
     dem Server; die Schrift muss deshalb nur dort verfügbar sein. */
  --schrift: "Avenir Next", "Avenir", -apple-system, BlinkMacSystemFont,
             "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  --schrift-zahlen: "SF Mono", "JetBrains Mono", ui-monospace, Menlo, Consolas, monospace;

  /* --- Schriftgrößen ---
     Der Dateikopf verspricht seit jeher, dass auch die Schriftgrößen als
     Variablen stehen. Tatsächlich waren es 17 frei gewählte Stufen von
     0,62 bis 1,6 rem – darunter 0,92 neben 0,93 rem, ein Unterschied von
     0,15 Pixeln, der nur Pflegeaufwand war. Sieben Sprossen genügen. */
  --schrift-mikro: 0.62rem;     /* das Wort „Kanzlei“ im Umschalter */
  --schrift-winzig: 0.72rem;    /* Tabellenköpfe, Kennzahlbeschriftungen */
  --schrift-sehr-klein: 0.78rem;
  --schrift-klein: 0.85rem;     /* Beiwerk, Hilfetexte */
  --schrift-normal: 0.93rem;    /* Eingabefelder, Schaltflächen, Reiter */
  --schrift-mittel: 1.05rem;
  --schrift-gross: 1.4rem;
  --schrift-titel: 1.6rem;      /* h1, Kennzahlwerte */

  --breite-inhalt: 1320px;
  --breite-seitenleiste: 11rem;
  --hoehe-kopfleiste: 64px;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--schrift);
  font-size: 15px;
  line-height: 1.55;
  color: var(--farbe-text);
  background: var(--farbe-hintergrund);
  -webkit-font-smoothing: antialiased;
}

a { color: var(--farbe-primaer); text-decoration: none; }
a:hover { text-decoration: underline; }

/* Ein Verweis mitten im Fließtext trägt einen Unterstrich.

   Nachgerechnet: die Verweisfarbe #1a3c5e steht gegen die Textfarbe
   #16202b bei 1,45:1. WCAG 1.4.1 verlangt 3:1, wenn die Farbe das einzige
   Merkmal ist – ein Verweis in einem Satz war damit nicht als solcher zu
   erkennen. Die Farbe aufzuhellen kam nicht in Betracht: es ist die
   Kanzleifarbe. Also ein zweites Merkmal, das nicht an der Farbe hängt.

   In Listen, Tabellen und der Navigation füllt der Verweis den ganzen
   Eintrag und steht für sich; dort wäre der Unterstrich nur Unruhe. */
p a:not(.schaltflaeche),
.leerhinweis a:not(.schaltflaeche),
.meldung a:not(.schaltflaeche) {
  text-decoration: underline;
  text-underline-offset: 0.16em;
  text-decoration-thickness: from-font;
}

/* ===================================================================
   Kopfleiste
   =================================================================== */

.kopfleiste {
  display: flex;
  align-items: center;
  gap: var(--abstand);
  padding: 0 var(--abstand-gross);
  height: var(--hoehe-kopfleiste);
  background: var(--farbe-primaer);
  color: #fff;
  position: sticky;
  top: 0;
  z-index: 100;
}

.kopfleiste__logo { display: flex; align-items: center; }
.kopfleiste__logo img { height: 44px; display: block; }

.kopfleiste__suche { flex: 1; max-width: 380px; position: relative; }

/* Doppelte Klasse, damit diese Regel die allgemeine Formularregel weiter
   unten sicher übersteuert – sonst erschiene das Feld weiß auf Dunkelblau. */
.kopfleiste .kopfleiste__suche input[type="search"] {
  width: 100%;
  padding: 0.5rem 0.85rem;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: var(--radius-klein);
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
  font: inherit;
  font-size: var(--schrift-normal);
  transition: background 0.15s, border-color 0.15s, box-shadow 0.15s;
}

.kopfleiste .kopfleiste__suche input[type="search"]::placeholder {
  color: rgba(255, 255, 255, 0.62);
}

/* Damit die Taste nicht auf dem eingegebenen Text liegt. */
.kopfleiste .kopfleiste__suche input[type="search"] { padding-right: 2.2rem; }

/* Der Hinweis auf das Tastenkürzel „/“.

   Er steht im Feld, solange dort nichts geschieht, und verschwindet, sobald
   der Fokus hineingeht – dann ist er erledigt und stünde nur im Weg. */
.suchkuerzel {
  position: absolute;
  top: 50%;
  right: 0.55rem;
  transform: translateY(-50%);
  padding: 0.05rem 0.35rem;
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: var(--radius-klein);
  background: rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.66);
  font-family: inherit;
  font-size: var(--schrift-mikro);
  line-height: 1.5;
  pointer-events: none;
  transition: opacity 0.15s;
}

.kopfleiste__suche:focus-within .suchkuerzel { opacity: 0; }

/* Auf dem Tablet wird mit den Fingern getippt, nicht mit einer Tastatur. */
@media (max-width: 950px) { .suchkuerzel { display: none; } }

.kopfleiste .kopfleiste__suche input[type="search"]:focus {
  outline: var(--fokus-breite) solid var(--farbe-fokus-hell);
  outline-offset: var(--fokus-abstand);
  background: #fff;
  color: var(--farbe-text);
  border-color: var(--farbe-akzent);
}

.kopfleiste__rechts {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: var(--abstand);
  font-size: var(--schrift-normal);
}

.kopfleiste a { color: #fff; }

/* ===================================================================
   Seitenleiste – die Hauptnavigation steht links, untereinander

   Sie trägt dieselbe Farbe wie die Kopfleiste, nur eine Spur tiefer:
   beides gehört zusammen und rahmt den Inhalt. Türkis markiert wie
   überall ausschließlich, wo man gerade ist.
   =================================================================== */

/* Sprungmarke: unsichtbar, bis sie den Fokus bekommt. Wer mit der
   Tastatur arbeitet, durchlief sonst auf jeder Seite erst Logo,
   Suchfeld, Stoppuhr, Abmelden und die ganze Navigation. */
.sprungmarke {
  position: absolute;
  left: var(--abstand-klein);
  top: -3rem;
  z-index: 200;
  padding: 0.5rem 0.9rem;
  border-radius: 0 0 var(--radius) var(--radius);
  background: var(--farbe-flaeche);
  color: var(--farbe-primaer);
  font-size: var(--schrift-normal);
  font-weight: 600;
  text-decoration: none;
  box-shadow: var(--schatten);
  transition: top 0.12s;
}

.sprungmarke:focus {
  top: 0;
  outline: var(--fokus-breite) solid var(--farbe-fokus);
  outline-offset: var(--fokus-abstand);
}

/* Das Ziel der Sprungmarke bekommt den Fokus, zeichnet ihn aber nicht:
   es ist ein ganzer Bereich, kein Bedienelement. */
.inhalt:focus { outline: none; }

.rahmen {
  display: flex;
  align-items: stretch;
  min-height: calc(100vh - var(--hoehe-kopfleiste));
}

.seitenleiste {
  flex: none;
  width: var(--breite-seitenleiste);
  background: var(--farbe-primaer-dunkel);
  position: sticky;
  top: var(--hoehe-kopfleiste);
  align-self: flex-start;
  height: calc(100vh - var(--hoehe-kopfleiste));
  overflow-y: auto;
  overscroll-behavior: contain;
  z-index: 90;
}

/* Knopf zum Ein- und Ausklappen, oben rechts in der Spalte. Ohne
   JavaScript ist er verborgen: eingeklappt und ohne Möglichkeit,
   wieder aufzuklappen, wäre die Navigation weg. */
.seitenleiste__klappe {
  display: block;
  margin: 0.4rem 0.4rem 0 auto;
  width: 1.8rem;
  height: 1.8rem;
  padding: 0;
  border: none;
  border-radius: var(--radius-klein);
  background: transparent;
  color: rgba(255, 255, 255, 0.55);
  cursor: pointer;
  line-height: 1;
}

.seitenleiste__klappe:hover {
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
}

.seitenleiste__klappe:focus-visible {
  outline: var(--fokus-breite) solid var(--farbe-fokus-hell);
  outline-offset: calc(-1 * var(--fokus-breite));
}

.seitenleiste__pfeil {
  font-size: var(--schrift-mittel);
  font-weight: 600;
}

/* Eingeklappt bleibt ein schmaler Streifen mit dem Knopf stehen. Die
   Einträge werden ausgeblendet, nicht nur verschmälert: eine Spalte
   aus Anfangsbuchstaben liest niemand. */
.navigation-eingeklappt .seitenleiste { width: 2.6rem; }
.navigation-eingeklappt .seitenleiste__liste { display: none; }
.navigation-eingeklappt .seitenleiste__klappe {
  margin-right: auto;
  margin-left: auto;
}

.seitenleiste__liste {
  list-style: none;
  margin: 0;
  padding: 0.6rem 0;
}

.seitenleiste__liste a {
  display: block;
  padding: 0.62rem var(--abstand);
  /* Der aktive Eintrag bekommt links einen türkisen Balken. Damit der Text
     nicht springt, trägt jeder Eintrag denselben durchsichtigen Balken. */
  border-left: 3px solid transparent;
  color: rgba(255, 255, 255, 0.76);
  font-size: var(--schrift-normal);
  text-decoration: none;
  transition: background 0.12s, color 0.12s;
}

.seitenleiste__liste a:hover {
  background: rgba(255, 255, 255, 0.07);
  color: #fff;
}

.seitenleiste__liste a:focus-visible {
  outline: var(--fokus-breite) solid var(--farbe-fokus-hell);
  outline-offset: calc(-1 * var(--fokus-breite));
}

.seitenleiste__liste a.aktiv {
  background: rgba(88, 204, 198, 0.14);
  border-left-color: var(--farbe-akzent);
  color: #fff;
  font-weight: 500;
}

/* Einstellungen gehören nicht zur täglichen Arbeit und stehen abgesetzt. */
.seitenleiste__abgesetzt {
  margin-top: 0.5rem;
  padding-top: 0.5rem;
  border-top: 1px solid rgba(255, 255, 255, 0.13);
}

.hauptbereich {
  flex: 1;
  /* Ohne diese Zeile sprengen breite Tabellen die Spalte, statt in ihrem
     eigenen Rahmen zu scrollen. */
  min-width: 0;
  display: flex;
  flex-direction: column;
}

/* ===================================================================
   Kontextleiste – wo man ist, und die Reiter der geöffneten Akte
   =================================================================== */

.kontextleiste {
  display: flex;
  align-items: center;
  min-height: 2.9rem;
  padding: 0;
  background: var(--farbe-flaeche);
  border-bottom: 1px solid var(--farbe-linie);
  position: sticky;
  top: var(--hoehe-kopfleiste);
  z-index: 80;
  overflow-x: auto;
  /* Die Leiste selbst rollt waagerecht, wenn viele Reiter darin stehen;
     der senkrechte Rand bleibt dabei unsichtbar. */
  scrollbar-width: thin;
}

/* Derselbe Zuschnitt wie beim Inhalt: die Reiter fluchten mit der
   Überschrift darunter, statt am Rand der Spalte zu kleben. */
.kontextleiste__inhalt {
  display: flex;
  align-items: center;
  gap: var(--abstand-gross);
  width: 100%;
  max-width: var(--breite-inhalt);
  margin: 0 auto;
  padding: 0 var(--abstand-gross);
}

/* Wo es keine Reiter gibt, steht hier der Name der Seite – und zwar als
   deren Überschrift, nicht als Wiederholung daneben. Im Inhalt steht
   dieselbe Überschrift nur noch für Vorlesegeräte. Gesetzt wie ein
   aktiver Reiter, damit die Leiste überall gleich aussieht. */
.kontextleiste__name {
  font-size: var(--schrift-normal);
  font-weight: 600;
  color: var(--farbe-primaer);
  white-space: nowrap;
  margin: 0;
}

.kontextleiste .reiter {
  border-bottom: none;
  margin: 0;
  padding: 0;
  gap: var(--abstand-gross);
}

.kontextleiste .reiter a {
  /* Der türkise Strich sitzt auf der Trennlinie der Leiste, nicht darüber. */
  padding: 0.85rem 0;
  margin-bottom: -1px;
  white-space: nowrap;
}

/* ===================================================================
   Inhalt und Überschriften
   =================================================================== */

.inhalt {
  flex: 1;
  /* Ohne die volle Breite schrumpft der Inhalt auf seinen Text zusammen:
     „margin: 0 auto“ hebt in einer Flex-Spalte das Dehnen auf. */
  width: 100%;
  max-width: var(--breite-inhalt);
  margin: 0 auto;
  padding: var(--abstand-gross) var(--abstand-gross) var(--abstand-riesig);
}

h1 {
  font-size: var(--schrift-titel);
  line-height: 1.25;
  margin: 0 0 var(--abstand);
  font-weight: 600;
  letter-spacing: -0.015em;
  color: var(--farbe-primaer);
}

h2 {
  font-size: var(--schrift-mittel);
  margin: var(--abstand-gross) 0 var(--abstand-klein);
  font-weight: 600;
  letter-spacing: -0.005em;
}

h3 { font-size: var(--schrift-normal); margin: var(--abstand) 0 var(--abstand-klein); font-weight: 600; }

.karte {
  background: var(--farbe-flaeche);
  border: 1px solid var(--farbe-linie);
  border-radius: var(--radius);
  padding: var(--abstand-gross);
  box-shadow: var(--schatten-leicht);
}

/* ===================================================================
   Tabellen
   =================================================================== */

table {
  width: 100%;
  border-collapse: collapse;
  background: var(--farbe-flaeche);
  border: 1px solid var(--farbe-linie);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--schatten-leicht);
}

th, td {
  padding: 0.85rem 0.95rem;
  text-align: left;
  border-bottom: 1px solid var(--farbe-linie);
  vertical-align: top;
}

thead th {
  font-size: var(--schrift-winzig);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 600;
  color: var(--farbe-text-leise);
  background: var(--farbe-flaeche-leise);
  border-bottom: 1px solid var(--farbe-linie-kraeftig);
  white-space: nowrap;
}

/* Spaltenköpfe, über die sich die Liste ordnen lässt. Sie sollen nicht
   nach Verweis aussehen – der Kopf bleibt ein Kopf, nur anklickbar. */
.spaltenkopf {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  color: inherit;
  text-decoration: none;
}

.spaltenkopf:hover {
  color: var(--farbe-primaer);
  text-decoration: none;
}

.spaltenkopf:focus-visible {
  outline: var(--fokus-breite) solid var(--farbe-fokus);
  outline-offset: var(--fokus-abstand);
}

.spaltenkopf--aktiv {
  color: var(--farbe-primaer);
}

.spaltenkopf__pfeil {
  font-size: 0.9em;
  line-height: 1;
}

/*
   Hierarchie in Listen: die Angabe, nach der gesucht wird – Aktenzeichen,
   Mandantenname –, traegt die Zeile und wird deshalb halbfett in der
   Primaerfarbe gesetzt. Alles Begleitende tritt zurueck. Ohne diese
   Abstufung sieht eine Liste aus, als sei jede Spalte gleich wichtig.
*/
td .hauptangabe,
td a.hauptangabe {
  font-weight: 600;
  color: var(--farbe-primaer);
  font-variant-numeric: tabular-nums;
}

td .nebenangabe {
  display: block;
  margin-top: 0.15rem;
  font-size: var(--schrift-sehr-klein);
  line-height: 1.35;
  color: var(--farbe-text-leise);
}

/* Begleitende Spalten leiser als die tragende. */
td.beiwerk { color: var(--farbe-text-leise); font-size: var(--schrift-klein); }

/* In der letzten Zeile keine Linie mehr – auch nicht unter der
   Beschriftungsspalte. Stand dort nur ``td``, blieb unter dem letzten
   ``th`` ein Stummel stehen, der kürzer war als alle Linien darüber. */
tbody tr:last-child td, tbody tr:last-child th { border-bottom: none; }
tbody tr:hover { background: var(--farbe-primaer-hell); }

/* In Tabellen mit Beschriftungsspalte (Übersichten) links leiser setzen */
.karte table { border: none; box-shadow: none; }
.karte table th { background: transparent; text-transform: none; letter-spacing: 0.04em; }

/* Das Stammblatt einer Akte: zwei Spalten.

   Einspaltig lief es über eine halbe Bildschirmhöhe, obwohl zwei Drittel
   der Zeilen nur ein „–“ trugen. Die leeren Zeilen sind jetzt in der
   Vorlage weggelassen; der Rest steht nebeneinander, links das Mandat,
   rechts das Verfahren.

   Bewusst zwei eigenständige Tabellen statt einer umbrochenen: eine
   Tabelle mit „display: grid“ zu brechen kostet in mehreren Browsern die
   Tabellensemantik, auf die Vorlesegeräte sich stützen. */
.stammblatt {
  display: grid;
  /* Feste zwei Spalten, nicht „auto-fit“: dort dehnt sich eine einzelne
     Spalte wieder auf die volle Breite aus, und genau das sollte weg. */
  grid-template-columns: 1fr 1fr;
  gap: 0 var(--abstand-riesig);
  align-items: start;
}

@media (max-width: 950px) {
  .stammblatt { grid-template-columns: 1fr; }
}

/* Fließtext braucht die ganze Breite, nicht die halbe. */
.stammblatt--breit { grid-column: 1 / -1; }

.stammblatt__titel {
  margin: 0 0 var(--abstand-klein);
  font-size: var(--schrift-klein);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--farbe-text-leise);
}

/* Nur der Abschnitt über die ganze Breite rückt ab – er steht unter den
   beiden Spalten. Die zweite Spalte selbst darf nicht abrücken: sie steht
   neben der ersten, nicht unter ihr. */
.stammblatt--breit .stammblatt__titel { margin-top: var(--abstand-gross); }

/* Was nicht ausgefüllt ist, in einer Zeile statt in sechs leeren. */
.stammblatt__fehlt {
  margin: var(--abstand) 0 0;
  padding-top: var(--abstand);
  border-top: 1px solid var(--farbe-linie);
  font-size: var(--schrift-klein);
  color: var(--farbe-text-leise);
}

/* Zahlen rechtsbündig und mit gleicher Zeichenbreite, damit sie vergleichbar sind */
td.zahl, th.zahl { text-align: right; }
td.zahl { font-variant-numeric: tabular-nums; }

/* ===================================================================
   Schaltflächen
   =================================================================== */

.schaltflaeche {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.5rem 1rem;
  border: 1px solid var(--farbe-primaer);
  border-radius: var(--radius-klein);
  background: var(--farbe-primaer);
  color: #fff;
  font: inherit;
  font-size: var(--schrift-normal);
  font-weight: 500;
  text-decoration: none;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, box-shadow 0.15s;
  white-space: nowrap;
}

.schaltflaeche:hover {
  background: var(--farbe-primaer-dunkel);
  border-color: var(--farbe-primaer-dunkel);
  text-decoration: none;
}

.schaltflaeche:focus-visible {
  outline: var(--fokus-breite) solid var(--farbe-fokus);
  outline-offset: var(--fokus-abstand);
}

.schaltflaeche--leise {
  background: var(--farbe-flaeche);
  color: var(--farbe-primaer);
  border-color: var(--farbe-linie-kraeftig);
}

.schaltflaeche--leise:hover {
  background: var(--farbe-primaer-hell);
  border-color: var(--farbe-primaer);
}

.aktionen {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  margin: 0 0 var(--abstand-gross);
}

.aktionen form { margin: 0; display: inline-flex; }

/* ===================================================================
   Formulare
   =================================================================== */

label {
  display: block;
  margin-bottom: 0.25rem;
  font-size: var(--schrift-klein);
  font-weight: 600;
  color: var(--farbe-text-gedaempft);
}

input[type="text"], input[type="email"], input[type="number"], input[type="date"],
input[type="time"], input[type="password"], input[type="url"], input[type="tel"],
input[type="search"], select, textarea {
  width: 100%;
  min-height: var(--hoehe-bedienelement);
  padding: 0.45rem 0.7rem;
  border: 1px solid var(--farbe-linie-kraeftig);
  border-radius: var(--radius-klein);
  font: inherit;
  font-size: var(--schrift-normal);
  color: var(--farbe-text);
  background: var(--farbe-flaeche);
  box-shadow: 0 1px 1px rgba(22, 32, 43, 0.03) inset;
  transition: border-color 0.15s, box-shadow 0.15s, background 0.15s;
}

input:hover, select:hover, textarea:hover { border-color: var(--farbe-text-leise); }

input:focus, select:focus, textarea:focus {
  outline: var(--fokus-breite) solid var(--farbe-fokus);
  outline-offset: var(--fokus-abstand);
  border-color: var(--farbe-akzent-dunkel);
  background: var(--farbe-flaeche);
}

input::placeholder, textarea::placeholder { color: var(--farbe-text-platzhalter); }

textarea { line-height: 1.5; resize: vertical; min-height: 4.5rem; }

/* --- Auswahlfelder ---
   Das Winkelzeichen wird bewusst NICHT als Hintergrundbild des Auswahlfelds
   gezeichnet: die aufgeklappte Liste des Browsers übernimmt den Hintergrund
   des Feldes für jede Zeile, wodurch das Zeichen mehrfach über den
   Einträgen erschien. Hier bleibt daher das Zeichen des Browsers stehen;
   gestaltet werden Rahmen, Höhe, Abstände und der Fokusrahmen.

   Das gezeichnete Winkelzeichen gibt es weiterhin beim durchsuchbaren
   Auswahlfeld weiter unten – dort ist die Schaltfläche ein Knopf ohne
   eigene Liste, dieser Fehler kann dort nicht auftreten. */
select {
  cursor: pointer;
  padding-right: 0.5rem;
}

select option {
  color: var(--farbe-text);
  background-color: var(--farbe-flaeche);
  background-image: none;
  padding: 0.3rem;
}

select option:disabled { color: var(--farbe-text-leise); }

/* Mehrfachauswahl: Luft zwischen den Zeilen */
select[multiple] {
  padding: 0.35rem;
  cursor: default;
  min-height: 8rem;
}

select[multiple] option {
  padding: 0.3rem 0.45rem;
  border-radius: 3px;
  margin-bottom: 1px;
}

select[multiple] option:checked {
  background: var(--farbe-primaer-hell) linear-gradient(0deg, var(--farbe-primaer-hell), var(--farbe-primaer-hell));
  color: var(--farbe-primaer);
  font-weight: 600;
}

/* Ankreuzfelder und Schalter in den Kanzleifarben */
input[type="checkbox"], input[type="radio"] {
  accent-color: var(--farbe-akzent-dunkel);
  width: 1rem;
  height: 1rem;
  min-height: 0;
  cursor: pointer;
}

/* Einzeilige Bedienelemente sind gleich hoch.

   Sie waren es nicht: ein Textfeld maß 39,5 Pixel, ein Datumsfeld 41,5, ein
   Auswahlfeld 38,9. Jede Art bringt ihre eigene innere Gestaltung mit – das
   Datumsfeld ein Kalendersymbol, das Auswahlfeld einen Pfeil –, und eine
   Mindesthöhe gleicht das nicht aus. Nebeneinander in einer Zeile fällt es
   auf. Wie stark, hängt zudem vom Browser ab: Safari setzt Auswahlfelder
   höher als Chrome.

   Das Textfeld für mehrere Zeilen ist ausgenommen – es soll wachsen. */
input[type="text"], input[type="email"], input[type="number"], input[type="date"],
input[type="time"], input[type="password"], input[type="url"], input[type="tel"],
input[type="search"], select:not([multiple]) {
  height: var(--hoehe-bedienelement);
}

/* Datums- und Zeitfelder nicht breiter machen als nötig */
input[type="date"], input[type="time"] { max-width: var(--breite-kurzfeld); }
input[type="time"] { max-width: 9rem; }

/* Ein Auswahlfeld, das nur einen Namen trägt, ebenso. „Zuständig“ stand
   neben „Fällig am“ und war mehr als doppelt so breit. */
select.eingabe--kurz { max-width: var(--breite-kurzfeld); }

.feld { margin-bottom: var(--abstand); }

/* Pflichtfelder. Vor dem Absenden war nirgends zu erkennen, was zwingend
   auszufüllen ist – bei einer über fünfzig Felder langen Maske erfuhr man
   es erst hinterher. Das Sternchen ist rein schmückend: für Vorlesegeräte
   trägt das Feld selbst bereits „required“. */
.feld.pflicht > label::after,
.feld.pflicht > legend::after {
  content: " *";
  color: var(--farbe-fehler);
  font-weight: 600;
}

.feld__hinweis { font-size: var(--schrift-sehr-klein); color: var(--farbe-text-leise); margin-top: 0.2rem; }
.feld__fehler { font-size: var(--schrift-sehr-klein); color: var(--farbe-fehler); margin-top: 0.2rem; font-weight: 500; }

.feld--ankreuz label {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-weight: 400;
  color: var(--farbe-text);
}

.feld--ankreuz input[type="checkbox"] { margin: 0; }

.feld--gruppe {
  border: 1px solid var(--farbe-linie);
  border-radius: var(--radius-klein);
  padding: 0.6rem 0.9rem 0.9rem;
  margin-bottom: var(--abstand);
}

.feld--gruppe legend { font-size: var(--schrift-klein); font-weight: 600; padding: 0 0.3rem;
                       color: var(--farbe-text-gedaempft); }
.feld--gruppe > div { display: flex; flex-wrap: wrap; gap: 0.3rem 1.5rem; }
.feld--gruppe label { display: flex; align-items: center; gap: 0.4rem;
                      font-weight: 400; margin: 0; color: var(--farbe-text); }

/* Abschnitte mit zwei Spalten */
.feldgruppe {
  border: none;
  border-top: 1px solid var(--farbe-linie);
  padding: var(--abstand) 0 0;
  margin: 0 0 var(--abstand-gross);
}

.feldgruppe:first-of-type { border-top: none; padding-top: 0; }

.feldgruppe > legend {
  font-size: var(--schrift-sehr-klein);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--farbe-primaer);
  padding: 0;
  margin-bottom: var(--abstand-klein);
}

.feldgruppe__raster {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 var(--abstand-gross);
}

.feldgruppe__raster .feld:has(textarea),
.feldgruppe__raster .feld--gruppe,
.feldgruppe__raster .feld:has(select[multiple]),
.feldgruppe__raster .feld:has(input[type="url"]),
/* Ein ausdrücklich breit gesetztes Feld – etwa der Aufgabentext. Ohne das
   belegte er eine halbe Zeile, „Zuständig“ rutschte darunter und stand
   nicht mehr neben „Fällig am“, obwohl beide zusammengehören. */
.feldgruppe__raster .feld:has(.eingabe--breit) {
  grid-column: 1 / -1;
}

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

/* ===================================================================
   Meldungen und Kennzeichnungen
   =================================================================== */

.meldung {
  padding: 0.8rem var(--abstand);
  border-radius: var(--radius-klein);
  border: 1px solid;
  border-left-width: 4px;
  margin-bottom: var(--abstand);
  font-size: var(--schrift-normal);
}

.meldung--erfolg  { background: var(--farbe-erfolg-flaeche);  border-color: var(--farbe-erfolg-linie);  border-left-color: var(--farbe-erfolg); }
.meldung--warnung { background: var(--farbe-warnung-flaeche); border-color: var(--farbe-warnung-linie); border-left-color: var(--farbe-warnung); }
.meldung--fehler  { background: var(--farbe-fehler-flaeche);  border-color: var(--farbe-fehler-linie);  border-left-color: var(--farbe-fehler); }
.meldung--info    { background: var(--farbe-primaer-hell);    border-color: var(--farbe-info-linie);                    border-left-color: var(--farbe-primaer); }

.kennzeichen {
  display: inline-block;
  padding: 0.12rem 0.55rem;
  border-radius: 999px;
  font-size: var(--schrift-sehr-klein);
  font-weight: 600;
  letter-spacing: 0.01em;
  background: var(--farbe-primaer-hell);
  color: var(--farbe-primaer);
  white-space: nowrap;
}

.kennzeichen--archiviert { background: var(--farbe-linie-ruhig); color: var(--farbe-text-leise); }
.kennzeichen--warnung    { background: var(--farbe-warnung-flaeche); color: var(--farbe-warnung); }

/* ===================================================================
   Kennzahlen
   =================================================================== */

.kennzahlen {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--abstand);
  margin-bottom: var(--abstand-gross);
}

.kennzahlen__ueberschrift {
  font-size: var(--schrift-sehr-klein);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--farbe-text-leise);
  margin: 0 0 var(--abstand-klein);
}

.kennzahlen__ueberschrift + .kennzahlen { margin-bottom: var(--abstand-gross); }

.kennzahl {
  /* Spalte statt Block, damit die Werte auf einer Grundlinie stehen.

     Gemessen auf der Startseite: vier Werte lagen auf 315 Pixeln, einer auf
     333 – weil „Honorar nicht abgerechnet“ als einzige Beschriftung
     zweizeilig umbricht. Die Kacheln sind durch das Raster ohnehin gleich
     hoch; die Beschriftung nimmt sich mit „flex: 1“ den überzähligen Platz,
     und Wert und Zusatz hängen von unten. Damit fluchten die Werte, ohne
     dass eine leere Zeile reserviert werden müsste, wenn nichts umbricht. */
  display: flex;
  flex-direction: column;
  background: var(--farbe-flaeche);
  border: 1px solid var(--farbe-linie);
  border-radius: var(--radius);
  padding: 0.85rem var(--abstand) 0.85rem calc(var(--abstand) + 3px);
  box-shadow: var(--schatten-leicht);
  position: relative;
  overflow: hidden;
  color: inherit;
  text-decoration: none;
  transition: border-color 0.15s, box-shadow 0.15s;
}

/* Feiner türkiser Streifen als Akzent */
.kennzahl::before {
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 3px;
  background: var(--farbe-akzent);
}

/* Kacheln, die auf eine Liste führen, reagieren auf den Mauszeiger */
a.kennzahl:hover {
  border-color: var(--farbe-akzent-dunkel);
  box-shadow: var(--schatten);
  text-decoration: none;
}

/* Beschriftung steht über dem Wert: so ist die Zuordnung eindeutig */
.kennzahl__beschriftung {
  flex: 1;
  font-size: var(--schrift-winzig);
  color: var(--farbe-text-leise);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 0.15rem;
}

.kennzahl__wert {
  font-size: var(--schrift-titel);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
  color: var(--farbe-primaer);
  line-height: 1.15;
}

.kennzahl__zusatz {
  font-size: var(--schrift-sehr-klein);
  color: var(--farbe-text-leise);
  margin-top: 0.1rem;
}

/* ===================================================================
   Fortschrittsbalken (Stundenkontingent)
   =================================================================== */

.balken {
  height: 8px;
  background: var(--farbe-primaer-hell);
  border-radius: 999px;
  overflow: hidden;
  margin: 0.45rem 0;
}

.balken__fuellung { height: 100%; background: var(--farbe-akzent-dunkel); border-radius: 999px; }
.balken__fuellung--warnung { background: var(--farbe-warnung); }
.balken__fuellung--ueberschritten { background: var(--farbe-fehler); }

/* ===================================================================
   Reiter innerhalb einer Akte
   =================================================================== */

.reiter {
  display: flex;
  flex-wrap: wrap;
  gap: var(--abstand-gross);
  border-bottom: 1px solid var(--farbe-linie);
  margin-bottom: var(--abstand-gross);
}

.reiter a {
  padding: 0.55rem 0;
  color: var(--farbe-text-gedaempft);
  text-decoration: none;
  border-bottom: 3px solid transparent;
  margin-bottom: -1px;
  font-size: var(--schrift-normal);
}

.reiter a:hover { color: var(--farbe-primaer); text-decoration: none; }

.reiter a:focus-visible {
  outline: var(--fokus-breite) solid var(--farbe-fokus);
  outline-offset: var(--fokus-abstand);
}

.reiter a.aktiv {
  color: var(--farbe-primaer);
  font-weight: 600;
  border-bottom-color: var(--farbe-akzent);
}

/* ===================================================================
   Aufgaben

   Eine Liste, keine Tabelle: eine Aufgabe ist ein Satz mit einem
   Kästchen davor, keine Zeile aus Spalten. Der Zustand steht links als
   schmaler Balken – überfällig kräftig, heute deutlich, sonst ruhig.
   =================================================================== */

.aufgaben {
  list-style: none;
  margin: 0 0 var(--abstand-gross);
  padding: 0;
}

.aufgabe {
  display: flex;
  align-items: flex-start;
  gap: var(--abstand-klein);
  padding: 0.6rem var(--abstand) 0.6rem calc(var(--abstand) - 3px);
  border: 1px solid var(--farbe-linie);
  border-left: 3px solid var(--farbe-linie-kraeftig);
  border-radius: var(--radius-klein);
  background: var(--farbe-flaeche);
  margin-bottom: var(--abstand-klein);
}

.aufgabe--ueberfaellig { border-left-color: var(--farbe-fehler); }
.aufgabe--heute { border-left-color: var(--farbe-warnung); }
.aufgabe--erledigt {
  border-left-color: var(--farbe-linie);
  background: var(--farbe-flaeche-leise);
}

.aufgabe--erledigt .aufgabe__text {
  text-decoration: line-through;
  color: var(--farbe-text-leise);
}

.aufgabe__abhaken { flex: 0 0 auto; margin: 0; }

/* Das Kästchen ist eine Schaltfläche, kein Ankreuzfeld: es schickt ab
   und muss deshalb auch ohne JavaScript ein Formular auslösen. */
.aufgabe__kaestchen {
  width: 1.25rem;
  height: 1.25rem;
  margin-top: 0.1rem;
  padding: 0;
  border: 1px solid var(--farbe-linie-kraeftig);
  border-radius: var(--radius-klein);
  background: var(--farbe-flaeche);
  color: var(--farbe-primaer);
  font-size: var(--schrift-klein);
  line-height: 1;
  cursor: pointer;
}

.aufgabe__kaestchen:hover { border-color: var(--farbe-primaer); }

.aufgabe__kaestchen:focus-visible {
  outline: var(--fokus-breite) solid var(--farbe-fokus);
  outline-offset: var(--fokus-abstand);
}

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

.aufgabe__text {
  display: block;
  font-weight: 500;
  color: var(--farbe-text);
}

.aufgabe__angaben {
  display: block;
  margin-top: 0.15rem;
  font-size: var(--schrift-klein);
  color: var(--farbe-text-leise);
}

.aufgabe--ueberfaellig .aufgabe__frist {
  color: var(--farbe-fehler);
  font-weight: 600;
}

.aufgabe--heute .aufgabe__frist {
  color: var(--farbe-warnung);
  font-weight: 600;
}

/* In der Kachel der Startseite ist weniger Platz. */
.aufgaben--knapp { margin-bottom: 0; }
.aufgaben--knapp .aufgabe {
  border: none;
  border-left: 3px solid var(--farbe-linie-kraeftig);
  border-radius: 0;
  background: transparent;
  padding-top: 0.35rem;
  padding-bottom: 0.35rem;
}
.aufgaben--knapp .aufgabe--ueberfaellig { border-left-color: var(--farbe-fehler); }
.aufgaben--knapp .aufgabe--heute { border-left-color: var(--farbe-warnung); }

/* ===================================================================
   Verlauf einer Akte

   Was geschehen ist, chronologisch. Eine Zeitleiste, keine Tabelle:
   der Text ist unterschiedlich lang, und die Spalten wären meist leer.
   =================================================================== */

.verlauf {
  list-style: none;
  margin: 0 0 var(--abstand-gross);
  padding: 0;
}

.verlaufeintrag {
  padding: 0.7rem var(--abstand);
  border: 1px solid var(--farbe-linie);
  border-radius: var(--radius-klein);
  background: var(--farbe-flaeche);
  margin-bottom: var(--abstand-klein);
}

.verlaufeintrag__kopf {
  display: flex;
  align-items: center;
  gap: var(--abstand-klein);
  margin-bottom: 0.3rem;
  font-size: var(--schrift-klein);
  color: var(--farbe-text-leise);
}

.verlaufeintrag__datum {
  font-weight: 600;
  color: var(--farbe-primaer);
  font-variant-numeric: tabular-nums;
}

/* Wer es verfasst hat, steht rechts – gebraucht wird es selten. */
.verlaufeintrag__wer { margin-left: auto; }
.verlaufeintrag__werkzeug { margin-left: 0; }

.verlaufeintrag__text { color: var(--farbe-text); }

/* Eine Zeile eines Formularsatzes – etwa ein Ansprechpartner. */
.satzzeile {
  border: 1px solid var(--farbe-linie);
  border-radius: var(--radius-klein);
  padding: var(--abstand);
  margin: 0 0 var(--abstand);
}

/* Weg zurück auf die Liste, aus der man gekommen ist. Leise gesetzt:
   er soll da sein, wenn man ihn sucht, und sonst nicht stören. */
.rueckweg {
  margin: 0 0 var(--abstand-klein);
  font-size: var(--schrift-klein);
}

.rueckweg a { color: var(--farbe-text-leise); text-decoration: none; }
.rueckweg a:hover { color: var(--farbe-primaer); text-decoration: underline; }

/* Kopf einer Akte: Aktenzeichen und Bezeichnung, darunter die Angaben. */
.aktenkopf {
  margin-bottom: var(--abstand-gross);
}

.aktenkopf h1 {
  margin-bottom: 0.15rem;
}

.aktenkopf__angaben {
  margin: 0;
  color: var(--farbe-text-leise);
  font-size: var(--schrift-normal);
}

/* ===================================================================
   Stoppuhr in der Kopfleiste
   =================================================================== */

.stoppuhr {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  height: 34px;
  padding: 0 0.3rem 0 0.7rem;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.07);
  transition: border-color 0.2s, background 0.2s, box-shadow 0.2s;
}

.stoppuhr form { display: inline-flex; margin: 0; }

/* Im Ruhezustand nur eine schmale Schaltfläche, kein leeres Feld */
.stoppuhr--bereit { padding: 0; border-color: transparent; background: transparent; }

.stoppuhr__start {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  height: 34px;
  padding: 0 0.85rem;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
  font: inherit;
  font-size: var(--schrift-klein);
  font-weight: 500;
  cursor: pointer;
  transition: background 0.18s, border-color 0.18s;
}

.stoppuhr__start:hover {
  background: rgba(88, 204, 198, 0.2);
  border-color: var(--farbe-akzent);
}

/* --- Laufende Messung --- */

.stoppuhr--laeuft {
  border-color: rgba(88, 204, 198, 0.55);
  background: rgba(88, 204, 198, 0.13);
}

.stoppuhr--warnung {
  border-color: rgba(240, 180, 41, 0.75);
  background: rgba(240, 180, 41, 0.18);
}

/* Punkt links: zeigt ohne Worte, ob gemessen wird */
.stoppuhr__punkt {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  flex: 0 0 auto;
  background: rgba(255, 255, 255, 0.45);
}

.stoppuhr--laeuft .stoppuhr__punkt {
  background: var(--farbe-akzent);
  animation: stoppuhr-pulsschlag 2s ease-in-out infinite;
}

.stoppuhr--warnung .stoppuhr__punkt { background: var(--farbe-warnung-punkt); }

@keyframes stoppuhr-pulsschlag {
  0%, 100% { box-shadow: 0 0 0 0 rgba(88, 204, 198, 0.5); }
  50%      { box-shadow: 0 0 0 5px rgba(88, 204, 198, 0); }
}

/* Wer Bewegung im Bildschirm nicht möchte, bekommt einen ruhenden Punkt */
/* Auf dem Tablet nähme die Spalte zu viel Breite. Dort wird aus ihr eine
   Zeile unter der Kopfleiste – dieselben Einträge, nebeneinander statt
   untereinander. Ein Knopf zum Ausklappen wäre nur ein zusätzlicher
   Griff: die acht Einträge passen in eine Reihe. */
@media (max-width: 950px) {
  /* Auf dem Tablet ist die Spalte ohnehin eine schmale Zeile unter der
     Kopfleiste; dort gibt es nichts einzuklappen. */
  .seitenleiste__klappe { display: none; }

  /* Enger gesetzt, damit die zehn Reiter einer Akte in zwei Zeilen
     passen statt in drei. Ein einzelner Reiter auf einer eigenen Zeile
     sieht aus, als sei etwas zerbrochen. Waagerecht rollen wäre
     schlechter: eine Navigation, von der ein Teil außerhalb des Bildes
     liegt, findet niemand. */
  .kontextleiste .reiter { gap: 0.9rem; }
  .kontextleiste .reiter a { font-size: var(--schrift-klein); }
  .kontextleiste__inhalt {
    gap: var(--abstand);
    padding-left: var(--abstand);
    padding-right: var(--abstand);
  }
  .navigation-eingeklappt .seitenleiste { width: auto; }
  .navigation-eingeklappt .seitenleiste__liste { display: flex; }

  .rahmen {
    display: block;
    min-height: 0;
  }

  .seitenleiste {
    width: auto;
    height: auto;
    position: sticky;
    top: var(--hoehe-kopfleiste);
    overflow: visible;
  }

  .seitenleiste__liste {
    display: flex;
    flex-wrap: wrap;
    padding: 0.35rem var(--abstand);
    gap: 0.15rem 0.4rem;
  }

  .seitenleiste__liste a {
    padding: 0.4rem 0.6rem;
    border-left: none;
    border-bottom: 3px solid transparent;
    border-radius: var(--radius-klein);
  }

  .seitenleiste__liste a.aktiv {
    border-left: none;
    border-bottom-color: var(--farbe-akzent);
  }

  .seitenleiste__abgesetzt {
    margin-top: 0;
    padding-top: 0;
    border-top: none;
    border-left: 1px solid rgba(255, 255, 255, 0.16);
    padding-left: 0.4rem;
    margin-left: 0.2rem;
  }

  .kontextleiste {
    top: calc(var(--hoehe-kopfleiste) + 2.45rem);
  }
}

@media (prefers-reduced-motion: reduce) {
  .stoppuhr--laeuft .stoppuhr__punkt { animation: none; }
}

/* --- Zeit und Akte --- */

.stoppuhr__mitte {
  display: flex;
  flex-direction: column;
  justify-content: center;
  line-height: 1.15;
  min-width: 0;
}

.stoppuhr__zeit {
  font-family: var(--schrift-zahlen);
  font-size: var(--schrift-klein);
  font-weight: 600;
  letter-spacing: 0.02em;
  font-variant-numeric: tabular-nums;
  color: #fff;
}

.stoppuhr--laeuft .stoppuhr__zeit { color: var(--farbe-akzent); }
.stoppuhr--warnung .stoppuhr__zeit { color: var(--farbe-warnung-hell); }

.stoppuhr__akte {
  font-size: var(--schrift-winzig);
  letter-spacing: 0.02em;
  color: rgba(255, 255, 255, 0.72);
  max-width: 10rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.stoppuhr__akte:hover { color: #fff; text-decoration: none; }
.stoppuhr__akte--offen { font-style: italic; color: rgba(255, 255, 255, 0.55); }

/* --- Schaltflächen --- */

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

.stoppuhr__knopf {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: transparent;
  color: rgba(255, 255, 255, 0.85);
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}

.stoppuhr__knopf:hover { background: rgba(255, 255, 255, 0.2); color: #fff; }

.stoppuhr__knopf:focus-visible {
  outline: var(--fokus-breite) solid var(--farbe-fokus-hell);
  outline-offset: var(--fokus-abstand);
}

.stoppuhr__knopf--stopp:hover { background: var(--farbe-akzent); color: var(--farbe-primaer-tief); }
.stoppuhr__knopf--leise { color: rgba(255, 255, 255, 0.5); }
.stoppuhr__knopf--leise:hover { background: rgba(255, 120, 110, 0.35); color: #fff; }

.stoppuhr__bild { width: 13px; height: 13px; display: block; }
.stoppuhr__start .stoppuhr__bild { width: 11px; height: 11px; }

/* ===================================================================
   Vorschläge in der Suchleiste
   =================================================================== */

.vorschlaege {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  z-index: 200;
  margin: 0;
  padding: 0.3rem 0;
  list-style: none;
  background: var(--farbe-flaeche);
  color: var(--farbe-text);
  border: 1px solid var(--farbe-linie-kraeftig);
  border-radius: var(--radius);
  box-shadow: var(--schatten-hoch);
  max-height: 65vh;
  overflow-y: auto;
}

.vorschlaege li {
  display: grid;
  grid-template-columns: 5.5rem 1fr;
  gap: 0 0.7rem;
  padding: 0.45rem 0.85rem;
  cursor: pointer;
  align-items: baseline;
}

.vorschlaege li:hover,
.vorschlaege li.aktiv { background: var(--farbe-akzent-flaeche); }

.vorschlaege__art {
  grid-row: 1 / span 2;
  font-size: var(--schrift-winzig);
  text-transform: uppercase;
  letter-spacing: 0.07em;
  font-weight: 600;
  color: var(--farbe-text-leise);
  align-self: center;
}

.vorschlaege__titel { font-weight: 600; }

.vorschlaege__zusatz {
  grid-column: 2;
  font-size: var(--schrift-sehr-klein);
  color: var(--farbe-text-leise);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ===================================================================
   Anmeldeseite
   =================================================================== */

.anmeldung { max-width: 400px; margin: 9vh auto; }

.anmeldung__logo {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.35rem;
  margin-bottom: var(--abstand-riesig);
}

.anmeldung__emblem { display: block; height: 88px; width: auto; }
.anmeldung__schriftzug { display: block; width: 240px; height: auto; }

.anmeldung .karte { box-shadow: var(--schatten); }

/* ===================================================================
   Hilfsklassen
   =================================================================== */

.leise { color: var(--farbe-text-leise); }
.zeile { display: flex; gap: var(--abstand); align-items: flex-end; flex-wrap: wrap; }
.zeile > * { flex: 1; min-width: 0; }
.rechts { margin-left: auto; }

/* Unsichtbarer Absendeknopf, der die Enter-Taste auf die Hauptaktion
   lenkt. Nicht „display: none“: ein so verborgener Knopf wird vom
   Browser nicht als Voreinstellung genommen. */
.vorab-absenden {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}

/* Nur für Vorlesegeräte */
.nur-lesegeraet {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ===================================================================
   Startseite
   =================================================================== */

.begruessung {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--abstand);
  margin-bottom: var(--abstand-gross);
}

.begruessung h1 { margin: 0 0 0.15rem; }

/* Zwei Spalten: Akten links, Woche und Hinweise rechts */
.spalten {
  display: grid;
  grid-template-columns: minmax(0, 1.9fr) minmax(0, 1fr);
  gap: var(--abstand-gross);
  align-items: start;
}

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

.abschnitt__kopf {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--abstand);
  margin-bottom: var(--abstand-klein);
}

.abschnitt__kopf a { font-size: var(--schrift-klein); }

/* --- Liste der Hinweise --- */

.hinweisliste { list-style: none; margin: 0; padding: 0; }

.hinweisliste__eintrag {
  padding: 0.6rem 0 0.6rem 0.75rem;
  border-left: 3px solid var(--farbe-linie-kraeftig);
  border-bottom: 1px solid var(--farbe-linie);
  font-size: var(--schrift-normal);
}

.hinweisliste__eintrag:last-child { border-bottom: none; padding-bottom: 0; }
.hinweisliste__eintrag--warnung { border-left-color: var(--farbe-warnung); }
.hinweisliste__eintrag--fehler { border-left-color: var(--farbe-fehler); }

.hinweisliste__fussnote { margin: 0; font-size: var(--schrift-normal); }

/* Die Trennlinie nur, wenn darüber tatsächlich eine Liste steht */
.hinweisliste + .hinweisliste__fussnote {
  margin-top: var(--abstand);
  padding-top: var(--abstand-klein);
  border-top: 1px solid var(--farbe-linie);
}

/* --- Bezug der Kennzahlen: eigene Zahlen oder die der Kanzlei ---

   Der Regler stand früher als einzelner Knopf links neben den Kacheln.
   Zwei Dinge sprachen dagegen: „Kanzlei“ ist breiter als ein Kürzel, also
   schoben sich die Kacheln beim Umschalten zur Seite – und ein einzelner
   Knopf verriet nicht, was es überhaupt zu wählen gibt.

   Jetzt ein Schieberegler über den Kacheln. Beide Beschriftungen stehen
   immer da, der Reiter gleitet zur gewählten; die Breite hängt damit
   nicht mehr von der Wahl ab. Zustand kommt vom Server, nicht aus dem
   Browser: ohne JavaScript sind es zwei gewöhnliche Verweise. */

.kennzahlen-zeile { margin-bottom: var(--abstand-gross); }
.kennzahlen-zeile .kennzahlen { margin-bottom: 0; }

.bezugswahl {
  position: relative;
  display: inline-grid;
  /* Gleich breite Hälften: sonst wanderte der Reiter beim Wechsel um
     die Differenz der Wortlängen. */
  grid-template-columns: 1fr 1fr;
  padding: 3px;
  margin-bottom: var(--abstand);
  border: 1px solid var(--farbe-linie-kraeftig);
  border-radius: 999px;
  background: var(--farbe-flaeche-leise);
  box-shadow: 0 1px 1px rgba(22, 32, 43, 0.04) inset;
}

/* Der gleitende Reiter liegt hinter den Beschriftungen. */
.bezugswahl__schieber {
  position: absolute;
  top: 3px;
  bottom: 3px;
  left: 3px;
  width: calc(50% - 3px);
  border-radius: 999px;
  background: var(--farbe-primaer);
  box-shadow: 0 1px 3px rgba(22, 32, 43, 0.18);
  transition: transform 0.22s cubic-bezier(0.4, 0, 0.2, 1);
}

.bezugswahl--kanzlei .bezugswahl__schieber { transform: translateX(100%); }

/* Dieselbe Mechanik in einem Formular: statt zweier Verweise zwei
   Auswahlknöpfe. Die Wahl gehört dort in das Formular, damit sie zusammen
   mit Jahr und Bearbeiter abgeschickt wird. Der Knopf selbst ist
   unsichtbar – die Beschriftung ist die Bedienfläche –, bleibt aber
   bedienbar und behält seinen Fokusring. */
.bezugswahl--rechts .bezugswahl__schieber { transform: translateX(100%); }

/* Der Regler in einer Filterleiste sieht aus wie der auf der Startseite.

   Seine Beschriftungen sind dort ``<label>``, und ``.filterleiste label``
   setzt Versalien, Laufweite und eine kleinere Schrift – gedacht für
   Feldbeschriftungen wie „JAHR“ und „BEARBEITER“. Gemessen ergab das
   42,2 × 335,8 Pixel gegen 40,0 × 297,7 auf der Startseite. Hier wird das
   zurückgenommen: es ist keine Feldbeschriftung, sondern ein Schalter. */
.bezugswahl--formular .bezugswahl__wahl,
.filterleiste .bezugswahl__wahl {
  /* Die allgemeine Regel gibt jedem ``label`` 0,25 rem Abstand nach unten –
     gedacht für den Weg zum Feld darunter. Hier steht kein Feld darunter,
     und die vier Pixel machten den Regler genau um diesen Betrag höher als
     den auf der Startseite: 44 statt 40. */
  margin: 0;
  font-size: var(--schrift-klein);
  font-weight: 600;
  text-transform: none;
  letter-spacing: normal;
}

.bezugswahl--formular .bezugswahl__wahl { cursor: pointer; }

.bezugswahl--formular input[type="radio"] {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: 0;
  padding: 0;
  opacity: 0;
  pointer-events: none;
}

/* Der Fokusring liegt an der Beschriftung, nicht am unsichtbaren Knopf –
   sonst wäre die Tastaturbedienung nicht zu sehen. */
.bezugswahl--formular input[type="radio"]:focus-visible + * ,
.bezugswahl--formular .bezugswahl__wahl:has(input:focus-visible) {
  outline: var(--fokus-breite) solid var(--farbe-fokus);
  outline-offset: 2px;
}

.bezugswahl--formular .bezugswahl__wahl:has(input:checked) { color: #fff; }

.bezugswahl__wahl {
  position: relative;   /* über dem Reiter */
  z-index: 1;
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 0.4rem;
  padding: 0.34rem 1.15rem;
  border-radius: 999px;
  color: var(--farbe-text-gedaempft);
  font-size: var(--schrift-klein);
  font-weight: 600;
  white-space: nowrap;
  text-decoration: none;
  transition: color 0.22s;
}

.bezugswahl__wahl:hover { color: var(--farbe-primaer); text-decoration: none; }

.bezugswahl__wahl[aria-current],
.bezugswahl__wahl[aria-current]:hover { color: #fff; }

.bezugswahl__wahl:focus-visible {
  outline: var(--fokus-breite) solid var(--farbe-fokus);
  outline-offset: var(--fokus-abstand);
}

/* Das Kürzel sagt, wessen Zahlen gemeint sind – leise, es ist ein Zusatz. */
.bezugswahl__kuerzel {
  font-size: var(--schrift-mikro);
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  opacity: 0.7;
}

/* Ohne das Recht auf die Kanzleizahlen gibt es nichts umzuschalten. */
.bezugswahl__fest {
  margin: 0 0 var(--abstand);
  font-size: var(--schrift-klein);
  font-weight: 600;
  color: var(--farbe-text-leise);
}

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

/* ===================================================================
   Listenseiten: Kopf, Filterleiste, leere Listen
   =================================================================== */

.seitenkopf {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--abstand);
  margin-bottom: var(--abstand);
}

.seitenkopf h1 { margin: 0; }
.seitenkopf__hinweis { margin: 0.2rem 0 0; font-size: var(--schrift-normal); }

/* Die Filter stehen in einer eigenen Fläche, damit sie sich klar von den
   Ergebnissen darunter abheben. */
.filterleiste {
  background: var(--farbe-flaeche);
  border: 1px solid var(--farbe-linie);
  border-radius: var(--radius);
  padding: var(--abstand);
  box-shadow: var(--schatten-leicht);
  margin-bottom: var(--abstand-gross);
}

.filterleiste .zeile { align-items: flex-end; gap: var(--abstand); }
.filterleiste label { font-size: var(--schrift-sehr-klein); text-transform: uppercase; letter-spacing: 0.05em; }

/* Ankreuzfelder behalten ihre normale Schreibweise – Großbuchstaben wirken
   dort wie eine Überschrift, nicht wie eine Beschriftung. */
.filterleiste .feld--ankreuz label {
  font-size: var(--schrift-normal);
  text-transform: none;
  letter-spacing: normal;
  font-weight: 400;
  white-space: nowrap;
}
.filterleiste .aktionen { margin: 0; }

/* Feld, das sich am Inhalt orientiert statt gleichmäßig zu wachsen */
.filterleiste .schmal { flex: 0 1 auto; min-width: 11rem; }
.filterleiste .breit { flex: 2 1 18rem; }

.filterleiste__fuss {
  margin: var(--abstand-klein) 0 0;
  font-size: var(--schrift-klein);
  color: var(--farbe-text-leise);
}

/* Anzahl der Treffer neben der Überschrift */
.treffer {
  font-size: var(--schrift-klein);
  font-weight: 400;
  color: var(--farbe-text-leise);
}

/* Hinweis, wenn eine Liste leer ist */
/*
   Leerer Zustand. Kein gestrichelter Rahmen – der sieht aus, als fehle
   etwas am Programm. Stattdessen eine ruhige Fläche, ein Satz und, wo es
   passt, der Weg, sie zu füllen.
*/
/* Der ruhige Block für eine Liste ohne Inhalt.

   Er war zentriert und durchweg in der leisen Textfarbe gesetzt. Zentrierter
   Fließtext flattert an beiden Rändern, und gerade hier steht der Satz, der
   weiterhilft – er soll gelesen werden, nicht geschont. Jetzt linksbündig
   und im gedämpften statt im leisen Ton. */
.leerhinweis {
  background: var(--farbe-flaeche-leise);
  border: 1px solid var(--farbe-linie);
  border-radius: var(--radius);
  padding: var(--abstand-gross);
  color: var(--farbe-text-gedaempft);
  box-shadow: none;
}

.leerhinweis p { margin: 0 0 var(--abstand); }
.leerhinweis p:last-child { margin-bottom: 0; }

.leerhinweis__text {
  font-size: var(--schrift-mittel);
  font-weight: 600;
  color: var(--farbe-text);
}

.leerhinweis__zusatz {
  font-size: var(--schrift-klein);
  /* Eine Zeile soll nicht über die halbe Seite laufen – bei 70 Zeichen
     findet das Auge den Anfang der nächsten noch. */
  max-width: 70ch;
}

.leerhinweis .schaltflaeche { margin-top: 0.4rem; }

/* ===================================================================
   Durchsuchbare Auswahlfelder
   -------------------------------------------------------------------
   Aus langen Klapplisten wird ein Feld mit Sucheingabe. Das eigentliche
   Auswahlfeld bleibt im Hintergrund bestehen und wird abgeschickt wie
   zuvor; ohne das Skript bleibt die gewohnte Klappliste sichtbar.
   =================================================================== */

.auswahl { position: relative; }

/* Das ursprüngliche Feld bleibt bedienbar für Vorlesegeräte, ist aber
   nicht mehr sichtbar. */
.auswahl__original {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}

.auswahl__knopf {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  width: 100%;
  min-height: 2.35rem;
  padding: 0.45rem 0.7rem;
  border: 1px solid var(--farbe-linie-kraeftig);
  border-radius: var(--radius-klein);
  background: var(--farbe-flaeche)
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 6.2l4 4 4-4' fill='none' stroke='%234a5a6a' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")
    no-repeat right 0.65rem center / 15px 15px;
  padding-right: 2.1rem;
  font: inherit;
  font-size: var(--schrift-normal);
  color: var(--farbe-text);
  text-align: left;
  cursor: pointer;
  box-shadow: 0 1px 1px rgba(22, 32, 43, 0.03) inset;
  transition: border-color 0.15s, box-shadow 0.15s;
}

.auswahl__knopf:hover { border-color: var(--farbe-text-leise); }

.auswahl__knopf:focus-visible,
.auswahl__knopf[aria-expanded="true"] {
  outline: var(--fokus-breite) solid var(--farbe-fokus);
  outline-offset: var(--fokus-abstand);
  border-color: var(--farbe-akzent-dunkel);
}

.auswahl__knopf--leer { color: var(--farbe-text-platzhalter); }

.auswahl__beschriftung {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* --- Aufgeklappter Bereich --- */

.auswahl__klappe {
  position: absolute;
  top: calc(100% + 5px);
  left: 0;
  right: 0;
  z-index: 300;
  background: var(--farbe-flaeche);
  border: 1px solid var(--farbe-linie-kraeftig);
  border-radius: var(--radius);
  box-shadow: var(--schatten-hoch);
  overflow: hidden;
}

.auswahl__suche {
  width: 100%;
  border: none;
  border-bottom: 1px solid var(--farbe-linie);
  border-radius: 0;
  box-shadow: none;
  padding: 0.55rem 0.75rem;
  font-size: var(--schrift-normal);
}

.auswahl__suche:focus {
  outline: var(--fokus-breite) solid var(--farbe-fokus);
  outline-offset: calc(-1 * var(--fokus-breite));
  border-color: var(--farbe-linie);
}

.auswahl__liste {
  list-style: none;
  margin: 0;
  padding: 0.25rem 0;
  max-height: 16rem;
  overflow-y: auto;
}

.auswahl__eintrag {
  padding: 0.4rem 0.75rem;
  font-size: var(--schrift-normal);
  cursor: pointer;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.auswahl__eintrag:hover,
.auswahl__eintrag.aktiv { background: var(--farbe-akzent-flaeche); }

.auswahl__eintrag--gewaehlt { font-weight: 600; color: var(--farbe-primaer); }
.auswahl__eintrag--leer { color: var(--farbe-text-leise); font-style: italic; cursor: default; }
.auswahl__eintrag--leer:hover { background: transparent; }

/* „Keine Auswahl“ bleibt anklickbar, wird aber ruhiger gesetzt */
.auswahl__eintrag--platzhalter { color: var(--farbe-text-leise); font-style: italic; }

/* ===================================================================
   Wirtschaftliche Auswertung
   =================================================================== */

.schaubild {
  margin: 0 0 var(--abstand-gross);
  padding: var(--abstand) var(--abstand-gross) var(--abstand-klein);
  background: var(--farbe-flaeche);
  border: 1px solid var(--farbe-linie);
  border-radius: var(--radius);
  box-shadow: var(--schatten-leicht);
}

.schaubild__kopf {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--abstand);
  margin-bottom: var(--abstand-klein);
}

.schaubild__titel { font-size: var(--schrift-normal); font-weight: 600; color: var(--farbe-primaer); }

.schaubild__legende { display: flex; gap: var(--abstand); font-size: var(--schrift-sehr-klein);
                      color: var(--farbe-text-leise); }

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

.schaubild__farbe { width: 10px; height: 10px; border-radius: 2px; display: inline-block; }
/* Das Vorjahr trägt zusätzlich eine Schraffur: die beiden Reihen
   unterschieden sich allein durch die Farbe, und „Vorjahr“ hebt sich
   gegen Weiß kaum ab. Auch im Graustufendruck bleiben sie so
   auseinanderzuhalten. */
.schaubild__farbe--vorjahr {
  background: var(--farbe-vorjahr);
  background-image: repeating-linear-gradient(
    45deg, transparent 0 2px, rgba(255, 255, 255, 0.85) 2px 3px
  );
}
.schaubild__farbe--jetzt { background: var(--farbe-primaer); }

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

.schaubild__gitter { stroke: var(--farbe-linie); stroke-width: 1; }
.schaubild__grundlinie { stroke: var(--farbe-linie-kraeftig); stroke-width: 1; }

.schaubild__achse {
  font-size: 10px;
  fill: var(--farbe-text-leise);
  font-family: var(--schrift);
}

.schaubild__balken--vorjahr { fill: url(#schraffur-vorjahr); }
.schraffur__grund { fill: var(--farbe-vorjahr); }
.schraffur__strich { stroke: var(--farbe-flaeche); stroke-width: 2; }
.schaubild__balken--jetzt { fill: var(--farbe-primaer); }
.schaubild__balken { transition: fill 0.15s; }
.schaubild__balken:hover { fill: var(--farbe-akzent-dunkel); }

.schaubild__leer {
  margin: 0;
  padding: 2.5rem 0;
  text-align: center;
  color: var(--farbe-text-leise);
  font-style: italic;
}

/* Veränderung gegenüber dem Vorjahr */
.veraenderung { font-weight: 600; }
.veraenderung--hoch { color: var(--farbe-erfolg); }
.veraenderung--runter { color: var(--farbe-fehler); }

/* Summenzeile am Ende einer Tabelle */
tr.summenzeile td, tr.summenzeile th {
  border-top: 2px solid var(--farbe-linie-kraeftig);
  background: var(--farbe-flaeche-leise);
}

/* --- Raster der Auswertung ---
   Feste Zeilen statt zweier unabhängiger Spalten: nebeneinanderstehende
   Abschnitte beginnen dadurch immer auf derselben Höhe. Bei getrennten
   Spalten verschieben sie sich gegeneinander, sobald ein Inhalt darüber
   länger ausfällt. */

.auswertungsraster {
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
  gap: var(--abstand-gross);
  align-items: start;
}

/* Ein Abschnitt über die ganze Breite */
.auswertungsraster__block--breit { grid-column: 1 / -1; }

/* Die Überschrift ist das erste Element im Block; ohne diesen Ausgleich
   säße sie je nach Browser unterschiedlich hoch. */
.auswertungsraster__block > h2:first-child { margin-top: 0; }

@media (max-width: 1100px) {
  .auswertungsraster { grid-template-columns: minmax(0, 1fr); }
  .auswertungsraster__block--breit { grid-column: auto; }
}

/* --- Seitenwechsel langer Listen ------------------------------------- */

.seitenwechsel {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  margin-top: 1rem;
}

.seitenwechsel__stand {
  font-size: var(--schrift-klein);
  color: var(--farbe-text-leise);
}

.seitenwechsel__blaettern {
  display: flex;
  align-items: center;
  gap: 0.25rem;
}

.seitenwechsel__knopf {
  display: inline-block;
  min-width: 2rem;
  padding: 0.3rem 0.6rem;
  border: 1px solid var(--farbe-linie);
  border-radius: var(--radius-klein);
  background: #fff;
  color: var(--farbe-primaer);
  font-size: var(--schrift-klein);
  font-weight: 500;
  text-align: center;
  text-decoration: none;
}

a.seitenwechsel__knopf:hover {
  border-color: var(--farbe-akzent);
  background: var(--farbe-akzent-flaeche);
  text-decoration: none;
}

.seitenwechsel__knopf:focus-visible {
  outline: var(--fokus-breite) solid var(--farbe-fokus);
  outline-offset: var(--fokus-abstand);
}

.seitenwechsel__knopf--hier {
  background: var(--farbe-primaer);
  border-color: var(--farbe-primaer);
  color: #fff;
}

/* Kein Ziel: sichtbar, aber erkennbar nicht anklickbar. */
.seitenwechsel__knopf--aus {
  color: var(--farbe-text-leise);
  background: transparent;
  border-color: transparent;
}

.seitenwechsel__luecke {
  padding: 0 0.15rem;
  color: var(--farbe-text-leise);
}

/* --- Zeiterfassung: Eintrag über zwei Zeilen -------------------------- */
/*
   Erste Zeile die Kennzahlen, zweite Zeile die Tätigkeit über die volle
   Breite. Beide Zeilen gehören zusammen und werden deshalb gemeinsam
   hervorgehoben und erst nach der Tätigkeit abgetrennt.
*/

.zeitliste__kopfzeile td { border-bottom: none; padding-bottom: 0.35rem; }

.zeitliste__taetigkeit td {
  padding-top: 0;
  padding-bottom: 0.9rem;
  color: var(--farbe-text);
}

.zeitliste__kopfzeile:hover,
.zeitliste__kopfzeile:hover + .zeitliste__taetigkeit,
.zeitliste__taetigkeit:hover,
.zeitliste__taetigkeit:hover {
  background: var(--farbe-primaer-hell);
}

/* Datum oben, Uhrzeit leiser darunter. */
.zeitliste__uhrzeit,
.zeitliste__aktenzeichen {
  display: block;
  font-size: var(--schrift-sehr-klein);
  color: var(--farbe-text-leise);
  margin-top: 0.1rem;
}

.zeitliste__mandant a { display: block; }
.zeitliste__mandant {
  max-width: 12rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.zeitliste__werkzeuge { text-align: right; white-space: nowrap; }

.zeitliste__knopf {
  display: inline-block;
  min-width: 1.75rem;
  padding: 0.15rem 0.35rem;
  border: none;
  border-radius: var(--radius-klein);
  background: transparent;
  color: var(--farbe-text-leise);
  font-size: var(--schrift-normal);
  line-height: 1.4;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
}

.zeitliste__knopf:hover {
  background: var(--farbe-primaer-hell);
  color: var(--farbe-primaer);
  text-decoration: none;
}

.zeitliste__knopf:focus-visible {
  outline: var(--fokus-breite) solid var(--farbe-fokus);
  outline-offset: 1px;
}

/* Statuskennzeichen der Zeiterfassung */
.kennzeichen--offen {
  background: var(--farbe-fehler-flaeche);
  color: var(--farbe-fehler);
}
.kennzeichen--abgerechnet {
  background: var(--farbe-erfolg-flaeche);
  color: var(--farbe-erfolg);
}
.kennzeichen--nicht-abrechenbar {
  background: var(--farbe-linie-ruhig);
  color: var(--farbe-text-leise);
}

.zeitliste__knopf .symbol { display: block; margin: 0 auto; }
.zeitliste__knopf--aus { cursor: default; }
.zeitliste__knopf--aus:hover { background: transparent; color: var(--farbe-text-leise); }

/*
   Breite Tabellen rollen in ihrem eigenen Rahmen, statt die ganze Seite
   seitlich zu verschieben. Auf dem Tablet sonst nicht benutzbar.
*/
.tabellenrahmen { overflow-x: auto; }
.tabellenrahmen > table { min-width: 44rem; }

/* --- Notizfeld der laufenden Stoppuhr --------------------------------- */
/*
   Schmal gehalten: die Kopfleiste soll nicht wachsen. Beim Hineinklicken
   wird das Feld breiter, damit auch ein längerer Halbsatz Platz hat.
*/

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

.stoppuhr__notiz input[type="text"] {
  width: 9rem;
  height: 24px;
  /* Die allgemeine Feldhöhe von 2,35 rem sprengt die Kopfleiste. */
  min-height: 0;
  padding: 0 0.5rem;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
  font-size: var(--schrift-sehr-klein);
  font-family: inherit;
  transition: width 0.2s, background 0.2s, border-color 0.2s;
}

.stoppuhr__notiz input[type="text"]::placeholder { color: rgba(255, 255, 255, 0.55); }

.stoppuhr__notiz input[type="text"]:focus {
  width: 16rem;
  outline: var(--fokus-breite) solid var(--farbe-fokus-hell);
  outline-offset: var(--fokus-abstand);
  border-color: var(--farbe-akzent);
  background: rgba(255, 255, 255, 0.14);
}

/* Bereits Notiertes, damit erkennbar ist, was gesammelt wurde. */
.stoppuhr__bisher {
  max-width: 11rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: var(--schrift-sehr-klein);
  color: rgba(255, 255, 255, 0.62);
}

@media (max-width: 1100px) {
  /* Auf schmalen Geräten hat die Kopfleiste keinen Platz dafür. */
  .stoppuhr__notiz input[type="text"] { width: 6rem; }
  .stoppuhr__bisher { display: none; }
}

/* --- Mehrfachauswahl in der Zeiterfassung ----------------------------- */

.sammelaktion {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  flex-wrap: wrap;
  margin-bottom: 1rem;
  padding: 0.6rem 0.9rem;
  border: 1px solid var(--farbe-linie);
  border-radius: var(--radius);
  background: var(--farbe-flaeche-leise);
}

/* Sobald etwas ausgewählt ist, tritt die Leiste hervor. */
.sammelaktion--aktiv {
  border-color: var(--farbe-akzent);
  background: var(--farbe-akzent-flaeche);
}

.sammelaktion__stand {
  margin-right: auto;
  font-size: var(--schrift-klein);
  color: var(--farbe-text-leise);
}

.sammelaktion--aktiv .sammelaktion__stand {
  color: var(--farbe-primaer);
  font-weight: 600;
}

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

.zeitliste__auswahl { width: 2.4rem; text-align: center; }
.zeitliste__auswahl input { margin: 0; }

/* Hinweis auf die Einschränkung nach einer Akte */
.aktenfilter {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}


/*
   Zeit und Geld sind zweierlei. Eine feine Linie vor dem Stundensatz trennt
   die Gruppe "wie lange" von der Gruppe "wie viel", ohne einen Strich durch
   die ganze Tabelle zu ziehen.
*/
.zeitliste .gruppengrenze {
  border-left: 1px solid var(--farbe-linie-kraeftig);
}

.zeitliste thead .gruppengrenze {
  border-left-color: var(--farbe-linie-kraeftig);
}

/* ===================================================================
   Druck
   ===================================================================

   In einer Kanzlei wird gedruckt: eine Aktenliste für die Besprechung,
   die Zeiten eines Monats zur Durchsicht. Auf Papier gehören weder
   Navigation noch Filter oder Schaltflächen – nur der Inhalt, schwarz
   auf weiß, mit einem schlichten Kopf, damit erkennbar bleibt, woher das
   Blatt stammt.
   =================================================================== */

/* ===================================================================
   Kleines Fenster über der Seite

   Für Eingaben, die neben der Hauptsache herlaufen: einen Rechnungs-
   vermerk festhalten, während die Liste der Rechnungen sichtbar bleibt.
   Die Escape-Taste schließt es von selbst – das kann <dialog> allein.
   =================================================================== */

.fenster {
  padding: 0;
  border: none;
  border-radius: var(--radius-gross);
  width: min(46rem, calc(100vw - 2 * var(--abstand-gross)));
  max-height: calc(100vh - 2 * var(--abstand-gross));
  overflow: visible;
  background: var(--farbe-flaeche);
  color: var(--farbe-text);
  box-shadow: var(--schatten-hoch);
}

.fenster::backdrop {
  background: rgba(22, 32, 43, 0.45);
}

.fenster form {
  display: flex;
  flex-direction: column;
  max-height: inherit;
}

.fenster__kopf {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--abstand);
  padding: var(--abstand) var(--abstand-gross);
  border-bottom: 1px solid var(--farbe-linie);
}

.fenster__kopf h2 {
  margin: 0;
  font-size: var(--schrift-mittel);
}

/* Der einzige Teil, der rollt: Kopf und Fuß bleiben stehen, damit
   „Speichern“ bei einem langen Formular nicht aus dem Blick gerät. */
.fenster__koerper {
  padding: var(--abstand-gross);
  overflow-y: auto;
}

.fenster__fuss {
  display: flex;
  align-items: center;
  gap: var(--abstand-klein);
  padding: var(--abstand) var(--abstand-gross);
  border-top: 1px solid var(--farbe-linie);
  background: var(--farbe-flaeche-leise);
  border-radius: 0 0 var(--radius-gross) var(--radius-gross);
}

.fenster__schliessen {
  border: none;
  background: none;
  cursor: pointer;
  font-size: var(--schrift-gross);
  line-height: 1;
  padding: 0 0.2rem;
  color: var(--farbe-text-leise);
}

.fenster__schliessen:hover { color: var(--farbe-text); }

.fenster__schliessen:focus-visible {
  outline: 2px solid var(--farbe-akzent);
  outline-offset: 2px;
}

@media print {
  @page {
    size: A4;
    margin: 18mm 15mm 18mm 15mm;
  }

  /* Schwarz auf weiß, wie im Leitfaden festgelegt. Vorher blieben
     Türkis und die vier Zustandsfarben unangetastet: der Streifen jeder
     Kennzahlkachel, die Balkenfüllung des Schaubilds und die farbigen
     Kennzeichen kamen farbig aufs Papier. */
  :root {
    --farbe-text: #000;
    --farbe-text-gedaempft: #222;
    --farbe-text-leise: #444;
    --farbe-text-platzhalter: #666;
    --farbe-primaer: #000;
    --farbe-primaer-dunkel: #000;
    --farbe-primaer-hell: #f2f2f2;
    --farbe-akzent: #888;
    --farbe-akzent-dunkel: #555;
    --farbe-akzent-flaeche: #f2f2f2;
    --farbe-linie: #bbb;
    --farbe-linie-kraeftig: #888;
    --farbe-linie-ruhig: #eee;
    --farbe-flaeche: #fff;
    --farbe-flaeche-leise: #fff;
    --farbe-hintergrund: #fff;
    --farbe-warnung: #000;
    --farbe-warnung-flaeche: #fff;
    --farbe-warnung-linie: #888;
    --farbe-fehler: #000;
    --farbe-fehler-flaeche: #fff;
    --farbe-fehler-linie: #888;
    --farbe-erfolg: #000;
    --farbe-erfolg-flaeche: #fff;
    --farbe-erfolg-linie: #888;
    --farbe-info-linie: #888;
    --farbe-vorjahr: #999;
  }

  body {
    background: #fff;
    color: #000;
    font-size: 10pt;
  }

  /* Alles, was nur zur Bedienung da ist, bleibt auf dem Bildschirm. */
  .kopfleiste,
  .seitenleiste,
  .kontextleiste,
  .navigation,
  .reiter,
  .filterleiste,
  .aktionen,
  .sammelaktion,
  .seitenwechsel,
  .zeitliste__werkzeuge,
  .zeitliste__auswahl,
  .stoppuhr,
  .suche,
  .schaltflaeche,
  .bezugswahl,
  .bezugswahl__fest,
  form.filterleiste,
  /* Rückmeldungen gehören auf den Bildschirm, nicht aufs Blatt. Wer
     gleich nach dem Speichern druckte, hatte „Akte gespeichert“ grün
     hinterlegt auf dem Papier. */
  .meldung,
  .sprungmarke,
  .rueckweg,
  .nur-bildschirm {
    display: none !important;
  }

  /* Der türkise Streifen an jeder Kennzahlkachel ist Bildschirmschmuck
     und braucht auf dem Blatt keinen Platz. */
  .kennzahl::before { display: none; }
  .kennzahl { padding-left: var(--abstand); box-shadow: none; }

  /* Höher und niedriger unterscheiden sich sonst nur in der Farbe –
     und die ist auf dem Blatt für beide schwarz. */
  .veraenderung--hoch::before { content: "▲ "; }
  .veraenderung--runter::before { content: "▼ "; }

  .rahmen, .hauptbereich {
    display: block;
    min-height: 0;
  }

  main, .inhalt, .karte {
    max-width: none;
    margin: 0;
    padding: 0;
    border: none;
    box-shadow: none;
    background: #fff;
  }

  h1 { font-size: 15pt; margin: 0 0 4mm; }
  h2 { font-size: 11.5pt; margin: 6mm 0 2mm; }

  /* Kopfzeile des Ausdrucks: Kanzlei und Seitentitel. */
  .druckkopf { display: block !important; }

  table {
    width: 100%;
    border: none;
    box-shadow: none;
    page-break-inside: auto;
  }

  thead th {
    background: #fff;
    color: #000;
    border-bottom: 0.6pt solid #000;
    font-size: 7.5pt;
  }

  th, td { padding: 1.4mm 2mm; border-bottom: 0.3pt solid #ccc; }

  tbody tr { page-break-inside: avoid; }
  thead { display: table-header-group; }

  /* Kennzeichen als schlichte Schrift statt als Farbfläche. */
  .kennzeichen {
    background: none !important;
    color: #000 !important;
    padding: 0;
    font-weight: 600;
  }

  a { color: #000; text-decoration: none; }

  .tabellenrahmen { overflow: visible; }
  .tabellenrahmen > table { min-width: 0; }

  .schaubild__flaeche { max-width: 100%; }
}

/* Der Druckkopf erscheint ausschließlich im Ausdruck. */
.druckkopf { display: none; }

@media print {
  .druckkopf {
    display: flex !important;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: 6mm;
    padding-bottom: 2mm;
    border-bottom: 0.8pt solid #000;
    font-size: 8.5pt;
  }
  .druckkopf__kanzlei { font-weight: 700; letter-spacing: 0.04em; }
  .druckkopf__datum { color: #444; }
}

/* Knopf, der gerade arbeitet: sichtbar beschäftigt, aber nicht kaputt. */
.schaltflaeche--wartet {
  opacity: 0.72;
  cursor: progress;
  pointer-events: none;
}

/* Hinweis, dass die Dauer nicht eingetippt, sondern errechnet wurde. */
.feld__hinweis--errechnet { color: var(--farbe-erfolg); }

/* Hinweis auf die fehlende Identifizierung nach dem Geldwäschegesetz */
.gwg-hinweis {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}

/* Erläuterung zu einem ganzen Formularabschnitt (z. B. der GwG-Hinweis). */
.feldgruppe__anmerkung {
  margin: -0.2rem 0 1rem;
  padding: 0.7rem 0.9rem;
  border-left: 3px solid var(--farbe-akzent);
  border-radius: 0 var(--radius-klein) var(--radius-klein) 0;
  background: var(--farbe-akzent-flaeche);
  font-size: var(--schrift-klein);
  line-height: 1.55;
  color: var(--farbe-text);
}

.feldgruppe__anmerkung em { color: var(--farbe-text-leise); font-style: normal; }

/* Zugeklappte Kurzfassung im GwG-Hinweis: die Maske soll keine
   Gesetzessammlung werden, das Nachschlagen aber ohne Umweg gehen. */
.gwg-merkposten { margin-top: 0.6rem; }

.gwg-merkposten > summary {
  cursor: pointer;
  font-weight: 600;
  color: var(--farbe-primaer);
}

.gwg-merkposten > summary:hover { color: var(--farbe-akzent-dunkel); }

.gwg-merkposten p { margin: 0.7rem 0 0.25rem; }
.gwg-merkposten ul { margin: 0 0 0.3rem; padding-left: 1.2rem; }
.gwg-merkposten li { margin-bottom: 0.15rem; }
.gwg-merkposten em { font-style: normal; font-weight: 600; }

.gwg-merkposten__rand { color: var(--farbe-text-leise); }

/* --- Natürliche oder juristische Person -----------------------------
   Zwei Möglichkeiten, die entscheiden, wie die Maske darunter aussieht.
   Deshalb nebeneinander und deutlich, nicht als Liste.
   -------------------------------------------------------------------- */
.typwahl {
  display: flex;
  flex-wrap: wrap;
  gap: 2rem;
  margin-top: .3rem;
}

.typwahl__punkt {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  cursor: pointer;
  font-weight: 500;
}

.typwahl__punkt input {
  width: 1.05rem;
  height: 1.05rem;
  accent-color: var(--farbe-primaer);
  cursor: pointer;
}

/* Die Typwahl steht über den Feldern und nimmt die ganze Breite. */
.feld--gruppe:has(.typwahl) {
  grid-column: 1 / -1;
}

/* Zustand einer Rechnung.

   Die Kennungen kommen aus Rechnung.zustand_kennung, nicht aus slugify:
   aus „überfällig“ wird dort ein „uberfallig“, und der rote Balken bliebe
   stillschweigend aus – derselbe Fehler wie seinerzeit bei den Aufgaben. */
.kennzeichen--entwurf {
  background: var(--farbe-linie-ruhig);
  color: var(--farbe-text-gedaempft);
}
.kennzeichen--fakturiert {
  background: var(--farbe-hinweis-flaeche);
  color: var(--farbe-hinweis);
}
.kennzeichen--teilbezahlt {
  background: var(--farbe-hinweis-flaeche);
  color: var(--farbe-hinweis);
}
.kennzeichen--bezahlt,
.kennzeichen--ueberbezahlt {
  background: var(--farbe-erfolg-flaeche);
  color: var(--farbe-erfolg);
}
.kennzeichen--ueberfaellig {
  background: var(--farbe-fehler-flaeche);
  color: var(--farbe-fehler);
}
.kennzeichen--storniert,
.kennzeichen--ausgebucht {
  background: var(--farbe-linie-ruhig);
  color: var(--farbe-text-leise);
  text-decoration: line-through;
}

/* Zeitraumfilter: „ab“ und „bis“ nebeneinander.

   Getrennt in zwei Feldern rutschte „bis“ in die nächste Zeile des Rasters
   und sah aus wie ein eigener Filter. */
.feld--zeitraum {
  grid-column: span 2;
  border: none;
  padding: 0;
  margin: 0;
}
.feld--zeitraum legend {
  padding: 0;
  font-size: var(--schrift-klein);
  color: var(--farbe-text-leise);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.zeitraum {
  display: flex;
  align-items: center;
  gap: var(--abstand-klein);
}
.zeitraum input {
  flex: 1 1 0;
  min-width: 0;
}
.zeitraum__bis {
  flex: 0 0 auto;
  color: var(--farbe-text-leise);
  font-size: var(--schrift-klein);
}

/* Die Vorschlagsliste hängt unter ihrem Feld – wie in der Kopfleiste, nur
   hier innerhalb der Filterleiste. */
.feld--vorschlaege {
  position: relative;
}
.feld--vorschlaege .vorschlaege {
  top: 100%;
  left: 0;
  right: 0;
}

/* Seltene, folgenschwere Vorgänge liegen zugeklappt.

   Stornieren und Ausbuchen standen gleichrangig neben „Zahlung buchen“ –
   dem Vorgang, den man täglich braucht. Erreichbar sollen sie bleiben, im
   Weg stehen nicht. */
.weitere-vorgaenge {
  margin-top: var(--abstand);
  border-top: 1px solid var(--farbe-linie-ruhig);
  padding-top: var(--abstand-klein);
}
.weitere-vorgaenge > summary {
  cursor: pointer;
  color: var(--farbe-text-leise);
  font-size: var(--schrift-klein);
  padding: 0.35rem 0;
}
.weitere-vorgaenge > summary:focus-visible {
  outline: var(--fokus-breite) solid var(--farbe-fokus);
  outline-offset: 2px;
}
.weitere-vorgaenge[open] > summary {
  color: var(--farbe-text-gedaempft);
  margin-bottom: var(--abstand-klein);
}

/* Ein Aufklappmenü in einer Aktionszeile.

   „Hauptmandant wechseln“ ist ein seltener, struktureller Eingriff und stand
   gleichrangig neben „Zeit erfassen“, das täglich gebraucht wird. Hier liegt
   es zugeklappt: erreichbar, aber nicht im Weg.

   Getragen von <details>, also ohne JavaScript bedienbar. Das Skript
   schließt es zusätzlich, wenn man daneben klickt oder Escape drückt. */
.aktionsmenue { position: relative; display: inline-block; }

/* Der Aufklapper sieht aus wie eine Schaltfläche und trägt deren Klassen;
   hier fällt nur das Dreieck weg, das <summary> von Haus aus mitbringt. */
.aktionsmenue > summary { list-style: none; }
.aktionsmenue > summary::-webkit-details-marker { display: none; }
.aktionsmenue > summary::after {
  content: "";
  width: 0.4rem;
  height: 0.4rem;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: translateY(-0.12rem) rotate(45deg);
}
.aktionsmenue[open] > summary::after { transform: translateY(0.06rem) rotate(225deg); }

.aktionsmenue__liste {
  position: absolute;
  z-index: 20;
  top: calc(100% + 0.35rem);
  left: 0;
  min-width: 15rem;
  padding: var(--abstand-winzig);
  background: var(--farbe-flaeche);
  border: 1px solid var(--farbe-linie);
  border-radius: var(--radius-klein);
  box-shadow: var(--schatten);
}
.aktionsmenue__liste a {
  display: block;
  padding: 0.45rem 0.7rem;
  border-radius: var(--radius-klein);
  color: var(--farbe-text);
  text-decoration: none;
  white-space: nowrap;
}
.aktionsmenue__liste a:hover { background: var(--farbe-primaer-hell); }

/* Auf dem Papier hat ein zugeklapptes Menü nichts verloren. */
@media print { .aktionsmenue { display: none; } }

/* Der Quellenhinweis unter den Kennzahlen der Auswertung.

   Klein, in Versalien, nichts hervorgehoben – so gewählt von der Kanzlei
   am 21.09.2026. Er erklärt, woher die Zahlen darüber stammen, und soll
   sie nicht überstimmen: vorher war er ein blaues Meldungsfeld mit vier
   fetten Stellen und stand damit lauter da als die Werte selbst.

   Versalien brauchen mehr Laufweite als Gemeine – ohne sie kleben die
   Buchstaben aneinander. Die Zeilenhöhe ist dafür etwas größer: ein
   Versalsatz hat keine Unterlängen, die die Zeilen auseinanderhalten. */
.quellenhinweis {
  max-width: 100ch;
  margin: 0 0 var(--abstand-gross);
  font-size: var(--schrift-winzig);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  line-height: 1.75;
  color: var(--farbe-text-leise);
}

/* Offene Posten nach Alter. Jede Stufe ist zugleich ein Filter. */
.staffel {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
  gap: var(--abstand-klein);
  margin-bottom: var(--abstand);
}
.staffel__stufe {
  display: block;
  padding: 0.7rem 0.9rem;
  border: 1px solid var(--farbe-linie-ruhig);
  border-left: 3px solid var(--farbe-linie-ruhig);
  border-radius: var(--radius);
  background: var(--farbe-flaeche);
  text-decoration: none;
  color: inherit;
}
.staffel__stufe:hover { border-color: var(--farbe-primaer); }
.staffel__stufe.aktiv {
  border-color: var(--farbe-primaer);
  box-shadow: inset 0 0 0 1px var(--farbe-primaer);
}
.staffel__stufe--frisch { border-left-color: var(--farbe-erfolg); }
.staffel__stufe--jung   { border-left-color: var(--farbe-hinweis); }
.staffel__stufe--mittel { border-left-color: var(--farbe-warnung, var(--farbe-hinweis)); }
.staffel__stufe--alt    { border-left-color: var(--farbe-fehler); }
.staffel__betrag {
  display: block;
  font-size: var(--schrift-gross);
  font-weight: 600;
  color: var(--farbe-primaer);
}
.staffel__text {
  display: block;
  font-size: var(--schrift-klein);
  color: var(--farbe-text-leise);
}
.staffel__anzahl { display: block; }

/* Die Filterleiste liegt zugeklappt – sie nahm sonst den halben Bildschirm. */
.filterklappe {
  margin-bottom: var(--abstand);
  border: 1px solid var(--farbe-linie-ruhig);
  border-radius: var(--radius);
  background: var(--farbe-flaeche);
}
.filterklappe > summary {
  cursor: pointer;
  padding: 0.7rem 0.9rem;
  display: flex;
  align-items: baseline;
  gap: 0.6rem;
  flex-wrap: wrap;
}
.filterklappe > summary:focus-visible {
  outline: var(--fokus-breite) solid var(--farbe-fokus);
  outline-offset: -2px;
}
.filterklappe__zahl { font-weight: 600; color: var(--farbe-primaer); }
.filterklappe__lage { color: var(--farbe-text-leise); font-size: var(--schrift-klein); }
.filterklappe__hinweis {
  margin-left: auto;
  color: var(--farbe-text-leise);
  font-size: var(--schrift-klein);
}
.filterklappe[open] > summary { border-bottom: 1px solid var(--farbe-linie-ruhig); }
.filterklappe .filterleiste { border: none; margin: 0; }

/* Kopf des Rechnungsbuchs: eine Zahl, nicht drei.

   Die frühere Kachelreihe wiederholte, was die Altersstaffel darunter
   aufschlüsselt – „Offen“ war exakt deren Summe. */
.buchkopf {
  display: flex;
  align-items: baseline;
  gap: var(--abstand);
  flex-wrap: wrap;
  margin-bottom: var(--abstand);
}
.buchkopf__betrag {
  font-size: var(--schrift-titel);
  font-weight: 600;
  color: var(--farbe-primaer);
}
.buchkopf__text {
  margin-left: 0.5rem;
  color: var(--farbe-text-leise);
  font-size: var(--schrift-klein);
}
.buchkopf__warnung {
  color: var(--farbe-fehler);
  background: var(--farbe-fehler-flaeche);
  padding: 0.3rem 0.7rem;
  border-radius: var(--radius);
  text-decoration: none;
  font-size: var(--schrift-klein);
}
.buchkopf__warnung:hover { text-decoration: underline; }

/* Leiste der Sammelbuchung. Sie erscheint erst, wenn etwas ausgewählt ist –
   sonst stünde dort immer ein Knopf ohne Wirkung. */
.sammelleiste {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  flex-wrap: wrap;
  margin-top: var(--abstand-klein);
}
.sammelleiste label { margin: 0; }

/* Was aus dem eingegebenen Betrag folgt – Teilzahlung, Rundung, Überzahlung. */
.zahlungshinweis {
  margin: 0.4rem 0 0.8rem;
  font-size: var(--schrift-klein);
  color: var(--farbe-text-leise);
}
.zahlungshinweis--gut { color: var(--farbe-erfolg); }
.zahlungshinweis--achtung { color: var(--farbe-fehler); }

/* Die Nebenangabe unter dem Aktenzeichen bleibt einzeilig – sonst wird die
   Zeile dreimal so hoch, und von sechzehn Rechnungen sieht man zwei. */
.buchzeile__sache {
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 10.5rem;
}

/* Zahlen brechen nicht um.

   „2.869,69 €“ setzte das Eurozeichen auf die nächste Zeile und machte die
   Tabellenzeile doppelt so hoch. Eine Zahl gehört auf eine Zeile – überall,
   nicht nur im Rechnungsbuch. */
td.zahl,
th.zahl {
  white-space: nowrap;
}

/* Auch der Empfänger bleibt einzeilig; der volle Name steht im Tooltip. */
.buchzeile__empfaenger {
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 11rem;
}

/* Auch das Aktenzeichen darüber – sonst drückt es die Spalte auf. */
.buchzeile__akte {
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 10.5rem;
}

/* Zwei Sichten im Mahnlauf: was heute dran ist, und was sonst aussteht. */
.mahnumfang {
  display: inline-flex;
  gap: 0;
  border: 1px solid var(--farbe-linie-ruhig);
  border-radius: var(--radius);
  overflow: hidden;
  margin-bottom: var(--abstand);
}
.mahnumfang__wahl {
  padding: 0.45rem 0.9rem;
  text-decoration: none;
  color: var(--farbe-text-gedaempft);
  font-size: var(--schrift-klein);
  background: var(--farbe-flaeche);
}
.mahnumfang__wahl + .mahnumfang__wahl {
  border-left: 1px solid var(--farbe-linie-ruhig);
}
.mahnumfang__wahl:hover { color: var(--farbe-primaer); }
.mahnumfang__wahl.aktiv {
  background: var(--farbe-primaer);
  color: #fff;
}

/* ------------------------------------------------------------------
   Kontoauszug: die Arbeitsliste der Zahlungseingänge
   ------------------------------------------------------------------ */

/* Wie sicher der Vorschlag ist – und zwar auch ohne Farbe lesbar.

   Die drei Stufen stehen als Wort im Kennzeichen („eindeutig“,
   „wahrscheinlich“, „zu prüfen“). Die Farbe ist der zweite Hinweis, nicht
   der einzige: WCAG 1.4.1 verlangt, dass eine Information nie allein an
   der Farbe hängt. */
.kennzeichen--sicher {
  background: var(--farbe-erfolg-flaeche);
  color: var(--farbe-erfolg);
}
.kennzeichen--wahrscheinlich {
  background: var(--farbe-hinweis-flaeche);
  color: var(--farbe-hinweis);
}
.kennzeichen--moeglich {
  background: var(--farbe-warnung-flaeche);
  color: var(--farbe-warnung);
}

/* Die Abgabemaske ist eine Zeile, nicht die halbe Seite. Die Datei
   abzugeben ist der Weg zur Liste, nicht das Ziel. */
.auszug-abgabe {
  display: flex;
  align-items: flex-end;
  gap: var(--abstand);
  flex-wrap: wrap;
}
.auszug-abgabe .feld { flex: 1; min-width: 18rem; margin-bottom: 0; }

/* In der Liste stehen lange Verwendungszwecke. Die Spalten bekommen
   deshalb feste Verhältnisse, sonst zieht ein einziger Zweck über 140
   Zeichen die Aktionsspalte auf eine Handbreit zusammen. */
.auszugsliste td { vertical-align: top; }
.auszugsliste th:first-child, .auszugsliste td:first-child { width: 7.5rem; }
.auszugsliste th:nth-child(2), .auszugsliste td:nth-child(2) { width: 7rem; }
.auszugsliste th:nth-child(4), .auszugsliste td:nth-child(4) { width: 30%; }
.auszugsliste th:last-child, .auszugsliste td:last-child { width: 16rem; }

/* Die selteneren Wege einer Zeile, zugeklappt. Offen wäre die Liste
   dreimal so hoch und der Regelfall ginge darin unter. */
.zeilenaktionen { margin-top: var(--abstand-klein); }
.zeilenaktionen > summary {
  cursor: pointer;
  color: var(--farbe-text-leise);
  font-size: var(--schrift-klein);
  padding: 0.2rem 0;
}
.zeilenaktionen > summary:focus-visible {
  outline: var(--fokus-breite) solid var(--farbe-fokus);
  outline-offset: 2px;
}
.zeilenaktionen__form {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem;
  padding: 0.4rem 0;
  border-top: 1px solid var(--farbe-linie-ruhig);
}
.zeilenaktionen__form label {
  font-size: var(--schrift-mikro);
  color: var(--farbe-text-leise);
  margin-bottom: 0;
  flex-basis: 100%;
}
.zeilenaktionen__form input[type="text"] {
  flex: 1;
  min-width: 7rem;
  height: var(--hoehe-bedienelement);
}

/* Ein Kästchen mit Beschriftung daneben, nicht darüber. */
.kaestchen {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  font-size: var(--schrift-mikro);
  color: var(--farbe-text-gedaempft);
  margin-bottom: 0;
  flex-basis: auto;
}
.kaestchen input { margin: 0; }

/* Ein Dateifeld sieht ohne Zutun in jedem Browser anders aus – und in
   dieser Oberfläche sah es nach nichts aus: ein graues Quadrat ohne
   Beschriftung, dem nicht anzusehen war, dass man darauf klicken soll.
   Der eingebaute Knopf wird deshalb wie jede andere leise Schaltfläche
   gestaltet, der Dateiname steht daneben. */
input[type="file"] {
  border: none;
  padding: 0;
  background: none;
  font-size: var(--schrift-klein);
  color: var(--farbe-text-gedaempft);
  height: auto;
}
input[type="file"]::file-selector-button {
  font: inherit;
  font-weight: 600;
  margin-right: var(--abstand-klein);
  padding: 0.5rem 0.9rem;
  border: 1px solid var(--farbe-linie);
  border-radius: var(--radius);
  background: #fff;
  color: var(--farbe-primaer);
  cursor: pointer;
}
input[type="file"]::file-selector-button:hover {
  background: var(--farbe-flaeche-leise);
  border-color: var(--farbe-primaer);
}
input[type="file"]:focus-visible {
  outline: var(--fokus-breite) solid var(--farbe-fokus);
  outline-offset: 2px;
}