/* Die Schrift kommt mit dem Stylesheet (P-A5, 01.10.2026): Vierzehn Seiten haben einen eigenen Kopf
   (Anmeldung, Passwort, Rechtstexte, Druckansichten, Sperrseite) und banden nur diese Datei ein - dort
   stand Segoe UI statt Hanken Grotesk. Selbst gehostet, kein fremder Rechner. */
@import url("../../fonts/hanken-grotesk/hanken-grotesk.css");
:root{
  --brand:#0D1726; --brand-d:#050B13;
  --brand-platinum:#B9C4D2; --brand-platinum-light:#E5EAF0;
  --bg:#F5F7FA; --card:#ffffff;
  --ink:#0D1726; --muted:#6D7888; --faint:#98A3B2; --line:#E1E6EC;
  --ring:color-mix(in srgb, var(--brand) 18%, white);
  --gold:#bf9b54; --gold-d:#9c7d3e;
  --ok:#3F7A56; --warn:#8A5A1B; --new:#52525B; --danger:#d2453d;
  --sidebar:#ffffff; --sidebar-tx:#52525B;
  --radius:8px;
  --shadow:0 1px 2px rgba(16,24,40,.04);
  --shadow-lg:0 18px 44px rgba(16,24,40,.14);
  --font:'Inter',-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --serif:'Inter',-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{font-family:var(--font);background:var(--bg);color:var(--ink);line-height:1.5;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
a{color:inherit;text-decoration:none}
h1,h2,h3{font-family:var(--font);font-weight:600;margin:0 0 .2em;line-height:1.25;letter-spacing:-.02em}
.num,td.num,th.num{font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1}
small{color:var(--muted)}

/* ---------- Sidebar (hell) ---------- */
.navtoggle{display:none}
.sidebar{position:fixed;inset:0 auto 0 0;width:260px;background:var(--sidebar);color:var(--sidebar-tx);border-right:1px solid var(--line);display:flex;flex-direction:column;padding:18px 14px;z-index:40}
.brand{display:flex;align-items:center;gap:11px;padding:6px 8px 16px;margin-bottom:6px;border-bottom:1px solid var(--line)}
.brand-mark{width:34px;height:34px;border-radius:7px;display:grid;place-items:center;background:var(--brand);color:#fff;font-size:var(--fs-sm);font-weight:600;overflow:hidden;flex:0 0 34px}
.brand-mark.has-logo{width:48px;height:48px;flex-basis:48px;border-radius:0;background:transparent;overflow:visible}
.brand-mark.has-logo img{display:block;width:100%;height:100%;object-fit:contain;border-radius:0}
.brand-mark.is-platform{width:42px;height:42px;flex-basis:42px}
.brand-mark.is-platform img{transform:scale(1.08)}
.brand-text{display:flex;flex-direction:column;line-height:1.25;min-width:0}
.brand-name{font-family:var(--font);font-size:var(--fs-s);font-weight:600;color:var(--ink);letter-spacing:-.02em;line-height:1.2;white-space:normal;overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3}
.brand-sub{font-size:var(--fs-xs);letter-spacing:0;color:var(--faint);font-weight:400;margin-top:1px}
.brand-product{font-size:var(--fs-xs);letter-spacing:.025em;color:var(--faint);font-weight:500;margin-top:2px}
.nav{display:flex;flex-direction:column;gap:3px;margin-top:10px;flex:1 1 auto;overflow-y:auto;min-height:0;scrollbar-width:thin;scrollbar-color:rgba(0,0,0,.18) transparent}
.nav::-webkit-scrollbar{width:6px}
.nav::-webkit-scrollbar-thumb{background:rgba(0,0,0,.14);border-radius:3px}
.nav::-webkit-scrollbar-track{background:transparent}
.nav-item{display:flex;align-items:center;gap:12px;padding:10.5px 12px;border-radius:8px;color:var(--sidebar-tx);font-size:var(--fs-sm);font-weight:500;letter-spacing:-.01em;transition:.14s}
.nav-item svg{width:21px;height:21px;flex:0 0 21px;color:currentColor}
.nav-item:hover{background:#F4F4F5;color:var(--ink)}
.nav-item.is-active{background:color-mix(in srgb,var(--brand) 8%,white);color:var(--brand);font-weight:500}
.nav-item.is-active svg{color:var(--brand)}
.sidebar-foot{margin-top:auto;padding:12px 6px 2px;display:flex;align-items:center;gap:10px}
.role-pill{display:inline-block;font-size:var(--fs-xs);letter-spacing:0;text-transform:none;color:var(--muted);background:#F4F4F5;border:1px solid var(--line);border-radius:6px;padding:4px 11px;font-weight:600}

/* ---------- Shell / Topbar ---------- */
.shell{margin-left:260px;min-height:100vh;display:flex;flex-direction:column}
.topbar{position:sticky;top:0;z-index:30;background:rgba(255,255,255,.85);backdrop-filter:saturate(1.4) blur(8px);border-bottom:1px solid var(--line);display:flex;align-items:stretch;gap:10px;padding:0 24px;min-height:60px}
.topbar-title{font-family:var(--font);font-weight:600;font-size:var(--fs-sm);letter-spacing:-.02em}
.topbar-user{margin-left:auto;align-self:center;display:flex;align-items:center;gap:11px}
.topbar .burger{align-self:center}
.avatar{width:34px;height:34px;border-radius:8px;background:color-mix(in srgb,var(--brand) 12%,white);color:var(--brand);display:grid;place-items:center;font-weight:600;font-size:var(--fs-s)}
.who{display:flex;flex-direction:column;line-height:1.15}
.who strong{font-size:var(--fs-s);font-weight:500;letter-spacing:-.01em}
.who small{font-size:var(--fs-xs);color:var(--faint)}
.logout{display:grid;place-items:center;width:34px;height:34px;border-radius:7px;color:var(--muted);border:1px solid var(--line);background:#fff}
.logout svg{width:18px;height:18px}
.logout:hover{color:var(--danger);border-color:color-mix(in srgb,var(--danger) 40%,var(--line))}
.burger{display:none;flex-direction:column;gap:4px;cursor:pointer;padding:6px}
.burger span{width:22px;height:2px;background:var(--ink);border-radius:2px}
.content{padding:30px 36px 46px;max-width:1560px;width:100%;margin:0 auto;flex:1}
.appfoot{padding:18px 26px;color:var(--faint);font-size:var(--fs-xs);text-align:center;border-top:1px solid var(--line)}
.appfoot a{color:var(--muted);text-decoration:underline;text-underline-offset:2px}
.nav-scrim{display:none}

/* ---------- Bausteine ---------- */
.page-head{margin-bottom:30px}
.page-head h1{font-size:var(--fs-xl);font-weight:600;letter-spacing:-.03em}
.page-head p{margin:.35em 0 0;color:var(--muted);font-size:var(--fs-sm);font-family:var(--font);letter-spacing:-.01em}
.grid{display:grid;gap:16px}
.cols-2{grid-template-columns:repeat(2,1fr)}
.cols-3{grid-template-columns:repeat(3,1fr)}
.cols-4{grid-template-columns:repeat(4,1fr)}
.card{background:var(--card);border:1px solid rgba(17,24,39,.05);border-radius:var(--radius);box-shadow:0 1px 2px rgba(16,24,40,.04),0 2px 10px rgba(16,24,40,.05)} /* O2: hauchdünner Schatten statt harter Rahmen (ImmoCloud-Look) */
.card-pad{padding:24px 26px}
.card h2,.card h3{font-size:var(--fs-sm);font-weight:600;letter-spacing:-.02em}
.card-head{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:15px 20px;border-bottom:1px solid var(--line)}
.card-head h2{font-size:var(--fs-sm);margin:0;letter-spacing:-.02em}
.card-head a{font-size:var(--fs-s);font-weight:500;color:var(--brand);letter-spacing:-.01em}
.stat{display:flex;flex-direction:column;gap:6px;padding:20px 22px}
.stat .k{display:flex;align-items:center;gap:8px;color:var(--muted);font-size:var(--fs-s);font-weight:500;letter-spacing:-.01em;font-family:var(--font)}
.stat .v{font-size:var(--fs-xl);font-weight:600;letter-spacing:-.03em;font-family:var(--font);font-variant-numeric:tabular-nums}
.stat .s{font-size:var(--fs-s);color:var(--muted)}
.stat .ic{width:34px;height:34px;border-radius:8px;display:grid;place-items:center;background:color-mix(in srgb,var(--brand) 9%,white);color:var(--brand)}
.stat .ic svg{width:18px;height:18px}
/* O1: KPI-Karten mit Handlungslink + optionalem Fortschrittsring (ImmoCloud-Muster) */
.stat .go{font-size:var(--fs-s);font-weight:600;color:var(--brand);letter-spacing:-.01em;margin-top:2px}
a.stat:hover .go{text-decoration:underline}
.stat.has-ring{flex-direction:row;align-items:center;gap:16px}
.stat.has-ring>div{display:flex;flex-direction:column;gap:4px;min-width:0}
/* O4: KPI-Kacheln über Listen */
.list-kpis{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:16px}
.list-kpi{display:flex;align-items:baseline;gap:8px;background:var(--card);border:1px solid rgba(17,24,39,.05);border-radius:var(--radius);box-shadow:0 1px 2px rgba(16,24,40,.04),0 2px 10px rgba(16,24,40,.05);padding:10px 16px}
.list-kpi b{font-size:var(--fs-lg);font-weight:600;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.list-kpi span{font-size:var(--fs-s);color:var(--muted)}
.list-kpi.warn b{color:#c0392b}
/* V1: "Startklar in 6 Schritten"-Checkliste (helpers_ui.php onboarding_card()) */
.ob-card{padding:20px 22px;margin-bottom:16px}
.ob-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:14px}
.ob-head b{font-size:var(--fs-sm);letter-spacing:-.02em}
.ob-head p{margin:2px 0 0;font-size:var(--fs-s);color:var(--muted)}
.ob-progress{font-size:var(--fs-s);font-weight:600;color:var(--brand);background:color-mix(in srgb,var(--brand) 8%,white);border-radius:999px;padding:5px 12px;white-space:nowrap}
.ob-steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:8px}
.ob-step{display:flex;align-items:center;gap:10px;padding:10px 12px;border:1px solid var(--line);border-radius:8px;font-size:var(--fs-s);font-weight:500;color:var(--ink);transition:.14s}
.ob-step:hover{border-color:color-mix(in srgb,var(--brand) 45%,var(--line))}
.ob-step .ob-num{width:24px;height:24px;flex:0 0 24px;border-radius:50%;display:grid;place-items:center;font-size:var(--fs-xs);font-weight:600;background:color-mix(in srgb,var(--brand) 10%,white);color:var(--brand)}
.ob-step .ob-num svg{width:13px;height:13px}
.ob-step.done{color:var(--muted);text-decoration:line-through}
.ob-step.done .ob-num{background:#F0F6F2;color:var(--ok)}
/* V3: Wizard-Stepper (BK-Abrechnung, ImmoCloud-NKA-Muster) */
.wizard{display:flex;flex-wrap:wrap;margin-bottom:18px}
.wz-step{display:flex;align-items:center;gap:9px;padding:10px 18px 10px 14px;background:var(--card);border:1px solid var(--line);font-size:var(--fs-s);font-weight:500;color:var(--muted)}
.wz-step+.wz-step{margin-left:-1px}
.wz-step:first-child{border-radius:var(--radius) 0 0 var(--radius)}
.wz-step:last-child{border-radius:0 var(--radius) var(--radius) 0}
.wz-num{width:22px;height:22px;flex:0 0 22px;border-radius:50%;display:grid;place-items:center;background:#EEF1F5;color:var(--muted);font-size:var(--fs-xs);font-weight:600}
.wz-step.done{color:var(--ink)}
.wz-step.done .wz-num{background:#F0F6F2;color:var(--ok)}
.wz-step.active{color:var(--brand);border-color:color-mix(in srgb,var(--brand) 45%,var(--line));position:relative;z-index:1}
.wz-step.active .wz-num{background:color-mix(in srgb,var(--brand) 10%,white);color:var(--brand)}
/* V4: Feld-Hilfe (helpers_ui.php ui_hint()) – ?-Icon mit Hover/Fokus-Popover */
.hint-i{display:inline-grid;place-items:center;width:15px;height:15px;border-radius:50%;background:#E4E8EE;color:var(--muted);font-size:var(--fs-xs);font-weight:600;cursor:help;margin-left:5px;position:relative;vertical-align:middle;line-height:1}
.hint-i:hover,.hint-i:focus{background:var(--brand);color:#fff;outline:none}
.hint-i::after{content:attr(data-hint);position:absolute;bottom:calc(100% + 8px);left:50%;transform:translateX(-50%);width:230px;background:var(--ink);color:#fff;font-size:var(--fs-xs);font-weight:400;line-height:1.45;text-align:left;letter-spacing:normal;padding:9px 11px;border-radius:8px;box-shadow:0 8px 24px rgba(16,24,40,.22);opacity:0;visibility:hidden;transition:opacity .12s;z-index:60;pointer-events:none}
.hint-i::before{content:"";position:absolute;bottom:calc(100% + 2px);left:50%;transform:translateX(-50%);border:6px solid transparent;border-top-color:var(--ink);opacity:0;visibility:hidden;transition:opacity .12s;z-index:60}
.hint-i:hover::after,.hint-i:focus::after,.hint-i:hover::before,.hint-i:focus::before{opacity:1;visibility:visible}
/* V2: Empty State (helpers_ui.php empty_state()) */
.empty-state{display:flex;flex-direction:column;align-items:center;text-align:center;padding:38px 20px;gap:6px}
.empty-state .es-icon{width:52px;height:52px;border-radius:50%;background:#F4F5F7;display:grid;place-items:center;color:var(--faint);margin-bottom:6px}
.empty-state .es-icon svg{width:24px;height:24px}
.empty-state b{font-size:var(--fs-sm);letter-spacing:-.01em}
.empty-state p{margin:0;max-width:420px;font-size:var(--fs-s);color:var(--muted);line-height:1.55}
.empty-state .btn{margin-top:12px}
.list{display:flex;flex-direction:column}
.row{display:flex;align-items:center;gap:13px;padding:15px 20px;border-top:1px solid var(--line)}
.row:first-child{border-top:0}
.row .ic{width:36px;height:36px;border-radius:8px;flex:0 0 36px;display:grid;place-items:center;background:color-mix(in srgb,var(--brand) 9%,white);color:var(--brand)}
.row .ic svg{width:18px;height:18px}
.row .main{min-width:0;flex:1}
.row .main strong{display:block;font-size:var(--fs-sm);font-weight:500;letter-spacing:-.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.row .main small{font-size:var(--fs-xs);color:var(--faint)}
.row .end{margin-left:auto;text-align:right;white-space:nowrap}
a.row{transition:.14s}
a.row:hover{background:#FAFAFA}
table{width:100%;border-collapse:collapse;font-size:var(--fs-sm)}
th,td{padding:14px 16px;text-align:left;border-bottom:1px solid var(--line)}
th{font-size:var(--fs-xs);letter-spacing:0;color:var(--faint);font-weight:500}
tr:last-child td{border-bottom:0}
tbody tr:hover{background:#FAFAFA}
/* 07.08.2026: Soll, Haben und Saldo standen zu eng an dem Wort links daneben. Eine
   rechtsbuendige Zahl waechst nach links; ist der Text davor lang ("Betriebs-/Bewirtschaftungs-
   kosten"), bleiben von den 13px Innenabstand optisch null. Der zusaetzliche linke Abstand
   gilt fuer jede Zahlenspalte und nicht nur fuer die Saldenliste - es ist dieselbe Zeile in
   Kontensalden, Journal und Buchhaltungspruefung. */
/* 10.08.2026, Inventur der Oberflaeche: 109 von 304 Betragszellen standen linksbuendig -
   ein Drittel. Ein Verwalter ueberfliegt den ganzen Tag Betraege, und Betraege, die nicht
   untereinander stehen, kann man nicht ueberfliegen.

   DIE URSACHE WAR KEINE FEHLENDE BAUWEISE, SONDERN EINE UNBENUTZTE. `td.num` gibt es
   laengst und macht genau das Richtige (rechtsbuendig, Ziffern gleich breit). Gemessen
   wurde: 146 Zellen benutzen `num`, aber 55 die Kurzform `n` und 39 die Kurzform `r` -
   und weder `td.n` noch `td.r` war je definiert. Jemand hat die Kurzformen gemeint und
   niemand hat sie gebaut.

   ALIAS STATT UMBENENNUNG, aus demselben Grund wie bei alert-warning: 94 Aenderungen an
   94 Stellen sind 94 Gelegenheiten, eine zu vergessen. AUF td/th BESCHRAENKT, weil `.n`
   ausserhalb von Tabellen etwas anderes ist - `.action-card .n` ist die grosse Zahl in
   einer Kachel, und die soll nicht rechtsbuendig werden (3 span-Vorkommen, gemessen). */
td.num,th.num,td.n,th.n,td.r,th.r{text-align:right;font-variant-numeric:tabular-nums;padding-left:26px}
.badge{display:inline-flex;align-items:center;gap:6px;font-size:var(--fs-xs);font-weight:500;padding:4px 10px;border-radius:6px;border:1px solid transparent;letter-spacing:-.01em}
.badge::before{content:"";width:6px;height:6px;border-radius:2px;background:currentColor;opacity:.85}
.badge-neu{color:#52525B;background:#F4F4F5;border-color:var(--line)}
.badge-prog{color:#8A5A1B;background:#FBF5EA;border-color:#EFE2CB}
.badge-done{color:#3F7A56;background:#F0F6F2;border-color:#D6E7DC}
.tag{display:inline-flex;align-items:center;gap:5px;font-size:var(--fs-xs);font-weight:500;color:var(--muted);background:#fff;border:1px solid var(--line);border-radius:6px;padding:4px 9px;letter-spacing:-.01em;transition:.14s}
a.tag,button.tag{cursor:pointer}
a.tag:hover,button.tag:hover{border-color:color-mix(in srgb,var(--brand) 45%,var(--line));color:var(--brand)}
.pill{display:inline-block;font-size:var(--fs-xs);letter-spacing:0;text-transform:none;color:var(--muted);background:#F4F4F5;border-radius:6px;padding:4px 10px;font-weight:600}.pill-ok,.pill-warn,.pill-err,.pill-mut{display:inline-block;border-radius:999px;padding:3px 12px;font-size:var(--fs-s);font-weight:600;letter-spacing:0;text-transform:none;white-space:nowrap}.pill-ok{background:#e7f6ec;color:#1e7d34}.pill-warn{background:#fff4e0;color:#b8860b}.pill-err{background:#fdecea;color:#c0392b}.pill-mut{background:#eef1f4;color:#556}
.step{width:26px;height:26px;border-radius:50%;background:var(--brand);color:#fff;display:inline-grid;place-items:center;font-size:var(--fs-s);font-weight:600;flex:0 0 26px}

/* ---------- Formulare & Buttons ---------- */
label.field{display:block;margin-bottom:15px}
label.field>span{display:block;font-size:var(--fs-s);font-weight:500;margin-bottom:6px;color:#3F3F46;letter-spacing:-.01em}
input,select,textarea{width:100%;font:inherit;font-size:var(--fs-sm);color:inherit;background:#fff;border:1px solid var(--line);border-radius:8px;padding:10px 12px;transition:.14s}
input::placeholder,textarea::placeholder{color:var(--faint)}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--brand);box-shadow:0 0 0 3px var(--ring)}
textarea{min-height:120px;resize:vertical}
/* OB-13 (F-20, entschieden 30.09.2026: 16 px, ueberall). iOS Safari vergroessert die Seite beim
   Antippen jedes Eingabefelds unter 16 px. Unter 880 px gilt deshalb 16 px fuer alle Felder;
   darueber bleibt das Bild wie es war. !important ist hier Absicht: Drei Regeln in dieser Datei
   (Grundregel 14,5 px, .ai-form 13,5 px, .ref-form-section 13 px), die Suche in der Seitenleiste
   (includes/header.php, 12,5 px) und Inline-Stile bis 11 px setzen kleiner - Inline-Stile lassen
   sich nur so ueberstimmen. Waechter: scripts/test-eingabe-16px-kopfleiste.php. */
@media (max-width:880px){input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color]),select,textarea{font-size:16px!important}}
.btn{display:inline-flex;align-items:center;gap:8px;justify-content:center;font:inherit;font-size:var(--fs-s);font-weight:500;letter-spacing:-.01em;text-transform:none;cursor:pointer;border:1px solid transparent;border-radius:7px;padding:10px 16px;background:var(--brand);color:#fff;transition:.14s}
.btn:hover{background:var(--brand-d)}
.btn-ghost{background:#fff;color:#3F3F46;border-color:var(--line);font-weight:500}
.btn-ghost:hover{border-color:color-mix(in srgb,var(--brand) 40%,var(--line));color:var(--brand);background:#fff}
.btn-sm{padding:7px 12px;font-size:var(--fs-s)}
.btn svg{width:16px;height:16px}
.inline-form{display:flex;gap:10px;flex-wrap:wrap;align-items:flex-end}
/* 07.08.2026: Ein Hinweis unter einer waagerechten Formularzeile gehoert NEBEN die Zeile,
   nicht in das Feld darin. Steht er im Feld, waechst dessen Hoehe, und weil die Zeile unten
   ausrichtet, rutscht der Knopf daneben um die Hoehe des Hinweises nach unten - so sass der
   "Uebernehmen"-Knopf im Stimmprinzip. Diese Klasse ist die richtige Stelle dafuer. */
.form-row-hint{display:block;margin-top:7px;color:var(--muted);font-size:var(--fs-s);line-height:1.45}
.alert{padding:12px 15px;border-radius:8px;margin-bottom:16px;font-size:var(--fs-s);border:1px solid;letter-spacing:-.01em}
.alert-info{background:#EFF4FF;border-color:#D7E3FF;color:#1E48A0}
.alert-success{background:#F0F6F2;border-color:#D6E7DC;color:#2F6D4B}
.alert-error{background:#FDECEA;border-color:#F7CFCB;color:#8f2b25}
/* 10.08.2026, Inventur der Oberflaeche: `alert-warn` war definiert und auf 3 Seiten
   benutzt - `alert-warning` auf 13, und nirgends definiert. Dreizehn Seiten zeigten einen
   Warnhinweis in der Farbe eines normalen Absatzes. Gemeldet hatte das
   docs/UEBERGABE-OBERFLAECHE.md am 08.08.; die Zahl war dort noch unbekannt.
   Beide Schreibweisen gelten ab jetzt. Umbenennen waere 13 Aenderungen an 13 Seiten mit
   13 Gelegenheiten, eine zu vergessen - eine Zeile hier deckt alle ab, auch die naechste
   Seite, auf der jemand wieder `alert-warning` schreibt. Bewacht von
   scripts/test-oberflaeche-aktiv.php (Abschnitt "benutzte Klassen sind definiert"). */
.alert-warn,.alert-warning{background:#FBF5EA;border-color:#EFE2CB;color:#8A5A1B}

/* ---------- Login ---------- */
.auth{min-height:100vh;display:grid;place-items:center;padding:24px;background:linear-gradient(135deg,#F9FAFC 0%,#EDF1F6 55%,#E3E8EF 100%)}
.auth-card{width:100%;max-width:412px;background:#fff;border:1px solid var(--line);border-radius:12px;box-shadow:var(--shadow-lg);padding:36px 32px}
.auth-brand{display:flex;align-items:center;gap:12px;margin-bottom:24px}
.auth-brand .brand-mark{width:44px;height:44px;font-size:var(--fs-lg);border-radius:9px}
.auth-brand .brand-mark.has-logo{width:64px;height:64px;flex-basis:64px;border-radius:0;background:transparent}
.auth-brand b{font-family:var(--font);font-size:var(--fs-lg);font-weight:600;letter-spacing:-.02em}
.auth-brand-copy{display:flex;flex-direction:column;min-width:0;line-height:1.15}
.auth-brand-copy small{font-size:var(--fs-xs);color:var(--muted);margin-top:4px;letter-spacing:.02em}
.auth-brand-copy .platform-powered{font-size:var(--fs-xs);color:var(--faint);font-weight:500}
.auth-product-signature{display:flex;align-items:center;gap:7px;color:var(--text-3);font-size:var(--fs-xs)}
.auth-product-signature img{width:18px;height:18px;object-fit:contain}
.auth h1{font-size:var(--fs-lg);letter-spacing:-.03em}
.auth .sub{color:var(--muted);font-size:var(--fs-sm);margin-bottom:22px;font-family:var(--font)}
.auth .btn{width:100%;margin-top:6px;padding:12px}
.demo-hint{margin-top:20px;font-size:var(--fs-s);color:var(--muted);background:var(--bg);border:1px dashed var(--line);border-radius:8px;padding:11px 13px}
.empty{padding:44px 20px;text-align:center;color:var(--muted);font-size:var(--fs-s)}
.empty svg{width:38px;height:38px;opacity:.45;margin-bottom:8px}

/* ---------- Responsive ---------- */
@media (min-width:881px) and (max-width:1140px){
  .cols-3,.cols-4{grid-template-columns:repeat(2,1fr)}
  .stat .v{font-size:var(--fs-xl)}
}
@media (max-width:880px){
  .sidebar{transform:translateX(-100%);transition:transform .25s;box-shadow:0 0 40px rgba(0,0,0,.18)}
  .navtoggle:checked ~ .sidebar{transform:none}
  .navtoggle:checked ~ .nav-scrim{display:block;position:fixed;inset:0;background:rgba(8,14,20,.35);z-index:35}
  .shell{margin-left:0}
  .burger{display:flex}
  .cols-2,.cols-3,.cols-4{grid-template-columns:1fr}
  .who{display:none}
  .content{padding:18px}
}

/* Toggle-Switch */
.toggle-row{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:8px 0}
.switch{position:relative;display:inline-block;width:44px;height:25px;flex:0 0 44px}
.switch input{opacity:0;width:0;height:0}
.switch .sl{position:absolute;inset:0;background:#D4D4D8;border-radius:999px;transition:.2s;cursor:pointer}
.switch .sl::before{content:"";position:absolute;width:19px;height:19px;left:3px;top:3px;background:#fff;border-radius:50%;transition:.2s;box-shadow:0 1px 2px rgba(0,0,0,.2)}
.switch input:checked + .sl{background:var(--brand)}
.switch input:checked + .sl::before{transform:translateX(19px)}
.switch input:focus-visible + .sl{outline:2px solid var(--brand);outline-offset:2px}

/* ---------- Belegzeile: Status als Punkt vorne (S109, Vorbild Impower PDF S. 31) ---------- */
.beleg-state{display:inline-flex;align-items:center;gap:7px;min-width:118px;flex:0 0 auto;font-size:var(--fs-s);font-weight:600;letter-spacing:-.01em;color:var(--muted)}
.beleg-state::before{content:"";width:8px;height:8px;border-radius:50%;background:currentColor;flex:0 0 8px}
.beleg-state.is-bereit{color:var(--warn,#b86300)}
.beleg-state.is-ueberfaellig{color:#c0392b}
.beleg-state.is-bezahlt{color:var(--ok,#1f9254)}
.beleg-state.is-entwurf{color:var(--faint,#a1a1aa)}
@media (max-width:880px){.beleg-state{min-width:0}}

/* ---------- Bestätigungsfenster (S108, ersetzt das native confirm()) ---------- */
.vv-confirm{position:fixed;inset:0;z-index:200;display:grid;place-items:center;padding:20px;background:rgba(9,14,22,.45);backdrop-filter:blur(2px);animation:vvFadeIn .12s ease-out}
.vv-confirm-box{width:100%;max-width:430px;background:#fff;border:1px solid var(--line);border-radius:12px;box-shadow:0 24px 60px rgba(16,24,40,.28);padding:22px 24px 18px;animation:vvRiseIn .14s ease-out}
.vv-confirm-text{margin:0 0 18px;font-size:var(--fs-sm);line-height:1.55;color:var(--ink);white-space:pre-line}
.vv-confirm-actions{display:flex;gap:8px;justify-content:flex-end;flex-wrap:wrap}
@keyframes vvFadeIn{from{opacity:0}to{opacity:1}}
@keyframes vvRiseIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.vv-confirm,.vv-confirm-box{animation:none}}

/* ---------- Überlauf-Schutz / Responsive Tabellen ---------- */
/* Befund S106 (29.07.2026): Die Kopfleiste sass auf manchen Seiten ein paar Pixel weiter
   links als auf anderen. Ursache ist nicht die Leiste, sondern die nutzbare Fensterbreite:
   Eine lange Seite bekommt eine senkrechte Bildlaufleiste, eine kurze nicht. Weil .content
   mittig sitzt (max-width:1560px; margin:0 auto), verschiebt sich beim Wechsel zwischen
   kurzer und langer Seite alles um die halbe Leistenbreite - sichtbar als Springen.
   scrollbar-gutter:stable haelt den Platz IMMER frei, auch wenn keine Leiste noetig ist.
   Damit ist die Breite auf jeder Seite gleich. */
html{scrollbar-gutter:stable}
/* Kopfleiste (30.09.2026): Hier stand overflow-x:hidden. Auf html UND body gesetzt, macht das
   body zu einem eigenen Scrollcontainer, und .topbar (position:sticky) klebt dann an body statt
   am Fenster - sie scrollt einfach mit weg. Gemessen auf produktion, finanzauswertung.php:
   nach 1500 px Scrollen lag die Leiste bei -1473 px. clip schneidet genauso ab, erzeugt aber
   keinen Scrollcontainer. Waechter: scripts/test-eingabe-16px-kopfleiste.php. */
html,body{max-width:100%;overflow-x:clip}
.shell,.content{min-width:0}
.grid>*{min-width:0}
img,video,canvas{max-width:100%;height:auto}
.card{overflow-x:auto}
.table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
.table-wrap table{min-width:560px}

/* ---------- Untermenü-Leiste ---------- */
.subnav{display:flex;gap:2px;flex-wrap:wrap;margin:-4px 0 22px;border-bottom:1px solid var(--line)}
.subnav-item{padding:9px 14px;font-size:var(--fs-s);font-weight:500;color:var(--muted);border-bottom:2px solid transparent;margin-bottom:-1px;white-space:nowrap;letter-spacing:-.01em}
.subnav-item:hover{color:var(--ink)}
.subnav-item.is-active{color:var(--brand);border-bottom-color:var(--brand)}

/* ---------- Sidebar einklappen ---------- */
.navcollapse{display:none}
@media(min-width:881px){
  .navcollapse:checked ~ .sidebar{width:72px}
  .navcollapse:checked ~ .sidebar .brand-text,
  .navcollapse:checked ~ .sidebar .nav-item span,
  .navcollapse:checked ~ .sidebar .role-pill{display:none}
  .navcollapse:checked ~ .sidebar .sidebar-foot{flex-direction:column;justify-content:flex-end;align-items:center;gap:8px;padding:10px 0 2px}
  .navcollapse:checked ~ .sidebar .nav-item{justify-content:center}
  .navcollapse:checked ~ .sidebar .brand{justify-content:center;padding-left:0;padding-right:0}
  .navcollapse:checked ~ .sidebar .brand-mark.has-logo{width:42px;height:42px;flex-basis:42px}
  .navcollapse:checked ~ .shell{margin-left:72px}
}

/* ---------- Grundregel: hidden muss hidden bedeuten ----------
   Die Browser-Standardregel [hidden]{display:none} hat die niedrigste
   Spezifitaet und wird von jeder eigenen display-Angabe geschlagen. Setzt
   JavaScript also element.hidden=true auf etwas, das per Klasse
   display:flex/grid/block bekommt, bleibt das Element sichtbar - ohne
   Fehlermeldung, ohne Hinweis.

   Befund vom 28.07.2026: In der Betriebskostenabrechnung filtert
   admin/bk_abrechnung.php die Einheitenliste per row.hidden=true nach dem
   gewaehlten Gebaeude. Wegen .row{display:flex} blieben alle acht Einheiten
   sichtbar und ankreuzbar, gleichzeitig stand darunter "Bitte zuerst ein
   Gebaeude auswaehlen". Wer Einheiten eines nicht gewaehlten Gebaeudes
   ankreuzte, konnte die Abrechnung nicht anlegen.

   Diese Regel gilt bewusst projektweit: element.hidden wird an vielen
   Stellen verwendet und muss ueberall verlaesslich wirken. */
[hidden]{display:none!important}

/* ---------- Suchbare Auswahl (Combobox) ---------- */
select.cbx-native{display:none!important}
.cbx{position:relative}
.cbx-input{width:100%;box-sizing:border-box}
/* Pflichtfeld-Meldung der Combobox. Das native <select> ist ausgeblendet und
   kann die Browser-Blase nicht zeigen; combobox.js meldet deshalb hier.
   Rein additiv - bestehendes Layout bleibt unveraendert. */
.cbx-invalid .cbx-input{border-color:#c0392b;outline:2px solid rgba(192,57,43,.15);outline-offset:0}
.cbx-error{color:#c0392b;font-size:var(--fs-xs);line-height:1.35;margin-top:4px}
.cbx-panel{position:absolute;z-index:60;left:0;right:0;top:calc(100% + 4px);max-height:320px;overflow:auto;background:#fff;border:1px solid var(--line);border-radius:10px;box-shadow:0 12px 32px rgba(0,0,0,.12);padding:0}
.cbx-opt{display:flex;gap:10px;align-items:baseline;padding:9px 13px;cursor:pointer;line-height:1.3;border-top:1px solid #F1F1F3}
.cbx-opt:first-child{border-top:0}
.cbx-opt:hover,.cbx-opt.hl{background:#F4F6FB}
.cbx-opt.sel{background:var(--brand);color:#fff}
.cbx-l{font-weight:500;font-size:var(--fs-sm);flex:0 0 auto;white-space:nowrap}
.cbx-s{font-size:var(--fs-s);color:var(--muted);flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cbx-opt.sel .cbx-s{color:rgba(255,255,255,.85)}
.cbx-empty{padding:11px 12px;color:var(--muted);font-size:var(--fs-sm)}

/* ---------- Flash als schwebender Hinweis ---------- */
.flashwrap{position:fixed;top:66px;left:50%;transform:translateX(-50%);z-index:90;display:flex;flex-direction:column;gap:8px;width:560px;max-width:92vw;pointer-events:none}
.flashwrap .alert{pointer-events:auto;box-shadow:0 8px 26px rgba(0,0,0,.12);margin:0}
.flashwrap .alert-error{position:relative;padding-right:38px}
/* OB-10 (28.09.2026): die Erklaerung zu einem Kennzeichen steht sichtbar daneben, nicht im title. */
.kennzeichen-erklaerung{color:var(--muted);font-size:var(--fs-xs);font-weight:400}
.alert-close{position:absolute;top:6px;right:6px;width:26px;height:26px;border:0;background:transparent;color:inherit;cursor:pointer;border-radius:6px;font-size:var(--fs-lg);line-height:1}
.alert-close::before{content:"\00d7"}
.alert-close:hover,.alert-close:focus-visible{background:rgba(0,0,0,.08)}
/* O6: Erfolgs-Karte = Flash mit Handlungslink */
.alert-cta{display:flex;align-items:center;gap:14px;justify-content:space-between}
.alert-cta .btn{flex:0 0 auto;white-space:nowrap}

/* ---------- Kanban-Board (Schadensmeldungen) ---------- */
.kanban{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;align-items:start}
.kb-col{background:#f6f8f9;border:1px solid var(--line);border-radius:12px;padding:10px;min-height:220px}
.kb-col.kb-over{border-color:var(--brand);background:#eef3fd}
.kb-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px;padding:2px 4px}
.kb-count{font-size:var(--fs-s);font-weight:600;color:var(--muted);background:#fff;border:1px solid var(--line);border-radius:99px;padding:1px 8px}
.kb-cards{display:flex;flex-direction:column;gap:8px;min-height:40px}
.kb-card{background:#fff;border:1px solid var(--line);border-radius:10px;padding:10px 12px;cursor:grab}
.kb-card:active{cursor:grabbing}
.kb-card.kb-dragging{opacity:.45}
.kb-title{font-weight:600;color:var(--ink);text-decoration:none;display:block;margin-bottom:2px;letter-spacing:-.01em}
.kb-title:hover{color:var(--brand)}
.kb-meta{font-size:var(--fs-s);color:var(--muted);margin-bottom:6px}
.kb-tags{display:flex;gap:5px;flex-wrap:wrap}
.kb-prio-hoch{background:#fdecea;color:#c0392b;font-weight:600}
.kb-assign{margin:8px 0 0}
.kb-assign .tag{cursor:pointer;color:var(--brand);border-style:dashed;background:transparent}
.kb-empty{font-size:var(--fs-sm);color:var(--muted);text-align:center;padding:14px 0}
.kb-status{display:flex;align-items:center;gap:7px;margin-top:8px;font-size:var(--fs-s);color:var(--muted)}
.kb-status select{flex:1;max-width:190px;border:1px solid var(--line);border-radius:7px;padding:6px 8px;font:inherit;font-size:var(--fs-s);background:#fff;color:var(--ink)}
@media (max-width:900px){.kanban{grid-template-columns:1fr}.kb-status select{padding:10px 8px}}

/* ---------- Zeilen-Menue (⋯) als schwebendes Overlay statt Inline ---------- */
.rowmenu{position:relative;display:inline-block}
.rowmenu>summary{list-style:none;display:inline-flex;align-items:center}
.rowmenu>summary::-webkit-details-marker{display:none}
.rowmenu[open]>.rowmenu-pop{position:absolute;right:0;top:calc(100% + 6px);z-index:70;background:#fff;box-shadow:0 14px 34px rgba(0,0,0,.16)}

/* ---------- Listen-Standard: Kopf-Aktionen, Toolbar & Filter-Chips ---------- */
.head-actions{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.list-toolbar{display:flex;gap:8px;flex-wrap:wrap;align-items:center;padding:12px 16px;border-bottom:1px solid var(--line)}
.chips{display:flex;gap:6px;flex-wrap:wrap}
.chip{font:inherit;font-size:var(--fs-s);font-weight:500;color:var(--muted);background:#fff;border:1px solid var(--line);border-radius:999px;padding:5px 12px;cursor:pointer;letter-spacing:-.01em;transition:.14s;text-decoration:none}
.chip:hover{border-color:color-mix(in srgb,var(--brand) 40%,var(--line));color:var(--ink)}
.chip.is-active{background:color-mix(in srgb,var(--brand) 8%,white);border-color:var(--brand);color:var(--brand)} /* ---------- Aktions-Dashboard (Plan §5) & Detail-Hub (Plan §6) ---------- */ .action-sec{margin:2px 0 24px}.action-sec-head{display:flex;align-items:center;gap:10px;margin-bottom:10px}.action-sec-head h2{font-size:var(--fs-sm);font-weight:600;letter-spacing:-.02em;margin:0}.action-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:12px}a.action-card{display:flex;align-items:center;gap:12px;background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:14px 16px;transition:.14s}a.action-card:hover{border-color:color-mix(in srgb,var(--brand) 45%,var(--line));box-shadow:var(--shadow)}.action-card .ic{width:36px;height:36px;border-radius:8px;flex:0 0 36px;display:grid;place-items:center;background:color-mix(in srgb,var(--brand) 9%,white);color:var(--brand)}.action-card .ic svg{width:18px;height:18px}.action-card .txt{min-width:0;flex:1;display:flex;flex-direction:column;gap:1px}.action-card .n{font-size:var(--fs-lg);font-weight:600;letter-spacing:-.03em;line-height:1.15;font-variant-numeric:tabular-nums}.action-card .lbl{font-size:var(--fs-xs);color:var(--muted);letter-spacing:-.01em;line-height:1.3}.action-card .arrow{color:var(--faint);flex:0 0 auto;display:grid;place-items:center;transition:.14s}.action-card .arrow svg{width:16px;height:16px}a.action-card:hover .arrow{color:var(--brand);transform:translateX(2px)}.action-card.is-urgent .ic{background:#fdecea;color:#c0392b}.action-card.is-urgent .n{color:#c0392b}.action-card.is-zero{opacity:.55}.action-card.is-zero .ic{background:#F4F4F5;color:var(--faint)}.action-card.is-zero .n{color:var(--muted)}.crumb{font-size:var(--fs-s);letter-spacing:-.01em;margin-bottom:6px}.crumb a{color:var(--muted);transition:.14s}.crumb a:hover{color:var(--brand)}.hub-nav{display:flex;gap:8px;flex-wrap:wrap;margin:-2px 0 18px}.card>.action-grid{padding:16px 20px} /* ---------- Gefuehrte Tour (Erstnutzer) ---------- */ .tour-overlay{position:fixed;inset:0;z-index:120}.tour-spot{position:absolute;border-radius:10px;box-shadow:0 0 0 9999px rgba(9,14,22,.55);transition:top .25s,left .25s,width .25s,height .25s;pointer-events:none}.tour-card{position:absolute;width:330px;max-width:calc(100vw - 32px);background:#fff;border:1px solid var(--line);border-radius:12px;box-shadow:0 18px 44px rgba(16,24,40,.22);padding:16px 18px 14px;transition:top .25s,left .25s}.tour-card h3{font-size:var(--fs-sm);margin:0 24px 6px 0;letter-spacing:-.02em}.tour-card p{margin:0 0 14px;font-size:var(--fs-s);color:var(--muted);line-height:1.5}.tour-foot{display:flex;align-items:center;gap:8px}.tour-dots{display:flex;gap:5px;margin-right:auto}.tour-dot{width:7px;height:7px;border-radius:50%;background:#E4E4E7}.tour-dot.on{background:var(--brand)}.tour-x{position:absolute;top:10px;right:10px;width:26px;height:26px;border:0;background:transparent;color:var(--faint);font-size:var(--fs-lg);line-height:1;cursor:pointer;border-radius:6px;padding:0}.tour-x:hover{background:#F4F4F5;color:var(--ink)} /* ---------- KI-Assistent (Chat-Bubble) ---------- */ .ai-bubble{position:fixed;right:22px;bottom:22px;z-index:110;width:54px;height:54px;border-radius:50%;border:0;background:var(--brand);color:#fff;display:grid;place-items:center;cursor:pointer;box-shadow:0 10px 26px rgba(16,24,40,.28);transition:.14s;padding:0}.ai-bubble:hover{background:var(--brand-d)}.ai-bubble svg{width:26px;height:26px}.ai-panel{position:fixed;right:22px;bottom:88px;z-index:110;width:370px;max-width:calc(100vw - 32px);height:500px;max-height:calc(100vh - 130px);background:#fff;border:1px solid var(--line);border-radius:14px;box-shadow:0 24px 60px rgba(16,24,40,.25);display:flex;flex-direction:column;overflow:hidden}.ai-head{display:flex;align-items:center;gap:9px;padding:12px 14px;border-bottom:1px solid var(--line)}.ai-head b{font-size:var(--fs-sm);letter-spacing:-.01em}.ai-head small{color:var(--faint);font-size:var(--fs-xs)}.ai-close{margin-left:auto;width:28px;height:28px;border:0;background:transparent;color:var(--faint);cursor:pointer;font-size:var(--fs-sm);line-height:1;border-radius:6px;padding:0}.ai-close:hover{background:#F4F4F5;color:var(--ink)}.ai-msgs{flex:1;overflow-y:auto;padding:14px;display:flex;flex-direction:column;gap:8px}.ai-msg{max-width:85%;padding:9px 12px;border-radius:12px;font-size:var(--fs-s);line-height:1.45;white-space:pre-wrap;overflow-wrap:break-word}.ai-msg.user{align-self:flex-end;background:var(--brand);color:#fff;border-bottom-right-radius:4px}.ai-msg.bot{align-self:flex-start;background:#F4F4F5;color:var(--ink);border-bottom-left-radius:4px}.ai-msg.err{align-self:flex-start;background:#FDECEA;color:#8f2b25;border-bottom-left-radius:4px}.ai-typing{align-self:flex-start;color:var(--faint);font-size:var(--fs-xs);padding:2px 4px}.ai-form{display:flex;gap:8px;padding:10px 12px;border-top:1px solid var(--line)}.ai-form input{flex:1;font-size:var(--fs-s);padding:9px 11px}.ai-send{flex:0 0 auto;width:42px;border:0;border-radius:8px;background:var(--brand);color:#fff;cursor:pointer;display:grid;place-items:center;padding:0}.ai-send:hover{background:var(--brand-d)}.ai-send svg{width:17px;height:17px}.ai-hint{padding:6px 14px 8px;font-size:var(--fs-xs);color:var(--faint);border-top:1px solid var(--line);line-height:1.4}@media (max-width:880px){.ai-panel{right:12px;bottom:84px;width:calc(100vw - 24px)}.ai-bubble{right:14px;bottom:16px;width:50px;height:50px}}

/* ---------- Utility-Klassen (OPTIMIERUNGSPLAN Phase B: Inline-CSS-Abbau) ----------
   Ersetzen die häufigsten style=""-Muster. Konvention: nur EIN Zweck pro Klasse,
   kombinierbar (class="muted small mb-2"). Nicht umbenennen – seitenweit genutzt. */
.m-0{margin:0}
.mb-0{margin-bottom:0}
.mb-1{margin-bottom:6px}
.mb-2{margin-bottom:12px}
.mb-3{margin-bottom:18px}
.mt-1{margin-top:6px}
.mt-2{margin-top:12px}
.muted{color:var(--muted)}
.small{font-size:var(--fs-sm)}
.hint{color:var(--muted);font-size:var(--fs-sm)}
.text-right{text-align:right}
.text-danger{color:#c0392b}
.text-ok{color:var(--ok)}
.nowrap{white-space:nowrap}
.scroll-x{overflow-x:auto}
/* Buchungstabellen mit vielen Zeilen (z. B. Mietzahlungen) sollen den verfuegbaren
   Bildschirm nutzen statt in einem fest verdrahteten 640-Pixel-Kasten zu stecken.
   Die Hoehe waechst mit dem Fenster, bleibt aber begrenzt, damit die Karte auf
   kleinen Bildschirmen nicht endlos wird. */
.unit-payment-table{max-height:min(78vh,1200px);overflow:auto}
.unit-payment-table>table{width:100%;min-width:520px}
.flex-row{display:flex;align-items:center;gap:10px}
.flex-wrap-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.plain-link{text-decoration:none;color:inherit}
.grow{flex:1;min-width:0}

/* ---------- Pre-Login-Seiten (OPTIMIERUNGSPLAN B4): breite Auth-Karte + Rechtstexte ---------- */
.auth-card.is-wide{max-width:760px}
.legal-html a{color:var(--brand);text-decoration:underline}
.legal-html h2{font-size:var(--fs-sm);margin-top:1.4em}

/* ---------- Login v2 (ETG24-inspiriert: eckig, helle Diagonal-Flächen, Split-Karte) ---------- */
.auth{background:linear-gradient(115deg,rgba(255,255,255,.92) 0%,rgba(255,255,255,0) 42%),linear-gradient(115deg,transparent 32%,rgba(208,217,231,.45) 32%,rgba(208,217,231,.45) 56%,transparent 56%),linear-gradient(115deg,transparent 62%,rgba(224,230,240,.7) 62%,rgba(224,230,240,.7) 86%,transparent 86%),#EDF0F5;background-size:cover;background-position:center;flex-direction:column;gap:16px;display:flex;align-items:center;justify-content:center}
.auth-shell{display:grid;grid-template-columns:1.15fr 1fr;width:100%;max-width:1030px;min-height:580px;background:#fff;border:1px solid var(--line);border-top:3px solid var(--brand);border-radius:0;box-shadow:0 24px 70px rgba(16,24,40,.12)}
.auth-hero{position:relative;display:flex;flex-direction:column;justify-content:center;padding:64px 72px 140px;background:#fff;overflow:hidden}
.auth-hero-date{font-size:var(--fs-xs);font-weight:600;letter-spacing:.09em;text-transform:uppercase;color:var(--faint);margin-bottom:12px}
.auth-usps{margin-top:28px;display:flex;flex-direction:column;gap:11px}
.auth-usp{display:flex;align-items:center;gap:11px;font-size:var(--fs-sm);color:var(--ink);letter-spacing:-.01em}
.auth-usp svg{width:17px;height:17px;flex:0 0 17px;color:var(--ok)}
.auth-hero-art{position:absolute;left:40px;right:40px;bottom:0;height:104px;color:var(--line);pointer-events:none}
.auth-hero .auth-brand{position:absolute;top:34px;left:72px;margin:0}
.auth-hero .auth-brand b{font-size:var(--fs-lg);line-height:1.25;white-space:normal}
.auth-hero .auth-brand .brand-mark.is-platform{width:58px;height:58px;flex-basis:58px}
.auth .brand-mark{border-radius:0}
.auth-hero-text h2{font-size:var(--fs-xl);font-weight:600;letter-spacing:-.03em;margin:0 0 10px;color:var(--ink)}
.auth-hero-text p{margin:0;color:var(--muted);font-size:var(--fs-lg);letter-spacing:-.01em}
.auth-form{display:flex;flex-direction:column;border-left:1px solid var(--line);background:#fff}
.auth-form-main{flex:1;display:flex;flex-direction:column;justify-content:center;padding:48px}
.auth-form-main h1{font-size:var(--fs-sm);font-weight:600;letter-spacing:.09em;text-transform:uppercase;margin-bottom:4px}
.auth-form-main .sub{margin-bottom:20px}
.auth .field input{border-radius:0}
.auth .btn{border-radius:0;letter-spacing:.07em;text-transform:uppercase;font-weight:600;padding:13px}
.auth-links{margin-top:18px;text-align:center}
.auth-links a{display:inline-block;font-size:var(--fs-xs);font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.auth-links a:hover{color:var(--brand)}
.auth-keybox{display:flex;gap:14px;align-items:flex-start;background:#F4F5F7;border-top:1px solid var(--line);padding:22px 48px}
.auth-keybox svg{width:26px;height:26px;flex:0 0 26px;color:var(--muted);margin-top:2px}
.auth-keybox b{display:block;font-size:var(--fs-s);margin-bottom:3px}
.auth-keybox p{margin:0;font-size:var(--fs-s);color:var(--muted);font-style:italic;line-height:1.5}
.auth-keybox a{color:var(--brand);font-weight:600;font-style:normal}
.auth-foot{width:100%;max-width:1030px;font-size:var(--fs-xs);color:var(--faint);display:flex;align-items:center;justify-content:space-between;gap:16px}
.auth-foot a{color:var(--faint)}
.auth-foot a:hover{color:var(--brand)}
.auth-card{border-radius:0}
@media (max-width:980px){.auth-shell{grid-template-columns:1fr;min-height:0;max-width:460px}.auth-hero{padding:76px 32px 26px}.auth-hero .auth-brand{top:26px;left:32px}.auth-hero-text h2{font-size:var(--fs-xl)}.auth-hero-art{display:none}.auth-usps{margin-top:18px}.auth-form{border-left:0;border-top:1px solid var(--line)}.auth-form-main{padding:32px}.auth-keybox{padding:18px 32px}.auth-foot{max-width:460px;flex-direction:column;gap:8px}}

/* ---------- Referenz-UI aus der verbindlichen Impower-Bildstrecke ----------
   Reduzierte, vollbreite Arbeitsflaechen statt nebeneinander gestapelter Karten.
   Die Klassen sind bewusst wiederverwendbar fuer Objekte, Buchhaltung, ETV,
   Kommunikation, Dokumente und Analytics. */
.ref-page{--ref-ink:#17191c;--ref-muted:#747980;--ref-line:#e7e9ec;--ref-soft:#f7f8f9;--ref-green:#1f9d68}
.ref-page .page-head{margin-bottom:22px}
.ref-page .page-head h1{font-size:var(--fs-xl);font-weight:600;letter-spacing:-.025em}
.ref-page .page-head p{max-width:900px;font-size:var(--fs-s)}
.handover-modules{margin:0 0 16px;border:1px solid #e3e6e9;border-radius:3px;background:#fff;box-shadow:none}
.handover-modules-head{display:flex;align-items:flex-start;justify-content:space-between;gap:20px;padding:15px 17px;border-bottom:1px solid #e7e9ec}
.handover-modules-head h2{margin:0 0 3px;font-size:var(--fs-sm);font-weight:600}
.handover-modules-head p{max-width:820px;margin:0;color:var(--text-3);font-size:var(--fs-s);line-height:1.45}
.handover-ready{display:inline-flex;align-items:center;gap:7px;flex:0 0 auto;margin-top:1px;padding:5px 8px;border:1px solid #cce7db;border-radius:3px;background:#f0f8f4;color:#267552;font-size:var(--fs-xs);font-weight:600;white-space:nowrap}
.handover-ready i{width:7px;height:7px;border-radius:50%;background:#20a46b}
.handover-module-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr))}
.handover-module{position:relative;display:flex;min-width:0;min-height:116px;flex-direction:column;align-items:flex-start;padding:15px 16px;border-right:1px solid #e7e9ec;color:#24272b;text-decoration:none}
.handover-module:last-child{border-right:0}
.handover-module:hover{background:#fafbfb;color:#17191c}
.handover-module.is-core{box-shadow:inset 0 2px 0 var(--brand)}
.handover-module-label{margin-bottom:7px;color:var(--text-3);font-size:var(--fs-xs);font-weight:600;letter-spacing:0;text-transform:none}
.handover-module strong{font-size:var(--fs-s);font-weight:600}
.handover-module small{display:block;margin:4px 0 13px;color:var(--text-3);font-size:var(--fs-xs);line-height:1.4}
.handover-module-status{display:inline-flex;margin-top:auto;padding:3px 6px;border:1px solid #cce7db;border-radius:3px;background:#f0f8f4;color:#267552;font-size:var(--fs-xs);font-weight:600}
.handover-module-status.is-optional{border-color:#dfe2e6;background:#f7f8f9;color:#676d74}
.settings-page .einst-search{border-radius:3px;box-shadow:none}
.settings-managed{display:grid;grid-template-columns:1fr auto;gap:5px 12px;padding-top:12px;border-top:1px solid var(--line)}
.settings-managed>strong{font-size:var(--fs-s)}
.settings-managed>span{font-size:var(--fs-xs);font-weight:600}
.settings-managed>span.is-active{color:#267552}
.settings-managed>span.is-pending{color:#8a5a13}
.settings-managed>small{grid-column:1/-1;color:var(--muted);font-size:var(--fs-xs);line-height:1.4}
.settings-managed-note{margin:12px 0 0;padding:10px 12px;border:1px solid #e4e7ea;border-radius:3px;background:#f8f9fa;color:#676d74;font-size:var(--fs-xs)}
.operator-settings>summary,.operator-technical>summary{cursor:pointer;color:#4f555c;font-size:var(--fs-xs);font-weight:600;list-style:none}
.operator-settings>summary::-webkit-details-marker,.operator-technical>summary::-webkit-details-marker{display:none}
.operator-settings>summary::before,.operator-technical>summary::before{content:"›";display:inline-block;margin-right:7px;transition:transform .15s}
.operator-settings[open]>summary::before,.operator-technical[open]>summary::before{transform:rotate(90deg)}
.operator-settings-body{padding-top:2px}
.operator-technical{margin-top:12px;padding:10px 12px;border:1px dashed #d9dde1;border-radius:3px;background:#fbfbfc}
.operator-technical-body{padding-top:12px}
.operator-technical-body .field:last-child{margin-bottom:0}
.handover-modules-dashboard{margin-top:-2px}
@media (max-width:900px){.handover-modules-head{align-items:flex-start;flex-direction:column}.handover-module-grid{grid-template-columns:1fr}.handover-module{min-height:0;border-right:0;border-bottom:1px solid #e7e9ec}.handover-module:last-child{border-bottom:0}}
.ref-primary{display:inline-flex;align-items:center;justify-content:center;gap:7px;min-height:34px;padding:8px 13px;border:1px solid #17191c;border-radius:3px;background:#17191c;color:#fff!important;font:inherit;font-size:var(--fs-s);font-weight:600;line-height:1;text-decoration:none;cursor:pointer;box-shadow:none}
.ref-primary:hover{background:#000;border-color:#000;color:#fff}
.ref-secondary{display:inline-flex;align-items:center;justify-content:center;gap:7px;min-height:34px;padding:8px 13px;border:1px solid #d9dce0;border-radius:3px;background:#fff;color:#2f3338!important;font:inherit;font-size:var(--fs-s);font-weight:500;text-decoration:none;cursor:pointer}
.ref-secondary:hover{border-color:#9ba0a7;background:#fafafa}
.ref-surface{background:#fff;border:1px solid var(--ref-line);border-radius:2px;box-shadow:none}
.ref-surface-head{display:flex;align-items:center;justify-content:space-between;gap:14px;min-height:52px;padding:10px 16px;border-bottom:1px solid var(--ref-line)}
.ref-surface-head h2{margin:0;font-size:var(--fs-sm);font-weight:600}
.ref-toolbar{display:flex;align-items:center;gap:9px;flex-wrap:wrap;padding:11px 16px;border-bottom:1px solid var(--ref-line);background:#fff}
.ref-toolbar .ref-search{margin-left:auto;min-width:220px;max-width:340px;height:34px;border-radius:3px;background:#fff}
.ref-filter{display:inline-flex;align-items:center;gap:5px;min-height:32px;padding:6px 10px;border:1px solid #dfe2e6;border-radius:3px;background:#fff;color:#5d6269;font-size:var(--fs-xs);font-weight:500;text-decoration:none}
.ref-filter:hover,.ref-filter.is-active{border-color:#17191c;color:#17191c;background:#f7f8f9}
.ref-filter.is-active{box-shadow:inset 0 -2px 0 #17191c}
.ref-table-wrap{overflow-x:auto}
.ref-table{width:100%;min-width:760px;border-collapse:collapse}
.ref-table th{height:38px;padding:8px 14px;border-bottom:1px solid var(--ref-line);background:#fbfbfc;color:var(--text-3);font-size:var(--fs-xs);font-weight:600;letter-spacing:0;text-align:left;text-transform:none;white-space:nowrap}
.ref-table th a{display:inline-flex;align-items:center;gap:5px;color:inherit;text-decoration:none}
.ref-table td{height:58px;padding:9px 14px;border-bottom:1px solid var(--ref-line);color:#2a2d31;font-size:var(--fs-s);vertical-align:middle}
.ref-table tbody tr{transition:background .12s}
.ref-table tbody tr[data-href]{cursor:pointer}
.ref-table tbody tr:hover{background:#fafbfb}
.ref-table tbody tr:last-child td{border-bottom:0}
.ref-table .ref-title{display:block;color:#181a1d;font-size:var(--fs-s);font-weight:600;line-height:1.35;text-decoration:none}
.ref-table .ref-sub{display:block;margin-top:3px;color:var(--text-3);font-size:var(--fs-xs);line-height:1.35}
.ref-table .ref-number{font-variant-numeric:tabular-nums}
.ref-status{display:inline-flex;align-items:center;gap:6px;color:#555b62;font-size:var(--fs-xs);white-space:nowrap}
.ref-status::before{content:"";width:7px;height:7px;border-radius:50%;background:#aeb3b9}
.ref-status.is-ready::before{background:var(--ref-green)}
.ref-status.is-draft::before{background:#d19a3b}
.ref-status.ref-status-ok::before{background:var(--ref-green)}
.ref-status.ref-status-warn::before{background:#d38b18}
.ref-status.ref-status-warn{color:#8a5609}
.ref-alert{padding:12px 14px;border:1px solid #d7e2fb;border-radius:2px;background:#f2f6ff;color:#17479e;margin-bottom:14px;line-height:1.45}
.ref-alert.warn{border-color:#f1d695;background:#fff8e7;color:#7d5500}
.ref-alert.error{border-color:#efc0bd;background:#fff1f0;color:#a52a22}
.ref-kv{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;padding:8px 0;border-bottom:1px solid var(--ref-line);font-size:var(--fs-xs)}
.ref-kv:last-child{border-bottom:0}
.ref-kv>span{color:#6c727a}
.ref-kv>strong{text-align:right;font-weight:600;color:#24272b}
.invoice-position{padding:12px 0;border-top:1px solid var(--ref-line)}
.invoice-position:first-child{border-top:0;padding-top:0}
.ref-summary{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:13px 16px;border-top:1px solid var(--ref-line);background:#fbfbfc;font-size:var(--fs-xs)}
.ref-summary strong{font-size:var(--fs-s)}
.ref-empty{padding:42px 24px;text-align:center;color:var(--ref-muted);font-size:var(--fs-s)}
.ref-step-shell{display:grid;grid-template-columns:minmax(0,1fr) 235px;gap:24px;align-items:start}
.ref-invoice-shell{grid-template-columns:minmax(360px,1.25fr) minmax(360px,.85fr)}
.ref-step-main{min-width:0}
.ref-step-aside{position:sticky;top:84px;border-left:1px solid var(--ref-line);padding-left:18px}
.ref-step-aside h3{margin:0 0 14px;color:var(--text-3);font-size:var(--fs-xs);font-weight:600;letter-spacing:0;text-transform:none}
.ref-step-nav{display:flex;flex-direction:column;gap:2px}
.ref-step-link{display:flex;align-items:flex-start;gap:9px;padding:8px 9px;border-radius:3px;color:var(--text-3);font-size:var(--fs-xs);line-height:1.35;text-decoration:none}
.ref-step-link .num{display:grid;place-items:center;flex:0 0 19px;width:19px;height:19px;border:1px solid #dfe2e5;border-radius:50%;font-size:var(--fs-xs);font-weight:600}
.ref-step-link.is-active{background:#f2f3f4;color:#17191c;font-weight:600}
.ref-step-link.is-active .num{border-color:#17191c;background:#17191c;color:#fff}
.ref-step-link.is-done .num{border-color:#b9ddce;background:#eaf6f1;color:#1f8f62}
.ref-form-section{margin-bottom:14px;border:1px solid var(--ref-line);border-radius:2px;background:#fff}
.ref-form-section-head{display:flex;align-items:center;gap:10px;padding:13px 16px;border-bottom:1px solid var(--ref-line)}
.ref-form-section-head .num{display:grid;place-items:center;width:22px;height:22px;border:1px solid #dfe2e5;border-radius:50%;font-size:var(--fs-xs);font-weight:600}
.ref-form-section-head h2{margin:0;font-size:var(--fs-sm);font-weight:600}
.ref-form-section-body{padding:18px 18px 8px}
.ref-page .ref-form-section .field span{font-size:var(--fs-xs);font-weight:500;color:#555a61}
.ref-page .ref-form-section input,.ref-page .ref-form-section select,.ref-page .ref-form-section textarea{min-height:38px;border-radius:2px;border-color:#dfe2e5;background:#fff;font-size:var(--fs-s)}
.ref-form-actions{display:flex;justify-content:flex-end;gap:8px;padding:14px 0 4px}
.ref-ai{display:inline-flex;align-items:center;gap:5px;margin-left:auto;color:#1f9d68;font-size:var(--fs-xs);font-weight:600}
.ref-ai::before{content:"";width:7px;height:7px;border-radius:50%;background:#20b475;box-shadow:0 0 0 3px #e8f7f1}
.ref-chart{display:flex;align-items:flex-end;gap:16px;height:290px;padding:28px 22px 10px;border-bottom:1px solid var(--ref-line);overflow-x:auto}
.ref-chart-col{display:flex;flex:1 0 64px;min-width:64px;height:100%;flex-direction:column;align-items:center;justify-content:flex-end;gap:7px}
.ref-chart-value{font-size:var(--fs-xs);font-weight:600;color:#555b62;white-space:nowrap}
.ref-chart-bar{width:24px;min-height:4px;border-radius:2px 2px 0 0;background:#2f80ed;box-shadow:inset 0 -1px 0 rgba(0,0,0,.12)}
.ref-chart-col:nth-child(3n+2) .ref-chart-bar{background:#67a86b}
.ref-chart-col:nth-child(3n+3) .ref-chart-bar{background:#d4a33f}
.ref-chart-label{max-width:82px;color:var(--text-3);font-size:var(--fs-xs);line-height:1.25;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
@media(max-width:980px){.ref-step-shell,.ref-invoice-shell{grid-template-columns:minmax(0,1fr)}.ref-step-aside{position:static;order:-1;border-left:0;border-bottom:1px solid var(--ref-line);padding:0 0 12px}.ref-step-nav{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}.ref-toolbar .ref-search{margin-left:0;max-width:none;flex:1 1 220px}}
@media(max-width:680px){.ref-page .page-head{align-items:stretch!important}.ref-page .head-actions{width:100%}.ref-page .head-actions>*{flex:1}.ref-step-nav{grid-template-columns:1fr}.ref-form-section-body{padding:14px 14px 6px}.ref-table{min-width:680px}}

/* Die gesamte Verwalter-Oberflaeche nutzt dieselbe reduzierte Referenzsprache.
   Spezialseiten koennen sie mit den ref-*-Bausteinen weiter praezisieren. */
body.ui-reference{background:#fff}
body.ui-reference .shell{background:#fff}
body.ui-reference .content{max-width:none;padding:28px 34px 54px;background:#fff}
body.ui-reference .page-head{margin-bottom:22px}
body.ui-reference .page-head h1{font-size:var(--fs-xl);font-weight:600}
body.ui-reference .page-head p{font-size:var(--fs-s)}
body.ui-reference .card{border:1px solid #e7e9ec;border-radius:2px;box-shadow:none}
body.ui-reference .card-pad{padding:18px 20px}
body.ui-reference .card-head{padding:12px 16px}
body.ui-reference .btn{border-color:#17191c;border-radius:3px;background:#17191c;color:#fff;font-size:var(--fs-s);font-weight:600;box-shadow:none}
body.ui-reference .btn:hover{border-color:#000;background:#000;color:#fff}
body.ui-reference .btn-ghost{border-color:#d9dce0;background:#fff;color:#34383d}
body.ui-reference .btn-ghost:hover{border-color:#959ba2;background:#fafafa;color:#17191c}
body.ui-reference input,body.ui-reference select,body.ui-reference textarea{border-radius:2px;border-color:#dfe2e5}
body.ui-reference input:focus,body.ui-reference select:focus,body.ui-reference textarea:focus{border-color:#17191c;box-shadow:0 0 0 2px rgba(23,25,28,.08)}
body.ui-reference table{font-size:var(--fs-s)}
body.ui-reference th{padding:9px 13px;background:#fbfbfc;color:var(--text-3);font-size:var(--fs-xs);font-weight:600;letter-spacing:0;text-transform:none}
body.ui-reference td{padding:11px 13px}
body.ui-reference .list-toolbar{padding:10px 14px}
body.ui-reference .row{padding:12px 16px}
body.ui-reference .tag,body.ui-reference .pill{border-radius:3px}
body.ui-reference .alert{border-radius:2px}
body.ui-reference[data-page="brett"] .content>.grid.cols-2,
body.ui-reference[data-page="termine"] .content>.grid.cols-2,
body.ui-reference[data-page="umfragen"] .content>.grid.cols-2,
body.ui-reference[data-page="postbox"] .content>.grid.cols-2,
body.ui-reference[data-page="etv"] .content>.grid.cols-2,
body.ui-reference[data-page="sonderumlage"] .content>.grid.cols-2,
body.ui-reference[data-page="zahlungsverkehr"] .content>.grid.cols-2{grid-template-columns:1fr}
@media(max-width:880px){body.ui-reference .content{padding:22px 16px 42px}}

/* Analytics: lokale, CDN-freie Diagramme und definierter Ladezustand. */
.ref-loading-state{display:flex;align-items:center;gap:10px;padding:14px 16px;margin-bottom:14px;border:1px solid var(--line);border-radius:10px;background:#fff}
.ref-loading-state[hidden]{display:none}
.ref-loading-state small{color:var(--muted)}
.ref-spinner{width:18px;height:18px;border:2px solid #d7deea;border-top-color:var(--brand);border-radius:50%;animation:ref-spin .8s linear infinite}
@keyframes ref-spin{to{transform:rotate(360deg)}}
.ref-chart-legend{display:flex;gap:12px;flex-wrap:wrap;font-size:var(--fs-xs);color:var(--muted)}
.ref-chart-legend span:before{content:"";display:inline-block;width:8px;height:8px;border-radius:2px;margin-right:5px;background:var(--chart-color)}
.ref-chart-legend .c1,.ref-bar-chart .c1{--chart-color:#2f80ed}
.ref-chart-legend .c2,.ref-bar-chart .c2{--chart-color:#7a6ff0}
.ref-chart-legend .c3,.ref-bar-chart .c3{--chart-color:#72a83b}
.ref-chart-legend .c4,.ref-bar-chart .c4{--chart-color:#e58b55}
.ref-chart-legend .c5,.ref-bar-chart .c5{--chart-color:#d35b58}
.ref-bar-chart{display:flex;align-items:flex-end;gap:18px;min-height:240px;padding:28px 20px 14px;overflow-x:auto;border-top:1px solid var(--line)}
.ref-bar-group{display:grid;grid-template-columns:repeat(5,8px);align-items:end;gap:3px;min-width:72px;height:210px;position:relative;padding-bottom:28px}
.ref-bar-group .bar{display:block;min-height:2px;border-radius:3px 3px 0 0;background:var(--chart-color)}
.ref-bar-group small{position:absolute;bottom:0;left:0;width:72px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--muted);font-size:var(--fs-xs)}
.ref-horizontal-chart{display:grid;gap:9px;padding:16px 20px}
.ref-horizontal-chart>div{display:grid;grid-template-columns:minmax(150px,260px) 1fr 110px;align-items:center;gap:12px}
.ref-horizontal-chart>div>span{height:8px;border-radius:9px;background:#edf1f7;overflow:hidden}
.ref-horizontal-chart i{display:block;height:100%;border-radius:9px;background:#2f80ed}
.ref-horizontal-chart i.negative{background:#d35b58}
.ref-horizontal-chart strong{text-align:right;font-size:var(--fs-s)}
@media(max-width:760px){.ref-horizontal-chart>div{grid-template-columns:1fr}.ref-horizontal-chart strong{text-align:left}}
.finance-area-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;padding:16px}
.finance-area-card{display:flex;align-items:center;justify-content:space-between;gap:18px;min-height:112px;padding:18px;border:1px solid var(--line);border-radius:10px;background:#fff;color:var(--ink);text-decoration:none;transition:border-color .14s,box-shadow .14s,transform .14s}
.finance-area-card:hover{border-color:color-mix(in srgb,var(--brand) 45%,var(--line));box-shadow:0 8px 24px rgba(16,24,40,.08);transform:translateY(-1px)}
.finance-area-card>span:first-child{display:flex;flex-direction:column;gap:7px}
.finance-area-card strong{font-size:var(--fs-lg)}
.finance-area-card small{color:var(--muted);line-height:1.45}
.finance-area-meta{display:grid;grid-template-columns:auto auto;align-items:center;column-gap:6px;min-width:70px;text-align:right}
.finance-area-meta b{font-size:var(--fs-lg);color:var(--brand)}
.finance-area-meta small{grid-column:1;color:var(--faint);font-size:var(--fs-xs)}
.finance-area-meta i{grid-column:2;grid-row:1/3;font-size:var(--fs-xl);font-style:normal;color:var(--faint)}
@media(max-width:760px){.finance-area-grid{grid-template-columns:1fr}.finance-area-card{min-height:96px}}

/* ---------------------------------------------------------------------------------------
   Dokumente sind eckig  (07.08.2026)
   =========================================================================================
   Entscheidung von Niclas: Was ein Dokument IST oder ZEIGT, hat scharfe Ecken. Papier ist
   eckig; eine Abrechnung mit 14px Radius sieht aus wie eine Kachel, nicht wie ein Blatt.

   Gilt an zwei Stellen, und beide sind hier zusammen aufgeschrieben, damit sie nicht
   auseinanderlaufen:

     1. Der Bereich Dokumente in der Verwaltung — unten, ueber data-page.
     2. Das gedruckte Blatt selbst — includes/helpers_ui.php, dok_print_css().

   data-page statt einer eigenen Klasse: header.php schreibt $active ohnehin schon als
   data-page an den <body>. Es braucht also keine PHP-Aenderung, und ein Rueckbau ist genau
   dieser Block.
   --------------------------------------------------------------------------------------- */
body[data-page="postbox"] :is(.card,.btn,.chip,.tag,.pill,input,select,textarea,button),
body[data-page="musterdokumente"] :is(.card,.btn,.chip,.tag,.pill,input,select,textarea,button){border-radius:0}
/* Der Zaehler rechts in der Kartenkopfzeile ist heute eine Pille (999px). */
body[data-page="postbox"] .card-head .tag,
body[data-page="musterdokumente"] .card-head .tag{border-radius:0}

/* ---------------------------------------------------------------------------------------
   Die Übersicht  (07.08.2026)
   =========================================================================================
   Vorher: 16 Blöcke in vier Ebenen untereinander. Zwei Viererreihen Zahlenkacheln, darunter
   zwei halbe Spalten, darunter zwei volle Karten — und rechts neben den unteren Karten blieb
   der halbe Bildschirm leer, während oben alles gedrängt stand.

   Jetzt zwei Spalten mit klarer Aufgabe: links die Arbeit („Was liegt an?"), rechts der
   Bestand. Das Verhältnis 1,55 : 1 ist nicht 2:1 — die rechte Spalte trägt jetzt die
   Miet- und Einheitsübersicht und braucht Platz für den Ring neben den vier Zahlen.
   --------------------------------------------------------------------------------------- */
.db-head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;flex-wrap:wrap}

/* Die Zahlenreihe. auto-fit statt fester Spaltenzahl: Wer Kacheln abwählt, bekommt keine
   Lücken, sondern breitere Reste. */
.db-zahlen{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:12px;margin-bottom:14px}
.db-zahl{display:flex;flex-direction:column;gap:3px;padding:16px 18px;border:1px solid var(--line);border-radius:8px;background:#fff;text-decoration:none;color:inherit;transition:border-color .14s}
.db-zahl:hover{border-color:color-mix(in srgb,var(--brand) 40%,var(--line))}
.db-zahl .k{color:var(--muted);font-size:var(--fs-xs);letter-spacing:.01em}
.db-zahl .v{font-size:var(--fs-xl);font-weight:600;line-height:1.15;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.db-zahl .s{color:var(--faint);font-size:var(--fs-xs)}
.db-zahl.is-warn .v{color:var(--new)}

.db-raster{display:grid;grid-template-columns:1.55fr 1fr;gap:14px;align-items:start}
.db-raster.is-einspaltig{grid-template-columns:1fr}
.db-spalte{display:flex;flex-direction:column;gap:14px;min-width:0}

/* Der Bestand rechts: Ring und Zahlen nebeneinander, darunter die Verteilung. */
.db-bestand-kopf{display:flex;align-items:center;gap:20px;padding:18px 20px}
.db-bestand-zahlen{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 18px;flex:1;min-width:0}
.db-bestand-zahlen .k{display:block;color:var(--muted);font-size:var(--fs-xs)}
.db-bestand-zahlen strong{font-size:var(--fs-lg);font-variant-numeric:tabular-nums}
.db-bestand-zahlen strong.ok{color:var(--ok)}
.db-bestand-zahlen strong.warn{color:#c0392b}
.db-bestand-arten{padding:0 20px 16px;border-top:1px solid var(--line);padding-top:14px}
.db-bestand-arten>.k{display:block;color:var(--muted);font-size:var(--fs-xs);margin-bottom:8px}
.db-bestand-fuss{display:block;padding:11px 20px;border-top:1px solid var(--line);color:var(--brand);font-size:var(--fs-s);font-weight:600;text-decoration:none}
.db-bestand-fuss:hover{background:#FAFAFA}

/* Ein einzelner Kennwert als eigene Karte - fuer alles, was eine Zahl und einen Satz ist. */
.db-kennwert{display:flex;align-items:center;justify-content:space-between;gap:14px}
.db-kennwert .k{color:var(--muted);font-size:var(--fs-s)}

.db-leer{margin-bottom:14px}
.db-leer p{margin:6px 0 0;color:var(--muted);font-size:var(--fs-sm)}

/* „Ansicht anpassen" — ein Aufklapper im Seitenkopf, dort wo die Ansicht entsteht, und
   nicht in den Einstellungen drei Klicks entfernt. */
.db-anpassen{position:relative}
.db-anpassen>summary{cursor:pointer;list-style:none;padding:9px 15px;border:1px solid var(--line);border-radius:7px;background:#fff;font-size:var(--fs-s);font-weight:500;white-space:nowrap}
.db-anpassen>summary::-webkit-details-marker{display:none}
.db-anpassen>summary::after{content:" ▾";color:var(--faint)}
.db-anpassen[open]>summary{border-color:var(--brand)}
.db-anpassen-pop{position:absolute;right:0;top:calc(100% + 6px);z-index:40;width:min(430px,86vw);max-height:70vh;overflow:auto;padding:16px 18px;border:1px solid var(--line);border-radius:9px;background:#fff;box-shadow:0 16px 40px rgba(16,24,40,.14)}
.db-anpassen-pop .hint{margin:0 0 12px;color:var(--muted);font-size:var(--fs-s);line-height:1.45}
.db-anpassen-zeile{display:flex;gap:10px;align-items:flex-start;padding:9px 0;border-bottom:1px solid var(--line);cursor:pointer}
.db-anpassen-zeile:last-of-type{border-bottom:0}
.db-anpassen-zeile input{margin-top:3px;flex:0 0 auto}
.db-anpassen-zeile strong{display:block;font-size:var(--fs-s);font-weight:600}
.db-anpassen-zeile small{display:block;color:var(--muted);font-size:var(--fs-xs);line-height:1.4;margin-top:2px}
.db-anpassen-fuss{display:flex;align-items:center;gap:12px;margin-top:14px;padding-top:12px;border-top:1px solid var(--line)}
.db-anpassen-fuss .hint{margin:0}

.row.is-ueberfaellig{border-left:3px solid #c0392b;padding-left:9px}

@media(max-width:1100px){.db-raster{grid-template-columns:1fr}}
@media(max-width:560px){.db-bestand-kopf{flex-direction:column;align-items:flex-start;gap:14px}.db-bestand-zahlen{width:100%}}

/* Die Balkenliste „Einheiten nach Art" und der Ausklapper „Weitere … anzeigen".
   07.08.2026 aus dem <style>-Block von admin/index.php hierher geholt: Beim Neubau der
   Seite fiel der Block weg, und die Beschriftung stand als „Wohnung7 · 70,0 %" ohne
   Abstand und ohne Balken da. Seitenlokales CSS fuer wiederverwendbare Bausteine gehoert
   in dieses Stylesheet - dann kann es beim naechsten Umbau nicht verlorengehen. */
.dash-bars{display:flex;flex-direction:column;gap:9px}
.dash-bar>div{display:flex;justify-content:space-between;gap:10px;font-size:var(--fs-s)}
.dash-bar strong{font-variant-numeric:tabular-nums;white-space:nowrap}
.dash-track{display:block;height:6px;margin-top:4px;overflow:hidden;border-radius:999px;background:#EEF1F4}
.dash-track i{display:block;height:100%;border-radius:999px;background:var(--brand);transition:width .25s}
.dash-more summary{cursor:pointer;color:var(--brand);font-size:var(--fs-s);font-weight:600;padding:11px 20px;border-top:1px solid var(--line);list-style:none}
.dash-more summary::-webkit-details-marker{display:none}
.dash-more summary::after{content:" ↓"}
.dash-more[open] summary::after{content:" ↑"}

/* „Noch kein Portalzugang" — die Karte, auf der ein Verwalter entscheidet, ob er das
   Portal anbietet (includes/helpers_portalangebot.php, 07.08.2026). Sie stand vorher als
   graues Abzeichen und ein Knopf da. Bewusst keine Werbefarbe: ein ruhiger Kasten in der
   Markenfarbe, der Mangel darunter in Warnton — der Mangel ist die einzige Stelle, an der
   der Verwalter etwas tun MUSS. */
.portalangebot{border:1px solid var(--line);border-left:3px solid var(--brand);border-radius:10px;padding:14px 16px;background:#fff}
.pa-head{display:flex;flex-wrap:wrap;align-items:baseline;gap:8px;margin-bottom:8px}
.pa-head b{font-size:var(--fs-sm);letter-spacing:-.01em}
.pa-tag{font-size:var(--fs-xs);font-weight:600;letter-spacing:0;text-transform:none;color:var(--brand);background:color-mix(in srgb,var(--brand) 9%,white);border-radius:999px;padding:3px 9px;white-space:nowrap}
.pa-lead{margin:0 0 8px;font-size:var(--fs-s);color:var(--muted);line-height:1.5}
.pa-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:7px}
.pa-list li{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 8px;font-size:var(--fs-s);line-height:1.45;padding-left:16px;position:relative}
.pa-list li::before{content:"";position:absolute;left:0;top:.55em;width:6px;height:6px;border-radius:50%;background:var(--brand);opacity:.55}
.pa-list li strong{font-weight:600;color:var(--ink)}
.pa-list li span{color:var(--muted)}
.pa-mangel{margin:12px 0 0;padding:10px 12px;border-radius:8px;background:#FFF8EC;color:#8a5a12;font-size:var(--fs-s);line-height:1.5}
.pa-mangel a{color:#8a5a12;font-weight:600}

/* Leere Zustände (includes/helpers_leerzustand.php, 07.08.2026).
   Zwei Fälle, zwei Bilder — und das ist der ganze Zweck der Trennung:
   .leerzustand           leer mangels Bestand. Richtig, ruhig, mit einem Weg nach vorn.
   .leerzustand.is-mangel leer mangels Regel. Ein Mangel, im Warnton, mit demselben Weg.
   Ein Kunde, der beides gleich sieht, hält einen Defekt für den Normalzustand und wartet
   auf Daten, die nie kommen. */
.leerzustand{display:flex;flex-direction:column;align-items:center;text-align:center;gap:6px;padding:34px 20px}
.leerzustand b{font-size:var(--fs-sm);letter-spacing:-.01em;color:var(--ink)}
.leerzustand p{margin:0;max-width:430px;font-size:var(--fs-s);line-height:1.55;color:var(--muted)}
.leerzustand .btn{margin-top:12px}
.leerzustand.is-mangel{align-items:flex-start;text-align:left;gap:5px;margin:12px;padding:14px 16px;border-radius:9px;border:1px solid #EFD8A8;border-left:3px solid #C99A2E;background:#FFF8EC}
.leerzustand.is-mangel b{color:#7A4E0B}
/* 07.08.2026, nach dem ersten Blick auf das gerenderte Bild: Hier stand max-width:none,
   und der Satz lief ueber die volle Kartenbreite - bei 1400 px eine Zeile, die niemand
   liest. 68ch ist die uebliche Grenze fuer Fliesstext. */
.leerzustand.is-mangel p{color:#8a5a12;max-width:68ch}
/* Und der Knopf war tiefschwarz (.btn = var(--brand)) mitten im Warnkasten - er sah aus,
   als gehoere er nicht dazu. Er traegt jetzt den Warnton der Umgebung und bleibt trotzdem
   der auffaelligste Punkt darin: Ein Mangel hat genau eine Handlung. */
.leerzustand.is-mangel .btn{margin-top:10px;background:#8A5A12;border-color:#8A5A12;color:#fff}
.leerzustand.is-mangel .btn:hover{background:#6F480E;border-color:#6F480E}
.leerzustand-zeile>td{padding:0}

/* =============================================================================================
   PREMIUM-UI · DESIGN-SYSTEM · ZIELBILD FINAL (verbindlich ab 01.10.2026)
   Vorgabe: _warteschlange/premium-ui/PREMIUM-UI-2026-10.md, Bilder zielbild-final/01 bis 11.
   =============================================================================================
   Letzte Schicht der Datei: Sie entscheidet ueber Farbe, Schrift, Abstaende und Bausteine.
   Seiten benutzen die Klassen dieses Abschnitts und setzen KEINE eigenen Farben, Groessen oder
   Abstaende inline. Farbwerte stehen NUR in :root; darunter gibt es nur var(--...).

   FARBE - eine Bedeutung je Farbe:
     --action   Hauptknopf (Verlauf --action-top -> --action), aktiver Reiter, Haekchen.
     --chart    Diagramme, Vorschlaege, ausgewaehlte Zeile, FOKUS.
     --ok       bezahlt, erledigt, Eingang.   Gruen nur fuer Erfolg und Eingaenge.
     --warn     offen, pruefen, Rueckstand.
     --bad      ueberfaellig, Fehler.         Rot nur dafuer; Ausgaben stehen in --text.
     --brand    Kundenfarbe - NUR Logo-Kachel und Login. In .shell loest --brand deshalb auf
                --action auf: Vorlagen, die noch color:var(--brand) inline setzen, bleiben neutral.
   CENT-REGEL: bei Betraegen stehen ",73 EUR" und Einheiten in --text-3 (.cent), Euro in --text.
   SCHRIFT: Hanken Grotesk 400 / 500 / 600 (fonts/hanken-grotesk/), sonst nichts. Stufen:
     Seitentitel 24/30 600 · Kennzahl 28/34 500 · Abschnitt 18/24 600 · Kartentitel 14/20 600 ·
     Text 14/20 · Klein 13/18 · Meta/Label 12/16 · Gruppentitel Navigation 11,5/16.
     Kein Text unter 11,5 px. Ueberall Tabellenziffern.
   ABSTAND: 2 · 4 · 6 · 8 · 10 · 12 · 14 · 16 · 18 · 20 · 24 · 28 · 32 · 40.
   RADIUS: 6 (Taste) · 8 (Knopf, Feld) · 10 (Kasten in Karte) · 14 (Karte) · 16 (Dialog) · 999.
   ============================================================================================= */
:root{
  --bg:#F6F7F9; --surface:#FFFFFF; --subtle:#FAFBFC; --muted-bg:#F0F2F5; --card:#FFFFFF;
  --line:#E7E9EE; --line-2:#F0F2F5;
  --text:#0B1220; --text-2:#4A5263; --text-3:#697182;
  --ink:#0B1220; --muted:#4A5263; --faint:#697182;
  --action:#111A2E; --action-top:#1F2A44; --action-hover:#0B1220; --on-action:#FFFFFF;
  --chart:#3E63DD; --chart-2:#C9D3F5; --chart-soft:#EEF2FC;
  --ok:#0F7A4A; --ok-bg:#E8F6EF;
  --warn:#9A5B00; --warn-bg:#FFF4E0;
  --bad:#C02A1E; --bad-bg:#FDEDEB;
  --info:#3E63DD; --info-bg:#EEF2FC;
  --shadow-karte:0 1px 2px rgba(11,18,32,.04),0 2px 6px -2px rgba(11,18,32,.04);
  --shadow-feld:0 1px 2px rgba(11,18,32,.04);
  --shadow-knopf:0 1px 2px rgba(11,18,32,.2),inset 0 1px 0 rgba(255,255,255,.12);
  --shadow-wahl:0 1px 2px rgba(11,18,32,.08);
  --shadow-pop:0 12px 32px -8px rgba(11,18,32,.18);
  --shadow-dialog:0 24px 64px -12px rgba(11,18,32,.35);
  --fokus-feld:0 0 0 3px rgba(62,99,221,.18);
  --fokus-fehler:0 0 0 3px rgba(192,42,30,.12);
  --fokus-knopf:0 0 0 2px var(--surface),0 0 0 4px var(--chart);
  /* P-A3: Toene der Hinweise nach Bild 11, Skelett, Fotoersatz, dunkle schwebende Flaechen. */
  --hinweis-info-bg:#F3F6FE; --hinweis-info-linie:#DCE4FA; --hinweis-warn-bg:#FFF9EE; --hinweis-warn-linie:#F6E3BF;
  --hinweis-bad-bg:#FEF5F4; --hinweis-bad-linie:#F6D3CF;
  --chart-mitte:#8EA4EC;   /* mittlere Stufe zwischen --chart und --chart-2 (Legende "31-60 Tage", Bild 01) */
  /* P-A5: Anmeldung (Bild 09). */
  --auth-bg-1:#F3F5F8; --auth-bg-2:#E9EDF2; --auth-streif:rgba(255,255,255,.55); --rand-fein:rgba(11,18,32,.06);
  --shadow-anmeldung:0 1px 2px rgba(11,18,32,.05),0 24px 60px -20px rgba(11,18,32,.22); --r-anmeldung:18px;
  --skelett:#F7F8FA; --foto-bg-2:#E6E9EF; --foto-nr:#AEB5C2; --foto-marke:rgba(11,18,32,.42);
  --abdunkeln:rgba(11,18,32,.38); --shadow-schwebend:0 12px 32px -8px rgba(11,18,32,.45);
  --auf-dunkel-linie:rgba(255,255,255,.15); --auf-dunkel-hover:rgba(255,255,255,.1);
  /* Namen aus UI-A und der ersten Fassung bleiben als Verweise gueltig. */
  --neutral-bg:var(--muted-bg); --hover:var(--muted-bg);
  --shadow-1:var(--shadow-feld); --shadow-2:var(--shadow-karte);
  --accent:var(--action); --accent-d:var(--action-hover); --accent-soft:var(--muted-bg);
  --success:var(--ok); --success-soft:var(--ok-bg); --success-line:var(--ok-bg);
  --danger:var(--bad); --danger-soft:var(--bad-bg); --danger-line:var(--line);
  --warning:var(--warn); --warning-soft:var(--warn-bg); --warning-line:var(--warn-bg);
  --font:'Hanken Grotesk','Inter','Segoe UI',system-ui,-apple-system,sans-serif; --serif:var(--font);
  --fs-2xs:11.5px; --fs-xs:12px; --fs-s:13px; --fs-m:13.5px; --fs-sm:14px; --fs-md:15px;
  --fs-lg:18px; --fs-titel:24px; --fs-xl:28px;
  --fs-gruss:36px;   /* nur der Gruss auf der Anmeldung (Bild 09) - keine Textstufe */
  --fs-zier:44px;   /* nur die Hausnummer im Fotoersatz (Abschnitt 7, Bild 04) - keine Textstufe */
  --knopf-h:34px; --control-h:38px; --control-h-sm:28px;
  --r-taste:6px; --control-r:8px; --r-kasten:10px; --radius:14px; --r-dialog:16px; --leiste:244px; --leiste-schmal:74px;
}
.shell{--brand:var(--action);--brand-d:var(--action-hover)}
html{background:var(--bg)}
body,body.ui-reference{background:var(--bg);color:var(--text);font-family:var(--font);font-size:var(--fs-sm);line-height:20px;font-weight:400;font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1}
body.ui-reference .shell,body.ui-reference .content{background:var(--bg)}
small,.small,.muted{color:var(--text-2)}
b,strong{font-weight:600}
.cent{color:var(--text-3)}

/* ICON: Phosphor Regular aus dem Sprite. <svg class="ph"><use href=".../phosphor-sprite.svg#ph-bank"/></svg>
   Farbe ueber currentColor, Standardgroesse 18 px; .ph-14 / .ph-16 / .ph-20 fuer Pille, Knopf, Detail. */
.ph{display:inline-block;flex:0 0 auto;width:18px;height:18px;fill:currentColor;stroke:none;vertical-align:middle}
.ph-14{width:14px;height:14px} .ph-16{width:16px;height:16px} .ph-20{width:20px;height:20px}

/* Ueberschriften: nie in einer Signalfarbe, nie wie ein Link. */
h1,h2,h3,h4,.card-head h2,.card-head h3{color:var(--text)}
h1,.page-head h1,body.ui-reference .page-head h1{font-size:var(--fs-titel);line-height:30px;font-weight:600;letter-spacing:-.025em}
h2,h3,h4{font-size:var(--fs-lg);line-height:24px;font-weight:600;letter-spacing:-.015em}
.card-head h2,.card-head h3,body.ui-reference .card-head h2{font-size:var(--fs-sm);line-height:20px;font-weight:600;letter-spacing:0}
.page-head p,body.ui-reference .page-head p{font-size:var(--fs-m);line-height:20px;color:var(--text-2)}
:is(h1,h2,h3,h4) a:not(.btn):not(.ref-primary):not(.ref-secondary){color:inherit;text-decoration:none}
:is(h1,h2,h3,h4) a:not(.btn):not(.ref-primary):not(.ref-secondary):hover{text-decoration:underline}
.link,.card-head a:not(.btn):not(.ref-primary):not(.ref-secondary){color:var(--text);font-weight:500}

/* Werte. .wert-pos nur fuer Eingaenge und Erfolg; Ausgaben bleiben in Textfarbe; .wert-neg nur
   fuer Ueberfaelliges und Fehler; 0 und 0,00 EUR sind neutral. */
.text-ok,.status-ok,.text-success,.wert-pos{color:var(--ok)}
.text-danger,.status-bad,.text-err,.wert-neg{color:var(--bad)}
.text-warn,.text-warning{color:var(--warn)}
.wert-null,.wert-aus{color:var(--text)}
.alert-success{background:var(--ok-bg);border-color:var(--ok-bg);color:var(--ok)}
.alert-error{background:var(--bad-bg);border-color:var(--bad-bg);color:var(--bad)}

/* STATUS-PILLE: 22 px, Punkt 6 + Wort 12/500. Nie Farbe allein.
     <span class="status is-ok">Bezahlt</span>   is-ok · is-warn · is-bad · is-info · (ohne = neutral) */
.status,.pill-ok,.pill-warn,.pill-err,.pill-mut{display:inline-flex;align-items:center;gap:6px;height:22px;padding:0 8px;border-radius:999px;background:var(--muted-bg);color:var(--text-2);font-size:var(--fs-xs);font-weight:500;letter-spacing:0;text-transform:none;white-space:nowrap}
.status::before,.pill-ok::before,.pill-warn::before,.pill-err::before,.pill-mut::before{content:"";flex:0 0 auto;width:6px;height:6px;border-radius:999px;background:currentColor}
.status.is-ok,.pill-ok{background:var(--ok-bg);color:var(--ok)}
.status.is-warn,.pill-warn{background:var(--warn-bg);color:var(--warn)}
.status.is-bad,.pill-err{background:var(--bad-bg);color:var(--bad)}
.status.is-info{background:var(--chart-soft);color:var(--chart)}

/* =============================================================================================
   KNOPF - 34 px hoch, Radius 8, Text 13,5/500, Icon 15. Beschriftung bricht nie um.
     primaer    .btn  |  .btn-primary  |  .ref-primary     Verlauf, Innenlicht, Schatten;
                hoechstens EINER je Seite
     sekundaer  .btn.btn-ghost  |  .btn-secondary  |  .ref-secondary     weiss mit Rahmen
     Ghost      .btn-geist                    transparent, fuer "Abbrechen"
     Gefahr     .btn-danger                   roter Text, kein roter Block;
                .btn-danger.is-fest nur im Bestaetigungsschritt
     Symbol     .btn-icon                     34 x 34, mit aria-label
     Zustaende  :hover · :focus-visible · :disabled (45 %) · .is-laedt (Kreis + "Speichert ...")
     Groessen   .btn-sm 28 px in Tabellenzeilen · .btn-big 42 px (Login)
   ============================================================================================= */
.btn,.ref-primary,.ref-secondary,
body.ui-reference .btn{
  display:inline-flex;align-items:center;justify-content:center;gap:6px;
  box-sizing:border-box;min-height:var(--knopf-h);height:var(--knopf-h);padding:0 12px;
  border:0;border-radius:var(--control-r);
  background:linear-gradient(180deg,var(--action-top),var(--action));box-shadow:var(--shadow-knopf);color:var(--on-action);
  font:inherit;font-size:var(--fs-m);font-weight:500;line-height:1;letter-spacing:0;
  white-space:nowrap;text-decoration:none;cursor:pointer;vertical-align:middle
}
.ref-primary{color:var(--on-action)!important}
.btn svg,.ref-primary svg,.ref-secondary svg,.btn .ph{width:15px;height:15px;flex:0 0 auto}
.btn:hover,.ref-primary:hover,body.ui-reference .btn:hover{background:var(--action-hover);color:var(--on-action)}
.btn:focus-visible,.ref-primary:focus-visible,.ref-secondary:focus-visible{outline:none;box-shadow:var(--fokus-knopf)}
.btn-ghost,.btn-secondary,.ref-secondary,
body.ui-reference .btn-ghost,body.ui-reference .btn-secondary{
  background:var(--surface);border:1px solid var(--line);color:var(--text)!important;font-weight:500;box-shadow:none
}
.btn-ghost:hover,.btn-secondary:hover,.ref-secondary:hover,
body.ui-reference .btn-ghost:hover,body.ui-reference .btn-secondary:hover{background:var(--subtle);border-color:var(--line);color:var(--text)}
.btn-geist,body.ui-reference .btn-geist{background:transparent;border:0;color:var(--text-2)!important;box-shadow:none}
.btn-geist:hover,body.ui-reference .btn-geist:hover{background:var(--muted-bg);color:var(--text-2)}
.btn-danger,body.ui-reference .btn-danger{background:var(--surface);border:1px solid var(--line);color:var(--bad)!important;font-weight:500;box-shadow:none}
.btn-danger:hover,body.ui-reference .btn-danger:hover{background:var(--bad-bg);border-color:var(--bad-bg);color:var(--bad)}
.btn-danger.is-fest,body.ui-reference .btn-danger.is-fest{background:var(--bad);border:0;color:var(--on-action)!important;box-shadow:var(--shadow-knopf)}
.btn-danger.is-fest:hover,body.ui-reference .btn-danger.is-fest:hover{filter:brightness(.92)}
.btn-sm,body.ui-reference .btn-sm{min-height:var(--control-h-sm);height:var(--control-h-sm);padding:0 10px;font-size:var(--fs-s)}
.btn-icon,body.ui-reference .btn-icon{width:var(--knopf-h);min-width:var(--knopf-h);padding:0}
.btn-icon.btn-sm{width:var(--control-h-sm);min-width:var(--control-h-sm)}
.btn-big,body.ui-reference .btn-big{min-height:42px;height:42px;padding:0 20px;font-size:var(--fs-sm)}
.btn:disabled,.btn[aria-disabled=true],.ref-primary:disabled,.ref-secondary:disabled{opacity:.45;cursor:not-allowed}
.btn.is-laedt,.ref-primary.is-laedt,.ref-secondary.is-laedt{pointer-events:none}
.btn.is-laedt::before,.ref-primary.is-laedt::before,.ref-secondary.is-laedt::before{content:"";flex:0 0 auto;width:14px;height:14px;border:2px solid currentColor;border-right-color:transparent;border-radius:999px;opacity:.8;animation:knopf-laedt .7s linear infinite}
@keyframes knopf-laedt{to{transform:rotate(360deg)}}
@media(prefers-reduced-motion:reduce){.btn.is-laedt::before,.ref-primary.is-laedt::before,.ref-secondary.is-laedt::before{animation-duration:2s}}

/* =============================================================================================
   FELD - 38 px, Radius 8. Label darueber 13/500, Hilfe oder Fehler darunter 12.
   Der Fehlertext sagt, WAS ZU TUN IST ("Bitte eine gueltige PLZ mit 5 Ziffern.").
     <label class="field"><span>PLZ</span><input aria-invalid="true">
       <span class="feld-fehler">Bitte eine gueltige PLZ mit 5 Ziffern.</span></label>
     Einheit rechts:  <span class="feld-einheit"><input ...><span>EUR</span></span>
   Fokus nur bei Tastatur sichtbar (:focus-visible): Rahmen --chart + Ring.
   ============================================================================================= */
/* Spezifitaet mit Absicht niedrig (:where): genau so hoch wie die Grundregel `input{}`, damit
   Sonderfelder mit eigener Klasse (Suche in der Seitenleiste, Zellenfelder) ihr Aussehen behalten. */
input:where(:not([type=checkbox],[type=radio],[type=range],[type=color],[type=file],[type=hidden],[type=submit],[type=button],[type=image])),
select{
  box-sizing:border-box;min-height:var(--control-h);height:var(--control-h);
  padding:0 12px;border:1px solid var(--line);border-radius:var(--control-r);
  background-color:var(--surface);box-shadow:var(--shadow-feld);color:var(--text);font-size:var(--fs-sm);line-height:1.2
}
textarea{border:1px solid var(--line);border-radius:var(--control-r);box-shadow:var(--shadow-feld);font-size:var(--fs-sm);padding:8px 12px}
/* body.ui-reference setzt Radius und Randfarbe mit hoeherer Spezifitaet - nur diese beiden hier
   zuruecknehmen, die Randbreite nicht: ein Feld mit border:0 (Seitenleistensuche) bleibt randlos. */
/* :is, nicht :where - die Altregel "body.ui-reference input{border-radius:2px}" (0,1,2) schlug die :where-Fassung
   (0,1,1): im Verwalterbereich hatten die Felder von P-A1 bis 01.10.2026 abends 2 px Radius statt 8. */
body.ui-reference :is(input,select,textarea){border-radius:var(--control-r);border-color:var(--line)}
select{padding-right:32px;-webkit-appearance:none;appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2212%22 height=%2212%22 viewBox=%220 0 256 256%22 fill=%22%23697182%22%3E%3Cpath d=%22M213.66,101.66l-80,80a8,8,0,0,1-11.32,0l-80-80A8,8,0,0,1,53.66,90.34L128,164.69l74.34-74.35a8,8,0,0,1,11.32,11.32Z%22/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 12px center;background-size:12px}
/* Eingabefeld mit Vorschlagsliste (<input list>): derselbe Chevron wie am <select>. Der Browser zeichnet dort
   sonst bei Fokus sein eigenes schwarzes Dreieck (gemeldet am 01.10.2026 am Feld "Anrede" im Dialog der
   Mieterliste). Der eigene Zeiger bleibt klickbar, nur unsichtbar. */
input[list]{padding-right:32px;background-image:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2212%22 height=%2212%22 viewBox=%220 0 256 256%22 fill=%22%23697182%22%3E%3Cpath d=%22M213.66,101.66l-80,80a8,8,0,0,1-11.32,0l-80-80A8,8,0,0,1,53.66,90.34L128,164.69l74.34-74.35a8,8,0,0,1,11.32,11.32Z%22/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 12px center;background-size:12px}
input[list]::-webkit-calendar-picker-indicator{opacity:0;cursor:pointer}
select[multiple],select[size]:not([size="1"]){height:auto;padding:4px 8px;background-image:none}
input::placeholder,textarea::placeholder{color:var(--text-3);opacity:1}
input:focus,select:focus,textarea:focus,
body.ui-reference input:focus,body.ui-reference select:focus,body.ui-reference textarea:focus{outline:none;border-color:var(--chart);box-shadow:var(--fokus-feld)}
input[aria-invalid=true],select[aria-invalid=true],textarea[aria-invalid=true],.ist-fehler:is(input,select,textarea),
body.ui-reference :is(input,select,textarea)[aria-invalid=true]{border-color:var(--bad);box-shadow:var(--fokus-fehler)}
input:disabled,select:disabled,textarea:disabled,input[readonly]{background-color:var(--muted-bg);color:var(--text-2)}
label.field>span{font-size:var(--fs-s);line-height:18px;font-weight:500;color:var(--text);margin-bottom:6px;letter-spacing:0}
label.field small,.field-hint,.feld-hilfe{display:block;margin-top:6px;font-size:var(--fs-xs);line-height:16px;color:var(--text-3)}
.feld-fehler{display:flex;align-items:center;gap:6px;margin-top:6px;font-size:var(--fs-xs);line-height:16px;font-weight:400;color:var(--bad)}
label.field>.feld-fehler{font-size:var(--fs-xs);font-weight:400;color:var(--bad);margin-bottom:0}
.feld-einheit{position:relative;display:block}
.feld-einheit>input{padding-right:32px}
.feld-einheit>span{position:absolute;right:12px;top:0;height:var(--control-h);display:flex;align-items:center;font-size:var(--fs-sm);color:var(--text-3);pointer-events:none}

/* Datum und Datei: gestaltetes natives Feld als Rueckfall. Der eigene Datumsauswaehler und der
   eigene Upload (P-A4) setzen darauf auf. */
input[type=date],input[type=datetime-local],input[type=month],input[type=time]{font-variant-numeric:tabular-nums}
input[type=date]:invalid::-webkit-datetime-edit,input[type=date].ist-leer::-webkit-datetime-edit{color:var(--text-3)}
input[type=date]::-webkit-calendar-picker-indicator,input[type=datetime-local]::-webkit-calendar-picker-indicator,
input[type=month]::-webkit-calendar-picker-indicator,input[type=time]::-webkit-calendar-picker-indicator{
  opacity:.55;cursor:pointer;padding:4px;margin-right:-4px;border-radius:4px}
input[type=date]::-webkit-calendar-picker-indicator:hover{opacity:1;background:var(--muted-bg)}
input[type=file]{box-sizing:border-box;width:100%;min-height:var(--control-h);padding:4px;border:1px dashed var(--line);border-radius:var(--control-r);background:var(--subtle);color:var(--text-2);font-size:var(--fs-s);cursor:pointer}
input[type=file]:hover{border-color:var(--chart);background:var(--surface)}
input[type=file]::file-selector-button{height:28px;margin-right:12px;padding:0 10px;border:1px solid var(--line);border-radius:var(--r-taste);background:var(--surface);color:var(--text);font:inherit;font-size:var(--fs-s);font-weight:500;cursor:pointer}
input[type=file]::file-selector-button:hover{background:var(--subtle)}

/* Checkbox und Radio: Kaestchen und Text auf einer Linie, ueberall. */
input[type=checkbox],input[type=radio]{width:16px;height:16px;min-width:16px;margin:0;accent-color:var(--action);vertical-align:middle}
label:has(> input[type=checkbox]),label:has(> input[type=radio]),label.check,.check{display:inline-flex;align-items:center;gap:8px;line-height:1.3;cursor:pointer}
label.field:has(> input[type=checkbox]){display:flex}
label.field{min-width:0}
label.field>:is(input,select,textarea){max-width:100%}

/* Filterzeilen: Felder und Knopf auf einer Grundlinie; der Knopf sitzt mittig zur Feldhoehe. */
.filterzeile,.inline-form{display:flex;flex-wrap:wrap;align-items:flex-end;gap:12px}
/* G4 (UI-Durchgang 2): FORMULARRASTER .felder - die Felder einer Zeile stehen auf EINER Label-Linie
   und EINER Feld-Linie, Zeilenabstand 16 px. Zwei Spalten, .is-3 / .is-4 fuer drei und vier; ein
   Kind mit .is-breit nimmt zwei Spalten, mit .is-ganz die ganze Zeile. align-items:end haelt Label
   und Feld als Einheit an der Feld-Linie, auch wenn ein Label umbricht. KEIN Raster im Raster:
   "Anrede | Titel" neben "Telefon" ist ein Vierer-Raster mit einem breiten Kind - auf der
   Mieter-Detailseite standen die Labels sonst 18 px versetzt. Ein Feld mit Hilfetext darunter
   (<small>) gehoert in eine eigene Zeile (.is-ganz), sonst hebt der Text sein Feld ueber die Linie. */
.felder{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));align-items:end;column-gap:12px;row-gap:16px;margin:0 0 16px}
.felder.is-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.felder.is-4{grid-template-columns:repeat(4,minmax(0,1fr))}
:is(body,body.ui-reference) .felder>*{min-width:0;margin:0}
.felder>.is-breit{grid-column:span 2}
.felder>.is-ganz{grid-column:1/-1}
@media(max-width:640px){
 .felder,.felder.is-3,.felder.is-4{grid-template-columns:minmax(0,1fr)}
 .felder>.is-breit{grid-column:auto}
}.filterzeile label.field,.inline-form label.field{margin-bottom:0}
form:has(> label.field) > :is(button,.btn):last-child{align-self:flex-end}
.ref-toolbar:has(label.field){align-items:flex-end}
.fin-filter{min-width:0}
.fin-filter>div:last-child{align-self:end}
body :is(.ref-toolbar,.fin-filter,.filterzeile,.inline-form) :is(.btn,.ref-primary,.ref-secondary){min-height:var(--control-h);height:var(--control-h)}
:is(.ref-toolbar,.fin-filter) label.field{margin-bottom:0}
td :is(.btn,.ref-primary,.ref-secondary){min-height:var(--control-h-sm);height:var(--control-h-sm);padding:0 10px;font-size:var(--fs-s)}

/* =============================================================================================
   SEGMENT - Umschalter mit 28 px: Hintergrund --muted-bg, aktive Option weiss mit Schatten.
     <div class="segment"><a class="is-active" href="...">Kacheln</a><a href="...">Tabelle</a></div>
   REITER - Unterstrich 2 px --action, Zaehler in --text-3.
     <nav class="reiter"><a class="is-active" href="...">Ueberblick</a><a href="...">Einheiten <span>12</span></a></nav>
   ZAEHLER - kleine Pille fuer wartende Arbeit: .zaehler, .zaehler.is-warn, .zaehler.is-bad.
   ============================================================================================= */
.segment{display:inline-flex;gap:2px;padding:2px;border-radius:var(--control-r);background:var(--muted-bg);max-width:100%;overflow-x:auto}
.segment>a,.segment>button{display:inline-flex;align-items:center;gap:6px;height:24px;padding:0 10px;border:0;border-radius:var(--r-taste);background:none;color:var(--text-2);font:inherit;font-size:var(--fs-s);font-weight:500;text-decoration:none;white-space:nowrap;cursor:pointer}
.segment>a:hover,.segment>button:hover{color:var(--text)}
.segment>.is-active,.segment>[aria-current=true],.segment>[aria-current=page],.segment>[aria-pressed=true]{background:var(--surface);color:var(--text);box-shadow:var(--shadow-wahl)}
.segment>:focus-visible{outline:none;box-shadow:var(--fokus-knopf)}
.reiter{display:flex;gap:24px;margin:0 0 16px;border-bottom:1px solid var(--line);overflow-x:auto;scrollbar-width:none}
.reiter::-webkit-scrollbar{display:none}
.reiter>a,.reiter>button{display:inline-flex;align-items:center;gap:6px;flex:0 0 auto;padding:10px 0;border:0;background:none;color:var(--text-2);font:inherit;font-size:var(--fs-sm);font-weight:500;text-decoration:none;white-space:nowrap;cursor:pointer}
.reiter>a>span,.reiter>button>span{font-size:var(--fs-xs);font-weight:400;color:var(--text-3)}
.reiter>a:hover,.reiter>button:hover{color:var(--text)}
.reiter>.is-active,.reiter>[aria-current=page]{color:var(--text);box-shadow:inset 0 -2px 0 var(--action)}
.zaehler{display:inline-flex;align-items:center;justify-content:center;min-width:20px;height:18px;padding:0 6px;border-radius:var(--r-taste);background:var(--muted-bg);color:var(--text-2);font-size:var(--fs-xs);font-weight:500;line-height:1}
.zaehler.is-warn{background:var(--warn-bg);color:var(--warn)}
.zaehler.is-bad{background:var(--bad-bg);color:var(--bad)}

/* =============================================================================================
   RASTER UND KARTE - Inhalt in voller Breite, Rand 24 oben und 32 seitlich, 16 px zwischen den
   Bloecken; ab 1680 px Fensterbreite zentriert und hoechstens 1600 px breit.
   KARTE: Rahmen 1 px --line, Radius 14, Kartenschatten; Innenabstand 20, Tabellen-Karten ohne.
   ============================================================================================= */
.content,body.ui-reference .content{max-width:none;margin:0;padding:24px 32px 40px;box-sizing:border-box;width:100%}
@media(min-width:1680px){.content,body.ui-reference .content{max-width:1600px;margin:0 auto}}
@media(max-width:880px){.content,body.ui-reference .content{padding:16px 16px 40px}}
.card,body.ui-reference .card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow-karte)}
.card-pad,body.ui-reference .card-pad{padding:20px}
.card-head,body.ui-reference .card-head{padding:14px 20px;border-bottom:1px solid var(--line);gap:16px}
.card-head>a,.card-head>.tag,.card-head>.btn,.card-head>span.tag{flex:0 0 auto;white-space:nowrap}
.card-head h2,.card-head h3{min-width:0}
.card-fuss{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:12px 20px;border-top:1px solid var(--line-2);background:var(--subtle);border-radius:0 0 var(--radius) var(--radius);font-size:var(--fs-s);line-height:18px;color:var(--text-2)}
.content>.card+.card,.content>.card+.grid,.content>.grid+.card,.content>.kennzahlen+.card,.content>.hinweis+.card,.content>.card+.hinweis{margin-top:16px}
.stapel{display:flex;flex-direction:column;gap:16px}
.stapel>*{margin-top:0;margin-bottom:0}

/* SEITENKOPF: Titel 24 + Untertitel 13,5 links; rechts Meta, Suche oder Segment.
   Brotkrumen "Bereich > Seite" (13,5 px). Beides zieht in P-A2 in die Kopfleiste um. */
.brotkrumen{display:flex;align-items:center;flex-wrap:wrap;gap:8px;margin-bottom:12px;font-size:var(--fs-m);line-height:20px;color:var(--text-3)}
.brotkrumen a{color:var(--text-3);text-decoration:none}
.brotkrumen a:hover,.brotkrumen>:last-child{color:var(--text)}
.brotkrumen>:last-child{font-weight:500}
.brotkrumen>*+*::before{content:"";display:inline-block;width:5px;height:5px;margin-right:8px;border-right:1.4px solid var(--text-3);border-top:1.4px solid var(--text-3);transform:rotate(45deg) translateY(-1px)}
/* G5 (UI-Durchgang 2): Der Seitenkopf ist ein Raster - links Titel und darunter die Beschreibung,
   rechts die Aktionen. Bis 01.10.2026 war er eine Zeile (flex, space-between): die Beschreibung
   stand als zweites Kind rechtsbuendig NEBEN dem Titel, gemessen auf 46 von 83 Seiten der Navigation.
   Die Form der Seiten bleibt: <div class="page-head"><h1>..</h1><p>..</p>[Aktionen]</div>.
   Kein row-gap: die Aktionen ueberspannen neun Zeilen, und leere Zeilen truegen sonst ihren Abstand. */
.page-head,body.ui-reference .page-head{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:end;column-gap:24px;row-gap:0;margin-bottom:16px}
.page-head>*{grid-column:2;grid-row:1/span 9;min-width:0}
.page-head>:is(h1,p,:first-child){grid-column:1;grid-row:auto}
@media(max-width:640px){
 .page-head,body.ui-reference .page-head{grid-template-columns:minmax(0,1fr)}
 .page-head>*{grid-column:1;grid-row:auto;margin-top:12px}
 .page-head>:is(h1,p,:first-child){margin-top:0}
}
.page-head h1{margin:0 0 2px}
.page-head p{margin:0}
.head-actions{display:flex;align-items:center;gap:8px;flex:0 0 auto}

/* KENNZAHL-KACHEL (Stand P-A1: Label / Wert 28 mit Cent-Regel / Meta; Vergleichspille und
   Verlauf folgen in P-A3).
     <div class="kennzahlen"><div class="kennzahl"><span class="kz-label">Kontostand</span>
       <span class="kz-wert">48.512<span class="cent">,30 EUR</span></span><span class="kz-fuss">11 Konten</span></div></div> */
.kennzahlen{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;margin-bottom:16px}
.kennzahl,a.kennzahl{display:flex;flex-direction:column;gap:6px;padding:18px 20px;border:1px solid var(--line);border-radius:var(--radius);background:var(--surface);box-shadow:var(--shadow-karte);color:inherit;text-decoration:none;min-width:0}
.kz-label{display:flex;align-items:center;gap:6px;font-size:var(--fs-s);line-height:18px;color:var(--text-2)}
.kz-wert{font-size:var(--fs-xl);line-height:34px;font-weight:500;letter-spacing:-.03em;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.kz-wert.is-warn{color:var(--warn)} .kz-wert.is-bad{color:var(--bad)} .kz-wert.is-ok{color:var(--ok)}
.kz-fuss{font-size:var(--fs-xs);line-height:16px;color:var(--text-3)}
@media(max-width:1100px){.kennzahlen{grid-template-columns:repeat(2,minmax(0,1fr))}}
/* Bestehende Kachelreihe der Uebersicht, bis die Seite auf .kennzahlen umgebaut ist. */
.db-zahlen{grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:16px;margin-bottom:16px}
.db-zahl{gap:6px;padding:18px 20px;border:1px solid var(--line);border-radius:var(--radius);background:var(--surface);box-shadow:var(--shadow-karte)}
.db-zahl .k{font-size:var(--fs-s);line-height:18px;font-weight:400;color:var(--text-2)}
.db-zahl .v{font-size:var(--fs-xl);line-height:34px;font-weight:500;letter-spacing:-.03em;color:var(--text)}
.db-zahl .s{font-size:var(--fs-xs);line-height:16px;color:var(--text-3)}

/* HINWEIS: Icon + fette Zeile + Erklaerung + EINE Handlung rechts. Toene: is-info (Vorschlag),
   is-warn, is-bad, is-ok.
     <div class="hinweis is-warn"><svg class="ph">..</svg><div><b>14 Umsaetze sehen doppelt aus</b>
       <span>Sie stammen aus zwei Bankverbindungen.</span></div><a class="btn btn-geist" href="...">Ansehen</a></div> */
.hinweis{display:flex;align-items:flex-start;gap:12px;padding:14px 16px;margin-bottom:16px;border:1px solid var(--line);border-radius:var(--r-kasten);background:var(--subtle);color:var(--text)}
.hinweis>svg{flex:0 0 auto;width:18px;height:18px;margin-top:2px;color:var(--text-2)}
.hinweis>div{display:flex;flex-direction:column;gap:2px;flex:1 1 auto;min-width:0}
.hinweis b,.hinweis strong{font-size:var(--fs-m);line-height:20px;font-weight:500;color:var(--text)}
.hinweis span,.hinweis p{margin:0;font-size:var(--fs-s);line-height:18px;color:var(--text-2)}
.hinweis>.btn,.hinweis>.ref-secondary{flex:0 0 auto}
.hinweis.is-info{background:var(--chart-soft);border-color:var(--chart-2)} .hinweis.is-info>svg{color:var(--chart)}
.hinweis.is-warn{background:var(--warn-bg);border-color:var(--warn-bg)} .hinweis.is-warn>svg{color:var(--warn)}
.hinweis.is-bad{background:var(--bad-bg);border-color:var(--bad-bg)} .hinweis.is-bad>svg{color:var(--bad)}
.hinweis.is-ok{background:var(--ok-bg);border-color:var(--ok-bg)} .hinweis.is-ok>svg{color:var(--ok)}
@media(max-width:680px){.hinweis{flex-wrap:wrap}}
.zeilenhinweis{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;padding:10px 20px;border-bottom:1px solid var(--line);background:var(--subtle);font-size:var(--fs-s);line-height:18px;color:var(--text-2)}
.zeilenhinweis strong,.zeilenhinweis b{color:var(--text);font-weight:500}

/* =============================================================================================
   TABELLE - Kopf 12/500 --text-3 auf --subtle, Betraege rechts mit Tabellenziffern.
   Die dichte Tabelle des Zielbilds (Kopf 38 px, Zeile 48 px, Trenner --line-2, Hover --subtle,
   Auswahl --chart-soft) haengt an class="tabelle": Bestandstabellen mit neun und mehr Spalten
   passen mit diesen Abstaenden nicht in die Seite (gemessen an admin/dokumente.php).
     Betrag      <td class="num">        Aktionen    <td class="aktionen">
     zweizeilig  <span class="zelle-zwei"><b>Name</b><small>Zusatz</small></span>
     Fusszeile   <div class="tabellenfuss"><span>1-25 von 38</span><span class="seiten">...</span></div>
   ============================================================================================= */
th,body.ui-reference th,.ref-table th{font-size:var(--fs-xs);font-weight:500;letter-spacing:0;text-transform:none;color:var(--text-3);background:var(--subtle);white-space:nowrap}
td,body.ui-reference td{font-size:var(--fs-sm)}
td.num,td.n,td.r,td.betrag,th.num,th.n,th.r,th.betrag{text-align:right;font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1;white-space:nowrap}
td.aktionen,th.aktionen{width:1%;white-space:nowrap;text-align:right}
td.aktionen>*+*{margin-left:8px}
tbody tr:hover>td{background:var(--subtle)}
table.tabelle{width:100%;border-collapse:collapse}
table.tabelle th,body.ui-reference table.tabelle th{height:38px;padding:0 12px;border-bottom:1px solid var(--line)}
table.tabelle td,body.ui-reference table.tabelle td{height:48px;padding:6px 12px;border-bottom:0;border-top:1px solid var(--line-2)}
table.tabelle tbody tr:first-child>td{border-top:0}
table.tabelle tr.is-gewaehlt>td,table.tabelle tr[aria-selected=true]>td{background:var(--chart-soft)}
table.tabelle :is(th,td):first-child,body.ui-reference table.tabelle :is(th,td):first-child{padding-left:20px}
table.tabelle :is(th,td):last-child,body.ui-reference table.tabelle :is(th,td):last-child{padding-right:20px}
.zelle-zwei{display:flex;flex-direction:column;gap:2px;min-width:0}
.zelle-zwei>b,.zelle-zwei>strong{font-size:var(--fs-sm);font-weight:500;color:var(--text)}
.zelle-zwei>small,.zelle-zwei>span{font-size:var(--fs-xs);line-height:16px;color:var(--text-3)}
.tabellenfuss,.ref-summary{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;padding:10px 20px;border-top:1px solid var(--line-2);background:var(--subtle);font-size:var(--fs-s);line-height:18px;color:var(--text-2)}
.seiten{display:inline-flex;align-items:center;gap:6px;margin-left:auto}
.seiten>span{margin-right:6px;color:var(--text-2)}
.seiten>.is-aus{opacity:.45;pointer-events:none}
.rowmenu>summary{min-width:var(--control-h-sm);min-height:var(--control-h-sm);justify-content:center;border:0;border-radius:var(--r-taste);cursor:pointer;color:var(--text-3);font-size:var(--fs-lg);line-height:1}
tr:hover .rowmenu>summary,.rowmenu>summary:hover,.rowmenu[open]>summary{color:var(--text);background:var(--muted-bg)}
.rowmenu>summary:focus-visible{outline:none;box-shadow:var(--fokus-knopf)}
.rowmenu-pop{padding:6px;border:1px solid var(--line);border-radius:12px;min-width:200px}

/* =============================================================================================
   MENUE - Popover 240 px, Eintraege 32 px, Gefahr-Eintrag unten abgetrennt. Ohne JavaScript:
     <details class="menue"><summary class="btn btn-ghost">Weitere</summary>
       <div class="menue-pop"><a class="menue-zeile" href="...">Kontoauszug <kbd>K</kbd></a>
         <hr class="menue-trenner"><a class="menue-zeile is-gefahr" href="...">Loeschen</a></div></details>
   ============================================================================================= */
.menue{position:relative;display:inline-block}
.menue>summary{list-style:none}
.menue>summary::-webkit-details-marker{display:none}
.menue>summary::after{content:"";width:6px;height:6px;margin-left:2px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:translateY(-2px) rotate(45deg);opacity:.7}
.menue[open]>summary::after{transform:translateY(2px) rotate(-135deg)}
.menue>summary.btn-icon::after{content:none}
.menue-pop{position:absolute;right:0;top:calc(100% + 4px);z-index:60;width:240px;max-width:90vw;padding:6px;border:1px solid var(--line);border-radius:12px;background:var(--surface);box-shadow:var(--shadow-pop);display:flex;flex-direction:column;gap:2px;font-size:var(--fs-m)}
.menue-pop.is-links{right:auto;left:0}
.menue-zeile{display:flex;align-items:center;gap:10px;width:100%;min-height:32px;padding:0 8px;border:0;border-radius:var(--r-taste);background:none;color:var(--text);font:inherit;font-size:var(--fs-m);text-align:left;text-decoration:none;white-space:nowrap;cursor:pointer}
.menue-zeile>kbd{margin-left:auto}
.menue-zeile:hover,.menue-zeile:focus-visible{background:var(--muted-bg);outline:none}
.menue-zeile.is-gefahr{color:var(--bad)}
.menue-zeile.is-gefahr:hover{background:var(--bad-bg)}
.menue-trenner{height:1px;margin:4px 0;border:0;background:var(--line-2)}
kbd,.tastenkuerzel{display:inline-flex;align-items:center;height:18px;padding:0 4px;border:1px solid var(--line);border-radius:var(--r-taste);background:var(--surface);color:var(--text-3);font-family:inherit;font-size:var(--fs-2xs);line-height:1;white-space:nowrap}

/* =============================================================================================
   LEERZUSTAND - gestrichelte Flaeche, Symbol in einer 48-px-Kachel, Titel 15/600, ein Satz,
   ein Knopf. .empty-state ist dieselbe Komponente unter altem Namen. Pro Karte hoechstens EINER.
   Eine Kachel mit 0 ist ein ruhiger, gueltiger Zustand, kein Fehler.
   ============================================================================================= */
.leerzustand,.empty-state{display:flex;flex-direction:column;align-items:center;text-align:center;gap:8px;padding:32px 24px}
.leerzustand.is-flaeche{margin:16px;border:1px dashed var(--line);border-radius:var(--r-kasten);background:var(--subtle)}
.leerzustand b,.empty-state b{font-size:var(--fs-md);font-weight:600;color:var(--text)}
.leerzustand p,.empty-state p{margin:0;max-width:320px;font-size:var(--fs-s);line-height:18px;color:var(--text-2)}
.leerzustand .btn,.empty-state .btn,.leerzustand .ref-primary,.leerzustand .ref-secondary{margin-top:8px}
.empty-state .es-icon,.leerzustand .lz-symbol{width:48px;height:48px;border:1px solid var(--line);border-radius:var(--radius);background:var(--surface);box-shadow:var(--shadow-feld);display:grid;place-items:center;color:var(--text-2);margin-bottom:6px}
:is(.leerzustand,.empty-state) + :is(.leerzustand,.empty-state){display:none}
.action-card.is-zero{opacity:1}
.action-card.is-zero .ic{background:var(--muted-bg);color:var(--text-2)}
.action-card.is-zero .n{color:var(--text)}
.action-card.is-urgent .ic{background:var(--bad-bg);color:var(--bad)}
.action-card.is-urgent .n{color:var(--bad)}

/* =============================================================================================
   AUFKLAPPER - Chevron plus Text, ohne "+", in Textfarbe.
     <details class="aufklapper"><summary>Mieter einer Einheit zuordnen</summary> ... </details>
   Auch ein <summary> OHNE Klasse bekommt dieses Aussehen; Farbe und Groesse stehen mit Vorrang,
   weil Vorlagen sie noch inline setzen. Summaries mit eigener Klasse bleiben unberuehrt.
   ============================================================================================= */
details.aufklapper>summary,
details:not(.menue):not(.rowmenu):not(.db-anpassen):not(.dash-more):not(.operator-settings):not(.operator-technical)>summary:not([class]){
  display:flex;align-items:center;gap:8px;list-style:none;cursor:pointer;
  color:var(--text)!important;font-size:var(--fs-sm)!important;font-weight:500;line-height:20px;
  padding:4px 0;border-radius:4px
}
details.aufklapper>summary::-webkit-details-marker,
details:not(.menue):not(.rowmenu):not(.db-anpassen):not(.dash-more):not(.operator-settings):not(.operator-technical)>summary:not([class])::-webkit-details-marker{display:none}
details.aufklapper>summary::before,
details:not(.menue):not(.rowmenu):not(.db-anpassen):not(.dash-more):not(.operator-settings):not(.operator-technical)>summary:not([class])::before{
  content:"";flex:0 0 auto;width:6px;height:6px;margin:0 4px;
  border-right:1.5px solid var(--text-3);border-bottom:1.5px solid var(--text-3);
  transform:rotate(-45deg);transition:transform .15s
}
details.aufklapper[open]>summary::before,
details[open]:not(.menue):not(.rowmenu):not(.db-anpassen):not(.dash-more):not(.operator-settings):not(.operator-technical)>summary:not([class])::before{transform:rotate(45deg) translate(-1px,-1px)}
details.aufklapper>summary:focus-visible,
details:not(.menue):not(.rowmenu):not(.db-anpassen):not(.dash-more):not(.operator-settings):not(.operator-technical)>summary:not([class]):focus-visible{outline:none;box-shadow:var(--fokus-knopf)}

/* =============================================================================================
   SEITENLEISTE UND KOPFLEISTE (P-A2, Zielbild FINAL, Bilder 02 und 10; Markup includes/header.php)
   Seitenleiste 244 px auf dem Grund der Seite, rechts 1 px Linie; sie scrollt selbst.
     Logo-Kachel 28 px + Name des Mandanten + Bereich · Suche 34 px mit "Strg K" ·
     Menuepunkte 34 px · Gruppentitel 11,5/500 · der aktive Punkt ist weiss mit Schatten und
     Ring, sein Icon die Fill-Variante · UNTERPUNKTE klappen nur unter dem aktiven Punkt auf:
     Einzug 30 px, senkrechte Fuehrungslinie, aktiver Unterpunkt mit --muted-bg und 2-px-Strich
     in --action; geschlossene Punkte mit Unterseiten tragen ein Caret · Zaehler nur fuer
     wartende Arbeit (Bank in Warnfarbe) · unten Einstellungen und der Benutzer mit Hilfe.
   Die Kundenfarbe (--brand) erscheint NUR in der Logo-Kachel.
   Kopfleiste 56 px weiss: links die Brotkrumen Bereich > Liste > Datensatz (13,5), buendig mit dem
   Seitentitel - "Leiste einklappen" steht seit UI-Durchgang 2 unten in der Seitenleiste;
   rechts die Aktionen der Seite ($kopf_aktionen), hoechstens ein Hauptknopf, ganz rechts.
   "body" vor einzelnen Regeln: header.php setzt die Suche inline NACH diesem Stylesheet.
   ============================================================================================= */
.sidebar{width:var(--leiste);padding:14px 12px;gap:0;background:var(--bg);border-right:1px solid var(--line);overflow:hidden}
@media(min-width:881px){.shell{margin-left:var(--leiste)}}
.brand{display:flex;flex-direction:row;align-items:center;gap:10px;padding:6px 8px;margin:0;border-bottom:0;border-radius:var(--r-kasten);color:var(--text);text-decoration:none}
.logo-kachel{display:grid;place-items:center;flex:0 0 28px;width:28px;height:28px;border-radius:var(--control-r);background:var(--brand);box-shadow:inset 0 0 0 1px rgba(255,255,255,.12);color:var(--on-action);font-size:var(--fs-xs);font-weight:600;line-height:1;overflow:hidden}
.logo-kachel.hat-bild{background:var(--surface);box-shadow:inset 0 0 0 1px var(--line)}
.logo-kachel.ist-plattform{background:none;box-shadow:none}
.logo-kachel img{display:block;width:100%;height:100%;object-fit:contain}
.brand-text{display:flex;flex-direction:column;flex:1 1 auto;min-width:0;line-height:1.25}
.brand-name{display:block;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;max-width:none;font-size:var(--fs-m);font-weight:600;line-height:18px;color:var(--text)}
.brand-sub{font-size:var(--fs-xs);line-height:16px;color:var(--text-3)}

body .sidebar-search{flex:0 0 auto;min-height:var(--knopf-h);height:var(--knopf-h);margin:12px 0 0;padding:0 10px;gap:8px;border:1px solid var(--line);border-radius:var(--control-r);background:var(--surface)}
body .sidebar-search:focus-within{border-color:var(--chart);box-shadow:var(--fokus-feld)}
body .sidebar-search button{width:16px;flex:0 0 16px;color:var(--text-3)}
body .sidebar-search .ph{width:16px;height:16px}
body .sidebar-search input{font-size:var(--fs-m);color:var(--text)}
body .sidebar-search input::placeholder{color:var(--text-3)}
.tasten{display:inline-flex;gap:2px;flex:0 0 auto}

/* G6 (UI-Durchgang 2): Die LISTE rollt, Kopf (Mandant, Suche) und Fuss (Einstellungen, Benutzer)
   stehen fest. Bei 816 px Fensterhoehe passte die Gruppe "Alltag" nicht mehr hinein und endete ohne
   jedes Zeichen mitten in der Liste. Der Verlauf am unteren Rand sagt, dass es weitergeht; den
   aktiven Punkt holt bausteine.js in den sichtbaren Teil. Der seitliche Rand von 2 px laesst der
   Kontur des aktiven Punkts Platz - eine rollende Flaeche schneidet sonst ihren Schatten ab. */
body .nav{display:flex;flex-direction:column;gap:2px;margin:14px -2px 0;padding:0 2px;flex:1 1 auto;min-height:0;overflow-x:hidden;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:var(--line) transparent}
body .nav:not(.nav-fuss)::after{content:"";position:sticky;bottom:0;flex:0 0 24px;margin-top:-8px;background:linear-gradient(to bottom,transparent,var(--bg));pointer-events:none}
/* Der Fuss darf wachsen (Einstellungen klappen ihre Unterpunkte dort auf), aber nie die Liste verdraengen. */
body .nav.nav-fuss{flex:0 0 auto;max-height:50%;margin-top:0;padding-top:8px}
.nav-gruppe{padding:16px 10px 6px;font-size:var(--fs-2xs);line-height:16px;font-weight:500;color:var(--text-3)}
.nav-item{position:relative;display:flex;align-items:center;gap:10px;height:var(--knopf-h);min-height:var(--knopf-h);padding:0 10px;border-radius:var(--control-r);font-size:var(--fs-sm);font-weight:400;color:var(--text-2);text-decoration:none}
.nav-item .ph{width:18px;height:18px;flex:0 0 18px;color:var(--text-3)}
.nav-item>span:first-of-type{flex:1 1 auto;min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.nav-item>.ph:last-child{width:12px;height:12px;flex:0 0 12px;color:var(--text-3)}
.nav-item:hover{background:var(--muted-bg);color:var(--text)}
.nav-item.is-active{background:var(--surface);color:var(--text);font-weight:500;box-shadow:var(--shadow-wahl),0 0 0 1px var(--line)}
.nav-item.is-active .ph{color:var(--text)}
.nav-badge{flex:0 0 auto;margin-left:auto;min-width:20px;height:18px;padding:0 6px;border-radius:var(--r-taste);background:var(--muted-bg);color:var(--text-2);font-size:var(--fs-2xs);font-weight:600;line-height:18px;text-align:center}
.nav-badge.is-warn{background:var(--warn-bg);color:var(--warn)}
.nav-unter{position:relative;display:flex;flex-direction:column;gap:2px;margin:4px 0 6px;padding-left:calc(18px + 12px)}
.nav-unter::before{content:"";position:absolute;left:18px;top:4px;bottom:4px;width:1px;background:var(--line)}
.nav-unterpunkt{position:relative;display:flex;align-items:center;min-height:28px;padding:0 10px;border-radius:var(--r-taste);font-size:var(--fs-m);color:var(--text-2);text-decoration:none}
.nav-unterpunkt:hover{background:var(--muted-bg);color:var(--text)}
.nav-unterpunkt.is-active{background:var(--muted-bg);color:var(--text);font-weight:500}
.nav-unterpunkt.is-active::before{content:"";position:absolute;left:-13px;top:6px;bottom:6px;width:2px;border-radius:2px;background:var(--action)}

.sidebar-user{flex:0 0 auto;display:flex;align-items:center;gap:10px;margin-top:10px;padding:12px 8px 2px;border-top:1px solid var(--line)}
.sidebar-user .avatar{width:28px;height:28px;flex:0 0 28px;border-radius:999px;background:var(--muted-bg);color:var(--action);font-size:var(--fs-2xs);font-weight:600}
.sidebar-user .who{display:flex;flex-direction:column;flex:1 1 auto;min-width:0;line-height:1.25}
.sidebar-user .who strong{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font-size:var(--fs-s);font-weight:500;color:var(--text)}
.sidebar-user .who small{font-size:var(--fs-xs);color:var(--text-3)}
body .sidebar-tool{width:28px;height:28px;flex:0 0 28px;border:0;border-radius:var(--r-taste);background:none;color:var(--text-3)}
body .sidebar-tool:hover{background:var(--muted-bg);border:0;color:var(--text)}
body .sidebar-tool .ph{width:18px;height:18px}
@media(min-width:881px){
 .navcollapse:checked ~ .sidebar{padding:14px 12px}
 .navcollapse:checked ~ .sidebar :is(.tasten,.who,.nav-badge,.nav-gruppe,.nav-unter,.sidebar-tool:not(.logout):not(.leiste-klappen)){display:none}
 .navcollapse:checked ~ .sidebar .nav-item>.ph:last-child:not(:first-child){display:none}
 .navcollapse:checked ~ .sidebar .brand{justify-content:center;padding:6px 0}
 .navcollapse:checked ~ .sidebar .nav-item{justify-content:center;padding:0}
 .navcollapse:checked ~ .sidebar .sidebar-user{flex-direction:column;padding:12px 0 2px}
 .navcollapse:checked ~ .sidebar .sidebar-user .sidebar-tool+.sidebar-tool{margin-left:0}
}

/* G1 (UI-Durchgang 2): Der Knopf "Leiste einklappen" stand bis 01.10.2026 VOR den Brotkrumen und
   schob sie 48 px nach rechts aus der Flucht des Seitentitels. Er steht jetzt unten in der
   Seitenleiste neben Hilfe und Abmelden (.leiste-klappen); die Kopfleiste beginnt mit dem Pfad. */
.topbar{position:sticky;top:0;z-index:30;display:flex;align-items:center;gap:12px;min-height:56px;height:56px;padding:0 32px;background:var(--surface);backdrop-filter:none;border-bottom:1px solid var(--line)}
body .sidebar-tool.leiste-klappen{cursor:pointer}
/* Drei Werkzeuge im Fuss (Hilfe, Einklappen, Abmelden): enger gestellt, damit der Name daneben ganz lesbar bleibt. */
.sidebar-user{gap:8px;padding:12px 4px 2px}
.sidebar-user .sidebar-tool+.sidebar-tool{margin-left:-6px}
@media(max-width:880px){body .sidebar-tool.leiste-klappen{display:none}}
/* ---- Meldungen (Premium-UI B5, Bild 07): Auswahlliste links, die gewaehlte Meldung rechts. ----
   .split.is-detail-breit dreht das Verhaeltnis des .split um: 340 px Liste, der Rest gehoert dem Detail.
   Die Liste ist eine TABELLE mit einer Zelle je Zeile (table.auswahlliste) - eine Zeile ist ein Datensatz,
   und J/K (data-zeilenwahl) sowie die Zaehlung der Zeilen in den Waechtern haengen daran.
   Schmal (unter 880 px) steht nur EINES von beiden: ohne .hat-detail die Liste, mit .hat-detail die Meldung. */
.split.is-detail-breit{grid-template-columns:340px minmax(0,1fr)}
.auswahl{padding:0;overflow:hidden}
.auswahl-kopf{display:flex;flex-direction:column;gap:8px;padding:10px 12px;border-bottom:1px solid var(--line);background:var(--subtle)}
.auswahl-kopf :is(.zaehlreiter,.chips){margin:0}
:is(body,body.ui-reference) .auswahl-suche label.field{margin:0}
table.auswahlliste{width:100%;border-collapse:collapse;table-layout:fixed}
:is(body,body.ui-reference) table.auswahlliste td{padding:0;border:0;border-bottom:1px solid var(--line-2);background:none}
table.auswahlliste a{display:flex;flex-direction:column;gap:6px;padding:14px 16px 14px 14px;border-left:2px solid transparent;color:var(--text);text-decoration:none}
table.auswahlliste a:hover{background:var(--subtle)}
table.auswahlliste a:focus-visible{outline:none;box-shadow:inset var(--fokus-feld)}
table.auswahlliste tr:is(.is-gewaehlt,[aria-selected=true]) a{border-left-color:var(--action);background:var(--chart-soft)}
.al-kopf{display:flex;justify-content:space-between;align-items:baseline;gap:8px}
.al-kopf>b{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:var(--fs-sm);line-height:20px;font-weight:500}
.al-kopf>small{flex:0 0 auto;font-size:var(--fs-xs);line-height:16px;color:var(--text-3);white-space:nowrap}
.al-zusatz{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:var(--fs-s);line-height:18px;color:var(--text-3)}
.al-marken{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.al-foto{display:inline-flex;align-items:center;gap:4px;font-size:var(--fs-xs);line-height:16px;color:var(--text-3)}
.auswahl>.pager{margin:0;padding:10px 12px}
.meldung{min-width:0}
.meldung-kopf{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;flex-wrap:wrap}
.meldung-kopf>div:first-child{flex:1 1 320px;min-width:0}
:is(body,body.ui-reference) .card .meldung-titel{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:0 0 6px;font-size:var(--fs-lg);line-height:24px;font-weight:600;letter-spacing:-.02em}
.meldung-aktionen{display:flex;align-items:center;gap:8px;flex:0 0 auto}
.meldung-inhalt{border-top:1px solid var(--line-2)}
.meldung-text{margin:0;font-size:var(--fs-sm);line-height:22px;color:var(--text)}
.meldung-spalten{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:12px;align-items:start}
.meldung-zeilenende{display:flex;align-items:center;justify-content:flex-end;gap:6px;flex-wrap:wrap}
.meldung-feld-breit{flex:1 1 280px}
.metazeile{display:flex;flex-wrap:wrap;gap:4px 14px;margin:0;font-size:var(--fs-s);line-height:18px;color:var(--text-2)}
.metazeile>span{display:inline-flex;align-items:center;gap:6px;min-width:0}
.metazeile a{color:inherit}
.faktenleiste{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:12px;padding:12px 14px;border:1px solid var(--line-2);border-radius:var(--r-kasten);background:var(--subtle)}
.faktenleiste>.wertpaar{white-space:normal}
/* Fortschritt als Balken: jeder Schritt ein Abschnitt, erreichte in der Aktionsfarbe (Bild 07). */
.schrittbalken{display:flex;gap:12px;margin:0;padding:0;list-style:none}
.schrittbalken>li{flex:1 1 0;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:var(--fs-xs);line-height:16px;color:var(--text-3)}
.schrittbalken>li::before{content:"";display:block;height:4px;margin-bottom:6px;border-radius:999px;background:var(--line)}
.schrittbalken>li.is-erreicht{color:var(--text);font-weight:500}
.schrittbalken>li.is-erreicht::before{background:var(--action)}
/* Verlauf: wer hat wann was geschrieben. .kuerzel ist das runde Namenskuerzel davor. */
.chronik{display:flex;flex-direction:column;gap:14px;margin:0;padding:0;list-style:none}
.chronik>li{display:flex;gap:12px}
.chronik p{margin:0;font-size:var(--fs-s);line-height:20px;color:var(--text)}
.chronik .chronik-kopf{color:var(--text-3)}
.chronik-kopf>b{font-weight:500;color:var(--text)}
.kuerzel{display:inline-flex;align-items:center;justify-content:center;flex:0 0 28px;width:28px;height:28px;border-radius:999px;background:var(--muted-bg);color:var(--text-2);font-size:var(--fs-2xs);font-weight:600}
@media(max-width:880px){
 .split.is-detail-breit{grid-template-columns:minmax(0,1fr)}
 .split.is-detail-breit:not(.hat-detail)>.meldung{display:none}
 .split.is-detail-breit.hat-detail>.auswahl{display:none}
 .split.is-detail-breit:not(.hat-detail) table.auswahlliste tr:is(.is-gewaehlt,[aria-selected=true]) a{border-left-color:transparent;background:none}
 .schrittbalken{gap:6px}
 .meldung-aktionen{flex:1 1 100%;flex-wrap:wrap}
}
/* G10 (UI-Durchgang 2): Der Umgebungsbalken (LOKAL / PROBE / PRODUKTION - auf produktion sieht ihn nur der
   Betreiber, includes/helpers_umgebung.php) beginnt neben der Seitenleiste, nicht hinter ihr: bis dahin lag
   sein linkes Stueck unter der Leiste und sein Text stand neben der Mitte des Inhalts. */
@media(min-width:881px){
 body:has(>.sidebar) .umgebung-balken{margin-left:var(--leiste)}
 body:has(>#navcollapse:checked) .umgebung-balken{margin-left:var(--leiste-schmal)}
}
/* G3: der EINE Rueckweg einer Detailseite - von header.php gezeichnet, direkt ueber dem Titel. */
.zurueck{display:flex;align-items:center;gap:6px;width:fit-content;margin:0 0 8px;font-size:var(--fs-s);line-height:18px;color:var(--text-2);text-decoration:none}
.zurueck .ph{width:14px;height:14px;flex:0 0 14px}
.zurueck:hover{color:var(--text)}
.zurueck:focus-visible{outline:0;border-radius:var(--r-taste);box-shadow:var(--fokus-knopf)}
.kopf-krumen{flex:1 1 auto;min-width:0;margin:0;flex-wrap:nowrap;overflow:hidden;white-space:nowrap}
.kopf-aktionen{display:flex;align-items:center;gap:8px;flex:0 0 auto;margin-left:auto}
@media(max-width:880px){
 .topbar{padding:0 16px;gap:8px}
 .sidebar{width:min(300px,86vw)}
}

/* =============================================================================================
   MOBIL (390 px) - nie waagrecht scrollen. Breite Tabellen scrollen in ihrer Karte oder in
   .tabelle-scroll; <table class="tabelle-karten"> mit data-label je Zelle wird zu Karten.
   Kennzahlen im 2er-Raster. Die Leiste unten kommt mit P-A2.
   ============================================================================================= */
.tabelle-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}
img,video,canvas,svg{max-width:100%}
@media(max-width:880px){
 .page-head{flex-wrap:wrap;gap:12px}
 .page-head .head-actions,.head-actions{flex-wrap:wrap;gap:8px}
}
@media(max-width:680px){
 .kennzahlen{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
 /* Karten statt Zeilen. Die Vorsilbe traegt die Klasse zweimal: die dichte Tabelle bindet ihre Zellen mit
    body.ui-reference table.tabelle :is(th,td):first-child (0,3,3) - eine einfache Klasse (0,1,2) verlor
    dagegen, und jede Zelle blieb 48 px hoch mit Linie (gemessen bei 390 px, 01.10.2026). */
 :is(body,body.ui-reference) table.tabelle-karten.tabelle-karten,:is(body,body.ui-reference) table.tabelle-karten.tabelle-karten tbody,:is(body,body.ui-reference) table.tabelle-karten.tabelle-karten tr,:is(body,body.ui-reference) table.tabelle-karten.tabelle-karten td{display:block;width:100%;height:auto}
 :is(body,body.ui-reference) table.tabelle-karten.tabelle-karten thead{display:none}
 :is(body,body.ui-reference) table.tabelle-karten.tabelle-karten tr{padding:12px 0;border-bottom:1px solid var(--line)}
 :is(body,body.ui-reference) table.tabelle-karten.tabelle-karten tr:last-child{border-bottom:0}
 :is(body,body.ui-reference) table.tabelle-karten.tabelle-karten td{display:flex;align-items:center;justify-content:flex-end;gap:0;min-height:0;padding:4px 16px;border:0;background:none;text-align:right;white-space:normal}
 :is(body,body.ui-reference) table.tabelle-karten.tabelle-karten td::before{content:attr(data-label);flex:0 0 auto;margin-right:auto;padding-right:12px;color:var(--text-3);font-size:var(--fs-xs);font-weight:500;text-align:left}
 :is(body,body.ui-reference) table.tabelle-karten.tabelle-karten td:not([data-label])::before,:is(body,body.ui-reference) table.tabelle-karten.tabelle-karten td.aktionen::before{content:none}
 :is(body,body.ui-reference) table.tabelle-karten.tabelle-karten td:not([data-label]){justify-content:flex-start;text-align:left}
 :is(body,body.ui-reference) table.tabelle-karten.tabelle-karten td.aktionen{justify-content:flex-end}
 :is(body,body.ui-reference) table.tabelle-karten.tabelle-karten tr.tabelle-gruppe{padding:0;border-bottom:0}
}

/* =============================================================================================
   BAUSTEINE NACH ABSCHNITT 6 (P-A3, 01.10.2026) - Vorbild ist Bild 11 und die jeweilige Seite.
   Jeder Baustein steht auf admin/ui-muster.php in jedem Zustand. Dialog, Seitenpanel, Toast und
   Aktionsleiste bekommen ihr Verhalten mit P-A4; die Klassen stehen hier schon vollstaendig,
   damit die Seiten gegen sie gebaut werden koennen. Bewacht von scripts/test-ui-bausteine.php.
   ============================================================================================= */

/* ---- Hinweis: Toene nach Bild 11, die EINE Handlung steht rechts ---- */
.hinweis.is-info{background:var(--hinweis-info-bg);border-color:var(--hinweis-info-linie)}
.hinweis.is-warn{background:var(--hinweis-warn-bg);border-color:var(--hinweis-warn-linie)}
.hinweis.is-bad{background:var(--hinweis-bad-bg);border-color:var(--hinweis-bad-linie)}
.hinweis-aktion{flex:0 0 auto;padding:0;border:0;background:none;color:var(--text);font:inherit;font-size:var(--fs-s);line-height:20px;font-weight:500;text-decoration:none;white-space:nowrap;cursor:pointer}
.hinweis-aktion:hover{text-decoration:underline}
.hinweis-aktion:focus-visible{outline:none;border-radius:var(--r-taste);box-shadow:var(--fokus-knopf)}

/* ---- Reiter mit Zaehler (Bank): aktive Option weiss mit Rahmen, die Zahl als .zaehler ---- */
.zaehlreiter{display:flex;gap:4px;flex-wrap:wrap;margin:0 0 12px}
.zaehlreiter>a,.zaehlreiter>button{display:inline-flex;align-items:center;gap:6px;min-height:32px;padding:0 10px;border:1px solid transparent;border-radius:var(--control-r);background:none;color:var(--text-2);font:inherit;font-size:var(--fs-s);text-decoration:none;white-space:nowrap;cursor:pointer}
.zaehlreiter>a:hover,.zaehlreiter>button:hover{color:var(--text)}
.zaehlreiter>.is-active,.zaehlreiter>[aria-current=page],.zaehlreiter>[aria-selected=true]{border-color:var(--line);background:var(--surface);color:var(--text);font-weight:500}
.zaehlreiter>:focus-visible{outline:none;box-shadow:var(--fokus-knopf)}

/* ---- Filter-Chips: gestrichelt = noch nicht gesetzt, gesetzt = --chart-soft mit x ----
   .chips und .chip gab es schon vor dem Zielbild (acht Listen, Zustand .is-active). Beide Namen
   bedeuten dasselbe: .is-active ist "gesetzt". Ohne diese Gleichsetzung stand der gewaehlte
   Filter mit gestricheltem Rand da (gemessen 01.10.2026, eine Stunde nach P-A3). Der Behaelter
   bringt keinen Aussenabstand mit - er steht in den Listen in einer Werkzeugzeile. */
.chips{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:0}
.chip{display:inline-flex;align-items:center;gap:6px;height:30px;padding:0 10px;border:1px dashed var(--line);border-radius:999px;background:var(--surface);color:var(--text-2);font:inherit;font-size:var(--fs-s);font-weight:500;text-decoration:none;white-space:nowrap;cursor:pointer}
.chip:hover{border-color:var(--text-3);color:var(--text)}
.chip.is-gesetzt,.chip.is-active{border:1px solid var(--chart);background:var(--chart-soft);color:var(--chart)}
.chip:focus-visible{outline:none;box-shadow:var(--fokus-knopf)}
.chip-weg{display:inline-flex;align-items:center;justify-content:center;width:16px;height:16px;margin-right:-4px;padding:0;border:0;border-radius:999px;background:none;color:inherit;font:inherit;line-height:1;text-decoration:none;cursor:pointer}
.chip-weg:hover{background:var(--chart-2)}
.chips-zurueck{margin-left:auto;padding:0;border:0;background:none;color:var(--text-2);font:inherit;font-size:var(--fs-s);text-decoration:none;white-space:nowrap;cursor:pointer}
.chips-zurueck:hover{color:var(--text);text-decoration:underline}

/* ---- Tabelle: sortierbare Spalte mit Caret, Auswahlspalte ---- */
table.tabelle th>a,table.tabelle th>button{display:inline-flex;align-items:center;gap:4px;padding:0;border:0;background:none;color:inherit;font:inherit;text-decoration:none;white-space:nowrap;cursor:pointer}
table.tabelle th>a:hover,table.tabelle th>button:hover,table.tabelle th[aria-sort]{color:var(--text)}
table.tabelle th[aria-sort]>:is(a,button)::after{content:"";width:0;height:0;border-left:4px solid transparent;border-right:4px solid transparent;border-top:5px solid currentColor}
table.tabelle th[aria-sort=ascending]>:is(a,button)::after{transform:rotate(180deg)}
table.tabelle :is(th,td).wahl{width:40px;padding-right:0}

/* ---- Seiten-Fussleiste: links "1-25 von 38", Mitte Seitenzahlen, rechts "Pro Seite" ---- */
.seitenzahlen{display:inline-flex;align-items:center;gap:4px}
.seitenzahlen>a,.seitenzahlen>span{display:inline-flex;align-items:center;justify-content:center;min-width:30px;height:30px;padding:0 6px;border:1px solid transparent;border-radius:var(--control-r);color:var(--text-2);font-size:var(--fs-s);text-decoration:none}
.seitenzahlen>a:hover{background:var(--muted-bg);color:var(--text)}
.seitenzahlen>[aria-current=page]{border-color:var(--line);background:var(--surface);color:var(--text);font-weight:500}
.seitenzahlen>a:focus-visible{outline:none;box-shadow:var(--fokus-knopf)}
.pro-seite{display:inline-flex;align-items:center;gap:8px;white-space:nowrap}
.pro-seite>select,body.ui-reference .pro-seite>select{width:auto;height:30px;min-height:30px;padding:0 28px 0 10px;font-size:var(--fs-s)}

/* ---- Aktionsleiste (Mehrfachauswahl): schwebt unten mittig, dunkel ---- */
.aktionsleiste{position:fixed;left:50%;bottom:28px;z-index:70;transform:translateX(-50%);display:flex;align-items:center;gap:6px;max-width:calc(100vw - 32px);padding:6px 6px 6px 14px;border-radius:12px;background:var(--action);box-shadow:var(--shadow-schwebend);color:var(--on-action);font-size:var(--fs-m);white-space:nowrap;overflow-x:auto}
.aktionsleiste>b{margin-right:2px;padding-right:8px;border-right:1px solid var(--auf-dunkel-linie);font-weight:500}
.aktionsleiste>a,.aktionsleiste>button{display:inline-flex;align-items:center;gap:6px;height:32px;padding:0 10px;border:0;border-radius:var(--control-r);background:none;color:inherit;font:inherit;text-decoration:none;cursor:pointer}
.aktionsleiste>a:hover,.aktionsleiste>button:hover{background:var(--auf-dunkel-hover)}
.aktionsleiste>:focus-visible{outline:2px solid var(--chart-2);outline-offset:1px}
.aktionsleiste kbd{border-color:var(--auf-dunkel-linie);background:none;color:inherit}

/* ---- Kennzahl: Vergleich als Pille + Meta, Verlauf als Flaeche unten (44 px, randlos) ---- */
.kz-fuss{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.kz-vergleich{display:inline-flex;align-items:center;gap:2px;height:20px;padding:0 6px;border-radius:var(--r-taste);background:var(--muted-bg);color:var(--text-2);font-size:var(--fs-xs);font-weight:500;white-space:nowrap}
.kz-vergleich.is-auf,.kz-vergleich.is-ok{background:var(--ok-bg);color:var(--ok)}
.kz-vergleich.is-ab,.kz-vergleich.is-bad{background:var(--bad-bg);color:var(--bad)}
.kz-vergleich.is-warn{background:var(--warn-bg);color:var(--warn)}
.kennzahl.hat-verlauf{padding-bottom:0;overflow:hidden}
.kennzahl.hat-verlauf>svg.dg{flex:0 0 auto;width:calc(100% + 40px);max-width:none;height:44px;margin:6px -20px 0}

/* ---- Diagramm: Inline-SVG vom Server (includes/helpers_diagramm.php), hier nur der Sitz ---- */
svg.dg{display:block;width:100%;height:auto;overflow:visible}
svg.dg text{font-family:inherit;font-variant-numeric:tabular-nums}
.diagramm{position:relative}
.diagramm-legende{display:flex;align-items:center;gap:16px;flex-wrap:wrap;font-size:var(--fs-xs);line-height:16px;color:var(--text-2)}
.diagramm-legende>span{display:inline-flex;align-items:center;gap:6px}
.diagramm-legende>span::before{content:"";width:14px;height:0;border-top:2px solid var(--chart)}
.diagramm-legende>.is-soll::before{border-top:1px dashed var(--text-3)}
.dg-tip{position:absolute;z-index:5;display:flex;flex-direction:column;gap:2px;padding:8px 10px;border:1px solid var(--line);border-radius:var(--r-kasten);background:var(--surface);box-shadow:var(--shadow-pop);font-size:var(--fs-xs);line-height:16px;color:var(--text-2);white-space:nowrap;pointer-events:none}
.dg-tip>b{font-weight:500;color:var(--text)}

/* ---- Objektfoto (Abschnitt 7): 16:10; ohne Foto die Hausnummer auf --muted-bg ---- */
.objektfoto{position:relative;display:block;width:100%;aspect-ratio:16/10;overflow:hidden;background:var(--muted-bg)}
.objektfoto>img{display:block;width:100%;height:100%;object-fit:cover}
.objektfoto.is-ersatz{display:flex;flex-direction:column;justify-content:flex-end;gap:2px;padding:14px;background:linear-gradient(180deg,var(--muted-bg),var(--foto-bg-2))}
.objektfoto-nr{font-size:var(--fs-zier);line-height:44px;font-weight:400;letter-spacing:-.04em;color:var(--foto-nr)}
.objektfoto-zeile{font-size:var(--fs-xs);line-height:16px;font-weight:500;color:var(--text-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.objektfoto-aktion{position:absolute;top:10px;right:10px;display:inline-flex;align-items:center;gap:4px;min-height:22px;padding:2px 8px;border:1px solid var(--line);border-radius:var(--r-taste);background:var(--surface);color:var(--text-2);font:inherit;font-size:var(--fs-2xs);font-weight:500;text-decoration:none;white-space:nowrap;cursor:pointer}
.objektfoto-aktion:hover{color:var(--text);border-color:var(--text-3)}
.objektfoto-marke{position:absolute;left:8px;bottom:8px;display:inline-flex;align-items:center;gap:4px;padding:2px 8px;border-radius:var(--r-taste);background:var(--foto-marke);color:var(--on-action);font-size:var(--fs-2xs);font-weight:500;white-space:nowrap}
.objektfoto.is-klein{flex:0 0 auto;width:56px;aspect-ratio:1;border-radius:var(--control-r)}
.objektfoto.is-klein.is-ersatz{align-items:center;justify-content:center;padding:0}
.objektfoto.is-klein .objektfoto-nr{font-size:var(--fs-lg);line-height:24px;letter-spacing:0}
.objektfoto.is-klein .objektfoto-zeile{display:none}

/* ---- Fotoreihe (Meldung, Zaehler, Uebergabe): Vorschaubilder 180 x 128, "+2" bei mehr ---- */
.fotoreihe{display:flex;gap:8px;flex-wrap:wrap}
.fotoreihe>a,.fotoreihe>button{position:relative;display:block;flex:0 0 auto;width:180px;height:128px;padding:0;border:0;border-radius:var(--r-kasten);overflow:hidden;background:var(--muted-bg);cursor:zoom-in}
.fotoreihe img{display:block;width:100%;height:100%;object-fit:cover}
.fotoreihe>:focus-visible{outline:none;box-shadow:var(--fokus-knopf)}
.foto-mehr{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:var(--abdunkeln);color:var(--on-action);font-size:var(--fs-lg);font-weight:500}

/* ---- Toast: dunkel, unten, mit Rueckgaengig (Verhalten und die 6 s: P-A4) ---- */
.toast-stapel{position:fixed;left:50%;bottom:24px;z-index:90;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:8px;pointer-events:none}
.toast{display:flex;align-items:center;gap:12px;max-width:calc(100vw - 32px);padding:10px 10px 10px 14px;border-radius:12px;background:var(--action);box-shadow:var(--shadow-schwebend);color:var(--on-action);font-size:var(--fs-m);line-height:18px;pointer-events:auto}
.toast>svg{flex:0 0 auto;width:18px;height:18px;color:var(--chart-2)}
.toast-aktion{flex:0 0 auto;padding:4px 8px;border:0;border-radius:var(--r-taste);background:none;color:var(--chart-2);font:inherit;font-weight:500;text-decoration:none;white-space:nowrap;cursor:pointer}
.toast-zu{flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;padding:0;border:0;border-radius:var(--r-taste);background:none;color:inherit;opacity:.7;cursor:pointer}
.toast-aktion:hover,.toast-zu:hover{background:var(--auf-dunkel-hover);opacity:1}
.toast-aktion:focus-visible,.toast-zu:focus-visible{outline:2px solid var(--chart-2);outline-offset:1px}
@media (prefers-reduced-motion:no-preference){.toast{animation:toast-rein .18s ease-out}}
@keyframes toast-rein{from{opacity:0;transform:translateY(8px)}}

/* ---- Tooltip: dunkel, 12 px, Pfeil - data-tip="..." an Symbolknoepfen. Nicht an Elementen,
        die selbst ::before/::after tragen (.status, .menue>summary, .btn.is-laedt). ---- */
:where([data-tip]){position:relative}
[data-tip]::after{content:attr(data-tip);position:absolute;left:50%;bottom:calc(100% + 8px);z-index:80;transform:translateX(-50%);padding:6px 8px;border-radius:var(--r-taste);background:var(--action);color:var(--on-action);font-size:var(--fs-xs);line-height:16px;font-weight:400;letter-spacing:0;white-space:nowrap;pointer-events:none;opacity:0;visibility:hidden;transition:opacity .12s}
[data-tip]::before{content:"";position:absolute;left:50%;bottom:calc(100% + 2px);z-index:80;transform:translateX(-50%);border-left:6px solid transparent;border-right:6px solid transparent;border-top:6px solid var(--action);pointer-events:none;opacity:0;visibility:hidden;transition:opacity .12s}
[data-tip]:hover::after,[data-tip]:hover::before,[data-tip]:focus-visible::after,[data-tip]:focus-visible::before,[data-tip].is-offen::after,[data-tip].is-offen::before{opacity:1;visibility:visible}
[data-tip][data-tip-seite=unten]::after{bottom:auto;top:calc(100% + 8px)}
[data-tip][data-tip-seite=unten]::before{bottom:auto;top:calc(100% + 2px);transform:translateX(-50%) rotate(180deg)}

/* ---- Dialog (600 px, Radius 16) und Seitenpanel (480 px rechts): das native <dialog> -
        Esc schliesst, der Fokus bleibt im Dialog. Gleicher Aufbau: Kopf, Inhalt, Fussleiste. ---- */
dialog.dialog,dialog.drawer{padding:0;border:0;background:var(--surface);color:var(--text);box-shadow:var(--shadow-dialog);overflow:hidden}
dialog.dialog{width:600px;max-width:calc(100vw - 32px);max-height:calc(100vh - 64px);border-radius:var(--r-dialog)}
dialog.dialog.is-breit{width:760px}
dialog.drawer{inset:0 0 0 auto;width:480px;max-width:100%;height:100vh;height:100dvh;max-height:none;margin:0;border-radius:0}
dialog.dialog[open],dialog.drawer[open]{display:flex;flex-direction:column}
/* 100 % statt 100vw: 100vw zaehlt die Bildlaufleiste mit - in einem schmalen Fenster mit Leiste war das Panel links
   um deren Breite abgeschnitten. Und: oeffnet ein Dialog, bevor ein Feld darin steht, bekommt er selbst den Fokus -
   ohne den Rahmen des Browsers um das ganze Panel (beides gemeldet von P-B, 01.10.2026). */
dialog.dialog:focus-visible,dialog.drawer:focus-visible{outline:0}
/* Ein Formular um Kopf, Inhalt und Fuss ist der natuerliche Aufbau (der Absendeknopf steht im Fuss). Ohne diese
   Regel ist das <form> ein gewoehnlicher Block zwischen dem Dialog (flex, overflow:hidden) und seinen drei Teilen:
   der Inhalt rollt nicht, und der Fuss liegt UNTER dem Dialog - mit der Maus nicht erreichbar (live gemessen am
   01.10.2026 an admin/mieter.php: Dialog 32-868, Fuss 1048-1139). */
/* Zwei Regeln, keine Liste: scripts/test-dialog-formular.php sucht je Art den Waehler unmittelbar vor der Klammer. */
dialog.dialog>form{display:flex;flex-direction:column;flex:1 1 auto;min-height:0}
dialog.drawer>form{display:flex;flex-direction:column;flex:1 1 auto;min-height:0}
dialog.dialog::backdrop,dialog.drawer::backdrop{background:var(--abdunkeln);-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)}
.dialog-kopf{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;flex-wrap:wrap;padding:20px 24px 16px;border-bottom:1px solid var(--line-2)}
.dialog-kopf>div{flex:1 1 0;min-width:0}
.dialog-kopf h2{margin:0;font-size:var(--fs-lg);line-height:24px;font-weight:600;letter-spacing:-.015em;color:var(--text)}
.dialog-kopf p{margin:4px 0 0;font-size:var(--fs-s);line-height:18px;color:var(--text-2)}
.dialog-kopf>.schritte{flex:1 0 100%}
.dialog-inhalt{flex:1 1 auto;min-height:0;display:flex;flex-direction:column;gap:16px;padding:20px 24px;overflow-y:auto}
.dialog-fuss{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;padding:14px 24px;border-top:1px solid var(--line-2);background:var(--subtle)}
.dialog-status{display:inline-flex;align-items:center;gap:6px;font-size:var(--fs-xs);line-height:16px;color:var(--text-3)}
.dialog-aktionen{display:flex;align-items:center;gap:8px;margin-left:auto}
.schritte{display:flex;align-items:center;gap:10px;margin:0;padding:0;list-style:none;counter-reset:schritt}
.schritte>li{display:flex;align-items:center;gap:8px;font-size:var(--fs-s);line-height:18px;color:var(--text-3);white-space:nowrap;counter-increment:schritt}
.schritte>li:not(:last-child){flex:1 1 auto}
.schritte>li::before{content:counter(schritt);display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;width:22px;height:22px;box-sizing:border-box;border:1px solid var(--line);border-radius:999px;font-size:var(--fs-xs);font-weight:600;color:var(--text-3)}
.schritte>li:not(:last-child)::after{content:"";flex:1 1 auto;min-width:16px;height:1px;margin-left:2px;background:var(--line)}
.schritte>li.is-aktiv{color:var(--text);font-weight:500}
.schritte>li.is-aktiv::before{border-color:var(--action);background:var(--action);color:var(--on-action)}
.schritte>li.is-fertig{color:var(--text)}
.schritte>li.is-fertig::before{content:"\2713";border-color:var(--ok);background:var(--ok);color:var(--on-action)}

/* ---- Detail-Panel (Split-View): 420 px rechts neben der Liste (Bank, Meldungen) ---- */
.split{display:grid;grid-template-columns:minmax(0,1fr) 420px;gap:16px;align-items:start}
.detail-panel{position:sticky;top:72px;display:flex;flex-direction:column;max-height:calc(100vh - 88px);border:1px solid var(--line);border-radius:var(--radius);background:var(--surface);box-shadow:var(--shadow-karte);overflow:hidden}

/* ---- Laden: Skelett-Zeilen in echter Zeilenhoehe, kein Spinner ueber der Seite ---- */
.skelett-zeile{display:flex;align-items:center;gap:12px;min-height:48px;padding:8px 0;border-bottom:1px solid var(--line-2)}
.skelett-text{flex:1 1 auto;display:flex;flex-direction:column;gap:6px;min-width:0}
.skelett{display:block;height:10px;border-radius:999px;background:linear-gradient(90deg,var(--muted-bg),var(--skelett),var(--muted-bg));background-size:200% 100%}
.skelett.is-kreis{flex:0 0 auto;width:32px;height:32px;background:var(--muted-bg)}
.skelett.is-lang{width:45%} .skelett.is-mittel{width:30%} .skelett.is-kurz{flex:0 0 auto;width:72px}
@media (prefers-reduced-motion:no-preference){.skelett:not(.is-kreis){animation:skelett-zieht 1.4s linear infinite}}
@keyframes skelett-zieht{from{background-position:200% 0}to{background-position:-200% 0}}

/* ---- Fortschritt: 6 px, Radius 999 - das native <progress class="fortschritt" value max> ---- */
progress.fortschritt{-webkit-appearance:none;appearance:none;display:block;width:100%;height:6px;border:0;border-radius:999px;background:var(--muted-bg);color:var(--chart);overflow:hidden}
progress.fortschritt::-webkit-progress-bar{border-radius:999px;background:var(--muted-bg)}
progress.fortschritt::-webkit-progress-value{border-radius:999px;background:currentColor}
progress.fortschritt::-moz-progress-bar{border-radius:999px;background:currentColor}
progress.fortschritt.is-ok{color:var(--ok)} progress.fortschritt.is-warn{color:var(--warn)} progress.fortschritt.is-bad{color:var(--bad)}

/* ---- Feld mit Icon links ---- */
.feld-icon{position:relative;display:block}
.feld-icon>svg{position:absolute;left:12px;top:50%;width:16px;height:16px;transform:translateY(-50%);color:var(--text-3);pointer-events:none}
.feld-icon>input,body.ui-reference .feld-icon>input{padding-left:32px}

/* ---- Musterseite (admin/ui-muster.php): Raster und Beschriftung der Zustaende ---- */
.muster-raster{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;align-items:start}
.muster-raster>.card{margin:0}
.muster-raster>.is-breit{grid-column:1/-1}
.muster-reihe.is-hoch{align-items:flex-start;min-height:240px}
.muster-reihe{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.muster-reihe>small,.muster-zustand{flex:0 0 72px;font-size:var(--fs-xs);line-height:16px;color:var(--text-3)}
.muster-buehne{position:relative;min-height:120px;border:1px dashed var(--line);border-radius:var(--r-kasten);background:var(--subtle);overflow:hidden}
.muster-buehne>.aktionsleiste,.muster-buehne>.toast-stapel{position:absolute}

@media (max-width:1100px){
 .split{grid-template-columns:minmax(0,1fr)}
 .detail-panel{position:static;max-height:none}
 .muster-raster{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:640px){
 dialog.dialog,dialog.dialog.is-breit{width:100%;max-width:100%;height:100vh;height:100dvh;max-height:none;margin:0;border-radius:0}
 .dialog-kopf{padding:16px 16px 12px} .dialog-inhalt{padding:16px} .dialog-fuss{padding:12px 16px}
 .chips-zurueck{margin-left:0}
 .tabellenfuss>.pro-seite{display:none}
 .fotoreihe>a,.fotoreihe>button{width:calc(50% - 4px);height:auto;aspect-ratio:180/128}
 .aktionsleiste{bottom:16px}
}
.muster-klassen{flex:1 1 240px;min-width:0;font-size:var(--fs-xs);line-height:16px;color:var(--text-3);text-align:right}
.muster-raster .card-head{flex-wrap:wrap}
.muster-raster .card-head h2{flex:0 0 auto}
.muster-icons{display:flex;flex-wrap:wrap;gap:4px}
.muster-icons>span{display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:var(--r-taste);color:var(--text-2)}
.muster-icons>span:hover,.muster-icons>span:focus-visible{background:var(--muted-bg);color:var(--text);outline:none}
.muster-buehne>dialog.dialog{position:static;max-width:calc(100% - 32px);height:auto;margin:16px auto;border-radius:var(--r-dialog)}
.muster-buehne>dialog.drawer{position:static;max-width:100%;height:auto;margin:0 0 0 auto}
.muster-buehne:has(>.toast-stapel),.muster-buehne:has(>.aktionsleiste){min-height:88px}
/* Die Tabelle rollt in ihrem Rahmen; positionierte Kinder (z. B. .sr-only im Tabellenkopf) duerfen die Seite nicht verbreitern. */
.tabelle-scroll{position:relative}
.zelle-zwei>b,.zelle-zwei>strong{line-height:18px}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}

/* ---- Seitenbausteine fuer Bank (Bild 02) und Uebersicht (Bild 01) - Wunsch von P-B, 01.10.2026 ---- */
.konten{display:flex;gap:12px;margin:0 0 16px;overflow-x:auto;scrollbar-width:none}
.konten::-webkit-scrollbar{display:none}
.konto{flex:1 1 0;min-width:168px;display:flex;flex-direction:column;gap:4px;padding:10px 14px;border:1px solid var(--line);border-radius:12px;background:var(--surface);box-shadow:var(--shadow-karte);color:var(--text);text-decoration:none}
.konto:hover{border-color:var(--text-3)}
.konto.is-active,.konto[aria-current=true]{border-color:var(--action);box-shadow:inset 0 0 0 1px var(--action)}
.konto:focus-visible{outline:none;box-shadow:var(--fokus-knopf)}
.konto-name{display:flex;align-items:center;gap:6px;font-size:var(--fs-xs);line-height:16px;font-weight:500;color:var(--text-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.konto-zeile{display:flex;align-items:baseline;justify-content:space-between;gap:8px}
.konto-wert{font-size:var(--fs-sm);line-height:20px;font-weight:600;white-space:nowrap;font-variant-numeric:tabular-nums}
.konto-zusatz{font-size:var(--fs-xs);color:var(--text-3);white-space:nowrap}
table.tabelle tr.tabelle-gruppe>:is(td,th),body.ui-reference table.tabelle tr.tabelle-gruppe>:is(td,th){height:auto;padding-top:12px;padding-bottom:6px;border-top:0;background:none;font-size:var(--fs-xs);font-weight:500;color:var(--text-3);text-align:left}
table.tabelle tr.is-gewaehlt>td:first-child{box-shadow:inset 3px 0 0 var(--chart)}
.richtung,.symbolkachel{display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;width:32px;height:32px;background:var(--muted-bg);color:var(--text-2)}
.richtung{border-radius:999px}
.richtung.is-ein{background:var(--ok-bg);color:var(--ok)}
.symbolkachel{border-radius:var(--control-r)}
.symbolkachel.is-rund{width:36px;height:36px;border-radius:999px}
.symbolkachel.is-info{background:var(--chart-soft);color:var(--chart)}
.symbolkachel.is-ok{background:var(--ok-bg);color:var(--ok)}
.symbolkachel.is-warn{background:var(--warn-bg);color:var(--warn)}
.symbolkachel.is-bad{background:var(--bad-bg);color:var(--bad)}
.aufgaben,.legende,.pruefliste{margin:0;padding:0;list-style:none}
.aufgaben>li{display:flex;align-items:center;gap:12px;padding:10px 0;border-top:1px solid var(--line-2)}
.aufgaben>li:first-child{border-top:0}
.aufgaben>li>.zelle-zwei,.wahlkarte>.zelle-zwei{flex:1 1 auto}
.legende>li{display:flex;align-items:center;gap:8px;padding:6px 0;font-size:var(--fs-s);line-height:18px;color:var(--text-2)}
.legende>li::before{content:"";flex:0 0 auto;width:8px;height:8px;border-radius:2px;background:var(--text-3)}
.legende>li>b{margin-left:auto;font-weight:500;color:var(--text);font-variant-numeric:tabular-nums}
.legende>.is-chart::before{background:var(--chart)} .legende>.is-chart-2::before{background:var(--chart-mitte)}
.legende>.is-ok::before{background:var(--ok)} .legende>.is-warn::before{background:var(--warn)} .legende>.is-bad::before{background:var(--bad)}
svg.dg-balken{height:8px;border-radius:999px;overflow:hidden}
.detail-betrag{font-size:var(--fs-xl);line-height:34px;font-weight:500;letter-spacing:-.03em;color:var(--text);white-space:nowrap;font-variant-numeric:tabular-nums}
.detail-betrag.is-ein{color:var(--ok)}
.kasten{display:flex;flex-direction:column;gap:4px;padding:10px 12px;border:1px solid var(--line-2);border-radius:var(--control-r);background:var(--subtle);font-size:var(--fs-s);line-height:18px;color:var(--text)}
.kasten>small{font-size:var(--fs-xs);line-height:16px;color:var(--text-3)}
.abschnittstitel{display:flex;align-items:center;gap:8px;margin:0;font-size:var(--fs-sm);line-height:20px;font-weight:600;letter-spacing:0;color:var(--text)}
.abschnittstitel>:is(.status,.zaehler,a,small){margin-left:auto;font-weight:500}
.wahlkarte{display:flex;align-items:center;gap:12px;width:100%;padding:12px 14px;border:1px solid var(--line);border-radius:var(--r-kasten);background:var(--surface);color:var(--text);font:inherit;text-align:left;text-decoration:none;cursor:pointer}
.wahlkarte:hover{border-color:var(--text-3)}
.wahlkarte.is-gewaehlt,.wahlkarte[aria-checked=true],.wahlkarte:has(input:checked){border-color:var(--chart);box-shadow:inset 0 0 0 .5px var(--chart)}
.wahlkarte:focus-visible{outline:none;box-shadow:var(--fokus-knopf)}
.pruefliste{display:flex;flex-direction:column;gap:8px}
.pruefliste>li{display:flex;align-items:center;gap:8px;font-size:var(--fs-s);line-height:18px;color:var(--text-2)}
.pruefliste>li>svg{flex:0 0 auto;color:var(--ok)}
.pruefliste>li.is-offen>svg{color:var(--text-3)}
.optionszeile{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:8px 12px;border:1px solid var(--line);border-radius:var(--control-r);background:var(--surface);color:var(--text);font:inherit;font-size:var(--fs-s);line-height:18px;text-align:left;text-decoration:none;cursor:pointer}
.optionszeile:hover{border-color:var(--text-3);background:var(--subtle)}
.optionszeile>small{font-size:var(--fs-xs);color:var(--text-3);white-space:nowrap}
.optionszeile:focus-visible{outline:none;box-shadow:var(--fokus-knopf)}
.kbd-zeile{display:flex;align-items:center;gap:6px;flex-wrap:wrap;font-size:var(--fs-xs);line-height:18px;color:var(--text-3)}
.fortschritt-text{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-bottom:6px;font-size:var(--fs-xs);line-height:16px;color:var(--text-2)}
progress.fortschritt.is-zelle{display:inline-block;width:72px;margin-right:8px;vertical-align:middle}
@media (max-width:640px){
 .split>.detail-panel{display:none}
 .split>.detail-panel.is-offen{display:flex;position:fixed;inset:0;z-index:85;max-height:none;border:0;border-radius:0}
 .konto{min-width:144px}
}
.stapel>.status,.stapel>.zaehler,.stapel>.kz-vergleich{align-self:flex-start}

/* =============================================================================================
   BAUSTEINE MIT VERHALTEN (P-A4, 01.10.2026) - das Verhalten steht in assets/js/bausteine.js.
   Hier: der eigene Datumsauswaehler und der Upload. Dialog, Seitenpanel, Toast, Menue, Tooltip
   und Aktionsleiste haben ihre Klassen seit P-A3.
   ============================================================================================= */

/* ---- Datumsauswaehler: JEDES <input type="date"> (seit UI-Durchgang 2, G7; vorher nur mit data-datum;
        data-datum-nativ nimmt ein Feld aus) - das Feld bleibt das des Browsers
        (tippen geht wie immer), nur der Kalender ist der eigene. Er steht fest zum Fenster. ---- */
.kalender{position:fixed;z-index:95;width:268px;padding:12px;border:1px solid var(--line);border-radius:12px;background:var(--surface);box-shadow:var(--shadow-pop);color:var(--text)}
.kalender-kopf{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:8px}
.kalender-kopf>b{font-size:var(--fs-m);line-height:20px;font-weight:600}
.kalender-raster{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:2px}
.kalender-wochentag{display:flex;align-items:center;justify-content:center;height:28px;font-size:var(--fs-2xs);font-weight:500;color:var(--text-3)}
.kalender-tag{height:32px;padding:0;border:0;border-radius:var(--control-r);background:none;color:var(--text);font:inherit;font-size:var(--fs-s);font-variant-numeric:tabular-nums;cursor:pointer}
.kalender-tag:hover{background:var(--muted-bg)}
.kalender-tag.is-heute{box-shadow:inset 0 0 0 1px var(--line);font-weight:500}
.kalender-tag.is-gewaehlt,.kalender-tag.is-gewaehlt:hover{background:var(--action);color:var(--on-action);font-weight:500}
.kalender-tag:disabled{opacity:.35;cursor:not-allowed}
.kalender-tag:focus-visible{outline:none;box-shadow:var(--fokus-knopf)}
.kalender-fuss{display:flex;justify-content:space-between;gap:8px;margin-top:8px;padding-top:8px;border-top:1px solid var(--line-2)}

/* ---- Upload: <label class="upload"><input type="file">…</label> - Ziehen oder Klicken ---- */
.upload{position:relative;display:flex;flex-direction:column;align-items:center;gap:6px;padding:20px 16px;border:1px dashed var(--line);border-radius:var(--r-kasten);background:var(--subtle);color:var(--text-2);font-size:var(--fs-s);line-height:18px;text-align:center;cursor:pointer}
.upload:hover,.upload.is-ziel{border-color:var(--chart);background:var(--chart-soft)}
.upload:focus-within{border-color:var(--chart);box-shadow:var(--fokus-feld)}
.upload>input[type=file]{position:absolute;width:1px;height:1px;min-height:0;padding:0;border:0;overflow:hidden;clip-path:inset(50%)}
.upload>svg{width:20px;height:20px;color:var(--text-3)}
.upload>b{font-size:var(--fs-m);line-height:20px;font-weight:500;color:var(--text)}
.upload>small{font-size:var(--fs-xs);line-height:16px;color:var(--text-3)}
.upload-liste{align-self:stretch;margin:8px 0 0;padding:0;list-style:none;text-align:left}
.upload-liste>li{display:flex;align-items:center;gap:8px;padding:6px 0;border-top:1px solid var(--line-2);font-size:var(--fs-s);color:var(--text)}
.upload-liste>li>span{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.upload-liste>li>small{flex:0 0 auto;color:var(--text-3)}

/* ---- Zeilenwahl mit J / K: die Zeile unter dem Cursor der Tastatur ---- */
[data-zeilenwahl] tbody tr[aria-selected=true]>td:first-child{box-shadow:inset 3px 0 0 var(--chart)}

/* =============================================================================================
   ANMELDUNG UND DIE SEITEN VOR DER ANMELDUNG (P-A5, 01.10.2026) - Bild 09.
   Der Aufbau der heutigen Anmeldung bleibt (Entscheidung Niclas): Karte mit zwei Haelften, links
   Marke, Datum, Gruss, drei Vorteile und die Haeuser-Linienzeichnung, rechts das Formular, unten
   grau der Registrierungscode. Veredelt: Schrift, Felder, Radius 18, weicher Schatten, keine
   Grossbuchstaben-Knoepfe. --brand faerbt hier nur noch die Marke selbst.
   ============================================================================================= */
.auth{gap:18px;padding:24px 16px;background:repeating-linear-gradient(115deg,transparent 0 220px,var(--auth-streif) 220px 420px),linear-gradient(180deg,var(--auth-bg-1),var(--auth-bg-2))}
.auth-shell{grid-template-columns:minmax(0,1fr) 500px;max-width:1120px;min-height:620px;border:1px solid var(--rand-fein);border-radius:var(--r-anmeldung);background:var(--surface);box-shadow:var(--shadow-anmeldung);overflow:hidden}
.auth-hero{justify-content:flex-start;padding:40px 40px 0;border-right:1px solid var(--line-2);background:var(--surface)}
.auth-hero .auth-brand{position:static;margin:0 0 40px;gap:16px}
.auth-hero .auth-brand b,.auth-brand b{font-size:var(--fs-titel);line-height:28px;font-weight:600;letter-spacing:-.02em;color:var(--text)}
.auth-brand-copy small{margin-top:2px;font-size:var(--fs-m);letter-spacing:0;color:var(--text-2)}
.auth-hero-text{flex:1 1 auto;padding-bottom:32px}
.auth-hero-date{margin-bottom:10px;font-size:var(--fs-xs);font-weight:600;letter-spacing:.1em;color:var(--text-3)}
.auth-hero-text h2{margin:0 0 8px;font-size:var(--fs-gruss);line-height:42px;font-weight:600;letter-spacing:-.03em;color:var(--text)}
.auth-hero-text p{font-size:var(--fs-lg);line-height:24px;letter-spacing:0;color:var(--text-2)}
.auth-usps{margin-top:32px;gap:14px}
.auth-usp{gap:12px;font-size:var(--fs-md);line-height:20px;letter-spacing:0;color:var(--text)}
.auth-usp svg{width:24px;height:24px;flex:0 0 24px;padding:6px;box-sizing:border-box;border-radius:999px;background:var(--ok-bg);color:var(--ok)}
.auth-hero-art{position:static;flex:0 0 auto;width:100%;height:104px;color:var(--line)}
.auth-form{border-left:0;background:var(--surface)}
.auth-form-main{justify-content:flex-start;padding:40px 40px 32px}
.auth-form-main h1{margin:0 0 6px;font-size:var(--fs-titel);line-height:28px;font-weight:600;letter-spacing:-.02em;text-transform:none;color:var(--text)}
.auth-form-main .sub{margin:0 0 18px;font-size:var(--fs-sm);line-height:20px;color:var(--text-2)}
.auth-form-main label.field{margin-bottom:18px}
.auth .field input{border-radius:var(--control-r)}
.auth .brand-mark{border-radius:0}
.auth .btn{width:100%;min-height:42px;height:42px;padding:0 20px;border-radius:var(--control-r);font-size:var(--fs-sm);font-weight:500;letter-spacing:0;text-transform:none}
.auth-zeile{display:flex;align-items:center;justify-content:flex-end;gap:12px;margin:0 0 18px;font-size:var(--fs-s);line-height:18px}
.auth-zeile a,.auth-links a{color:var(--text);font-size:var(--fs-s);font-weight:500;letter-spacing:0;text-transform:none;text-decoration:none}
.auth-zeile a:hover,.auth-links a:hover{color:var(--text);text-decoration:underline}
.auth-sicher{display:flex;align-items:center;justify-content:center;gap:6px;margin:18px 0 0;font-size:var(--fs-xs);line-height:16px;color:var(--text-3)}
/* Passwort zeigen: das Auge sitzt im Feld (Verhalten: assets/js/bausteine.js, data-zeigt-passwort). */
.feld-icon.hat-auge>input,body.ui-reference .feld-icon.hat-auge>input{padding-right:40px}
.feld-auge{position:absolute;right:4px;top:4px;display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;padding:0;border:0;border-radius:var(--r-taste);background:none;color:var(--text-3);cursor:pointer}
.feld-auge:hover{color:var(--text);background:var(--muted-bg)}
.feld-auge:focus-visible{outline:none;box-shadow:var(--fokus-knopf)}
.feld-icon>.feld-auge>svg{position:static;transform:none;color:inherit}
.auth-keybox{gap:14px;padding:20px 40px 24px;border-top:1px solid var(--line-2);background:var(--subtle)}
.auth-keybox>svg{width:36px;height:36px;flex:0 0 36px;margin-top:0;padding:8px;box-sizing:border-box;border:1px solid var(--line);border-radius:var(--r-kasten);background:var(--surface);color:var(--text-2)}
.auth-keybox b{margin-bottom:4px;font-size:var(--fs-sm);line-height:20px;font-weight:600;color:var(--text)}
.auth-keybox p{font-size:var(--fs-s);line-height:18px;font-style:normal;color:var(--text-2)}
.auth-keybox a{display:inline-flex;align-items:center;gap:4px;margin-top:4px;color:var(--text);font-size:var(--fs-s);font-weight:600;text-decoration:none}
.auth-keybox a:hover{text-decoration:underline}
.auth-foot{max-width:1120px;font-size:var(--fs-xs);color:var(--text-3)}
.auth-foot a{color:var(--text-3)} .auth-foot a:hover{color:var(--text)}
/* Die kleinen Seiten vor der Anmeldung (Passwort vergessen, Zugang aktivieren, Rechtstexte). */
.auth-card{padding:32px;border:1px solid var(--rand-fein);border-radius:var(--r-anmeldung);background:var(--surface);box-shadow:var(--shadow-anmeldung)}
.auth-card h1{font-size:var(--fs-titel);line-height:28px;font-weight:600;letter-spacing:-.02em;text-transform:none}
@media (max-width:980px){
 .auth-shell{grid-template-columns:minmax(0,1fr);max-width:460px;min-height:0}
 .auth-hero{padding:24px 24px 0;border-right:0}
 .auth-hero .auth-brand{margin-bottom:24px}
 .auth-hero-text{padding-bottom:24px}
 .auth-hero-text h2{font-size:var(--fs-xl);line-height:34px}
 .auth-usps{margin-top:20px}
 .auth-form{border-top:1px solid var(--line-2)}
 .auth-form-main{padding:24px}
 .auth-keybox{padding:20px 24px}
 .auth-foot{max-width:460px}
 .auth-card{padding:24px}
}
.feld-auge>.ph+.ph{display:none}
.feld-auge[aria-pressed=true]>.ph:first-child{display:none}
.feld-auge[aria-pressed=true]>.ph+.ph{display:block}
.auth-keybox a svg{width:14px;height:14px;flex:0 0 14px;margin:0;padding:0;border:0;background:none;color:inherit}
/* ---- Portale (P-A5): Icon in einer Ueberschrift oder Marke sitzt auf der Grundlinie des Texts ---- */
.card-head h2>.ph,.card h2>.ph,.tag>.ph{vertical-align:-2px}
.tag>.ph{margin-right:2px}
/* Die eingefahrene Seitenleiste wirft keinen Schatten in die Seite (gemessen bei 390 px: grauer
   Streifen am linken Rand); den Schatten gibt es nur, solange sie offen ist. */
@media (max-width:880px){
 .sidebar{box-shadow:none}
 .navtoggle:checked ~ .sidebar{box-shadow:var(--shadow-dialog)}
}
/* ---- Leiste unten (Abschnitt 8, Bild 08): bei schmalem Fenster wird die Seitenleiste zur Leiste
        unten - Uebersicht, Objekte, Bank, Meldungen, Mehr. "Mehr" oeffnet die Seitenleiste; der
        Burger in der Kopfleiste entfaellt dann. Schwebendes (Aktionsleiste, Toast, Assistent)
        rueckt ueber die Leiste. ---- */
.leiste-unten{display:none}
@media (max-width:880px){
 .leiste-unten{position:fixed;left:0;right:0;bottom:0;z-index:30;display:flex;align-items:stretch;height:calc(56px + env(safe-area-inset-bottom,0px));padding-bottom:env(safe-area-inset-bottom,0px);border-top:1px solid var(--line);background:var(--surface)}
 .leiste-unten>a,.leiste-unten>label{position:relative;flex:1 1 0;min-width:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;color:var(--text-3);font-size:var(--fs-2xs);line-height:14px;font-weight:500;text-decoration:none;white-space:nowrap;cursor:pointer}
 .leiste-unten>.is-active{color:var(--text)}
 .leiste-unten .ph{width:20px;height:20px}
 .leiste-unten .nav-badge{position:absolute;top:6px;left:calc(50% + 6px)}
 .leiste-unten>a:focus-visible{outline:none;box-shadow:inset 0 0 0 2px var(--chart)}
 body.hat-leiste-unten .shell::after{content:"";display:block;height:calc(56px + env(safe-area-inset-bottom,0px))}
 body.hat-leiste-unten .topbar .burger{display:none}
 body.hat-leiste-unten .aktionsleiste,body.hat-leiste-unten .toast-stapel,body.hat-leiste-unten .ai-bubble{bottom:calc(72px + env(safe-area-inset-bottom,0px))}
 body.hat-leiste-unten .ai-panel{bottom:calc(136px + env(safe-area-inset-bottom,0px))}
}
/* ---- Nur breit / nur schmal (Wunsch P-B, 01.10.2026): ein Element, das unter 640 px keinen Platz hat
        - der zweite beschriftete Knopf der Kopfleiste -, und sein Ersatz (Menueeintrag). In der
        Kopfleiste verliert ein Knopf mit Icon unter 640 px seine Beschriftung (.btn-text); er braucht
        dann ein aria-label. Gemessen bei 390 px: zwei beschriftete Knoepfe ragten 7 px ueber den Rand. ---- */
@media (max-width:640px){
 .nur-breit{display:none!important}
 .kopf-aktionen{flex:0 0 auto;gap:6px}
 .kopf-aktionen .btn:has(.ph)>.btn-text{display:none}
}
@media (min-width:641px){.nur-schmal{display:none!important}}
/* ---- Kopfleiste schmal: EINE Zeile. Bis 01.10.2026 erlaubte eine Regel im Seitenkopf unter 880 px den
        Umbruch - bei 390 px standen die Brotkrumen oben und die Aktionen darunter (gemessen an
        admin/finanzen.php). Unter 640 px bleibt von den Brotkrumen die letzte: wo man ist. ---- */
@media (max-width:880px){.topbar{flex-wrap:nowrap}}
@media (max-width:640px){
 .kopf-krumen>*:not(:last-child){display:none}
 .kopf-krumen>:last-child{overflow:hidden;text-overflow:ellipsis}
 .kopf-krumen>*+*::before{content:none}
}
/* ---- Objektkarte (Bild 04, Wunsch P-B fuer die Objektliste): Raster 3 / 2 / 1, oben das Foto randlos
        (es traegt die oberen Ecken der Karte), darunter Name mit Marke der Verwaltungsart, zwei Werte,
        Status. Die Karte ist ein Link (a.objektkarte) oder ein article. ---- */
.objektkarten{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.objektkarte{display:flex;flex-direction:column;min-width:0;border:1px solid var(--line);border-radius:var(--radius);background:var(--surface);box-shadow:var(--shadow-karte);color:var(--text);text-decoration:none;overflow:hidden}
a.objektkarte:hover{border-color:var(--text-3);color:var(--text)}
a.objektkarte:focus-visible{outline:none;box-shadow:var(--fokus-knopf)}
.objektkarte>.objektfoto{flex:0 0 auto;height:150px;aspect-ratio:auto}
.objektkarte-koerper{display:flex;flex-direction:column;gap:10px;padding:14px 16px 16px}
.objektkarte-kopf{display:flex;align-items:flex-start;justify-content:space-between;gap:8px}
.objektkarte-kopf>.zelle-zwei>b{font-size:var(--fs-md);line-height:20px;font-weight:600;letter-spacing:-.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.objektkarte-kopf>.zelle-zwei>small{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.objektkarte-werte{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;padding-top:10px;border-top:1px solid var(--line-2)}
.objektkarte-status{display:flex;flex-wrap:wrap;gap:6px}
/* Marke: kleines Etikett mit Rahmen (Miete / WEG / SEV). Kein Zustand - dafuer gibt es .status. */
.marke{flex:0 0 auto;padding:0 6px;border:1px solid var(--line);border-radius:var(--r-taste);background:var(--surface);color:var(--text-2);font-size:var(--fs-2xs);line-height:18px;font-weight:500;white-space:nowrap}
/* Wertpaar: Etikett ueber Wert; .is-rechts fuer die rechte Spalte, Toene fuer einen Wert, der etwas sagt. */
.wertpaar{display:flex;flex-direction:column;gap:2px;min-width:0;font-size:var(--fs-sm);line-height:20px;font-weight:500;color:var(--text);font-variant-numeric:tabular-nums;white-space:nowrap}
.wertpaar>small{font-size:var(--fs-2xs);line-height:14px;font-weight:400;color:var(--text-3)}
.wertpaar.is-rechts{align-items:flex-end;text-align:right}
.wertpaar.is-bad{color:var(--bad)} .wertpaar.is-warn{color:var(--warn)} .wertpaar.is-ok{color:var(--ok)}
@media (max-width:1100px){.objektkarten{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:640px){.objektkarten{grid-template-columns:minmax(0,1fr)}}

/* Dokumentvorschau: Medien bleiben proportional. hidden ist der sichtbare Zustand;
   der Verbraucher waehlt/validiert Dateien und setzt is-ziel beim Ziehen. */
.dokumentvorschau{flex:1 1 auto;min-width:0;min-height:650px;display:grid;place-items:center;background:var(--subtle);overflow:hidden}
.dokumentvorschau-bild{display:block;max-width:100%;max-height:700px;width:auto;height:auto;object-fit:contain}
.dokumentvorschau-pdf{display:block;width:100%;height:700px;min-width:0;border:0;background:var(--surface)}
.dokumentvorschau.is-upload{min-height:580px;padding:24px;border:2px dashed transparent;cursor:pointer;transition:border-color .15s,background .15s}
.dokumentvorschau.is-upload:hover,.dokumentvorschau.is-upload.is-ziel{border-color:var(--chart);background:var(--chart-soft)}
.dokumentvorschau.is-upload:focus-visible,.dokumentvorschau.is-upload:focus-within{outline:2px solid var(--chart);outline-offset:-2px}
.dokumentvorschau.is-upload>.dokumentvorschau-pdf{height:100%;min-height:650px}
.dokumentvorschau.is-upload>.dokumentvorschau-bild{max-height:650px;box-shadow:var(--shadow-karte)}
.dokumentvorschau [hidden]{display:none!important}
@media (max-width:640px){.dokumentvorschau,.dokumentvorschau.is-upload{min-height:320px}.dokumentvorschau.is-upload{padding:16px}.dokumentvorschau-pdf{height:60vh}.dokumentvorschau.is-upload>.dokumentvorschau-pdf{min-height:360px}.dokumentvorschau-bild,.dokumentvorschau.is-upload>.dokumentvorschau-bild{max-height:60vh}}

/* Uebergabe-Akte: vorhandene Fachklassen, neutrale zentrale Darstellung (B6f).
   Canvas behält interne 320x120; CSS skaliert nur die Breite. Fotos/Signaturen
   werden von der Fachseite geladen, Zustandswechsel erfolgen mit hidden. */
.ue-block{min-width:0;border:1px solid var(--line);border-radius:var(--r-kasten);padding:16px;margin:12px 0;background:var(--surface);color:var(--text)}
.ue-block-h{margin:0 0 12px;color:var(--text);font-size:var(--fs-sm);font-weight:600;line-height:20px}
.ue-zhead,.ue-zrow{display:grid;grid-template-columns:repeat(3,minmax(0,1fr)) 34px;gap:8px;align-items:center;min-width:0}
.ue-zhead{margin:0 0 6px;color:var(--text-3);font-size:var(--fs-xs);line-height:16px}
.ue-zrow{margin:0 0 8px}
.ue-zrow input{width:100%;min-width:0}
.ue-zrow .ue-zart{min-width:0}
.ue-zrow .ue-zdel{justify-self:end;color:var(--bad)}
.ue-keys{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;min-width:0}
.ue-keys>.field{margin:0}
.ue-choice{display:flex;flex-wrap:wrap;gap:8px 18px;margin:4px 0 12px;min-width:0}
.ue-choice label{display:flex;align-items:center;gap:8px;max-width:100%;min-width:0;padding:6px 0;color:var(--text);font-size:var(--fs-sm);overflow-wrap:anywhere}
.ue-choice input{width:16px;min-width:16px;flex:0 0 16px;transform:none}
.ue-raum{min-width:0;padding:12px;margin:0 0 12px;border:1px solid var(--line);border-radius:var(--r-kasten);background:var(--surface)}
.ue-raum-kopf{display:flex;align-items:center;gap:8px;min-width:0;margin:0 0 8px}
.ue-raum-name{flex:1 1 auto;width:100%;min-width:0}
.ue-raum-notiz{display:block;width:100%;min-width:0;resize:vertical}
.ue-fotoleiste{display:flex;align-items:center;flex-wrap:wrap;gap:8px;min-width:0;margin:8px 0 0}
.ue-foto-aktion{position:relative;display:inline-flex;align-items:center;gap:6px;max-width:100%;cursor:pointer}
.ue-foto-aktion:focus-within{outline:2px solid var(--chart);outline-offset:2px}
.ue-foto-prev{display:block;width:auto;height:auto;max-width:100%;max-height:160px;object-fit:contain;border:1px solid var(--line);border-radius:var(--r-taste)}
.ue-foto-del{color:var(--bad)}
.ue-signatur{display:block;width:100%;max-width:100%;height:120px;border:1px dashed var(--line);border-radius:var(--control-r);background:var(--surface);touch-action:none}
.ue-signatur-bild{display:block;width:auto;max-width:100%;height:60px;object-fit:contain;border:1px solid var(--line);border-radius:var(--r-taste)}
.ue-block [hidden],.ue-raum [hidden]{display:none!important}
@media (max-width:560px){.ue-zhead{display:none}.ue-zrow{grid-template-columns:repeat(2,minmax(0,1fr))}.ue-zrow .ue-zart{grid-column:1/-1}.ue-zrow .ue-zdel{grid-column:2;justify-self:end}.ue-keys{grid-template-columns:repeat(2,minmax(0,1fr))}}