/* Hausverwaltung – Designsystem
 *
 * Dokumentation und Beispiele: docs/UI.md, Abschnitt 6. Reihenfolge:
 *   1 Variablen (hell/dunkel)   2 Grundlagen        3 Layout (Kopf, Navigation, Menü, Fuß)
 *   4 Seitenkopf, Reiter        5 Karten, Kennzahlen, Aufgaben
 *   6 Tabellen                  7 Formulare, Werkzeugleiste   8 Knöpfe
 *   9 Abzeichen, Hinweise, Leer 10 Zeitleiste, Definitionslisten   11 Paginierung
 *   12 Hilfsklassen             13 Bestehende Seiten (Bank, NK, Anmeldung)   14 Druck
 * Kein JavaScript nötig. Farben nur über Variablen, damit der Dunkelmodus stimmt.
 */

/* 1 ---------------------------------------------------------------- Variablen */
:root {
  color-scheme: light dark;
  --schrift: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --schrift-mono: ui-monospace, "SF Mono", "Cascadia Mono", Consolas, monospace;

  --bg: #f5f5f1;
  --flaeche: #ffffff;
  --flaeche-2: #f0f0eb;
  --zeile-hover: #f7f7f3;
  --eingabe: #ffffff;
  --fg: #1d1d1b;
  --muted: #5f5f59;
  --line: #e0e0d8;
  --line-stark: #c5c5bc;
  --rand-eingabe: #8a8a82; /* Rahmen von Eingabefeldern: 3,5:1 auf Weiß (WCAG 1.4.11) */

  --accent: #1f5f8b;
  --accent-stark: #174a6d;
  --accent-fg: #ffffff;
  --accent-weich: #e4eef6;

  --ok: #276b2b;
  --ok-weich: #e5f1e5;
  --warnung: #8a5a00;
  --warnung-weich: #fbf0d9;
  --fehler: #b3261e;
  --fehler-weich: #fbe8e6;
  --gefahr-flaeche: #b3261e; /* Fläche roter Knöpfe: weiße Schrift 6,5:1 */
  --info: #1f5f8b;
  --info-weich: #e4eef6;

  /* ältere Namen, von bestehenden Seiten genutzt */
  --teil: var(--warnung);
  --offen: var(--fehler);
  --guthaben: #1565c0;

  --a1: .25rem; --a2: .5rem; --a3: .75rem; --a4: 1rem; --a5: 1.5rem; --a6: 2rem; --a7: 3rem;
  --radius-klein: 4px;
  --radius: 6px;
  --radius-gross: 10px;
  --schatten: 0 1px 2px rgb(0 0 0 / .05), 0 1px 3px rgb(0 0 0 / .04);
  --breite: 1480px;
  /* Fokusrahmen: 2 px in Akzentfarbe (≥ 3:1 auf Hintergrund und Fläche, WCAG 2.4.11/1.4.11), innen ein Spalt */
  --fokus: 0 0 0 2px var(--flaeche), 0 0 0 4px var(--accent);
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #131312;
    --flaeche: #1c1c1a;
    --flaeche-2: #262623;
    --zeile-hover: #22221f;
    --eingabe: #161615;
    --fg: #ececea;
    --muted: #a8a8a0;
    --line: #33332e;
    --line-stark: #4a4a44;
    --rand-eingabe: #77776f;

    --accent: #82b6dc;
    --accent-stark: #a6cbe7;
    --accent-fg: #0c1b27;
    --accent-weich: #1a2b38;

    --ok: #82c886;
    --ok-weich: #1a2b1b;
    --warnung: #e2b452;
    --warnung-weich: #2f2612;
    --fehler: #f28b82;
    --fehler-weich: #361b19;
    --gefahr-flaeche: #c62828; /* weiße Schrift 5,6:1 (vorher #f28b82: 2,4:1) */
    --info: #82b6dc;
    --info-weich: #1a2b38;
    --guthaben: #8ab4f8;
    --schatten: none;
  }
}

/* 2 ---------------------------------------------------------------- Grundlagen */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0; min-height: 100vh; display: flex; flex-direction: column;
  font: 15px/1.5 var(--schrift); background: var(--bg); color: var(--fg);
}
h1, h2, h3, h4 { line-height: 1.25; margin: 1.5rem 0 .6rem; font-weight: 650; }
h1 { font-size: 1.6rem; }
h2 { font-size: 1.2rem; }
h3 { font-size: 1.02rem; }
p { margin: 0 0 .75rem; }
a { color: var(--accent); text-underline-offset: 2px; }
a:hover { color: var(--accent-stark); }
hr { border: 0; border-top: 1px solid var(--line); margin: var(--a5) 0; }
img, svg { max-width: 100%; }
code, kbd, .mono { font-family: var(--schrift-mono); font-size: .9em; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
abbr[title] { text-decoration: underline dotted; text-underline-offset: 2px; cursor: help; }
details > summary { cursor: pointer; }
.sprungmarke {
  position: absolute; left: var(--a2); top: -3rem; z-index: 100; padding: var(--a2) var(--a3);
  background: var(--accent); color: var(--accent-fg); border-radius: var(--radius);
}
.sprungmarke:focus { top: var(--a2); }

/* 3 ---------------------------------------------------------------- Layout */
.kopf {
  position: sticky; top: 0; z-index: 20;
  background: var(--flaeche); border-bottom: 1px solid var(--line);
}
.kopf-innen {
  position: relative; max-width: var(--breite); margin: 0 auto;
  display: flex; align-items: center; gap: var(--a4); padding: .45rem var(--a4); min-height: 3.25rem;
}
.marke {
  display: inline-flex; align-items: center; gap: .5rem; white-space: nowrap;
  font-weight: 700; color: var(--fg); text-decoration: none; margin-right: var(--a2);
}
.marke:hover { color: var(--fg); }
.marke-zeichen {
  display: inline-grid; place-items: center; width: 1.75rem; height: 1.75rem; border-radius: var(--radius);
  background: var(--accent); color: var(--accent-fg); font-size: .95rem;
}
.hauptnav { display: flex; flex-wrap: wrap; gap: .15rem; }
.hauptnav a, .menue-liste nav a {
  padding: .45rem .7rem; border-radius: var(--radius); color: var(--fg);
  text-decoration: none; font-weight: 500; white-space: nowrap;
}
.hauptnav a:hover, .menue-liste nav a:hover { background: var(--flaeche-2); color: var(--fg); }
.hauptnav a[aria-current], .menue-liste nav a[aria-current] {
  background: var(--accent-weich); color: var(--accent); font-weight: 650;
}
.kopf-rechts { margin-left: auto; display: flex; align-items: center; gap: var(--a3); font-size: .88rem; }
.kopf-rechts .experten, .menue-fuss a { color: var(--muted); text-decoration: none; }
.kopf-rechts .experten:hover, .menue-fuss a:hover { color: var(--fg); text-decoration: underline; }

.menue { display: none; margin-left: auto; }
.menue > summary {
  list-style: none; padding: .4rem .75rem; border: 1px solid var(--line-stark); border-radius: var(--radius);
  font-weight: 600; user-select: none;
}
.menue > summary::-webkit-details-marker { display: none; }
.menue[open] > summary { background: var(--flaeche-2); }
.menue-liste {
  position: absolute; left: 0; right: 0; top: 100%;
  background: var(--flaeche); border-bottom: 1px solid var(--line); box-shadow: 0 8px 16px rgb(0 0 0 / .08);
  padding: var(--a2) var(--a4) var(--a4);
}
.menue-liste nav { display: flex; flex-direction: column; }
.menue-liste nav a { padding: .65rem .75rem; font-size: 1.02rem; }
.menue-fuss {
  display: flex; justify-content: space-between; align-items: center; gap: var(--a3);
  border-top: 1px solid var(--line); margin-top: var(--a2); padding-top: var(--a2);
}

@media (max-width: 1060px) {
  .hauptnav, .kopf-rechts { display: none; }
  .menue { display: block; }
}

.haupt { flex: 1; width: 100%; max-width: var(--breite); margin: 0 auto; padding: var(--a5) var(--a4) var(--a7); }
.haupt.breit { max-width: none; }
.haupt.schmal { max-width: 760px; }
.fuss { border-top: 1px solid var(--line); color: var(--muted); font-size: .82rem; }
.fuss-innen {
  max-width: var(--breite); margin: 0 auto; padding: var(--a3) var(--a4);
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--a2);
}

/* Raster für Seiteninhalte */
/* align-items: start – kurze Karten werden nicht auf die Höhe der Nachbarkarte gestreckt (sonst große weiße Flächen). */
.raster-2 { display: grid; gap: var(--a4); grid-template-columns: 1fr; align-items: start; }
.raster-3 { display: grid; gap: var(--a4); grid-template-columns: 1fr; align-items: start; }
.raster-haupt { display: grid; gap: var(--a4) var(--a5); grid-template-columns: 1fr; align-items: start; }
.raster-2, .raster-3, .raster-haupt { margin-bottom: var(--a4); }
.raster-2:last-child, .raster-3:last-child, .raster-haupt:last-child { margin-bottom: 0; }
@media (min-width: 800px) {
  .raster-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .raster-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* Seitenspalte fest (320–420 px): zusätzliche Breite geht in Tabellen und Hauptspalte. */
@media (min-width: 1060px) {
  .raster-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .raster-haupt { grid-template-columns: minmax(0, 1fr) minmax(320px, 420px); }
  .raster-haupt.breite-seite { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}
.raster-2 > .karte, .raster-3 > .karte, .raster-haupt > * > .karte:last-child { margin-bottom: 0; }
/* Schmale Bildschirme: Karten beider Spalten in eine Folge; .handy-oben (z. B. Notiz, Notfall) steht dann zuerst. */
@media (max-width: 1059px) {
  .raster-haupt.handy-umsortieren > * { display: contents; }
  .raster-haupt.handy-umsortieren > * > * { margin-top: 0; margin-bottom: 0; }
  .raster-haupt.handy-umsortieren .handy-oben { order: -1; }
}

/* 4 ---------------------------------------------------------------- Seitenkopf, Brotkrumen, Reiter */
.seitenkopf { margin: 0 0 var(--a5); }
.brotkrumen ol {
  list-style: none; display: flex; flex-wrap: wrap; gap: .2rem .35rem; padding: 0; margin: 0 0 .4rem;
  font-size: .85rem; color: var(--muted);
}
.brotkrumen li + li::before { content: "›"; margin-right: .35rem; color: var(--line-stark); }
.brotkrumen a { color: var(--muted); display: inline-block; padding: .2rem 0; } /* Ziel ≥ 24 px hoch */
.brotkrumen a:hover { color: var(--accent); }
.seitenkopf-zeile {
  display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: var(--a3) var(--a4);
}
.seitenkopf-titel { min-width: 0; flex: 1 1 20rem; }
.seitenkopf h1 { margin: 0; overflow-wrap: anywhere; }
.seitenkopf h1 .abzeichen { vertical-align: middle; font-size: .8rem; margin-left: .35rem; }
.untertitel { margin: .3rem 0 0; color: var(--muted); }
.seitenkopf-aktionen { display: flex; flex-wrap: wrap; gap: var(--a2); align-items: center; }
/* Die Primäraktion steht immer rechts außen, auf dem Handy oben in voller Breite. */
.seitenkopf-aktionen > .primaer, .seitenkopf-aktionen > form:has(.primaer) { order: 99; }
@media (max-width: 560px) {
  .seitenkopf-aktionen { width: 100%; }
  .seitenkopf-aktionen > * { flex: 1 1 auto; }
  .seitenkopf-aktionen > .primaer, .seitenkopf-aktionen > form:has(.primaer) { order: -1; flex-basis: 100%; }
  .seitenkopf-aktionen form > button { width: 100%; }
}

/* Reiter brechen um statt seitlich zu scrollen: ein abgeschnittener Reiter („Einstellungen“) wird sonst übersehen. */
.reiter {
  display: flex; flex-wrap: wrap; gap: 0 .15rem; margin: calc(-1 * var(--a2)) 0 var(--a5);
  box-shadow: inset 0 -1px 0 var(--line);
}
.reiter a {
  display: inline-flex; align-items: center; gap: .4rem; padding: .6rem .85rem;
  color: var(--muted); text-decoration: none; font-weight: 550; white-space: nowrap;
  border-bottom: 2px solid transparent;
}
.reiter a:hover { color: var(--fg); border-bottom-color: var(--line-stark); }
.reiter a[aria-current], .reiter a.aktiv { color: var(--accent); border-bottom-color: var(--accent); }
.reiter .anzahl {
  min-width: 1.4rem; padding: 0 .4rem; border-radius: 999px; background: var(--flaeche-2);
  color: var(--muted); font-size: .8rem; text-align: center; font-variant-numeric: tabular-nums;
}
.reiter .punkt { width: .5rem; height: .5rem; border-radius: 50%; background: var(--warnung); }
.reiter.klein { margin-top: 0; }
.reiter.klein a { padding: .4rem .7rem; font-size: .9rem; }
@media (max-width: 560px) { .reiter a { padding: .45rem .45rem; font-size: .9rem; } .reiter.klein a { padding: .35rem .45rem; } }

/* 5 ---------------------------------------------------------------- Karten, Kennzahlen, Aufgaben */
.karte {
  background: var(--flaeche); border: 1px solid var(--line); border-radius: var(--radius-gross);
  padding: var(--a4) 1.1rem; margin-bottom: var(--a4); box-shadow: var(--schatten); min-width: 0;
}
.karte > h2:first-child, .karte > h3:first-child, .karte > :first-child { margin-top: 0; }
.karte > :last-child { margin-bottom: 0; }
.karte h2 { font-size: 1.05rem; }
.karte-kopf {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--a2) var(--a3);
  margin: 0 0 var(--a3);
}
.karte-kopf h2, .karte-kopf h3 { margin: 0; }
.karte-kopf .aktionen, .karte-kopf .zeile { margin: 0; }
.karte-fuss {
  display: flex; flex-wrap: wrap; gap: var(--a2); align-items: center;
  border-top: 1px solid var(--line); margin-top: var(--a3); padding-top: var(--a3);
}
.karte.flach { box-shadow: none; }
.karte.hervor { border-color: var(--accent); }
.karte.warnung { border-left: 4px solid var(--warnung); }
.karte.fehler { border-left: 4px solid var(--fehler); }
/* Notiz-Karte (ui/_notiz.html): immer sichtbar, direkt bearbeitbar */
.notiz-karte textarea { width: 100%; min-height: 4.5rem; }
.notiz-karte .notiz-fuss { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: var(--a2); margin-top: var(--a2); }
.notiz-text { white-space: pre-line; overflow-wrap: anywhere; }
.notiz-zelle > summary { color: var(--accent); font-size: .85rem; }
.notiz-zelle textarea { width: 100%; min-width: min(14rem, 100%); min-height: 4rem; margin: .3rem 0; }
.kennzahlen.innen.kompakt { grid-template-columns: repeat(auto-fit, minmax(min(100%, 9rem), 1fr)); }
a.karte { display: block; color: inherit; text-decoration: none; }
a.karte:hover { border-color: var(--accent); color: inherit; }
/* auto-fit: bei wenigen Karten teilen sie sich die Breite, statt eine leere Spur stehen zu lassen */
.karten { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: var(--a4); margin: 0 0 var(--a4); align-items: start; }
.karten > .karte { margin-bottom: 0; }

.kennzahlen {
  list-style: none; margin: 0 0 var(--a5); padding: 0;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 165px), 1fr)); gap: var(--a3);
}
.kennzahlen.innen { margin-bottom: var(--a3); grid-template-columns: repeat(auto-fit, minmax(min(100%, 118px), 1fr)); gap: var(--a2); }
.kennzahl {
  display: flex; flex-direction: column; gap: .1rem; height: 100%;
  background: var(--flaeche); border: 1px solid var(--line); border-radius: var(--radius-gross);
  padding: .8rem var(--a4); color: inherit; text-decoration: none; box-shadow: var(--schatten);
}
.kennzahlen.innen .kennzahl { background: var(--flaeche-2); border-color: transparent; box-shadow: none; padding: .6rem .8rem; }
a.kennzahl:hover { border-color: var(--accent); color: inherit; }
.kennzahl .wert { font-size: 1.55rem; font-weight: 650; line-height: 1.15; font-variant-numeric: tabular-nums; white-space: nowrap; }
@media (max-width: 560px) { .kennzahl .wert { font-size: 1.2rem; } .kennzahl { padding: .7rem .8rem; } }
.kennzahlen.innen .kennzahl .wert { font-size: 1.2rem; }
.kennzahl .bezeichnung { color: var(--muted); font-size: .86rem; }
.kennzahl .zusatz { color: var(--muted); font-size: .8rem; }
.kennzahl .bezeichnung .abzeichen { vertical-align: 1px; margin-left: .15rem; }
.kennzahl.ok .wert { color: var(--ok); }
.kennzahl.warnung .wert { color: var(--warnung); }
.kennzahl.fehler .wert { color: var(--fehler); }
@media (max-width: 560px) {
  .kennzahlen, .kennzahlen.innen, .kennzahlen.innen.kompakt { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .kennzahlen > li:last-child:nth-child(odd) { grid-column: 1 / -1; }
}

.aufgaben { list-style: none; margin: 0; padding: 0; }
.aufgabe {
  display: flex; align-items: flex-start; gap: var(--a3); padding: .75rem 0; border-top: 1px solid var(--line);
}
.aufgabe:first-child { border-top: 0; padding-top: 0; }
.aufgabe:last-child { padding-bottom: 0; }
.aufgabe-marke { flex: none; width: .6rem; height: .6rem; margin-top: .45rem; border-radius: 50%; background: var(--info); }
.aufgabe.warnung .aufgabe-marke { background: var(--warnung); }
.aufgabe.fehler .aufgabe-marke { background: var(--fehler); }
.aufgabe.ok .aufgabe-marke { background: var(--ok); }
.aufgabe-text { flex: 1; min-width: 0; }
.aufgabe-titel { font-weight: 600; color: var(--fg); text-decoration: none; }
.aufgabe-titel:hover { color: var(--accent); text-decoration: underline; }
.aufgabe-detail { margin: .15rem 0 0; color: var(--muted); font-size: .88rem; }
.aufgabe details { margin-top: .3rem; font-size: .88rem; }
.aufgabe details ul { margin: .3rem 0 0; padding-left: 1.1rem; }
.aufgabe-ende { display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: var(--a2); }
@media (max-width: 560px) {
  .aufgabe { flex-wrap: wrap; }
  .aufgabe-detail { display: none; }
  .aufgabe-ende { width: 100%; justify-content: flex-start; padding-left: 1.35rem; }
}

.linkliste { list-style: none; margin: 0; padding: 0; }
.linkliste li { padding: .45rem 0; border-top: 1px solid var(--line); display: flex; justify-content: space-between; align-items: center; gap: var(--a2); }
.linkliste li:first-child { border-top: 0; padding-top: 0; }
.linkliste .knoepfe { flex-wrap: nowrap; align-items: flex-start; }

/* 6 ---------------------------------------------------------------- Tabellen */
table { border-collapse: collapse; width: 100%; font-variant-numeric: tabular-nums; }
th, td { padding: .5rem .65rem; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
thead th {
  font-size: .8rem; font-weight: 650; color: var(--muted); background: var(--flaeche-2);
  border-bottom: 1px solid var(--line-stark); white-space: nowrap; vertical-align: bottom;
}
tbody th { font-weight: 600; }
caption { text-align: left; color: var(--muted); font-size: .85rem; padding: 0 0 .4rem; }
.tabelle > table > caption { padding: .5rem .65rem; }
td.num, th.num, .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
tfoot td, tfoot th, tr.summe td, tr.summe th { font-weight: 650; border-top: 2px solid var(--line-stark); border-bottom: 0; }
tr.inaktiv td, tr.beendet td { color: var(--muted); }
tr.markiert td { background: var(--warnung-weich); }
td.aktionen-spalte, th.aktionen-spalte { text-align: right; white-space: nowrap; width: 1%; }
td.aktionen-spalte form { display: inline; }
.zellinfo { display: block; color: var(--muted); font-size: .82rem; }
a.zellinfo { color: var(--accent); }
.kontakt-name { font-weight: 550; }
/* Gruppenkopf in Tabellen (Kostenart, Gebäude, Objekt): ruhig, nicht wie eine Summe */
tr.gruppe > th, tr.gruppe > td { background: var(--flaeche-2); font-weight: 600; font-size: .9rem; }
tr.gruppe .gedaempft, tr.gruppe .klein, tr.gruppe .knopf { font-weight: normal; }
tr.gruppe .knopf { float: right; margin-left: var(--a2); }

.tabelle {
  overflow-x: auto; background: var(--flaeche); border: 1px solid var(--line);
  border-radius: var(--radius-gross); margin: 0 0 var(--a4); box-shadow: var(--schatten);
}
.tabelle > table { margin: 0; }
.tabelle > table > thead th:first-child { border-top-left-radius: calc(var(--radius-gross) - 1px); }
.tabelle > table > thead th:last-child { border-top-right-radius: calc(var(--radius-gross) - 1px); }
.tabelle > table > tbody > tr:last-child > td, .tabelle > table > tbody > tr:last-child > th { border-bottom: 0; }
.tabelle > table > tbody > tr:hover > td, .tabelle > table > tbody > tr:hover > th { background: var(--zeile-hover); }
.karte > .tabelle, .karte .tabelle.innen { box-shadow: none; border-radius: var(--radius); }
.tabelle.kompakt th, .tabelle.kompakt td, table.kompakt th, table.kompakt td { padding: .3rem .5rem; }
table.schmal { width: auto; min-width: 20rem; }
.tabelle:has(> table.schmal) { display: inline-block; max-width: 100%; vertical-align: top; }
/* Kostentabellen: feste Spalten, damit alle Gruppen untereinander gleich ausgerichtet sind */
@media (min-width: 901px) {
  table.kosten-tabelle { table-layout: fixed; }
  table.kosten-tabelle col.spalte-zeitraum { width: 11rem; }
  table.kosten-tabelle col.spalte-betrag { width: 8.5rem; }
  table.kosten-tabelle col.spalte-zahlung { width: 13rem; }
  table.kosten-tabelle col.spalte-aktion { width: 9rem; }
  table.kosten-tabelle td { overflow-wrap: anywhere; }
}
@media (max-width: 900px) { table.kosten-tabelle col { width: auto !important; } }

/* Handy: Tabellen mit .stapeln werden zu Karten – jede Zeile ein Block, Beschriftung aus data-label.
   Erste Zelle fett über die volle Breite (oder links neben .status), Aktionen unten in voller Breite. */
@media (max-width: 560px) {
  .tabelle.stapeln { overflow: visible; }
  .tabelle.stapeln > table, .tabelle.stapeln > table > tbody, .tabelle.stapeln > table > tfoot { display: block; }
  .tabelle.stapeln > table > thead { display: none; }
  .tabelle.stapeln > table > tbody > tr, .tabelle.stapeln > table > tfoot > tr {
    display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .15rem .75rem;
    padding: .6rem .75rem; border-bottom: 1px solid var(--line);
  }
  .tabelle.stapeln > table > tbody:last-of-type > tr:last-child { border-bottom: 0; }
  .tabelle.stapeln td, .tabelle.stapeln th { display: block; border: 0; padding: 0; text-align: left; min-width: 0; width: auto; }
  .tabelle.stapeln td.num, .tabelle.stapeln th.num { text-align: left; white-space: normal; }
  .tabelle.stapeln tr > :first-child { grid-column: 1 / -1; font-weight: 600; }
  .tabelle.stapeln tr > :first-child .zellinfo { font-weight: normal; }
  .tabelle.stapeln tr:has(> .status) > :first-child { grid-column: 1; }
  .tabelle.stapeln td.status { grid-column: 2; grid-row: 1; text-align: right; }
  .tabelle.stapeln tr.gruppe { background: var(--flaeche-2); padding-block: .4rem; }
  .tabelle.stapeln tr.gruppe > * { background: none; }
  .tabelle.stapeln td.aktionen-spalte { grid-column: 1 / -1; text-align: left; white-space: normal; margin-top: .3rem; }
  .tabelle.stapeln td.aktionen-spalte:empty, .tabelle.stapeln td.leer-handy, .tabelle.stapeln tr.leer-handy { display: none; }
  .tabelle.stapeln td[data-label]::before { content: attr(data-label) ": "; color: var(--muted); font-size: .8rem; font-weight: normal; }
  .tabelle.stapeln > table > tbody > tr:hover > td { background: none; }
  /* .nowrap-Zellen (Datum + Abzeichen) dürfen in der Karte umbrechen – sonst ragen sie in die Nachbarspalte;
     das Abzeichen selbst bleibt am Stück (white-space: nowrap) und rutscht als Ganzes in die nächste Zeile. */
  .tabelle.stapeln td.nowrap { white-space: normal; }
  /* .zwei-spalten: zwei gleich breite Spalten statt „Rest | so breit wie nötig“ (Zähler: Ort, letzter Stand) */
  .tabelle.stapeln.zwei-spalten > table > tbody > tr { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* Summen im Tabellenfuß: je Betrag eine Zeile, Beschriftung (data-label) links, Betrag rechts */
  .tabelle.stapeln > table > tfoot td.num[data-label] { grid-column: 1 / -1; display: flex; justify-content: space-between; gap: .75rem; }
  /* dichte Zahlentabellen (Mieterkonto): kleinere Schrift und schmale Abstände, damit fünf Spalten auf 390 px passen */
  table.dicht-handy { font-size: .84rem; }
  table.dicht-handy th, table.dicht-handy td { padding-inline: .3rem; }
  table.dicht-handy tr > :first-child { padding-left: .55rem; }
  table.dicht-handy tr > :last-child { padding-right: .55rem; }
  /* übrige Tabellen: Schatten am Rand zeigt, dass man seitlich wischen kann */
  .tabelle:not(.stapeln) {
    background:
      linear-gradient(to right, var(--flaeche) 30%, transparent) left / 2rem 100% no-repeat local,
      linear-gradient(to left, var(--flaeche) 30%, transparent) right / 2rem 100% no-repeat local,
      radial-gradient(farthest-side at 0 50%, rgb(0 0 0 / .18), transparent) left / .75rem 100% no-repeat scroll,
      radial-gradient(farthest-side at 100% 50%, rgb(0 0 0 / .18), transparent) right / .75rem 100% no-repeat scroll,
      var(--flaeche);
  }
}

th a.sortierung { color: inherit; text-decoration: none; display: inline-flex; gap: .25rem; align-items: center; }
th a.sortierung::after { content: "↕"; opacity: .35; font-size: .85em; }
th[aria-sort="ascending"] a.sortierung::after { content: "↑"; opacity: 1; }
th[aria-sort="descending"] a.sortierung::after { content: "↓"; opacity: 1; }
th[aria-sort] { color: var(--fg); }

/* 7 ---------------------------------------------------------------- Formulare, Werkzeugleiste */
input, select, textarea, button { font: inherit; }
input:not([type="checkbox"], [type="radio"], [type="file"], [type="submit"], [type="hidden"]), select, textarea {
  max-width: 100%; min-height: 2.4rem; padding: .45rem .6rem; color: var(--fg); background: var(--eingabe);
  border: 1px solid var(--rand-eingabe); border-radius: var(--radius);
}
textarea { min-height: 5.5rem; resize: vertical; line-height: 1.45; }
select[multiple] { min-height: 8rem; }
input[type="file"] { max-width: 100%; }
input[type="checkbox"], input[type="radio"] { width: 1.15rem; height: 1.15rem; margin: .15rem 0 0; accent-color: var(--accent); flex: none; }
input:focus-visible, select:focus-visible, textarea:focus-visible { outline: none; border-color: var(--accent); box-shadow: var(--fokus); }
input[disabled], select[disabled], textarea[disabled] { opacity: .65; cursor: not-allowed; }
input[inputmode="decimal"], input.betrag { text-align: right; font-variant-numeric: tabular-nums; }
::placeholder { color: var(--muted); opacity: 1; font-style: italic; } /* 4,5:1 wie gedämpfter Text */
input[type="file"]::file-selector-button {
  font: inherit; font-weight: 550; min-height: 2.4rem; padding: .45rem .95rem; margin-right: .75rem; cursor: pointer;
  border: 1px solid var(--line-stark); border-radius: var(--radius); background: var(--flaeche); color: var(--fg);
}
/* iOS vergrößert beim Antippen jedes Feld unter 16 px – auf dem Handy daher 16 px */
@media (max-width: 560px) {
  input, select, textarea { font-size: 16px; }
  .versand input, .versand select { font-size: 16px !important; }
}

.formular { max-width: 980px; }
.formular.schmal { max-width: 560px; }
/* Formular allein in einer Karte: die Karte endet mit dem Formular statt mit einem leeren Streifen rechts */
.stapel > .karte:has(> form.formular:only-child) { max-width: calc(980px + 2.2rem + 2px); }
.feldgruppe { border: 0; padding: 0; margin: 0 0 var(--a5); min-width: 0; }
.feldgruppe + .feldgruppe { border-top: 1px solid var(--line); padding-top: var(--a4); }
.feldgruppe > legend { float: left; width: 100%; padding: 0; margin: 0 0 var(--a3); font-weight: 650; font-size: 1.02rem; }
.feldgruppe > legend + * { clear: both; }
.feldgruppe-hilfe { color: var(--muted); margin: 0 0 var(--a3); font-size: .9rem; clear: both; }
.felder-raster { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--a4) 1.25rem; clear: both; }
@media (min-width: 720px) {
  .felder-raster:not(.einspaltig) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* Kurze Werte (Beträge, Nummern): mehrere Felder in einer Reihe („spalten": 3 in fieldsets) */
  .felder-raster.drei:not(.einspaltig) { grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr)); }
}
@media (min-width: 420px) and (max-width: 719px) {
  .felder-raster.drei:not(.einspaltig) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.feld { display: flex; flex-direction: column; gap: .3rem; min-width: 0; margin: 0; }
.feld.breit { grid-column: 1 / -1; }
.feld > label, .feld > legend { font-weight: 550; font-size: .9rem; }
.feld > input:not([type="checkbox"], [type="radio"]), .feld > select, .feld > textarea { width: 100%; }
fieldset.feld { border: 0; padding: 0; }
fieldset.feld > legend { padding: 0; margin-bottom: .3rem; }
.feld.auswahl > div > div, .feld.auswahl ul > li { margin: .2rem 0; }
.feld.auswahl label { display: inline-flex; gap: .45rem; align-items: flex-start; font-weight: normal; }
.feld.auswahl ul { list-style: none; padding: 0; margin: 0; }
.feld.check { flex-direction: row; align-items: flex-start; gap: .55rem; }
.feld.check label { font-weight: 550; }
.pflicht { color: var(--fehler); margin-left: .15rem; font-weight: 700; }
.hilfe, .helptext { color: var(--muted); font-size: .82rem; }
.helptext { display: block; }
.errorlist { color: var(--fehler); font-size: .86rem; font-weight: 550; list-style: none; padding: 0; margin: .1rem 0 0; }
/* Fehlerliste oben im Formular: je Feld ein Sprunglink zum markierten Feld */
.fehler-sprung { margin: .3rem 0 0; padding-left: 1.1rem; }
.fehler-sprung a { color: inherit; font-weight: 600; }
.feld.auswahl label:has(input:disabled) { color: var(--muted); }
.feld.hat-fehler > input, .feld.hat-fehler > select, .feld.hat-fehler > textarea,
[aria-invalid="true"] { border-color: var(--fehler) !important; }
.feld.hat-fehler > label { color: var(--fehler); }
.hinweis .errorlist { color: inherit; }
.formular-aktionen {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--a2);
  padding-top: var(--a4); margin-top: var(--a2); border-top: 1px solid var(--line);
}
.pflicht-hinweis { margin-left: auto; color: var(--muted); font-size: .8rem; }
.formular > p { display: flex; flex-direction: column; gap: .3rem; margin: 0 0 var(--a3); }

.werkzeugleiste, .filter {
  display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--a3);
  padding: .75rem var(--a4); margin: 0 0 var(--a4);
  background: var(--flaeche); border: 1px solid var(--line); border-radius: var(--radius-gross);
}
.werkzeugleiste label, .filter label {
  display: flex; flex-direction: column; gap: .2rem; font-size: .8rem; font-weight: 550; color: var(--muted); min-width: 0;
}
.werkzeugleiste select { max-width: 26rem; }
.werkzeugleiste > .segment { align-self: flex-end; }
.werkzeugleiste label.check, .filter label.check { flex-direction: row; align-items: center; gap: .4rem; color: var(--fg); font-size: .9rem; padding-bottom: .55rem; }
.werkzeugleiste .suche { flex: 1 1 14rem; }
.werkzeugleiste .suche input { width: 100%; }
.werkzeugleiste .rechts { margin-left: auto; }
.werkzeugleiste .knopf, .werkzeugleiste button, .filter button { min-height: 2.4rem; }
/* Handy: Auswahlfelder paarweise nebeneinander, damit die Liste nicht erst nach einer Bildschirmhöhe beginnt */
@media (max-width: 560px) {
  .werkzeugleiste { gap: var(--a2) var(--a3); padding: .6rem .75rem; }
  .werkzeugleiste > label:not(.check):not(.suche) { flex: 1 1 8.5rem; min-width: 0; }
  .werkzeugleiste > label:not(.check):not(.suche) > select,
  .werkzeugleiste > label:not(.check):not(.suche) > input { width: 100%; }
  .werkzeugleiste .suche { flex-basis: 100%; }
  .werkzeugleiste label.check { padding-bottom: 0; }
  .werkzeugleiste select { width: 100%; min-width: 0; max-width: 100%; }
}
.segment {
  display: inline-flex; border: 1px solid var(--rand-eingabe); border-radius: var(--radius); overflow: hidden; background: var(--eingabe);
}
.segment a { padding: .45rem .8rem; color: var(--fg); text-decoration: none; font-size: .9rem; border-left: 1px solid var(--line-stark); white-space: nowrap; }
.segment a:first-child { border-left: 0; }
.segment a:hover { background: var(--flaeche-2); }
.segment a[aria-current] { background: var(--accent); color: var(--accent-fg); }
.segment .gedaempft-zahl { opacity: .85; font-size: max(12px, .85em); font-variant-numeric: tabular-nums; margin-left: .15rem; }
.segment.abstand-unten { margin-bottom: var(--a3); }
@media (max-width: 560px) { .segment { display: flex; flex-wrap: wrap; } .segment a { flex: 1 1 auto; text-align: center; } }
.ergebniszeile { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: var(--a2) var(--a3); color: var(--muted); font-size: .86rem; margin: 0 0 var(--a3); }
.ergebniszeile > .segment, .ergebniszeile .segment { font-size: 1rem; }
.ergebniszeile .knoepfe { font-size: 1rem; }

/* 8 ---------------------------------------------------------------- Knöpfe */
button, .knopf, input[type="submit"] {
  display: inline-flex; align-items: center; justify-content: center; gap: .4rem;
  min-height: 2.4rem; padding: .45rem .95rem; border-radius: var(--radius);
  border: 1px solid var(--line-stark); background: var(--flaeche); color: var(--fg);
  font-weight: 550; line-height: 1.2; text-decoration: none; white-space: nowrap; cursor: pointer;
}
button:hover, .knopf:hover { background: var(--flaeche-2); color: var(--fg); border-color: var(--muted); }
button:focus-visible, .knopf:focus-visible { outline: none; box-shadow: var(--fokus); }
.knopf.primaer, button.primaer, button.haupt, a.primaer.knopf {
  background: var(--accent); border-color: var(--accent); color: var(--accent-fg);
}
.knopf.primaer:hover, button.primaer:hover, button.haupt:hover { background: var(--accent-stark); border-color: var(--accent-stark); color: var(--accent-fg); }
.knopf.gefahr, button.gefahr { background: var(--gefahr-flaeche); border-color: var(--gefahr-flaeche); color: #fff; }
.knopf.gefahr:hover, button.gefahr:hover { filter: brightness(.92); background: var(--gefahr-flaeche); color: #fff; }
.knopf.gefahr-leise, button.gefahr-leise { color: var(--fehler); border-color: var(--line-stark); }
.knopf.gefahr-leise:hover { border-color: var(--fehler); background: var(--fehler-weich); color: var(--fehler); }
/* leise Löschen-Links in Tabellen: grau, erst bei Zeigen/Fokus rot */
.knopf.link.gefahr-leise { color: var(--muted); border-color: transparent; }
.knopf.link.gefahr-leise:hover, .knopf.link.gefahr-leise:focus-visible { color: var(--fehler); background: var(--fehler-weich); border-color: transparent; }
.knopf.klein, button.klein { min-height: 1.9rem; padding: .2rem .6rem; font-size: .85rem; }
.knopf.link, button.link {
  background: transparent; border-color: transparent; color: var(--accent); padding-inline: .35rem; font-weight: 500;
}
.knopf.link:hover, button.link:hover { background: transparent; border-color: transparent; text-decoration: underline; color: var(--accent-stark); }
button[disabled], .knopf[aria-disabled="true"] { opacity: .5; cursor: not-allowed; pointer-events: none; }
.knoepfe, .zeile { display: flex; flex-wrap: wrap; gap: var(--a2); align-items: center; }
.zeile.zentriert { justify-content: center; }
/* Handy: Tippziele mindestens 44 px */
@media (max-width: 560px) {
  .knopf.klein, button.klein, .zuo button { min-height: 2.75rem; padding-inline: .85rem; }
  .karte details > summary, .aufgabe details > summary { padding: .45rem 0; }
  .knoepfe { gap: .6rem; }
}

/* 9 ---------------------------------------------------------------- Abzeichen, Hinweise, Meldungen, Leer */
.abzeichen {
  display: inline-flex; align-items: center; gap: .25rem; padding: .08rem .55rem; border-radius: 999px;
  font-size: .8rem; font-weight: 650; line-height: 1.45; white-space: nowrap; vertical-align: baseline;
  background: var(--flaeche-2); color: var(--muted); border: 1px solid transparent;
}
.abzeichen.ok { background: var(--ok-weich); color: var(--ok); }
.abzeichen.warnung { background: var(--warnung-weich); color: var(--warnung); }
.abzeichen.fehler { background: var(--fehler-weich); color: var(--fehler); }
.abzeichen.info { background: var(--info-weich); color: var(--info); }
.abzeichen.neutral { background: var(--flaeche-2); color: var(--muted); border-color: var(--line); }

.hinweis {
  padding: .7rem var(--a4); margin: 0 0 var(--a4); border-radius: var(--radius);
  border: 1px solid color-mix(in srgb, var(--info) 30%, transparent); border-left: 4px solid var(--info);
  background: var(--info-weich); color: var(--fg);
}
.hinweis > :first-child { margin-top: 0; }
.hinweis > :last-child { margin-bottom: 0; }
.hinweis.ok { background: var(--ok-weich); border-color: color-mix(in srgb, var(--ok) 30%, transparent); border-left-color: var(--ok); }
.hinweis.warnung { background: var(--warnung-weich); border-color: color-mix(in srgb, var(--warnung) 30%, transparent); border-left-color: var(--warnung); }
.hinweis.fehler, .gesperrt { color: var(--fg); background: var(--fehler-weich); border-color: color-mix(in srgb, var(--fehler) 30%, transparent); border-left-color: var(--fehler); }
.gesperrt { padding: .7rem var(--a4); margin: 0 0 var(--a4); border-radius: var(--radius); border-width: 1px 1px 1px 4px; border-style: solid; }
.hinweis-titel { font-weight: 650; display: block; margin-bottom: .15rem; }

.meldungen { list-style: none; margin: 0 0 var(--a4); padding: 0; }
.meldungen li { margin-bottom: var(--a2); }
.meldungen > li:not(.hinweis) { padding: .6rem .9rem; border-left: 4px solid var(--accent); background: var(--flaeche); }
.meldungen > li:not(.hinweis).error { border-color: var(--fehler); }

.leer {
  text-align: center; padding: var(--a5) var(--a4); margin: 0 0 var(--a4);
  background: var(--flaeche); border: 1px dashed var(--line-stark); border-radius: var(--radius-gross);
  color: var(--muted);
}
.leer-titel { color: var(--fg); font-weight: 650; font-size: 1.05rem; margin: 0 0 .3rem; }
.leer p { max-width: 52ch; margin-left: auto; margin-right: auto; }
.leer .knopf { margin-top: var(--a2); }
.karte .leer { border: 0; padding: var(--a4) 0; margin: 0; background: transparent; }

.bestaetigung { max-width: 720px; }
.bestaetigung-objekt { font-weight: 650; margin-bottom: .2rem; }
.bestaetigung h2 { margin-top: 0; }
.folgen { margin: 0 0 var(--a4); padding-left: 1.2rem; }

/* 10 --------------------------------------------------------------- Zeitleiste, Definitionslisten */
.zeitleiste { list-style: none; margin: 0; padding: 0 0 0 1.4rem; position: relative; }
.zeitleiste::before {
  content: ""; position: absolute; left: .42rem; top: .5rem; bottom: .5rem; width: 2px; background: var(--line);
}
.zeitleiste > li { position: relative; padding: 0 0 var(--a4) .35rem; }
.zeitleiste > li:last-child { padding-bottom: 0; }
.zeitleiste > li::before {
  content: ""; position: absolute; left: -1.2rem; top: .35rem; width: .8rem; height: .8rem; border-radius: 50%;
  background: var(--flaeche); border: 2px solid var(--line-stark);
}
.zeitleiste > li.aktuell::before { background: var(--accent); border-color: var(--accent); }
.zeitleiste > li.zukunft::before { border-style: dashed; border-color: var(--accent); }
.zeitleiste > li.beendet { color: var(--muted); }
.zeitleiste .zeitraum { display: block; color: var(--muted); font-size: .82rem; font-variant-numeric: tabular-nums; }
.zeitleiste .titel { font-weight: 650; }
.zeitleiste .betraege { display: flex; flex-wrap: wrap; gap: .25rem 1rem; margin-top: .15rem; font-variant-numeric: tabular-nums; }

.dl-raster, dl.kopfdaten {
  display: grid; grid-template-columns: minmax(8rem, max-content) minmax(0, 1fr); gap: .45rem 1.25rem; margin: 0 0 var(--a3);
}
.dl-raster > dt, dl.kopfdaten > dt { color: var(--muted); font-size: .9rem; }
.dl-raster > dd, dl.kopfdaten > dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }
.dl-raster.zweispaltig { grid-template-columns: minmax(8rem, max-content) minmax(0, 1fr); }
@media (min-width: 900px) {
  .dl-raster.zweispaltig { grid-template-columns: repeat(2, minmax(8rem, max-content) minmax(0, 1fr)); }
}
/* Handy: Begriff und Wert bleiben nebeneinander (kurze Werte wie „3“, „K4“); nur .lang (Anschriften, Notizen) einspaltig */
@media (max-width: 520px) {
  .dl-raster, dl.kopfdaten, .dl-raster.zweispaltig { grid-template-columns: minmax(6.5rem, 40%) minmax(0, 1fr); gap: .35rem .75rem; }
  .dl-raster.lang { grid-template-columns: minmax(0, 1fr); gap: .05rem; }
  .dl-raster.lang > dd { margin-bottom: .5rem; }
}

/* 11 --------------------------------------------------------------- Paginierung */
.paginierung, .seiten { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: .3rem; margin: var(--a4) 0; }
.paginierung a, .paginierung span[aria-current], .paginierung .aus, .seiten a {
  min-width: 2.2rem; padding: .35rem .65rem; border: 1px solid var(--line); border-radius: var(--radius);
  text-align: center; text-decoration: none; background: var(--flaeche);
}
.paginierung a:hover { border-color: var(--accent); }
.paginierung span[aria-current] { background: var(--accent); border-color: var(--accent); color: var(--accent-fg); font-weight: 650; }
.paginierung .aus { color: var(--muted); opacity: .5; }
.paginierung .luecke { padding: 0 .2rem; color: var(--muted); }
.paginierung .info { flex-basis: 100%; text-align: center; color: var(--muted); font-size: .82rem; }

/* 12 --------------------------------------------------------------- Hilfsklassen */
.inline { display: inline; }
.klein { font-size: .86rem; color: var(--muted); }
.gedaempft { color: var(--muted); }
.nowrap { white-space: nowrap; }
.rechts { text-align: right; }
.ein, .gruen { color: var(--ok); }
.teil { color: var(--warnung); font-weight: 600; }
.aus { color: var(--fehler); }
.rot, .fehler-text { color: var(--fehler); font-weight: 600; }
.gruen { font-weight: 600; }
td.ein, td.aus { font-weight: 600; }
div.fehler, span.fehler, p.fehler, ul.fehler { color: var(--fehler); }
.stapel > * + * { margin-top: var(--a4); }
.abstand-oben { margin-top: var(--a5); }
.abstand-oben-klein { margin-top: var(--a3); }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
/* Spalten, die nur auf breiten Bildschirmen Platz haben (die Information steht auch anderswo in der Zeile) */
@media (max-width: 900px) { .nur-breit { display: none !important; } }
.pruefsumme { font-family: var(--schrift-mono); font-size: .8em; word-break: break-all; }

/* 13 --------------------------------------------------------------- Bestehende Seiten (Bank, NK, Anmeldung) */
/* ältere Kachel-Liste */
.kacheln { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: var(--a3); }
.kacheln li { background: var(--flaeche); border: 1px solid var(--line); border-radius: var(--radius-gross); padding: .8rem var(--a4); }
.kacheln strong { font-size: 1.6rem; display: block; }

/* Bank: Aktionszeile, kompakte Formularfelder, Zuordnungen */
.aktionen { display: flex; flex-wrap: wrap; gap: var(--a2) var(--a3); align-items: center; margin: 0 0 var(--a4); }
.felder { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 190px), 1fr)); gap: var(--a3); margin-bottom: var(--a3); }
.felder label { display: flex; flex-direction: column; gap: .2rem; font-size: .82rem; font-weight: 550; color: var(--muted); min-width: 0; }
.felder label > input:not([type="checkbox"]), .felder label > select, .felder label > textarea { width: 100%; color: var(--fg); }
.felder label.check { flex-direction: row; align-items: center; gap: .45rem; color: var(--fg); font-size: .9rem; }
.felder .fehler { font-size: .82rem; font-weight: 550; }
table.umsaetze td { vertical-align: top; }
.zuo { list-style: none; padding: 0; margin: .3rem 0 0; }
.zuo li { display: flex; flex-wrap: wrap; gap: .35rem; align-items: center; margin-bottom: .3rem; }
.zuo li.unbestaetigt > span { font-style: italic; }
.zuo button { min-height: 1.75rem; padding: .1rem .55rem; font-size: .82rem; }
@media (max-width: 560px) {
  .tabelle.stapeln .klein-handy { font-size: .85rem; color: var(--muted); }
  .tabelle.stapeln table.umsaetze td:last-child { grid-column: 1 / -1; }
  .zuo li { gap: .5rem; }
  .zuo li > form { flex: 1 1 8rem; }
  .zuo li > form > button { width: 100%; }
}
.zuo form { display: inline; }
fieldset.teil { border: 1px solid var(--line); border-radius: var(--radius); margin: 0 0 var(--a3); padding: var(--a2) var(--a3) 0; }
fieldset.teil legend { padding: 0 .3rem; font-weight: 600; font-size: .9rem; }
.karte > details > summary, details.aufklapp > summary { font-weight: 650; }
.karte > details[open] > summary, details.karte[open] > summary { margin-bottom: var(--a3); }
details.karte > summary { font-size: 1.02rem; }
details.karte > summary .klein { font-weight: normal; }
table.kv th { width: 13rem; color: var(--muted); font-weight: normal; vertical-align: top; background: none; }

/* NK: Prüfbericht, Versandformular */
.bericht { list-style: none; padding: 0; margin: .4rem 0 var(--a3); }
.bericht > li { padding: .55rem .8rem; margin-bottom: .35rem; border-left: 4px solid var(--line-stark); border-radius: var(--radius-klein); }
.bericht > li.fehler { border-color: var(--fehler); background: var(--fehler-weich); color: var(--fg); }
.bericht > li.warnung { border-color: var(--warnung); background: var(--warnung-weich); color: var(--fg); }
.bericht .linkliste { margin-top: .35rem; font-size: .9rem; }
.bericht .linkliste li { border-top-color: color-mix(in srgb, var(--fg) 12%, transparent); }
.bericht .bericht-link { white-space: nowrap; font-weight: 600; margin-left: .3rem; }
.bericht .code { display: none; } /* interne Codes nur noch als title */
.bericht details { margin-top: .35rem; }
.bericht details > summary { font-size: .88rem; color: var(--accent); font-weight: 550; }
.bericht details .tabelle { margin: .4rem 0 .2rem; box-shadow: none; }
.versand { display: flex; flex-wrap: wrap; gap: .35rem .5rem; align-items: center; }
.versand label { display: inline-flex; align-items: center; gap: .3rem; font-size: .82rem; color: var(--muted); }
.versand input, .versand select { min-height: 2rem !important; padding: .2rem .4rem !important; max-width: 11rem; font-size: .88rem; }
.versand .nachweis { max-width: 16rem; }
.versand button { min-height: 2rem; padding: .2rem .7rem; font-size: .85rem; }

/* Schrittleiste (Ablauf einer NK-Abrechnung): 1 Prüfen · 2 Festschreiben · 3 Drucken · 4 Zugang */
.schritte {
  list-style: none; counter-reset: schritt; display: flex; flex-wrap: wrap; gap: .25rem 0; padding: 0;
  margin: calc(-1 * var(--a2)) 0 var(--a5); font-size: .9rem; color: var(--muted);
}
.schritte li { counter-increment: schritt; display: inline-flex; align-items: center; gap: .4rem; padding-right: 1.4rem; position: relative; }
.schritte li::before {
  content: counter(schritt); display: inline-grid; place-items: center; width: 1.5rem; height: 1.5rem; border-radius: 50%;
  border: 1px solid var(--line-stark); background: var(--flaeche); font-size: .8rem; font-weight: 650;
}
.schritte li:not(:last-child)::after { content: "›"; position: absolute; right: .5rem; color: var(--line-stark); }
.schritte li.aktuell { color: var(--fg); font-weight: 650; }
.schritte li.aktuell::before { background: var(--accent); border-color: var(--accent); color: var(--accent-fg); }
.schritte li.fertig::before { content: "✓"; background: var(--ok-weich); border-color: var(--ok); color: var(--ok); }

/* Anmeldung */
.anmeldung { display: grid; place-items: start center; padding-top: 8vh; }
.anmeldung .karte { width: min(100%, 400px); padding: var(--a5); }
.anmeldung h1 { margin-top: 0; font-size: 1.35rem; }
.anmeldung .feld input { width: 100%; }
.anmeldung button[type="submit"] { width: 100%; }

/* 14 --------------------------------------------------------------- Druck */
@media print {
  :root {
    color-scheme: light;
    --bg: #fff; --flaeche: #fff; --flaeche-2: #f2f2f2; --zeile-hover: #fff; --fg: #000; --muted: #444;
    --line: #bbb; --line-stark: #888; --accent: #000; --schatten: none;
  }
  body { font-size: 10pt; background: #fff; color: #000; display: block; }
  .kopf, .fuss, .menue, .sprungmarke, .seitenkopf-aktionen, .werkzeugleiste, .filter, .paginierung, .seiten,
  .reiter, .aktionen, .formular-aktionen, button, .knopf, .nicht-drucken { display: none !important; }
  .haupt { max-width: none; padding: 0; }
  .karte, .tabelle, .kennzahl { box-shadow: none; border-color: #999; }
  .karte, .kennzahl, tr, .aufgabe { break-inside: avoid; }
  .tabelle { overflow: visible; }
  thead { display: table-header-group; }
  a { color: inherit; text-decoration: none; }
  .abzeichen { border: 1px solid #999; background: none !important; color: #000 !important; }
  h1, h2, h3 { break-after: avoid; }
}

/* Notfall-Karte (Objekt → Dienstleister & Notfall): Name, Rolle, Notiz – Anruf-Knopf rechts */
.notfall-zeile { justify-content: space-between; align-items: center; }
.notfall-zeile .notfall-text { flex: 1 1 20rem; min-width: 0; }
.notfall-zeile h2 { margin: 0 0 .2rem; font-size: 1.1rem; }
.notfall-zeile p { margin: 0 0 .2rem; }
.werkzeugleiste .suche select { width: 100%; max-width: 32rem; }

/* Checkliste (Auszug abschließen, nächste Schritte nach dem Einzug): ✓ erledigt · ! offen · i Hinweis */
.checkliste { list-style: none; margin: 0; padding: 0; }
.checkliste > li { display: flex; align-items: flex-start; gap: var(--a3); padding: .55rem 0; border-top: 1px solid var(--line); }
.checkliste > li:first-child { border-top: 0; padding-top: 0; }
.checkliste .check-marke {
  flex: none; display: inline-grid; place-items: center; width: 1.5rem; height: 1.5rem; border-radius: 50%;
  font-size: .8rem; font-weight: 700; border: 1px solid var(--line-stark); color: var(--muted); background: var(--flaeche);
}
.checkliste .erledigt .check-marke { background: var(--ok-weich); border-color: var(--ok); color: var(--ok); }
.checkliste .offen .check-marke { background: var(--warnung-weich); border-color: var(--warnung); color: var(--warnung); }
.checkliste .check-text { flex: 1; min-width: 0; }
.checkliste .erledigt .check-text strong { font-weight: 550; color: var(--muted); }
.checkliste > li > .knopf { flex: none; }
@media (max-width: 560px) {
  .checkliste > li { flex-wrap: wrap; }
  .checkliste > li > .knopf { margin-left: calc(1.5rem + var(--a3)); }
}

/* „So geht's“: zugeklappte Hilfe für seltene Abläufe */
details.so-gehts > summary { color: var(--accent); }
.so-gehts-liste { margin: 0; }
.so-gehts-liste dt { font-weight: 650; margin-top: var(--a3); }
.so-gehts-liste dt:first-child { margin-top: 0; }
.so-gehts-liste dd { margin: .15rem 0 0; }

/* Vertrag: aufklappbare Zeile „Änderungen (n)“ in der Karte „Vertrag“ */
details.verlauf-zeile { border-top: 1px solid var(--line); margin-top: var(--a3); padding-top: var(--a2); }
details.verlauf-zeile > summary { color: var(--accent); font-size: .9rem; }
details.verlauf-zeile .linkliste { margin-top: var(--a2); font-size: .9rem; }

/* Mieterkonto: Monate vor dem ersten Kontoauszug – nur Soll, „ungeprüft“, zählen nicht mit */
tr.ungeprueft > th, tr.ungeprueft > td { color: var(--muted); background: repeating-linear-gradient(135deg, transparent 0 6px, var(--flaeche-2) 6px 12px); }

/* Assistent „Neuer Mietvertrag“: Umschalter „Neuer Mieter / Vorhandener Kontakt“ und Staffelstufen nur bei Staffelmiete.
   Ohne :has() (alte Browser) bleiben alle Gruppen sichtbar – das Formular funktioniert trotzdem. */
form:has(input[name="modus"][value="vorhanden"]:checked) .feldgruppe.nur-neu:not(:has(.hat-fehler)),
form:has(input[name="modus"][value="neu"]:checked) .feldgruppe.nur-vorhanden:not(:has(.hat-fehler)) { display: none; }
form:has(input[name="mietart"]:checked:not([value="staffel"])) .feldgruppe.nur-staffel:not(:has(.hat-fehler)):not(:has(input[value])) { display: none; }
.feldgruppe.nur-neu + .feldgruppe, .feldgruppe.nur-vorhanden + .feldgruppe { border-top: 1px solid var(--line); }

/* Bank: Sammelbestätigung über der Tabelle, beschriftete Häkchen je Vorschlag */
.sammelleiste {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--a2) var(--a3);
  padding: .6rem var(--a4); margin: 0 0 var(--a3); background: var(--info-weich); border-radius: var(--radius);
  border: 1px solid color-mix(in srgb, var(--info) 30%, transparent);
}
.auswahl-haekchen { display: inline-flex; align-items: center; gap: .3rem; font-size: .82rem; color: var(--muted); min-height: 1.75rem; cursor: pointer; }