/* =========================================================================
   Iter 27 — Design-System 3.0 «Precision Ink» (DESIGN.md, Owner-Mandat
   2026-07-04: Elite-Transformation). Foundation-Schicht: Tokens, Base,
   Shell, Primitive, Komponenten — konsolidiert aus 25 Iterationen
   CSS-Archäologie auf EINE Definition pro Komponente.
   Leitidee: Hierarchie durch Licht (Flächenstufen + Innen-Glanz + Ambient-
   Schatten) statt Border-Wireframe. Hairlines nur IN Listen, nie UM Panels.
   Cyan ist ausschliesslich Interaktion. Skip-Zone: nur der Token-Block
   trägt Roh-Hexes.
   ========================================================================= */
:root {
  color-scheme: dark;
  /* Ink-Leiter (Flächen, von tief nach erhaben) */
  --bg: #0b0f12;
  --surface: #10171c;        /* Panels/Karten (borderlos, Licht von oben) */
  --surface-1: #080b0e;      /* eingelassen (Sidebar-Well) — tiefer als bg */
  --surface-inset: #0d1418;  /* Formularfelder, Wells in Panels */
  --surface-2: #151e24;      /* erhabene Flächen (Popover, Toast, Karten-in-Panel) */
  --surface-3: #1c272e;      /* Hover-/Aktiv-Fläche */
  --surface-hover: #141d23;
  /* Hairlines (Separatoren IN Listen/Tabellen — nicht um Container) */
  --border: rgba(163, 211, 225, .09);
  --line-strong: rgba(163, 211, 225, .17);
  /* DESIGN.md nennt die Tokens --hairline/--hairline-strong; die Implementierung
     taufte sie --border/--line-strong. ~26 Verwendungen lasen die DESIGN.md-Namen
     ins Leere (var() undefiniert ⇒ Deklaration invalid ⇒ Linie fehlte komplett,
     auch die Organigramm-Äste). Alias statt Umbenennung: löst am Element auf und
     erbt damit automatisch das Light-Theme (Z. 86 überschreibt --border). */
  --hairline: var(--border);
  --hairline-strong: var(--line-strong);
  /* Text */
  --text: #d7e1e5;
  --text-primary: #f0f5f6;
  --text-secondary: #9db0b7;
  --text-tertiary: #6e8087;
  /* Marken-Cyan (NUR Interaktion: Aktion, Selektion, Fokus, aktiver Zustand) */
  --accent-rgb: 34, 198, 226;
  --accent: #22c6e2;
  --accent-deep: #0c8ba3;
  --accent-hover: #56d7ec;
  --accent-strong: #7fe2f2;  /* Cyan-Text auf Soft-Flächen */
  --accent-bright: #c9f4fb;
  --on-accent: #05242d;      /* Text AUF Cyan-Flächen */
  --accent-soft: rgba(34, 198, 226, .12);
  --accent-line: rgba(34, 198, 226, .35);
  /* Magenta — nur Marken-Highlight, nie Funktionsfarbe */
  --magenta: #ef5aa4;
  --magenta-rgb: 239, 90, 164;
  /* Status-Semantik (getrennt von Prioritäten) */
  --good: #2fd67f;  --good-strong: #8af0b8;  --good-deep: #1a9d5c;
  --warn: #f5b83d;  --warn-strong: #ffd88a;  --warn-deep: #c98c2e;
  --bad: #f2545b;   --bad-strong: #ff9b9b;   --bad-soft: #ffd1d1;  --bad-deep: #b8344f;
  --info-strong: #93c5fd;  --info-muted: #6989c9;
  /* Prioritäten (Leads) */
  --high: #2fd67f;
  --medium: #f5a623;
  --low: #f2545b;
  /* Regionen (Datenfarben — unangetastet) */
  --zuerich: #3b82f6;  --zuerich-text: #93c5fd;
  --aarau: #8b5cf6;    --aarau-text: #c4b5fd;
  --bern: #06b6d4;
  --solothurn: #f97316;
  --luzern: #ec4899;   --luzern-text: #f9a8d4;
  --neutral-badge: #1d2b33;
  /* Tint-Kanal: Overlay-Affordanzen als rgba(var(--tint-rgb), α) —
     dunkel weiss, hell dunkles Ink. EIN Kanal, gleiche Alphas. */
  --tint-rgb: 210, 235, 242;
  --topbar-bg: rgba(11, 15, 18, .88);
  /* Form & Tiefe: Panels ohne Border — Innen-Glanz oben + Ambient-Schatten */
  --radius-card: 12px;
  --radius-button: 8px;
  --radius-badge: 6px;
  --shadow-sm: inset 0 1px 0 rgba(255,255,255,.035), 0 1px 2px rgba(2,6,8,.35), 0 10px 28px -14px rgba(2,6,8,.55);
  --shadow-md: inset 0 1px 0 rgba(255,255,255,.04), 0 4px 12px rgba(2,6,8,.35), 0 24px 48px -12px rgba(2,6,8,.55);
  --shadow-lg: inset 0 1px 0 rgba(255,255,255,.05), 0 8px 24px rgba(2,6,8,.45), 0 40px 80px -16px rgba(2,6,8,.65);
  /* Typo: Inter (self-hosted/DSG); Mono NUR für echte Datenwerte */
  --font-mono: ui-monospace, 'SF Mono', SFMono-Regular, Menlo, Consolas, 'Liberation Mono', monospace;
  /* Motion: Zustand, nie Deko — out-quint, kurz */
  --ease: cubic-bezier(.22, 1, .36, 1);
  --dur-fast: 120ms;
  --dur: 180ms;
  --dur-slow: 240ms;
  --transition: var(--dur-fast) var(--ease);
  --header-height: 84px;
  /* PWA Safe-Area (Notch/Home-Indicator im Standalone) */
  --sat: env(safe-area-inset-top, 0px);
  --sab: env(safe-area-inset-bottom, 0px);
}
/* =========================================================================
   Hell-Theme (token-gespiegelt): gleiche Leiter-Semantik, kühles Licht,
   getönte Schatten. Cyan dunkler abgemischt (AA auf Weiss).
   ========================================================================= */
:root[data-theme="light"] {
  color-scheme: light;
  --bg: #f2f5f6;
  --surface: #ffffff;
  --surface-1: #e8edef;
  --surface-inset: #eef2f4;
  --surface-2: #f7fafb;
  --surface-3: #e2eaed;
  --surface-hover: #eef3f5;
  --border: rgba(13, 35, 44, .11);
  --line-strong: rgba(13, 35, 44, .20);
  --text: #22333a;
  --text-primary: #0d1b21;
  --text-secondary: #4c5f68;
  --text-tertiary: #596a73;
  --accent-rgb: 10, 125, 152;
  --accent: #0a7d98;
  --accent-deep: #086377;
  --accent-hover: #0c93b3;
  --accent-strong: #075e72;
  --accent-bright: #05414f;
  --on-accent: #ffffff;
  --accent-soft: rgba(10, 125, 152, .10);
  --accent-line: rgba(10, 125, 152, .38);
  --magenta: #cc2f7b;
  --magenta-rgb: 204, 47, 123;
  --good: #148f4f;  --good-strong: #0b6b39;  --good-deep: #0f7a43;
  --warn: #8f6205;  --warn-strong: #7d5504;  --warn-deep: #8a5f05;
  --bad: #cf2e3a;   --bad-strong: #a81f2b;   --bad-soft: #8f1c26;  --bad-deep: #b8344f;
  --info-strong: #2458c5;  --info-muted: #40619f;
  --high: #148f4f;
  --medium: #8f6205;
  --low: #cf2e3a;
  --zuerich: #2f6fe0;  --zuerich-text: #1d4fb8;
  --aarau: #7c4fe0;    --aarau-text: #5b21b6;
  --bern: #0891b2;
  --solothurn: #c2590f;
  --luzern: #d6367f;   --luzern-text: #9d174d;
  --neutral-badge: #e3ebee;
  --tint-rgb: 14, 28, 34;
  --topbar-bg: rgba(242, 245, 246, .88);
  --shadow-sm: inset 0 1px 0 rgba(255,255,255,.7), 0 1px 2px rgba(23,46,56,.08), 0 10px 28px -14px rgba(23,46,56,.14);
  --shadow-md: inset 0 1px 0 rgba(255,255,255,.8), 0 4px 12px rgba(23,46,56,.08), 0 24px 48px -12px rgba(23,46,56,.16);
  --shadow-lg: 0 8px 24px rgba(23,46,56,.12), 0 40px 80px -16px rgba(23,46,56,.22);
}
/* =========================================================================
   Breakpoint-System (Referenz — kein Build-Step, @media = rohe px):
     •  520px  phone-xs      sehr schmal: KPI-Grids einspaltig
     •  640px  phone-sm      schmal: 4-/3-spaltige Panel-Grids → 2-spaltig
     •  720px  mobile    ◀   HAUPT-Umbruch: Stack-Layout, Karten full-width
     •  900px  tablet        Sidebar wird Off-Canvas (901px = Desktop-Twin)
     •  980/1100/1200        Manager-Mehrspalten-Grids stufig
   Touch-Floor (≥44px) via (max-width:1024px),(pointer:coarse) — Memory
   project_tablet_touch_breakpoint. Mobile-@media stets NACH der Basis —
   Memory project_css_cascade_mobile.
   ========================================================================= */

/* ---------- Reset & Base ---------- */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
[hidden] { display: none !important; }
/* Schrift-Floor für <small> (DESIGN.md §2: nichts rendert unter 11px).
   Der Browser-Default für <small> ist `smaller` = 0.8333× der Elterngrösse.
   In Datenzeilen (13px) sind das 10.83px — belegt vom Breiten-Wächter auf
   #/v/offer/new (b<small<div.so2-pos__price@10.8333px). Im Markup stehen
   27 blanke <small> ohne jede Regel; jedes einzelne davon unterschreitet den
   Floor, sobald sein Elternteil <= 13px ist.
   `max()` statt fixer 11px, damit das relative Verhalten unter grossen
   Überschriften erhalten bleibt — nur der Boden wird eingezogen. Jede
   klassen-qualifizierte Regel (z.B. `.so-hint`, `.so-stat small`) sticht
   diese hier ohnehin. EINE Zeile statt 27 Fundstellen. */
small { font-size: max(11px, 0.8333em); }
body {
  margin: 0;
  min-height: 100vh;
  min-height: 100dvh;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 14px;
  /* Dezenter Top-Glow: die Seite hat eine Lichtquelle, keine flache Füllung */
  background: radial-gradient(1100px 460px at 50% -140px, rgba(var(--accent-rgb), .05), transparent 70%), var(--bg);
  color: var(--text);
  line-height: 1.5;
  text-rendering: optimizeLegibility;
  overscroll-behavior-y: none;
  -webkit-tap-highlight-color: transparent;
}
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
input, select, textarea, button {
  transition: border-color var(--transition), background var(--transition),
              color var(--transition), box-shadow var(--transition),
              transform var(--transition), opacity var(--transition);
}
::placeholder { color: var(--text-secondary); opacity: 1; }
::selection { background: rgba(var(--accent-rgb), .28); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 2px; }
/* Scrollbars: schmal, ruhig, themetreu */
* { scrollbar-width: thin; scrollbar-color: rgba(var(--tint-rgb), .16) transparent; }
*::-webkit-scrollbar { width: 8px; height: 8px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb { background: rgba(var(--tint-rgb), .14); border-radius: 4px; }
*::-webkit-scrollbar-thumb:hover { background: rgba(var(--tint-rgb), .24); }
.skip-link {
  position: absolute; left: 16px; top: -48px; background: var(--accent); color: var(--on-accent);
  padding: 10px 14px; border-radius: var(--radius-button); z-index: 50; font-weight: 600;
}
.skip-link:focus { top: 12px; }
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0,0,0,0); border: 0; }

/* ---------- App-Shell ---------- */
.app-shell { min-height: 100vh; min-height: 100dvh; display: grid; grid-template-columns: var(--sidebar-w, 236px) 1fr; }
body.no-topbar .app-shell { grid-template-columns: 1fr; }
body.sidebar-collapsed .app-shell { --sidebar-w: 68px; }
.main-shell {
  /* Owner-Entscheid 2026-07-05 (Monday-Referenz): Arbeitsflächen nutzen die
     VOLLE Breite — kein Content-Cap; der Seitenrand wächst sanft mit.
     Dokument-Views (Offer-Editor) deckeln sich SELBST (.so-editor).
     ⚠️ Lehre v73-Regression: margin-inline:auto + max-width auf einem
     GRID-ITEM shrinkt auf fit-content (Login/Tabellen kollabierten schmal) —
     Grid-Items brauchen width:100%, nie auto-Margins für Zentrierung. */
  width: 100%;
  padding: 20px clamp(28px, 2.5vw, 56px) calc(32px + var(--sab));
  min-width: 0;                       /* Grid-Item muss schrumpfen können (Kanban) */
}
.view { display: none; }
.view.active { display: block; }

/* Topbar (Legacy-Chrome einzelner Views/Doc-Routen) */
.topbar {
  position: sticky; top: 0; z-index: 30; display: grid; grid-template-columns: auto 1fr auto; gap: 18px;
  align-items: center; min-height: var(--header-height); padding: max(14px, var(--sat)) 24px 14px;
  backdrop-filter: blur(18px); background: var(--topbar-bg); border-bottom: 1px solid var(--border);
}
.topbar__brand, .topbar__meta { display: flex; align-items: center; gap: 14px; }
.topbar__title h1 { margin: 0; font-size: 1.35rem; letter-spacing: -.01em; }
.topbar__user { display: flex; align-items: center; gap: 12px; }
.date-box { display: flex; align-items: center; gap: 10px; color: var(--text-secondary); font-size: 13px; }
.logo-wrap { display: inline-flex; align-items: center; justify-content: center; background: transparent; border: 0; padding: 0; }
.logo { width: 170px; color: var(--accent); }
.footer { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; padding: 18px 24px 26px; color: var(--text-secondary); font-size: 13px; }

/* Micro-Label (Ex-Eyebrow). Der Mono-Kicker-Scaffold ist abgeschafft —
   wo das Markup noch .panel__eyebrow trägt, rendert es als ruhiges
   Mikro-Label; die View-Wellen bauen es ab, wo es reine Deko ist. */
.eyebrow, .panel__eyebrow {
  margin: 0 0 2px; color: var(--text-tertiary);
  text-transform: uppercase; letter-spacing: .07em;
  font-size: 11px; font-weight: 600; font-family: inherit;
}

/* ---------- Sidebar ---------- */
.sidebar {
  position: sticky; top: 0; align-self: start; height: 100vh; height: 100dvh; overflow-y: auto;
  display: flex; flex-direction: column; gap: 6px;
  background: var(--surface-1);
  border-right: 1px solid var(--border);
  padding: 16px 12px;
}
.sidebar__top { display: flex; align-items: center; min-height: 44px; padding: 4px 8px 14px; }
.sidebar .logo { width: 124px; transition: width var(--dur) var(--ease); }
.sidebar__nav { display: flex; flex-direction: column; gap: 2px; flex: 1; }
.sidebar .nav-tab {
  display: flex; align-items: center; gap: 11px; width: 100%;
  padding: 9px 11px; border-radius: var(--radius-button); min-height: 38px;
  border: 0; background: transparent; color: var(--text-secondary);
  font: 500 13.5px/1 inherit; text-decoration: none; white-space: nowrap; overflow: hidden;
  transition: background var(--transition), color var(--transition);
}
.sidebar .nav-tab:hover { background: rgba(var(--tint-rgb), .05); color: var(--text-primary); }
.sidebar .nav-tab.active { background: var(--accent-soft); color: var(--accent-strong); }
.sidebar .nav-tab.active .nav-tab__icon { color: var(--accent); }
.nav-tab__icon { display: inline-flex; flex: none; width: 19px; height: 19px; }
.nav-tab__icon svg { width: 19px; height: 19px; }
.nav-tab__label { overflow: hidden; text-overflow: ellipsis; }
.sidebar__footer { margin-top: auto; padding-top: 10px; border-top: 1px solid var(--border); display: flex; flex-direction: column; gap: 2px; }
.sidebar__footer .user-pill { width: 100%; justify-content: flex-start; }
.sidebar__collapse {
  display: flex; align-items: center; gap: 11px; width: 100%; min-height: 38px;
  padding: 9px 11px; border-radius: var(--radius-button); border: 0; background: transparent;
  color: var(--text-secondary); cursor: pointer; font: 500 13.5px/1 inherit;
}
.sidebar__collapse:hover { background: rgba(var(--tint-rgb), .05); color: var(--text-primary); }
.sidebar__collapse-icon { display: inline-flex; flex: none; width: 19px; height: 19px; transform: rotate(180deg); }
.sidebar__collapse-icon svg { width: 19px; height: 19px; }

/* Inline-Icon (folgt Schriftgrösse, sitzt auf der Textlinie) */
.eico { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; line-height: 0; vertical-align: -0.14em; }
.eico svg { width: 1.05em; height: 1.05em; }

/* Hamburger + Overlay (nur Mobile) */
.sidebar-toggle {
  position: fixed; top: calc(12px + var(--sat)); left: 12px; z-index: 55; width: 44px; height: 44px;
  border-radius: 10px; background: var(--surface-2); border: 1px solid var(--border);
  color: var(--text); align-items: center; justify-content: center; cursor: pointer; display: none;
  box-shadow: var(--shadow-sm);
}
.sidebar-overlay { position: fixed; inset: 0; background: rgba(4, 8, 10, .55); backdrop-filter: blur(2px); z-index: 55; }

/* Eingeklappt (Desktop): nur Icons */
@media (min-width: 901px) {
  body.sidebar-collapsed .nav-tab__label,
  body.sidebar-collapsed .sidebar__collapse .nav-tab__label,
  body.sidebar-collapsed .sidebar .user-pill__role,
  body.sidebar-collapsed .sidebar .user-pill strong { display: none; }
  body.sidebar-collapsed .sidebar { padding: 16px 8px; }
  body.sidebar-collapsed .sidebar .nav-tab,
  body.sidebar-collapsed .sidebar__collapse,
  body.sidebar-collapsed .sidebar__footer .user-pill { justify-content: center; padding: 9px; }
  body.sidebar-collapsed .sidebar__top { justify-content: center; }
  body.sidebar-collapsed .sidebar .logo { width: 30px; }
  body.sidebar-collapsed .sidebar__collapse-icon { transform: rotate(0); }
}
/* Mobile: Sidebar als Off-Canvas */
@media (max-width: 900px) {
  .app-shell { grid-template-columns: 1fr !important; }
  .sidebar {
    position: fixed; top: 0; left: 0; width: 268px; z-index: 60;
    height: 100vh; height: 100dvh; overflow-y: auto;
    padding-top: var(--sat); padding-bottom: var(--sab);
    transform: translateX(-100%); transition: transform var(--dur-slow) var(--ease);
    border-right: 1px solid var(--border);
  }
  body.sidebar-open .sidebar { transform: translateX(0); box-shadow: var(--shadow-lg); }
  .sidebar-toggle { display: flex; }
  .main-shell { padding-top: calc(64px + var(--sat)); }
  .main-shell:has(.doc-sheet) { padding-top: calc(22px + var(--sat)); }
}

/* ---------- Subnav: Underline-Tabs (Seiten-Ebene) ---------- */
.subnav {
  display: flex; gap: 2px; align-items: center; width: fit-content; max-width: 100%;
  margin: 0 0 18px; padding: 0 0 0;
  background: transparent; border: 0; border-bottom: 1px solid var(--border); border-radius: 0;
  overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none;
}
.subnav::-webkit-scrollbar { display: none; }
.subnav__tab {
  position: relative; flex: none; display: inline-flex; align-items: center; min-height: 40px;
  padding: 0 13px; border-radius: 6px 6px 0 0; color: var(--text-secondary);
  font-weight: 500; font-size: 13.5px; white-space: nowrap;
  transition: background var(--transition), color var(--transition);
}
.subnav__tab::after {
  content: ""; position: absolute; left: 10px; right: 10px; bottom: -1px; height: 2px;
  border-radius: 2px 2px 0 0; background: transparent; transition: background var(--transition);
}
.subnav__tab:hover { color: var(--text-primary); background: rgba(var(--tint-rgb), .04); }
.subnav__tab.active { color: var(--text-primary); }
.subnav__tab.active::after { background: var(--accent); }

/* Legacy .view-switch/.nav-tab (Doc-/Login-Chrome): Segmented-Optik */
.view-switch { display: inline-flex; gap: 2px; background: var(--surface-inset); border: 1px solid var(--border); border-radius: 10px; padding: 3px; }
.view-switch .nav-tab {
  border: 0; background: transparent; color: var(--text-secondary); border-radius: 7px;
  padding: 8px 14px; font-weight: 500; font-size: 13.5px; min-height: 36px;
}
.view-switch .nav-tab:hover { color: var(--text-primary); }
.view-switch .nav-tab.active { background: var(--surface-3); color: var(--text-primary); box-shadow: inset 0 1px 0 rgba(255,255,255,.04), 0 1px 3px rgba(2,6,8,.3); }

/* ---------- Segmented Control (view-toggle / section-nav — EIN Stil) ---------- */
.view-toggle, .section-nav {
  display: inline-flex; gap: 2px;
  background: var(--surface-inset); border: 1px solid var(--border);
  border-radius: 10px; padding: 3px; margin-bottom: 12px;
}
.section-nav { margin-top: 6px; margin-bottom: 0; flex-wrap: wrap; }
.view-toggle__btn, .section-nav__btn {
  display: inline-flex; align-items: center; gap: 8px;
  border: 0; background: transparent; color: var(--text-secondary);
  padding: 7px 14px; border-radius: 7px; font-weight: 500; font-size: 13.5px;
  cursor: pointer; min-height: 34px; white-space: nowrap;
  transition: background var(--transition), color var(--transition);
}
.view-toggle__btn .vt-ico { display: inline-flex; }
.view-toggle__btn .vt-ico svg { width: 16px; height: 16px; }
.view-toggle__btn.is-active, .section-nav__btn.is-active {
  background: var(--surface-3); color: var(--text-primary);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05), 0 1px 3px rgba(2,6,8,.3);
}
.view-toggle__btn:hover:not(.is-active), .section-nav__btn:hover:not(.is-active) { color: var(--text-primary); }

/* ---------- Panels & Karten: Licht statt Border ---------- */
.panel, .kpi-card, .firm-card, .playbook-card, .reference-panel, .modal {
  background: linear-gradient(180deg, rgba(255,255,255,.015), rgba(255,255,255,0) 42%), var(--surface);
  border: 1px solid transparent;      /* Layout-stabil; Akzent-Border-Hooks bleiben wirksam */
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-sm);
}
.panel { padding: 18px; }
.panel__header { display: flex; justify-content: space-between; gap: 16px; align-items: flex-start; margin-bottom: 14px; }
.panel h3, .panel h2 { margin: 0; font-size: 15px; font-weight: 600; letter-spacing: -.005em; color: var(--text-primary); }
.panel__title { margin: 0 0 6px; font-size: 15px; font-weight: 600; }
.chart-wrap { position: relative; min-height: 280px; }

/* ---------- KPI (Übergangs-Optik: ruhig statt Hero-Metrik; Markup-Umbau in den View-Wellen) ---------- */
.kpi-grid, .chart-grid { display: grid; gap: 12px; }
.kpi-grid { grid-template-columns: repeat(5, minmax(0,1fr)); margin-bottom: 16px; }
.chart-grid { grid-template-columns: 1fr 1.2fr 1fr; margin-bottom: 16px; align-items: stretch; }
.kpi-grid--mgr { grid-template-columns: repeat(5, minmax(0,1fr)); }
.kpi-grid--mgr-3 { grid-template-columns: repeat(3, minmax(0,1fr)); }
.kpi-grid--detail { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 10px; }
.kpi-card { padding: 14px 16px; display: grid; grid-template-columns: auto 1fr; gap: 12px; align-items: center; }
.kpi-card__icon, .pill-icon {
  width: 34px; height: 34px; display: grid; place-items: center;
  background: transparent; color: var(--accent); border-radius: 9px;
  border: 1px solid var(--border);
}
.kpi-card__icon svg, .pill-icon svg { width: 17px; height: 17px; }
.kpi-card__value { font-size: 22px; line-height: 1.1; font-weight: 600; letter-spacing: -.01em; margin-bottom: 3px; font-variant-numeric: tabular-nums lining-nums; color: var(--text-primary); }
.kpi-card__label { color: var(--text-secondary); font-size: 12.5px; }
.kpi-card--secondary { background: linear-gradient(180deg, rgba(var(--accent-rgb),.05), rgba(255,255,255,0) 50%), var(--surface); }
.kpi-card--mini { padding: 12px; }
.kpi-card--mini .kpi-card__value { font-size: 17px; margin-bottom: 2px; }
/* KPI-Strip (Caller/Setter): EIN Panel, Hairline-getrennte Stats */
.kpi-strip { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 0; padding: 6px 0; }
.kpi-pill { display: flex; flex-direction: column; gap: 3px; padding: 10px 18px; background: transparent; border: 0; border-left: 1px solid var(--border); border-radius: 0; }
.kpi-pill:first-child { border-left: 0; }
.kpi-pill span { color: var(--text-tertiary); font-size: 11px; text-transform: uppercase; letter-spacing: .07em; font-weight: 600; }
.kpi-pill strong { font-size: 20px; font-weight: 600; letter-spacing: -.01em; font-variant-numeric: tabular-nums; color: var(--text-primary); }
.kpi-pill--rate strong { color: var(--text-primary); }

/* ---------- Filter & Formulare ---------- */
.sticky-filters { position: sticky; top: calc(var(--sat) + 10px); z-index: 20; margin-bottom: 16px; }
.filters-panel { padding: 12px 14px; }
.filters-toolbar, .export-toolbar { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; }
.export-toolbar { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--border); }
.filters-group, .filters-actions, .sort-group, .export-group { display: flex; flex-wrap: wrap; gap: 10px; align-items: end; }
.field { display: flex; flex-direction: column; gap: 6px; min-width: 150px; }
.field--wide { min-width: min(420px, 100%); flex: 1 1 320px; }
.field--narrow { max-width: 120px; min-width: 0; }
.field span { color: var(--text-tertiary); font-size: 11px; text-transform: uppercase; letter-spacing: .07em; font-weight: 600; }
select, .search-input, textarea {
  width: 100%; min-height: 38px;
  background: var(--surface-inset); border: 1px solid var(--border);
  border-radius: var(--radius-button); padding: 0 12px; color: var(--text);
}
select {
  appearance: none; -webkit-appearance: none;
  padding-right: 32px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%238a9ba3' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='m6 9 6 6 6-6'/></svg>");
  background-repeat: no-repeat;
  background-position: right 10px center;
}
select:hover, .search-input:hover, textarea:hover { background-color: var(--surface-hover); border-color: var(--line-strong); }
select:focus, .search-input:focus-within, textarea:focus {
  outline: none; border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(var(--accent-rgb), .18);
}
.search-input { display: flex; align-items: center; gap: 10px; padding-right: 12px; }
.search-input svg { width: 17px; height: 17px; color: var(--text-secondary); flex: 0 0 auto; }
.search-input input { border: 0; outline: none; background: transparent; width: 100%; min-width: 0; min-height: 36px; }
.field input[type=date], .field input[type=time], .field input[type=tel], .field input[type=email],
.field input[type=text], .field input[type=search], .field input[type=number], .field input[type=password],
.field select, .field textarea {
  background: var(--surface-inset); border: 1px solid var(--border); border-radius: var(--radius-button);
  padding: 9px 12px; color: var(--text); min-height: 38px;
}
.field input:focus, .field select:focus, .field textarea:focus {
  border-color: var(--accent); outline: none;
  box-shadow: 0 0 0 3px rgba(var(--accent-rgb), .18);
}
.field textarea, textarea { padding-top: 9px; padding-bottom: 9px; }
.notes-area { width: 100%; min-height: 96px; background: var(--surface-inset); border: 1px solid var(--border); border-radius: var(--radius-button); padding: 10px 12px; color: var(--text); resize: vertical; font: inherit; }
.check-row { display: flex; gap: 14px; flex-wrap: wrap; }
.check-row label { display: flex; gap: 8px; align-items: center; }
.field--check { flex-direction: row; align-items: center; gap: 10px; min-height: 38px; }

/* Custom Checkbox (app-weit, ohne Markup-Änderung) */
input[type="checkbox"] {
  appearance: none; -webkit-appearance: none;
  width: 18px; height: 18px; flex: none; margin: 0;
  border: 1.5px solid var(--line-strong); border-radius: 5px;
  background: var(--surface-inset); cursor: pointer; display: inline-grid; place-items: center;
  transition: background var(--transition), border-color var(--transition), box-shadow var(--transition);
}
input[type="checkbox"]::after {
  content: ""; width: 100%; height: 100%;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'><path d='m5.5 12.5 4 4 9-9'/></svg>") center / 70% no-repeat;
  transform: scale(0); transition: transform var(--dur-fast) var(--ease);
}
input[type="checkbox"]:hover { border-color: var(--accent); }
input[type="checkbox"]:checked { background: var(--accent); border-color: var(--accent); }
input[type="checkbox"]:checked::after { transform: scale(1); }
input[type="checkbox"]:indeterminate { background: var(--accent); border-color: var(--accent); }
input[type="checkbox"]:indeterminate::after {
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.4' stroke-linecap='round'><path d='M6 12h12'/></svg>") center / 70% no-repeat;
  transform: scale(1);
}
:root[data-theme="light"] input[type="checkbox"]:checked::after,
:root[data-theme="light"] input[type="checkbox"]:indeterminate::after { filter: none; }

/* ---------- Buttons: EIN Vokabular ---------- */
.primary-btn, .secondary-btn, .ghost-btn, .toggle-btn, .sort-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 36px; padding: 0 14px;
  border-radius: var(--radius-button); font-weight: 600; font-size: 13.5px;
  border: 1px solid transparent; cursor: pointer; white-space: nowrap;
}
.primary-btn { background: var(--accent); color: var(--on-accent); box-shadow: inset 0 1px 0 rgba(255,255,255,.25), 0 1px 2px rgba(2,6,8,.3); }
.primary-btn:hover:not(:disabled) { background: var(--accent-hover); }
.primary-btn:active:not(:disabled) { transform: scale(.985); }
.primary-btn:disabled { opacity: .55; cursor: not-allowed; }
.primary-btn--call { background: var(--good); color: #04170c; }
.primary-btn--call:hover { background: var(--good-deep); color: #eafff3; }
.secondary-btn, .toggle-btn, .sort-btn { background: var(--surface-2); color: var(--text); border-color: var(--border); box-shadow: inset 0 1px 0 rgba(255,255,255,.03); }
.secondary-btn:hover, .toggle-btn:hover, .sort-btn:hover { background: var(--surface-3); border-color: var(--line-strong); }
.ghost-btn { background: transparent; color: var(--text); border-color: var(--border); }
.ghost-btn:hover { background: rgba(var(--tint-rgb), .05); border-color: var(--line-strong); }
.ghost-btn:active, .secondary-btn:active, .toggle-btn:active, .sort-btn:active { transform: scale(.985); }
.ghost-btn--danger { color: var(--bad-strong); border-color: rgba(242, 84, 91, .3); }
.ghost-btn--danger:hover { background: rgba(242, 84, 91, .10); border-color: var(--bad-strong); }
.ghost-btn--block { width: 100%; justify-content: flex-start; flex-direction: column; align-items: flex-start; padding: 12px 14px; gap: 4px; text-align: left; min-height: 0; }
.ghost-btn--block strong { color: var(--text-primary); }
.ghost-btn--block span { color: var(--text-secondary); font-size: 12.5px; font-weight: 400; white-space: normal; }
.ghost-btn--xs { padding: 4px 10px; min-height: 28px; font-size: 12.5px; }
.toggle-btn svg { width: 16px; height: 16px; }
.toggle-btn.active, .sort-btn.active { background: var(--accent-soft); color: var(--accent-strong); border-color: var(--accent-line); }
.sort-btn { padding-inline: 12px; }
.icon-btn {
  width: 36px; height: 36px; min-height: 0; flex-shrink: 0; padding: 0;
  display: grid; place-items: center; cursor: pointer;
  background: transparent; border: 1px solid var(--border); border-radius: var(--radius-button); color: var(--text);
}
.icon-btn svg { width: 17px; height: 17px; }
.icon-btn:hover { background: rgba(var(--tint-rgb), .06); border-color: var(--line-strong); }
.icon-btn:active { transform: scale(.94); }
.icon-btn--sm { width: 30px; height: 30px; }
.icon-btn--sm svg { width: 14px; height: 14px; }
.favorite-btn.is-starred { color: var(--warn-strong); border-color: rgba(255,213,106,.3); background: rgba(255,213,106,.1); }

/* Touch-Floor: auf Touch-Geräten bleibt ALLES ≥44px (Tablet-Bruchzone inkl.) */
@media (max-width: 1024px), (pointer: coarse) {
  .primary-btn, .secondary-btn, .ghost-btn, .toggle-btn, .sort-btn { min-height: 44px; }
  .icon-btn { width: 44px; height: 44px; }
  .icon-btn--sm { width: 38px; height: 38px; }
  select, .search-input, textarea { min-height: 44px; }
  .field input[type=date], .field input[type=time], .field input[type=tel], .field input[type=email],
  .field input[type=text], .field input[type=search], .field input[type=number], .field input[type=password],
  .field select, .field textarea { min-height: 44px; }
  .search-input input { min-height: 42px; }
  input[type="checkbox"] { width: 22px; height: 22px; }
  /* Iter 26 (Owner-iPhone-Befund): iOS zoomt die GANZE App, sobald ein Feld
     mit Schrift <16px den Fokus bekommt — und bleibt gezoomt (un-nativ).
     Wurzel-Fix: alle Eingabefelder auf Touch ≥16px (Design bleibt ruhig,
     Felder sind dort ohnehin 44px hoch). Klassen mit eigener font-size
     müssen explizit mit (Spezifität schlägt Element-Selektor). */
  input, select, textarea, .search-input input, .cp__input, .notes-area { font-size: 16px; }
  .view-toggle__btn, .section-nav__btn { min-height: 44px; }
  .sidebar__collapse { min-height: 44px; }
  .flow-legend__item { min-height: 44px; padding-top: 0; padding-bottom: 0; }
  .firm-link { min-height: 44px; display: inline-flex; align-items: center; }
  .cal-toggle { min-height: 44px; }
  .subnav__tab { min-height: 44px; }
  .ghost-btn--xs { min-height: 38px; }
}

/* ---------- Badges: Alpha-Fläche + Strong-Text, ohne Border ---------- */
.badge {
  display: inline-flex; align-items: center; gap: 5px;
  border-radius: var(--radius-badge); padding: 3px 8px;
  font-size: 11.5px; font-weight: 600; letter-spacing: .01em; line-height: 1.4;
  border: 0;
}
.badges { display: flex; flex-wrap: wrap; gap: 6px; }
.badge--version { background: var(--accent-soft); color: var(--accent-strong); }
.badge--industry { background: rgba(var(--tint-rgb), .06); color: var(--text-secondary); }
.badge--high   { background: rgba(47,214,127,.13); color: var(--good-strong); }
.badge--medium { background: rgba(245,166,35,.13); color: var(--warn-strong); }
.badge--low    { background: rgba(242,84,91,.13);  color: var(--bad-strong); }
.badge--region-zuerich   { background: rgba(59,130,246,.14); color: var(--zuerich-text); }
.badge--region-aarau     { background: rgba(139,92,246,.14); color: var(--aarau-text); }
.badge--region-bern      { background: rgba(6,182,212,.14); color: var(--accent-strong); }
.badge--region-solothurn { background: rgba(249,115,22,.14); color: var(--warn-strong); }
.badge--region-luzern    { background: rgba(236,72,153,.14); color: var(--luzern-text); }
.badge--open        { background: rgba(var(--tint-rgb), .08); color: var(--text); }
.badge--inprogress  { background: rgba(59,130,246,.15); color: var(--info-strong); }
.badge--contacted   { background: rgba(6,182,212,.15); color: var(--accent-strong); }
.badge--appointment { background: rgba(47,214,127,.15); color: var(--good-strong); }
.badge--won         { background: rgba(47,214,127,.22); color: var(--good-strong); }
.badge--lost        { background: rgba(242,84,91,.16); color: var(--bad-strong); }
.badge--later       { background: rgba(245,166,35,.16); color: var(--warn-strong); }
.badge--pool        { background: rgba(var(--tint-rgb), .06); color: var(--text-secondary); }
.badge--round       { background: var(--accent-soft); color: var(--accent-strong); font-variant-numeric: tabular-nums; }
.badge--role-admin   { background: rgba(242,84,91,.15); color: var(--bad-strong); }
.badge--role-manager { background: rgba(245,166,35,.15); color: var(--warn-strong); }
.badge--role-caller  { background: rgba(59,130,246,.15); color: var(--info-strong); }
.badge--lg { padding: 6px 12px; font-size: 13px; }
.badge--website-score { font-variant-numeric: tabular-nums lining-nums; }
.badge--no-ads { background: rgba(242,84,91,.15); color: var(--bad-strong); }
.ads-badge {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 68px; min-height: 24px; padding: 0 10px; border-radius: var(--radius-badge);
  border: 0; font-size: 11.5px; font-weight: 700; letter-spacing: .03em; text-transform: uppercase;
}
.ads-badge--yes { background: rgba(47,214,127,.13); color: var(--good-strong); }
.ads-badge--no { background: rgba(242,84,91,.13); color: var(--bad-strong); }
.ads-badge--unknown { background: rgba(var(--tint-rgb), .06); color: var(--text-secondary); }
.results-pill {
  display: inline-flex; align-items: center; justify-self: start; width: max-content; max-width: 100%;
  min-height: 30px; padding: 0 12px; border-radius: 999px;
  background: rgba(var(--tint-rgb), .05); border: 0;
  color: var(--text-secondary); font-size: 12.5px; font-variant-numeric: tabular-nums lining-nums;
}

/* ---------- Firm-Card (Lead-Karte) ---------- */
.firms-list { display: grid; gap: 10px; }
.firm-card { padding: 14px 16px; display: grid; gap: 10px; cursor: pointer; transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition), background var(--transition); }
.firm-card:hover { transform: translateY(-1px); box-shadow: var(--shadow-md); background: linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,0) 42%), var(--surface-2); }
.firm-card__top { display: flex; gap: 12px; justify-content: space-between; align-items: flex-start; flex-wrap: wrap; }
.firm-card__bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; align-items: center; margin-top: 6px; }
.firm-card__meta { display: flex; flex-wrap: wrap; justify-content: flex-start; gap: 4px 6px; align-items: center; color: var(--text-secondary); font-size: 13px; margin: 2px 0; }
.firm-card__actions { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; align-items: center; }
.firm-card__headings h3 { margin: 2px 0; font-size: 15px; font-weight: 600; letter-spacing: -.005em; color: var(--text-primary); }
.firm-card__contact { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; justify-content: flex-end; }
.firm-link { color: var(--accent-strong); text-decoration: none; font-size: 12.5px; font-weight: 500; padding: 5px 10px; border: 1px solid var(--border); border-radius: 999px; display: inline-flex; align-items: center; gap: 6px; }
.firm-link:hover { background: rgba(var(--tint-rgb), .06); border-color: var(--line-strong); color: var(--accent-bright); }
.firm-card__notes { background: rgba(245,166,35,.07); border: 0; border-radius: 8px; padding: 8px 10px; font-size: 13px; color: var(--warn-strong); margin: 4px 0 0; }
.firm-card__schmerz {
  font-size: 12.5px; color: var(--text-secondary);
  background: rgba(var(--tint-rgb), .035); border: 0; border-left: 0;
  padding: 7px 10px; border-radius: 8px; margin-top: 4px;
}
/* Toggle-Affordanz: kurzer Text + SVG-Chevron (currentColor via Mask) — kein Unicode-«▼» */
.card-toggle { display: inline-flex; align-items: center; gap: 4px; color: var(--text-secondary); font-weight: 500; font-size: 12.5px; }
.card-toggle::after {
  content: ""; width: 13px; height: 13px; flex: none; background: currentColor;
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'><path d='m6 9 6 6 6-6'/></svg>") center / contain no-repeat;
  mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'><path d='m6 9 6 6 6-6'/></svg>") center / contain no-repeat;
}
.firm-card:hover .card-toggle { color: var(--text-primary); }
/* Selektion: Accent-Inset links + Tint (keine Vollborder) */
.firm-card.firm-card--selectable { padding-left: 52px; position: relative; }
.firm-card__check { position: absolute; left: 4px; top: 4px; width: 44px; height: 44px; display: grid; place-items: center; cursor: pointer; }
.firm-card__checkbox { cursor: pointer; }
.firm-card.is-selected {
  background: linear-gradient(180deg, rgba(var(--accent-rgb),.05), rgba(var(--accent-rgb),.03)), var(--surface);
  box-shadow: inset 2.5px 0 0 var(--accent), var(--shadow-sm);
}
@media (max-width: 720px) {
  .firm-card { padding: 13px 14px; }
  .firm-card__contact { justify-content: flex-start; }
}

/* ---------- Listen-Zeilen (User-Modal u.a.) ---------- */
.user-leads-list, .user-appts-list { display: flex; flex-direction: column; gap: 6px; }
.lead-row, .appt-row {
  display: flex; gap: 12px; background: var(--surface-2); border: 1px solid transparent;
  border-radius: 10px; padding: 11px 13px; cursor: pointer;
  transition: background var(--transition), border-color var(--transition);
}
.lead-row:hover, .appt-row:hover { background: var(--surface-3); }
.lead-row__main { flex: 1; min-width: 0; }
.lead-row__heading, .appt-row__heading { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.lead-row__meta, .appt-row__meta { color: var(--text-secondary); font-size: 12.5px; margin-top: 3px; }
.lead-row__notes, .appt-row__note { font-size: 13px; margin: 6px 0 0; color: var(--text); padding: 6px 8px; background: rgba(var(--tint-rgb), .04); border-radius: 6px; }
.appt-row__note--feedback { background: rgba(47,214,127,.09); }
.appt-row__time { display: flex; flex-direction: column; min-width: 76px; }
.appt-row__time strong { font-size: 14px; font-variant-numeric: tabular-nums; }
.appt-row__time span { font-size: 12px; color: var(--text-secondary); }

/* ---------- Pagination ---------- */
.pagination { display: flex; gap: 4px; justify-content: center; margin-top: 18px; flex-wrap: wrap; }
.page-btn {
  min-width: 36px; min-height: 36px; padding: 6px 10px;
  border-radius: var(--radius-button); border: 1px solid transparent;
  background: transparent; color: var(--text-secondary); font-weight: 600; cursor: pointer;
  font-variant-numeric: tabular-nums;
}
.page-btn:hover:not(:disabled) { background: rgba(var(--tint-rgb), .06); color: var(--text-primary); }
.page-btn.active { background: var(--accent-soft); color: var(--accent-strong); }
.page-btn:disabled { opacity: .4; cursor: not-allowed; }
@media (max-width: 1024px), (pointer: coarse) { .page-btn { min-width: 44px; min-height: 44px; } }

/* ---------- Tabellen ---------- */
.table-wrap {
  overflow-x: auto; border-radius: 12px;
  background:
    linear-gradient(to right,  var(--surface), rgba(20,20,20,0)) left  center / 24px 100% no-repeat local,
    linear-gradient(to left,   var(--surface), rgba(20,20,20,0)) right center / 24px 100% no-repeat local,
    radial-gradient(farthest-side at 0% 50%, rgba(var(--tint-rgb), .16), rgba(var(--tint-rgb), 0)) left  center / 14px 100% no-repeat scroll,
    radial-gradient(farthest-side at 100% 50%, rgba(var(--tint-rgb), .16), rgba(var(--tint-rgb), 0)) right center / 14px 100% no-repeat scroll;
}
.team-table { width: 100%; border-collapse: collapse; min-width: 640px; }
.team-table th, .team-table td { padding: 11px 12px; border-bottom: 1px solid var(--border); text-align: left; vertical-align: middle; }
.team-table th {
  background: transparent; color: var(--text-tertiary);
  font-weight: 600; font-size: 11px; text-transform: uppercase; letter-spacing: .05em;
  border-bottom: 1px solid var(--line-strong);
}
.team-table tr:hover td { background: rgba(var(--tint-rgb), .025); }
.team-table tr:last-child td { border-bottom: 0; }
.team-table .team-role { background: var(--surface-inset); border: 1px solid var(--border); color: var(--text); padding: 6px 8px; border-radius: 6px; }
.team-table--clickable tr[data-user-id] { cursor: pointer; transition: background var(--transition); }
.team-table--clickable tr[data-user-id]:hover td { background: rgba(var(--accent-rgb),.06); }
.team-table tr.is-inactive td { opacity: .55; }
.team-table tr.is-inactive strong { color: var(--text-secondary); font-weight: 600; }

/* ---------- Modals ---------- */
.modal-backdrop {
  position: fixed; inset: 0; background: rgba(4, 8, 12, .62); backdrop-filter: blur(10px);
  z-index: 100; display: grid; place-items: start center; padding: 24px; overflow-y: auto;
  animation: backdrop-in var(--dur) var(--ease);
}
:root[data-theme="light"] .modal-backdrop { background: rgba(15, 30, 36, .38); }
@keyframes backdrop-in { from { opacity: 0; } to { opacity: 1; } }
.modal {
  width: 100%; max-width: 900px; background: var(--surface); border: 1px solid var(--border);
  border-radius: 14px; box-shadow: var(--shadow-lg); display: flex; flex-direction: column;
  max-height: calc(100vh - 48px); max-height: calc(100dvh - 48px);
  animation: modal-in var(--dur-slow) var(--ease);
}
@keyframes modal-in { from { opacity: 0; transform: scale(.975) translateY(6px); } to { opacity: 1; transform: none; } }
.modal--small { max-width: 560px; }
.modal__header { display: flex; justify-content: space-between; align-items: center; padding: 16px 20px; border-bottom: 1px solid var(--border); }
.modal__header h2 { margin: 0; font-size: 17px; font-weight: 600; letter-spacing: -.01em; }
.modal__body { overflow-y: auto; padding: 20px; display: grid; gap: 16px; }
.modal-section { background: rgba(var(--tint-rgb), .025); border: 0; border-radius: 12px; padding: 14px 16px; display: grid; gap: 10px; }
.modal-section h3 { margin: 0; font-size: 13px; font-weight: 600; color: var(--text-primary); letter-spacing: 0; text-transform: none; }
.modal-grid { display: grid; gap: 10px; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
.modal-actions { display: flex; gap: 10px; justify-content: flex-end; margin-top: 8px; flex-wrap: wrap; }
.info-card { background: var(--surface-2); border: 0; border-radius: 10px; padding: 10px 12px; }
.info-card strong { display: block; font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--text-tertiary); margin-bottom: 3px; font-weight: 600; }
.info-card p { margin: 0; color: var(--text); font-size: 13.5px; }
.status-panel { background: var(--surface-2); border: 0; border-radius: 10px; padding: 12px 14px; }
.status-panel strong { display: block; margin-bottom: 5px; color: var(--text-tertiary); font-size: 11px; text-transform: uppercase; letter-spacing: .06em; font-weight: 600; }
.status-panel p { margin: 0; }
.status-row { display: grid; grid-template-columns: 220px 1fr; gap: 12px; align-items: start; }
.review-negative { background: rgba(242,84,91,.07); }
.review-negative strong, .review-negative p { color: var(--bad-strong); }
/* Iter 27 Welle F: Cyan-Verlauf → neutrale erhabene Fläche + Cyan-Hairline oben
   (DESIGN.md §3); Kontakt-Zeile im text-link-Ton statt Deko-Grün. */
.contact-hero {
  background: var(--surface-2); border: 0; border-radius: 12px;
  padding: 14px 16px; margin-bottom: 12px;
  
}
.contact-hero__name { font-size: 16px; font-weight: 600; color: var(--text-primary); margin-bottom: 2px; }
.contact-hero__role { color: var(--text-secondary); font-size: 12.5px; margin-bottom: 8px; }
.contact-hero__why { font-size: 13.5px; color: var(--text); line-height: 1.5; margin: 6px 0; padding: 9px 12px; background: rgba(var(--tint-rgb), .05); border-radius: 8px; }
.contact-hero__method { font-size: 13px; color: var(--accent-strong); font-weight: 500; margin-bottom: 4px; }
.contact-hero__strategy { font-size: 13px; color: var(--text-secondary); line-height: 1.5; border-top: 1px solid var(--border); padding-top: 8px; margin-top: 8px; }
.contact-hero__strategy strong { color: var(--text-primary); }
.pain-list { display: grid; gap: 8px; }
.pain-item { display: flex; gap: 10px; align-items: flex-start; background: rgba(242,84,91,.05); border: 0; border-radius: 10px; padding: 9px 12px; }
.pain-item p { margin: 0; font-size: 13.5px; }
.pain-item__dot { color: var(--low); font-weight: 800; }
.pitch-box { background: var(--surface-2); border: 0; border-radius: 10px; padding: 13px 14px; box-shadow: inset 2.5px 0 0 var(--accent); }
.pitch-box p { margin: 0; }
.competitors-list { display: grid; gap: 8px; }
.competitor-card { background: var(--surface-2); border: 0; border-radius: 10px; padding: 11px 13px; }
.competitor-card__header { display: flex; gap: 10px; align-items: center; margin-bottom: 6px; }
.competitor-card__number {
  display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px;
  border-radius: 7px; background: rgba(var(--tint-rgb), .07); color: var(--text-secondary);
  font-size: 11.5px; font-weight: 700; flex-shrink: 0; font-variant-numeric: tabular-nums;
}
.competitor-card strong { color: var(--text-primary); }
.competitor-card p { margin: 0; color: var(--text-secondary); line-height: 1.5; font-size: 13px; }
.text-link { color: var(--accent-strong); }
.text-link:hover { color: var(--accent-bright); text-decoration: underline; }
.audit-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.audit-score { margin: 0; font-size: 26px; line-height: 1; font-weight: 600; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.audit-score-card { display: flex; flex-direction: column; justify-content: center; }
.hr-section { padding: 14px; border: 0; border-radius: 12px; background: rgba(var(--tint-rgb), .03); }

/* ---------- Toast (Iter 27 Welle F: Stack ≤3 + Icon nach Typ — toast.js) ---------- */
.toast-stack {
  position: fixed; bottom: calc(20px + var(--sab)); right: 20px; z-index: 200;
  display: flex; flex-direction: column; align-items: flex-end; gap: 8px;
  max-width: min(420px, calc(100vw - 32px)); pointer-events: none;
}
.toast {
  display: flex; align-items: flex-start; gap: 10px;
  background: var(--surface-2); border: 1px solid var(--border); color: var(--text);
  padding: 11px 14px; border-radius: 12px; box-shadow: var(--shadow-md); font-size: 13.5px;
  pointer-events: auto;
  transition: opacity var(--dur-slow) var(--ease), transform var(--dur-slow) var(--ease);
  animation: toast-in var(--dur-slow) var(--ease);
}
@keyframes toast-in { from { opacity: 0; transform: translateY(10px) scale(.98); } to { opacity: 1; transform: none; } }
.toast__ico { display: inline-flex; flex: none; margin-top: 2px; line-height: 0; }
.toast__ico svg { width: 15px; height: 15px; }
.toast--error   { box-shadow: inset 2.5px 0 0 var(--bad), var(--shadow-md); }
.toast--error .toast__ico   { color: var(--bad-strong); }
.toast--info    { box-shadow: inset 2.5px 0 0 var(--accent), var(--shadow-md); }
.toast--info .toast__ico    { color: var(--accent-strong); }
.toast--success { box-shadow: inset 2.5px 0 0 var(--good), var(--shadow-md); }
.toast--success .toast__ico { color: var(--good-strong); }

/* ---------- Empty-State (Icon im Soft-Ring + Titel + Aktion) ---------- */
.empty-state { padding: 32px 18px; text-align: center; color: var(--text-secondary); border: 0; border-radius: 12px; background: rgba(var(--tint-rgb), .025); }
.empty-state__icon {
  display: grid; place-items: center; width: 42px; height: 42px; margin: 0 auto 12px;
  border-radius: 50%; background: var(--accent-soft); color: var(--accent-strong);
  box-shadow: 0 0 0 7px rgba(var(--accent-rgb), .05);
}
.empty-state__icon svg { width: 19px; height: 19px; }
.empty-state h3 { margin: 0 0 6px; color: var(--text-primary); font-size: 15px; font-weight: 600; }
.empty-state p { margin: 0; color: var(--text-secondary); font-size: 13.5px; line-height: 1.5; }
.empty-state p + p { margin-top: 10px; }
.empty-state--inset { margin: 16px; }
.empty-state--compact { padding: 16px; }
.empty-state--compact .empty-state__icon { width: 36px; height: 36px; margin-bottom: 8px; }
.load-error { color: var(--low); font-size: 13.5px; padding: 10px 2px; margin: 0; }

/* ---------- Login ---------- */
.no-topbar { background: var(--bg); }
.login-shell {
  min-height: 100vh; min-height: 100dvh; display: grid; place-items: center; padding: 24px;
  background: radial-gradient(900px 520px at 50% -80px, rgba(var(--accent-rgb), .10), transparent 65%),
              radial-gradient(700px 500px at 85% 110%, rgba(var(--magenta-rgb), .05), transparent 60%),
              var(--bg);
}
.login-card { max-width: 400px; width: 100%; padding: 36px 32px; background: var(--surface); box-shadow: var(--shadow-lg); }
.login-logo { color: var(--text); margin-bottom: 22px; }
.login-card .login-logo svg { width: 180px; }
.login-card h1 { margin: 4px 0 20px; font-size: 22px; font-weight: 600; letter-spacing: -.01em; }
.login-card form { display: grid; gap: 14px; }
.login-card .field input { padding: 11px 13px; background: var(--surface-inset); border: 1px solid var(--border); border-radius: var(--radius-button); color: var(--text); }
.login-card .field input:focus { border-color: var(--accent); outline: none; box-shadow: 0 0 0 3px rgba(var(--accent-rgb), .18); }
.login-error { color: var(--low); margin: 6px 0 0; font-size: 13.5px; }
.login-spinner { animation: none; }
/* S2: «Passwort vergessen?» / «Zurück zur Anmeldung» — Textlink-Optik auf einem
   echten <button> (Aktion, kein Ziel). Touch-Floor via min-height. */
.login-link {
  display: block; width: 100%; min-height: 44px; margin-top: 14px;
  background: none; border: 0; padding: 0;
  color: var(--text-secondary); font-size: 13.5px; cursor: pointer;
}
.login-link:hover { color: var(--accent-strong); }
.login-link:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 6px; }
.loading { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; min-height: 50vh; color: var(--text-secondary); font-size: 13.5px; }
.loading-spinner { opacity: .8; }

/* ---------- User-Pill / Profil ---------- */
.user-pill {
  display: flex; align-items: center; gap: 10px;
  background: transparent; border: 1px solid transparent;
  padding: 8px 11px; border-radius: var(--radius-button); font-size: 13.5px;
}
.user-pill__role { text-transform: uppercase; letter-spacing: .06em; font-size: 11px; color: var(--accent-strong); font-weight: 700; }
.user-pill strong { color: var(--text-primary); font-weight: 600; }
.user-pill--button { cursor: pointer; min-height: 38px; }
.user-pill--button:hover { background: rgba(var(--tint-rgb), .05); }
.profile-meta { display: grid; gap: 10px; }
.profile-meta > div { display: flex; justify-content: space-between; align-items: center; padding: 8px 0; border-bottom: 1px solid var(--border); }
.profile-meta > div:last-child { border-bottom: 0; }
.profile-meta strong { color: var(--text-tertiary); font-size: 11px; text-transform: uppercase; letter-spacing: .06em; font-weight: 600; }

/* ---------- Bulk-Bar (Pool) ---------- */
.bulk-bar {
  display: flex; justify-content: space-between; align-items: center; gap: 14px;
  padding: 12px 16px; margin-top: 10px;
  background: var(--surface-2); border: 0; border-radius: 12px;
  box-shadow: inset 2.5px 0 0 var(--accent), var(--shadow-sm);
  flex-wrap: wrap;
}
.bulk-bar__left { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.bulk-bar__left strong { font-size: 16px; color: var(--accent-strong); font-variant-numeric: tabular-nums; }
.bulk-bar__right { display: flex; align-items: end; gap: 10px; flex-wrap: wrap; }
.bulk-bar__right .field { min-width: 220px; }

/* ---------- User-Checkbox-Grid (Assign-Modal) ---------- */
.user-checkbox-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 8px; margin: 6px 0; }
.user-checkbox {
  display: flex; align-items: center; gap: 10px; padding: 10px 12px;
  background: var(--surface-2); border: 1px solid transparent; border-radius: 10px; cursor: pointer;
  transition: background var(--transition), border-color var(--transition);
}
.user-checkbox:hover { background: var(--surface-3); }
.user-checkbox__body { display: flex; flex-direction: column; gap: 4px; flex: 1; min-width: 0; }
.user-checkbox__body strong { font-size: 13.5px; }
.user-checkbox__body .badge { align-self: flex-start; }
.user-checkbox-actions { display: flex; gap: 6px; margin-top: 6px; }

/* ---------- Status-Strip (Modal) ---------- */
.status-strip { background: var(--surface-2); border: 0; border-radius: 12px; padding: 16px; box-shadow: inset 2.5px 0 0 var(--accent); }
.status-strip__row { display: flex; gap: 16px; justify-content: space-between; flex-wrap: wrap; }
.status-strip__row > div:first-child { display: flex; flex-direction: column; gap: 8px; }
.status-strip__meta { color: var(--text-secondary); font-size: 12.5px; }
.status-strip__actions { display: flex; gap: 10px; flex-wrap: wrap; align-items: end; }
.status-strip__notes { margin-top: 14px; display: grid; gap: 8px; }
.status-strip__notes-actions { display: flex; gap: 10px; flex-wrap: wrap; }

/* ---------- Gruppen-Header ---------- */
.appt-group-h { margin: 0 0 8px; color: var(--text-tertiary); font-size: 11px; text-transform: uppercase; letter-spacing: .06em; font-weight: 600; }
.appt-group-h--done { margin-top: 14px; }
.export-list { display: grid; gap: 8px; margin: 8px 0 0; }

/* ---------- Idle-Warning ---------- */
.idle-warning {
  position: fixed; bottom: calc(20px + var(--sab)); left: 50%; transform: translateX(-50%); z-index: 300;
  display: flex; align-items: center; gap: 14px; padding: 14px 20px;
  background: var(--surface-2); border: 1px solid var(--border); border-radius: 12px;
  box-shadow: var(--shadow-lg); max-width: calc(100vw - 32px); flex-wrap: wrap;
}
.idle-warning strong { color: var(--warn-strong); }
.idle-warning span { color: var(--text-secondary); }

/* ---------- Kanban ---------- */
.pipeline-section { margin-top: 12px; }
.pipeline-section .kanban { padding: 4px; }
.kanban {
  display: grid; grid-auto-flow: column; grid-auto-columns: minmax(280px, 1fr); gap: 12px;
  overflow-x: auto; padding-bottom: 12px; -webkit-overflow-scrolling: touch; scroll-snap-type: x mandatory;
}
.kanban__col {
  scroll-snap-align: start; display: flex; flex-direction: column;
  background: rgba(var(--tint-rgb), .025); border: 0; border-radius: 12px;
  min-height: 200px; max-height: calc(100vh - 280px); max-height: calc(100dvh - 280px);
}
/* Iter 27 Welle B: Spalten-Tonfarbe als Punkt im Kopf (statt 3px-Farbborder oben) */
.kanban__header { display: flex; justify-content: space-between; align-items: center; padding: 11px 14px; border-bottom: 1px solid var(--border); }
.kanban__header h3 { font-size: 13px; }
.kanban__header strong { display: inline-flex; align-items: center; gap: 8px; font-size: 12.5px; font-weight: 600; letter-spacing: .01em; color: var(--text-primary); }
.kanban__header strong::before { content: ""; width: 8px; height: 8px; border-radius: 50%; flex: none; background: var(--tone, var(--text-tertiary)); }
.kanban__count { background: rgba(var(--tint-rgb), .07); color: var(--text-secondary); padding: 2px 9px; border-radius: 999px; font-size: 11.5px; font-weight: 600; font-variant-numeric: tabular-nums; }
.kanban__items { flex: 1; overflow-y: auto; padding: 10px; display: flex; flex-direction: column; gap: 8px; }
.kanban__empty { color: var(--text-tertiary); text-align: center; margin: 20px 0 0; font-size: 13px; }
.kanban-card {
  background: var(--surface-2); border: 1px solid transparent; border-radius: var(--radius-button);
  padding: 11px 12px; cursor: pointer; box-shadow: var(--shadow-sm);
  transition: background var(--transition), transform var(--transition), box-shadow var(--transition);
}
.kanban-card:hover { background: var(--surface-3); transform: translateY(-1px); }
.kanban-card[draggable="true"] { cursor: grab; touch-action: pan-y; }
.kanban-card[draggable="true"]:active { cursor: grabbing; }
.kanban-card.is-dragging { opacity: 0.4; }
.kanban-card.is-touch-clone {
  position: fixed; z-index: 999; pointer-events: none; opacity: 0.94; transform: scale(1.03);
  box-shadow: var(--shadow-lg); border: 1px solid var(--accent-line); background: var(--surface-2);
}
.kanban__col.is-drop-target { outline: 2px solid var(--accent); outline-offset: -2px; background: rgba(var(--accent-rgb),.05); }
.kanban-card--hoch    { box-shadow: inset 2.5px 0 0 var(--high), var(--shadow-sm); }
.kanban-card--mittel  { box-shadow: inset 2.5px 0 0 var(--medium), var(--shadow-sm); }
.kanban-card--niedrig { box-shadow: inset 2.5px 0 0 var(--low), var(--shadow-sm); }
.kanban-card__head { display: flex; justify-content: space-between; align-items: flex-start; gap: 8px; margin-bottom: 6px; }
.kanban-card__head strong { font-size: 13.5px; line-height: 1.3; color: var(--text-primary); }
.kanban-card__meta { display: flex; gap: 6px; color: var(--text-secondary); font-size: 12px; flex-wrap: wrap; }
.kanban-card__meta .badge { font-size: 11px; padding: 2px 7px; }
.kanban-card__phone { color: var(--accent-strong); font-size: 12px; margin-top: 6px; font-variant-numeric: tabular-nums; }
.kanban-card__note { font-size: 12px; color: var(--text-secondary); margin: 6px 0 0; padding: 6px 8px; background: rgba(var(--tint-rgb), .04); border-radius: 6px; }
.kanban-card__last-call { font-size: 11px; color: var(--text-tertiary); margin-top: 6px; }
.kanban-phases { display: none; gap: 6px; overflow-x: auto; padding: 2px 0 10px; margin-bottom: 2px; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
.kanban-phases::-webkit-scrollbar { display: none; }
.kanban-phase {
  flex: 0 0 auto; display: inline-flex; align-items: center; gap: 8px;
  min-height: 44px; padding: 8px 14px; border-radius: 999px;
  border: 1px solid var(--border); background: var(--surface-2);
  color: var(--text-secondary); font: 600 13px/1 inherit; cursor: pointer; white-space: nowrap;
}
.kanban-phase__dot { width: 8px; height: 8px; border-radius: 50%; flex: none; }
.kanban-phase__count { background: rgba(var(--tint-rgb), .07); padding: 1px 8px; border-radius: 999px; font-size: 12px; font-variant-numeric: tabular-nums; }
.kanban-phase[aria-current="true"] { background: var(--accent-soft); color: var(--accent-strong); border-color: var(--accent-line); }
.kanban-phase[aria-current="true"] .kanban-phase__count { background: rgba(var(--accent-rgb),.2); color: var(--accent-strong); }
@media (max-width: 720px) {
  .kanban { grid-auto-columns: minmax(88vw, 1fr); }
  .kanban__col { max-height: 70vh; }
  .kanban-card[draggable="true"] { touch-action: auto; }
  .kanban-phases { display: flex; }
}

/* ---------- User-Detail-Tabs ---------- */
.user-tabs { display: flex; gap: 2px; padding: 0 20px; border-bottom: 1px solid var(--border); overflow-x: auto; }
.user-tab {
  position: relative; background: transparent; border: 0; color: var(--text-secondary);
  padding: 11px 13px; cursor: pointer; font-weight: 500; font-size: 13.5px; white-space: nowrap;
  border-bottom: 2px solid transparent; margin-bottom: -1px;
}
.user-tab:hover { color: var(--text-primary); }
.user-tab.is-active { color: var(--text-primary); border-bottom-color: var(--accent); }

/* ---------- Conversion-Pills ---------- */
.conv-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 10px; margin-top: 14px; }
.conv-pill {
  display: grid; grid-template-columns: auto 1fr auto; gap: 10px; align-items: center;
  background: rgba(var(--tint-rgb), .03); border: 0; padding: 10px 14px; border-radius: 10px;
}
.conv-pill__label { color: var(--text-tertiary); font-size: 11px; text-transform: uppercase; letter-spacing: .06em; font-weight: 600; }
.conv-pill__bar { width: 100%; height: 6px; background: rgba(var(--tint-rgb), .07); border-radius: 3px; overflow: hidden; }
.conv-pill__fill { display: block; height: 100%; border-radius: 3px; transition: width .4s var(--ease); }
.conv-pill__pct { font-weight: 600; font-variant-numeric: tabular-nums; }
.status-filter-bar { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 12px; }
.status-filter-bar .ghost-btn--xs.is-active { background: var(--accent); color: var(--on-accent); border-color: var(--accent); }

/* ---------- Switch ---------- */
.switch { position: relative; display: inline-block; width: 40px; height: 22px; }
.switch input { opacity: 0; width: 0; height: 0; }
.switch span { position: absolute; cursor: pointer; inset: 0; background-color: var(--surface-3); border: 1px solid var(--border); transition: var(--dur-fast) var(--ease); border-radius: 999px; }
.switch span:before { position: absolute; content: ""; height: 16px; width: 16px; left: 2px; bottom: 2px; background: var(--text-secondary); border-radius: 50%; transition: var(--dur-fast) var(--ease); box-shadow: 0 1px 3px rgba(2,6,8,.4); }
.switch input:checked + span { background-color: var(--accent); border-color: var(--accent); }
.switch input:checked + span:before { transform: translateX(18px); background: #fff; }
.switch input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ---------- Kalender-Tag / Termin-Karten ---------- */
.cal-day { background: transparent; border: 0; border-radius: 12px; margin-bottom: 12px; }
.cal-day__header { display: flex; justify-content: space-between; padding: 11px 16px; border-bottom: 1px solid var(--line-strong); }
.cal-day__items { display: grid; gap: 0; }
.appt-card { display: grid; grid-template-columns: 92px 1fr auto; gap: 14px; padding: 13px 16px; border-bottom: 1px solid var(--border); align-items: center; }
.appt-card:last-child { border-bottom: 0; }
.appt-card__time { display: flex; flex-direction: column; align-items: flex-start; }
.appt-card__time strong { font-size: 17px; font-weight: 600; font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
.appt-card__time span { color: var(--text-tertiary); font-size: 12px; }
.appt-card__heading { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.appt-card__heading h3 { margin: 0; font-size: 14.5px; font-weight: 600; }
.appt-card__meta { color: var(--text-secondary); font-size: 12.5px; display: flex; gap: 12px; flex-wrap: wrap; margin-top: 3px; }
.appt-card__note { background: rgba(var(--tint-rgb), .035); border: 0; padding: 8px 10px; border-radius: 8px; font-size: 13px; margin: 8px 0 0; color: var(--text); }
.appt-card__note--feedback { background: rgba(47,214,127,.08); color: var(--good-strong); }
.appt-card__actions { display: flex; gap: 8px; flex-direction: column; }
@media (max-width: 720px) {
  .appt-card { grid-template-columns: 1fr; }
  .appt-card__actions { flex-direction: row; }
}

/* ---------- Activity ---------- */
.activity-log { display: grid; gap: 2px; }
.activity-item { display: grid; grid-template-columns: 140px 1fr auto auto; gap: 10px; padding: 8px 10px; border-radius: 8px; background: transparent; border-bottom: 1px solid var(--border); font-size: 13px; }
.activity-item:last-child { border-bottom: 0; }
.activity-item__time { color: var(--text-tertiary); font-variant-numeric: tabular-nums; font-size: 12px; }
.activity-item__who { color: var(--text); }
.activity-item__action { color: var(--accent-strong); font-weight: 600; }
.activity-item__details { color: var(--text-secondary); font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 720px) { .activity-item { grid-template-columns: 1fr; } }
.activity-feed { display: grid; gap: 0; }
.activity-feed__item { display: grid; gap: 3px; background: transparent; border: 0; border-bottom: 1px solid var(--border); border-radius: 0; padding: 10px 2px; font-size: 13px; }
.activity-feed__item:last-child { border-bottom: 0; }
.activity-feed__row { display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap; }
.activity-feed__who { color: var(--text-primary); font-weight: 600; }
.activity-feed__role { color: var(--text-tertiary); font-size: 11px; text-transform: uppercase; letter-spacing: .05em; font-weight: 600; }
.activity-feed__action { color: var(--accent-strong); font-weight: 500; }
.activity-feed__firm { color: var(--text-secondary); }
.activity-feed__when { color: var(--text-tertiary); font-size: 12px; margin-left: auto; font-variant-numeric: tabular-nums; }

/* ---------- Termin-Formular ---------- */
.appt-form { display: grid; gap: 14px; }
.appt-grid { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); }
.appt-conflict-warn {
  background: rgba(242, 84, 91, .09); border: 0; box-shadow: inset 2.5px 0 0 var(--bad);
  color: var(--text); padding: 10px 12px; border-radius: 8px; font-size: 13px; line-height: 1.4; margin: 0;
}
.appt-conflict-warn strong { display: block; margin-bottom: 4px; }
.appt-conflict-warn ul { margin: 6px 0 4px 0; padding-left: 20px; }
.appt-conflict-warn li { margin: 2px 0; }
.appt-conflict-warn small { display: block; margin-top: 6px; color: var(--text-secondary); font-size: 12px; }
.appt-conflict-warn__status { color: var(--text-secondary); font-size: 12px; }

/* ---------- Playbook / Referenz (Legacy-Views) ---------- */
.playbook-hero { padding: 24px; margin-bottom: 18px; }
.playbook-subtitle { max-width: 920px; color: var(--text-secondary); margin-top: 10px; }
.playbook-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 16px; }
.playbook-card { padding: 20px; }
.playbook-card h3 { margin: 0 0 12px; font-size: 15px; }
.playbook-card ul { padding-left: 18px; margin: 0; color: var(--text); display: grid; gap: 8px; }
.reference-panel { margin-top: 18px; overflow: hidden; }
.collapsible-toggle { width: 100%; display: flex; justify-content: space-between; align-items: center; background: transparent; border: 0; padding: 16px 20px; font-size: 14.5px; font-weight: 600; }
.collapsible-toggle:hover { background: rgba(var(--tint-rgb), .03); }
.toggle-chevron { color: var(--text-secondary); transition: transform var(--transition); }
.collapsible-toggle[aria-expanded="true"] .toggle-chevron { transform: rotate(180deg); }
.collapsible-body { padding: 0 20px 20px; border-top: 1px solid var(--border); }
.reference-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 14px; margin-top: 18px; }
.reference-item { background: var(--surface-2); border: 0; border-radius: 10px; padding: 13px; display: grid; gap: 5px; }
.reference-item strong { color: var(--accent-strong); }
.reference-item span { color: var(--text); }
.reference-item--full { grid-column: 1 / -1; }

/* ---------- Responsive (Basis) ---------- */
@media (max-width: 1200px) {
  .kpi-grid { grid-template-columns: repeat(4, minmax(0,1fr)); }
  .chart-grid { grid-template-columns: 1fr; }
}
@media (max-width: 980px) {
  .kpi-grid--mgr { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 900px) {
  .topbar { grid-template-columns: 1fr; align-items: start; }
  .topbar__meta { justify-content: space-between; flex-wrap: wrap; }
  .sticky-filters { top: calc(var(--sat) + 8px); }
  .playbook-grid, .reference-grid, .status-row, .audit-grid { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
  .main-shell, .topbar, .footer { padding-left: 14px; padding-right: 14px; }
  .panel__header { flex-wrap: wrap; }
  .panel__header .month-nav { width: 100%; order: 2; justify-content: space-between; }
  .main-shell { padding-top: calc(64px + var(--sat)); padding-bottom: calc(80px + var(--sab)); }
  .kpi-grid { grid-template-columns: repeat(2, minmax(0,1fr)); gap: 8px; }
  .kpi-grid--mgr { grid-template-columns: repeat(2, 1fr); gap: 8px; }
  .kpi-grid--mgr-3 { grid-template-columns: 1fr; gap: 8px; }
  .kpi-card { padding: 12px; }
  .kpi-card__value { font-size: 19px; }
  .filters-toolbar { flex-direction: column; }
  .filters-group { flex-direction: column; align-items: stretch; }
  .field, .field--wide { min-width: 100%; width: 100%; }
  .logo { width: 148px; }
  .toast-stack { left: 14px; right: 14px; bottom: calc(16px + var(--sab)); align-items: stretch; max-width: none; }
  .modal__body { min-height: 0; -webkit-overflow-scrolling: touch; }
  .modal-actions {
    position: sticky; bottom: 0; z-index: 2; background: var(--surface);
    margin-top: 4px; padding: 12px 0 calc(6px + env(safe-area-inset-bottom));
    border-top: 1px solid var(--border);
  }
  .bulk-bar { flex-direction: column; align-items: stretch; }
  .bulk-bar__right { width: 100%; }
  .view-toggle { width: 100%; overflow-x: auto; flex-wrap: nowrap; -webkit-overflow-scrolling: touch; }
  .view-toggle__btn { flex: 0 0 auto; }
  .section-nav { width: 100%; overflow-x: auto; flex-wrap: nowrap; -webkit-overflow-scrolling: touch; }
  .section-nav__btn { flex: 0 0 auto; white-space: nowrap; }
  .activity-feed__row { gap: 6px; }
  .activity-feed__when { margin-left: 0; flex: 1 1 100%; }
  .pipeline-section { margin-top: 8px; }
  .view-switch { width: 100%; overflow-x: auto; white-space: nowrap; -webkit-overflow-scrolling: touch; flex-wrap: nowrap !important; }
  .view-switch .nav-tab { padding: 8px 12px; flex: 0 0 auto; }
}
@media (max-width: 520px) {
  .kpi-grid { grid-template-columns: 1fr; }
  .view-switch { width: 100%; }
  .nav-tab { flex: 1 1 auto; }
}
@media print {
  body { background: white; color: black; }
  .topbar, .footer, .filters-panel, .chart-grid, .kpi-grid, .pagination, .modal-backdrop, .sidebar, .sidebar-toggle { display: none !important; }
  .firm-card, .panel, .playbook-card { box-shadow: none; border: 1px solid #ccc; background: white; color: black; }
}
/* ============================================================
   Iter 8.1 — Dashboard-Upgrade
   ============================================================ */

/* 6-er KPI-Reihe ueber volle Breite */
/* Iter 27 — Stat-Strip: EIN Panel, Hairline-getrennte Kennzahlen (ersetzt
   die sechs Icon-Quadrat-KPI-Karten; Daten sind der Held, DESIGN.md §4). */
.stat-strip { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 0; padding: 4px 0; margin-bottom: 16px; }
.stat {
  display: flex; flex-direction: column; gap: 3px; padding: 12px 18px;
  border-left: 1px solid var(--border); text-decoration: none; color: inherit;
  transition: background var(--transition); border-radius: 0;
}
.stat:first-child { border-left: 0; border-radius: var(--radius-card) 0 0 var(--radius-card); }
.stat:last-child { border-radius: 0 var(--radius-card) var(--radius-card) 0; }
.stat:hover { background: rgba(var(--tint-rgb), .035); }
.stat:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.stat__label { color: var(--text-tertiary); font-size: 11px; text-transform: uppercase; letter-spacing: .07em; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.stat__value { font-size: 22px; font-weight: 600; letter-spacing: -.01em; line-height: 1.15; font-variant-numeric: tabular-nums lining-nums; color: var(--text-primary); }
/* Iter 35 Puls: gedämpfte Zusatzzeile unter dem Wert («2 von 5 offenen») */
.stat__sub { color: var(--text-tertiary); font-size: 11px; line-height: 1.3; font-variant-numeric: tabular-nums; }
@media (max-width: 1100px) {
  .stat-strip { grid-template-columns: repeat(3, 1fr); }
  .stat:nth-child(4) { border-left: 0; }
  .stat { border-top: 1px solid transparent; }
  .stat:nth-child(n+4) { border-top: 1px solid var(--border); }
}
@media (max-width: 640px) {
  .stat-strip { grid-template-columns: repeat(2, 1fr); }
  .stat { padding: 10px 14px; border-top: 1px solid transparent; }
  .stat:nth-child(4) { border-left: 1px solid var(--border); }
  .stat:nth-child(odd) { border-left: 0; }
  .stat:nth-child(n+3) { border-top: 1px solid var(--border); }
  .stat__value { font-size: 19px; }
}

/* Iter 27 — Flow: proportionale Pipeline-Segmentleiste + Legende (ersetzt
   die Säulen; ein Blick = Verteilung, Legende = exakte Zahlen als Links). */
.funnel-panel { margin-bottom: 16px; }
.flow { display: grid; gap: 14px; padding: 4px 2px 2px; }
.flow-bar { display: flex; gap: 3px; height: 26px; border-radius: 7px; overflow: hidden; }
.flow-bar__seg { flex: 0 0 var(--w); min-width: 4px; background: var(--c); border-radius: 2.5px; opacity: .92; transition: opacity var(--transition); }
.flow-bar__seg:hover { opacity: 1; }
.flow-bar__seg--empty { flex: 1; background: rgba(var(--tint-rgb), .06); }
.flow-legend { display: flex; flex-wrap: wrap; gap: 4px 6px; }
.flow-legend__item {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 5px 10px; border-radius: 7px; text-decoration: none; color: var(--text-secondary);
  font-size: 12.5px; font-weight: 500; transition: background var(--transition), color var(--transition);
}
.flow-legend__item:hover { background: rgba(var(--tint-rgb), .05); color: var(--text-primary); }
.flow-legend__item i { width: 8px; height: 8px; border-radius: 3px; background: var(--c); flex: none; }
.flow-legend__item strong { color: var(--text-primary); font-weight: 600; font-variant-numeric: tabular-nums; }
@media (max-width: 720px) {
  .flow-bar { height: 20px; }
  .flow-legend { gap: 2px 2px; }
  .flow-legend__item { padding: 5px 8px; font-size: 12px; }
}

/* Panel-Titel-Zusatz: gedämpfter Inline-Hinweis statt Eyebrow-Kicker */
.panel__hint { color: var(--text-tertiary); font-size: 12px; font-weight: 500; letter-spacing: 0; margin-left: 6px; }

.panel--feed { max-height: 720px; display: flex; flex-direction: column; }
.panel--feed .activity-feed { overflow-y: auto; max-height: 600px; padding-right: 4px; }
.activity-feed--dense .activity-feed__item { padding: 8px 10px; font-size: 12px; }
@media (max-width: 1100px) {
  .panel--feed { max-height: none; }
  .panel--feed .activity-feed { max-height: 480px; }
}

/* Performance-Top5 Side-by-Side */
.performance-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); /* Iter15 E3: minmax(0,..) → Spalte schrumpft, .table-wrap scrollt intern statt Panel zu blähen (war 1fr 1fr → +64px @1024) */
  gap: 16px;
  margin-bottom: 16px;
}
.perf-table { min-width: auto; }
.perf-table th, .perf-table td { padding: 10px 12px; font-size: 13px; }
.perf-table th:first-child, .perf-table td:first-child { text-align: left; }
.perf-table th:not(:first-child), .perf-table td:not(:first-child) {
  text-align: right;
  font-variant-numeric: tabular-nums;
}
@media (max-width: 1100px) {  /* Iter15 E3: 980→1100 (wie .dashboard-grid) — bei 1024px (iPad quer) 1-spaltig statt geblähter 2-Spalten-Überlauf */
  .performance-grid { grid-template-columns: 1fr; }
}

/* Pipeline-Runden Mini-Cards */
.rounds-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}
.round-card {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 14px;
  display: grid;
  gap: 8px;
}
.round-card__head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px;
}
.round-card__head strong { font-size: 14px; color: var(--text-primary); }
.round-card__when { color: var(--text-secondary); font-size: 11px; }
.round-card__total { font-size: 20px; font-weight: 600; letter-spacing: -.01em; font-variant-numeric: tabular-nums; }
.round-card__stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px 12px;
  font-size: 12px;
  color: var(--text-secondary);
}
.round-card__stats span { display: flex; align-items: center; gap: 6px; }
.round-card__stats i {
  width: 8px; height: 8px; border-radius: 2px; display: inline-block; flex: 0 0 auto;
}
.round-card__rate {
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .04em;
  padding-top: 6px;
  border-top: 1px solid var(--border);
}
@media (max-width: 900px) {
  .rounds-grid { grid-template-columns: 1fr; }
}

/* Iter 8.1 Etappe 9: Mobile-Pass fuer neue Dashboard-Sektionen */
@media (max-width: 720px) {
  .dashboard-kpi-row { gap: 6px; margin-bottom: 12px; }
  .funnel-panel { padding: 12px; }
  .funnel-grid { gap: 2px; padding: 4px 0; }
  .performance-grid { gap: 12px; margin-bottom: 12px; }
  .panel--feed .activity-feed { max-height: 340px; }
  .perf-table th, .perf-table td { padding: 12px 10px; font-size: 13px; min-height: 44px; }
  .perf-table tr[data-user-id] td { min-height: 44px; }
  .round-card { padding: 12px; }
  .round-card__stats { grid-template-columns: 1fr 1fr; font-size: 11px; }
  .funnel-col { padding: 8px 1px; }
  .funnel-col__bar { width: 52%; min-width: 20px; }
}
@media (max-width: 520px) {
  .dashboard-kpi-row { grid-template-columns: repeat(2, 1fr); }
  .perf-table thead th:nth-child(2),
  .perf-table tbody td:nth-child(2) { display: none; }
}


/* ============================================================
   Iter 9 Etappe 12 + 14: Activity-Timeline + Time-Range-Tabs
   ============================================================ */
/* Iter 27 Welle B: Zeitraum-Pills = Segmented-Track mit Thumb (statt solid-Cyan-Pills) —
   EIN Aktiv-Stil app-weit (wie .seg__btn.is-active / .view-toggle__btn.is-active). */
.time-range-tabs {
  display: inline-flex; flex-wrap: nowrap; gap: 2px; padding: 3px;
  background: var(--surface-inset); border: 1px solid var(--border); border-radius: 10px;
  max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none;
}
.time-range-tabs::-webkit-scrollbar { display: none; }
.time-pill {
  flex: 0 0 auto; background: transparent; color: var(--text-secondary); border: 0;
  padding: 6px 13px; min-height: 32px; border-radius: 7px;
  font-size: 12.5px; font-weight: 600; cursor: pointer;
  transition: background var(--transition), color var(--transition);
}
.time-pill:hover { background: transparent; color: var(--text-primary); }
.time-pill.is-active {
  background: var(--surface-3); color: var(--text-primary);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05), 0 1px 3px rgba(2,6,8,.3);
}
.time-range-custom { display: flex; gap: 10px; margin-top: 8px; }
.time-range-custom .field { min-width: 140px; }

.filters-toolbar--activity {
  display: grid; gap: 12px;
}
.time-range-slot { width: 100%; }

.activity-timeline {
  display: grid; gap: 18px; padding: 16px;
}
.activity-day {
  display: grid; gap: 8px;
}
.activity-day__title {
  margin: 0; font-size: 13px; font-weight: 700; letter-spacing: .12em;
  text-transform: uppercase; color: var(--text-secondary);
  display: flex; align-items: center; gap: 10px;
}
.activity-day__count {
  background: var(--surface-2); color: var(--text); border-radius: 999px;
  padding: 1px 10px; font-size: 11px; font-weight: 600; letter-spacing: 0;
  text-transform: none;
}
.activity-day__list {
  list-style: none; padding: 0; margin: 0; display: grid; gap: 4px;
}
.activity-item-row {
  display: grid; grid-template-columns: 64px 180px 180px 1fr auto;
  gap: 12px; padding: 10px 12px; align-items: center;
  background: var(--surface-1); border: 1px solid var(--border); border-radius: 8px;
  font-size: 13px;
}
.activity-item-row--clickable { cursor: pointer; }
.activity-item-row--clickable:hover { background: var(--surface-2); border-color: rgba(var(--accent-rgb),.3); }
.activity-item-row__time { font-variant-numeric: tabular-nums; color: var(--text-secondary); font-size: 12px; }
.activity-item-row__user { display: flex; gap: 6px; align-items: center; min-width: 0; overflow: hidden; }
.activity-item-row__user strong { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.activity-item-row__action { color: var(--text); font-weight: 500; }
.activity-item-row__firm { color: var(--accent); font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.activity-item-row__detail { color: var(--text-secondary); font-size: 12px; }
.activity-item-row__detail em { font-style: normal; }

.activity-loadmore { padding: 14px; text-align: center; }

@media (max-width: 720px) {
  .activity-item-row {
    grid-template-columns: 1fr;
    gap: 4px;
    padding: 12px;
  }
  .activity-item-row__time { font-size: 11px; }
  .activity-item-row__user { font-size: 12px; }
  .activity-item-row__action { font-size: 14px; font-weight: 600; }
  .filters-toolbar--activity .filters-group { display: grid; grid-template-columns: 1fr; gap: 8px; }
  .time-pill { padding: 8px 12px; min-height: 40px; font-size: 13px; }
}

/* ============================================================
   Iter 9 Etappe 13: Admin-Heute-Sicht (manager-today.js)
   Iter 27 Welle C: Karten → Hairline-Zeilen (DESIGN.md §1), Rollen-Label
   ruhig statt Mono-Cyan, Überfällig = Inset-Bar + Tint statt Vollborder.
   ============================================================ */
.today-summary { display: flex; flex-direction: column; }
.today-user-row {
  display: flex; align-items: center; justify-content: space-between;
  gap: 4px 12px; flex-wrap: wrap; padding: 9px 2px;
}
.today-user-row + .today-user-row { border-top: 1px solid var(--border); }
.today-user-row__who { display: flex; align-items: baseline; gap: 8px; min-width: 200px; }
.today-user-row__who strong { font-size: 13.5px; font-weight: 600; color: var(--text-primary); }
.today-role { font-size: 11px; font-weight: 500; color: var(--text-tertiary); }
.today-user-row__stats { display: flex; flex-wrap: wrap; gap: 2px 16px; }
.today-user-stat { display: inline-flex; align-items: baseline; gap: 5px; }
.today-user-stat strong { font-size: 14px; font-weight: 600; color: var(--text-primary); font-variant-numeric: tabular-nums; }
.today-user-stat span { font-size: 12px; color: var(--text-secondary); }

.today-appt-list { display: flex; flex-direction: column; }
/* Iter 25 W2: einzige .appt-card--compact-Definition. Iter 27 Welle C: Zeile
   statt Box — Hairline zwischen Geschwistern, kein eigener Rahmen. */
.appt-card--compact { display: grid; gap: 8px; grid-template-columns: 80px 1fr auto 1fr auto; align-items: center; padding: 9px 4px; margin: 0; background: transparent; border: 0; border-radius: 0; font-size: 13px; box-shadow: none; }
.appt-card--compact + .appt-card--compact { border-top: 1px solid var(--border); }
.appt-card--compact > strong { font-variant-numeric: tabular-nums; }
.today-appt-people { font-size: 12px; color: var(--text-secondary); }
.today-appt-loc { font-size: 12px; color: var(--text-secondary); }

.today-cb-list { display: flex; flex-direction: column; }
.today-cb-card {
  display: grid; gap: 8px; grid-template-columns: 120px 1fr 1fr 2fr; align-items: center;
  padding: 9px 8px 9px 10px; background: transparent; border: 0; border-radius: 0;
  font-size: 13px;
}
.today-cb-card + .today-cb-card { border-top: 1px solid var(--border); }
.today-cb-card:hover { background: rgba(var(--tint-rgb), .035); }
.today-cb-card strong { display: inline-flex; align-items: center; gap: 5px; font-variant-numeric: tabular-nums; color: var(--warn-strong); }
.today-cb-card strong svg { width: 14px; height: 14px; flex: 0 0 auto; }
.today-cb-people { font-size: 12px; color: var(--text-secondary); }
.today-cb-note { font-size: 12px; color: var(--text-secondary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Iter 15 E4c: überfällige Wiedervorlagen — visuell vom „heute fällig" abgesetzt */
.today-cb-group__title {
  display: flex; align-items: center; gap: 6px;
  margin: 16px 2px 4px; font-size: 12.5px; font-weight: 600;
  letter-spacing: 0; text-transform: none; color: var(--text-secondary);
}
.today-cb-group__title svg { width: 14px; height: 14px; }
.today-cb-group__title:first-child { margin-top: 2px; }
.today-cb-card--overdue { box-shadow: inset 2.5px 0 0 var(--bad); background: rgba(242,84,91,.05); }
.today-cb-card--overdue:hover { background: rgba(242,84,91,.09); }
.today-cb-card--overdue strong { color: var(--bad-strong); }

@media (max-width: 720px) {
  .today-user-row__who { min-width: 0; width: 100%; }
  .appt-card--compact,
  .today-cb-card { grid-template-columns: 1fr; gap: 3px; }
  .today-appt-people, .today-cb-people { font-size: 13px; }
}

/* ============================================================
   Iter 9 Etappe 15: Firm-Modal Tabs + Versuch-Badge
   ============================================================ */
.modal__header { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 18px 20px 0; }
.modal__header-text { display: grid; gap: 6px; min-width: 0; flex: 1; }
/* Iter 27 Welle F: Eyebrow-Kicker gefallen — der Titel trägt (20/650, DESIGN.md §2) */
.modal__header-text h2 { margin: 0; font-size: 20px; font-weight: 650; letter-spacing: -.01em; line-height: 1.2; }
.modal__header-meta {
  display: flex; flex-wrap: wrap; gap: 6px; align-items: center; font-size: 13px;
}
.modal__header-meta .badge { font-size: 11px; padding: 3px 9px; }
.modal__header-caller { color: var(--text-secondary); font-size: 12px; }
.badge--attempt {
  background: rgba(252, 211, 77, .16); color: var(--warn-strong); font-weight: 700;
}

/* Iter 27 Welle F: Tabs im Underline-Stil (wie .user-tab / .subnav) —
   aktiv = Text-Primary + Accent-Indikator, kein Cyan-Text-Geschrei. */
.modal__tabs {
  display: flex; gap: 2px; padding: 0 20px;
  border-bottom: 1px solid var(--border);
  overflow-x: auto; overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.modal__tabs::-webkit-scrollbar { display: none; }
.modal__tab {
  background: transparent; border: none; color: var(--text-secondary);
  padding: 11px 13px; min-height: 44px;
  font-size: 13.5px; font-weight: 500; cursor: pointer;
  border-bottom: 2px solid transparent; margin-bottom: -1px;
  white-space: nowrap;
  transition: color var(--transition), border-color var(--transition);
}
.modal__tab:hover { color: var(--text-primary); }
.modal__tab.is-active {
  color: var(--text-primary); border-bottom-color: var(--accent); font-weight: 600;
}

.reassign-row { display: grid; grid-template-columns: 1fr 2fr auto; gap: 12px; align-items: end; }
.reassign-row .field--wide { min-width: 200px; }
.appt-note { display: block; padding-top: 4px; color: var(--text-secondary); font-size: 12px; }

@media (max-width: 720px) {
  .modal__header { padding: 14px 14px 0; }
  .modal__header-text h2 { font-size: 18px; }
  .modal__tabs { padding: 0 14px; gap: 0; }
  .modal__tab { padding: 12px 12px; font-size: 13px; }
  .reassign-row { grid-template-columns: 1fr; }
}

/* ============================================================
   Iter 9 Etappe 16: Schnellaktionen + Pflicht-Notiz-Mini-Modal
   ============================================================ */
.kanban-card__actions, .firm-card__qa {
  display: flex; flex-wrap: wrap; gap: 4px; margin-top: 8px; padding-top: 8px;
  border-top: 1px solid var(--border);
}
/* Iter 15 E4a: Quick-Action-Buttons im Firm-Modal Status-Tab — gleicher
   Outcome-Pfad wie Karten-Buttons (Density), ohne den Karten-Border-Top
   (status-strip hat eigenen Frame). */
.status-strip__qa { display: flex; gap: 4px; flex-wrap: wrap; }
.qa-btn {
  background: var(--surface-2); color: var(--text); border: 1px solid var(--border);
  padding: 6px 10px; min-height: 32px; border-radius: 6px;
  font-size: 12px; font-weight: 500; cursor: pointer;
  transition: all .12s;
}
.qa-btn:hover { background: var(--surface-3); border-color: rgba(var(--accent-rgb),.35); }
.qa-btn--ok    { color: var(--accent-strong); }
.qa-btn--ok:hover    { background: rgba(103,232,249,.12); border-color: rgba(103,232,249,.4); }
.qa-btn--appt  { color: var(--good-strong); }
.qa-btn--appt:hover  { background: rgba(134,239,172,.12); border-color: rgba(134,239,172,.4); }
.qa-btn--cb    { color: var(--warn-strong); }
.qa-btn--cb:hover    { background: rgba(252,211,77,.12); border-color: rgba(252,211,77,.4); }
.qa-btn--lost  { color: var(--low); }
.qa-btn--lost:hover  { background: rgba(248,113,113,.10); border-color: rgba(248,113,113,.4); }

.kanban-card__cb,
.firm-card__cb {
  font-size: 12px; color: var(--warn-strong); margin-top: 4px;
  font-variant-numeric: tabular-nums;
}
/* Iter 15 E4c: überfällige WV — gleiche Akzentfarbe wie „lost", aber dezenter */
.kanban-card__cb--overdue,
.firm-card__cb--overdue { color: var(--low); font-weight: 600; }
.kanban-card__badges { display: flex; gap: 4px; flex-wrap: wrap; }

/* Mini-Modal */
.modal-backdrop--mini { z-index: 1100; }
.mini-modal {
  background: var(--surface); border: 1px solid var(--border); border-radius: 14px;
  width: 100%; max-width: 460px; max-height: 90vh;
  display: flex; flex-direction: column;
  overflow: hidden; box-shadow: var(--shadow-lg);
  animation: modal-in var(--dur-slow) var(--ease);
}
.mini-modal__header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 18px; border-bottom: 1px solid var(--border);
}
.mini-modal__header h3 { margin: 0; font-size: 16px; }
.mini-modal__body { padding: 18px; display: grid; gap: 14px; overflow-y: auto; }
.mini-modal__body textarea { min-height: 90px; }
.mini-modal__hint { color: var(--text-secondary); font-size: 12px; margin: 0; }
.mini-modal__footer {
  display: flex; gap: 8px; justify-content: flex-end;
  padding: 14px 18px; border-top: 1px solid var(--border);
  padding-bottom: max(14px, env(safe-area-inset-bottom));   /* iOS: über Home-Indicator */
}
.mini-modal__footer .primary-btn,
.mini-modal__footer .ghost-btn { min-height: 44px; }

@media (max-width: 720px) {
  .qa-btn { min-height: 44px; padding: 10px 14px; font-size: 13px; flex: 1 1 calc(33% - 4px); }
  .qa-btn--appt { flex: 1 1 100%; }  /* Termin auf eigene Zeile, prominent */
  /* Iter15 E3: mini-modal mobil = randloses Fullscreen. Das .modal-backdrop hat
     padding:24px → width:100vw ragte 24px rechts raus (H-Overflow). padding:0 auf
     dem mini-Backdrop + width:100% = echtes Fullscreen ohne Überlauf. */
  .modal-backdrop--mini { padding: 0; }
  .mini-modal {
    max-width: 100%; max-height: 100vh; max-height: 100dvh; height: 100vh; height: 100dvh; border-radius: 0;
    width: 100%;
  }
  /* Iter 27 Welle F: Body wächst — Footer (Speichern) ankert unten in Daumen-Reichweite */
  .mini-modal__body { padding: 14px; flex: 1 1 auto; align-content: start; }
}

/* ============================================================
   Iter 13 Etappe 2c: Tap-Outcome-Assessment (null Freitext)
   ============================================================ */
.assessment-q { display: grid; gap: 8px; }
.assessment-q__label { margin: 0; font-size: 13px; font-weight: 600; color: var(--text-primary); }
.assessment-q__req { color: var(--low); margin-left: 4px; }
.assessment-q.is-missing .assessment-q__label { color: var(--low); }
.assessment-q.is-missing .tap-group {
  outline: 1.5px solid var(--low); outline-offset: 4px; border-radius: var(--radius-button);
}
.tap-group { display: flex; flex-wrap: wrap; gap: 8px; }
.tap-group--scale { gap: 6px; }
/* Iter 27 Welle F: Tap-Buttons gross + klar; Auswahl = Accent-Soft + Border
   (echte Selektion, aber kein solid-Cyan-Block — DESIGN.md Kill-Liste). */
.tap-btn {
  min-height: 44px; padding: 10px 16px;
  background: var(--surface-2); color: var(--text);
  border: 1px solid var(--border); border-radius: var(--radius-button);
  font-size: 13.5px; font-weight: 600; cursor: pointer;
  transition: background var(--transition), border-color var(--transition),
              color var(--transition), transform var(--transition);
}
.tap-btn:hover { background: var(--surface-3); }
.tap-btn:active { transform: scale(.985); }
.tap-btn.is-active {
  background: var(--accent-soft); color: var(--accent-strong);
  border-color: var(--accent-line);
  box-shadow: inset 0 1px 0 rgba(var(--accent-rgb), .12);
}
.tap-btn--scale {
  min-width: 44px; flex: 1 1 0;
  display: inline-flex; align-items: center; justify-content: center;
  font-variant-numeric: tabular-nums;
}
.mini-modal__error { color: var(--low); font-size: 13px; margin: 0; }

@media (max-width: 720px) {
  .tap-btn { flex: 1 1 calc(50% - 4px); justify-content: center; }
  .tap-btn--scale { flex: 1 1 0; }
}

/* ============================================================
   Iter 9 Etappe 17: Caller-Activity-Stream
   ============================================================ */
.today-stream {
  padding: 14px 18px;
  display: grid; gap: 10px;
}
.today-stream__head {
  display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap;
}
.today-stream__head strong {
  font-size: 14px; color: var(--text); font-variant-numeric: tabular-nums;
}
.today-stream__list {
  list-style: none; padding: 0; margin: 0; display: grid; gap: 4px;
}
.today-stream__list li {
  display: flex; align-items: baseline; gap: 10px;
  font-size: 12px; color: var(--text-secondary);
  padding: 2px 0;
}
.today-stream__list li span { color: var(--text-secondary); font-variant-numeric: tabular-nums; min-width: 44px; }
.today-stream__list li strong { color: var(--text); font-weight: 600; }
.today-stream__list li em { color: var(--accent); font-style: normal; }

@media (max-width: 720px) {
  .today-stream { padding: 12px; }
  .today-stream__list li { font-size: 13px; flex-wrap: wrap; }
}

/* ============================================================
   Iter 10 Etappe 22: Inline-Edit pro Feld (firm-modal Details-Tab)
   ============================================================ */
.icon-btn--sm { width: 32px; height: 32px; }
.icon-btn--sm svg { width: 14px; height: 14px; }
.modal-section__hint {
  margin: 0 0 12px 0; font-size: 12px; color: var(--text-secondary);
}
.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}
.editable-grid {
  display: grid; gap: 12px;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}
.editable-field { padding: 12px 14px; }
.editable-field__head {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  margin-bottom: 6px;
}
.editable-field__head strong {
  margin: 0; font-size: 11px; text-transform: uppercase; letter-spacing: .08em;
  color: var(--text-secondary);
}
.editable-field__value {
  margin: 0; font-size: 14px; color: var(--text); word-break: break-word;
}
.editable-field__editor {
  display: grid; gap: 8px; margin-top: 8px;
  padding-top: 8px; border-top: 1px solid var(--border);
}
.editable-field__editor .field { margin: 0; }
.editable-field__editor input,
.editable-field__editor select {
  width: 100%; min-height: 38px;
  background: var(--surface-inset); color: var(--text);
  border: 1px solid var(--border); border-radius: var(--radius-button); padding: 8px 10px;
  font: inherit;
}
.editable-field__editor input:focus,
.editable-field__editor select:focus {
  outline: none; border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(var(--accent-rgb), .18);
}
.editable-field__actions {
  display: flex; gap: 8px; justify-content: flex-end; flex-wrap: wrap;
}
.editable-field__actions .ghost-btn,
.editable-field__actions .primary-btn { min-height: 44px; padding: 0 16px; }

@media (max-width: 720px) {
  .editable-grid { grid-template-columns: 1fr; }
  .editable-field__editor input,
  .editable-field__editor select { min-height: 44px; font-size: 16px; }
}

/* ============================================================
   Iter 11 Etappe 37: Mobile-Pass Iter-11
   ============================================================ */
@media (max-width: 720px) {
  /* Section-Nav (Analyse) mit 4 Tabs: scrollbar */
  .section-nav {
    overflow-x: auto; flex-wrap: nowrap;
    -webkit-overflow-scrolling: touch;
  }
  .section-nav__btn {
    flex: 0 0 auto; min-height: 44px; padding: 8px 14px; font-size: 14px;
  }
  /* Heatmap-Bar: schmaler aber sichtbar */
  .heatmap-bar { height: 8px; }
  /* Setter-KPIs: 6 KPIs in 2x3 Grid */
  .setter-kpis { grid-template-columns: repeat(2, 1fr); display: grid; }
  .kpi-strip { gap: 6px; }
}

/* ============================================================
   Iter 11 Etappe 35: Drag-Reschedule (Desktop)
   ============================================================ */
.cal-event { cursor: grab; user-select: none; touch-action: pan-y; }
.cal-event:active { cursor: grabbing; }
.cal-event.is-dragging {
  cursor: grabbing;
  z-index: 5;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .5);
  opacity: .9;
  transition: none;
}

/* ============================================================
   Iter 11 Etappe 34: Analyse-Erweiterung (Setter + Edit-Heatmap)
   ============================================================ */
.heatmap-bar {
  position: relative; height: 10px;
  background: rgba(var(--tint-rgb), .06);
  border-radius: 5px; overflow: hidden;
}
.heatmap-bar__fill {
  position: absolute; left: 0; top: 0; bottom: 0;
  background: linear-gradient(to right, var(--accent), var(--medium));
  border-radius: 5px;
  transition: width .3s ease;
}

/* ============================================================
   Iter 11 Etappe 32: Lead-Picker-Modal (Quick-Create-Termin)
   ============================================================ */
.modal--lead-picker { max-width: 560px; }
.lp-body { display: grid; gap: 14px; }
.lp-body input[type="search"] {
  min-height: 44px; padding: 10px 12px; font: inherit;
  background: var(--surface-inset); color: var(--text);
  border: 1px solid var(--border); border-radius: var(--radius-button);
}
.lp-results {
  display: grid; gap: 6px; max-height: 50vh; overflow-y: auto;
}
/* Iter 27 Welle F: Ergebnis-Zeilen im Listen-Idiom (Fläche statt Rahmen-Hover) */
.lp-result {
  display: grid; gap: 6px;
  background: var(--surface-2); border: 1px solid transparent;
  border-radius: 10px; padding: 12px 14px;
  text-align: left; color: var(--text); font: inherit; cursor: pointer;
  transition: background var(--transition);
}
.lp-result:hover { background: var(--surface-3); }
.lp-result strong { font-size: 14.5px; color: var(--text-primary); }
.lp-result__meta {
  display: flex; flex-wrap: wrap; gap: 8px; align-items: center;
  font-size: 12px; color: var(--text-secondary);
}
@media (max-width: 720px) {
  .modal--lead-picker { max-width: 100%; height: 100vh; height: 100dvh; max-height: 100vh; max-height: 100dvh; border-radius: 0; }
  .lp-body input[type="search"] { font-size: 16px; min-height: 48px; }
  .lp-result { padding: 14px; }
}

/* ============================================================
   Iter 10 Etappe 30: Mobile-Polish + Touch-Target-Pass
   ============================================================ */
@media (max-width: 720px) {
  /* KPI-Strip kompakter (mein-Kalender, Setter-Dashboard) */
  .kpi-strip,
  .setter-kpis {
    gap: 6px;
  }
  .kpi-pill {
    flex: 1 1 calc(50% - 6px);
    min-width: 0;
    padding: 8px 10px;
    font-size: 12px;
  }
  .kpi-pill strong { font-size: 18px; }

  /* Cal-Toolbar Datepicker auf eigene Zeile */
  .cal-toolbar__date {
    flex: 1 1 100%; min-width: 0; order: 4;
  }
  /* Cal-Toolbar Filter: nicht zu klein, beide nebeneinander */
  .cal-toolbar__controls select { font-size: 16px; }

  /* Activity-Item-Row (Edit-Sicht) lesbarer */
  .activity-item-row { gap: 6px; padding: 8px 6px; flex-wrap: wrap; }
  .activity-item-row__detail { width: 100%; }
  .activity-item-row__reason { width: 100%; font-style: italic; color: var(--text-secondary); font-size: 12px; }

  /* Filter-Toolbar Search-Input voll breit */
  .filters-toolbar .field--search { flex: 1 1 100%; }

  /* Modal passt GARANTIERT in den Viewport (E6-Fix 2026-07-03: 100dvh bei
     24px Backdrop-Padding + 12px Alt-Margin ragte unten 36px raus — auf Prod
     gemessen, Pool- UND Standort-Modal betroffen). Eine Geometrie: 12px Luft. */
  .modal-backdrop { padding: 12px; }
  .modal { margin: 0; max-height: calc(100vh - 24px); max-height: calc(100dvh - 24px); }
}

/* Touch-Target-Floor fuer alle interaktiven Buttons in Iter-10-Komponenten */
.cal-toggle,
.cal-toolbar__nav .ghost-btn,
.editable-field__actions .primary-btn,
.editable-field__actions .ghost-btn {
  min-height: 44px;
}

/* ============================================================
   Iter 10/11 Etappe 29/33: Audit-Tab visuelle Markierung
   (Admin + Manager sichtbar seit Iter 11 Etappe 33)
   ============================================================ */
.nav-tab--audit {
  position: relative;
  color: var(--accent) !important;
}
.nav-tab--audit .nav-tab__icon {
  margin-right: 4px; font-size: 12px; opacity: .85;
}
.nav-tab--audit.active {
  background: rgba(var(--accent-rgb), .14);
}

/* ============================================================
   Iter 10 Etappe 28: Visueller Kalender (calendar-grid)
   ============================================================ */
.cal-shell { padding: 0; overflow: hidden; }
.cal-toolbar {
  display: flex; flex-wrap: wrap; gap: 12px; align-items: center;
  padding: 14px 16px; border-bottom: 1px solid var(--border);
  background: var(--surface-2);
}
.cal-toolbar__nav {
  display: flex; align-items: center; gap: 8px; flex: 1 1 auto;
}
.cal-toolbar__nav .ghost-btn { min-height: 44px; padding: 0 14px; }   /* Iter 15: 40→44 Touch */
.cal-toolbar__date {
  min-height: 44px; padding: 0 12px;   /* Iter 15: 40→44 Touch */
  background: var(--surface-1); color: var(--text);
  border: 1px solid var(--border); border-radius: 8px;
  font: inherit;
}
.cal-toolbar__title { margin: 0 0 0 8px; font-size: 16px; font-weight: 600; }
.cal-toolbar__controls { display: flex; gap: 10px; flex-wrap: wrap; }
.cal-toolbar__controls .field { margin: 0; min-width: 160px; }
.cal-toolbar__controls select { min-height: 44px; }   /* Iter 15: 40→44 Touch */
/* Iter 27 Welle C: EIN Segmented-Vokabular (Thumb-Stil) auch im Kalender */
.cal-toolbar__views { display: flex; gap: 2px; background: var(--surface-inset); border: 1px solid var(--border); border-radius: 10px; padding: 3px; }

.cal-toggle {
  appearance: none; background: transparent; color: var(--text-secondary);
  border: 0; padding: 7px 13px; font: 600 12.5px/1.2 inherit; border-radius: 7px;
  cursor: pointer; transition: background var(--transition), color var(--transition);
  min-height: 30px;
}
.cal-toggle:hover { color: var(--text-primary); }
.cal-toggle.is-active {
  background: var(--surface-3); color: var(--text-primary);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05), 0 1px 3px rgba(2,6,8,.3);
}

.cal-mode-bar {
  display: flex; justify-content: flex-end; padding: 0 0 12px; margin-bottom: 0;
}
.cal-mode-bar__toggle {
  display: flex; gap: 2px; background: var(--surface-inset); border: 1px solid var(--border); border-radius: 10px; padding: 3px;
}
.cal-mode-bar__toggle + .cal-mode-bar__toggle { margin-left: 8px; }

.cal-view { padding: 0; }

/* Tag- + Woche-Sicht (Time-Grid) */
.cal-grid {
  display: grid;
  background: var(--surface-1);
}
.cal-grid--day { grid-template-columns: 64px 1fr; height: var(--grid-h, 960px); }
.cal-grid--week { display: block; }
.cal-week-headers {
  display: grid; grid-template-columns: 64px repeat(7, 1fr);
  position: sticky; top: 0; z-index: 2;
  background: var(--surface-2);
  border-bottom: 1px solid var(--border);
}
.cal-week-header {
  text-align: center; padding: 10px 4px;
  border-left: 1px solid var(--border);
  display: flex; flex-direction: column; gap: 2px;
}
.cal-week-header span { font-size: 11px; text-transform: uppercase; color: var(--text-secondary); letter-spacing: .08em; }
.cal-week-header strong { font-size: 14px; }
.cal-week-header.is-today strong { color: var(--accent); }
.cal-week-body { display: grid; grid-template-columns: 64px 1fr; }
.cal-week-cols { display: grid; grid-template-columns: repeat(7, 1fr); height: var(--grid-h, 960px); }

.cal-time-col { position: relative; height: var(--grid-h, 960px); border-right: 1px solid var(--border); }
.cal-time-label {
  position: absolute; left: 0; right: 0;
  font-size: 11px; color: var(--text-secondary);
  padding: 0 6px; line-height: 1;
  transform: translateY(-50%);
}
/* Iter 25 E1.3: erstes Label (06:00, top:0) nicht nach oben unter den sticky
   Wochen-Header ziehen — sonst halb verdeckt. */
.cal-time-label:first-child { transform: none; }

.cal-day-col {
  position: relative;
  border-left: 1px solid var(--border);
  min-height: var(--grid-h, 960px);
}
.cal-day-col__slots { position: relative; height: var(--grid-h, 960px); }
.cal-slot {
  position: absolute; left: 0; right: 0;
  border-bottom: 1px dashed rgba(var(--tint-rgb), .04);
  cursor: pointer;
  transition: background .12s ease;
}
.cal-slot:nth-of-type(odd) { border-bottom-color: rgba(var(--tint-rgb), .08); }
.cal-slot:hover { background: rgba(var(--accent-rgb), .06); }

.cal-now-line {
  position: absolute; left: 0; right: 0; height: 2px;
  background: var(--accent); pointer-events: none;
  z-index: 3;
}
.cal-now-line::before {
  content: ''; position: absolute; left: -4px; top: -4px;
  width: 10px; height: 10px; background: var(--accent); border-radius: 50%;
}

.cal-events { position: absolute; inset: 0; pointer-events: none; }
.cal-event {
  position: absolute; left: 4px; right: 4px;
  display: flex; flex-direction: column; gap: 2px; align-items: flex-start;
  background: var(--surface-2);
  border: 1px solid var(--border); border-left: 4px solid var(--accent);
  border-radius: 6px;
  padding: 4px 8px;
  color: var(--text); text-align: left;
  cursor: pointer; pointer-events: auto;
  overflow: hidden; font: inherit;
  transition: transform .12s ease, box-shadow .12s ease;
  min-height: 40px;
}
.cal-event:hover { transform: translateY(-1px); box-shadow: 0 4px 12px rgba(0, 0, 0, .35); }
.cal-event strong { font-size: 12px; font-variant-numeric: tabular-nums; }
.cal-event span { font-size: 12px; color: var(--text-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.cal-event--planned     { border-left-color: var(--accent); }
.cal-event--confirmed   { border-left-color: var(--accent); background: rgba(var(--accent-rgb), .08); }
.cal-event--completed   { border-left-color: var(--text-secondary); }
.cal-event--won         { border-left-color: var(--high, var(--good)); background: rgba(45, 190, 115, .12); }
.cal-event--lost        { border-left-color: var(--low, var(--bad-deep)); background: rgba(184, 52, 79, .08); }
.cal-event--rescheduled { border-left-color: var(--info-muted); background: rgba(105, 137, 201, .08); }
.cal-event--no_show     { border-left-color: var(--medium); background: rgba(201, 140, 46, .08); }
.cal-event--cancelled   { border-left-color: var(--low, var(--bad-deep)); opacity: .6; }

/* Monat */
.cal-month { padding: 0; }
.cal-month__headers {
  display: grid; grid-template-columns: repeat(7, 1fr);
  background: var(--surface-2);
  border-bottom: 1px solid var(--border);
}
.cal-month__headers > div {
  padding: 10px 6px; text-align: center;
  font-size: 11px; text-transform: uppercase; color: var(--text-secondary); letter-spacing: .08em;
  border-left: 1px solid var(--border);
}
.cal-month__grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  grid-auto-rows: minmax(100px, 1fr);
  background: var(--border);
  gap: 1px;
}
.cal-month__cell {
  appearance: none; background: var(--surface-1); border: 0;
  display: flex; flex-direction: column; gap: 4px;
  padding: 6px; text-align: left;
  cursor: pointer; min-height: 100px; color: var(--text); font: inherit;
  transition: background .12s ease;
}
.cal-month__cell:hover { background: rgba(var(--accent-rgb), .06); }
.cal-month__cell.is-other { opacity: .35; }
.cal-month__cell.is-today { background: rgba(var(--accent-rgb), .08); }
.cal-month__cell.is-today .cal-month__day { color: var(--accent); }
.cal-month__day { font-size: 13px; font-weight: 600; }
.cal-month__events { display: flex; flex-direction: column; gap: 2px; }
.cal-month__pill {
  display: flex; gap: 4px; align-items: baseline;
  padding: 2px 6px; border-radius: 4px;
  background: var(--surface-2); border-left: 3px solid var(--accent);
  font-size: 11px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
}
.cal-month__pill strong { font-variant-numeric: tabular-nums; color: var(--text-secondary); }
.cal-month__pill em { font-style: normal; color: var(--text); overflow: hidden; text-overflow: ellipsis; max-width: 120px; }
.cal-month__pill--won { border-left-color: var(--high, var(--good)); }
.cal-month__pill--lost { border-left-color: var(--low, var(--bad-deep)); }
.cal-month__pill--confirmed { border-left-color: var(--accent); }
.cal-month__pill--no_show { border-left-color: var(--medium); }
.cal-month__pill--rescheduled { border-left-color: var(--info-muted); }
.cal-month__more { font-size: 11px; color: var(--accent); padding: 0 4px; font-weight: 600; }

/* Mobile (<=720px) */
@media (max-width: 720px) {
  .cal-toolbar { padding: 10px; gap: 8px; }
  .cal-toolbar__nav { flex: 1 1 100%; flex-wrap: wrap; }
  .cal-toolbar__title { width: 100%; margin: 0; font-size: 15px; }
  .cal-toolbar__controls { flex: 1 1 100%; }
  .cal-toolbar__controls .field { min-width: 0; flex: 1 1 calc(50% - 5px); }
  .cal-toolbar__views { flex: 1 1 100%; justify-content: space-between; }
  .cal-toggle { flex: 1 1 auto; min-height: 44px; padding: 0 8px; }

  .cal-grid--week,
  .cal-week-body { overflow-x: auto; }
  .cal-week-headers,
  .cal-week-cols { min-width: 720px; }

  .cal-month__grid { grid-auto-rows: minmax(70px, 1fr); }
  .cal-month__cell { min-height: 70px; padding: 4px; }
  .cal-month__day { font-size: 12px; }
  .cal-month__pill em { display: none; }
  .cal-month__pill strong { font-size: 11px; }

  .cal-event { min-height: 44px; padding: 4px 6px; }
  .cal-event span { font-size: 11px; }
  .cal-slot { min-height: 44px; }

  .cal-mode-bar { padding: 8px 10px; }
}

/* ============================================================
   Iter 33 B3: Kalender-Seiten-Panel (Notizen & freie To-Dos)
   Zwei-Spalten-Grid neben dem Kalender-Grid; Mobile 1-spaltig +
   aufklappbar. Basisregeln HIER, eigener @media-Block direkt danach
   (Kaskaden-Konvention, Memory project_css_cascade_mobile).
   ============================================================ */
.cal-layout { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 14px; align-items: start; }
.cal-side-panel { position: sticky; top: 14px; align-self: start; }
.cal-side-panel__head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.cal-side-panel__title { margin: 0; font-size: 14px; font-weight: 600; color: var(--text-primary); }
.cal-side-panel__chev { display: none; color: var(--text-secondary); transition: transform var(--dur) var(--ease); }
.cal-side-panel__body { display: flex; flex-direction: column; gap: 16px; margin-top: 12px; }

.cal-note__label { display: flex; gap: 4px; font-size: 12px; color: var(--text-secondary); margin-bottom: 6px; }
.cal-note__status { color: var(--text-tertiary); }
.cal-note__status.is-err { color: var(--bad-strong); }
.cal-note__area {
  width: 100%; resize: vertical; min-height: 96px; font: inherit; line-height: 1.5;
  background: var(--surface-inset); color: var(--text);
  border: 1px solid var(--border); border-radius: 10px; padding: 10px 12px;
}
.cal-note__area:focus { outline: none; border-color: var(--accent-line); }

.cal-todos__add { display: flex; gap: 6px; margin-bottom: 10px; }
.cal-todos__input {
  flex: 1; min-width: 0; min-height: 40px; font: inherit;
  background: var(--surface-inset); color: var(--text);
  border: 1px solid var(--border); border-radius: 10px; padding: 0 12px;
}
.cal-todos__input:focus { outline: none; border-color: var(--accent-line); }
.cal-todos__add-btn {
  flex: 0 0 40px; min-height: 40px; display: flex; align-items: center; justify-content: center;
  background: var(--accent-soft); color: var(--accent);
  border: 1px solid var(--accent-line); border-radius: 10px; cursor: pointer;
  transition: background var(--dur) var(--ease);
}
.cal-todos__add-btn:hover { background: var(--accent-line); }
.cal-todos__add-btn svg { width: 18px; height: 18px; }
.cal-todos__done { margin-top: 10px; }
.cal-todos__done-sum { cursor: pointer; font-size: 12px; color: var(--text-secondary); padding: 4px 0; list-style: none; }
.cal-todos__done-sum::-webkit-details-marker { display: none; }
.cal-todos__done[open] .cal-todos__done-sum { margin-bottom: 8px; }

@media (max-width: 720px) {
  .cal-layout { grid-template-columns: 1fr; }
  .cal-side-panel { position: static; }
  .cal-side-panel__head { cursor: pointer; min-height: 44px; }
  .cal-side-panel__chev { display: inline-flex; }
  .cal-side-panel:not(.is-open) .cal-side-panel__body { display: none; }
  .cal-side-panel.is-open .cal-side-panel__chev { transform: rotate(180deg); }
}
@media (max-width: 1024px), (pointer: coarse) {
  .cal-todos__input, .cal-todos__add-btn { min-height: 44px; }
}

/* ============================================================
   Iter 10 Etappe 26: Setter-Briefing-Drawer
   ============================================================ */
.briefing-overlay {
  position: fixed; inset: 0; z-index: 100;
  background: rgba(0, 0, 0, .55);
  display: flex; justify-content: flex-end;
  animation: briefing-fade .15s ease;
}
@keyframes briefing-fade { from { background: rgba(0,0,0,0); } to { background: rgba(0,0,0,.55); } }
.briefing-drawer {
  width: min(600px, 100%);
  height: 100%;
  background: var(--surface-1);
  border-left: 1px solid var(--border);
  display: grid;
  grid-template-rows: auto 1fr auto;
  animation: briefing-slide .2s ease;
}
@keyframes briefing-slide { from { transform: translateX(40px); opacity: .6; } to { transform: translateX(0); opacity: 1; } }
.briefing-drawer__head {
  display: flex; justify-content: space-between; align-items: flex-start;
  padding: 20px 22px 16px;
  border-bottom: 1px solid var(--border);
  gap: 14px;
}
.briefing-drawer__head-text h2 { margin: 0; font-size: 20px; font-weight: 650; letter-spacing: -.01em; }
.briefing-drawer__meta { margin: 8px 0 0; font-size: 13px; color: var(--text-secondary); }
.briefing-drawer__meta strong { color: var(--text); }
.briefing-drawer__body {
  overflow-y: auto;
  padding: 18px 22px 24px;
  display: grid; gap: 22px;
}
.briefing-drawer__actions {
  display: flex; gap: 10px; justify-content: flex-end; flex-wrap: wrap;
  padding: 14px 22px;
  border-top: 1px solid var(--border);
  background: var(--surface-1);
}
.briefing-drawer__actions .primary-btn,
.briefing-drawer__actions .ghost-btn { min-height: 48px; padding: 0 22px; }
.briefing-actions__hint { color: var(--text-secondary); font-size: 13px; align-self: center; }

.briefing-section h3 {
  margin: 0 0 10px;
  font-size: 13px; text-transform: uppercase; letter-spacing: .1em;
  color: var(--text-secondary);
}
.briefing-grid {
  display: grid; gap: 8px;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}
.briefing-field {
  background: var(--surface-2);
  border: 1px solid var(--border); border-radius: 10px;
  padding: 10px 12px;
  display: grid; gap: 2px;
}
.briefing-field span {
  font-size: 11px; text-transform: uppercase; letter-spacing: .08em;
  color: var(--text-secondary);
}
.briefing-field strong { font-weight: 500; color: var(--text); font-size: 14px; word-break: break-word; }
.briefing-field strong a { color: var(--accent); }
.briefing-note {
  margin-top: 12px;
  padding: 12px 14px;
  background: rgba(var(--accent-rgb), .08);
  box-shadow: inset 2.5px 0 0 var(--accent);
  border-radius: 8px;
}
.briefing-note strong {
  display: block; margin-bottom: 6px;
  font-size: 12px; text-transform: uppercase; letter-spacing: .08em;
  color: var(--text-secondary);
}
.briefing-note p { margin: 0; color: var(--text); white-space: pre-wrap; }
.briefing-stats {
  display: flex; gap: 10px; flex-wrap: wrap;
}
.briefing-stat {
  background: var(--surface-2);
  border: 1px solid var(--border); border-radius: 10px;
  padding: 8px 14px;
  display: grid; gap: 2px; min-width: 120px;
}
.briefing-stat span {
  font-size: 11px; text-transform: uppercase; letter-spacing: .08em;
  color: var(--text-secondary);
}
.briefing-stat strong { font-size: 18px; }

@media (max-width: 720px) {
  .briefing-drawer { width: 100%; border-left: 0; }
  .briefing-drawer__head { padding: 16px; }
  .briefing-drawer__body { padding: 14px 16px 20px; }
  .briefing-drawer__actions { padding: 12px 16px; }
  .briefing-drawer__actions .primary-btn,
  .briefing-drawer__actions .ghost-btn { flex: 1 1 auto; min-height: 52px; font-size: 16px; }
  .briefing-grid { grid-template-columns: 1fr; }
  .briefing-stats { gap: 8px; }
  .briefing-stat { flex: 1 1 calc(50% - 8px); min-width: 0; }
}

/* ============================================================
   Iter 10 Etappe 25: Setter-Dashboard
   ============================================================ */
.setter-filter .filters-toolbar {
  display: flex; gap: 16px; align-items: end; flex-wrap: wrap;
}
.setter-kpis {
  display: flex; gap: 8px; flex-wrap: wrap; flex: 1 1 auto;
  justify-content: flex-end;
}
/* Iter 27 Welle E: Sektionen sind echte .panel (Markup manager-setter.js) —
   hier nur Abstand + Kopf-Typo (15/600); «pending» = Inset-Warn-Bar + Tint
   statt farbiger Vollborder (DESIGN.md Kill-Liste). */
.setter-section { margin-top: 16px; }
.setter-section__head { margin-bottom: 10px; }
.setter-section__head h3 {
  margin: 0 0 4px 0; font-size: 15px; font-weight: 600; letter-spacing: -.005em;
  display: flex; align-items: center; gap: 7px;
}
.setter-section__head p { margin: 0; color: var(--text-secondary); font-size: 13px; }
.setter-section--pending { box-shadow: inset 2.5px 0 0 var(--medium), var(--shadow-sm); }
.setter-section--pending .setter-section__head h3 { color: var(--medium); }

.setter-appt {
  display: grid;
  grid-template-columns: 84px 1fr auto;
  gap: 14px;
  padding: 14px;
  background: var(--surface-2);
  border: 1px solid transparent;
  border-radius: 12px;
  margin-top: 10px;
}
.setter-appt--pending { box-shadow: inset 2.5px 0 0 var(--medium); }
.setter-appt__time {
  display: flex; flex-direction: column; gap: 4px;
  align-items: flex-start;
}
.setter-appt__time strong {
  font-size: 22px; line-height: 1; font-variant-numeric: tabular-nums;
}
.setter-appt__time span { font-size: 12px; color: var(--text-secondary); }
.setter-appt__body { min-width: 0; }
.setter-appt__head {
  display: flex; gap: 8px; align-items: center; flex-wrap: wrap;
}
.setter-appt__head h4 { margin: 0; font-size: 15px; font-weight: 600; letter-spacing: -.005em; }
.setter-appt__meta {
  display: flex; gap: 12px; flex-wrap: wrap; color: var(--text-secondary);
  font-size: 13px; margin-top: 6px;
}
.setter-appt__meta a { color: var(--text); }
.setter-appt__note {
  margin: 8px 0 0; padding: 8px 10px; background: rgba(var(--tint-rgb), .04);
  border-radius: 8px; color: var(--text); font-size: 13px;
}
.setter-appt__actions {
  display: flex; flex-direction: column; gap: 8px; justify-content: center;
  align-items: stretch;
}
.setter-appt__actions .primary-btn,
.setter-appt__actions .ghost-btn { min-height: 44px; padding: 0 14px; white-space: nowrap; }
.setter-day { margin-top: 12px; }
.setter-day__head {
  display: flex; justify-content: space-between; align-items: baseline;
  padding: 6px 0; border-bottom: 1px solid var(--border);
  font-size: 13px;
}
.setter-day__head span { color: var(--text-secondary); }

@media (max-width: 720px) {
  .setter-filter .filters-toolbar { flex-direction: column; align-items: stretch; }
  .setter-kpis { justify-content: flex-start; }
  .setter-section { padding: 14px; }
  .setter-appt {
    grid-template-columns: 1fr;
    gap: 8px; padding: 12px;
  }
  .setter-appt__time { flex-direction: row; align-items: baseline; }
  .setter-appt__time strong { font-size: 18px; }
  .setter-appt__actions {
    flex-direction: row; flex-wrap: wrap;
  }
  .setter-appt__actions .primary-btn,
  .setter-appt__actions .ghost-btn { flex: 1 1 auto; min-height: 48px; }
}

/* ============================================================
   Iter 10 Etappe 24: Outcome-Modal (Setter-Workflow)
   ============================================================ */
.modal--outcome { max-width: 560px; }
.modal__header-sub { margin: 4px 0 0; color: var(--text-secondary); font-size: 13px; }
.oc-form { display: grid; gap: 18px; padding-bottom: 80px; }
.oc-status { border: 0; padding: 0; margin: 0; }
.oc-status legend {
  font-size: 12px; text-transform: uppercase; letter-spacing: .08em;
  color: var(--text-secondary); margin-bottom: 8px; padding: 0;
}
.oc-status__grid {
  display: grid; gap: 8px;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
}
.oc-status__option {
  position: relative; display: grid; gap: 6px; padding: 12px 14px;
  border: 1px solid var(--border); border-radius: 12px; cursor: pointer;
  background: var(--surface-2); min-height: 64px;
  transition: border-color .15s ease, background .15s ease;
}
.oc-status__option:hover { border-color: var(--accent); }
.oc-status__option input[type="radio"] {
  position: absolute; top: 8px; right: 8px; width: 18px; height: 18px;
  accent-color: var(--accent);
}
.oc-status__option:has(input:checked) {
  border-color: var(--accent);
  background: rgba(var(--accent-rgb), .12);
}
.oc-status__pill { width: fit-content; }
.oc-status__sub { color: var(--text-secondary); font-size: 12px; }

.oc-conditional {
  border-top: 1px dashed var(--border); padding-top: 14px;
}
/* Iter 13 Etappe 3: Termin-Tap-Assessment (Verloren/Folge-Termin) */
.oc-assess { display: grid; gap: 12px; }
.oc-assess__hint { color: var(--text-secondary); font-size: 12px; margin: 0; }
#oc-assess-body { display: grid; gap: 16px; }
.oc-form .field { margin: 0; }
.oc-form input,
.oc-form select,
.oc-form textarea {
  width: 100%; min-height: 44px;
  background: var(--surface-inset); color: var(--text);
  border: 1px solid var(--border); border-radius: var(--radius-button);
  padding: 10px 12px; font: inherit;
}
.oc-form textarea { min-height: 110px; resize: vertical; }
.oc-actions {
  display: flex; gap: 8px; justify-content: flex-end; flex-wrap: wrap;
  position: sticky; bottom: 0;
  background: linear-gradient(to top, var(--surface) 70%, transparent);
  padding: 12px 0;
}
.oc-actions .ghost-btn,
.oc-actions .primary-btn { min-height: 48px; padding: 0 22px; }

@media (max-width: 720px) {
  .modal--outcome { max-width: 100%; height: 100vh; height: 100dvh; max-height: 100vh; max-height: 100dvh; border-radius: 0; }
  .oc-status__grid { grid-template-columns: 1fr 1fr; }
  .oc-actions { padding: 14px 0 max(24px, env(safe-area-inset-bottom)); }
  .oc-actions .ghost-btn,
  .oc-actions .primary-btn { flex: 1 1 auto; min-height: 52px; font-size: 16px; }
  .oc-form input,
  .oc-form select,
  .oc-form textarea { font-size: 16px; min-height: 48px; }
}

/* ============================================================
   Iter 10 Etappe 23: Edit-Diff (firm_edits in Lead-Verlauf-Tab)
   ============================================================ */
.activity-item--edit { background: rgba(var(--accent-rgb), .06); }
.edit-diff { display: inline-flex; gap: 6px; align-items: baseline; flex-wrap: wrap; }
.edit-diff__old {
  color: var(--text-secondary); text-decoration: line-through;
  max-width: 240px; overflow: hidden; text-overflow: ellipsis;
}
.edit-diff__arrow { color: var(--text-secondary); display: inline-flex; align-self: center; line-height: 0; }
.edit-diff__new {
  color: var(--accent); font-weight: 600;
  max-width: 240px; overflow: hidden; text-overflow: ellipsis;
}
.activity-item__reason {
  color: var(--text-secondary); font-style: italic; font-size: 12px;
  margin-left: auto;
}
@media (max-width: 720px) {
  .edit-diff__old, .edit-diff__new { max-width: 100%; }
  .activity-item__reason { margin-left: 0; width: 100%; }
}

/* ============================================================
   Iter 13 Etappe 7: Outcome-Roh-Feedbacks (Lead-Timeline)
   Score-frei — nur die angeklickten Labels, eingewebt in den Verlauf.
   ============================================================ */
/* Iter 27 Welle F: Akzent als Inset-Bar statt border-left (Kill-Liste) */
.activity-item--outcome {
  display: block;
  background: rgba(var(--accent-rgb), .06);
  box-shadow: inset 2.5px 0 0 var(--accent);
}
.outcome-block__head {
  display: flex; flex-wrap: wrap; gap: 10px; align-items: baseline;
  margin-bottom: 8px;
}
.outcome-block__ctx { color: var(--text-secondary); font-size: 12px; }
.outcome-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.outcome-chip {
  display: inline-flex; flex-direction: column; gap: 1px;
  padding: 4px 8px; border-radius: 8px;
  background: rgba(var(--tint-rgb), .04); border: 1px solid var(--border);
}
.outcome-chip__dim {
  font-size: 11px; letter-spacing: .04em; text-transform: uppercase;
  color: var(--text-secondary);
}
.outcome-chip__val { font-size: 13px; color: var(--text); font-weight: 600; }

/* Iter 15 E4c: Termin-Eintrag im Verlauf-Tab (lückenlose Chronologie).
   Iter 27 Welle F: Inset-Bar (Token) statt border-left mit Roh-rgba. */
.activity-item--appointment {
  background: rgba(96, 165, 250, .06);
  box-shadow: inset 2.5px 0 0 var(--info-muted);
}
.outcome-chip__note { font-size: 12px; color: var(--text-secondary); font-style: italic; }

/* =========================================================================
   Ziele / Soll-Ist (Iter 14 Etappe 2) — Editor + Dashboard-Panel
   ========================================================================= */
.month-nav { display: flex; align-items: center; gap: 8px; }
.goal-cards { display: flex; flex-direction: column; gap: 16px; margin-top: 16px; }
.goal-card__head { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.goal-card__head strong { font-size: 15px; font-weight: 600; letter-spacing: -.005em; }
/* Team-Karte: Inset-Accent-Bar statt cyaner Vollborder (DESIGN.md Kill-Liste) */
.goal-card--team { box-shadow: var(--shadow-sm); }
.goal-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.goal-metric { display: flex; flex-direction: column; gap: 4px; }
.goal-metric__label { font-size: .8rem; color: var(--text-secondary); }
.goal-metric input {
  min-height: 44px; width: 100%; padding: 8px 10px;
  background: var(--surface-inset); border: 1px solid var(--border);
  border-radius: var(--radius-button); color: var(--text-primary);
  font-size: 1rem; font-variant-numeric: tabular-nums; transition: border-color .15s ease;
}
.goal-metric input:focus-visible { outline: 2px solid var(--accent-hover); outline-offset: 1px; border-color: var(--accent-hover); }
.goal-metric input.is-saved { border-color: var(--high); }
.goal-metric__actual { font-size: .78rem; color: var(--text-secondary); font-variant-numeric: tabular-nums; }

/* Soll-Ist-Panel (Dashboard): Fortschrittsbalken pro Metrik */
.soll-ist-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 20px; }
.soll-ist { display: flex; flex-direction: column; gap: 6px; }
.soll-ist__top { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.soll-ist__label { color: var(--text-secondary); font-size: 13px; }
.soll-ist__nums { font-variant-numeric: tabular-nums; font-size: 13px; }
.soll-ist__nums strong { color: var(--text-primary); }
.soll-ist__bar { height: 8px; border-radius: 999px; background: var(--surface-3); overflow: hidden; }
.soll-ist__fill { height: 100%; border-radius: 999px; transition: width .3s ease; }
.soll-ist-block + .soll-ist-block { margin-top: 18px; }

/* Pipeline-Forecast (Iter 14 Etappe 3) */
.forecast { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 16px; }
.forecast__value { font-size: 26px; font-weight: 600; letter-spacing: -.015em; line-height: 1; color: var(--text-primary); font-variant-numeric: tabular-nums; }
.forecast__assume { color: var(--text-secondary); font-size: 13px; margin-top: 8px; }
.forecast__realized { text-align: right; }
.forecast__realized-label { display: block; color: var(--text-secondary); font-size: 12px; margin-bottom: 2px; }
.forecast__realized strong { font-size: 1.25rem; font-variant-numeric: tabular-nums; }

@media (max-width: 640px) {
  .goal-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .soll-ist-grid { grid-template-columns: 1fr; }
  .forecast { flex-direction: column; align-items: stretch; }
  .forecast__realized { text-align: left; }
}

/* Zeitraum-Trend (Iter 14 Etappe 4) */
.seg { display: inline-flex; gap: 2px; background: var(--surface-inset); border: 1px solid var(--border); border-radius: 9px; padding: 3px; }
.seg__btn { min-height: 30px; padding: 4px 13px; border: 0; background: transparent; color: var(--text-secondary); font-size: 12.5px; font-weight: 600; border-radius: 6px; cursor: pointer; transition: background var(--transition), color var(--transition); }
.seg__btn:hover { color: var(--text-primary); }
.seg__btn.is-active { background: var(--surface-3); color: var(--text-primary); box-shadow: inset 0 1px 0 rgba(255,255,255,.05), 0 1px 3px rgba(2,6,8,.3); }
@media (max-width: 1024px), (pointer: coarse) { .seg__btn { min-height: 44px; } }

.trend-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.trend-card { display: flex; flex-direction: column; gap: 4px; padding: 12px 18px; background: transparent; border: 0; border-left: 1px solid var(--border); border-radius: 0; }
.trend-card:first-child { border-left: 0; padding-left: 2px; }
.trend-card__label { color: var(--text-tertiary); text-transform: uppercase; letter-spacing: .07em; font-size: 11px; font-weight: 600; }
.trend-card__value { font-size: 20px; font-weight: 600; letter-spacing: -.01em; line-height: 1.15; font-variant-numeric: tabular-nums; color: var(--text-primary); }
.trend-card__delta { display: flex; align-items: center; gap: 4px; font-size: 12.5px; font-weight: 600; font-variant-numeric: tabular-nums; }
.trend-card__arrow { display: inline-flex; line-height: 0; }
.trend-card__spark { margin-top: 6px; }
.sparkline { display: block; width: 100%; height: 30px; overflow: visible; }

@media (max-width: 640px) {
  .trend-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Stalling-Sicht „Was bleibt liegen" (Iter 14 Etappe 5) */
.stalling-block + .stalling-block { margin-top: 18px; }
.stalling-row {
  display: flex; flex-direction: column; gap: 4px;
  width: 100%; min-height: 44px; margin-top: 8px;
  padding: 10px 14px; text-align: left; font: inherit; color: inherit; cursor: pointer;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-card);
  transition: border-color .15s, background .15s;
}
.stalling-row:hover { border-color: var(--accent); background: var(--surface-2); }
.stalling-row:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.stalling-row:disabled { opacity: .6; cursor: progress; }
.stalling-row__main { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.stalling-row__firm { font-size: 14px; font-weight: 600; }
.stalling-row__meta { display: flex; flex-wrap: wrap; gap: 6px; color: var(--text-secondary); font-size: 13px; }
.stalling-row__flag { color: var(--low); font-weight: 600; }
.stalling-empty { color: var(--text-secondary); font-size: 14px; margin: 6px 0 0; }
/* Iter 23 Cockpit-Reskin: SVG-Icons (statt Emoji ⏳📅) sauber inline, Rest-
   Zähler-Link in die Vollansicht, Zähler-Badge in der Gruppen-Überschrift. */
.stalling-row__ic { display: inline-flex; align-items: center; gap: 5px; }
.stalling-row__meta svg { width: 14px; height: 14px; flex: 0 0 auto; }
.appt-group-h__count {
  display: inline-block; margin-left: 6px; padding: 1px 8px;
  border-radius: 999px; background: rgba(var(--tint-rgb), .06);
  color: var(--text-secondary); font-size: 11px; font-weight: 700;
  font-variant-numeric: tabular-nums; vertical-align: middle;
}
.stalling-more {
  display: inline-flex; align-items: center; gap: 4px;
  margin-top: 10px; min-height: 44px; padding: 6px 2px;
  color: var(--accent-strong); font-size: 13px; font-weight: 600;
}
.stalling-more:hover { color: var(--accent-bright); }
/* Iter 25 W2: dezenter Queue-Hinweis in Termin-Gruppen (kein Sprung-Ziel).
   --text-secondary statt -tertiary: bei 13px hält nur -secondary WCAG-AA
   (−tertiary läge im Dark bei 3.79:1 = AA-Fail; Cockpit-Lehre Iter 23). */
.today-more { margin: 10px 2px 0; color: var(--text-secondary); font-size: 13px; }

/* =========================================================================
   Iter 15 Etappe 1 — Touch-Target-Konsolidierung (≥44px)
   Single source of truth. Schliesst verstreute Alt-Epochen-Lücken, in denen
   spätere Regeln den 44px-Floor unterliefen (per Baseline-Audit @390 belegt).
   Bewusst klein (dichte Desktop-Toolbars, Maus-Kontext): .ghost-btn--xs,
   .icon-btn--sm, .qa-btn/.time-pill/.cal-toggle (≤720px bereits 44px) —
   deren Tablet-Touch (721–1024px) folgt in Etappe 3 (Tablet-Layout).
   ========================================================================= */
input[type="search"] { min-height: 44px; }   /* .field-Regel listet kein type=search → war 30px */
.user-pill--button { min-height: 44px; }      /* Profil-Button Topbar — war 39px */
a.logo-wrap { min-height: 44px; }             /* Logo-Home-Link Sidebar — SVG-Box war 27px */
.month-nav .ghost-btn { min-width: 44px; min-height: 44px; justify-content: center; }  /* Ziele ‹ › — Breite war 37px */

/* =========================================================================
   Iter 15 Etappe 3 — Tablet-Touch-Floor (721–1024px) + alle Touch-Geräte.
   Die E1/E2-Fixes sitzen in @media(max-width:720px) und greifen auf Tablets
   (768/1024px) NICHT → dort fielen time-pill(38)/qa-btn(32)/cal-toggle(40)/
   ghost-btn--xs(34)/user-tab(26)/icon-btn--sm(32) unter 44px (holistischer
   Audit @768+@1024 belegt). Nur Mindestmaße + Zentrierung, kein Layout-
   Eingriff: qa-btn behält sein 720px-Flex (flex/padding gewinnen, display nicht
   in Konflikt). `, (pointer:coarse)` deckt echte Touch-Geräte jeder Breite ab;
   Desktop-Maus >1024px bleibt bewusst dicht.
   Bewusste Ausnahmen (Bruch-Risiko > 4px-Gewinn): .cal-event (40px; im Monats-
   Kalender absolut positioniert → 44px ließe Events überlappen = Render-Bug),
   .firm-link (30px; Inline-Link in dichten Listen/Tabellen → bläht Zeilen).
   ========================================================================= */
@media (max-width: 1024px), (pointer: coarse) {
  .time-pill, .cal-toggle, .ghost-btn--xs, .user-tab, .qa-btn {
    min-height: 44px; display: inline-flex; align-items: center; justify-content: center;
  }
  .icon-btn--sm { min-width: 44px; min-height: 44px; }  /* schon grid-zentriert via .icon-btn */
  .check-row label { min-height: 44px; }                /* assign-modal Prio-Filter (Hoch/Mittel/Niedrig) — war 24px */
  /* E6: Die firm-link-Ausnahme (30px, dichte Listen) gilt NICHT für den
     alleinstehenden Goals-Empty-State-CTA — dort ist 44px risikofrei. */
  .firm-link--cta { min-height: 44px; display: inline-flex; align-items: center; }
}

/* =========================================================================
   Iter 17 Etappe 2 — Skeleton-Loading (Daily-Driver-Polituren).
   Drei Modi, gemeinsame Pulse-Animation. Wird beim ersten Render gesetzt,
   bevor die echten Daten ankommen (kein Layout-Shift, weil die Skeleton-
   Hoehen den realen Komponenten nahe sind). Animation wird durch den
   E1-prefers-reduced-motion-Block unten auf 0.01ms gedrueckt (statischer
   Grauschimmer ohne Pulse) — wichtig fuer vestibulaere Empfindlichkeit.
   ========================================================================= */
.skeleton, .skeleton-line, .skeleton-card, .skeleton-row td.skeleton-cell {
  background: linear-gradient(90deg,
    rgba(var(--tint-rgb), .04) 0%,
    rgba(var(--tint-rgb), .10) 50%,
    rgba(var(--tint-rgb), .04) 100%);
  background-size: 200% 100%;
  animation: skeleton-pulse 1.5s ease-in-out infinite;
  border-radius: 6px;
}
.skeleton-line { height: 12px; margin: 10px 0; }
.skeleton-line--lg { height: 22px; }
.skeleton-line--sm { height: 8px; }
.skeleton-line--w50 { width: 50%; }
.skeleton-line--w70 { width: 70%; }
.skeleton-line--w85 { width: 85%; }
.skeleton-card { height: 64px; margin: 8px 0; border-radius: 10px; }  /* Iter 27: Lead-Zeilen-Dichte (~60px) statt Alt-Karten-92px */
.skeleton-panel { padding: 4px 2px; }
.skeleton-row td.skeleton-cell { height: 18px; padding: 0; border-radius: 4px; }
@keyframes skeleton-pulse {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* =========================================================================
   Iter 18 Etappe 2 — Termin-Action-Buttons (Maps + iCal).
   Mini-Buttons in Termin-Listen / Kalender-Items / Briefing-Headers.
   Touch-Floor 32px Desktop / 44px Mobile (Memory project_tablet_touch_breakpoint).
   ========================================================================= */
.appt-link-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 32px;
  min-height: 32px;
  padding: 0 6px;
  border: 1px solid var(--border);
  background: transparent;
  border-radius: var(--radius-button);
  cursor: pointer;
  font-size: 14px;
  line-height: 1;
  text-decoration: none;
  color: var(--text);
  transition: background-color 0.15s ease, border-color 0.15s ease;
}
.appt-link-btn:hover { background: rgba(var(--tint-rgb), 0.05); border-color: var(--line-strong); }
.appt-link-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.appt-link-btn:disabled { opacity: 0.5; cursor: not-allowed; }
.appt-link-btns { display: inline-flex; gap: 6px; align-items: center; }
.briefing-drawer__head-actions { display: inline-flex; gap: 6px; align-items: center; margin-left: auto; }
@media (max-width: 1024px), (pointer: coarse) {
  .appt-link-btn { min-width: 44px; min-height: 44px; font-size: 16px; }
}

/* =========================================================================
   Iter 19 Etappe 2 — Einwand-Köcher (Caller-Tab im firm-modal).
   Kompakte tappbare Label-Karten; Tap markiert + klappt die Antwort gross auf.
   Touch-Floor 44px ab Tablet/Coarse (Memory project_tablet_touch_breakpoint).
   ========================================================================= */
.objection-hint {
  color: var(--text-secondary);
  font-size: 13px;
  line-height: 1.5;
  margin: 0 0 12px;
}
.objection-cards { display: flex; flex-direction: column; gap: 8px; }
/* Iter 27 Welle F: Zeilen-Idiom (Fläche statt Rahmen); markiert = Accent-Tint
   + Inset-Bar links (Vollborder-Selektion gefallen, DESIGN.md Kill-Liste). */
.objection-card {
  display: flex;
  flex-direction: column;
  gap: 6px;
  width: 100%;
  text-align: left;
  padding: 12px 14px;
  border: 1px solid transparent;
  border-radius: 10px;
  background: var(--surface-2);
  color: var(--text);
  font: inherit;
  cursor: pointer;
  transition: background var(--transition), box-shadow var(--transition);
}
.objection-card:hover { background: var(--surface-3); }
.objection-card:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.objection-card--marked {
  background: linear-gradient(180deg, rgba(var(--accent-rgb), .09), rgba(var(--accent-rgb), .05));
  box-shadow: inset 2.5px 0 0 var(--accent);
}
/* Fremdes Lead (Manager/Admin-Ansicht): nicht tappbar — kein Pointer/Hover-Reiz. */
.objection-card--readonly { cursor: default; }
.objection-card--readonly:hover { background: var(--surface-2); }
.objection-card--readonly.objection-card--marked:hover {
  background: linear-gradient(180deg, rgba(var(--accent-rgb), .09), rgba(var(--accent-rgb), .05));
}
.objection-card__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.objection-card__label { font-size: 15px; font-weight: 600; line-height: 1.35; min-width: 0; overflow-wrap: anywhere; }
.objection-badge {
  flex: none;
  font-size: 12px;
  font-weight: 600;
  color: var(--accent);
  white-space: nowrap;
}
.objection-response {
  display: none;
  font-size: 15px;
  line-height: 1.6;
  padding: 10px 12px;
  box-shadow: inset 2.5px 0 0 var(--accent);
  border-radius: 8px;
  background: rgba(var(--accent-rgb), 0.10);
  color: var(--text);
  white-space: pre-wrap;       /* mehrzeilige Admin-Antworten (textarea) behalten Absätze */
  overflow-wrap: anywhere;     /* lange URLs/Wörter sprengen das Modal nicht */
}
.objection-response.is-open { display: block; }
@media (max-width: 1024px), (pointer: coarse) {
  .objection-card { padding: 14px; }
  .objection-card__label { font-size: 16px; }
  .objection-response { font-size: 16px; }
}

/* Iter 19 E3 — Manager-Heatmap (user-detail-modal) + Lead-Drill-Down-Modal.
   Bucket-Farben spiegeln die Konversion: termin=grün, offen=grau, verloren=rot. */
.objection-heatmap { display: flex; flex-direction: column; gap: 8px; }
.objection-heat-row {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
  text-align: left;
  padding: 12px 14px;
  border: 0;
  border-radius: 10px;
  background: rgba(var(--tint-rgb), .025);
  color: var(--text);
  font: inherit;
  cursor: pointer;
  transition: background-color var(--transition);
}
.objection-heat-row:hover { border-color: var(--text-secondary); background: rgba(var(--tint-rgb), 0.04); }
.objection-heat-row:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.objection-heat-row__top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
}
.objection-heat-row__label { font-size: 15px; font-weight: 600; line-height: 1.35; min-width: 0; overflow-wrap: anywhere; }
.objection-heat-row__count { flex: none; font-size: 13px; font-weight: 600; color: var(--text-secondary); white-space: nowrap; }
.objection-heat-bar {
  display: flex;
  height: 8px;
  border-radius: 4px;
  overflow: hidden;
  background: var(--surface-2);
}
.objection-heat-bar__seg { height: 100%; }
.objection-heat-bar__seg.is-termin  { background: var(--high); }
.objection-heat-bar__seg.is-neutral { background: var(--text-secondary); }
.objection-heat-bar__seg.is-lost    { background: var(--low); }
.objection-heat-row__legend { display: flex; flex-wrap: wrap; gap: 6px 12px; font-size: 12px; }
.objection-bucket { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; font-weight: 600; white-space: nowrap; }
.objection-bucket.is-termin  { color: var(--high); }
.objection-bucket.is-neutral { color: var(--text-secondary); }
.objection-bucket.is-lost    { color: var(--low); }

/* Lead-Drill-Down-Liste (objection-lead-list-modal) */
.objection-lead-list { display: flex; flex-direction: column; gap: 6px; }
.objection-lead-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  text-align: left;
  padding: 12px 14px;
  border: 1px solid transparent;
  border-radius: 10px;
  background: var(--surface-2);
  color: var(--text);
  font: inherit;
  cursor: pointer;
  transition: background var(--transition);
}
.objection-lead-row:hover { background: var(--surface-3); }
.objection-lead-row:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.objection-lead-row__main { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.objection-lead-row__main strong { overflow-wrap: anywhere; }
.objection-lead-row__meta { font-size: 12px; color: var(--text-secondary); }
.objection-lead-row__tags { display: flex; align-items: center; gap: 8px; flex: none; flex-wrap: wrap; justify-content: flex-end; }
@media (max-width: 1024px), (pointer: coarse) {
  .objection-heat-row, .objection-lead-row { min-height: 44px; padding: 14px; }
  .objection-heat-row__label { font-size: 16px; }
}

/* Standortansicht (Iter 21 E1) — sl-* Namespace.
   Modal-Teile nutzen bestehende .modal / .modal__header / .modal__body /
   .modal-section / .modal-grid / .info-card / .panel__eyebrow / .icon-btn
   Klassen aus style.css (NICHT neu gestylt hier). .view-toggle ebenfalls
   bestehend (siehe style.css ~L832, genutzt in caller-leads.js) — sl-seg ist
   nur ein schlanker Wrapper mit Abstand.
   Platzierung: VOR dem prefers-reduced-motion-Schlussblock (der muss laut
   eigenem Kommentar letzter Block bleiben), NICHT dahinter anhaengen. */

/* .admin-page / .admin-page__head / .admin-page__hint sind bereits als Klassen
   in admin-objections.js im Einsatz, hatten dort aber NIE zugehoeriges CSS
   (verifiziert: 0 Treffer fuer "admin-page" in style.css vor diesem Patch —
   bestehende Codebase-Luecke, nicht durch E1 verursacht). Minimal-Grundgeruest
   hier ergaenzt, damit BEIDE Views (Einwand-Koecher + Standorte) endlich einen
   layouteten Seitenkopf bekommen — kein neues Farb-Token, nur Layout. */
.admin-page { padding: 0; }
.admin-page__head { margin-bottom: 18px; }
/* Iter 27: Seitentitel-Skala aus DESIGN.md §2 (20/650, -.01em) statt 1.6rem-Geschrei */
.admin-page__head h1 { margin: 0 0 4px; font-size: 20px; font-weight: 650; letter-spacing: -.01em; color: var(--text-primary); }
.admin-page__hint { margin: 0; color: var(--text-secondary); font-size: 13px; line-height: 1.5; max-width: 780px; }

/* Iter 27 Welle D: Die Icon-Quadrat-KPI-Karten (.sl-kpis/.sl-kpi) sind abgebaut —
   alle Verkaufs-Views rendern den Foundation-.stat-strip (EIN Panel, Hairlines). */

/* Filterbar */
.sl-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: end;
  margin-bottom: 14px;
}
.sl-filters .field { min-width: 150px; }
/* Full-Width-Kanon: Suchfeld waechst mit, aber kippt nicht ins Absurde
   (Review-Fund 2026-07-05: 2700px-Suchfeld auf 3440er neben 4 schmalen Selects). */
.sl-filters .field--wide { min-width: min(320px, 100%); flex: 1 1 260px; max-width: 720px; }
/* IDs (LOC-0075) brechen nie um (Review-Fund: zweizeilig bei 768). */
.sl-table td[data-label="ID"] { white-space: nowrap; }

/* Segment-Umschalter Wrapper */
.sl-seg { margin-bottom: 4px; }

/* Ergebnis-Zaehler */
.sl-count {
  margin: 0 0 10px;
  color: var(--text-secondary);
  font-size: 13px;
  font-variant-numeric: tabular-nums lining-nums;
}

/* Tabelle — erbt .team-table Grundstil (Border/Header), sl-table ergaenzt
   Klick-Zeilen. */
.sl-table tr[data-id],
.sl-table tr[data-ort],
.sl-table tr[data-month],
.sl-table tr[data-expense] {
  cursor: pointer;
  transition: background var(--transition);
}
.sl-table tr[data-id]:hover td,
.sl-table tr[data-ort]:hover td,
.sl-table tr[data-month]:hover td,
.sl-table tr[data-expense]:hover td,
.sl-table tr[data-id]:focus-visible td,
.sl-table tr[data-ort]:focus-visible td,
.sl-table tr[data-month]:focus-visible td,
.sl-table tr[data-expense]:focus-visible td {
  background: rgba(var(--accent-rgb),.08);
}
.sl-table tr[data-id]:focus-visible,
.sl-table tr[data-ort]:focus-visible,
.sl-table tr[data-month]:focus-visible,
.sl-table tr[data-expense]:focus-visible {
  outline: 2px solid var(--accent-hover);
  outline-offset: -2px;
}

/* Badges — sl-badge folgt dem Foundation-Badge-Vokabular (Iter 27):
   Alpha-Fläche + Strong-Text, OHNE Border (DESIGN.md §3/§4). */
.sl-badge {
  display: inline-flex;
  align-items: center;
  padding: 3px 8px;
  border-radius: var(--radius-badge);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: .01em;
  border: 0;
  white-space: nowrap;
}
.sl-badge--aktiv { background: rgba(34,197,94,.13); color: var(--good-strong); }
.sl-badge--pipeline { background: rgba(245,158,11,.13); color: var(--warn-strong); }
.sl-badge--storniert { background: rgba(239,68,68,.13); color: var(--bad-strong); }

/* =========================================================================
   Mobile (Projekt-Cascade-Regel: eigener Block NACH den Basis-Regeln oben,
   siehe Memory project_css_cascade_mobile).
   ========================================================================= */
@media (max-width: 720px) {
  /* Iter 27 Welle D: 2-spaltiges Filter-Grid (Welle-B-Muster) statt Spalten-Flex.
     Wurzel-Fix: flex-direction:column machte die flex-basis 260px der .field--wide
     zur HÖHE → ~260px Leerraum zwischen Suche und Kanton (iPhone-Beleg). */
  .sl-filters { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; align-items: end; }
  .sl-filters .field,
  .sl-filters .field--wide { min-width: 0; width: 100%; }
  .sl-filters .field--wide { grid-column: 1 / -1; }

  /* Tabelle -> gestapelte Zeilenblöcke. min-width:0 zwingend: .sl-table erbt
     min-width:640px von .team-table -> ohne Reset scrollt die Karten-Liste
     bei 375px horizontal (Review-Finding E1, Playwright-belegt).
     Iter 27: Hairline-Blöcke statt Box-in-Box-Karten (DESIGN.md §1 — Zeilen
     mit Separatoren IN der Liste, kein Rahmen um jeden Datensatz). */
  .sl-table thead { display: none; }
  .sl-table { min-width: 0; }
  .sl-table, .sl-table tbody, .sl-table tr, .sl-table td { display: block; width: 100%; }
  .sl-table tr {
    border: 0;
    border-bottom: 1px solid var(--border);
    border-radius: 0;
    margin: 0;
    padding: 6px 0;
    background: transparent;
  }
  .sl-table tr:last-child { border-bottom: 0; }
  .sl-table td {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    padding: 7px 14px;
    border-bottom: 0;
    text-align: right;
  }
  .sl-table td::before {
    content: attr(data-label);
    color: var(--text-tertiary);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .06em;
    font-weight: 600;
    text-align: left;
  }
}

/* Touch-Floor (Tablet-Bruchzone + coarse Pointer, siehe Memory
   project_tablet_touch_breakpoint — @720px allein reicht nicht). */
@media (max-width: 1024px), (pointer: coarse) {
  .sl-table tr[data-id],
  .sl-table tr[data-ort],
  .sl-table tr[data-month],
  .sl-table tr[data-expense] {
    min-height: 44px;
  }
  .sl-filters select,
  .sl-filters .search-input,
  .sl-filters input {
    min-height: 44px;
  }
}

/* Standort-Admin-Edit (Iter 21 E1b) — Zusatz zu sales-locations.css.
   Nutzt ansonsten ausschliesslich bestehende Klassen: .field / .primary-btn /
   .ghost-btn / .info-card / .modal-grid / .modal-actions / .modal-section
   (alle bereits in style.css definiert, siehe user-modal.js-Vorbild).
   Nur 2 neue Klassen noetig: sl-edit-grid (Formular-Layout) + sl-history
   (Verlauf-Liste). Einfuegen: an sales-locations.css anhaengen bzw. gemeinsam
   ans Ende von style.css. */

.sl-edit-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 14px;
  align-items: start;
}
.sl-edit-grid .field--wide { grid-column: 1 / -1; }
.sl-edit-grid .modal-actions { grid-column: 1 / -1; }
.sl-edit-grid textarea { min-height: 90px; resize: vertical; }

/* Verlauf-Liste (Aenderungen) — wiederverwendet .info-card-Optik, aber als
   Stapel statt Grid (chronologische Liste ist besser lesbar einspaltig). */
.sl-history {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.sl-history .info-card { padding: 10px 12px; }

/* Touch-Floor fuer Edit-Formular (Memory project_tablet_touch_breakpoint) */
@media (max-width: 1024px), (pointer: coarse) {
  .sl-edit-grid input,
  .sl-edit-grid select,
  .sl-edit-grid .primary-btn,
  .sl-edit-grid .ghost-btn {
    min-height: 44px;
  }
}

/* Offertenrechner (Iter 21 E2) — so-* Namespace.
   Baut auf sl-*-Basis (Badges/KPIs/Tabellen) + bestehenden Klassen auf
   (.panel/.field/.view-toggle/.info-card). Eigene @media-Blöcke NACH den
   Basis-Regeln (Memory project_css_cascade_mobile), Touch-Floor über
   (max-width:1024px),(pointer:coarse) (Memory project_tablet_touch_breakpoint).
   Platzierung: VOR dem prefers-reduced-motion-Schlussblock. */

.so-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin: 14px 0;
}
/* Iter 27: Badge ohne Border (Foundation-Vokabular) */
.so-badge--gesendet {
  background: rgba(56, 139, 253, 0.15);
  color: var(--info-strong);
  border: 0;
}

/* Dokument-View: der Editor deckelt sich selbst (Lesbarkeit der Formulare) —
   normales Block-Element, kein Grid-Item ⇒ margin:auto zentriert klassisch.
   Arbeitsflächen (Listen/Tabellen/Cockpit) bleiben full-width (DESIGN.md §7). */
.so-editor { max-width: 1560px; margin-inline: auto; }

.so-editor .so-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 14px;
  flex-wrap: wrap;
}
.so-editor h1 { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
/* Zurück-Link: SVG-Chevron statt Unicode-Pfeil (Iter 27, Kill-Liste) */
.so-back {
  display: inline-flex; align-items: center; gap: 3px;
  color: var(--text-secondary); text-decoration: none;
  font-size: 12.5px; font-weight: 500; margin-bottom: 2px;
}
.so-back::before {
  content: ""; width: 13px; height: 13px; flex: none;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238a9ba3' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'><path d='m15 18-6-6 6-6'/></svg>") center / contain no-repeat;
}
.so-back:hover { color: var(--text-primary); }
.so-actions { display: flex; gap: 10px; flex-wrap: wrap; }
/* Iter 37 (F3): der «Senden»-Grund als sichtbarer Hinweis bricht auf eigene Zeile um. */
.so-actions .so-hint { flex-basis: 100%; margin: 2px 0 0; }
/* Iter 27: Danger-Ghost analog Foundation .ghost-btn--danger (kein Vollrot-Rahmen) */
.so-danger { color: var(--bad-strong); border-color: rgba(242, 84, 91, .3); }
.so-danger:hover { background: rgba(242, 84, 91, .10); border-color: var(--bad-strong); }
/* Iter 27: Status-Hinweis als ruhiger Well mit Info-Akzentbalken (inset, kein Rahmen) */
.so-frozen-hint {
  margin: 0 0 14px;
  padding: 10px 14px;
  background: var(--surface-inset);
  box-shadow: inset 2.5px 0 0 var(--info-muted);
  border: 0;
  border-radius: 8px;
  color: var(--text-secondary);
}

.so-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 14px;
  align-items: start;
}
.so-panel h3 { margin: 0 0 12px; }
.so-panel--wide { grid-column: 1 / -1; }

.so-fields {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 12px;
  align-items: start;
}
.so-fields .field--wide { grid-column: 1 / -1; }
.so-inline { display: flex; gap: 8px; align-items: center; }
.so-inline select { flex: 1; min-width: 0; }
.so-hint { color: var(--text-secondary); font-size: 12px; }
.so-toggle { flex-direction: row; align-items: center; justify-content: space-between; gap: 10px; }
.so-toggle input[type="checkbox"] { width: 20px; height: 20px; }
.so-newcustomer {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--border);
}
.so-newcustomer h4 { margin: 0 0 10px; }

.so-presets { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; }
.so-preset { font-size: 13px; }

.so-loclist { margin-top: 12px; }
.so-loclist summary {
  cursor: pointer;
  color: var(--text-secondary);
  padding: 8px 0;
  list-style: none;
  display: flex; align-items: center; gap: 6px;
}
.so-loclist summary::-webkit-details-marker { display: none; }
/* Iter 27: EIN Chevron-Idiom (SVG + Rotation) für alle Aufklapper der Welle */
.so-loclist summary::before {
  content: ""; width: 14px; height: 14px; flex: none;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238a9ba3' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='m9 6 6 6-6 6'/></svg>") center / contain no-repeat;
  transition: transform var(--dur-fast) var(--ease);
}
.so-loclist[open] > summary::before { transform: rotate(90deg); }
.so-loclist__rows {
  max-height: 320px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 2px;
  background: var(--surface-inset);   /* Iter 27: Well statt Rahmen */
  border: 0;
  border-radius: 8px;
  padding: 6px;
}
.so-locrow {
  display: flex;
  gap: 10px;
  align-items: center;
  padding: 6px 8px;
  border-radius: 6px;
  font-size: 13px;
}
.so-locrow:hover { background: rgba(var(--tint-rgb), 0.04); }
.so-locrow input[type="checkbox"] { width: 18px; height: 18px; flex-shrink: 0; }

/* §16 Individuelle Standort-Auswahl (Iter 34) */
.so2-individual { margin-top: 4px; display: flex; flex-direction: column; gap: 8px; }
.so2-indivsearch { max-width: 420px; margin-bottom: 4px; }
.so2-indivresults {
  max-height: 260px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 2px;
  background: var(--surface-inset);
  border-radius: 8px;
  padding: 6px;
  overscroll-behavior: contain;
}
.so2-indivadd {
  display: flex;
  gap: 10px;
  align-items: center;
  padding: 7px 8px;
  border: 0;
  background: none;
  border-radius: 6px;
  font-size: 13px;
  color: var(--text-primary);
  text-align: left;
  cursor: pointer;
  width: 100%;
}
.so2-indivadd:hover { background: rgba(var(--tint-rgb), 0.06); }
.so2-indivadd__plus {
  flex-shrink: 0;
  width: 20px; height: 20px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 5px;
  background: rgba(var(--tint-rgb), 0.14);
  color: var(--accent-hover);
  font-weight: 600; line-height: 1;
}
.so-loclist--chosen { margin-top: 12px; }
.so-loclist__head { font-size: 12.5px; color: var(--text-secondary); margin: 0 0 6px; }
.so-locrow--chosen { justify-content: space-between; }
.so-locrm {
  flex-shrink: 0;
  width: 26px; height: 26px;
  border: 0; border-radius: 6px;
  background: none; color: var(--text-tertiary);
  font-size: 18px; line-height: 1; cursor: pointer;
}
.so-locrm:hover { background: rgba(var(--danger-rgb, 229, 72, 77), 0.14); color: var(--danger, #e5484d); }

.so-resultbar {
  display: flex;
  gap: 16px;
  align-items: center;
  flex-wrap: wrap;
  margin-bottom: 12px;
  color: var(--text-secondary);
}
.so-resultbar strong { color: var(--text-primary); }
.so-posmode { margin-left: auto; }

.so-postable .so-price-input { width: 110px; text-align: right; }
.so-freecell {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.so-freecell input[type="checkbox"] { width: 18px; height: 18px; }
.so-row--free td { opacity: 0.85; }
.so-strike { text-decoration: line-through; color: var(--text-secondary); }
.so-reset { margin-top: 10px; font-size: 13px; }

.so-sums { max-width: 420px; }
.so-sumrow {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 6px 0;
  border-bottom: 1px solid var(--border);
}
.so-sumrow--total {
  border-bottom: none;
  border-top: 1px solid var(--line-strong);   /* Iter 27: Hairline-strong statt 2px-Balken */
  margin-top: 4px;
  padding-top: 10px;
  font-size: 17px;
}
.so-sumrow--total strong { font-variant-numeric: tabular-nums lining-nums; }
.so-ots { margin-top: 18px; }
.so-ots h4 { margin: 0 0 10px; }
.so-ots-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 12px;
}
.so-warnings { margin-top: 14px; }
.so-warnings h4 { margin: 0 0 8px; }
/* Iter 27: Warnungen als Alpha-Fläche + Strong-Text, ohne Border (Badge-Idiom) */
.so-warning { margin: 4px 0; padding: 8px 12px; border-radius: 6px; font-size: 13px; border: 0; }
.so-warning--warnung { background: rgba(245, 184, 61, 0.12); color: var(--warn-strong); }
.so-warning--kritisch { background: rgba(242, 84, 91, 0.12); color: var(--bad-strong); }

/* Kunden-View (Iter 21 E3): klickbare Offerten-Karten im Kunden-Modal.
   E7: Karten tragen direkte Aktionen (Angenommen / Rechnung erstellen /
   Dokument). */
.scu-offer { display: block; text-decoration: none; color: inherit; }
.scu-offer:hover { background: var(--surface-3); }   /* Iter 27: Hover-Fläche statt Accent-Vollborder */
.scu-offer-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
}
.scu-offer-actions .primary-btn,
.scu-offer-actions .ghost-btn { min-height: 44px; }

/* E7: Zeilen-Aktionen der Offerten-Liste + Rechnungs-Toolbar */
.so-row-actions { white-space: nowrap; }
.so-row-actions .primary-btn,
.so-row-actions .ghost-btn {
  min-height: 44px;
  padding: 8px 12px;
  margin-right: 6px;
  font-size: 0.85rem;
}
.si-toolbar-actions { display: flex; gap: 10px; flex-wrap: wrap; }

/* =========================================================================
   Iter 21 E5b — Offertenrechner-Neuaufbau (so2-*): geführte Schritte,
   Desktop-Breite (2 Spalten + sticky Ergebnis-Rail), Cluster-Chips,
   Screens-Stepper, gruppierte Positionsliste, Preis-Herleitung, Mobile-Bar.
   @media NACH den Basis-Regeln (Memory project_css_cascade_mobile).
   ========================================================================= */
.so2-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 360px;
  gap: 14px;
  align-items: start;
}
.so2-main { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.so2-rail { position: sticky; top: 14px; }
.so2-railcard { display: flex; flex-direction: column; gap: 12px; }
.so2-rail .so-sums { max-width: none; }
.so2-rail__meta { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; color: var(--text-secondary); }
.so2-rail__meta strong { color: var(--text-primary); }
.so2-rail__ots h4 { margin: 0 0 6px; }
.so2-rail__ots p { margin: 2px 0; font-size: 13px; }
.so2-rail__ots p > span { color: var(--text-secondary); display: inline-block; min-width: 118px; }
/* Iter 22: interne Reichweiten-Kennzahlen (Kunden im Blickfeld · Modellierte
   Kontaktchancen · CPM_OTS · CPR_VAC) aus buildOfferView('internal').
   Iter 30 UI-Politur (Owner 2026-07-05): Stat-Rows statt 2×2-Card-Grid —
   DESIGN.md §4 «Stat-in-Rail»: in <400px-Spalten quetschten die Kacheln
   10.5px-Text unter den 11px-Schrift-Floor; Cyan war Deko auf Nicht-Interaktivem. */
.so-stats { margin: 6px 0 4px; }
.so-stat { padding: 8px 0 9px; display: flex; flex-direction: column; gap: 2px; }
.so-stat + .so-stat { border-top: 1px solid var(--border); }
.so-stat__row { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.so-stat .l { font-size: 11px; letter-spacing: .04em; text-transform: uppercase; color: var(--text-tertiary); font-weight: 600; }
.so-stat .v { font-size: 17px; font-weight: 650; color: var(--text-primary); font-variant-numeric: tabular-nums lining-nums; white-space: nowrap; }
.so-stat small { font-size: 11px; color: var(--text-secondary); }
.so-stat .so-reach-basis { color: var(--text-secondary); }

.so2-step__head { display: flex; gap: 12px; align-items: flex-start; margin-bottom: 12px; }
/* Iter 27: Schritt-Nummer als Soft-Quadrat statt Kreis-mit-Border (Kill-Liste) */
.so2-step__nr {
  flex-shrink: 0;
  width: 26px; height: 26px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: var(--radius-button);
  border: 0;
  background: var(--accent-soft);
  color: var(--accent-strong);
  font-weight: 700; font-size: 13px;
  font-variant-numeric: tabular-nums;
}
.so2-step__head h3 { margin: 0; }
.so2-step__sub { margin: 2px 0 0; color: var(--text-secondary); font-size: 13px; }

/* Cluster-Chips (Region/Kanton/Ort — Mehrfachauswahl §9-E5b.3) */
.so2-cluster { display: flex; flex-direction: column; gap: 10px; margin-bottom: 12px; }
.so2-chipgroup__label { display: block; color: var(--text-secondary); font-size: 12px; margin-bottom: 6px; }
.so2-chips { display: flex; gap: 6px; flex-wrap: wrap; }
/* Iter 30 UI-Politur: 132px schnitt Reihe 4 hart mitten durch (wirkte kaputt,
   nicht scrollbar — Owner 2026-07-05). Höhe auf ~4 Reihen; .has-more (JS-Toggle
   der View) blendet unten aus, solange weitere Orte folgen (DESIGN.md §7
   Scroll-Affordance). */
.so2-chips--scroll { max-height: 168px; overflow-y: auto; padding: 2px; overscroll-behavior: contain; }
.so2-chips--scroll.has-more {
  -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 28px), transparent);
  mask-image: linear-gradient(to bottom, #000 calc(100% - 28px), transparent);
}
.so2-chip {
  padding: 6px 12px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: transparent;
  color: var(--text-secondary);
  font-size: 13px;
  cursor: pointer;
}
.so2-chip:hover { border-color: var(--line-strong); color: var(--text-primary); background: rgba(var(--tint-rgb), .04); }
/* Iter 27: Aktiv-Zustand wie Foundation .toggle-btn.active (Soft-Tint + Strong-Text) */
.so2-chip.is-on {
  border-color: var(--accent-line);
  background: var(--accent-soft);
  color: var(--accent-strong);
  font-weight: 600;
}
.so2-ortsearch { margin-bottom: 8px; max-width: 320px; }

/* Schritt-2-Filter: klarer Hinweis, dass die Selektoren FILTERN (welche
   Standorte), plus «Erweitert»-Deckel für die seltene Screen-Kappung. */
.so2-filterhint { margin: 2px 0 10px; }
.so2-advanced {
  margin-top: 4px;
  background: var(--surface-inset);   /* Iter 27: Well statt Rahmen */
  border: 0;
  border-radius: 8px;
  padding: 0 12px;
}
.so2-advanced > summary {
  cursor: pointer;
  padding: 10px 0;
  color: var(--text-secondary);
  list-style: none;
  min-height: 44px;
  display: flex;
  align-items: center;
}
.so2-advanced > summary::-webkit-details-marker { display: none; }
/* Iter 27: SVG-Chevron mit Rotations-Transition statt Unicode-Dreieck */
.so2-advanced > summary::before {
  content: ""; width: 14px; height: 14px; flex: none; margin-right: 6px;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238a9ba3' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='m9 6 6 6-6 6'/></svg>") center / contain no-repeat;
  transition: transform var(--dur-fast) var(--ease);
}
.so2-advanced[open] > summary::before { transform: rotate(90deg); }
.so2-advanced .field { padding: 0 0 12px; }

/* Laufzeit-Buttons: umbrechen statt Nachbarfeld überlappen (4+ Laufzeiten) */
.so-laufzeit { flex-wrap: wrap; }
.so-laufzeit .view-toggle__btn { flex: 0 0 auto; }

/* Iter 22 E3: Schritt 3 in benannte Sinneinheiten (Buchung / Rabatte & Spot /
   Kundenpreis) — vorher eine flache Feldwiese («entwirren», Owner-Mandat). */
.so3-group { margin-bottom: 14px; }
/* Iter 27: Mono-Uppercase-Kicker abgebaut (DESIGN.md §2) — ruhiger Gruppentitel */
.so3-group__title {
  margin: 0 0 8px; font-size: 12.5px; font-weight: 600; letter-spacing: 0;
  text-transform: none; color: var(--text-secondary); font-family: inherit;
}
/* Rabatt-Schalter als Karten statt verlorener Mini-Checkboxen: ganze Fläche
   tappbar, checked-Zustand deutlich (Cyan-Soft). */
.so3-group .so-toggle {
  border: 1px solid var(--border); border-radius: 10px; padding: 10px 12px;
  background: var(--surface-inset); cursor: pointer; min-height: 46px;
  transition: background var(--transition), border-color var(--transition);
}
.so3-group .so-toggle:hover { background: var(--surface-hover); }
.so3-group .so-toggle:has(input:checked) {
  background: rgba(var(--accent-rgb),.12); border-color: var(--accent-line);
}
.so3-group .so-toggle:has(input:checked) span { color: var(--accent-strong); }
/* Iter 27: Toggle-Karten-Label ist eine Option, kein Micro-Label — lesbar
   statt uppercase-10.5px (das .field span-Idiom bleibt für echte Feldlabel). */
.so3-group .so-toggle > span {
  text-transform: none; letter-spacing: 0;
  font-size: 13px; font-weight: 500; color: var(--text);
}
/* Slots-Stepper: −/+ plus direktes Feld; die Formel-Zeile darunter macht die
   degressive Preislogik sichtbar (1. Slot voll, jeder weitere ×Faktor). */
.so3-slots { align-self: flex-start; background: var(--surface-2); }
.so3-slots input[type=number] {
  width: 56px; border: 0; background: transparent; text-align: center;
  font-weight: 700; font-size: 16px; color: var(--text-primary);
  font-variant-numeric: tabular-nums; -moz-appearance: textfield; appearance: textfield;
  min-height: 34px;
}
.so3-slots input::-webkit-outer-spin-button, .so3-slots input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.so3-slots button { min-width: 44px; min-height: 44px; }

/* Preis-Freiheit (§9-E5b.5) — Iter 27: erhabene neutrale Fläche mit
   Cyan-Hairline-Akzent (inset) statt gestricheltem Cyan-Rahmen (DESIGN.md §3). */
.so2-freedom {
  margin-top: 14px;
  padding: 12px 14px;
  background: var(--surface-2);
  border: 0;
  border-radius: 10px;
  box-shadow: inset 2.5px 0 0 var(--accent-line);
}
.so2-freedom h4 { margin: 0 0 6px; font-size: 13px; font-weight: 600; }
.so2-freedom__ovr { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; min-height: 34px; }
.so2-freedom__ovr .so-reset { margin-top: 0; }

/* Freie Positionen (Iter 22 Preis-Freiheit): Zeile = Text · CHF · Rhythmus ·
   Total · Entfernen. Negativ (Abzug/Gegenleistung) mit warn-Akzentkante. */
.so2-customs {
  margin-top: 14px;
  padding: 12px 14px;
  background: var(--surface-2);
  border: 0;
  border-radius: 10px;
  box-shadow: inset 2.5px 0 0 var(--accent-line);
}
.so2-customs h4 { margin: 0 0 8px; font-size: 13px; font-weight: 600; }
.so2-custom {
  display: grid;
  grid-template-columns: minmax(180px, 1fr) 120px auto auto auto;
  gap: 8px;
  align-items: center;
  padding: 6px 0;
}
.so2-custom input, .so2-custom select { min-height: 44px; }
.so2-custom--neg { box-shadow: inset 2.5px 0 0 var(--warn); padding-left: 8px; border-radius: 4px; }   /* Iter 27: inset statt border-left */
.so2-custom__total { white-space: nowrap; font-variant-numeric: tabular-nums; }
.so2-custom__del { min-width: 44px; min-height: 44px; }
.so2-customs__add { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 8px; }
@media (max-width: 720px) {
  .so2-custom { grid-template-columns: 1fr auto auto; }
  .so2-custom [data-cfield="text"] { grid-column: 1 / -1; }
  .so2-custom__total { grid-column: 1; }
}

/* Positionsliste: Gruppen (Ort/Aggregat) + Zeilen + Herleitung.
   Iter 27: Wells ohne Rahmen (Hairlines nur IN der Liste, DESIGN.md §1). */
.so2-poslist { display: flex; flex-direction: column; gap: 8px; }
.so2-group {
  border: 0;
  border-radius: 10px;
  background: var(--surface-inset);
}
.so2-group > summary {
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
  padding: 10px 14px; cursor: pointer; min-height: 44px; list-style: none;
  flex-wrap: wrap;
}
.so2-group > summary::-webkit-details-marker { display: none; }
.so2-group > summary::before {
  content: ""; width: 14px; height: 14px; flex: none; margin-right: 2px;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238a9ba3' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='m9 6 6 6-6 6'/></svg>") center / contain no-repeat;
  transition: transform var(--dur-fast) var(--ease);
}
.so2-group[open] > summary::before { transform: rotate(90deg); }
.so2-group__name { font-weight: 600; }
.so2-group__agg { color: var(--text-secondary); font-size: 13px; font-variant-numeric: tabular-nums; }
.so2-group__agg b { color: var(--text-primary); }
.so2-group__rows { border-top: 1px solid var(--border); padding: 6px 8px; display: flex; flex-direction: column; gap: 4px; }

.so2-pos { border-radius: 8px; }
.so2-poslist > .so2-pos { border: 0; background: var(--surface-inset); padding: 4px 8px; }
.so2-pos--free { opacity: 0.8; }
.so2-pos__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto auto auto;
  gap: 10px;
  align-items: center;
  padding: 6px 6px;
  min-height: 44px;
}
.so2-pos__row:hover { background: rgba(var(--tint-rgb), 0.03); }
.so2-pos__main { min-width: 0; font-size: 13px; }
.so2-pos__main strong { font-weight: 600; }
.so2-pos__screens { color: var(--text-secondary); font-size: 13px; white-space: nowrap; }
.so2-pos__price { display: flex; gap: 8px; align-items: baseline; justify-content: flex-end; white-space: nowrap; font-size: 13px; }
.so2-pos__price small { color: var(--text-secondary); }
.so2-pos__price small b { color: var(--text-primary); font-variant-numeric: tabular-nums; }
.so2-price-fix { font-variant-numeric: tabular-nums; }
.so-freecell span { font-size: 12px; color: var(--text-secondary); margin-left: 4px; }

.so2-why {
  border: none; background: none; cursor: pointer;
  color: var(--text-secondary); font-size: 12px;
  text-decoration: underline dotted;
  padding: 6px;
}
.so2-why:hover, .so2-why.is-on { color: var(--accent); }

.so2-pos__calc { padding: 4px 8px 10px; }
/* Iter 27: Herleitung mit inset Accent-Balken statt border-left (Kill-Liste) */
.so2-calc {
  color: var(--text-secondary);
  font-size: 12.5px;
  line-height: 1.7;
  padding: 6px 10px;
  border-left: 0;
  box-shadow: inset 2.5px 0 0 var(--accent-line);
  border-radius: 4px;
  margin: 4px 0;
}
.so2-calc b { color: var(--text-primary); }
.so2-calc__sep { opacity: 0.5; }
.so2-calc--ovr { box-shadow: inset 2.5px 0 0 var(--warn); }
.so2-sub {
  display: flex; gap: 12px; align-items: center; justify-content: space-between;
  padding: 6px 10px; margin-top: 6px;
  border-top: 1px solid var(--border);
  font-size: 13px;
}
.so2-sub__name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.so2-sub__price { color: var(--text-secondary); font-variant-numeric: tabular-nums; white-space: nowrap; }

/* Screens-Stepper (§9-E5b.2) */
.so2-stepper {
  display: inline-flex; align-items: center; gap: 2px;
  border: 1px solid var(--border); border-radius: 8px;
  overflow: hidden;
}
.so2-stepper button {
  width: 34px; height: 34px;
  border: none; background: transparent; color: var(--text-primary);
  font-size: 16px; cursor: pointer;
}
.so2-stepper button:hover:not(:disabled) { background: rgba(var(--accent-rgb), 0.18); }
.so2-stepper button:disabled { opacity: 0.35; cursor: default; }
.so2-stepper span {
  min-width: 42px; text-align: center; font-variant-numeric: tabular-nums; font-size: 13px;
}
.so2-stepper span small { color: var(--text-secondary); }
.so2-stepper.is-override { border-color: var(--accent); }
.so2-stepper.is-override span { color: var(--accent); font-weight: 600; }

/* Mobile-Ergebnisleiste: Total/OTS immer sichtbar (§9-E5b.1) */
.so2-mobilebar {
  display: none;
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 40;
  padding: 10px 14px calc(10px + var(--sab));   /* Iter 26: var statt env */
  background: var(--topbar-bg);   /* Iter 27: Token statt Roh-Farbe, themetreu */
  border-top: 1px solid var(--border);
  backdrop-filter: blur(14px);
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.so2-mobilebar__sums { display: flex; flex-direction: column; min-width: 0; }
.so2-mobilebar__sums strong { font-size: 17px; font-variant-numeric: tabular-nums; }
.so2-mobilebar__sums span { color: var(--text-secondary); font-size: 12px; }
/* computeError leert die Bar (set('')) — eine leere fixe Leiste darf nie über
   dem Seitenende schweben (Review-Finding E5b). :empty schlägt die
   display:flex-Media-Regel per Spezifität. */
.so2-mobilebar:empty { display: none; }

/* ===== Iter 24: Mobile-Offerten-Wizard (Fokus-Schritte, Owner-UX) ===== */
/* Wizard-Chrome nur ≤1100px sichtbar; Editor blendet global das «+ Neu»-FAB
   aus (kollidiert mit der Ergebnis-Bar, man ist mitten im Erstellen). */
.so-wiz, .so-sheet-backdrop { display: none; }
body.so-editor-open .qc { display: none; }
/* Summe ist jetzt ein antippbarer Button (öffnet das Ergebnis-Sheet). */
.so2-mobilebar__sums {
  border: 0; background: transparent; padding: 0; margin: 0;
  text-align: left; font: inherit; color: inherit; cursor: pointer;
}
.so2-mobilebar__sums span { color: var(--accent-strong); }

/* Preisregel-Editor (#/v/pricing, admin-only §9-E5b.6) */
.sp-page .panel { margin-bottom: 14px; }
.sp-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 14px;
  align-items: start;
}
.sp-grid .panel { margin-bottom: 0; }
.sp-matrix td { vertical-align: top; }
.sp-matrix .sp-price { width: 110px; text-align: right; }
.sp-eb { display: block; color: var(--text-secondary); font-size: 11.5px; margin-top: 2px; font-variant-numeric: tabular-nums; }
.sp-aktiv { display: flex; gap: 6px; align-items: center; font-size: 11.5px; color: var(--text-secondary); margin-top: 4px; cursor: pointer; }
.sp-aktiv input[type="checkbox"] { width: 16px; height: 16px; flex: none; }
.sp-cell--off { opacity: 0.45; }
.sp-laufzeiten { display: flex; flex-direction: column; gap: 6px; margin-bottom: 10px; }
.sp-lz { display: flex; gap: 10px; align-items: center; }
.sp-lz > span:first-child { min-width: 90px; }
.sp-lz input { width: 110px; }
.sp-lz-del { padding: 4px 10px; }
.sp-lz-add { flex-wrap: wrap; }
.sp-lz-add input { max-width: 150px; min-width: 0; flex: 1 1 120px; }
/* Dunkle Feld-Optik für Inputs AUSSERHALB von label.field (Matrix, Laufzeiten,
   Ortsuche, Zeilen-Preis): die globale Regel deckt nur select/.search-input/
   textarea — diese Felder waren weiss-auf-weiss unlesbar (Review-Finding
   E5b, hoch). */
.sp-matrix .sp-price, .sp-lz input, .sp-lz-add input, .so2-ortsearch, .so-price-input {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 6px 10px;
  color: var(--text);
}
.sp-matrix .sp-price:focus, .sp-lz input:focus, .sp-lz-add input:focus,
.so2-ortsearch:focus, .so-price-input:focus { border-color: var(--accent-hover); outline: none; }
@media (max-width: 1024px), (pointer: coarse) {
  .sp-matrix .sp-price, .sp-lz input, .sp-lz-add input, .sp-lz-add .ghost-btn { min-height: 44px; }
  /* E6-Mobile-Pass 2026-07-02: 32px unterschritt das 44px-Mandat — gemessen
     25 Checkbox-Labels 16px, Laufzeit-Löschknopf 32px, EB-Default-Toggle. */
  .sp-aktiv { min-height: 44px; }
  .sp-lz-del { min-height: 44px; min-width: 44px; }
  .so-toggle { min-height: 44px; }
}

/* Desktop schmal / Tablet: Rail unter den Inhalt — einspaltig steht das
   Ergebnis unter Schritt 4, also übernimmt die Bottom-Bar «Total immer
   sichtbar» (§9-E5b.1) auch im Tablet-Band 721–1100px (Review-Finding E5b). */
@media (max-width: 1100px) {
  .so2-layout { grid-template-columns: 1fr; }
  .so2-rail { position: static; }
  .so2-mobilebar { display: flex; }
  .so-editor { padding-bottom: 84px; }

  /* --- Wizard-Leiste: [‹] Punkte + Titel [›], sticky oben --- */
  .so-editor.is-wizard .so-wiz {
    display: flex; align-items: center; gap: 8px;
    position: sticky; top: 0; z-index: 25;
    margin: 0 0 12px; padding: 8px 2px;
    background: var(--bg); border-bottom: 1px solid var(--border);
  }
  /* Iter 27: Quadrat-Icon-Buttons statt Kreis-mit-Border (Kill-Liste) */
  .so-wiz__arrow {
    flex: 0 0 auto; width: 44px; height: 44px; border-radius: var(--radius-button);
    border: 1px solid var(--border); background: var(--surface-2);
    color: var(--text); font-size: 20px; line-height: 1; display: grid; place-items: center;
  }
  .so-wiz__arrow:active:not(:disabled) { transform: scale(.94); }
  .so-wiz__arrow:disabled { opacity: .3; }
  .so-wiz__center { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 5px; }
  .so-wiz__dots { display: flex; align-items: center; gap: 6px; }
  .so-wiz__dot {
    width: 26px; height: 26px; border-radius: 7px; padding: 0;
    border: 0; background: var(--surface-inset);
    color: var(--text-tertiary); font-weight: 600; font-size: 12px;
    display: grid; place-items: center; font-variant-numeric: tabular-nums;
    transition: background var(--transition), color var(--transition);
  }
  .so-wiz__dot.is-done { color: var(--accent-strong); background: var(--accent-soft); }
  .so-wiz__dot.is-active { color: var(--on-accent); background: var(--accent); }
  .so-wiz__title { font-size: 13px; font-weight: 600; color: var(--text-secondary); }

  /* --- Nur der aktive Schritt sichtbar --- */
  .so-editor.is-wizard .so2-step:not(.is-current) { display: none; }
  .so-editor.is-wizard .so2-main { gap: 0; }

  /* --- Swipe: aktiver Schritt folgt dem Finger, snapt/wechselt mit Slide --- */
  .so-editor.is-wizard .so2-layout { overflow-x: hidden; }
  .so-editor.is-wizard .so2-step.is-current { transition: transform .22s cubic-bezier(.2, .8, .2, 1); }
  .so-editor.is-wizard .so2-layout.so-dragging .so2-step.is-current { transition: none; }  /* Finger-folgt ohne Lag */
  .so-editor.is-wizard .so2-step.so-slide-fwd { animation: soSlideFwd .26s cubic-bezier(.2, .8, .2, 1); }
  .so-editor.is-wizard .so2-step.so-slide-bwd { animation: soSlideBwd .26s cubic-bezier(.2, .8, .2, 1); }

  /* --- Ergebnis-Rail als Bottom-Sheet (per «Details») --- */
  .so-editor.is-wizard .so2-rail {
    position: fixed; left: 0; right: 0; bottom: 0; top: auto; z-index: 60;
    max-height: 82vh; overflow-y: auto;
    padding: 8px 14px calc(16px + env(safe-area-inset-bottom, 0px));
    background: var(--surface); border-top: 1px solid var(--line-strong);
    border-radius: 18px 18px 0 0; box-shadow: var(--shadow-md);
    transform: translateY(101%); transition: transform .3s cubic-bezier(.2,.8,.2,1);
    pointer-events: none;   /* versteckt: fängt keine Klicks ab (sonst blockiert es die Bar) */
  }
  .so-editor.is-wizard .so2-rail::before {
    content: ''; display: block; width: 40px; height: 4px; border-radius: 2px;
    background: var(--line-strong); margin: 2px auto 12px;
  }
  .so-editor.is-wizard .so2-rail.is-open { transform: translateY(0); pointer-events: auto; }
  .so-sheet-backdrop {
    display: block; position: fixed; inset: 0; z-index: 55;
    background: rgba(0, 0, 0, .5); backdrop-filter: blur(2px);
  }
  .so-sheet-backdrop[hidden] { display: none; }

  /* --- doppelter Speichern: Header-Save weg (Save lebt in der Mobile-Bar) --- */
  .so-editor.is-wizard .so-actions #so-save { display: none; }
}
@keyframes soSlideFwd { from { transform: translateX(34px); opacity: .35; } to { transform: none; opacity: 1; } }
@keyframes soSlideBwd { from { transform: translateX(-34px); opacity: .35; } to { transform: none; opacity: 1; } }
@media (max-width: 1100px) and (prefers-reduced-motion: reduce) {
  .so-editor.is-wizard .so2-rail { transition: none; }
  .so-editor.is-wizard .so2-step.is-current { transition: none; }
  .so-editor.is-wizard .so2-step.so-slide-fwd,
  .so-editor.is-wizard .so2-step.so-slide-bwd { animation: none; }
}
/* Mobile: Positions-Grid stapelt */
@media (max-width: 720px) {
  /* 4 Ebenen-Buttons (Standort/Ort/Kanton/Region) passen nicht in eine
     375px-Zeile — umbrechen statt «Region» abschneiden */
  .so-posmode { flex-wrap: wrap; }
  .so-posmode .view-toggle__btn { flex: 1 1 auto; }
  .so2-pos__row {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-auto-flow: row;
    row-gap: 6px;
  }
  .so2-pos__price { justify-content: flex-start; grid-column: 1 / -1; flex-wrap: wrap; }
  .so2-group > summary { align-items: flex-start; flex-direction: column; gap: 4px; }
  .so2-sub { flex-wrap: wrap; }
}
/* Touch-Floor (Tablet-Bruchzone 768/1024 + coarse pointer). E6-Mobile-Pass:
   44px gilt für BEIDE Dimensionen — 2-Buchstaben-Kantons-Chips rissen die
   Breite (42px), der Back-Link die Höhe (15px), die Standortlisten-summary 40px. */
@media (max-width: 1024px), (pointer: coarse) {
  .so2-chip { min-height: 44px; min-width: 44px; }
  .so2-stepper button { width: 44px; height: 44px; }
  .so2-why { min-height: 44px; }
  .so2-ortsearch { min-height: 44px; }
  .so-back { display: inline-flex; align-items: center; min-height: 44px; }
  .so-loclist summary { min-height: 44px; padding: 12px 0; }
}

/* Mobile ≤720px: einspaltig, Aktionen volle Breite (PWA-Kernnutzung §Owner) */
@media (max-width: 720px) {
  .so-grid { grid-template-columns: 1fr; }
  .so-actions { width: 100%; }
  .so-actions .primary-btn, .so-actions .ghost-btn { flex: 1; }
  .so-posmode { margin-left: 0; width: 100%; }
  .so-sums { max-width: none; }
  .so-toolbar .primary-btn { width: 100%; text-align: center; }
}

/* Touch-Floor (Tablet-Bruchzone 768/1024 + coarse pointer) */
@media (max-width: 1024px), (pointer: coarse) {
  /* E6: :not([type="checkbox"]) — der nackte input-Floor streckte die
     Early-Bird-/Partner-Checkboxen (20×20-Basis) auf verzerrte 20×44px;
     deren Tap-Fläche ist das umgebende .so-toggle-Label (min-height 44). */
  .so-fields input:not([type="checkbox"]),
  .so-fields select,
  .so-preset,
  .so-price-input,
  .so-actions .primary-btn,
  .so-actions .ghost-btn {
    min-height: 44px;
  }
  .so-locrow { min-height: 44px; }
  .so-freecell { min-height: 44px; min-width: 44px; }
  /* §16: individuelle Auswahl touch-tauglich */
  .so2-indivadd { min-height: 44px; }
  .so-locrm { min-height: 44px; min-width: 44px; }
  .so2-indivsearch { min-height: 44px; }
}

/* =========================================================================
   Iter 21 Etappe 5 — P&L (/v/pnl, admin-only): Marge-Farben, Break-even-Grid,
   Drilldown-Blöcke (details/summary), Ausgaben-Modal-Checkbox.
   ========================================================================= */
.panel__title { margin: 0 0 6px; font-size: 1.15rem; }
.pnl-neg { color: var(--low); }
.pnl-pos { color: var(--high); }
.pnl-warn { color: var(--medium); }
.pnl-table td[data-label="Marge"] { font-variant-numeric: tabular-nums lining-nums; }
.pnl-breakeven { display: grid; grid-template-columns: minmax(180px, 260px) 1fr 1fr; gap: 14px; align-items: stretch; margin-top: 12px; }
.pnl-breakeven .field input { min-height: 46px; background: var(--surface-inset); border: 1px solid var(--border); border-radius: 10px; padding: 0 14px; color: var(--text); }
.pnl-block { border: 0; border-radius: 12px; background: var(--surface-inset); }   /* Iter 27: Well ohne Rahmen */
.pnl-block summary {
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
  padding: 12px 14px; cursor: pointer; min-height: 44px; list-style: none;
}
.pnl-block summary::-webkit-details-marker { display: none; }
.pnl-block summary span { color: var(--text-secondary); font-variant-numeric: tabular-nums; white-space: nowrap; }
.pnl-block[open] summary { border-bottom: 1px solid var(--border); }
.pnl-block > :not(summary) { margin: 12px 14px; }
.field--check { flex-direction: row; align-items: center; gap: 10px; min-height: 46px; }
.field--check input[type="checkbox"] { width: 22px; height: 22px; accent-color: var(--accent); }
.so-toolbar__actions { display: flex; gap: 10px; flex-wrap: wrap; }
@media (max-width: 720px) {
  .pnl-breakeven { grid-template-columns: 1fr; }
}

/* =========================================================================
   Iter 21 E6 — Touch-Floor-Politur (holistischer Mobile-Pass 2026-07-02).
   Wurzel: bisherige Floors sicherten nur die Höhe; textschmale Elemente
   rissen die Breite der 44px-Tap-Fläche (P&L-Jahrespfeile ‹› 39px breit,
   Dashboard-Segment «7 T» 41px). Muster project_tablet_touch_breakpoint.
   ========================================================================= */
@media (max-width: 1024px), (pointer: coarse) {
  .view-toggle__btn { min-width: 44px; justify-content: center; }
  .seg__btn { min-width: 44px; }
}
/* E6-Politur (alle Breiten): (a) .view-toggle bringt margin-bottom:12px aus
   der Basis mit und sass in der flex-zentrierten .so-toolbar ~6px höher als
   der Aktions-Button daneben; (b) unbrechbare Strings (E-Mail/UID/IBAN) in
   Modal-Cards + gestapelten sl-Tabellen sollen umbrechen statt überlaufen —
   gleiche Fehlerklasse wie objection-* (dort seit Iter 19 gefixt). */
.so-toolbar .view-toggle { margin-bottom: 0; }
.info-card p { overflow-wrap: anywhere; }
.sl-table td { overflow-wrap: anywhere; }
/* anywhere vererbt in UI-Elemente der Zellen: das «aktiv»-Label der Preis-
   matrix brach buchstabenweise und schrumpfte Label+Checkbox (gemessen 13px
   bei 360/390) — Daten dürfen brechen, UI-Beschriftungen nicht. */
.sl-table td .sp-aktiv { overflow-wrap: normal; }

/* =========================================================================
   Iter 17 Etappe 1 — prefers-reduced-motion (Accessibility-Hardening).
   Respektiert OS/Browser-Einstellung "Bewegung reduzieren" (vestibulaere
   Empfindlichkeit, Konzentrations-Stoerung). Wirkt global auf Hover-Translates
   (firm-card, kanban-card), Modal-Fade, Toast-Out-Fade, Skeleton-Pulse (E2),
   Scroll-Snap. Kein Layout-Eingriff — die Animation laeuft nur kuerzer.
   Block bewusst am Ende, damit er ueber spaeter deklarierten Selektor-spezifischen
   transition-Regeln gewinnt (CSS-Cascade-Order + !important).
   ========================================================================= */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ============================================================
   Iter 22 F5 — globales «+ Neu» (FAB + Menü, quick-create.js)
   Fixed unten rechts, z-index 90: unter Modals (100) und Toast
   (200), über Inhalt. Touch ≥44px, iOS safe-area.
   ============================================================ */
.qc { position: fixed; right: 18px; bottom: calc(18px + var(--sab)); z-index: 90; }   /* Iter 26: var statt env — eine Wahrheit, scanbar */
.qc__fab {
  width: 56px; height: 56px; border-radius: 50%; border: 0; cursor: pointer;
  background: var(--accent); color: var(--on-accent);
  display: grid; place-items: center;
  box-shadow: 0 10px 28px rgba(2, 6, 8, .5), 0 2px 8px rgba(2, 6, 8, .4);
  transition: background .15s, transform .15s;
}
.qc__fab:hover { background: var(--accent-hover); }
.qc__fab:active { transform: scale(.94); }
.qc__fab svg { width: 26px; height: 26px; transition: transform .18s; }
.qc.open .qc__fab svg { transform: rotate(45deg); }
.qc__menu {
  position: absolute; right: 0; bottom: 68px; min-width: 216px;
  background: var(--surface-2); border: 1px solid var(--border);
  border-radius: 14px; box-shadow: var(--shadow-md); padding: 6px;
  display: flex; flex-direction: column; gap: 2px;
}
.qc__item {
  display: flex; align-items: center; gap: 10px; width: 100%; min-height: 44px;
  padding: 11px 14px; background: none; border: 0; border-radius: 10px;
  color: var(--text); font-size: 14px; font-weight: 500; text-align: left;
  cursor: pointer; white-space: nowrap;
}
.qc__item:hover, .qc__item:focus-visible { background: var(--surface-3); }
.qc__item-icon { display: inline-flex; flex: none; }
.qc__item-icon svg { width: 18px; height: 18px; color: var(--accent); }
/* Toast erscheint sonst exakt auf dem FAB (beide fixed unten rechts) */
body.has-quick-create .toast-stack { bottom: calc(88px + env(safe-area-inset-bottom, 0px)); }
/* Offenes Menü gewinnt gegen einen noch aktiven Toast (der liegt sonst mit
   z-index 200 genau auf dem untersten Menü-Item — belegt F5-mobil-menu.png) */
.qc.open { z-index: 210; }
/* Letzte Inhaltszeile bleibt unterm FAB erreichbar (nur Luft am Seitenende;
   Doc-/Login-Modus hat kein has-quick-create → Papieransicht unverändert) */
body.has-quick-create #app-view { padding-bottom: 84px; }

/* =========================================================================
   Iter 25 Welle 2 — Cluster 2/3/4 Reskin: neue View-Klassen zentral (die
   parallelen View-Builder durften style.css nicht anfassen und haben sie als
   css_needed gemeldet). Am Dateiende → nach allen Basis-Regeln, damit die
   Mobile-Overrides gewinnen (css_cascade_mobile-Lehre).
   ========================================================================= */
/* manager-team / manager-goals: 4. Rolle «setter» (Senior-Berater) — fehlte (nur admin/manager/caller) */
.badge--role-setter { background: rgba(6,182,212,.16); color: var(--accent-strong); border-color: rgba(6,182,212,.32); }
/* sales-customers: Warn-Hinweis (Eigenfirma) + kompakter Empty-State im Modal */
.so-hint--warn { color: var(--warn); margin: 0; }
.empty-state--compact { padding: 16px; }
/* admin-sources: schmales Sortier-Zahlenfeld (min-width:0 schlägt den .field-Default 150px) */
.field--narrow { max-width: 120px; min-width: 0; }
#source-list .field--check { min-width: 0; }
.team-table tr.is-inactive td { opacity: .55; }
.team-table tr.is-inactive strong { color: var(--text-secondary); font-weight: 600; }
/* admin-intelligence: Zugriffs-Freischaltungs-Zeile (44px Touch-Target + Trenner) */
.access-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 0; border-top: 1px solid var(--border); min-height: 44px; cursor: pointer; }
.access-row__toggle { width: 20px; height: 20px; flex: 0 0 auto; accent-color: var(--accent); }
/* admin-catalog: Editor-Karten (ersetzen ~99 duplizierte Inline-Styles durch echte Klassen) */
.cat-q, .cat-rule, .ba-driver { border: 1px solid var(--border); border-radius: 10px; padding: 12px; margin-top: 12px; }
.ba-driver { padding: 10px; margin-top: 10px; }
.ba-driver--orphan { border-color: var(--medium); }
.cat-card__head { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.cat-opt { display: flex; gap: 6px; align-items: center; margin-top: 6px; flex-wrap: wrap; }
.cat-cond { display: flex; gap: 8px; align-items: flex-start; flex-wrap: wrap; margin-top: 8px; padding-top: 8px; border-top: 1px dashed var(--border); }
.cat-showwhen { margin-top: 10px; padding-top: 8px; border-top: 1px dashed var(--border); }
/* sales-pricing: Preismatrix-Zelle (3 Kinder: Preis/EB/aktiv) auf Mobile stapeln statt quetschen */
@media (max-width: 720px) {
  .sp-matrix td { flex-direction: column; align-items: flex-start; gap: 6px; }
  .sp-matrix .sp-price { width: 100%; }
}
/* sales-invoices: Toolbar-Button-Paar auf Mobile symmetrisch (beide voll/flex:1) */
@media (max-width: 720px) {
  .si-toolbar-actions { width: 100%; }
  .si-toolbar-actions .primary-btn, .si-toolbar-actions .ghost-btn { flex: 1; }
}
/* manager-activity: Detail-Spalte auf Desktop/Tablet mit Ellipsis (Tablet-Bruchzone 768-1024px) */
@media (min-width: 721px) {
  .activity-item-row__detail { max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
}
@media (min-width: 721px) and (max-width: 1024px) {
  .activity-item-row { grid-template-columns: 56px 140px 140px 1fr minmax(0, 160px); }
}

/* =========================================================================
   Iter 25 Welle 3 — Kommandozentrum «Mein Tag» + einheitlicher Kalender.
   Typ-Farben (Kalender-Quellen): Kundentermine behalten die Status-Klassen
   (.cal-event--planned usw.); neue Quellen bekommen EINEN Farbort je Typ —
   Aufgabe=Amber, Wiedervorlage=Info-Blau, freier Termin=Violett. Farbe nie
   allein: jeder Chip trägt zusätzlich Icon/Label (color-not-only, WCAG).
   ========================================================================= */
:root {
  --cal-task: #f5b83d;      /* Aufgabe (Amber, wie --warn dunkel) */
  --cal-callback: #6989c9;  /* Wiedervorlage (Info-Blau) */
  --cal-frei: #8b5cf6;      /* freier Termin (Violett) */
}
:root[data-theme="light"] {
  --cal-task: #8f6205;
  --cal-callback: #40619f;
  --cal-frei: #7c4fe0;
}

/* Kalender-Chips je Quelle (Muster wie Status-Klassen: border-left + Soft-Bg) */
.cal-event--type-task     { border-left-color: var(--cal-task); background: rgba(245, 184, 61, .08); }
.cal-event--type-callback { border-left-color: var(--cal-callback); background: rgba(105, 137, 201, .08); }
.cal-event--type-frei     { border-left-color: var(--cal-frei); background: rgba(139, 92, 246, .08); }
.cal-event--type-task.is-done { opacity: .55; }
.cal-event--type-task.is-done strong { text-decoration: line-through; }
.cal-month__pill--type-task     { background: var(--cal-task); }
.cal-month__pill--type-callback { background: var(--cal-callback); }
.cal-month__pill--type-frei     { background: var(--cal-frei); }

/* Kanonische Aufgaben-Zeile (Mein Tag + Agenda). Checkbox = echter Button,
   44px Touch-Fläche, sichtbarer Kreis 22px. */
.task-row {
  display: flex; align-items: flex-start; gap: 8px;
  padding: 8px 12px 8px 4px;
  background: var(--surface-inset);
  border: 1px solid var(--border); border-radius: 10px;
}
.task-row__check {
  flex: 0 0 44px; min-height: 44px;
  display: flex; align-items: center; justify-content: center;
  background: none; border: none; padding: 0; cursor: pointer;
}
.task-row__check .task-row__circle {
  width: 22px; height: 22px; border-radius: 50%;
  border: 2px solid var(--line-strong);
  display: flex; align-items: center; justify-content: center;
  color: transparent;
  transition: border-color .15s ease, background .15s ease, color .15s ease;
}
.task-row__check:hover .task-row__circle { border-color: var(--accent); }
.task-row__check svg { width: 14px; height: 14px; }
.task-row__body { flex: 1; min-width: 0; padding-top: 10px; }
.task-row__title { display: block; font-weight: 600; color: var(--text-primary); overflow-wrap: anywhere; }
.task-row__meta { display: flex; flex-wrap: wrap; gap: 4px 10px; font-size: 12px; color: var(--text-secondary); margin-top: 2px; }
.task-row__meta .is-overdue { color: var(--bad-strong); font-weight: 600; }
.task-row__prio { font-variant-numeric: tabular-nums; }
.task-row.is-done { opacity: .62; }
.task-row.is-done .task-row__circle { background: var(--good-deep); border-color: var(--good-deep); color: #fff; }
.task-row.is-done .task-row__title { text-decoration: line-through; color: var(--text-secondary); font-weight: 400; }

/* Destruktive Sekundär-Aktion (Modal-Footer «Löschen») */
.ghost-btn--danger { color: var(--bad-strong); border-color: rgba(242, 84, 91, .35); }
.ghost-btn--danger:hover { background: rgba(242, 84, 91, .10); border-color: var(--bad-strong); }

/* Read-only Verknüpfungs-Hinweis im Aufgaben-Modal */
.task-modal__link { font-size: 12px; color: var(--text-secondary); margin: 2px 0 0; }

/* Wrapper der Aufgaben-Zeilen (Mein Tag) */
.task-list { display: flex; flex-direction: column; gap: 8px; }

/* Iter 28 E2.2 — Roadmap-Linse (#/m/tasks): Vorhaben nach Zielmonat gruppiert,
   je Vorhaben Fortschritt + zugeordnete Aufgaben. Precision Ink: Inset-Panels,
   Zeilen-Idiome + conv-pill-Fortschrittsbalken wiederverwendet. */
.roadmap { display: flex; flex-direction: column; gap: 22px; }
.roadmap__month { display: flex; flex-direction: column; gap: 8px; }
.roadmap__month-label {
  margin: 0 0 2px; font-size: 12px; font-weight: 650; letter-spacing: .04em;
  text-transform: uppercase; color: var(--text-tertiary);
}
.roadmap__vh { background: var(--surface-inset); border: 1px solid var(--border); border-radius: 12px; overflow: hidden; }
.roadmap__vh > summary { list-style: none; cursor: pointer; outline: none; }
.roadmap__vh > summary::-webkit-details-marker { display: none; }
.roadmap__vh > summary:hover { background: rgba(var(--tint-rgb), .04); }
.roadmap__vh-head { display: flex; align-items: center; gap: 10px; padding: 11px 14px; }
.roadmap__vh-head::before {
  content: ''; flex: 0 0 auto; width: 7px; height: 7px; margin-right: 2px;
  border-right: 2px solid var(--text-tertiary); border-bottom: 2px solid var(--text-tertiary);
  transform: rotate(-45deg); transition: transform .15s var(--ease);
}
.roadmap__vh[open] > summary .roadmap__vh-head::before { transform: rotate(45deg); }
.roadmap__vh-title { flex: 1; min-width: 0; font-weight: 600; color: var(--text-primary); overflow-wrap: anywhere; }
.roadmap__vh-title.is-done { text-decoration: line-through; color: var(--text-secondary); font-weight: 400; }
.roadmap__vh-badges { display: flex; gap: 6px; flex: 0 0 auto; }
.roadmap__vh-progress { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; }
.roadmap__vh-progress .conv-pill__bar { width: 72px; }
.roadmap__vh-count { font-size: 12px; font-variant-numeric: tabular-nums; color: var(--text-secondary); }
.roadmap__vh-body { padding: 4px 14px 14px; border-top: 1px solid var(--border); }
.roadmap__vh-actions { display: flex; gap: 8px; flex-wrap: wrap; margin: 10px 0 12px; }
@media (max-width: 640px) {
  .roadmap__vh-head { flex-wrap: wrap; gap: 8px 10px; }
  .roadmap__vh-progress { width: 100%; }
  .roadmap__vh-progress .conv-pill__bar { flex: 1; width: auto; }
}

/* Nicht-draggable Typ-Chips: pointer statt grab (Basis .cal-event hat grab) */
.cal-event--type-task, .cal-event--type-callback, .cal-event--type-frei { cursor: pointer; }

/* Quell-Warnbanner im Kalender (Kritiker-Fix: Totalausfall nie stumm) */
.cal-src-warn {
  margin: 0 0 8px; padding: 8px 12px;
  font-size: 12px; color: var(--warn-strong);
  background: rgba(245, 184, 61, .10);
  border: 1px solid rgba(245, 184, 61, .35); border-radius: 8px;
}

/* Namespace-Hooks ohne eigenes Styling (bewusst, Kritiker-Deklaration):
   .slot-menu (Wrapper auf .modal), .cal-agenda__row--appt (Default-Akzent). */

/* — Kalender Agenda-View (Iter 25 W3 E3.3) — */
.cal-agenda { display: flex; flex-direction: column; gap: 18px; padding: 14px; }
.cal-agenda__day { display: flex; flex-direction: column; gap: 6px; }
.cal-agenda__head { margin: 0 0 2px; font-size: 13px; font-weight: 600; color: var(--text-secondary); }
.cal-agenda__head.is-today { color: var(--accent-strong, var(--accent)); }
.cal-agenda__row {
  display: flex; align-items: center; gap: 10px;
  min-height: 44px; width: 100%; padding: 8px 12px;
  background: rgba(var(--tint-rgb), .025); border: 0;
  border-left: 3px solid var(--accent); border-radius: 8px;
  color: var(--text); font: inherit; text-align: left; cursor: pointer;
}
.cal-agenda__row:hover { background: var(--surface-inset); }
.cal-agenda__time { flex: 0 0 auto; min-width: 40px; font-size: 12px; font-variant-numeric: tabular-nums; color: var(--text-secondary); }
.cal-agenda__ico { flex: 0 0 auto; display: inline-flex; color: var(--text-secondary); }
.cal-agenda__ico svg { width: 16px; height: 16px; }
.cal-agenda__main { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.cal-agenda__main strong { font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cal-agenda__main small { font-size: 11px; color: var(--text-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cal-agenda__row--type-task     { border-left-color: var(--cal-task); }
.cal-agenda__row--type-callback { border-left-color: var(--cal-callback); }
.cal-agenda__row--type-frei     { border-left-color: var(--cal-frei); }
.cal-agenda__row--type-task.is-done { opacity: .55; }
.cal-agenda__row--type-task.is-done strong { text-decoration: line-through; }
.cal-agenda__row--st-won { border-left-color: var(--high, var(--good)); }
.cal-agenda__row--st-lost, .cal-agenda__row--st-cancelled { border-left-color: var(--low, var(--bad-deep)); }
.cal-agenda__row--st-completed { border-left-color: var(--text-secondary); }
.cal-agenda__row--st-no_show { border-left-color: var(--medium); }

/* =========================================================================
   Iter 33 B1 — Mehr-Mitarbeiter-Overlay: Farbe PRO PERSON.
   Eigener Farb-Slot = PUNKT (DESIGN.md:77,82), nicht der schon durch Typ/Status
   belegte linke Balken. Cyan bleibt der Interaktion vorbehalten (nicht in der
   Palette). Farbe nie allein: der Punkt trägt immer Name/Tooltip als Begleiter.
   8 qualitativ getrennte Farbtöne, je Theme abgestimmt.
   ========================================================================= */
:root {
  --cal-person-1: #f2748c;  --cal-person-2: #f0995a;  --cal-person-3: #5fcf8f;  --cal-person-4: #6f9bef;
  --cal-person-5: #b28bf0;  --cal-person-6: #e58ad0;  --cal-person-7: #4fc4b0;  --cal-person-8: #d9c15a;
}
:root[data-theme="light"] {
  --cal-person-1: #c43d5b;  --cal-person-2: #b5632a;  --cal-person-3: #2e8f56;  --cal-person-4: #3a63b8;
  --cal-person-5: #7c4fe0;  --cal-person-6: #b0479f;  --cal-person-7: #1f8f7d;  --cal-person-8: #8a7420;
}
/* Der Farb-Punkt: kleiner Kreis mit dünnem Ring (bleibt auch auf farbigen
   Month-Pills sichtbar). flex-shrink:0 → wird nie zusammengequetscht. */
.cal-owner-dot {
  display: inline-block; flex: 0 0 auto;
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--owner-color, var(--text-tertiary));
  box-shadow: 0 0 0 1.5px var(--surface-2), 0 0 0 2.5px rgba(0,0,0,.18);
  margin-right: 5px; vertical-align: middle;
}

/* Auswahl-Trigger in der Toolbar (ersetzt das alte <select>) */
.cal-people {
  display: inline-flex; align-items: center; gap: 8px;
  min-height: 44px; padding: 0 12px; width: 100%;
  background: var(--surface-1); color: var(--text);
  border: 1px solid var(--border); border-radius: 8px;
  font: inherit; cursor: pointer; text-align: left;
}
.cal-people:hover { background: var(--surface-2); }
.cal-people__dots { display: inline-flex; }
.cal-people__dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--owner-color, var(--text-tertiary));
  box-shadow: 0 0 0 1.5px var(--surface-1);
}
.cal-people__dot + .cal-people__dot { margin-left: -3px; }   /* leichte Überlappung */
.cal-people__label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cal-people__chev { flex: 0 0 auto; color: var(--text-secondary); }
.cal-people[aria-expanded="true"] .cal-people__chev { transform: rotate(180deg); }

/* Anker-Popover mit der Personen-Liste (kein Vollbild-Modal) */
.cal-people-pop {
  position: fixed; z-index: 1400;
  display: flex; flex-direction: column; gap: 8px;
  max-height: min(60vh, 420px); padding: 10px;
  background: var(--surface-2); border: 1px solid var(--line-strong);
  border-radius: 12px; box-shadow: var(--shadow-md, 0 12px 32px -8px rgba(2,6,8,.6));
}
.cal-people-pop__search {
  min-height: 40px; padding: 0 12px; font: inherit;
  background: var(--surface-inset); color: var(--text);
  border: 1px solid var(--border); border-radius: 8px;
}
.cal-people-pop__search:focus { outline: none; border-color: var(--accent-line); }
.cal-people-pop__list { overflow-y: auto; display: flex; flex-direction: column; gap: 2px; }
.cal-people-pop__row {
  display: flex; align-items: center; gap: 9px;
  min-height: 40px; padding: 6px 8px; border-radius: 8px; cursor: pointer;
}
.cal-people-pop__row:hover { background: var(--surface-3); }
.cal-people-pop__row input { flex: 0 0 auto; width: 17px; height: 17px; accent-color: var(--accent); }
.cal-people-pop__name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cal-people-pop__name em { color: var(--text-tertiary); font-style: normal; }
.cal-people-pop__actions { display: flex; gap: 6px; border-top: 1px solid var(--border); padding-top: 8px; }
.cal-people-pop__actions .ghost-btn { flex: 1; min-height: 38px; padding: 0 8px; }

@media (max-width: 1024px), (pointer: coarse) {
  .cal-people-pop__row { min-height: 44px; }
  .cal-people-pop__actions .ghost-btn { min-height: 44px; }
}

/* — Gratis-Screens im Offerten-Wizard (Owner-Mandat 2026-07-04; Wording eisern).
   Iter 27: ruhige Pill statt dashed-Border-Prototyp-Optik. — */
.so2-gratisbtn {
  flex: 0 0 auto;
  min-height: 32px; padding: 4px 10px;
  font: inherit; font-size: 12px; font-weight: 600;
  color: var(--text-secondary);
  background: var(--surface-2);
  border: 1px solid var(--border); border-radius: 999px;
  cursor: pointer;
}
.so2-gratisbtn:hover { border-color: var(--good-deep); color: var(--good-strong); }
.so2-gratisbtn.is-on {
  color: var(--good-strong);
  background: rgba(47, 214, 127, .12);
  border-color: transparent;
}
.so2-gratisbtn.is-rule { cursor: default; }
.so2-gratis-note { color: var(--good-strong); font-weight: 600; font-size: 12px; margin-left: 4px; }

/* — Slot-Typ-Wahl-Menü (Iter 25 W3 E3.3) — */
.slot-menu__list { display: flex; flex-direction: column; gap: 8px; }
.slot-menu__btn {
  display: flex; align-items: center; gap: 12px;
  min-height: 52px; width: 100%; padding: 10px 14px;
  background: var(--surface-2); border: 1px solid var(--border); border-radius: 10px;
  color: var(--text); font: inherit; text-align: left; cursor: pointer;
}
.slot-menu__btn:hover, .slot-menu__btn:focus-visible { border-color: var(--accent); background: var(--surface-inset); }
.slot-menu__ico { flex: 0 0 auto; display: inline-flex; color: var(--accent); }
.slot-menu__ico svg { width: 22px; height: 22px; }
.slot-menu__txt { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.slot-menu__txt strong { font-size: 14px; }
.slot-menu__txt small { font-size: 12px; color: var(--text-secondary); }

/* ============================================================
   Iter 27 Welle B — Leads-Cluster (Pool / Pipeline / Caller-Leads)
   firm-card als Zeilen-Hybrid, Prio-Punkt-Badge, kompakte Filter.
   ============================================================ */

/* Prio-Badge: Punkt + Text (ersetzt Unicode-«●» hinter dem Label) */
.badge__dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; flex: none; opacity: .9; }

/* — firm-card v2 (.firm-card--lead): Name führt, Meta darunter, Kontakt rechts —
   Grid mit auto-Spalte: Titel und Kontakt teilen Zeile 1 ohne Überlappungsrisiko.
   Alt-Klassen (.firm-card__top/__headings) bleiben für manager-lost unangetastet. */
.firm-card--lead {
  position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto;
  gap: 7px 14px; padding: 12px 16px; align-items: start;
}
/* :not(.firm-card__check): der absolute Checkbox-Label darf KEINE definite
   Grid-Area bekommen — sonst wird die Grid-Area (Titelzeile, beginnt beim
   48px-Gutter) sein Containing-Block und die Box überlappt den Namen. */
.firm-card--lead > :not(.firm-card__check) { grid-column: 1 / -1; min-width: 0; }
.firm-card--lead .firm-card__title {
  grid-column: 1; grid-row: 1;
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap; min-width: 0;
}
.firm-card--lead .firm-card__title h3 {
  margin: 0; font-size: 15px; font-weight: 600; letter-spacing: -.005em;
  color: var(--text-primary); line-height: 1.35;
}
.firm-card--lead .firm-card__contact {
  grid-column: 2; grid-row: 1;
  display: flex; flex-wrap: wrap; gap: 6px; justify-content: flex-end;
}
.firm-card--lead .firm-card__meta { margin: 0; font-size: 12.5px; }
.firm-card--lead .firm-card__schmerz { margin-top: 0; padding: 6px 9px; display: flex; gap: 6px; align-items: baseline; }
.firm-card--lead .firm-card__schmerz .eico { flex: none; color: var(--warn-strong); }
.firm-card--lead .firm-card__cb { margin-top: 0; }
.firm-card--lead .firm-card__notes { margin: 0; }
.firm-card--lead .firm-card__bottom { margin-top: 0; }
.firm-card--lead .firm-card__qa { margin-top: 2px; }
/* Checkbox: hover-reveal auf Zeigegeräten (DESIGN.md §4), permanent auf Touch */
.firm-card--lead.firm-card--selectable { padding-left: 48px; }
.firm-card--lead .firm-card__check { top: 2px; left: 2px; }
@media (hover: hover) and (pointer: fine) {
  .firm-card--lead.firm-card--selectable .firm-card__check { opacity: 0; transition: opacity var(--dur-fast) var(--ease); }
  .firm-card--lead.firm-card--selectable:hover .firm-card__check,
  .firm-card--lead.firm-card--selectable:focus-within .firm-card__check,
  .firm-card--lead.firm-card--selectable.is-selected .firm-card__check { opacity: 1; }
}
/* Mobile: eine Spalte (Flex + order) — Kontakt-Pills rutschen unter die Meta-Zeile */
@media (max-width: 720px) {
  .firm-card--lead { display: flex; flex-direction: column; padding: 12px 14px; gap: 7px; }
  .firm-card--lead .firm-card__title { order: 1; }
  .firm-card--lead .firm-card__meta { order: 2; }
  .firm-card--lead .firm-card__contact { justify-content: flex-start; order: 3; }
  .firm-card--lead .firm-card__schmerz { order: 4; }
  .firm-card--lead .firm-card__cb { order: 5; }
  .firm-card--lead .firm-card__notes { order: 6; }
  .firm-card--lead .firm-card__qa { order: 7; }
  .firm-card--lead .firm-card__bottom { order: 8; }
}

/* — Filter-Panels kompakt (Pool / Pipeline / Leads-Liste): Selects 2-spaltig
   auf Mobile statt 4 gestapelter Vollbreite-Felder (ein Screen Filter = Defekt).
   Steht NACH den Basis-@media-Regeln (Cascade: später gewinnt). — */
@media (max-width: 720px) {
  .filters-panel { padding: 10px 12px; }
  .filters-panel .filters-toolbar { gap: 10px; }
  .filters-panel .filters-group { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
  .filters-panel .filters-group .field { min-width: 0; width: auto; gap: 4px; }
  .filters-panel .filters-group .field--search,
  .filters-panel .filters-group .field--wide { grid-column: 1 / -1; }
  .filters-panel .filters-actions { display: flex; gap: 8px; align-items: center; width: 100%; }
  .filters-panel .filters-actions .ghost-btn,
  .filters-panel .filters-actions .primary-btn { flex: 1 1 auto; }
  .filters-panel .filters-actions .results-pill { flex: 0 0 auto; }
}
@media (max-width: 380px) {
  .filters-panel .filters-group { grid-template-columns: 1fr; }
}

/* Zeitraum-Track darf sein Grid-Item nie aufblähen (min-width:auto-Falle):
   sonst schiebt der nowrap-Track das ganze Filter-Panel über den Viewport. */
.filters-toolbar--activity { grid-template-columns: minmax(0, 1fr); }
.time-range-slot { min-width: 0; }

/* ============================================================
   Iter 27 Welle D — Verkauf (Standorte/Offerten/Kunden/Rechnungen/
   P&L/Preisregeln/Offer-Editor): Foundation-Vokabular in den Listen.
   ============================================================ */

/* Stat-Strip-Variante für 3–5 Kennzahlen: EINE Zeile auf Desktop
   (grid-auto-flow verhindert Wrap-Artefakte der Hairlines), 2-spaltig mobil. */
/* minmax(0,1fr) statt 1fr: die auto-Mindestbreite der nowrap-Labels sprengte
   sonst das Grid (H-Scroll ≤375px, Iter-35-Testfund) — mit 0-Minimum darf die
   Zelle schrumpfen und das Label ellipst (overflow ist auf .stat__label). */
.stat-strip--auto { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); }
@media (max-width: 720px) {
  .stat-strip--auto { grid-auto-flow: row; grid-auto-columns: auto; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .stat-strip--auto .stat { border-left: 0; border-top: 1px solid var(--border); border-radius: 0; }
  .stat-strip--auto .stat:nth-child(-n+2) { border-top: 0; }
  .stat-strip--auto .stat:nth-child(even) { border-left: 1px solid var(--border); }
}

/* Einzel-Stat als Well (P&L Break-even neben dem Preis-Feld) */
.stat--well { background: var(--surface-inset); border-left: 0; border-radius: 10px; justify-content: center; }
.stat--well .stat__label { white-space: normal; overflow: visible; }

/* Tabellen-Zahlenspalten: rechtsbündig + tabular + unbrechbar (DESIGN.md §4
   Tabelle) — «CHF 59'481.95» darf nie mitten im Betrag umbrechen. Mobile-
   Stapelmodus (td = flex, Wert rechts) bleibt davon unberührt. */
.sl-table th.num, .sl-table td.num {
  text-align: right; font-variant-numeric: tabular-nums lining-nums;
  white-space: nowrap; overflow-wrap: normal;
}
/* Datums-/ID-Zellen: kompakt halten (die overflow-wrap:anywhere-Datenregel
   oben bricht sonst «09.07.26» mitten im Datum, wenn Nachbarn drücken) */
.sl-table .nw { white-space: nowrap; overflow-wrap: normal; }

/* Listen-Tabellen als EIN Panel (DESIGN.md §1): Panel-Fläche + Scroll-Hint-
   Gradienten in einem Background (die .table-wrap-Gradienten allein liessen
   die Panel-Fläche sonst transparent — .table-wrap gewinnt die Kaskade). */
.table-wrap.panel {
  padding: 2px 0 4px;
  background:
    linear-gradient(to right,  var(--surface), rgba(20,20,20,0)) left  center / 24px 100% no-repeat local,
    linear-gradient(to left,   var(--surface), rgba(20,20,20,0)) right center / 24px 100% no-repeat local,
    radial-gradient(farthest-side at 0% 50%, rgba(var(--tint-rgb), .16), rgba(var(--tint-rgb), 0)) left  center / 14px 100% no-repeat scroll,
    radial-gradient(farthest-side at 100% 50%, rgba(var(--tint-rgb), .16), rgba(var(--tint-rgb), 0)) right center / 14px 100% no-repeat scroll,
    linear-gradient(180deg, rgba(255,255,255,.015), rgba(255,255,255,0) 42%), var(--surface);
}
.table-wrap.panel .team-table th { padding-top: 13px; }
@media (max-width: 720px) {
  .table-wrap.panel { padding: 4px 0; }
}

/* ============================================================
   Iter 27 Welle E — Team/Analyse/Admin/Profil
   Notizen, Dirty-Flag, Modal-KPI-Strip, iCal-Hilfe.
   ============================================================ */

/* Hinweis-Note: erhabene Fläche + Inset-Akzent-Bar (ersetzt border-left-Streifen
   und Roh-rgba-Inline-Blöcke; DESIGN.md Kill-Liste). */
.note {
  padding: 10px 14px; border-radius: 10px;
  font-size: 13px; line-height: 1.55; color: var(--text-secondary);
  background: var(--surface-2);
  box-shadow: inset 2.5px 0 0 var(--accent);
}
.note strong { color: var(--text-primary); }
.note .eico { color: var(--warn-strong); }
.note--warn { box-shadow: inset 2.5px 0 0 var(--warn-deep); background: rgba(245, 184, 61, .07); }
.note--warn strong { color: var(--warn-strong); }

/* Katalog-Editor: «ungespeicherte Änderungen» — CSS-Punkt statt Unicode-«●» */
.dirty-flag { display: inline-flex; align-items: center; gap: 7px; color: var(--medium); font-size: 13px; font-weight: 600; }
.dirty-flag:not(:empty)::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: currentColor; flex: none; }

/* User-Detail-Modal: KPI-Minis als Strip (4-spaltig, Hairlines; ersetzt
   die Icon-losen kpi-card--mini-Boxen-in-Boxen) */
.kpi-strip--modal { grid-template-columns: repeat(4, minmax(0, 1fr)); padding: 0; }
.kpi-strip--modal .kpi-pill { padding: 8px 14px; }
.kpi-strip--modal .kpi-pill strong { font-size: 18px; }
.kpi-strip--modal .kpi-pill:nth-child(4n+1) { border-left: 0; }
.kpi-strip--modal .kpi-pill:nth-child(n+5) { border-top: 1px solid var(--border); }
@media (max-width: 640px) {
  .kpi-strip--modal { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .kpi-strip--modal .kpi-pill:nth-child(2n+1) { border-left: 0; }
  .kpi-strip--modal .kpi-pill:nth-child(n+3) { border-top: 1px solid var(--border); }
}

/* Profil: iCal-Anleitung als ruhiges Well (ersetzt Inline-rgba-Details-Block) */
.ics-help { margin: 14px 0; padding: 12px 14px; background: var(--surface-inset); border-radius: 10px; }
.ics-help summary { cursor: pointer; font-weight: 600; font-size: 13.5px; }
.ics-help > div { margin-top: 10px; color: var(--text-secondary); font-size: 13px; line-height: 1.6; }

/* Nicht-klickbare firm-card-Zeile (manager-lost: Aktion ist der Button, nicht
   die Karte) — neutralisiert Cursor + Hover-Lift der klickbaren Basis. */
.firm-card--static { cursor: default; }
.firm-card--static:hover {
  transform: none; box-shadow: var(--shadow-sm);
  background: linear-gradient(180deg, rgba(255,255,255,.015), rgba(255,255,255,0) 42%), var(--surface);
}

/* ============================================================
   Iter 27 Welle F — geteilte Komponenten/Modals
   (Toast-Stack + Empty-State-Ring leben in ihren Foundation-
   Sektionen; hier nur die neuen Selektions-/Detail-Muster.)
   ============================================================ */

/* Assign-Modal: gewählte Person = Tint + Inset-Bar (Selektions-Idiom,
   keine Vollborder). :has ist im Codebestand etabliert (.oc-status__option). */
.user-checkbox:has(input:checked) {
  background: linear-gradient(180deg, rgba(var(--accent-rgb), .07), rgba(var(--accent-rgb), .04)), var(--surface-2);
  box-shadow: inset 2.5px 0 0 var(--accent);
}
/* Personen-Namen sind Daten, keine Micro-Labels — die .field-span-Kaskade
   (uppercase 10.5px) darf sie nicht erfassen. */
.user-checkbox .user-checkbox__body {
  text-transform: none; letter-spacing: normal; font-size: 13.5px;
}
.user-checkbox__body strong { color: var(--text-primary); }

/* Fieldset ohne native Rahmen-Chrome (assign-modal «Wer bekommt Leads?» /
   «Priorität») — Legende als Micro-Label wie .field span, kein Wireframe. */
.modal fieldset.field { border: 0; padding: 0; margin: 0; min-width: 0; }
.modal fieldset.field legend {
  padding: 0; margin-bottom: 2px;
  color: var(--text-tertiary); font-size: 11px; text-transform: uppercase;
  letter-spacing: .07em; font-weight: 600;
}

/* .note mit Fliesstext-Absatz (firm-modal Cross-Reference) */
.note p { margin: 4px 0 0; color: var(--text-secondary); }

/* Outcome-Modal: Firmenname in der Sub-Zeile führt (Titel stellt die Frage) */
.modal__header-sub strong { color: var(--text-primary); font-weight: 600; }


/* Iter 27 Fix-Runde (Kritiker): Analyse-/Perf-Tabellen — Zahlen rechts, tabular.
   Muster: 1. Spalte = Name/Text, alle weiteren numerisch (Verteilt/…/Win %). */
.perf-table th:not(:first-child), .perf-table td:not(:first-child),
.analyse-table th:not(:first-child), .analyse-table td:not(:first-child) {
  text-align: right; font-variant-numeric: tabular-nums lining-nums;
}

/* =========================================================================
   Iter 27 — Motion + Command-Palette (aus iter27.css gemerged: eine Wahrheit)
   ========================================================================= */

/* =========================================================================
   Iter 27 — Motion + Command-Palette (DESIGN.md §5/§6).
   View-Enter, ⌘K-Palette, Sidebar-Suche; FAB nur noch Touch/Mobile.
   ========================================================================= */
/* View-Enter: Fade + 4px-Rise — Zustand, keine Ladeshow */
@keyframes view-enter { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
#app-view.view-enter { animation: view-enter var(--dur) var(--ease); }

/* Listen-Stagger: nur die ersten 8 Karten, 16ms Versatz, einmal pro Render */
.firms-list > .firm-card { animation: view-enter var(--dur) var(--ease) backwards; }
.firms-list > .firm-card:nth-child(1) { animation-delay: 0ms; }
.firms-list > .firm-card:nth-child(2) { animation-delay: 16ms; }
.firms-list > .firm-card:nth-child(3) { animation-delay: 32ms; }
.firms-list > .firm-card:nth-child(4) { animation-delay: 48ms; }
.firms-list > .firm-card:nth-child(5) { animation-delay: 64ms; }
.firms-list > .firm-card:nth-child(6) { animation-delay: 80ms; }
.firms-list > .firm-card:nth-child(7) { animation-delay: 96ms; }
.firms-list > .firm-card:nth-child(8) { animation-delay: 112ms; }

/* Sidebar-Suche (öffnet die Palette) — Input-Optik, aber ein Button */
.sidebar__search {
  display: flex; align-items: center; gap: 9px; width: 100%; min-height: 34px;
  margin: 0 0 10px; padding: 7px 10px;
  background: var(--surface-inset); border: 1px solid var(--border); border-radius: var(--radius-button);
  color: var(--text-tertiary); cursor: pointer; font: 500 13px/1 inherit; text-align: left;
  transition: border-color var(--transition), background var(--transition), color var(--transition);
}
.sidebar__search:hover { border-color: var(--line-strong); color: var(--text-secondary); background: var(--surface-hover); }
.sidebar__search-ic { display: inline-flex; flex: none; width: 15px; height: 15px; }
.sidebar__search-ic svg { width: 15px; height: 15px; }
.sidebar__search-label { flex: 1; overflow: hidden; text-overflow: ellipsis; }
.sidebar__search-kbd {
  font: 500 10.5px/1 inherit; color: var(--text-tertiary);
  border: 1px solid var(--border); border-radius: 4px; padding: 3px 5px;
  background: rgba(var(--tint-rgb), .03);
}
@media (min-width: 901px) {
  body.sidebar-collapsed .sidebar__search { justify-content: center; padding: 7px; }
  body.sidebar-collapsed .sidebar__search-label, body.sidebar-collapsed .sidebar__search-kbd { display: none; }
}
@media (max-width: 1024px), (pointer: coarse) { .sidebar__search { min-height: 44px; } }

/* Command-Palette */
.cp { position: fixed; inset: 0; z-index: 400; }
.cp__backdrop { position: absolute; inset: 0; background: rgba(4, 8, 12, .55); backdrop-filter: blur(6px); animation: backdrop-in var(--dur) var(--ease); }
:root[data-theme="light"] .cp__backdrop { background: rgba(15, 30, 36, .32); }
.cp__panel {
  position: relative; margin: min(14vh, 120px) auto 0; width: min(600px, calc(100vw - 28px));
  background: var(--surface-2); border: 1px solid var(--border); border-radius: 14px;
  box-shadow: var(--shadow-lg); overflow: hidden;
  animation: modal-in var(--dur) var(--ease);
}
.cp__inputrow { display: flex; align-items: center; gap: 10px; padding: 6px 14px; border-bottom: 1px solid var(--border); }
.cp__searchicon { display: inline-flex; width: 17px; height: 17px; color: var(--text-tertiary); flex: none; }
.cp__searchicon svg { width: 17px; height: 17px; }
.cp__input {
  flex: 1; min-width: 0; min-height: 46px; border: 0; outline: none; background: transparent;
  color: var(--text-primary); font-size: 15px;
}
.cp__input::placeholder { color: var(--text-tertiary); }
.cp__kbd { font: 500 10.5px/1 inherit; color: var(--text-tertiary); border: 1px solid var(--border); border-radius: 4px; padding: 3px 5px; text-transform: uppercase; }
.cp__list { max-height: min(52vh, 420px); overflow-y: auto; padding: 6px; }
.cp__group { padding: 8px 10px 4px; color: var(--text-tertiary); font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .07em; }
.cp__item {
  display: flex; align-items: center; gap: 11px; width: 100%;
  padding: 9px 10px; min-height: 40px; border: 0; border-radius: 8px;
  background: transparent; color: var(--text); font: 500 13.5px/1.3 inherit; text-align: left; cursor: pointer;
}
.cp__item.is-active { background: rgba(var(--accent-rgb), .12); color: var(--text-primary); }
.cp__item.is-active .cp__item-ic { color: var(--accent); }
.cp__item-ic { display: inline-flex; flex: none; width: 17px; height: 17px; color: var(--text-tertiary); }
.cp__item-ic svg { width: 17px; height: 17px; }
.cp__item-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cp__item-meta { color: var(--text-tertiary); font-size: 12px; flex: none; }
.cp__item-go { display: inline-flex; color: var(--text-tertiary); opacity: 0; transition: opacity var(--transition); }
.cp__item.is-active .cp__item-go { opacity: 1; }
.cp__empty { padding: 22px 14px; text-align: center; color: var(--text-tertiary); font-size: 13px; }
body.cp-open { overflow: hidden; }
@media (max-width: 720px) {
  .cp__panel { margin-top: max(16px, var(--sat)); }
  .cp__list { max-height: min(62vh, 480px); }
  .cp__item { min-height: 44px; }
}

/* FAB: am Desktop ersetzt durch Sidebar-Suche/⌘K + Kontext-Buttons; auf Touch
   bleibt er (Daumen-Ergonomie), aber als präzises Werkzeug statt Material-Blob. */
@media (min-width: 901px) { .qc { display: none; } }
.qc__fab {
  width: 52px; height: 52px; border-radius: 15px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.25), 0 6px 16px rgba(2,6,8,.4), 0 16px 40px -8px rgba(var(--accent-rgb),.35);
}
.qc__fab:active { transform: scale(.94); }

/* Reduced Motion: alle Iter-27-Animationen neutralisieren */
@media (prefers-reduced-motion: reduce) {
  #app-view.view-enter, .firms-list > .firm-card, .cp__backdrop, .cp__panel, .modal, .modal-backdrop, .toast { animation: none !important; }
}

/* Login-Politur (Iter 27): Untertitel, Passwort-Toggle, Karten-Entrance */
.login-card { animation: modal-in var(--dur-slow) var(--ease); }
.login-sub { margin: -14px 0 18px; color: var(--text-tertiary); font-size: 13px; }
.pw-wrap { position: relative; display: block; }
.pw-wrap input { width: 100%; padding-right: 44px; }
.pw-toggle {
  position: absolute; right: 4px; top: 50%; transform: translateY(-50%);
  width: 34px; height: 34px; display: grid; place-items: center;
  border: 0; background: transparent; color: var(--text-tertiary); border-radius: 7px; cursor: pointer;
}
.pw-toggle:hover { color: var(--text-secondary); background: rgba(var(--tint-rgb), .06); }
.pw-toggle svg { width: 17px; height: 17px; }

/* Fix-Runde (Kritiker): FAB verdeckt keine Inhalte — Listen bekommen Reserve */
@media (max-width: 900px) {
  body.has-quick-create .main-shell { padding-bottom: calc(112px + var(--sab)); }
}

/* ============================================================================
   Iter 30 I2 — Sichtbarkeit (v78): Wizard-Annotation, Lösungs-Cards,
   Belegungs-Heatmap, Verzugs-/Renewal-Ampel, Guthaben, Konflikt-Queue.
   Kanon: Mobile-@media NACH der Basis (project_css_cascade_mobile),
   Touch-Floor via (max-width:1024px),(pointer:coarse).
   ========================================================================== */

/* ---- Live-Verfügbarkeit — Wizard-Annotation Schritt 2 (§2K) ---- */
.so-avail-head { margin: 12px 0 2px; }
.so-avail-head b { color: var(--text-primary); font-weight: 600; }
.so-avail-sub { margin: 0 0 4px; font-size: 11.5px; }
.so-avail-badge {
  margin-left: auto;
  flex-shrink: 0;
  padding: 2px 7px;
  border-radius: var(--radius-badge);
  font-size: 11.5px;
  font-weight: 600;
  white-space: nowrap;
  color: var(--text-secondary);
  background: var(--surface-inset);
}
.so-avail-badge--warn { background: rgba(245, 158, 11, .13); color: var(--warn-strong); }

/* ---- Annahme-Dialog — Lösungs-Cards (§2K/G11) ---- */
.aod-status { margin: 2px 0 0; }
.aod-cards {
  margin: 8px 0 2px;
  border-radius: 10px;
  background: var(--surface-inset);
  overflow: hidden;
}
.aod-card {
  display: block;
  width: 100%;
  text-align: left;
  padding: 10px 14px;
  background: none;
  border: 0;
  cursor: pointer;
  color: var(--text-primary);
  font: inherit;
}
.aod-card + .aod-card { border-top: 1px solid var(--border); }
.aod-card:hover:not(:disabled):not(.is-on) { background: rgba(var(--tint-rgb), .04); }
.aod-card.is-on {
  background: var(--accent-soft);
  box-shadow: inset 2.5px 0 0 var(--accent); /* Selektions-Idiom, keine Vollborder */
}
.aod-card:disabled { opacity: .55; cursor: not-allowed; }
.aod-card__title { display: block; font-size: 13.5px; font-weight: 600; }
.aod-card__sub { display: block; margin-top: 2px; font-size: 12px; color: var(--text-secondary); }
.aod-card__rows { display: flex; flex-direction: column; gap: 2px; margin-top: 6px; font-size: 12px; color: var(--text-secondary); }
.aod-editor-cta { margin: 8px 0 0; display: flex; justify-content: flex-end; }

/* ---- Belegungs-Heatmap (§2K, components/availability-heatmap.js) ---- */
.avh { display: grid; gap: 10px; }
.avh__head { display: flex; align-items: center; justify-content: center; gap: 8px; }
.avh__month { font-size: 14px; font-weight: 600; min-width: 140px; text-align: center; font-variant-numeric: tabular-nums; }
.avh__nav--prev svg { transform: scaleX(-1); }
.avh__weekdays, .avh__grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.avh__wd { text-align: center; font-size: 11px; color: var(--text-secondary); }
.avh__day { appearance: none; border: 0; background: transparent; border-radius: 8px; padding: 6px 2px 5px; display: grid; gap: 3px; justify-items: center; align-content: center; color: var(--text); font: inherit; min-height: 46px; }
.avh__day:not(:disabled) { cursor: pointer; }
.avh__day:not(:disabled):hover { box-shadow: inset 0 0 0 1px var(--border); }
.avh__num { font-size: 11px; line-height: 1; color: var(--text-secondary); }
.avh__free { font-size: 12.5px; font-weight: 600; line-height: 1; font-variant-numeric: tabular-nums; }
.avh__cap { color: var(--text-secondary); font-weight: 500; }
.avh__day.is-load-1 { background: rgba(var(--tint-rgb), .05); }
.avh__day.is-load-2 { background: rgba(var(--tint-rgb), .10); }
.avh__day.is-load-3 { background: rgba(var(--tint-rgb), .16); }
.avh__day.is-load-4 { background: rgba(var(--tint-rgb), .24); }
.avh__day.is-closed, .avh__day.is-nocap { opacity: .45; }
.avh__day.is-past { opacity: .55; }
.avh__day.is-under .avh__free { color: var(--bad-strong); }
.avh__day.is-today, .avh__day.is-today:not(:disabled):hover { box-shadow: inset 0 0 0 1px var(--accent); }
.avh-rows { display: grid; }
.avh-row { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; padding: 8px 0; border-top: 1px solid var(--border); flex-wrap: wrap; }
.avh-row:first-child { border-top: 0; padding-top: 0; }
.avh-row.is-expired { opacity: .5; }
.avh-row__main { display: grid; gap: 2px; min-width: 0; }
.avh-row__meta { font-size: 12px; color: var(--text-secondary); }
.avh-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 4px; }
.avh-form .field--wide, .avh-form .modal-actions, .avh-form .avh-error { grid-column: 1 / -1; }
.avh-error { margin: 0; font-size: 12.5px; color: var(--bad-strong); }

/* ---- Verzugs-Ampel (§7C), Renewal (§2N-2), Guthaben (§7D) ----
   Stufe 1/3 nutzen bestehende sl-badge--pipeline/--storniert; nur Stufe 2
   (orange) ist neu (Alpha-Fläche + Strong-Text). */
.verzug-badge--2 { background: rgba(249, 115, 22, .16); color: var(--warn-strong); }
.renewal-badge--anschluss { gap: 3px; }
.credit-row--applied { opacity: .55; }
.credit-form { display: flex; gap: 8px; align-items: flex-end; flex-wrap: wrap; margin-top: 10px; }
.credit-form .field { flex: 1 1 140px; }
.credit-form button[type="submit"] { flex: 0 0 auto; }
.credit-apply { display: flex; gap: 8px; align-items: flex-end; flex-wrap: wrap; margin-top: 6px; }
.credit-apply .field { flex: 1 1 180px; }

/* ---- Inventar Konflikt-Queue (§2E/§7G — admin-only View) ---- */
.conflict-bookings { margin-top: 6px; font-size: 12.5px; color: var(--text-secondary); }
.conflict-bookings span { display: block; }
.conflict-credit { padding-top: 12px; border-top: 1px solid var(--border); }

/* ---- I2 Mobile NACH der Basis ---- */
@media (max-width: 720px) {
  .aod-card { padding: 12px; }
  .avh__weekdays, .avh__grid { gap: 2px; }
  .avh__day { padding: 5px 1px 4px; min-height: 42px; }
  .avh__free { font-size: 11.5px; }
  .avh-form { grid-template-columns: 1fr; }
  .credit-form, .credit-apply { flex-direction: column; align-items: stretch; }
  .credit-form .field, .credit-apply .field { min-width: 0; width: 100%; }
}
@media (max-width: 400px) {
  .avh__cap { display: none; } /* «frei/cap» → nur «frei» auf sehr schmal */
}
/* ---- I2 Touch-Floor ---- */
@media (max-width: 1024px), (pointer: coarse) {
  .aod-card { min-height: 44px; }
  .avh__day:not(:disabled) { min-height: 44px; }
  .avh__nav { min-width: 44px; min-height: 44px; }
  .credit-form button, .credit-apply button { min-height: 44px; }
}

/* Iter 31 M4 — Fällig-Zähler auf der «Mein Tag»-Tür (updateTaskBadge, main.js).
   DESIGN.md: kleine Pill, kein Border, Warn-Ton für Dringlichkeit; ans
   Dateiende (nach allen Basis-/@media-Regeln — Cascade-Kanon). */
.nav-tab { position: relative; }
.nav-tab__badge {
  margin-left: auto;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 9px;
  background: var(--bad);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  line-height: 1;
  flex: 0 0 auto;
}
/* Eingeklappte Sidebar: Label ausgeblendet → Zähler als Punkt oben rechts am Icon. */
.sidebar-collapsed .nav-tab__badge {
  position: absolute;
  top: 4px;
  right: 4px;
  margin: 0;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
}

/* Entity-Link (Iter 32 «Verzahnung»): jede Kunden-/Partner-Erwähnung im Modul ist
   navigierbar, aber dezent — liest sich als Text mit feiner Hairline-Unterstreichung,
   Cyan (= Interaktion, DESIGN.md §3) nur bei Hover/Fokus. Kein Farb-Rauschen. */
.entity-link {
  color: inherit;
  text-decoration: underline;
  text-decoration-color: var(--hairline-strong, var(--hairline));
  text-underline-offset: 2px;
  text-decoration-thickness: 1px;
  border-radius: 3px;
  transition: color var(--dur-fast, .12s) var(--ease, ease), text-decoration-color var(--dur-fast, .12s) var(--ease, ease);
}
.entity-link:hover,
.entity-link:focus-visible {
  color: var(--accent);
  text-decoration-color: var(--accent);
}
.entity-link:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* Iter 30 N1 — Werbematerial-Panel (Kunden-Detail + Freigabe-Queue).
   Ans Ende gesetzt, damit keine frühere @media-Regel überschreibt
   (project_css_cascade_mobile). Nutzt Precision-Ink-Tokens. */
.material-panel {
  border: 1px solid var(--hairline);
  border-radius: 10px;
  padding: 12px 14px;
  background: var(--panel-2, rgba(255, 255, 255, 0.02));
}
.material-panel__head {
  display: flex;
  gap: 10px;
  align-items: baseline;
  flex-wrap: wrap;
}
.material-panel__hint {
  font-size: 12px;
  color: var(--text-tertiary);
}
.material-panel__note {
  margin: 8px 0 0;
  font-size: 12.5px;
  color: var(--warn-strong, #e5484d);
}
.material-panel__files {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 10px 0;
}
.material-file {
  display: flex;
  align-items: center;
  gap: 8px;
  border: 1px solid var(--hairline);
  border-radius: 8px;
  padding: 6px 10px;
}
.material-file__open {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1px;
  background: none;
  border: none;
  cursor: pointer;
  text-align: left;
  color: var(--text);
  padding: 0;
}
.material-file__open strong {
  font-size: 13px;
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 100%;
}
.material-file__open span {
  font-size: 11.5px;
  color: var(--text-tertiary);
}
.material-file__open:hover strong {
  color: var(--accent);
}
.material-file__del {
  flex: none;
  font-size: 13px;
  line-height: 1;
}
.material-panel__actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
}
.material-panel__upload {
  cursor: pointer;
}
.material-row > td {
  padding: 0 12px 12px;
  background: var(--panel-2, rgba(255, 255, 255, 0.02));
}

/* §7f — Blick-Führung für breite Tabellen (Owner-Wunsch «smooth & smart»).
   Auf grossen Screens (2560/3440) nutzen Tabellen die volle Breite (Owner-Entscheid
   style.css:190) → langer Augen-Weg Name→Zahl. NICHT mit Content-Cap bekämpft
   (v73-Regression), sondern GEFÜHRT: (1) subtile Zebra = statische Schiene je Zeile,
   (2) smoother Hover mit Accent-Anker links (Lead-Row-Muster) trägt den Blick von
   links nach rechts. Precision Ink: sehr dezent, Chrome verschwindet, Daten Held.
   Ans Ende gesetzt (Cascade-Regel project_css_cascade_mobile). */
.sl-table tbody tr { transition: background var(--dur-fast, 120ms) ease; }
.sl-table tbody tr:nth-child(even) > td { background: rgba(var(--tint-rgb), .032); }
.sl-table tbody tr[data-id]:hover > td,
.sl-table tbody tr[data-ort]:hover > td,
.sl-table tbody tr[data-month]:hover > td,
.sl-table tbody tr[data-expense]:hover > td {
  background: rgba(var(--accent-rgb), .07);
}
.sl-table tbody tr[data-id]:hover > td:first-child,
.sl-table tbody tr[data-ort]:hover > td:first-child,
.sl-table tbody tr[data-month]:hover > td:first-child,
.sl-table tbody tr[data-expense]:hover > td:first-child {
  box-shadow: inset 2px 0 0 var(--accent-hover);
}

/* ---- Kalkulator (#/v/calc, Iter 29 E7) — Gewinn/Verlust-Balken (dataviz:
   eine Serie, Polarität good/bad, aktueller Preis volle Deckkraft) ---- */
.calc-chart {
  display: flex; gap: 10px; align-items: stretch; margin-top: 12px;
  overflow-x: auto; padding-bottom: 4px;
}
.calc-col { flex: 1 1 0; min-width: 44px; text-align: center; }
.calc-col__top, .calc-col__bot { height: 76px; display: flex; justify-content: center; }
.calc-col__top { align-items: flex-end; }
.calc-col__bot { align-items: flex-start; }
.calc-col__base { height: 1px; background: var(--hairline); }
.calc-bar { width: 60%; max-width: 34px; opacity: .45; }
.calc-bar--pos { background: var(--good); border-radius: 4px 4px 0 0; }
.calc-bar--neg { background: var(--bad); border-radius: 0 0 4px 4px; }
.calc-bar.is-cur { opacity: 1; }
.calc-col__label {
  margin-top: 6px; font-size: 11.5px; color: var(--text-tertiary);
  font-variant-numeric: tabular-nums;
}
.calc-col__label.is-cur { color: var(--text-primary); font-weight: 650; }

/* ---- Signage-Board (#/v/signage, Iter 34 S1) ---- */
.sig-loop {
  display: flex; gap: 3px; margin-top: 8px; flex-wrap: wrap;
}
.sig-slot {
  width: 22px; height: 8px; border-radius: 3px; flex: 0 0 auto;
}
.sig-slot.is-used { background: var(--accent); }
.sig-slot.is-free { background: rgba(var(--tint-rgb), .16); }
.sig-tag {
  font-size: 11px; padding: 1px 7px; border-radius: 999px;
  background: rgba(var(--tint-rgb), .14); color: var(--text-secondary);
  font-variant-numeric: tabular-nums;
}
.sig-screen:first-of-type { border-top: none !important; }

/* ---- Regel-Zentrum (#/a/rules, Iter 46 S3.1) ----
   Regeln sind Sätze, Werte stehen im Satzfluss (Oberflächen-Reinheit).
   Regelwerk-Index = EIN Panel mit Hairline-Rows (DESIGN.md §1). */
.rules-panel { margin-bottom: 16px; }
.rules-sentence {
  margin: 0; padding: 12px 0; font-size: 14px; line-height: 1.6;
  color: var(--text-primary); border-bottom: 1px solid var(--hairline);
}
.rules-sentence strong { font-variant-numeric: tabular-nums; }
.rules-days { display: inline-flex; align-items: center; gap: 6px; }
.rules-days input {
  width: 72px; min-height: 44px; text-align: center;
  font-size: 14px; font-variant-numeric: tabular-nums;
}
.rules-foot {
  display: flex; justify-content: space-between; align-items: center;
  gap: 12px; flex-wrap: wrap; padding-top: 12px;
}
.rules-meta { font-size: 12px; color: var(--text-tertiary); font-variant-numeric: tabular-nums; }
.rules-actions { display: inline-flex; gap: 8px; }
.rules-history { margin-top: 10px; border-top: 1px solid var(--hairline-strong, var(--hairline)); }
.rules-history__row {
  display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  padding: 9px 0; font-size: 12.5px; color: var(--text-secondary);
  border-bottom: 1px solid var(--hairline); font-variant-numeric: tabular-nums;
}
.rules-history__row.is-current { color: var(--text-primary); }
.rules-index { display: flex; flex-direction: column; }
.rules-index__row {
  display: flex; align-items: center; gap: 12px; min-height: 56px;
  padding: 8px 2px; text-decoration: none; color: inherit;
  border-bottom: 1px solid var(--hairline);
}
.rules-index__row:last-child { border-bottom: none; }
.rules-index__row:hover { background: var(--surface-3); }
.rules-index__icon { display: inline-flex; color: var(--text-tertiary); flex: 0 0 auto; }
.rules-index__text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.rules-index__text strong { font-size: 14px; font-weight: 600; }
.rules-index__text small { font-size: 12px; color: var(--text-tertiary); }
.rules-index__state {
  margin-left: auto; font-size: 12px; color: var(--text-secondary);
  font-variant-numeric: tabular-nums; text-align: right; flex: 0 0 auto;
}
.rules-index__chevron { display: inline-flex; color: var(--text-tertiary); flex: 0 0 auto; }
@media (max-width: 720px) {
  .rules-index__state { display: none; } /* Wegweiser bleibt, Zählstand weicht der Breite */
}

/* ---- Vertriebs-Konfigurator (#/p/vertriebe, Iter 47 S4.1) ----
   Liste = EIN Panel mit Hairline-Rows; Vereinbarung als Satz mit Werten
   im Satzfluss (gleiches Idiom wie das Regel-Zentrum). */
.vt-row { padding: 10px 2px; border-bottom: 1px solid var(--hairline); }
.vt-row:last-child { border-bottom: none; }
.vt-row.is-inactive { opacity: .55; }
.vt-row__main {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  min-height: 48px; justify-content: space-between;
}
.vt-row__text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.vt-row__text strong { font-size: 14px; font-weight: 600; }
/* S4.3: KEIN tabular-nums auf dieser Zeile — sie ist Fliesstext («Vertriebs-
   Berater · rita@… · Erhält 9 % · seit 01.03.2026») und richtet sich an nichts
   aus. Inter gibt dem Bindestrich unter tabular-nums die volle Ziffernbreite,
   was «Vertriebs - Berater» aussehen liess. Tabellenziffern bleiben dort, wo
   Spalten untereinander stehen (Beträge in .vt-row__actions). */
.vt-row__text small { font-size: 12px; color: var(--text-tertiary); }
.vt-row__actions { display: inline-flex; align-items: center; gap: 8px; flex: 0 0 auto; flex-wrap: wrap; }
/* .field bringt min-width:150px mit — für den nackten Aktiv-Schalter in der
   Row ist das Überlauf-Ursache @390px (gemessen: right=557). */
.vt-row__actions .field--check { min-width: 0; width: auto; }
.vt-agree {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 10px 0 4px; font-size: 14px; line-height: 1.6;
}
.vt-agree[hidden] { display: none; }
.vt-agree__sentence { display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.vt-agree input[data-f="von"] { min-height: 44px; }
.vt-agree input[data-f="pct"] { width: 88px; min-height: 44px; text-align: center; font-variant-numeric: tabular-nums; }
.vt-history, .vt-logins, .vt-konto { padding: 6px 0 2px; }
/* S4.2b Vertriebs-Portal: Klartext-Satz über dem Provisions-Stand. */
.vt-portal__satz { margin: 0 0 14px; font-size: 14px; color: var(--text-secondary); }
/* S4.3: erklärender Satz im Anlege-Formular; Zugangs-Schalter mit Beschriftung
   (ein nackter Kasten sagt nicht, was er tut). */
.vt-portal__hint { flex-basis: 100%; margin: 4px 0 0; font-size: 13px; color: var(--text-tertiary); line-height: 1.5; }
.vt-row__switch { display: inline-flex; align-items: center; gap: 6px; }
.vt-row__switch span { font-size: 12px; color: var(--text-tertiary); }
.vt-warns { margin: 8px 0 0; padding-left: 18px; font-size: 13px; color: var(--text-secondary); }
.vt-warns li { margin: 2px 0; }
.vt-logins .is-inactive { opacity: .55; }

/* ---- Zwei-Schritt-Anmeldung (#/enroll-2fa + #/verify-2fa, Iter 49) ---- */
.mfa-qr { display: flex; justify-content: center; margin: 14px 0; }
.mfa-qr svg, .mfa-qr img {
  width: 196px; height: 196px; border-radius: 8px; background: #fff; padding: 8px;
}
.mfa-secret { margin: 0 0 14px; font-size: 13px; color: var(--text-secondary); }
.mfa-secret summary { cursor: pointer; min-height: 44px; display: flex; align-items: center; }
.mfa-secret code {
  display: block; padding: 10px 12px; border-radius: 8px; background: var(--surface-inset);
  font-family: var(--font-mono, monospace); font-size: 13px; letter-spacing: .08em;
  word-break: break-all; user-select: all;
}

/* =========================================================================
   Kundenportal (Iter 54 / S5.3) — die Aussenwelt-Sicht.
   Reihenfolge eisern (Memory project_css_cascade_mobile): Basis zuerst, der
   Touch-/Mobile-Block DANACH — sonst greift der Override für eine später
   definierte Komponente nicht.
   ========================================================================= */
.kp-count { color: var(--text-tertiary); font-size: 12px; font-variant-numeric: tabular-nums; }

.kp-filter { display: flex; gap: 10px; flex-wrap: wrap; margin: 12px 0 4px; }
.kp-search { flex: 1 1 220px; min-width: 0; }
.kp-kanton { flex: 0 0 auto; width: auto; min-width: 140px; }

/* Liste = EIN Panel mit Hairline-Zeilen, nicht N gerahmte Karten (DESIGN §1).
   Deckel + Innen-Scroll, damit 199 Standorte die Seite nicht zur Endlosrolle
   machen (DESIGN §7: >12'000px iPhone ist ein Defekt). */
.kp-liste { max-height: min(56vh, 520px); overflow-y: auto; margin: 0 -4px; }
.kp-row {
  display: grid; align-items: center; gap: 4px 12px; cursor: pointer;
  grid-template-columns: 20px minmax(0, 1.4fr) minmax(0, 1fr) auto auto;
  padding: 10px 12px; border-bottom: 1px solid var(--hairline);
  border-radius: var(--radius-button); transition: background var(--dur);
}
.kp-row:last-child { border-bottom: 0; }
.kp-row:hover { background: var(--surface-3); }
/* Selektion = Inset-Balken + Tint, nie Vollborder (DESIGN Verbote). */
.kp-row.is-on { background: var(--accent-soft); box-shadow: inset 2.5px 0 0 var(--accent); }
.kp-row input[type="checkbox"] { width: 18px; height: 18px; accent-color: var(--accent); margin: 0; }
.kp-row__name { font-weight: 600; font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kp-row__ort { color: var(--text-secondary); font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kp-row__screens { color: var(--text-tertiary); font-size: 12px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.kp-row__grenze {
  font-size: 11px; font-weight: 600; white-space: nowrap;
  color: var(--warn-strong);
}

.kp-cfg { display: flex; gap: 16px; flex-wrap: wrap; align-items: flex-start; margin-top: 12px; }
.kp-seg { flex-wrap: wrap; }
.kp-hint { color: var(--text-tertiary); font-size: 11px; line-height: 1.45; }

.kp-abschluss { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 16px; }
.kp-pruefen { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--hairline); }
.kp-pruefen__satz { font-size: 15px; font-weight: 600; line-height: 1.5; margin: 0; }
.kp-ok__text { color: var(--text-secondary); font-size: 14px; line-height: 1.5; margin: 4px 0 16px; }

.kp-buchung + .kp-buchung { margin-top: 16px; }
.kp-orte { margin-top: 16px; }
.kp-orte__row {
  display: grid; align-items: center; gap: 4px 12px;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) auto;
  padding: 9px 0; border-bottom: 1px solid var(--hairline);
}
.kp-orte__row:last-child { border-bottom: 0; }
.kp-orte__zeit { font-size: 13px; color: var(--text-secondary); font-variant-numeric: tabular-nums; white-space: nowrap; }

.kp-rechnung { margin-top: 16px; padding-top: 12px; border-top: 1px solid var(--hairline-strong); }
.kp-rechnung__kopf { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
/* Zahlungsangaben: der Einzahlungsschein des Kunden — Referenz und IBAN
   müssen abtippbar sein, also Mono + selektierbar. */
.kp-zahl { display: grid; grid-template-columns: auto 1fr; gap: 4px 16px; margin: 10px 0 0; }
.kp-zahl dt { color: var(--text-tertiary); font-size: 11px; font-weight: 600;
  text-transform: uppercase; letter-spacing: .06em; align-self: center; }
.kp-zahl dd { margin: 0; font-size: 13px; }
.kp-zahl__mono { font-family: var(--font-mono, monospace); letter-spacing: .04em;
  user-select: all; word-break: break-all; }

/* Touch-Floor (Memory project_tablet_touch_breakpoint): auch die Tablet-
   Bruchzone 768/1024 trifft, nicht nur 720. */
@media (max-width: 1024px), (pointer: coarse) {
  .kp-row { min-height: 52px; padding: 12px; }
  .kp-row input[type="checkbox"] { width: 22px; height: 22px; }
  .kp-seg .seg__btn { min-height: 44px; }
  .kp-abschluss .primary-btn, .kp-abschluss .ghost-btn { min-height: 44px; }
}
/* 390px: die Zeile bricht in zwei Ebenen statt fünf Spalten zu quetschen —
   Name oben, Ort + Zahlen darunter (sonst fällt Text unter den 11px-Floor). */
@media (max-width: 720px) {
  .kp-row {
    grid-template-columns: 22px minmax(0, 1fr);
    grid-template-areas: "cb name" ". meta";
  }
  .kp-row input[type="checkbox"] { grid-area: cb; }
  .kp-row__name { grid-area: name; white-space: normal; }
  .kp-row__ort { grid-area: meta; }
  .kp-row__screens, .kp-row__grenze { grid-column: 2; }
  .kp-liste { max-height: none; }
  .kp-cfg { gap: 12px; }
  .kp-cfg .field--narrow { max-width: none; flex: 1 1 130px; }
  .kp-orte__row { grid-template-columns: minmax(0, 1fr); }
  .kp-zahl { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .kp-zahl dd { margin-bottom: 8px; }
}