/* Vermietungsportal: Dashboard
   Ruhige, dichte Gebrauchsoberfläche in der Formensprache des Rechnungsdienstes, zuerst für das
   Handy gebaut (375 px), am Schreibtisch mit Seitenleiste. Natives CSS mit Design-Tokens.
   Regeln: eine Akzentfarbe (tiefes Petrol). Statusfarben nur für echte Zustände und immer
   zusammen mit Text und Icon. Radien: Bedienelemente und Chips 8px, Flächen 12px.
   Tippflächen am Handy mindestens 44px. Keine Inline-Styles (die CSP verbietet sie).
   Schriften: Geist und Geist Mono (SIL OFL, siehe fonts/OFL-Geist.txt).
   Icons: Phosphor (MIT, siehe icons/LICENSE-Phosphor.txt).

   Inhalt: Tokens, Grundlagen, Gerüst (Kopf, Seitenleiste, Leiste unten), Seitenkopf, Chips,
   Flächen, Daten und Listen, Tabelle/Karten, Reiter, Blättern, Leerzustand, Meldungen, Verlauf,
   Bedienelemente, Formulare, Filter, Aktionsleiste, Kontakt, Zeilen, Anmeldung, Dialog,
   Ladezustand, Helfer, breite Bildschirme, Druck, reduzierte Bewegung. */

@font-face {
  font-family: "Geist";
  src: url("../fonts/Geist-Variable.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Geist Mono";
  src: url("../fonts/GeistMono-Variable.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

/* ---------- Tokens ---------- */
:root {
  color-scheme: light dark;
  --font-sans: "Geist", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "Geist Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  /* Abstände */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 24px;
  --s-6: 32px;
  --s-7: 48px;

  /* Radien: ein System für alles */
  --r-control: 8px;
  --r-inner: 5px;    /* Element innerhalb eines Bedienelements (8px minus 3px Innenabstand) */
  --r-panel: 12px;

  /* Schriftgrößen (am Handy eine Stufe größer als am Schreibtisch, siehe unten) */
  --fs-xs: 12px;
  --fs-sm: 13px;
  --fs-base: 15px;
  --fs-md: 16px;
  --fs-lg: 18px;
  --fs-xl: 22px;
  --fs-stat: 26px;

  /* Maße */
  --tap: 44px;             /* kleinste Tippfläche */
  --control-h: 44px;       /* Höhe von Knöpfen und Feldern */
  --tabbar-h: 58px;        /* Leiste unten am Handy */
  --rand: var(--s-4);      /* Seitenrand des Inhalts */
  --unten: env(safe-area-inset-bottom, 0px);

  /* Ebenen */
  --z-aktionen: 10;
  --z-leiste: 20;
  --z-menue: 30;
  --z-sprung: 40;

  /* Farben: hell */
  --bg: #f4f6f6;
  --surface: #fbfcfc;
  --surface-2: #eef1f2;
  --surface-3: #e4e9eb;
  --border: #d9e0e3;
  --border-strong: #7f8d93;
  --text: #152024;
  --text-2: #46555c;
  --text-3: #5b6a71;

  --accent: #0e6765;
  --accent-hover: #0b5654;
  --on-accent: #f3fafa;
  --accent-soft: #e0efee;
  --accent-text: #0b5c5a;

  --ok: #1c6e38;
  --ok-bg: #e3f2e8;
  --ok-border: #a9d6b8;
  --warn: #7f5300;
  --warn-bg: #fbefd6;
  --warn-border: #e3bf72;
  --error: #b0251c;
  --error-bg: #fbe6e4;
  --error-border: #eba49e;
  --info: #245c8f;
  --info-bg: #e3edf7;
  --info-border: #a9c5e3;
  --neutral: #46555c;
  --neutral-bg: #eef1f2;
  --neutral-border: #cfd7da;

  --danger: #b0251c;
  --danger-hover: #951e16;
  --on-danger: #fff6f5;

  --shadow: 0 1px 2px rgb(21 32 36 / 0.06), 0 1px 1px rgb(21 32 36 / 0.03);
  --shadow-lg: 0 16px 40px rgb(21 32 36 / 0.2);
  --backdrop: rgb(16 26 29 / 0.45);
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0f1416;
    --surface: #151b1e;
    --surface-2: #1c2427;
    --surface-3: #232d31;
    --border: #273135;
    --border-strong: #64737a;
    --text: #e4eaec;
    --text-2: #a7b4b9;
    --text-3: #8d9ba1;

    --accent: #5bb8b1;
    --accent-hover: #74c6bf;
    --on-accent: #0a1515;
    --accent-soft: #173332;
    --accent-text: #7accc5;

    --ok: #74d093;
    --ok-bg: #132a1b;
    --ok-border: #2a5537;
    --warn: #e8bb52;
    --warn-bg: #2c2310;
    --warn-border: #5c4a1c;
    --error: #f48b81;
    --error-bg: #341a1b;
    --error-border: #6a2f2c;
    --info: #8fbbe9;
    --info-bg: #152536;
    --info-border: #2c4a6b;
    --neutral: #a7b4b9;
    --neutral-bg: #1c2427;
    --neutral-border: #313c41;

    --danger: #f48b81;
    --danger-hover: #f7a199;
    --on-danger: #2b0f0d;

    --shadow: 0 1px 2px rgb(0 0 0 / 0.3);
    --shadow-lg: 0 16px 40px rgb(0 0 0 / 0.5);
    --backdrop: rgb(4 8 9 / 0.65);
  }
}

/* ---------- Grundlagen ---------- */
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }

html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -webkit-tap-highlight-color: transparent;
  overflow-wrap: break-word;
}

h1, h2, h3 { margin: 0; line-height: 1.25; font-weight: 600; text-wrap: balance; }
h1 { font-size: var(--fs-xl); letter-spacing: -0.015em; }
h2 { font-size: var(--fs-md); }
h3 { font-size: var(--fs-base); }
p { margin: 0; }
a { color: var(--accent-text); text-underline-offset: 2px; }
a:hover { text-decoration-thickness: 2px; }
img { max-width: 100%; height: auto; }
code, pre, .mono { font-family: var(--font-mono); }
.mono { font-size: 0.95em; }
.num { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.nowrap { white-space: nowrap; }
.muted { color: var(--text-2); }
.text-fehler { color: var(--error); }
.prewrap { white-space: pre-line; overflow-wrap: anywhere; }

.icon { width: 1em; height: 1em; flex: none; vertical-align: -0.125em; }

:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
/* Sprungziele (Anker, :target) nicht direkt an den Bildschirmrand setzen */
[id] { scroll-margin-top: var(--s-4); }
/* Kein verzögerter Doppeltipp-Zoom auf allem, was sich antippen lässt */
a, button, summary, label, input, select, textarea { touch-action: manipulation; }

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap; border: 0;
}
.skip-link {
  position: absolute; left: var(--s-2); top: -80px; z-index: var(--z-sprung);
  display: inline-flex; align-items: center; min-height: var(--tap);
  padding: 0 var(--s-4);
  background: var(--accent); color: var(--on-accent);
  border-radius: var(--r-control); font-weight: 600; text-decoration: none;
}
.skip-link:focus { top: var(--s-2); }

/* ---------- Gerüst ---------- */
.shell { min-height: 100dvh; }

/* Kopf am Handy: nur die Marke. Er scrollt mit weg und nimmt keinen festen Platz. */
.kopf {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-3);
  padding: calc(var(--s-2) + env(safe-area-inset-top, 0px)) max(var(--rand), env(safe-area-inset-right, 0px))
           var(--s-2) max(var(--rand), env(safe-area-inset-left, 0px));
  background: var(--surface);
  border-bottom: 1px solid var(--border);
}
.sidebar { display: none; }

.brand {
  display: inline-flex; align-items: center; gap: 10px;
  min-height: var(--tap);
  color: var(--text); text-decoration: none;
  border-radius: var(--r-control);
}
.brand__mark {
  display: grid; place-items: center;
  width: 32px; height: 32px;
  border-radius: var(--r-control);
  background: var(--accent); color: var(--on-accent);
  font-size: 18px;
}
.brand__text { display: grid; line-height: 1.2; }
.brand__name { font-weight: 600; font-size: var(--fs-md); }
.brand__sub { font-size: var(--fs-xs); color: var(--text-2); }

.content {
  width: 100%;
  padding: var(--s-4) max(var(--rand), env(safe-area-inset-right, 0px))
           calc(var(--tabbar-h) + var(--unten) + var(--s-6)) max(var(--rand), env(safe-area-inset-left, 0px));
}
/* Der Inhalt bekommt den Fokus nur über den Sprunglink (tabindex="-1"), er ist kein Bedienelement. */
.content:focus { outline: none; }
/* Gleicher Abstand zwischen allen Blöcken einer Seite (Kopf, Reiter, Filter, Liste, Karten) */
.content > * + * { margin-top: var(--s-4); }

/* Zähler an einem Navigationseintrag (neue Anfragen) */
.nav__badge {
  min-width: 22px; padding: 0 6px;
  border-radius: var(--r-control);
  border: 1px solid var(--warn-border);
  background: var(--warn-bg); color: var(--warn);
  font-family: var(--font-mono); font-size: var(--fs-xs); font-weight: 600;
  line-height: 20px; text-align: center;
}

/* Leiste unten am Handy: die vier häufigsten Bereiche und "Mehr" */
.tabbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: var(--z-leiste);
  padding-bottom: var(--unten);
  background: var(--surface);
  border-top: 1px solid var(--border);
}
.tabbar__list {
  list-style: none; margin: 0;
  padding: 0 max(var(--s-1), env(safe-area-inset-right, 0px)) 0 max(var(--s-1), env(safe-area-inset-left, 0px));
  display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr);
}
.tabbar__link {
  position: relative;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  width: 100%; height: var(--tabbar-h);
  padding: 0 2px;
  border: 0; border-radius: var(--r-control);
  background: none; color: var(--text-2);
  font: inherit; font-size: 11px; font-weight: 500; line-height: 1.2;
  text-decoration: none; cursor: pointer;
}
.tabbar__link:hover { color: var(--text); }
.tabbar__link .icon { font-size: 22px; }
.tabbar__link > span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tabbar__link[aria-current="page"], .tabbar__link.is-current { color: var(--accent-text); }
.tabbar__link[aria-current="page"]::before, .tabbar__link.is-current::before {
  content: ""; position: absolute; top: 0; left: 22%; right: 22%; height: 3px;
  border-radius: 0 0 3px 3px; background: var(--accent);
}
.tabbar__link:active { background: var(--surface-2); }
.tabbar__link:focus-visible { outline-offset: -3px; }
.tabbar__link .nav__badge { position: absolute; top: 5px; left: calc(50% + 6px); }
.tabbar__mehr > details > summary { list-style: none; }
.tabbar__mehr > details > summary::-webkit-details-marker { display: none; }

/* Menü hinter "Mehr": übrige Bereiche, Konto, Abmelden */
.mehr {
  position: absolute; right: var(--s-2); bottom: calc(100% + var(--s-2)); z-index: var(--z-menue);
  width: min(300px, calc(100vw - 2 * var(--s-2)));
  max-height: calc(100dvh - var(--tabbar-h) - var(--unten) - 2 * var(--s-4));
  overflow-y: auto; overscroll-behavior: contain;
  padding: var(--s-2);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-panel);
  box-shadow: var(--shadow-lg);
}
.mehr__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.mehr__link {
  display: flex; align-items: center; gap: var(--s-3);
  min-height: 48px; width: 100%;
  padding: 0 var(--s-3);
  border: 0; border-radius: var(--r-control);
  background: none; color: var(--text);
  font: inherit; font-weight: 500; text-align: left; text-decoration: none; cursor: pointer;
}
.mehr__link .icon { font-size: 20px; color: var(--text-2); }
.mehr__link:hover, .mehr__link:active { background: var(--surface-2); }
.mehr__link[aria-current="page"] { background: var(--accent-soft); color: var(--accent-text); }
.mehr__link[aria-current="page"] .icon { color: inherit; }
.mehr__konto {
  margin-top: var(--s-2); padding: var(--s-3) var(--s-3) var(--s-1);
  border-top: 1px solid var(--border);
  color: var(--text-2); font-size: var(--fs-sm); overflow-wrap: anywhere;
}
.mehr form { margin: 0; }

/* ---------- Seitenkopf ---------- */
.page-head { margin-bottom: var(--s-4); }
.page-head__zeile { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: var(--s-3) var(--s-5); }
.page-head__text { min-width: 0; flex: 1 1 220px; }
.page-head__meta { margin-top: var(--s-1); color: var(--text-2); max-width: 70ch; }
.page-head__aktionen { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.back {
  display: inline-flex; align-items: center; gap: 6px;
  min-height: var(--tap); margin: calc(var(--s-2) * -1) 0 0;
  color: var(--text-2); font-size: var(--fs-sm); text-decoration: none;
}
.back:hover { color: var(--text); text-decoration: underline; }
.link-quiet { font-size: var(--fs-sm); color: var(--text-2); text-decoration: none; white-space: nowrap; }
.link-quiet:hover { color: var(--accent-text); text-decoration: underline; }
/* Tippflächen einzelner Textlinks: ruhiger Link in der Kopfzeile einer Karte, Link unter einer
   Liste, in einem Datenblock und in einem Hinweiskasten. Sie sind nur eine Textzeile hoch. Die
   Fläche wächst nach oben und unten auf 44px, das Bild bleibt gleich. */
.panel__head .link-quiet, .table-note a, .kv dd > a, .alert__body a:not(.btn) {
  display: inline-block; margin: -12px 0; padding: 12px 0;
}

/* ---------- Status-Chips ---------- */
/* Farbe steht nie allein: Jeder Chip trägt Icon und Text. */
.chips { display: inline-flex; flex-wrap: wrap; gap: var(--s-1); }
.chip {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 2px 8px;
  border: 1px solid var(--neutral-border);
  border-radius: var(--r-control);
  background: var(--neutral-bg); color: var(--neutral);
  font-size: var(--fs-xs); font-weight: 500; line-height: 18px; white-space: nowrap;
}
.chip .icon { font-size: 13px; }
.chip--ok, .ton-ok { color: var(--ok); background: var(--ok-bg); border-color: var(--ok-border); }
.chip--warnung, .ton-warnung { color: var(--warn); background: var(--warn-bg); border-color: var(--warn-border); }
.chip--fehler, .ton-fehler { color: var(--error); background: var(--error-bg); border-color: var(--error-border); }
.chip--info, .ton-info { color: var(--info); background: var(--info-bg); border-color: var(--info-border); }
.chip--neutral, .ton-neutral { color: var(--neutral); background: var(--neutral-bg); border-color: var(--neutral-border); }

/* ---------- Flächen ---------- */
.panel {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-panel);
  padding: var(--s-4);
  box-shadow: var(--shadow);
  min-width: 0;
}
.panel + .panel { margin-top: var(--s-4); }
.panel > * + * { margin-top: var(--s-3); }   /* gleicher Abstand zwischen den Teilen einer Karte */
.panel__head {
  display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--s-1) var(--s-3);
  margin-bottom: var(--s-3);
}
.panel__title { display: flex; align-items: center; gap: var(--s-2); font-size: var(--fs-md); }
.panel__title .icon { color: var(--text-2); font-size: 18px; }
.panel--fehler { border-color: var(--error-border); }
.panel--warnung { border-color: var(--warn-border); }
.panel__intro { margin: calc(var(--s-2) * -1) 0 var(--s-3); max-width: 70ch; color: var(--text-2); }
.subsection { margin-top: var(--s-4); padding-top: var(--s-4); border-top: 1px solid var(--border); }
.subsection:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.subsection__title { margin-bottom: var(--s-2); }
.subsection > .hint { margin-bottom: var(--s-3); }

.stack > * + * { margin-top: var(--s-3); }
.stack--weit > * + * { margin-top: var(--s-5); }
.cluster { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); }
.cluster form { margin: 0; }
/* position: relative hält versteckte Texte (.visually-hidden) im wischbaren Bereich. Sonst ragen
   sie über den Bildschirm hinaus, und die ganze Seite lässt sich seitlich schieben. */
.scroll-x { position: relative; overflow-x: auto; overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch; }

/* Seite mit Hauptspalte und Randspalte (Detailseiten). Am Handy untereinander. */
.spalten { display: grid; gap: var(--s-4); align-items: start; }
.spalten__haupt, .spalten__seite { display: grid; gap: var(--s-4); min-width: 0; }
.spalten .panel + .panel { margin-top: 0; }

/* Kennzahlen (Übersicht): bewusst ohne Kartenrahmen */
.stats {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  margin: 0 0 var(--s-4);
  border-top: 1px solid var(--border); border-bottom: 1px solid var(--border);
}
.stat { padding: var(--s-3) var(--s-3) var(--s-3) 0; min-width: 0; }
.stat:nth-child(n + 3) { border-top: 1px solid var(--border); }
.stat dt { font-size: var(--fs-sm); color: var(--text-2); }
.stat__value { display: flex; align-items: center; gap: var(--s-2); margin: var(--s-1) 0 0; font-size: var(--fs-stat); font-weight: 500; line-height: 1.2; }
.stat__value a { color: inherit; }
.stat__hint { margin: 2px 0 0; font-size: var(--fs-sm); color: var(--text-2); }
.stat--warnung .stat__value { color: var(--warn); }
.stat--fehler .stat__value { color: var(--error); }

/* ---------- Daten (Beschriftung und Wert) ---------- */
.kv { margin: 0; display: grid; gap: var(--s-3); }
.kv__zeile { display: grid; gap: 2px; min-width: 0; }
.kv dt { color: var(--text-2); font-size: var(--fs-sm); }
.kv dd { margin: 0; overflow-wrap: anywhere; }
/* Datenblöcke und Listen setzen ihren Außenabstand selbst auf null. Folgen sie in einer Karte auf
   etwas anderes, gilt der Abstand der Karte (.panel > * + *). */
.panel > * + .kv, .panel > * + .rows { margin-top: var(--s-3); }

/* ---------- Einfache Listen ---------- */
.rows { list-style: none; margin: 0; padding: 0; }
.rows__item {
  position: relative;
  display: grid; grid-template-columns: minmax(0, 1fr) auto;
  align-items: center; gap: var(--s-1) var(--s-3);
  padding: var(--s-3) 0;
  border-top: 1px solid var(--border);
}
.rows__item:first-child { border-top: 0; padding-top: 0; }
.rows__item:last-child { padding-bottom: 0; }
.rows__main { display: grid; gap: 2px; min-width: 0; }
.rows__title { display: inline-flex; align-items: center; gap: 6px; font-weight: 500; color: var(--text); overflow-wrap: anywhere; }
a.rows__title { text-decoration: none; }
a.rows__title:hover { text-decoration: underline; }
/* Die ganze Zeile ist antippbar, wenn der Titel ein Link mit dieser Klasse ist. */
.rows__title--flaeche::after { content: ""; position: absolute; inset: 0; }
.rows__meta { font-size: var(--fs-sm); color: var(--text-2); overflow-wrap: anywhere; }
.rows__meta.text-fehler { color: var(--error); }
.rows__ende { display: flex; align-items: center; gap: var(--s-2); white-space: nowrap; }
.rows__actions { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: var(--s-2); }
.rows__actions form { margin: 0; }
.rows__item a:not(.rows__title--flaeche), .rows__item button { position: relative; z-index: 1; }
.rows__item--gedimmt .rows__title { color: var(--text-3); }

/* ---------- Tabelle am Schreibtisch, Karten am Handy ---------- */
.table-wrap { position: relative; min-width: 0; }
.table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: var(--fs-base); }
.table th { text-align: left; }
.table .num { text-align: right; white-space: nowrap; }
.table tbody tr { position: relative; }
.table__link { color: var(--text); font-weight: 600; text-decoration: none; }
.table__link::after { content: ""; position: absolute; inset: 0; border-radius: var(--r-panel); }
.table__link:hover { text-decoration: underline; }
.table__link:focus-visible { outline: none; }
.table__link:focus-visible::after { outline: 2px solid var(--accent); outline-offset: -2px; }
.table td a:not(.table__link), .table td button, .table td form { position: relative; z-index: 1; }
.table tr.is-gedimmt td { color: var(--text-3); }
.table-note { margin-top: var(--s-3); color: var(--text-2); font-size: var(--fs-sm); }

@media (max-width: 719.98px) {
  .table--karten, .table--karten tbody, .table--karten tr, .table--karten td { display: block; }
  .table--karten thead {
    position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
    overflow: hidden; clip: rect(0 0 0 0); border: 0;
  }
  .table--karten tr {
    padding: var(--s-3) var(--s-4);
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-panel);
    box-shadow: var(--shadow);
  }
  .table--karten tr + tr { margin-top: var(--s-2); }
  .table--karten tr:active { background: var(--surface-2); }
  .table--karten td {
    display: flex; align-items: baseline; justify-content: space-between; gap: var(--s-3);
    padding: 2px 0; min-width: 0; text-align: right;
  }
  .table--karten td::before {
    content: attr(data-label);
    flex: none; color: var(--text-2); font-family: var(--font-sans); font-size: var(--fs-sm); text-align: left;
  }
  .table--karten td.zelle--haupt, .table--karten td.zelle--frei { display: block; text-align: left; }
  .table--karten td.zelle--haupt { padding-bottom: var(--s-1); font-size: var(--fs-md); }
  .table--karten td.zelle--haupt::before, .table--karten td.zelle--frei::before { content: none; }
  .table--karten td.zelle--frei { padding-top: var(--s-1); }
  .table--karten td:empty { display: none; }
}

/* ---------- Reiter (Links, der Server zeigt den gewählten Bereich) ---------- */
.tabs { margin: 0 calc(var(--rand) * -1) var(--s-4); }
.tabs__list {
  position: relative;   /* siehe .scroll-x */
  list-style: none; margin: 0; padding: 2px var(--rand);
  display: flex; gap: var(--s-1);
  overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none;
}
.tabs__list::-webkit-scrollbar { display: none; }
.tabs__tab {
  display: inline-flex; align-items: center; gap: var(--s-2);
  min-height: var(--tap); padding: 0 14px;
  border: 1px solid var(--border);
  border-radius: var(--r-control);
  background: var(--surface); color: var(--text-2);
  font-size: var(--fs-sm); font-weight: 500; text-decoration: none; white-space: nowrap;
}
.tabs__tab:hover { color: var(--text); background: var(--surface-2); }
.tabs__tab[aria-current="page"] { background: var(--accent-soft); border-color: var(--accent); color: var(--accent-text); }
.tabs__count {
  min-width: 20px; padding: 0 5px;
  border-radius: var(--r-inner);
  background: var(--surface-3); color: var(--text-2);
  font-family: var(--font-mono); font-size: var(--fs-xs); line-height: 18px; text-align: center;
}
.tabs__tab[aria-current="page"] .tabs__count { background: var(--surface); color: var(--accent-text); }

/* ---------- Blättern ---------- */
.pager { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); margin-top: var(--s-4); }
.pager__info { color: var(--text-2); font-size: var(--fs-sm); text-align: center; }
.pager__gesamt { display: block; white-space: nowrap; }

/* ---------- Leerzustand ---------- */
.empty {
  display: grid; justify-items: start; gap: 6px;
  padding: var(--s-5) var(--s-4);
  border: 1px dashed var(--border-strong);
  border-radius: var(--r-panel);
}
.panel .empty { border: 0; padding: var(--s-2) 0 0; }
.empty__icon {
  display: grid; place-items: center;
  width: 40px; height: 40px;
  border-radius: var(--r-control);
  background: var(--surface-2); color: var(--text-2);
  font-size: 22px;
}
.empty__title { margin-top: var(--s-1); font-weight: 600; }
.empty__text { color: var(--text-2); max-width: 62ch; }
.empty__actions { display: flex; flex-wrap: wrap; gap: var(--s-2); margin-top: var(--s-2); }

/* ---------- Meldungen und Hinweise ---------- */
.flashes { display: grid; gap: var(--s-2); margin-bottom: var(--s-4); }
.flashes .alert { margin-bottom: 0; }
.alert {
  display: flex; align-items: flex-start; gap: var(--s-3);
  margin-bottom: var(--s-4);
  padding: var(--s-3) var(--s-4);
  border: 1px solid var(--info-border);
  border-radius: var(--r-control);
  background: var(--info-bg);
}
.alert__icon { font-size: 18px; margin-top: 2px; color: var(--info); }
.alert__body { min-width: 0; flex: 1 1 auto; }
.alert__title { font-weight: 600; }
.alert__body > * + * { margin-top: 2px; }
/* Links im Hinweiskasten in Textfarbe: Auf den getönten Flächen bleibt der Kontrast so sicher. */
.alert__body a:not(.btn) { color: var(--text); font-weight: 500; }
.alert--ok { background: var(--ok-bg); border-color: var(--ok-border); }
.alert--ok .alert__icon { color: var(--ok); }
.alert--warnung { background: var(--warn-bg); border-color: var(--warn-border); }
.alert--warnung .alert__icon { color: var(--warn); }
.alert--fehler { background: var(--error-bg); border-color: var(--error-border); }
.alert--fehler .alert__icon { color: var(--error); }
.alert__close {
  flex: none; display: grid; place-items: center;
  width: var(--tap); height: var(--tap); margin: -10px -12px -10px 0;
  border: 0; border-radius: var(--r-control);
  background: none; color: var(--text-2); font-size: 18px; cursor: pointer;
}
.alert__close:hover { color: var(--text); }
.alert.is-weg { opacity: 0; transition: opacity 0.3s ease-out; }
.list { margin: var(--s-1) 0 0; padding-left: 18px; }
.list li + li { margin-top: 2px; }

/* ---------- Aufklappbarer Schritt ---------- */
/* <details class="aufklappen"> mit <summary class="btn ...">: Die Zeile ist ein Knopf, kein
   Dreieck. Der Inhalt steht als abgesetzter Kasten darunter. Funktioniert ohne Skript. */
.aufklappen > summary { width: fit-content; list-style: none; cursor: pointer; }
.aufklappen > summary::-webkit-details-marker { display: none; }
.aufklappen[open] > summary { margin-bottom: var(--s-3); }
.aufklappen__inhalt {
  padding: var(--s-3);
  border: 1px solid var(--border); border-radius: var(--r-control);
  background: var(--surface-2);
}

/* ---------- Verlauf ---------- */
.timeline { list-style: none; margin: 0; padding: 0; }
.timeline__item {
  position: relative;
  display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: var(--s-3);
  padding-bottom: var(--s-4);
}
.timeline__item:last-child { padding-bottom: 0; }
.timeline__item::before {
  content: ""; position: absolute;
  left: 11.5px; top: 28px; bottom: 4px; width: 1px;
  background: var(--border);
}
.timeline__item:last-child::before { display: none; }
.timeline__icon {
  display: grid; place-items: center;
  width: 24px; height: 24px;
  border-radius: var(--r-control);
  font-size: 14px;
  color: var(--neutral); background: var(--neutral-bg);
}
.timeline__item--ok .timeline__icon { color: var(--ok); background: var(--ok-bg); }
.timeline__item--warnung .timeline__icon { color: var(--warn); background: var(--warn-bg); }
.timeline__item--fehler .timeline__icon { color: var(--error); background: var(--error-bg); }
.timeline__item--info .timeline__icon { color: var(--info); background: var(--info-bg); }
.timeline__text { margin-top: 2px; overflow-wrap: anywhere; }
.timeline__item--fehler .timeline__text { font-weight: 500; }
.timeline__meta { font-size: var(--fs-xs); color: var(--text-2); overflow-wrap: anywhere; }

/* ---------- Bedienelemente ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s-2);
  min-height: var(--control-h); min-width: var(--control-h);
  padding: 0 var(--s-4);
  border: 1px solid transparent;
  border-radius: var(--r-control);
  background: var(--surface); color: var(--text);
  font: inherit; font-weight: 500; line-height: 1.2;
  white-space: nowrap; text-decoration: none;
  cursor: pointer;
  transition: transform 0.1s;   /* nur transform: der Druck auf den Knopf, sonst keine Bewegung */
}
.btn .icon { font-size: 18px; }
.btn:active:not(:disabled):not(.is-disabled) { transform: translateY(1px); }
.btn:disabled, .btn.is-disabled { cursor: not-allowed; opacity: 0.5; }
.btn[aria-busy="true"] { cursor: progress; }
.btn--primaer { background: var(--accent); color: var(--on-accent); }
.btn--primaer:hover:not(:disabled) { background: var(--accent-hover); }
.btn--sekundaer { background: var(--surface); color: var(--text); border-color: var(--border-strong); }
.btn--sekundaer:hover:not(:disabled):not(.is-disabled) { background: var(--surface-2); }
.btn--gefahr { background: var(--danger); color: var(--on-danger); }
.btn--gefahr:hover:not(:disabled) { background: var(--danger-hover); }
.btn--still { background: transparent; color: var(--accent-text); }
.btn--still:hover:not(:disabled) { background: var(--accent-soft); }
.btn--still.btn--rot { color: var(--error); }
.btn--still.btn--rot:hover:not(:disabled) { background: var(--error-bg); }
.btn--icon { width: var(--control-h); padding: 0; }
.btn--sm { font-size: var(--fs-sm); padding: 0 var(--s-3); }
.btn--block { width: 100%; }

/* ---------- Formulare ---------- */
/* Beschriftung über dem Feld, Hinweis und Fehlermeldung darunter. */
.field { display: grid; gap: 6px; align-content: start; min-width: 0; }
.field > label, .field__label { font-size: var(--fs-sm); font-weight: 500; color: var(--text); }
.field__pflicht { color: var(--error); margin-left: 2px; }
.hint { font-size: var(--fs-sm); color: var(--text-2); }
.field-error { display: flex; align-items: flex-start; gap: 6px; color: var(--error); font-size: var(--fs-sm); font-weight: 500; }
.field-error .icon { margin-top: 3px; }

input[type="text"], input[type="search"], input[type="email"], input[type="password"], input[type="tel"],
input[type="url"], input[type="date"], input[type="time"], input[type="datetime-local"], input[type="number"],
input[type="file"], select, textarea {
  width: 100%;
  min-height: var(--control-h);
  padding: 8px 12px;
  border: 1px solid var(--border-strong);
  border-radius: var(--r-control);
  background: var(--surface);
  color: var(--text);
  font: inherit;
  font-size: 16px;   /* iOS vergrößert die Seite bei kleinerer Schrift im Feld */
}
input[type="file"] { padding: 9px 12px; }
select { padding-left: 8px; }   /* der Browser rückt den Text in der Auswahl selbst etwas ein */
input::placeholder, textarea::placeholder { color: var(--text-3); opacity: 1; }
input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 2px solid var(--accent); outline-offset: 0; border-color: var(--accent); }
input[readonly], textarea[readonly] { background: var(--surface-2); }
input:disabled, select:disabled, textarea:disabled { background: var(--surface-2); color: var(--text-3); cursor: not-allowed; }
textarea { min-height: 88px; resize: vertical; line-height: 1.45; }
[aria-invalid="true"] { border-color: var(--error) !important; }

/* Feld mit Einheit dahinter (€, Tage, Min.) */
.field__zeile { display: flex; align-items: center; gap: var(--s-2); }
.field__zeile > input, .field__zeile > select { flex: 1 1 auto; min-width: 0; }
.field__einheit { flex: none; color: var(--text-2); font-size: var(--fs-sm); }

/* Haken: <label class="check"><input type="checkbox"><span>Text</span></label>, eine Tippfläche */
.check { display: flex; align-items: flex-start; gap: 10px; min-height: var(--tap); padding: 10px 0; cursor: pointer; font-weight: 500; }
.check input { width: 22px; height: 22px; margin: 0; flex: none; accent-color: var(--accent); }
.check > span { min-width: 0; }
.field--check > .hint, .field--check > .field-error { margin: -6px 0 0 32px; }

/* Auswahl aus wenigen Möglichkeiten als Kacheln:
   <label class="choice"><input type="radio" ...><span class="choice__text"><strong>Titel</strong><span class="hint">...</span></span></label> */
.choice {
  display: flex; align-items: flex-start; gap: 10px;
  min-height: var(--tap); padding: 10px var(--s-3);
  border: 1px solid var(--border);
  border-radius: var(--r-control);
  cursor: pointer;
}
.choice + .choice { margin-top: var(--s-2); }
.choice:has(input:checked) { border-color: var(--accent); background: var(--accent-soft); }
.choice:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; }
.choice input { margin: 2px 0 0; accent-color: var(--accent); width: 20px; height: 20px; flex: none; }
.choice__text { display: grid; gap: 2px; min-width: 0; flex: 1 1 auto; }

.group { margin: 0; padding: 0; border: 0; min-width: 0; }
.group + .group { margin-top: var(--s-5); }
.group__title { padding: 0; font-size: var(--fs-md); font-weight: 600; }
.group > * + * { margin-top: var(--s-3); }
.group > .group__title + .hint { margin-top: var(--s-1); }
.grid-2, .grid-3 { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-3) var(--s-4); }
.span-2 { grid-column: 1 / -1; }

.actions {
  display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-3);
  margin-top: var(--s-4); padding-top: var(--s-4);
  border-top: 1px solid var(--border);
}

/* ---------- Filter und Suche ---------- */
.filters {
  display: grid; grid-template-columns: minmax(0, 1fr); align-items: end; gap: var(--s-3);
  margin: 0 0 var(--s-4);
}
.filters__actions { display: flex; gap: var(--s-2); }
.filters__actions .btn { flex: 1 1 auto; }

/* ---------- Aktionsleiste: Hauptaktion eines Formulars in Daumennähe ---------- */
.aktionsleiste {
  position: sticky; bottom: calc(var(--tabbar-h) + var(--unten)); z-index: var(--z-aktionen);
  display: flex; gap: var(--s-2);
  margin: var(--s-4) calc(var(--rand) * -1) 0;
  padding: var(--s-3) var(--rand);
  background: var(--surface);
  border-top: 1px solid var(--border);
}
.aktionsleiste .btn { flex: 1 1 0; }
.aktionsleiste .btn--still, .aktionsleiste .btn--icon { flex: 0 0 auto; }

/* ---------- Kontakt: Anrufen, WhatsApp, E-Mail ---------- */
.kontakt { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: var(--s-2); }
.kontakt .btn { padding: 0 6px; gap: 6px; font-size: var(--fs-sm); }
.kontakt .btn .icon { font-size: 16px; }
.kontakt--kompakt { display: inline-flex; gap: var(--s-1); }
.kontakt--kompakt .btn { width: var(--control-h); padding: 0; }

/* ---------- Wiederholbare Zeilen (Preise, technische Daten) ---------- */
.zeilen { display: grid; gap: var(--s-3); }
.zeile {
  position: relative;
  display: grid; gap: var(--s-3);
  padding: var(--s-3);
  border: 1px solid var(--border);
  border-radius: var(--r-control);
  background: var(--surface-2);
}
.zeile__entfernen { justify-self: end; }
.zeilen__fuss { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-3); margin-top: var(--s-3); }

/* Feld mit Knopf "Kopieren" */
.copy { display: flex; align-items: center; gap: var(--s-2); }
.copy input, .copy textarea { flex: 1 1 auto; min-width: 0; font-family: var(--font-mono); font-size: var(--fs-sm); }

/* ---------- Anmeldung und Fehlerseite ---------- */
.login { min-height: 100dvh; display: grid; place-items: center; padding: var(--s-5) var(--s-4); }
.login__card {
  width: min(400px, 100%);
  padding: var(--s-5);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-panel);
  box-shadow: var(--shadow);
}
.login__title { margin: var(--s-5) 0 var(--s-4); font-size: 20px; }
.login__card .alert { margin-bottom: var(--s-4); }
.login__card form .btn { margin-top: var(--s-2); }
.login__intro { margin-bottom: var(--s-4); color: var(--text-2); }
.login__hilfe { margin-top: var(--s-4); font-size: var(--fs-sm); color: var(--text-2); }
.login__card > p + p { margin-top: var(--s-3); }
.error-code { color: var(--text-2); font-size: var(--fs-sm); }

/* ---------- Bestätigungsdialog ---------- */
.dialog {
  width: min(460px, calc(100vw - 32px));
  padding: 0;
  border: 1px solid var(--border);
  border-radius: var(--r-panel);
  background: var(--surface);
  color: var(--text);
  box-shadow: var(--shadow-lg);
  overscroll-behavior: contain;
}
.dialog::backdrop { background: var(--backdrop); }
.dialog__inner { display: grid; gap: var(--s-4); padding: var(--s-5); margin: 0; }
.dialog__title { font-size: var(--fs-lg); }
.dialog__body { display: grid; gap: var(--s-3); color: var(--text-2); }
.dialog__actions { display: flex; flex-wrap: wrap-reverse; justify-content: flex-end; gap: var(--s-2); }
.dialog__actions .btn { flex: 1 1 120px; }

/* ---------- Ladezustand ---------- */
/* Platzhalter in der Form des späteren Inhalts, solange ein Skript Daten nachlädt. */
.skelett {
  display: block; min-height: 1em;
  border-radius: var(--r-inner);
  background: var(--surface-3);
  color: transparent !important;
  user-select: none;
}
@media (prefers-reduced-motion: no-preference) {
  .skelett { animation: puls 1.4s ease-in-out infinite; }
  .btn[aria-busy="true"] .icon { animation: puls 1s ease-in-out infinite; }
}
@keyframes puls { 50% { opacity: 0.45; } }

/* ---------- Helfer ---------- */
.nur-breit { display: none !important; }

/* ---------- Ab 720px: Tabellen, zweispaltige Formulare ---------- */
@media (min-width: 720px) {
  :root { --rand: var(--s-5); }
  .content { padding-top: var(--s-5); }
  .panel { padding: var(--s-5); }
  .nur-schmal { display: none !important; }
  .nur-breit { display: revert !important; }

  .grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .kv__zeile { grid-template-columns: minmax(120px, 32%) minmax(0, 1fr); gap: var(--s-4); align-items: baseline; }
  .kv dt { font-size: inherit; }
  .stats { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .stat { padding: var(--s-4) var(--s-5); border-left: 1px solid var(--border); }
  .stat:first-child { border-left: 0; padding-left: 0; }
  .stat:nth-child(n + 3) { border-top: 0; }

  .table-wrap {
    overflow-x: auto; overscroll-behavior-x: contain;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-panel);
    box-shadow: var(--shadow);
  }
  .panel .table-wrap { border: 0; border-radius: 0; box-shadow: none; background: none; margin: 0 calc(var(--s-3) * -1); }
  .table th {
    padding: 10px var(--s-3);
    background: var(--surface-2);
    border-bottom: 1px solid var(--border);
    color: var(--text-2); font-size: var(--fs-xs); font-weight: 600; white-space: nowrap;
  }
  .table th:first-child { border-top-left-radius: var(--r-panel); }
  .table th:last-child { border-top-right-radius: var(--r-panel); }
  .table td { padding: 10px var(--s-3); border-bottom: 1px solid var(--border); vertical-align: middle; }
  .table tbody tr:last-child td { border-bottom: 0; }
  .table tbody tr:hover { background: var(--surface-2); }
  .table__link::after { border-radius: 0; }

  .tabs { margin-left: 0; margin-right: 0; }
  .tabs__list { padding-left: 2px; padding-right: 2px; flex-wrap: wrap; }
  .pager { justify-content: center; }

  .filters { grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); padding: var(--s-4); background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-panel); }
  .filters .field--breit { grid-column: span 2; }
  .filters__actions .btn { flex: 0 0 auto; }

  .kontakt { display: flex; flex-wrap: wrap; }
  .kontakt .btn { padding: 0 var(--s-3); }
  .zeile { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); align-items: end; }
  .zeile > .span-2 { grid-column: 1 / -1; }
  .dialog__actions .btn { flex: 0 0 auto; }
}

/* ---------- Ab 1000px: Seitenleiste statt Leiste unten ---------- */
@media (min-width: 1000px) {
  :root { --tabbar-h: 0px; --rand: var(--s-6); --unten: 0px; }
  .shell { display: grid; grid-template-columns: 232px minmax(0, 1fr); }
  .kopf, .tabbar { display: none; }
  .sidebar {
    position: sticky; top: 0;
    height: 100dvh; overflow-y: auto;
    display: flex; flex-direction: column; gap: var(--s-5);
    padding: var(--s-5) var(--s-3);
    background: var(--surface);
    border-right: 1px solid var(--border);
  }
  .sidebar .brand { padding: 0 var(--s-2); }
  .nav__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
  .nav__link {
    display: flex; align-items: center; gap: var(--s-3);
    min-height: 40px; width: 100%;
    padding: 0 var(--s-3);
    border-radius: var(--r-control);
    color: var(--text-2); text-decoration: none; font-weight: 500;
  }
  .nav__link .icon { font-size: 18px; }
  .nav__link:hover { background: var(--surface-2); color: var(--text); }
  .nav__link[aria-current="page"] { background: var(--accent-soft); color: var(--accent-text); }
  .nav__link .nav__badge { margin-left: auto; }
  .sidebar__fuss { margin-top: auto; padding: var(--s-3) var(--s-2) 0; border-top: 1px solid var(--border); }
  .sidebar__fuss form { margin: var(--s-2) 0 0; }
  .sidebar__name { font-size: var(--fs-sm); font-weight: 500; overflow-wrap: anywhere; }
  .sidebar__mail { font-size: var(--fs-xs); color: var(--text-2); overflow-wrap: anywhere; }

  .content { max-width: 1280px; padding: var(--s-6) var(--rand) var(--s-7); }
  .page-head { margin-bottom: var(--s-5); }
  .spalten { grid-template-columns: minmax(0, 1.6fr) minmax(300px, 1fr); gap: var(--s-5); }
  .spalten__haupt, .spalten__seite { gap: var(--s-5); }

  /* Am Schreibtisch steht die Hauptaktion am Ende des Formulars, nicht am Bildschirmrand. */
  .aktionsleiste {
    position: static;
    margin: var(--s-5) 0 0; padding: var(--s-4) 0 0;
    background: none;
    justify-content: flex-start;
  }
  .aktionsleiste .btn { flex: 0 0 auto; }
}

/* Maus oder Trackpad am großen Bildschirm: dichter. Tippgeräte behalten 44px. */
@media (min-width: 1000px) and (hover: hover) and (pointer: fine) {
  :root {
    --control-h: 36px;
    --fs-base: 14px;
    --fs-md: 15px;
    --fs-lg: 17px;
    --fs-xl: 24px;
  }
  input[type="text"], input[type="search"], input[type="email"], input[type="password"], input[type="tel"],
  input[type="url"], input[type="date"], input[type="time"], input[type="datetime-local"], input[type="number"],
  input[type="file"], select, textarea { padding: 6px 10px; font-size: var(--fs-base); }
  select { padding-left: 6px; }
  textarea { min-height: 72px; }
  .btn { padding: 0 14px; }
  .btn .icon { font-size: 16px; }
  .tabs__tab { min-height: 34px; padding: 0 12px; }
  .back { min-height: 28px; margin-top: 0; }
  .check { min-height: 36px; padding: 7px 0; }
  .check input { width: 18px; height: 18px; margin-top: 2px; }
  .field--check > .hint, .field--check > .field-error { margin-left: 28px; }
  .choice input { width: 16px; height: 16px; margin-top: 3px; }
  .alert__close { width: 32px; height: 32px; margin: -5px -8px -5px 0; }
}

/* ---------- Druck ---------- */
@media print {
  :root {
    color-scheme: light;
    --bg: #fff; --surface: #fff; --surface-2: #fff; --surface-3: #eee;
    --text: #000; --text-2: #333; --text-3: #444; --border: #bbb; --border-strong: #777;
    --shadow: none;
  }
  body { background: #fff; font-size: 11pt; }
  .kopf, .sidebar, .tabbar, .skip-link, .flashes, .aktionsleiste, .actions, .filters, .pager, .tabs,
  .page-head__aktionen, .kontakt, .back, .dialog, .btn { display: none !important; }
  .shell { display: block; }
  .content { max-width: none; padding: 0; }
  .panel, .table-wrap { box-shadow: none; break-inside: avoid; }
  .spalten { display: block; }
  .spalten > * + *, .panel + .panel { margin-top: 12pt; }
  a { color: inherit; text-decoration: none; }
  .chip { border-color: #777; background: none; color: #000; }
}

/* ---------- Weniger Bewegung ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}