@font-face {
  font-family: "Overused Grotesk";
  src: url("assets/fonts/OverusedGrotesk-VF.woff2") format("woff2-variations");
  font-weight: 300 900;
  font-style: normal;
  font-display: swap;
}

:root {
  --red: #ff393a;
  --red-action: #d5222d;
  --red-deep: #bf111b;
  --red-soft: #fff0f0;
  --ink: #141e28;
  --ink-70: #4c535b;
  --ink-50: #626a72;
  --paper: #fff;
  --mist: #f4f4f4;
  --mist-2: #f8f8f7;
  --border: #d7d7d7;
  --border-soft: #ececeb;
  /* Rand einer Karte am Telefon (Claude Design): zwischen leise und Linie. */
  --border-card: #e3e3e1;
  /* Rand umrandeter Bedienelemente am Telefon: 3,4:1 auf Weiss statt 1,4:1.
     Der Desktop benutzt ihn (noch) nicht. */
  --border-control: #868b91;
  --green: #00763d;
  --green-soft: #eaf7f0;
  --amber: #a86600;
  --amber-soft: #fff5dc;
  --blue: #0a5ba8;
  --blue-soft: #edf5fc;

  /* --- Typo-Skala ---------------------------------------------------------
     Vorher standen hier vierundzwanzig verschiedene font-size-Werte, davon
     neun Stufen zwischen 9px und 13px. Ein halber Pixel Unterschied ist nicht
     lesbar: Er leistet keine Hierarchie, kostet aber an jeder Kante
     Einheitlichkeit. Und 230 von rund 310 Angaben lagen unter 12px - zu klein
     fuer ein Werkzeug, in dem jemand den ganzen Tag arbeitet. Die mobile
     Ansicht war hier laengst weiter (dort dominiert 12px); der Desktop zieht
     nach. Untergrenze ist 12px fuer alles, was gelesen wird; 11px bleibt den
     Versalien-Labels vorbehalten, die man ueberfliegt statt liest. */
  --text-xs: 11px;    /* nur Versalien-Labels: Tabellenkoepfe, dt, Chips */
  --text-sm: 12px;    /* Sekundaerzeilen, Tabellenzellen, Hilfstexte */
  --text-base: 14px;  /* Fliesstext, Eingaben, Knoepfe */
  --text-lg: 17px;    /* Kartenueberschriften */
  --text-xl: 22px;    /* Abschnittstitel */
  --text-2xl: 29px;   /* Seitentitel */

  /* --- Abstandsraster -----------------------------------------------------
     Neunzehn verschiedene gap-Werte, darunter 3, 5, 7, 9, 11 und 22px, waren
     der Grund, warum an vielen Kanten etwas "fast, aber nicht ganz"
     ausgerichtet wirkte. Ein Vierer-Raster raeumt das auf. */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;

  /* --- Radien -------------------------------------------------------------
     Zehn Werte zwischen 6px und 14px, die sich paarweise nicht unterscheiden
     liessen. Drei reichen: Flaeche, Karte, Pille. */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-pill: 999px;
  --font: "Overused Grotesk", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --shadow: 0 10px 28px rgba(20, 30, 40, 0.09), 0 2px 5px rgba(20, 30, 40, 0.05);
  /* Aufgehellte Varianten der Statusfarben. Auf dem dunklen Kopf der
     Kundenakte traegt keine der Grundfarben genug Kontrast. */
  --red-on-ink: #ff8d8f;
  --red-on-ink-soft: rgba(255, 57, 58, .20);
  --amber-on-ink: #f7c47a;
  --amber-on-ink-soft: rgba(168, 102, 0, .30);
  --blue-on-ink: #a8c6ff;
  --blue-on-ink-soft: rgba(10, 91, 168, .34);
  --amber-canvas: #fffaf0;
  /* Trennlinie im Speicherkasten, aus dem Blau der Fläche abgeleitet. */
  --blue-line: rgba(10, 91, 168, .16);
  /* Runde 2, nur am Telefon benutzt: Rand blauer Flaechen (Als Nächstes),
     Rand zerstoerender Knoepfe (3,46:1 auf Weiss), ein ausgegrautes Symbol. */
  --blue-edge: #c3d9ef;
  --red-line: #d9666d;
  --ink-off: #9aa0a6;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
section[id] { scroll-margin-top: 76px; }
body {
  margin: 0;
  min-width: 320px;
  /* Das Fundament der Typo-Skala. Ohne diese Zeile erbte jeder Text ohne
     eigene Angabe den Browserdefault von 16px - eine Groesse, die in der
     Skala nicht vorkommt. Sichtbar wurde es in der Restliste des
     Wochenplans: ein 12px-Prueferstellenname direkt neben "· 2 Kunden" in
     16px, auf derselben Zeile. */
  font-size: var(--text-base);
  background: var(--mist-2);
  color: var(--ink);
  font-family: var(--font);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
button, input, select, textarea { font: inherit; }
/* Viele Felder stehen in einem fetten <label> und erbten dessen Gewicht:
   Werte und Platzhalter sahen dann aus wie schon ausgefuellt. */
label input, label select, label textarea { font-weight: 500; }
::placeholder { color: var(--ink-50); font-weight: 400; opacity: 1; }
button, a { -webkit-tap-highlight-color: transparent; }
button { color: inherit; }
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 3px solid rgba(255, 57, 58, 0.3);
  outline-offset: 2px;
}
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.app-header {
  position: sticky;
  top: 0;
  z-index: 20;
  height: 58px;
  padding: 0 clamp(16px, 3vw, 34px);
  display: flex;
  align-items: center;
  gap: 30px;
  background: var(--ink);
  color: #fff;
  box-shadow: 0 6px 18px rgba(20, 30, 40, 0.15);
}
.brand {
  display: flex;
  align-items: center;
  gap: 9px;
  min-width: 240px;
  color: #fff;
  text-decoration: none;
  font-size: var(--text-lg);
  font-weight: 700;
  white-space: nowrap;
}
.brand__logo {
  display: block;
  width: 87px;
  height: 25px;
  flex: 0 0 auto;
}
.brand__divider { opacity: .35; font-weight: 400; }
.brand__name { font-weight: 700; }
.main-nav { display: flex; align-items: center; gap: 4px; }
/* Vier Tabs, aber nur eines ist die Arbeitsfläche. Das Account Management
   steht deshalb vor einem Trenner und traegt etwas mehr Gewicht - was dahinter
   kommt, ist Nachschlagen und Auswertung. */
.main-nav__divider { width: 1px; height: 22px; margin: 0 8px; background: rgba(255,255,255,.16); }
.nav-link--primary { font-weight: 700; }
.nav-link {
  padding: 8px 12px;
  white-space: nowrap;
  border-radius: 999px;
  color: rgba(255,255,255,.64);
  text-decoration: none;
  font-size: var(--text-base);
  font-weight: 600;
  transition: color 140ms ease, background 140ms ease;
}
.nav-link:hover { color: #fff; background: rgba(255,255,255,.07); }
.nav-link.is-active { color: #fff; background: rgba(255,255,255,.12); }
.profile { margin-left: auto; display: flex; align-items: center; gap: 10px; }
.profile__selector { position: relative; display: flex; align-items: center; }
.profile__selector select {
  /* Ohne appearance:none zeichnet der Browser seinen eigenen Pfeil zusaetzlich
     zum ::after-Chevron - das ergab zwei Pfeile nebeneinander. */
  appearance: none;
  -webkit-appearance: none;
  min-height: 36px;
  padding: 0 30px 0 12px;
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 999px;
  background: rgba(255,255,255,.08);
  color: #fff;
  cursor: pointer;
  font-size: var(--text-sm);
  font-weight: 600;
}
.profile__selector::after {
  content: "";
  position: absolute;
  right: 12px;
  width: 6px;
  height: 6px;
  border-right: 1.5px solid rgba(255,255,255,.72);
  border-bottom: 1.5px solid rgba(255,255,255,.72);
  pointer-events: none;
  transform: translateY(-2px) rotate(45deg);
}
.profile__avatar {
  width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center;
  background: #fff; color: var(--ink); font-weight: 750; font-size: var(--text-sm);
}

main { width: min(1680px, 100%); margin: 0 auto; padding: 26px clamp(16px, 2.7vw, 40px) 56px; }
.workspace-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 18px;
}
.workspace-head h1 {
  max-width: 850px;
  margin: 0 0 5px;
  font-size: clamp(24px, 2.2vw, 36px);
  line-height: 1.08;
  letter-spacing: -.028em;
  text-wrap: balance;
}
/* Die Zeile unter der Region ist eine Lagemeldung, kein Fließtext: Ziffern
   laufen in gleicher Breite, damit sie beim Wechsel nicht springen. */
#page-subtitle { color: var(--ink-70); font-variant-numeric: tabular-nums; }
/* Der Info-Punkt ist so klein wie moeglich und so gross wie noetig: 24px
   Trefferflaeche, sichtbar nur als Punkt. */
.page-subtitle-row { position: relative; display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
.info-dot {
  display: inline-flex; align-items: center; justify-content: center;
  width: 17px; height: 17px; padding: 0; border: 1px solid var(--border);
  border-radius: 999px; background: #fff; cursor: help;
  color: var(--ink-50); font-family: inherit; font-size: var(--text-sm); font-weight: 750; line-height: 1;
}
.info-dot::after { content: ""; position: absolute; width: 24px; height: 24px; margin: auto; }
.info-dot:hover, .info-dot:focus-visible { border-color: var(--ink-50); color: var(--ink); }
.info-pop {
  position: absolute; top: calc(100% + 7px); left: 0; z-index: 20;
  max-width: min(460px, calc(100vw - 40px)); padding: 11px 13px;
  border-radius: var(--radius-md); background: var(--ink); color: #fff;
  font-size: var(--text-sm); font-weight: 400; line-height: 1.5; box-shadow: var(--shadow);
}
.info-pop[hidden] { display: none; }

.workspace-head p, .board-head p, .section-heading p {
  margin: 0;
  color: var(--ink-50);
  font-size: var(--text-base);
}
/* Filter und Aktionen bilden eine Bedienzeile: Der Beschriftungstext des Filters
   sitzt oberhalb, die Bedienelemente selbst stehen auf einer gemeinsamen Grundlinie. */
.workspace-head > div:first-child { min-width: 0; }
/* Umbrechen statt ueberstehen: Mit "Woche planen" sind es fuenf Bedienelemente,
   die zwischen Tablet- und Schreibtischbreite nicht mehr in eine Zeile passen. */
.workspace-head__actions { display: flex; align-items: flex-end; gap: 8px; flex-wrap: wrap; flex: 0 1 auto; justify-content: flex-end; }
.workspace-filter[hidden] { display: none; }
.workspace-filter { display: grid; gap: 3px; color: var(--ink-50); font-size: var(--text-xs); font-weight: 750; letter-spacing: .07em; text-transform: uppercase; }
.workspace-filter select { min-width: 176px; min-height: 42px; padding: 0 30px 0 12px; border: 1px solid var(--border); border-radius: 999px; background: #fff; color: var(--ink); cursor: pointer; font-size: var(--text-sm); font-weight: 700; letter-spacing: 0; text-transform: none; }
/* Eine Auswahl von 68 auf 29 Kunden liess sich vorher nicht von der Liste
   selbst ablesen - nur am Regler, den man laengst wieder losgelassen hat. */
.workspace-filter.is-filtered span { color: var(--red-deep); }
.workspace-filter.is-filtered select { border-color: var(--red); background: var(--red-soft); color: var(--red-deep); }
.workspace-filter--inline { display: inline-flex; align-items: center; gap: 10px; }
/* Wie die Planen-Gruppe daneben: die Beschriftung steht im Rahmen statt als
   Ueberzeile, und die Aktionsreihe bildet wieder eine Linie. */
.workspace-filter--pill {
  display: inline-flex; align-items: center; gap: 2px; min-height: 42px; padding: 0 0 0 var(--space-3);
  border: 1px solid var(--border); border-radius: var(--radius-pill); background: var(--paper);
}
.workspace-filter--pill > span { font-size: var(--text-xs); font-weight: 600; letter-spacing: .04em; }
.workspace-filter--pill.is-filtered { border-color: var(--red); background: var(--red-soft); }
.demo-flag {
  height: 32px; display: inline-flex; align-items: center; padding: 0 11px;
  border-radius: 999px; background: var(--amber-soft); color: var(--amber);
  font-size: var(--text-sm); font-weight: 700; letter-spacing: .02em;
}
.demo-flag--live { background: var(--green-soft); color: var(--green); }
.demo-flag--snapshot { background: var(--blue-soft); color: var(--blue); }
.demo-flag--error { background: var(--red-soft); color: var(--red-deep); }

/* Datenstand: unaufdringlich unten in der Ecke. Der Nutzer muss nur wissen, ob
   er den Zahlen trauen kann; welches System dahinter steht, sagt der Tooltip. */
.data-status {
  position: fixed;
  left: clamp(12px, 2.7vw, 26px);
  bottom: 12px;
  z-index: 40;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin: 0;
  padding: 5px 11px 5px 9px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: rgba(255, 255, 255, .92);
  backdrop-filter: blur(6px);
  color: var(--ink-50);
  font-size: var(--text-sm);
  font-weight: 600;
  letter-spacing: .01em;
  cursor: default;
}
.data-status::before {
  content: "";
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--ink-50);
}
.data-status.is-live::before { background: var(--green); }
.data-status.is-partial::before { background: var(--amber); }
.data-status.is-error { border-color: var(--red); color: var(--red-deep); }
.data-status.is-error::before { background: var(--red); }
.data-status.is-loading::before { background: var(--blue); }
/* Anklickbar: die Zeile ist der einzige Ort, an dem die Herkunft der Zahlen
   erklaert wird. Ausserhalb davon taucht kein Systemname mehr auf. */
.data-status { cursor: pointer; font-family: inherit; }
.data-status:hover { border-color: var(--ink-50); color: var(--ink); }
.data-dialog { max-width: 520px; }
.data-dialog__actions { display: flex; justify-content: flex-end; margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--border-soft); }
.score-lead { margin: 0 0 12px; color: var(--ink-70); font-size: var(--text-sm); line-height: 1.5; }

/* Die Erinnerung sitzt ueber dem Faehnchen, in derselben Ecke, damit beides
   als eine Sache gelesen wird. Sie kommt zweimal je Geburtstag und ist danach
   weg - ein Zusatz, kein Hauptfeature, also Papierweiss statt Signalrot. */
.birthday-nudge {
  position: fixed;
  right: clamp(12px, 2.7vw, 26px);
  bottom: 50px;
  z-index: 41;
  display: flex;
  align-items: flex-start;
  gap: 9px;
  width: min(288px, calc(100vw - 32px));
  padding: 12px 13px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: rgba(255, 255, 255, .97);
  backdrop-filter: blur(8px);
  box-shadow: 0 12px 34px rgba(20, 30, 40, .13);
  animation: birthday-nudge-in .28s cubic-bezier(.22, .61, .36, 1);
}
.birthday-nudge[hidden] { display: none; }
.birthday-nudge.is-today { border-color: var(--amber); background: var(--amber-canvas); }
.birthday-nudge__cake { width: 19px; height: 19px; margin-top: 1px; color: var(--amber); }
.birthday-nudge__body { min-width: 0; flex: 1; }
.birthday-nudge strong { display: block; font-size: var(--text-sm); line-height: 1.25; }
.birthday-nudge p { margin: 3px 0 0; color: var(--ink-70); font-size: var(--text-sm); line-height: 1.35; }
.birthday-nudge__hint { color: var(--ink-50) !important; font-size: var(--text-sm) !important; }
.birthday-nudge__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 9px; }
/* Innenpolster plus gleich grosses Negativ-Margin: optisch derselbe Platz,
   aber genug Tippflaeche fuer zwei Finger-Buttons nebeneinander. */
.birthday-nudge__actions a, .birthday-nudge__actions button {
  padding: 13px 4px; margin: -13px -4px; border: 0; background: none; color: var(--red-deep); cursor: pointer;
  font-family: inherit; font-size: var(--text-sm); font-weight: 700;
  text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(199, 20, 30, .35);
}
.birthday-nudge__actions a[hidden] { display: none; }
.birthday-nudge__actions a:hover, .birthday-nudge__actions button:hover { text-decoration-color: currentColor; }
.birthday-nudge__close {
  position: relative;
  flex: 0 0 auto; width: 22px; height: 22px; margin: -3px -4px 0 0;
  border: 0; border-radius: 50%; background: none; color: var(--ink-50);
  cursor: pointer; font-size: var(--text-base); line-height: 1;
}
.birthday-nudge__close:hover { background: var(--mist); color: var(--ink); }
/* Der Kreis bleibt klein und unauffaellig; die unsichtbare Flaeche
   dahinter macht ihn trotzdem mit dem Finger sicher zu treffen. */
.birthday-nudge__close::before {
  content: ""; position: absolute; top: 50%; left: 50%;
  width: 44px; height: 44px; transform: translate(-50%, -50%);
}
@keyframes birthday-nudge-in {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) { .birthday-nudge { animation: none; } }

/* Geburtstage: rechts unten, gegenueber dem Datenstand. Sichtbar genug, um
   daran zu denken, klein genug, um die Arbeitsliste nicht zu verwaessern. */
.birthday-flag {
  position: fixed;
  right: clamp(12px, 2.7vw, 26px);
  bottom: 12px;
  z-index: 40;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  max-width: min(340px, calc(100vw - 32px));
  padding: 5px 12px 5px 9px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: rgba(255, 255, 255, .92);
  backdrop-filter: blur(6px);
  color: var(--ink-70);
  font-family: inherit;
  font-size: var(--text-sm);
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  cursor: pointer;
}
.birthday-flag:hover { border-color: var(--ink-50); color: var(--ink); }
/* display: inline-flex wuerde [hidden] sonst ueberstimmen. */
.birthday-flag[hidden] { display: none; }
/* Gezeichnet statt Emoji: Die Systemtorte sieht auf jedem Betriebssystem
   anders aus und passt zu keinem der ueblichen Strichstaerken. */
.cake-icon {
  flex: 0 0 auto; fill: none; stroke: currentColor;
  stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round;
}
.birthday-flag__cake { width: 14px; height: 14px; }
/* Die Ellipse muss am Textknoten haengen, nicht am Flex-Container - sonst
   wird der Name hart abgeschnitten statt mit Auslassungspunkten gekuerzt. */
#birthday-flag-label { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.birthday-flag.is-today { border-color: var(--amber); background: var(--amber-soft); color: var(--amber); }
.birthday-flag.is-today .birthday-flag__cake { animation: birthday-nudge 2.4s ease-in-out infinite; transform-origin: 50% 80%; }
@keyframes birthday-nudge {
  0%, 72%, 100% { transform: rotate(0deg); }
  78% { transform: rotate(-12deg); }
  84% { transform: rotate(10deg); }
  90% { transform: rotate(-6deg); }
}
@media (prefers-reduced-motion: reduce) { .birthday-flag.is-today .birthday-flag__cake { animation: none; } }
.birthday-dialog { max-width: 560px; }
.birthday-list { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.birthday-list li { display: flex; align-items: center; gap: 10px; padding: 4px 10px 4px 4px; border: 1px solid var(--border-soft); border-radius: 10px; }
.birthday-list li.is-today { border-color: var(--amber); background: var(--amber-soft); }
.birthday-list button {
  flex: 1; display: flex; flex-direction: column; gap: 2px; align-items: flex-start;
  padding: 8px 10px; border: 0; border-radius: 6px; background: transparent;
  font: inherit; color: inherit; text-align: left; cursor: pointer;
}
.birthday-list button:hover { background: rgba(20, 30, 40, .04); }
.birthday-list strong { font-size: var(--text-sm); }
.birthday-list span { color: var(--ink-70); font-size: var(--text-sm); }
.birthday-list small { color: var(--ink-50); font-size: var(--text-sm); }
.birthday-call { padding: 5px 10px; border: 1px solid var(--border); border-radius: 999px; color: var(--ink); font-size: var(--text-sm); font-weight: 700; text-decoration: none; white-space: nowrap; }
.birthday-call:hover { border-color: var(--ink-50); }
#profile-birthday-help { display: block; margin-top: 3px; color: var(--ink-50); font-size: var(--text-sm); line-height: 1.35; }
.data-dialog__lead { margin: 0; font-size: var(--text-base); line-height: 1.5; }
.data-dialog__list { display: grid; gap: 8px; margin: 14px 0 0; }
.data-dialog__list div { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; padding: 9px 12px; border: 1px solid var(--border-soft); border-radius: 10px; }
.data-dialog__list dt { color: var(--ink-70); font-size: var(--text-sm); }
.data-dialog__list dd { margin: 0; color: var(--ink-50); font-size: var(--text-sm); font-weight: 600; text-align: right; }

/* Ladezustand: deckt die Oberfläche ab, bis echte Kundendaten da sind. Vorher
   soll niemand eine Zahl sehen, die noch keine Messung ist. */
/* --- Modale Dialoge ------------------------------------------------------
   Bis hierher verliess sich die Anwendung auf den Browserstandard. Auf dem
   Desktop stimmt der; iOS Safari setzt einen showModal()-Dialog aber relativ
   zum Dokument statt zum sichtbaren Bereich. Wer weit unten auf der Seite
   steht und "Wochenroute" antippt, oeffnet ihn dann weit ueber sich: Der
   Dialog ist offen, sichtbar ist nichts, und es sieht aus, als tue der Knopf
   nichts. Deshalb hier ausdruecklich fixiert.
   dvh statt vh, weil die Adressleiste des Telefons sonst den unteren Rand des
   Dialogs verschluckt - und mit ihm den Schliessen-Knopf. */
dialog[open] {
  position: fixed;
  inset: 0;
  margin: auto;
  max-height: calc(100vh - 24px); max-height: calc(100dvh - 24px);
  overscroll-behavior: contain;
}

/* --- Die Frage vor allem anderen ----------------------------------------
   Vier Ansichten, eine Entscheidung. Kein vorausgewaehltes Gebiet: Wer die
   Karte oeffnet und Frankfurt sieht, obwohl er NRW betreut, liest zwei
   Sekunden lang fremde Zahlen als seine eigenen. Derselbe Grund und
   derselbe Raum wie beim Ladebild, damit der Uebergang eine Bewegung ist
   und kein Schnitt. */
.region-gate {
  position: fixed; inset: 0; z-index: 70;
  display: flex; align-items: center; justify-content: center;
  padding: 24px;
  background:
    radial-gradient(120% 90% at 50% 42%, #ffffff 0%, var(--mist-2) 58%, #f1f1ef 100%);
  transition: opacity .32s ease;
}
.region-gate[hidden] { display: none; }
.region-gate.is-leaving { opacity: 0; pointer-events: none; }
.region-gate__panel { width: min(520px, 100%); text-align: center; }
.region-gate__mark { width: 58px; height: auto; margin: 0 auto 20px; display: block; }
.region-gate__title {
  margin: 0; font-size: clamp(24px, 4.4vw, 36px); font-weight: 600; letter-spacing: -.028em; line-height: 1.08;
}
.region-gate__note {
  margin: 9px auto 26px; max-width: 42ch;
  color: var(--ink-50); font-size: var(--text-sm); line-height: 1.5;
}
.region-gate__options { display: grid; gap: 9px; text-align: left; }
/* Die Anmeldeflaeche traegt Clerks eigenes Formular. Es bringt sein Aussehen
   mit; wir geben ihm nur den Raum und halten den Rahmen still. */
.region-gate__panel--sign-in { width: min(420px, 100%); }
#sign-in-mount { display: flex; justify-content: center; margin-top: 4px; }
#sign-in-mount:empty { display: none; }
.sign-in-error { margin: 12px 0 0; color: var(--red-deep); font-size: var(--text-sm); line-height: 1.45; }
/* Kontomenue hinter dem Kuerzel: Name, Heimatadresse, Abmelden. */
.profile { position: relative; }
.profile__trigger { padding: 0; border: 0; cursor: pointer; font: inherit; font-size: var(--text-sm); font-weight: 750; transition: box-shadow 140ms ease; }
.profile__trigger:hover { box-shadow: 0 0 0 3px rgba(255,255,255,.18); }
.profile__trigger[aria-expanded="true"] { box-shadow: 0 0 0 3px rgba(255,255,255,.3); }
.profile__trigger:focus-visible { outline: 2px solid var(--red); outline-offset: 2px; }
.profile__menu {
  position: absolute; top: calc(100% + 10px); right: 0; z-index: 30;
  min-width: 240px; padding: 6px; border: 1px solid var(--border); border-radius: var(--radius-md);
  background: var(--paper); color: var(--ink); box-shadow: 0 18px 44px rgba(20, 30, 40, .18);
}
.profile__menu[hidden] { display: none; }
.profile__menu-who { display: grid; gap: 2px; margin-bottom: 4px; padding: 9px 10px 11px; border-bottom: 1px solid var(--border-soft); }
.profile__menu-who strong { font-size: var(--text-sm); }
.profile__menu-who span { overflow: hidden; color: var(--ink-50); font-size: var(--text-sm); text-overflow: ellipsis; white-space: nowrap; }
.profile__menu-item {
  display: flex; align-items: center; width: 100%; min-height: 40px; padding: 0 10px;
  border: 0; border-radius: var(--radius-sm); background: transparent; color: var(--ink);
  cursor: pointer; font-size: var(--text-sm); font-weight: 650; text-align: left;
}
.profile__menu-item:hover, .profile__menu-item:focus-visible { background: var(--mist); outline: none; }
.region-gate__option {
  display: block; width: 100%; min-height: 62px;
  padding: 13px 17px;
  border: 1px solid var(--border); border-radius: 14px;
  background: var(--paper); color: var(--ink);
  font: inherit; text-align: left; cursor: pointer;
  transition: border-color 140ms ease, background 140ms ease, transform 140ms ease;
}
.region-gate__option:hover { border-color: var(--ink); background: #fff; transform: translateY(-1px); }
.region-gate__option:focus-visible { outline: 2px solid var(--red); outline-offset: 2px; }
.region-gate__option strong { display: block; font-size: var(--text-lg); font-weight: 600; letter-spacing: -.01em; }
.region-gate__option span {
  display: block; margin-top: 3px;
  color: var(--ink-50); font-size: var(--text-sm); line-height: 1.45;
}
/* Admin ist keine vierte Region, sondern die Sicht darueber. */
.region-gate__option--admin { margin-top: 5px; background: var(--mist-2); }
.region-gate__option--admin:hover { background: var(--mist); }
/* Vierter Fall derselben Falle: display: block schlug die Browserregel fuer
   [hidden]. Der Dialog versteckte Karten, die trotzdem klickbar blieben. */
.region-gate__option[hidden] { display: none; }

@media (prefers-reduced-motion: reduce) {
  .region-gate, .region-gate__option { transition: none; }
  .region-gate__option:hover { transform: none; }
}

@media (max-width: 640px) {
  .region-gate { padding: 18px 14px; align-items: flex-start; padding-top: 40px; }
  .region-gate__mark { width: 46px; margin-bottom: 15px; }
  .region-gate__note { margin-bottom: 20px; }
  .region-gate__option { min-height: 66px; }
}

.app-loading {
  position: fixed; inset: 0; z-index: 60;
  display: flex; align-items: center; justify-content: center;
  padding: 24px;
  /* Ein sehr flacher Verlauf statt einer flachen Flaeche: Er gibt der Marke
     einen Raum, in dem sie steht, ohne dass etwas ins Bild kommt. */
  background:
    radial-gradient(120% 90% at 50% 42%, #ffffff 0%, var(--mist-2) 58%, #f1f1ef 100%);
}
.app-loading[hidden] { display: none; }
/* Der Uebergang ins Dashboard: Die Marke geht, sie verschwindet nicht. */
.app-loading { transition: opacity .32s ease; }
.app-loading.is-leaving { opacity: 0; pointer-events: none; }
.app-loading.is-leaving .app-loading__mark { transform: scale(1.05); transition: transform .32s ease; }

/* --- Ladezustand: nur die Marke ------------------------------------------ */

.app-loading__panel { width: min(420px, 100%); text-align: center; }
.app-loading__stage {
  position: relative;
  display: flex; align-items: center; justify-content: center;
  width: 168px; height: 168px; margin: 0 auto;
}

/* Der Puls liegt hinter der Marke und atmet im Takt des Aufbaus. Er ist kaum
   zu sehen und genau deshalb richtig: Er macht die Flaeche lebendig, ohne mit
   dem Logo zu konkurrieren. */
.app-loading__pulse {
  position: absolute; z-index: 0; width: 150px; height: 150px; border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 57, 58, .13) 0%, rgba(255, 57, 58, 0) 68%);
  animation: liria-pulse 2.4s cubic-bezier(.4, 0, .2, 1) infinite;
}
.app-loading__mark {
  position: relative; z-index: 1;
  display: block; width: 124px; height: auto;
  filter: drop-shadow(0 12px 26px rgba(199, 20, 30, .17));
  animation: liria-settle 2.4s cubic-bezier(.4, 0, .2, 1) infinite;
}
/* Jede Flaeche der Marke kommt in der Reihenfolge, in der das Logo gezeichnet
   ist: von der linken Schwinge in die Spitze. `--seg` staffelt sie um 120 ms,
   ein Durchlauf dauert 2,4 s. Die Flaechen heben sich dabei leicht an, damit es
   aussieht, als setzten sie sich, statt nur zu erscheinen. */
.app-loading__mark .mark-seg {
  opacity: .07;
  transform-origin: 232px 190px;
  animation: liria-seg 2.4s cubic-bezier(.22, .61, .36, 1) infinite;
  animation-delay: calc(var(--seg) * .12s);
}
@keyframes liria-seg {
  0%   { opacity: .07; transform: translateY(9px) scale(.955); }
  24%  { opacity: 1;   transform: translateY(0) scale(1); }
  66%  { opacity: 1;   transform: translateY(0) scale(1); }
  100% { opacity: .07; transform: translateY(9px) scale(.955); }
}
/* Wenn die Marke vollstaendig steht, atmet sie einmal - der Moment, in dem das
   Bild geschlossen ist. */
@keyframes liria-settle {
  0%, 22%   { transform: scale(.985); }
  46%       { transform: scale(1.012); }
  72%, 100% { transform: scale(.985); }
}
@keyframes liria-pulse {
  0%, 18%   { opacity: 0;   transform: scale(.82); }
  46%       { opacity: 1;   transform: scale(1); }
  78%, 100% { opacity: 0;   transform: scale(.82); }
}

/* Im Ladezustand steht nichts als die Marke. Die Ueberschrift bleibt fuer
   Screenreader im Dokument, nur unsichtbar. */
.app-loading[data-state="loading"] .app-loading__title {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}
.app-loading[data-state="loading"] #app-loading-note { display: none; }

/* --- Fehlerzustand: Karte, Ursache, naechster Schritt --------------------- */

.app-loading[data-state="error"] .app-loading__panel {
  padding: 26px 24px;
  border: 1px solid var(--border); border-radius: 14px; background: #fff;
  box-shadow: 0 18px 50px rgba(20,30,40,.10); text-align: left;
}
.app-loading[data-state="error"] .app-loading__stage { width: 92px; height: 92px; margin: 0 0 4px; }
.app-loading[data-state="error"] .app-loading__mark { width: 72px; filter: none; animation: none; transform: none; }
/* Es laedt nichts mehr, und die Marke sagt das: sie steht still und blass. */
.app-loading[data-state="error"] .mark-seg { animation: none; opacity: .26; transform: none; }
.app-loading[data-state="error"] .app-loading__pulse { display: none; }
.app-loading__panel h2 { margin: 14px 0 6px; font-size: var(--text-xl); letter-spacing: -.018em; }
.app-loading__panel p { margin: 0; color: var(--ink-50); font-size: var(--text-sm); line-height: 1.5; }
.app-loading__panel .button { margin-top: 16px; }

@media (prefers-reduced-motion: reduce) {
  .app-loading, .app-loading.is-leaving .app-loading__mark { transition: none; }
  .app-loading__mark, .app-loading__mark .mark-seg { animation: none; transform: none; opacity: 1; }
  .app-loading__pulse { animation: none; opacity: .6; }
}
/* Kundensuche: findet jeden Kunden, unabhängig von der geöffneten Ansicht. */
.global-search { position: relative; }
.global-search input {
  width: 230px; min-height: 42px; padding: 0 14px;
  border: 1px solid var(--border); border-radius: 999px; background: #fff;
  color: var(--ink); font-family: var(--font); font-size: var(--text-sm);
}
.global-search input::placeholder { color: var(--ink-50); }
.global-search__results {
  position: absolute; top: calc(100% + 6px); right: 0; z-index: 30;
  width: min(380px, 88vw); margin: 0; padding: 6px; list-style: none;
  border: 1px solid var(--border); border-radius: 12px; background: #fff;
  box-shadow: 0 16px 40px rgba(20,30,40,.14);
}
.global-search__results[hidden] { display: none; }
.global-search__results li.is-empty { padding: 10px 12px; color: var(--ink-50); font-size: var(--text-sm); }
.global-search__results button {
  display: block; width: 100%; padding: 8px 10px; border: 0; border-radius: 10px;
  background: none; cursor: pointer; text-align: left; font: inherit; color: inherit;
}
.global-search__results button:hover, .global-search__results button:focus-visible { background: var(--mist); }
.global-search__results strong { display: block; font-size: var(--text-sm); }
.global-search__results span { display: block; margin-top: 1px; color: var(--ink-50); font-size: var(--text-sm); }
@media (max-width: 640px) {
  .global-search { grid-column: 1 / -1; }
  .global-search input { width: 100%; }
  .global-search__results { right: auto; left: 0; width: 100%; }
}

/* Pipeline: eine Spalte je Stufe, darin je Kunde eine anklickbare Karte. */
.pipeline-section { padding: 20px; }
.section-heading__note { margin: 4px 0 0; color: var(--ink-50); font-size: var(--text-sm); line-height: 1.4; }
/* Die Spaltenzahl kommt aus HubSpot, nicht aus dem Stylesheet: vier
   Betreuungsstufen plus Vorstufe und Kunden ohne Deal. auto-fit haelt sie
   lesbar, statt sie bei sechs Spalten zu Streifen zu pressen. */
.pipeline-board { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: var(--space-3); margin-top: 14px; align-items: start; }
.pipeline-column {
  display: flex; flex-direction: column; min-width: 0;
  border: 1px solid var(--border); border-radius: 14px; background: var(--mist-2);
}
.pipeline-column__head {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 10px;
  padding: 12px 14px 10px; border-bottom: 1px solid var(--border-soft);
}
.pipeline-column__head h3 { margin: 0; font-size: var(--text-sm); font-weight: 750; letter-spacing: .04em; text-transform: uppercase; }
.pipeline-column__head small { display: block; margin-top: 3px; color: var(--ink-50); font-size: var(--text-sm); line-height: 1.35; }
.pipeline-column__head strong { font-size: var(--text-xl); font-variant-numeric: tabular-nums; line-height: 1; }
.pipeline-column.is-atRisk .pipeline-column__head strong { color: var(--red-deep); }
.pipeline-column.is-healthy .pipeline-column__head strong { color: var(--green); }
.pipeline-column.is-churned .pipeline-column__head strong { color: var(--ink-50); }
.pipeline-column.is-buildup .pipeline-column__head strong { color: var(--blue); }
.pipeline-column.is-lost .pipeline-column__head strong { color: var(--ink); }
.pipeline-column__flags { display: flex; flex-wrap: wrap; gap: 5px; padding: 9px 14px 0; }
.pipeline-column__flags em { padding: 1px 7px; border-radius: 999px; background: var(--mist); color: var(--ink-70); font-size: var(--text-xs); font-style: normal; font-weight: 750; }
.pipeline-column__flags em.is-key { background: var(--blue-soft); color: var(--blue); }
.pipeline-column__flags em.is-visit { background: var(--amber-soft); color: var(--amber); }
.pipeline-column__flags em.is-handoff { background: var(--green-soft); color: var(--green); }
.pipeline-column__flags em.is-stalled { background: var(--red-soft); color: var(--red-deep); }
.pipeline-column__list {
  display: flex; flex-direction: column; gap: 8px;
  padding: 10px; overflow: visible;
}
.pipeline-column.is-expanded .pipeline-column__list { max-height: min(66vh, 720px); overflow-y: auto; overscroll-behavior: contain; }
.pipeline-column__toggle {
  min-height: 42px; margin: 0 10px 10px; border: 1px solid var(--border); border-radius: 10px;
  background: #fff; color: var(--ink-70); cursor: pointer; font-family: var(--font); font-size: var(--text-sm); font-weight: 750;
}
.pipeline-column__toggle:hover, .pipeline-column__toggle:focus-visible { border-color: var(--ink-50); color: var(--ink); }
.pipeline-card {
  display: flex; flex-direction: column; gap: 4px; align-items: stretch;
  padding: 10px 12px; border: 1px solid var(--border); border-radius: 10px;
  background: #fff; text-align: left; font: inherit; color: inherit; cursor: pointer;
}
.pipeline-card:hover { border-color: var(--ink-50); }
/* Ohne farbige Seitenkante: Sie kodierte die Spalte, in der die Karte ohnehin
   steht. Ein abgeschlossener Fall wird gedaempft, nicht angestrichen. */
.pipeline-card.is-lost { background: var(--mist-2); color: var(--ink-70); }
.pipeline-card.is-static { cursor: default; }
.pipeline-card.is-static:hover { border-color: var(--border); }
.pipeline-card__name { font-size: var(--text-sm); font-weight: 750; line-height: 1.25; }
.pipeline-card__meta { color: var(--ink-50); font-size: var(--text-sm); line-height: 1.35; }
.pipeline-card__figures { display: flex; flex-wrap: wrap; gap: 4px 10px; margin-top: 2px; }
.pipeline-card__figures em { color: var(--ink-50); font-size: var(--text-sm); font-style: normal; }
.pipeline-card__figures strong { color: var(--ink); font-size: var(--text-sm); font-variant-numeric: tabular-nums; }
.pipeline-card__flags { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 3px; }
.pipeline-progress { display: block; height: 4px; margin-top: 4px; border-radius: 999px; background: var(--mist); }
.pipeline-progress i { display: block; width: var(--fill, 0%); height: 100%; border-radius: 999px; background: var(--blue); }
.pipeline-empty { margin: 4px 2px; color: var(--ink-50); font-size: var(--text-sm); }
.lifecycle-flag { display: inline-flex; padding: 1px 7px; border-radius: 999px; background: var(--mist); color: var(--ink-70); font-size: var(--text-xs); font-style: normal; font-weight: 750; }
.lifecycle-flag.is-key { background: var(--blue-soft); color: var(--blue); }
.lifecycle-flag.is-visit { background: var(--amber-soft); color: var(--amber); }
.lifecycle-flag.is-manual { background: var(--red-soft); color: var(--red-deep); }
.lifecycle-flag.is-handoff { background: var(--green-soft); color: var(--green); }
.lifecycle-flag.is-lost { background: var(--ink); color: #fff; }
.lifecycle-flag.is-reason { background: transparent; padding: 1px 0; color: var(--ink-50); font-weight: 600; }
.buildup-facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin: 12px 0 0; }
.buildup-facts div { padding: 10px 12px; border: 1px solid var(--border-soft); border-radius: 10px; }
.buildup-facts dt { color: var(--ink-50); font-size: var(--text-xs); font-weight: 750; letter-spacing: .07em; text-transform: uppercase; }
.buildup-facts dd { margin: 3px 0 0; font-size: var(--text-sm); font-weight: 600; }
.customer-row--acquisition { background: #fbfcfd; }
.customer-row--acquisition:hover { background: var(--blue-soft); }
.acquisition-cell-note { display: block; margin-top: 4px; color: var(--blue); font-size: var(--text-xs); font-weight: 700; }
.acquisition-intro {
  margin: 0; padding: 11px 13px; border-radius: 10px; background: var(--blue-soft);
  color: var(--blue); font-size: var(--text-sm); line-height: 1.45;
}
.acquisition-facts { grid-template-columns: repeat(4, minmax(0, 1fr)); margin-top: 14px; }
.acquisition-section { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--border-soft); }
.acquisition-section__head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.acquisition-section__head h3 { margin: 0; font-size: var(--text-base); }
.acquisition-section__head > span { color: var(--ink-50); font-size: var(--text-sm); }
.acquisition-months { margin-top: 10px; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.acquisition-month-row {
  display: grid; grid-template-columns: minmax(90px, 1fr) repeat(3, minmax(86px, auto));
  gap: 14px; align-items: baseline; padding: 9px 2px; border-bottom: 1px solid var(--border-soft);
  font-size: var(--text-sm); font-variant-numeric: tabular-nums;
}
.acquisition-month-row:last-child { border-bottom: 0; }
.acquisition-month-row span { color: var(--ink-50); text-align: right; }
.acquisition-month-row b { text-align: right; }
.acquisition-empty, .acquisition-history-note { margin: 9px 0 0; color: var(--ink-50); font-size: var(--text-sm); line-height: 1.45; }
.acquisition-type-list { justify-content: flex-start; margin-top: 10px; }
.acquisition-data-gap {
  margin: 12px 0 0; padding: 10px 12px; border-radius: 10px; background: var(--mist-2);
  color: var(--ink-70); font-size: var(--text-sm); line-height: 1.5;
}
.acquisition-data-gap strong { color: var(--ink); }
.acquisition-crm-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); margin: 10px 0 0; border-top: 1px solid var(--border); }
.acquisition-crm-facts > div { padding: 10px 2px; border-bottom: 1px solid var(--border-soft); }
.acquisition-crm-facts > div:nth-child(odd) { padding-right: 14px; }
.acquisition-crm-facts > div:nth-child(even) { padding-left: 14px; }
.acquisition-crm-facts .acquisition-crm-facts__wide { grid-column: 1 / -1; padding-inline: 2px; }
.acquisition-crm-facts dt { color: var(--ink-50); font-size: var(--text-xs); font-weight: 750; letter-spacing: .07em; text-transform: uppercase; }
.acquisition-crm-facts dd { margin: 4px 0 0; font-size: var(--text-sm); line-height: 1.4; overflow-wrap: anywhere; }
.acquisition-adoption { display: flex; flex-wrap: wrap; gap: 6px; }
.acquisition-adoption span { padding: 4px 7px; border-radius: 6px; background: var(--mist-2); color: var(--ink-70); font-size: var(--text-sm); }
.acquisition-adoption b { color: var(--ink); }
.acquisition-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; margin-top: 18px; }
/* Der Besuch wird an der Pruefstelle dokumentiert, oft einhaendig auf dem
   Telefon. Ein Feld pro Zeile, der Text so gross, dass iOS beim Fokus nicht
   hineinzoomt. */
.acquisition-composer { display: grid; gap: 10px; margin-top: 12px; }
.acquisition-composer label { display: grid; gap: 4px; color: var(--ink-70); font-size: var(--text-sm); font-weight: 700; }
.acquisition-composer select,
.acquisition-composer input,
.acquisition-composer textarea {
  width: 100%; padding: 9px 10px; border: 1px solid var(--border); border-radius: 9px;
  background: var(--paper); color: var(--ink); font: inherit; font-size: var(--text-lg);
}
.acquisition-composer textarea { min-height: 74px; resize: vertical; line-height: 1.45; }
.acquisition-composer label[hidden] { display: none; }
.acquisition-composer__foot { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.acquisition-composer__foot small { flex: 1 1 180px; color: var(--ink-50); font-size: var(--text-sm); line-height: 1.4; }
.acquisition-activities { display: grid; gap: 8px; margin-top: 14px; }
.acquisition-inspections { margin-top: 10px; border-top: 1px solid var(--border); }
.acquisition-inspection-row {
  display: grid; grid-template-columns: minmax(78px, auto) minmax(56px, auto) minmax(90px, 1fr) minmax(74px, auto);
  gap: 12px; align-items: baseline; padding: 9px 2px; border-bottom: 1px solid var(--border-soft);
  font-size: var(--text-sm); font-variant-numeric: tabular-nums;
}
.acquisition-inspection-row span { color: var(--ink-50); }
.acquisition-inspection-row b { text-align: right; }
.briefing-note { margin: 12px 0 0; color: var(--ink-50); font-size: var(--text-sm); line-height: 1.5; }
.case-panel__actions { display: flex; flex-wrap: wrap; gap: 8px; }
.case-panel__actions .button.is-marked { border-color: var(--red); color: var(--red-deep); }
.case-panel__state.is-risk { color: var(--red-deep); }
.button.is-marked { border-color: var(--red); color: var(--red-deep); }
.case-panel__state.is-lost { background: var(--mist); color: var(--ink-70); }
@media (max-width: 640px) {
  .pipeline-section { padding: 16px; }
  .pipeline-board { gap: 10px; }
  .pipeline-column.is-expanded .pipeline-column__list { max-height: none; overflow: visible; }
  .buildup-facts { grid-template-columns: 1fr; }
  .acquisition-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .acquisition-month-row { grid-template-columns: 1fr 1fr; gap: 4px 12px; }
  .acquisition-month-row span, .acquisition-month-row b { text-align: left; }
  .acquisition-crm-facts { grid-template-columns: 1fr; }
  .acquisition-crm-facts > div, .acquisition-crm-facts > div:nth-child(odd), .acquisition-crm-facts > div:nth-child(even) { padding-inline: 2px; }
  .acquisition-crm-facts .acquisition-crm-facts__wide { grid-column: auto; }
  .acquisition-actions { display: grid; grid-template-columns: 1fr; }
  .acquisition-actions .button { width: 100%; }
}

/* Wochenroute: kompakter operativer Abschluss zwischen Besuchsplanung und
   Outcome. Die Streckenoptimierung bleibt bewusst der späteren Karte. */
.route-button { gap: 7px; }
.route-button span {
  display: inline-grid; min-width: 20px; height: 20px; padding: 0 5px; place-items: center;
  border-radius: 999px; background: rgba(255,255,255,.2); font-size: var(--text-sm); font-variant-numeric: tabular-nums;
}
.route-dialog { width: min(760px, calc(100vw - 32px)); }
.route-list { display: flex; flex-direction: column; gap: 9px; }
.route-item {
  display: grid; grid-template-columns: 32px minmax(0, 1fr); gap: 11px; padding: 13px;
  border: 1px solid var(--border); border-radius: 12px; background: #fff;
}
.route-item__order {
  display: grid; width: 32px; height: 32px; place-items: center; border-radius: 50%;
  background: var(--ink); color: #fff; font-size: var(--text-sm); font-weight: 750;
}
.route-item__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.route-item__head div { min-width: 0; }
.route-item__head time { display: block; color: var(--red-deep); font-size: var(--text-xs); font-weight: 750; letter-spacing: .05em; text-transform: uppercase; }
.route-item__head strong { display: block; margin-top: 3px; font-size: var(--text-base); }
/* Ein fester Termin ("Fester Termin" als Ziel) sagte bisher nicht, um wie
   viel Uhr - die Uhrzeit stand nur im Tagesplaner selbst. */
.route-item__time {
  display: inline-flex; margin-top: 3px; margin-left: 8px; padding: 1px 7px;
  border-radius: 999px; background: var(--red-soft); color: var(--red-deep);
  font-size: var(--text-xs); font-weight: 750; font-variant-numeric: tabular-nums;
}
.route-item__head > span { padding: 3px 7px; border-radius: 999px; background: var(--mist); color: var(--ink-50); font-size: var(--text-xs); font-weight: 700; }
.route-item p { margin: 3px 0 0; color: var(--ink-50); font-size: var(--text-sm); }
.route-item small { display: block; margin-top: 7px; color: var(--ink-70); font-size: var(--text-sm); line-height: 1.4; }
.route-item__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; margin-top: 11px; }
.route-item__actions .button { min-height: 36px; }
.route-item__actions .text-button { margin-left: auto; }
.route-empty { padding: 34px 18px; border: 1px dashed var(--border); border-radius: 12px; text-align: center; }
.route-empty strong { font-size: var(--text-base); }
.route-empty p { max-width: 420px; margin: 5px auto 0; color: var(--ink-50); font-size: var(--text-sm); line-height: 1.5; }

@media (max-width: 760px) {
  .route-item__head { align-items: flex-start; flex-direction: column; }
  .route-item__actions .text-button { width: 100%; margin-left: 0; text-align: left; }
}

/* Fallebene: Notizen und Wiedervorlage. Bewusst als eigener Block, damit die
   lokale Arbeitsebene nicht mit den HubSpot-Feldern verwechselt wird. */
.case-panel { margin-top: 14px; padding: 14px; border: 1px solid var(--border); border-radius: 12px; background: #fff; }
.case-panel__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
.case-panel__head h4 { margin: 0; font-size: var(--text-base); }
.case-panel__state { margin: 0 0 10px; padding: 9px 11px; border-radius: 10px; font-size: var(--text-sm); line-height: 1.45; }
.case-panel__state.is-active { background: var(--amber-soft); color: var(--amber); }
.case-panel__state.is-due { background: var(--red-soft); color: var(--red-deep); font-weight: 700; }
.case-note-field { display: block; }
.case-note-field textarea { width: 100%; margin-top: 4px; padding: 9px 11px; border: 1px solid var(--border); border-radius: 10px; background: #fff; color: var(--ink); font-family: var(--font); font-size: var(--text-sm); line-height: 1.5; resize: vertical; }
.case-note-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 9px; }
.case-note-actions small { color: var(--ink-50); font-size: var(--text-sm); }
/* Die Notiz hat ihren eigenen Rahmen und ihren eigenen Knopf; der einzige
   rote Knopf der Akte (unten) speichert Ausbau und Betreuung. */
.case-note-box { padding: 12px; border: 1px solid var(--border); border-radius: 12px; background: var(--mist-2); }
.profile-case { padding: 18px 0; border-bottom: 1px solid var(--border); }
.profile-case .case-panel { margin-top: 0; }
.case-panel__body { display: grid; gap: 14px 24px; align-items: start; }
@media (min-width: 901px) {
  .case-panel__body { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}

/* Kennzeichnung in der Einsatztafel */
.snooze-badge { display: inline-flex; margin-top: 5px; padding: 2px 8px; border-radius: 999px; background: var(--amber-soft); color: var(--amber); font-size: var(--text-xs); font-weight: 750; white-space: normal; }
.snooze-badge.is-due { background: var(--red-soft); color: var(--red-deep); }

/* Zurückstellen-Dialog */
.snooze-dialog { width: min(520px, calc(100vw - 24px)); }
.snooze-intro { margin: 0 0 6px; color: var(--ink-50); font-size: var(--text-sm); line-height: 1.5; }
/* DS-9a: Eine Zeile vorweg, was in HubSpot passiert steht aufklappbar
   darunter, damit das erste Feld oben bleibt. */
.case-hubspot { margin: 0 0 14px; font-size: var(--text-sm); color: var(--ink-50); }
.case-hubspot summary {
  display: inline-flex; align-items: center; min-height: 44px; cursor: pointer;
  color: var(--ink); font-weight: 650; text-decoration: underline; text-underline-offset: 3px;
}
.case-hubspot p { margin: 0 0 4px; line-height: 1.5; }
/* F-A4: Ein lost markierter Kunde wird nicht zurückgestellt. Der Dialog sagt
   es oben und zeigt keine Felder, die nichts bewirken würden. */
.case-blocked {
  margin: 0 0 14px; padding: 12px 14px; border-radius: 12px;
  background: var(--red-soft); color: var(--red-deep); font-size: var(--text-sm); font-weight: 650; line-height: 1.45;
}
#snooze-form.is-blocked > label,
#snooze-form.is-blocked > fieldset,
#snooze-form.is-blocked > .snooze-intro,
#snooze-form.is-blocked > .case-hubspot,
#snooze-form.is-blocked .dialog-actions.is-empty { display: none; }
.snooze-dialog label { display: block; margin-bottom: 12px; font-size: var(--text-sm); font-weight: 700; }
/* display: block wuerde [hidden] sonst ueberstimmen; das Feld fuer den
   eigenen Grund erscheint nur bei "Anderer Grund". */
.snooze-dialog label[hidden] { display: none; }
.snooze-dialog select, .snooze-dialog input[type="text"], .snooze-dialog input[type="date"], .snooze-dialog textarea {
  width: 100%; margin-top: 4px; min-height: 42px; padding: 8px 11px;
  border: 1px solid var(--border); border-radius: 10px; background: #fff; color: var(--ink);
  font-family: var(--font); font-size: var(--text-sm); font-weight: 400;
}
.snooze-dialog textarea { min-height: 0; line-height: 1.5; resize: vertical; }
.snooze-until { margin: 0 0 12px; padding: 12px; border: 1px solid var(--border-soft); border-radius: 10px; }
.snooze-until legend { padding: 0 4px; color: var(--ink-50); font-size: var(--text-xs); font-weight: 750; letter-spacing: .07em; text-transform: uppercase; }
.snooze-quick { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.snooze-quick button { min-height: 36px; padding: 0 12px; border: 1px solid var(--border); border-radius: 999px; background: #fff; cursor: pointer; font-family: var(--font); font-size: var(--text-sm); font-weight: 700; }
.snooze-quick button:hover { border-color: var(--ink); }
.snooze-dialog .dialog-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; margin-top: 4px; }

/* Besuchsrhythmus je Kunde: Einstellung und aktueller Stand nebeneinander,
   damit die Wirkung der Änderung sofort ablesbar ist. */
.visit-cadence-editor { margin-top: 14px; padding: 12px 14px; border: 1px solid var(--border); border-radius: 10px; background: var(--mist-2); }
.visit-cadence-editor > label { display: block; margin-bottom: 6px; color: var(--ink-50); font-size: var(--text-xs); font-weight: 750; letter-spacing: .07em; text-transform: uppercase; }
.visit-cadence-editor__row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.visit-cadence-editor select { min-height: 42px; padding: 0 30px 0 12px; border: 1px solid var(--border); border-radius: 999px; background: #fff; color: var(--ink); cursor: pointer; font-family: var(--font); font-size: var(--text-sm); font-weight: 700; }
.visit-cadence-editor small { display: block; margin-top: 8px; color: var(--ink-50); font-size: var(--text-sm); line-height: 1.45; }
@media (max-width: 640px) {
  .visit-cadence-editor select { width: 100%; }
  .visit-cadence-editor__row { flex-direction: column; align-items: flex-start; }
}
@media (max-width: 700px) {
  /* Im Fluss statt fixiert: fixiert lag sie über der letzten Zeile der Liste. */
  .data-status { position: static; display: flex; width: max-content; max-width: 100%; margin: 0 auto 16px; }
  .birthday-flag { position: static; display: flex; width: max-content; max-width: 100%; margin: 0 auto 16px; }
}
/* Innenpolster plus gleich grosses Negativ-Margin (nur vertikal, die Breite
   reicht schon): Der Link bleibt an seinem Platz, die Tippflaeche wird
   trotzdem hoch genug. */
.hubspot-link {
  display: inline-flex;
  align-items: center;
  margin: -6px 0 -13px;
  padding: 13px 0;
  color: var(--blue);
  font-size: var(--text-sm);
  font-weight: 700;
  text-underline-offset: 3px;
}
.hubspot-link[hidden] { display: none; }
.choice-fieldset[hidden] { display: none; }
.button {
  min-height: 42px;
  padding: 0 16px;
  border-radius: 999px;
  border: 1px solid transparent;
  cursor: pointer;
  font-weight: 700;
  font-size: var(--text-base);
  transition: background 140ms ease, border-color 140ms ease, transform 80ms ease;
}
.button:active { transform: scale(.98); }
.button--primary { background: var(--red-action); color: #fff; box-shadow: 0 7px 18px rgba(191,17,27,.2); }
.button--primary:hover { background: var(--red-deep); }
.button:disabled { cursor: not-allowed; opacity: .5; box-shadow: none; transform: none; }
.button:disabled:hover { background: var(--red-action); }
.button--secondary { background: var(--paper); border-color: var(--border); }
.button--secondary:hover { background: var(--mist); border-color: var(--border); }
.button--full { width: 100%; min-height: 48px; font-size: var(--text-base); }
.text-button {
  min-height: 36px; padding: 0; border: 0; background: transparent; cursor: pointer;
  color: var(--red-deep); font-size: var(--text-sm); font-weight: 750;
}
.text-button:hover { text-decoration: underline; text-underline-offset: 3px; }

.command-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.62fr) minmax(360px, .78fr);
  gap: 16px;
  align-items: stretch;
}
/* Papierflaechen auf dem warmen Grund, wie DESIGN.md sie beschreibt. Die
   Regel ging beim Umbau des Boards verloren (der doppelte Selektor war das
   Ueberbleibsel). Seitdem standen die 20px-Einzuege, die Nebelbaender der
   Zusammenfassung und die Ticketkerben des Passes frei im Raum und sahen
   verrutscht aus. */
.dispatch-board, .customer-pass, .customer-base-section, .pipeline-section, .station-section {
  min-width: 0; overflow: hidden; background: var(--paper); border-radius: 14px; box-shadow: var(--shadow);
}
/* Mit sieben Zustaenden ist die Chipzeile eine Werkzeugleiste geworden und
   keine Beigabe der Ueberschrift mehr: nebeneinander brach beides um. */
.board-head {
  min-height: 92px;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 12px;
  padding: 16px 20px 14px;
  border-bottom: 1px solid var(--border-soft);
}
.board-head h2, .section-heading h2 {
  margin: 0 0 4px;
  font-size: var(--text-xl);
  letter-spacing: -.018em;
}
/* min-width: 0, sonst spannt die scrollende Chipzeile in der Flex-Spalte des
   Kopfbereichs die ganze Seite breiter, statt selbst zu scrollen. */
.filters { display: flex; min-width: 0; align-items: center; gap: 5px; flex-wrap: wrap; justify-content: flex-start; }
/* Churn-Risiko ist die eine Frage, die keinen Umweg vertraegt — der Chip
   traegt deshalb die Farbe der Sache. Aktiv wird er wie jeder andere dunkel;
   zwei laute Zustaende nebeneinander waeren keiner. */
.filter--risk:not(.is-active) { border-color: var(--red); color: var(--red-deep); }
.filter--risk:not(.is-active) span { background: var(--red-soft); color: var(--red-deep); }
.filter {
  min-height: 34px;
  padding: 0 10px;
  border: 1px solid transparent;
  border-radius: 999px;
  background: var(--mist);
  cursor: pointer;
  color: var(--ink-70);
  font-size: var(--text-sm);
  font-weight: 600;
}
.filter span { margin-left: 5px; color: var(--ink-50); font-variant-numeric: tabular-nums; }
/* Der Grund ist die zweite Frage und sieht deshalb aus wie ein Feld, nicht wie
   ein Chip: Er filtert innerhalb von Handlungsbedarf, er ist keine Ansicht. */
.reason-filter select {
  min-height: 34px; padding: 0 8px; border: 1px solid var(--border); border-radius: 999px;
  background: #fff; color: var(--ink-70); font-family: inherit; font-size: var(--text-sm); font-weight: 600;
}
.reason-filter select:disabled { opacity: .45; }
/* Das Label ist visuell versteckt, darf die scrollende Chipzeile aber nicht
   aufspannen: Ohne festen Kasten schob es die Seite um 20 px breiter. */
/* Der Regler statt eines Zahlenfelds: Der Regionalleiter probiert, wie viele
   Besuche in einen Tag passen, statt eine Wochenzahl zu erraten. */
.week-capacity { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 12px; }
.week-capacity > span { color: var(--ink-70); font-size: var(--text-sm); font-weight: 600; }
/* min-height statt einer duennen Spur: Der Browser testet Range-Klicks
   gegen die ganze Elementbox, nicht nur die sichtbar gezeichnete Linie. */
.week-capacity input[type="range"] { width: 100%; min-width: 120px; min-height: 44px; accent-color: var(--red); }
.week-capacity output {
  min-width: 34px; padding: 3px 8px; border-radius: 999px; background: var(--ink); color: #fff;
  text-align: center; font-size: var(--text-base); font-weight: 750; font-variant-numeric: tabular-nums;
}
.reason-filter { position: relative; display: inline-flex; align-items: center; flex: 0 0 auto; }
.reason-filter[hidden] { display: none; }
.filter:hover { border-color: var(--border); }
.filter.is-active { background: var(--ink); color: #fff; }
.filter.is-active span { color: rgba(255,255,255,.65); }
.board-summary {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  background: var(--mist-2);
  border-bottom: 1px solid var(--border-soft);
}
.board-summary div { min-width: 0; padding: 11px 14px; border-right: 1px solid var(--border-soft); }
.board-summary div:last-child { border: 0; }
.board-summary span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ink-50); font-size: var(--text-sm); }
.board-summary strong { display: block; margin-top: 2px; font-size: var(--text-base); font-variant-numeric: tabular-nums; }
.table-wrap { overflow: auto; }
/* Die Tafel zeigt das Portfolio und benennt ihren Ausschnitt selbst. */
.list-pager {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 12px 14px; border-top: 1px solid var(--border-soft); background: var(--mist-2);
}
.list-pager[hidden] { display: none; }
.list-pager span { color: var(--ink-50); font-size: var(--text-sm); font-variant-numeric: tabular-nums; }
.list-pager div { display: flex; gap: 14px; }
.account-table { width: 100%; min-width: 0; border-collapse: collapse; table-layout: fixed; }
.account-table th {
  height: 36px;
  padding: 0 12px;
  border-bottom: 1px solid var(--border);
  color: var(--ink-50);
  text-align: left;
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
}
/* Das Signal traegt die Zahl und ihre Schwelle und braucht deshalb die
   Breite, die der jetzt zweiwortige naechste Schritt abgibt. */
.account-table th:nth-child(1) { width: 15%; }
.account-table th:nth-child(2) { width: 28%; }
.account-table th:nth-child(3) { width: 76px; }
.account-table th:nth-child(4) { width: 12%; }
.account-table th:nth-child(5) { width: 12%; }
.account-table th:nth-child(6) { width: 14%; }
.account-table th:nth-child(7) { width: 76px; }
/* Uebergaben: dieselbe Tafel, eigene Fakten. Ein Kunde im Aufbau hat keinen
   letzten Kontakt und keinen naechsten Schritt — er hat einen Stand. */
.handover-wrap[hidden] { display: none; }
/* Auf dem Telefon wird die Kundenliste zu Karten und bekommt dafuer
   display: block. Das schlaegt die Standardregel des Browsers fuer [hidden] -
   ohne diese Zeile stand in der Uebergabeansicht unter den Uebergaben noch
   einmal die komplette Kundenliste. */
.account-table[hidden] { display: none; }
.handover-table { width: 100%; min-width: 720px; border-collapse: collapse; table-layout: fixed; }
.handover-table th[scope="col"] {
  height: 36px; padding: 0 12px; border-bottom: 1px solid var(--border);
  color: var(--ink-50); font-size: var(--text-xs); font-weight: 750; letter-spacing: .08em;
  text-transform: uppercase; text-align: left;
}
.handover-table th:nth-child(1) { width: 30%; }
.handover-table th:nth-child(2) { width: 12%; }
.handover-table th:nth-child(6) { width: 14%; }
.handover-row th, .handover-row td { height: 58px; padding: 8px 12px; border-bottom: 1px solid var(--border-soft); vertical-align: middle; font-size: var(--text-sm); text-align: left; font-weight: 400; }
.handover-row:last-child th, .handover-row:last-child td { border-bottom: 0; }
.handover-row th strong { display: block; font-size: var(--text-sm); }
.handover-row th span { display: block; margin-top: 2px; color: var(--ink-50); font-size: var(--text-sm); }
/* Der Name war reiner Text - der Kunde, um dessen Übergabe es hier geht,
   ließ sich von dieser Zeile aus nicht öffnen. */
.handover-identity {
  display: block; width: 100%; padding: 0; border: 0; background: none;
  color: inherit; font: inherit; text-align: left; cursor: pointer;
}
.handover-identity strong { text-decoration: underline; text-decoration-color: rgba(20, 30, 40, .28); text-underline-offset: 3px; }
.handover-identity:hover strong { color: var(--red-deep); text-decoration-color: currentColor; }
.handover-row td strong { font-variant-numeric: tabular-nums; }
.handover-empty { padding: 26px 12px; color: var(--ink-50); font-size: var(--text-sm); }
.handover-note { margin: 0; padding: 12px 14px; border-top: 1px solid var(--border-soft); background: var(--mist-2); color: var(--ink-50); font-size: var(--text-sm); line-height: 1.45; }

/* Ohne Bewegung: eingeklappt, aber mit sichtbarer Zahl. Wer bei acht HU steht
   und seit Wochen nichts mehr bringt, soll die Uebergabeliste nicht fuellen —
   verschwinden darf er trotzdem nicht. */
.handover-dormant { border-top: 1px solid var(--border-soft); }
.handover-dormant[hidden] { display: none; }
.handover-dormant-toggle {
  display: flex; align-items: center; gap: 9px; width: 100%; min-height: 42px;
  padding: 10px 14px; border: 0; background: var(--mist-2); color: var(--ink-70);
  font: inherit; font-size: var(--text-sm); text-align: left; cursor: pointer;
  transition: background 140ms ease;
}
.handover-dormant-toggle:hover { background: var(--mist); }
.handover-dormant-toggle:focus-visible { outline: 2px solid var(--blue); outline-offset: -2px; }
.handover-dormant-label strong { color: var(--ink); font-weight: 600; font-variant-numeric: tabular-nums; }
.handover-dormant-toggle small { color: var(--ink-50); font-size: var(--text-sm); }
.handover-dormant-mark { flex: none; color: var(--ink-50); transition: transform 140ms ease; }
.handover-dormant-toggle[aria-expanded="true"] .handover-dormant-mark { transform: rotate(90deg); }
.handover-dormant-panel { border-top: 1px solid var(--border-soft); overflow-x: auto; }
.handover-dormant-panel[hidden] { display: none; }
.handover-table--dormant { min-width: 560px; }
.handover-table--dormant th:nth-child(1) { width: 34%; }
.handover-table--dormant th:nth-child(2) { width: 14%; }
.handover-table--dormant th:nth-child(3) { width: 26%; }
.buildup-wrap[hidden] { display: none; }
/* Noch keine Pruefung bei uns: eine andere Aussage als Tempo null, also
   auch ein anderer Grund - blau, nicht bernstein. Es ist kein Problem,
   sondern ein Zustand. */
.handover-row.is-awaiting { background: var(--blue-soft); }
.handover-row.is-awaiting td strong { color: var(--blue); }
.handover-table--buildup { min-width: 680px; }
.handover-table--buildup th:nth-child(1) { width: 32%; }
.handover-table--buildup th:nth-child(2) { width: 13%; }
.handover-table--buildup th:nth-child(3) { width: 14%; }
.handover-table--buildup th:nth-child(4) { width: 20%; }
.handover-row td small { display: block; margin-top: 2px; color: var(--ink-50); font-size: var(--text-sm); line-height: 1.35; }
/* Wie bei der Kundenliste: display: block fuer die Kartenansicht auf dem
   Telefon schlaegt die Browserregel fuer [hidden]. */
.customer-table[hidden] { display: none; }

.account-row { cursor: pointer; transition: background 140ms ease; }
.account-row:hover { background: var(--mist-2); }
.account-row.is-selected { background: var(--red-soft); }
.account-row.is-completed { opacity: .52; }
.account-row td { height: 58px; padding: 8px 12px; border-bottom: 1px solid var(--border-soft); vertical-align: middle; font-size: var(--text-sm); }
.account-row:last-child td { border-bottom: 0; }
.account-row:focus-visible { outline: 3px solid rgba(255, 57, 58, .28); outline-offset: -3px; }
.contact-cell strong { display: block; font-size: var(--text-sm); line-height: 1.25; }
.contact-cell small { display: block; margin-top: 3px; color: var(--ink-50); font-size: var(--text-sm); line-height: 1.25; }
.contact-cell__missing { color: var(--ink-50); font-weight: 600; }
/* Das Datum ist der Weg zum Eintrag selbst - deshalb sieht es aus wie einer. */
.contact-link {
  display: inline-flex; align-items: center; min-height: 22px; padding: 0;
  border: 0; background: none; color: inherit; cursor: pointer;
  font-size: var(--text-sm); font-weight: 750; line-height: 1.25;
  font-variant-numeric: tabular-nums;
  text-decoration: underline; text-decoration-color: rgba(20, 30, 40, .28);
  text-underline-offset: 3px;
}
.contact-link:hover { color: var(--red-deep); text-decoration-color: currentColor; }
.contact-link:focus-visible { outline: 2px solid var(--red); outline-offset: 2px; border-radius: 6px; }
.account-name strong { display: block; font-size: var(--text-sm); }
.account-profile-link { display: inline-flex; align-items: center; min-height: 28px; padding: 0; border: 0; background: none; color: inherit; cursor: pointer; font-size: var(--text-sm); font-weight: 750; line-height: 1.2; text-align: left; text-decoration: underline; text-decoration-color: rgba(20, 30, 40, .28); text-underline-offset: 3px; }
.account-profile-link:hover { color: var(--red-deep); text-decoration-color: currentColor; }
.account-name span { display: block; margin-top: 2px; color: var(--ink-50); font-size: var(--text-sm); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.signal small, .next-step small { display: -webkit-box; -webkit-box-orient: vertical; margin-top: 2px; overflow: hidden; color: var(--ink-50); font-size: var(--text-sm); line-height: 1.35; }
.signal small { -webkit-line-clamp: 2; }
/* Der Hinweistext des nächsten Schritts ist für alle Zeilen gleich und bekommt
   deshalb nur eine Zeile; der Grund darüber ist kundenspezifisch. */
.next-step small { -webkit-line-clamp: 1; }
.signal strong, .next-step strong { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; font-size: var(--text-sm); line-height: 1.3; }
.signal-marker { display: inline-block; width: 7px; height: 7px; border-radius: 50%; margin-right: 6px; background: var(--red); }
.signal-marker--handoff { background: var(--blue); }
.signal-marker--regular { background: var(--amber); }
.signal-marker--expansion { background: var(--green); }
/* Churned ist ein Zustand, kein Alarm: der Punkt bleibt neutral. */
.signal-marker--churned { background: var(--ink-50); }
.account-row.is-churned td { color: var(--ink-70); }
.account-row.is-churned .signal strong { font-weight: 700; }
.workflow-cell strong { display: block; overflow: hidden; font-size: var(--text-sm); text-overflow: ellipsis; white-space: nowrap; }
.workflow-cell small { display: block; margin-top: 2px; color: var(--ink-50); font-size: var(--text-sm); }
.trend { font-variant-numeric: tabular-nums; font-weight: 750; }
.trend--down { color: var(--red-deep); }
/* Ohne belastbares Muster ist der Trend keine Richtung, sondern eine Leerstelle. */
.trend--flat { color: var(--ink-50); font-weight: 600; }
.trend--up { color: var(--green); }
.due { display: inline-flex; min-height: 24px; align-items: center; padding: 0 8px; border-radius: 999px; background: var(--mist); font-size: var(--text-sm); font-weight: 700; }
.due--today { color: var(--red-deep); background: var(--red-soft); }
.due--new { color: var(--blue); background: var(--blue-soft); }
.due--planned { color: var(--blue); background: var(--blue-soft); white-space: nowrap; }
.empty-state { padding: 56px 20px; text-align: center; }
.empty-state h3 { margin: 0 0 6px; font-size: var(--text-lg); }
.empty-state p { margin: 0; color: var(--ink-50); font-size: var(--text-base); }

.customer-pass {
  position: relative;
  /* Runde Ecken wie jede andere Flaeche im Cockpit. Sie fehlten, und weil
     die Statuszeile oben dunkel ist, sass ein hartkantiger schwarzer Balken
     zwischen lauter gerundeten Pillen und Karten - der einzige rechte Winkel
     weit und breit. `overflow: hidden` war schon da und schneidet die
     Statuszeile jetzt sauber mit. */
  border-radius: var(--radius-md);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  min-height: 560px;
}
.customer-pass::before, .customer-pass::after {
  content: ""; position: absolute; top: 190px; width: 18px; height: 18px; border-radius: 50%; background: var(--mist-2); z-index: 1;
}
.customer-pass::before { left: -9px; }
.customer-pass::after { right: -9px; }
.pass-statusline {
  display: flex; justify-content: space-between; gap: 12px; padding: 14px 18px;
  background: var(--ink); color: #fff; font-size: var(--text-xs); font-weight: 750; letter-spacing: .08em;
}
.pass-statusline span:last-child { color: rgba(255,255,255,.57); }
/* Der Fallzustand ist eine Marke, keine Zeile Text: Churn und Contraction
   stehen rot auf dunklem Grund, ein faelliger Regelbesuch bernstein, eine
   frische Uebergabe blau. Betreuung bleibt still. */
.pass-case {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 9px 3px 7px; border-radius: 999px;
  background: rgba(255,255,255,.10); color: rgba(255,255,255,.78);
}
.pass-case::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%;
  background: currentColor;
}
.pass-case--risk { background: var(--red-on-ink-soft); color: var(--red-on-ink); }
.pass-case--due { background: var(--amber-on-ink-soft); color: var(--amber-on-ink); }
.pass-case--new { background: var(--blue-on-ink-soft); color: var(--blue-on-ink); }
/* Lost ist kein Alarm, sondern ein Abschluss: heller Rahmen, keine Farbe. */
.pass-case--lost { background: rgba(255,255,255,.16); color: rgba(255,255,255,.9); }
.pass-identity { display: flex; justify-content: space-between; gap: 14px; padding: 18px 18px 16px; }
.pass-identity p { margin: 0; color: var(--ink-50); font-size: var(--text-sm); font-weight: 700; letter-spacing: .07em; }
.pass-identity h2 { margin: 5px 0 4px; font-size: clamp(22px, 2vw, 29px); line-height: 1; letter-spacing: -.03em; }
.pass-identity h2 + p { letter-spacing: 0; font-weight: 500; font-size: var(--text-sm); }
.health-score {
  flex: 0 0 78px; height: 78px; display: grid; grid-template-columns: 1fr auto; align-content: center;
  padding: 10px; border-radius: 12px; background: var(--mist); color: var(--ink);
}
.health-score span { grid-column: 1 / -1; font-size: var(--text-xs); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.health-score strong { font-size: var(--text-2xl); line-height: 1; font-variant-numeric: tabular-nums; }
.health-score small { align-self: end; padding-bottom: 2px; color: var(--ink-50); font-size: var(--text-xs); }
.health-score--critical { background: var(--red-soft); color: var(--red-deep); }
.health-score--watch { background: var(--amber-soft); color: var(--amber); }
.health-score--healthy { background: var(--green-soft); color: var(--green); }
.pass-route {
  display: grid; grid-template-columns: 1fr minmax(60px, 1fr) 1fr; align-items: center;
  padding: 13px 18px; border-top: 1px dashed var(--border); border-bottom: 1px dashed var(--border);
}
.pass-route div:first-child { text-align: left; }
.pass-route div:last-child { text-align: right; }
.pass-route span, .pass-segments span, .recommendation > span, .route-suggestion span {
  display: block; color: var(--ink-50); font-size: var(--text-xs); font-weight: 750; letter-spacing: .09em;
}
.pass-route strong { display: block; margin-top: 4px; font-size: var(--text-base); font-variant-numeric: tabular-nums; }
.route-line { display: flex; align-items: center; padding: 0 9px; }
.route-dot { width: 7px; height: 7px; flex: 0 0 auto; border-radius: 50%; border: 2px solid var(--ink); }
.route-dot--end { background: var(--red); border-color: var(--red); }
.route-track { height: 1px; flex: 1; background: var(--ink); }
.pass-segments { display: grid; grid-template-columns: repeat(3, 1fr); border-bottom: 1px solid var(--border-soft); }
.pass-segments div { padding: 11px 12px; border-right: 1px solid var(--border-soft); }
.pass-segments div:last-child { border: 0; }
.pass-segments strong { display: block; margin-top: 4px; font-size: var(--text-sm); line-height: 1.2; }
/* Fuenf Fakten in einer schmalen Spalte: drei nebeneinander, zwei darunter.
   Nebeneinander waeren es je 70 px, und "90 Tage · fällig" bricht dort ab. */
.pass-account-facts {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  background: var(--mist-2);
  border-bottom: 1px solid var(--border-soft);
}
.pass-account-facts div {
  min-width: 0; padding: 9px 10px;
  border-right: 1px solid var(--border-soft);
  border-top: 1px solid var(--border-soft);
}
.pass-account-facts div:nth-child(3n) { border-right: 0; }
.pass-account-facts div:nth-child(-n+3) { border-top: 0; }
.pass-account-facts span { display: block; color: var(--ink-50); font-size: var(--text-xs); font-weight: 750; letter-spacing: .07em; }
.pass-account-facts strong { display: block; margin-top: 3px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--text-sm); }
/* Eine Kante fuer den ganzen Pass: Aktionen und HU-Verlauf stehen 18px vom
   Rand, die Faktenzellen standen bei 12 und 10px. */
.pass-segments div:first-child { padding-left: 18px; }
.pass-segments div:last-child { padding-right: 18px; }
.pass-account-facts div:nth-child(3n+1) { padding-left: 18px; }
.pass-account-facts div:nth-child(3n) { padding-right: 18px; }
/* Fuenf Fakten in drei Spalten liessen unten rechts eine leere Zelle stehen. */
.pass-account-facts div:last-child:nth-child(3n+2) { grid-column: span 2; padding-right: 18px; border-right: 0; }
.drivers { padding: 15px 18px 18px; }
.drivers__head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.drivers h3 { margin: 0; font-size: var(--text-base); }
/* Die Herleitung des Signals: in der Tabelle stand sie in jeder Zeile, hier
   steht sie einmal und darf ausreden. */
/* Der Grund steht jetzt oben neben der Handlung, nicht unter den Belegen. */
.pass-reason { margin: 0; padding: 12px 18px 0; color: var(--ink-70); font-size: var(--text-sm); line-height: 1.45; }
.pass-reason:empty { display: none; }
.drivers ul { list-style: none; margin: 8px 0 0; padding: 0; }
.drivers li { display: flex; justify-content: space-between; gap: 10px; padding: 6px 0; border-bottom: 1px solid var(--border-soft); font-size: var(--text-sm); }
.drivers li:last-child { border: 0; }
.drivers li span:first-child { color: var(--ink-70); }
.drivers li strong { white-space: nowrap; font-variant-numeric: tabular-nums; }
.drivers li strong.negative { color: var(--red-deep); }
.drivers li strong.positive { color: var(--green); }
.recommendation { margin: 10px 18px 13px; padding: 12px 14px; background: var(--mist-2); border-radius: 12px; }
.recommendation strong { display: block; margin-top: 4px; font-size: var(--text-base); }
.recommendation p { margin: 3px 0 0; color: var(--ink-50); font-size: var(--text-sm); line-height: 1.4; }
/* Die Karte ist zurueckgestellt, also stehen hier meist nur zwei
   Sekundaerknoepfe. Ein festes Dreispaltenraster liess dann eine leere Spalte
   stehen und quetschte die Beschriftung auf zwei Zeilen; die Knoepfe teilen
   sich die Breite jetzt nach ihrer tatsaechlichen Anzahl. */
.pass-actions { padding: 0 18px 16px; display: flex; flex-wrap: wrap; gap: 7px; border-bottom: 1px solid var(--border-soft); margin-bottom: 2px; }
.pass-actions .button--full { flex: 1 0 100%; }
.pass-actions .button--secondary { flex: 1 1 auto; white-space: nowrap; padding-inline: 12px; }

.customer-base-section { margin-top: 16px; padding: 20px; overflow: hidden; }
.section-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; margin-bottom: 15px; }
.section-heading p { max-width: 740px; line-height: 1.4; }
.customer-search input {
  width: min(300px, 32vw); min-height: 42px; padding: 0 14px; border: 1px solid var(--border); border-radius: 999px; background: #fff; color: var(--ink); outline: none;
}
.customer-search input:focus { border-color: var(--red); box-shadow: 0 0 0 3px rgba(255,57,58,.13); }
.customer-base-summary { display: grid; grid-template-columns: repeat(5, 1fr); border: 1px solid var(--border); border-radius: 12px; overflow: hidden; }
.customer-stat {
  min-height: 88px; padding: 14px 16px; border: 0; border-right: 1px solid var(--border); background: #fff; cursor: pointer; text-align: left;
  transition: background 140ms ease, color 140ms ease;
}
.customer-stat:last-child { border: 0; }
.customer-stat:hover { background: var(--mist-2); }
.customer-stat.is-active { background: var(--ink); color: #fff; }
.customer-stat span { display: block; color: var(--ink-50); font-size: var(--text-xs); font-weight: 750; letter-spacing: .08em; text-transform: uppercase; }
.customer-stat strong { display: block; margin-top: 8px; font-size: var(--text-xl); font-variant-numeric: tabular-nums; }
.customer-stat small { display: block; margin-top: 2px; color: var(--ink-50); font-size: var(--text-sm); }
.customer-stat.is-active span, .customer-stat.is-active small { color: rgba(255,255,255,.68); }
.customer-stat--risk:not(.is-active) span { color: var(--red-deep); }
.customer-stat--lost:not(.is-active) span { color: var(--ink); }
.customer-stat--buildup:not(.is-active) span { color: var(--blue); }
.customer-list-meta { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 42px; margin: 14px 0 12px; padding: 0 0 0 2px; }
.customer-list-meta p { margin: 0; color: var(--ink-50); font-size: var(--text-sm); }
.expansion-filter { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
/* Dritter Fall derselben Falle: ein eigenes display schlaegt die
   Browserregel fuer [hidden]. Im Aufbau gibt es keine Ausbaufelder. */
.expansion-filter[hidden] { display: none; }
.expansion-filter__count { color: var(--ink-50); font-size: var(--text-sm); font-variant-numeric: tabular-nums; }
.customer-table-wrap { overflow-x: auto; border: 1px solid var(--border); border-radius: 12px; }
.customer-table { width: 100%; min-width: 1120px; border-collapse: collapse; table-layout: fixed; }
.customer-table th {
  height: 36px; padding: 0 12px; border-bottom: 1px solid var(--border); background: var(--mist-2); color: var(--ink-50); text-align: left; font-size: var(--text-xs); font-weight: 750; letter-spacing: .08em; text-transform: uppercase;
}
.customer-table th:nth-child(1) { width: 16%; }
.customer-table th:nth-child(2) { width: 9%; }
.customer-table th:nth-child(3) { width: 11%; }
.customer-table th:nth-child(4) { width: 12%; }
.customer-table th:nth-child(5) { width: 12%; }
.customer-table th:nth-child(6) { width: 13%; }
.customer-table th:nth-child(7) { width: 10%; }
.customer-table th:nth-child(8) { width: 17%; }
.customer-row { cursor: pointer; transition: background 140ms ease; }
.customer-row:hover { background: var(--mist-2); }
.customer-row:focus-visible { outline: 3px solid rgba(255,57,58,.28); outline-offset: -3px; }
.customer-cell { height: 78px; padding: 9px 12px; border-bottom: 1px solid var(--border-soft); vertical-align: middle; font-size: var(--text-sm); }
.customer-row:last-child .customer-cell { border-bottom: 0; }
.customer-cell strong { display: block; font-size: var(--text-sm); line-height: 1.25; }
.customer-cell > span:not(.risk-badge) { display: block; margin-top: 3px; color: var(--ink-50); font-size: var(--text-xs); line-height: 1.25; }
.customer-cell > small { display: block; margin-top: 2px; color: var(--ink-50); font-size: var(--text-xs); line-height: 1.2; }
.customer-cell--name strong { font-size: var(--text-sm); }
.customer-cell--metric strong { font-size: var(--text-base); font-variant-numeric: tabular-nums; }
.customer-cell--lever strong { margin-top: 5px; }
.visit-state { font-weight: 600; }
/* Retention als Zustand: Wer liefert, steht gruen da; die Quote erscheint nur,
   wenn sie unter 100 liegt. */
.visit-state--done { color: var(--green) !important; }
.visit-state--open { color: var(--red-deep) !important; }
.sentiment--negative { color: var(--red-deep); }
.sentiment--positive { color: var(--green); }
.sentiment--neutral { color: var(--ink-70); }
.risk-badge, .status-chip {
  display: inline-flex; min-height: 22px; align-items: center; padding: 0 8px; border-radius: 999px; font-size: var(--text-xs); font-weight: 750;
}
/* display: inline-flex wuerde [hidden] sonst ueberstimmen. */
.status-chip[hidden] { display: none; }
.risk-badge--high, .status-chip--risk { background: var(--red-soft); color: var(--red-deep); }
.risk-badge--watch { background: var(--amber-soft); color: var(--amber); }
.risk-badge--low, .status-chip--neutral { background: var(--mist); color: var(--ink-70); }
.risk-badge--lost { background: var(--ink); color: #fff; }
.status-chip--growth { background: var(--green-soft); color: var(--green); }
.status-chip--info { background: var(--blue-soft); color: var(--blue); }
.repp-altkunde-chip { margin-left: 6px; min-height: 16px; padding: 0 6px; font-size: var(--text-xs); vertical-align: middle; }

.view[hidden] { display: none; }
.view { animation: view-enter .18s ease-out; }
@keyframes view-enter { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .view { animation: none; } }


/* Kundenentwicklung je Prüfstelle: dichte Monatsmatrix mit Heatmap, bewusst nah
   am Looker-Report, damit beide Auswertungen nebeneinander lesbar bleiben. */
.station-section { margin-top: 16px; padding: 20px; overflow: hidden; }
.station-controls { display: flex; flex-wrap: wrap; gap: 10px; margin: 14px 0 12px; }
.station-controls input[type="date"] {
  min-height: 42px; padding: 0 12px; border: 1px solid var(--border); border-radius: 999px;
  background: #fff; color: var(--ink); font-family: var(--font); font-size: var(--text-sm); font-weight: 700;
  letter-spacing: 0; text-transform: none;
}
.station-table-wrap { overflow-x: auto; border: 1px solid var(--border); border-radius: 12px; }
.station-table { width: 100%; border-collapse: collapse; font-size: var(--text-sm); font-variant-numeric: tabular-nums; }
.station-table th, .station-table td { padding: 7px 9px; border-bottom: 1px solid var(--border-soft); text-align: right; white-space: nowrap; }
.station-table thead th { position: sticky; top: 0; z-index: 1; background: var(--mist-2); color: var(--ink-50); font-size: var(--text-xs); font-weight: 750; letter-spacing: .06em; text-transform: uppercase; }
.station-table tbody th, .station-table tfoot th { position: sticky; left: 0; z-index: 1; max-width: 230px; background: #fff; text-align: left; font-size: var(--text-sm); font-weight: 700; white-space: normal; }
.station-table thead th:first-child { left: 0; z-index: 2; background: var(--mist-2); text-align: left; }
.station-table tbody th small { display: block; margin-top: 1px; color: var(--ink-50); font-size: var(--text-xs); font-weight: 400; }
/* Der Blauton folgt dem Wert; der Text bleibt in beiden Extremen lesbar. */
.station-table td.heat { background: color-mix(in srgb, var(--blue) calc(var(--heat, 0) * 62%), #fff); }
.station-table td.heat { color: var(--ink); }
.station-table tbody tr:hover td, .station-table tbody tr:hover th { background-color: var(--mist); }
.station-total { font-weight: 750; }
/* Der Umschalter lag im waagerecht scrollenden Tabellenkasten und klebte
   deshalb an dessen linker Kante. Er steht jetzt in einer eigenen Zeile
   darunter. */
.station-more:empty { display: none; }
/* DS-7: Die kompakte Filterzeile gibt es nur am Telefon (mobile.css). */
.station-filter-toggle { display: none; }
.station-more { display: flex; justify-content: center; margin-top: 10px; }
.station-toggle { margin-top: 0; }
/* Zellen und Kundennamen sind Einstiege, keine reinen Zahlen. */
.station-customer {
  padding: 0; border: 0; background: none; cursor: pointer;
  color: inherit; font: inherit; text-align: left;
  text-decoration: underline; text-decoration-color: var(--border); text-underline-offset: 3px;
}
.station-customer:hover { text-decoration-color: var(--red); }
.station-cell {
  display: block; width: 100%; padding: 0; border: 0; background: none; cursor: pointer;
  color: inherit; font: inherit; font-variant-numeric: tabular-nums; text-align: right;
}
.station-cell:hover { text-decoration: underline; text-underline-offset: 3px; }
.station-table td.heat:has(.station-cell:focus-visible) { outline: 2px solid var(--ink); outline-offset: -2px; }
.station-month-table { width: 100%; margin-top: 14px; border-collapse: collapse; font-size: var(--text-sm); }
.station-month-table th { padding: 7px 9px; border-bottom: 1px solid var(--border); color: var(--ink-50); font-size: var(--text-xs); font-weight: 750; letter-spacing: .06em; text-transform: uppercase; text-align: left; }
.station-month-table th:last-child, .station-month-table td:last-child { text-align: right; }
.station-month-table td { padding: 8px 9px; border-bottom: 1px solid var(--border-soft); }
.station-month-table tr.is-cancelled td { color: var(--ink-50); text-decoration: line-through; }
.hu-flag { padding: 1px 6px; border-radius: 999px; background: var(--green-soft); color: var(--green); font-size: var(--text-xs); font-style: normal; font-weight: 750; }
/* Qualifizierende HU: unterlegt statt beschriftet. Die Zeilen, die auf die
   Uebergabe einzahlen, sollen sich auf einen Blick abheben. */
/* Gleiche Groesse und Form wie .hu-flag: beide stehen manchmal in derselben
   Zelle nebeneinander und sollen als eine Familie von Kennzeichnungen
   gelesen werden, nicht als zwei verschiedene. */
.type-chip { display: inline-flex; align-items: center; padding: 1px 7px; border-radius: 999px; font-size: var(--text-xs); font-weight: 750; }
.type-chip.is-qualifying { background: var(--green-soft); color: var(--green); box-shadow: inset 0 0 0 1px rgba(0, 118, 61, .16); }
.hu-flag.is-cancelled { background: var(--red-soft); color: var(--red-deep); }
.station-controls .chart-switch { margin-top: 1px; }
.station-controls .chart-switch button { min-height: 42px; }
/* Die beiden Summenzeilen sind kein weiterer Kunde. Sie stehen deshalb als
   eigener Block unter der Tabelle: gleiche Zeilenhoehe wie die Kundenzeilen,
   aber abgesetzt durch eine kraeftige Trennlinie und eine ruhige Flaeche statt
   durch die Heatmap-Faerbung, die sie wie Daten aussehen liess. */
.station-table tfoot th, .station-table tfoot td {
  padding-block: 13px; border-bottom: 0; background: var(--mist);
  color: var(--ink); font-size: var(--text-sm); font-weight: 750;
}
.station-table tfoot tr:first-child th, .station-table tfoot tr:first-child td { border-top: 2px solid var(--ink); }
.station-table tfoot .station-active th, .station-table tfoot .station-active td { border-top: 1px solid var(--border); }
.station-table tfoot th { letter-spacing: .01em; }
@media (max-width: 640px) {
  .station-section { padding: 16px; }
  .station-controls { display: grid; grid-template-columns: 1fr; }
  .station-controls .workspace-filter, .station-controls select, .station-controls input { width: 100%; }
  .station-table tbody th, .station-table tfoot th { max-width: 150px; }
}
.section-footnote { margin: 10px 2px 0; color: var(--ink-50); font-size: var(--text-sm); line-height: 1.45; }

.action-dialog {
  width: min(520px, calc(100vw - 28px)); padding: 0; border: 0; border-radius: 14px; color: var(--ink); box-shadow: 0 24px 70px rgba(20,30,40,.25);
}
.action-dialog::backdrop, .customer-dialog::backdrop { background: rgba(20,30,40,.58); }
.action-dialog form { padding: 20px; }
.customer-dialog__purpose { max-width: 640px; margin: 4px 0 0; color: var(--ink-50); font-size: var(--text-sm); line-height: 1.4; }
.customer-dialog {
  width: min(1180px, calc(100vw - 32px)); max-height: calc(100vh - 32px); max-height: calc(100dvh - 32px); padding: 0; border: 0; border-radius: 14px; color: var(--ink); box-shadow: 0 24px 70px rgba(20,30,40,.25);
}

/* Wochenplanung */
.week-dialog {
  width: min(880px, calc(100vw - 32px)); max-height: calc(100vh - 32px); max-height: calc(100dvh - 32px);
  padding: 22px; border: 0; border-radius: 14px; color: var(--ink);
  box-shadow: 0 24px 70px rgba(20,30,40,.25);
}
.week-dialog::backdrop { background: rgba(20,30,40,.58); }
/* Unten Luft, damit der scrollende Inhalt nicht an der Schnittkante endet:
   Der Kasten "Akut, aber diese Woche an keinem deiner Tage" wurde sonst
   mitten in seiner eigenen Rahmenrundung abgeschnitten und sah aus, als
   liefe er in die Fusszeile hinein. */
.week-body { margin-top: 8px; padding-bottom: var(--space-4); overflow-y: auto; max-height: calc(100vh - 190px); max-height: calc(100dvh - 190px); }
.week-section { padding: 16px 0; border-top: 1px solid var(--border-soft); }
.week-section:first-child { border-top: 0; padding-top: 6px; }
.week-section h3 { margin: 0 0 4px; font-size: var(--text-base); }
.week-hint, .week-note { margin: 0; color: var(--ink-50); font-size: var(--text-sm); line-height: 1.45; }
.week-note { margin-top: 9px; font-style: italic; }

.week-days { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; margin-top: 11px; }
.week-day { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.week-day > span { display: flex; align-items: baseline; gap: 5px; color: var(--ink-70); font-size: var(--text-sm); font-weight: 700; }
.week-day > span small { color: var(--ink-50); font-weight: 500; font-variant-numeric: tabular-nums; }
.week-day select {
  /* Ohne `min-width: 0` spannt der laengste Optionstext die Rasterspalte auf
     und schiebt den Dialog ueber den Rand. */
  width: 100%; min-width: 0; min-height: 38px; padding: 0 9px; border: 1px solid var(--border);
  border-radius: 10px; background: #fff; color: var(--ink); font-family: var(--font); font-size: var(--text-sm);
}

/* Zwischen Handy und Schreibtisch: fuenf Tage nebeneinander werden zu eng. */
@media (max-width: 920px) {
  .week-days { grid-template-columns: repeat(2, 1fr); }
  .week-plan { grid-template-columns: repeat(2, 1fr); }
}

.week-target { display: grid; gap: 12px; margin-top: 10px; }
.week-target__note { margin: 0; color: var(--ink-50); font-size: var(--text-sm); line-height: 1.45; }
/* Wenn das Risiko die Vorgabe uebersteigt, ist das keine Randnotiz. */
.week-target__note.is-risk { color: var(--red-deep); font-weight: 600; }

/* Der Vorschlag ist bearbeitbar: streichen an jedem Stopp, ergaenzen je Tag. */
.week-day-plan li { position: relative; }
.week-stop-drop {
  position: absolute; top: 2px; right: 0; width: 22px; height: 22px; padding: 0;
  border: 0; border-radius: 999px; background: none; cursor: pointer;
  color: var(--ink-50); font-size: var(--text-base); line-height: 1;
}
/* Der Kreis bleibt klein, damit er den Kundennamen daneben nicht verdeckt;
   die unsichtbare Flaeche dahinter macht ihn trotzdem sicher zu treffen. */
.week-stop-drop::before {
  content: ""; position: absolute; top: 50%; left: 50%;
  width: 44px; height: 44px; transform: translate(-50%, -50%);
}
.week-stop-drop:hover { background: var(--red-soft); color: var(--red-deep); }
.week-detour { color: var(--amber); font-weight: 600; }
.week-pinned { color: var(--ink-50); font-style: italic; }
.week-add { display: block; margin-top: 8px; }
.week-add select {
  width: 100%; min-height: 32px; padding: 0 8px; border: 1px dashed var(--border);
  border-radius: 10px; background: none; color: var(--ink-50);
  font-family: inherit; font-size: var(--text-sm);
}
.week-add select:hover { border-color: var(--ink-50); color: var(--ink-70); }

.week-plan-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.week-plan { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 9px; margin-top: 11px; }
.week-day-plan { min-width: 0; padding: 10px 11px; border: 1px solid var(--border); border-radius: 12px; }
.week-day-plan.is-empty { border-style: dashed; background: var(--mist-2); }
.week-day-plan__head { display: flex; flex-direction: column; gap: 1px; padding-bottom: 8px; border-bottom: 1px solid var(--border-soft); }
.week-day-plan__head strong { font-size: var(--text-sm); }
.week-day-plan__head span { color: var(--ink-50); font-size: var(--text-sm); font-weight: 700; letter-spacing: .05em; text-transform: uppercase; }
.week-day-plan ul { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 9px; }
.week-day-plan li { display: flex; gap: 8px; min-width: 0; }
.week-day-plan li i { flex: 0 0 auto; margin-right: 5px; vertical-align: 1px; }
/* Die Nummer ist die Fahrreihenfolge des Tages, nicht die Prioritaet. */
.week-stop-no {
  flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center;
  width: 18px; height: 18px; margin-top: 1px; border-radius: 50%;
  background: var(--mist); color: var(--ink-70);
  font-size: var(--text-xs); font-weight: 750; font-variant-numeric: tabular-nums;
}
.route-maps { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 12px 0 0; }
.route-maps[hidden] { display: none; }
.route-maps span { color: var(--ink-50); font-size: var(--text-sm); font-weight: 750; letter-spacing: .07em; text-transform: uppercase; }
.route-maps a {
  padding: 4px 10px; border: 1px solid var(--border); border-radius: 999px;
  color: var(--red-deep); font-size: var(--text-sm); font-weight: 700; text-decoration: none;
}
.route-maps a:hover { border-color: var(--red); background: var(--red-soft); }

.week-maps-links { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin-top: 10px; }
.week-maps-link {
  display: inline-block; margin-top: 0; color: var(--red-deep);
  font-size: var(--text-sm); font-weight: 700; text-decoration: underline;
  text-underline-offset: 3px; text-decoration-color: rgba(199,20,30,.35);
}
.week-maps-link:hover { text-decoration-color: currentColor; }
/* Mehr als neun Zwischenstopps brauchen einen zweiten Link je Tag - der
   sieht als Pille klar nach "weiterer Schritt" aus, nicht wie ein zweiter,
   halb abgeschnittener Satz. */
.week-maps-link--more {
  padding: 4px 10px; border: 1px solid var(--border); border-radius: 999px;
  text-decoration: none; font-size: var(--text-xs);
}
.week-maps-link--more:hover { border-color: var(--red); background: var(--red-soft); text-decoration-color: transparent; }
.week-day-plan__hint { margin: 9px 0 0; color: var(--ink-50); font-size: var(--text-sm); }
.week-day-plan li div { min-width: 0; padding-right: 22px; }
.week-day-plan strong { display: block; font-size: var(--text-sm); line-height: 1.25; }
.week-day-plan small { display: block; margin-top: 2px; color: var(--ink-50); font-size: var(--text-sm); line-height: 1.3; }
.week-day-plan p { margin: 9px 0 0; color: var(--ink-50); font-size: var(--text-sm); }
.address-flag {
  display: inline-block; padding: 0 5px; border-radius: 999px;
  background: var(--amber-soft); color: var(--amber); font-size: var(--text-xs); font-weight: 750;
}

.week-leftovers { margin-top: 14px; padding: 12px 13px; border: 1px solid var(--border); border-radius: 12px; background: var(--mist-2); }
.week-leftovers[hidden] { display: none; }
.week-leftovers h4 { margin: 0 0 8px; font-size: var(--text-sm); }
.week-leftovers ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 7px; }
/* Name und Anzahl stehen auf einer Zeile und gehoeren zusammen - also
   dieselbe Groesse. Das Gewicht traegt die Unterscheidung: der Name ist,
   wonach man sucht, die Zahl begleitet ihn. */
.week-leftovers li { font-size: var(--text-base); color: var(--ink-70); }
.week-leftovers li strong { font-size: inherit; font-weight: 700; color: var(--ink); }
.week-leftovers li small { display: block; margin-top: 1px; color: var(--ink-50); font-size: var(--text-sm); }
.week-leftovers p { margin: 9px 0 0; color: var(--ink-50); font-size: var(--text-sm); }

/* Tagesroute: Start-/Endpunkt, Kundenliste, Ergebnis. Teilt sich die Optik
   mit der Wochenplanung (.week-section, .week-hint), statt eigene Regeln
   fuer denselben Zweck zu erfinden. */
.day-route-field { display: block; }
.day-route-field input {
  width: 100%; min-height: 44px; padding: 0 10px; margin-top: 6px; border: 1px solid var(--border);
  border-radius: 9px; background: var(--paper); color: var(--ink); font: inherit; font-size: var(--text-base);
}
.day-route-point { margin-top: 8px; }
.day-route-point select {
  width: 100%; min-height: 44px; padding: 0 10px; border: 1px solid var(--border);
  border-radius: 9px; background: var(--paper); color: var(--ink); font: inherit; font-size: var(--text-base);
}
.day-route-address { display: flex; gap: 8px; margin-top: 8px; }
.day-route-address input { flex: 1; min-height: 44px; padding: 0 10px; border: 1px solid var(--border); border-radius: 9px; font: inherit; font-size: var(--text-base); }
.day-route-hint { margin: 6px 0 0; color: var(--ink-50); font-size: var(--text-sm); }

.day-route-search-results { margin-top: 8px; display: grid; gap: 4px; border: 1px solid var(--border); border-radius: 10px; padding: 6px; background: var(--mist-2); }
.day-route-search-results[hidden] { display: none; }
.day-route-search-results button {
  width: 100%; padding: 7px 9px; border: 0; border-radius: 7px; background: none; text-align: left; cursor: pointer;
  font: inherit; font-size: var(--text-sm); color: var(--ink);
}
.day-route-search-results button:hover { background: var(--paper); }
.day-route-search-results small { display: block; margin-top: 1px; color: var(--ink-50); font-size: var(--text-sm); }

.day-route-stops { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 8px; }
.day-route-stop { position: relative; padding: 9px 30px 9px 10px; border: 1px solid var(--border); border-radius: 10px; }
.day-route-stop__head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.day-route-stop strong { font-size: var(--text-sm); }
.day-route-stop small { display: block; margin-top: 1px; color: var(--ink-50); font-size: var(--text-sm); }
.day-route-stop .week-stop-drop { top: 8px; right: 6px; }
.day-route-stop__controls { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 8px; }
.day-route-fixed { display: inline-flex; align-items: center; gap: 5px; font-size: var(--text-sm); color: var(--ink-70); }
.day-route-stop__controls input[type="time"] { min-height: 32px; padding: 0 8px; border: 1px solid var(--border); border-radius: 8px; font: inherit; font-size: var(--text-sm); }
.day-route-duration { display: inline-flex; align-items: center; gap: 5px; font-size: var(--text-sm); color: var(--ink-50); }
.day-route-duration input { width: 52px; min-height: 32px; padding: 0 6px; border: 1px solid var(--border); border-radius: 8px; font: inherit; font-size: var(--text-sm); }
.day-route-empty { color: var(--ink-50); font-size: var(--text-sm); padding: 6px 2px; }

.day-route-result { margin-top: 10px; }
.day-route-result__source { margin: 0; color: var(--ink-50); font-size: var(--text-sm); font-weight: 600; }
.day-route-result__departure { margin: 8px 0 0; padding: 8px 10px; border-radius: 9px; background: var(--mist-2); font-size: var(--text-sm); }
.day-route-result__list { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 7px; }
.day-route-result__anchor { display: flex; justify-content: space-between; padding: 6px 9px; border-radius: 8px; background: var(--mist); font-size: var(--text-sm); color: var(--ink-70); font-weight: 700; }
.day-route-result__stop { padding: 8px 10px; border: 1px solid var(--border); border-radius: 9px; }
.day-route-result__stop.is-late { border-color: var(--red); background: var(--red-soft); }
.day-route-result__stop strong { display: block; font-size: var(--text-sm); }
.day-route-result__stop span { display: block; margin-top: 2px; color: var(--ink-50); font-size: var(--text-sm); }
.day-route-result__conflict { display: block; margin-top: 3px; color: var(--red-deep); font-size: var(--text-sm); font-weight: 700; }
.week-day-plan__head button.text-button { margin-top: 3px; align-self: flex-start; }

/* Und eine Kante, die sagt: hier endet der Inhalt, hier beginnt die
   Fusszeile. Ohne sie schwebte der Knopf ohne erkennbare Zugehoerigkeit
   unter dem letzten Kasten. */
.week-actions {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  margin-top: 0; padding-top: var(--space-3); border-top: 1px solid var(--border-soft);
}
.week-actions__state { color: var(--ink-50); font-size: var(--text-sm); font-variant-numeric: tabular-nums; }

/* Wochenbriefing */
.briefing-dialog {
  width: min(880px, calc(100vw - 32px)); max-height: calc(100vh - 32px); max-height: calc(100dvh - 32px);
  padding: 22px; border: 0; border-radius: 14px; color: var(--ink);
  box-shadow: 0 24px 70px rgba(20,30,40,.25);
}
.briefing-dialog::backdrop { background: rgba(20,30,40,.58); }
.briefing-body { margin-top: 6px; overflow-y: auto; max-height: calc(100vh - 150px); max-height: calc(100dvh - 150px); }
.briefing-section { padding: 16px 0; border-top: 1px solid var(--border-soft); }
.briefing-section:first-child { border-top: 0; padding-top: 8px; }
.briefing-section h3 { margin: 0 0 4px; font-size: var(--text-base); }
.briefing-section h3 em { font-style: normal; font-weight: 600; color: var(--ink-50); font-size: var(--text-sm); }
.briefing-hint { margin: 0 0 10px; color: var(--ink-50); font-size: var(--text-sm); line-height: 1.45; }
.briefing-kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--border-soft); border: 1px solid var(--border-soft); border-radius: 10px; overflow: hidden; }
.briefing-kpis div { padding: 11px 13px; background: #fff; }
.briefing-kpis span { display: block; color: var(--ink-50); font-size: var(--text-xs); font-weight: 750; letter-spacing: .07em; text-transform: uppercase; }
.briefing-kpis strong { display: block; margin-top: 3px; font-size: var(--text-xl); font-variant-numeric: tabular-nums; }
.briefing-kpis small { display: block; margin-top: 2px; color: var(--ink-50); font-size: var(--text-sm); }
.briefing-table { width: 100%; border-collapse: collapse; font-size: var(--text-sm); }
.briefing-table th { padding: 7px 10px; border-bottom: 1px solid var(--border); color: var(--ink-50); font-size: var(--text-xs); font-weight: 750; letter-spacing: .07em; text-transform: uppercase; text-align: left; }
.briefing-table td { padding: 9px 10px; border-bottom: 1px solid var(--border-soft); vertical-align: top; }
.briefing-table strong { display: block; font-variant-numeric: tabular-nums; }
.briefing-table small { display: block; margin-top: 2px; color: var(--ink-50); font-size: var(--text-sm); }
.briefing-table tr.is-stalled td { background: var(--red-soft); }
.briefing-flag { display: inline-flex; padding: 2px 8px; border-radius: 999px; background: var(--red); color: #fff; font-size: var(--text-sm); font-weight: 700; }
.briefing-list { margin: 0; padding: 0; list-style: none; }
.briefing-list li { padding: 9px 0; border-bottom: 1px solid var(--border-soft); }
.briefing-list strong { display: block; font-size: var(--text-sm); }
.briefing-list span { display: block; margin-top: 1px; color: var(--ink-70); font-size: var(--text-sm); }
.briefing-list small { display: block; margin-top: 2px; color: var(--ink-50); font-size: var(--text-sm); }
.briefing-empty, .briefing-loading { margin: 0; padding: 14px 0; color: var(--ink-50); font-size: var(--text-sm); }
.briefing-more { margin: 8px 0 0; color: var(--ink-50); font-size: var(--text-sm); }
.briefing-source { margin: 14px 0 0; padding-top: 12px; border-top: 1px solid var(--border-soft); color: var(--ink-50); font-size: var(--text-sm); line-height: 1.5; }
.customer-dialog form { padding: 22px; }
.customer-dialog__head { margin-bottom: 14px; }
.customer-overview { display: grid; grid-template-columns: repeat(6, 1fr); border: 1px solid var(--border); border-radius: 12px 12px 0 0; overflow: hidden; }
.customer-overview > * { min-height: 84px; padding: 13px 14px; border: 0; border-right: 1px solid var(--border); background: var(--mist-2); text-align: left; font: inherit; color: inherit; }
.customer-overview > *:last-child { border-right: 0; }
/* Der Health Score ist die einzige Kachel, die etwas aufklappt. */
.overview-health { cursor: pointer; }
.overview-health:hover { background: var(--mist); }
.overview-health.health-score--critical { background: var(--red-soft); color: var(--red-deep); }
.overview-health.health-score--watch { background: var(--amber-soft); color: var(--amber); }
.overview-health.health-score--healthy { background: var(--green-soft); color: var(--green); }
.overview-health.health-score--unknown { background: var(--mist); color: var(--ink-50); }
.profile-health-breakdown { max-width: none; padding: 16px 18px; border: 1px solid var(--border); border-top: 0; background: #fff; }
.profile-health-breakdown .score-components { max-width: 760px; }
.profile-health-breakdown[hidden] { display: none; }
.customer-overview span { display: block; color: var(--ink-50); font-size: var(--text-xs); font-weight: 750; letter-spacing: .08em; }
.customer-overview strong { display: block; margin-top: 8px; font-size: var(--text-xl); font-variant-numeric: tabular-nums; }
.customer-overview small { display: block; margin-top: 2px; color: var(--ink-50); font-size: var(--text-sm); }
.inspection-type-strip {
  display: block; min-height: 58px; padding: 0;
  border: 1px solid var(--border); border-top: 0; border-radius: 0 0 12px 12px; background: #fff;
}
/* display: block wuerde [hidden] sonst ueberstimmen. */
.inspection-type-strip[hidden] { display: none; }
.inspection-period-row { display: flex; min-height: 58px; align-items: center; justify-content: space-between; gap: 18px; padding: 10px 14px; }
.inspection-period-row + .inspection-period-row { border-top: 1px solid var(--border-soft); }
.inspection-period-row > div:first-child > strong { display: block; font-size: var(--text-sm); }
.inspection-period-row > div:first-child > small { display: block; margin-top: 2px; color: var(--ink-50); font-size: var(--text-sm); }
.inspection-type-list { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; }
.inspection-type-list > span {
  display: inline-flex; min-height: 28px; align-items: center; gap: 6px; padding: 0 9px; border-radius: 999px; background: var(--mist-2); color: var(--ink-70);
}
.inspection-type-list strong { font-size: var(--text-xs); letter-spacing: .05em; }
.inspection-type-list small { color: var(--ink); font-size: var(--text-sm); font-variant-numeric: tabular-nums; }
.customer-performance { margin-top: 18px; padding: 17px; border: 1px solid var(--border); border-radius: 12px; background: var(--mist-2); }
.customer-performance h3 { margin: 3px 0 0; font-size: var(--text-base); }
.monthly-performance-grid { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(280px, .8fr); gap: 22px; align-items: stretch; }
.customer-chart-panel { min-width: 0; }
.chart-toolbar { display: flex; min-height: 34px; align-items: center; justify-content: space-between; gap: 10px; margin: 2px 0 8px; }
.chart-switch[hidden] { display: none; }
.chart-switch { display: inline-flex; padding: 3px; border: 1px solid var(--border); border-radius: 999px; background: #fff; }
.chart-switch button { min-height: 30px; padding: 0 11px; border: 0; border-radius: 999px; background: transparent; color: var(--ink-50); cursor: pointer; font-size: var(--text-sm); font-weight: 750; }
.chart-switch button:hover { color: var(--ink); background: var(--mist); }
.chart-switch button.is-active { background: var(--ink); color: #fff; }
.chart-legend { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 10px; color: var(--ink-50); font-size: var(--text-xs); }
.chart-legend span { display: inline-flex; align-items: center; gap: 5px; }
.chart-legend i { width: 9px; height: 9px; border-radius: 999px; background: var(--ink); }
.chart-legend i.is-line { width: 14px; height: 2px; border-radius: 999px; background: var(--blue); }
.monthly-chart { min-height: 226px; overflow-x: auto; border: 1px solid var(--border); border-radius: 10px; background: #fff; }
.monthly-chart svg { display: block; width: 100%; min-width: 610px; height: auto; }
.monthly-chart text { fill: var(--ink-50); font-family: var(--font); font-size: var(--text-xs); }
.monthly-chart .chart-axis-label { fill: var(--ink); font-size: var(--text-xs); font-weight: 750; }
.monthly-chart .chart-grid-line { stroke: var(--border-soft); stroke-width: 1; }
.monthly-chart .chart-base-line { stroke: var(--border); stroke-width: 1; }
.monthly-chart .chart-bar { fill: var(--ink); }
.monthly-chart .chart-bar.is-current { fill: var(--red-action); }
.monthly-chart .inspection-line { fill: none; stroke: var(--blue); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.monthly-chart .inspection-point { fill: #fff; stroke: var(--blue); stroke-width: 2; }
.monthly-chart .inspection-point.is-current { fill: var(--blue); }
.monthly-chart .chart-empty { padding: 70px 18px; color: var(--ink-50); text-align: center; font-size: var(--text-sm); }
.chart-note { margin: 7px 2px 0; color: var(--ink-50); font-size: var(--text-sm); line-height: 1.45; }
.chart-scroll-hint { display: none; }
.operational-facts { display: grid; margin: 0; border: 1px solid var(--border); border-radius: 10px; overflow: hidden; background: #fff; }
.operational-facts div { padding: 9px 11px; border-bottom: 1px solid var(--border-soft); }
.operational-facts div:last-child { border-bottom: 0; }
.operational-facts dt { color: var(--ink-50); font-size: var(--text-xs); font-weight: 750; letter-spacing: .07em; text-transform: uppercase; }
.operational-facts dd { margin: 4px 0 0; font-size: var(--text-sm); line-height: 1.4; overflow-wrap: anywhere; }
.profile-grid { display: grid; grid-template-columns: 1fr 1fr; margin-top: 18px; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
/* Einstellungen in voller Breite: drei Spalten, damit Rhythmus, Geburtstag und
   Stimmung nebeneinander liegen statt in einer langen Kolonne. */
.profile-settings { border-bottom: 1px solid var(--border); }
.profile-settings__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; align-items: start; }
.profile-settings__grid > .visit-cadence-editor { margin-top: 0; }
.profile-settings__grid > .choice-fieldset { margin-top: 0; }
.profile-section { min-width: 0; padding: 18px 18px 18px 0; }
.profile-section + .profile-section { padding: 18px 0 18px 18px; border-left: 1px solid var(--border); }
.profile-section__head { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-bottom: 12px; }
.profile-section h3 { margin: 0; font-size: var(--text-base); }
.profile-fields { display: grid; gap: 10px; }
.profile-fields--two { grid-template-columns: 1fr 1fr; }
/* Gutachten/FleetHub/Lastschriftmandat sahen aus wie die drei echten Felder
   daneben (Cashback, Reminderbriefe, Exklusiv) - identische Auswahlfelder,
   aber ohne dass eine Änderung je gespeichert wurde: Sie leiten sich aus
   anderen HubSpot-Daten ab und haben keine eigene schreibbare Property. */
.expansion-fields select:disabled { opacity: .55; cursor: not-allowed; }
.expansion-fields small { display: block; margin-top: 3px; color: var(--ink-50); font-size: var(--text-xs); line-height: 1.35; }
.crm-context-grid { display: grid; grid-template-columns: 1fr 1fr; margin-bottom: 12px; border: 1px solid var(--border); border-radius: 10px; overflow: hidden; }
.crm-context-grid > div { min-width: 0; min-height: 64px; padding: 9px 10px; background: var(--mist-2); border-right: 1px solid var(--border-soft); border-bottom: 1px solid var(--border-soft); }
.crm-context-grid > div:nth-child(even) { border-right: 0; }
.crm-context-grid > div:nth-last-child(-n+2) { border-bottom: 0; }
.crm-context-grid span { display: block; color: var(--ink-50); font-size: var(--text-xs); font-weight: 750; letter-spacing: .07em; }
.crm-context-grid strong { display: block; margin-top: 5px; font-size: var(--text-sm); overflow-wrap: anywhere; }
.crm-context-grid small, .crm-context-grid a { display: block; margin-top: 2px; color: var(--ink-50); font-size: var(--text-sm); line-height: 1.4; overflow-wrap: anywhere; }
.crm-context-grid a { color: var(--red-deep); font-weight: 700; text-decoration-thickness: 1px; text-underline-offset: 2px; }
.crm-context-grid a[hidden] { display: none; }
.workflow-editor { display: grid; grid-template-columns: minmax(180px, 1fr) auto; gap: 9px; align-items: end; margin: 0 0 12px; padding: 11px; border: 1px solid var(--border); border-radius: 10px; }
.workflow-editor label { display: block; color: var(--ink-70); font-size: var(--text-sm); font-weight: 700; }
.workflow-editor select { width: 100%; min-height: 42px; margin-top: 5px; padding: 8px 10px; border: 1px solid var(--border); border-radius: 10px; background: #fff; }
.workflow-editor small { grid-column: 1 / -1; color: var(--ink-50); font-size: var(--text-sm); line-height: 1.4; }
.profile-section label, .choice-fieldset legend { color: var(--ink-70); font-size: var(--text-sm); font-weight: 700; }
.profile-section input[type="text"], .profile-section input[type="date"], .profile-section select, .profile-section textarea {
  width: 100%; min-height: 42px; margin-top: 5px; padding: 9px 10px; border: 1px solid var(--border); border-radius: 10px; background: #fff; color: var(--ink); outline: none;
}
.profile-section textarea { min-height: 90px; resize: vertical; line-height: 1.4; }
.profile-section input:focus, .profile-section select:focus, .profile-section textarea:focus { border-color: var(--red); box-shadow: 0 0 0 3px rgba(255,57,58,.13); }
.choice-fieldset { display: flex; flex-wrap: wrap; gap: 7px; margin: 13px 0 0; padding: 0; border: 0; }
.choice-fieldset legend { width: 100%; margin-bottom: 2px; }
.choice-fieldset label {
  min-height: 34px; display: inline-flex; align-items: center; gap: 6px; padding: 0 9px; border: 1px solid var(--border); border-radius: 999px; background: #fff; cursor: pointer; font-size: var(--text-sm);
}
.choice-fieldset input { width: 14px; height: 14px; margin: 0; accent-color: var(--red-action); }
.profile-note { display: block; margin-top: 13px; }
.activity-workspace { margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--border); }
.inspection-history { margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--border); }
.inspection-history-table-wrap { max-height: 310px; margin-top: 12px; overflow: auto; border: 1px solid var(--border); border-radius: 10px; }
.inspection-history-actions { display: flex; gap: 16px; margin-top: 10px; }
.inspection-history-actions:has(> [hidden]:only-child), .inspection-history-actions:not(:has(> :not([hidden]))) { margin-top: 0; }
.inspection-history-table { width: 100%; min-width: 1120px; border-collapse: collapse; }
.inspection-history-table th { position: sticky; top: 0; z-index: 1; height: 34px; padding: 0 10px; background: var(--mist-2); color: var(--ink-50); text-align: left; font-size: var(--text-xs); letter-spacing: .07em; text-transform: uppercase; }
.inspection-history-table td { height: 42px; padding: 7px 10px; border-top: 1px solid var(--border-soft); font-size: var(--text-sm); }
.inspection-history-table td:nth-child(6) { font-variant-numeric: tabular-nums; }
.report-number { font-size: var(--text-sm); font-weight: 750; font-variant-numeric: tabular-nums; letter-spacing: .025em; white-space: nowrap; }
/* Die Berichtnummer ist der direkte Weg ins PDF — in der Kundenakte wie in
   der Prüfungsliste einer Zelle der Kundenentwicklung. */
/* Der Linktext selbst ist schmal und einzeilig; die ganze Zelle füllen macht
   ihn tippbar, ohne in Nachbarzeilen oder -spalten hineinzuragen - das
   Negativ-Margin holt sich das Zellenpolster zurück, das Innenpolster
   zeichnet die Textposition unverändert wieder hin. */
.report-number--link {
  display: flex; align-items: center; height: 100%;
  margin: -7px -10px; padding: 7px 10px;
  color: var(--ink); text-decoration: underline; text-decoration-color: var(--border); text-underline-offset: 3px;
}
.report-number--link:hover { color: var(--red-deep); text-decoration-color: var(--red); }
.inspection-history > .text-button { margin-top: 7px; }
.activity-workspace__head, .activity-history__head, .activity-composer__actions {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
}
.activity-workspace__head { align-items: flex-start; }
.activity-workspace__head h3 { margin: 3px 0 0; font-size: var(--text-base); }
.activity-workspace__head p { margin: 4px 0 0; color: var(--ink-50); font-size: var(--text-sm); }
.activity-workspace__grid { display: grid; grid-template-columns: minmax(300px, .86fr) minmax(0, 1.14fr); gap: 22px; margin-top: 13px; }
.activity-composer { padding-right: 22px; border-right: 1px solid var(--border); }
.activity-composer h4, .activity-history h4 { margin: 0; font-size: var(--text-sm); }
.activity-composer > p { margin: 3px 0 10px; color: var(--ink-50); font-size: var(--text-sm); line-height: 1.4; }
.activity-composer label { display: block; margin-top: 9px; color: var(--ink-70); font-size: var(--text-sm); font-weight: 700; }
.activity-composer label[hidden] { display: none; }
.activity-composer__fields { display: grid; grid-template-columns: .7fr 1.3fr; gap: 9px; }
.activity-composer input, .activity-composer select, .activity-composer textarea {
  width: 100%; min-height: 42px; margin-top: 5px; padding: 9px 10px; border: 1px solid var(--border); border-radius: 10px; background: #fff; color: var(--ink); outline: none;
}
.activity-composer textarea { min-height: 104px; resize: vertical; line-height: 1.45; }
.activity-composer input:focus, .activity-composer select:focus, .activity-composer textarea:focus { border-color: var(--red); box-shadow: 0 0 0 3px rgba(255,57,58,.13); }
.activity-composer__actions { align-items: flex-end; margin-top: 11px; }
.activity-composer__actions span { max-width: 290px; color: var(--ink-50); font-size: var(--text-sm); line-height: 1.4; }
.activity-composer__actions .button { flex: 0 0 auto; }
.activity-history { min-width: 0; }
.activity-history__head { min-height: 30px; padding-bottom: 7px; border-bottom: 1px solid var(--border); }
.activity-history__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.activity-history__tools { display: flex; align-items: center; gap: 12px; }
.activity-history__head span { color: var(--ink-50); font-size: var(--text-xs); }
/* Anrufe sind Beiwerk: der Schalter dafuer auch. */
.activity-calls-toggle { display: inline-flex; align-items: center; gap: 5px; color: var(--ink-50); font-size: var(--text-sm); cursor: pointer; }
.activity-calls-toggle[hidden] { display: none; }
.activity-calls-toggle input { width: 13px; height: 13px; accent-color: var(--ink); }
.activity-list { max-height: 350px; overflow-y: auto; }
.activity-entry { padding: 12px 2px; border-bottom: 1px solid var(--border-soft); }
.activity-entry:last-child { border-bottom: 0; }
.activity-entry__meta { display: flex; align-items: center; justify-content: space-between; gap: 12px; color: var(--ink-50); font-size: var(--text-xs); }
.activity-entry__meta span { color: var(--red-deep); font-weight: 750; text-transform: uppercase; letter-spacing: .05em; }
.activity-entry strong { display: block; margin-top: 5px; font-size: var(--text-sm); overflow-wrap: anywhere; }
.activity-entry p { margin: 4px 0 0; color: var(--ink-70); font-size: var(--text-sm); line-height: 1.5; white-space: pre-wrap; overflow-wrap: anywhere; }
.activity-entry .activity-entry__empty { color: var(--ink-50); font-style: italic; }
.activity-state { margin: 0; padding: 22px 4px; color: var(--ink-50); font-size: var(--text-sm); line-height: 1.45; }
.activity-state--error { color: var(--red-deep); }
.activity-state--gap { padding: 12px 12px; border-radius: 10px; background: var(--amber-canvas); color: var(--ink-70); }
.activity-entry--latest { background: var(--red-soft); border-radius: 10px; padding-inline: 10px; }
.profile-recommendation { margin-top: 14px; padding: 12px 14px; border-radius: 12px; background: var(--green-soft); color: var(--green); }
.profile-recommendation span { display: block; font-size: var(--text-xs); font-weight: 750; letter-spacing: .08em; }
.profile-recommendation strong { display: block; margin-top: 5px; font-size: var(--text-sm); }
.profile-recommendation p { margin: 3px 0 0; font-size: var(--text-sm); line-height: 1.4; }
.customer-dialog__actions { margin-top: 14px; }
.dialog-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; margin-bottom: 18px; }
.dialog-head h2 { margin: 0 0 3px; font-size: var(--text-xl); letter-spacing: -.02em; }
.dialog-head p { margin: 0; color: var(--ink-50); font-size: var(--text-sm); }
.dialog-close { min-height: 36px; padding: 0 10px; border: 1px solid var(--border); border-radius: 999px; background: #fff; cursor: pointer; font-size: var(--text-sm); font-weight: 700; }
.action-dialog label { display: block; margin-top: 13px; color: var(--ink-70); font-size: var(--text-sm); font-weight: 700; }
.action-dialog input, .action-dialog select, .action-dialog textarea {
  width: 100%; margin-top: 6px; padding: 11px 12px; border: 1px solid var(--border); border-radius: 10px; background: #fff; color: var(--ink); font-size: var(--text-base); outline: none;
}
.action-dialog input, .action-dialog select { min-height: 44px; }
.action-dialog textarea { resize: vertical; line-height: 1.4; }
.action-dialog input:focus, .action-dialog select:focus, .action-dialog textarea:focus { border-color: var(--red); box-shadow: 0 0 0 3px rgba(255,57,58,.13); }
.route-suggestion { margin-top: 14px; padding: 12px; border-radius: 12px; background: var(--blue-soft); color: var(--blue); }
.route-suggestion strong { display: block; margin-top: 4px; font-size: var(--text-sm); }
.route-suggestion--neutral { background: var(--mist-2); color: var(--ink); }
.outcome-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.dialog-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 18px; }
.score-drawer { position: fixed; inset: 0; z-index: 50; }
.drawer-backdrop { position: absolute; inset: 0; width: 100%; border: 0; background: rgba(20,30,40,.58); cursor: default; }
.score-drawer aside {
  position: absolute; top: 0; right: 0; width: min(460px, 100%); height: 100%; padding: 22px; overflow-y: auto; background: #fff;
  box-shadow: -12px 0 32px rgba(20,30,40,.16); animation: drawer-in 220ms cubic-bezier(.2,.9,.3,1);
}
@keyframes drawer-in { from { transform: translateX(24px); opacity: .65; } to { transform: translateX(0); opacity: 1; } }
.score-scale { display: flex; justify-content: space-between; padding: 9px 0 12px; border-bottom: 1px solid var(--border); color: var(--ink-50); font-size: var(--text-xs); }
.score-components { margin-top: 8px; }
.score-component { padding: 13px 0; border-bottom: 1px solid var(--border-soft); }
.score-component__line { display: flex; justify-content: space-between; gap: 12px; margin-bottom: 7px; font-size: var(--text-sm); }
.score-component__line span { color: var(--ink-70); }
.score-component__bar { height: 6px; border-radius: 999px; background: var(--mist); overflow: hidden; }
.score-component__bar i { display: block; height: 100%; width: var(--score); background: var(--ink); border-radius: inherit; }
.score-component small { display: block; margin-top: 5px; color: var(--ink-50); font-size: var(--text-sm); line-height: 1.35; }

/* Komponenten ohne Datengrundlage bleiben sichtbar, aber deutlich zurueckgenommen:
   der Nutzer soll sehen, was fehlt, statt eine erfundene Zahl zu lesen. */
.score-component.is-inactive { opacity: .55; }
.score-component.is-inactive .score-component__bar { background: repeating-linear-gradient(90deg, var(--mist) 0 4px, transparent 4px 8px); }
.score-component__line em { font-style: normal; font-weight: 700; color: var(--ink-50); font-size: var(--text-sm); }
.score-component__line em.is-muted { color: var(--amber); }
.score-formula {
  margin: 12px 0 0; padding: 10px 12px;
  border-radius: 10px; background: var(--mist);
  color: var(--ink-70); font-size: var(--text-sm); font-variant-numeric: tabular-nums;
}
.score-formula strong { font-size: var(--text-base); color: var(--ink); }
.score-formula small { display: block; margin-top: 4px; color: var(--ink-50); font-size: var(--text-sm); }

/* Health-Chip in der Kundenbasis */
.health-score--unknown { background: var(--mist); color: var(--ink-50); }
.customer-cell--health { width: 118px; }
/* Nur noch die Zahl. Die Rechnung dahinter steht in der Kundenakte — in einer
   Tabellenzeile aufzuklappen war der falsche Ort dafuer. */
.health-chip {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 46px; min-height: 34px; padding: 4px 10px;
  border: 1px solid var(--border); border-radius: 10px; background: #fff;
}
.health-chip strong { font-size: var(--text-xl); font-variant-numeric: tabular-nums; line-height: 1.1; }
.health-chip.health-score--critical { background: var(--red-soft); border-color: transparent; color: var(--red-deep); }
.health-chip.health-score--watch { background: var(--amber-soft); border-color: transparent; color: var(--amber); }
.health-chip.health-score--healthy { background: var(--green-soft); border-color: transparent; color: var(--green); }
.health-chip.health-score--unknown { background: var(--mist); border-color: transparent; color: var(--ink-50); }


.score-breakdown { max-width: 760px; }
.score-breakdown__head h3 { margin: 14px 0 2px; font-size: var(--text-base); }
.score-breakdown__head p { margin: 0; color: var(--ink-50); font-size: var(--text-sm); line-height: 1.45; }
.drawer-note { margin-top: 18px; padding: 14px; background: var(--mist-2); border-radius: 12px; }
.drawer-note strong { font-size: var(--text-sm); }
.drawer-note p { margin: 4px 0 0; color: var(--ink-70); font-size: var(--text-sm); line-height: 1.45; }
.toast {
  /* bottom: 56px statt 20px - das Geburtstags-Fähnchen sitzt bei bottom: 12px
     in derselben Ecke; bei 20px überlappten beide Boxen, und der höhere
     z-index des Toasts machte das Fähnchen für die Dauer der Meldung
     unklickbar, auch dort, wo es sichtbar blieb. */
  position: fixed; right: 20px; bottom: 56px; z-index: 80; max-width: 360px; padding: 13px 16px; border-radius: 12px;
  background: var(--ink); color: #fff; box-shadow: 0 10px 30px rgba(20,30,40,.25); font-size: var(--text-sm); font-weight: 600;
}

@media (max-width: 1180px) {
  .command-grid { grid-template-columns: minmax(0, 1.35fr) minmax(330px, .8fr); }
  .filters { max-width: none; }
  /* Der Sales-Owner ist die verzichtbare Spalte; Signal und naechster Schritt
     duerfen nicht hinter dem Rand liegen. */
  .account-table { min-width: 0; }
  .account-table th:nth-child(5), .account-table td:nth-child(5) { display: none; }
  .account-table th:nth-child(1) { width: 20%; }
  .account-table th:nth-child(2) { width: 28%; }
  .account-table th:nth-child(3) { width: 74px; }
  .account-table th:nth-child(4) { width: 16%; }
  .account-table th:nth-child(6) { width: 21%; }
  .account-table th:nth-child(7) { width: 74px; }
  .signal strong, .signal small, .next-step strong, .contact-cell small { white-space: normal; }
  .profile__selector select { max-width: 132px; }
  .app-header { gap: 18px; }
  .brand { min-width: 0; }
}

@media (max-width: 900px) {
  .app-header { gap: 14px; }
  .brand { min-width: 0; }
  .main-nav { overflow-x: auto; }
  .nav-link { white-space: nowrap; }
  /* Ohne diese Zeile presst das Raster die Einsatztafel auf 20 px zusammen,
     weil die rechte Spur bei 330 px Mindestbreite stehen bleibt — und
     .dispatch-board { overflow: hidden } schneidet den Rest lautlos ab.
     Beim Entfernen der Karte hat eine Ersetzung den Schwanz eines
     Sammelselektors mitgenommen und diese Regel geloescht. */
  .command-grid { grid-template-columns: 1fr; }
  .command-grid, .customer-pass { min-height: 0; }
  .customer-base-summary { grid-template-columns: repeat(2, 1fr); }
  .customer-stat:nth-child(2n) { border-right: 0; }
  .customer-stat:nth-child(-n+4) { border-bottom: 1px solid var(--border); }
  /* Die fuenfte Kachel steht allein in der letzten Zeile und nimmt sie ganz. */
  .customer-stat:last-child { grid-column: 1 / -1; border-right: 0; }
  .customer-overview { grid-template-columns: repeat(2, 1fr); }
  .customer-overview > * { border-right: 1px solid var(--border); border-bottom: 1px solid var(--border); }
  .customer-overview > *:nth-child(2n) { border-right: 0; }
  .customer-overview > *:last-child { grid-column: 1 / -1; border-right: 0; border-bottom: 0; }
  /* DS-9i: Sechs Kacheln in zwei Spalten, die letzte ganz breit: Daneben
     blieb neben dem Umsatz eine leere Zelle. Der Umsatz nimmt die Zeile. */
  .customer-overview > *:nth-last-child(2):nth-child(odd) { grid-column: 1 / -1; border-right: 0; }
  .inspection-period-row { align-items: flex-start; flex-direction: column; gap: 8px; }
  .inspection-type-list { justify-content: flex-start; }
  .profile-grid { grid-template-columns: 1fr; }
  .monthly-performance-grid { grid-template-columns: 1fr; }
  .profile-section { padding-right: 0; }
  .profile-section + .profile-section { padding-left: 0; border-left: 0; border-top: 1px solid var(--border); }
}

@media (max-width: 640px) {
  section[id] { scroll-margin-top: 128px; }
  .app-header { height: auto; min-height: 52px; padding: 8px 12px; gap: 10px; flex-wrap: wrap; }
  /* Die Kopfzeile darf auf dem Handy nicht breiter werden als der Bildschirm,
     sonst scrollt die gesamte Seite horizontal. */
  .brand { flex: 1 1 auto; min-width: 0; min-height: 44px; overflow: hidden; }
  .brand__logo { width: 76px; height: auto; }
  .brand > span { white-space: nowrap; }
  .profile { order: 2; min-width: 0; max-width: 128px; }
  .profile__avatar:not(.profile__trigger) { display: none; }
  .profile__selector, .profile__selector select { width: 100%; }
  .profile__selector select { min-height: 44px; max-width: 128px; padding-left: 10px; }
  .main-nav { order: 3; width: 100%; padding-top: 4px; border-top: 1px solid rgba(255,255,255,.09); }
  .nav-link { flex: 1; min-height: 44px; display: flex; align-items: center; justify-content: center; text-align: center; padding: 7px 8px; font-size: var(--text-sm); }
  /* Auf dem Handy passen vier Tabs nicht in eine Reihe, ohne dass „Auswertung“
     abgeschnitten wird. Das Account Management bekommt deshalb seine eigene,
     ganze Zeile - was die Hierarchie unterwegs sogar deutlicher macht. */
  .main-nav { flex-wrap: wrap; row-gap: 3px; overflow: visible; }
  .main-nav__divider { display: none; }
  .nav-link--primary { flex: 1 0 100%; padding-inline: 10px; }
  main { padding: 18px 12px 36px; }
  .workspace-head { align-items: flex-start; flex-direction: column; }
  .workspace-head h1 { font-size: var(--text-2xl); }
  .workspace-head__actions { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); width: 100%; }
  .workspace-head__actions .workspace-filter { grid-column: 1 / -1; }
  .workspace-head__actions .workspace-filter select { width: 100%; }
  .demo-flag { width: 100%; justify-content: center; }
  .workspace-head__actions .demo-flag { grid-column: 1 / -1; }
  .workspace-head__actions .button { width: 100%; min-width: 0; min-height: 44px; padding-inline: 10px; }
  .board-head { align-items: flex-start; flex-direction: column; }
  .filters { width: 100%; max-width: none; flex-wrap: nowrap; overflow-x: auto; justify-content: flex-start; padding-bottom: 2px; }
  .filter { min-height: 44px; white-space: nowrap; }
  .board-summary { grid-template-columns: 1fr; }
  .board-summary div { border-right: 0; }
  .board-summary div:first-child { border-bottom: 1px solid var(--border-soft); }
  .table-wrap { overflow: visible; }
  .handover-wrap, .handover-dormant-panel { overflow-x: auto; }
  .account-table, .account-table tbody { display: block; min-width: 0; }
  .account-table thead { display: none; }
  /* Kunde | HU-Trend — Signal — Letzter Kontakt | Faellig — Sales — Schritt */
  .account-row { display: grid; grid-template-columns: 1fr auto; padding: 12px; border-bottom: 1px solid var(--border-soft); }
  .account-row td { display: block !important; width: auto; height: auto; padding: 3px 5px; border: 0; }
  .account-row td:nth-child(1) { grid-column: 1; grid-row: 1; }
  .account-row td:nth-child(3) { grid-column: 2; grid-row: 1; text-align: right; }
  .account-row td:nth-child(2) { grid-column: 1 / -1; grid-row: 2; }
  .account-row td:nth-child(4) { grid-column: 1; grid-row: 3; }
  .account-row td:nth-child(7) { grid-column: 2; grid-row: 3; text-align: right; }
  .account-row td:nth-child(5) { grid-column: 1 / -1; grid-row: 4; }
  .account-row td:nth-child(6) { grid-column: 1 / -1; grid-row: 5; }
  /* Auf dem Handy darf keine Zelle mehr per nowrap das Grid aufspannen:
     eine einzige nicht umbrechende Zeile schiebt sonst die ganze Seite breiter. */
  .account-row td { min-width: 0; }
  .signal strong, .next-step strong,
  .signal small, .next-step small,
  .account-name span, .workflow-cell strong {
    white-space: normal; overflow: visible; text-overflow: clip;
  }
  .pass-identity h2 { font-size: var(--text-2xl); }
  .customer-base-section { padding: 16px; }
  .section-heading { flex-direction: column; gap: 5px; }
  .customer-search, .customer-search input { width: 100%; }
  .customer-base-summary { grid-template-columns: 1fr; }
  .customer-stat { min-height: 76px; border-right: 0; border-bottom: 1px solid var(--border) !important; }
  .customer-stat:last-child { border-bottom: 0 !important; }
  .customer-list-meta { align-items: flex-start; flex-direction: column; gap: 0; padding: 9px 2px; }
  .customer-table-wrap { overflow: visible; border: 0; border-radius: 0; }
  .buildup-wrap { overflow-x: auto; border: 1px solid var(--border); border-radius: 12px; }
  .customer-table, .customer-table tbody { display: block; min-width: 0; }
  .customer-table thead { display: none; }
  .customer-row { display: grid; grid-template-columns: 1fr 1fr; margin-bottom: 9px; border: 1px solid var(--border); border-radius: 12px; overflow: hidden; }
  .customer-cell { display: block; width: auto; height: auto; min-height: 60px; padding: 10px 11px; border-right: 1px solid var(--border-soft); }
  .customer-cell:nth-child(even) { border-right: 0; }
  .customer-cell--name, .customer-cell--lever { grid-column: 1 / -1; border-right: 0; }
  .customer-cell--lever { min-height: 70px; }
  .customer-row:last-child .customer-cell { border-bottom: 1px solid var(--border-soft); }
  .customer-row:last-child .customer-cell:last-child { border-bottom: 0; }
  /* Der Health Score steht auf dem Handy oben neben dem Namen: Er ist der
     erste Blick, wenn ein RL im Auto kurz auf die Kundenliste schaut. */
  .customer-cell--health { width: auto; grid-column: 1 / -1; border-right: 0; }
  .health-chip { min-height: 40px; }
  .score-breakdown__head h3 { margin-top: 0; }
  .score-formula { font-size: var(--text-sm); }

  /* Briefing unterwegs: Kennzahlen zweispaltig, Übergabe-Pipeline als Karten
     statt als Tabelle, damit "steht still" nicht rechts abgeschnitten wird. */
  .week-dialog { width: calc(100vw - 12px); max-height: calc(100vh - 12px); max-height: calc(100dvh - 12px); padding: 16px; border-radius: 12px; }
  .week-body { max-height: calc(100vh - 210px); max-height: calc(100dvh - 210px); }
  .week-days { grid-template-columns: 1fr; }
  .week-day { flex-direction: row; align-items: center; justify-content: space-between; gap: 10px; }
  .week-day select { width: 62%; min-height: 44px; }
  .week-target { flex-direction: column; gap: 8px; }
  .week-target__note { padding-top: 0; }
  .week-plan { grid-template-columns: 1fr; }
  .week-actions { flex-direction: column; align-items: stretch; gap: 9px; }
  .week-actions .button { width: 100%; }
  .briefing-dialog { width: calc(100vw - 12px); max-height: calc(100vh - 12px); max-height: calc(100dvh - 12px); padding: 16px; border-radius: 12px; }
  .briefing-body { max-height: calc(100vh - 130px); max-height: calc(100dvh - 130px); }
  .briefing-kpis { grid-template-columns: 1fr 1fr; }
  .briefing-table, .briefing-table tbody, .briefing-table tr, .briefing-table td { display: block; width: auto; }
  .briefing-table thead { display: none; }
  .briefing-table tr {
    position: relative; margin-bottom: 9px; padding: 11px 12px;
    border: 1px solid var(--border); border-radius: 12px;
  }
  .briefing-table tr.is-stalled { border-color: var(--red); }
  .briefing-table tr.is-stalled td { background: transparent; }
  .briefing-table td { padding: 0; border: 0; }
  /* Stand (1) und Kunde (2) nebeneinander, Rest darunter als Zeilen. */
  .briefing-table td:nth-child(1) {
    position: absolute; top: 11px; right: 12px;
    text-align: right; color: var(--ink-50); font-size: var(--text-sm);
  }
  .briefing-table td:nth-child(1) strong { font-size: var(--text-base); color: var(--ink); }
  .briefing-table td:nth-child(2) { padding-right: 64px; }
  .briefing-table td:nth-child(2) strong { font-size: var(--text-base); }
  .briefing-table td:nth-child(3)::before { content: "Sales: "; color: var(--ink-50); }
  .briefing-table td:nth-child(4)::before { content: "Tempo: "; color: var(--ink-50); }
  .briefing-table td:nth-child(3),
  .briefing-table td:nth-child(4) { margin-top: 6px; font-size: var(--text-sm); }
  .briefing-table td:nth-child(5) { margin-top: 8px; font-size: var(--text-sm); }
  .briefing-list li { padding: 11px 0; }
  .briefing-list strong { font-size: var(--text-base); }
  .briefing-list span, .briefing-list small { font-size: var(--text-sm); }
  .customer-dialog { width: calc(100vw - 16px); max-height: calc(100vh - 16px); max-height: calc(100dvh - 16px); }
  .customer-dialog form { padding: 16px; }
  /* Die Kundenakte ist lang. Unterwegs muss der Kundenname immer sichtbar sein
     und "Schließen" ohne Zurückscrollen erreichbar bleiben. */
  .customer-dialog__head {
    position: sticky; top: 0; z-index: 3;
    margin: -16px -16px 12px; padding: 12px 16px;
    background: rgba(255,255,255,.96); backdrop-filter: blur(8px);
    border-bottom: 1px solid var(--border);
  }
  .customer-dialog__head h2 { font-size: var(--text-xl); }
  .customer-dialog__head .dialog-close { min-height: 44px; padding: 0 14px; }
  /* Der Monatschart bleibt breiter als der Bildschirm und wird seitlich
     gescrollt; die Kante zeigt an, dass rechts noch etwas kommt. */
  .monthly-chart { position: relative; -webkit-overflow-scrolling: touch; }
  .chart-scroll-hint { display: block; margin: 4px 2px 0; color: var(--ink-50); font-size: var(--text-sm); }
  .customer-overview { grid-template-columns: 1fr 1fr; }
  .chart-toolbar { align-items: flex-start; flex-direction: column; }
  .chart-switch { width: 100%; }
  .chart-switch button { flex: 1; min-height: 38px; }
  .chart-legend { justify-content: flex-start; }
  .monthly-chart { min-height: 210px; }
  .workflow-editor { grid-template-columns: 1fr; }
  .workflow-editor small { grid-column: 1; }
  .workflow-editor .button { width: 100%; }
  .profile-fields--two { grid-template-columns: 1fr; }
  .crm-context-grid { grid-template-columns: 1fr; }
  .crm-context-grid > div { border-right: 0; border-bottom: 1px solid var(--border-soft) !important; }
  .crm-context-grid > div:last-child { border-bottom: 0 !important; }
  .activity-workspace__grid { grid-template-columns: 1fr; gap: 16px; }
  .activity-composer { padding: 0 0 16px; border-right: 0; border-bottom: 1px solid var(--border); }
  .activity-composer input, .activity-composer select, .activity-composer textarea,
  .profile-section input, .profile-section select, .profile-section textarea { font-size: var(--text-lg); }
  .activity-composer__actions { align-items: stretch; flex-direction: column; }
  .activity-composer__actions span { max-width: none; }
  .activity-composer__actions .button { width: 100%; }
  .activity-list { max-height: none; }
  .customer-dialog__actions { flex-wrap: wrap; }
  .customer-dialog__actions .button { flex: 1 1 140px; }
        .toast { left: 12px; right: 12px; bottom: 12px; max-width: none; }
  .text-button, .dialog-close { min-height: 44px; }
  .account-profile-link { min-height: 44px; padding: 6px 0; }
  .pass-actions .button { min-height: 44px; }
  .outcome-grid { grid-template-columns: 1fr; gap: 0; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

/* --- Werkzeugleiste: Planen als eigene Gruppe ---------------------------
   Suche und Filter sind Filter, keine Befehle; die beiden Planungswege
   gehoeren zusammen; das Ergebnis steht fuer sich. Die Gruppe macht das
   sichtbar, ohne einen Klick hinzuzufuegen. */
.action-group {
  display: inline-flex;
  align-items: center;
  gap: 0;
  padding: 0 3px 0 var(--space-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  background: var(--paper);
}
.action-group__label {
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--ink-50);
  padding-right: var(--space-1);
}
/* 42px minus den 2px Rand der Gruppe selbst: Ohne diesen Ausgleich war die
   Gruppe insgesamt hoeher als jeder Knopf daneben und sass in der
   bottom-ausgerichteten Zeile sichtbar zu weit oben. */
.action-group .button {
  min-height: 40px;
  border-color: transparent;
  background: transparent;
}
.action-group .button:hover { background: var(--mist); border-color: var(--border-soft); }
/* "Woche" und "Tag" standen ohne Grenze nebeneinander und lasen sich wie ein
   einzelnes Wort. Eine Linie zwischen ihnen macht aus einer Textzeile wieder
   zwei Knoepfe. */
.action-group .button + .button {
  margin-left: 2px;
  padding-left: calc(var(--space-2) + 1px);
  border-left: 1px solid var(--border-soft);
  border-radius: 0 999px 999px 0;
}
.action-group .button:first-of-type { border-radius: 999px 0 0 999px; }
/* Der Filterblock steht optisch vor den Aktionen, nicht zwischen ihnen. */
.workspace-head__actions .workspace-filter { margin-right: var(--space-2); }

/* --- Wenig Zeilen sind ein Erfolg, kein Ladefehler ----------------------
   Bei einem Filter mit zwei Treffern endete die linke Spalte nach zwei
   Zeilen, waehrend der Kundenpass rechts weiterlief - darunter 500px
   Nichts. Ein Boden unter der Tafel haelt die beiden Spalten zusammen. */
.dispatch-board { min-height: 520px; display: flex; flex-direction: column; }
.dispatch-board .list-pager { margin-top: auto; }

/* Der Abschluss unter einer kurzen Liste: sagt, dass nichts fehlt. */
.list-complete {
  margin: var(--space-4) 0 0;
  /* Auf der Papierflaeche braucht die Fusszeile denselben Einzug wie die
     Zeilen darueber, sonst klebt der Text an der Kartenkante. */
  padding: var(--space-4) 14px;
  border-top: 1px solid var(--border-soft);
  color: var(--ink-50);
  font-size: var(--text-sm);
}
.list-complete strong { color: var(--ink-70); font-weight: 600; }
.list-complete button {
  margin-left: var(--space-2);
  padding: 0;
  border: 0;
  background: none;
  color: var(--red-action);
  font-size: inherit;
  font-weight: 600;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* Fussnote unter einer Tabelle: eine Definition, die sonst in jeder Zeile
   stuende. */
.table-footnote {
  margin: var(--space-3) 0 0;
  color: var(--ink-50);
  font-size: var(--text-sm);
  line-height: 1.5;
}

/* --- Tagesroute: Abfahrtszeit neben dem Datum -------------------------- */
.day-route-when { display: flex; gap: var(--space-3); align-items: flex-end; flex-wrap: wrap; }
.day-route-when .day-route-field { flex: 1 1 200px; }
.day-route-when .day-route-field--time { flex: 0 0 auto; display: grid; gap: var(--space-1); }
.day-route-when .day-route-field--time > span {
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--ink-50);
}
.day-route-maps-rest { display: inline-flex; gap: var(--space-2); flex-wrap: wrap; }
/* Eigenes display schlaegt sonst das hidden-Attribut: Der Kasten stuende
   auch dann da, wenn eine einzige Etappe reicht. */
.day-route-maps-rest[hidden] { display: none; }

/* Ein deaktivierter Knopf soll deaktiviert aussehen. Der blasse Rotton las
   sich wie ein Primaerknopf, der nur schlecht gedruckt ist. */
.button--primary:disabled,
.button--primary[disabled] {
  background: var(--mist);
  border-color: var(--border);
  color: var(--ink-50);
  cursor: not-allowed;
  opacity: 1;
}

/* Die Faktenzellen im Kundenpass schnitten ihren Inhalt ab
   ("54 Tage · aus der Kont…"). Umbrechen ist besser als abschneiden. */
.pass-account-facts div,
.operational-facts div { min-width: 0; }
.pass-account-facts strong,
.operational-facts dd,
.operational-facts strong {
  overflow-wrap: anywhere;
  white-space: normal;
}

/* --- Werkzeugleiste: Platz, bevor sie umbricht -------------------------
   Die Kopfzeile hatte keinen Puffer: Sobald die Unterzeile etwas laenger
   wurde (in der Kartei steht dort mehr als im Account Management), rutschte
   die Wochenroute in eine zweite Reihe und der Info-Punkt unter den Titel.
   Der Titel darf schrumpfen, das Suchfeld auch - die Aktionen bleiben
   zusammen. */
.workspace-head > div:first-child { min-width: 0; flex: 1 1 auto; }
.workspace-head__actions { flex: 0 1 auto; min-width: 0; row-gap: var(--space-2); }
.global-search { min-width: 0; flex: 0 1 auto; }
.global-search input { width: clamp(148px, 13vw, 210px); }
.workspace-head__actions .workspace-filter select { min-width: 0; width: clamp(128px, 11vw, 168px); }
.workspace-head__actions .workspace-filter--pill select { width: auto; min-height: 40px; padding-left: 6px; border: 0; background: transparent; }
.page-subtitle-row { display: flex; align-items: baseline; gap: var(--space-2); flex-wrap: nowrap; min-width: 0; }
.page-subtitle-row #page-subtitle { min-width: 0; }

/* Die Gruppe kompakter: Sie soll gliedern, nicht Platz kosten. Die
   Innenhoehe bleibt unangetastet - sonst waere die Gruppe hier wieder
   hoeher als die Knoepfe daneben. */
.action-group__label { font-size: var(--text-xs); padding-right: 2px; }
.action-group .button { padding-left: var(--space-2); padding-right: var(--space-2); }

@media (max-width: 1180px) {
  /* Eng wird es zuerst beim Label - die beiden Knoepfe stehen dann fuer sich,
     bleiben aber durch den Rahmen als Paar erkennbar. */
  .action-group__label { display: none; }
  .action-group { padding-left: 3px; }
  .workspace-filter--pill > span { display: none; }
  .workspace-filter--pill { padding-left: 4px; }
}

/* Wird es eng, bekommen die Aktionen eine eigene Zeile unter dem Titel -
   ganz, nicht halb. Ein einzelner Knopf, der allein in eine zweite Reihe
   rutscht, sieht nach Fehler aus; eine volle Zeile nach Absicht. */
@media (max-width: 1340px) {
  .workspace-head { flex-wrap: wrap; align-items: flex-start; }
  .workspace-head > div:first-child { flex: 1 1 100%; }
  .workspace-head__actions { flex: 1 1 100%; justify-content: flex-start; }
  /* Die Reihe gehoert jetzt ganz den Aktionen; das Suchfeld nimmt den Rest
     statt seinen Platzhalter abzuschneiden. */
  .global-search { flex: 1 1 200px; }
  .global-search input { width: 100%; }
}

/* --- Pipeline-Board: Stufen aus HubSpot, ziehbar -----------------------
   Die Spalten sind Entscheidungen des Regionalleiters. Was aus den
   Pruefungsdaten folgt (Churn, Risiko, Besuch faellig), steht als Merkmal
   auf der Karte und ist bewusst nicht verschiebbar. */
.pipeline-column.is-prestage,
.pipeline-column.is-nodeal { background: var(--mist-2); border-style: dashed; }
.pipeline-column.is-prestage .pipeline-column__head strong { color: var(--blue); }
.pipeline-column.is-nodeal .pipeline-column__head strong { color: var(--ink-50); }
.pipeline-column.is-closed .pipeline-column__head strong { color: var(--ink-50); }

.pipeline-card {
  display: grid;
  gap: var(--space-1);
  padding: var(--space-3);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-sm);
  background: var(--paper);
}
.pipeline-card[draggable="true"] { cursor: grab; }
.pipeline-card[draggable="true"]:active { cursor: grabbing; }
.pipeline-card.is-static { cursor: default; }
.pipeline-card.is-dragging { opacity: .45; }
.pipeline-card.is-saving { opacity: .6; }
.pipeline-card.has-conflict { border-color: var(--red); }
.pipeline-card > strong { font-size: var(--text-sm); font-weight: 700; }
.pipeline-card > span { color: var(--ink-50); font-size: var(--text-xs); }

.pipeline-card__open {
  display: grid;
  gap: 2px;
  padding: 0;
  border: 0;
  background: none;
  text-align: left;
  cursor: pointer;
}
.pipeline-card__open strong { display: block; font-size: var(--text-sm); font-weight: 700; }
.pipeline-card__open span { display: block; color: var(--ink-50); font-size: var(--text-xs); }
.pipeline-card__open:hover strong { text-decoration: underline; text-underline-offset: 2px; }

.pipeline-card__figures em { color: var(--ink-70); font-size: var(--text-xs); font-style: normal; }
.pipeline-card__chips { display: flex; flex-wrap: wrap; gap: var(--space-1); }
.pipeline-chip {
  padding: 1px 7px;
  border-radius: var(--radius-pill);
  background: var(--mist);
  color: var(--ink-70);
  font-size: var(--text-xs);
  font-style: normal;
  font-weight: 600;
}
.pipeline-chip.is-churn { background: var(--red-soft); color: var(--red-deep); }
.pipeline-chip.is-risk { background: var(--amber-soft); color: var(--amber); }
.pipeline-chip.is-visit { background: var(--blue-soft); color: var(--blue); }

/* Der Widerspruch zwischen Stufe und Pruefungsdaten. Er wird angezeigt, nicht
   aufgeloest: Welche Seite recht hat, weiss nur der Regionalleiter. */
.pipeline-card__conflict {
  margin: 0;
  padding-top: var(--space-1);
  border-top: 1px solid var(--border-soft);
  color: var(--red-deep);
  font-size: var(--text-xs);
  line-height: 1.35;
}

/* Ziehen ist die schnelle Geste; das Auswahlfeld ist derselbe Weg fuer
   Tastatur und Telefon. */
.pipeline-card__move select {
  width: 100%;
  min-height: 32px;
  padding: 0 var(--space-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--paper);
  color: var(--ink-70);
  font-size: var(--text-xs);
}
.pipeline-column__list[data-pipeline-drop] { min-height: 72px; border-radius: var(--radius-sm); }
.pipeline-board.is-dragging .pipeline-column__list[data-pipeline-drop] {
  outline: 1px dashed var(--border);
  outline-offset: -4px;
}
.pipeline-column__list.is-drop-target {
  background: var(--red-soft);
  outline: 2px solid var(--red-action);
  outline-offset: -4px;
}
.pipeline-readonly {
  grid-column: 1 / -1;
  margin: 0;
  color: var(--ink-50);
  font-size: var(--text-sm);
}

/* --- Start und Ende je Tag im Wochenvorschlag --------------------------
   Zwei knappe Felder unter dem Tageskopf. Sie schreiben in dieselben
   Tageseinstellungen wie der Tagesplaner, damit beide Ansichten dasselbe
   zeigen. */
.week-day-points {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin: var(--space-2) 0 var(--space-1);
}
.week-day-points label { display: grid; gap: 2px; flex: 1 1 140px; min-width: 0; }
.week-day-points span {
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--ink-50);
}
.week-day-points select {
  width: 100%;
  min-height: 32px;
  padding: 0 var(--space-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--paper);
  color: var(--ink-70);
  font-size: var(--text-sm);
}

/* Der Weg, eine gefundene Adresse dauerhaft zu merken, steht direkt unter
   ihr - nicht in einem Einstellungsdialog, den niemand sucht. */
.day-route-point .text-button { margin-top: var(--space-1); }

/* --- Mobile Einbauten gehören nicht in die Desktop-Akte -----------------
   mobile.js spritzt eine Sprungleiste und Ausklapp-Knoepfe in die
   Kundenakte. Ihre Gestaltung steht in mobile.css hinter
   `html.rl-mobile-mode` - auf dem Desktop griff sie nie, und die Elemente
   standen als nackte Browser-Schaltflaechen in der Akte.

   Die Regel steht bewusst hier und nicht in mobile.css: Das mobile
   Stylesheet haengt an `media="(max-width: 1023px)"` und gilt am Desktop
   gar nicht. Nur von hier aus deckt sie auch den Fall ab, dass jemand das
   Fenster von schmal wieder breit zieht und die Einbauten im DOM bleiben.
   `display: none` nimmt sie zugleich aus der Tabreihenfolge. */
html:not(.rl-mobile-mode) .mobile-record-nav,
html:not(.rl-mobile-mode) .mobile-section-toggle { display: none; }

/* Eine Statuskachel traegt ein Wort, keine Zahl. Die 22px mit
   tabular-nums sind fuer "1 HU", "57" und "146 €" gemacht; ein Wort in
   derselben Groesse war das Lauteste in der Zeile und sagte dabei nur
   noch einmal, was schon in der Beschriftung stand. */
.customer-overview .overview-status strong {
  font-size: var(--text-lg);
  font-variant-numeric: normal;
  letter-spacing: -.01em;
}

/* --- Termine, Entwürfe und Speicherstatus ---------------------------------
   Datum, Uhrzeit und Dauer stehen sichtbar nebeneinander. Ein wieder-
   hergestellter Entwurf sagt das, und der Speicherstatus steht im Dialog
   selbst, nicht nur im Toast. */
.visit-when { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) minmax(0, 1fr); gap: 10px; }
.visit-when label { min-width: 0; }
.visit-when-summary { margin: 8px 0 0; color: var(--ink-50); font-size: var(--text-sm); line-height: 1.4; }
.label-optional { margin-left: 4px; color: var(--ink-50); font-weight: 500; }
.draft-note { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 10px; margin: 0 0 4px; padding: 8px 12px; border-radius: 10px; background: var(--mist-2); color: var(--ink-70); font-size: var(--text-sm); line-height: 1.4; }
.draft-note[hidden] { display: none; }
.draft-note .text-button { min-height: 32px; }
.form-status { margin: 10px 0 0; color: var(--ink-50); font-size: var(--text-sm); line-height: 1.4; }
.form-status:empty { display: none; }
.form-status.is-error { color: var(--red-deep); font-weight: 650; }
.form-status.is-success { color: var(--green); font-weight: 650; }
.signout-drafts { margin: 0; padding: 0; list-style: none; display: grid; gap: 6px; }
.signout-drafts li { display: flex; justify-content: space-between; gap: 12px; padding: 10px 12px; border: 1px solid var(--border-soft); border-radius: 10px; font-size: var(--text-sm); }
.signout-drafts span { color: var(--ink-50); text-align: right; }
.route-item__time--open { background: var(--mist-2); color: var(--ink-50); }
#visit-edit-action[hidden] { display: none; }
@media (max-width: 520px) {
  .visit-when { grid-template-columns: 1fr 1fr; }
  .visit-when label:first-child { grid-column: 1 / -1; }
}

/* Ein <a> mit Button-Klasse (Anrufen, Navigation, In HubSpot öffnen) erbte
   bisher die Link-Darstellung: blau, unterstrichen, oben links im Button. */
a.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  text-align: center;
  text-decoration: none;
}
a.button--secondary { color: var(--ink); }
/* Ohne das hebt display: inline-flex das hidden-Attribut auf (Google-Maps-Link
   im Tagesplaner, solange noch keine Route steht). */
a.button[hidden] { display: none; }

/* Ausbau im Übernahme-Bestand pflegen: dieselben Felder und Werte wie in der
   vollen Kundenakte, gespeichert über denselben HubSpot-Weg. */
.acquisition-fields { display: grid; gap: 14px; margin-top: 16px; }
.acquisition-fields__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.acquisition-fields__grid label { display: grid; gap: 4px; min-width: 0; color: var(--ink-70); font-size: var(--text-sm); font-weight: 700; }
.acquisition-fields select {
  width: 100%; min-height: 44px; padding: 9px 10px; border: 1px solid var(--border); border-radius: 9px;
  background: var(--paper); color: var(--ink); font: inherit; font-size: var(--text-base); font-weight: 500;
}
.acquisition-fields__ads { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; border: 0; min-width: 0; }
.acquisition-fields__ads legend { width: 100%; margin-bottom: 6px; padding: 0; color: var(--ink-70); font-size: var(--text-sm); font-weight: 700; }
.acquisition-check {
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 14px;
  border: 1px solid var(--border); border-radius: 999px; background: var(--paper);
  color: var(--ink); font-size: var(--text-sm); font-weight: 650; cursor: pointer;
}
.acquisition-check input { width: 18px; height: 18px; margin: 0; accent-color: var(--red-action); }
.acquisition-check:has(input:checked) { border-color: var(--ink); background: var(--mist); }
.acquisition-check:has(input:focus-visible) { outline: 2px solid var(--ink); outline-offset: 2px; }
.acquisition-check:has(input:disabled) { cursor: not-allowed; opacity: .6; }
.acquisition-fields__foot { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.acquisition-fields__foot .form-status { flex: 1 1 200px; margin: 0; }
@media (max-width: 560px) {
  .acquisition-fields__grid { grid-template-columns: minmax(0, 1fr); }
  .acquisition-fields__foot .button { width: 100%; min-height: 48px; }
}

/* Ein abgesagter Termin bleibt im Verlauf, tritt aber zurück. */
.activity-entry--canceled strong,
.activity-entry--canceled p { color: var(--ink-50); }
.activity-entry--canceled strong { text-decoration: line-through; text-decoration-thickness: 1px; }

/* Eingaben erbten das Fett ihrer Beschriftung: Werte lasen sich wie Titel. */
.acquisition-composer select,
.acquisition-composer input,
.acquisition-composer textarea { font-weight: 500; }

/* Die Berichtnummer ist jetzt ein Button (siehe openReportPdf) und sieht aus
   wie bisher der Link. */
button.report-number--link {
  appearance: none; -webkit-appearance: none;
  border: 0; border-radius: 0; background: none;
  font-family: inherit; text-align: left; cursor: pointer;
}
button.report-number--link:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }

/* Mängel je Bericht: Klasse als Kürzel, Text daneben. Mehr als drei klappen
   auf, damit die Liste überschaubar bleibt. */
.inspection-history-table td.defects-cell { min-width: 280px; max-width: 420px; line-height: 1.4; }
.defect-list { display: grid; gap: 4px; margin: 0; padding: 0; list-style: none; }
.defect-list li { overflow-wrap: anywhere; }
.defect-list strong { color: var(--red-deep); font-weight: 650; white-space: nowrap; }
.defect-sev {
  display: inline-block; min-width: 2.4em; margin-right: 4px; padding: 0 5px; border-radius: 4px;
  font-size: var(--text-xs); font-weight: 750; letter-spacing: .03em; text-align: center;
  background: var(--mist); color: var(--ink-70);
}
.defect-sev--em, .defect-sev--vu { background: var(--red-soft); color: var(--red-deep); }
.defect-sev--gm { background: var(--amber-soft); color: var(--amber); }
.defect-more { margin-top: 4px; }
.defect-more summary { min-height: 32px; display: flex; align-items: center; color: var(--ink-70); font-size: var(--text-xs); font-weight: 700; cursor: pointer; }
.defect-more .defect-list { margin-top: 4px; }
.defect-due { margin: 6px 0 0; color: var(--red-deep); font-size: var(--text-xs); font-weight: 700; }

/* --- Rückfragen in der App (askChoice/askConfirm) ---------------------------
   Ein eigener Dialog statt window.confirm: sagt, was passiert, und hat
   daumengrosse Knoepfe. Liegt ueber jedem anderen Dialog (Top Layer). */
.rl-ask {
  width: min(440px, calc(100vw - 32px)); max-height: calc(100vh - 32px); max-height: calc(100dvh - 32px);
  margin: auto; padding: 0; border: 0; border-radius: 16px;
  background: var(--paper); color: var(--ink);
  box-shadow: 0 24px 70px rgba(20, 30, 40, .28);
}
.rl-ask::backdrop { background: rgba(20, 30, 40, .45); }
.rl-ask__form { display: grid; gap: 12px; padding: 20px; }
.rl-ask h2 { margin: 0; font-size: var(--text-lg, 18px); line-height: 1.25; }
.rl-ask p { margin: 0; color: var(--ink-70); font-size: var(--text-base); line-height: 1.45; }
.rl-ask__field { display: grid; gap: 6px; font-size: var(--text-sm); font-weight: 700; }
.rl-ask__field[hidden], .rl-ask p[hidden] { display: none; }
.rl-ask__field input {
  min-height: 48px; padding: 0 12px; border: 1px solid #868b91; border-radius: 10px;
  font: inherit; font-size: max(16px, var(--text-base)); font-weight: 500;
}
.rl-ask .form-status:empty { display: none; }
.rl-ask__actions { display: grid; gap: 8px; margin-top: 4px; }
.rl-ask__actions .button { min-height: 48px; width: 100%; justify-content: center; font-size: var(--text-base); }
.rl-ask__actions a.button { display: inline-flex; align-items: center; text-decoration: none; color: var(--ink); }
.button--danger { background: var(--red-action); color: #fff; }
.button--quiet { background: transparent; border-color: transparent; color: var(--ink-70); }
.button--quiet:hover { background: var(--mist); }
.button--danger:hover { background: var(--red-deep); }
.text-button--danger { color: var(--red-deep); }
.visit-cancel { margin: 2px 0 0; }
.visit-cancel .text-button { min-height: 44px; }
@media (min-width: 641px) {
  .rl-ask__actions { grid-auto-flow: column; justify-content: end; }
  .rl-ask__actions .button { width: auto; min-width: 140px; }
}

/* Kunde ausserhalb der RL-Basis: kleine Karte aus der Kundenentwicklung. */
.cohort-card__phone { display: grid; gap: 6px; }
.cohort-card__phone .button { min-height: 48px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; text-decoration: none; }
.cohort-card__phone .button svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; }
.cohort-card__phone small { margin-left: 6px; font-weight: 500; opacity: .85; }
.cohort-card__hint { font-size: var(--text-sm) !important; }
.cohort-card__facts { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 12px; margin: 0; }
.cohort-card__facts div { padding: 8px 10px; border-radius: 10px; background: var(--mist); }
.cohort-card__facts dt { color: var(--ink-50); font-size: var(--text-xs); font-weight: 700; }
.cohort-card__facts dd { margin: 2px 0 0; font-size: var(--text-base); font-weight: 750; }

/* Telefon in der Namensspalte der Kundenentwicklung: 44x44 zum Tippen,
   die Zahlen daneben bleiben unberuehrt. */
.station-name { display: flex; align-items: center; justify-content: space-between; gap: 6px; }
.station-name__text { min-width: 0; }
.station-call {
  flex: 0 0 auto; width: 44px; height: 44px; margin: -8px -6px -8px 0;
  display: inline-flex; align-items: center; justify-content: center;
  border: 0; border-radius: 999px; background: transparent; color: var(--ink); cursor: pointer;
}
.station-call svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.station-call:hover, .station-call:focus-visible { background: var(--mist); }
/* Laufender Monat: zurueckgenommen, mit "läuft" im Kopf. */
.station-table th.is-running small { display: block; font-size: 10px; font-weight: 650; letter-spacing: .02em; text-transform: none; }
.station-table td.is-running { color: var(--ink-50); }
.station-table td.heat.is-running { background-image: repeating-linear-gradient(135deg, rgba(255,255,255,.55) 0 4px, transparent 4px 8px); }
/* Zellen und das "i": mindestens 44 px Trefferflaeche, ohne die Tafel zu
   veraendern. Die Flaeche liegt unsichtbar ueber der Zelle. */
.station-cell { position: relative; }
.station-cell::after { content: ""; position: absolute; left: 50%; top: 50%; width: max(100%, 44px); height: 44px; transform: translate(-50%, -50%); }
.info-dot { position: relative; }
.info-dot::after { content: ""; position: absolute; left: 50%; top: 50%; width: 44px; height: 44px; transform: translate(-50%, -50%); }
.station-month-customer { min-height: 44px; }

/* Kundenakte: Nummer zum Antippen. Das Cockpit schreibt keine Nummern. */
.profile-phone-link { display: inline-flex; align-items: center; min-height: 44px; color: var(--ink); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }

/* Verlauf: geplante Termine oben, abgesetzt. */
.activity-group-title { margin: 4px 0 6px; color: var(--ink-50); font-size: var(--text-xs); font-weight: 750; letter-spacing: .06em; text-transform: uppercase; }
.activity-entry--planned { border-left: 3px solid var(--blue); background: var(--blue-soft); }
.mobile-activity-list li.is-planned { border-left: 3px solid var(--blue); padding-left: 8px; }