/* Zappes — KI-Assistent für Steuerkanzleien.

   ZAP-110, ADR-008: Designsystem von Köbes (KOEB-077) und Uschi (USCH-035,
   ADR 0012) übernommen — Glas auf ruhigem Grund, Seitenleiste statt
   Kopfnavigation, Mint als Handlungsfarbe, helle und dunkle Fassung aus
   denselben Tokens. Als **Kopie**, nicht als Abhängigkeit: kein Code unter
   `app/` importiert `koebes` oder `uschi` (ADR-002).

   Was vorher hier stand (ZAP-86), war für das Lesbarmachen richtig und ist es
   jetzt nicht mehr. Gemessen am 22.09.2026 an der laufenden Instanz:

   - **Elf Navigationspunkte in einer Zeile**, die schon am Schreibtisch
     umbrachen — „Abmelden" stand in der zweiten Reihe. Am Telefon: 218 px
     Kopf, bevor der erste Inhalt kam.
   - **Die Entscheidungsknöpfe des Deckels lagen außerhalb des Bildschirms.**
     Alle zehn. Die Tabelle war 416 px breiter als das Fenster, und die Seite
     scrollte waagerecht — wer am Telefon einen Beleg als „liegt vor" markieren
     wollte, konnte es nicht.
   - **Jede Positionszeile 135 px hoch**, fünf Positionen 734 px. Ein echter
     Deckel hat zwanzig bis vierzig; das sind drei bis sechs Bildschirmhöhen
     für eine Checkliste, die man im Ganzen sehen will.
   - **Keine dunkle Fassung**, Systemschrift statt der Hausschrift.

   Übernommen ist das System, nicht der Inhalt: Tokens, Raumskala, Glasrezept,
   Zustands-Pills, Knöpfe, Formulare, Tabellen. Was nur Uschi hat (Wochenplan,
   Kalender, Diagramme, Formsatz-Zeilen), steht hier nicht. Was nur Zappes hat,
   steht hinter dem gemeinsamen Teil: der Zustand einer Position, die Chronik,
   die Fundstellen der Auskunft, der Hinweis der Vorführinstanz, das Papier.

   **Kein Fremdcode, keine Fremdquelle** — und hier ist das keine Vorliebe,
   sondern rote Linie 1: eine Kanzleiinstanz hat kein Internet, und eine Schrift
   von einem fremden Server wäre ein Aufruf nach draußen bei **jedem**
   Seitenaufruf. Schriften liegen unter `fonts/`, der Hintergrund unter
   `hintergrund.jpg`, das Logo unter `absqr-logo.svg`, alle im selben
   Verzeichnis. `test_oberflaeche.py` hält das fest und rechnet die Kontraste
   nach.

   Ergonomie, die aus Köbes (KOEB-075) mitkommt und bleibt: Raumskala statt
   Einzelwerte, tabellarische Ziffern, rechtsbündige Zählspalten, Zustand nie
   allein über Farbe, Z-Index als Skala. */

/* ---------- Schrift (lokal, kein CDN) ---------- */
@font-face {
  font-family: "Open Sans";
  src: url("fonts/OpenSans-var.woff2") format("woff2-variations");
  font-weight: 300 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Poppins";
  src: url("fonts/Poppins-500.woff2") format("woff2");
  font-weight: 500;
  font-display: swap;
}
@font-face {
  font-family: "Poppins";
  src: url("fonts/Poppins-600.woff2") format("woff2");
  font-weight: 600;
  font-display: swap;
}
@font-face {
  font-family: "Poppins";
  src: url("fonts/Poppins-700.woff2") format("woff2");
  font-weight: 700;
  font-display: swap;
}

/* ---------- Tokens: helle Fassung ist der Standard ---------- */
:root {
  --primary: #2458d6;
  --heading: #14326b;
  --accent: #1f4fc2;
  --cta: #22c48e;
  --cta-hover: #1aae7c;
  --cta-ink: #06281c;
  --bg: #f3f5f9;
  --ink: #17202d;
  --ink-2: #47556a;
  --ink-3: #5f6d82;
  --line: rgba(23, 32, 45, 0.13);
  --glass-bg: rgba(255, 255, 255, 0.64);
  --glass-blur: 28px;
  --glass-highlight: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.9) 0%,
    rgba(255, 255, 255, 0.55) 55%,
    rgba(255, 255, 255, 0.3) 100%
  );
  --glass-border-top: rgba(255, 255, 255, 0.95);
  --glass-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9), inset 0 -1px 0 rgba(23, 32, 45, 0.04),
    0 10px 40px rgba(23, 32, 45, 0.1), 0 2px 8px rgba(23, 32, 45, 0.06);
  --glass-strong: rgba(255, 255, 255, 0.8);
  --feld-bg: rgba(255, 255, 255, 0.72);

  --ok: #047857;
  --ok-flaeche: rgba(16, 185, 129, 0.14);
  --ok-rand: rgba(5, 150, 105, 0.45);
  --warn: #92400e;
  --warn-flaeche: rgba(245, 158, 11, 0.16);
  --warn-rand: rgba(217, 119, 6, 0.45);
  --bad: #b42318;
  --bad-flaeche: rgba(239, 68, 68, 0.12);
  --bad-rand: rgba(220, 38, 38, 0.4);

  --kontrast-ink: #fff;
  --marke: #17202d;
  /* USCH-037: absqr-Stahlblau, die Zweitfarbe des Hauses. Aus dem Logo der
     absqr-Website v2 (`ab/website/v2/absqr-logo-dark.svg`, dort `--akzent` in
     v2.css: „absqr-Stahlblau, bewusst nicht Dovetails #0045FD"). Sie steht in
     beiden Fassungen gleich — eine Markenfarbe wechselt nicht mit der Ansicht.
     Gemessen gegen Seite und Karte: 3,5 hell und 5,2 dunkel, für eine Fläche
     reichen 3 (WCAG 1.4.11). Als Text taugt sie in der hellen Fassung nicht,
     deshalb trägt sie nur Flächen und die Bildmarke. */
  --marke-akzent: #5b7fd6;
  --zahl-ink: #17202d;
  --hover-flaeche: rgba(23, 32, 45, 0.05);
  --hover-rand: rgba(23, 32, 45, 0.2);
  --knopf-hover-flaeche: rgba(23, 32, 45, 0.06);
  --zeile-trenner: rgba(23, 32, 45, 0.08);
  --zeile-hover: rgba(36, 88, 214, 0.06);
  --fokus-ring: rgba(36, 88, 214, 0.2);
  --akzent-rand: rgba(36, 88, 214, 0.35);
  --akzent-flaeche: rgba(36, 88, 214, 0.11);
  --vertieft: rgba(23, 32, 45, 0.04);
  --vertieft-mittel: rgba(23, 32, 45, 0.07);
  --vertieft-stark: rgba(23, 32, 45, 0.09);
  --hintergrund-bild: none;
  --hintergrund-ueberlagerung: linear-gradient(#f7f8fb, #eceff5);
  --vignette: radial-gradient(120% 100% at 50% 45%, transparent 55%, rgba(23, 32, 45, 0.06) 100%);
  /* Schraffur für abwesend und Sperrtag: eine Fläche, die nicht nach Zustand
     aussieht, sondern nach „hier gilt der Betrieb nicht". */

  --pill-grau: #4b5768;
  --pill-grau-flaeche: rgba(100, 116, 139, 0.14);
  --pill-blau: #1e4fc4;
  --pill-blau-flaeche: rgba(37, 99, 235, 0.12);
  --pill-bernstein: #8a4b0a;
  --pill-bernstein-flaeche: rgba(245, 158, 11, 0.16);
  --pill-gruen: #0b6e4f;
  --pill-gruen-flaeche: rgba(16, 185, 129, 0.14);
  --pill-rot: #b3261e;
  --pill-rot-flaeche: rgba(239, 68, 68, 0.12);
  --pill-tuerkis: #0d6b66;
  --pill-tuerkis-flaeche: rgba(20, 184, 166, 0.14);

  --radius: 14px;
  --radius-klein: 10px;
  --raum-1: 0.35rem;
  --raum-2: 0.6rem;
  --raum-3: 0.85rem;
  --raum-4: 1.15rem;
  --seitenleiste: 248px;
  --seitenleiste-schmal: 88px;
  --z-kopfleiste: 20;
  --ease: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-klapp: cubic-bezier(0.77, 0, 0.175, 1);
  --spalte: 1180px;
  --spalte-schmal: 640px;
}

/* ---------- Dunkle Fassung ----------
   Der Server setzt `data-thema="dunkel"` aus dem Cookie `zappes_thema` an das
   <html>, bevor die Seite gemalt wird; `thema.js` schaltet ohne Neuladen.
   `prefers-color-scheme` schaltet ausdrücklich nicht von selbst — sonst ändert
   sich die Oberfläche für den einen, weil der andere sein Betriebssystem
   umgestellt hat. Jedes Token von oben steht hier noch einmal: ein Wert ohne
   Gegenstück blutet in die andere Fassung durch (test_oberflaeche.py). */
html {
  color-scheme: light;
}
html[data-thema="dunkel"] {
  color-scheme: dark;
  --primary: #3b82f6;
  --heading: #bfdbfe;
  --accent: #60a5fa;
  --cta: #3af1b3;
  --cta-hover: #66f6c6;
  --cta-ink: #06281c;
  --bg: #05080f;
  --ink: #dde5f0;
  --ink-2: #9dacc2;
  --ink-3: #77869e;
  --line: rgba(255, 255, 255, 0.11);
  /* ZAP-164: **Dunkles Glas, nicht helles.** Das weiße Glas (0,06) hellt die Karte über dem
     Foto auf, und genau dort steht der Text. Am ausgelieferten Bildpunkt gemessen fiel `--ink-3`
     damit auf 1,79 – der Token-Test blieb grün, weil er gegen `--bg` rechnet und nicht gegen das
     Bild. Jetzt trägt die Karte einen dunklen Grund und das Foto scheint nur noch durch; die
     Sicht darauf bleibt zwischen den Karten. Dasselbe tut das Booking-Tool bei seinen Tabellen
     („oben weißes, aufhellendes Glas, unten rgba(11,17,29,.62)"). */
  --glass-bg: rgba(11, 17, 29, 0.80);
  --glass-highlight: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.1) 0%,
    rgba(255, 255, 255, 0.028) 55%,
    rgba(255, 255, 255, 0) 100%
  );
  --glass-border-top: rgba(255, 255, 255, 0.17);
  --glass-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), inset 0 -1px 0 rgba(255, 255, 255, 0.06),
    0 10px 48px rgba(0, 0, 0, 0.62), 0 2px 10px rgba(0, 0, 0, 0.38);
  --glass-strong: rgba(255, 255, 255, 0.06);
  --feld-bg: rgba(0, 0, 0, 0.36);
  --ok: #6ee7b7;
  --ok-flaeche: rgba(16, 185, 129, 0.14);
  --ok-rand: rgba(52, 211, 153, 0.4);
  --warn: #fcd34d;
  --warn-flaeche: rgba(245, 158, 11, 0.14);
  --warn-rand: rgba(251, 191, 36, 0.4);
  --bad: #fca5a5;
  --bad-flaeche: rgba(239, 68, 68, 0.14);
  --bad-rand: rgba(248, 113, 113, 0.4);
  --kontrast-ink: #fff;
  --marke: #fff;
  --marke-akzent: #5b7fd6;
  --zahl-ink: #fff;
  --hover-flaeche: rgba(255, 255, 255, 0.06);
  --hover-rand: rgba(255, 255, 255, 0.16);
  --knopf-hover-flaeche: rgba(255, 255, 255, 0.12);
  --zeile-trenner: rgba(255, 255, 255, 0.07);
  --zeile-hover: rgba(96, 165, 250, 0.07);
  --fokus-ring: rgba(59, 130, 246, 0.18);
  --akzent-rand: rgba(59, 130, 246, 0.35);
  --akzent-flaeche: rgba(59, 130, 246, 0.15);
  --vertieft: rgba(0, 0, 0, 0.22);
  --vertieft-mittel: rgba(0, 0, 0, 0.35);
  --vertieft-stark: rgba(0, 0, 0, 0.4);
  --hintergrund-bild: url("hintergrund.jpg");
  /* ZAP-164: Von 0,55–0,72 auf 0,22–0,48 zurückgenommen. Die alten Werte waren für Uschis
     helleres Foto gerechnet; über diesem Bild, das von sich aus dunkel ist, löschten sie es
     fast aus. Der Verlauf bleibt: oben, wo die Kopfzeile sitzt, darf es ruhiger sein als unten.
     **Untergrenze mit Grund** – siehe `test_oberflaeche.py`: Der Kontrasttest rechnet gegen das
     Token `--bg`, nicht gegen das Foto. Wer hier weiter zurückgeht, macht den Test zur Lüge. */
  --hintergrund-ueberlagerung: linear-gradient(rgba(3, 6, 12, 0.22), rgba(3, 6, 12, 0.48));
  --vignette: radial-gradient(120% 100% at 50% 45%, transparent 40%, rgba(0, 0, 0, 0.45) 100%);
  --pill-grau: #aab6c7;
  --pill-grau-flaeche: rgba(148, 163, 184, 0.14);
  --pill-blau: #7cc0ff;
  --pill-blau-flaeche: rgba(59, 130, 246, 0.14);
  --pill-bernstein: #f5c451;
  --pill-bernstein-flaeche: rgba(245, 158, 11, 0.14);
  --pill-gruen: #6ee7a8;
  --pill-gruen-flaeche: rgba(16, 185, 129, 0.14);
  --pill-rot: #ff9d94;
  --pill-rot-flaeche: rgba(239, 68, 68, 0.14);
  --pill-tuerkis: #5fd9d0;
  --pill-tuerkis-flaeche: rgba(20, 184, 166, 0.14);
}

/* ---------- Reset ---------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}
body,
h1,
h2,
h3,
h4,
p,
ul,
ol,
li,
dl,
dt,
dd,
figure,
fieldset,
legend {
  margin: 0;
  padding: 0;
}
ul {
  list-style: none;
}
body {
  background: var(--bg);
  color: var(--ink);
  font-family: "Open Sans", system-ui, sans-serif;
  font-size: 15px;
  line-height: 1.6;
  min-height: 100vh;
  font-variant-numeric: tabular-nums;
  -webkit-font-smoothing: antialiased;
}
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -2;
  background:
    var(--hintergrund-ueberlagerung),
    var(--hintergrund-bild) center / cover no-repeat, var(--bg);
  background-blend-mode: multiply, normal, normal;
}
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: var(--vignette);
}
a {
  color: var(--accent);
  text-underline-offset: 0.18em;
}
a:hover {
  text-decoration-thickness: 2px;
}
button {
  font: inherit;
  cursor: pointer;
}
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 6px;
}
::selection {
  background: var(--primary);
  color: var(--kontrast-ink);
}
img,
svg {
  max-width: 100%;
}
[hidden] {
  display: none !important;
}
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
  }
}

/* ---------- Typografie ---------- */
h1,
h2,
h3,
h4 {
  font-family: "Poppins", "Open Sans", sans-serif;
  line-height: 1.3;
  color: var(--heading);
}
h1 {
  font-size: 1.5rem;
  font-weight: 700;
}
h2 {
  font-size: 1.05rem;
  font-weight: 600;
}
h3 {
  font-size: 0.95rem;
  font-weight: 600;
}
h4 {
  font-size: 0.88rem;
  font-weight: 600;
}
.grau {
  color: var(--ink-3);
}
.zahlen {
  font-variant-numeric: tabular-nums;
}
.leer {
  color: var(--ink-3);
  font-size: 0.88rem;
}
.nur-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}
/* ---------- Zeichensatz (ZAP-110) ----------
   Ein Symbol ist ein Wegweiser, kein Inhalt: es steht neben seinem Wort, nimmt
   dessen Farbe an und bleibt eine Spur leiser. Alle Formen teilen sich hier die
   Linienführung, damit der Satz aus einem Guss ist — im 24er Raster gezeichnet,
   ohne Füllung, 1,7 Strichstärke, runde Enden. */
.symbole {
  display: none;
}
.symbol {
  width: 1.05em;
  height: 1.05em;
  flex: none;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0.7;
}
/* Überschriften und Etiketten tragen ihr Zeichen auf der Grundlinie, mit einem
   Abstand, der zum Wort gehört und nicht zum Nachbarn. */
h1 .symbol,
h2 .symbol,
h3 .symbol,
.etikett .symbol {
  vertical-align: -0.14em;
  margin-right: 0.4rem;
}
/* Das Etikett ist schon gedämpft; ein zweites Mal dämpfen macht es unsichtbar. */
.etikett .symbol {
  opacity: 1;
}

.sprunglink {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  padding: 10px 16px;
  background: var(--pill-blau-flaeche);
  color: var(--pill-blau);
  border-radius: 0 0 var(--radius-klein) 0;
  font-weight: 600;
  text-decoration: none;
}
.sprunglink:focus {
  left: 0;
}

/* ---------- Glas ---------- */
.karte,
.kopfleiste__innen,
.seitenleiste {
  background: var(--glass-highlight), var(--glass-bg);
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
  border: 1px solid var(--line);
  border-top-color: var(--glass-border-top);
  box-shadow: var(--glass-shadow);
  border-radius: var(--radius);
}

/* ---------- Gerüst: Seitenleiste und Inhalt ---------- */
.geruest {
  display: grid;
  grid-template-columns: var(--seitenleiste) minmax(0, 1fr);
  min-height: 100vh;
  transition: grid-template-columns 0.3s var(--ease-klapp);
}
.geruest.schmal {
  grid-template-columns: var(--seitenleiste-schmal) minmax(0, 1fr);
}
.seitenleiste {
  position: sticky;
  top: 16px;
  margin: 16px 0 16px 16px;
  padding: 18px 12px;
  display: flex;
  flex-direction: column;
  gap: 3px;
  height: calc(100vh - 32px);
  overflow: hidden auto;
  scrollbar-width: thin;
}
.geruest.schmal .marke-zusatz,
.geruest.schmal .nav-gruppe,
.geruest.schmal .nav-text,
.geruest.schmal .nav-zahl {
  display: none;
}
.geruest.schmal .nutzer > span:not(.nutzer-kreis) {
  display: none;
}
.geruest.schmal .hauptnav a {
  justify-content: center;
  padding: 10px;
}
.geruest.schmal .nutzer {
  justify-content: center;
  padding: 10px 6px;
}
.klapp-knopf {
  position: absolute;
  top: 16px;
  right: 10px;
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--glass-strong);
  color: var(--ink-2);
  transition: color 0.2s, border-color 0.2s, transform 0.3s var(--ease-klapp);
}
.klapp-knopf:hover {
  color: var(--heading);
  border-color: var(--accent);
}
.geruest.schmal .klapp-knopf {
  position: static;
  margin: 0 auto 6px;
  transform: rotate(180deg);
}

/* ---------- Marke ---------- */
.wortmarke {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 7px;
  padding: 2px 10px 18px;
  text-decoration: none;
}
.wortmarke svg path {
  fill: var(--marke);
}
.wortmarke svg path.marke-bild {
  fill: var(--marke-akzent);
}
.logo-voll {
  width: 132px;
  height: auto;
  display: block;
}
.logo-zeichen {
  width: 30px;
  height: auto;
  display: none;
}
.geruest.schmal .logo-voll {
  display: none;
}
.geruest.schmal .logo-zeichen {
  display: block;
}
.geruest.schmal .wortmarke {
  align-items: center;
  padding: 2px 0 14px;
}
.marke-zusatz {
  /* Rückt den Zusatz dicht unter die Wortmarke: das SVG bringt unten Luft aus
     seiner viewBox mit, die optisch als Abstand wirkt. */
  margin-top: -20px;
  font-size: 0.62rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-3);
  white-space: nowrap;
}
.marke-zusatz b {
  color: var(--cta);
  font-weight: 700;
}

/* ---------- Navigation ---------- */
.nav-gruppe {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--ink-3);
  padding: 14px 10px 5px;
}
.hauptnav {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.hauptnav a {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  min-height: 42px;
  border-radius: var(--radius-klein);
  color: var(--ink-2);
  font-weight: 600;
  font-size: 0.9rem;
  text-decoration: none;
  transition: background 0.2s, color 0.2s;
}
.hauptnav a:hover {
  background: var(--hover-flaeche);
  color: var(--ink);
}
.hauptnav a[aria-current="page"] {
  background: var(--akzent-flaeche);
  color: var(--heading);
  box-shadow: inset 2px 0 0 var(--primary);
}
.hauptnav .symbol {
  width: 18px;
  height: 18px;
  opacity: 1;
}
.nav-zahl {
  margin-left: auto;
  min-width: 22px;
  height: 20px;
  padding: 0 6px;
  border-radius: 99px;
  display: grid;
  place-items: center;
  background: var(--warn-flaeche);
  border: 1px solid var(--warn-rand);
  color: var(--warn);
  font-size: 0.72rem;
  font-weight: 700;
}
.seitenleiste > .nav-gruppe:first-of-type {
  margin-top: auto;
}
.geruest.schmal .seitenleiste > .hauptnav:first-of-type {
  margin-top: auto;
}
.nav-selten > summary {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--ink-3);
  padding: 14px 10px 5px;
  cursor: pointer;
}
.nav-selten[open] > summary {
  color: var(--ink-2);
}
.geruest.schmal .nav-selten > summary {
  font-size: 0;
  padding: 10px;
  text-align: center;
}

/* ---------- Kontomenü am Fuß der Seitenleiste ---------- */
.nutzer-menue {
  margin-top: auto;
  position: relative;
}
.nutzer-menue > summary {
  list-style: none;
}
.nutzer-menue > summary::-webkit-details-marker {
  display: none;
}
.nutzer-menue > summary::marker {
  content: "";
}
.nutzer-menue[open] > .nutzer {
  border-color: var(--akzent-rand);
}
.kontomenue {
  display: grid;
  gap: 2px;
  padding: 6px 4px 0;
}
.kontomenue a,
.kontomenue .textknopf {
  display: block;
  width: 100%;
  text-align: left;
  padding: 8px 10px;
  border-radius: var(--radius-klein);
  color: var(--ink-2);
  font-size: 0.82rem;
  font-weight: 600;
  text-decoration: none;
  transition: background 0.2s, color 0.2s;
}
.kontomenue a:hover,
.kontomenue .textknopf:hover {
  background: var(--hover-flaeche);
  color: var(--ink);
}
.kontomenue form {
  display: contents;
}
.geruest.schmal .nutzer-menue[open] > .kontomenue {
  position: absolute;
  left: calc(100% + 8px);
  bottom: 0;
  min-width: 190px;
  padding: 8px;
  border-radius: var(--radius-klein);
  background: var(--glass-highlight), var(--glass-strong);
  border: 1px solid var(--line);
  box-shadow: var(--glass-shadow);
  z-index: var(--z-kopfleiste);
}
.nutzer {
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px;
  border-radius: var(--radius-klein);
  background: var(--glass-strong);
  border: 1px solid var(--line);
  font-size: 0.82rem;
  color: inherit;
  text-decoration: none;
}
.nutzer > span {
  line-height: 1.2;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.nutzer-kreis {
  width: 28px;
  height: 28px;
  border-radius: 99px;
  flex: none;
  display: grid;
  place-items: center;
  /* Nicht das Stahlblau der Marke: Weiß darauf erreicht nur 3,85:1, und hier
     stehen Initialen — Text braucht 4,5. Die Marke trägt die Bildmarke. */
  background: var(--primary);
  color: var(--kontrast-ink);
  font-weight: 700;
  font-size: 0.75rem;
  text-transform: uppercase;
}

/* ---------- Kopfleiste im Inhalt ---------- */
.kopfleiste {
  position: sticky;
  top: 16px;
  z-index: var(--z-kopfleiste);
  margin-bottom: var(--raum-4);
}
.kopfleiste__innen {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  flex-wrap: wrap;
}
.kopf-werkzeuge {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-left: auto;
}
.suchfeld {
  position: relative;
  flex: 1;
  min-width: 180px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  border-radius: var(--radius-klein);
  background: var(--feld-bg);
  border: 1px solid var(--line);
  transition: border-color 0.2s;
}
.suchfeld:focus-within {
  border-color: var(--accent);
}
.suchfeld input {
  flex: 1;
  min-width: 0;
  background: none;
  border: 0;
  color: var(--ink);
  font: inherit;
  font-size: 0.88rem;
  outline: none;
}
.suchfeld input::placeholder {
  color: var(--ink-3);
}
.suchfeld .knopf {
  min-height: 30px;
  padding: 2px 10px;
  font-size: 0.8rem;
}
.textknopf {
  background: none;
  border: 0;
  padding: 4px 2px;
  color: var(--ink-3);
  font-weight: 600;
  font-size: 0.82rem;
  text-decoration: none;
  transition: color 0.2s;
}
.textknopf:hover {
  color: var(--heading);
}
/* Das Telefonmenü gibt es nur am Telefon. Am Schreibtisch ist sein Etikett `display: none`; eine
   bloß durchsichtige Checkbox blieb dort ein Tabstopp, dessen Fokus man nicht sah (ZAP-180). */
.menue-box {
  display: none;
}
.menue-knopf {
  display: none;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius-klein);
  background: var(--glass-strong);
  color: var(--ink-2);
  font-weight: 600;
  font-size: 0.85rem;
  cursor: pointer;
}
.menue-box:focus-visible + .menue-knopf {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* ---------- Meldungen ---------- */
.meldungen {
  display: grid;
  gap: 0.5rem;
  margin-bottom: var(--raum-3);
}
.meldung {
  padding: 0.6rem 0.95rem;
  border-radius: var(--radius-klein);
  font-size: 0.9rem;
  border: 1px solid var(--line);
}
.meldung--ok {
  background: var(--ok-flaeche);
  border-color: var(--ok-rand);
  color: var(--ok);
}
.meldung--warn {
  background: var(--warn-flaeche);
  border-color: var(--warn-rand);
  color: var(--warn);
}
.meldung--bad {
  background: var(--bad-flaeche);
  border-color: var(--bad-rand);
  color: var(--bad);
}

/* ---------- Layout ----------
   `.inhalt` misst sich selbst (Container Queries): Media Queries messen das
   Fenster und wissen nichts von den 248 px Navigation daneben. */
.inhalt {
  padding: 16px 16px 56px;
  min-width: 0;
  container-type: inline-size;
  container-name: inhalt;
}
.seitenkopf {
  margin-bottom: var(--raum-4);
}
.seitenkopf--zeile {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--raum-3);
  flex-wrap: wrap;
}
.seitenkopf--zeile > * {
  min-width: 0;
}
.unterzeile {
  margin-top: 0.25rem;
  color: var(--ink-3);
  font-size: 0.9rem;
}
.abschnitt {
  margin-top: var(--raum-4);
}
.stapel {
  display: grid;
  gap: var(--raum-3);
}
.stapel > *,
.kartenreihe > *,
.zweispalt > * {
  min-width: 0;
}
.kartenreihe {
  display: grid;
  gap: var(--raum-3);
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}
.kartenreihe--breit {
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}
.zweispalt {
  display: grid;
  gap: var(--raum-3);
  align-items: start;
}
@container inhalt (min-width: 760px) {
  .zweispalt {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }
}
.zweispalt--haupt {
  display: grid;
  gap: var(--raum-3);
  align-items: start;
}
.zweispalt--haupt > * {
  min-width: 0;
}
@container inhalt (min-width: 760px) {
  .zweispalt--haupt {
    grid-template-columns: minmax(0, 60fr) minmax(0, 40fr);
  }
}
.stapel--gedeckelt {
  max-width: var(--spalte);
}
.karte[id] {
  scroll-margin-top: 4.5rem;
}
.zurueck {
  display: inline-block;
  margin-bottom: var(--raum-2);
  color: var(--ink-3);
  font-size: 0.85rem;
  text-decoration: none;
}
.zurueck:hover {
  color: var(--accent);
}

/* ---------- Karten ---------- */
.karte {
  padding: var(--raum-3) var(--raum-4);
  transition: border-color 0.25s var(--ease);
}
.karte:hover {
  border-color: var(--hover-rand);
}
.karte--schmal {
  max-width: var(--spalte-schmal);
}
.karte--flach {
  padding: var(--raum-2) var(--raum-3);
}
.karte__kopf {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: var(--raum-2);
}
.karte__kopf > * {
  min-width: 0;
  overflow-wrap: anywhere;
}
.karte__zahl {
  font-family: "Poppins", sans-serif;
  font-size: 2rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  line-height: 1;
  color: var(--zahl-ink);
}
.karte__zahl--bad {
  color: var(--bad);
}
.karte__neben {
  margin-top: 0.3rem;
  color: var(--ink-3);
  font-size: 0.84rem;
}
/* Kachel: eine Karte, die als Ganzes ein Link ist. */
a.karte {
  display: block;
  color: inherit;
  text-decoration: none;
}
a.karte:hover {
  border-color: var(--akzent-rand);
}
/* Die Überschrift einer Kennzahl ist ein Etikett, keine Gliederungsebene. */
.etikett {
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.etikett small {
  text-transform: none;
  letter-spacing: 0;
  font-weight: 400;
  margin-left: 0.4rem;
}

/* ---------- Tabellen ---------- */
.tabelle-huelle {
  overflow-x: auto;
  margin: 0 -0.25rem;
}
.tabelle {
  width: 100%;
  min-width: 34rem;
  border-collapse: collapse;
  font-variant-numeric: tabular-nums;
  font-size: 0.88rem;
}
.tabelle th {
  padding: 0.3rem 0.55rem;
  border-bottom: 1px solid var(--line);
  text-align: left;
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-3);
  white-space: nowrap;
}
.tabelle td {
  padding: 0.45rem 0.55rem;
  border-bottom: 1px solid var(--zeile-trenner);
  vertical-align: top;
}
/* Zählungen und Größen rechtsbündig, Nummern und Daten nicht: die sind
   Bezeichner und werden von links gelesen. */
.tabelle th.zahlen--rechts,
.tabelle td.zahlen--rechts {
  text-align: right;
}
.tabelle tbody tr {
  transition: background 0.12s linear;
}
.tabelle tbody tr:hover {
  background: var(--zeile-hover);
}
.tabelle tbody tr:last-child td {
  border-bottom: 0;
}
.tabelle td:first-child {
  font-weight: 500;
}
.tabelle--kompakt td,
.tabelle--kompakt th {
  padding: 0.3rem 0.4rem;
}
.tabelle tr.summe td {
  font-weight: 700;
  color: var(--heading);
  border-top: 1px solid var(--line);
}
.tabelle caption {
  caption-side: top;
  text-align: left;
  padding: 0 0.55rem 0.35rem;
  font-weight: 600;
  color: var(--heading);
}

/* ---------- Zustands-Pills ----------
   Farbe ist nie das einzige Signal: der Text im Pill trägt die Aussage, der
   Punkt ist Zugabe. Ein Ton je Zustand, nicht drei Sammelfarben. */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 10px;
  border-radius: 99px;
  font-size: 0.73rem;
  font-weight: 600;
  white-space: nowrap;
  border: 0;
  background: var(--pill-flaeche, var(--pill-grau-flaeche));
  color: var(--pill-tinte, var(--pill-grau));
}
.badge--ok::before,
.badge--warn::before,
.badge--bad::before,
.badge--bestaetigt::before,
.badge--angeboten::before,
.badge--abgesagt::before,
.badge--beantragt::before,
.badge--genehmigt::before,
.badge--abgelehnt::before,
.badge--beendet::before {
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  flex: none;
}
.badge--neutral {
  --pill-tinte: var(--pill-grau);
  --pill-flaeche: var(--pill-grau-flaeche);
}
.badge--akzent {
  --pill-tinte: var(--pill-blau);
  --pill-flaeche: var(--pill-blau-flaeche);
}
.badge--ok,
.badge--bestaetigt,
.badge--genehmigt {
  --pill-tinte: var(--pill-gruen);
  --pill-flaeche: var(--pill-gruen-flaeche);
}
.badge--warn,
.badge--angeboten,
.badge--beantragt {
  --pill-tinte: var(--pill-bernstein);
  --pill-flaeche: var(--pill-bernstein-flaeche);
}
.badge--bad,
.badge--abgesagt,
.badge--abgelehnt {
  --pill-tinte: var(--pill-rot);
  --pill-flaeche: var(--pill-rot-flaeche);
}
.badge--beendet {
  --pill-tinte: var(--pill-grau);
  --pill-flaeche: var(--pill-grau-flaeche);
}
.badge--vertretung {
  --pill-tinte: var(--pill-tuerkis);
  --pill-flaeche: var(--pill-tuerkis-flaeche);
}

/* ---------- Knöpfe ---------- */
.knopf {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 8px 15px;
  min-height: 38px;
  border-radius: var(--radius-klein);
  border: 1px solid var(--line);
  background: var(--glass-strong);
  color: var(--heading);
  font-weight: 600;
  font-size: 0.85rem;
  text-decoration: none;
  transition: background 0.2s, border-color 0.2s, transform 0.1s;
}
.knopf:hover {
  border-color: var(--accent);
  background: var(--knopf-hover-flaeche);
}
.knopf:active {
  transform: scale(0.98);
}
.knopf--primaer {
  background: var(--cta);
  border-color: var(--cta);
  color: var(--cta-ink);
}
.knopf--primaer:hover {
  background: var(--cta-hover);
  border-color: var(--cta-hover);
}
/* Gefahr: Rahmen in der Warnfarbe, aber keine Fläche — erkennbar, ohne zu
   schreien. Die Fläche bleibt dem Hover und damit der Absicht vorbehalten. */
.knopf--gefahr {
  background: transparent;
  border-color: var(--bad-rand);
  color: var(--bad);
}
.knopf--gefahr:hover {
  color: var(--bad);
  border-color: var(--bad-rand);
  background: var(--bad-flaeche);
}
.knopf--klein {
  min-height: 30px;
  padding: 4px 11px;
  font-size: 0.79rem;
}
/* Am Finger bedient braucht es die volle Trefferfläche, am Zeiger nicht. */
@media (pointer: coarse) {
  .knopf--klein {
    min-height: 44px;
    padding: 8px 14px;
  }
}
.knopfleiste {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
}
.aktionsleiste {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  margin-top: var(--raum-3);
  padding-top: var(--raum-3);
  border-top: 1px solid var(--line);
}

/* ---------- Formulare ---------- */
.formular {
  display: grid;
  gap: var(--raum-3);
}
.feld {
  display: grid;
  gap: 0.25rem;
}
.feld > label,
.feld .beschriftung {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--ink-2);
}
.feld input,
.feld select,
.feld textarea,
.filterleiste input,
.filterleiste select {
  width: 100%;
  padding: 9px 11px;
  min-height: 40px;
  border-radius: 9px;
  background: var(--feld-bg);
  border: 1px solid var(--line);
  color: var(--ink);
  font: inherit;
  font-size: 0.88rem;
  outline: none;
  transition: border-color 0.2s;
}
.feld input:focus,
.feld select:focus,
.feld textarea:focus,
.filterleiste input:focus,
.filterleiste select:focus {
  border-color: var(--accent);
}
.feld textarea {
  min-height: 7rem;
  resize: vertical;
}
.feld input[type="checkbox"],
.feld input[type="radio"] {
  width: auto;
  min-height: 0;
  accent-color: var(--primary);
}
/* Ein Ankreuzfeld mit Beschriftung daneben statt darüber. */
.feld--schalter {
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 0.5rem;
}
.feld--schalter > label {
  order: 2;
}
.feld__hilfe {
  font-size: 0.82rem;
  color: var(--ink-3);
}
.feld__fehler,
.formularfehler,
.errorlist {
  font-size: 0.85rem;
  color: var(--bad);
}
.errorlist {
  display: grid;
  gap: 0.15rem;
}
.feld--fehler input,
.feld--fehler select,
.feld--fehler textarea {
  border-color: var(--bad);
}
/* Die Leiste über einer Liste (Muster Artist-Booking-Tool). Sie
   steht sichtbar da, nicht hinter einer Klappe, die Felder sitzen an der
   Grundlinie nebeneinander, und der Stand hängt rechts. */
.filterleiste {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: var(--raum-2);
  margin-bottom: var(--raum-3);
}
.filterleiste__feld {
  display: grid;
  gap: 0.2rem;
  min-width: 9rem;
}
.filterleiste__feld--suche {
  min-width: 11rem;
  flex: 1 1 11rem;
}
.filterleiste label {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--ink-3);
}
/* Der Stand sagt, ob die Liste kurz ist oder der Filter etwas versteckt. */
.filterleiste__stand {
  margin-left: auto;
  align-self: center;
  color: var(--ink-3);
  font-size: 0.84rem;
  font-variant-numeric: tabular-nums;
}
@media (max-width: 860px) {
  .filterleiste__stand {
    margin-left: 0;
    width: 100%;
  }
}

/* Ein Filter, der zu einer Liste in ihrer Karte gehört, nicht zur ganzen Seite (ZAP-160).
   Am Mandanten filtern Nachrichten und Journal je ihren eigenen Abschnitt; ihn nach draußen zu
   stellen risse ihn von der Liste weg, auf die er wirkt. Er sitzt deshalb enger und stützt sich
   auf eine Linie statt auf Abstand — sonst schwimmt er in der Karte. */
.filterleiste--abschnitt {
  margin-bottom: var(--raum-2);
  padding-bottom: var(--raum-2);
  border-bottom: 1px solid var(--line);
}

/* ---------- Definitionslisten ---------- */
.daten {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  gap: 0.3rem 1rem;
}
.daten dt {
  font-size: 0.85rem;
  color: var(--ink-3);
}
.daten dd {
  overflow-wrap: anywhere;
  overflow-wrap: anywhere;
  font-variant-numeric: tabular-nums;
}

/* ---------- Listen, Chips, Klappen ---------- */
.linkliste {
  display: grid;
  gap: 0.4rem;
}
.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
}
.chip {
  padding: 0.15rem 0.6rem;
  overflow-wrap: anywhere;
  border: 1px solid var(--line);
  border-radius: 100px;
  background: var(--glass-strong);
  font-size: 0.8rem;
  color: var(--ink-2);
  text-decoration: none;
}
.chip--aktiv {
  background: var(--akzent-flaeche);
  border-color: var(--akzent-rand);
  color: var(--heading);
  font-weight: 600;
}
.klappe > summary {
  cursor: pointer;
  font-weight: 600;
  font-size: 0.88rem;
  color: var(--heading);
  padding: 0.3rem 0;
}
.klappe > summary::-webkit-details-marker {
  color: var(--ink-3);
}
.klappe[open] > summary {
  margin-bottom: var(--raum-2);
}
/* Warnliste: gebündelte Befunde zu Positionen. Kein Rot als Fläche — es sind
   Hinweise, keine Fehler; die Zeile selbst trägt die Aussage. */
.warnliste {
  /* block statt grid: Mehrspaltigkeit greift auf einem Grid-Container nicht,
     und der aufgeklappte Rest der Liste soll zweispaltig laufen können. Der
     Abstand kommt deshalb aus dem Rand der Zeile. */
  display: block;
  font-size: 0.88rem;
}
.warnliste > li {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 0.5rem;
  padding-left: 1rem;
  position: relative;
}
.warnliste > li + li {
  margin-top: 0.3rem;
}
/* Der aufgeklappte Rest: ab genug Breite zwei Spalten. Mehrspaltigkeit füllt
   die erste Spalte zu Ende, bevor sie in die zweite geht — die Zeitfolge der
   Warnungen bleibt also erhalten. Die Schwelle misst den Inhalt, nicht das
   Fenster: bei eingeklappter Seitenleiste ist mehr Platz als bei ausgeklappter.
   Gemessen (15 px Open Sans): eine Warnung braucht 490–640 px; unter 1000 px
   Inhaltsbreite bräche zu viel um, als dass die zweite Spalte sich lohnte. */
@container inhalt (min-width: 1000px) {
  .warnliste--spalten {
    columns: 2;
    column-gap: var(--raum-4);
  }
  .warnliste--spalten > li {
    break-inside: avoid;
  }
}
.warnliste > li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.55rem;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--warn);
}
.warnliste a {
  font-weight: 600;
  white-space: nowrap;
}
/* Eine Zeile mit Inhalt links und Aktionen rechts. */
.zeilenliste {
  display: grid;
  /* Eine Spalte, die schmaler werden darf als ihr breitester Inhalt: Ohne `minmax(0, …)` zog eine
     Auswahl mit langen Positionsnamen jede Zeile über den Kartenrand (ZAP-167). */
  grid-template-columns: minmax(0, 1fr);
  gap: 0.4rem;
}
.eintragszeile {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 1rem;
  padding: var(--raum-2) var(--raum-3);
  border: 1px solid var(--line);
  border-radius: var(--radius-klein);
  background: var(--vertieft);
}
.eintragszeile__text {
  flex: 1 1 18rem;
  min-width: 0;
}
.eintragszeile .knopfleiste {
  margin-left: auto;
}
/* Die Auswahl der Positionen trägt lange Namen; ohne Grenze schob sie die Zeile über den Rand,
   sobald der Betrachter daneben Platz braucht (ZAP-167). */
.eintragszeile .aktionsleiste {
  min-width: 0;
  max-width: 100%;
}
.eintragszeile .aktionsleiste select {
  flex: 1 1 12rem;
  width: 12rem;
  min-width: 0;
  max-width: 100%;
}
/* Der Betrachter für Belege (ZAP-167): rechts angedockt und nicht modal, damit daneben die
   Zuordnung bedienbar bleibt. `[open]` statt einer festen Anzeige – ein geschlossener Dialog
   bekäme sonst über `display: flex` seine Sichtbarkeit zurück. */
.betrachter[open] {
  position: fixed;
  inset: 0 0 0 auto;
  z-index: 50;
  display: flex;
  flex-direction: column;
  gap: var(--raum-2);
  width: min(50vw, 60rem);
  height: 100vh;
  max-width: 100vw;
  max-height: 100vh;
  /* Am Telefon ist 100vh die Höhe bei eingefahrener Leiste; ist sie ausgefahren, lag das untere
     Ende des Belegs darunter (ZAP-180). 100vh bleibt davor als Rückfall für ältere Browser. */
  height: 100dvh;
  max-height: 100dvh;
  margin: 0;
  padding: var(--raum-3);
  border: 0;
  border-left: 1px solid var(--line);
  background: var(--bg);
  color: var(--ink);
  box-shadow: -8px 0 24px rgba(0, 0, 0, 0.12);
}
.betrachter__kopf {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--raum-2);
}
.betrachter__titel {
  flex: 1 1 12rem;
  min-width: 0;
  overflow-wrap: anywhere;
}
.betrachter__inhalt {
  flex: 1;
  min-height: 0;
}
.betrachter__inhalt > iframe,
.betrachter__inhalt > img {
  display: block;
  width: 100%;
  height: 100%;
  border: 1px solid var(--line);
  border-radius: var(--radius-klein);
  background: #fff;
  object-fit: contain;
}
/* Offen rückt die Seite zur Seite, statt unter dem Betrachter zu verschwinden – sonst läge die
   Auswahl zum Zuordnen genau dahinter, am 23.09. im Bildschirmfoto gesehen. */
body:has(.betrachter[open]) .inhalt {
  margin-right: min(50vw, 60rem);
}
@media (max-width: 700px) {
  .betrachter[open] {
    width: 100vw;
  }
  body:has(.betrachter[open]) .inhalt {
    margin-right: 0;
  }
}

/* ---------- Anmeldung: ohne Seitenleiste, mittig ---------- */
.anmelden {
  display: grid;
  place-items: center;
  min-height: 100vh;
  padding: 24px;
}
.anmelden .karte {
  width: min(420px, 100%);
  padding: var(--raum-4) 1.5rem 1.5rem;
}
.anmelden .wortmarke {
  align-items: center;
  padding-bottom: var(--raum-4);
}
.anmelden .logo-voll {
  width: 150px;
}
.anmelden h1 {
  margin-bottom: var(--raum-3);
}
.anmelden .fusszeile {
  margin-top: var(--raum-3);
  font-size: 0.84rem;
}

/* ---------- Schmale Geräte ---------- */
@media (max-width: 860px) {
  .geruest,
  .geruest.schmal {
    grid-template-columns: minmax(0, 1fr);
  }
  /* Am Telefon ist die Leiste eine Kopfzeile mit einem Knopf. Alles, was
     Navigation ist, liegt dahinter — auch das Kontofeld: es ist kein Inhalt,
     und drei Zentimeter Name über dem Wochenplan sind teuer. */
  .seitenleiste {
    position: relative;
    height: auto;
    margin: 12px 12px 0;
    padding: 12px 14px;
  }
  .wortmarke {
    padding: 0 0 4px;
  }
  .logo-voll {
    width: 104px;
  }
  .marke-zusatz {
    margin-top: -14px;
  }
  .klapp-knopf {
    display: none;
  }
  .menue-box {
    display: block;
    position: absolute;
    opacity: 0;
    width: 1px;
    height: 1px;
  }
  .menue-knopf {
    display: inline-flex;
    position: absolute;
    top: 12px;
    right: 14px;
    margin: 0;
  }
  .hauptnav,
  .nav-gruppe,
  .nav-selten,
  .nutzer-menue {
    display: none;
  }
  .menue-box:checked ~ .hauptnav {
    display: flex;
  }
  .menue-box:checked ~ .nav-gruppe,
  .menue-box:checked ~ .nav-selten,
  .menue-box:checked ~ .nutzer-menue {
    display: block;
  }
  .nutzer-menue {
    margin-top: var(--raum-3);
  }
  .kopfleiste {
    top: 0;
  }
  .suchfeld {
    flex-basis: 100%;
  }
  /* Die Knöpfe bekommen die zweite Zeile ganz, statt rechts in ihr zu kleben —
     eine halbleere Zeile kostet dasselbe wie eine volle. */
  .kopf-werkzeuge {
    width: 100%;
    margin-left: 0;
  }
  .kopf-werkzeuge > * {
    flex: 1;
  }
  .kopf-werkzeuge .knopf {
    width: 100%;
  }
}
/* ---------- Der Hinweis der Vorführinstanz (ZAP-65) ----------
   Er muss auffallen und darf nicht im Weg stehen. Vorher lag er über allem und
   schob am Telefon den Inhalt um 100 px nach unten; jetzt sitzt er im Inhalt,
   über der Kopfleiste, und ist in einer Kanzlei gar nicht da. */
.vorfuehrung {
  margin-bottom: var(--raum-3);
  padding: 0.6rem 0.95rem;
  border-radius: var(--radius-klein);
  border: 1px solid var(--warn-rand);
  background: var(--warn-flaeche);
  color: var(--warn);
  font-size: 0.85rem;
}

/* ---------- Der Zustand einer Position ----------
   Die wichtigste Spalte des Deckels. Über ein `data-`Merkmal statt einer
   Klasse, weil die Werte Umlaute tragen („entfällt") und in einem Klassennamen
   unangenehm wären — die Festlegung aus ZAP-86 bleibt, nur die Gestalt ist
   jetzt die des Hauses. Der Text im Pill trägt die Aussage, der Punkt ist
   Zugabe: Farbe ist nie das einzige Signal. */
[data-zustand] {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 10px;
  border-radius: 99px;
  font-size: 0.73rem;
  font-weight: 600;
  white-space: nowrap;
  background: var(--pill-flaeche, var(--pill-grau-flaeche));
  color: var(--pill-tinte, var(--pill-grau));
}
[data-zustand]::before {
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  flex: none;
}
[data-zustand="offen"] {
  --pill-tinte: var(--pill-bernstein);
  --pill-flaeche: var(--pill-bernstein-flaeche);
}
[data-zustand="da"] {
  --pill-tinte: var(--pill-gruen);
  --pill-flaeche: var(--pill-gruen-flaeche);
}
[data-zustand="entfällt"] {
  --pill-tinte: var(--pill-grau);
  --pill-flaeche: var(--pill-grau-flaeche);
}

/* Die Herkunftsspalte des Deckels (ZAP-109) stand als Fließtext in der Zeile
   und brach auf fünf Zeilen um — in jeder Zeile derselbe Satz. Sie ist ein
   Beiwerk zur Position, kein eigener Gegenstand, also steht sie leise unter
   der Bezeichnung statt als eigene Spalte daneben. */
.herkunft {
  display: block;
  margin-top: 0.15rem;
  color: var(--ink-3);
  font-size: 0.78rem;
  font-weight: 400;
}

/* Knöpfe in einer Tabellenzeile brechen nicht um. Der Fehler aus ZAP-86 kam über
   die Hülle zurück: außerhalb des Sichtfelds ist die Spalte schmal, die Leiste
   bricht auf drei Zeilen, und jede Zeile wird 290 px hoch — auf einem Bildschirm,
   auf dem man die Knöpfe nicht einmal sieht. Gemessen am 22.09. bei 390 px. */
.tabelle .knopfleiste {
  flex-wrap: nowrap;
}
.tabelle td .knopf {
  white-space: nowrap;
}

/* ---------- Chronik: Journal und Eskalationsprotokoll ----------
   Eine Folge von Einträgen mit Zeitpunkt und Person. Die Zeit steht vorn und
   in tabellarischen Ziffern, damit die Spalte trotz unterschiedlicher Längen
   eine Kante behält. */
.chronik {
  display: grid;
  gap: 0.55rem;
}
.chronik > li {
  display: grid;
  gap: 0.15rem;
  padding-left: 0.9rem;
  border-left: 2px solid var(--line);
}
.chronik__zeit {
  color: var(--ink-3);
  font-size: 0.78rem;
  font-variant-numeric: tabular-nums;
}
.chronik__text {
  overflow-wrap: anywhere;
}

/* ---------- Wortlaut: Nachrichtentext, Frage, Antwort ----------
   Er wird gelesen, geprüft und kopiert (ZAP-48). Also Schreibbreite, erhaltene
   Umbrüche und die Schrift des Fließtextes — eine Schreibmaschinenschrift
   würde behaupten, es sei Quelltext. */
.wortlaut {
  max-width: var(--spalte-schmal);
  padding: var(--raum-3);
  border-radius: var(--radius-klein);
  border: 1px solid var(--line);
  border-left: 3px solid var(--accent);
  background: var(--vertieft);
  font: inherit;
  white-space: pre-wrap;
  overflow-wrap: break-word;
}

/* ---------- Fundstellen der Auskunft (ZAP-108) ----------
   Wer auf [W5] in der Antwort klickt, landet bei der Stelle — und soll sehen,
   welche es ist. Ohne Hervorhebung steht sie irgendwo zwischen den anderen. */
.fundstellen > li:target {
  background: var(--akzent-flaeche);
  outline: 2px solid var(--akzent-rand);
  outline-offset: 0.3rem;
  border-radius: var(--radius-klein);
}

/* ---------- Papier ----------
   Ein Deckel wird ausgedruckt und neben die Tastatur gelegt. Dann stören
   Navigation, Kopfleiste und Knöpfe — der Hinweis der Vorführinstanz gehört
   erst recht mit aufs Papier, sonst liegt ein Zettel mit erfundenen Mandanten
   auf einem Schreibtisch, auf dem echte liegen. */
@media print {
  .seitenleiste,
  .kopfleiste,
  .knopfleiste,
  .aktionsleiste,
  form,
  .sprunglink {
    display: none !important;
  }
  body::before,
  body::after {
    display: none;
  }
  body {
    background: #fff;
    color: #000;
  }
  .geruest {
    display: block;
  }
  .inhalt {
    padding: 0;
  }
  .karte {
    background: none;
    backdrop-filter: none;
    box-shadow: none;
    border-color: #999;
    break-inside: avoid;
  }
  [data-zustand] {
    border: 1px solid #999;
  }
}

/* Ein Abschnitt, den man selten braucht, zugeklappt – die Überschrift bleibt eine Überschrift. */
.einklappbar > summary {
  cursor: pointer;
}
.einklappbar > summary h2 {
  display: inline;
}

/* ZAP-113: Werkstatt – die Wege nebeneinander, der Text lesbar umbrochen. */
.werkstatt-spalten {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr));
  gap: 1rem;
}
.werkstatt-text {
  white-space: pre-wrap;
  font-size: 0.9rem;
  max-height: 32rem;
  overflow: auto;
}
.werkstatt-text mark {
  background: var(--warnung-leise, #fbf0e9);
  outline: 1px solid var(--warnung, #8a4b2e);
}

/* Ein Knopf, hinter dem das Sprachmodell rechnet (warten.js). */
.knopf--wartet {
  cursor: progress;
  opacity: 0.75;
}
.knopf--wartet::before,
.kreisel {
  content: "";
  display: inline-block;
  width: 0.8em;
  height: 0.8em;
  margin-right: 0.45em;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  vertical-align: -0.1em;
  animation: knopf-dreht 0.8s linear infinite;
}
@keyframes knopf-dreht {
  to {
    transform: rotate(360deg);
  }
}
@media (prefers-reduced-motion: reduce) {
  .knopf--wartet::before,
  .kreisel {
    animation: none;
  }
}
.laedt {
  display: flex;
  align-items: center;
}
.kreisel {
  flex: none;
}

/* ZAP-149: Mandantenseite – die Akte links, das Journal als Leiste am rechten Rand.
   Zugeklappt ist die Leiste nur ihre Überschrift; offen nimmt sie eine Lesespalte und
   scrollt mit. Auf schmalen Geräten steht sie unter der Akte. */
.mandantenseite {
  display: grid;
  gap: var(--raum-3);
  align-items: start;
}
.mandantenseite > * {
  min-width: 0;
}
.mandantenseite__haupt {
  display: block;
}
.mandantenseite__journal {
  margin-top: var(--raum-4);
}
.journalleiste > summary {
  white-space: nowrap;
}
/* Zugeklappt nur Titel und Zahl (ZAP-151) – die Leiste soll dann kaum Platz nehmen. */
.journalleiste:not([open]) .journalleiste__wort {
  display: none;
}
.journalleiste:not([open]) > summary h2 {
  font-size: 1rem;
}
/* ZAP-151: die Steuerjahre in der Klappe einer Zuordnung – lesbar, nicht als Etikett. */
.jahrzeile {
  margin-top: var(--raum-2);
  font-weight: 600;
  font-size: 0.95rem;
}
.jahrzeile a {
  text-decoration: none;
}
.tabelle td.knapp {
  white-space: nowrap;
}
@container inhalt (min-width: 900px) {
  .mandantenseite {
    grid-template-columns: minmax(0, 1fr) auto;
  }
  .mandantenseite__journal {
    position: sticky;
    top: var(--raum-3);
    max-height: calc(100vh - 2 * var(--raum-3));
    overflow: auto;
  }
  .journalleiste[open] {
    width: min(28rem, 42cqw);
  }
}

/* ZAP-151: gesetzte Modellausgabe (Antwort, KI-Erläuterung). Markdown aus einem Modell kommt mit
   „###"-Überschriften, Listen und Tabellen – im Kartenmaß, nicht im Seitenmaß. */
.antworttext {
  font-size: 0.95rem;
  line-height: 1.55;
}
.antworttext > :first-child {
  margin-top: 0;
}
.antworttext h1,
.antworttext h2,
.antworttext h3,
.antworttext h4 {
  font-size: 1rem;
  font-weight: 700;
  color: var(--heading);
  margin: var(--raum-3) 0 var(--raum-1);
}
.antworttext p {
  margin: 0 0 var(--raum-2);
}
.antworttext ul,
.antworttext ol {
  margin: 0 0 var(--raum-2);
  padding-left: 1.4rem;
}
.antworttext ul {
  list-style: disc;
}
.antworttext ol {
  list-style: decimal;
}
.antworttext li {
  margin-bottom: 0.25rem;
}
.antworttext li > p {
  margin-bottom: 0.25rem;
}
.antworttext table {
  border-collapse: collapse;
  margin: 0 0 var(--raum-2);
  font-size: 0.9rem;
}
.antworttext th,
.antworttext td {
  border: 1px solid var(--line);
  padding: 0.3rem 0.6rem;
  text-align: left;
  vertical-align: top;
}
.antworttext th {
  background: var(--vertieft);
}
.antworttext blockquote {
  margin: 0 0 var(--raum-2);
  padding-left: var(--raum-3);
  border-left: 3px solid var(--line);
  color: var(--ink-2);
}
.antworttext code {
  font-size: 0.9em;
}
.antworttext a[href^="#w"] {
  font-weight: 600;
  text-decoration: none;
}