/* Kontor: Fassung Horizont der Erfolgsschiff-CI, App-Ebene (brand/APP.md). Eine Datei, keine Abhängigkeit.
   Die Tokens stehen oben, aus brand/app-tokens.css übernommen. Die Hausfarbe des Betriebs kommt aus /mandant.css
   als --app-haus (nur auf :root) und treibt allein Link, Auswahl, Häkchenfläche, gewählten Chip und Monogramm. */

/* ---------- Tokens ---------- */
:root {
  color-scheme: light;

  /* Flächen: aus Tiefblau abgeleitet, nie neutrales Grau */
  --app-grund: #f5f9fc;
  --app-flaeche: #ffffff;
  --app-flaeche-2: #edf3f8;
  --app-flaeche-3: #e2ebf2;

  /* Tinte */
  --app-tinte: #082230;
  --app-tinte-2: #33505f;
  --app-tinte-3: #4a6677;
  --app-gesperrt: #7d939f;

  /* Linien */
  --app-linie: #d8e3eb;
  --app-linie-stark: #bcceda;
  --app-feldrand: #6a8393;

  /* Tiefe: Seitenleiste, Toast */
  --app-tief: #082230;
  --app-tiefsee: #04131d;
  --app-auf-tief: #eaf4fa;
  --app-auf-tief-2: #a9c3d3;
  --app-tief-linie: rgb(234 244 250 / 0.14);
  --app-tief-hover: rgb(234 244 250 / 0.07);
  --app-tief-aktiv: rgb(234 244 250 / 0.14);
  --app-lagune: #63d0e0;

  /* Glut: die eine Haupthandlung je Ansicht. Fläche und Licht, nie Schrift auf Hell */
  --app-glut: #ff7a3d;
  --app-glut-hell: #ffa063;
  --app-glut-tief: #ef5f2a;
  --app-auf-glut: #082230;

  /* Fokus */
  --app-fokus: #0f4a5c;
  --app-fokus-tief: #63d0e0;

  /* Hausfarbe des Mandanten. Eingabe ist --app-haus, Ausgabe sind die drei Akzente. Rückfall ohne relative Farbsyntax: Petrol. */
  --app-haus: #0f4a5c;
  --app-akzent: #0f4a5c;
  --app-akzent-licht: #7db4c9;
  --app-akzent-hell: color-mix(in oklab, var(--app-akzent) 10%, var(--app-flaeche));
  --app-auf-akzent: #ffffff;

  /* Zustände. Ampel ist dasselbe Paar. Immer Punkt oder Zeichen plus Wort. */
  --app-fehler: #b31b3b;
  --app-fehler-punkt: #b31b3b;
  --app-fehler-flaeche: #fce8ec;
  --app-warnung: #704800;
  --app-warnung-punkt: #b07400;
  --app-warnung-flaeche: #fff0cc;
  --app-erfolg: #0a6a46;
  --app-erfolg-punkt: #0c8057;
  --app-erfolg-flaeche: #dff3e8;
  --app-info: #0f4a5c;
  --app-info-punkt: #0f4a5c;
  --app-info-flaeche: #ddeef6;
  --app-ampel-rot: var(--app-fehler);
  --app-ampel-gelb: var(--app-warnung);
  --app-ampel-gruen: var(--app-erfolg);

  /* Glas: nur Kopfleiste, Dialog, Popover, und nur mit Licht dahinter */
  --app-glas: rgb(255 255 255 / 0.88);
  --app-glas-kante: rgb(255 255 255 / 0.9);
  --app-glas-filter: blur(24px) saturate(170%);
  --app-scrim: rgb(4 19 29 / 0.5);

  /* Schatten: Licht von oben. Tafeln liegen mit Haarlinie, ohne Schatten */
  --app-schatten-1: 0 1px 2px rgb(8 34 48 / 0.08), 0 10px 24px -12px rgb(8 34 48 / 0.28);
  --app-schatten-2: 0 2px 6px rgb(8 34 48 / 0.08), 0 32px 64px -28px rgb(8 34 48 / 0.45);

  /* Radien: nur die der CI */
  --app-r-s: 14px;
  --app-r-m: 22px;
  --app-r-pille: 999px;
  --app-r-fokus: 6px;

  /* Schrift */
  --app-f: 'Mona Sans', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
  --app-f-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
  --app-breit: 112.5%;
  --app-t-titel: clamp(1.75rem, 1.6rem + 0.5vw, 2rem);
  --app-t-h3: 1.25rem;
  --app-t-h4: 1.0625rem;
  --app-t-lesen: 1rem;
  --app-t-text: 0.9375rem;
  --app-t-feld: 0.9375rem;
  --app-t-tabelle: 0.875rem;
  --app-t-label: 0.8125rem;
  --app-t-kennzahl: 1.75rem;
  --app-w-text: 420;
  --app-w-mittel: 520;
  --app-w-fett: 620;
  --app-w-titel: 680;

  /* Abstände */
  --app-s-1: 0.25rem;
  --app-s-2: 0.5rem;
  --app-s-3: 0.75rem;
  --app-s-4: 1rem;
  --app-s-5: 1.5rem;
  --app-s-6: 2rem;
  --app-s-7: 3rem;

  /* Maße */
  --app-h-s: 2rem;
  --app-h-m: 2.5rem;
  --app-h-l: 2.75rem;
  --app-zeile: 3rem;
  --app-zeile-kompakt: 2.5rem;
  --app-leiste: 16rem;
  --app-leiste-schmal: 4.5rem;
  --app-kopf: 3.5rem;
  --app-tab: 4rem;
  --app-breite: 80rem;

  /* Bewegung */
  --app-ease: cubic-bezier(0.16, 1, 0.3, 1);
  --app-dauer-kurz: 120ms;
  --app-dauer: 200ms;
}

/* Hausfarbe klemmen: Lichtkappe L 0,46 und Chroma 0,14 auf Hell, Lichtboden L 0,78 auf Tiefe. Der Server rechnet nichts. */
@supports (color: oklch(from red l c h)) {
  :root {
    --app-akzent: oklch(from var(--app-haus) min(l, 0.46) min(c, 0.14) h);
    --app-akzent-licht: oklch(from var(--app-haus) max(l, 0.78) min(c, 0.14) h);
  }
}

/* Dunkel: für Kursfest in den Tokens, Kontor setzt data-theme nie. */
[data-theme='dunkel'] {
  color-scheme: dark;

  --app-grund: #061a26;
  --app-flaeche: #0b2635;
  --app-flaeche-2: #10303f;
  --app-flaeche-3: #173b4c;

  --app-tinte: #eaf4fa;
  --app-tinte-2: #a9c3d3;
  --app-tinte-3: #8faabb;
  --app-gesperrt: #5f7b8b;

  --app-linie: #1b3d4e;
  --app-linie-stark: #2a5266;
  --app-feldrand: #6a90a3;

  --app-tief: #04131d;
  --app-fokus: #63d0e0;

  --app-akzent: var(--app-akzent-licht);
  --app-akzent-hell: color-mix(in oklab, var(--app-akzent) 18%, var(--app-flaeche));
  --app-auf-akzent: #082230;

  --app-fehler: #ff8fa3;
  --app-fehler-punkt: #ff8fa3;
  --app-fehler-flaeche: #3a1620;
  --app-warnung: #f5c969;
  --app-warnung-punkt: #f5c969;
  --app-warnung-flaeche: #33270a;
  --app-erfolg: #5fd6a0;
  --app-erfolg-punkt: #5fd6a0;
  --app-erfolg-flaeche: #0c3426;
  --app-info: #8fd9e8;
  --app-info-punkt: #8fd9e8;
  --app-info-flaeche: #0e3646;

  --app-glas: rgb(8 34 48 / 0.9);
  --app-glas-kante: rgb(200 238 250 / 0.28);
  --app-scrim: rgb(2 9 14 / 0.62);

  --app-schatten-1: 0 1px 2px rgb(0 0 0 / 0.3), 0 10px 24px -12px rgb(0 0 0 / 0.6);
  --app-schatten-2: 0 2px 8px rgb(0 0 0 / 0.22), 0 40px 80px -36px rgb(0 0 0 / 0.75);
}

@media (prefers-reduced-transparency: reduce) {
  :root {
    --app-glas: #ffffff;
    --app-glas-filter: none;
  }
  [data-theme='dunkel'] {
    --app-glas: #0b2635;
  }
}

/* ---------- Schriften ---------- */
/* Vom eigenen Server (/static/schriften): die CSP erlaubt keine fremde Herkunft. */
@font-face {
  font-family: 'Mona Sans';
  src: url('/static/schriften/mona-sans.woff2') format('woff2');
  font-weight: 200 900;
  font-stretch: 75% 125%;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'JetBrains Mono';
  src: url('/static/schriften/jetbrains-mono.woff2') format('woff2');
  font-weight: 100 800;
  font-style: normal;
  font-display: swap;
}

/* ---------- Grundlage ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--app-f);
  font-size: var(--app-t-text);
  font-weight: var(--app-w-text);
  line-height: 1.5;
  color: var(--app-tinte);
  background: var(--app-grund);
  font-variant-numeric: tabular-nums;
  -webkit-font-smoothing: antialiased;
}
a { color: var(--app-akzent); text-underline-offset: 0.22em; text-decoration-thickness: 1px; }
a:hover { text-decoration: underline; }
h1, h2, h3, h4, p, dl, dd, figure { margin: 0; }
button, input, select, textarea { font: inherit; color: inherit; }
code { font-family: var(--app-f-mono); font-size: .875em; }
/* Der Ring ist ein box-shadow in Petrol auf Hell, nie in der Hausfarbe. Daneben steht ein Umriss, der im normalen Modus durchsichtig ist: unter
   forced-colors: active schaltet der Browser box-shadow ab und färbt den Umriss in eine Systemfarbe, so bleibt der Fokus zu sehen.
   Jede Regel mit einem Ring trägt ihn selbst (outline: none gäbe es nur beim Sprungziel .seite). */
:focus-visible { outline: 3px solid transparent; outline-offset: 0; box-shadow: 0 0 0 2px var(--app-flaeche), 0 0 0 5px var(--app-fokus); }
a:focus-visible { border-radius: var(--app-r-fokus); }
/* Icons: Linie, 24er Raster, Strich 1,5 px in jeder Größe, flache Enden. */
.icon { width: 20px; height: 20px; flex: none; display: block; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linejoin: miter; stroke-linecap: butt; }
.icon * { vector-effect: non-scaling-stroke; }

/* ---------- Sprunglink ---------- */
/* Das erste Element im Körper: ein Tab springt an Kopfzeile, Leiste und Seitenleiste vorbei zum Inhalt. Ohne Fokus
   unsichtbar, aber da (nie display: none, sonst läse ihn kein Vorleseprogramm); mit Fokus steht er oben links über allem. */
.sprunglink {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}
.sprunglink:focus {
  position: fixed; top: .75rem; left: .75rem; z-index: 100;
  width: auto; height: auto; margin: 0; padding: .6rem 1rem; overflow: visible; clip-path: none;
  background: var(--app-tief); color: var(--app-auf-tief); font-weight: var(--app-w-fett); text-decoration: none;
  border-radius: var(--app-r-pille);
  box-shadow: 0 0 0 3px var(--app-lagune), 0 8px 24px rgb(0 0 0 / .3);
}

/* ---------- Signet ---------- */
/* Positiv auf Hell, negativ auf Tiefe; die Farben stehen an den Pfaden. Kontor zeigt den Produktnamen nur hier, am Fuß der Seitenleiste. */
.signet { width: 1.15em; height: 1.15em; flex: none; display: block; }
.signet .s1 { fill: var(--app-glut); } .signet .s2 { fill: var(--app-auf-tief); } .signet .s3 { fill: var(--app-auf-tief); } .signet .s4 { fill: var(--app-glut); }
.lockup { display: inline-flex; align-items: center; gap: .42em; font-size: .9375rem; font-stretch: var(--app-breit); font-weight: var(--app-w-titel); letter-spacing: -.012em; line-height: 1; white-space: nowrap; color: var(--app-auf-tief); }

/* ---------- Kopfleiste ---------- */
/* Ab 60rem eine Glaspille über dem Himmel des Hauptbereichs: Nutzer, Konto, Abmelden. Darunter die einfache Kopfzeile mit dem Betrieb.
   Es ist dasselbe Element; das Glas trägt nur Licht dahinter, nie Tabellen und Formulare. */
.kopf {
  position: sticky; top: var(--app-s-2); z-index: 20;
  display: flex; align-items: center; gap: var(--app-s-2);
  height: var(--app-kopf); margin: var(--app-s-2) var(--app-s-2) 0; padding: 0 var(--app-s-2) 0 var(--app-s-3);
  border-radius: var(--app-r-pille);
  background: var(--app-glas); -webkit-backdrop-filter: var(--app-glas-filter); backdrop-filter: var(--app-glas-filter);
  box-shadow: inset 0 0 0 1px var(--app-glas-kante), var(--app-schatten-1);
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { .kopf { background: var(--app-flaeche); } }
.marke { flex: 0 1 auto; min-width: 0; display: flex; align-items: center; gap: var(--app-s-2); height: 100%; color: var(--app-tinte); font-weight: var(--app-w-fett); text-decoration: none; }
.marke:hover { text-decoration: none; }
.marke__logo { height: 1.75rem; width: auto; max-width: 9rem; display: block; }
/* Der Name des Betriebs darf mobil zwei Zeilen haben; ein Wort, das breiter ist als der Kasten, bricht um, statt an der Kante abgeschnitten zu werden. */
.marke__name { max-width: calc(100vw - 14rem); line-height: 1.15; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; }
.monogramm {
  flex: none; display: grid; place-items: center; width: 2.25rem; height: 2.25rem; border-radius: var(--app-r-s);
  background: var(--app-akzent-licht); color: var(--app-tief);
  font-stretch: var(--app-breit); font-weight: var(--app-w-titel); font-size: .875rem; line-height: 1; letter-spacing: -.01em;
}
.kopf__nutzer { margin-left: auto; display: flex; align-items: center; gap: var(--app-s-1); flex: none; white-space: nowrap; }
.kopf__person { display: none; flex-direction: column; justify-content: center; padding: 0 var(--app-s-3) 0 var(--app-s-1); line-height: 1.2; }
.kopf__name { font-weight: var(--app-w-fett); }
.kopf__rolle { display: block; font-size: var(--app-t-label); color: var(--app-tinte-3); }
.avatar { flex: none; display: grid; place-items: center; width: 2rem; height: 2rem; border-radius: var(--app-r-pille); background: var(--app-tief); color: var(--app-auf-tief); font-size: var(--app-t-label); font-weight: var(--app-w-fett); line-height: 1; }
.kopf__text { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
@media (min-width: 40rem) {
  .kopf__person { display: flex; }
  .kopf__text { position: static; width: auto; height: auto; margin: 0; overflow: visible; clip-path: none; }
}

/* ---------- Untere Leiste (mobil) ---------- */
/* Drei feste Plätze und „Mehr“. Alles Weitere liegt hinter „Mehr“, damit bei 375 px nichts überläuft und nichts unsichtbar weiterrollt. */
/* Die Höhe der Leiste ohne den Streifen unter ihr am Telefon, als eine benannte Größe: die Leiste (min-height) und der Abstand, den das Dokument
   unten beim Rollen zu einem Fokus hält (scroll-padding-bottom, weiter unten), lesen beide sie und laufen so nicht auseinander. Sie ist die Summe
   der Maße der Leiste, ein Test rechnet sie nach: Rand 1px, Symbol samt Pille 32px, Innenabstände .3rem und .35rem, Abstand .1rem, eine Zeile Schrift
   (.75rem mal Zeilenhöhe 1,5). Gemessen rund 63px bei 16px Schrift; sie wächst und schrumpft mit der Schrift. */
:root { --leiste-hoehe: calc(1px + 32px + .3rem + .1rem + .75rem * 1.5 + .35rem); }
.leiste {
  position: fixed; inset: auto 0 0 0; z-index: 30;
  display: flex; justify-content: flex-start;
  background: var(--app-flaeche);
  border-top: 1px solid var(--app-linie);
  padding-bottom: env(safe-area-inset-bottom);
  min-height: calc(var(--leiste-hoehe) + env(safe-area-inset-bottom, 0px));
}
.leiste > a, .leiste__mehr > summary {
  flex: 1 1 0; min-width: 0; white-space: nowrap;
  display: flex; flex-direction: column; align-items: center; gap: .1rem;
  padding: .3rem .25rem .35rem;
  font-size: .75rem; font-weight: var(--app-w-mittel); color: var(--app-tinte-2); text-decoration: none;
}
.leiste > a:hover { text-decoration: none; }
/* Das Symbol sitzt in einer Pille (3,5rem mal 32px, innen 24px); die aktuelle Seite füllt sie, trägt dazu den stärkeren Schnitt: nie Farbe allein. */
.leiste .icon { width: 3.5rem; height: 32px; padding: 4px 1.0625rem; border-radius: var(--app-r-pille); }
.leiste > a[aria-current="page"], .leiste__mehr--aktiv > summary { color: var(--app-tinte); font-weight: 680; }
.leiste > a[aria-current="page"] .icon, .leiste__mehr--aktiv > summary .icon, .leiste__mehr[open] > summary .icon { background: var(--app-akzent-hell); }
.leiste__mehr { flex: 1 1 0; min-width: 0; }
.leiste__mehr > summary { list-style: none; cursor: pointer; }
.leiste__mehr > summary::-webkit-details-marker { display: none; }
.leiste__mehr[open] > summary { color: var(--app-tinte); }
.leiste__menue {
  position: absolute; left: var(--app-s-2); right: var(--app-s-2); bottom: 100%;
  background: var(--app-flaeche);
  border: 1px solid var(--app-linie); border-radius: var(--app-r-m);
  box-shadow: var(--app-schatten-1);
  padding: .35rem;
  /* Höchstens so hoch wie der freie Raum über der Leiste, ein längeres Menü rollt: bei 640 mal 400 px ragte es sonst über den oberen Rand,
     und der letzte Eintrag war weder zu sehen noch zu erreichen. Abgezogen wird die Leiste mit einem Rand und der Streifen darunter am Telefon. */
  max-height: calc(100dvh - 5rem - env(safe-area-inset-bottom, 0px));
  overflow-y: auto;
  /* Tab und Shift+Tab rollten einen Eintrag sonst mit Abstand 0 an den Rand des Menüs, und der Fokusring wurde dort abgeschnitten. */
  scroll-padding-block: .35rem;
}
.leiste__menue a {
  display: flex; align-items: center; gap: var(--app-s-3);
  padding: 0 var(--app-s-3); min-height: var(--app-h-l); border-radius: var(--app-r-s);
  font-size: var(--app-t-text); font-weight: var(--app-w-mittel); color: var(--app-tinte-2); text-decoration: none;
}
.leiste__menue a:hover { text-decoration: none; background: var(--app-flaeche-2); }
.leiste__menue a[aria-current="page"] { color: var(--app-tinte); font-weight: 680; background: var(--app-akzent-hell); }
/* Tab und scrollIntoView rollen ein Element an den unteren Rand des Sichtfensters, und dort liegt die feste Leiste: der Fokus lag dahinter
   (WCAG 2.2 SC 2.4.11). Das Dokument hält darum unten die Höhe der Leiste ab, dazu den Streifen darunter am Telefon (env) und .75rem Luft für den Ring
   des Fokus. Nur unter 60rem: ab 60rem ist die Leiste aus (display: none), und der Abstand schöbe jedes Ziel dort ohne Grund nach oben. */
@media (max-width: 59.99rem) {
  html { scroll-padding-bottom: calc(var(--leiste-hoehe) + env(safe-area-inset-bottom, 0px) + .75rem); }
}

/* ---------- Seitenleiste (ab 60rem) ---------- */
/* Unter 60rem mit display: none aus (nicht nur unsichtbar, sonst gäbe es tote Tabstopps): dort gelten Kopfzeile und untere Leiste.
   Ab 60rem steht sie links über die volle Höhe in Tiefblau und bleibt beim Rollen stehen. Breit 16rem, schmal 4,5rem (nur Symbole);
   welcher Zustand gilt, setzt leiste.js als Klasse auf <html>. Ohne Skript bleibt sie breit und der Umschalter ausgeblendet. */
:root { --leiste-breite: var(--app-leiste); }
:root.seitenleiste-schmal { --leiste-breite: var(--app-leiste-schmal); }
.seitenleiste {
  display: none;
  background: var(--app-tief); color: var(--app-auf-tief);
}
@media (min-width: 60rem) {
  .kopf { top: var(--app-s-3); margin: var(--app-s-3) var(--app-s-5) 0; padding-left: var(--app-s-4); }
  .kopf .marke { display: none; }
  .rahmen { display: grid; grid-template-columns: var(--leiste-breite) minmax(0, 1fr); min-height: 100vh; min-height: 100dvh; }
  :root.seitenleiste-js .rahmen { transition: grid-template-columns var(--app-dauer) var(--app-ease); }
  .leiste { display: none; }
  .seitenleiste {
    display: flex; flex-direction: column; gap: var(--app-s-3);
    position: sticky; top: 0; align-self: start;
    height: 100vh; height: 100dvh;
    overflow: hidden;
    padding: var(--app-s-3) 0 0;
  }
  .haupt, .seite { min-width: 0; }
  .seite { width: 100%; }

  /* Der Mandant: Monogramm in der Hausfarbe, daneben der Name oder das Logo. Schmal bleibt das Monogramm. */
  .seitenleiste__marke {
    display: flex; align-items: center; gap: var(--app-s-3); flex: none;
    min-height: 3.5rem; margin: 0 var(--app-s-3); padding: var(--app-s-2);
    border: 1px solid var(--app-tief-linie); border-radius: var(--app-r-s);
    color: var(--app-auf-tief); text-decoration: none;
  }
  .seitenleiste__marke:hover { background: var(--app-tief-hover); text-decoration: none; }
  .seitenleiste__zeichen {
    flex: none; display: grid; place-items: center; width: 2.25rem; height: 2.25rem; border-radius: var(--app-r-s);
    background: var(--app-akzent-licht); color: var(--app-tief);
    font-stretch: var(--app-breit); font-weight: var(--app-w-titel); font-size: .875rem; line-height: 1; letter-spacing: -.01em;
  }
  /* Ein Logo des Betriebs kommt in beliebigen Farben: es steht auf einer hellen Fläche, nicht auf dem Tiefblau. */
  .seitenleiste__logo { display: block; flex: 1; min-width: 0; height: 2.25rem; width: auto; max-width: 100%; object-fit: contain; object-position: left center; padding: .2rem .5rem; border-radius: var(--app-r-s); background: var(--app-flaeche); }
  .seitenleiste__markenname {
    flex: 1; min-width: 0; font-weight: var(--app-w-fett); line-height: 1.2;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
    overflow-wrap: anywhere;   /* ein Wort, das breiter ist als der Kasten, bricht um, statt an der Kante abgeschnitten zu werden */
  }

  /* Die Mitte rollt für sich, wenn die Höhe nicht reicht (viele Module auf einem kleinen Bildschirm); Marke und Fuß bleiben stehen.
     Ein leiser Schimmer am oberen und unteren Rand zeigt, dass dahinter noch Einträge liegen (Overlay-Rollleisten tun es nicht), nur mit CSS:
     zwei Abdeckungen in der Farbe der Leiste rollen mit dem Inhalt (local) und verdecken die stehenden Schimmer (scroll), solange oben oder
     unten nichts mehr kommt. Rollt nichts, sieht man keinen Schimmer. Die Mitte trägt den Seitenrand: der Balken des aktiven Eintrags liegt
     im Innenabstand und wird nicht abgeschnitten. */
  .seitenleiste__mitte {
    flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 0 var(--app-s-3) var(--app-s-3);
    scrollbar-width: thin; scrollbar-color: color-mix(in srgb, var(--app-auf-tief) 40%, transparent) transparent;
    background:
      linear-gradient(var(--app-tief) 30%, transparent) top / 100% 2rem no-repeat local,
      linear-gradient(transparent, var(--app-tief) 70%) bottom / 100% 2rem no-repeat local,
      linear-gradient(rgb(234 244 250 / .16), transparent) top / 100% .8rem no-repeat scroll,
      linear-gradient(transparent, rgb(234 244 250 / .16)) bottom / 100% .8rem no-repeat scroll;
  }
  .seitenleiste__liste { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--app-s-1); }
  .seitenleiste__titel {
    margin: 1rem .75rem .25rem; padding-top: .5rem;   /* rem-Werte, weil layout.test.ts die Abstände je Höhe vergleicht */
    font-size: var(--app-t-label); font-weight: var(--app-w-fett); letter-spacing: .06em; text-transform: uppercase; color: var(--app-auf-tief-2);
  }

  .seitenleiste__eintrag {
    position: relative; display: flex; align-items: center; gap: var(--app-s-3);
    width: 100%; min-height: 2.5rem; margin: 0; padding: 0 var(--app-s-3);
    border: 0; border-radius: var(--app-r-s); background: transparent;
    color: var(--app-auf-tief); font: inherit; font-weight: var(--app-w-mittel); line-height: 1.2; text-align: left; text-decoration: none;
    white-space: nowrap; cursor: pointer;
    transition: background-color var(--app-dauer-kurz) var(--app-ease);
  }
  .seitenleiste .icon { width: 24px; height: 24px; }
  .seitenleiste__eintrag:hover { background: var(--app-tief-hover); text-decoration: none; }
  /* Der aktive Eintrag: gefüllte Form, Balken in Lagune und stärkerer Schnitt, nie Farbe allein. */
  .seitenleiste__eintrag[aria-current="page"] { background: var(--app-tief-aktiv); font-weight: 680; }
  .seitenleiste__eintrag[aria-current="page"]::before { content: ""; position: absolute; left: calc(-1 * var(--app-s-3)); top: .5rem; bottom: .5rem; width: 3px; background: var(--app-lagune); }
  .seitenleiste__text { overflow: hidden; text-overflow: ellipsis; }
  /* Der Fokusring der Seite ist für Hell gedacht; auf Tiefblau steht ein Ring in Lagune innen im Eintrag. Der Umriss, der unter forced-colors: active den Ring
     ersetzt, liegt mit -3px innen: die Einträge füllen den Rollbereich, außen schnitte er links und rechts ab. Im normalen Modus ist er durchsichtig. */
  .seitenleiste :focus-visible { outline: 3px solid transparent; outline-offset: -3px; box-shadow: inset 0 0 0 2px var(--app-fokus-tief); }

  /* Der Fuß: Lagune-Linie, Lockup, Umschalter. */
  .seitenleiste__fuss {
    flex: none; display: flex; align-items: center; gap: var(--app-s-3); padding: .75rem .75rem .75rem 1rem;
    box-shadow: 0 -1px 0 color-mix(in srgb, var(--app-lagune) 55%, transparent);
  }
  .seitenleiste__umschalter { display: none; width: var(--app-h-m); min-height: var(--app-h-m); margin-left: auto; padding: 0; justify-content: center; color: var(--app-auf-tief-2); }
  .seitenleiste__umschalter:hover { color: var(--app-auf-tief); }
  :root.seitenleiste-js .seitenleiste__umschalter { display: flex; }
  /* Der Name des Umschalters ist nur für Screenreader da (leiste.js tauscht ihn), auch unter dem Tastaturfokus der schmalen Leiste: eine Ebene höher als die Regeln dort. */
  :root.seitenleiste-js .seitenleiste .seitenleiste__umschalter.seitenleiste__eintrag .seitenleiste__text:not(#x) {
    position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap;
  }

  /* Schmal: nur Symbole. Namen bleiben für Screenreader im Dokument (kein display: none), jeder Eintrag trägt dazu title. */
  :root.seitenleiste-schmal .seitenleiste__marke { justify-content: center; padding: var(--app-s-2) 0; }
  :root.seitenleiste-schmal .seitenleiste__logo,
  :root.seitenleiste-schmal .seitenleiste__markenname,
  :root.seitenleiste-schmal .seitenleiste__fuss .lockup span,
  :root.seitenleiste-schmal .seitenleiste__text {
    position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap;
  }
  :root.seitenleiste-schmal .seitenleiste__eintrag { justify-content: center; padding: 0; }
  :root.seitenleiste-schmal .seitenleiste__titel { margin: var(--app-s-2) var(--app-s-3); padding: 0; font-size: 0; box-shadow: 0 1px 0 var(--app-tief-linie); }
  :root.seitenleiste-schmal .seitenleiste__fuss { flex-direction: column; padding-left: var(--app-s-3); }
  :root.seitenleiste-schmal .seitenleiste__umschalter { margin-left: 0; }
  :root.seitenleiste-schmal .seitenleiste__umschalter .icon { transform: rotate(180deg); }

  /* Schmal und Tastaturfokus in der Leiste: sie legt sich 16rem breit über den Inhalt und zeigt die Namen, denn schmal zeigt der Fokus nur ein Symbol und
     title erscheint nur unter der Maus. Verlässt der Fokus die Leiste, ist sie wieder schmal. Die Gridspalte bleibt bei 4,5rem, der Inhalt rückt nicht; breiter
     wird die Leiste selbst (sie beschneidet jedes Kindelement, ein Flyout bliebe abgeschnitten) und liegt über dem Inhalt. Der Umschalter löst es nie aus
     (:not([aria-expanded]), das trägt in der Leiste nur er): er behält nach einem Mausklick den Fokus, und die nächste Taste machte :focus-visible wahr, dann klemmte die
     Leiste offen. Jede Regel steht für sich, ohne fremden Selektor daneben: ein Browser ohne :has() verwirft nur diese Regeln und bleibt schmal. */
  :root.seitenleiste-schmal .seitenleiste:has(:focus-visible:not([aria-expanded])) { width: var(--app-leiste); z-index: 30; box-shadow: 6px 0 24px rgb(0 0 0 / .35); }
  :root.seitenleiste-schmal .seitenleiste:has(:focus-visible:not([aria-expanded])) .seitenleiste__marke { justify-content: flex-start; padding: var(--app-s-2); }
  :root.seitenleiste-schmal .seitenleiste:has(:focus-visible:not([aria-expanded])) .seitenleiste__logo { position: static; width: auto; height: 2.25rem; margin: 0; clip-path: none; padding: .2rem .5rem; }
  :root.seitenleiste-schmal .seitenleiste:has(:focus-visible:not([aria-expanded])) .seitenleiste__markenname { position: static; width: auto; height: auto; margin: 0; clip-path: none; display: -webkit-box; }
  :root.seitenleiste-schmal .seitenleiste:has(:focus-visible:not([aria-expanded])) .seitenleiste__eintrag { justify-content: flex-start; padding: 0 var(--app-s-3); }
  :root.seitenleiste-schmal .seitenleiste:has(:focus-visible:not([aria-expanded])) .seitenleiste__titel { margin: var(--app-s-4) var(--app-s-3) var(--app-s-1); padding-top: var(--app-s-2); font-size: var(--app-t-label); box-shadow: none; }
  :root.seitenleiste-schmal .seitenleiste:has(:focus-visible:not([aria-expanded])) .seitenleiste__text { position: static; width: auto; height: auto; margin: 0; clip-path: none; }
  :root.seitenleiste-schmal .seitenleiste:has(:focus-visible:not([aria-expanded])) .seitenleiste__fuss { flex-direction: row; padding-left: var(--app-s-4); }
  :root.seitenleiste-schmal .seitenleiste:has(:focus-visible:not([aria-expanded])) .seitenleiste__fuss .lockup span { position: static; width: auto; height: auto; margin: 0; clip-path: none; }
  :root.seitenleiste-schmal .seitenleiste:has(:focus-visible:not([aria-expanded])) .seitenleiste__umschalter { margin-left: auto; }
}

/* Geringe Höhe (ein Laptop, ein Fenster mit Leiste und Dock): die Einträge sitzen dichter, damit die Mitte seltener rollt und „Einstellungen“
   nicht unter dem Rand liegt; reicht es trotzdem nicht, zeigt der Schimmer oben, dass es weitergeht. Nur Teile der Seitenleiste, hinter dem
   60-rem-Block: bei gleicher Wertigkeit gewinnt die spätere. Ab 44 rem Höhe (704 px, etwa 1280 mal 800) ändert sich nichts. */
@media (max-height: 44rem) {
  .seitenleiste__eintrag { min-height: 2.25rem; }
  .seitenleiste__mitte { padding-bottom: var(--app-s-2); }
  .seitenleiste__titel { margin: .5rem .75rem .125rem; padding-top: .25rem; }
  .seitenleiste__fuss { padding: .5rem .75rem .5rem 1rem; }
}

/* ---------- Seite ---------- */
/* Der Hauptbereich trägt den Himmel: ein Glut-Schimmer oben rechts und ein Lagune-Hauch über dem Eis. Nur dort liegt Licht für das Glas der Kopfleiste. */
.haupt {
  position: relative; min-width: 0;
  background:
    radial-gradient(48rem 18rem at 88% -5rem, color-mix(in srgb, var(--app-glut-hell) 26%, transparent), transparent 72%),
    linear-gradient(180deg, color-mix(in srgb, var(--app-lagune) 14%, var(--app-grund)), var(--app-grund) 20rem);
  background-repeat: no-repeat;
}
.seite {
  max-width: var(--app-breite);
  margin: 0 auto;
  padding: var(--app-s-5) var(--app-s-4) 7rem;
  /* Die Breite des Inhalts ist mit der Seitenleiste 16 oder 4,5rem kleiner als das Fenster. Blöcke, die eine
     Mindestbreite brauchen (vierspaltige Fakten, Geschäftsbuch, Probelauf), fragen deshalb diese Breite
     mit @container seite statt der des Fensters. Alles mit einer Schwelle bis 52rem am Fenster bleibt
     unverändert: es trägt auch die kleinste Inhaltsbreite mit Leiste. */
  container: seite / inline-size;
}
/* Ziel des Sprunglinks (tabindex="-1"): nimmt den Fokus, ist aber kein Bedienelement und zeigt darum keinen Ring,
   auch nicht den der Seite (:focus-visible). */
.seite:focus, .seite:focus-visible { outline: none; box-shadow: none; }
@media (min-width: 52rem) { .seite { padding: var(--app-s-6) var(--app-s-5) 4rem; } }

.seitenkopf { display: flex; flex-direction: column; gap: var(--app-s-3); }
.seitenkopf__titel { font-size: var(--app-t-titel); font-stretch: var(--app-breit); font-weight: var(--app-w-titel); line-height: 1.15; letter-spacing: -.02em; text-wrap: balance; }
.seitenkopf__unter { color: var(--app-tinte-3); margin-top: var(--app-s-1); font-size: var(--app-t-tabelle); }
.seitenkopf__handlung { display: flex; flex-wrap: wrap; gap: var(--app-s-2); }
.seitenkopf__handlung .knopf { flex: 1 1 auto; }
@media (min-width: 40rem) {
  .seitenkopf { flex-direction: row; align-items: flex-end; justify-content: space-between; gap: var(--app-s-4); }
  .seitenkopf__handlung .knopf { flex: none; }
}
/* Horizontlinie: die eine Linie der Ansicht, über die ganze Breite, an den Enden leiser. */
.horizont { height: 1px; border: 0; margin: var(--app-s-4) 0 var(--app-s-5); background: linear-gradient(90deg, color-mix(in srgb, var(--app-tinte) 8%, transparent), color-mix(in srgb, var(--app-tinte) 26%, transparent) 14%, color-mix(in srgb, var(--app-tinte) 26%, transparent) 86%, color-mix(in srgb, var(--app-tinte) 8%, transparent)); }

/* Typografie */
.titel { font-size: var(--app-t-titel); font-stretch: var(--app-breit); font-weight: var(--app-w-titel); line-height: 1.15; letter-spacing: -.02em; text-wrap: balance; }
.h3 { font-size: var(--app-t-h3); font-stretch: var(--app-breit); font-weight: 650; line-height: 1.25; letter-spacing: -.012em; text-wrap: balance; }
.h4 { font-size: var(--app-t-h4); font-stretch: var(--app-breit); font-weight: 650; line-height: 1.3; letter-spacing: -.008em; }
.meta { font-size: var(--app-t-tabelle); color: var(--app-tinte-3); }
.label { font-size: var(--app-t-label); font-weight: var(--app-w-fett); color: var(--app-tinte-2); }
.zahl { font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; }
.kennung { font-family: var(--app-f-mono); font-size: .8125rem; font-weight: 450; letter-spacing: -.01em; white-space: nowrap; }
.kennzahl { font-size: var(--app-t-kennzahl); font-stretch: var(--app-breit); font-weight: var(--app-w-titel); letter-spacing: -.02em; font-variant-numeric: tabular-nums; line-height: 1.1; }

/* Meldung: Zeichen links, Titel fett, ein Satz. Das Zeichen und das Wort tragen den Zustand, die Farbe nur die Stimmung. */
.meldung { --z: var(--app-info); --f: var(--app-info-flaeche); display: flex; gap: var(--app-s-3); align-items: flex-start; padding: var(--app-s-3) var(--app-s-4); border-radius: var(--app-r-s); background: var(--f); border: 1px solid color-mix(in srgb, var(--z) 30%, transparent); color: var(--app-tinte); }
.meldung > .icon { color: var(--z); margin-top: 1px; }
.meldung strong { display: block; font-weight: var(--app-w-fett); }
.meldung--erfolg { --z: var(--app-erfolg); --f: var(--app-erfolg-flaeche); }
.meldung--warnung { --z: var(--app-warnung); --f: var(--app-warnung-flaeche); }
.meldung--fehler { --z: var(--app-fehler); --f: var(--app-fehler-flaeche); }
.hinweis { margin: 0 0 var(--app-s-5); }
.hinweis p { margin: 0; }
/* Die einfachen Meldungen im Text tragen ihr Zeichen als Fläche vor dem Wort. */
/* Ein Hinweis nach einer Handlung, direkt im Inhalt (ein <p>): wie .meldung--info, mit einem Zeichen aus Form und Wort, nie Farbe allein. */
p.hinweis { --z: var(--app-info); display: flex; gap: var(--app-s-3); align-items: flex-start; padding: var(--app-s-3) var(--app-s-4); border-radius: var(--app-r-s); background: var(--app-info-flaeche); border: 1px solid color-mix(in srgb, var(--z) 30%, transparent); color: var(--app-tinte); }
p.hinweis::before { content: "i"; flex: none; display: grid; place-items: center; width: 1.25rem; height: 1.25rem; margin-top: 1px; border-radius: 50%; background: var(--z); color: #fff; font-size: .8rem; font-weight: var(--app-w-fett); font-style: normal; line-height: 1; }
.fehler, .warnung { --z: var(--app-fehler); --f: var(--app-fehler-flaeche); display: flex; gap: var(--app-s-3); align-items: flex-start; padding: var(--app-s-3) var(--app-s-4); border-radius: var(--app-r-s); background: var(--f); border: 1px solid color-mix(in srgb, var(--z) 30%, transparent); color: var(--app-tinte); }
.fehler::before { content: "\00d7"; flex: none; display: grid; place-items: center; width: 1.25rem; height: 1.25rem; margin-top: 1px; border-radius: 50%; background: var(--z); color: #fff; font-size: 1rem; font-weight: var(--app-w-fett); line-height: 1; }
.warnung { --z: var(--app-warnung); --f: var(--app-warnung-flaeche); }
.warnung::before { content: ""; flex: none; width: 1.25rem; height: 1.1rem; margin-top: 3px; background: var(--app-warnung-punkt); clip-path: polygon(50% 0, 100% 100%, 0 100%); }

.abschnitt { margin-top: var(--app-s-6); }
.abschnitt:first-child { margin-top: 0; }
.abschnitt__kopf {
  display: flex; align-items: baseline; justify-content: space-between; gap: var(--app-s-4);
  padding-bottom: var(--app-s-3);
}
.abschnitt__titel { font-size: var(--app-t-h4); font-stretch: var(--app-breit); font-weight: 650; line-height: 1.3; letter-spacing: -.008em; }
.abschnitt__titel .zahl { color: var(--app-tinte-3); font-weight: var(--app-w-mittel); margin-left: .35rem; }
.abschnitt__kopf a { font-size: var(--app-t-tabelle); font-weight: var(--app-w-mittel); }
.abschnitt--leise .abschnitt__titel { color: var(--app-tinte-2); }

/* ---------- Zeilen (die Tafel der Listen) ---------- */
.zeilen { list-style: none; margin: 0; padding: 0; background: var(--app-flaeche); border: 1px solid var(--app-linie); border-radius: var(--app-r-m); overflow: hidden; }
.zeile {
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: var(--app-s-3); row-gap: var(--app-s-1);
  padding: var(--app-s-3) var(--app-s-4);
  border-bottom: 1px solid var(--app-linie);
  align-items: start;
}
.zeile:last-child { border-bottom: 0; }
.zeile:hover { background: var(--app-flaeche-2); }
.zeile__ampel { padding-top: .2rem; }
.zeile__kern { min-width: 0; }
.zeile__titel { font-weight: var(--app-w-fett); font-size: var(--app-t-text); line-height: 1.3; color: var(--app-tinte); overflow-wrap: anywhere; }
.zeile__titel a { color: inherit; }
.zeile__meta { color: var(--app-tinte-3); font-size: var(--app-t-tabelle); margin-top: .15rem; display: flex; flex-wrap: wrap; column-gap: .35rem; row-gap: .1rem; }
/* Der Trenner hängt mit einem geschützten Leerzeichen (\00a0) am letzten Wort seines Eintrags: nach einem gewöhnlichen
   Leerzeichen dürfte der Umbruch davor liegen, und das „·“ stünde allein am Anfang der nächsten Zeile. */
.zeile__meta > *:not(:last-child)::after { content: "\00a0·"; color: var(--app-tinte-3); }
.zeile__frist { grid-column: 2; font-size: var(--app-t-tabelle); font-weight: var(--app-w-mittel); }
.zeile--vorgang .status { grid-column: 2; }
.zeile__handlung { grid-column: 2; margin-top: var(--app-s-1); display: flex; gap: var(--app-s-2); flex-wrap: wrap; }
.zeile--erledigt .zeile__titel { color: var(--app-tinte-3); text-decoration: line-through; text-decoration-thickness: 1px; }
.zeile__nummer { font-family: var(--app-f-mono); color: var(--app-tinte-3); font-weight: 450; font-size: .8125rem; letter-spacing: -.01em; min-width: 3.2rem; padding-top: .15rem; }

@media (min-width: 52rem) {
  .zeile { grid-template-columns: auto 1fr 12rem auto; column-gap: var(--app-s-5); align-items: center; padding: var(--app-s-3) var(--app-s-5); }
  .zeile__frist { grid-column: auto; }
  .zeile__handlung { grid-column: auto; margin-top: 0; }
  .zeile--vorgang { grid-template-columns: 3.5rem 1fr 14rem; }
  .zeile:not(.zeile--vorgang, .zeile--zugang):has(> .zeile__nummer):has(> .zeile__handlung):not(:has(> .zeile__frist)) { grid-template-columns: auto 1fr auto; }
  .zeile--vorgang .status { grid-column: auto; }
}
/* Die Zeile eines Zugangs steht in der rechten Spalte der Einstellungen (rund 29rem breit). Die Handlungen stehen wie unter 52rem unter den Namen, bei jeder Breite. */
.zeile--zugang { grid-template-columns: auto 1fr; column-gap: var(--app-s-3); align-items: start; padding: var(--app-s-3) var(--app-s-4); }
.zeile--zugang .zeile__handlung { grid-column: 2; margin-top: var(--app-s-1); }
.zeile--zugang .zeile__meta { margin-top: .15rem; }

/* Ampel: Punkt plus Wort, nie Farbe allein. */
.ampel { --z: var(--app-tinte-3); --p: var(--app-feldrand); display: inline-flex; align-items: center; gap: .5rem; color: var(--z); font-weight: var(--app-w-fett); white-space: nowrap; }
.ampel::before { content: ""; width: .625rem; height: .625rem; border-radius: 50%; background: var(--p); flex: none; }
.ampel--rot { --z: var(--app-ampel-rot); --p: var(--app-fehler-punkt); }
.ampel--gelb { --z: var(--app-ampel-gelb); --p: var(--app-warnung-punkt); }
.ampel--gruen { --z: var(--app-ampel-gruen); --p: var(--app-erfolg-punkt); }
.ampel--grau { --z: var(--app-tinte-3); }
.ampel--nur-punkt { gap: 0; }
.punkt { width: .5rem; height: .5rem; border-radius: 50%; background: currentColor; flex: none; }

/* Status: eine Form vor dem Wort. Anfang Umriss, Mitte gefüllt, Abschluss Punkt, Ausgang grauer Punkt, unbekannt gestrichelt. */
.status { display: inline-flex; align-items: center; gap: .4rem; font-size: var(--app-t-tabelle); font-weight: var(--app-w-mittel); color: var(--app-tinte-2); white-space: nowrap; }
.status::before { content: ""; width: .55rem; height: .55rem; border: 1.5px solid currentColor; border-radius: 2px; }
.status--mitte { color: var(--app-akzent); } .status--mitte::before { background: currentColor; }
.status--abschluss { color: var(--app-erfolg); } .status--abschluss::before { background: currentColor; border-radius: 50%; }
.status--ausgang { color: var(--app-tinte-3); } .status--ausgang::before { background: currentColor; border-radius: 50%; }
.status--unbekannt { color: var(--app-tinte-3); } .status--unbekannt::before { border-style: dashed; }
.status--in_bearbeitung { color: var(--app-akzent); } .status--in_bearbeitung::before { background: currentColor; }
.status--wartet { color: var(--app-warnung); } .status--wartet::before { background: transparent; }
.status--abgeschlossen { color: var(--app-erfolg); } .status--abgeschlossen::before { background: currentColor; border-radius: 50%; }

/* Plakette: Tönung, Punkt oder Zeichen, Wort. */
.plakette { --fg: var(--app-tinte-2); --bg: var(--app-flaeche-3); display: inline-flex; align-items: center; gap: .375rem; height: 1.5rem; padding: 0 .625rem 0 .5rem; border-radius: var(--app-r-pille); background: var(--bg); color: var(--fg); font-size: var(--app-t-label); font-weight: var(--app-w-fett); white-space: nowrap; line-height: 1; }
.plakette .icon { width: 14px; height: 14px; }
.plakette--info { --fg: var(--app-info); --bg: var(--app-info-flaeche); }
.plakette--erfolg { --fg: var(--app-erfolg); --bg: var(--app-erfolg-flaeche); }
.plakette--warnung { --fg: var(--app-warnung); --bg: var(--app-warnung-flaeche); }
.plakette--fehler { --fg: var(--app-fehler); --bg: var(--app-fehler-flaeche); }
.plakette--haus { --fg: var(--app-akzent); --bg: var(--app-akzent-hell); }

/* Leerer Zustand: Horizontlinie mit Halbkreis, ein Satz, eine Handlung. Der Halbkreis ist ein Verlauf, die Linie auch: kein Bild, kein img-src. */
.leer { color: var(--app-tinte-2); padding: var(--app-s-6) var(--app-s-4); text-align: center; text-wrap: pretty; }
.leer::before {
  content: ""; display: block; width: 7.5rem; height: 2rem; margin: 0 auto var(--app-s-3); color: var(--app-tinte-3);
  background:
    linear-gradient(currentColor, currentColor) bottom / 100% 1.5px no-repeat,
    radial-gradient(circle 24px at 50% 100%, transparent 21.5px, currentColor 22px, currentColor 23.5px, transparent 24px) bottom / 100% 100% no-repeat;
}
.leer strong { color: var(--app-tinte); font-weight: var(--app-w-fett); }

/* ---------- Fakten (Kopf eines Vorgangs) ---------- */
.fakten {
  display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--app-s-4) var(--app-s-5);
  margin: 0; padding: var(--app-s-4); background: var(--app-flaeche); border: 1px solid var(--app-linie); border-radius: var(--app-r-m);
}
@media (min-width: 40rem) { .fakten { grid-template-columns: repeat(2, minmax(0, 1fr)); padding: var(--app-s-5); } }
@container seite (min-width: 57rem) { .fakten { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.fakten dt { font-size: var(--app-t-label); color: var(--app-tinte-3); font-weight: var(--app-w-fett); }
.fakten dd { margin: .15rem 0 0; font-weight: var(--app-w-mittel); overflow-wrap: anywhere; }
.fakten form { margin-top: .35rem; display: flex; gap: .4rem; flex-wrap: wrap; align-items: center; }

/* ---------- Knöpfe ---------- */
/* Sekundär ist der Grundknopf: Weiß mit Linie. Glut (.knopf--primaer) gibt es einmal je Ansicht, die Haupthandlung, und sie trägt immer ein Wort. */
.knopf {
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: var(--app-s-2);
  min-height: var(--app-h-m); padding: 0 1.125rem; border: 1px solid var(--app-linie-stark); border-radius: var(--app-r-pille);
  background: var(--app-flaeche); color: var(--app-tinte);
  font-size: var(--app-t-text); font-stretch: var(--app-breit); font-weight: var(--app-w-fett); line-height: 1.1; letter-spacing: -.005em;
  text-decoration: none; white-space: nowrap; cursor: pointer;
  transition: background-color var(--app-dauer-kurz) var(--app-ease), border-color var(--app-dauer-kurz) var(--app-ease), box-shadow var(--app-dauer-kurz) var(--app-ease), color var(--app-dauer-kurz) var(--app-ease), filter var(--app-dauer-kurz) var(--app-ease);
}
.knopf:hover { background: var(--app-flaeche-2); border-color: var(--app-feldrand); text-decoration: none; }
.knopf:active { transform: translateY(1px); }
.knopf--primaer {
  color: var(--app-auf-glut); border-color: transparent;
  background: linear-gradient(180deg, var(--app-glut-hell), var(--app-glut) 55%, var(--app-glut-tief));
  box-shadow: inset 0 1px 0 rgb(255 255 255 / .55), inset 0 -2px 6px rgb(150 40 0 / .18), 0 1px 2px rgb(120 40 10 / .25), 0 10px 18px -12px rgb(240 100 40 / .75);
}
.knopf--primaer:hover { background: linear-gradient(180deg, var(--app-glut-hell), var(--app-glut) 55%, var(--app-glut-tief)); border-color: transparent; filter: brightness(1.06) saturate(1.05); }
.knopf--leise { color: var(--app-tinte-2); background: transparent; border-color: transparent; }
.knopf--leise:hover { background: var(--app-flaeche-2); border-color: transparent; color: var(--app-tinte); }
.knopf--gefahr { color: var(--app-fehler); border-color: color-mix(in srgb, var(--app-fehler) 45%, var(--app-flaeche)); }
.knopf--gefahr:hover { background: var(--app-fehler-flaeche); border-color: var(--app-fehler); }
.knopf--klein { min-height: var(--app-h-s); padding: 0 .875rem; font-size: var(--app-t-tabelle); }
.knopf--voll { width: 100%; }
.knopf .icon { width: 18px; height: 18px; }
.knopf[disabled] { cursor: not-allowed; color: var(--app-gesperrt); background: var(--app-flaeche-2); border-color: transparent; box-shadow: none; filter: none; transform: none; }
.knopf--fertig { color: var(--app-erfolg); border-color: color-mix(in srgb, var(--app-erfolg) 35%, var(--app-flaeche)); }
.knopf--fertig:hover { background: var(--app-erfolg-flaeche); border-color: var(--app-erfolg-punkt); color: var(--app-erfolg); }
/* Unter Desktopbreite und bei grobem Zeiger bleibt auch der kleine Knopf ein Berührungsziel. */
@media (max-width: 59.99rem), (pointer: coarse) {
  .knopf, .knopf--klein { min-height: var(--app-h-l); }
}

/* ---------- Formulare ---------- */
.formular { display: flex; flex-direction: column; gap: var(--app-s-4); max-width: 34rem; }
.formular--zeile { flex-direction: row; flex-wrap: wrap; align-items: flex-end; max-width: none; }
.feld { display: flex; flex-direction: column; gap: 6px; align-content: start; }
.feld__label { font-size: var(--app-t-label); font-weight: var(--app-w-fett); color: var(--app-tinte-2); }
.feld__zusatz { font-size: var(--app-t-label); color: var(--app-tinte-3); }
/* Der Rand eines Feldes hat 3 zu 1 gegen den Grund (WCAG 1.4.11): --app-feldrand. Die Linien der Tafeln sind schmückend und dürfen heller sein. */
.eingabe {
  width: 100%; min-height: var(--app-h-m); padding: .4rem .75rem;
  border: 1px solid var(--app-feldrand); border-radius: var(--app-r-s); background: var(--app-flaeche);
  font-size: var(--app-t-feld); line-height: 1.3;
  transition: border-color var(--app-dauer-kurz) var(--app-ease), box-shadow var(--app-dauer-kurz) var(--app-ease);
}
.eingabe::placeholder { color: var(--app-tinte-3); opacity: 1; }
.eingabe:hover { border-color: var(--app-tinte-2); }
.eingabe:focus { border-color: var(--app-tinte); }
.eingabe[aria-invalid='true'] { border-color: var(--app-fehler); box-shadow: inset 0 0 0 1px var(--app-fehler); }
.eingabe[disabled] { color: var(--app-gesperrt); background: var(--app-flaeche-2); border-color: var(--app-linie-stark); cursor: not-allowed; }
select.eingabe {
  appearance: none; -webkit-appearance: none; padding-right: 2.5rem; cursor: pointer;
  background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position: calc(100% - 1.25rem) 52%, calc(100% - 0.9rem) 52%;
  background-size: 6px 6px, 6px 6px; background-repeat: no-repeat;
}
.eingabe--kurz { width: auto; min-width: 11rem; }
.eingabe--kompakt { min-height: var(--app-h-s); padding: .15rem 2rem .15rem .5rem; }
input[type="date"].eingabe { min-width: 10rem; }
textarea.eingabe { min-height: 5.5rem; padding: .625rem .75rem; resize: vertical; }
input[type="file"].eingabe { padding: .35rem; }
input[type="file"].eingabe::file-selector-button { min-height: 1.75rem; margin-right: .75rem; padding: 0 .9rem; border: 1px solid var(--app-linie-stark); border-radius: var(--app-r-pille); background: var(--app-flaeche-2); color: var(--app-tinte); font: inherit; font-weight: var(--app-w-fett); cursor: pointer; }
/* Datumsfeld im Filter: eine Spalte im Filter ist mindestens 9rem breit, das Feld füllt sie (.eingabe: width: 100%). */
.filter input[type="date"].eingabe { min-width: 0; }

/* Kästchen und Auswahlknöpfe: eigene Form, Rand mit 3 zu 1, gewählt in der Hausfarbe mit Häkchen. */
input[type="checkbox"], input[type="radio"] {
  appearance: none; -webkit-appearance: none; flex: none; position: relative; width: 1.25rem; height: 1.25rem; margin: 0;
  border: 1.5px solid var(--app-feldrand); border-radius: var(--app-r-fokus); background: var(--app-flaeche); cursor: pointer;
}
input[type="checkbox"]:hover, input[type="radio"]:hover { border-color: var(--app-tinte-2); }
input[type="checkbox"]:checked, input[type="radio"]:checked { background: var(--app-akzent); border-color: var(--app-akzent); }
input[type="checkbox"]:checked::after { content: ""; position: absolute; left: 4px; top: 3px; width: 9px; height: 5px; border-left: 2px solid var(--app-auf-akzent); border-bottom: 2px solid var(--app-auf-akzent); rotate: -45deg; }
input[type="radio"] { border-radius: 50%; }
input[type="radio"]:checked { background: var(--app-flaeche); border-width: 6px; }
input[type="checkbox"][disabled], input[type="radio"][disabled] { background: var(--app-flaeche-2); border-color: var(--app-linie-stark); cursor: not-allowed; }

.chips { display: flex; flex-wrap: wrap; gap: var(--app-s-2); }
.chip { position: relative; display: inline-flex; }
.chip input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; margin: 0; cursor: pointer; }
.chip span {
  display: inline-flex; align-items: center; gap: .4rem; min-height: var(--app-h-m); padding: 0 .9rem;
  border: 1px solid var(--app-linie-stark); border-radius: var(--app-r-pille); background: var(--app-flaeche);
  font-size: var(--app-t-text); font-weight: var(--app-w-mittel); color: var(--app-tinte-2); cursor: pointer;
  transition: background-color var(--app-dauer-kurz) var(--app-ease), border-color var(--app-dauer-kurz) var(--app-ease), color var(--app-dauer-kurz) var(--app-ease);
}
.chip:hover span { background: var(--app-flaeche-2); }
.chip input:checked + span { background: var(--app-akzent); border-color: var(--app-akzent); color: var(--app-auf-akzent); font-weight: var(--app-w-fett); }
.chip input:checked + span::before { content: ''; width: 9px; height: 5px; margin-right: 2px; border-left: 2px solid currentColor; border-bottom: 2px solid currentColor; rotate: -45deg; translate: 0 -1px; }
.chip input:focus-visible + span { outline: 3px solid transparent; outline-offset: 0; box-shadow: 0 0 0 2px var(--app-flaeche), 0 0 0 5px var(--app-fokus); }
.chip--frist input:checked + span { background: var(--app-akzent-hell); color: var(--app-akzent); border-color: var(--app-akzent); }

.formular__fuss { display: flex; gap: var(--app-s-3); align-items: center; flex-wrap: wrap; padding-top: var(--app-s-1); }

/* Inline-Formular unter einer Liste, z. B. Aufgabe am Vorgang */
.einschub { margin-top: var(--app-s-4); padding: var(--app-s-4); background: var(--app-flaeche-2); border-radius: var(--app-r-m); }
.einschub .formular { max-width: none; }
@media (min-width: 52rem) { .einschub { padding: var(--app-s-5); } }

/* ---------- Tafel ---------- */
.tafel { background: var(--app-flaeche); border: 1px solid var(--app-linie); border-radius: var(--app-r-m); overflow: hidden; }
.tafel__kopf { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--app-s-3); padding: var(--app-s-4) var(--app-s-5); border-bottom: 1px solid var(--app-linie); }
.tafel__werkzeug { display: flex; flex-wrap: wrap; align-items: center; gap: var(--app-s-3); padding: var(--app-s-3) var(--app-s-5); border-bottom: 1px solid var(--app-linie); }
.tafel__koerper { padding: var(--app-s-5); }
.tafel__fuss { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--app-s-3); padding: var(--app-s-3) var(--app-s-5); border-top: 1px solid var(--app-linie); background: var(--app-flaeche-2); }
.auswahlleiste { display: flex; flex-wrap: wrap; align-items: center; gap: var(--app-s-2); padding: var(--app-s-2) var(--app-s-5); background: var(--app-akzent-hell); border-bottom: 1px solid var(--app-linie); font-weight: var(--app-w-fett); }

/* ---------- Tabelle (Prüfspur) ---------- */
.tabelle-rahmen { margin: 0; padding: 0; overflow-x: auto; -webkit-overflow-scrolling: touch; background: var(--app-flaeche); border: 1px solid var(--app-linie); border-radius: var(--app-r-m); }
.tabelle { width: 100%; border-collapse: collapse; font-size: var(--app-t-tabelle); line-height: 1.4; }
.tabelle th { height: 2.5rem; padding: 0 .75rem; text-align: left; white-space: nowrap; font-size: var(--app-t-label); font-weight: var(--app-w-fett); color: var(--app-tinte-2); background: var(--app-flaeche-2); border-bottom: 1px solid var(--app-linie); }
.tabelle td { padding: .5rem .75rem; vertical-align: middle; border-bottom: 1px solid var(--app-linie); }
.tabelle tr > :first-child { padding-left: var(--app-s-4); }
.tabelle tr > :last-child { padding-right: var(--app-s-4); }
.tabelle tbody tr:last-child td { border-bottom: 0; }
.tabelle tbody tr:hover { background: var(--app-flaeche-2); }
.tabelle tbody tr.ist-gewaehlt { background: var(--app-akzent-hell); }
.tabelle tbody tr.ist-gewaehlt > :first-child { box-shadow: inset 3px 0 0 var(--app-akzent); }
.tabelle td.zeit { white-space: nowrap; color: var(--app-tinte-2); font-variant-numeric: tabular-nums; }
.tabelle td.aktion { font-weight: var(--app-w-fett); white-space: nowrap; }
.tabelle details summary { cursor: pointer; color: var(--app-akzent); font-size: var(--app-t-tabelle); font-weight: var(--app-w-mittel); display: inline-flex; align-items: center; min-height: 2.25rem; }
/* Als Karte sind Zeile und Zelle Blöcke. Ein langer Name ohne Leerzeichen, etwa ein Kunde aus 180 Nullen, hat keine Stelle zum Umbrechen, und der Browser macht die Tabelle so breit wie ihn.
   `overflow-wrap: anywhere` an der Zelle bricht ihn im Notfall im Wort und zählt dabei schon bei der Mindestbreite mit, anders als `break-word`. Beide Karten-Regeln tragen es, die für das
   Fenster und die für die Inhaltsfläche neben der Seitenleiste. */
@media (max-width: 51.99rem) {
  .tabelle-rahmen { overflow: visible; }
  .tabelle thead { display: none; }
  .tabelle tr { display: block; padding: .65rem var(--app-s-4); border-bottom: 1px solid var(--app-linie); }
  .tabelle tbody tr:last-child { border-bottom: 0; }
  .tabelle tbody tr:hover { background: none; }
  .tabelle td, .tabelle tr > :first-child, .tabelle tr > :last-child { display: block; padding: .1rem 0; border: 0; overflow-wrap: anywhere; }
  .tabelle td[data-feld]::before { content: attr(data-feld) ": "; color: var(--app-tinte-3); font-size: var(--app-t-label); font-weight: var(--app-w-fett); }
  .tabelle td.zeit { font-weight: var(--app-w-fett); color: var(--app-tinte); }
  .tabelle td.aktion { white-space: normal; }
}
/* Dieselben Karten mit Seitenleiste: dort ist der Inhalt schmaler als das Fenster. Die breiteste Tabelle dieser Sorte, die Prüfspur, braucht gemessen 720 px (45rem);
   ab 46rem Inhalt bleibt sie eine Tabelle, darunter werden es Karten. Ohne Leiste liegt jeder Inhalt unter 46rem schon im Bereich der Fenster-Regel darüber. */
@container seite (max-width: 45.99rem) {
  .tabelle-rahmen { overflow: visible; }
  .tabelle thead { display: none; }
  .tabelle tr { display: block; padding: .65rem var(--app-s-4); border-bottom: 1px solid var(--app-linie); }
  .tabelle tbody tr:last-child { border-bottom: 0; }
  .tabelle tbody tr:hover { background: none; }
  .tabelle td, .tabelle tr > :first-child, .tabelle tr > :last-child { display: block; padding: .1rem 0; border: 0; overflow-wrap: anywhere; }
  .tabelle td[data-feld]::before { content: attr(data-feld) ": "; color: var(--app-tinte-3); font-size: var(--app-t-label); font-weight: var(--app-w-fett); }
  .tabelle td.zeit { font-weight: var(--app-w-fett); color: var(--app-tinte); }
  .tabelle td.aktion { white-space: normal; }
}
/* Kompakte Tabellen (`.tabelle--kompakt`: die Kontrollsummen des Geschäftsbuchs, im Import die Spaltenübersicht und die Summen je Blatt) passen auch in schmale Inhaltsflächen,
   weil ihre Köpfe umbrechen dürfen (`white-space: normal` gegen das nowrap von `.tabelle th`), die der Beträge (`th.betrag`, im Import der Name der Spalte des Betriebs) im Notfall mitten im
   Namen (`overflow-wrap: anywhere`: nur das zählt die Umbruchstellen in die kleinste Breite der Spalte ein, `break-word` nicht). Gemessen bleibt „Summen je Blatt“ auch mit Spaltennamen von
   30 Zeichen im Kopf in 480px Inhalt (512px Fenster mit überlagernder Leiste, das ist die Schwelle von 30rem) 480px breit, der Rahmen rollt bei keiner Breite, und auf Papier stehen alle
   Spalten. `anywhere` hängt nur an `th.betrag`, nicht an jedem Kopf: an allen Köpfen schrumpfte der Tabellenalgorithmus auch die schmale Spalte „Zeilen“ unter ihr Wort.
   Die Karten-Regeln oben gelten für jede `.tabelle`; hier nimmt die Klasse sie zurück, sobald der Inhalt 30rem erreicht, gleich wie breit das Fenster ist. Darunter bleiben es Karten.
   Der Umschlag trägt die Klasse nicht und wird über sein Kind gefunden. Die Regel steht nach beiden Karten-Blöcken, bei gleicher Spezifität gewinnt die spätere. Das gilt auch für
   `overflow-wrap`: die Karten setzen es an der Zelle auf `anywhere`, als Tabelle schrumpfte es auch die schmalen Spalten unter ihr Wort. */
@container seite (min-width: 30rem) {
  .tabelle-rahmen:has(> .tabelle--kompakt) { margin: 0; padding: 0; overflow: auto; }
  .tabelle--kompakt thead { display: table-header-group; }
  .tabelle--kompakt th { white-space: normal; }
  .tabelle--kompakt th.betrag { overflow-wrap: anywhere; }
  .tabelle--kompakt tr { display: table-row; padding: 0; border-bottom: 0; }
  .tabelle--kompakt td { display: table-cell; padding: .5rem .75rem; border-bottom: 1px solid var(--app-linie); overflow-wrap: normal; }
  .tabelle--kompakt td[data-feld]::before { content: none; }
}
/* Die Anzahl unter einem Betrag (`.klein` in einer Zelle, so in den Kontrollsummen des Geschäftsbuchs) steht in einer eigenen Zeile, wie im Geschäftsbuch. Sonst bricht sie
   in einer schmalen Spalte von „Zeilen“ ab und klebt am „€“. Als Tabelle wie als Karte gilt dasselbe. */
.tabelle--kompakt td .klein { display: block; }
.aufklapp { margin-bottom: var(--app-s-4); }
.aufklapp > summary { list-style: none; display: inline-flex; cursor: pointer; }
.aufklapp > summary::-webkit-details-marker { display: none; }
.aufklapp[open] > summary { margin-bottom: var(--app-s-3); }
.tabelle pre { margin: .4rem 0 0; font-family: var(--app-f-mono); font-size: .75rem; white-space: pre-wrap; word-break: break-word; background: var(--app-flaeche-2); padding: .5rem .75rem; border-radius: var(--app-r-s); max-width: 34rem; }
.aenderung { display: inline-block; }
.aenderung b { font-weight: var(--app-w-fett); }
.aenderung s { color: var(--app-tinte-3); }

.filterleiste { display: flex; flex-wrap: wrap; gap: var(--app-s-2); margin: 0 0 var(--app-s-4); }
.filterleiste a {
  display: inline-flex; align-items: center; min-height: var(--app-h-s); padding: 0 .875rem;
  border: 1px solid var(--app-linie-stark); border-radius: var(--app-r-pille); background: var(--app-flaeche);
  font-size: var(--app-t-tabelle); font-weight: var(--app-w-mittel); color: var(--app-tinte-2); text-decoration: none;
}
.filterleiste a:hover { text-decoration: none; background: var(--app-flaeche-2); }
.filterleiste a[aria-current="page"] { background: var(--app-akzent); border-color: var(--app-akzent); color: var(--app-auf-akzent); font-weight: var(--app-w-fett); }
.filterleiste a[aria-current="page"]::before { content: ''; width: 9px; height: 5px; margin-right: .4rem; border-left: 2px solid currentColor; border-bottom: 2px solid currentColor; rotate: -45deg; translate: 0 -1px; }
@media (max-width: 59.99rem) { .filterleiste a { min-height: var(--app-h-l); } }

/* Ein Filter ist eine Werkzeugzeile: Fläche, Haarlinie, Felder nebeneinander. */
.filter { display: flex; flex-wrap: wrap; gap: var(--app-s-3); align-items: flex-end; margin-bottom: var(--app-s-5); padding: var(--app-s-4); background: var(--app-flaeche); border: 1px solid var(--app-linie); border-radius: var(--app-r-m); }
.filter .feld { min-width: 9rem; flex: 1 1 9rem; }
/* Bei 375 px stehen zwei Felder nebeneinander, je 150 px breit, und ein gewählter Wert oder ein Platzhalter war abgeschnitten. Ein Feld mit .feld--voll nimmt dort die ganze Zeile.
   .filter__hilfe ist eine Zeile unter einem Feld, die den Platzhalter ersetzt. */
@media (max-width: 39.99rem) { .filter .feld--voll { flex: 1 1 100%; } }
.filter__hilfe { flex: 1 1 100%; margin: 0; }
/* Ein gewählter Wert, der auch in der ganzen Zeile nicht passt, endet auf „…“ und wird nicht still abgeschnitten. */
.filter select.eingabe { text-overflow: ellipsis; }

/* ---------- Team (Heute für den Inhaber) ---------- */
.team { list-style: none; margin: 0; padding: 0; background: var(--app-flaeche); border: 1px solid var(--app-linie); border-radius: var(--app-r-m); overflow: hidden; }
.team li { display: grid; grid-template-columns: 1fr; gap: .3rem var(--app-s-4); padding: var(--app-s-3) var(--app-s-4); border-bottom: 1px solid var(--app-linie); align-items: center; }
.team li:last-child { border-bottom: 0; }
@media (min-width: 40rem) { .team li { grid-template-columns: 1fr auto; padding-inline: var(--app-s-5); } }
.team__name { font-weight: var(--app-w-fett); }
.team__zahlen { display: flex; gap: var(--app-s-4); font-size: var(--app-t-tabelle); font-variant-numeric: tabular-nums; }
.team__zahlen .ampel { gap: .35rem; }

.uebersicht { display: flex; flex-wrap: wrap; gap: var(--app-s-3) var(--app-s-6); padding: var(--app-s-4); background: var(--app-flaeche); border: 1px solid var(--app-linie); border-radius: var(--app-r-m); }
.uebersicht b { font-weight: var(--app-w-titel); }
/* Die Summen der Kontrolle: Bezeichnung, Betrag, Zeilenzahl untereinander, der Betrag groß genug zum Vergleichen.
   Die Bezeichnung nennt die Spalte aus der Liste des Betriebs: ein Name ohne Leerzeichen (gemessen 200 Zeichen, 2268px breit) machte die Seite bei 320 und 375px breiter als den Bildschirm.
   `min-width: 0` nimmt dem Kind der Zeile die Mindestbreite seines längsten Worts, `overflow-wrap: anywhere` bricht im Notfall mitten im Namen. */
.uebersicht > span { display: flex; flex-direction: column; gap: .1rem; min-width: 0; overflow-wrap: anywhere; }
.uebersicht > span > b { font-size: var(--app-t-kennzahl); font-stretch: var(--app-breit); letter-spacing: -.02em; line-height: 1.15; }

/* ---------- Einstellungen ---------- */
.modulzeile { display: grid; grid-template-columns: 1fr auto; gap: .5rem var(--app-s-4); align-items: center; padding: var(--app-s-4) 0; border-bottom: 1px solid var(--app-linie); }
.modulzeile p { color: var(--app-tinte-3); font-size: var(--app-t-tabelle); margin-top: .2rem; }
.modulzeile__stand { font-size: var(--app-t-tabelle); font-weight: var(--app-w-fett); }
.modulzeile__stand--an { color: var(--app-erfolg); }
.modulzeile__stand--aus { color: var(--app-tinte-3); }
.farbfeld { display: flex; gap: .6rem; align-items: center; }
/* Die zwei kurzen Felder der Zuordnung in der Kasse (Zeile und Spalte der Gesamtsumme) schrumpfen auf den Platz, statt ihn zu sprengen. */
.feldpaar { display: flex; gap: .6rem; align-items: center; }
.feldpaar .eingabe--kurz { flex: 0 1 11rem; min-width: 0; }
.farbfeld input[type="color"] { width: var(--app-h-l); height: var(--app-h-l); padding: .15rem; border: 1px solid var(--app-feldrand); border-radius: var(--app-r-s); background: var(--app-flaeche); cursor: pointer; }
.logo-vorschau { height: 2.5rem; width: auto; background: var(--app-flaeche); border: 1px solid var(--app-linie); padding: .4rem .6rem; border-radius: var(--app-r-s); }

.spalten { display: grid; gap: var(--app-s-6); }
@media (min-width: 52rem) { .spalten { grid-template-columns: 1fr 1fr; gap: var(--app-s-7); } }
/* Zwei Abschnitte nebeneinander beginnen auf einer Höhe. Nur am Bildschirm: im Druck liegen die Abschnitte untereinander (.spalten { display: block }) und brauchen den Abstand. */
@media screen and (min-width: 52rem) { .spalten > .abschnitt { margin-top: 0; } }

/* ---------- Geschäftsbuch ---------- */
/* Breit eine Tabelle mit Summenzeile, schmal (Inhalt unter 59rem) Karten mit Kunde, Status, Courtage Soll/Ist und Zahlungsstand; die Summen stehen dann darüber.
   Die Tabelle braucht gemessen 939 px (58.7rem), erst ab 59rem Inhaltsbreite läuft sie nicht über. */
.gb th.betrag, .gb td.betrag { text-align: right; white-space: nowrap; }
.gb td .klein { display: block; font-size: var(--app-t-label); color: var(--app-tinte-3); font-weight: var(--app-w-text); }
.gb tfoot td { font-weight: var(--app-w-fett); border-bottom: 0; border-top: 1px solid var(--app-linie-stark); background: var(--app-flaeche-2); }
.gb-summen { display: none; margin-bottom: var(--app-s-3); }
.gb-raster { display: grid; grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr)); gap: var(--app-s-4) var(--app-s-5); }
.formular--breit { max-width: none; }
@container seite (max-width: 58.99rem) {
  .gb thead, .gb tfoot, .gb .gb__breit { display: none; }
  .gb, .gb tbody { display: block; }
  .gb tr { display: grid; grid-template-columns: 1fr 1fr; gap: .35rem var(--app-s-4); padding: var(--app-s-3) var(--app-s-4); border-bottom: 1px solid var(--app-linie); }
  .gb td { display: block; padding: 0; border: 0; }
  .gb td.betrag { text-align: left; }
  .gb td[data-l]::before { content: attr(data-l); display: block; font-size: var(--app-t-label); font-weight: var(--app-w-fett); color: var(--app-tinte-3); }
  .gb .gb__kunde { grid-column: 1 / -1; font-weight: var(--app-w-fett); }
  .gb .gb__kundenzeile > div { overflow-wrap: anywhere; }   /* nur in der Kartenform, siehe .gb__kundenzeile unten */
  .gb-summen { display: flex; }
}

/* ---------- Anmeldung ---------- */
/* Ein ruhiger Auftritt auf dem Himmel des Hauptbereichs: Name oder Logo des Betriebs, eine Tafel mit dem Formular. */
.anmeldung-grund { min-height: 100dvh; background:
  radial-gradient(48rem 18rem at 88% -5rem, color-mix(in srgb, var(--app-glut-hell) 26%, transparent), transparent 72%),
  linear-gradient(180deg, color-mix(in srgb, var(--app-lagune) 14%, var(--app-grund)), var(--app-grund) 20rem) no-repeat; }
.anmeldung { min-height: 100dvh; display: flex; flex-direction: column; justify-content: center; max-width: 25rem; margin: 0 auto; padding: var(--app-s-6) var(--app-s-4); }
.anmeldung__kopf { display: flex; align-items: center; gap: var(--app-s-3); margin-bottom: var(--app-s-5); }
.anmeldung__logo { height: 2.5rem; width: auto; max-width: 100%; }
.anmeldung__name { font-size: var(--app-t-h3); font-stretch: var(--app-breit); font-weight: var(--app-w-titel); letter-spacing: -.012em; color: var(--app-tinte); }
.anmeldung h1 { font-size: var(--app-t-h3); font-stretch: var(--app-breit); font-weight: 650; line-height: 1.25; letter-spacing: -.012em; margin-bottom: var(--app-s-4); }
.anmeldung .formular { gap: var(--app-s-4); max-width: none; }
.anmeldung__fuss { margin-top: var(--app-s-5); color: var(--app-tinte-3); font-size: var(--app-t-label); }

/* ---------- Kleinkram ---------- */
/* Abstände als Klassen, weil die CSP keine style-Attribute erlaubt. */
.abstand-oben { margin-top: var(--app-s-4); }
.abstand-oben-klein { margin-top: var(--app-s-3); }
.abstand-unten { margin-bottom: var(--app-s-5); }
.zwischentitel { margin: var(--app-s-4) 0 .25rem; font-weight: var(--app-w-fett); }
.abstand-oben-gross { margin-top: var(--app-s-5); }
.lesebreite { max-width: 36rem; }
.abschnitt__titel--form { margin-bottom: var(--app-s-3); }
.leise { color: var(--app-tinte-3); font-size: var(--app-t-tabelle); }
.mono { font-family: var(--app-f-mono); font-size: .875em; font-variant-numeric: tabular-nums; }
.verlauf { list-style: none; margin: 0; padding: 0; background: var(--app-flaeche); border: 1px solid var(--app-linie); border-radius: var(--app-r-m); overflow: hidden; }
.verlauf li { display: grid; grid-template-columns: 8.5rem 1fr; gap: .25rem var(--app-s-4); padding: var(--app-s-3) var(--app-s-4); border-bottom: 1px solid var(--app-linie); font-size: var(--app-t-tabelle); }
.verlauf li:last-child { border-bottom: 0; }
.verlauf .zeit { color: var(--app-tinte-3); white-space: nowrap; }
.verlauf .wer { font-weight: var(--app-w-fett); }
@media (max-width: 40rem) { .verlauf li { grid-template-columns: 1fr; gap: .1rem; } }

/* ---------- Seitenblättern (Geschäftsbuch, M1-C) ---------- */
.seitenblaettern { display: flex; align-items: center; justify-content: space-between; gap: var(--app-s-4); margin-top: var(--app-s-4); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
  .knopf:active { transform: none; }
}

/* ---------- Druck ---------- */
/* Auf Papier zählt der Inhalt. A4 quer ist 1123 px breit und erreicht damit die 60rem, ab denen die Seitenleiste steht
   und den Inhalt um 16rem verengt: die Leiste käme mit aufs Blatt, und das Geschäftsbuch wäre Karten statt Tabelle
   (Inhalt unter 59rem). Darum ist alles aus, was nur zum Bedienen da ist (Kopfzeile, untere Leiste, Seitenleiste,
   Sprunglink, die Handlung neben dem Titel, das Filterformular über der Liste), der Rahmen ist ein Block, und der
   Inhalt füllt das Blatt bis auf einen kleinen Rand (ohne die 6rem für die untere Leiste, die sonst eine leere Seite
   anhängten). Das Filterformular ist nur als Kind des Inhalts aus (Geschäftsbuch): das der Prüfspur liegt in einem
   details und behält im Druck seine Werte, sie zeigen, welcher Filter galt. Knöpfe (button, .knopf) tun auf Papier nichts
   und sind aus, ebenso alles mit .nur-bildschirm: die Klasse für ein Bedienelement, das sich nicht über Element oder Klasse
   fassen lässt (die Exportzeile des Geschäftsbuchs). Das gilt mit !important: eine Regel mit Element und Klasse, etwa
   `.aufklapp > summary { display: inline-flex; }`, ist spezifischer und ließe den Umschalter „Filtern“ der Prüfspur auf dem Blatt.
   Von der Filterleiste druckt nur der aktive Filter, mit Rahmen und dunkler
   Schrift statt Hintergrund: Chrome druckt Hintergründe nur auf Wunsch, die weiße Schrift stünde dann ohne Grund auf dem Blatt,
   und der Filter wirkte abgeschaltet. tfoot ist im Druck eine gewöhnliche Zeilengruppe: als Fußgruppe wiederholt Chrome die
   Summenzeile unter jedem Blatt, und „Summe dieser Seite“ läse sich wie die Summe des Blatts. Das Raster .spalten (Einstellungen
   und Konto) ist ein Block: in den Einstellungen fehlt im Druck sein erstes Kind, „Erscheinungsbild“ trägt .nur-bildschirm, und
   der übrige Inhalt stünde in der linken Hälfte des Blatts, die rechte bliebe leer. Der Rahmen einer kompakten Tabelle rollt im
   Druck nicht (overflow: visible): A4 hoch ist 718px breit, dort gilt die Container-Regel bei 30rem mit overflow: auto, und ein
   Rahmen, der rollt, schnitte die Tabelle an der Kante des Blatts ab und druckte die Bildlaufleiste mit. Die Regel trägt denselben
   Selektor wie die bei 30rem (`:has(> .tabelle--kompakt)` wiegt mehr als `.tabelle-rahmen` allein, eine leichtere verlöre). Der
   Himmel des Hauptbereichs und die Hintergründe der Tafeln entfallen: Papier ist weiß. Der Abschnitt steht hinter den Regeln, die er überschreibt:
   bei gleicher Wertigkeit gewinnt die spätere. */
@media print {
  .kopf, .leiste, .seitenleiste, .sprunglink, .seitenkopf__handlung, .seite > .filter { display: none; }
  button, .knopf, .nur-bildschirm { display: none !important; }
  .filterleiste a:not([aria-current="page"]) { display: none; }
  .filterleiste a[aria-current="page"] { background: none; border: 2px solid var(--app-tinte); color: var(--app-tinte); }
  .filterleiste a[aria-current="page"]::before { content: none; }
  tfoot { display: table-row-group; }
  .tabelle-rahmen:has(> .tabelle--kompakt) { overflow: visible; }
  .spalten { display: block; }
  .rahmen { display: block; }
  .haupt { background: none; }
  .seite { max-width: none; margin: 0; padding: .5rem 1rem; }
  /* Eine Überschrift steht nicht allein am Blattende, ihr Inhalt erst auf dem nächsten: sie bleibt bei dem, was unter ihr kommt. */
  h2, h3 { break-after: avoid; }
  /* Das Geschäftsbuch auf A4 hoch. Die Inhaltsfläche ist dort 686 px breit, unter 59rem, und das Geschäftsbuch druckte als Karten: „Courtage Soll“ auf Blatt 1, der Wert auf Blatt 2, vier Spalten
     (Versicherer, Sparte, Beitrag, Zuständig) fehlten ganz. Eine Zeile bleibt auf einem Blatt (`break-inside`), in jeder Form. In der Kartenform des Containers druckt es als Tabelle mit allen neun Spalten, kleiner
     gesetzt, mit Kopf auf jedem Blatt; die Namen brechen nur zwischen Wörtern. Auf A4 quer (Inhalt über 59rem) bleibt alles, wie es war. Die Regeln stehen hier, in dem einen Druckabschnitt der Datei, und
     hinter denen der Container-Regel des Geschäftsbuchs, die sie überschreiben (gleiche Wertigkeit, die spätere gewinnt). Die Schwelle ist dieselbe wie dort (unter 59rem), in der Schreibweise des Bereichs
     (`width < 59rem`): die Tests der Schwellen (layout.test.ts, tabelle-kompakt.test.ts) zählen die Container-Regel `(max-width: 58.99rem)` und verlangen genau eine, die des Bildschirms. Der Kopf der
     Tabelle heißt hier mit Kindzeichen: ein Test sucht die Schreibweise mit Leerzeichen in jedem @media-Block und verbietet sie dort (Karten am Fenster). */
  .gb tr { break-inside: avoid; }
  @container seite (width < 59rem) {
    .gb { display: table; font-size: .62rem; }
    .gb > thead { display: table-header-group; }
    .gb tbody, .gb tfoot { display: table-row-group; }
    .gb tr { display: table-row; padding: 0; border-bottom: 0; }
    .gb th { font-size: .58rem; white-space: normal; padding-right: .2rem; }
    .gb td { display: table-cell; padding: .35rem .2rem .35rem 0; border-bottom: 1px solid var(--app-linie); overflow-wrap: normal; }
    .gb th:last-child, .gb td:last-child { padding-left: .4rem; }   /* „Courtage Ist“ (rechtsbündig) und „Zuständig“ (linksbündig) stehen sonst ohne Lücke nebeneinander */
    .gb .gb__breit { display: table-cell; }
    .gb td[data-l]::before { content: none; }
    .gb td.betrag { text-align: right; }
    .gb .gb__kunde { font-weight: 400; }
    .gb .gb__kundenzeile > div { overflow-wrap: break-word; }
    .gb td .klein, .gb .status { font-size: .56rem; }
    .gb-summen { display: none; }
  }
}

/* ---------- Import (Geschäftsbuch) ---------- */
.schritte { display: flex; flex-wrap: wrap; gap: .5rem 1.75rem; list-style: none; margin: 0 0 var(--app-s-5); padding: 0; font-size: var(--app-t-tabelle); color: var(--app-tinte-2); }
.schritte__schritt { display: flex; align-items: center; gap: .5rem; }
.schritte__nummer { display: inline-flex; align-items: center; justify-content: center; width: 1.5rem; height: 1.5rem; border-radius: 50%; border: 1.5px solid var(--app-feldrand); font-weight: var(--app-w-fett); flex: none; }
.schritte__nummer .icon { width: 14px; height: 14px; }
.schritte__schritt--fertig { color: var(--app-erfolg); }
.schritte__schritt--fertig .schritte__nummer { border-color: var(--app-erfolg); background: var(--app-erfolg); color: #fff; }
.schritte__schritt--aktiv { color: var(--app-tinte); font-weight: 680; }
.schritte__schritt--aktiv .schritte__nummer { border-color: var(--app-akzent); background: var(--app-akzent); color: var(--app-auf-akzent); }
/* Schmal trägt nur der laufende Schritt seinen Namen; die anderen bleiben für Vorleseprogramme lesbar. */
@media (max-width: 39.99rem) {
  .schritte { gap: .5rem 1rem; }
  .schritte__schritt:not(.schritte__schritt--aktiv) .schritte__name { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}

.klein { font-size: var(--app-t-label); color: var(--app-tinte-3); }

.farblegende { margin-top: .5rem; padding: .6rem .75rem; display: flex; flex-direction: column; gap: .5rem; background: var(--app-flaeche-2); border-radius: var(--app-r-s); }
.farblegende__zeile { display: flex; align-items: center; gap: .5rem .75rem; flex-wrap: wrap; }
.farblegende__zeile .eingabe { width: auto; min-width: min(14rem, 100%); }
.farbe-swatch { display: inline-block; width: .8rem; height: .8rem; border-radius: 3px; flex: none; }
.farbe-0 { background: #6b8fce; } .farbe-1 { background: #2e9e57; } .farbe-2 { background: #e3a51a; } .farbe-3 { background: #c2262e; }
.farbe-4 { background: #8a6cd6; } .farbe-5 { background: #1fa3a3; } .farbe-6 { background: #d6708f; } .farbe-7 { background: #7a8a3f; }

/* Die Sätze zu einer Zeile zitieren einen Zelltext aus der Liste des Betriebs, und der kann ein einziges langes Wort sein (gemessen 181 Zeichen: die Tabelle war 1995px breit). Notbruch wie in
   `.plan-liste li`: ein Satz bricht weiter an den Leerzeichen, nur was sonst überliefe, bricht im Wort. */
.probelauf__fehler { margin: 0 0 .2rem; font-size: var(--app-t-label); color: var(--app-fehler); overflow-wrap: anywhere; }
.probelauf__warnung { margin: 0 0 .2rem; font-size: var(--app-t-label); color: var(--app-warnung); overflow-wrap: anywhere; }
.probelauf tr.probelauf__zeile--fehler { background: var(--app-fehler-flaeche); }
.probelauf tr.probelauf__zeile--warnung { background: var(--app-warnung-flaeche); }
/* Schmal übernimmt .tabelle (data-feld-Beschriftung, eine Zeile als Block); eine eigene Rasterdarstellung ließe die Beschriftungen weg. */

/* Zuordnen: Schlüsselfelder als Kontrollkästchen */
.schluesselfelder { display: flex; flex-wrap: wrap; gap: .3rem 1.25rem; margin-top: .3rem; }
.kontrollkaestchen { display: inline-flex; align-items: center; gap: .5rem; font-size: var(--app-t-text); font-weight: var(--app-w-text); }

/* Probelauf: Listen des Abgleichs gegen den Bestand */
.plan-liste { margin: .5rem 0 0; padding-left: 1.25rem; font-size: var(--app-t-text); }
.plan-liste li { padding: .2rem 0; overflow-wrap: anywhere; }

/* Einstellungen: Abschnitt eines Moduls */
.einstellungen-abschnitt { margin-top: var(--app-s-6); }
.einstellungen-abschnitt h3 { font-size: var(--app-t-h4); font-stretch: var(--app-breit); font-weight: 650; letter-spacing: -.008em; margin: 0 0 .5rem; }

/* ---------- Zweiter Faktor ---------- */
.qr-code { display: block; width: 220px; height: 220px; max-width: 100%; border: 1px solid var(--app-linie-stark); border-radius: var(--app-r-s); padding: .75rem; background: #fff; }
/* Ein Code (zwanzig Zeichen in Gruppen zu vier, vier Striche) ist rund 14,5rem breit. Ein Code ist eine Einheit, die nicht umbricht; so viele stehen nebeneinander, wie passen (bei 375 px einer je Zeile). */
.wiederherstellungscodes {
  display: flex; flex-wrap: wrap; gap: .5rem 1.5rem;
  margin: var(--app-s-4) 0 0; padding: var(--app-s-4) var(--app-s-5); background: var(--app-flaeche-2); border-radius: var(--app-r-s);
  list-style: none; font-family: var(--app-f-mono); font-size: 1rem;
}
.wiederherstellungscodes li { white-space: nowrap; }

/* ---------- Chat: Verlauf und Anhänge ---------- */
.chat-verlauf { list-style: none; margin: 0 0 var(--app-s-5); padding: 0; display: flex; flex-direction: column; gap: var(--app-s-3); max-width: 40rem; }
.chat-blase { padding: .65rem .9rem; border-radius: var(--app-r-s); background: var(--app-flaeche); border: 1px solid var(--app-linie); max-width: 32rem; }
.chat-blase--mitarbeiter { align-self: flex-end; background: var(--app-akzent-hell); border-color: transparent; }
.chat-blase__kopf { display: flex; justify-content: space-between; gap: var(--app-s-4); font-size: var(--app-t-label); color: var(--app-tinte-3); margin-bottom: .25rem; }
.chat-blase__wer { font-weight: var(--app-w-fett); color: var(--app-tinte-2); }
.chat-blase__text { margin: 0; white-space: pre-wrap; word-break: break-word; }
.chat-anhaenge { list-style: none; margin: .5rem 0 0; padding: 0; display: flex; flex-direction: column; gap: .25rem; }
.chat-anhang { display: flex; align-items: center; gap: .5rem; font-size: var(--app-t-tabelle); }

/* ---------- Import-Ablauf ---------- */
/* Ein geführter Ablauf für den Geschäftsführer: jede Seite sagt in einem Satz, was sie tut und was jetzt zu tun ist, und hat genau eine Handlung.
   Alles Weitere steht leiser darunter oder zugeklappt. Schmal ist es eine Spalte, breite Tabellen scrollen im eigenen Rahmen (.tabelle-rahmen). */
.ablauf__satz { max-width: 40rem; margin-bottom: var(--app-s-5); font-size: var(--app-t-lesen); line-height: 1.5; }
/* Steht eine Meldung über dem Satz, klebt dieser sonst an ihrem Rand. */
.fehler + .ablauf__satz, .warnung + .ablauf__satz { margin-top: var(--app-s-4); }
.ablauf__abschnitt { margin-top: var(--app-s-6); }
.ablauf__abschnitt > p, .ablauf__abschnitt > .ablauf__liste, .ablauf__abschnitt > .plan-liste, .ablauf__abschnitt > .uebersicht { max-width: 42rem; }
.ablauf__abschnitt p + p, .ablauf__abschnitt p + .ablauf__liste { margin-top: .5rem; }
.ablauf__titel { font-size: var(--app-t-h4); font-stretch: var(--app-breit); font-weight: 650; letter-spacing: -.008em; line-height: 1.3; padding-bottom: .45rem; margin-bottom: var(--app-s-3); }
.ablauf__titel .zahl { color: var(--app-tinte-3); font-weight: var(--app-w-mittel); margin-left: .35rem; }
.ablauf__unter { font-size: var(--app-t-text); font-weight: var(--app-w-fett); margin: var(--app-s-4) 0 .5rem; }

/* Blöcke, die etwas verlangen: eine Linie links in der Farbe des Ernstes, sonst nichts. Die Linie hat 3 zu 1 gegen den Grund, die Farbe des Worts. */
.ablauf__block { padding-left: var(--app-s-4); border-left: 3px solid var(--app-linie-stark); }
.ablauf__block--fehler { border-left-color: var(--app-fehler); }
.ablauf__block--hinweis { border-left-color: var(--app-warnung); }
.ablauf__block .ablauf__titel { padding-bottom: 0; margin-bottom: .5rem; }

/* Das Ergebnis des Probelaufs und der Übernahme: das Erste, was die Seite sagt. */
.ablauf__ergebnis { max-width: 42rem; padding: var(--app-s-4) var(--app-s-5); border: 1px solid var(--app-linie); border-left-width: 4px; border-radius: var(--app-r-m); background: var(--app-flaeche); }
.ablauf__ergebnis--bereit { border-left-color: var(--app-erfolg-punkt); }
/* Die Linie „offen“ trägt eine Bedeutung und braucht 3 zu 1 gegen den Grund: in --app-warnung, der Farbe des Wortes „Achtung“, hat sie auf Weiß mehr als 8 zu 1. */
.ablauf__ergebnis--offen { border-left-color: var(--app-warnung); }
.ablauf__ergebnis p + p { margin-top: .35rem; }
.ablauf__ergebnis .ablauf__liste + p { margin-top: .35rem; }
.ablauf__urteil { font-size: var(--app-t-h3); font-stretch: var(--app-breit); line-height: 1.25; }
.ablauf__urteil .ampel { gap: .6rem; font-weight: var(--app-w-titel); }
.ablauf__urteil .ampel::before { width: .9rem; height: .9rem; }
.ablauf__ergebnis--bereit .ablauf__urteil strong { color: var(--app-erfolg); }
.ablauf__zahlen { font-size: var(--app-t-tabelle); color: var(--app-tinte-3); }

/* Zwei Wege bei Fehlern in der Liste: nebeneinander, wenn Platz ist. */
.ablauf__wege { list-style: none; margin: .75rem 0 0; padding: 0; display: grid; gap: var(--app-s-4); counter-reset: weg; }
@media (min-width: 52rem) { .ablauf__wege { grid-template-columns: 1fr 1fr; } }
.ablauf__weg { counter-increment: weg; display: flex; flex-direction: column; align-items: flex-start; gap: .5rem; padding: var(--app-s-4); border: 1px solid var(--app-linie); border-radius: var(--app-r-m); background: var(--app-flaeche); }
.ablauf__weg::before { content: "Möglichkeit " counter(weg); font-size: var(--app-t-label); font-weight: var(--app-w-fett); color: var(--app-tinte-3); }

/* Die eine Handlung, dazu die leisen Wege daneben. Lange Beschriftungen brechen um. */
.ablauf__aktionen { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1rem; margin-top: var(--app-s-5); }
.ablauf__aktionen .knopf { white-space: normal; text-align: center; padding-block: .5rem; }
/* Steht die Handlung im Ergebnis, sitzt sie näher an dem Satz, der sie erklärt. */
.ablauf__ergebnis .ablauf__aktionen { margin-top: var(--app-s-4); }
.ablauf__ergebnis .ablauf__aktionen + p { margin-top: .9rem; }
@media (max-width: 39.99rem) {
  .ablauf__aktionen { flex-direction: column; align-items: stretch; }
  .ablauf__aktionen .knopf { width: 100%; }
}
.ablauf__still { display: flex; flex-wrap: wrap; gap: 0 var(--app-s-5); margin-top: .5rem; }
.ablauf__still .knopf { padding: 0; border-color: transparent; background: transparent; font-weight: var(--app-w-mittel); text-decoration: underline; text-underline-offset: 2px; }
.ablauf__still .knopf:hover { background: transparent; border-color: transparent; }
.ablauf__grund { max-width: 42rem; margin-top: var(--app-s-4); color: var(--app-tinte-2); }

/* Fehlerseiten: das Problem in einem Satz, danach der Weg hinaus. */
.ablauf__meldung { max-width: 42rem; margin-bottom: var(--app-s-5); font-size: var(--app-t-lesen); line-height: 1.5; }
.ablauf__meldung strong { display: block; margin-bottom: .2rem; }

/* Datei wählen: drei Schritte, dann was mit der Datei geschieht. */
.ablauf__schritte { list-style: none; margin: 0 0 var(--app-s-5); padding: 0; max-width: 42rem; display: flex; flex-direction: column; gap: .7rem; counter-reset: schritt; }
.ablauf__schritte li { counter-increment: schritt; position: relative; min-height: 1.75rem; padding-left: 2.5rem; }
.ablauf__schritte li::before { content: counter(schritt); position: absolute; left: 0; top: -.05rem; display: inline-flex; align-items: center; justify-content: center; width: 1.75rem; height: 1.75rem; border: 1.5px solid var(--app-feldrand); border-radius: 50%; font-size: var(--app-t-text); font-weight: var(--app-w-fett); color: var(--app-tinte-2); }
.ablauf__aufbewahrung { max-width: 42rem; margin-top: var(--app-s-7); padding-top: var(--app-s-5); border-top: 1px solid var(--app-linie); font-size: var(--app-t-tabelle); color: var(--app-tinte-2); }
.ablauf__aufbewahrung .ablauf__titel { margin-bottom: .5rem; padding-bottom: 0; font-size: var(--app-t-text); color: var(--app-tinte); }
.ablauf__aufbewahrung p + p { margin-top: .5rem; }

/* Listen und Farbmuster der Bestätigung. */
.ablauf__liste { margin: .5rem 0 0; padding-left: 1.25rem; }
.ablauf__liste li { padding: .15rem 0; }
/* Die Sätze in „Achtung“ (li.ablauf__abweichung) und auf „Das passt nicht zu Ihrer Datei“ (.ablauf__block--hinweis li) tragen Namen aus der Datei. Ein Name ohne Leerzeichen, auf 40 Zeichen gekürzt,
   bricht nie um und lief bei 320 und 375 px seitlich über. Notbruch wie in .plan-liste li: Ein Name mit Leerzeichen bricht weiter an den Leerzeichen, nur was sonst überliefe, bricht im Wort. */
.ablauf__block--hinweis li, li.ablauf__abweichung { overflow-wrap: anywhere; }
.ablauf__farben { list-style: none; max-width: 42rem; margin: 0 0 .5rem; padding: 0; display: flex; flex-direction: column; gap: .55rem; }
.ablauf__farben li { display: flex; align-items: flex-start; gap: .65rem; }
.farbmuster { flex: none; width: 1.25rem; height: 1.25rem; margin-top: .12rem; border-radius: 4px; }
.tabelle--schmal { max-width: 40rem; }

/* Alles, was nur zum Nachsehen da ist, liegt zugeklappt. */
.ablauf__mehr > summary { padding: .7rem 0; cursor: pointer; font-weight: var(--app-w-mittel); color: var(--app-akzent); }
.ablauf__mehr > summary:hover { text-decoration: underline; text-underline-offset: 2px; }
/* In `details.ablauf__mehr` nennt der Absatz „Diese Spalten liest Kontor nicht“ die Namen der Spalten, gekürzt auf 40 Zeichen. Ein Name aus breiten Zeichen ohne Leerzeichen ragte bei schmaler
   Breite über den Rand. `anywhere` bricht erst im Wort, wenn die Zeile den Namen nicht fasst, und zählt schon bei der Mindestbreite mit, wie bei `.ablauf__ergebnis p`. */
.ablauf__mehr p { overflow-wrap: anywhere; }

/* Probelauf: ausgelassene Zeilen stehen grau da, das Kästchen bleibt ein Berührungsziel. */
.probelauf tr.probelauf__zeile--ausgelassen { background: var(--app-flaeche-2); color: var(--app-tinte-2); }
@media (max-width: 59.99rem) { .probelauf .kontrollkaestchen { min-height: var(--app-h-l); } }

/* Der Block „Möglicherweise doppelt“ trägt seine Kästchen im Ergebnis-Kasten und nicht in der Tabelle: auch dort ein Berührungsziel. */
@media (max-width: 59.99rem) { .ablauf__ergebnis .kontrollkaestchen { min-height: var(--app-h-l); } }

/* Zugänge: das Team einer Assistenz steht als eigene Zeile unter dem Konto, über die Breite des Kerns und der Handlungen. */
.zeile__team { grid-column: 2 / -1; margin-top: var(--app-s-1); }
.zeile__team .formular--zeile { gap: .5rem; }
.zeile__team .eingabe--kurz { max-width: 100%; }

/* In der Liste eines Blocks („Möglicherweise doppelt“, „Möglicherweise schon vorhanden“) steht das Kästchen „Auslassen“ immer in einer eigenen Zeile unter dem Satz.
   `fit-content` hält die Klickfläche beim Kästchen und seinem Wort. */
.ablauf__ergebnis .plan-liste .kontrollkaestchen { display: flex; width: fit-content; }

/* Die Absätze im Ergebnis („Bereit zur Übernahme“, „Noch nicht bereit“) nennen Titel und Namen, die zusammenhalten (geschützte Leerzeichen, bis 30 Zeichen: „Möglicherweise schon vorhanden“).
   `anywhere` bricht erst im Wort, wenn die Zeile den Titel nicht fasst. */
.ablauf__ergebnis p { overflow-wrap: anywhere; }

/* ---------- Mehrere Ketten ---------- */
/* In der Filterleiste der Vorgänge trägt jede Kette ihren Namen vor ihren Status, sobald es mehr als eine gibt. Ein Name, kein Knopf: gleiche Höhe wie die Knöpfe, damit die Zeile ruhig bleibt.
   Im Druck fällt er über .nur-bildschirm weg, ein zweiter Druckabschnitt wäre einer zu viel (layout.test.ts: genau ein @media print). */
.filterleiste__gruppe { display: inline-flex; align-items: center; min-height: var(--app-h-s); margin-left: .5rem; font-size: var(--app-t-label); font-weight: var(--app-w-fett); color: var(--app-tinte-3); }

/* ---------- Filter ohne Knopf ---------- */
/* Mit Skript schickt sich das Formular über dem Geschäftsbuch selbst ab (leiste.js setzt .sofort-js auf <html>, bevor der Körper gemalt wird): der Knopf „Filtern“ entfällt.
   Ohne Skript steht er da, und der Filter geht wie vorher. Jede Regel für ihn hängt an der Klasse: eine ohne sie nähme ihn auch dort weg, wo nichts abschickt. */
.sofort-js .filter__knopf { display: none; }
/* Der Satz vor den Feldern des Filters sagt, dass die Liste von selbst neu lädt. Das gilt nur mit Skript: Ohne es lädt nichts von selbst neu, dort bleibt der Knopf „Filtern“,
   und der Satz wäre falsch. Darum ist er aus, bis leiste.js die Klasse .sofort-js auf <html> setzt. Er steht in einer eigenen Zeile über den Feldern (.filter ist ein Flex mit Umbruch).
   Im Druck fehlt der ganze Filter (.seite > .filter im Druckabschnitt) und der Satz mit ihm. */
.filter__hinweis { display: none; flex: 1 1 100%; margin: 0; }
.sofort-js .filter__hinweis { display: block; }

/* ---------- Viele auf einmal zuweisen ---------- */
/* Der Block über der Liste: „Alle N der Auswahl“ oben, darunter die Wahl des Ziels und der Knopf, als Auswahlleiste in der Tönung der Hausfarbe. Im Druck ist er aus: das Formular und das Etikett
   des Kästchens tragen .nur-bildschirm. Das Kästchen einer Zeile steht in der Zelle des Kunden, links neben dem Namen, in Tabelle und Karte gleich. Es steckt in einem Etikett, das die Fläche
   darum zum Ziel macht, breit 2,25rem, unter Desktopbreite 2,75rem wie jeder Knopf (Berührungsziel). */
.zuweisen { display: flex; flex-wrap: wrap; align-items: flex-end; gap: .75rem 1.5rem; margin: 0 0 var(--app-s-4); padding: var(--app-s-3) var(--app-s-4); background: var(--app-akzent-hell); border: 1px solid var(--app-linie); border-radius: var(--app-r-m); }
.zuweisen__alle { display: flex; flex-direction: column; gap: .25rem; flex: 1 1 100%; }
.zuweisen__alle .kontrollkaestchen { min-height: var(--app-h-l); font-weight: var(--app-w-fett); }
.zuweisen__ziel { display: flex; flex-wrap: wrap; align-items: flex-end; gap: .5rem .75rem; flex: 1 1 100%; }
.zuweisen__ziel .feld { flex: 1 1 14rem; min-width: 0; }
.zuweisen__frage { font-size: var(--app-t-h4); font-weight: var(--app-w-fett); overflow-wrap: anywhere; }
.zuweisen__knoepfe { display: flex; flex-wrap: wrap; gap: var(--app-s-3); }
@media (max-width: 39.99rem) { .zuweisen__ziel .knopf, .zuweisen__knoepfe .knopf { width: 100%; } }
.gb__kundenzeile { display: flex; align-items: flex-start; gap: .25rem; }
/* In der Tabelle bricht der Name nur zwischen Wörtern: `break-word` zählt nicht in die kleinste Breite der Spalte. Mit `anywhere` schrumpfte der Tabellenalgorithmus die Spalte
   Kunde unter ihr längstes Wort. `anywhere` gilt nur in der Kartenform (Container-Regel des Geschäftsbuchs, oben), wo die Karte ein Name ohne Leerzeichen sonst sprengt. */
.gb__kundenzeile > div { flex: 1 1 auto; min-width: 0; overflow-wrap: break-word; }
.gb__kaestchen { display: inline-flex; flex: none; align-items: center; justify-content: center; min-width: 2.25rem; min-height: 2.25rem; margin-left: -.5rem; cursor: pointer; }
.gb__kaestchen input { margin: 0; }
@media (max-width: 59.99rem) { .gb__kaestchen { min-width: var(--app-h-l); min-height: var(--app-h-l); } }

/* ---------- Wiederherstellungscodes drucken ---------- */
/* Mit Skript steht der Knopf „Drucken“ da und der Satz mit dem Tastenkürzel ist überflüssig; ohne Skript ist es umgekehrt (leiste.js setzt .seitenleiste-js auf <html>, für alles, was das Skript kann).
   Im Druck sind beide aus: Der Absatz mit ihnen trägt .nur-bildschirm, und der Knopf ist ein button. */
.drucken-knopf { display: none; }
.seitenleiste-js .drucken-knopf { display: inline-flex; }
.seitenleiste-js .drucken-satz { display: none; }

/* ---------- Mobil ---------- */
@media (max-width: 59.99rem) {
  .seite { padding-bottom: 7rem; }
  .tafel__kopf, .tafel__werkzeug, .tafel__fuss, .auswahlleiste { padding-inline: var(--app-s-4); }
  .tafel__koerper { padding: var(--app-s-4); }
}
/* Feldschrift 16 px bei grobem Zeiger und mobil, gegen den Zoom von iOS. */
@media (pointer: coarse), (max-width: 59.99rem) {
  :root { --app-t-feld: 1rem; }
  .eingabe, .chip span { min-height: var(--app-h-l); }
  input[type="checkbox"], input[type="radio"] { width: 1.375rem; height: 1.375rem; }
  input[type="checkbox"]:checked::after { left: 5px; top: 4px; }
}

/* ---------- Luft am Fuß bei 52 bis 60 rem ---------- */
/* Überschreibt den Innenabstand unten von .seite im Abschnitt „Seite“ (ab 52rem nur 4rem): Die feste Leiste ist unter 60rem rund 63px hoch, dazu kommt der Streifen
   unter ihr (env), am iPad im Hochformat 20px. Jetzt: Höhe der Leiste, Streifen und 1,5rem Luft. Darunter (7rem) und ab 60rem (Leiste aus) bleibt es, wie es war. */
@media (min-width: 52rem) and (max-width: 59.99rem) {
  .seite { padding-bottom: calc(var(--leiste-hoehe) + env(safe-area-inset-bottom, 0px) + 1.5rem); }
}

/* ---------- Kontrastmodus ---------- */
/* Unter forced-colors: active ersetzt der Browser Hintergrund und Schriftfarbe durch Systemfarben. Was nur über den Hintergrund markiert ist, sähe dort aus wie alles andere:
   der aktive Filterchip, die gewählte Auswahl in einer Chipgruppe, die aktuelle Seite der Seitenleiste und der Glut-Knopf. Die Breite eines Rahmens lässt der Browser stehen, also markiert ein
   dickerer Rahmen, ohne von einer Farbe abzuhängen. Das Polster schrumpft um das, was der Rahmen dazugibt: Der Chip und der Eintrag behalten ihre Größe, nichts springt.
   Zustände behalten Zeichen und Wort; der Glut-Verlauf entfällt. */
@media (forced-colors: active) {
  .kopf, .tafel, .zeilen, .team, .meldung, .fehler, .warnung, .tabelle-rahmen, .filter, .fakten, .uebersicht { border: 1px solid CanvasText; box-shadow: none; background: Canvas; }
  .knopf { border-color: ButtonText; }
  .knopf--primaer { background: ButtonFace; color: ButtonText; border-width: 2px; box-shadow: none; }
  .filterleiste a[aria-current="page"] { border-width: 3px; padding: 0 calc(.875rem - 2px); }
  .chip input:checked + span { border-width: 3px; padding: 0 calc(.9rem - 2px); }
  .seitenleiste__eintrag[aria-current="page"] { border: 3px solid CanvasText; padding-inline: calc(var(--app-s-3) - 3px); }
  .seitenleiste__eintrag[aria-current="page"]::before { background: CanvasText; }
  .tabelle tr.ist-gewaehlt { outline: 2px solid Highlight; outline-offset: -2px; }
  .ampel::before, .punkt, .fehler::before, .warnung::before { forced-color-adjust: none; background: CanvasText; }
  .plakette { border: 1px solid CanvasText; }
  input[type="checkbox"]:checked, input[type="radio"]:checked { forced-color-adjust: none; background: Highlight; border-color: Highlight; }
  .eingabe[aria-invalid='true'] { border-width: 3px; }
  /* Die untere Leiste unter 60rem: normal trägt der aktuelle Eintrag die Pille und Gewicht 680; unter erzwungenen Farben werden alle Einträge dieselbe Systemfarbe. Der aktuelle Eintrag bekommt einen
     Balken oben, im Menü „Mehr“ links; das Polster gibt her, was der Rahmen dazunimmt, die Leiste behält ihre Höhe (--leiste-hoehe), nichts springt. */
  .leiste > a[aria-current="page"], .leiste__mehr--aktiv > summary { border-top: 3px solid CanvasText; padding-top: calc(.3rem - 3px); }
  .leiste__menue a[aria-current="page"] { border-left: 4px solid CanvasText; padding-left: calc(var(--app-s-3) - 4px); }
}