/* APS Digital – Oberfläche. Mobil zuerst, ab 900px Desktop-Ansicht mit Seitenleiste. */

/* ============================================================ Zentrale Werte
   Schriftgrößen, Abstände und Farben werden NUR hier festgelegt und überall über die Variablen verwendet.
   Hell ist Standard; der dunkle Modus (Handy/PC auf „Dunkel“) setzt dieselben Variablen neu.
   :root.hell (Auftragsbestätigung zum Unterschreiben) bleibt immer hell. */

:root {
  color-scheme: light;

  /* Schriftgrößen – nur diese sieben Stufen */
  --fs-xs: 12px;     /* Zähler, Kleinstes an Symbolen */
  --fs-s: 13px;      /* Nebentexte, Beschriftungen */
  --fs-m: 14px;      /* Listen, Karten, kleine Knöpfe */
  --fs-basis: 16px;  /* Fließtext, Eingabefelder, Knöpfe */
  --fs-l: 18px;      /* Zwischenüberschriften */
  --fs-xl: 22px;     /* Seitentitel */
  --fs-xxl: 28px;    /* große Kennzahlen */

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

  --radius: 14px;
  --radius-sm: 10px;
  --radius-knopf: 11px;
  --font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --tabbar-h: 62px;

  /* Flächen & Schrift */
  --bg: #f2f4f8;
  --surface: #ffffff;
  --surface-2: #f7f9fc;
  --surface-3: #eceff5;
  --border: #e1e6ee;
  --border-strong: #c9d2df;
  --text: #0f1a2b;
  --text-2: #46546a;
  --text-3: #5f6d82;
  --papier: #ffffff;          /* Unterschriften & Logos: immer weißer Grund */
  --papier-text: #111c2d;
  --papier-text-2: #5f6d82;
  --papier-linie: #e6eaf0;
  --papier-hilfslinie: #9aa7bb;

  /* Marke (Firmenfarbe) – wird je Betrieb überschrieben, siehe markeFarben() in lib.js */
  --brand: #0e2a4d;
  --brand-2: #16396a;
  --brand-glanz: #1c4a86;
  --brand-ink: #ffffff;
  --brand-ink-2: #b9c7dc;
  --primary: #1b5fc1;
  --primary-hover: #154fa3;
  --primary-aktiv: #10448e;
  --primary-soft: #e7effb;
  --primary-ink: #ffffff;     /* Schrift auf der Firmenfarbe */
  --accent: #f2a340;          /* nur für Symbole (Vorschlag), nie als Knopf */

  /* Rückmeldungen */
  --ok: #157a3c;
  --ok-hover: #116632;
  --ok-aktiv: #0d5428;
  --ok-ink: #ffffff;
  --ok-strong: #16a34a;       /* nur Balken, Punkte, Symbole */
  --ok-soft: #e3f5ea;
  --danger: #b42318;
  --danger-ink: #ffffff;
  --danger-soft: #fdecea;
  --danger-text-hover: #9f1f15;
  --danger-soft-hover: #fbdcd8;
  --danger-text-aktiv: #8a1a12;
  --danger-soft-aktiv: #f8cbc5;
  --warn: #a15c00;
  --warn-strong: #7a4600;
  --warn-soft: #fff4dc;

  /* Deaktivierte Knöpfe: grau, aber lesbar */
  --aus-bg: #eceff5;
  --aus-text: #46546a;
  --aus-rand: #d5dce6;

  /* Hinweise unten (Toast), Tooltips, Abdunkeln */
  --toast-bg: #16223a;
  --toast-ink: #ffffff;
  --toast-link: #9cc3ff;
  --toast-fehler: #8f1d15;
  --abdunkeln: rgba(8, 14, 28, 0.5);
  --lightbox-bg: rgba(0, 0, 0, 0.92);
  --lightbox-ink: #ffffff;
  /* Flächen auf der Markenfarbe (Kopfzeile, Seitenleiste, Betriebskarten) */
  --auf-marke-hover: rgba(255, 255, 255, 0.06);
  --auf-marke-aktiv: rgba(255, 255, 255, 0.12);
  --auf-marke-linie: rgba(255, 255, 255, 0.1);
  --auf-marke-flaeche: rgba(255, 255, 255, 0.16);

  /* Status der Anfragen – auf farbigem Grund steht --status-ink */
  --s-neu: #1f63d6;
  --s-angenommen: #0b7a70;
  --s-in_bearbeitung: #6d3fd6;
  --s-erledigt: #157a3c;
  --s-abgelehnt: #8a5a44;
  --status-ink: #ffffff;
  --ueberfaellig: #c9261d;
  --ueberfaellig-soft: #fdecea;
  --chart-neutral: #a3adbd;
  --chart-angenommen: #0e8f6e;  /* Diagramme in der Übersicht */
  --chart-abgelehnt: #d4572a;
  --s-termin: #6d3fd6;
  --markierung: #b42318;      /* roter Punkt „neu / ungelesen“ und Zähler */
  --markierung-ink: #ffffff;

  /* Eingangskanäle */
  --k-email: #0a62c2;
  --k-whatsapp: #138a4b;
  --k-telefon: #46546a;
  --k-formular: #6d3fd6;
  --k-persoenlich: #a15c00;
  --k-sonstiges: #5d6b80;

  /* Ausgewählter Filter-Chip */
  --chip-aktiv-bg: var(--brand);
  --chip-aktiv-ink: var(--brand-ink);
  --chip-aktiv-n: var(--brand-ink-2);

  --shadow: 0 1px 2px rgba(15, 26, 43, 0.05), 0 1px 3px rgba(15, 26, 43, 0.07);
  --shadow-lg: 0 18px 50px rgba(15, 26, 43, 0.22);
}

@media (prefers-color-scheme: dark) {
  :root:not(.hell) {
    color-scheme: dark;
    --bg: #0a1020;
    --surface: #111a2d;
    --surface-2: #0e1628;
    --surface-3: #1a2540;
    --border: #1e2a44;
    --border-strong: #2c3b5c;
    --text: #e6ecf6;
    --text-2: #aab6ca;
    --text-3: #8d9ab0;
    --brand: #0b1730;
    --brand-2: #132446;
    --brand-ink-2: #92a3bf;
    --primary: #5b9af0;
    --primary-hover: #7aaef4;
    --primary-aktiv: #4a8ae6;
    --primary-soft: #16294a;
    --primary-ink: #0a1020;
    --ok: #45c47c;
    --ok-hover: #5fd192;
    --ok-aktiv: #38b06d;
    --ok-ink: #0a1020;
    --ok-strong: #22a55a;
    --ok-soft: #10301f;
    --danger: #f27066;
    --danger-ink: #0a1020;
    --danger-soft: #3a1717;
    --danger-text-hover: #f58a81;
    --danger-soft-hover: #4a1d1d;
    --danger-text-aktiv: #f79c94;
    --danger-soft-aktiv: #5a2323;
    --warn: #f0b24a;
    --warn-strong: #f0b24a;
    --warn-soft: #33260c;
    --aus-bg: #1a2540;
    --aus-text: #aab6ca;
    --aus-rand: #2c3b5c;
    --s-neu: #6aa3f8;
    --s-angenommen: #34cbbb;
    --s-in_bearbeitung: #a98bf6;
    --s-erledigt: #4ccf82;
    --s-abgelehnt: #c9a08c;
    --status-ink: #0a1020;
    --ueberfaellig: #ff6b61;
    --ueberfaellig-soft: #3a1717;
    --chart-neutral: #56627a;
    --s-termin: #a98bf6;
    --markierung: #f27066;
    --markierung-ink: #0a1020;
    --k-email: #6aa3f8;
    --k-whatsapp: #45c47c;
    --k-telefon: #aab6ca;
    --k-formular: #a98bf6;
    --k-persoenlich: #f0b24a;
    --k-sonstiges: #9aa7bb;
    --chip-aktiv-bg: var(--primary);
    --chip-aktiv-ink: var(--primary-ink);
    --chip-aktiv-n: var(--primary-ink);
    --shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
    --shadow-lg: 0 18px 50px rgba(0, 0, 0, 0.55);
  }
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: var(--fs-basis)/1.45 var(--font);
  -webkit-tap-highlight-color: transparent;
  overflow-x: hidden;
}
a { color: var(--primary); text-decoration: none; }
a:hover { text-decoration: underline; }
button, input, select, textarea { font: inherit; color: inherit; }
h1, h2, h3 { margin: 0; line-height: 1.25; }
p { margin: 0; }
svg.i { width: 20px; height: 20px; flex: none; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.muted { color: var(--text-3); }
.small { font-size: var(--fs-s); }
.nowrap { white-space: nowrap; }
.grow { flex: 1; min-width: 0; }
.pre { white-space: pre-wrap; overflow-wrap: anywhere; }
.row { display: flex; align-items: center; gap: var(--sp-2); }
.row-wrap { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.stack { display: grid; gap: var(--sp-3); }
.hidden { display: none !important; }
:focus-visible { outline: 3px solid color-mix(in srgb, var(--primary) 55%, transparent); outline-offset: 2px; }

/* ------------------------------------------------------------ App-Gerüst */

.app { min-height: 100dvh; }
.sidebar { display: none; }
.main { min-width: 0; padding-bottom: calc(var(--tabbar-h) + env(safe-area-inset-bottom) + var(--sp-6)); }

.topbar {
  position: sticky; top: 0; z-index: 30;
  display: flex; align-items: center; gap: var(--sp-2);
  min-height: 56px;
  padding: calc(env(safe-area-inset-top) + var(--sp-2)) var(--sp-2) var(--sp-2) var(--sp-4);
  background: var(--brand); color: var(--brand-ink);
}
.topbar h1 { font-size: var(--fs-l); font-weight: 700; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.topbar .sub { display: block; font-size: var(--fs-xs); font-weight: 500; color: var(--brand-ink-2); }
.topbar .icon-btn { color: var(--brand-ink); }
.topbar .icon-btn:hover { background: var(--auf-marke-aktiv); }
.topbar.mit-zurueck { padding-left: var(--sp-1); }

.content { padding: var(--sp-4); display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sp-4); max-width: 1180px; margin: 0 auto; }

.tabbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
  display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr);
  height: calc(var(--tabbar-h) + env(safe-area-inset-bottom));
  padding-bottom: env(safe-area-inset-bottom);
  background: var(--surface); border-top: 1px solid var(--border);
}
.tabbar a {
  position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--sp-1);
  color: var(--text-3); font-size: var(--fs-xs); font-weight: 600; text-decoration: none;
}
.tabbar a svg { width: 23px; height: 23px; }
.tabbar a.aktiv { color: var(--primary); }
.tabbar a .badge { position: absolute; top: 5px; left: calc(50% + 6px); }

.topbar .topbar-neu { margin-right: var(--sp-0); box-shadow: none; }
.topbar .topbar-neu svg { width: 18px; height: 18px; stroke-width: 2.6; }

.badge {
  display: inline-grid; place-items: center; min-width: 19px; height: 19px; padding: 0 var(--sp-1);
  border-radius: 999px; background: var(--markierung); color: var(--markierung-ink); font-size: var(--fs-xs); font-weight: 700; line-height: 1;
}

@media (min-width: 900px) {
  .app { display: grid; grid-template-columns: 250px minmax(0, 1fr); }
  .sidebar {
    display: flex; flex-direction: column; gap: var(--sp-1);
    position: sticky; top: 0; height: 100dvh; padding: var(--sp-5) var(--sp-4);
    background: var(--brand); color: var(--brand-ink);
  }
  .sidebar .logo { margin: var(--sp-0) var(--sp-2) var(--sp-5); }
  .sidebar nav { display: grid; gap: var(--sp-0); }
  .sidebar nav a {
    display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-3) var(--sp-3); border-radius: 10px;
    color: var(--brand-ink-2); font-weight: 600; font-size: var(--fs-basis); text-decoration: none;
  }
  .sidebar nav a:hover { background: var(--auf-marke-hover); color: var(--brand-ink); }
  .sidebar nav a.aktiv { background: var(--auf-marke-aktiv); color: var(--brand-ink); }
  .sidebar nav a .badge { margin-left: auto; }
  .sidebar .neu-btn { margin: var(--sp-2) 0 var(--sp-4); justify-content: center; }
  .sidebar .wer { margin-top: auto; display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-3) var(--sp-2) 0; border-top: 1px solid var(--auf-marke-linie); }
  .sidebar .wer .name { font-weight: 600; font-size: var(--fs-m); }
  .sidebar .wer .rolle { font-size: var(--fs-xs); color: var(--brand-ink-2); }
  .sidebar .wer .icon-btn { color: var(--brand-ink-2); margin-left: auto; }
  .tabbar, .topbar .topbar-neu { display: none; }
  .main { padding-bottom: var(--sp-8); }
  .topbar {
    position: sticky; background: color-mix(in srgb, var(--bg) 88%, transparent); color: var(--text);
    backdrop-filter: blur(8px); border-bottom: 1px solid var(--border); padding: var(--sp-3) var(--sp-6); min-height: 64px;
  }
  .topbar.mit-zurueck { padding-left: var(--sp-4); }
  .topbar h1 { font-size: var(--fs-xl); }
  .topbar .sub { color: var(--text-3); }
  .topbar .icon-btn { color: var(--text-2); }
  .topbar .icon-btn:hover { background: var(--surface-3); }
  .topbar .nur-mobil { display: none; }
  .content { padding: var(--sp-6); gap: var(--sp-5); }
}

.logo { display: flex; align-items: center; gap: var(--sp-3); font-weight: 800; font-size: var(--fs-l); letter-spacing: -0.2px; }
.app-symbol { width: 40px; height: 40px; flex: none; display: block; border-radius: 20%; box-shadow: 0 0 0 1px var(--auf-marke-flaeche); }
.mv-kopf .app-symbol { width: 36px; height: 36px; }
.anmeldung .app-symbol { width: 48px; height: 48px; box-shadow: none; }
.logo small { display: block; font-size: var(--fs-xs); font-weight: 600; color: var(--brand-ink-2); letter-spacing: 0; }

/* ------------------------------------------------------------ Grundelemente */

.card {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  box-shadow: var(--shadow); padding: var(--sp-4); min-width: 0;
}
.card-kopf { display: flex; align-items: center; gap: var(--sp-2); margin-bottom: var(--sp-3); }
.card-kopf h2 { font-size: var(--fs-basis); flex: 1; }
.card-flach { padding: 0; overflow: hidden; }

.abschnitt-titel { display: flex; align-items: center; gap: var(--sp-2); margin: var(--sp-1) var(--sp-0) calc(-1 * var(--sp-1)); }
.abschnitt-titel h2 { font-size: var(--fs-basis); font-weight: 700; color: var(--text-2); text-transform: uppercase; letter-spacing: 0.4px; flex: 1; }
.abschnitt-titel a { font-size: var(--fs-m); font-weight: 600; }

/* ------------------------------------------------------------ Knöpfe
   Genau fünf Varianten – Farben kommen ausschließlich aus den Variablen oben:
     .btn-primary     primär: Hauptaktion (Firmenfarbe)
     .btn-sekundaer   sekundär: Nebenaktion (Fläche mit Rahmen); .btn-text = sekundär ohne Rahmen (z. B. „Zurücksetzen“)
     .btn-bestaetigen bestätigen: annehmen, erledigt, unterschreiben (grün)
     .btn-gefahr      gefährlich: ablehnen, löschen, sperren (rot)
     deaktiviert      automatisch bei disabled bzw. aria-disabled="true"
   Zustände: hover, aktiv (gedrückt), deaktiviert, lädt (.laedt, gesetzt von mitLaden()).
   Jede Kombination hat mindestens 4,5 : 1 Kontrast – hell und dunkel, auch mit eigener Firmenfarbe. */
.btn {
  --knopf-bg: var(--surface);
  --knopf-text: var(--text);
  --knopf-rand: var(--border-strong);
  --knopf-bg-hover: var(--surface-2);
  --knopf-text-hover: var(--knopf-text);
  --knopf-bg-aktiv: var(--surface-3);
  --knopf-text-aktiv: var(--knopf-text);
  display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2);
  min-height: 44px; padding: 0 var(--sp-4); border-radius: var(--radius-knopf); border: 1px solid var(--knopf-rand);
  font-weight: 650; font-size: var(--fs-basis); cursor: pointer; text-decoration: none !important; white-space: nowrap;
  background: var(--knopf-bg); color: var(--knopf-text);
  transition: background 0.12s, border-color 0.12s, color 0.12s, transform 0.05s;
}
.btn:hover { background: var(--knopf-bg-hover); color: var(--knopf-text-hover); }
.btn:active { background: var(--knopf-bg-aktiv); color: var(--knopf-text-aktiv); transform: scale(0.98); }
.btn-primary {
  --knopf-bg: var(--primary); --knopf-text: var(--primary-ink); --knopf-rand: var(--primary);
  --knopf-bg-hover: var(--primary-hover); --knopf-bg-aktiv: var(--primary-aktiv);
}
.btn-text {
  --knopf-bg: transparent; --knopf-rand: transparent; --knopf-text: var(--primary);
  --knopf-bg-hover: var(--primary-soft); --knopf-bg-aktiv: var(--primary-soft); --knopf-text-aktiv: var(--primary-hover);
  padding: 0 var(--sp-3);
}
.btn-bestaetigen {
  --knopf-bg: var(--ok); --knopf-text: var(--ok-ink); --knopf-rand: var(--ok);
  --knopf-bg-hover: var(--ok-hover); --knopf-bg-aktiv: var(--ok-aktiv);
}
.btn-gefahr {
  --knopf-bg: var(--danger-soft); --knopf-text: var(--danger); --knopf-rand: color-mix(in srgb, var(--danger) 45%, transparent);
  --knopf-bg-hover: var(--danger-soft-hover); --knopf-text-hover: var(--danger-text-hover);
  --knopf-bg-aktiv: var(--danger-soft-aktiv); --knopf-text-aktiv: var(--danger-text-aktiv);
}
.btn:is(:disabled, [aria-disabled=true]) {
  background: var(--aus-bg); color: var(--aus-text); border-color: var(--aus-rand); cursor: not-allowed; transform: none;
}
/* Lädt: Variante bleibt erhalten, statt der Beschriftung dreht sich ein Kreis in Schriftfarbe */
.btn.laedt:disabled { background: var(--knopf-bg); color: var(--knopf-text); border-color: var(--knopf-rand); cursor: progress; }
.btn .spinner { width: 18px; height: 18px; border-width: 2px; border-color: color-mix(in srgb, currentColor 30%, transparent); border-top-color: currentColor; }
.btn-gross { min-height: 52px; font-size: var(--fs-basis); border-radius: 13px; }
.btn-klein { min-height: 36px; padding: 0 var(--sp-3); font-size: var(--fs-m); border-radius: 9px; }
.btn-block { width: 100%; white-space: normal; text-align: center; line-height: 1.25; padding-top: var(--sp-2); padding-bottom: var(--sp-2); }
.aktion-reihe .btn, .versand .btn { white-space: normal; text-align: center; line-height: 1.2; }
.btn .i { width: 19px; height: 19px; }
.btn.wa svg { color: var(--k-whatsapp); }
.btn:is(:disabled, [aria-disabled=true]) svg { color: inherit; }
/* Auf der dunklen Markenfläche (Handy-Kopfzeile, Seitenleiste) bekommt der Hauptknopf eine helle Kontur */
.topbar .btn-primary, .sidebar .btn-primary { box-shadow: 0 0 0 1px var(--brand-ink-2); }


.icon-btn {
  width: 44px; height: 44px; border-radius: 12px; border: 0; background: transparent;
  display: inline-grid; place-items: center; cursor: pointer; color: var(--text-2); flex: none;
}
.icon-btn:hover { background: var(--surface-3); }
.icon-btn svg { width: 22px; height: 22px; }

.pill {
  --c: var(--s-neu);
  display: inline-flex; align-items: center; gap: var(--sp-1); height: 24px; padding: 0 var(--sp-2); border-radius: 999px;
  background: color-mix(in srgb, var(--c) 13%, transparent); color: var(--c);
  font-size: var(--fs-s); font-weight: 700; white-space: nowrap;
}
.pill::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--c); }
.st-neu { --c: var(--s-neu); }
.st-angenommen { --c: var(--s-angenommen); }
.st-in_bearbeitung { --c: var(--s-in_bearbeitung); }
.st-erledigt { --c: var(--s-erledigt); }
.st-abgelehnt { --c: var(--s-abgelehnt); }
.pill.dringend { --c: var(--danger); }
.pill.dringend::before { display: none; }

.kanal {
  --c: var(--k-sonstiges);
  width: 40px; height: 40px; border-radius: 12px; flex: none; display: grid; place-items: center;
  background: color-mix(in srgb, var(--c) 14%, transparent); color: var(--c);
}
.kanal svg { width: 21px; height: 21px; }
.kanal.klein { width: 30px; height: 30px; border-radius: 9px; }
.kanal.klein svg { width: 16px; height: 16px; }
.k-email { --c: var(--k-email); }
.k-whatsapp { --c: var(--k-whatsapp); }
.k-telefon { --c: var(--k-telefon); }
.k-formular { --c: var(--k-formular); }
.k-persoenlich { --c: var(--k-persoenlich); }
.k-sonstiges { --c: var(--k-sonstiges); }

.chips { display: flex; gap: var(--sp-2); overflow-x: auto; padding: var(--sp-0) var(--sp-4) var(--sp-1); margin: 0 calc(-1 * var(--sp-4)); scrollbar-width: none; }
.chips::-webkit-scrollbar { display: none; }
.chip {
  display: inline-flex; align-items: center; gap: var(--sp-2); height: 36px; padding: 0 var(--sp-4); border-radius: 999px;
  border: 1px solid var(--border-strong); background: var(--surface); color: var(--text-2);
  font-weight: 600; font-size: var(--fs-m); white-space: nowrap; cursor: pointer; flex: none;
}
.chip .n { font-size: var(--fs-xs); color: var(--text-3); font-weight: 700; }
.chip.aktiv { background: var(--chip-aktiv-bg); border-color: var(--chip-aktiv-bg); color: var(--chip-aktiv-ink); }
.chip.aktiv .n { color: var(--chip-aktiv-n); }
@media (min-width: 900px) { .chips { margin: 0; padding: var(--sp-0) 0 var(--sp-1); flex-wrap: wrap; } }

/* Formulare */
.feld { display: grid; gap: var(--sp-2); min-width: 0; align-content: start; }
.feld > span, .feld > label { font-size: var(--fs-m); font-weight: 600; color: var(--text-2); }
.feld .hilfe { font-size: var(--fs-s); color: var(--text-3); font-weight: 400; }
.eingabe, .feld input:not([type=checkbox]):not([type=radio]):not([type=file]), .feld select, .feld textarea {
  width: 100%; min-height: 46px; padding: var(--sp-3) var(--sp-3); border-radius: 10px;
  border: 1px solid var(--border-strong); background: var(--surface); color: var(--text);
  font-size: var(--fs-basis); /* verhindert Zoom auf dem iPhone */
}
.feld textarea { min-height: 96px; resize: vertical; line-height: 1.45; }
.feld input:focus, .feld select:focus, .feld textarea:focus, .eingabe:focus {
  outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 22%, transparent);
}
.formular { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sp-4); }
.zwei { display: grid; gap: var(--sp-4); grid-template-columns: 1fr; }
@media (min-width: 560px) { .zwei { grid-template-columns: 1fr 1fr; } .zwei .breit { grid-column: 1 / -1; } }
.plz-ort { display: grid; grid-template-columns: 110px 1fr; gap: var(--sp-3); }
.schalter { display: flex; align-items: center; gap: var(--sp-3); min-height: 44px; cursor: pointer; font-weight: 500; }
.schalter input { width: 22px; height: 22px; accent-color: var(--primary); flex: none; }
.segment { display: flex; background: var(--surface-3); border-radius: 11px; padding: var(--sp-1); gap: var(--sp-1); }
.segment button { flex: 1; min-height: 38px; border: 0; border-radius: 9px; background: transparent; font-weight: 600; font-size: var(--fs-m); color: var(--text-2); cursor: pointer; }
.segment button.aktiv { background: var(--surface); color: var(--text); box-shadow: var(--shadow); }
.fehlertext { color: var(--danger); font-size: var(--fs-m); font-weight: 600; }

.suche { position: relative; }
.suche svg { position: absolute; left: 13px; top: 50%; transform: translateY(-50%); color: var(--text-3); pointer-events: none; }
.suche input { padding-left: calc(var(--sp-7) + var(--sp-3)) !important; }

/* ------------------------------------------------------------ Eingang / Dashboard */

.begruessung h2 { font-size: var(--fs-xl); }
.begruessung p { color: var(--text-3); margin-top: var(--sp-0); }

.kpis { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-3); }
@media (min-width: 700px) { .kpis { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
.kpi {
  --c: var(--s-neu);
  display: grid; gap: var(--sp-0); align-content: start; padding: var(--sp-3) var(--sp-3); border-radius: 12px; text-decoration: none !important;
  background: var(--surface); border: 1px solid var(--border); box-shadow: var(--shadow); color: var(--text);
  border-top: 3px solid var(--c);
}
.kpi .zahl { font-size: var(--fs-xxl); font-weight: 800; line-height: 1.1; font-variant-numeric: tabular-nums; }
.kpi .label { font-size: var(--fs-s); font-weight: 600; color: var(--text-3); line-height: 1.2; hyphens: manual; overflow-wrap: anywhere; }
.kpi:hover { border-color: var(--border-strong); }

.raster { display: grid; gap: var(--sp-4); align-items: start; }
@media (min-width: 1200px) { .raster { grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); } }
.anfragen { display: grid; gap: var(--sp-3); }
.anfrage { display: grid; gap: var(--sp-3); padding: var(--sp-4); transition: opacity 0.25s, transform 0.25s; }
.anfrage.weg { opacity: 0; transform: translateX(30px); }
.anfrage-kopf { display: flex; align-items: flex-start; gap: var(--sp-3); }
.anfrage .name { font-weight: 700; font-size: var(--fs-basis); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.anfrage .meta { font-size: var(--fs-s); color: var(--text-3); }
.anfrage-text { display: block; color: var(--text) !important; text-decoration: none !important; }
.anfrage-text strong { display: block; font-size: var(--fs-basis); margin-bottom: var(--sp-0); }
.anfrage-text p {
  color: var(--text-2); font-size: var(--fs-m); display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden;
  white-space: pre-line;
}
.anfrage .zusatz { display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-4); font-size: var(--fs-m); color: var(--text-2); }
.anfrage .zusatz span { display: inline-flex; align-items: center; gap: var(--sp-1); }
.anfrage .zusatz svg { width: 15px; height: 15px; color: var(--text-3); }
.anfrage-aktionen { display: grid; grid-template-columns: 1fr 1.4fr; gap: var(--sp-3); }
.folge svg, .zeile2 svg { width: 14px; height: 14px; vertical-align: -2px; }
.folge svg { color: var(--k-whatsapp); }
.folge { font-size: var(--fs-m); background: var(--surface-2); border: 1px solid var(--border); border-radius: 10px; padding: var(--sp-2) var(--sp-3); color: var(--text-2); }

.leer { text-align: center; padding: var(--sp-7) var(--sp-4); color: var(--text-3); display: grid; gap: var(--sp-2); justify-items: center; }
.leer svg { width: 40px; height: 40px; color: var(--ok); stroke-width: 1.6; }
.leer strong { color: var(--text); font-size: var(--fs-basis); }

/* Listen */
.liste { display: grid; }
.eintrag {
  display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-3) var(--sp-4); color: var(--text) !important; text-decoration: none !important;
  border-bottom: 1px solid var(--border); min-width: 0;
}
.eintrag:last-child { border-bottom: 0; }
.eintrag:hover { background: var(--surface-2); }
.eintrag .titel { font-weight: 650; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.eintrag .zeile2 { font-size: var(--fs-m); color: var(--text-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.eintrag .rechts { display: grid; justify-items: end; gap: var(--sp-1); flex: none; }
.eintrag.ungelesen .titel::after { content: ""; display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--markierung); margin-left: var(--sp-2); vertical-align: middle; }
.eintrag .chev { color: var(--text-3); width: 18px; height: 18px; }

.avatar {
  width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; flex: none;
  background: var(--primary-soft); color: var(--primary); font-weight: 700; font-size: var(--fs-basis);
}
.sidebar .avatar { background: var(--auf-marke-aktiv); color: var(--brand-ink); width: 36px; height: 36px; font-size: var(--fs-m); }

.termin-datum {
  width: 50px; flex: none; text-align: center; border-radius: 10px; overflow: hidden; border: 1px solid var(--border);
  background: var(--surface);
}
.termin-datum .m { background: var(--s-termin); color: var(--status-ink); font-size: var(--fs-xs); font-weight: 700; padding: var(--sp-0) 0; text-transform: uppercase; }
.termin-datum .t { font-size: var(--fs-l); font-weight: 800; padding: var(--sp-0) 0 var(--sp-1); line-height: 1.2; }

.tag-kopf { padding: var(--sp-3) var(--sp-4); background: var(--surface-2); font-size: var(--fs-s); font-weight: 700; color: var(--text-2); border-bottom: 1px solid var(--border); text-transform: uppercase; letter-spacing: 0.3px; }
.tag-kopf.heute { color: var(--s-termin); }

.mehr-laden { padding: var(--sp-3); display: flex; justify-content: center; }

/* ------------------------------------------------------------ Auftrag-Detail */

.detail { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sp-4); }
@media (min-width: 1000px) {
  .detail { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); align-items: start; }
  .detail .spalte { display: grid; gap: var(--sp-4); }
}
.spalte { display: grid; gap: var(--sp-4); min-width: 0; }

.ablauf { display: flex; gap: var(--sp-1); overflow-x: auto; scrollbar-width: none; padding-bottom: var(--sp-0); }
.ablauf::-webkit-scrollbar { display: none; }
.schritt { flex: 1 0 46px; min-width: 46px; display: grid; gap: var(--sp-2); justify-items: center; align-content: start; text-align: center; background: none; border: 0; padding: 0; cursor: pointer; color: var(--text-3); }
.schritt .balken { height: 6px; width: 100%; border-radius: 99px; background: var(--surface-3); }
.schritt .lbl { font-size: var(--fs-xs); font-weight: 700; line-height: 1.15; hyphens: manual; }
@media (min-width: 560px) { .schritt .lbl { font-size: var(--fs-xs); } }
.schritt.fertig .balken { background: color-mix(in srgb, var(--ok-strong) 60%, transparent); }
.schritt.fertig { color: var(--text-2); }
.schritt.jetzt .balken { background: var(--primary); }
.schritt.jetzt { color: var(--primary); }
.ablauf.abgelehnt .schritt .balken { background: var(--surface-3); }

.aktion-box { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sp-3); }
.aktion-box .hinweis { font-size: var(--fs-m); color: var(--text-2); }
.aktion-box .hinweis svg { width: 18px; height: 18px; vertical-align: -4px; color: var(--ok-strong); }
.aktion-reihe { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-3); }
.aktion-reihe.eins { grid-template-columns: minmax(0, 1fr); }
/* Knöpfe mit langen Wörtern ("Abnahmeprotokoll"): nebeneinander nur, wenn genug Platz ist */
.aktion-reihe.umbruch { grid-template-columns: repeat(auto-fit, minmax(min(100%, 210px), 1fr)); }

.kontakt-aktionen { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--sp-2); margin-top: var(--sp-4); }
.kontakt-aktionen a, .kontakt-aktionen button {
  display: grid; justify-items: center; gap: var(--sp-1); padding: var(--sp-3) var(--sp-1); border-radius: 12px; border: 0;
  background: var(--surface-2); border: 1px solid var(--border); color: var(--text) !important; font-size: var(--fs-s); font-weight: 600;
  text-decoration: none !important; cursor: pointer;
}
.kontakt-aktionen svg { width: 22px; height: 22px; color: var(--primary); }
.kontakt-aktionen .wa:not([aria-disabled=true]) svg { color: var(--k-whatsapp); }
.kontakt-aktionen [aria-disabled=true] { background: var(--aus-bg); border-color: var(--aus-rand); color: var(--aus-text) !important; pointer-events: none; }
.kontakt-aktionen [aria-disabled=true] svg { color: var(--aus-text); }

.infos { display: grid; gap: 0; }
.info { display: grid; grid-template-columns: 116px minmax(0, 1fr); gap: var(--sp-3); padding: var(--sp-2) 0; border-bottom: 1px solid var(--border); font-size: var(--fs-basis); }
.info:last-child { border-bottom: 0; }
.info dt { color: var(--text-3); font-weight: 600; font-size: var(--fs-m); padding-top: 1px; }
.info dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }
.info dd .btn { white-space: normal; text-align: left; max-width: 100%; }

.anfrage-original { background: var(--surface-2); border: 1px solid var(--border); border-radius: 12px; padding: var(--sp-3) var(--sp-4); font-size: var(--fs-basis); white-space: pre-wrap; overflow-wrap: anywhere; }

.galerie { display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: var(--sp-2); }
.galerie button, .galerie a {
  position: relative; aspect-ratio: 1; border-radius: 10px; overflow: hidden; border: 1px solid var(--border);
  background: var(--surface-2); padding: 0; cursor: pointer; display: grid; place-items: center; color: var(--text-2) !important;
  text-decoration: none !important;
}
.galerie img { width: 100%; height: 100%; object-fit: cover; display: block; }
.galerie .datei-kachel { display: grid; justify-items: center; gap: var(--sp-1); padding: var(--sp-2); font-size: var(--fs-xs); text-align: center; overflow-wrap: anywhere; }
.galerie .datei-kachel svg { width: 26px; height: 26px; color: var(--danger); }

.unterschrift-box { display: grid; gap: var(--sp-2); }
.unterschrift-box img { max-width: 260px; width: 100%; background: var(--papier); border-radius: 10px; border: 1px solid var(--border); padding: var(--sp-2); }

/* Verlauf */
.composer { display: grid; gap: var(--sp-3); }
.composer textarea { min-height: 70px; }
.composer .row { justify-content: space-between; }
.verlauf { display: grid; gap: 0; margin-top: var(--sp-4); }
.ev { display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: var(--sp-3); position: relative; padding-bottom: var(--sp-4); }
.ev::before { content: ""; position: absolute; left: 16px; top: 34px; bottom: 0; width: 2px; background: var(--border); }
.ev:last-child::before { display: none; }
.ev .punkt {
  --c: var(--text-3);
  width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center;
  background: color-mix(in srgb, var(--c) 14%, var(--surface)); color: var(--c);
}
.ev .punkt svg { width: 17px; height: 17px; }
.ev .kopf { font-size: var(--fs-m); display: flex; flex-wrap: wrap; gap: var(--sp-0) var(--sp-2); align-items: baseline; padding-top: var(--sp-2); }
.ev .kopf strong { font-weight: 650; }
.ev .kopf time { color: var(--text-3); font-size: var(--fs-s); }
.ev .inhalt { margin-top: var(--sp-2); font-size: var(--fs-m); white-space: pre-wrap; overflow-wrap: anywhere; color: var(--text-2); }
.ev .inhalt.blase { background: var(--surface-2); border: 1px solid var(--border); border-radius: 4px 12px 12px 12px; padding: var(--sp-2) var(--sp-3); color: var(--text); }
.ev .inhalt.antwort { background: var(--primary-soft); border-color: transparent; }
.ev .ev-aktionen { display: flex; gap: var(--sp-2); margin-top: var(--sp-2); }
.ev .galerie { margin-top: var(--sp-2); grid-template-columns: repeat(auto-fill, minmax(72px, 1fr)); max-width: 360px; }

/* ------------------------------------------------------------ Overlays */

.sheet-hg {
  position: fixed; inset: 0; z-index: 100; background: var(--abdunkeln);
  display: flex; align-items: flex-end; justify-content: center;
  animation: einblenden 0.15s ease-out;
}
.sheet {
  width: 100%; max-height: 92dvh; overflow: auto; background: var(--surface); color: var(--text);
  border-radius: 20px 20px 0 0; padding: var(--sp-2) var(--sp-4) calc(var(--sp-5) + env(safe-area-inset-bottom));
  box-shadow: var(--shadow-lg); animation: hochfahren 0.2s ease-out;
}
.sheet .griff { width: 40px; height: 5px; border-radius: 9px; background: var(--border-strong); margin: var(--sp-0) auto var(--sp-3); }
.sheet-kopf { display: flex; align-items: center; gap: var(--sp-2); margin-bottom: var(--sp-4); }
.sheet-kopf h2 { font-size: var(--fs-l); flex: 1; }
.sheet-fuss { display: grid; gap: var(--sp-3); margin-top: var(--sp-5); }
.sheet-fuss.zwei-knoepfe { grid-template-columns: repeat(2, minmax(0, 1fr)); }
/* Lange Knopftexte im Fenster umbrechen statt das Fenster zu verbreitern (schmale Handys) */
.sheet .btn { white-space: normal; line-height: 1.25; padding-block: var(--sp-2); }
.sheet summary.btn { justify-content: flex-start; text-align: left; }
@media (min-width: 700px) {
  .sheet-hg { align-items: center; padding: var(--sp-6); }
  .sheet { max-width: 560px; border-radius: 18px; padding: var(--sp-5) var(--sp-6) var(--sp-6); }
  .sheet .griff { display: none; }
}
@keyframes einblenden { from { opacity: 0; } }
@keyframes hochfahren { from { transform: translateY(40px); opacity: 0.6; } }

.versand { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-3); }
.versand .btn { min-height: 48px; }

.grund-chips { display: flex; flex-wrap: wrap; gap: var(--sp-2); }

.toasts {
  position: fixed; left: 50%; transform: translateX(-50%); z-index: 200; display: grid; gap: var(--sp-2); width: min(94vw, 440px);
  bottom: calc(var(--tabbar-h) + env(safe-area-inset-bottom) + 86px);
}
@media (min-width: 900px) { .toasts { bottom: 24px; } }
.fenster-offen .toasts { top: calc(env(safe-area-inset-top) + 12px); bottom: auto; }
.toast {
  display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-3) var(--sp-4) var(--sp-3) var(--sp-4); border-radius: 12px;
  background: var(--toast-bg); color: var(--toast-ink); box-shadow: var(--shadow-lg); font-weight: 550; font-size: var(--fs-basis);
  animation: hochfahren 0.2s ease-out;
}
.toast.fehler { background: var(--toast-fehler); }
.toast .grow { line-height: 1.35; }
.toast button { background: transparent; border: 0; color: var(--toast-link); font-weight: 700; cursor: pointer; padding: var(--sp-2) var(--sp-2); font-size: var(--fs-basis); }

.lightbox { position: fixed; inset: 0; z-index: 150; background: var(--lightbox-bg); display: grid; grid-template-rows: auto 1fr; }
.lightbox .leiste { display: flex; gap: var(--sp-2); justify-content: flex-end; padding: calc(env(safe-area-inset-top) + var(--sp-2)) var(--sp-2) var(--sp-2); }
.lightbox .leiste .icon-btn, .lightbox .leiste a { color: var(--lightbox-ink); }
.lightbox .bild { display: grid; place-items: center; padding: var(--sp-2); min-height: 0; }
.lightbox img { max-width: 100%; max-height: 100%; object-fit: contain; border-radius: 6px; }

.laden { display: grid; place-items: center; padding: var(--sp-8) 0; color: var(--text-3); }
.spinner { width: 30px; height: 30px; border-radius: 50%; border: 3px solid var(--border-strong); border-top-color: var(--primary); animation: drehen 0.8s linear infinite; }
@keyframes drehen { to { transform: rotate(360deg); } }
.skelett { background: linear-gradient(90deg, var(--surface-3) 0%, var(--surface-2) 50%, var(--surface-3) 100%); background-size: 200% 100%; animation: glanz 1.2s infinite; border-radius: var(--radius); height: 120px; }
@keyframes glanz { to { background-position: -200% 0; } }

/* ------------------------------------------------------------ Anmeldung */

.anmeldung {
  min-height: 100dvh; display: grid; place-items: center; padding: var(--sp-6) var(--sp-4);
  background: radial-gradient(1200px 600px at 10% -10%, var(--brand-glanz) 0%, transparent 60%), var(--brand);
}
.anmeldung .karte { width: 100%; max-width: 420px; background: var(--surface); border-radius: 20px; padding: var(--sp-6) var(--sp-6); box-shadow: var(--shadow-lg); display: grid; gap: var(--sp-5); }
.anmeldung .logo { color: var(--text); font-size: var(--fs-xl); }
.anmeldung .logo small { color: var(--text-3); font-size: var(--fs-s); }
.anmeldung h1 { font-size: var(--fs-xl); }
.anmeldung p.muted { margin-top: var(--sp-1); font-size: var(--fs-m); }

/* Einstellungen */
.einst-nav { display: flex; gap: var(--sp-2); overflow-x: auto; scrollbar-width: none; margin: 0 calc(-1 * var(--sp-4)); padding: 0 var(--sp-4); }
.einst-nav::-webkit-scrollbar { display: none; }
@media (min-width: 900px) { .einst-nav { margin: 0; padding: 0; flex-wrap: wrap; } }
.code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: var(--fs-m); background: var(--surface-2);
  border: 1px solid var(--border); border-radius: 9px; padding: var(--sp-3) var(--sp-3); overflow-wrap: anywhere; user-select: all;
}
.kopierzeile { display: flex; gap: var(--sp-2); align-items: stretch; }
.kopierzeile .code { flex: 1; min-width: 0; display: flex; align-items: center; }
.statuszeile { display: flex; align-items: center; gap: var(--sp-2); font-size: var(--fs-m); }
.statuszeile .punkt { width: 10px; height: 10px; border-radius: 50%; background: var(--text-3); flex: none; }
.statuszeile .punkt.ok { background: var(--ok-strong); }
.statuszeile .punkt.fehler { background: var(--danger); }
.tipp { background: var(--primary-soft); border-radius: 12px; padding: var(--sp-3) var(--sp-4); font-size: var(--fs-m); color: var(--text); }
.tipp strong { display: block; margin-bottom: var(--sp-0); }
.warnung { background: var(--warn-soft); color: var(--text); border-radius: 12px; padding: var(--sp-3) var(--sp-4); font-size: var(--fs-m); }

.menue { display: grid; }
.menue a, .menue button {
  display: flex; align-items: center; gap: var(--sp-4); padding: var(--sp-4) var(--sp-4); border: 0; border-bottom: 1px solid var(--border);
  background: transparent; width: 100%; text-align: left; color: var(--text) !important; font-weight: 600; cursor: pointer;
  text-decoration: none !important; font-size: var(--fs-basis);
}
.menue > :last-child { border-bottom: 0; }
.menue svg { color: var(--text-3); }
.menue .gefahr { color: var(--danger) !important; }
.menue .gefahr svg { color: var(--danger); }


/* ============================================================ Version 2: Dashboard, Übersicht, Abschluss */

/* Filterleiste */
.filterleiste { display: grid; gap: var(--sp-3); }
.filter-zeile { display: flex; gap: var(--sp-2); align-items: stretch; }
.filter-zeile .suche { flex: 1; }
.filter-felder { display: none; }
@media (min-width: 900px) {
  .filter-felder { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)) auto; gap: var(--sp-3); align-items: end; }
  .filter-knopf-mobil { display: none !important; }
}
.filter-felder.drei { grid-template-columns: repeat(3, minmax(0, 1fr)) auto; }
.filter-felder .feld > span { font-size: var(--fs-s); }
.filter-felder select, .filter-felder input { min-height: 42px !important; padding: var(--sp-2) var(--sp-3) !important; font-size: var(--fs-basis) !important; }
.aktive-filter { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.aktive-filter .chip { height: 32px; font-size: var(--fs-s); background: var(--primary-soft); border-color: transparent; color: var(--primary); }
.chip.warn-chip { color: var(--ueberfaellig); }
.ansicht-umschalter { display: flex; gap: var(--sp-2); align-items: center; justify-content: space-between; flex-wrap: wrap; }
.ansicht-umschalter .segment { width: 200px; }

/* Status-Reiter (Handy) */
.status-reiter { display: flex; gap: var(--sp-2); overflow-x: auto; scrollbar-width: none; margin: 0 calc(-1 * var(--sp-4)); padding: var(--sp-0) var(--sp-4); }
.status-reiter::-webkit-scrollbar { display: none; }
.status-reiter button {
  flex: none; display: inline-flex; align-items: center; gap: var(--sp-2); height: 40px; padding: 0 var(--sp-4); border-radius: 999px;
  border: 1px solid var(--border-strong); background: var(--surface); font-weight: 650; font-size: var(--fs-m); color: var(--text-2); cursor: pointer;
}
.status-reiter button::before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: var(--c); }
.status-reiter button .n { font-size: var(--fs-s); color: var(--text-3); font-weight: 700; }
.status-reiter button.aktiv { background: var(--c); border-color: var(--c); color: var(--status-ink); }
.status-reiter button.aktiv::before { background: var(--status-ink); }
.status-reiter button.aktiv .n { color: var(--status-ink); }

/* Board (PC): eine Spalte je Status */
.board { display: none; }
@media (min-width: 1320px) {
  .board { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--sp-3); align-items: start; }
  .nur-handy { display: none !important; }
}
@media (max-width: 1319px) { .nur-pc { display: none !important; } }
.board-spalte { display: grid; gap: var(--sp-3); min-width: 0; }
.spalte-kopf {
  --c: var(--s-neu);
  display: flex; align-items: center; gap: var(--sp-2); padding: var(--sp-3) var(--sp-3); border-radius: 12px;
  background: color-mix(in srgb, var(--c) 10%, var(--surface)); border: 1px solid color-mix(in srgb, var(--c) 25%, transparent);
  font-weight: 700; font-size: var(--fs-m); position: sticky; top: 74px; z-index: 5;
}
.spalte-kopf::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--c); flex: none; }
.spalte-kopf .n { margin-left: auto; font-size: var(--fs-s); color: var(--text-2); }
.spalte-leer { font-size: var(--fs-m); color: var(--text-3); text-align: center; padding: var(--sp-5) var(--sp-2); border: 1.5px dashed var(--border); border-radius: 12px; }
.spalte-mehr { font-size: var(--fs-m); text-align: center; padding: var(--sp-2); }

/* Anfrage-Karte */
.akarten-liste { display: grid; gap: var(--sp-3); }
@media (min-width: 700px) and (max-width: 1319px) { .akarten-liste { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1100px) and (max-width: 1319px) { .akarten-liste { grid-template-columns: 1fr 1fr 1fr; } }
.akarte {
  --c: var(--s-neu);
  position: relative; display: grid; gap: var(--sp-2); padding: var(--sp-3) var(--sp-4) var(--sp-3) var(--sp-5); border-radius: 14px; min-width: 0;
  background: var(--surface); border: 1px solid var(--border); box-shadow: var(--shadow); color: var(--text) !important;
  text-decoration: none !important; cursor: pointer; transition: border-color 0.12s, transform 0.08s;
}
.akarte::before { content: ""; position: absolute; left: 0; top: 10px; bottom: 10px; width: 5px; border-radius: 0 4px 4px 0; background: var(--c); }
.akarte:hover { border-color: var(--border-strong); }
.akarte:active { transform: scale(0.995); }
.akarte-kopf { display: flex; align-items: flex-start; gap: var(--sp-2); }
.akarte .kname { font-weight: 700; font-size: var(--fs-basis); line-height: 1.25; overflow-wrap: anywhere; }
.akarte .kontakt { font-size: var(--fs-m); color: var(--text-2); display: grid; gap: 1px; }
.akarte .kontakt a { color: var(--text-2); overflow-wrap: anywhere; }
.akarte .kontakt a:hover { color: var(--primary); }
.akarte .betreff { font-size: var(--fs-m); color: var(--text-2); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.akarte-fakten { display: flex; flex-wrap: wrap; gap: var(--sp-1) var(--sp-3); font-size: var(--fs-s); color: var(--text-2); }
.akarte-fakten span { display: inline-flex; align-items: center; gap: var(--sp-1); min-width: 0; }
.akarte-fakten svg { width: 14px; height: 14px; color: var(--text-3); flex: none; }
.art-tag { display: inline-block; font-size: var(--fs-xs); font-weight: 700; padding: var(--sp-0) var(--sp-2); border-radius: 6px; background: var(--surface-3); color: var(--text-2); max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.akarte .preis { font-weight: 700; color: var(--text); }
.akarte-fuss { display: flex; align-items: center; gap: var(--sp-2); justify-content: space-between; font-size: var(--fs-s); color: var(--text-3); }
.akarte .schnell { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--sp-2); margin-top: var(--sp-0); }
.akarte .schnell .btn { min-height: 40px; font-size: var(--fs-m); padding: 0 var(--sp-2); gap: var(--sp-2); white-space: normal; }
.akarte > * { min-width: 0; }
.board .akarte .schnell { gap: var(--sp-2); }
.board .akarte .schnell .btn { min-height: 36px; padding: 0 var(--sp-2); font-size: var(--fs-s); white-space: normal; }
.board .akarte .schnell .btn svg { display: none; }
.akarte.ueberfaellig { border-color: var(--ueberfaellig); background: color-mix(in srgb, var(--ueberfaellig-soft) 70%, var(--surface)); }
.akarte.ueberfaellig::before { background: var(--ueberfaellig); }
.warn-tag { display: inline-flex; align-items: center; gap: var(--sp-1); font-size: var(--fs-s); font-weight: 700; color: var(--ueberfaellig); }
.warn-tag svg { width: 14px; height: 14px; }
.board .akarte .kname { font-size: var(--fs-basis); }
.board .akarte .akarte-fakten { font-size: var(--fs-s); }

/* Auftragsübersicht (Liste): Tabelle am PC, Karten am Handy */
.listen-leiste { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-3); align-items: end; margin-bottom: var(--sp-3); }
.listen-leiste .feld > span { font-size: var(--fs-s); }
.listen-leiste select { min-height: 42px !important; padding: var(--sp-2) var(--sp-3) !important; }
.listen-anzahl { font-size: var(--fs-s); color: var(--text-3); justify-self: end; padding-bottom: var(--sp-3); }
@media (min-width: 700px) {
  .listen-leiste { grid-template-columns: repeat(3, minmax(0, 240px)) 1fr; }
}
.liste-karte { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); min-width: 0; }
.liste-leer { gap: var(--sp-3); }
.liste-leer svg { color: var(--text-3); }
.ohne { color: var(--text-3); }
.nebentext { font-size: var(--fs-s); color: var(--text-3); }

.auftrags-tabelle { display: none; width: 100%; border-collapse: separate; border-spacing: 0; font-size: var(--fs-m); }
.auftrags-tabelle thead th {
  position: sticky; top: var(--kopf-oben, 0px); z-index: 4;
  text-align: left; vertical-align: bottom; white-space: nowrap; padding: var(--sp-3);
  background: var(--surface-2); color: var(--text-2); font-size: var(--fs-s); font-weight: 700;
  border-bottom: 2px solid var(--border-strong);
}
.auftrags-tabelle thead th:first-child { border-top-left-radius: var(--radius); }
.auftrags-tabelle thead th:last-child { border-top-right-radius: var(--radius); }
.auftrags-tabelle .sortier {
  display: inline-flex; align-items: center; gap: var(--sp-1); padding: var(--sp-1) var(--sp-2); margin: calc(-1 * var(--sp-1)) calc(-1 * var(--sp-2));
  border: 0; border-radius: 8px; background: none; color: inherit; font: inherit; cursor: pointer;
}
.auftrags-tabelle .sortier:hover { background: var(--surface-3); color: var(--text); }
.auftrags-tabelle .sortier.aktiv { color: var(--text); }
.auftrags-tabelle .sortier svg { width: 16px; height: 16px; }
.auftrags-tabelle td { padding: var(--sp-4) var(--sp-3); border-bottom: 1px solid var(--border); vertical-align: top; }
/* Abwechselnde Zeilen: jeder Auftrag ist eine eigene Gruppe (Zeile + aufklappbare Details) */
.auftrags-tabelle tbody.auftrag:nth-of-type(even) > tr { background: var(--surface-2); }
.auftrags-tabelle tr.zeile { cursor: pointer; }
.auftrags-tabelle tr.zeile:hover { background: var(--primary-soft); }
.auftrags-tabelle tbody.offen tr.zeile td { border-bottom-color: transparent; }
.auftrags-tabelle tbody.ueberfaellig tr.zeile td:first-child { box-shadow: inset 4px 0 0 var(--ueberfaellig); }
.auftrags-tabelle tr.details td { padding-top: 0; }
.auftrags-tabelle tbody:last-of-type tr:last-child td { border-bottom: 0; }
.t-kunde a { display: block; font-weight: 700; font-size: var(--fs-basis); color: var(--text); }
.t-kunde .nebentext { display: block; margin-top: var(--sp-0); }
.t-personen { overflow-wrap: anywhere; }
.t-status-zelle { display: grid; gap: var(--sp-1); justify-items: start; }
.t-termin { display: grid; gap: var(--sp-0); }
.t-termin strong { font-weight: 650; }
.t-termin.vorbei strong { color: var(--warn); }
.t-auf { width: 52px; text-align: right; }
.auftrags-tabelle .icon-btn.auf svg { transition: transform 0.15s; }
.auftrags-tabelle .icon-btn.auf[aria-expanded=true] svg { transform: rotate(180deg); }
.chips-zeile { display: flex; flex-wrap: wrap; gap: var(--sp-1); align-items: center; }
.details-raster { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: var(--sp-3) var(--sp-6); margin: 0 0 var(--sp-3); padding: var(--sp-3) var(--sp-4); border-radius: var(--radius-sm); background: var(--surface); border: 1px solid var(--border); }
.details-raster .breit { grid-column: 1 / -1; }
.details-raster dt { font-size: var(--fs-s); font-weight: 600; color: var(--text-3); }
.details-raster dd { margin: var(--sp-0) 0 0; overflow-wrap: anywhere; }

.auftrags-karten { list-style: none; margin: 0; padding: 0; display: grid; }
.auftrags-karten li + li { border-top: 1px solid var(--border); }
.auftrags-karten li:nth-child(even) .auftrag-karte { background: var(--surface-2); }
.auftrag-karte { --c: var(--s-neu); position: relative; display: grid; gap: var(--sp-2); padding: var(--sp-4) var(--sp-4) var(--sp-4) var(--sp-5); color: var(--text) !important; text-decoration: none !important; }
.auftrag-karte::before { content: ""; position: absolute; left: 0; top: var(--sp-3); bottom: var(--sp-3); width: 4px; border-radius: 0 4px 4px 0; background: var(--c); }
.auftrags-karten li:first-child .auftrag-karte { border-radius: var(--radius) var(--radius) 0 0; }
.auftrags-karten li:last-child .auftrag-karte { border-radius: 0 0 var(--radius) var(--radius); }
.auftrag-karte:active { background: var(--primary-soft); }
.auftrag-karte.ueberfaellig::before { background: var(--ueberfaellig); }
.ak-kopf { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--sp-2); }
.ak-kunde { font-size: var(--fs-basis); overflow-wrap: anywhere; }
.ak-zeile { display: grid; grid-template-columns: 76px minmax(0, 1fr); gap: var(--sp-2); align-items: start; font-size: var(--fs-m); }
.ak-label { font-size: var(--fs-s); color: var(--text-3); padding-top: var(--sp-0); }
.auftrag-karte .t-termin { font-size: var(--fs-m); }
@media (min-width: 900px) {
  .auftrags-tabelle { display: table; }
  .auftrags-karten { display: none; }
}

/* Detail: Notizfeld, Unterschrift */
.notizfeld textarea { min-height: 120px; }
.speicherstand { font-size: var(--fs-s); color: var(--text-3); display: inline-flex; align-items: center; gap: var(--sp-1); }
.speicherstand.ok { color: var(--ok); }
.speicherstand.fehler { color: var(--danger); }
.speicherstand svg { width: 14px; height: 14px; }
.kontaktdaten { display: grid; gap: 0; }
.ueberfaellig-hinweis { display: flex; gap: var(--sp-3); align-items: center; padding: var(--sp-3) var(--sp-3); border-radius: 12px; background: var(--ueberfaellig-soft); color: var(--ueberfaellig); font-weight: 650; font-size: var(--fs-m); }
.ueberfaellig-hinweis svg { flex: none; }
.abnahme { display: grid; gap: var(--sp-3); }
.abnahme .sig { background: var(--papier); border: 1px solid var(--border); border-radius: 12px; padding: var(--sp-2); max-width: 360px; }
.abnahme .sig img { width: 100%; display: block; }
.abnahme .meta { font-size: var(--fs-m); }
.benachrichtigt { display: flex; gap: var(--sp-2); align-items: flex-start; font-size: var(--fs-m); font-weight: 600; color: var(--ok); }
.benachrichtigt svg { flex: none; margin-top: 1px; }

.pad-rahmen { position: relative; border: 2px dashed var(--border-strong); border-radius: 12px; background: var(--papier); }
.pad-rahmen canvas { display: block; width: 100%; height: 200px; touch-action: none; cursor: crosshair; border-radius: 10px; }
@media (min-width: 700px) { .pad-rahmen canvas { height: 230px; } }
.pad-rahmen .linie { position: absolute; left: 22px; right: 22px; bottom: 44px; border-bottom: 1.5px solid var(--papier-hilfslinie); pointer-events: none; }
.pad-rahmen .x { position: absolute; left: 22px; bottom: 48px; font-size: var(--fs-xl); color: var(--papier-hilfslinie); pointer-events: none; }
.pad-rahmen .platzhalter { position: absolute; inset: 0 0 50px; display: grid; place-items: center; text-align: center; padding: 0 var(--sp-4); color: var(--papier-text-2); font-weight: 600; pointer-events: none; }
.pad-rahmen.benutzt .platzhalter { display: none; }
.abnahme-zusammenfassung { background: var(--surface-2); border: 1px solid var(--border); border-radius: 12px; padding: var(--sp-3) var(--sp-3); font-size: var(--fs-m); display: grid; gap: var(--sp-0); }
.sheet.gross { max-width: 760px; }

/* Übersicht */
.monatswahl { display: flex; align-items: center; gap: var(--sp-2); }
.monatswahl strong { min-width: 150px; text-align: center; font-size: var(--fs-l); }
.kennzahlen { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-3); }
@media (min-width: 700px) { .kennzahlen { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .kennzahlen { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
.kennzahl { background: var(--surface); border: 1px solid var(--border); border-radius: 14px; padding: var(--sp-4); box-shadow: var(--shadow); display: grid; gap: var(--sp-0); }
.kennzahl .wert { font-size: var(--fs-xxl); font-weight: 800; line-height: 1.1; font-variant-numeric: tabular-nums; }
.kennzahl .name { font-size: var(--fs-s); font-weight: 600; color: var(--text-3); }
.kennzahl .zusatz { font-size: var(--fs-s); color: var(--text-3); }
.kennzahl.rot { border-color: var(--ueberfaellig); background: color-mix(in srgb, var(--ueberfaellig-soft) 65%, var(--surface)); }
.kennzahl.rot .wert, .kennzahl.rot .name { color: var(--ueberfaellig); }
.balkenliste { display: grid; gap: var(--sp-3); }
.balkenzeile { display: grid; gap: var(--sp-1); }
.balkenzeile .kopf { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--sp-0) var(--sp-3); font-size: var(--fs-m); }
.balkenzeile .kopf span:first-child { min-width: 0; overflow-wrap: anywhere; }
.balkenzeile .kopf span:last-child { color: var(--text-2); font-variant-numeric: tabular-nums; white-space: nowrap; }
.balken { display: flex; height: 12px; border-radius: 4px; overflow: hidden; background: var(--surface-3); gap: var(--sp-0); }
.balken i { display: block; height: 100%; }
.balken i:first-child { border-radius: 4px 0 0 4px; }
.balken i:last-child { border-radius: 0 4px 4px 0; }
.legende { display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-4); font-size: var(--fs-s); color: var(--text-2); }
.legende span { display: inline-flex; align-items: center; gap: var(--sp-2); }
.legende i { width: 10px; height: 10px; border-radius: 3px; display: inline-block; }
.monatssaeulen { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: var(--sp-3); align-items: end; height: 180px; padding-top: var(--sp-2); }
.monatssaeulen .saeule { display: grid; grid-template-rows: auto 1fr auto; height: 100%; gap: var(--sp-1); text-align: center; }
.monatssaeulen .wert { font-size: var(--fs-s); font-weight: 700; font-variant-numeric: tabular-nums; }
.monatssaeulen .stapel { display: flex; flex-direction: column-reverse; justify-content: flex-start; gap: var(--sp-0); align-self: end; width: 70%; max-width: 44px; margin: 0 auto; height: 100%; }
.monatssaeulen .stapel i { display: block; width: 100%; border-radius: 3px; }
.monatssaeulen .lbl { font-size: var(--fs-xs); color: var(--text-3); }
.monatssaeulen .saeule.aktiv .lbl { color: var(--text); font-weight: 700; }

/* Druckansicht Abnahmeprotokoll */
.druckblatt { background: var(--papier); color: var(--papier-text); border-radius: 14px; box-shadow: var(--shadow); padding: var(--sp-7) var(--sp-6); display: grid; gap: var(--sp-4); max-width: 820px; margin: 0 auto; }
.druckblatt h1 { font-size: var(--fs-xl); }
.druckblatt table { width: 100%; border-collapse: collapse; font-size: var(--fs-basis); }
.druckblatt th { text-align: left; color: var(--papier-text-2); font-weight: 600; font-size: var(--fs-m); width: 32%; padding: var(--sp-2) var(--sp-3) var(--sp-2) 0; vertical-align: top; }
.druckblatt td { padding: var(--sp-2) 0; vertical-align: top; }
.druckblatt tr { border-bottom: 1px solid var(--papier-linie); }
.druckblatt .sig img { max-width: 320px; width: 100%; border-bottom: 1.5px solid var(--papier-text); }
@media print {
  @page { size: A4; margin: 15mm; }
  body { background: var(--papier) !important; }
  .sidebar, .tabbar, .fab, .topbar, .toasts, .nicht-drucken { display: none !important; }
  .app { display: block !important; }
  .main { padding: 0 !important; }
  .content { padding: 0 !important; max-width: none !important; }
  .druckblatt { box-shadow: none; padding: 0; }
}

.chart-tip { position: fixed; z-index: 300; background: var(--toast-bg); color: var(--toast-ink); font-size: var(--fs-s); font-weight: 600; padding: var(--sp-2) var(--sp-3); border-radius: 8px; pointer-events: none; box-shadow: var(--shadow-lg); white-space: nowrap; }
.balken i, .stapel i { cursor: default; }

/* Statusfarben zuletzt, damit sie die Standardfarbe der Bausteine überschreiben */
.st-neu { --c: var(--s-neu); }
.st-angenommen { --c: var(--s-angenommen); }
.st-in_bearbeitung { --c: var(--s-in_bearbeitung); }
.st-erledigt { --c: var(--s-erledigt); }
.st-abgelehnt { --c: var(--s-abgelehnt); }

/* ------------------------------------------------------------ Erscheinungsbild des Betriebs */
.logo-bild { display: inline-grid; place-items: center; width: 40px; height: 40px; flex: none; border-radius: 10px; background: var(--papier); padding: var(--sp-1); overflow: hidden; }
.logo-bild img { max-width: 100%; max-height: 32px; object-fit: contain; display: block; }
.logo-bild.gross { width: auto; min-width: 56px; max-width: 200px; height: 56px; padding: var(--sp-2) var(--sp-2); border: 1px solid var(--border); }
.logo-bild.gross img { max-height: 42px; max-width: 182px; }
.logo-text { min-width: 0; overflow-wrap: anywhere; }
.sidebar .logo { font-size: var(--fs-basis); line-height: 1.2; align-items: center; }
.sidebar .logo small { margin-top: var(--sp-0); }
.nav-trenner { margin: var(--sp-4) var(--sp-3) var(--sp-1); font-size: var(--fs-xs); font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase; color: var(--brand-ink-2); }
.ansicht-leiste {
  display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap; padding: var(--sp-2) var(--sp-4);
  background: var(--warn-soft); color: var(--text); border-bottom: 1px solid var(--border); font-size: var(--fs-m);
}
.ansicht-leiste > svg { width: 18px; height: 18px; color: var(--warn); flex: none; }

.farbwahl { display: flex; flex-wrap: wrap; gap: var(--sp-3); align-items: flex-start; }
.farbwahl .farbe { position: relative; display: grid; justify-items: center; gap: var(--sp-1); cursor: pointer; }
.farbwahl input[type=radio] { position: absolute; opacity: 0; width: 1px; height: 1px; }
.farbwahl .muster {
  width: 38px; height: 38px; border-radius: 50%; background: var(--f); border: 3px solid var(--surface);
  box-shadow: 0 0 0 1px var(--border-strong); transition: box-shadow 0.12s;
}
.farbwahl input:checked + .muster { box-shadow: 0 0 0 2.5px var(--text); }
.farbwahl input:focus-visible + .muster { outline: 2px solid var(--primary); outline-offset: 3px; }
.farbwahl .eigene input[type=color] { position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 38px; height: 38px; opacity: 0; cursor: pointer; border: 0; padding: 0; }
/* Farbkreis als Bild für „eigene Farbe“ – bewusst bunt, keine Oberflächenfarbe */
.farbwahl .eigene .muster { background: conic-gradient(from 90deg, #e5484d, #f6b400, #2e7d32, #0b7a70, #1b5fc1, #6d3fd6, #e5484d); }
.farbwahl .eigene input[type=radio]:checked + .muster { background: var(--f); }
.farbwahl .eigene-text { font-size: var(--fs-xs); color: var(--text-3); font-weight: 600; }

.aussehen { display: grid; gap: var(--sp-5); }
@media (min-width: 760px) { .aussehen { grid-template-columns: minmax(0, 1fr) minmax(0, 330px); align-items: start; } }
.marke-vorschau { border: 1px solid var(--border); border-radius: 16px; overflow: hidden; background: var(--bg); box-shadow: var(--shadow); }
.mv-kopf { background: var(--v-brand); color: var(--brand-ink); padding: var(--sp-3) var(--sp-4); display: flex; align-items: center; gap: var(--sp-3); }
.mv-kopf .logo-bild { width: 36px; height: 36px; }
.mv-kopf .logo-bild img { max-height: 28px; }
.mv-kopf strong { display: block; font-size: var(--fs-basis); line-height: 1.2; overflow-wrap: anywhere; }
.mv-kopf small { display: block; font-size: var(--fs-xs); color: var(--v-ink2); }
.mv-inhalt { padding: var(--sp-3); }
.mv-karte { background: var(--surface); border-radius: 12px; padding: var(--sp-3); display: grid; gap: var(--sp-2); border-left: 4px solid var(--v-primary); box-shadow: var(--shadow); }
.mv-chip { justify-self: start; font-size: var(--fs-xs); font-weight: 700; background: var(--v-soft); color: var(--v-primary); border-radius: 999px; padding: var(--sp-0) var(--sp-2); }
.mv-knoepfe { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-2); margin-top: var(--sp-1); }
.mv-knopf { background: var(--v-primary); color: var(--v-ink, var(--primary-ink)); border-radius: 10px; padding: var(--sp-2); text-align: center; font-weight: 700; font-size: var(--fs-m); }
.mv-knopf.mv-zweit { background: var(--surface); color: var(--text-2); box-shadow: inset 0 0 0 1px var(--border-strong); }

/* ------------------------------------------------------------ Plattform-Verwaltung */
.betriebe-raster { display: grid; gap: var(--sp-4); grid-template-columns: repeat(auto-fill, minmax(min(100%, 330px), 1fr)); }
.betrieb-karte { background: var(--surface); border-radius: var(--radius); box-shadow: var(--shadow); overflow: hidden; display: grid; align-content: start; }
.betrieb-karte.pausiert .bk-kopf { filter: saturate(0.25); }
.bk-kopf { background: var(--bk); color: var(--brand-ink); padding: var(--sp-4) var(--sp-4); display: flex; align-items: center; gap: var(--sp-3); }
.bk-kopf h3 { margin: 0; font-size: var(--fs-l); line-height: 1.25; overflow-wrap: anywhere; }
.bk-kopf .grow > span { font-size: var(--fs-s); color: var(--bk-ink2); }
.bk-mark { width: 40px; height: 40px; flex: none; border-radius: 10px; display: grid; place-items: center; background: var(--auf-marke-flaeche); font-weight: 800; }
.bk-status { flex: none; font-size: var(--fs-xs); font-weight: 700; border-radius: 999px; padding: var(--sp-1) var(--sp-2); background: var(--auf-marke-flaeche); color: var(--brand-ink); }
.bk-status.pausiert { background: var(--surface); color: var(--danger); }
.bk-zahlen { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-2); margin: 0; padding: var(--sp-4) var(--sp-4) var(--sp-2); }
.bk-zahlen div { display: grid; grid-template-rows: 1fr auto; gap: var(--sp-0); }
.bk-zahlen dt { font-size: var(--fs-xs); color: var(--text-3); }
.bk-zahlen dd { margin: 0; font-size: var(--fs-xl); font-weight: 800; font-variant-numeric: tabular-nums; }
.bk-chef { display: flex; align-items: center; gap: var(--sp-2); margin: 0; padding: var(--sp-0) var(--sp-4); font-size: var(--fs-m); color: var(--text-2); min-width: 0; }
.bk-chef span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bk-chef svg { width: 16px; height: 16px; flex: none; }
.bk-aktionen { display: flex; flex-wrap: wrap; gap: var(--sp-2); padding: var(--sp-3) var(--sp-4) var(--sp-4); }

.fertig-karte { display: grid; justify-items: center; text-align: center; gap: var(--sp-3); }
.fertig-karte h2 { margin: 0; text-wrap: balance; }
.fertig-karte p { margin: 0; }
.fertig-haken { width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center; background: var(--ok-soft); color: var(--ok); }
.fertig-haken svg { width: 28px; height: 28px; stroke-width: 2.6; }
.zugang {
  justify-self: stretch; text-align: left; margin: var(--sp-1) 0; white-space: pre-wrap; overflow-wrap: anywhere;
  background: var(--surface-2); border: 1px solid var(--border); border-radius: 12px; padding: var(--sp-3) var(--sp-4);
  font: var(--fs-m)/1.55 ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
}
.kopierzeile input, .kopierzeile select { flex: 1; min-width: 0; }

/* ------------------------------------------------------------ Kalender */
.kal-leiste { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-3) var(--sp-4); }
.kal-ansichten { flex: 0 1 300px; }
.kal-nav { display: flex; align-items: center; gap: var(--sp-1); flex: 1 1 auto; min-width: 0; }
.kal-nav h2 { margin: 0; font-size: var(--fs-l); min-width: 0; text-align: center; flex: 1; text-transform: capitalize; font-variant-numeric: tabular-nums; }
@media (min-width: 760px) { .kal-nav { flex: 0 1 auto; } .kal-nav h2 { min-width: 250px; } }
.kal-meine { min-height: 36px; margin-left: auto; font-size: var(--fs-m); }

.kal-monat-wrap { display: grid; gap: var(--sp-4); }
@media (min-width: 1100px) { .kal-monat-wrap { grid-template-columns: minmax(0, 1fr) 360px; align-items: start; } }
.kal-kopf, .kal-raster { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); }
.kal-kopf span { padding: var(--sp-2) var(--sp-1); text-align: center; font-size: var(--fs-xs); font-weight: 700; color: var(--text-3); letter-spacing: 0.04em; }
.kal-raster { border-top: 1px solid var(--border); }
.kal-zelle {
  position: relative; min-height: 56px; padding: var(--sp-1); display: grid; align-content: start; justify-items: center; gap: var(--sp-1);
  border-right: 1px solid var(--border); border-bottom: 1px solid var(--border); cursor: pointer; min-width: 0;
}
.kal-zelle:nth-child(7n) { border-right: 0; }
.kal-zelle.we { background: var(--surface-2); }
.kal-zelle.anders .kal-nr { color: var(--text-3); opacity: 0.7; }
.kal-zelle:hover { background: var(--primary-soft); }
.kal-zelle:focus-visible { outline: 2px solid var(--primary); outline-offset: -2px; }
.kal-zelle.gewaehlt { box-shadow: inset 0 0 0 2px var(--primary); }
.kal-nr { width: 28px; height: 28px; display: grid; place-items: center; border-radius: 50%; font-size: var(--fs-m); font-weight: 650; font-variant-numeric: tabular-nums; }
.kal-zelle.heute .kal-nr { background: var(--primary); color: var(--primary-ink); }
.kal-chips { display: none; }
.kal-punkte { display: flex; gap: var(--sp-1); }
.kal-punkte i { width: 7px; height: 7px; border-radius: 50%; background: var(--c); }
@media (min-width: 760px) {
  .kal-zelle { min-height: 108px; justify-items: stretch; padding: var(--sp-1) var(--sp-1) var(--sp-2); }
  .kal-nr { justify-self: end; }
  .kal-chips { display: grid; gap: var(--sp-1); min-width: 0; }
  .kal-punkte { display: none; }
}
.kal-chip {
  display: block; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-size: var(--fs-xs); line-height: 1.35; padding: var(--sp-0) var(--sp-2); border-radius: 6px; color: var(--text) !important; text-decoration: none !important;
  background: color-mix(in srgb, var(--c) 14%, var(--surface)); border-left: 3px solid var(--c);
}
.kal-chip b { font-weight: 700; font-variant-numeric: tabular-nums; }
.kal-chip:hover { background: color-mix(in srgb, var(--c) 24%, var(--surface)); }
.kal-mehr { font-size: var(--fs-xs); color: var(--text-3); padding-left: var(--sp-1); font-weight: 600; }

.kal-tag-karte, .ag-tag { display: grid; gap: var(--sp-3); }
.kal-tag-kopf { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); }
.kal-tag-kopf h3 { margin: 0; font-size: var(--fs-basis); }
.ag-tag.heute .kal-tag-kopf h3 { color: var(--primary); }
.kal-leer { margin: 0; font-size: var(--fs-m); }
.kal-tag-liste { display: grid; gap: var(--sp-2); }
.kal-eintrag {
  display: flex; align-items: center; gap: var(--sp-1); min-width: 0; border-radius: 12px; padding: var(--sp-2) var(--sp-2) var(--sp-2) var(--sp-3);
  background: color-mix(in srgb, var(--c) 8%, var(--surface)); border-left: 4px solid var(--c);
}
.kal-eintrag > a.grow { gap: var(--sp-3); color: inherit; text-decoration: none; min-width: 0; align-items: center; }
.kal-eintrag .titel { font-weight: 650; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kal-eintrag .zeile2 { font-size: var(--fs-s); color: var(--text-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kal-eintrag .zeile2 svg { width: 14px; height: 14px; vertical-align: -2px; }
.kal-status { margin-top: var(--sp-1); }
.kal-status .pill { font-size: var(--fs-xs); }
.kal-zeit { display: grid; flex: none; width: 58px; font-variant-numeric: tabular-nums; }
.kal-zeit strong { font-size: var(--fs-basis); }
.kal-zeit span { font-size: var(--fs-xs); color: var(--text-3); }

.kal-woche { display: none; overflow-x: auto; }
.kal-agenda { display: grid; gap: var(--sp-3); }
@media (min-width: 760px) { .kal-woche { display: block; } .kal-agenda { display: none; } }
.kw-kopf, .kw-koerper { display: grid; grid-template-columns: 54px repeat(7, minmax(104px, 1fr)); min-width: 780px; }
.kw-kopf { border-bottom: 1px solid var(--border); }
.kw-tag { padding: var(--sp-2) var(--sp-2); text-align: center; font-size: var(--fs-s); font-weight: 600; color: var(--text-3); }
.kw-tag b { display: block; font-size: var(--fs-xl); color: var(--text); font-variant-numeric: tabular-nums; }
.kw-tag.heute b { color: var(--primary); }
.kw-koerper { grid-template-rows: calc(var(--stunden) * var(--stunde)); }
.kw-zeiten { display: grid; grid-auto-rows: var(--stunde); font-size: var(--fs-xs); color: var(--text-3); text-align: right; padding-right: var(--sp-2); font-variant-numeric: tabular-nums; }
.kw-zeiten span { transform: translateY(-7px); }
.kw-zeiten span:first-child { transform: none; }
.kw-spalte {
  position: relative; border-left: 1px solid var(--border); cursor: pointer;
  background-image: repeating-linear-gradient(to bottom, var(--border) 0, var(--border) 1px, transparent 1px, transparent var(--stunde));
}
.kw-spalte:hover { background-color: color-mix(in srgb, var(--primary) 4%, transparent); }
.kw-spalte.heute { background-color: color-mix(in srgb, var(--primary) 6%, transparent); }
.kw-termin {
  position: absolute; display: grid; align-content: start; gap: 1px; overflow: hidden; padding: var(--sp-1) var(--sp-2); border-radius: 8px;
  font-size: var(--fs-xs); line-height: 1.3; color: var(--text) !important; text-decoration: none !important;
  background: color-mix(in srgb, var(--c) 17%, var(--surface)); border-left: 3px solid var(--c); box-shadow: 0 0 0 1.5px var(--surface);
}
.kw-termin:hover { background: color-mix(in srgb, var(--c) 27%, var(--surface)); z-index: 2; }
.kw-termin b { font-size: var(--fs-xs); font-variant-numeric: tabular-nums; }
.kw-termin span { font-weight: 650; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kw-termin small { color: var(--text-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--fs-xs); }
.kw-jetzt { position: absolute; left: 0; right: 0; height: 2px; background: var(--ueberfaellig); pointer-events: none; z-index: 3; }
.kw-jetzt::before { content: ""; position: absolute; left: -5px; top: -4px; width: 10px; height: 10px; border-radius: 50%; background: var(--ueberfaellig); }

/* Erste Schritte für neue Betriebe */
.start-karte { display: grid; gap: var(--sp-3); max-width: 760px; }
.start-karte h2 { margin: 0; text-wrap: balance; }
.start-karte p { margin: 0; }
.start-liste { list-style: none; margin: var(--sp-2) 0 0; padding: 0; display: grid; gap: var(--sp-3); }
.start-liste li { display: flex; gap: var(--sp-3); align-items: flex-start; padding: var(--sp-3); border-radius: 12px; background: var(--surface-2); border: 1px solid var(--border); }
.start-liste li > svg { width: 22px; height: 22px; color: var(--primary); flex: none; margin-top: var(--sp-0); }
.start-liste div { display: grid; gap: var(--sp-0); }
.start-liste span { font-size: var(--fs-m); color: var(--text-2); }
.start-liste a { font-weight: 650; font-size: var(--fs-m); margin-top: var(--sp-0); }

/* Funktionen & Pakete (Plattform-Verwaltung) */
.paket-wahl { display: grid; gap: var(--sp-2); grid-template-columns: repeat(auto-fit, minmax(min(100%, 150px), 1fr)); }
.paket { position: relative; cursor: pointer; }
.paket input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.paket span { display: grid; gap: var(--sp-0); height: 100%; padding: var(--sp-3) var(--sp-3); border-radius: 12px; border: 1.5px solid var(--border-strong); background: var(--surface); }
.paket strong { font-size: var(--fs-basis); }
.paket small { font-size: var(--fs-s); color: var(--text-3); }
.paket input:checked + span { border-color: var(--primary); background: var(--primary-soft); box-shadow: inset 0 0 0 1px var(--primary); }
.paket input:focus-visible + span { outline: 2px solid var(--primary); outline-offset: 2px; }
.modul-liste { display: grid; gap: var(--sp-2); }
@media (min-width: 760px) { .modul-liste { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.modul { display: flex; gap: var(--sp-3); align-items: flex-start; padding: var(--sp-3) var(--sp-3); border-radius: 12px; background: var(--surface-2); border: 1px solid var(--border); cursor: pointer; }
.modul input { width: 22px; height: 22px; margin: 1px 0 0; flex: none; accent-color: var(--primary); }
.modul span { display: grid; gap: var(--sp-0); min-width: 0; }
.modul strong { font-size: var(--fs-m); }
.modul small { font-size: var(--fs-s); color: var(--text-2); }

/* ------------------------------------------------------------ Abrechnung, Sperre & Automatisierung */
.plattform-kacheln { display: grid; gap: var(--sp-3); grid-template-columns: repeat(auto-fit, minmax(min(100%, 170px), 1fr)); margin: 0; }
.plattform-kacheln > div { background: var(--surface); border-radius: var(--radius); box-shadow: var(--shadow); padding: var(--sp-3) var(--sp-4); display: grid; gap: 1px; border-top: 3px solid transparent; min-width: 0; }
.plattform-kacheln dt { font-size: var(--fs-s); color: var(--text-3); font-weight: 600; }
.plattform-kacheln dd { margin: 0; font-size: var(--fs-xl); font-weight: 800; font-variant-numeric: tabular-nums; line-height: 1.2; overflow-wrap: anywhere; }
.plattform-kacheln span { font-size: var(--fs-s); color: var(--text-3); }
.plattform-kacheln .ok { border-top-color: var(--ok-strong); }
.plattform-kacheln .warn { border-top-color: var(--warn); }
.plattform-kacheln .warn dd { color: var(--warn); }
.plattform-kacheln .fehler { border-top-color: var(--danger); }
.plattform-kacheln .fehler dd { color: var(--danger); }

.bk-status { display: inline-flex; align-items: center; gap: var(--sp-1); }
.bk-status svg { width: 13px; height: 13px; }
.bk-status.gesperrt { background: var(--surface); color: var(--danger); }
.bk-status.offen { background: var(--warn-soft); color: var(--warn-strong); }
.bk-chef.bk-ok svg { color: var(--ok); }
.bk-chef.bk-warn, .bk-chef.bk-warn svg { color: var(--warn); font-weight: 600; }
.bk-chef.bk-fehler, .bk-chef.bk-fehler svg { color: var(--danger); font-weight: 600; }

.zustand {
  display: inline-flex; align-items: center; gap: var(--sp-1); flex: none; font-size: var(--fs-s); font-weight: 700; border-radius: 999px;
  padding: var(--sp-1) var(--sp-3); background: var(--surface-3); color: var(--text-2); white-space: nowrap;
}
.zustand small { font-weight: 500; }
.zustand.ok { background: var(--ok-soft); color: var(--ok); }
.zustand.info { background: var(--primary-soft); color: var(--primary); }
.zustand.warn { background: var(--warn-soft); color: var(--warn); }
.zustand.fehler { background: var(--danger-soft); color: var(--danger); }
.punkt-warn, .punkt-fehler { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--warn); margin-left: var(--sp-0); }
.punkt-fehler { background: var(--danger); }
.chip.aktiv .punkt-warn, .chip.aktiv .punkt-fehler { box-shadow: 0 0 0 2px var(--brand); }

.zeilen-liste { list-style: none; margin: 0; padding: 0; }
.zeilen-liste .zeile { display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap; padding: var(--sp-3) var(--sp-4); border-top: 1px solid var(--border); }
.zeilen-liste .zeile:first-child { border-top: 0; }
.zeilen-liste .zeile .grow { display: grid; gap: var(--sp-0); min-width: min(100%, 200px); }
.zeilen-liste .zeile .grow a { color: var(--text); }
.zeilen-liste .betrag { font-weight: 700; font-variant-numeric: tabular-nums; }
.zeile-aktionen { display: flex; align-items: center; gap: var(--sp-1); flex-wrap: wrap; }

.monat-wahl { display: flex; align-items: center; gap: var(--sp-2); }
.monat-wahl h2 { margin: 0; font-size: var(--fs-xl); min-width: 170px; text-align: center; }

.zahlung-vorschau { display: flex; align-items: center; gap: var(--sp-2); margin: 0; padding: var(--sp-3) var(--sp-3); border-radius: 10px; background: var(--ok-soft); font-size: var(--fs-m); }
.zahlung-vorschau svg { width: 18px; height: 18px; color: var(--ok); flex: none; }

.abr-status { display: grid; gap: var(--sp-4); border-left: 5px solid var(--border-strong); }
.abr-status.ok { border-left-color: var(--ok-strong); }
.abr-status.info { border-left-color: var(--primary); }
.abr-status.warn { border-left-color: var(--warn); }
.abr-status.fehler { border-left-color: var(--danger); }
.abr-kopf { display: flex; gap: var(--sp-3); align-items: flex-start; }
.abr-kopf h2 { margin: 0; font-size: var(--fs-l); }
.abr-kopf p { margin: var(--sp-0) 0 0; }
.abr-symbol { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; flex: none; background: var(--surface-3); color: var(--text-2); }
.abr-symbol svg { width: 22px; height: 22px; }
.abr-status.ok .abr-symbol { background: var(--ok-soft); color: var(--ok); }
.abr-status.warn .abr-symbol { background: var(--warn-soft); color: var(--warn); }
.abr-status.fehler .abr-symbol { background: var(--danger-soft); color: var(--danger); }

.postfach-karte h2 { display: flex; align-items: center; gap: var(--sp-2); }
.postfach-karte h2 svg { width: 20px; height: 20px; color: var(--primary); }
.vorlagen-raster { display: grid; gap: var(--sp-3); grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr)); }
.vorlage-karte { display: grid; gap: var(--sp-2); grid-template-rows: auto 1fr auto; padding: var(--sp-3); border-radius: 12px; background: var(--surface-2); border: 1px solid var(--border); }
.vorlage-karte strong { font-size: var(--fs-m); }
.vorlage-karte .row-wrap { margin-top: var(--sp-1); }
details.card > summary { cursor: pointer; list-style: none; display: flex; align-items: center; gap: var(--sp-2); min-height: 28px; }
details.card > summary::-webkit-details-marker { display: none; }
details.card > summary::after { content: '▸'; margin-left: auto; color: var(--text-3); transition: transform 0.15s; }
details.card[open] > summary::after { transform: rotate(90deg); }
details.card[open] > summary { margin-bottom: var(--sp-1); }
details.server { border: 1px solid var(--border); border-radius: 12px; padding: var(--sp-3) var(--sp-3); }
details.server > summary { cursor: pointer; font-weight: 600; font-size: var(--fs-m); }
details.server[open] > summary { margin-bottom: var(--sp-3); }
.server-raster { display: grid; gap: var(--sp-3); grid-template-columns: minmax(0, 1fr) 90px auto; align-items: end; margin-top: var(--sp-3); }
.server-raster .schalter { min-height: 44px; }
@media (max-width: 520px) { .server-raster { grid-template-columns: minmax(0, 1fr) 80px; } .server-raster .schalter { grid-column: 1 / -1; min-height: 32px; } }
.ereignis-wahl { border: 0; margin: 0; padding: 0; display: grid; gap: 0; }
.ereignis-wahl legend { font-weight: 600; font-size: var(--fs-m); margin-bottom: var(--sp-1); padding: 0; }
.ereignis-wahl .schalter { min-height: 38px; font-weight: 400; font-size: var(--fs-basis); }
.schritte { margin: 0; padding-left: var(--sp-6); display: grid; gap: var(--sp-2); }
.schritte code { font-size: var(--fs-s); background: var(--surface-3); padding: 1px var(--sp-1); border-radius: 5px; overflow-wrap: anywhere; }

/* Sperrseite für Betriebe mit offener Zahlung */
.sperre-karte { max-width: 460px; }
.sperre-kopf { display: flex; gap: var(--sp-4); align-items: flex-start; }
.sperre-kopf h1 { margin: 0; }
.sperre-symbol { width: 48px; height: 48px; border-radius: 14px; flex: none; display: grid; place-items: center; background: var(--danger-soft); color: var(--danger); }
.sperre-symbol svg { width: 26px; height: 26px; }
.sperre-gut { display: flex; gap: var(--sp-3); align-items: flex-start; padding: var(--sp-3) var(--sp-4); border-radius: 12px; background: var(--ok-soft); font-size: var(--fs-m); }
.sperre-gut svg { width: 20px; height: 20px; color: var(--ok); flex: none; margin-top: 1px; }
.sperre-kontakt { display: grid; gap: var(--sp-2); padding: var(--sp-3) var(--sp-4); border-radius: 12px; background: var(--surface-2); border: 1px solid var(--border); }
.sperre-kontakt .btn { white-space: normal; overflow-wrap: anywhere; }

/* Zahlungshinweis für den Chef (oben in der App) */
.zahlungs-leiste { background: var(--primary-soft); border-bottom: 1px solid var(--border); padding: var(--sp-2) var(--sp-4); font-size: var(--fs-m); }
.zahlungs-leiste.ueberfaellig { background: var(--warn-soft); }
.zl-zeile { display: flex; align-items: center; gap: var(--sp-3); }
.zl-zeile > svg { width: 18px; height: 18px; flex: none; color: var(--primary); }
.zahlungs-leiste.ueberfaellig .zl-zeile > svg { color: var(--warn); }
.zl-zeile .btn { flex: none; }
.zl-zeile .icon-btn { width: 36px; height: 36px; flex: none; }
.zahlung-details { padding: var(--sp-2) 0 var(--sp-1) var(--sp-7); display: grid; gap: var(--sp-1); }
.zahlung-details p { margin: 0; }
.bk-chef.bk-warn span, .bk-chef.bk-fehler span { white-space: normal; }
.bk-chef.bk-warn, .bk-chef.bk-fehler { align-items: flex-start; }
.bk-chef.bk-warn svg, .bk-chef.bk-fehler svg { margin-top: var(--sp-0); }
.zahlung-vorschau.offen { background: var(--warn-soft); align-items: flex-start; }
.zahlung-vorschau.offen svg { color: var(--warn); margin-top: 1px; }

/* ------------------------------------------------------------ Gewerke & Zuweisung */
.gewerk-chip {
  --g: var(--primary);
  display: inline-flex; align-items: center; gap: var(--sp-2); max-width: 100%; padding: var(--sp-1) var(--sp-2) var(--sp-1) var(--sp-2); border-radius: 999px;
  background: color-mix(in srgb, var(--g) 12%, var(--surface)); border: 1px solid color-mix(in srgb, var(--g) 35%, var(--border));
  color: var(--text); font-size: var(--fs-s); font-weight: 650; line-height: 1.3; white-space: nowrap;
}
.gewerk-chip > i { width: 8px; height: 8px; border-radius: 50%; background: var(--g); flex: none; }
.gewerk-chip .ta-zeichen { display: inline-grid; place-items: center; width: 16px; height: 16px; border-radius: 50%; background: var(--surface); color: var(--text-3); }
.gewerk-chip .ta-zeichen svg { width: 11px; height: 11px; stroke-width: 2.6; }
.gewerk-chip.ta-in_arbeit .ta-zeichen { color: var(--s-in_bearbeitung); }
.gewerk-chip.ta-erledigt .ta-zeichen { background: var(--ok); color: var(--ok-ink); }
.ta-pill { --c: var(--s-neu); }
.ta-pill.ta-in_arbeit { --c: var(--s-in_bearbeitung); }
.ta-pill.ta-erledigt { --c: var(--s-erledigt); }
.vorschlag-zeile, .gewerke-zeile { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); }
.vorschlag-zeile .vz-titel { font-size: var(--fs-s); font-weight: 700; color: var(--text-3); display: inline-flex; align-items: center; gap: var(--sp-1); }
.vorschlag-zeile svg, .vorschlag-mark svg { width: 13px; height: 13px; color: var(--accent); }
.vorschlag-zeile.ohne { font-size: var(--fs-s); color: var(--text-3); gap: var(--sp-1); flex-wrap: nowrap; align-items: flex-start; }
.vorschlag-zeile.ohne svg { flex: none; margin-top: var(--sp-0); }
.abnahme-tag { display: inline-flex; align-items: center; gap: var(--sp-1); font-size: var(--fs-s); font-weight: 700; color: var(--ok); background: var(--ok-soft); padding: var(--sp-1) var(--sp-2); border-radius: 999px; }
.abnahme-tag svg { width: 14px; height: 14px; }

/* Gewerke auswählen (Annehmen, Benutzer) */
.gewerk-wahl { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.gewerk-schalter {
  --g: var(--primary);
  position: relative; display: inline-flex; align-items: center; gap: var(--sp-2); min-height: 44px; padding: var(--sp-2) var(--sp-4) var(--sp-2) var(--sp-3); border-radius: 12px; cursor: pointer;
  border: 1.5px solid var(--border-strong); background: var(--surface); font-weight: 650; font-size: var(--fs-basis); color: var(--text);
}
.gewerk-schalter input { position: absolute; opacity: 0; pointer-events: none; }
.gewerk-schalter > i { width: 18px; height: 18px; border-radius: 6px; border: 2px solid var(--g); flex: none; display: grid; place-items: center; }
.gewerk-schalter:has(input:checked) { border-color: var(--g); background: color-mix(in srgb, var(--g) 12%, var(--surface)); }
.gewerk-schalter:has(input:checked) > i { background: var(--g); }
.gewerk-schalter:has(input:checked) > i::after { content: ""; width: 5px; height: 9px; border: solid var(--papier); border-width: 0 2.5px 2.5px 0; transform: rotate(45deg) translate(-1px, -1px); }
.gewerk-schalter:has(input:focus-visible) { outline: 3px solid color-mix(in srgb, var(--g) 45%, transparent); outline-offset: 2px; }
.vorschlag-mark { font-style: normal; font-size: var(--fs-xs); font-weight: 700; color: var(--text-3); display: inline-flex; align-items: center; gap: var(--sp-1); padding: 1px var(--sp-2); border-radius: 999px; background: var(--warn-soft); }
.btn-link { background: none; border: 0; padding: 0; color: var(--primary); font: inherit; text-decoration: underline; cursor: pointer; }

.gewerk-abschnitt { --g: var(--primary); display: grid; gap: var(--sp-3); padding: var(--sp-4); border-radius: 14px; border: 1px solid var(--border); border-left: 5px solid var(--g); background: var(--surface-2); }
.ga-kopf { display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; }
.ga-kopf > i { width: 10px; height: 10px; border-radius: 50%; background: var(--g); }
.ga-kopf strong { font-size: var(--fs-basis); }

/* Personen mit Verfügbarkeit */
.personen-liste { display: grid; gap: var(--sp-3); }
.personen-gruppe { display: grid; gap: var(--sp-2); }
.gruppen-titel { font-size: var(--fs-s); font-weight: 700; color: var(--text-3); text-transform: uppercase; letter-spacing: 0.3px; }
.gruppen-titel.warn { color: var(--warn); }
.person-zeile { display: flex; align-items: flex-start; gap: var(--sp-3); padding: var(--sp-2) var(--sp-3); border-radius: 10px; border: 1px solid var(--border); background: var(--surface); cursor: pointer; }
.person-zeile input { width: 20px; height: 20px; margin-top: 1px; accent-color: var(--primary); flex: none; }
.person-zeile .grow { display: grid; gap: var(--sp-0); min-width: 0; }
.person-zeile.belegt { border-color: color-mix(in srgb, var(--warn) 45%, var(--border)); background: var(--warn-soft); }
.person-zeile:has(input:checked) { border-color: var(--primary); box-shadow: inset 0 0 0 1px var(--primary); }
.person-info { font-size: var(--fs-s); color: var(--text-3); overflow-wrap: anywhere; }
.person-info.frei { color: var(--ok); font-weight: 600; }
.person-info.warn { color: var(--warn); font-weight: 600; display: flex; gap: var(--sp-1); align-items: flex-start; }
.person-info.warn svg { width: 15px; height: 15px; flex: none; margin-top: 1px; }
.konflikt-liste { margin: 0; padding-left: var(--sp-5); display: grid; gap: var(--sp-2); }
.konflikt-liste li > span { display: block; font-size: var(--fs-m); color: var(--text-2); }
.laden.klein { padding: var(--sp-4) 0; }
.laden.klein .spinner { width: 22px; height: 22px; }

/* Stand der Gewerke im Auftrag */
.abnahme-bereit { display: flex; gap: var(--sp-3); align-items: flex-start; padding: var(--sp-3) var(--sp-4); border-radius: 12px; background: var(--ok-soft); }
.abnahme-bereit > svg { width: 22px; height: 22px; color: var(--ok); flex: none; margin-top: 1px; }
.abnahme-bereit > div { display: grid; gap: var(--sp-0); font-size: var(--fs-m); }
.abnahme-bereit.fertig { margin-bottom: 0; }
.fortschritt { display: grid; gap: var(--sp-2); }
.fb-balken { height: 8px; border-radius: 99px; background: var(--surface-3); overflow: hidden; }
.fb-balken i { display: block; height: 100%; background: var(--ok-strong); border-radius: 99px; transition: width 0.3s; }
.ta-liste { display: grid; gap: var(--sp-3); }
.ta-eintrag { --g: var(--primary); display: grid; gap: var(--sp-2); padding: var(--sp-3) var(--sp-4); border-radius: 12px; border: 1px solid var(--border); border-left: 5px solid var(--g); background: var(--surface-2); }
.ta-kopf { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2); flex-wrap: wrap; }
.ta-fakten { display: grid; gap: var(--sp-1); font-size: var(--fs-m); color: var(--text-2); }
.ta-fakten > span { display: flex; gap: var(--sp-2); align-items: flex-start; overflow-wrap: anywhere; }
.ta-fakten svg { width: 16px; height: 16px; flex: none; margin-top: var(--sp-0); color: var(--text-3); }
.ta-knoepfe { gap: var(--sp-2); }
.ta-status-wahl { min-height: 36px; padding: var(--sp-1) var(--sp-7) var(--sp-1) var(--sp-3); border-radius: 10px; font-weight: 650; font-size: var(--fs-m); border: 1.5px solid var(--border-strong); background-color: var(--surface); color: var(--text); }
.ta-status-wahl.ta-in_arbeit { border-color: var(--s-in_bearbeitung); }
.ta-status-wahl.ta-erledigt { border-color: var(--ok-strong); }
.doppel svg { width: 14px; height: 14px; color: var(--warn); vertical-align: -2px; }
.warn-text { color: var(--warn); font-weight: 600; }


/* Aufgabe (Bereichsleiter / Mitarbeiter) */
.aufgabe-karte { border-top: 4px solid var(--g); display: grid; gap: var(--sp-3); }
.aufgabe-karte .card-kopf { margin: 0; justify-content: space-between; }
.ta-schritte { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-2); }
.ta-schritte span { font-size: var(--fs-s); font-weight: 650; color: var(--text-3); text-align: center; padding-top: var(--sp-2); border-top: 4px solid var(--surface-3); }
.ta-schritte span.fertig { border-top-color: var(--ok-strong); color: var(--text-2); }
.ta-schritte span.jetzt { color: var(--text); }

.aufgaben-gruppe { display: grid; gap: var(--sp-3); margin-bottom: var(--sp-5); }
.gruppe-titel { font-size: var(--fs-m); font-weight: 750; color: var(--text-2); text-transform: uppercase; letter-spacing: 0.4px; display: flex; align-items: center; gap: var(--sp-2); }
.gruppe-titel .n { font-size: var(--fs-xs); background: var(--surface-3); color: var(--text-2); border-radius: 99px; padding: 1px var(--sp-2); }
.aufgaben-gruppe.warn .gruppe-titel { color: var(--warn); }
.aufgaben-gruppe.ok .gruppe-titel { color: var(--ok); }
.aufgaben-liste { display: grid; gap: var(--sp-3); }
@media (min-width: 760px) { .aufgaben-liste { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.aufgabe {
  --g: var(--primary);
  display: grid; background: var(--surface); border: 1px solid var(--border); border-left: 5px solid var(--g); border-radius: var(--radius); box-shadow: var(--shadow); min-width: 0;
}
.aufgabe.ta-erledigt { opacity: 0.85; }
.aufgabe-link { display: grid; gap: var(--sp-1); padding: var(--sp-3) var(--sp-4) var(--sp-3); color: inherit; text-decoration: none; min-width: 0; }
.aufgabe-link:hover { text-decoration: none; }
.aufgabe-link:hover .aufgabe-kunde { text-decoration: underline; }
.aufgabe-kopf { display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; margin-bottom: var(--sp-0); }
.aufgabe-kopf .ta-pill { margin-left: auto; }
.aufgabe-kunde { font-size: var(--fs-basis); }
.aufgabe-betreff { color: var(--text-2); font-size: var(--fs-m); overflow-wrap: anywhere; }
.aufgabe-fakt { display: flex; gap: var(--sp-2); align-items: flex-start; font-size: var(--fs-m); color: var(--text-3); overflow-wrap: anywhere; }
.aufgabe-fakt svg { width: 15px; height: 15px; flex: none; margin-top: var(--sp-0); }
.aufgabe .abnahme-tag { justify-self: start; margin-top: var(--sp-1); }
.aufgabe-knoepfe { display: flex; flex-wrap: wrap; gap: var(--sp-2); padding: 0 var(--sp-3) var(--sp-3); }
.aufgabe-knoepfe .btn:last-child { margin-left: auto; }

.push-hinweis { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-3) var(--sp-3); border-radius: 12px; background: var(--primary-soft); margin-bottom: var(--sp-4); font-size: var(--fs-m); }
.push-hinweis > svg { width: 20px; height: 20px; color: var(--primary); flex: none; }
.push-hinweis .icon-btn { width: 34px; height: 34px; }
.push-karte h2 { display: flex; align-items: center; gap: var(--sp-2); }
.push-karte h2 svg { width: 18px; height: 18px; color: var(--primary); }
.push-karte { display: grid; gap: var(--sp-3); }

/* Bereich: Kennzahlen, Reiter, Wochenplan */
.kpi-reihe { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-3); margin-bottom: var(--sp-4); }
@media (min-width: 700px) { .kpi-reihe { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.kpi-reihe .kpi { --c: var(--g, var(--primary)); }
.kpi-reihe .kpi span { font-size: var(--fs-s); font-weight: 600; color: var(--text-3); }
.kpi-reihe .kpi strong { font-size: var(--fs-xl); font-weight: 800; font-variant-numeric: tabular-nums; }
.kpi-reihe .kpi.warn { --c: var(--warn); }
.kpi-reihe .kpi.ok { --c: var(--ok-strong); }
.bereich-reiter { max-width: 520px; margin-bottom: var(--sp-4); }
.bereich-reiter button { display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2); }
.bereich-reiter svg { width: 17px; height: 17px; }
.bereich-reiter .kurz { display: none; }
@media (max-width: 559px) { .bereich-reiter .lang { display: none; } .bereich-reiter .kurz { display: inline; } }
.woche-nav { display: flex; align-items: center; gap: var(--sp-2); margin-bottom: var(--sp-3); flex-wrap: wrap; }
.woche-nav h2 { font-size: var(--fs-basis); min-width: 0; }
.plan-rahmen { overflow-x: auto; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow); margin-bottom: var(--sp-2); }
.plan { border-collapse: separate; border-spacing: 0; width: 100%; min-width: 760px; table-layout: fixed; }
.plan th, .plan td { border-bottom: 1px solid var(--border); border-right: 1px solid var(--border); padding: var(--sp-2); vertical-align: top; text-align: left; }
.plan thead th { font-size: var(--fs-s); font-weight: 650; color: var(--text-3); background: var(--surface-2); position: sticky; top: 0; }
.plan thead th b { color: var(--text); }
.plan th[scope=row], .plan thead th:first-child { position: sticky; left: 0; z-index: 1; background: var(--surface); width: 150px; }
.plan thead th:first-child { background: var(--surface-2); z-index: 2; }
.plan th[scope=row] { display: table-cell; }
.plan th[scope=row] strong { display: block; font-size: var(--fs-m); }
.plan th[scope=row] .small { display: block; font-weight: 400; }
.plan td.heute, .plan th.heute { background: color-mix(in srgb, var(--primary) 7%, var(--surface)); }
.plan td.we { background: var(--surface-2); }
.plan .frei { color: var(--ok); font-size: var(--fs-xs); font-weight: 600; opacity: 0.8; }
.einsatz {
  display: grid; gap: 1px; padding: var(--sp-1) var(--sp-2); border-radius: 8px; margin-bottom: var(--sp-1); text-decoration: none; color: var(--text); font-size: var(--fs-xs); line-height: 1.25;
  background: color-mix(in srgb, var(--g, var(--primary)) 14%, var(--surface)); border-left: 3px solid var(--g, var(--primary)); overflow-wrap: anywhere;
}
.einsatz b { font-variant-numeric: tabular-nums; }
.einsatz small { color: var(--text-3); }
.einsatz.ta-erledigt { opacity: 0.6; }
.einsatz.doppelt { border-left-color: var(--warn); box-shadow: inset 0 0 0 1px var(--warn); }
.einsatz.doppelt b::after { content: " ⚠"; color: var(--warn); }
.einsatz.fremd { background: var(--surface-3); border-left-color: var(--text-3); color: var(--text-2); }
td.voll .einsatz:not(:last-child) { margin-bottom: var(--sp-1); }

/* Mitteilungen */
.mitteilungen { list-style: none; margin: 0; padding: 0; }
.mitteilungen li + li { border-top: 1px solid var(--border); }
.mitteilungen a { display: flex; gap: var(--sp-3); align-items: flex-start; padding: var(--sp-3) var(--sp-4); color: inherit; text-decoration: none; }
.mitteilungen a:hover { background: var(--surface-2); }
.mitteilungen .grow { display: grid; gap: var(--sp-0); min-width: 0; }
.mitteilungen .pre { white-space: pre-line; }
.mt-punkt { width: 9px; height: 9px; border-radius: 50%; margin-top: var(--sp-2); flex: none; background: transparent; }
.mitteilungen li.neu .mt-punkt { background: var(--primary); }
.mitteilungen li.neu strong { font-weight: 750; }
.mitteilungen time { flex: none; white-space: nowrap; }

/* Gewerke & Team (Geschäftsführung) */
.gewerk-raster { display: grid; gap: var(--sp-4); margin-bottom: var(--sp-4); }
@media (min-width: 760px) { .gewerk-raster { grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); } }
.gewerk-karte { --g: var(--primary); display: grid; gap: var(--sp-3); border-top: 5px solid var(--g); align-content: start; }
.gk-kopf { display: flex; align-items: center; gap: var(--sp-3); }
.gk-kopf > i { width: 14px; height: 14px; border-radius: 50%; background: var(--g); flex: none; }
.gk-kopf h2 { font-size: var(--fs-l); flex: 1; min-width: 0; }
.gk-zahlen { display: flex; gap: var(--sp-4); flex-wrap: wrap; font-size: var(--fs-m); color: var(--text-2); }
.gk-team { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.person-chip { font-size: var(--fs-s); padding: var(--sp-1) var(--sp-2); border-radius: 999px; background: var(--surface-3); color: var(--text-2); font-weight: 600; }
.person-chip.leitung { background: color-mix(in srgb, var(--g) 15%, var(--surface)); color: var(--text); }
.person-chip em { font-style: normal; font-size: var(--fs-xs); color: var(--text-3); }
.gk-woerter { display: flex; gap: var(--sp-1); align-items: flex-start; overflow-wrap: anywhere; }
.gk-woerter svg { width: 14px; height: 14px; flex: none; margin-top: var(--sp-0); color: var(--accent); }
.gewerk-app-vorschau { display: flex; align-items: center; gap: var(--sp-3); }
.gewerk-app-vorschau img { border-radius: 16px; box-shadow: var(--shadow); }
.gewerk-band { --g: var(--primary); display: flex; align-items: center; gap: var(--sp-2); padding: var(--sp-2) var(--sp-3); border-radius: 10px; font-weight: 700; color: var(--text); background: color-mix(in srgb, var(--g) 16%, var(--surface)); border-left: 4px solid var(--g); }
.gewerk-band svg { width: 18px; height: 18px; }

/* Kalender: Einsätze der Gewerke */
.kal-chip.gewerk { --c: var(--g); }
.kal-eintrag.gewerk { border-left: 4px solid var(--g, var(--primary)); }
.kw-termin.gewerk { border-left: 3px solid var(--g, var(--primary)); }
.kal-gewerk { display: flex; align-items: center; gap: var(--sp-2); }
.kal-gewerk i { width: 8px; height: 8px; border-radius: 50%; background: var(--g, var(--primary)); flex: none; }

/* ============================================================ Hilfsklassen
   Statt einzelner style="…"-Angaben in den Ansichten – Werte immer aus den zentralen Stufen. */
.m-0 { margin: 0; }
.p-0 { padding: 0; }
.mt-halb { margin-top: var(--sp-0); }
.mt-1 { margin-top: var(--sp-1); }
.mt-2 { margin-top: var(--sp-2); }
.mt-3 { margin-top: var(--sp-3); }
.mt-4 { margin-top: var(--sp-4); }
.mb-2 { margin-bottom: var(--sp-2); }
.mb-3 { margin-bottom: var(--sp-3); }
.ml-auto { margin-left: auto; }
.gap-2 { gap: var(--sp-2); }
.gap-3 { gap: var(--sp-3); }
.gap-4 { gap: var(--sp-4); }
.innen-oben { padding: var(--sp-4) var(--sp-4) 0; }      /* Kopf einer Karte ohne Innenabstand (.card-flach) */
.innen-unten { padding: 0 var(--sp-4) var(--sp-4); }
.innen-y { padding-top: var(--sp-2); padding-bottom: var(--sp-2); }
.bis-kante { margin: 0 calc(-1 * var(--sp-4)) calc(-1 * var(--sp-4)); }  /* Liste bis an den Kartenrand */
.links { justify-self: start; }
.selbst-unten { align-self: end; }
.mitte-y { align-items: center; }
.oben-y { align-items: flex-start; }
.zwischen { justify-content: space-between; }
.mitte-x { justify-content: center; }
.start-x { justify-content: flex-start; }
.ende-x { justify-content: flex-end; }
.umbruch { flex-wrap: wrap; }
.ganze-zeile { grid-column: 1 / -1; }
.text-mitte { text-align: center; }
.w-voll { width: 100%; }
.unsichtbar { visibility: hidden; }
.zeiger { cursor: pointer; }
.fett { font-weight: 600; }
.fs-l { font-size: var(--fs-l); }
.fs-xl { font-size: var(--fs-xl); }
.titel-l { font-size: var(--fs-l); font-weight: 700; }
.titel-xl { font-size: var(--fs-xl); font-weight: 800; }
.text-primaer { color: var(--primary); }
.link-still, .link-still:hover { text-decoration: none; color: inherit; }
.ohne-unterstrich, .ohne-unterstrich:hover { text-decoration: none; }
.ohne-schatten { box-shadow: none; }
.trenner { border: 0; border-top: 1px solid var(--border); margin: var(--sp-1) 0; }
.umrandet { border: 1px solid var(--border); border-radius: 12px; }

/* Seitenbreiten */
.content.breite-xs, .breite-xs { max-width: 420px; }
.content.breite-s, .breite-s { max-width: 760px; }
.content.breite-m, .breite-m { max-width: 1000px; }
.content.breite-l, .breite-l { max-width: 1200px; }
.content.breite-xl, .breite-xl { max-width: 1500px; }

/* Einzelne Bausteine, die vorher Einzelwerte hatten */
.avatar.gross { width: 52px; height: 52px; font-size: var(--fs-l); }
.badge.punkt { min-width: 10px; height: 10px; padding: 0; }
.logo-gross { max-height: 60px; max-width: 200px; object-fit: contain; }
.firmenname { font-size: var(--fs-xl); font-weight: 800; }
.eintrag.als-knopf { width: 100%; background: none; border: 0; border-bottom: 1px solid var(--border); text-align: left; cursor: pointer; font: inherit; }
.eintrag.inaktiv { color: var(--text-3) !important; }
.eintrag.inaktiv .avatar { filter: grayscale(1); }
.eintrag.markiert { box-shadow: inset 4px 0 0 var(--ueberfaellig); }
.menue .schalter { padding: var(--sp-1) var(--sp-4); border-bottom: 1px solid var(--border); }
.balken i.voll { flex: 1; background: var(--primary); }
/* Abnahmeprotokoll zum Drucken */
.druck-kopf { display: flex; justify-content: space-between; gap: var(--sp-4); flex-wrap: wrap; border-bottom: 2px solid var(--brand); padding-bottom: var(--sp-3); }
.druck-absender { font-size: var(--fs-s); text-align: right; line-height: 1.5; color: var(--papier-text-2); }
.druck-nr { color: var(--papier-text-2); }
.druck-pruefsumme { font-size: var(--fs-xs); color: var(--papier-text-2); overflow-wrap: anywhere; }
.laden.vollbild { min-height: 100dvh; }

/* ------------------------------------------------------------ Kalender: Termine verschieben */
.kal-eintrag { flex-wrap: wrap; }
.kal-eintrag > a.grow { flex: 1 1 220px; }
.kal-aktionen { display: flex; align-items: center; gap: var(--sp-1); margin-left: auto; }
.kal-tipp { display: flex; align-items: center; gap: var(--sp-2); margin: 0 0 var(--sp-2); }
.kal-tipp svg { width: 16px; height: 16px; flex: none; }
[data-ziehbar] { cursor: grab; user-select: none; -webkit-user-drag: none; }
body.zieht, body.zieht * { cursor: grabbing !important; }
.wird-gezogen { opacity: 0.45; }
.kal-geist {
  position: absolute; left: 2px; right: 2px; z-index: 6; pointer-events: none;
  display: grid; place-items: center; padding: var(--sp-1); border-radius: 8px;
  border: 2px dashed var(--primary); background: color-mix(in srgb, var(--primary) 14%, var(--surface));
  color: var(--text); font-size: var(--fs-xs); font-weight: 700; text-align: center;
}
.kal-geist.monat { position: static; margin-top: var(--sp-1); }
.kal-zelle.ablage-ziel { background: var(--primary-soft); box-shadow: inset 0 0 0 2px var(--primary); }
.verschieben .bisher { display: grid; gap: var(--sp-0); padding: var(--sp-3) var(--sp-4); border-radius: var(--radius-sm); background: var(--surface-2); border: 1px solid var(--border); }
.verschieben .neu-text:empty { display: none; }
.verschieben .neu-text { display: grid; gap: var(--sp-0); padding: var(--sp-3) var(--sp-4); border-radius: var(--radius-sm); background: var(--primary-soft); }
.verschieben .nebentext svg { width: 15px; height: 15px; vertical-align: -3px; }

/* ============================================================ Abnahmeprotokoll: Assistent, Zusammenfassung, Ansicht
   Nur zentrale Werte (Schrift, Abstände, Farben) – dadurch stimmen Kontrast und dunkler Modus automatisch. */
.assistent { gap: var(--sp-5); }
.assistent .hilfe, .protokoll-ansicht .hilfe { font-size: var(--fs-s); color: var(--text-3); font-weight: 400; }
.schritt-inhalt { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sp-5); min-width: 0; }
.schritt-titel { font-size: var(--fs-xl); }
.pflicht { color: var(--danger); }
.info-zeile { display: flex; align-items: center; gap: var(--sp-2); font-size: var(--fs-m); color: var(--text-2); }
.info-zeile svg { width: 18px; height: 18px; color: var(--text-3); }

/* Fortschritt: „Schritt x von 7“ + anklickbare, bereits besuchte Schritte */
.schritt-leiste { display: grid; gap: var(--sp-2); }
.leiste-text { font-size: var(--fs-m); font-weight: 600; color: var(--text-2); }
.leiste-text:focus { outline: none; }
.leiste-schritte { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: var(--sp-1); }
.leiste-schritte li { min-width: 0; }
.leiste-schritte button {
  width: 100%; display: grid; justify-items: center; gap: var(--sp-1); padding: 0 0 var(--sp-1); border: 0; background: none;
  color: var(--text-3); font-size: var(--fs-xs); font-weight: 600; cursor: pointer; border-radius: var(--radius-sm);
}
.leiste-schritte button::before { content: ""; width: 100%; height: 5px; border-radius: 99px; background: var(--surface-3); margin-bottom: var(--sp-1); }
.leiste-schritte button:disabled { cursor: default; }
.leiste-schritte .fs-nr {
  width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center;
  border: 2px solid var(--border-strong); background: var(--surface); color: var(--text-2); font-size: var(--fs-s); font-weight: 800;
}
.leiste-schritte .fs-nr svg { width: 16px; height: 16px; stroke-width: 3; }
.leiste-schritte .fs-text { display: none; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.leiste-schritte .besucht button, .leiste-schritte .jetzt button { color: var(--text-2); }
.leiste-schritte .besucht button::before, .leiste-schritte .jetzt button::before { background: var(--primary); }
.leiste-schritte .besucht .fs-nr { border-color: var(--primary); background: var(--primary-soft); color: var(--primary); }
.leiste-schritte .jetzt .fs-nr { border-color: var(--primary); background: var(--primary); color: var(--primary-ink); }
.leiste-schritte .jetzt button { color: var(--text); font-weight: 800; }
.leiste-schritte .besucht button:hover .fs-text { text-decoration: underline; }
.leiste-schritte button:focus-visible { outline: 3px solid color-mix(in srgb, var(--primary) 45%, transparent); outline-offset: 2px; }
@media (min-width: 640px) { .leiste-schritte .fs-text { display: block; } }

/* Fester Fuß mit Zurück / Weiter / Einreichen */
.assistent-fuss {
  position: sticky; bottom: calc(var(--tabbar-h) + env(safe-area-inset-bottom)); z-index: 20;
  display: grid; gap: var(--sp-2); margin: 0 calc(-1 * var(--sp-4)); padding: var(--sp-3) var(--sp-4);
  background: var(--surface); border-top: 1px solid var(--border); box-shadow: 0 -8px 20px -16px var(--abdunkeln);
}
.fuss-status { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--sp-1) var(--sp-3); font-size: var(--fs-s); color: var(--text-3); }
.fuss-status .fehlertext { font-size: var(--fs-s); }
.fuss-knoepfe { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-3); }
.fuss-knoepfe > :only-child { grid-column: 1 / -1; }
.einreichen-hinweis { font-size: var(--fs-s); color: var(--text-2); text-align: center; }
@media (min-width: 900px) {
  .assistent-fuss { bottom: 0; margin: 0; border: 1px solid var(--border); border-bottom: 0; border-radius: var(--radius) var(--radius) 0 0; }
}
.entwurf-hinweis {
  display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-2) var(--sp-2) var(--sp-2) var(--sp-4);
  border-radius: var(--radius-sm); background: var(--primary-soft); color: var(--text); font-size: var(--fs-m);
}
.entwurf-hinweis > svg { color: var(--primary); }

/* Fehlermeldung direkt unter dem Feld */
.feld-fehler { display: flex; align-items: flex-start; gap: var(--sp-2); color: var(--danger); font-size: var(--fs-m); font-weight: 600; }
.feld-fehler::before {
  content: "!"; flex: none; width: 18px; height: 18px; margin-top: var(--sp-0); border-radius: 50%; display: grid; place-items: center;
  background: var(--danger); color: var(--danger-ink); font-size: var(--fs-xs); font-weight: 800;
}
.feld.mit-fehler input:not([type=checkbox]):not([type=radio]):not([type=file]), .feld.mit-fehler select, .feld.mit-fehler textarea {
  border-color: var(--danger); box-shadow: 0 0 0 1px var(--danger);
}
.feld.mit-fehler .pad-rahmen { border-color: var(--danger); border-style: solid; }
.feld.mit-fehler .wahl-karte, .feld.mit-fehler .segment { box-shadow: 0 0 0 1px var(--danger); }

/* Personen suchen: ausgewählte als Chips, Vorschläge darunter */
.chip-liste { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.chip-liste:empty { display: none; }
.person-chip-wahl {
  display: inline-flex; align-items: center; gap: var(--sp-1); min-height: 38px; padding: 0 var(--sp-1) 0 var(--sp-3);
  border-radius: 999px; background: var(--primary-soft); color: var(--text); font-weight: 600; font-size: var(--fs-m);
}
.person-chip-wahl small { color: var(--text-2); font-weight: 500; font-size: var(--fs-xs); }
.chip-weg { width: 32px; height: 32px; display: grid; place-items: center; border: 0; border-radius: 50%; background: transparent; color: var(--text-2); cursor: pointer; }
.chip-weg:hover { background: var(--surface); color: var(--danger); }
.chip-weg svg { width: 16px; height: 16px; }
.suchfeld { position: relative; }
.suchfeld > svg { position: absolute; left: 13px; top: 23px; transform: translateY(-50%); color: var(--text-3); pointer-events: none; }
.suchfeld input { padding-left: calc(var(--sp-7) + var(--sp-3)) !important; }
.vorschlag-liste {
  position: absolute; left: 0; right: 0; top: calc(100% + var(--sp-1)); z-index: 25; list-style: none; margin: 0; padding: var(--sp-1);
  max-height: 320px; overflow-y: auto; background: var(--surface); border: 1px solid var(--border-strong); border-radius: var(--radius-sm); box-shadow: var(--shadow-lg);
}
.vorschlag-liste li { display: grid; gap: var(--sp-0); padding: var(--sp-2) var(--sp-3); border-radius: 8px; cursor: pointer; font-size: var(--fs-m); overflow-wrap: anywhere; }
.vorschlag-liste li span { font-size: var(--fs-s); color: var(--text-2); }
.vorschlag-liste li:hover, .vorschlag-liste li.aktiv { background: var(--primary-soft); }
.vorschlag-liste li.leer-eintrag { cursor: default; color: var(--text-2); }
.vorschlag-liste li.leer-eintrag:hover { background: none; }

/* Auswahlkarten (Adresse) */
.adress-wahl { display: grid; gap: var(--sp-2); }
.wahl-karte {
  display: flex; align-items: flex-start; gap: var(--sp-3); padding: var(--sp-3) var(--sp-4); cursor: pointer;
  border: 1.5px solid var(--border-strong); border-radius: 12px; background: var(--surface);
}
.wahl-karte input { width: 20px; height: 20px; margin: var(--sp-0) 0 0; accent-color: var(--primary); flex: none; }
.wahl-karte > span { display: grid; gap: var(--sp-0); min-width: 0; overflow-wrap: anywhere; }
.wahl-karte small { font-size: var(--fs-s); color: var(--text-3); }
.wahl-karte:has(input:checked) { border-color: var(--primary); background: var(--primary-soft); }
.wahl-karte:has(input:checked) small { color: var(--text-2); }
.wahl-karte:has(input:focus-visible) { outline: 3px solid color-mix(in srgb, var(--primary) 45%, transparent); outline-offset: 2px; }

/* Beschreibung: Punkte, sortierbar */
.punkte-liste { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-3); }
.punkte-liste .punkt { padding: var(--sp-3); border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow); }
.punkte-liste .punkt.wird-sortiert { position: relative; z-index: 5; border-color: var(--primary); box-shadow: var(--shadow-lg); }
.punkt-kopf { display: flex; align-items: center; gap: var(--sp-2); }
.feld .punkt-titel { flex: 1; font-size: var(--fs-m); font-weight: 700; color: var(--text-2); }
.punkt-knoepfe { display: flex; gap: var(--sp-1); }
.punkte-liste .griff {
  width: 44px; height: 44px; flex: none; display: grid; place-items: center; border: 0; border-radius: 10px;
  background: var(--surface-2); color: var(--text-2); cursor: grab; touch-action: none;
}
.punkte-liste .griff:active { cursor: grabbing; }
.punkt-knoepfe .icon-btn:disabled { opacity: 0.4; cursor: default; background: none; }
.icon-btn.gefahr-symbol { color: var(--danger); }
.icon-btn.gefahr-symbol:hover:not(:disabled) { background: var(--danger-soft); }
.zaehler-zeile { display: flex; justify-content: flex-end; }
.zaehler { font-size: var(--fs-xs); color: var(--text-3); font-variant-numeric: tabular-nums; }
.zaehler.zu-viel { color: var(--danger); font-weight: 700; }

/* Rechtschreibung: Vorschläge zum Antippen */
.rs-ausgabe { display: grid; gap: var(--sp-2); padding: var(--sp-3); border-radius: var(--radius-sm); background: var(--warn-soft); }
.rs-ausgabe:empty { display: none; }
.rs-titel { display: flex; align-items: center; gap: var(--sp-2); font-size: var(--fs-s); font-weight: 700; color: var(--text); }
.rs-titel svg { width: 16px; height: 16px; }
.rs-liste { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-3); }
.rs-liste li { display: grid; gap: var(--sp-1); font-size: var(--fs-m); }
.rs-wort { font-weight: 700; color: var(--text); text-decoration: underline wavy var(--danger); text-underline-offset: 3px; }
.rs-meldung { font-size: var(--fs-s); color: var(--text-2); }
.rs-vorschlaege { display: flex; flex-wrap: wrap; gap: var(--sp-2); }

/* Leistungsdaten & Material: Blöcke */
.einsatz-liste { display: grid; gap: var(--sp-4); }
.einsatz-block {
  display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sp-4); padding: var(--sp-4); min-width: 0;
  border: 1px solid var(--border); border-left: 4px solid var(--primary); border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow);
}
.einsatz-kopf { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2); }
.einsatz-kopf h3 { font-size: var(--fs-basis); }
.drei-spalten { display: grid; gap: var(--sp-4); grid-template-columns: repeat(2, minmax(0, 1fr)); }
.drei-spalten > .breit-handy { grid-column: 1 / -1; display: grid; min-width: 0; }
@media (min-width: 640px) { .drei-spalten { grid-template-columns: repeat(3, minmax(0, 1fr)); } .drei-spalten > .breit-handy { grid-column: auto; } }
.assistent .feld input { min-width: 0; }
.assistent .btn-link { text-align: left; }
.chip-wahl { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.chip-schalter { position: relative; display: inline-flex; }
.chip-schalter input { position: absolute; opacity: 0; pointer-events: none; }
.chip-schalter span {
  display: inline-flex; align-items: center; gap: var(--sp-1); min-height: 40px; padding: 0 var(--sp-4); border-radius: 999px; cursor: pointer;
  border: 1.5px solid var(--border-strong); background: var(--surface); color: var(--text-2); font-weight: 600; font-size: var(--fs-m);
}
.chip-schalter input:checked + span { background: var(--chip-aktiv-bg); border-color: var(--chip-aktiv-bg); color: var(--chip-aktiv-ink); }
.chip-schalter input:checked + span::before { content: "✓"; font-weight: 800; }
.chip-schalter input:focus-visible + span { outline: 3px solid color-mix(in srgb, var(--primary) 45%, transparent); outline-offset: 2px; }
.summen-zeile, .zf-summe {
  display: flex; justify-content: space-between; align-items: baseline; flex-wrap: wrap; gap: var(--sp-1) var(--sp-3);
  padding: var(--sp-3) var(--sp-4); border-radius: var(--radius-sm); background: var(--primary-soft); color: var(--text); font-size: var(--fs-m); font-weight: 600;
}
.summen-zeile strong, .zf-summe strong { font-size: var(--fs-l); font-variant-numeric: tabular-nums; }

/* Fahrtkosten */
.einheit-feld { position: relative; max-width: 240px; }
.feld .einheit-feld input:not([type=checkbox]):not([type=radio]):not([type=file]) { padding-right: calc(var(--sp-7) + var(--sp-3)); }
.einheit-feld span { position: absolute; right: var(--sp-4); top: 50%; transform: translateY(-50%); color: var(--text-2); font-weight: 600; pointer-events: none; }
.schnellwahl { display: flex; flex-wrap: wrap; gap: var(--sp-2); }

/* Material: Ja / Nein */
.segment.ja-nein { max-width: 320px; }
.segment.ja-nein label { flex: 1; position: relative; }
.segment.ja-nein input { position: absolute; opacity: 0; pointer-events: none; }
.segment.ja-nein span { display: grid; place-items: center; min-height: 44px; border-radius: 9px; font-weight: 700; font-size: var(--fs-basis); color: var(--text-2); cursor: pointer; }
.segment.ja-nein input:checked + span { background: var(--surface); color: var(--text); box-shadow: var(--shadow), inset 0 0 0 2px var(--primary); }
.segment.ja-nein input:focus-visible + span { outline: 3px solid color-mix(in srgb, var(--primary) 45%, transparent); outline-offset: 2px; }
.pos-foto { display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap; }
.pos-foto img { width: 72px; height: 72px; object-fit: cover; border-radius: var(--radius-sm); border: 1px solid var(--border); }

/* Fotos */
.foto-liste-bearbeiten { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-3); grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
.foto-liste-bearbeiten li { display: grid; gap: var(--sp-2); align-content: start; padding: var(--sp-3); border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow); }
.foto-liste-bearbeiten img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--radius-sm); background: var(--surface-3); }
.foto-liste-bearbeiten .btn { justify-self: start; }

/* Zusammenfassung: Beschriftung über dem Wert (Handy), nebeneinander ab Tablet – keine gequetschte Tabelle */
.zusammenfassung { display: grid; gap: var(--sp-3); }
.zf-abschnitt { display: grid; gap: var(--sp-3); padding: var(--sp-4); min-width: 0; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow); }
.zf-kopf { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2); padding-bottom: var(--sp-2); border-bottom: 1px solid var(--border); min-height: 44px; }
.zf-kopf h3 { display: flex; align-items: center; gap: var(--sp-2); font-size: var(--fs-basis); }
.zf-kopf h3 > svg { color: var(--text-3); }
.zf-nr { width: 26px; height: 26px; flex: none; border-radius: 50%; display: grid; place-items: center; background: var(--primary-soft); color: var(--primary); font-size: var(--fs-s); font-weight: 800; }
.bw-liste { margin: 0; display: grid; gap: var(--sp-3); }
.bw-liste .bw { display: grid; gap: var(--sp-0); min-width: 0; }
.bw-liste dt { font-size: var(--fs-s); font-weight: 600; color: var(--text-3); }
.bw-liste dd { margin: 0; overflow-wrap: anywhere; }
@media (min-width: 640px) { .bw-liste .bw { grid-template-columns: 170px minmax(0, 1fr); gap: var(--sp-4); align-items: baseline; } }
.zf-zeile { display: block; }
.zf-punkte { margin: 0; padding-left: var(--sp-5); display: grid; gap: var(--sp-2); }
.zf-einsatz { display: grid; gap: var(--sp-2); padding-bottom: var(--sp-3); border-bottom: 1px dashed var(--border-strong); }
.zf-untertitel { font-size: var(--fs-m); font-weight: 700; color: var(--text-2); }
.zf-material { list-style: none; margin: 0; padding: 0; display: grid; }
.zf-material li { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-2) 0; border-bottom: 1px solid var(--border); }
.zf-material li:last-child { border-bottom: 0; }
.zf-material img { width: 48px; height: 48px; object-fit: cover; border-radius: 8px; flex: none; }
.zf-menge { font-variant-numeric: tabular-nums; white-space: nowrap; color: var(--text-2); font-weight: 600; }
.zf-fotos { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-3); grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
.zf-fotos li { display: grid; gap: var(--sp-1); align-content: start; font-size: var(--fs-s); color: var(--text-2); overflow-wrap: anywhere; }
.zf-fotos img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--radius-sm); background: var(--surface-3); }

/* Abnahme und Unterschriften */
.abnahme-haken { padding: var(--sp-3) var(--sp-4); border-radius: var(--radius-sm); border: 1.5px solid var(--border-strong); background: var(--surface-2); }
.abnahme-haken:has(input:checked) { border-color: var(--ok); background: var(--ok-soft); }
.abnahme-haken input { accent-color: var(--ok); }
.unterschriften-raster { display: grid; gap: var(--sp-4); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 720px) { .unterschriften-raster { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.unterschrift-block { display: grid; gap: var(--sp-3); align-content: start; min-width: 0; padding: var(--sp-4); border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow); }
.unterschrift-block h3 { font-size: var(--fs-basis); }
.unterschrift-fertig { display: grid; gap: var(--sp-2); justify-items: start; }
.unterschrift-fertig img { width: 100%; height: 200px; object-fit: contain; background: var(--papier); border: 1px solid var(--border); border-radius: 12px; }
.pad-rahmen canvas:focus-visible { outline: 3px solid color-mix(in srgb, var(--primary) 45%, transparent); outline-offset: 2px; }
.druckbuchstaben { text-transform: uppercase; letter-spacing: 0.04em; }

/* Eingereichtes Protokoll */
.protokoll-kopf { display: grid; gap: var(--sp-3); }
.protokoll-kopf h2 { font-size: var(--fs-xl); }
.status-marke { display: inline-flex; align-items: center; gap: var(--sp-1); padding: var(--sp-1) var(--sp-3); border-radius: 999px; font-size: var(--fs-m); font-weight: 700; }
.status-marke svg { width: 17px; height: 17px; }
.status-marke.ok { background: var(--ok-soft); color: var(--ok); }
.status-marke.warn { background: var(--warn-soft); color: var(--warn-strong); }
.unterschrift-anzeige { margin: 0; display: grid; gap: var(--sp-2); padding: var(--sp-3); border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface-2); min-width: 0; }
.unterschrift-anzeige figcaption { font-size: var(--fs-s); font-weight: 700; color: var(--text-2); }
.unterschrift-anzeige img { width: 100%; height: 140px; object-fit: contain; background: var(--papier); border: 1px solid var(--border); border-radius: var(--radius-sm); }
.unterschrift-anzeige p { display: grid; gap: var(--sp-0); font-size: var(--fs-m); }
.unterschrift-anzeige p span { font-size: var(--fs-s); color: var(--text-3); }
.nachtrag-liste { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-3); }
.nachtrag-liste li { display: grid; gap: var(--sp-1); padding: var(--sp-3) var(--sp-4); border-left: 4px solid var(--warn); border-radius: var(--radius-sm); background: var(--surface-2); }
.nachtrag-kopf { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--sp-1) var(--sp-3); }
.nachtrag-kopf span { font-size: var(--fs-s); color: var(--text-3); }
.nachtrag-form { padding-top: var(--sp-3); border-top: 1px solid var(--border); }
.nachtrag-form .btn { justify-self: start; }
.pruefsumme code { overflow-wrap: anywhere; font-size: var(--fs-xs); }
/* Auftrag: Abnahmeprotokolle */
.protokoll-zeile { display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap; padding: var(--sp-3) 0; border-bottom: 1px solid var(--border); }
.protokoll-zeile:last-child { border-bottom: 0; }
.protokoll-zeile > div { flex: 1 1 200px; display: grid; gap: var(--sp-0); min-width: 0; }
/* Auftragsliste: Protokoll direkt öffnen / PDF */
.protokoll-links { display: inline-flex; align-items: center; gap: var(--sp-1); flex-wrap: wrap; }
.protokoll-tag {
  display: inline-flex; align-items: center; gap: var(--sp-1); min-height: 32px; padding: 0 var(--sp-3); border-radius: 999px;
  font-size: var(--fs-s); font-weight: 700; color: var(--primary); background: var(--primary-soft); white-space: nowrap;
}
.protokoll-tag svg { width: 14px; height: 14px; }
.protokoll-pdf { width: 36px; height: 36px; display: inline-grid; place-items: center; border-radius: 50%; color: var(--text-2); }
.protokoll-pdf:hover { background: var(--surface-3); color: var(--text); }
.protokoll-pdf svg { width: 18px; height: 18px; }
.ak-protokoll { display: grid; grid-template-columns: 76px minmax(0, 1fr); gap: var(--sp-2); align-items: center; padding: 0 var(--sp-4) var(--sp-3) var(--sp-5); margin-top: calc(-1 * var(--sp-2)); }
.auftrags-karten li:nth-child(even) .ak-protokoll { background: var(--surface-2); }
.auftrags-karten li:last-child .ak-protokoll { border-radius: 0 0 var(--radius) var(--radius); }
@media (max-width: 699px) { .listen-leiste.vier .listen-anzahl { grid-column: 1 / -1; padding-bottom: 0; } }
@media (min-width: 700px) {
  .listen-leiste.vier { grid-template-columns: repeat(4, minmax(0, 200px)) 1fr; }
}
/* Einstellungen: Materialliste */
.material-neu { display: grid; gap: var(--sp-3); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 560px) { .material-neu { grid-template-columns: minmax(0, 1fr) 150px auto; align-items: start; } .material-neu .btn { margin-top: calc(var(--fs-m) * 1.45 + var(--sp-2)); } }
.material-liste .grow { display: grid; gap: var(--sp-0); }
/* Abschluss ohne Kundenunterschrift */
.ohne-kunde-haken { align-items: flex-start; padding: var(--sp-3) var(--sp-4); border-radius: var(--radius-sm); border: 1.5px solid var(--border-strong); background: var(--surface-2); }
.ohne-kunde-haken input { margin-top: var(--sp-0); }
.ohne-kunde-haken:has(input:checked) { border-color: var(--warn); background: var(--warn-soft); }
.ohne-kunde-haken:has(input:checked) .hilfe { color: var(--text-2); }
.unterschrift-block.ohne-kunde { background: var(--surface-2); box-shadow: none; }
.unterschrift-anzeige .nicht-unterschrieben {
  min-height: 140px; display: grid; place-items: center; text-align: center; padding: var(--sp-3);
  border: 1px dashed var(--border-strong); border-radius: var(--radius-sm); color: var(--text-2); font-size: var(--fs-m);
}
.abschluss-karte .btn { justify-self: stretch; }
/* Rote Zahlen nachvollziehbar: Hinweis oben auf der Zielseite und rote Markierung an den gemeinten Einträgen */
.rot-punkt { display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: var(--markierung); flex: none; }
.rot-hinweis {
  display: flex; align-items: baseline; gap: var(--sp-2); padding: var(--sp-3) var(--sp-4); border-radius: var(--radius-sm);
  background: var(--danger-soft); color: var(--text); font-size: var(--fs-m); font-weight: 600; overflow-wrap: anywhere;
}
.rot-hinweis .rot-punkt { transform: translateY(-1px); }
.rot-hinweis a { color: var(--text); text-decoration: underline; }
.neu-tag { display: inline-flex; align-items: center; gap: var(--sp-1); font-size: var(--fs-s); font-weight: 700; color: var(--danger); }
.abnahme-bereit-karte .card-kopf h2 { display: flex; align-items: center; gap: var(--sp-2); }
.abnahme-bereit-karte .card-kopf .n { font-size: var(--fs-s); color: var(--text-3); font-weight: 600; }
.abnahme-bereit-karte .chips-zeile { margin-top: var(--sp-1); }
.heute-zahl { color: var(--danger); }
.rot-hinweis + .aufgaben-gruppe, .rot-hinweis + .card { margin-top: var(--sp-4); }
/* Übersicht: abgeschlossene Aufträge des Monats */
button.kennzahl { font: inherit; text-align: left; cursor: pointer; }
button.kennzahl:hover, a.kennzahl:hover { border-color: var(--border-strong); }
.abgeschlossen-karte { scroll-margin-top: calc(var(--sp-6) * 3); }
.abgeschlossen-karte h2 { display: flex; align-items: center; gap: var(--sp-2); }
.abgeschlossen-karte .card-kopf { justify-content: space-between; flex-wrap: wrap; }
.ab-summe { display: flex; flex-wrap: wrap; gap: var(--sp-1) var(--sp-4); margin: 0 0 var(--sp-3); font-size: var(--fs-m); color: var(--text-2); }
.ab-summe strong { color: var(--text); }
.ab-tabelle .t-datum { white-space: nowrap; }
.ab-tabelle td .nebentext { display: block; margin-top: var(--sp-0); }
.t-zahl { text-align: right !important; white-space: nowrap; font-variant-numeric: tabular-nums; }
.ab-protokolle { display: flex; flex-wrap: wrap; gap: var(--sp-1) var(--sp-3); font-size: var(--fs-m); }
.ab-protokolle a { display: inline-flex; align-items: center; gap: var(--sp-1); font-weight: 650; }
.ab-protokolle svg { width: 16px; height: 16px; }
.status-marke.neutral { background: var(--surface-3); color: var(--text-2); }
.ab-karten { margin: 0 calc(-1 * var(--sp-4)) calc(-1 * var(--sp-4)); }
.ab-karten .auftrag-karte .status-marke { font-size: var(--fs-s); padding: var(--sp-0) var(--sp-2); }
/* Gewerk: Abnahmeprotokolle je Monat */
.protokoll-monat { margin-bottom: var(--sp-3); flex-wrap: wrap; }
.gewerk-protokolle { list-style: none; margin: var(--sp-3) 0 0; padding: 0; display: grid; gap: var(--sp-3); }
.gp-eintrag { display: grid; gap: var(--sp-2); }
.gp-kopf { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--sp-3); flex-wrap: wrap; }
.gp-titel { display: grid; gap: var(--sp-0); min-width: 0; overflow-wrap: anywhere; }
.gp-titel strong { font-size: var(--fs-basis); }
.gp-zeile { margin: 0; overflow-wrap: anywhere; }
.gp-knoepfe { margin-top: var(--sp-1); }

/* Plattform → Betrieb → „Benutzer & Geräte“: Feld „Geräte gleichzeitig“ je Benutzer (am Handy unter dem Namen) */
.geraete-zeile { flex-wrap: wrap; }
.geraete-zeile .grow { min-width: 12rem; }
.geraete-feld { flex: none; margin: 0; }
.geraete-feld input { width: 5.5rem; }
.geraete-zeile:hover { background: transparent; }

/* Automatischer Versand an den Kunden (Auftrag) */
.versand-liste { display: grid; gap: var(--sp-3); }
.versand-zeile { display: grid; gap: var(--sp-1); padding-bottom: var(--sp-3); border-bottom: 1px solid var(--border); }
.versand-zeile:last-child { padding-bottom: 0; border-bottom: 0; }
.versand-status { color: var(--c); }
.versand-fehler { color: var(--text-2); overflow-wrap: anywhere; }

/* Fotos/Dateien im Auftrag – Zahl in Liste und Tabelle */
.anhang-info { display: flex; flex-wrap: wrap; gap: var(--sp-1) var(--sp-3); font-size: var(--fs-s); color: var(--text-2); }
.anhang-zahl { display: inline-flex; align-items: center; gap: var(--sp-1); }
.anhang-zahl svg { width: 14px; height: 14px; color: var(--text-3); flex: none; }
.t-kunde .anhang-info { margin-top: 2px; }