/* Auftrags-Organizer, Look "Instaffo" (hell, Akzent #FE6606, Rundung 24, bunte
   Tonflaechen). Quelle: docs/design-briefing/ergebnis/Stilprobe Instaffo.dc.html.
   Stil-DNA: kuehle helle Leinwand, weisse Karten mit weichem Grossschatten,
   ALLES Klickbare als Pille (100px), Status-Pillen mit Punkt, nur Gewichte
   400/500 (Kontrast ueber Groesse und Farbe), schwebendes Glas-Dock unten.
   Aufbau: 1 Tokens - 2 Basis - 3 Geruest - 4 Komponenten - 5 Bewegung -
   6 Breakpoints - 7 Druck - 8 Kompatibilitaet. */

/* ============ 1. Tokens ============ */
:root {
  /* Marke: thema.mjs ueberschreibt --holz-500 (und die Abstufungen) live aus
     den Design-Einstellungen. --akzent haengt an dieser EINEN Variablen, alle
     weiteren Akzent-Toene sind color-mix-Ableitungen daraus — die
     Einstellungs-Farbwahl greift damit ueberall. */
  --holz-500: #FE6606;
  --holz-600: color-mix(in srgb, var(--holz-500), #000 18%);
  --holz-700: color-mix(in srgb, var(--holz-500), #000 42%);
  --holz-200: color-mix(in srgb, var(--holz-500), #fff 55%);
  --holz-100: color-mix(in srgb, var(--holz-500), #fff 76%);
  --holz-50:  color-mix(in srgb, var(--holz-500), #fff 88%);

  --akzent: var(--holz-500);
  --akzent-tief: color-mix(in srgb, var(--akzent), #000 14%);          /* Hover Primaer */
  --akzent-ink: color-mix(in oklab, var(--akzent) 78%, #222222);       /* Text in Akzentfamilie */
  --akzent-ton: color-mix(in oklab, var(--akzent) 12%, #FFFFFF);       /* Tonflaeche */
  --akzent-ton-hover: color-mix(in oklab, var(--akzent) 20%, #FFFFFF);

  /* Leinwand + Neutrals (kuehl-hell) */
  --bg:      #F9F9FC;
  --surface: #FFFFFF;
  --line:    #E6E6ED;
  --head:    #222222;
  --fg:      #3E4242;
  --muted:   #848686;
  --ton-kuehl: #EFEFF7;   /* kuehle Tonflaeche: Inputs, Spuren, Chips */
  --ton-geld:  #CFFFFC;   /* Mint: der Umsatz-Held */

  /* Ampel: rot/warn = ueberfaellig, gruen = erledigt, Bernstein = wartend */
  --warn: #C8452C;
  --warn-ton: color-mix(in oklab, #C8452C 16%, #FFFFFF);
  --warn-ton-hover: color-mix(in oklab, #C8452C 24%, #FFFFFF);
  --gruen: #0F9D6E;
  --gruen-ink: color-mix(in oklab, #0F9D6E 80%, #222222);
  --gruen-ton: color-mix(in oklab, #0F9D6E 14%, #FFFFFF);
  --warte-ink: #8A6A1B;
  --warte-ton: color-mix(in oklab, #C99A2E 20%, #FFFFFF);

  /* Radien: Karten 24, innere Bausteine 15, Klickbares 100 (Pille) */
  --r-karte: 24px;
  --r-innen: 15px;
  --r-pille: 100px;

  /* Die vier erlaubten Schatten */
  --schatten-karte:   0 2px 40px rgb(0 0 0 / .15);
  --schatten-hover:   0 6px 48px rgb(0 0 0 / .22);
  --schatten-innen:   0 2px 20px rgb(0 0 0 / .10);
  --schatten-schwebt: 0 4px 30px rgb(0 0 0 / .18);

  --schrift: "Avenir Next", Avenir, "Segoe UI Variable Display", "Segoe UI",
             system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;

  /* Uebergangs-Aliase fuer Alt-Reste und Inline-Styles */
  --orange: var(--akzent);
  --orange-dark: var(--akzent-tief);
  --tint: var(--akzent-ton);
  --ink: var(--head);
  --ok: var(--gruen);
  --danger: var(--warn);
  --danger-bg: var(--warn-ton);
  --radius: var(--r-innen);
}

/* ============ 2. Basis ============ */
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html {
  -webkit-text-size-adjust: 100%;
  /* Anker-Spruenge und fokussierte Felder landen nie unter Kopfzeile/Dock */
  scroll-padding-top: 72px;
  scroll-padding-bottom: calc(130px + env(safe-area-inset-bottom, 0px));
}
body {
  margin: 0;
  font-family: var(--schrift);
  font-size: 15px; line-height: 1.5;
  font-weight: 400;
  color: var(--fg);
  background: var(--bg);
}
main {
  max-width: 720px;
  margin: 0 auto;
  padding: 16px;
  /* Platz fuer das schwebende Dock (ca. 64 Hoehe + 18 Abstand) + Luft +
     iPhone-Home-Balken */
  padding-bottom: calc(132px + env(safe-area-inset-bottom, 0px));
}
main:has(.pipeline) { max-width: none; }
img { max-width: 100%; height: auto; }
svg.icon { flex: none; vertical-align: middle; }
svg.icon, .abhaken-svg { stroke-width: 1.5; }

/* Nur 400/500: auch <strong> und alte fette Stellen duerfen nie 600+ werden */
strong, b, th { font-weight: 500; }

/* Typo: Seitentitel 32/500, Kontrast ueber Groesse und Farbe */
h1, .seiten-titel {
  font-size: 32px; line-height: 1.15; font-weight: 500;
  letter-spacing: -.02em;
  color: var(--head);
  margin: 14px 0 16px;
}
.seiten-untertitel { margin: -8px 0 20px; color: var(--muted); font-size: 15px; }
/* Kicker-Zeile UEBER dem Seitentitel (Instaffo-Signatur). CSS liegt bereit,
   braucht aber pro View ein <p class="seiten-kicker"> vor dem h1 — Markup-
   Entscheidung liegt beim Hauptagenten (Befund 3). */
.seiten-kicker { font-size: 16px; line-height: 22px; font-weight: 500; color: var(--akzent-ink); margin: 14px 0 -10px; }
/* Abschnittstitel ruhig: klein, gedaempft, KEIN Grossbuchstaben-Geschrei */
h2, .abschnitt-titel {
  font-size: 13px; line-height: 18px; font-weight: 400;
  text-transform: none; letter-spacing: 0;
  color: var(--muted);
  margin: 30px 0 8px;
}
.abschnitt-zaehler { font-weight: 400; }
.abschnitt { margin: 0 0 30px; }

a { color: var(--akzent-ink); }

:focus-visible {
  outline: 2px solid var(--akzent);
  outline-offset: 2px;
}
a:focus-visible, summary:focus-visible { border-radius: 6px; }

/* ============ 3. Geruest ============ */

/* Kopfzeile: ruhig auf der Leinwand, Aktionen als weisse Kreis-Chips */
.kopfzeile {
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 12px 16px 8px;
  background: var(--bg);
}
@supports (backdrop-filter: blur(10px)) {
  .kopfzeile {
    background: color-mix(in srgb, var(--bg) 86%, transparent);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
  }
}
.wortmarke {
  font-size: 16px; font-weight: 500; letter-spacing: -.01em;
  color: var(--head); text-decoration: none;
  min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.wortmarke-punkt { color: var(--akzent); padding: 0 3px; }
.wortmarke-logo { display: block; height: 26px; width: auto; }
.kopf-aktionen { display: flex; align-items: center; gap: 6px; flex: none; }
.kopf-suche, .kopf-einstellungen {
  display: flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; min-height: 44px;
  border-radius: 50%;
  background: var(--surface);
  box-shadow: var(--schatten-innen);
  color: var(--muted);
}
.kopf-suche:hover, .kopf-einstellungen:hover { color: var(--head); }
.abmelden {
  background: none; border: none; cursor: pointer;
  font: inherit; font-size: 13px; font-weight: 400; color: var(--muted);
  padding: 10px 4px; min-height: 44px;
}
.abmelden:hover { color: var(--fg); }

/* Untere Tab-Leiste: SCHWEBENDE Glas-Pille (16px Rand, 18px unten + safe-area) */
.tab-leiste {
  position: fixed; left: 16px; right: 16px;
  bottom: calc(18px + env(safe-area-inset-bottom, 0px));
  z-index: 30;
  margin: 0 auto;
  max-width: 420px;
  display: flex; align-items: center; justify-content: space-around; gap: 2px;
  background: rgb(255 255 255 / .86);
  backdrop-filter: blur(20px) saturate(160%);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
  border-radius: var(--r-pille);
  padding: 8px 10px;
  box-shadow: var(--schatten-schwebt);
}
.tab {
  position: relative;
  flex: 1; min-width: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  min-height: 48px;
  border-radius: var(--r-pille);
  text-decoration: none;
  color: var(--muted);
}
.tab-icon {
  display: flex; align-items: center; justify-content: center;
  width: 38px; height: 30px;
  border-radius: var(--r-pille);
  background: transparent;
}
.tab-label { font-size: 11px; font-weight: 500; line-height: 1; white-space: nowrap; }
.tab:hover { color: var(--fg); }
.tab--aktiv { color: var(--akzent-ink); }
.tab--aktiv .tab-icon { background: var(--akzent-ton); color: var(--akzent-ink); }
/* Der Plus-FAB in der Mitte: 56px-Akzent-Kreis, schwebt ueber der Leiste */
.tab--neu { flex: 0 0 auto; }
.tab-neu-kreis {
  display: flex; align-items: center; justify-content: center;
  width: 56px; height: 56px;
  margin: -26px 6px 0;
  border-radius: 50%;
  background: var(--akzent); color: #fff;
  box-shadow: var(--schatten-schwebt);
}
.tab--neu:active .tab-neu-kreis, .tab--neu:hover .tab-neu-kreis { background: var(--akzent-tief); }

/* Toast: schwebende weisse Pille unten mittig (ueberm Dock), 8px-Akzent-Punkt */
.toast {
  position: fixed; left: 16px; right: 16px;
  bottom: calc(96px + env(safe-area-inset-bottom, 0px));
  z-index: 40;
  width: fit-content; max-width: calc(100% - 32px);
  margin: 0 auto;
  display: flex; align-items: center; gap: 10px;
  background: var(--surface);
  border-radius: var(--r-pille);
  box-shadow: var(--schatten-schwebt);
  padding: 14px 22px;
  cursor: pointer;
}
.toast::before {
  content: "";
  flex: none;
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--akzent);
}
.toast > .icon { display: none; }
.toast--fehler::before { background: var(--warn); }
.toast-text { color: var(--head); font-weight: 500; font-size: 16px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ============ 4. Komponenten ============ */

/* --- Karten: weiss, Radius 24, weicher Grossschatten --- */
.karte, .card {
  position: relative;
  display: flex; flex-direction: column; gap: 8px;
  background: var(--surface);
  border: none;
  border-radius: var(--r-karte);
  box-shadow: var(--schatten-karte);
  padding: 18px;
  margin: 14px 0;
}
.karte--gedimmt { opacity: .6; }
a.karte, .karte--link { text-decoration: none; color: inherit; }

/* Dringlichkeit lebt im Naechster-Schritt-Block und in den Pillen, nicht in
   Kanten: Karte selbst bleibt ruhig */
.karte--dringend, .karte--termin { box-shadow: var(--schatten-karte); }

/* Hinweis-Karte: Akzent-Tonflaeche, ohne Schatten */
.karte--hinweis {
  background: var(--akzent-ton);
  box-shadow: none;
  flex-direction: row; align-items: center; justify-content: space-between; gap: 8px;
  padding: 14px 16px;
}
.karte--hinweis .hinweis-inhalt { font-size: 14px; line-height: 20px; }
.karte--hinweis .hinweis-inhalt .link { display: inline; padding: 0; min-height: 0; }

/* Held-Karte ("Jetzt dran"): Hero-Tonflaeche als Kartenhintergrund,
   der innere Naechster-Schritt-Block wird WEISS mit Innen-Schatten */
.karte--held {
  background: color-mix(in oklab, var(--akzent) 12%, #FFFFFF);
  box-shadow: none;
  padding: 20px;
  gap: 10px;
}
.karte--held .karte-titel { font-size: 27px; line-height: 1.15; letter-spacing: -.018em; }
/* Pillen auf der Hero-Tonflaeche werden weiss, sonst saufen sie im Ton ab */
.karte--held .plakette { background: var(--surface); }
.karte--held .plakette--neutral { border-color: transparent; }
.karte--held .naechster-schritt { background: var(--surface); box-shadow: var(--schatten-innen); }
.karte--held .chip-icon { background: var(--surface); }

/* Overlay-Link: ganze Karte tappbar, interaktive Kinder liegen darueber */
.karte-link-flaeche {
  color: inherit; text-decoration: none;
  display: flex; flex-direction: column; gap: 2px;
}
.karte-link-flaeche::after { content: ""; position: absolute; inset: 0; border-radius: var(--r-karte); }
.karte .naechster-schritt, .karte .knopf, .karte form, .karte .plakette { position: relative; z-index: 1; }

.karte-titel { font-size: 22px; line-height: 1.25; font-weight: 500; letter-spacing: -.012em; color: var(--head); }
.karte-leistung {
  color: var(--fg);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.karte-frist {
  display: flex; align-items: center; gap: 8px;
  font-size: 13px; line-height: 18px; font-weight: 500; color: var(--warn);
}
.karte-betrag { font-size: 21px; line-height: 26px; font-weight: 500; font-variant-numeric: tabular-nums; letter-spacing: -.012em; color: var(--head); }
.karte-meta { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--muted); }
.karte-badges { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.karte-kopfzeile { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.karte-phase { align-self: flex-end; color: var(--fg); }
.karte-text { color: var(--fg); }
.karte-leistung--einzeilig {
  display: block;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* Icon-Chips: Icons nie nackt neben Text */
.chip-icon {
  flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px;
  border-radius: 50%;
  background: var(--ton-kuehl); color: var(--muted);
  vertical-align: middle;
}
.chip-icon--rot { background: var(--warn-ton); color: var(--warn); }
.chip-icon--gruen { background: var(--gruen-ton); color: var(--gruen-ink); }
.chip-icon--akzent { background: var(--akzent-ton); color: var(--akzent-ink); }
.karte--hinweis .chip-icon, .naechster-schritt .chip-icon { background: var(--surface); }

.hinweis-inhalt { flex: 1; }
.hinweis-schliessen {
  flex: none;
  display: flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; margin: -6px -8px -6px 0;
  background: none; border: none; border-radius: 50%;
  color: var(--muted); cursor: pointer;
}
.hinweis-schliessen:hover { color: var(--head); background: rgb(255 255 255 / .6); }

/* --- Dashboard-Kopf: Kicker-Zeile (Datum) in Akzent UEBER dem Seitentitel --- */
.gruss-block { display: flex; flex-direction: column; padding: 14px 2px 2px; }
.gruss {
  font-size: 32px; line-height: 1.15; font-weight: 500;
  letter-spacing: -.02em;
  color: var(--head);
  margin: 0 0 18px;
}
.gruss-name { font-weight: 500; }
.gruss-datum {
  order: -1; /* Kicker steht ueber der Headline, Markup bleibt unangetastet */
  font-size: 16px; line-height: 22px; font-weight: 500;
  color: var(--akzent-ink);
  margin: 0 0 6px;
}

/* --- "Braucht Antwort": Zeilenliste in EINER Karte --- */
.karte--liste { gap: 0; padding: 8px 18px; }
.antwort-liste { list-style: none; margin: 0; padding: 0; }
.antwort-zeile {
  display: flex; align-items: center; gap: 12px;
  padding: 8px 0;
  border-bottom: 1px solid var(--line);
}
.antwort-zeile:last-child { border-bottom: none; }
.antwort-zeile form { display: flex; flex: none; margin: 0; }
.antwort-zeile .abhaken { color: var(--warn); }
.antwort-text {
  flex: 1; min-width: 0;
  display: flex; flex-direction: column; gap: 1px; justify-content: center;
  min-height: 44px;
  text-decoration: none; color: inherit;
}
.antwort-kunde { font-size: 16px; line-height: 21px; font-weight: 500; color: var(--head); }
.antwort-leistung {
  font-size: 13px; line-height: 18px; color: var(--muted);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.antwort-zeile .plakette { flex: none; }

/* --- Pillen (Plaketten): Punkt + Tinte auf Tonflaeche, Radius 100 --- */
.plakette {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 15px; line-height: 20px; font-weight: 400;
  padding: 7px 14px; border-radius: var(--r-pille);
  white-space: nowrap;
}
.plakette::before {
  content: "";
  flex: none;
  width: 7px; height: 7px; border-radius: 50%;
  background: currentColor;
}
.plakette--phase-anfrage, .plakette--phase-angebot { background: var(--akzent-ton); color: var(--akzent-ink); }
.plakette--phase-beauftragt, .plakette--phase-in_arbeit { background: var(--warte-ton); color: var(--warte-ink); }
.plakette--phase-rechnung { background: var(--warn-ton); color: var(--warn); }
.plakette--phase-bezahlt { background: var(--gruen-ton); color: var(--gruen-ink); }
.plakette--warten { background: var(--warte-ton); color: var(--warte-ink); }
.plakette--frist { background: var(--warn-ton); color: var(--warn); }
.plakette--termin, .plakette--heute { background: var(--akzent-ton); color: var(--akzent-ink); }
/* Neutrale Pille: nur 1px-Rand, KEINE Fuellung, kein Punkt */
.plakette--neutral, .plakette--phase-verloren {
  background: none;
  border: 1px solid var(--line);
  color: var(--muted);
  padding: 6px 13px; /* Rand gleicht die Hoehe aus */
}
.plakette--neutral::before, .plakette--phase-verloren::before { display: none; }

/* --- Knoepfe: alles Pillen --- */
.knopf {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 52px; padding: 16px 22px;
  border: none; border-radius: var(--r-pille);
  font: inherit; font-size: 17px; line-height: 22px; font-weight: 500;
  text-decoration: none; text-align: center;
  background: var(--akzent); color: #fff;
  cursor: pointer;
}
.knopf:hover, .knopf:active { background: var(--akzent-tief); }
.knopf--sekundaer {
  background: var(--surface); color: var(--head);
  border: 1px solid var(--line);
  padding: 15px 21px;
}
.knopf--sekundaer:hover, .knopf--sekundaer:active { background: var(--ton-kuehl); }
.knopf--pille { min-height: 40px; padding: 8px 16px; font-size: 15px; line-height: 20px; font-weight: 400; white-space: nowrap; }
/* Gefahr zurueckhaltend: Warn-Tinte auf Warn-Tonflaeche, nie grosse rote Flaeche */
.knopf--gefahr {
  background: var(--warn-ton); color: var(--warn);
  border: none;
}
.knopf--gefahr:hover, .knopf--gefahr:active { background: var(--warn-ton-hover); }
.knopf--gefahr-voll { background: var(--warn); color: #fff; border: none; }
.knopf--gefahr-voll:hover, .knopf--gefahr-voll:active { background: var(--warn); }
.knopf--breit { display: flex; width: 100%; }

/* --- Formulare: Felder auf weisser Karte, kuehle Tonflaechen-Inputs,
   Fokus in Akzent, 16px gegen iOS-Zoom --- */
label, .feld {
  display: flex; flex-direction: column; gap: 6px;
  font-size: 13px; font-weight: 500;
  color: var(--head);
}
input, select, textarea {
  font: inherit; font-size: 16px; line-height: 24px; font-weight: 400;
  padding: 13px 16px;
  border: none; border-radius: var(--r-innen);
  background: var(--ton-kuehl); color: var(--head);
  width: 100%; min-height: 50px;
}
/* Auf der Leinwand (Suche) heben sich Inputs als weisse Pille ab */
main > form > input, main > form input[type="search"] {
  background: var(--surface); box-shadow: var(--schatten-innen);
  border-radius: var(--r-pille);
}
textarea { resize: none; border-radius: 18px; }
::placeholder { color: var(--muted); font-weight: 400; opacity: 1; }
input:focus, select:focus, textarea:focus {
  outline: 2px solid var(--akzent);
  outline-offset: 2px;
}
/* Checkboxen als Abhak-Kreise (gleiche DNA wie die 34px-Kreise der Karten):
   kein natives Quadrat, sondern Kreis mit 1.5px-Akzent-Rand, gefuellt =
   Akzent + weisser SVG-Haken */
input[type="checkbox"] {
  appearance: none; -webkit-appearance: none;
  width: 26px; height: 26px; min-height: 0; padding: 0; margin: 0;
  border: 1.5px solid var(--akzent); border-radius: 50%;
  background: var(--surface);
  cursor: pointer; flex: none;
}
/* Der weisse Haken ist aus zwei Gradient-Strichen gezeichnet statt aus einem
   SVG-Data-URI: die CSP der App (default-src 'self') blockt data:-Bilder,
   Gradients sind keine Bild-Ladung und damit CSP-immun. Prozent-Groessen/
   -Positionen skalieren den Haken auch fuer kleinere Checkboxen (Foto-Fuss). */
input[type="checkbox"]:checked {
  background-color: var(--akzent);
  border-color: var(--akzent);
  background-image:
    linear-gradient(45deg, transparent calc(50% - 1.1px), #fff calc(50% - 1.1px) calc(50% + 1.1px), transparent calc(50% + 1.1px)),
    linear-gradient(-45deg, transparent calc(50% - 1.1px), #fff calc(50% - 1.1px) calc(50% + 1.1px), transparent calc(50% + 1.1px));
  background-size: 26% 26%, 44% 44%;
  background-position: 23% 56%, 77% 42%;
  background-repeat: no-repeat;
}
/* Ampel-Semantik: ueberfaellige Termine (Liegen-geblieben-Karte traegt
   karte--dringend) kippen den Kreis-Rand auf Warn; abgehakt bleibt gruen
   ueber .termin-haken:checked (erledigt = gruen) */
.karte--dringend input[type="checkbox"],
.termin-liste .ueberfaellig input[type="checkbox"] { border-color: var(--warn); }
input[type="date"], input[type="time"] { max-width: 100%; }
.feld-hinweis { font-size: 13px; line-height: 18px; font-weight: 400; color: var(--muted); }
.feld-fehler { font-size: 14px; font-weight: 500; color: var(--warn); }
.fehler {
  background: var(--warn-ton); color: var(--warn);
  padding: 12px 16px; border-radius: var(--r-innen);
}

/* Formular-Karte: Zeilen-Rhythmus mit feinen Trennern zwischen den Feldern */
.formular { gap: 0; }
.formular > label, .formular > .feld, .formular > .wahl-feld {
  padding: 12px 0;
  border-bottom: .5px solid var(--line);
}
.formular > label:last-of-type, .formular > .feld:last-of-type { border-bottom: none; }
.formular > .knopf, .formular > .fehler, .formular > .row { margin-top: 14px; }
.formular .fehler { margin-bottom: 0; }
.formular-abbrechen { align-self: center; margin-top: 6px; }
.gefahren-bereich { margin-top: 48px; }
.gefahren-frage { margin: 0; color: var(--head); }

/* Auswahl-Chips: Pillen statt Dropdown */
.wahl-feld { border: none; border-radius: 0; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 6px; background: none; }
.wahl-feld legend { font-weight: 500; font-size: 13px; padding: 0 0 6px; }
.wahl-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.wahl-chip { position: relative; flex-direction: row; border: none; padding: 0; }
.wahl-chip input[type="radio"] {
  position: absolute; inset: 0; width: 100%; height: 100%;
  min-height: 0; margin: 0; padding: 0; opacity: 0; cursor: pointer;
}
.wahl-chip span {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 44px; padding: 9px 18px;
  border: 1px solid var(--line); border-radius: var(--r-pille);
  background: var(--surface);
  font-size: 15px; font-weight: 400; color: var(--muted);
}
.wahl-chip input:checked + span {
  background: var(--akzent-ton); border-color: transparent; color: var(--akzent-ink);
}
.wahl-chip input:focus-visible + span { outline: 2px solid var(--akzent); outline-offset: 2px; }

/* Selects als Pill-Trigger mit eigenem Chevron-Chip */
.select-huelle { position: relative; display: block; width: 100%; }
.select-huelle select {
  appearance: none;
  -webkit-appearance: none;
  border-radius: var(--r-pille);
  padding-right: 52px;
}
.select-huelle select::-ms-expand { display: none; }
.select-pfeil {
  position: absolute; right: 9px; top: 50%; transform: translateY(-50%);
  display: flex; align-items: center; justify-content: center;
  width: 32px; height: 32px;
  border-radius: 50%;
  background: var(--surface); color: var(--muted);
  pointer-events: none;
}

/* Upload als gestylter Knopf */
.upload-knopf { position: relative; overflow: hidden; }
.upload-knopf input[type="file"] {
  position: absolute; inset: 0;
  width: 100%; height: 100%; min-height: 0;
  opacity: 0; cursor: pointer;
}

/* --- Fortschrittsbalken: Spur kuehl, Fuellung Akzent, Pille --- */
.fortschritt-zeile { display: flex; align-items: center; gap: 10px; }
.fortschritt-zeile .fortschritt { flex: 1; }
.fortschritt {
  height: 7px; border-radius: var(--r-pille);
  background: var(--ton-kuehl);
  border: none;
  overflow: hidden;
}
.karte--held .fortschritt { background: rgb(255 255 255 / .75); }
.fortschritt-balken { height: 100%; border-radius: var(--r-pille); background: var(--akzent); min-width: 0; }
.fortschritt-balken--fertig { background: var(--gruen); }
.fortschritt-label { font-size: 12px; font-weight: 500; color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; }

/* --- Naechster Schritt: Block auf Akzent-Tonflaeche (Radius 15),
   Abhak-Kreis mit Akzent-Rand. Ueberfaellig: Warn-Ton + Warn-Kreis. --- */
.naechster-schritt {
  display: flex; align-items: center; gap: 12px;
  background: var(--akzent-ton);
  border-radius: var(--r-innen);
  padding: 10px 14px 10px 10px;
}
.naechster-schritt-form { display: flex; flex: none; }
.naechster-schritt-text {
  flex: 1; min-width: 0;
  display: flex; flex-direction: column; gap: 1px; justify-content: center;
  min-height: 44px;
  text-decoration: none; color: inherit;
}
.naechster-schritt-label {
  font-size: 12px; line-height: 17px; font-weight: 500;
  text-transform: none; letter-spacing: .01em;
  color: var(--muted);
  white-space: nowrap;
}
.naechster-schritt-punkt {
  font-size: 15px; line-height: 21px; font-weight: 500; color: var(--head);
  overflow-wrap: break-word;
  hyphens: none;
}
.naechster-schritt--gross { padding: 12px 16px 12px 12px; }
.naechster-schritt--gross .naechster-schritt-punkt { font-size: 17px; line-height: 24px; }
.naechster-schritt--fertig .naechster-schritt-kreis {
  display: flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; flex: none;
  border-radius: 50%; background: var(--surface);
  color: var(--gruen);
}
.naechster-schritt--fertig { background: var(--gruen-ton); }
.naechster-schritt--fertig .naechster-schritt-punkt { color: var(--gruen-ink); }

/* Ueberfaellige Karte: der Schritt-Block kippt auf Warn */
.karte--dringend .naechster-schritt { background: var(--warn-ton); }
.karte--dringend .naechster-schritt .abhaken { color: var(--warn); }
.karte--dringend .naechster-schritt .abhaken:hover { background: var(--warn-ton-hover); }

/* Abhak-Kreis: 34px-Kreis mit 1.5px-Akzent-Rand (SVG-Stroke), 44px Trefferflaeche */
.abhaken {
  display: flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; min-height: 44px; padding: 0; margin: 0;
  background: none; border: none; border-radius: 50%;
  color: var(--akzent); cursor: pointer;
}
.abhaken-svg { width: 34px; height: 34px; }
.abhaken:hover { background: var(--akzent-ton-hover); }
.abhaken-haken { opacity: 0; }
/* gefuellt = Akzent-Kreis + weisser Haken (Abhak-Moment) */
.abhaken--laeuft .abhaken-kreis { fill: var(--akzent); stroke: var(--akzent); }
.abhaken--laeuft .abhaken-haken { opacity: 1; stroke: #fff; }
.karte--dringend .abhaken--laeuft .abhaken-kreis { fill: var(--warn); stroke: var(--warn); }
/* erledigt = gruen (Ampel-Semantik) */
.abhaken--erledigt { color: var(--gruen); }
.abhaken--erledigt:hover { background: var(--gruen-ton); }

/* --- Checkliste: Zeilen mit Haarlinien-Trennern --- */
.checkliste-punkt {
  display: flex; align-items: center; gap: 12px;
  padding: 6px 0;
  border-bottom: 1px solid var(--line);
}
.checkliste-punkt:last-child { border-bottom: none; }
.checkliste-punkt-text { flex: 1; font-weight: 400; }
.checkliste-punkt--erledigt .checkliste-punkt-text { color: var(--muted); text-decoration: line-through; }
.checkliste-liste { list-style: none; margin: 0; padding: 0; }
.checkliste-punkt form { display: flex; flex: none; margin: 0; }

/* --- Auftragsakte --- */
.akte-kopf { margin-bottom: 14px; display: flex; flex-direction: column; gap: 8px; }
.akte-held { margin: 4px 0 0; display: flex; flex-direction: column; gap: 3px; }
.akte-held-zahl {
  font-size: 38px; line-height: 1.05; font-weight: 500;
  letter-spacing: -.025em; font-variant-numeric: tabular-nums;
  color: var(--head);
}
.akte-held-zahl--gruen { color: var(--gruen); }
.akte-held-von { font-size: 22px; font-weight: 500; color: var(--muted); }
.akte-held-label { font-size: 13px; line-height: 18px; font-weight: 400; color: var(--muted); }
.kopf-zeile { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.kopf-zeile h1 { margin: 0; font-size: 27px; line-height: 1.15; letter-spacing: -.018em; }
.akte-leistung { margin: 0; color: var(--fg); }
.akte-meta { margin: 0; font-size: 13px; line-height: 19px; color: var(--muted); }
.akte-kopf .kontakt { margin: 0; color: var(--fg); font-size: 14px; }
.akte-kopf .kontakt a { color: var(--akzent-ink); }
.akte-kopf .leistung { margin: 0; font-size: 15px; color: var(--fg); }
.akte-aktionen { display: flex; flex-wrap: wrap; gap: 8px; }
.akte-fertig { display: flex; align-items: center; gap: 10px; margin: 0; color: var(--gruen-ink); }
.akte-fertig .icon { flex: none; }
.akte-fuss { display: flex; flex-direction: column; align-items: stretch; gap: 12px; margin-top: 32px; }
.karte--formular { box-shadow: 0 0 0 2px var(--akzent-ton-hover), var(--schatten-karte); }
.nudge-aktionen { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.aktionszeile {
  display: flex; flex-direction: column; gap: 12px;
  background: var(--surface); border: none; border-radius: var(--r-karte);
  box-shadow: var(--schatten-karte);
  padding: 16px; margin: 14px 0;
}
.warten-form button { align-self: flex-end; }
.warten-frei { border-bottom: none; }
.warten-speichern { margin-top: 4px; }

.aufklapp summary {
  display: flex; align-items: center; gap: 8px;
  min-height: 44px; padding: 4px 0;
  font-size: 14px; font-weight: 500; color: var(--akzent-ink);
  cursor: pointer; list-style: none;
}
.aufklapp summary::-webkit-details-marker { display: none; }
.aufklapp[open] > summary { color: var(--muted); }
.aufklapp form { padding: 4px 0 8px; }

/* Segmente (Bewertung): Pillen-Gruppe auf kuehler Tonflaeche */
.segmente {
  display: flex; width: 100%; gap: 2px;
  background: var(--ton-kuehl);
  border: none; border-radius: var(--r-pille);
  padding: 3px;
  overflow: hidden;
}
.segment {
  flex: 1; min-height: 42px; padding: 8px 4px;
  border: none; border-radius: var(--r-pille);
  background: transparent; color: var(--muted);
  font: inherit; font-size: 14px; font-weight: 400; cursor: pointer;
  white-space: nowrap;
}
.segment:hover { color: var(--head); }
.segment--aktiv, .segment--aktiv:hover { background: var(--surface); color: var(--head); box-shadow: var(--schatten-innen); }

/* Geld-Zeilen */
.geld-zeile {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 9px 0; border-bottom: 1px solid var(--line);
}
.geld-zeile:last-of-type { border-bottom: none; }
.geld-label { display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 400; color: var(--fg); }
.geld-wert { font-size: 17px; font-weight: 500; font-variant-numeric: tabular-nums; white-space: nowrap; letter-spacing: -.01em; color: var(--head); }
.geld-datum { font-size: 13px; font-weight: 400; color: var(--muted); }
.geld-zeile--gruen .geld-label, .geld-zeile--gruen .geld-wert { color: var(--gruen-ink); }
.geld-offen { margin: 0; font-size: 13px; color: var(--muted); }

/* Fotos in der Akte */
.foto-zelle { margin: 0; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.foto-link { position: relative; display: block; border: none; border-radius: var(--r-innen); overflow: hidden; background: var(--ton-kuehl); }
.foto-link img { display: block; width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 0; }
.foto-pdf {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
  aspect-ratio: 1; padding: 8px; text-align: center;
  background: var(--akzent-ton); color: var(--akzent-ink); font-size: 12px;
}
.foto-pdf-name {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden; word-break: break-word;
}
.foto-fuss { display: flex; align-items: center; justify-content: space-between; gap: 4px; flex-wrap: wrap; font-size: 12px; }
.foto-fuss form { margin: 0; }
.foto-fuss label { flex-direction: row; align-items: center; gap: 6px; font-weight: 400; font-size: 12px; min-height: 44px; cursor: pointer; }
.foto-fuss input[type="checkbox"] { width: 20px; height: 20px; min-height: 0; }
.foto-datum { color: var(--muted); }
.foto-loeschen { display: flex; align-items: center; justify-content: center; width: 36px; height: 44px; color: var(--muted); }
.foto-loeschen:hover { color: var(--warn); }
.upload-form { margin-top: 12px; }

/* Zeitleiste: Notizen als kuehle Tonflaechen-Blasen (Radius 15), System klein */
.zeitleiste { list-style: none; margin: 0; padding: 0; }
.zeitleiste-eintrag {
  background: var(--ton-kuehl);
  border: none;
  border-radius: var(--r-innen);
  padding: 10px 14px; margin: 8px 0;
}
.zeitleiste-eintrag.system, .zeitleiste-eintrag--system {
  background: none; border-radius: 0;
  border-left: 2px solid var(--line);
  padding: 2px 0 2px 12px;
  color: var(--fg); font-size: 13px;
}
.zeitleiste-eintrag .meta { font-size: 12px; color: var(--muted); }
.zeitleiste-eintrag p { margin: 2px 0 0; white-space: pre-line; word-break: break-word; }
.zeitleiste-eintrag--foto { display: flex; gap: 10px; align-items: center; }
.zeitleiste-eintrag--foto p { margin: 0; }
.zeitleiste-thumb { display: block; width: 44px; height: 44px; object-fit: cover; border-radius: 12px; border: none; }
.notiz-form { margin-bottom: 14px; }

/* --- Geld-Kacheln: Umsatz-Held auf Mint, andere weiss; Unterzeile als
   Tonflaechen-Pille --- */
.kacheln, .kachel-raster { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.kachel {
  display: flex; flex-direction: column; align-items: flex-start; gap: 6px;
  background: var(--surface);
  border: none; border-radius: var(--r-karte);
  box-shadow: var(--schatten-karte);
  padding: 18px;
  margin: 0;
}
.kachel-titel, .kachel-label { font-size: 13px; line-height: 18px; font-weight: 400; color: var(--muted); }
.kachel-wert, .kachel > strong {
  font-size: 24px; line-height: 1.2; font-weight: 500;
  font-variant-numeric: tabular-nums; letter-spacing: -.02em;
  color: var(--head);
}
.kachel-unterzeile, .kachel-sub {
  font-size: 13px; line-height: 18px;
  background: var(--akzent-ton); color: var(--akzent-ink);
  padding: 4px 12px; border-radius: var(--r-pille);
}
.kachel--hero { grid-column: 1 / -1; background: var(--ton-geld); box-shadow: none; padding: 20px 18px; }
.kachel--hero .kachel-wert { font-size: 42px; line-height: 1.1; letter-spacing: -.025em; }
.kachel--hero .kachel-unterzeile { background: rgb(255 255 255 / .72); color: var(--gruen-ink); }
.kachel--rot .kachel-wert { color: var(--warn); }
.kachel--rot .kachel-unterzeile { background: var(--warn-ton); color: var(--warn); }
.kachel--gruen .kachel-wert { color: var(--gruen); }
a.kachel, .kachel--link { text-decoration: none; color: inherit; }
.kachel-link-hinweis {
  display: inline-flex; align-items: center; gap: 2px;
  margin-top: 2px;
  font-size: 13px; line-height: 18px; font-weight: 500;
  color: var(--akzent-ink);
}

/* --- Zahlen: 6-Monats-Balken. Nur der aktuelle Monat traegt Akzent --- */
.balken-zeile {
  display: grid; grid-template-columns: minmax(76px, auto) 1fr max-content;
  gap: 10px; align-items: center;
  padding: 7px 0;
  font-size: 13px; line-height: 18px;
}
.balken-monat { color: var(--fg); }
.balken-zeile--aktuell { font-weight: 500; }
.balken-zeile--aktuell .balken-monat, .balken-zeile--aktuell .balken-wert { color: var(--head); }
.balken-spur {
  height: 16px; border-radius: var(--r-pille);
  background: var(--ton-kuehl);
  border: none;
  overflow: hidden;
}
.balken { height: 100%; border-radius: var(--r-pille); background: #D9D9E6; }
.balken--aktuell { background: var(--akzent); }
.balken-spur--leer {
  height: 2px; align-self: center;
  background: var(--line); border: none;
}
.balken-wert {
  text-align: right; white-space: nowrap;
  color: var(--fg); font-variant-numeric: tabular-nums;
}
.balken-wert--leer { color: var(--muted); }

/* --- Admin-Monatsliste + Monats-Abrechnung --- */
.monat-karte { gap: 4px; }
.monat-name { font-size: 18px; line-height: 24px; font-weight: 500; letter-spacing: -.01em; color: var(--head); }
.monat-meta { font-size: 14px; color: var(--fg); }
.monat-rechnung {
  display: flex; align-items: center; gap: 4px;
  font-weight: 500; color: var(--akzent-ink); font-variant-numeric: tabular-nums;
}
.monat-kopf {
  display: flex; align-items: center; justify-content: space-between;
  gap: 8px; flex-wrap: wrap;
  margin: 4px 0 8px;
}
.monat-zurueck {
  display: inline-flex; align-items: center; gap: 6px;
  min-height: 44px;
  font-size: 14px; font-weight: 500;
  color: var(--fg); text-decoration: none;
}
.monat-zurueck:hover { color: var(--head); }
.monat-blaetterer { display: flex; gap: 8px; flex-wrap: wrap; }
.monat-aktionen { display: flex; align-items: center; gap: 12px; margin: 0 0 4px; }
.monat-aktionen .knopf { flex: 1; }
.monat-aktionen .knopf--pille { flex: none; }
.monat-posten-leistung { font-size: 14px; color: var(--fg); }
.monat-posten-geld { font-variant-numeric: tabular-nums; }
.monat-posten-geld strong { font-weight: 500; }
/* Summenkarte randlos als Akzent-Tonflaeche (der Look kennt keine harten
   Raender am Screen); die Druck-Abschlusslinie stellt @media print wieder her */
.monat-summe { border: none; background: var(--akzent-ton); box-shadow: none; font-variant-numeric: tabular-nums; gap: 2px; }
.monat-summe-provision { font-size: 21px; line-height: 26px; font-weight: 500; letter-spacing: -.01em; color: var(--akzent-ink); }
.monat-tabelle { display: none; }
.rechnungsbetrag { font-size: 17px; margin: 12px 0 0; }
.rechnungsbetrag strong { color: var(--akzent-ink); }

/* --- Referenzen --- */
.referenz-kopf { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
.referenz-kopf-text { min-width: 0; }
.referenz-kopf .knopf--pille { flex: none; }
.referenz-kunde { margin: 0; font-size: 18px; line-height: 24px; font-weight: 500; color: var(--head); }
.referenz-meta { margin: 2px 0 0; font-size: 14px; color: var(--fg); }
.referenz-foto { margin: 0; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.referenz-bild { display: block; border-radius: var(--r-innen); overflow: hidden; }
.referenz-bild img { border: none; display: block; }
.referenz-datei {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
  aspect-ratio: 1; padding: 8px;
  border: none; border-radius: var(--r-innen);
  background: var(--akzent-ton); color: var(--akzent-ink);
  text-decoration: none; font-size: 12px; line-height: 16px; text-align: center;
}
.referenz-datei-name {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden; word-break: break-word;
}
.referenz-caption { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; }
.referenz-datum { font-size: 12px; color: var(--muted); }
.referenz-caption .knopf--pille { min-height: 32px; padding: 5px 12px; font-size: 12px; gap: 4px; }

/* --- Login --- */
.login-karte { max-width: 360px; margin: 44px auto 0; gap: 4px; padding: 26px 22px; }
.login-marke {
  font-size: 27px; line-height: 1.15; font-weight: 500; letter-spacing: -.018em;
  color: var(--head);
  text-align: center; margin: 8px 0 0;
}
.login-unterzeile { margin: 4px 0 14px; text-align: center; font-size: 14px; color: var(--fg); }
.login-karte .stack { gap: 14px; }
.login-logo { display: block; margin: 4px auto 8px; height: 48px; max-width: 220px; width: auto; object-fit: contain; }
.login-hilfe { margin: 20px auto 0; text-align: center; font-size: 14px; }
.login-hilfe a { color: var(--muted); text-decoration: underline; text-underline-offset: 3px; }
.login-hilfe a:hover { color: var(--head); }

/* --- Leerzustand: Icon im Ton-Kreis --- */
.leer {
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  padding: 26px 16px;
  text-align: center;
  color: var(--fg);
  font-style: normal;
}
.leer-icon {
  display: flex; align-items: center; justify-content: center;
  width: 56px; height: 56px;
  border-radius: 50%;
  background: var(--ton-kuehl); color: var(--muted);
}
.leer-titel { color: var(--head); font-weight: 500; }
.leer-text { max-width: 40ch; font-size: 14px; line-height: 20px; }

/* --- Foto-Raster --- */
.foto-raster { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 0 0 12px; }
.foto-raster img { display: block; width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: var(--r-innen); }
.foto-referenz {
  position: absolute; left: 6px; bottom: 6px;
  font-size: 11px; font-weight: 500;
  background: rgb(255 255 255 / .92); color: var(--gruen-ink);
  padding: 3px 8px; border-radius: var(--r-pille);
}

/* --- Pipeline: Spalten als kuehle Tonflaechen, Karten weiss darauf --- */
.pipeline {
  display: flex; gap: 12px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  margin: 0 -16px; padding: 0 16px 8px;
}
.spalte, .pipeline-spalte {
  flex: 0 0 84vw; max-width: 320px;
  scroll-snap-align: start;
  background: var(--ton-kuehl);
  border: none; border-radius: var(--r-karte);
  padding: 12px;
}
.spalte .karte, .pipeline-spalte .karte { margin: 0 0 10px; box-shadow: var(--schatten-innen); }
.spalten-kopf, .spaltenkopf {
  position: sticky; top: 0; z-index: 1;
  display: flex; align-items: center; gap: 8px;
  background: inherit;
  margin: -4px -4px 8px; padding: 6px 6px 8px;
}
.spalten-kopf h2, .spaltenkopf h2 { margin: 0; color: var(--fg); }
.spalten-zaehler {
  font-size: 12px; font-weight: 500;
  background: var(--surface); color: var(--fg);
  padding: 2px 9px; border-radius: var(--r-pille);
}
.spalten-summe {
  margin-left: auto;
  font-size: 12px; font-weight: 500; color: var(--muted);
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.spalten-summe--gruen { color: var(--gruen-ink); }
.pipeline-spalte .leer { padding: 20px 8px; font-size: 14px; }
.pipeline-spalte .leer-icon { background: var(--surface); }
.pipeline-spalte .plakette { white-space: normal; }

.punkte { display: flex; justify-content: center; gap: 8px; padding: 12px 0 0; }
.punkt { width: 7px; height: 7px; border-radius: 50%; background: var(--line); }
.punkt--aktiv { background: var(--akzent); }
.pipeline-aktionen { display: flex; justify-content: center; margin: 16px 0 8px; }

/* --- Tabellen: scrollen im eigenen Container, nie die Seite --- */
.tabellen-scroller { overflow-x: auto; }
.tabelle, table.liste { width: 100%; border-collapse: collapse; margin: 12px 0; font-size: 14px; }
.tabelle th, .tabelle td,
table.liste th, table.liste td {
  text-align: left; padding: 8px 6px;
  border-bottom: 1px solid var(--line);
}
.tabelle th, table.liste th { font-weight: 500; color: var(--fg); }
.tabelle th:not(.num), .tabelle td:not(.num),
table.liste th:not(.num), table.liste td:not(.num) { word-break: break-word; }
.tabelle .num, table.liste .num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.tabelle tfoot td, table.liste tfoot td { border-top: 2px solid var(--head); border-bottom: none; font-weight: 500; }

/* --- Termin-Uebersicht --- */
/* Termin-Haken: abgehakt = erledigt = gruen (Ampel-Semantik); gewinnt auch
   gegen die Akzent-/Warn-Regeln oben (deshalb Attribut-Selektor + Kontext) */
.termin-haken { margin: 10px; flex: none; }
input[type="checkbox"].termin-haken:checked,
.karte--dringend input[type="checkbox"].termin-haken:checked {
  background-color: var(--gruen); border-color: var(--gruen);
}
.termin-text {
  display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px;
  padding: 8px 0; min-width: 0;
  color: inherit; text-decoration: none;
}
.termin-zeit { color: var(--fg); font-variant-numeric: tabular-nums; white-space: nowrap; }
.termin-details {
  flex-basis: 100%; color: var(--fg);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.termin-hinweis { display: flex; align-items: center; gap: 8px; margin: 0 0 4px; font-size: 13px; font-weight: 500; color: var(--warn); }
.termine-abo { text-align: center; margin: 24px 0 0; }
.termin-kalender { font-size: 13px; font-weight: 400; color: var(--muted); gap: 4px; padding: 6px 0; }

/* --- Posteingang --- */
.entwurf-text { white-space: pre-line; word-break: break-word; }
.entwurf-felder { display: flex; flex-direction: column; gap: 2px; margin: 0; }
.entwurf-feld { display: flex; gap: 8px; font-size: 14px; line-height: 20px; }
.entwurf-feld dt { flex: none; min-width: 64px; color: var(--muted); }
.entwurf-feld dd { margin: 0; word-break: break-word; }
.entwurf-roh {
  margin: 0; padding: 12px 14px;
  background: var(--ton-kuehl); border: none; border-radius: var(--r-innen);
  font: inherit; font-size: 13px; line-height: 18px; color: var(--fg);
  white-space: pre-wrap; word-break: break-word;
  max-height: 320px; overflow-y: auto;
}
.entwurf-aktionen { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
.entwurf-aktionen form { margin: 0; }

/* --- Fruehere Auftraege (Kundenhistorie) --- */
.fruehere-liste { list-style: none; margin: 0; padding: 0; }
.fruehere-zeile {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 10px 0; border-bottom: 1px solid var(--line);
  color: inherit; text-decoration: none;
}
.fruehere-liste li:last-child .fruehere-zeile { border-bottom: none; }
.fruehere-links { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.fruehere-leistung {
  font-size: 15px; font-weight: 500; color: var(--head);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.fruehere-meta { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--muted); }
.fruehere-betrag { font-size: 15px; font-weight: 500; font-variant-numeric: tabular-nums; white-space: nowrap; color: var(--head); }

/* --- Abschnitts-Kopfzeile mit Aktion --- */
.abschnitt-kopf { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.abschnitt-kopf .abschnitt-titel { flex: 1; min-width: 0; }
.abschnitt-aktion { font-size: 13px; font-weight: 500; text-decoration: none; white-space: nowrap; color: var(--fg); }
.abschnitt-aktion:hover { color: var(--head); }

/* --- Hilfe --- */
.hilfe-text { margin: 0; line-height: 22px; }

/* --- Design-Einstellungen + Branding --- */
.logo-vorschau {
  display: flex; justify-content: flex-start; padding: 12px;
  background: var(--ton-kuehl); border: none; border-radius: var(--r-innen);
}
.logo-vorschau img { display: block; height: 56px; max-width: 100%; width: auto; object-fit: contain; }
.logo-leer { margin: 0; color: var(--muted); font-size: 14px; }
.farbe-zeile { display: flex; align-items: center; gap: 12px; border-bottom: none; }
.farbe-zeile input[type="color"] {
  flex: none; width: 56px; height: 50px; padding: 6px;
  border: none; border-radius: var(--r-innen); background: var(--ton-kuehl); cursor: pointer;
}
.farbe-vorschau { pointer-events: none; flex: none; }

/* ============ 5. Bewegung, komplett hinter reduced-motion ============ */
@media (prefers-reduced-motion: no-preference) {
  .knopf, .knopf--sekundaer, .knopf--gefahr, .abhaken, .abmelden, .tab, .tab-icon,
  .tab-neu-kreis, .hinweis-schliessen, .wahl-chip span, .segment,
  .kopf-suche, .kopf-einstellungen {
    transition: background-color .15s ease, border-color .15s ease, color .15s ease, transform .1s ease;
  }
  .knopf:active, .tab--neu:active .tab-neu-kreis { transform: scale(.97); }
  .abhaken:active { transform: scale(.92); }

  .karte--link, a.karte, .karte:has(.karte-link-flaeche) {
    transition: box-shadow .18s ease, transform .18s ease;
  }
  a.karte:hover, .karte--link:hover, .karte:has(.karte-link-flaeche:hover) {
    box-shadow: var(--schatten-hover);
    transform: translateY(-1px);
  }

  .fortschritt-balken { transition: width .4s ease; }
  .balken { animation: balken-wachsen .5s ease; }
  .toast { animation: toast-rein .25s ease, toast-raus .3s ease 3s forwards; }
  .abhaken--laeuft .abhaken-haken {
    stroke-dasharray: 14; stroke-dashoffset: 14;
    animation: haken-zeichnen .25s ease forwards;
  }
  .checkliste-punkt--frisch { animation: frisch-fade .8s ease; }
}
@keyframes toast-rein { from { opacity: 0; transform: translateY(8px); } }
@keyframes toast-raus { to { opacity: 0; visibility: hidden; } }
@keyframes haken-zeichnen { to { stroke-dashoffset: 0; } }
@keyframes frisch-fade { 0%, 50% { background-color: var(--gruen-ton); } 100% { background-color: transparent; } }
@keyframes balken-wachsen { from { width: 0; } }

/* ============ 6. Breakpoints ============ */
@media (min-width: 768px) {
  .foto-raster { grid-template-columns: repeat(4, 1fr); }
  .monat-karten { display: none; }
  .monat-tabelle { display: block; }
}
@media (min-width: 1024px) {
  .pipeline {
    display: grid;
    grid-template-columns: repeat(6, minmax(190px, 1fr));
    overflow-x: auto; scroll-snap-type: none;
    margin: 0; padding: 0 0 8px;
  }
  .spalte, .pipeline-spalte { flex: none; max-width: none; }
  .pipeline--erweitert { grid-template-columns: repeat(8, minmax(190px, 1fr)); }
  .pipeline .karte { padding: 14px; }
  .pipeline .naechster-schritt { padding: 8px 10px 8px 8px; gap: 8px; }
  .pipeline .naechster-schritt-label { white-space: normal; }
  .pipeline .naechster-schritt-punkt { font-size: 14px; line-height: 20px; }
  .pipeline .spalten-kopf { flex-wrap: wrap; }
}

/* ============ 7. Druck (Monats-Abrechnung): nur Inhalt, keine Bedienung ============ */
@media print {
  .kopfzeile, .tab-leiste, .toast, .druck-verstecken, .no-print { display: none !important; }
  .tabellen-scroller { overflow: visible; }
  .monat-karten { display: none !important; }
  .monat-tabelle { display: block !important; }
  body { background: #fff; }
  .karte, .card { border: none; box-shadow: none; padding: 0; }
  /* Gedruckte Abrechnung behaelt ihre Abschlusslinie ueber der Summe */
  .monat-summe { border-top: 1.5px solid #000; border-radius: 0; background: #fff; }
  .monat-summe-provision { color: #000; }
  main { max-width: none; padding: 0; }
  a { color: inherit; text-decoration: none; }
}

/* ============ 8. Kompatibilitaet (Alt-Klassen und nackte Elemente) ============ */
button {
  font: inherit; cursor: pointer;
  border: 1px solid var(--line); border-radius: var(--r-pille);
  background: var(--surface); color: var(--head);
  padding: 11px 18px; min-height: 48px; font-weight: 500;
}
button:hover { background: var(--ton-kuehl); }
button.primary, .primary {
  background: var(--akzent); border-color: var(--akzent); color: #fff;
  font-weight: 500; padding: 11px 20px;
  text-decoration: none; display: inline-block; text-align: center;
  border-radius: var(--r-pille);
}
button.primary:hover, .primary:hover { background: var(--akzent-tief); border-color: var(--akzent-tief); }
.block-btn { display: block; width: 100%; margin: 16px 0 4px; }
button.link, .link {
  background: none; border: none;
  color: var(--akzent-ink); text-decoration: underline; text-underline-offset: 3px;
  padding: 10px 6px; min-height: 44px;
  display: inline-flex; align-items: center;
  font-weight: 500; cursor: pointer;
}
button.danger { background: var(--warn); border-color: var(--warn); color: #fff; }
button.link.danger, a.danger, .link.danger { background: none; color: var(--warn); }
.abmelden, .abhaken, .hinweis-schliessen { border: none; }
.abmelden { background: none; min-height: 44px; padding: 10px 4px; font-weight: 400; }
.abhaken { background: none; min-height: 44px; padding: 0; }
.hinweis-schliessen { background: none; }

.stack { display: flex; flex-direction: column; gap: 12px; }
fieldset { border: 1px solid var(--line); border-radius: var(--r-innen); padding: 12px; margin: 0; }
legend { font-weight: 500; font-size: 14px; padding: 0 6px; }
input[type="file"] { padding: 8px; background: var(--akzent-ton); }
.row { display: flex; gap: 10px; align-items: flex-end; flex-wrap: wrap; }
.row.spread { justify-content: space-between; align-items: center; }
.grow { flex: 1; min-width: 180px; }
.hinweis { color: var(--fg); font-size: 14px; }
.opt { color: var(--muted); font-weight: 400; font-size: 12px; text-transform: none; letter-spacing: 0; }
.hervor { color: var(--akzent-ink); }
.card.hervor { box-shadow: 0 0 0 2px var(--akzent-ton-hover), var(--schatten-karte); color: inherit; }
.card.ueberfaellig { box-shadow: 0 0 0 2px var(--warn-ton-hover), var(--schatten-karte); }
.loeschen-bestaetigen { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.phase-form select { padding: 7px 12px; font-size: 14px; min-height: 44px; }
.ruhende-link { display: inline-block; margin-top: 10px; }
.ruhende h2 { margin-top: 1.6em; }

/* Alt-Badges: gleiche Sprache wie die Plaketten */
.badge {
  font-size: 12px; font-weight: 500; padding: 4px 12px; border-radius: var(--r-pille);
  white-space: nowrap;
  background: none; border: 1px solid var(--line); color: var(--muted);
}
.badge.warten { background: var(--warte-ton); border-color: transparent; color: var(--warte-ink); }
.badge.phase-anfrage, .badge.phase-angebot { background: var(--akzent-ton); border-color: transparent; color: var(--akzent-ink); }
.badge.phase-beauftragt, .badge.phase-in_arbeit { background: var(--warte-ton); border-color: transparent; color: var(--warte-ink); }
.badge.phase-rechnung { background: var(--warn-ton); border-color: transparent; color: var(--warn); }
.badge.phase-bezahlt { background: var(--gruen-ton); border-color: transparent; color: var(--gruen-ink); }
.badge.phase-verloren { background: none; color: var(--muted); }

/* Alt-Dashboard-Reste */
.abschnitt.ueberfaellig .karte .naechster-schritt { background: var(--warn-ton); }
.abschnitt.ueberfaellig .hinweis { color: var(--warn); }
.abschnitt.termine .karte { box-shadow: var(--schatten-karte); }
.karte.mini { gap: 2px; }
.karte .leistung { color: var(--fg); font-size: 14px; }
.karte .hinweis { font-size: 13px; }
.karte .betrag { font-weight: 500; font-variant-numeric: tabular-nums; }
.karte .badge { align-self: flex-start; }
.karte-link { text-decoration: none; color: inherit; display: flex; flex-direction: column; gap: 2px; }

/* Alt-Akte-Reste */
.warten-form button { align-self: flex-end; }
.checkliste-punkte, .termin-liste, .datei-liste { list-style: none; margin: 0 0 12px; padding: 0; }
.checkliste-punkte li, .termin-liste li { border-bottom: 1px solid var(--line); padding: 2px 0; }
.checkliste-punkte label, .termin-liste label {
  flex-direction: row; align-items: center; gap: 10px;
  font-weight: 400; padding: 11px 2px; cursor: pointer;
  border-bottom: none;
}
.checkliste-punkte li.erledigt label, .termin-liste li.erledigt label {
  color: var(--muted); text-decoration: line-through;
}
.termin-liste li.erledigt strong { font-weight: 400; }
.betraege-tabelle { width: 100%; border-collapse: collapse; margin: 0 0 10px; font-size: 14px; }
.betraege-tabelle th, .betraege-tabelle td { text-align: left; padding: 8px 6px; border-bottom: 1px solid var(--line); }
.betraege-tabelle th { font-weight: 500; color: var(--fg); width: 45%; }
.gefahr { margin-top: 28px; }
.datei-liste li {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  border-bottom: 1px solid var(--line); padding: 8px 2px;
}
.datei-liste a { color: var(--akzent-ink); word-break: break-word; }
.datei-liste form { margin-left: auto; }

/* Alt-Fotos (figure-Zellen) */
.foto { margin: 0; background: var(--surface); border: none; border-radius: var(--r-innen); overflow: hidden; box-shadow: var(--schatten-innen); }
.foto img { display: block; width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 0; }
.foto-platzhalter {
  display: flex; align-items: center; justify-content: center; text-align: center;
  aspect-ratio: 1; padding: 8px; font-size: 12px; word-break: break-word;
  background: var(--akzent-ton); color: var(--akzent-ink);
}
.foto figcaption { display: flex; justify-content: space-between; align-items: center; gap: 14px; padding: 0 8px; }
.foto figcaption label { flex-direction: row; align-items: center; gap: 6px; font-weight: 400; font-size: 12px; cursor: pointer; min-height: 44px; }
.foto figcaption .link { font-size: 12px; padding: 10px 4px; }
@media (max-width: 480px) {
  table.liste { font-size: 12px; }
  .row > button, .row > .primary { width: 100%; }
  .row > form { width: 100%; }
  .row > form button { width: 100%; }
  .row.kompakt > button, .row.kompakt > .primary, .row.kompakt > form { width: auto; }
}

/* Kachel-Fortschrittsbalken (Provisions-Deckel): Spur kuehl, Fuellung Akzent,
   bei erreichtem Maximum gruen (Ziel erreicht, keine Warnung). */
.kachel-balken {
  height: 6px; margin: 2px 0 4px; border-radius: 100px;
  background: var(--kuehl-ton, #EFEFF7); overflow: hidden;
}
.kachel-balken-wert {
  display: block; height: 100%; border-radius: 100px;
  background: var(--akzent);
}
.kachel-balken-wert--voll { background: var(--gruen, #0F9D6E); }