/* Airless: Kennzahlen oben, Board (4 Spalten) oder Zahlungsläufe, Detail als Seitenpanel.
   Corporate Design: docs/corporate-design.md. Alle Farben, Schriften, Abstände und Radien NUR hier oben als Variablen.
   Schriften selbst gehostet (public/fonts, SIL OFL), keine externen Quellen (DSG, CSP). */
@font-face { font-family: "Montserrat"; src: url("/fonts/montserrat-latin-var.woff2") format("woff2"); font-weight: 300 700; font-style: normal; font-display: swap }
@font-face { font-family: "Assistant"; src: url("/fonts/assistant-latin-var.woff2") format("woff2"); font-weight: 400 700; font-style: normal; font-display: swap }

:root {
  /* Marke (aus dem Logo) – in beiden Modi gleich */
  --brand-orange: #E8590C; --brand-grau: #8E8E8E; --brand-anthrazit: #2B2B2B; --brand-weiss: #FFFFFF;
  --logo-orange: var(--brand-orange); --logo-grau: var(--brand-grau); --logo-schrift: var(--brand-weiss);

  /* Flächen und Text (hell) */
  --bg: #F4F4F3; --surface: #FFFFFF; --sunk: #EAEAE8; --ink: #2B2B2B; --muted: #5C5C5C; --line: #D6D6D3;
  /* Akzent = dunkleres Airless-Orange, damit weisse Schrift und Links lesbar sind */
  --accent: #C2410C; --accent-ink: #FFFFFF; --accent-soft: #FEF2EA;
  /* Status (Ampel) – bewusst weg vom Orange: Rot kühl (Karmin), Gelb Richtung Senf */
  --red: #B42346; --red-soft: #FBE7EC; --amber: #725E00; --amber-soft: #FAF1C8; --green: #2A7348; --green-soft: #E0F1E6;
  --red-ink: #FFFFFF; /* Schrift auf --red (Zähler) */
  --scrim: rgba(20,20,20,.38);
  --shadow: 0 1px 2px rgba(20,20,20,.06), 0 4px 14px rgba(20,20,20,.06);
  --shadow-drawer: -8px 0 30px rgba(0,0,0,.18);

  /* Schriften */
  --f-display: "Montserrat", "Segoe UI", system-ui, sans-serif;
  --f-body: "Assistant", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
  --fs-xs: 11px; --fs-s: 12.5px; --fs-m: 13.5px; --fs-base: 15px; --fs-l: 16px; --fs-xl: 19px; --fs-xxl: 24px;

  /* Abstände (4er-Raster) */
  --sp-0: 2px; --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 20px; --sp-6: 24px; --sp-7: 32px;

  /* Radien */
  --r-s: 6px; --r-m: 8px; --r-l: 12px; --r-xl: 14px; --r-rund: 999px;

  /* Logo-Höhe */
  --logo-h: 30px; --logo-h-login: 52px;

  /* Rahmen: Seitenleiste, untere Leiste, Kacheln */
  --sl-breite: 248px; --sl-breite-zu: 68px; --leiste-h: 60px; --kachel-min: 220px; --fs-h1: 24px; --fs-hero: 40px; --ico: 22px;

  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #161616; --surface: #202020; --sunk: #111111; --ink: #EDEDED; --muted: #A6A6A6; --line: #343434;
    --accent: #FB8A4C; --accent-ink: #1E0F06; --accent-soft: #3B2214;
    --red: #FF7F9A; --red-soft: #3D1824; --amber: #E6CF5A; --amber-soft: #332A0B; --green: #6FCB95; --green-soft: #16301F;
    --red-ink: #2A0A12;
    --scrim: rgba(0,0,0,.55);
    --shadow: 0 1px 2px rgba(0,0,0,.3), 0 4px 14px rgba(0,0,0,.25);
    --shadow-drawer: -8px 0 30px rgba(0,0,0,.5);
    color-scheme: dark;
  }
}
* { box-sizing: border-box }
html, body { margin: 0 }
body { background: var(--bg); color: var(--ink); font-family: var(--f-body); font-size: var(--fs-base); line-height: 1.45 }
[hidden] { display: none !important }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap }
.num { font-variant-numeric: tabular-nums }
.muted { color: var(--muted) } .small { font-size: var(--fs-s); margin: calc(-1 * var(--sp-2)) 0 var(--sp-3) }
button, select, input, textarea { font: inherit; color: inherit }
button { cursor: pointer }
a { color: var(--accent) }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px }
h2, h3 { font-family: var(--f-display) }

/* Logo (inline-SVG in index.html, Farben hier) */
.logo { display: block; height: var(--logo-h); width: auto; aspect-ratio: 4 / 1; flex: none }
.logo .lg-orange { fill: var(--logo-orange) }
.logo .lg-grau { fill: var(--logo-grau) }
.logo text { fill: var(--logo-schrift); font-family: var(--f-display) }
.logo .lg-name { font-weight: 700 }
.logo .lg-zusatz { font-weight: 300 }

.login { min-height: 90vh; display: grid; place-items: center; padding: env(safe-area-inset-top,0px) var(--sp-4) 0 }
.login-box { background: var(--surface); border: 1px solid var(--line); border-top: 4px solid var(--brand-orange); border-radius: var(--r-xl); padding: var(--sp-7); width: min(380px,100%); display: flex; flex-direction: column; gap: var(--sp-3) }
.login-box .logo { height: var(--logo-h-login); margin-bottom: var(--sp-2) }
.login-box p { margin: calc(-1 * var(--sp-2)) 0 var(--sp-1) }
.fehler { color: var(--red); font-weight: 600; margin: 0 }

/* ---------- Rahmen: Seitenleiste (Computer), Kopfzeile, untere Leiste (Handy) ---------- */
.sprite { position: absolute; width: 0; height: 0; overflow: hidden }
.ico { width: var(--ico); height: var(--ico); flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round }
.shell { display: grid; grid-template-columns: var(--sl-breite) minmax(0, 1fr); min-height: 100vh }
.shell.eingeklappt { grid-template-columns: var(--sl-breite-zu) minmax(0, 1fr) }
.haupt { min-width: 0; padding: env(safe-area-inset-top,0px) max(var(--sp-5),env(safe-area-inset-right,0px)) var(--sp-7) var(--sp-5) }

.seitenleiste { position: sticky; top: 0; height: 100vh; overflow-y: auto; background: var(--surface); border-right: 1px solid var(--line);
  padding: max(var(--sp-3),env(safe-area-inset-top,0px)) var(--sp-3) var(--sp-4) max(var(--sp-3),env(safe-area-inset-left,0px)); display: flex; flex-direction: column; gap: var(--sp-4) }
.sl-kopf { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2); min-height: 40px }
.sl-logo { display: block; border-radius: var(--r-s) }
.sl-toggle .ico { transition: transform .15s }
.eingeklappt .seitenleiste :is(.sl-logo, .m-text, .m-pfeil, .m-punkte, .m-bald, .m-zahl) { display: none }
.eingeklappt .sl-kopf { justify-content: center }
.eingeklappt .sl-toggle .ico { transform: rotate(180deg) }
.eingeklappt .seitenleiste .m-bereich { justify-content: center }
.menue { display: flex; flex-direction: column; gap: var(--sp-0) }
.m-bereich { display: flex; align-items: center; gap: var(--sp-3); width: 100%; padding: var(--sp-2); border: 0; border-radius: var(--r-m); background: transparent;
  color: var(--ink); font-weight: 700; text-decoration: none; text-align: left }
.m-pfeil { margin-left: auto; color: var(--muted) }
.m-pfeil::before { content: "▸" }
[aria-expanded="true"] > .m-pfeil::before { content: "▾" }
.m-punkte { display: flex; flex-direction: column; gap: var(--sp-0); padding: var(--sp-0) 0 var(--sp-2) calc(var(--ico) + var(--sp-3)) }
.m-punkte .m-link { display: flex; align-items: center; gap: var(--sp-2); padding: var(--sp-1) var(--sp-2); border-radius: var(--r-m); text-decoration: none; color: var(--muted); font-weight: 600 }
.m-text { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
.m-bereich:hover, .m-punkte .m-link:hover { background: var(--sunk) }
.m-link[aria-current="page"] { background: var(--accent-soft); color: var(--accent); box-shadow: inset 3px 0 0 var(--brand-orange) }
.m-bald { margin-left: auto; font-size: var(--fs-xs); font-weight: 600; color: var(--muted); border: 1px solid var(--line); border-radius: var(--r-rund); padding: 0 var(--sp-2) }
.m-zahl { margin-left: auto; min-width: 20px; text-align: center; font-size: var(--fs-xs); font-weight: 700; background: var(--red); color: var(--red-ink); border-radius: var(--r-rund); padding: 0 var(--sp-1) }
.m-zahl:empty { display: none }

header.top { position: sticky; top: 0; z-index: 10; display: flex; align-items: center; gap: var(--sp-2) var(--sp-3); padding-block: var(--sp-3); background: var(--bg) }
.spacer { flex: 1 }
.nur-handy { display: none }
.icon-btn { position: relative; display: grid; place-items: center; width: 40px; height: 40px; border: 1px solid var(--line); border-radius: var(--r-m); background: var(--surface); color: var(--ink); flex: none }
.suche-knopf { display: flex; align-items: center; gap: var(--sp-2); flex: 0 1 380px; min-width: 0; height: 40px; padding: 0 var(--sp-3);
  border: 1px solid var(--line); border-radius: var(--r-m); background: var(--surface); color: var(--muted); font-weight: 600 }
kbd { font-family: var(--f-body); font-size: var(--fs-xs); font-weight: 700; color: var(--muted); border: 1px solid var(--line); border-radius: var(--r-s); padding: 0 var(--sp-1) }
.suche-knopf kbd { margin-left: auto }
.badge { position: absolute; top: calc(-1 * var(--sp-1)); right: calc(-1 * var(--sp-1)); min-width: 18px; height: 18px; display: grid; place-items: center;
  padding: 0 var(--sp-1); border-radius: var(--r-rund); background: var(--red); color: var(--red-ink); font-size: var(--fs-xs); font-weight: 700; line-height: 1 }
.avatar { width: 40px; height: 40px; border-radius: var(--r-rund); border: 1px solid var(--line); background: var(--sunk); color: var(--ink); font-weight: 700; flex: none }

.pop-wrap { position: relative }
.popup { position: absolute; right: 0; top: calc(100% + var(--sp-1)); z-index: 25; min-width: 230px; display: flex; flex-direction: column;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-l); box-shadow: var(--shadow); padding: var(--sp-1) }
.popup.breit { width: min(360px, calc(100vw - 2 * var(--sp-4))) }
.pop-item { display: flex; align-items: center; gap: var(--sp-2); width: 100%; padding: var(--sp-2); border: 0; border-radius: var(--r-m); background: transparent;
  color: var(--ink); font-weight: 600; text-align: left; text-decoration: none }
.pop-item:hover:not(:disabled) { background: var(--sunk) }
.pop-item:disabled { color: var(--muted); cursor: default }
.pop-item .m-bald { margin-left: auto }
.pi-text { display: flex; flex-direction: column; min-width: 0 }
.pi-text b { overflow-wrap: anywhere }
.pi-text span { font-weight: 400; font-size: var(--fs-s) }
.pop-titel { margin: var(--sp-2) var(--sp-2) var(--sp-1); font-size: var(--fs-xs); font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--muted) }
.pop-titel span { text-transform: none; letter-spacing: 0; font-weight: 400 }
.pop-info { margin: var(--sp-1) var(--sp-2) var(--sp-2); color: var(--muted); font-size: var(--fs-m) }
.pop-liste { list-style: none; margin: 0; padding: 0 }
.pop-mehr { padding: var(--sp-1) var(--sp-2) var(--sp-2); font-size: var(--fs-m); font-weight: 600 }

.seitenkopf { margin: var(--sp-1) 0 var(--sp-4) }
.pfad { margin: 0; font-size: var(--fs-xs); font-weight: 700; text-transform: uppercase; letter-spacing: .08em }
.pfad:empty { display: none }
h1 { margin: 0; font-family: var(--f-display); font-size: var(--fs-h1); font-weight: 700; line-height: 1.2 }

.leiste { display: none }
.scrim#mehr-scrim { z-index: 21 }
.blatt { position: fixed; left: 0; right: 0; bottom: 0; z-index: 22; max-height: 82vh; overflow-y: auto; background: var(--surface); border-radius: var(--r-xl) var(--r-xl) 0 0;
  box-shadow: var(--shadow-drawer); padding: var(--sp-4) max(var(--sp-4),env(safe-area-inset-right,0px)) calc(var(--sp-4) + env(safe-area-inset-bottom,0px)) max(var(--sp-4),env(safe-area-inset-left,0px)) }
.blatt-kopf { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--sp-2) }

/* ---------- Ampel: überall gleich (rot/gelb/grün aus den Status-Variablen) ---------- */
.ampel { display: inline-block; width: 10px; height: 10px; border-radius: var(--r-rund); flex: none; background: var(--line) }
.ampel.rot { background: var(--red) } .ampel.gelb { background: var(--amber) } .ampel.gruen { background: var(--green) }
[data-ampel="rot"] { box-shadow: inset 0 3px 0 var(--red) } [data-ampel="gelb"] { box-shadow: inset 0 3px 0 var(--amber) } [data-ampel="gruen"] { box-shadow: inset 0 3px 0 var(--green) }

/* ---------- Cockpit, Listen, "kommt bald" ---------- */
.kacheln { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, var(--kachel-min)), 1fr)); gap: var(--sp-3) }
.kachel { display: flex; flex-direction: column; gap: var(--sp-1); min-width: 0; padding: var(--sp-4); background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-l); color: var(--ink); text-decoration: none }
.kachel:hover { border-color: var(--muted) }
.k-titel { display: flex; align-items: center; gap: var(--sp-2); font-size: var(--fs-xs); font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--muted) }
.k-wert { font-family: var(--f-display); font-size: var(--fs-xxl); font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis }
.k-sub { color: var(--muted); font-size: var(--fs-m) }
.kachel.bald { background: transparent; border-style: dashed }
.haupt-kpi { display: flex; flex-direction: column; gap: var(--sp-1); margin-bottom: var(--sp-3); padding: var(--sp-5) var(--sp-6);
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-l); color: var(--ink); text-decoration: none }
.haupt-kpi:hover { border-color: var(--muted) }
.hk-zeile { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--sp-1) var(--sp-4) }
.hk-wert { font-family: var(--f-display); font-size: var(--fs-hero); font-weight: 700; line-height: 1.15 }
.hk-anzahl { font-size: var(--fs-l); font-weight: 600; color: var(--muted) }
.hk-details { display: flex; flex-wrap: wrap; gap: var(--sp-1) var(--sp-2); margin-top: var(--sp-2) }
.chip.rot { background: var(--red-soft); color: var(--red) } .chip.gelb { background: var(--amber-soft); color: var(--amber) } .chip.gruen { background: var(--green-soft); color: var(--green) }
.k-bald { font-weight: 700; color: var(--muted) }

.spalten { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: var(--sp-3) }
.liste { display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-l); overflow: hidden; margin-bottom: var(--sp-4) }
.liste:empty { display: none }
.zeile { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2) var(--sp-3); padding: var(--sp-3) var(--sp-4); border-bottom: 1px solid var(--line) }
.zeile:last-child { border-bottom: 0 }
.z-haupt { flex: 1 1 220px; min-width: 0; overflow-wrap: anywhere }
.z-haupt a { font-weight: 700 }
.z-info { display: block; font-size: var(--fs-m) }
.z-datum { display: flex; flex-direction: column; min-width: 120px; font-size: var(--fs-m) }
.z-betrag { margin-left: auto }
.zeile.zahlung { display: grid; grid-template-columns: 10px minmax(0, 1fr) auto auto }
h2.gruppe { font-size: var(--fs-l); margin: var(--sp-4) 0 var(--sp-2) }

.bald { max-width: 640px; padding: var(--sp-7) var(--sp-6); background: var(--surface); border: 1.5px dashed var(--line); border-radius: var(--r-l) }
.bald-marke { display: inline-block; margin: 0 0 var(--sp-3); padding: var(--sp-0) var(--sp-3); border-radius: var(--r-rund); background: var(--accent-soft); color: var(--accent); font-size: var(--fs-s); font-weight: 700 }
.bald-text { margin: 0 0 var(--sp-3); font-size: var(--fs-l) }

/* ---------- Bilanz und Erfolgsrechnung ---------- */
.ab-kopf { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--sp-2); margin-bottom: var(--sp-3) }
.jahre { display: flex; gap: var(--sp-1); background: var(--sunk); padding: var(--sp-1); border-radius: var(--r-l) }
.jahr { border: 0; background: transparent; padding: var(--sp-1) var(--sp-3); border-radius: var(--r-m); color: var(--muted); font-weight: 700 }
.jahr[aria-selected="true"] { background: var(--surface); color: var(--ink); box-shadow: var(--shadow), inset 0 -2px 0 var(--brand-orange) }
.ab-kz { margin-bottom: var(--sp-4) }
.ab-kz .k-wert { font-size: min(var(--fs-xl), var(--fs-xxl)) }
.ab-kopf + .warn { margin-bottom: var(--sp-3) }
.ab-tabelle { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-l); overflow-x: auto; margin-bottom: var(--sp-2) }
table.abschluss { min-width: 0 }
table.abschluss td:first-child { overflow-wrap: anywhere }
table.abschluss th, table.abschluss td { padding: var(--sp-1) var(--sp-3); border-bottom: 0 }
table.abschluss thead th { padding-block: var(--sp-2); border-bottom: 1px solid var(--line) }
table.abschluss td.r { white-space: nowrap; width: 1%; padding-left: var(--sp-2) }
table.abschluss .e1 { padding-left: var(--sp-5) } table.abschluss .e2 { padding-left: var(--sp-6) } table.abschluss .e3 { padding-left: var(--sp-7) }
.ab-titel td { padding-top: var(--sp-3); font-weight: 700 }
.ab-titel.t0 td { font-family: var(--f-display); font-size: var(--fs-l); padding-top: var(--sp-4) }
.ab-nr { display: inline-block; min-width: 3.2em; color: var(--muted); font-size: var(--fs-s) }
.ab-summe td { font-weight: 700; border-top: 1px solid var(--line) }
.ab-summe.s0 td { font-family: var(--f-display); border-top: 2px solid var(--ink) }
.ab-ergebnis td { font-family: var(--f-display); font-weight: 700; background: var(--accent-soft); padding-block: var(--sp-2) }
.ab-ergebnis td:first-child { box-shadow: inset 3px 0 0 var(--brand-orange) }

/* ---------- Personal und Unternehmen ---------- */
details.ma { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-l); margin-bottom: var(--sp-2) }
details.ma[open] { border-color: var(--muted) }
details.ma summary { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--sp-2) var(--sp-4); padding: var(--sp-3) var(--sp-4); cursor: pointer; list-style: none }
details.ma summary::-webkit-details-marker { display: none }
details.ma summary::after { content: "▸"; color: var(--muted) }
details.ma[open] summary::after { content: "▾" }
.ma-name { display: flex; flex-direction: column; min-width: 0; flex: 1 1 220px }
.ma-name .muted { font-size: var(--fs-m) }
.ma-rechts { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); font-weight: 700 }
.ma-inhalt { padding: 0 var(--sp-4) var(--sp-4); display: flex; flex-direction: column; gap: var(--sp-3) }
.ma-inhalt .warn ul, #firma-daten .warn ul { margin: var(--sp-1) 0 0; padding-left: var(--sp-5); font-weight: 400 }
.ma-gruppen { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: var(--sp-3) }
.ma-gruppen section { min-width: 0 }
.ma-gruppen h3 { margin: 0 0 var(--sp-2); font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: .08em; color: var(--muted) }
.ma-gruppen dl { display: grid; grid-template-columns: minmax(0, 11em) minmax(0, 1fr); gap: var(--sp-1) var(--sp-3); margin: 0; font-size: var(--fs-m) }
.ma-gruppen dt { color: var(--muted) }
.ma-gruppen dd { margin: 0; overflow-wrap: anywhere }
.karte { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-l); padding: var(--sp-4) }
#firma-daten > .warn { margin-bottom: var(--sp-3) }
.zeile.vers { align-items: flex-start }
.vers-saetze { display: flex; gap: var(--sp-4); margin-left: auto }
.vers-saetze > span { display: flex; flex-direction: column; align-items: flex-end }

/* ---------- Suche (Ctrl+K) ---------- */
dialog.suche { width: min(640px, calc(100% - 2 * var(--sp-4))); max-height: 76vh; margin: 10vh auto auto; padding: 0; display: none; flex-direction: column;
  background: var(--surface); color: var(--ink); border: 1px solid var(--line); border-radius: var(--r-l); box-shadow: var(--shadow-drawer) }
dialog.suche[open] { display: flex }
dialog.suche::backdrop { background: var(--scrim) }
.suche-form { display: flex; align-items: center; gap: var(--sp-2); padding: var(--sp-3) var(--sp-4); border-bottom: 1px solid var(--line); color: var(--muted) }
.suche-form input { flex: 1; min-width: 0; border: 0; background: transparent; color: var(--ink); font-size: var(--fs-l); outline: none }
.suche-form:focus-within { box-shadow: inset 0 -2px 0 var(--accent) }
.treffer { list-style: none; margin: 0; padding: var(--sp-1); overflow-y: auto }
.treffer li { display: flex; flex-direction: column; padding: var(--sp-2) var(--sp-3); border-radius: var(--r-m); cursor: pointer; overflow-wrap: anywhere }
.treffer li span { font-size: var(--fs-s) }
.treffer li[aria-selected="true"] { background: var(--accent-soft) }
.treffer li.leer { color: var(--muted); cursor: default }
.suche-fuss { padding: var(--sp-2) var(--sp-4); border-top: 1px solid var(--line) }

@media (max-width: 760px) {
  .shell, .shell.eingeklappt { grid-template-columns: minmax(0, 1fr) }
  .seitenleiste, .nur-gross { display: none }
  .nur-handy { display: block }
  .haupt { padding-inline: max(var(--sp-4),env(safe-area-inset-left,0px)) max(var(--sp-4),env(safe-area-inset-right,0px)) }
  .shell.mit-leiste .haupt { padding-bottom: calc(var(--leiste-h) + var(--sp-5) + env(safe-area-inset-bottom,0px)) }
  .suche-knopf { flex: none; width: 40px; justify-content: center; padding: 0 }
  .leiste { position: fixed; left: 0; right: 0; bottom: 0; z-index: 15; display: flex; min-height: var(--leiste-h); background: var(--surface); border-top: 1px solid var(--line);
    padding: 0 env(safe-area-inset-right,0px) env(safe-area-inset-bottom,0px) env(safe-area-inset-left,0px) }
  .l-punkt { position: relative; flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--sp-0);
    padding: var(--sp-1); border: 0; background: transparent; color: var(--muted); font-size: var(--fs-xs); font-weight: 700; text-decoration: none; text-align: center }
  .l-punkt > span:not(.badge) { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
  .l-punkt[aria-current="page"] { color: var(--accent); box-shadow: inset 0 2px 0 var(--brand-orange) }
  .l-punkt .badge { top: var(--sp-1); right: calc(50% - 22px) }
  .zeile.zahlung { grid-template-columns: 10px minmax(0, 1fr) auto }
  .zeile.zahlung .z-haupt { grid-column: 2 / 4 }
  .zeile.zahlung .z-betrag { grid-column: 2; margin-left: 0 }
}
.btn { border: 1px solid var(--line); background: var(--surface); border-radius: var(--r-m); padding: var(--sp-2) var(--sp-3); font-weight: 600; text-decoration: none; color: var(--ink); display: inline-block }
.btn:hover { border-color: var(--muted) }
.btn.primary { background: var(--accent); color: var(--accent-ink); border-color: var(--accent) }
.btn.ghost { background: transparent; border-color: transparent; color: var(--muted) }
.btn.small { padding: var(--sp-1) var(--sp-3); font-size: var(--fs-m) }
.btn.danger { color: var(--red) }
.btn:disabled { opacity: .5; cursor: not-allowed }

.kpis { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: var(--sp-3); margin-bottom: var(--sp-4) }
.kpi { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-l); padding: var(--sp-3) var(--sp-4); min-width: 0 }
.kpi .lbl { font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: .08em; color: var(--muted); font-weight: 700 }
.kpi .val { font-family: var(--f-display); font-weight: 700; font-size: var(--fs-xxl); margin-top: var(--sp-1); white-space: nowrap; overflow: hidden; text-overflow: ellipsis }
.kpi .sub { color: var(--muted); font-size: var(--fs-m) }
.kpi.alarm { border-color: var(--red); background: var(--red-soft) }
.kpi.alarm .val { color: var(--red) }
@media (max-width: 820px) { .kpis { grid-template-columns: repeat(2,minmax(0,1fr)) } }

.drop { border: 1.5px dashed var(--line); border-radius: var(--r-l); padding: var(--sp-3) var(--sp-4); display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2) var(--sp-4); margin-bottom: var(--sp-4); background: var(--surface) }
.drop.over { border-color: var(--accent); background: var(--accent-soft) }
.drop p { margin: 0; color: var(--muted); flex: 1; min-width: 200px }
.jobs { display: flex; flex-direction: column; gap: var(--sp-1); margin: calc(-1 * var(--sp-2)) 0 var(--sp-4) }
.jobs:empty { display: none }
.job { font-size: var(--fs-m); color: var(--muted); display: flex; gap: var(--sp-2); align-items: center }
.job.err { color: var(--red) }
.spin { width: 12px; height: 12px; border: 2px solid var(--line); border-top-color: var(--accent); border-radius: 50%; animation: sp .8s linear infinite; flex: none }
@keyframes sp { to { transform: rotate(360deg) } }
@media (prefers-reduced-motion: reduce) { .spin { animation: none } }

.board-scroll { overflow-x: auto; padding-bottom: var(--sp-1) }
.board { display: grid; grid-template-columns: repeat(4,minmax(240px,1fr)); gap: var(--sp-3); min-width: min(100%,1000px) }
.col { background: var(--sunk); border-radius: var(--r-l); padding: var(--sp-2); min-height: 220px; display: flex; flex-direction: column; gap: var(--sp-2); min-width: 0 }
.col .list { display: flex; flex-direction: column; gap: var(--sp-2) }
.col.over { outline: 2px dashed var(--accent); outline-offset: -2px }
.col h3 { margin: var(--sp-0) var(--sp-1) var(--sp-1); font-size: var(--fs-xs); font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); display: flex; justify-content: space-between }
.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-m); padding: var(--sp-2) var(--sp-3) var(--sp-2) var(--sp-4); cursor: pointer; text-align: left; width: 100%; display: block }
.card:hover { border-color: var(--muted) }
.card[data-prio="rot"] { box-shadow: inset 4px 0 0 var(--red) }
.card[data-prio="gelb"] { box-shadow: inset 4px 0 0 var(--amber) }
.card .t { font-weight: 700; margin-bottom: var(--sp-0); overflow-wrap: anywhere }
.card .s { color: var(--muted); font-size: var(--fs-m); overflow-wrap: anywhere }
.card .meta { display: flex; flex-wrap: wrap; gap: var(--sp-1); margin-top: var(--sp-2); align-items: center }
.chip { font-size: var(--fs-s); font-weight: 600; padding: var(--sp-0) var(--sp-2); border-radius: var(--r-rund); background: var(--sunk); color: var(--muted); white-space: nowrap }
.chip.rechnung { background: var(--accent-soft); color: var(--accent) }
.chip.mahnung, .chip.betreibung, .chip.fehler { background: var(--red-soft); color: var(--red) }
.chip.behoerde { background: var(--amber-soft); color: var(--amber) }
.chip.ok { background: var(--green-soft); color: var(--green) }
.amt { margin-left: auto; font-weight: 700 }
.empty { color: var(--muted); font-size: var(--fs-m); padding: var(--sp-2) var(--sp-1) }

.runs { display: flex; flex-direction: column; gap: var(--sp-4) }
.run { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-l); overflow: hidden }
.run header { display: flex; flex-wrap: wrap; gap: var(--sp-1) var(--sp-4); align-items: baseline; padding: var(--sp-3) var(--sp-4); border-bottom: 1px solid var(--line) }
.run header h3 { margin: 0; font-size: var(--fs-l); font-weight: 700 }
.run header .sum { margin-left: auto; font-weight: 700 }
.run.sofort header { background: var(--red-soft) }
.run.sofort header h3 { color: var(--red) }
.tbl-wrap { overflow-x: auto }
table { width: 100%; border-collapse: collapse; min-width: 680px }
th, td { padding: var(--sp-2) var(--sp-4); text-align: left; border-bottom: 1px solid var(--line); vertical-align: middle }
th { font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: .07em; color: var(--muted); font-weight: 700 }
tr:last-child td { border-bottom: 0 }
td.r, th.r { text-align: right }
.who { font-size: var(--fs-s); color: var(--green); font-weight: 700 }

.scrim { position: fixed; inset: 0; background: var(--scrim); z-index: 20 }
aside.drawer { position: fixed; top: 0; right: 0; bottom: 0; width: min(480px,100%); background: var(--surface); z-index: 21; box-shadow: var(--shadow-drawer);
  display: flex; flex-direction: column; padding: env(safe-area-inset-top,0px) env(safe-area-inset-right,0px) env(safe-area-inset-bottom,0px) 0 }
.dr-head { display: flex; align-items: center; gap: var(--sp-2); padding: var(--sp-3) var(--sp-4); border-bottom: 1px solid var(--line); border-top: 3px solid var(--brand-orange) }
.dr-head h2 { margin: 0; font-size: var(--fs-xl); font-weight: 700; flex: 1; min-width: 0; overflow-wrap: anywhere }
.dr-body { overflow: auto; padding: var(--sp-4); display: flex; flex-direction: column; gap: var(--sp-3); flex: 1 }
.summary { background: var(--sunk); border-radius: var(--r-m); padding: var(--sp-2) var(--sp-3); font-size: var(--fs-m) }
.warn { background: var(--red-soft); color: var(--red); border-radius: var(--r-m); padding: var(--sp-2) var(--sp-3); font-size: var(--fs-m); font-weight: 600 }
.calc { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-2) }
.calc div { background: var(--accent-soft); border-radius: var(--r-m); padding: var(--sp-2) var(--sp-3) }
.calc .lbl { font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: .07em; color: var(--accent); font-weight: 700 }
.calc .v { font-family: var(--f-display); font-weight: 700; font-size: var(--fs-l) }
.fields { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-2) var(--sp-3) }
.fields .full { grid-column: 1/-1 }
label.f { display: flex; flex-direction: column; gap: var(--sp-1); font-size: var(--fs-s); color: var(--muted); font-weight: 600; min-width: 0 }
label.f input, label.f select, label.f textarea { border: 1px solid var(--line); background: var(--bg); border-radius: var(--r-m); padding: var(--sp-2) var(--sp-3); font-size: var(--fs-base); font-weight: 400; color: var(--ink); min-width: 0; width: 100% }
label.f textarea { min-height: 70px; resize: vertical }
label.f .vorschlag { border-color: var(--accent); background: var(--accent-soft); box-shadow: inset 3px 0 0 var(--brand-orange) }
.smart-info { border-left: 3px solid var(--brand-orange) }
.check { display: flex; gap: var(--sp-2); align-items: center; font-size: var(--fs-base) }
.dr-foot { display: flex; flex-wrap: wrap; gap: var(--sp-2); padding: var(--sp-3) var(--sp-4); border-top: 1px solid var(--line) }
.confirm { display: flex; gap: var(--sp-2); align-items: center; flex-wrap: wrap; font-weight: 600; font-size: var(--fs-m) }
.toast { position: fixed; left: 50%; transform: translateX(-50%); bottom: calc(var(--sp-4) + env(safe-area-inset-bottom,0px)); background: var(--ink); color: var(--bg); padding: var(--sp-2) var(--sp-4); border-radius: var(--r-m); font-weight: 600; z-index: 30; max-width: calc(100% - var(--sp-7)) }
@media (max-width: 520px) {
  :root { --logo-h: 26px; --fs-xxl: 16px; --fs-h1: 20px; --fs-hero: 28px; --kachel-min: 150px }
  .kpi, .kachel { padding: var(--sp-3) }
  .haupt-kpi { padding: var(--sp-4) }
  table.abschluss .vj { display: none } /* Vorjahr auf dem Handy nur in den Kennzahlen */
  table.abschluss .e1 { padding-left: var(--sp-4) } table.abschluss .e2, table.abschluss .e3 { padding-left: var(--sp-5) }
  .fields, .calc { grid-template-columns: 1fr }
}

.pad { padding: var(--sp-3) var(--sp-4); margin: 0 }
.klein { font-size: var(--fs-s); margin: 0 }