/* Apollon UI-Redesign — adesso design system, scoped under .crm
   ============================================================
   GEPFLEGTE QUELLE — diese Datei wird DIREKT bearbeitet.
   Verbindliche Änderungsregel: .context/conventions/21-redesign-css-source.md
   ===================================================================

   Herkunft: einmalig aus dem Design-Handoff-Bundle "Apollon neues Design"
   (2. Export, 2026-07-16) erzeugt — dessen vier Quelldateien (tokens.css,
   components.css, flow.css, flow-modules.css) lagen ausschliesslich in einem
   temporaeren Sitzungsordner und wurden nie versioniert. Sie sind unwiederbringlich
   weg. Der einmalige Generator (scripts/pr4.15-scope-redesign-css.mjs) war damit
   nicht mehr lauffaehig und wurde in RD1.10 (#333) entfernt.

   Der frueher hier stehende Hinweis, die Datei sei generiert und duerfe nur ueber einen
   erneuten Skriptlauf geaendert werden, war doppelt unwahr: das Skript lief nicht mehr,
   und die Datei wurde seither zweimal korrekt von Hand geaendert (PR4.17 P6 — AA-Kontrast
   --text-3; PR1.128 — .conf-unrated). Ein erneuter Lauf haette genau diese Korrekturen
   still zurueckgerollt.

   Aufbau (aus der urspruenglichen Erzeugung, weiterhin gueltig):
   - Google-Fonts @import entfernt (Self-Hosting via fonts.css)
   - Komponenten-CSS traegt den Praefix .crm, um das Legacy-Layout nicht zu beruehren
   - @keyframes bleiben global (werden ueber ihren Namen referenziert)
   - Dark laeuft ueber html[data-theme="dark"] .crm (ein Schalter, FOUC-sicher);
     der Klassen-Alias .crm.dark steht zur Paritaet daneben

   Maschinelle Absicherung: scripts/check-ui-craft.mjs (8 Pruefungen, Ratchet) und
   scripts/check-crm-contrast.mjs (WCAG-AA) — beide blockierend in CI. */

/* ===================================================================
   MOUNT SWITCH — legacy vs redesign shell (global, flag-gated)
   =================================================================== */
#app-crm { display: none; }
html[data-ui="new"] .app-wrapper { display: none !important; }
html[data-ui="new"] #app-crm { display: block; }
#app-crm.crm { height: 100vh; height: 100dvh; width: 100%; overflow: hidden; }
/* BF-118 (#807) — im Redesign scrollt nie das Dokument, nur die View in #crm-content.
   Ohne diese Sperre reichte der Browser das Scrollen am Ende einer View an das Dokument
   weiter, sobald irgendetwas ausserhalb von #app-crm auch nur 1px Hoehe hatte — und der
   ganze Rahmen (Sidebar, Kopfleiste) wanderte mit. Druck setzt das unten zurueck. */
html[data-ui="new"],
html[data-ui="new"] body { overflow: hidden; overscroll-behavior: none; }

/* ===================================================================
   TOKENS (already .crm / .crm.dark scoped)
   =================================================================== */
/* ──────────────────────────────────────────────────────────────
   Apollon Redesign — Design Tokens
   adesso-Palette: #006EC7 (Blue) · #461EBE (Violet) · #FF9868 (Orange)
                   #76C800 (Green) · #28DCAA (Turquoise)
                   #887D75 (Grey) · #E7E5E3 (Grey-20) · #CFCBC8 (Grey-40)
   Typografie: Fira Sans / Fira Sans Condensed
   ────────────────────────────────────────────────────────────── */


/* PR1.646 — Übergänge beim Ansichtswechsel und bei Liste ⇄ Kanban (View Transitions).
   Fläche: 150 ms Überblendung. Datensätze (Logo, Titel): 260 ms gleiten an den neuen Platz.
   Seiten- und Kopfleiste tragen ihren Namen nur, solange ein Wechsel läuft (ansicht-uebergang.js),
   und nehmen nicht teil. Reduzierte Bewegung: nur die Überblendung, nichts gleitet. */
html.vt-ansicht .crm .sidebar { view-transition-name: vt-seitenleiste; }
html.vt-ansicht .crm .topbar { view-transition-name: vt-kopfleiste; }
::view-transition-group(vt-seitenleiste),
::view-transition-group(vt-kopfleiste) { animation: none; }
::view-transition-old(root),
::view-transition-new(root) { animation-duration: 150ms; animation-timing-function: var(--ease-out); }
::view-transition-group(*) { animation-duration: 260ms; animation-timing-function: var(--ease-out); }

/* PR1.637 (#936) — der Hinweis-Stapel hängt an <body>, außerhalb von `.crm`; er bekommt
   dieselben Tokens, sonst bliebe das Gesicht der neuen Ansicht ohne Farben.
   PR1.711: steht direkt vor `.crm {` — ein dazwischengeschobener Block (PR1.646) hatte
   die Liste zerrissen, der Stapel blieb in hell ohne Tokens. */
html[data-ui="new"] #toast-stack,
.crm {
  /* Brand */
  --ad-blue: #006EC7;
  /* RD1.11 #334 — die helle Blau-Stufe fuer Dark. Stand bisher fuenfmal als Literal
     #62B5FF in der Datei (Badge, Tabellen-Link, Chip, aktiver Tab) — jetzt einmal
     benannt. Gehoert in die Palette, nicht in den Dark-Block: es ist eine Farbe des
     adesso-Faechers, kein themenabhaengiger Wert. */
  --ad-blue-300: #62B5FF;
  --ad-blue-700: #005AA3;
  --ad-blue-800: #003F75;
  --ad-blue-900: #002B52;
  --ad-violet: #461EBE;
  --ad-violet-600: #5A38C9;
  /* RD1.11 #334 — Rot war als einzige Ampelfarbe nie benannt: #E5484D und #C4353A
     standen viermal verstreut in Heat-, NKV-, Konfidenz- und Ablehnen-Regeln. Gleiche
     Stufung wie die uebrigen Faecherfarben (Grundton + -700 fuer Text auf hellem Grund). */
  --ad-red: #E5484D;
  --ad-red-700: #C4353A;
  /* RD1.13 #336 Reparatur — weisse Schrift auf --ad-red kommt nur auf 3.91:1. Der
     Loesch-Knopf traegt sie in 12px/normal, also gilt 4.5:1. Grundton wird --ad-red-700
     (5.36:1), und weil der Hover dunkler sein muss als der Grund, bekommt Rot hier seine
     dritte Stufe (7.42:1). */
  --ad-red-800: #A32328;
  /* Helle Stufe fuer Rot-Text auf dunklem Grund: --ad-red-700 kommt dort nur auf 3.07:1
     und faellt unter AA. Stand bereits dreimal als Literal #FF8A8F im Dark-Zweig. */
  --ad-red-300: #FF8A8F;
  --ad-orange: #FF9868;
  --ad-orange-700: #E07842;
  /* RD1.13 #336 Reparatur — Textstufen fuer die hellen Faecherfarben AUF ihrem eigenen
     Tint. Die -700-Stufen sind dafuer zu hell: --ad-orange-700 auf --tint-orange ergibt
     2.59:1, --ad-turq-700 auf --tint-turq 2.82:1. Beide Badges fuehren normalen Text in
     11.5px, es gilt also 4.5:1. Die neuen Stufen kommen auf 5.32:1 bzw. 6.40:1.
     Bewusst NICHT die Grundtoene aendern — die sind die Marke. */
  --ad-orange-900: #9A4A1E;
  --ad-green: #76C800;
  --ad-green-700: #5DA000;
  /* PR1.343 (#557) — Textstufe fuer Gruen AUF --tint-green (wie --ad-orange-900/--ad-turq-900):
     --ad-green-700 kommt dort nur auf 2.9:1, diese Stufe (≈ #417000) auf 5.2:1.
     Abgeleitet statt als Hex, damit sie mit dem Grundton wandert. */
  --ad-green-900: color-mix(in srgb, var(--ad-green-700) 70%, black);
  --ad-turq: #28DCAA;
  --ad-turq-700: #14A37C;
  --ad-turq-900: #0B6349;
  --ad-grey: #887D75;
  --ad-grey-20: #E7E5E3;
  --ad-grey-40: #CFCBC8;

  /* Soft tints (light) */
  --tint-blue: #E5F0FA;
  --tint-violet: #ECE6FB;
  --tint-orange: #FFE9DC;
  /* KI-Fläche Seite Start (Vorlage S1 Block 3): ergibt rgb(255, 247, 242) aus --tint-orange */
  --tint-orange-zart: color-mix(in srgb, var(--tint-orange) 36.4%, white);
  /* PR1.324 #533 — Pythia-Terrakotta, nur fuers Medaillon; aus der Orange-Rampe
     abgeleitet (-900 auf Hell, AA; -700 waere unter 3:1). */
  --pythia-terra: var(--ad-orange-900);
  --pythia-terra-grund: var(--tint-orange);
  --tint-green: #E8F6CF;
  --tint-turq: #D6F8EE;
  --tint-warn: #FFF1E5;
  /* BF-152 (V04 listen-dashboard.html) — gelbe Luecke „Projektname fehlt“. */
  --gelb: rgb(255 246 214);
  --gelb-rand: rgb(232 195 74);
  --gelb-text: rgb(107 83 16);
  /* PR1.751 (#1064) — Suchtreffer in der Filter-Auswahl (Vorlage V22, Pipette #FFE58A). */
  --treffer: rgb(255 229 138);
  /* PR1.705 — Notiz am Platz (Vorlage K5: cremefarben, gelblicher Rand) */
  --tint-notiz: color-mix(in srgb, var(--tint-warn) 55%, var(--tint-green));
  --notiz-rand: color-mix(in srgb, var(--ad-orange) 30%, var(--tint-green));
  /* RD1.13 #336 Reparatur — der Rot-Tint fehlte als einziger in dieser Reihe und stand
     dreimal als Literal #FBE8E9 (NKV-Heat, Konfidenz, Ablehnen-Knopf), sein Dark-Pendant
     dreimal als #3A1F20. Einmal benannt spart sechs Rohwerte und macht die drei
     Dark-Overrides ueberfluessig — der Tint schaltet jetzt selbst um. */
  --tint-red: #FBE8E9;

  /* Light theme */
  --bg-shell: #003F75;            /* contrast-rich app frame */
  --bg-app: #F4F6F9;
  --bg-surface: #FFFFFF;
  --bg-surface-2: #F7F8FA;
  --bg-surface-3: #EEF1F5;
  --bg-hover: #EEF3F9;
  --border: #E0E4EA;
  --border-strong: #C8CFD9;
  --text-1: #0B1A2B;            /* PR1.567 — Tinte mit Navy-Stich (Typografie v2) */
  --text-2: #435066;
  --text-3: #5F6B7E;            /* PR1.567 — AA 5.3:1 auf --bg-surface (PR4.17 P6: kleine Labels) */
  /* PR1.653 — einfarbige Kuerzel. Verweise: der Dunkel-Block (.crm.dark) setzt die
     Grundtokens auf demselben Element um. Kontrast hell 7,8:1, dunkel 6,9:1. */
  --mono-bg: var(--bg-surface-2);
  --mono-fg: var(--text-2);
  --mono-border: var(--border);
  --text-inv: #FFFFFF;
  --focus: #006EC7;
  --shadow-1: 0 1px 0 rgba(15, 23, 38, 0.04), 0 1px 2px rgba(15, 23, 38, 0.06);
  --shadow-2: 0 6px 16px -8px rgba(15, 23, 38, 0.18), 0 2px 4px rgba(15, 23, 38, 0.06);
  --shadow-3: 0 24px 60px -28px rgba(15, 23, 38, 0.30), 0 8px 18px -10px rgba(15, 23, 38, 0.12);

  /* ── Legacy-Kompatibilitaet (PR1.229 #399) ─────────────────────────────────
     style.css ist die gemeinsame Basis beider Shells. Es konsumiert sieben
     Flaechen- und Textnamen, die die Redesign-Shell bisher nur in drei engen
     Komponenten-Scopes belegt hat (.fb-form/.fb-foot, .ms/.ms-list, .fw — je
     eingefuehrt von PR1.189/190/191). Alles ausserhalb dieser Scopes erbte
     weiter aus dem Legacy-:root und war damit vom Attribut html[data-theme]
     abhaengig, das die Redesign-Shell nicht kontrolliert: ohne data-theme traf
     helle Redesign-Schrift auf dunklen Legacy-Grund (Team-Tabelle der
     Projektmaske: 1,03:1). Die Belegung an der Wurzel macht die Shell davon
     unabhaengig und beendet das wiederholte lokale Nachflicken.

     Kein Dark-Pendant noetig: die Zieltokens sind selbst themenabhaengig
     (Block ab .crm.dark), die var()-Indirektion traegt Dark automatisch mit.
     Eine zweite Deklaration waere eine Dublette, die beim naechsten
     Wertwechsel auseinanderlaeuft. Der Ratchet in
     test/pr1-229-crm-token-mapping.test.mjs haelt beides fest. */
  --bg-base: var(--bg-app);
  --bg-card: var(--bg-surface);
  --bg-card2: var(--bg-surface-2);
  --bg-input: var(--bg-surface);
  --border-light: var(--border);
  --text-primary: var(--text-1);
  --text-secondary: var(--text-2);

  /* Radii */
  --r-xs: 4px;
  --r-sm: 6px;
  --r-md: 8px;
  --r-lg: 10px;
  --r-xl: 14px;

  /* Spacing scale */
  --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px;
  --s-5: 20px; --s-6: 24px; --s-8: 32px; --s-10: 40px;

  /* Type */
  --f-sans: 'Fira Sans', system-ui, sans-serif;
  --f-cond: 'Fira Sans Condensed', 'Fira Sans', sans-serif;
  /* PR1.437 #668: keine Schreibmaschinenschrift mehr. --f-mono bleibt als Alias fuer
     Zahlen/Datum/Kennungen (Regeln + Inline-Stile in crm-*.js), zeigt aber auf Fira Sans;
     die gleich breiten Ziffern kommen ueber font-variant-numeric: tabular-nums. */
  --f-mono: var(--f-sans);

  /* Motion */
  --ease-out: cubic-bezier(.23,1,.32,1);
  --ease-drawer: cubic-bezier(.32,.72,0,1);
  --ease-in: cubic-bezier(.4,0,1,1);
  --t-fast: 120ms var(--ease-out);
  --t-med:  160ms var(--ease-out);
  --t-slow: 220ms var(--ease-out);
  /* PR1.636 #935 — Bewegungsbudget (DESIGN.md §5, Blatt B): dieselben Werte wie
     MOTION_BUDGET in motion.js und im :root von style.css; ein Test haelt sie gleich. */
  --mo-hover: 150ms;
  --mo-press: 140ms;
  --mo-enter: 260ms;
  --mo-enter-step: 50ms;
  --mo-chip: 220ms;
  --mo-uncertain: 900ms;
  --mo-ask: 320ms;
  --mo-step: 200ms;
  --mo-check: 260ms;
  --mo-word: 140ms;
  --mo-cite: 200ms;
  --mo-follow: 240ms;
  --mo-follow-step: 60ms;
  --mo-rows: 240ms;
  --mo-rows-step: 70ms;
  --mo-bars: 520ms;
  --mo-bars-step: 50ms;
  --mo-morph: 440ms;
  --mo-reorder: 320ms;
  --mo-glow: 600ms;
  --mo-panel-in: 240ms;
  --mo-panel-out: 160ms;
  --mo-toast-in: 220ms;
  --mo-toast-out: 160ms;
  --mo-pop-in: 160ms;
  --mo-pop-out: 120ms;
  --mo-fade: 150ms;
  --mo-flip: 200ms;
  --mo-pulse: 2400ms;
  /* PR1.486 #700 — Bewegungs-Baukasten (motion.js, Klassen .mo-* in style.css): dieselben
     Werte wie in der klassischen Shell; das Aufleuchten nimmt den Redesign-Blauton. */
  --motion-fast: 200ms;
  --motion-base: 300ms;
  --mo-flash-bg: var(--tint-blue);
}

/* PR1.437 #668: Inline-Stile mit font-family:var(--f-mono) (crm-capacity, crm-*-detail,
   crm-multi-*-staffing, allocation-gantt, fte-segment-editor, crm-shell …) bekommen
   zentral gleich breite Ziffern, damit Zahlen untereinander buendig bleiben. Ungescoped,
   weil einige dieser Bausteine auch in der klassischen Shell rendern. */
[style*="--f-mono"] { font-variant-numeric: tabular-nums; }

html[data-ui="new"][data-theme="dark"] #toast-stack,
.crm.dark , html[data-theme="dark"] .crm {
  /* PR1.586 (#875, Gate-Nachzug): ohne diese vier Zeilen erbt der dunkle Zweig das klassische
     Indigo aus style.css :root (#6366f1, 4.47:1) — Reiter, „Alle"-Chips, btn-primary, Schatten.
     Farbregel: Hauptaktion ist auch dunkel adesso-Blau (weiss auf --ad-blue 5.18:1); als Text
     die helle Stufe --ad-blue-300. */
  --primary: var(--ad-blue);
  --primary-dark: var(--ad-blue-700);
  --primary-glow: rgba(0, 110, 199, 0.35);
  --primary-text: var(--ad-blue-300);
  --bg-shell: #06121F;
  --bg-app: #0B1828;
  --bg-surface: #0F2033;
  --bg-surface-2: #132A42;
  --bg-surface-3: #18334F;
  --bg-hover: #163049;
  --border: #1F3A57;
  --border-strong: #2C547D;
  --text-1: #E9EEF5;
  --text-2: #A6B3C4;
  --text-3: #8497AC;            /* PR4.17 P6 — AA: 3.78→5.49:1 auf --bg-surface (Dark) */
  --tint-blue: #0E2C49;
  --tint-violet: #1F1640;
  --tint-orange: #3A2418;
  --tint-orange-zart: var(--tint-orange);
  --pythia-terra: var(--ad-orange);
  --pythia-terra-grund: var(--tint-orange);
  --tint-green: #1B2D0A;
  --tint-turq: #0E2E26;
  --tint-warn: #3A2A1B;
  --gelb: var(--tint-warn);
  --gelb-rand: color-mix(in srgb, var(--ocker-text) 55%, transparent);
  --gelb-text: var(--ocker-text);
  --treffer: color-mix(in srgb, var(--ocker-text) 45%, transparent);
  --tint-notiz: color-mix(in srgb, var(--tint-warn) 55%, var(--tint-green));
  --notiz-rand: color-mix(in srgb, var(--ad-orange) 30%, var(--tint-green));
  --tint-red: #3A1F20;
  --shadow-1: 0 1px 0 rgba(0,0,0,.5);
  --shadow-2: 0 6px 16px -8px rgba(0,0,0,.6);
  --shadow-3: 0 24px 60px -28px rgba(0,0,0,.7);
  /* RD1.11 #334 — Dark-Pendant fuer den Fokus-Ring. Der Light-Wert --focus (#006EC7)
     liegt auf --bg-app (#0B1828) bei 1.7:1 und waere praktisch unsichtbar. --ad-blue-300
     ist derselbe Blauton, den Tabellen-Link, Badge, Chip und aktiver Tab im Dark-Modus
     bereits tragen — ein weiterer Ton waere unnoetige Streuung. */
  --focus: var(--ad-blue-300);
  /* PR1.296 #503 — der geerbte Legacy-Wert (#ef4444) kommt auf --bg-surface nur
     auf 4.37:1; die Ampel-Beschriftung "zu langsam" in der Antwortzeiten-Tabelle
     verfehlte AA damit knapp. --ad-red-300 ist derselbe Ton, den Badge, Chip und
     KB-Status im Dark-Modus bereits tragen (s. .bdg-danger) — ein weiterer waere
     unnoetige Streuung. Keine Flaeche im .crm-Scope traegt Text auf --danger:
     geprueft sind alle neun CSS- und zweiundzwanzig Inline-Verwendungen; sie
     setzen color, border-color oder einen Punkt ohne Beschriftung. */
  --danger: var(--ad-red-300);
}

/* Reset within .crm */
.crm, .crm * { box-sizing: border-box; }
.crm { font-family: var(--f-sans); font-size: var(--fs-body); letter-spacing: var(--ls-body); font-kerning: normal; color: var(--text-1); -webkit-font-smoothing: antialiased; }
.crm button { font-family: inherit; }

/* PR1.636 #935 — Reduzierte Bewegung: nur Überblendung mit 1 ms, Inhalte stehen sofort am
   Endzustand, der Stand-Punkt pulsiert nicht. */
@media (prefers-reduced-motion: reduce) {
  .crm *, .crm *::before, .crm *::after { animation: none !important; transition-property: opacity, color, background-color, border-color !important; transition-duration: 1ms !important; transition-delay: 0s !important; scroll-behavior: auto !important; }
}

/* ===================================================================
   COMPONENTS
   =================================================================== */
/* ──────────────────────────────────────────────────────────────
   Apollon Redesign — Components & Layout (shared across variants)
   ────────────────────────────────────────────────────────────── */

/* ============== APP SHELL ============== */
.crm .app-shell {
  display: grid;
  grid-template-columns: minmax(0, 5.3333rem) 1fr;   /* PR1.683 (#982): schmal, 80 px */
  background: var(--bg-shell);
  padding: 12px;
  gap: 0;
  border-radius: var(--r-xl);
  height: 100%;
  width: 100%;
  overflow: hidden;
}
.crm .app-shell.shell-attio { grid-template-columns: minmax(0, 5.3333rem) 1fr; padding: 8px 8px 8px 8px; background: var(--bg-app); }
.crm .app-shell.shell-sf    { grid-template-columns: 1fr; padding: 0; background: var(--bg-surface); }
.crm .app-shell.shell-hybrid { grid-template-columns: minmax(0, 5.3333rem) 1fr; padding: 10px; background: var(--bg-shell); }

.crm .app-canvas {
  background: var(--bg-app);
  border-radius: var(--r-lg);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  min-width: 0;
}
.crm .shell-attio .app-canvas { background: var(--bg-surface); border-radius: var(--r-md); box-shadow: var(--shadow-2); }
.crm .shell-sf .app-canvas { border-radius: 0; }

/* RD1.11 #334 — Scroll-Fundament. #crm-content ist der Container, in den JEDE Redesign-View
   rendert, und hatte bis hier keine einzige Regel: ein display:block-Div, dessen Kinder mit
   flex:1;overflow:auto rechnen. Das ging nie auf — die Scrollboxen wuchsen mit dem Inhalt,
   ihr overflow griff nie, und .app-canvas{overflow:hidden} kappte alles unterhalb der
   Viewporthoehe. Diese vier Properties sind die Ursache-Reparatur; min-height:0 ist der Teil,
   ohne den ein Flex-Kind nicht unter seine Inhaltshoehe schrumpfen darf.
   Bewusst KEIN overflow hier: gescrollt wird genau eine Ebene tiefer, in der View
   (Pruefung 4 aus RD1.10 verlangt genau einen Scroll-Bereich je Ansicht). */
.crm #crm-content {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
}

/* ============== SIDEBAR ============== */
.crm .sidebar {
  display: flex;
  flex-direction: column;
  padding: .8rem .4rem .6667rem;
  color: var(--text-inv);
  font-family: var(--f-sans);
  min-width: 0;
  /* RD1.11 #334 — ohne min-height:0 wird .sb-foot (margin-top:auto) bei kurzem Fenster
     aus dem overflow:hidden der Shell herausgedrueckt: der Benutzer-Chip und damit das
     Abmelden waeren unerreichbar. Gescrollt wird die Nav-Liste, siehe .sb-list.
     BEWUSST KEIN overflow:hidden hier — das Benutzermenue ist ein absolut positioniertes
     Popover im .sb-foot und wuerde daran abgeschnitten. Das Begrenzen uebernimmt die
     schrumpfende Nav-Liste. */
  min-height: 0;
}
.crm .shell-attio .sidebar { color: var(--text-1); padding: .8rem .4rem; background: var(--bg-surface-2); border-radius: var(--r-md); margin-right: 8px; border: 1px solid var(--border); }

.crm .sb-brand {
  display: flex; align-items: center; gap: 10px;
  padding: 6px 8px 30px; font-family: var(--f-cond); font-weight: 600;
}
.crm .sb-brand img { width: 22px; height: 22px; flex: 0 0 auto; }
.crm .sb-brand-text { display: flex; flex-direction: column; line-height: 1.05; }
.crm .sb-brand-text b { font-size: var(--fs-section); letter-spacing: .2px; }
.crm .sb-brand-text small { font-size: var(--fs-label); opacity: .65; font-weight: 500; }

.crm .sb-search {
  display: flex; align-items: center; gap: var(--s-2);
  margin: 0 4px 14px;
  padding: 7px 10px;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.10);
  border-radius: var(--r-md);
  font-size: var(--fs-ui); color: rgba(255,255,255,.85);
  cursor: text;
  transition: background var(--t-fast), border-color var(--t-fast);
}
.crm .sb-search:hover { background: rgba(255,255,255,.13); }
.crm .sb-search kbd {
  margin-left: auto;
  font-family: var(--f-mono); font-variant-numeric: tabular-nums;
  font-size: var(--fs-label);
  padding: 2px 6px;
  background: rgba(255,255,255,.10);
  border-radius: var(--r-xs);
  color: rgba(255,255,255,.7);
}
.crm .shell-attio .sb-search {
  background: var(--bg-surface);
  border: 1px solid var(--border);
  color: var(--text-2);
}
.crm .shell-attio .sb-search kbd { background: var(--bg-surface-3); color: var(--text-2); }

.crm .sb-section {
  font-size: var(--fs-label);
  font-weight: 500;
  /* PR1.640 #939 — Gruppenüberschriften sind Text, keine Deko: Farbe statt Deckkraft, damit der
     Kontrast (axe color-contrast) in beiden Seitenleisten-Looks mindestens 4,5:1 hält. */
  color: rgba(255,255,255,.78);
  padding: 12px 8px 6px;
}
.crm .shell-attio .sb-section { color: var(--text-2); }
/* PR1.640 #939 — Gruppen Arbeit / Wissen / Verwaltung: die Liste scrollt als Ganzes, die
   Gruppen stapeln sich darin. Überschriften sind reiner Text (keine Tab-Stopps). */
.crm .sb-group { display: flex; flex-direction: column; flex: 0 0 auto; }
.crm .sb-group:first-child .sb-section { padding-top: 0; }
/* RD1.11 #334 — bewusst KEIN flex:1: die Liste darf schrumpfen und dann selbst scrollen,
   soll aber nicht wachsen, sonst rutschen „Listen"-Ueberschrift und Pills vom Nav-Block weg
   an den Fuss. min-height:0 ist das, was das Schrumpfen ueberhaupt erlaubt. */
.crm .sb-list { display: flex; flex-direction: column; gap: 1px; min-height: 0; overflow-y: auto; }
.crm .sb-group-items { display: flex; flex-direction: column; gap: 0; }
.crm .sb-item {
  display: flex; align-items: center; gap: 10px;
  padding: 7px 10px;
  border-radius: var(--r-sm);
  font-size: var(--fs-body);
  font-weight: 500;
  color: rgba(255,255,255,.78);
  background: transparent;
  border: 0;
  font-family: inherit;
  text-align: left;
  cursor: pointer;
  transition: background var(--t-fast), color var(--t-fast);
}
.crm .sb-item:hover { background: rgba(255,255,255,.07); color: white; }
.crm .sb-item.active { background: rgba(255,255,255,.14); color: white; }
.crm .sb-item .sb-ic {
  width: 16px; height: 16px;
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center; justify-content: center;
  opacity: .85;
}
.crm .sb-item .sb-cnt {
  margin-left: auto;
  font-family: var(--f-mono); font-variant-numeric: tabular-nums;
  font-size: var(--fs-meta);
  padding: 1px 6px;
  background: rgba(255,255,255,.10);
  border-radius: 999px;
  opacity: .85;
}
.crm .shell-attio .sb-item { color: var(--text-2); }
.crm .shell-attio .sb-item:hover { background: var(--bg-hover); color: var(--text-1); }
.crm .shell-attio .sb-item.active { background: var(--tint-blue); color: var(--ad-blue); }
.crm .shell-attio .sb-item.active .sb-ic { color: var(--ad-blue); opacity: 1; }
.crm .shell-attio .sb-item .sb-cnt { background: var(--bg-surface-3); color: var(--text-2); }

.crm .sb-pill-list {
  display: flex; flex-direction: column; gap: 1px;
  padding: 4px 0 0;
}
.crm .sb-pill {
  display: flex; align-items: center; gap: var(--s-2);
  padding: 6px 10px;
  border-radius: var(--r-sm);
  font-size: var(--fs-ui);
  color: rgba(255,255,255,.66);
  background: transparent;
  border: 0;
  font-family: inherit;
  text-align: left;
  cursor: pointer;
  transition: background var(--t-fast), color var(--t-fast);
}
.crm .sb-pill:hover { background: rgba(255,255,255,.06); color: white; }
.crm .sb-pill .dot { width: 6px; height: 6px; border-radius: 50%; flex: 0 0 auto; }
.crm .shell-attio .sb-pill { color: var(--text-2); }
.crm .shell-attio .sb-pill:hover { background: var(--bg-hover); color: var(--text-1); }

.crm .sb-foot {
  margin-top: auto;
  padding: 10px 8px 4px;
  border-top: 1px solid rgba(255,255,255,.08);
  display: flex; align-items: center; gap: 10px;
}
.crm .shell-attio .sb-foot { border-top: 1px solid var(--border); }
.crm .sb-avatar {
  width: 28px; height: 28px;
  border-radius: 50%;
  /* PR1.653 Nachzug — einfarbig grau wie in der klassischen Ansicht (Weiß ≈ 7,5:1), kein Violett. */
  background-color: var(--kuerzel-grau);
  color: white;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: var(--fs-meta); font-weight: 500;
  font-family: var(--f-cond);
  letter-spacing: .3px;
}
.crm .sb-user { display: flex; flex-direction: column; line-height: 1.15; min-width: 0; }
.crm .sb-user b { font-size: var(--fs-ui); font-weight: 500; color: rgba(255,255,255,.95); }
.crm .sb-user small { font-size: var(--fs-label); color: rgba(255,255,255,.55); }
.crm .shell-attio .sb-user b { color: var(--text-1); }
.crm .shell-attio .sb-user small { color: var(--text-3); }
.crm .sb-foot .sb-cog {
  margin-left: auto;
  width: 26px; height: 26px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: var(--r-sm);
  color: rgba(255,255,255,.65);
  cursor: pointer;
  transition: background var(--t-fast), color var(--t-fast);
}
.crm .sb-foot .sb-cog:hover { background: rgba(255,255,255,.10); color: white; }
.crm .shell-attio .sb-foot .sb-cog { color: var(--text-3); }
.crm .shell-attio .sb-foot .sb-cog:hover { background: var(--bg-hover); color: var(--text-1); }

/* ============== TOPBAR ============== */
.crm .topbar {
  display: flex; align-items: center; gap: var(--s-3);
  padding: 10px 18px;
  border-bottom: 1px solid var(--border);
  background: var(--bg-surface);
  min-height: 56px;
}
.crm .topbar.tb-sf {
  background: var(--ad-blue-900);
  border-bottom: 3px solid var(--ad-blue);
  color: white;
}
.crm .tb-crumbs {
  display: flex; align-items: center; gap: 6px;
  font-size: var(--fs-body); color: var(--text-2);
  font-weight: 500;
}
.crm .tb-crumbs b { color: var(--text-1); font-weight: 600; }
.crm .tb-crumbs .sep { color: var(--text-3); opacity: .6; }
.crm .tb-sf .tb-crumbs { color: rgba(255,255,255,.75); }
.crm .tb-sf .tb-crumbs b { color: white; }

.crm .tb-spacer { flex: 1; }

.crm .tb-search {
  flex: 1; max-width: 520px;
  display: flex; align-items: center; gap: var(--s-2);
  padding: 8px 12px;
  background: var(--bg-surface-2);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  color: var(--text-2);
  font-size: var(--fs-body);
  cursor: text;
  transition: border-color var(--t-fast), background var(--t-fast);
}
.crm .tb-search:hover { border-color: var(--border-strong); background: var(--bg-surface); }
.crm .tb-search kbd {
  margin-left: auto; font-family: var(--f-mono); font-variant-numeric: tabular-nums; font-size: var(--fs-meta);
  padding: 1px 6px; background: var(--bg-surface-3);
  border: 1px solid var(--border); border-radius: var(--r-xs);
}
.crm .tb-sf .tb-search { background: rgba(255,255,255,.10); border-color: rgba(255,255,255,.15); color: rgba(255,255,255,.85); }
.crm .tb-sf .tb-search kbd { background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.18); color: rgba(255,255,255,.85); }

.crm .tb-nav { display: flex; align-items: center; gap: var(--s-1); }
.crm .tb-nav-item {
  padding: 7px 12px; border-radius: var(--r-sm);
  font-size: var(--fs-body); font-weight: 500;
  color: var(--text-2); cursor: pointer;
  transition: background var(--t-fast), color var(--t-fast);
}
.crm .tb-nav-item:hover { background: var(--bg-hover); color: var(--text-1); }
.crm .tb-nav-item.active { color: var(--ad-blue); background: var(--tint-blue); }
.crm .tb-sf .tb-nav-item { color: rgba(255,255,255,.75); }
.crm .tb-sf .tb-nav-item:hover { background: rgba(255,255,255,.10); color: white; }
.crm .tb-sf .tb-nav-item.active { background: white; color: var(--ad-blue-900); font-weight: 600; }

.crm .theme-toggle {
  display: inline-flex; align-items: center; gap: var(--s-2);
  padding: 6px 10px 6px 6px;
  background: var(--bg-surface-2);
  border: 1px solid var(--border);
  border-radius: 999px;
  font-size: var(--fs-ui); font-weight: 500; color: var(--text-2);
  cursor: pointer; min-width: 78px;
  transition: background var(--t-fast), border-color var(--t-fast);
}
.crm .theme-toggle .knob {
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--bg-surface);
  border: 1px solid var(--border);
  transition: transform var(--t-med);
}
.crm .theme-toggle.is-dark { background: var(--ad-blue-900); color: white; border-color: var(--ad-blue-800); }
.crm .theme-toggle.is-dark .knob { background: var(--ad-orange); border-color: var(--ad-orange-700); transform: translateX(0); }
.crm .tb-sf .theme-toggle { background: rgba(255,255,255,.10); border-color: rgba(255,255,255,.15); color: white; }

/* ============== BUTTONS ============== */
.crm .btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 13px;
  border-radius: var(--r-sm);
  font-family: var(--f-sans);
  font-size: var(--fs-body); font-weight: 500;
  border: 1px solid transparent;
  background: transparent; color: var(--text-1);
  cursor: pointer; white-space: nowrap;
  transition: background var(--t-fast), border-color var(--t-fast), color var(--t-fast), transform var(--t-fast);
}
@media (hover: hover) and (pointer: fine) { .crm .btn:hover { transform: translateY(-1px); } }
.crm .btn-primary { background: var(--ad-blue); color: white; border-color: var(--ad-blue); }
.crm .btn-primary:hover { background: var(--ad-blue-700); border-color: var(--ad-blue-700); }
/* PR1.586 (#875) — Farbregel: Orange getoent = KI (mit Stern), Tokens aus style.css. Anlegen =
   .btn-create (Orange voll), weiter unten bei der Kundenliste; Violett ist kein Knopf mehr. */
.crm .btn-ki { background: var(--ki-grund); color: var(--ki-text); border-color: var(--ki-rand); font-weight: 600; }
.crm .btn-ki:hover { background: color-mix(in srgb, var(--ki-grund) 82%, var(--ki-text)); border-color: var(--ki-text); }
.crm .btn-ki:focus-visible { outline: 0.125rem solid var(--focus); outline-offset: 0.125rem; }
/* Deaktiviert wie im Entwurf (.btn.dis): blasser, Hover/Druck bleiben aus. */
.crm .btn-create:disabled, .crm .btn-ki:disabled { opacity: .45; cursor: not-allowed; box-shadow: none; transform: none; }
.crm .btn-secondary { background: var(--bg-surface); color: var(--text-1); border-color: var(--border-strong); }
.crm .btn-secondary:hover { background: var(--bg-surface-2); border-color: var(--text-3); }
.crm .btn-ghost { background: transparent; color: var(--text-2); }
.crm .btn-ghost:hover { background: var(--bg-hover); color: var(--text-1); }
/* RD1.13 #336 — Bestaetigungs-Ton fuer folgenschwere Aktionen (crmConfirm dangerLevel:'high',
   z.B. Nutzer deaktivieren). Bewusst nur Tokens: raw-hex/raw-px stehen unter Ratchet. */
/* RD1.13 #336 Reparatur (Coordinator-Befund 03.08.) — weiss auf --ad-red ergab 3.91:1.
   Eine Stufe dunkler traegt (5.36:1); der Hover rueckt entsprechend nach (7.42:1). */
.crm .btn-danger { background: var(--ad-red-700); color: white; border-color: var(--ad-red-700); }
.crm .btn-danger:hover { background: var(--ad-red-800); border-color: var(--ad-red-800); }
.crm .btn-sm { padding: 4px 9px; font-size: var(--fs-ui); border-radius: 5px; }

.crm .icon-btn {
  width: 32px; height: 32px; display: inline-flex;
  align-items: center; justify-content: center;
  border-radius: var(--r-sm);
  border: 1px solid var(--border);
  background: var(--bg-surface);
  color: var(--text-2);
  cursor: pointer;
  transition: background var(--t-fast), color var(--t-fast), border-color var(--t-fast);
}
.crm .icon-btn:hover { background: var(--bg-surface-2); color: var(--text-1); border-color: var(--border-strong); }

/* ============== SEGMENTED ============== */
.crm .seg {
  display: inline-flex; align-items: stretch;
  padding: 3px;
  background: var(--bg-surface-2);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  /* RD1.13 #336 Phase 5 — schmale Fenster: die fuenfteilige Preset-Leiste der Kundenliste
     ist breiter als ein schmales Fenster. Statt die Seite waagerecht scrollen zu lassen
     (Konvention 20) bricht die Leiste um. Bei ausreichender Breite aendert sich nichts. */
  flex-wrap: wrap;
  max-width: 100%;
}
.crm .seg button {
  padding: 5px 12px;
  border: none; background: transparent;
  border-radius: 5px;
  font-size: var(--fs-ui); font-weight: 500; color: var(--text-2);
  cursor: pointer;
  transition: background var(--t-fast), color var(--t-fast);
}
.crm .seg button:hover { color: var(--text-1); }
.crm .seg button.is-active {
  background: var(--bg-surface);
  color: var(--ad-blue);
  box-shadow: var(--shadow-1);
}
.crm .seg.seg-dark button.is-active { background: var(--ad-blue-900); color: white; }

/* PR1.375 #594 — Auftragsdaten-Pillen (Abrechnungsmodell) in der Redesign-Shell. Die
   Grundform kommt aus style.css (.order-billing-opt); hier nur die Farben, damit kein
   Legacy-Indigo (--primary) durchschlaegt. Der Fokusring folgt dem Hauskanon
   (.crm :focus-visible), nur an der Pille statt am optisch verborgenen Radio. */
.crm .order-billing-opt { background: var(--bg-surface); border-color: var(--border); color: var(--text-2); border-radius: var(--r-sm); }
.crm .order-billing-opt:hover { color: var(--text-1); border-color: var(--border-strong, var(--text-3)); }
.crm .order-billing-opt:has(input:checked) { border-color: var(--ad-blue); background: var(--bg-surface); color: var(--ad-blue); box-shadow: var(--shadow-1); }
.crm .order-billing-opt:has(input:focus-visible) { outline-color: var(--focus); }
.crm.dark .order-billing-opt:has(input:checked) , html[data-theme="dark"] .crm .order-billing-opt:has(input:checked) { color: var(--ad-blue-300); border-color: var(--ad-blue-300); }

/* BF-90 #706 / PR1.499 #766 — Schritt „Preis": Grundform aus style.css, hier nur die Farben
   der Redesign-Shell (kein Legacy-Indigo, Fokus nach Hauskanon). Status nur am Marker. */
.crm .billing-seg { background: var(--bg-surface); border-color: var(--border); }
.crm .billing-seg-opt:has(input:checked) { background: var(--ad-blue); color: var(--bg-surface); }
.crm .billing-seg-opt:has(input:focus-visible) { outline-color: var(--focus); }
.crm.dark .billing-seg-opt:has(input:checked), html[data-theme="dark"] .crm .billing-seg-opt:has(input:checked) { background: var(--ad-blue-300); color: var(--bg-surface); }
.crm .price-card { background: var(--bg-surface); border-radius: var(--r-sm); }
.crm .price-big, .crm .price-mini-in, .crm .payment-plan-presets { background: var(--bg-surface); border-radius: var(--r-sm); }
.crm .payment-plan-presets { border-radius: 99rem; }
.crm .price-big:focus-within, .crm .price-mini-in:focus-within, .crm .price-range:focus-visible,
.crm .price-switch:focus-visible, .crm .payment-plan-preset:focus-visible, .crm .payment-plan-step:focus-visible { outline-color: var(--focus); }
.crm .price-range { accent-color: var(--ad-blue); }
.crm .price-range::-webkit-slider-runnable-track { background: linear-gradient(90deg, var(--border) 0 var(--fill-a, 0%), var(--ad-blue) 0 var(--fill-b, 0%), var(--border) 0); }
.crm .price-bullet-fill, .crm .payment-plan-strip-axis, .crm .payment-plan-strip-ms i { background: var(--ad-blue); }
.crm .price-pill.is-discount::before, .crm .price-kv b.is-warn::before { background: var(--ad-orange-700); }
.crm .price-pill.is-buffer::before { background: var(--ad-green-700); }
.crm .price-switch[aria-checked="true"] { background: var(--ad-green-700); }
/* PR1.460 #708 — Zahlungsplan: Grundform aus style.css, hier Flaeche, Radius, Marker. */
.crm .payment-plan { background: var(--bg-surface); border-radius: var(--r-sm); }
.crm .payment-plan-total.is-ok::before { background: var(--ad-green-700); }
.crm .payment-plan-total.is-warn::before, .crm .payment-plan-status.is-warn::before { background: var(--ad-orange-700); }
.crm .field.payment-plan-field { grid-column: 1 / -1; }

/* BF-82 (#671) — „Kaestchen + Text" im Redesign. Grundform (Flex, Ausrichtung, Abstand,
   klickbare Zeile) kommt aus style.css; hier nur Schrift, Farben und Fokusfarbe. */
.crm .check-row,
.crm .form-checkbox-group label { gap: var(--s-2); font-size: var(--fs-ui); color: var(--text-1); }
.crm .check-row > input,
.crm .form-checkbox-group label > input { accent-color: var(--ad-blue); }
.crm .check-row > input:focus-visible,
.crm .form-checkbox-group label > input:focus-visible { outline: .125rem solid var(--focus); outline-offset: .125rem; }
.crm.dark .check-row > input ,
html[data-theme="dark"] .crm .check-row > input ,
.crm.dark .form-checkbox-group label > input ,
html[data-theme="dark"] .crm .form-checkbox-group label > input { accent-color: var(--ad-blue-300); }

/* ============== CARDS ============== */
.crm .card {
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-1);
}
.crm .card-pad { padding: 18px; }

/* ============== KPI ============== */
.crm .kpi-row {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: var(--s-3);
}
.crm .kpi {
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: 14px 16px 12px;
  display: flex; flex-direction: column; gap: var(--s-1);
  position: relative;
  overflow: hidden;
}
/* PR1.337 (#551) — klickbare Kennzahl-Kachel (Dashboard-Reiter „Opportunities"): echter
   <button> (RD1.10-Fokus-Ratchet) in der Optik der .kpi. Bewusst ohne Transition — das
   Dashboard ist die taeglich genutzte Startseite. */
.crm .kpi-btn {
  margin: 0;
  font: inherit;
  color: inherit;
  text-align: left;
  width: 100%;
  cursor: pointer;
}
.crm .kpi-btn:hover { border-color: var(--border-strong); background: var(--bg-hover); }
.crm .kpi-btn:focus-visible { outline: 0.125rem solid var(--focus); outline-offset: 0.125rem; }
.crm .kpi::before {
  content: '';
  position: absolute; left: 0; top: 0; bottom: 0;
  width: 3px; background: var(--ad-blue);
}
.crm .kpi.k-violet::before { background: var(--ad-violet); }
.crm .kpi.k-orange::before { background: var(--ad-orange); }
.crm .kpi.k-turq::before { background: var(--ad-turq); }
.crm .kpi.k-green::before { background: var(--ad-green); }
.crm .kpi-label {
  font-size: var(--fs-meta); font-weight: 500; color: var(--text-3);
}
.crm .kpi-value {
  font-family: var(--f-cond);
  font-weight: 500;
  font-size: var(--fs-kpi);
  letter-spacing: var(--ls-kpi);
  line-height: 1.1;
  color: var(--text-1);
}
.crm .kpi-meta {
  font-size: var(--fs-ui); color: var(--text-2);
  display: flex; align-items: center; gap: 6px;
}
.crm .kpi-meta .delta-pos { color: var(--ad-green-700); font-weight: 600; }
.crm .kpi-meta .delta-warn { color: var(--ad-orange-700); font-weight: 600; }
.crm.dark .kpi-meta .delta-pos , html[data-theme="dark"] .crm .kpi-meta .delta-pos { color: var(--ad-green); }
.crm.dark .kpi-meta .delta-warn , html[data-theme="dark"] .crm .kpi-meta .delta-warn { color: var(--ad-orange); }
/* PR1.337 (#551) — Warntext „nicht gestafft": --ad-orange-700 kaeme als 12px-Text nur auf
   ~3:1, Rot-700 auf ~5,4:1; im Dark-Theme die helle Rot-Stufe (wie .bdg-danger). */
.crm .kpi-meta .delta-alert { color: var(--ad-red-700); font-weight: 600; }
.crm.dark .kpi-meta .delta-alert , html[data-theme="dark"] .crm .kpi-meta .delta-alert { color: var(--ad-red-300); }

/* ============== BADGES (Status) ============== */
/* BF-15 #394 — .kb-doc-status (Ingestion-Status eines KB-Dokuments) teilt sich die
   Badge-Basis, statt eine zweite Pillen-Geometrie zu erfinden. Gerendert wird es von
   public/js/components/kb-doc-status.js, das beide Shells mit demselben Markup
   bedient; die Farbrollen unten sind das Redesign-Gesicht dazu. */
.crm .bdg,
.crm .kb-doc-status {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 2px 9px;
  font-family: var(--f-cond);
  font-size: var(--fs-meta); font-weight: 500;
  letter-spacing: .3px;
  border-radius: 999px;
  border: 1px solid transparent;
}
.crm .bdg .pip { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
/* RD1.13 #336 Reparatur (Coordinator-Befund 03.08.) — die Badge-Schrift lag auf ihrem
   eigenen Tint unter AA: bdg-lead 4.48:1, bdg-won 2.82:1, bdg-running 2.59:1,
   bdg-warn 2.73:1. Alle vier fuehren normalen Text in 11.5px, es gilt also 4.5:1.
   Geaendert wird ausschliesslich die SCHRIFT — Tint und Rahmen bleiben, damit die
   Farbcodierung der Status unveraendert bleibt. Neue Werte: 6.08 · 6.40 · 5.32 · 5.62. */
.crm .bdg-lead    { background: var(--tint-blue);   color: var(--ad-blue-700);   border-color: rgba(0,110,199,.18); }
.crm .bdg-prop    { background: var(--tint-violet); color: var(--ad-violet); border-color: rgba(70,30,190,.18); }
.crm .bdg-running { background: var(--tint-orange); color: var(--ad-orange-900); border-color: rgba(255,152,104,.25); }
.crm .bdg-won     { background: var(--tint-turq);   color: var(--ad-turq-900); border-color: rgba(40,220,170,.25); }
.crm .bdg-warn    { background: var(--ocker-grund); color: var(--ocker-text); border-color: color-mix(in srgb, var(--ocker-fuell) 35%, transparent); }  /* PR1.586: Ocker statt Orange */
.crm .bdg-neut    { background: var(--bg-surface-3); color: var(--text-2); border-color: var(--border); }
.crm.dark .bdg-lead    , html[data-theme="dark"] .crm .bdg-lead    { color: var(--ad-blue-300); }
.crm.dark .bdg-prop    , html[data-theme="dark"] .crm .bdg-prop    { color: #B49CFF; }
.crm.dark .bdg-running , html[data-theme="dark"] .crm .bdg-running { color: var(--ad-orange); }
.crm.dark .bdg-won     , html[data-theme="dark"] .crm .bdg-won     { color: var(--ad-turq); }
/* bdg-warn hatte als einziges Warn-Badge KEINEN Dark-Zweig und lebte davon, dass
   --ad-orange-700 auf dem dunklen Tint zufaellig 4.54:1 traf. Mit der dunkleren
   Light-Schrift faellt das weg (2.21:1) — der Zweig ist jetzt Pflicht, nicht Kosmetik. */
/* PR1.586: --ocker-text schaltet selbst auf die helle Stufe um (7.71:1 auf --ocker-grund dunkel). */

/* PR1.261 (#455) — rote Etiketten-Rolle. Bis hierher bildete die Nutzertabelle
   BEIDE dringenden Toene (`red`) und den warnenden (`orange`) auf `.bdg-warn` ab
   — im Redesign sahen "Stillgelegt" und "Eingeladen" damit identisch aus, obwohl
   das eine ein gesperrter Zugang und das andere der Normalfall ist. In der
   klassischen Shell war der Unterschied die ganze Zeit sichtbar
   (`.status-ton-red` vs `.status-ton-orange`, style.css:15871-15874).
   Werte und Dark-Zweig sind die bereits AA-geprueften Rot-Rollen von
   `.nkv-high` / `.conf-lo` / `.kb-doc-status-failed` — keine neue Farbe. */
.crm .bdg-danger { background: var(--tint-red); color: var(--ad-red-700); border-color: rgba(229,72,77,.4); }
.crm.dark .bdg-danger , html[data-theme="dark"] .crm .bdg-danger { color: var(--ad-red-300); }

/* PR1.343 (#557) — Staffing-Ampel. `bdg-ok` ist das echte Gruen fuer „voll besetzt" (das
   tuerkise `bdg-won` bleibt dem Status „Won"). Gemessen: Light #3F6E00 auf --tint-green
   5.2:1, Dark --ad-green auf --tint-green 7.03:1. */
.crm .bdg-ok { background: var(--tint-green); color: var(--ad-green-900); border-color: rgba(118,200,0,.35); }
.crm.dark .bdg-ok , html[data-theme="dark"] .crm .bdg-ok { color: var(--ad-green); }
/* Ampel-Zeile der Besetzungs-Karte (crm-opportunity-detail.js staffAmpelBlockHtml).
   Balken gegen --bg-surface, ≥ 3:1: Light rot 5.36 · orange 3.03 · gruen 3.23;
   Dark rot-300 7.28 · orange 7.80 · gruen 7.87. Keine Animation: taeglich genutzt. */
.crm .staff-ampel { display: flex; flex-direction: column; gap: var(--s-1); margin-bottom: var(--s-2); }
.crm .staff-ampel .bdg { align-self: flex-start; }
.crm .staff-ampel-bar {
  height: var(--s-1); border-radius: var(--r-xs); overflow: hidden;
  background: var(--bg-surface-2); outline: thin solid var(--border);
}
.crm .staff-ampel-fill { height: 100%; border-radius: inherit; }
.crm .staff-ampel-fill.tone-red    { background: var(--ad-red-700); }
.crm .staff-ampel-fill.tone-yellow { background: var(--ad-orange-700); }
.crm .staff-ampel-fill.tone-green  { background: var(--ad-green-700); }
.crm.dark .staff-ampel-fill.tone-red    , html[data-theme="dark"] .crm .staff-ampel-fill.tone-red    { background: var(--ad-red-300); }
.crm.dark .staff-ampel-fill.tone-yellow , html[data-theme="dark"] .crm .staff-ampel-fill.tone-yellow { background: var(--ad-orange); }
.crm.dark .staff-ampel-fill.tone-green  , html[data-theme="dark"] .crm .staff-ampel-fill.tone-green  { background: var(--ad-green); }
.crm .staff-ampel-hint { font-size: var(--fs-meta); font-weight: 500; color: var(--ad-red-700); margin-bottom: var(--s-2); }
.crm.dark .staff-ampel-hint , html[data-theme="dark"] .crm .staff-ampel-hint { color: var(--ad-red-300); }
.crm .staff-ampel-more { margin-top: var(--s-2); }
.crm .staff-ampel-more .btn { width: 100%; justify-content: center; }

/* BF-15 #394 — KB-Doc-Ingestion-Status. Zwei Rollen genuegen: „laeuft noch" erbt die
   Warn-Farben von .bdg-warn, „fehlgeschlagen" die Rot-Rollen von .nkv-high/.conf-lo
   (beide dort bereits AA-geprueft). Bewusst KEINE Rolle fuer `ready` — der Normalfall
   bleibt stumm, sonst geht die eine kaputte Zeile im Etiketten-Rauschen unter. */
.crm .kb-doc-status-pending { background: var(--tint-warn); color: var(--ad-orange-900); border-color: rgba(255,152,104,.25); }
.crm .kb-doc-status-failed  { background: var(--tint-red);  color: var(--ad-red-700);    border-color: rgba(229,72,77,.4); }
.crm.dark .kb-doc-status-pending , html[data-theme="dark"] .crm .kb-doc-status-pending { color: var(--ad-orange); }
.crm.dark .kb-doc-status-failed  , html[data-theme="dark"] .crm .kb-doc-status-failed  { color: var(--ad-red-300); }

/* ============== TABLES ============== */
.crm .tbl {
  width: 100%; border-collapse: separate; border-spacing: 0;
  font-size: var(--fs-body);
}
.crm .tbl thead th {
  text-align: left; font-weight: 500;
  font-size: var(--fs-meta);
  color: var(--text-3);
  background: var(--bg-surface-2);
  padding: 9px 14px;
  border-bottom: 1px solid var(--border);
  border-top: 1px solid var(--border);
}
.crm .tbl thead th:first-child { border-top-left-radius: 8px; border-left: 1px solid var(--border); }
.crm .tbl thead th:last-child  { border-top-right-radius: 8px; border-right: 1px solid var(--border); }
.crm .tbl tbody td {
  padding: 11px 14px;
  border-bottom: 1px solid var(--border);
  color: var(--text-1);
  vertical-align: middle;
  background: var(--bg-surface);
}
.crm .tbl tbody td:first-child { border-left: 1px solid var(--border); }
.crm .tbl tbody td:last-child  { border-right: 1px solid var(--border); }
.crm .tbl tbody tr:last-child td:first-child { border-bottom-left-radius: 8px; }
.crm .tbl tbody tr:last-child td:last-child  { border-bottom-right-radius: 8px; }
.crm .tbl tbody tr:hover td { background: var(--bg-hover); }
.crm .tbl .num { font-family: var(--f-mono); font-size: var(--fs-ui); font-variant-numeric: tabular-nums; }
.crm .tbl .strong { font-weight: 600; color: var(--text-1); }
.crm .tbl .muted { color: var(--text-3); }

/* RD1.13 #336 Phase 3 — Leer-, Lade- und Fehlerzustand der Redesign-Views.
   Bewusst OHNE px und ohne rohe Hex-Farben: die Ratchets raw-px/raw-hex zaehlen
   ausschliesslich in dieser Datei, und diese Phase darf sie nicht gegenfinanzieren.
   Nur Tokens, rem und Prozent. Ebenso kein px-Raster (Pruefung breakpoints) und
   kein zweites overflow:auto (Pruefung scroll-container). */
.crm .crm-empty { text-align: center; }
.crm .crm-empty-title { font-weight: 600; color: var(--text-1); }
.crm .crm-empty-hint { margin-top: .35rem; color: var(--text-3); font-size: var(--fs-body); }
.crm .crm-empty-icon { display: inline-flex; align-items: center; justify-content: center; inline-size: 3rem; block-size: 3rem; margin: 0 auto .75rem; border-radius: var(--r-md); background: var(--bg-surface-2); color: var(--text-3); }
.crm .crm-empty-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem; margin-top: 1rem; }
/* Leerzustand innerhalb einer Tabelle, eines Kanbans oder eines Listenrahmens: ohne zweite Karte. */
.crm .crm-empty-inline,
.crm td .crm-empty,
.crm .kanban .crm-empty,
.crm .emp-empty.crm-empty { border: 0; box-shadow: none; background: transparent; }
/* PR1.649 — Zeilen, Balken und Puls des Skeletts liegen gemeinsam in style.css (.skel*). */
.crm .crm-skeleton .skel-row { margin: 0; }
.crm .crm-error-body { flex: 1; padding: 1rem 1.4rem; }

/* RD1.13 #336 Phase 4 — Mitarbeiter-Ansicht: Filterleiste, Auswahl, erweiterte Karte.
   Wie in Phase 3 buchstaeblich OHNE px und ohne rohe Hex-Farben — nur Tokens, rem,
   Prozent. Kein zusaetzliches overflow:auto (Pruefung scroll-container) und kein
   px-Raster (Pruefung breakpoints): die Timeline ist Flex, kein Grid. */
.crm .crm-input {
  font: inherit; font-size: var(--fs-ui);
  padding: .32rem .6rem;
  color: var(--text-1);
  background: var(--bg-surface);
  /* `thin` statt 1px: semantisch dasselbe Haarlinien-Raster, aber ohne den raw-px-Ratchet
     zu heben — diese Phase soll ihn nicht gegenfinanzieren. */
  border: thin solid var(--border);
  border-radius: .4rem;
  min-width: 0;
}
.crm .emp-bulk-bar { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
.crm .emp-bulk-bar .clsf-progress-host { flex: 1 1 100%; }

/* Karte */
/* RD1.13 #336 Reparatur (Coordinator-Befund 03.08.) — der Name ist der Tastaturweg in
   das Profil und deshalb ein echter `<button>`. Er soll aber aussehen wie die
   Überschrift, die er vorher war: gleiche Stärke, gleiche Farbe, gleiche Kappung.
   Der Fokusring kommt aus der generischen `.crm :focus-visible`-Regel am Dateiende. */
.crm .emp-card-open , .crm .emp-card-name {
  display: block; width: 100%;
  font: inherit; font-weight: 600; color: var(--text-1); text-align: left;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.crm .emp-card-open { padding: 0; border: 0; background: none; cursor: pointer; }
.crm .emp-avatar {
  position: relative;
  flex: 0 0 auto; width: 2.5rem; height: 2.5rem;
  border-radius: .7rem;
  display: flex; align-items: center; justify-content: center;
  color: white;
  font-family: var(--f-cond); font-weight: 500; font-size: var(--fs-body); letter-spacing: .03em;
  overflow: visible;
}
.crm .emp-photo { width: 100%; height: 100%; object-fit: cover; border-radius: .7rem; }
/* PR1.501 — Personen-Zuweisungen rund statt Karten-Ecken der MA-Liste. */
.crm .emp-avatar.is-round { border-radius: 50%; }
.crm .lnk {
  font: inherit; font-size: var(--fs-meta);
  color: var(--ad-blue); background: none; border: 0; padding: 0;
  cursor: pointer; text-decoration: underline;
}

/* Shoring-Slots: eigener, zusammenklappbarer Block — anonyme Slots sind keine Personen. */
.crm .emp-shoring { border-top: thin solid var(--border); padding-top: .7rem; }
.crm .emp-shoring-head {
  display: flex; align-items: center; gap: .5rem;
  font: inherit; font-size: var(--fs-meta); font-weight: 500; color: var(--text-2);
  background: none; border: 0; padding: 0; cursor: pointer;
}
.crm .emp-shoring-body { display: flex; flex-wrap: wrap; gap: .35rem; margin-top: .5rem; }
.crm .tbl .lnk { color: var(--ad-blue); font-weight: 600; cursor: pointer; }
.crm .tbl .lnk:hover { text-decoration: underline; }
.crm.dark .tbl .lnk , html[data-theme="dark"] .crm .tbl .lnk { color: var(--ad-blue-300); }

/* row mini-avatar */
.crm .mini-av {
  width: 22px; height: 22px;
  border-radius: 50%;
  background: var(--ad-violet);
  color: white;
  font-family: var(--f-cond); font-size: var(--fs-label); font-weight: 500;
  display: inline-flex; align-items: center; justify-content: center;
  margin-right: 8px; vertical-align: -6px;
  letter-spacing: .2px;
}
.crm .mini-av.av2 { background: var(--ad-turq-700); }
.crm .mini-av.av3 { background: var(--ad-orange-700); }
.crm .mini-av.av4 { background: var(--ad-blue); }

/* ============== KANBAN ============== */
.crm .kanban {
  display: grid;
  /* PR1.327 (#537) — bis hierher hart auf 4 Spalten. Das ging gut, solange selten mehr
     als vier Spalten Karten trugen; mit der festen Lost-Spalte und einer moeglichen
     Waisen-Spalte (PR1.87) rutschte die fuenfte lautlos in eine zweite Reihe.
     `auto-fit` statt einer festen Zahl, und die Mindestbreite in `rem` — ein neuer
     px-Wert in dieser Datei blockt den ui-craft-Ratchet. */
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
  gap: 10px;
}
/* PR1.564 (#850) — Entwurf 4: feste Spaltenbreite statt Umbruch in eine zweite Reihe. Die
   Spalten liegen in einer waagrechten Spur (18.75rem ≈ 280px bei der Redesign-Grundschrift) und das Brett scrollt seitlich;
   eine Pipeline-Stufe rutscht nie mehr unter die anderen. */
.crm .kanban {
  display: flex;
  align-items: flex-start;
  overflow-x: auto;
  padding-bottom: var(--s-2);
}
.crm .kanban > .kan-col { flex: 0 0 18.75rem; }
.crm .kan-col {
  background: var(--bg-surface-2);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 10px 10px 12px;
  display: flex; flex-direction: column; gap: var(--s-2);
  min-height: 320px;
}
.crm .kan-head {
  display: flex; align-items: center; gap: var(--s-2);
  padding: 4px 4px 8px;
  border-bottom: 1px dashed var(--border);
}
.crm .kan-head .name {
  font-family: var(--f-cond); font-weight: 500;
  font-size: var(--fs-body);
}
.crm .kan-head .cnt {
  margin-left: auto; font-family: var(--f-mono); font-variant-numeric: tabular-nums; font-size: var(--fs-meta);
  color: var(--text-3);
  padding: 1px 7px; background: var(--bg-surface); border: 1px solid var(--border); border-radius: 999px;
}
.crm .kan-head .led { width: 8px; height: 8px; border-radius: 50%; }
.crm .kan-card {
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: 10px 12px;
  display: flex; flex-direction: column; gap: 6px;
  font-size: var(--fs-ui);
  cursor: grab;
  transition: box-shadow var(--t-fast), transform var(--t-fast);
  box-shadow: var(--shadow-1);
}
@media (hover: hover) and (pointer: fine) { .crm .kan-card:hover { transform: translateY(-1px); box-shadow: var(--shadow-2); } }
/* PR1.647 Nachzug (#946) — V3 Legende 3: „die farbige Seitenkante auf jeder Karte faellt weg".
   Die Klassen k-prop/k-lost/k-active/… bleiben am Markup (Tests, Lesbarkeit); unterschieden wird
   ueber Spaltenkopf-LED, Status und den Verlustgrund (.kan-lost-grund), nicht mehr ueber den Rand. */

/* PR1.433 (#676) — Opp-Kanban nach Entwurf K6 (Klassik-Pendant: #kanban-board in
   style.css). Nur Tokens und rem — der ui-craft-Ratchet (RD1.10) blockt neue Rohwerte.
   .kan-card gehoert auch dem Projekt-Brett; die neuen Teile (.kc-*) gibt es nur hier. */
.crm .kan-sums {
  display: flex; flex-wrap: wrap; gap: var(--s-1) var(--s-3);
  padding: 0 var(--s-1);
  font-size: var(--fs-meta); color: var(--text-2);
  font-variant-numeric: tabular-nums;
}
.crm .kan-sums span,
.crm .kan-card .kc-facts span,
.crm .kan-card .kc-events,
.crm .kan-card .kc-next { display: inline-flex; align-items: center; gap: var(--s-1); }
.crm .kan-card .kc-head { display: flex; align-items: flex-start; gap: .625rem; min-width: 0; }
.crm .kan-card .kc-head-text { flex: 1 1 auto; min-width: 0; }
/* PR1.433-optik — Titel und Kunde brechen nur zwischen Woertern um. `anywhere` brach neben
   breiten Logos mitten im Wort („Umgebun / g"); `break-word` trennt nur ein Wort, das allein
   breiter als die Zeile ist. Die Spalte waechst dadurch nicht: Grid-Mindestbreite 13rem,
   .kc-head-text hat min-width:0. */
.crm .kan-card .kc-head .title { font-weight: 600; line-height: 1.3; overflow-wrap: break-word; }
.crm .kan-card .kc-head .sub { font-size: var(--fs-body); color: var(--text-2); overflow-wrap: break-word; }
/* Wortmarken wie STACKIT (Verhaeltnis 4,9) nahmen bis zu 7rem und drueckten die Titelspalte
   zusammen. Zwei Kappen: hoechstens 4.5rem, in schmalen Spalten hoechstens 30 % des
   Kartenkopfs; object-fit:contain (style.css) verkleinert das Bild proportional. */
.crm .kan-card .kc-hs { flex: none; max-width: 30%; }
.crm .kan-card .kc-hs .hs-logo-img { max-width: min(4.5rem, 100%); }
.crm .kan-card .kc-incomplete { display: flex; flex-wrap: wrap; gap: var(--s-1); }
.crm .kan-card .kc-facts {
  display: flex; flex-wrap: wrap; gap: var(--s-1) var(--s-3);
  padding-top: var(--s-2); border-top: .0625rem solid var(--border);
  font-size: var(--fs-body); color: var(--text-2);
  font-variant-numeric: tabular-nums;
}
.crm .kan-card .kc-foot {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-1) var(--s-3);
  font-size: var(--fs-body); color: var(--text-2);
  font-variant-numeric: tabular-nums;
}
/* Kanban-Karte: dieselben Staffing-Kaestchen, etwas kleiner. */
.crm .kan-card .kc-foot .staff-slot { width: 0.875rem; height: 0.875rem; border-radius: 0.25rem; }
.crm .kan-card .kc-overdue { color: var(--ad-red-700); font-weight: 600; }
.crm.dark .kan-card .kc-overdue ,
html[data-theme="dark"] .crm .kan-card .kc-overdue { color: var(--ad-red-300); }
.crm .kan-card .kc-id { margin-left: auto; font-size: var(--fs-body); color: var(--text-3); }

/* PR1.327 (#537) — der Pflicht-Stern im Verlustgrund-Dialog. Die gemeinsame Basis
   bindet ihn an `--danger`; im .crm-Scope ist das aber der geerbte Legacy-Wert
   (#ef4444, gemessen) — im Redesign weder der richtige Rotton noch kontraststark
   genug auf weissem Dialoggrund. Eine Zeile, kein neuer Rohwert. */
.crm .lost-reason-overlay .lr-pflicht { color: var(--ad-red-700); }
.crm.dark .lost-reason-overlay .lr-pflicht ,
html[data-theme="dark"] .crm .lost-reason-overlay .lr-pflicht { color: var(--ad-red-300); }
/* Der Verlustgrund auf der Karte. Ohne rohe Werte — die Zahlen sind Tokens, weil der
   ui-craft-Ratchet (RD1.10) jeden neuen Rohwert in dieser Datei blockt. */
.crm .kan-card .kan-lost-grund {
  font-size: var(--fs-body);
  line-height: 1.4;
  color: var(--ad-red-700);
}
/* ⚠️ GEMESSEN, nicht geschaetzt: --ad-red-700 auf dem dunklen Kartengrund ergibt
   3.07:1 und faellt unter AA — exakt der Wert, den der Palette-Kommentar oben fuer
   diesen Fall nennt. Die helle Stufe ist genau dafuer da. Ohne diesen Zweig waere der
   Verlustgrund im Dunkelmodus schlechter lesbar als der Hinweis „nicht erfasst"
   daneben, und das Ticket haette sein eigenes Ziel verfehlt. */
.crm.dark .kan-card .kan-lost-grund ,
html[data-theme="dark"] .crm .kan-card .kan-lost-grund { color: var(--ad-red-300); }
/* „Grund nicht erfasst" — die sechs Bestandsvorgaenge. Auf dem WEISSEN Kartengrund
   (--bg-surface) kommt --text-3 auf 4.98:1 und haelt AA; auf --bg-surface-3 waeren es
   4.40:1 gewesen, deshalb hier bewusst keine Flaeche, nur Text. */
.crm .kan-card .kan-lost-grund.leer { color: var(--text-3); font-style: italic; }
/* Leere Spalte. Sie ist kein Makel: das Ablageziel fuer die Absage, die gerade
   hereinkam, und die Aussage „diese Woche nichts verloren". */
.crm .kan-col-leer {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: var(--s-4) var(--s-3);
  font-size: var(--fs-body);
  line-height: 1.45;
  color: var(--text-3);
}
/* PR1.387 #608 — Lost-Spalte im Modus „Aktuell": verlorene Karten liegen sofort im
   Archiv, die Spalte sagt wo und bietet den Weg dorthin. Gedaempft wie der Leerzustand
   darueber, kein Rot — sie meldet keinen Fehler. */
.crm .kan-lost-archiv {
  /* flex: 1 + zentriert wie .kan-col-leer — sonst sitzt der Hinweis oben, das „Nichts
     hier" der Nachbarspalte aber mittig, und die Zeile wirkt verrutscht. */
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  padding: var(--s-4) var(--s-3);
  text-align: center;
  font-size: var(--fs-body);
  line-height: 1.45;
  color: var(--text-3);
}
.crm .kan-lost-archiv p { margin: 0; }
.crm .kan-card .title { font-weight: 600; color: var(--text-1); font-size: var(--fs-body); }
.crm .kan-card .sub { color: var(--text-2); font-size: var(--fs-ui); }
/* BF-27 #421 — Portfolio-Chips auf der Kanban-Karte. Bewusst ohne rohe Pixelwerte: der
   raw-px-Ratchet aus RD1.10 (scripts/ui-craft-baseline.json) hat keinen Spielraum, jeder
   neue px-Wert in dieser Datei blockt die Pipeline. --s-1 ist der vorhandene 4px-Token.
   overflow-wrap, weil .bdg display:inline-flex ist und lange Portfolio-Namen sonst
   unteilbar bleiben und aus der Karte ragen. */
.crm .kan-card .tags { display: flex; flex-wrap: wrap; gap: var(--s-1); min-width: 0; }
.crm .kan-card .tags .bdg { max-width: 100%; overflow-wrap: anywhere; }
.crm .kan-card .row {
  display: flex; align-items: center; gap: 6px;
  font-family: var(--f-mono); font-variant-numeric: tabular-nums; font-size: var(--fs-meta);
  color: var(--text-3);
}
.crm .kan-card .row .vol { color: var(--text-1); font-weight: 600; }
/* PR1.367 (#581) — Team-Kuerzel auf der Projektkarte (.mini-av wie in den Listen).
   Nur Tokens — der ui-craft-Ratchet blockt jeden neuen Rohwert. */
.crm .kan-card .kan-team { display: flex; flex-wrap: wrap; gap: var(--s-1); }

/* ── PR1.564 (#850) — Kanban neu geordnet (Entwurf 4), Opp- UND Projekt-Brett ──
   Klassik-Pendant: Block „PR1.564" in style.css. Nur Tokens und rem (ui-craft-Ratchet).
   Taeglich genutzt: keine Einblend-Animation. */
.crm .kanban-sortbar {
  display: inline-flex; align-items: center; gap: .125rem; align-self: flex-start;
  padding: .1875rem;
  border: .0625rem solid var(--border); border-radius: var(--r-md);
  background: var(--bg-surface);
}
.crm .kanban-sortbar-lbl { padding: 0 var(--s-2) 0 .375rem; font-size: var(--fs-ui); color: var(--text-2); }
.crm .kanban-sort-btn {
  font: inherit; font-size: var(--fs-ui);
  border: 0; background: transparent; color: var(--text-2);
  padding: .3125rem .625rem; border-radius: var(--r-sm); cursor: pointer;
}
.crm .kanban-sort-btn:hover { color: var(--text-1); background: var(--bg-surface-2); }
.crm .kanban-sort-btn.is-on { color: var(--ad-blue); background: var(--bg-surface-3); font-weight: 600; }
.crm .kanban-sort-btn:focus-visible { outline: .125rem solid var(--ad-blue); outline-offset: .0625rem; }
.crm .kan-col { min-height: 0; }
.crm .kan-head .cnt { margin-left: 0; }
.crm .kan-head .vol {
  margin-left: auto; font-size: var(--fs-ui); color: var(--text-2);
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.crm .kan-head[role="button"] { cursor: pointer; border-radius: var(--r-sm); }
.crm .kan-head[role="button"]:focus-visible { outline: .125rem solid var(--ad-blue); outline-offset: .125rem; }
.crm .kanban-group { padding: var(--s-1) var(--s-1) 0; font-size: var(--fs-meta); font-weight: 500; color: var(--text-2); }
.crm .kanban-group-soon { color: var(--ad-orange-700); }
.crm.dark .kanban-group-soon ,
html[data-theme="dark"] .crm .kanban-group-soon { color: var(--ad-orange); }
/* Schmale Leiste: leere oder eingeklappte Spalte. Bleibt Ablageziel (die Spalte selbst). */
.crm .kanban > .kan-col.is-strip { flex: 0 0 3.5rem; padding: .625rem .375rem; align-items: center; }
.crm .kan-col.is-strip .kan-head { border-bottom: 0; padding: .25rem 0; justify-content: center; }
.crm .kan-col.is-strip .kan-head > :not(.led) { display: none; }
.crm .kan-col.is-strip :is(.kanban-group, .kan-card) { display: none; }
.crm .kanban-strip-label {
  writing-mode: vertical-rl; transform: rotate(180deg);
  font-size: var(--fs-meta); font-weight: 500; color: var(--text-2); white-space: nowrap;
}
/* PR1.707 (#1010) — Vorlage K6, nur neue Ansicht: breite Spalten, alle sichtbar, Abschluesse
   eingeklappt. Anteilig statt fest (Vorgabe 04.11.): Lead : Proposal : Won ≈ 3 : 3 : 2, je
   aktive Spalte mindestens 22rem (330 px bei der Redesign-Grundschrift 15 px); die Leiste ist fest 4.4rem (66 px). Reicht die
   Breite nicht, scrollt das Brett seitlich wie bisher (BF-27). Spalten gleich hoch. */
.crm .kanban.kanban-breit { align-items: stretch; gap: var(--s-3); }
.crm .kanban.kanban-breit > .kan-col { flex: 3 1 0; min-width: 22rem; }
.crm .kanban.kanban-breit > .kan-col.kan-abschluss { flex: 2 1 0; min-width: 18rem; }
.crm .kanban.kanban-breit > .kan-col.is-strip { flex: 0 0 4.4rem; min-width: 4.4rem; }
.crm .kanban-breit .kan-head .kan-zu {
  margin-left: auto; flex: 0 0 auto; width: 1.75rem; height: 1.75rem; border-radius: 50%;
  border: 0; background: transparent; color: var(--text-2); font-size: var(--fs-body); font-weight: 600;
  cursor: pointer; display: inline-grid; place-items: center;
}
.crm .kanban-breit .kan-head .vol + .kan-zu { margin-left: var(--s-1); }
/* K6: Volumen im Kopf halbfett und dunkel („2,5 Mio. €“). */
.crm .kanban-breit .kan-head .vol { font-weight: 600; color: var(--text-1); }
.crm .kanban-breit .kan-head .kan-zu:hover { background: var(--bg-surface-2); color: var(--text-1); }
.crm .kanban-breit .kan-head .kan-zu:focus-visible { outline: .14rem solid var(--ad-blue); outline-offset: .0625rem; }
/* Leiste: oben ›, darunter Zahl, darunter Name senkrecht (von unten lesbar). Knopf + Ablageziel. */
.crm .kan-col.kan-leiste {
  background: var(--bg-surface); cursor: pointer;
  padding: var(--s-3) 0; gap: var(--s-3); justify-content: flex-start;
}
.crm .kan-col.kan-leiste:hover { border-color: var(--border-strong, var(--text-3)); }
/* .14rem ≈ 2 px bei 15 px Grundschrift (.125rem rundete auf 1 px). */
.crm .kan-col.kan-leiste:focus-visible { outline: .14rem solid var(--ad-blue); outline-offset: .125rem; }
.crm .kan-leiste-knopf {
  width: 1.75rem; height: 1.75rem; border-radius: 50%; display: inline-grid; place-items: center;
  background: var(--bg-surface-2); color: var(--text-2); font-weight: 600; font-size: var(--fs-body);
}
.crm .kan-leiste-zahl { font-size: var(--fs-meta); font-weight: 600; color: var(--text-2); font-variant-numeric: tabular-nums; }
.crm .kan-leiste-name {
  writing-mode: vertical-rl; transform: rotate(180deg); white-space: nowrap;
  font-family: var(--f-cond); font-weight: 600; font-size: var(--fs-body); color: var(--text-1);
}
/* Aufgeklappte Abschluss-Spalte; Won (und Projekte: Abgeschlossen) mit hellgruenem Grund. */
.crm .kan-col.kan-abschluss .kan-head { border-bottom: 0; }
.crm .kan-col.kan-abschluss .kan-head .led { flex: 0 0 auto; }
.crm .kan-col.kan-abschluss .kan-head .name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.crm .kan-col.kan-abschluss .kan-head .cnt {
  white-space: nowrap; flex: 0 0 auto;
  font-size: var(--fs-meta); color: var(--text-2); font-variant-numeric: tabular-nums;
  padding: .0625rem var(--s-2); background: var(--bg-surface); border: .0625rem solid var(--border); border-radius: 6.25rem;
}
.crm .kan-col.kan-abschluss.ton-won {
  background: color-mix(in srgb, var(--ad-green) 8%, var(--bg-surface));
  border-color: color-mix(in srgb, var(--ad-green) 35%, var(--border));
}
.crm .kan-abschluss-karten { display: flex; flex-direction: column; gap: var(--s-3); }
.crm .kan-col.kan-abschluss .kan-won-foot { margin-top: auto; }
/* Archiv in Bloecken (Legende 3): gleich breit, Kopf vollfarbig mit Zahl, Liste darunter. */
.crm .kan-archiv { display: flex; flex-direction: column; gap: var(--s-3); }
.crm .kan-archiv-hinweis { margin: 0; font-size: var(--fs-ui); color: var(--text-2); }
.crm .kan-archiv-bloecke {
  display: grid; gap: var(--s-3); align-items: start;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
@media (max-width: 60rem) { .crm .kan-archiv-bloecke { grid-template-columns: minmax(0, 1fr); } }
.crm .kan-archiv-block {
  background: var(--bg-surface); border: .0625rem solid var(--border); border-radius: var(--r-lg); overflow: hidden;
}
.crm .kan-archiv-kopf {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-2);
  padding: var(--s-3) var(--s-4, 1rem); color: white;
  font-family: var(--f-cond); font-weight: 600; font-size: var(--fs-body);
}
.crm .kan-archiv-kopf .cnt { font-variant-numeric: tabular-nums; font-size: var(--fs-ui); }
.crm .kan-archiv-block.ton-won .kan-archiv-kopf { background: var(--ad-green-700); }
.crm .kan-archiv-block.ton-irrelevant .kan-archiv-kopf { background: var(--text-3); }
.crm .kan-archiv-block.ton-lost .kan-archiv-kopf { background: var(--ad-red-700); }
/* Dark: --text-3 ist dort hell; weisse Schrift braucht einen dunkleren Grauton. */
.crm.dark .kan-archiv-block.ton-irrelevant .kan-archiv-kopf ,
html[data-theme="dark"] .crm .kan-archiv-block.ton-irrelevant .kan-archiv-kopf { background: color-mix(in srgb, var(--text-3) 55%, black); }
.crm .kan-archiv-liste { list-style: none; margin: 0; padding: 0 var(--s-3); }
.crm .kan-archiv-zeile {
  display: flex; align-items: center; gap: var(--s-3); padding: var(--s-3) 0; cursor: pointer;
  border-bottom: .0625rem solid var(--border);
}
.crm .kan-archiv-zeile:last-child { border-bottom: 0; }
.crm .kan-archiv-zeile:hover .kan-archiv-titel { color: var(--ad-blue); }
.crm .kan-archiv-zeile:focus-visible { outline: .14rem solid var(--ad-blue); outline-offset: -.125rem; }
/* Nachzug 06.11.2026 — Kundenlogo (ohne Logo Gebaeude-Flaeche) statt Kuerzel. */
.crm .kan-archiv-logo { flex: 0 0 auto; width: 1.75rem; height: 1.75rem; display: inline-grid; place-items: center; }
.crm .kan-archiv-text { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.crm .kan-archiv-titel { font-size: var(--fs-ui); color: var(--text-1); overflow-wrap: anywhere; }
.crm .kan-archiv-grund { font-size: var(--fs-meta); color: var(--text-2); }
.crm .kan-archiv-datum { flex: 0 0 auto; font-size: var(--fs-meta); color: var(--text-2); font-variant-numeric: tabular-nums; }
.crm .kan-archiv-leer { margin: 0; padding: var(--s-3); font-size: var(--fs-ui); color: var(--text-2); }
.crm .kan-card { cursor: pointer; }
.crm .kan-card[data-ziehbar="true"] { cursor: grab; user-select: none; -webkit-user-select: none; }
.crm .kan-card .kc-head .title {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  font-weight: 600;
}
.crm .kan-card .kc-incomplete:empty { display: none; }
.crm .kan-card .kc-facts { padding-top: 0; border-top: 0; gap: var(--s-1) .625rem; white-space: nowrap; }
.crm .kan-card .kc-facts b { color: var(--text-1); font-weight: 600; }
.crm .kan-card .kc-foot {
  gap: var(--s-1) .625rem;
  padding-top: var(--s-2); border-top: .0625rem solid var(--border);
}
.crm .kan-card .kc-team { display: inline-flex; }
.crm .kan-card .kc-av {
  display: inline-grid; place-items: center;
  width: 1.375rem; height: 1.375rem; margin-left: -.25rem;
  border-radius: 50%; border: .125rem solid var(--bg-surface);
  background-color: var(--mono-bg); background-size: cover;
  box-shadow: inset 0 0 0 0.0625rem var(--mono-border);   /* PR1.653: einfarbig statt Farbwechsel */
  font-family: var(--f-cond); font-size: var(--fs-label); font-weight: 500; color: var(--mono-fg);
}
.crm .kan-card .kc-av:first-child { margin-left: 0; }
.crm .kan-card .kc-av-more { background-color: var(--bg-surface-3); color: var(--text-2); }
.crm .kan-card .kc-av.has-ma-photo { color: transparent; }   /* PR1.653 (#952): nur wenn das Foto wirklich liegt, sonst bleibt das Kuerzel */
.crm .kan-card .kc-start { margin-left: auto; }
.crm .kan-card .kc-start.is-soon { color: var(--ad-orange-700); font-weight: 600; }
.crm.dark .kan-card .kc-start.is-soon ,
html[data-theme="dark"] .crm .kan-card .kc-start.is-soon { color: var(--ad-orange); }
.crm .kan-card .kc-start.is-open { color: var(--text-3); }
/* PR1.653 (#952) — ueberfaelliger Start als Pille statt oranger Schrift */
.crm .kan-card .kc-start.is-overdue { color: var(--text-2); display: inline-flex; align-items: center; gap: .375rem; font-weight: 400; }
.crm .kan-card .kc-pill { padding: .125rem .5rem; border-radius: 6.25rem; font-size: var(--fs-label); font-weight: 600; background: var(--tint-warn); color: var(--ad-orange-900); border: .0625rem solid rgba(255,152,104,.25); }
.crm.dark .kan-card .kc-pill , html[data-theme="dark"] .crm .kan-card .kc-pill { color: var(--ad-orange); }

.crm .progress {
  width: 100%; height: 5px; background: var(--bg-surface-3);
  border-radius: 999px; overflow: hidden;
}
.crm .progress > span { display: block; height: 100%; background: var(--ad-green); border-radius: 999px; }
.crm .progress.warn > span { background: var(--ad-orange); }
.crm .progress.violet > span { background: var(--ad-violet); }

/* ============== CONTENT HEADER ============== */
/* RD1.14 #337 — `flex-wrap` nachgetragen. Erster Befund der neuen Layout-Zusicherungen:
   ohne Umbruch ragten die Kopfzeilen-Knöpfe der Kapazitäts-Ansicht bei 768px Fensterbreite
   71px aus dem Fenster und 81px aus `.app-canvas`, die `.app-canvas` kappte sie — „Export"
   war dort schlicht nicht erreichbar. Betroffen ist jede Ansicht mit mehr als einem Knopf
   in der Kopfzeile; aufgefallen ist es an `capacity`, weil sie zwei hat.
   Kein neuer px- oder Hex-Wert, die neun Ratchet-Zahlen bleiben unverändert. */
.crm .page-head {
  display: flex; flex-wrap: wrap; align-items: flex-end; gap: 18px;
  padding: 18px 22px 14px;
  background: var(--bg-app);
  border-bottom: 1px solid var(--border);
}
.crm .page-head h1 {
  font-family: var(--f-cond); font-weight: 600;
  font-size: var(--fs-display); letter-spacing: -.4px; line-height: 1.1;
  margin: 0; color: var(--text-1);
}
.crm .page-head .sub { font-size: var(--fs-body); color: var(--text-2); margin-top: 4px; }
/* RD1.13 #336 Phase 6 — schmale Fenster: das Admin-Panel fuehrt bis zu drei Kopf-Aktionen
   (Einladen, KB Command Center, Matching-Rollout). Ohne Umbruch schoben sie die Seite auf
   waagerechtes Scrollen (Konvention 20). `wrap` greift nur im Ueberlauf. */
/* Gleicher Grund wie oben: die Knopfgruppe selbst muss ebenfalls umbrechen dürfen, sonst
   verschiebt sich der Überstand nur eine Ebene tiefer. */
.crm .page-head .actions { margin-left: auto; display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); }

/* ============== TOOLBAR (List view controls) ============== */
.crm .toolbar {
  display: flex; align-items: center; gap: 10px;
  /* RD1.13 #336 Phase 5 — schmale Fenster: ohne Umbruch schob die Preset-Leiste der
     Kundenliste die Toolbar bei 375 rem-Aequivalent auf 586 Breite und erzeugte
     waagerechtes Seiten-Scrollen (Konvention 20: „funktioniert schmal wie breit").
     Der Befund ist aelter als diese Phase und betrifft jede Redesign-Liste; `wrap`
     greift ausschliesslich im Ueberlauf und laesst breite Fenster unveraendert. */
  flex-wrap: wrap;
  padding: 10px 22px;
  border-bottom: 1px solid var(--border);
  background: var(--bg-surface);
}
.crm .toolbar .grow { flex: 1; }
.crm .chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px;
  background: var(--bg-surface-2);
  border: 1px solid var(--border);
  border-radius: 999px;
  font-size: var(--fs-ui); color: var(--text-2);
  cursor: pointer;
  transition: background var(--t-fast), border-color var(--t-fast);
}
.crm .chip:hover { border-color: var(--border-strong); color: var(--text-1); }
.crm .chip.is-on { background: var(--tint-blue); border-color: rgba(0,110,199,.4); color: var(--ad-blue); }
.crm.dark .chip.is-on , html[data-theme="dark"] .crm .chip.is-on { color: var(--ad-blue-300); }

/* ============== TABS ============== */
.crm .tabs {
  display: flex; align-items: center; gap: 0;
  /* Fuenf Reiter passen schmal nicht nebeneinander — sie brechen um, statt die Seite
     waagerecht scrollen zu lassen (RD1.13 #336 Phase 6). */
  flex-wrap: wrap;
  padding: 0 22px;
  border-bottom: 1px solid var(--border);
  background: var(--bg-surface);
}
.crm .tab {
  padding: 12px 14px 11px;
  border-bottom: 2px solid transparent;
  font-size: var(--fs-body); font-weight: 500; color: var(--text-2);
  cursor: pointer;
  transition: color var(--t-fast), border-color var(--t-fast);
}
.crm .tab:hover { color: var(--text-1); }
.crm .tab.active { color: var(--ad-blue); border-bottom-color: var(--ad-blue); }
.crm.dark .tab.active , html[data-theme="dark"] .crm .tab.active { color: var(--ad-blue-300); border-bottom-color: var(--ad-blue-300); }

/* ============== HIGHLIGHTS PANEL (Salesforce) ============== */
.crm .highlights {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr 1fr;
  gap: 0;
  background: var(--bg-surface);
  border-bottom: 1px solid var(--border);
}
.crm .hl-cell {
  padding: 14px 18px;
  border-right: 1px solid var(--border);
  display: flex; flex-direction: column; gap: 2px;
}
.crm .hl-cell:last-child { border-right: none; }
.crm .hl-label {
  font-size: var(--fs-label); font-weight: 500; color: var(--text-3);
}
.crm .hl-value {
  font-family: var(--f-cond); font-weight: 600; font-size: var(--fs-section); color: var(--text-1);
  letter-spacing: -.2px;
}
.crm .hl-cell.identity .hl-value { font-size: var(--fs-title); }
.crm .hl-cell.identity .hl-sub { font-size: var(--fs-ui); color: var(--text-2); }

/* ============== ACTIVITY TIMELINE ============== */
.crm .timeline { position: relative; padding-left: 22px; }
.crm .timeline::before {
  content: '';
  position: absolute; left: 8px; top: 6px; bottom: 6px;
  width: 1px; background: var(--border);
}
.crm .tl-item {
  position: relative;
  padding: 0 0 14px 0;
  display: flex; flex-direction: column; gap: 2px;
}
.crm .tl-item::before {
  content: ''; position: absolute; left: -19px; top: 4px;
  width: 11px; height: 11px; border-radius: 50%;
  background: var(--bg-surface);
  border: 2px solid var(--ad-blue);
}
.crm .tl-item.warn::before { border-color: var(--ad-orange); }
.crm .tl-item.ok::before   { border-color: var(--ad-turq-700); }
.crm .tl-item .when { font-size: var(--fs-meta); color: var(--text-3); font-family: var(--f-mono); font-variant-numeric: tabular-nums; }
.crm .tl-item .what { font-size: var(--fs-body); color: var(--text-1); font-weight: 500; }
.crm .tl-item .who  { font-size: var(--fs-ui); color: var(--text-2); }

/* ============== UTILITY BAR (Salesforce-style) ============== */
.crm .utility {
  display: flex; align-items: center; gap: 0;
  padding: 0 18px;
  background: var(--bg-surface-2);
  border-top: 1px solid var(--border);
  height: 34px;
}
.crm .util-tab {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 0 14px; height: 100%;
  font-size: var(--fs-ui); color: var(--text-2);
  cursor: pointer;
  border-right: 1px solid var(--border);
  transition: background var(--t-fast), color var(--t-fast);
}
.crm .util-tab:first-child { border-left: 1px solid var(--border); }
.crm .util-tab:hover { background: var(--bg-hover); color: var(--text-1); }
.crm .util-tab .ic {
  width: 14px; height: 14px;
  display: inline-flex; align-items: center; justify-content: center;
}
.crm .util-tab .cnt {
  font-family: var(--f-mono); font-variant-numeric: tabular-nums; font-size: var(--fs-label);
  background: var(--ad-blue); color: white;
  padding: 1px 6px; border-radius: 999px;
  margin-left: 2px;
}

/* ============== FILTER PILLS ============== */
.crm .filter-row {
  display: flex; align-items: center; gap: var(--s-2);
  /* PR1.243 (#420): umbrechen statt ueberlaufen. Bis hierher hatte keine Filterzeile genug
     Pillen, um anzustossen; die CC-Zeile der Opportunity-Liste hat acht, darunter Namen wie
     „Cloud Advisory & Transformation" — ohne Umbruch schob sie den rechten Rand aus dem
     Container und die letzten Competence Center waren nicht mehr lesbar. */
  flex-wrap: wrap;
  padding: 8px 0;
  font-size: var(--fs-ui);
}
.crm .filter-row .lbl { color: var(--text-3); font-weight: 500; font-size: var(--fs-meta); }
.crm .fpill {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--bg-surface);
  color: var(--text-2);
  font-size: var(--fs-ui); font-weight: 500;
  cursor: pointer;
  transition: background var(--t-fast), border-color var(--t-fast), color var(--t-fast);
}
.crm .fpill:hover { border-color: var(--border-strong); color: var(--text-1); }
.crm .fpill.is-on { background: var(--tint-blue); border-color: rgba(0,110,199,.35); color: var(--ad-blue); }
/* PR1.586: dunkel stand --ad-blue auf --tint-blue bei 2.75:1 — helle Stufe wie .tab.active. */
.crm.dark .fpill.is-on , html[data-theme="dark"] .crm .fpill.is-on { color: var(--ad-blue-300); border-color: color-mix(in srgb, var(--ad-blue-300) 45%, transparent); }
.crm .fpill.violet.is-on { background: var(--tint-violet); border-color: rgba(70,30,190,.35); color: var(--ad-violet); }
.crm .fpill.orange.is-on { background: var(--tint-orange); border-color: rgba(255,152,104,.4); color: var(--ad-orange-700); }

/* PR1.508 — Knopf „Filter & Anpassen" + aktive Filter als Pillen (Markup aus
   components/filter-panel.js, dasselbe wie in der Klassik). Taeglich genutzt → keine
   Bewegung. Ohne px (ui-craft-Ratchet): rem + Tokens. */
.crm .filter-panel-toggle { display: inline-flex; align-items: center; gap: var(--s-2); white-space: nowrap; }
.crm .filter-panel-toggle .filter-panel-caret { display: inline-flex; color: var(--text-3); }
.crm .filter-panel-toggle.is-open .filter-panel-caret { transform: rotate(180deg); }
.crm .filter-panel-toggle.has-filters,
.crm .filter-panel-toggle.is-open { border-color: var(--ad-blue); color: var(--ad-blue); }
.crm .filter-panel-count {
  font-family: var(--f-mono); font-variant-numeric: tabular-nums; font-size: var(--fs-label); font-weight: 500;
  background: var(--ad-blue); color: var(--bg-surface);
  padding: .06rem .4rem; border-radius: 999rem;
}
.crm .filter-pills { display: inline-flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); flex: 0 1 auto; min-width: 0; }
.crm .filter-pill {
  display: inline-flex; align-items: center; gap: .4rem;
  max-width: 20rem;
  padding: .25rem .4rem .25rem .65rem;
  border: .0625rem solid rgba(0,110,199,.35);
  border-radius: 999rem;
  background: var(--tint-blue);
  color: var(--ad-blue);
  font-size: var(--fs-meta); font-weight: 500;
  cursor: pointer;
}
.crm .filter-pill:hover { border-color: var(--ad-blue); }
.crm .filter-pill-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.crm .filter-pill-dim { font-weight: 500; }
.crm .filter-pill-x {
  display: inline-flex; align-items: center; justify-content: center;
  width: 1rem; height: 1rem; border-radius: 999rem;
  background: rgba(0,110,199,.14);
  line-height: 1;
}
.crm .filter-pill:hover .filter-pill-x { background: var(--ad-blue); color: var(--bg-surface); }
.crm .filter-panel-actions { border-top: .0625rem solid var(--border); margin-top: var(--s-1); }

/* PR1.337 (#551) — Kennzahl-Leiste ueber der Opp-Liste („41 offen · 29 Leads · …"), dasselbe
   Markup wie in der Klassik (oppKennzahlenLeisteHtml). Echte <button>, Fokusring aus der
   generischen `.crm :focus-visible`-Regel. Taeglich genutzt → kein Uebergang, keine Bewegung.
   Ohne px (ui-craft-Ratchet): rem + Tokens; schmale Breiten bricht flex-wrap um. */
.crm .opp-kz-bar {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-1);
  padding: var(--s-1) var(--s-2);
  border: thin solid var(--border);
  border-radius: var(--r-md);
  background: var(--bg-surface);
}
.crm .opp-kz {
  display: inline-flex; align-items: baseline; gap: .375rem;
  padding: .375rem .625rem;
  border: thin solid transparent;
  border-radius: var(--r-sm);
  background: transparent;
  color: var(--text-2);
  font: inherit; font-size: var(--fs-ui);
  cursor: pointer;
}
.crm .opp-kz-num { color: var(--text-1); font-size: var(--fs-section); font-weight: 600; font-variant-numeric: tabular-nums; }
.crm .opp-kz:hover { background: var(--bg-surface-2); color: var(--text-1); }
.crm .opp-kz[aria-pressed="true"] { background: var(--tint-blue); border-color: var(--ad-blue); color: var(--text-1); }
/* PR1.586: „zu tun"-Zaehler (nicht gestafft, unvollstaendig, fehlende Angaben) sind Luecken, kein
   Fehler — Ocker statt Rot (Farbregel E4 Punkt 5). */
.crm .opp-kz.is-alert .opp-kz-num { color: var(--ocker-text); }
.crm .opp-kz-sep { color: var(--text-3); user-select: none; }
.crm .opp-kz-hint { padding: .375rem .625rem; color: var(--text-3); font-size: var(--fs-ui); }
.crm .opp-kz-hint--error { color: var(--danger); }
/* PR1.532 (#808) — Trefferzahl rechts in der Leiste (ersetzt Fusszeile + Notizzeile) und
   Kennzahl-Tooltip bei Hover UND Tastatur-Fokus. Taeglich genutzt → ohne Uebergang. */
.crm .opp-kz { position: relative; }
.crm .opp-kz-count { margin-left: auto; padding: .375rem .625rem; color: var(--text-3); font-size: var(--fs-meta); font-variant-numeric: tabular-nums; white-space: nowrap; }
.crm .opp-kz[data-tip]:hover::after,
.crm .opp-kz[data-tip]:focus-visible::after {
  content: attr(data-tip); position: absolute; left: 0; top: calc(100% + var(--s-1)); z-index: 40;
  width: max-content; max-width: 20rem; padding: var(--s-1) var(--s-2); border-radius: var(--r-sm);
  white-space: normal; text-align: left; font-size: var(--fs-meta); font-weight: 500; line-height: 1.4;
  background: var(--bg-card); color: var(--text-1); border: 0.0625rem solid var(--border); box-shadow: var(--shadow-2);
  pointer-events: none;
}

/* PR1.364 (#578) — Dashboard-Karte „Projekt-Health": Leiste wie die Projektliste, darunter
   die aufgeklappten Projekte. Ohne px (ui-craft-Ratchet), Fokusring aus der generischen
   `.crm :focus-visible`-Regel. Taeglich genutzt → keine Animation. */
.crm .dash-ph { display: flex; flex-direction: column; gap: var(--s-2); }
.crm .dash-ph-hint,
.crm .dash-ph-leer { margin: 0; color: var(--text-3); font-size: var(--fs-ui); }
.crm .dash-ph-leer { color: var(--text-2); }
.crm .dash-ph-liste { list-style: none; margin: 0; padding: 0; }
.crm .dash-ph-item + .dash-ph-item { border-top: thin solid var(--border); }
.crm .dash-ph-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas: "kopf meta" "schilder schilder" "satz satz";
  gap: .25rem .75rem;
  width: 100%;
  padding: .5rem .375rem;
  border: 0;
  border-radius: var(--r-sm);
  background: none;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.crm .dash-ph-row:hover { background: var(--bg-surface-2); }
.crm .dash-ph-kopf { grid-area: kopf; display: flex; align-items: baseline; gap: .5rem; min-width: 0; }
.crm .dash-ph-name { color: var(--text-1); font-size: var(--fs-body); font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.crm .dash-ph-kunde { color: var(--text-2); font-size: var(--fs-meta); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.crm .dash-ph-meta { grid-area: meta; color: var(--text-3); font-size: var(--fs-meta); white-space: nowrap; }
.crm .dash-ph-schilder { grid-area: schilder; display: flex; flex-wrap: wrap; gap: .25rem; }
.crm .dash-ph-satz {
  grid-area: satz;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  color: var(--text-2);
  font-size: var(--fs-ui);
}
.crm .dash-ph-fuss { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: .75rem; }
.crm .dash-ph-mehr { margin-right: auto; color: var(--text-3); font-size: var(--fs-meta); }
.crm .dash-ph-alle { padding: .25rem .125rem; border: 0; background: none; color: var(--ad-blue); font: inherit; font-size: var(--fs-ui); cursor: pointer; }
.crm .dash-ph-alle:hover { text-decoration: underline; }
/* --ad-blue erreicht auf dem dunklen Kartengrund nur 3.2:1 (axe, PR1.364) — hellere Stufe. */
.crm.dark .dash-ph-alle , html[data-theme="dark"] .crm .dash-ph-alle { color: var(--ad-blue-300); }
@media (max-width: 40rem) {
  .crm .dash-ph-row { grid-template-columns: minmax(0, 1fr); grid-template-areas: "kopf" "meta" "schilder" "satz"; }
}

/* ============== SOFT-WARNING ============== */
.crm .warn-box {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 10px 12px;
  background: var(--ocker-grund);
  border: 1px solid color-mix(in srgb, var(--ocker-fuell) 40%, transparent);
  border-left: 3px solid var(--ocker-fuell);
  border-radius: var(--r-sm);
  font-size: var(--fs-ui); color: var(--text-1);
}
/* Gleicher Befund wie bei den Badges: --ad-orange-700 auf --tint-warn ergibt 2.73:1.
   Nicht vom Coordinator gemeldet (die Warnbox steht nur in bestimmten Zustaenden), aber
   derselbe Fehler eine Zeile weiter — mitkorrigiert statt liegengelassen. Jetzt 5.62:1. */
.crm .warn-box b { color: var(--ocker-text); }  /* PR1.586: Ocker, beide Themen ueber das Token */

/* PR1.586 (#875) — Fristen und Luecken aus style.css (beide Shells) im Redesign auf Ocker:
   „laeuft ab" (Zertifikat, Projektende) und Pflichtfeld-Hinweis. Abgelaufenes bleibt rot. */
.crm .emp-cert-expiring { background: var(--ocker-grund); color: var(--ocker-text); }
.crm .emp-cert-expiring-row { border-left-color: var(--ocker-fuell); }
.crm .dash-ending-pill { background: var(--ocker-grund); color: var(--ocker-text); border-color: color-mix(in srgb, var(--ocker-fuell) 35%, transparent); }
.crm .pflichtfeld-warn { border-color: var(--ocker-fuell) !important; color: var(--ocker-text); }
.crm .pflichtfeld-warn-text { color: var(--ocker-text); }
.crm .pm-leader-hint { color: var(--ocker-text); }   /* PR1.788 */

/* ============== WON-NUDGE-BAND ============== */
/* RD1.13 #336 Reparatur (Coordinator-Befund 03.08.) — der Nebentext im Won-Nudge-Band.
   Das Band ist ein geteiltes Bauteil (components/won-nudge-banner.js). Es faerbte sich
   in style.css ueber `var(--text-tertiary, #6b7280)`; --text-tertiary war NIRGENDS
   definiert, also griff immer der Rueckfallwert — auf dem hellen Bandgrund 4.27:1.
   PR1.219 (#379) hat die klassische Seite auf --text-secondary umgestellt, der Fehler
   ist damit auch dort weg. Diese Zeile bleibt als ausdrueckliche Festlegung stehen
   (6.57:1) — seit PR1.229 mappt der .crm-Wurzelblock --text-secondary ohnehin auf
   --text-2, sie ist also bestaetigend, nicht mehr rettend. */
.crm .won-nudge-banner__days { color: var(--text-2); }

/* PR1.219 #379 — Der Vorgangsname in der Zeile. `--text-primary` mit Rueckfall auf ein
   helles Grau steht in style.css; auf dem hellen Bandgrund des Redesigns waere das
   unlesbar, deshalb hier ueber das Token gestellt (gleiches Muster wie eine Zeile
   darueber, siehe auch die Token-Luecke aus #399). */
.crm .won-nudge-banner__name { color: var(--text-1); }

/* ============== BAND „TESTDATENSATZ" ============== */
/* PR1.224 #384 — geteiltes Bauteil (components/test-records.js), Layout steht in
   style.css. Hier nur die Token-Uebersetzung, gleiches Muster wie beim Won-Nudge-Band
   darueber: der Bandgrund der Redesign-Shell ist hell, die klassischen Werte waeren
   darauf zu blass. Dieselben Token wie .crm .warn-box eine Handvoll Zeilen weiter oben —
   `--tint-warn` als Flaechenton, `--ad-orange` als Warnfarbe. Beide sind fuer hell UND
   dunkel belegt (Zeilen 99 und 188), das Band traegt also in beiden Themes. */
.crm .test-record-band {
  background: var(--tint-warn);
  border-color: var(--border);
  border-left-color: var(--ad-orange);
  color: var(--text-2);
}
/* Derselbe Befund wie bei `.crm .warn-box b` weiter oben: --ad-orange auf --tint-warn
   ergibt 1.91:1 und das Zeichen verschwindet auf dem hellen Grund fast. Es ist zwar
   aria-hidden und traegt keine Information — der Text daneben sagt „Testdatensatz" —
   aber ein Warnzeichen, das man nicht sieht, ist kein Warnzeichen. Der 900er-Ton bringt
   es auf 5.6:1; im dunklen Modus waere er zu dunkel, dort bleibt es beim Grundton.
   Gemessen an der Pruefseite test/ui-harness/test-records.html. */
.crm .test-record-band__mark { color: var(--ad-orange-900); }
.crm.dark .test-record-band__mark,
html[data-theme="dark"] .crm .test-record-band__mark { color: var(--ad-orange); }
.crm .test-record-band__text strong { color: var(--text-1); }
.crm .test-record-band__hint { color: var(--text-2); }

/* PR1.239 (#414) — Der Suchlauf. Layout kommt aus style.css; hier nur die Toene, die auf
   dem hellen Redesign-Grund anders liegen muessen. Die Begruendungsmarken sassen mit
   --bg-hover auf --bg-card fast unsichtbar; --tint-blue gibt ihnen eine eigene Flaeche,
   ohne sie zu einem Warnhinweis zu machen — eine Beobachtung ist keine Warnung, und
   --tint-warn wuerde genau das behaupten. */
.crm .testrec-scan-reason {
  background: var(--tint-blue);
  border-color: var(--border);
  color: var(--text-2);
}
/* --danger ist im .crm-Scope belegt (Z. 2494/2550, hell wie dunkel) — kein Sonderton noetig. */

/* ============== SAVE PULSE + HAKEN AM FELD (PR1.638 #937) ==============
   Die einzige save-pulse-Regel: ein Ring, einmal (kein infinite). Der Haken „gespeichert"
   steht absolut rechts in der Zelle (verschiebt die Zeile nicht), blendet nach 1,5 s in
   200 ms aus (JS setzt .is-leaving). Reduzierte Bewegung: die globale Regel (Z. 282) macht
   daraus 1 ms. Fehler: roter Rahmen + Satz unter dem Wert. */
@keyframes save-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(40,220,170,.55); }
  60%  { box-shadow: 0 0 0 8px rgba(40,220,170,0); }
  100% { box-shadow: 0 0 0 0 rgba(40,220,170,0); }
}
.crm .save-pulse { animation: save-pulse 900ms ease-out 1; }
.crm .save-host { position: relative; }
.crm .save-mark {
  position: absolute; right: var(--s-2); top: 50%; transform: translateY(-50%);
  display: inline-flex; align-items: center; gap: var(--s-1); padding: 0.15em 0.7em; border-radius: var(--r-xl);
  font-size: var(--fs-label); font-weight: 600; line-height: 1.2; white-space: nowrap; pointer-events: none;
  opacity: 1; transition: opacity var(--mo-out, 200ms) ease-out;
}
.crm .save-mark.is-leaving { opacity: 0; }
.crm .save-mark svg { width: 1.1em; height: 1.1em; }
.crm .save-mark-ok { background: var(--tint-green); color: var(--ad-green-900); }
.crm .save-mark-pending { background: var(--tint-orange); color: var(--ad-orange-900); }
.crm .save-mark-busy { color: var(--text-2); font-weight: 500; }
.crm .save-failed { box-shadow: inset 0 0 0 0.1em var(--ad-red-700); }
.crm .save-error { display: block; margin-top: 0.15em; font-size: var(--fs-label); line-height: 1.3; color: var(--danger); white-space: normal; }
.crm .save-retry {
  margin-left: var(--s-2); padding: 0; border: 0; background: none; cursor: pointer;
  font: inherit; font-weight: 600; color: inherit; text-decoration: underline;
}
.crm .save-retry:focus-visible { outline: 0.125rem solid var(--focus); outline-offset: 0.125rem; border-radius: var(--r-xs); }

/* ============== KPI MICRO-CHART ============== */
.crm .spark { display: flex; align-items: flex-end; gap: 2px; height: 28px; margin-top: 4px; }
.crm .spark span {
  flex: 1; background: var(--ad-blue); opacity: .35; border-radius: 1px;
  transition: opacity var(--t-fast);
}
.crm .spark span:last-child { opacity: 1; }

/* ============== RECORD-PAGE LAYOUT ============== */
.crm .record-grid {
  display: grid;
  grid-template-columns: 1fr minmax(0, 320px);
  gap: 14px;
  padding: 16px 22px 22px;
}
.crm .record-stack { display: flex; flex-direction: column; gap: 14px; }
/* PR1.354 #568 — Projekt-Detail: drei Spalten (links Stammdaten, Mitte Team, rechts Lage).
   Nur rem — raw-px-Ratchet bleibt stehen. Die Media-Regel steht HINTER der Grundregel,
   sonst gewinnt die Grundregel die Kaskade (Memory: @media vor der Grundregel). */
.crm .record-grid.record-grid-3 {
  grid-template-columns: minmax(0, 18.75rem) minmax(0, 1fr) minmax(0, 20rem);
  align-items: start;
}
/* PR1.741 — Spalten anteilig nach Vorlage V11 (links Verantwortliche + Stammdaten
   605 · Mitte Projektteam 656 · rechts Lage 473 bei 1770 Inhaltsbreite). Die Projektteam-
   Tabelle nutzt in der schmaleren Mitte ihre zweizeilige Form (Container-Regel, Bestand).
   Nur das Projekt; die Opp-Variante .opp-grid setzt ihr Raster selbst. */
.crm .record-grid.record-grid-3:not(.opp-grid) {
  grid-template-columns: minmax(0, 1.28fr) minmax(0, 1.39fr) minmax(0, 1fr);
}
@media (max-width: 64rem) {
  .crm .record-grid.record-grid-3:not(.opp-grid) { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 64rem) {
  .crm .record-grid.record-grid-3 { grid-template-columns: minmax(0, 1fr); }
}
/* ── PR1.611 (#895) — KB Command Center, Reiter „Lage": ruhige Fassung ───────────────────
   Startbild: Satz mit Ring, drei Bereichskarten, „Als Nächstes". Bewegung nur dort, wo sich
   etwas ändert (Aufklappen 260/180 ms, Zeilenversatz 30 ms, Erledigt-Haken 220 ms, Zeile zu
   200 ms, Zahl leuchtet 600 ms, Karten-Einblendung 280 ms/45 ms Versatz einmal je Sitzung,
   Reiterwechsel 140 ms). „Bewegung reduzieren" und Tastatur: nur Ein-/Ausblenden. */
@keyframes lage-reiter { from { opacity: 0; } to { opacity: 1; } }
@keyframes lage-ein { from { opacity: 0; transform: translateY(0.4rem); } to { opacity: 1; transform: none; } }
@keyframes lage-leuchten { from { background-color: color-mix(in srgb, var(--focus) 35%, transparent); } to { background-color: transparent; } }
@keyframes lage-haken { from { opacity: 0; transform: scale(0.5); } to { opacity: 1; transform: scale(1); } }
.crm .lage-host { animation: lage-reiter 140ms var(--ease-out); }
.crm .lage { display: flex; flex-direction: column; gap: 0; min-width: 0; }
.crm .lage > * + * { margin-top: 1.25rem; }
.crm .lage > .lage-panel:not([data-offen]) { margin-top: 0; }
.crm .lage > .lage-panel[data-offen] { margin-top: 0.75rem; }
.crm .lage-kopf { display: flex; flex-wrap: wrap; align-items: center; gap: 1.25rem; padding: 1rem 0.25rem; }
.crm .lage-ring { position: relative; flex: 0 0 auto; width: 5.5rem; }
.crm .lage-ring svg { display: block; width: 100%; height: auto; }
.crm .lage-ring circle { fill: none; stroke-width: 3.6; }
.crm .lage-ring-bg { stroke: var(--bg-surface-3); }
.crm .lage-ring-val { stroke: var(--success); }
.crm .lage-ring b { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: var(--fs-section); font-variant-numeric: tabular-nums; color: var(--text-1); }
.crm .lage-satz { flex: 1 1 14rem; min-width: 0; }
.crm .lage-satz h2 { margin: 0; font-size: var(--fs-title); line-height: 1.2; color: var(--text-1); }
.crm .lage-satz p { margin: 0.25rem 0 0; color: var(--text-2); }
.crm .lage-stand { display: flex; align-items: center; gap: 0.75rem; flex-wrap: wrap; color: var(--text-2); }
.crm .lage-stand-punkt { display: inline-block; width: 0.5rem; height: 0.5rem; margin-right: 0.4rem; border-radius: 50%; background: var(--success); }
.crm .lage-karten { display: grid; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); gap: 0.75rem; }
.crm .lage-karte { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 0.25rem 0.6rem; text-align: left; padding: 0.9rem 1rem; border: thin solid var(--border); border-radius: var(--r-md); background: var(--bg-surface); color: var(--text-1); font: inherit; cursor: pointer; transition: border-color 140ms var(--ease-out); }
.crm .lage-karte:hover { border-color: var(--border-strong); }
.crm .lage-karte[aria-expanded="true"] { border-color: var(--focus); }
.crm .lage-karte:focus-visible, .crm .lage-aktion:focus-visible { outline: 0.125rem solid var(--focus); outline-offset: 0.125rem; }
.crm .lage-punkt { width: 0.6rem; height: 0.6rem; border-radius: 50%; background: var(--text-3); }
.crm .lage-punkt.is-rot { background: var(--danger); }
.crm .lage-punkt.is-ocker { background: var(--warning); }
.crm .lage-karte-titel { font-weight: 600; }
.crm .lage-karte-zahl { font-size: var(--fs-kpi); line-height: 1; font-variant-numeric: tabular-nums; border-radius: var(--r-md); padding: 0 0.25rem; }
.crm .lage-karte-zahl.is-geaendert { animation: lage-leuchten 600ms var(--ease-out); }
.crm .lage-karte-unter { grid-column: 1 / -1; color: var(--text-2); font-size: var(--fs-meta); }
.crm .lage-panel { display: grid; grid-template-rows: 0fr; opacity: 0; transition: grid-template-rows 180ms var(--ease-out), opacity 180ms var(--ease-out); }
.crm .lage-panel[data-offen] { grid-template-rows: 1fr; opacity: 1; transition-duration: 260ms; }
.crm .lage-panel-innen { min-height: 0; overflow: hidden; }
.crm .lage-zeilen, .crm .lage-schritte { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.crm .lage-zeile, .crm .lage-schritt { display: grid; grid-template-columns: 3rem 1fr auto; align-items: center; gap: 0.75rem; padding: 0.6rem 0.25rem; border-top: thin solid var(--border); overflow: hidden; max-height: 8rem; }
.crm .lage-zeile { opacity: 0; transform: translateY(0.25rem); transition: opacity 180ms var(--ease-out), transform 180ms var(--ease-out); }
.crm .lage-panel[data-offen] .lage-zeile { opacity: 1; transform: none; transition: opacity 260ms var(--ease-out) calc(var(--i, 0) * 30ms), transform 260ms var(--ease-out) calc(var(--i, 0) * 30ms); }
.crm .lage-zeile-zahl, .crm .lage-schritt-zahl { text-align: center; font-variant-numeric: tabular-nums; font-weight: 600; }
.crm .lage-schritt-symbol { display: flex; align-items: center; justify-content: center; width: 2rem; height: 2rem; margin-inline: auto; border-radius: 50%; background: var(--bg-surface-3); color: var(--text-2); }
.crm .lage-schritt-symbol svg { width: 1rem; height: 1rem; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.crm .lage-zeile-text { display: flex; flex-direction: column; min-width: 0; }
.crm .lage-zeile-text > span { color: var(--text-2); font-size: var(--fs-meta); overflow-wrap: anywhere; }
.crm .lage-aktion { padding: 0.35rem 0.8rem; border: thin solid var(--border-strong); border-radius: var(--r-md); background: var(--bg-surface); color: var(--text-1); font: inherit; cursor: pointer; }
.crm .lage-aktion:hover { border-color: var(--focus); }
.crm .lage-aktion-primaer { background: var(--focus); border-color: var(--focus); color: var(--text-inv); }
.crm .lage-aktion-link { border-color: transparent; background: transparent; color: var(--text-2); font-weight: 600; }
.crm .lage-aktion-link:hover { border-color: transparent; color: var(--focus); text-decoration: underline; }
.crm .lage-naechstes { padding: 0.5rem 1rem 0.75rem; border: thin solid var(--border); border-radius: var(--r-md); background: var(--bg-surface); }
.crm .lage-naechstes h3 { margin: 0.25rem 0 0.5rem; font-size: var(--fs-section); color: var(--text-1); }
.crm .lage-schritt { transition: max-height 200ms var(--ease-out), opacity 200ms var(--ease-out), padding 200ms var(--ease-out); }
.crm .lage-schritt.is-erledigt { grid-template-columns: 3rem 1fr; }
.crm .lage-schritt.is-erledigt .lage-haken { text-align: center; color: var(--success); font-weight: 700; animation: lage-haken 220ms var(--ease-out); }
.crm .lage-schritt.is-schliesst { max-height: 0; opacity: 0; padding-block: 0; }
.crm .lage-haken svg { display: block; margin: 0 auto; width: 1rem; height: 1rem; fill: none; stroke: currentColor; stroke-width: 2; }
.crm .lage-fuss { margin: 0.5rem 0 0; color: var(--text-2); font-size: var(--fs-meta); }
.crm .lage-nichts, .crm .lage-fehler { display: flex; flex-direction: column; gap: 0.25rem; padding: 0.75rem 1rem; color: var(--text-2); }
.crm .lage-nichts b, .crm .lage-fehler b { color: var(--text-1); }
.crm .lage-fehler { align-items: flex-start; border-left: 0.2rem solid var(--danger); }
.crm .lage-geruest { background: var(--bg-surface-3); border-radius: var(--r-md); }
.crm .lage-karte.lage-geruest { min-height: 5rem; }
.crm .lage-geruest-zeile { height: 1.2rem; margin-bottom: 0.5rem; }
.crm .lage-geruest-zeile.is-kurz { width: 55%; }
.crm .lage.is-einblenden > * { animation: lage-ein 280ms var(--ease-out) both; }
.crm .lage.is-einblenden > .lage-karten { animation: none; }
.crm .lage.is-einblenden .lage-karten > * { animation: lage-ein 280ms var(--ease-out) both; }
.crm .lage.is-einblenden .lage-karten > :nth-child(2) { animation-delay: 45ms; }
.crm .lage.is-einblenden .lage-karten > :nth-child(3) { animation-delay: 90ms; }
.crm .lage.is-einblenden > .lage-naechstes { animation-delay: 135ms; }
.crm .lage-panel[data-ohne-bewegung], .crm .lage-panel[data-ohne-bewegung] * { transition: none; }
.crm .lage-detail { margin-top: 1.25rem; }
@media (prefers-reduced-motion: reduce) {
  .crm .lage-host, .crm .lage.is-einblenden > *, .crm .lage.is-einblenden .lage-karten > * { animation: none; }
  .crm .lage-panel, .crm .lage-panel[data-offen] { transition: opacity 140ms linear; grid-template-rows: 1fr; }
  .crm .lage-panel:not([data-offen]) { grid-template-rows: 0fr; }
  .crm .lage-panel[data-offen] .lage-zeile, .crm .lage-zeile { transform: none; transition: opacity 140ms linear; }
  .crm .lage-karte-zahl.is-geaendert, .crm .lage-schritt.is-erledigt .lage-haken { animation: none; }
  .crm .lage-schritt { transition: none; }
}
/* PR1.902 (#1280) — Nach dem Speichern springt nichts.
   Aufleuchten: die geaenderte Zeile/Karte quittiert das Speichern einmal (≈ 600 ms) mit den
   Keyframes der Lage-Kennzahlen (Token --focus, schon AA-geprueft). Tabellenzeilen faerben die
   Zellen, weil td einen eigenen Hintergrund tragen. „Bewegung reduzieren" → keine Animation. */
.crm .ist-neu,
.crm tr.ist-neu > td { animation: lage-leuchten 600ms var(--ease-out) var(--leucht-verzug, 0ms); }
@media (prefers-reduced-motion: reduce) {
  .crm .ist-neu,
  .crm tr.ist-neu > td { animation: none; }
}
/* „Zuletzt geändert von … um …" — kleine neutrale Zeile unter dem Titel (Detailkopf, Masken). */
.crm .zuletzt-geaendert { margin: 0.125rem 0 0; font-size: var(--fs-meta); font-weight: 400; color: var(--text-3); line-height: 1.35; }
.crm .mask-panel .mp-head:has(> .zuletzt-geaendert) { flex-wrap: wrap; row-gap: 0.125rem; }
.crm .mask-panel .mp-head > .zuletzt-geaendert { flex-basis: 100%; order: 10; }

/* ── PR1.613 (#896) — KB Command Center, Reiter „Betrieb": ruhige Fassung ────────────────
   Zustandskarte (Satz + Tagesleiste 14 Tage), „In den letzten 24 Stunden", „Störungen",
   ruhige Meldungen in einer Zeile. Bewegung: Reiterwechsel 140 ms, Karten 45 ms Versatz
   (einmal je Sitzung), Aufklappen 260 ms / Zuklappen 180 ms, Pfeil 200 ms. „Bewegung
   reduzieren" und Tastatur: nur Ein-/Ausblenden. */
@keyframes betrieb-reiter { from { opacity: 0; } to { opacity: 1; } }
@keyframes betrieb-ein { from { opacity: 0; transform: translateY(0.4rem); } to { opacity: 1; transform: none; } }
.crm .betrieb-host { display: block; animation: betrieb-reiter 140ms var(--ease-out); }
.crm .betrieb { display: flex; flex-direction: column; gap: 0.875rem; min-width: 0; margin-bottom: 0.875rem; }
.crm .betrieb-karte { border: thin solid var(--border); border-radius: var(--r-md); background: var(--bg-surface); min-width: 0; }
.crm .betrieb-zustand { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; padding: 1.6rem 1.4rem; }
.crm .betrieb-zustand-punkt { flex: 0 0 auto; width: 0.75rem; height: 0.75rem; border-radius: 50%; background: var(--success); box-shadow: 0 0 0 0.3rem color-mix(in srgb, var(--success) 22%, transparent); }
.crm .betrieb-zustand-punkt.is-aktiv { background: var(--warning); box-shadow: 0 0 0 0.3rem color-mix(in srgb, var(--warning) 22%, transparent); }
.crm .betrieb-satz { flex: 1 1 14rem; min-width: 0; }
.crm .betrieb-satz h2 { margin: 0; font-size: var(--fs-title); line-height: 1.2; letter-spacing: normal; color: var(--text-1); }
.crm .betrieb-satz p { margin: 0.2rem 0 0; color: var(--text-2); font-size: var(--fs-body); }
.crm .betrieb-leiste { margin-left: auto; display: flex; align-items: flex-end; gap: 0.1875rem; height: 2.4rem; }
.crm .betrieb-balken { display: block; width: 0.6875rem; min-height: 0.125rem; border-radius: 0.125rem 0.125rem 0 0; background: var(--border-strong); }
.crm .betrieb-balken.is-hervor { background: var(--focus); }
.crm .betrieb-liste { padding-bottom: 0.25rem; }
/* Nachzug 3 (#896): Abschnittstitel als kleine graue Versalien (.typo-abschnitt, fonts.css). */
.crm .betrieb-gruppe { margin: 0; padding: 1.25rem 1rem 0.5rem; font-size: var(--fs-meta); }
.crm .betrieb-zeile { border-top: thin solid var(--border); }
.crm .betrieb-zeile-kopf { display: grid; grid-template-columns: 0.75rem minmax(0, 1fr) auto 1.1rem; align-items: center; gap: 0.75rem; width: 100%; padding: 1.1rem 1rem; border: 0; background: transparent; color: var(--text-1); font: inherit; text-align: left; cursor: pointer; }
.crm .betrieb-zeile-kopf:hover { background: var(--bg-surface-2); }
.crm .betrieb-zeile-kopf:focus-visible, .crm .betrieb-link:focus-visible, .crm .betrieb-knopf:focus-visible { outline: 0.125rem solid var(--focus); outline-offset: -0.125rem; }
.crm .betrieb-punkt { width: 0.5rem; height: 0.5rem; border-radius: 50%; background: var(--text-3); }
.crm .betrieb-punkt.is-ocker { background: var(--warning); }
.crm .betrieb-zeile-text { display: flex; flex-direction: column; min-width: 0; }
.crm .betrieb-zeile-text b { font-weight: 600; }
.crm .betrieb-zeile-text small { color: var(--text-3); font-size: var(--fs-meta); overflow-wrap: anywhere; }
.crm .betrieb-zeile-meta { color: var(--text-2); font-size: var(--fs-meta); text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.crm .betrieb-pfeil { display: flex; color: var(--text-3); transition: transform 200ms var(--ease-out); }
.crm .betrieb-pfeil svg { width: 1rem; height: 1rem; fill: none; stroke: currentColor; stroke-width: 1.6; }
.crm .betrieb-zeile-kopf[aria-expanded="true"] .betrieb-pfeil { transform: rotate(90deg); }
.crm .betrieb-det { display: grid; grid-template-rows: 0fr; opacity: 0; transition: grid-template-rows 180ms var(--ease-out), opacity 180ms var(--ease-out); }
.crm .betrieb-det[data-offen] { grid-template-rows: 1fr; opacity: 1; transition-duration: 260ms; }
.crm .betrieb-det-innen { min-height: 0; overflow: hidden; }
/* Nachzug 3 (#896, K3 ruhig Bild 4): aufgeklappt eine kleine Leiste statt Zeitstempel-Liste. */
.crm .betrieb-detail { display: grid; grid-template-columns: 6.25rem minmax(0, 1fr); align-items: center; gap: 0.8rem 1.0625rem; margin: 0; padding: 0 1rem 1.25rem 2.5rem; font-size: var(--fs-meta); }
.crm .betrieb-detail dt { color: var(--text-2); }
.crm .betrieb-detail dd { margin: 0; min-width: 0; color: var(--text-1); overflow-wrap: anywhere; }
.crm .betrieb-detail dd.betrieb-detail-stark { font-weight: 600; font-variant-numeric: tabular-nums; }
.crm .betrieb-mini-leiste { display: inline-flex; align-items: flex-end; gap: 0.1875rem; height: 2rem; vertical-align: middle; }
.crm .betrieb-mini-balken { display: block; width: 0.75rem; min-height: 0.125rem; border-radius: 0.125rem 0.125rem 0 0; background: var(--border-strong); }
.crm .betrieb-mini-balken.is-hervor { background: var(--focus); }
.crm .betrieb-link { padding: 0; border: 0; background: none; color: var(--focus); font: inherit; font-weight: 600; cursor: pointer; text-align: left; }
.crm .betrieb-link:hover { text-decoration: underline; }
.crm .betrieb-leise { margin: 0; padding: 0 1rem 0.75rem 2.5rem; color: var(--text-3); font-size: var(--fs-meta); }
.crm .betrieb-hinweis { margin: 0; padding: 0.7rem 1rem; border-top: thin solid var(--border); color: var(--text-2); font-size: var(--fs-meta); }
.crm .betrieb-hinweis.is-fehler { border-left: 0.2rem solid var(--danger); }
.crm .betrieb-ruhig { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem; padding: 1rem 1rem; border-top: thin solid var(--border); color: var(--text-3); font-size: var(--fs-meta); }
.crm .betrieb-haken { display: flex; color: var(--success); }
.crm .betrieb-haken svg { width: 1rem; height: 1rem; fill: none; stroke: currentColor; stroke-width: 2; }
.crm .betrieb-fehler { display: flex; flex-direction: column; align-items: flex-start; gap: 0.35rem; padding: 1rem 1.2rem; border-left: 0.2rem solid var(--danger); color: var(--text-2); }
.crm .betrieb-fehler b { color: var(--text-1); }
.crm .betrieb-knopf { margin-top: 0.35rem; padding: 0.35rem 0.8rem; border: thin solid var(--border-strong); border-radius: var(--r-md); background: var(--bg-surface); color: var(--text-1); font: inherit; cursor: pointer; }
.crm .betrieb-knopf:hover { border-color: var(--focus); }
.crm .betrieb-geruest { background: var(--bg-surface-3); border-radius: var(--r-md); }
.crm .betrieb-geruest-zeile { height: 1.1rem; margin-bottom: 0.5rem; }
.crm .betrieb-geruest-zeile.is-kurz { width: 55%; }
.crm .betrieb-geruest-zeile.is-reihe { margin: 0.75rem 1rem; }
.crm .betrieb-zustand-punkt.betrieb-geruest { box-shadow: none; }
.crm .betrieb.is-einblenden > * { animation: betrieb-ein 280ms var(--ease-out) both; }
.crm .betrieb.is-einblenden > :nth-child(2) { animation-delay: 45ms; }
.crm .betrieb.is-einblenden > :nth-child(3) { animation-delay: 90ms; }
.crm .betrieb-det[data-ohne-bewegung], .crm .betrieb-zeile[data-ohne-bewegung] .betrieb-pfeil { transition: none; }
@media (max-width: 40rem) {
  .crm .betrieb-leiste { margin-left: 1.75rem; }
  .crm .betrieb-zeile-kopf { grid-template-columns: 0.75rem minmax(0, 1fr) 1.1rem; }
  .crm .betrieb-zeile-meta { grid-column: 2; grid-row: 2; text-align: left; white-space: normal; }
  .crm .betrieb-pfeil { grid-column: 3; grid-row: 1; }
  .crm .betrieb-detail { grid-template-columns: minmax(0, 1fr); gap: 0.1rem; padding-left: 1.75rem; }
  .crm .betrieb-detail dd { margin-bottom: 0.35rem; }
}
@media (prefers-reduced-motion: reduce) {
  .crm .betrieb-host, .crm .betrieb.is-einblenden > * { animation: none; }
  .crm .betrieb-pfeil { transition: none; }
  .crm .betrieb-det, .crm .betrieb-det[data-offen] { transition: opacity 140ms linear; }
}


/* PR1.405 (#635) — Laptop-Breite (AC „rechte Spalte rutscht unter die Mitte"): nur die Opp-Seite
   (.opp-grid) wird bis 80rem zweispaltig; links ueberspannt beide Reihen, rechts steht unter der
   Mitte, DOM-Reihenfolge = Tab-Reihenfolge. Projekt (.record-grid-3 ohne .opp-grid) bleibt. Unten
   begrenzt, damit der Einspalter darueber unter 64rem weiter gilt. rem statt px: der
   breakpoints-Ratchet zaehlt px-Breiten, raw-px bleibt unberuehrt. */
@media (min-width: 64.0625rem) and (max-width: 80rem) {
  .crm .record-grid.record-grid-3.opp-grid { grid-template-columns: minmax(0, 17.5rem) minmax(0, 1fr); }
  .crm .opp-grid > [data-col="left"] { grid-column: 1; grid-row: 1 / span 2; }
  .crm .opp-grid > [data-col="middle"] { grid-column: 2; grid-row: 1; }
  .crm .opp-grid > [data-col="right"] { grid-column: 2; grid-row: 2; }
}
/* Schmale Seitenspalten: Felder zweispaltig statt drei (sonst laeuft die dritte Spalte ueber
   den Kartenrand). */
.crm .record-grid-3 [data-col="left"] .field-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.crm .record-grid-3 .field .val { overflow-wrap: anywhere; }
/* Reservierte Plaetze der Folgetickets (#580 …) erzeugen keine Leerluecke im Stack-gap. */
.crm .record-grid-3 [data-slot]:empty { display: none; }
.crm .proj-team-list { gap: .5rem; }
.crm .proj-team-jump { margin-top: .75rem; align-self: flex-start; }
/* ============================================================
   Staffing-Tafel — neue Ansicht „Staffing" (Gesicht der Redesign-Shell).
   Nur Tokens; Orange gestrichelt = Vorschlag, durchgezogen = vorgemerkt.
   ============================================================ */
.crm .st-root { display: block; }
.crm .st-root > .page-head { padding-left: 0; padding-right: 0; }
.crm .st-titelzeile { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--s-1) var(--s-4); min-width: 0; }
.crm .st-satz { color: var(--text-2); }
.crm .st-satz b { color: var(--ad-orange-900); font-weight: 700; }
.crm .st-kopf { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-2) var(--s-4); }
.crm .st-kopf .st-titelzeile { flex: 1 1 18rem; }
.crm .st-aktionen { align-items: center; flex-wrap: nowrap; flex: 0 0 auto; margin-left: auto; }
.crm .st-aktionen .btn { white-space: nowrap; }
.crm .st-holen-platz { display: inline-flex; align-items: center; gap: var(--s-2); }
.crm .st-holen { background: var(--tint-orange); border-color: var(--ad-orange-700); color: var(--ad-orange-900); }
.crm .st-holen:hover { background: var(--ad-orange); color: var(--text-1); }
.crm .st-lauf { display: inline-flex; align-items: center; gap: var(--s-2); color: var(--ad-orange-900); font-weight: 600; }
.crm .st-puls { width: .5rem; height: .5rem; border-radius: 50%; background: var(--ad-orange-700); animation: st-puls var(--mo-uncertain) ease-in-out infinite; }
@keyframes st-puls { 0%, 100% { opacity: .35; } 50% { opacity: 1; } }
.crm .st-auswahl { margin-bottom: var(--s-3); }
.crm .st-chip-x { margin-left: var(--s-1); border: 0; background: transparent; color: inherit; cursor: pointer; font-size: inherit; line-height: 1; }
.crm .st-filter-pos { position: relative; height: 0; }
.crm .st-filter-menu { position: absolute; right: 0; top: 0; z-index: 5; display: flex; flex-direction: column; gap: var(--s-2); padding: var(--s-3); min-width: 14rem; background: var(--bg-surface); border: .0625rem solid var(--border); border-radius: var(--r-md); box-shadow: var(--shadow-2); }
.crm .st-filter-opt { display: flex; align-items: center; gap: var(--s-2); color: var(--text-1); }

.crm .st-layout { display: grid; grid-template-columns: minmax(0, 1fr) 20rem; gap: var(--s-5); align-items: start; }
@media (max-width: 70rem) { .crm .st-layout { grid-template-columns: minmax(0, 1fr); } }
.crm .st-liste { display: flex; flex-direction: column; gap: var(--s-3); min-width: 0; }
.crm .st-rechts { display: flex; flex-direction: column; gap: var(--s-3); position: sticky; top: var(--s-3); }
.crm .st-stufe { display: flex; align-items: baseline; gap: var(--s-2); margin: var(--s-3) 0 0; font-size: var(--fs-ui); font-weight: 700; color: var(--text-2); text-transform: none; }
.crm .st-stufe-n { color: var(--text-3); font-weight: 600; }
.crm .st-sub { color: var(--text-3); font-size: var(--fs-ui); }

.crm .st-karte { padding: 0; }
.crm .st-karte-kopf { border-radius: var(--r-md) var(--r-md) 0 0; }
.crm .st-karte-kopf { display: flex; align-items: center; gap: var(--s-3); padding: var(--s-3) var(--s-4); border-bottom: .0625rem solid var(--border); }
.crm .st-karte-titel { flex: 1 1 auto; min-width: 0; }
.crm .st-karte-name { border: 0; background: transparent; padding: 0; cursor: pointer; font: inherit; font-weight: 700; color: var(--text-1); text-align: left; }
.crm .st-karte-name:hover { color: var(--ad-blue); text-decoration: underline; }
.crm .st-zeilen { display: flex; flex-direction: column; }
.crm .st-fehler-zeile { display: flex; align-items: center; gap: var(--s-2); padding: var(--s-2) var(--s-4); background: var(--tint-warn); color: var(--ad-orange-900); }
.crm .st-sammel { display: flex; justify-content: space-between; align-items: center; width: 100%; padding: var(--s-3) var(--s-4); cursor: pointer; color: var(--text-2); text-align: left; }
.crm .st-sammel:hover { background: var(--bg-hover); }

.crm .st-row { position: relative; display: grid; grid-template-columns: minmax(10rem, 15rem) minmax(0, 1fr) auto; gap: var(--s-3); align-items: center; padding: var(--s-3) var(--s-4); border-top: .0625rem solid var(--border); }
.crm .st-row:first-child { border-top: 0; }
.crm .st-row:hover { background: var(--bg-hover); }
.crm .st-row:focus-visible { outline: .125rem solid var(--focus); outline-offset: -.125rem; }
.crm .st-row.staffing-dropzone-over { background: var(--tint-blue); outline: .125rem dashed var(--ad-blue); outline-offset: -.125rem; }
@media (max-width: 52rem) { .crm .st-row { grid-template-columns: minmax(0, 1fr); } }
.crm .st-role { display: flex; flex-direction: column; min-width: 0; }
.crm .st-role-name { font-weight: 600; color: var(--text-1); overflow-wrap: anywhere; }
.crm .st-role-fte, .crm .st-x { color: var(--text-3); font-size: var(--fs-ui); }
.crm .st-mid { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); min-width: 0; }
.crm .st-act { display: flex; gap: var(--s-2); justify-content: flex-end; }

.crm .st-chip { display: inline-flex; align-items: center; gap: var(--s-2); max-width: 100%; padding: var(--s-1) var(--s-3) var(--s-1) var(--s-1); border-radius: var(--r-md); }
.crm .st-chip-vorschlag { background: var(--tint-warn); border: .0625rem dashed var(--ad-orange-700); color: var(--ad-orange-900); }
.crm .st-chip-fest { background: var(--tint-green); border: .0625rem solid var(--ad-green-700); color: var(--ad-green-900); }
.crm .st-chip-text { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 var(--s-2); min-width: 0; line-height: 1.3; }
.crm .st-chip-text b { color: var(--text-1); }
.crm .st-grund { font-size: var(--fs-ui); color: inherit; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.crm .st-weitere { flex-basis: 100%; color: var(--text-3); font-size: var(--fs-ui); }
.crm .st-chip-leer { display: inline-flex; align-items: center; white-space: nowrap; gap: var(--s-2); padding: var(--s-2) var(--s-3); border: .0625rem dashed var(--border-strong); border-radius: var(--r-md); }
.crm .st-textlink { border: 0; background: transparent; padding: var(--s-1) var(--s-2); cursor: pointer; color: var(--ad-blue); font: inherit; font-weight: 700; }
.crm .st-textlink:hover { text-decoration: underline; }
.crm .st-textlink:focus-visible { outline: .125rem solid var(--focus); outline-offset: .0625rem; }
.crm .st-uebernehmen { display: inline-flex; align-items: center; gap: var(--s-1); background: var(--tint-green); border: .0625rem solid var(--ad-green-700); color: var(--ad-green-900); font-weight: 700; border-radius: var(--r-md); }
.crm .st-uebernehmen:hover { background: var(--ad-green); color: var(--text-1); }
.crm .st-alle { display: inline-flex; align-items: center; gap: var(--s-1); font-weight: 700; }
.crm .st-doppel { flex-basis: 100%; font-weight: 700; display: inline-flex; align-items: center; gap: var(--s-1); color: var(--ad-orange-900); font-size: var(--fs-ui); }
.crm .st-leer { color: var(--text-3); }
.crm .st-laeuft { display: inline-flex; align-items: center; gap: var(--s-2); color: var(--ad-orange-900); }
.crm .st-link { border: 0; background: transparent; padding: 0; cursor: pointer; color: var(--ad-blue); font: inherit; text-decoration: underline; }
.crm .st-neu { animation: st-ein var(--mo-chip) var(--ease-out) both; }
@keyframes st-ein { from { opacity: 0; transform: translateY(-.25rem); } to { opacity: 1; transform: none; } }

.crm .st-pop { position: absolute; z-index: 6; right: var(--s-4); top: calc(100% - var(--s-2)); width: min(24rem, calc(100% - var(--s-8))); padding: var(--s-3); background: var(--bg-surface); border: .0625rem solid var(--border); border-radius: var(--r-md); box-shadow: var(--shadow-3); animation: st-ein 160ms var(--ease-out) both; }
.crm .st-pop-titel { font-weight: 700; margin-bottom: var(--s-2); color: var(--text-1); }
.crm .st-pop-liste { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--s-1); }
.crm .st-pop-item { display: grid; grid-template-columns: auto minmax(0, 1fr) 4rem auto; gap: var(--s-2); align-items: center; width: 100%; padding: var(--s-2); border: .0625rem solid transparent; border-radius: var(--r-sm); background: transparent; cursor: pointer; text-align: left; color: var(--text-1); font: inherit; }
.crm .st-pop-item:hover, .crm .st-pop-item:focus-visible { background: var(--bg-hover); border-color: var(--border-strong); outline: none; }
.crm .st-pop-item:focus-visible { outline: .125rem solid var(--focus); outline-offset: -.125rem; }
.crm .st-pop-item[aria-selected="true"] { background: var(--tint-orange); }
.crm .st-pop-suchzeile { display: flex; align-items: center; gap: var(--s-2); margin-top: var(--s-2); padding-top: var(--s-2); border-top: .0625rem solid var(--border); color: var(--text-3); }
.crm .st-pop-suchzeile .st-pop-suche { margin-top: 0; border: 0; padding: var(--s-1) 0; background: transparent; }
.crm .st-pop-name { display: flex; flex-direction: column; min-width: 0; }
.crm .st-pop-sub { color: var(--text-3); font-size: var(--fs-ui); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.crm .st-pop-suche { width: 100%; box-sizing: border-box; margin-top: var(--s-2); padding: var(--s-2) var(--s-3); border: .0625rem solid var(--border); border-radius: var(--r-sm); background: var(--bg-input); color: var(--text-1); font: inherit; }
.crm .st-pop-leer { padding: var(--s-2) 0; color: var(--text-3); }
.crm .st-bar { display: block; height: .375rem; border-radius: 50vmax; background: var(--bg-surface-3); overflow: hidden; }
.crm .st-bar i { display: block; height: 100%; background: var(--ad-blue); }
.crm .st-bar.st-ton-ueber i { background: var(--ad-orange-700); }
.crm .st-bar.st-ton-voll i { background: var(--ad-green-700); }
.crm .st-pct { display: inline-flex; align-items: center; gap: var(--s-1); font-size: var(--fs-ui); color: var(--text-2); font-variant-numeric: tabular-nums; }
.crm .st-ueber .st-pct { color: var(--ad-orange-900); font-weight: 600; }

.crm .st-h2 { margin: 0; font-size: var(--fs-body); font-weight: 700; }
.crm .st-frei-karte .st-sub { font-size: var(--fs-label); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.crm .st-personen-kopf { margin-top: var(--s-3); }
.crm .st-personen-knopf { width: 100%; justify-content: center; }
.crm .st-sammel-text { display: inline-flex; align-items: center; gap: var(--s-2); }
.crm .st-sammel-text b { color: var(--text-1); }
.crm .st-cc-liste { display: flex; flex-direction: column; gap: var(--s-1); margin-top: var(--s-2); }
.crm .st-cc { display: flex; flex-direction: column; gap: var(--s-1); padding: var(--s-2); border: .0625rem solid transparent; border-radius: var(--r-sm); background: transparent; cursor: pointer; text-align: left; color: var(--text-1); font: inherit; }
.crm .st-cc + .st-cc { border-top: .0625rem solid var(--border); border-top-left-radius: 0; border-top-right-radius: 0; }
.crm .st-cc:hover { background: var(--bg-hover); }
.crm .st-cc.is-on { background: var(--tint-blue); border-color: var(--ad-blue); }
.crm .st-cc:focus-visible { outline: .125rem solid var(--focus); outline-offset: -.125rem; }
.crm .st-cc-kopf { display: flex; justify-content: space-between; align-items: baseline; gap: var(--s-2); min-width: 0; }
.crm .st-cc-name { min-width: 0; overflow-wrap: anywhere; white-space: normal; font-size: var(--fs-meta); font-weight: 700; line-height: 1.3; }
.crm .st-cc-frei { flex: none; white-space: nowrap; color: var(--text-2); font-size: var(--fs-meta); font-variant-numeric: tabular-nums; }
.crm .st-cc-balken { display: flex; height: .5rem; border-radius: 50vmax; overflow: hidden; background: var(--bg-surface-3); }
.crm .st-seg { display: inline-block; height: 100%; }
.crm .st-seg-frei { background: var(--ad-green-700); }
.crm .st-seg-voll { background: var(--ad-grey-40); }
.crm .st-seg-ueber { background: var(--ad-orange-700); }
.crm .st-legende { display: flex; flex-wrap: wrap; gap: var(--s-3); margin-top: var(--s-3); color: var(--text-3); font-size: var(--fs-ui); }
.crm .st-legende .st-seg { width: .625rem; height: .625rem; margin-right: var(--s-1); border-radius: 50%; }
.crm .st-personen { display: flex; flex-direction: column; gap: var(--s-2); margin-top: var(--s-2); }
.crm .st-pg-kopf { margin: var(--s-2) 0 var(--s-1); color: var(--text-3); font-size: var(--fs-ui); font-weight: 700; }
.crm .st-person { display: grid; grid-template-columns: auto minmax(0, 1fr) 3.5rem auto; gap: var(--s-2); align-items: center; padding: var(--s-1) var(--s-2); border-radius: var(--r-sm); cursor: grab; }
.crm .st-person:hover { background: var(--bg-hover); }
.crm .st-person-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.crm .st-hinweis { color: var(--ad-orange-900); font-size: var(--fs-ui); }
.crm .st-leerkarte { display: flex; flex-direction: column; align-items: flex-start; gap: var(--s-3); }
.crm .st-leer-satz { margin: 0; color: var(--text-2); max-width: 40rem; }
.crm .st-skel { padding: var(--s-4); }
.crm .st-live { position: absolute; width: .0625rem; height: .0625rem; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
@media (prefers-reduced-motion: reduce) {
  .crm .st-neu, .crm .st-pop, .crm .st-puls { animation: none; }
}

/* ============================================================
   Staffing — Plätze-Tafel der neuen Ansicht: Vorhaben wählen › Plätze füllen › übernehmen.
   Täglich/wöchentlich in langen Sitzungen genutzt: keine Deko-Bewegung, nur Hover-Farben und
   das Ablageziel beim Ziehen. Plätze: frei gestrichelt, Vorschlag blau, fest grün, orange = über 100 %.
   Nur Tokens und rem.
   ============================================================ */
.crm .pl-root { display: block; }
.crm .pl-kopf { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-2) var(--s-4); margin-bottom: var(--s-4); }
/* PR1.794 — Erklärsatz unter dem Titel: ruhig, eine Lesebreite, keine Bewegung */
.crm .pl-erklaer { margin: 0 0 var(--s-4); max-width: 48rem; color: var(--text-2); font-size: var(--fs-body); line-height: 1.5; }
.crm .pl-titelzeile { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2) var(--s-5); min-width: 0; }
.crm .pl-h1 { margin: 0; font-size: var(--fs-display); font-weight: 700; color: var(--text-1); letter-spacing: -.01em; }
.crm .pl-schritte { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); margin: 0; padding: 0; list-style: none; color: var(--text-2); font-size: var(--fs-ui); }
.crm .pl-schritt { display: inline-flex; align-items: center; gap: var(--s-2); white-space: nowrap; }
.crm .pl-schritt + .pl-schritt::before { content: '›'; color: var(--text-3); margin-right: var(--s-1); }
.crm .pl-nr { display: inline-grid; place-items: center; width: 1.25rem; height: 1.25rem; border-radius: 50%; background: var(--ad-blue); color: var(--text-inv); font-size: var(--fs-label); font-weight: 700; }
.crm .pl-kopf-aktionen { display: flex; gap: var(--s-2); margin-left: auto; }
.crm .pl-einsatzplan { white-space: nowrap; font-weight: 600; }

.crm .pl-kacheln { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s-3); margin-bottom: var(--s-4); }
@media (max-width: 60rem) { .crm .pl-kacheln { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.crm .pl-kachel { display: flex; flex-direction: column; gap: var(--s-1); padding: var(--s-3) var(--s-4); background: var(--bg-surface); border: .0625rem solid var(--border); border-radius: var(--r-lg); min-width: 0; }
.crm .pl-zahl { font-family: var(--f-cond); font-size: var(--fs-kpi); font-weight: 600; line-height: 1.1; color: var(--text-1); font-variant-numeric: tabular-nums; }
.crm .pl-zahl.pl-rot { color: var(--ad-red-700); }
.crm .pl-kachel-text { color: var(--text-2); font-size: var(--fs-meta); }

/* Raster nach Anteilen der Vorlage K5 (312 | 842 | 351 von 1535 Innenbreite), gleich bei 1280/1366/1440. */
.crm .pl-layout { display: grid; grid-template-columns: minmax(0, 20.3fr) minmax(0, 54.9fr) minmax(0, 22.9fr); gap: var(--s-4); align-items: start; }
@media (max-width: 87.5rem) { .crm .pl-v { padding: var(--s-2) var(--s-1) var(--s-2) var(--s-2); } }
@media (max-width: 64rem) { .crm .pl-layout { grid-template-columns: minmax(0, 27fr) minmax(0, 73fr); } .crm .pl-rechts { grid-column: 1 / -1; position: static; } }
@media (max-width: 52rem) { .crm .pl-layout { grid-template-columns: minmax(0, 1fr); } }
.crm .pl-mitte { display: flex; flex-direction: column; gap: var(--s-4); min-width: 0; }
.crm .pl-rechts { position: sticky; top: 0; min-width: 0; }

/* Links: Vorhaben */
.crm .pl-links { display: flex; flex-direction: column; gap: var(--s-2); min-width: 0; }
.crm .pl-spaltenkopf { margin: 0; font-size: var(--fs-section); font-weight: 700; color: var(--text-1); }
.crm .pl-gewaehlt { margin: 0 0 var(--s-1); color: var(--ad-blue-700); font-size: var(--fs-label); font-weight: 600; }
.crm .pl-gruppe { margin: var(--s-2) 0 0; }
.crm .pl-vliste { display: flex; flex-direction: column; gap: var(--s-2); margin: 0; padding: 0; list-style: none; }
.crm .pl-v { display: grid; grid-template-columns: auto auto minmax(0, 1fr) auto; align-items: center; gap: var(--s-2) 0; padding: var(--s-2) var(--s-3); border: .125rem solid transparent; border-radius: var(--r-md); cursor: pointer; }
.crm .pl-v:hover { background: var(--bg-hover); }
.crm .pl-v.is-on { background: var(--bg-surface); border-color: var(--ad-blue); }
.crm .pl-v-text { display: flex; flex-direction: column; min-width: 0; }
.crm .pl-v-name { font-size: var(--fs-ui); font-weight: 600; color: var(--text-1); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.crm .pl-v-sub { font-size: var(--fs-meta); color: var(--text-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* BF-152 (V04) — lange Namen einzeilig mit „…", voller Name im title. */
.crm .pl-karte-name { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: block; }
.crm .pl-v-text > .name-gap, .crm .pl-h2 > .name-gap { align-self: flex-start; }
/* BF-152 — in der schmalen Vorhaben-Liste bricht die Marke um („Projektname / fehlt“), statt das
   entscheidende „fehlt“ wegzukürzen. */
.crm .pl-v-text > .name-gap { white-space: normal; }
.crm .pl-v-text > .name-gap > span { overflow: visible; text-overflow: clip; overflow-wrap: anywhere; }
.crm .pl-v-n { font-size: var(--fs-ui); font-weight: 700; color: var(--ad-red-700); font-variant-numeric: tabular-nums; }
.crm .pl-logo-platz { display: inline-flex; align-items: center; justify-content: center; min-width: 2rem; }
.crm .pl-logo-platz:empty { min-width: 0; }
.crm .pl-v > .pl-check { margin-right: var(--s-2); }
.crm .pl-v > .pl-logo-platz:not(:empty) { margin-right: var(--s-2); }
.crm .pl-v > .pl-v-n { margin-left: var(--s-2); }
.crm .pl-check { width: 1.2rem; height: 1.2rem; margin: 0; accent-color: var(--ad-blue); cursor: pointer; }
.crm .pl-check:focus-visible { outline: .125rem solid var(--focus); outline-offset: .125rem; }
.crm .pl-link { align-self: flex-start; display: inline-flex; align-items: center; gap: var(--s-1); padding: 0; border: 0; background: transparent; color: var(--ad-blue-700); font: inherit; font-size: var(--fs-ui); font-weight: 600; cursor: pointer; }
.crm .pl-link:hover { text-decoration: underline; }
.crm .pl-link:focus-visible { outline: .125rem solid var(--focus); outline-offset: .125rem; border-radius: var(--r-sm); }

/* Mitte: Karten je Vorhaben */
.crm .pl-karte { padding: 0; overflow: visible; }
/* Kopf: Titel und Aktionen in einer Zeile, Untertitel darunter über die ganze Breite (bleibt einzeilig). */
.crm .pl-karte-kopf { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; column-gap: var(--s-3); padding: var(--s-3) var(--s-4); border-bottom: .0625rem solid var(--border); }
.crm .pl-karte-kopf > .pl-logo-platz { grid-row: 1 / span 2; }
.crm .pl-karte-kopf > .pl-logo-platz:empty { display: none; }
.crm .pl-karte-titel { display: contents; }
.crm .pl-karte-titel > .pl-h2 { grid-column: -3 / -2; grid-row: 1; min-width: 0; }
.crm .pl-karte-titel > .pl-sub { grid-column: -3 / -1; grid-row: 2; }
.crm .pl-karte-kopf > .pl-karte-aktionen { grid-column: -2 / -1; grid-row: 1; }
@media (max-width: 52rem) { .crm .pl-karte-kopf > .pl-karte-aktionen { grid-column: -3 / -1; grid-row: 3; margin: var(--s-2) 0 0; } }
.crm .pl-h2 { margin: 0; font-size: var(--fs-section); font-weight: 700; color: var(--text-1); hyphens: auto; overflow-wrap: break-word; }
.crm .pl-karte-name { padding: 0; border: 0; background: transparent; font: inherit; color: inherit; text-align: left; cursor: pointer; }
.crm .pl-karte-name:hover { color: var(--ad-blue); text-decoration: underline; }
.crm .pl-karte-name:focus-visible { outline: .125rem solid var(--focus); outline-offset: .125rem; border-radius: var(--r-sm); }
.crm .pl-sub { margin: .125rem 0 0; color: var(--text-2); font-size: var(--fs-meta); }
.crm .pl-karte-aktionen { display: flex; align-items: center; gap: var(--s-2); margin-left: auto; }
.crm .pl-karte-aktionen > .pl-link { align-self: center; }
.crm .pl-fuellen { display: inline-flex; align-items: center; gap: var(--s-2); padding: var(--s-2) var(--s-3); border: .0625rem solid var(--ad-orange-700); border-radius: var(--r-md); background: var(--tint-orange); color: var(--ad-orange-900); font: inherit; font-size: var(--fs-ui); font-weight: 600; white-space: nowrap; cursor: pointer; transition: background-color var(--mo-hover) ease; }
.crm .pl-fuellen:hover { background: var(--ad-orange); color: var(--text-1); }
.crm .pl-fuellen:focus-visible { outline: .125rem solid var(--focus); outline-offset: .125rem; }
.crm .pl-fuellen.is-lauf { cursor: default; }
.crm .pl-karte-fehler { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); margin: 0; padding: var(--s-2) var(--s-4); background: var(--tint-warn); color: var(--ad-orange-900); }
.crm .pl-rollen { display: flex; flex-direction: column; }
.crm .pl-mehr-rollen { margin: var(--s-2) var(--s-4) var(--s-3); }
.crm .pl-mitte-leer { color: var(--text-2); }
.crm .pl-skel { padding: var(--s-4); }
.crm .pl-skel .skel-row { height: 1.5rem; margin: var(--s-3) 0; border-radius: var(--r-sm); background: var(--bg-surface-2); }
.crm .pl-skel .skel-row:first-child { width: 55%; height: 1.75rem; margin-top: 0; }
.crm .pl-skel .skel-row:last-child { width: 80%; margin-bottom: 0; }

.crm .pl-rolle { position: relative; display: grid; grid-template-columns: auto minmax(0, 45fr) minmax(0, 55fr) auto; align-items: center; gap: var(--s-2) var(--s-3); padding: var(--s-3) var(--s-4); border-top: .0625rem solid var(--border); }
.crm .pl-rolle:first-child { border-top: 0; }
.crm .pl-rolle.is-ziel { background: var(--tint-blue); }
@media (max-width: 60rem) { .crm .pl-rolle { grid-template-columns: auto minmax(0, 1fr); } .crm .pl-plaetze, .crm .pl-rolle-status { grid-column: 2; } .crm .pl-rolle-status { justify-self: start; } }
.crm .pl-rolle-name { display: flex; flex-direction: column; min-width: 0; }
.crm .pl-rolle-name b { font-size: var(--fs-ui); font-weight: 700; color: var(--text-1); hyphens: auto; overflow-wrap: break-word; }
.crm .pl-rolle-sub { font-size: var(--fs-meta); color: var(--text-2); }
.crm .pl-plaetze { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); min-width: 0; }
.crm .pl-rolle-status { justify-self: end; }
.crm .pl-status { display: inline-flex; align-items: center; gap: var(--s-1); padding: var(--s-1) 0; border: 0; background: transparent; color: var(--ad-blue-700); font: inherit; font-size: var(--fs-ui); font-weight: 600; white-space: nowrap; cursor: pointer; }
.crm .pl-status:hover { text-decoration: underline; }
.crm .pl-status:focus-visible { outline: .125rem solid var(--focus); outline-offset: .125rem; border-radius: var(--r-sm); }
.crm .pl-status-ueberbucht { color: var(--ad-orange-900); }
.crm .pl-rolle-hinweis { grid-column: 2 / -1; display: flex; align-items: center; gap: var(--s-1); margin: 0; color: var(--ad-orange-900); font-size: var(--fs-meta); }

.crm .pl-platz { display: inline-flex; align-items: center; gap: var(--s-2); max-width: 100%; min-height: 2rem; padding: .1875rem var(--s-3) .1875rem .1875rem; border: .0625rem solid var(--border); border-radius: 1rem; background: var(--bg-surface); color: var(--text-1); font: inherit; font-size: var(--fs-meta); font-weight: 500; line-height: 1.2; }
.crm button.pl-platz { cursor: pointer; }
.crm button.pl-platz:focus-visible { outline: .125rem solid var(--focus); outline-offset: .125rem; }
.crm .pl-platz-text { min-width: 0; overflow-wrap: anywhere; }
.crm .pl-fest { background: var(--tint-green); border-color: var(--ad-green-700); color: var(--ad-green-900); }
.crm .pl-fest:hover { border-color: var(--ad-green-900); }
.crm .pl-vorschlag { background: var(--tint-blue); border-color: var(--ad-blue-300); color: var(--ad-blue-900); }
.crm .pl-vorschlag.is-ueber { background: var(--tint-orange); border-color: var(--ad-orange-700); color: var(--ad-orange-900); }
.crm .pl-frei { border-style: dashed; border-color: var(--border-strong); background: transparent; color: var(--text-2); padding-left: var(--s-2); transition: border-color var(--mo-hover) ease, color var(--mo-hover) ease; }
.crm .pl-frei:hover { border-color: var(--ad-blue); color: var(--ad-blue-700); }
.crm .pl-frei-breit { padding-right: var(--s-4); text-align: left; }
.crm .pl-frei-breit .pl-platz-text { overflow-wrap: normal; }
.crm .pl-plus { display: inline-grid; place-items: center; width: 1.5rem; height: 1.5rem; border-radius: 50%; background: var(--bg-surface-2); color: var(--text-2); font-weight: 600; }
.crm .pl-ziel { border: .0625rem dashed var(--ad-blue); background: var(--tint-blue); color: var(--ad-blue-900); padding-left: var(--s-3); }
.crm .pl-ziel b { font-weight: 700; }

/* PR1.705 — Notizen beim Staffing (Vorlage K5, Legende 4 und 7). Täglich genutzt: keine Bewegung. */
.crm .pl-fest { gap: var(--s-1); padding-right: var(--s-2); }
.crm .pl-fest-frei { display: inline-flex; align-items: center; gap: var(--s-2); min-width: 0; padding: 0; border: 0; background: transparent; color: inherit; font: inherit; cursor: pointer; }
.crm .pl-fest-frei:focus-visible, .crm .pl-stift:focus-visible { outline: .125rem solid var(--focus); outline-offset: .125rem; border-radius: var(--r-sm); }
.crm .pl-stift { display: inline-grid; place-items: center; width: 1.25rem; height: 1.25rem; padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--ad-blue-700); cursor: pointer; }
.crm .pl-stift:hover { color: var(--ad-blue-900); }
.crm .pl-rnotiz { padding: 0; border: 0; background: transparent; color: inherit; font: inherit; cursor: pointer; text-align: left; }
.crm .pl-rnotiz:hover { color: var(--ad-blue-700); text-decoration: underline; }
.crm .pl-rnotiz:focus-visible { outline: .125rem solid var(--focus); outline-offset: .125rem; border-radius: var(--r-sm); }
.crm .pl-rnotiz.is-leer { opacity: 0; }
.crm .pl-rolle:hover .pl-rnotiz.is-leer, .crm .pl-rnotiz.is-leer:focus-visible { opacity: 1; }
.crm .pl-pnotiz { grid-column: 3 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-1) var(--s-2); padding: var(--s-2) var(--s-3); border: .0625rem solid var(--notiz-rand); border-radius: var(--r-sm); background: var(--tint-notiz); color: var(--text-1); font-size: var(--fs-meta); }
.crm .pl-pnotiz-text { margin: 0; overflow-wrap: anywhere; }
.crm .pl-pnotiz-text b, .crm .pl-pnotiz-label b { font-weight: 700; }
.crm .pl-pnotiz-edit { display: inline; font-size: var(--fs-meta); }
.crm .pl-pnotiz-feld { flex: 1 1 12rem; }
@media (max-width: 60rem) { .crm .pl-pnotiz { grid-column: 2 / -1; } }
.crm .pl-notizen { display: flex; flex-direction: column; gap: var(--s-3); padding: var(--s-4); }
.crm .pl-notizen-kopf { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: var(--s-2); }
.crm .pl-notizen-zusatz { color: var(--text-2); font-size: var(--fs-meta); }
.crm .pl-notizen-filter { margin: 0; color: var(--text-2); font-size: var(--fs-meta); }
.crm .pl-notizen-filter .pl-link { font-size: var(--fs-meta); }
.crm .pl-notizen-eingabe { display: flex; flex-direction: column; gap: var(--s-1); }
.crm .pl-notiz-feld { width: 100%; min-height: 2.5rem; padding: var(--s-2) var(--s-3); border: .0625rem solid var(--border-strong); border-radius: var(--r-sm); background: var(--bg-surface); color: var(--text-1); font: inherit; font-size: var(--fs-body); }
.crm .pl-notiz-feld::placeholder { color: var(--text-3); }
.crm .pl-notiz-feld:focus-visible { outline: .125rem solid var(--focus); outline-offset: 0; border-color: var(--ad-blue); }
.crm .pl-pnotiz .pl-notiz-feld { min-height: 2rem; font-size: var(--fs-meta); }
.crm .pl-notiz-zaehler { align-self: flex-end; color: var(--text-2); font-size: var(--fs-label); font-variant-numeric: tabular-nums; }
.crm .pl-notiz-zaehler:empty { display: none; }
.crm .pl-notizen-fehler { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); margin: 0; padding: var(--s-2) var(--s-3); border-radius: var(--r-sm); background: var(--tint-warn); color: var(--ad-orange-900); font-size: var(--fs-meta); }
.crm .pl-notizen-fehler .pl-link { font-size: var(--fs-meta); }
.crm .pl-notizen-leer { margin: 0; color: var(--text-2); font-size: var(--fs-meta); }
.crm .pl-notizen-liste { display: flex; flex-direction: column; margin: 0; padding: 0; list-style: none; }
.crm .pl-notiz { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: var(--s-3); align-items: start; padding: var(--s-3) 0; border-top: .0625rem solid var(--border); }
.crm .pl-notiz:first-child { border-top: 0; padding-top: var(--s-1); }
.crm .pl-notiz-body { display: flex; flex-direction: column; min-width: 0; }
.crm .pl-notiz-kopf { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: var(--s-1); margin: 0; font-size: var(--fs-body); color: var(--text-1); }
.crm .pl-notiz-kopf b { font-weight: 700; }
.crm .pl-notiz-meta { color: var(--text-2); font-size: var(--fs-meta); }
.crm .pl-notiz-aktionen { display: inline-flex; gap: var(--s-2); margin-left: auto; opacity: 0; }
.crm .pl-notiz:hover .pl-notiz-aktionen, .crm .pl-notiz-aktionen:focus-within { opacity: 1; }
.crm .pl-notiz-aktionen .pl-link { font-size: var(--fs-meta); }
.crm .pl-notiz-text { margin: 0; color: var(--text-1); font-size: var(--fs-body); overflow-wrap: anywhere; white-space: pre-line; }
/* Dunkel: Blau auf Notizgrund und auf dem grünen Platz hell (≥ 4,5:1, wie die übrigen Dark-Links). */
.crm.dark .pl-pnotiz .pl-link , html[data-theme="dark"] .crm .pl-pnotiz .pl-link ,
.crm.dark .pl-notizen .pl-link , html[data-theme="dark"] .crm .pl-notizen .pl-link ,
.crm.dark .pl-stift , html[data-theme="dark"] .crm .pl-stift { color: var(--ad-blue-300); }

/* „wählen ⌄" — Auswahlliste */
.crm .pl-wl { position: absolute; right: var(--s-4); top: calc(100% - var(--s-2)); z-index: 6; width: min(22rem, 90vw); padding: var(--s-2); background: var(--bg-surface); border: .0625rem solid var(--border); border-radius: var(--r-md); box-shadow: var(--shadow-2); }
.crm .pl-wl-suche { display: flex; align-items: center; gap: var(--s-2); padding: var(--s-1) var(--s-2); margin-bottom: var(--s-2); border: .0625rem solid var(--border-strong); border-radius: var(--r-sm); color: var(--text-3); }
.crm .pl-wl-suche input { flex: 1; min-width: 0; border: 0; background: transparent; color: var(--text-1); font: inherit; outline: none; }
.crm .pl-wl-suche:focus-within { border-color: var(--focus); }
.crm .pl-wl-liste { margin: 0; padding: 0; list-style: none; max-height: 18rem; overflow-y: auto; }
.crm .pl-wl-item { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: var(--s-2); padding: var(--s-2); border-radius: var(--r-sm); cursor: pointer; }
.crm .pl-wl-item:hover, .crm .pl-wl-item:focus { background: var(--bg-hover); outline: none; }
.crm .pl-wl-item:focus-visible { outline: .125rem solid var(--focus); outline-offset: -.125rem; }
.crm .pl-wl-text { display: flex; flex-direction: column; min-width: 0; }
.crm .pl-wl-text b { font-size: var(--fs-ui); }
.crm .pl-wl-text span { font-size: var(--fs-meta); color: var(--text-2); }
.crm .pl-wl-pct { font-size: var(--fs-meta); color: var(--text-2); white-space: nowrap; }
.crm .pl-wl-item.is-orange .pl-wl-pct { color: var(--ad-orange-900); }
.crm .pl-wl-leer { margin: 0; padding: var(--s-2); color: var(--text-2); }

/* Sammelleiste */
.crm .pl-leiste { position: sticky; bottom: 0; z-index: 4; display: flex; flex-wrap: nowrap; align-items: center; gap: var(--s-3) var(--s-4); margin: var(--s-2) var(--s-3) var(--s-3); padding: var(--s-3) var(--s-4); border-radius: var(--r-lg); background: var(--ad-blue-900); color: var(--text-inv); }
.crm .pl-leiste-text { display: flex; flex-direction: column; gap: .125rem; flex: 1 1 auto; min-width: 0; }
.crm .pl-leiste-text b { font-size: var(--fs-body); font-weight: 700; }
.crm .pl-leiste-text span { font-size: var(--fs-meta); opacity: .9; }
.crm .pl-leiste-knoepfe { display: flex; flex: 0 0 auto; gap: var(--s-2); }
@media (max-width: 40rem) { .crm .pl-leiste { flex-wrap: wrap; } }
.crm .pl-leiste-btn { width: 9.5rem; line-height: 1.2; padding: var(--s-2) var(--s-4); border-radius: var(--r-md); font: inherit; font-size: var(--fs-ui); font-weight: 600; cursor: pointer; text-align: left; }
.crm .pl-leiste-btn:focus-visible { outline: .125rem solid var(--text-inv); outline-offset: .125rem; }
.crm .pl-leiste-btn:disabled { opacity: .55; cursor: not-allowed; }
.crm .pl-leiste-sek { border: .0625rem solid rgba(255, 255, 255, .55); background: transparent; color: var(--text-inv); }
.crm .pl-leiste-sek:not(:disabled):hover { background: rgba(255, 255, 255, .1); }
.crm .pl-leiste-pri { border: .0625rem solid var(--text-inv); background: var(--text-inv); color: var(--ad-blue-900); }
.crm .pl-leiste-pri:not(:disabled):hover { background: var(--tint-blue); }

/* Rechts: Personen */
.crm .pl-personen { display: flex; flex-direction: column; gap: var(--s-2); padding: var(--s-4); }
.crm .pl-p-kopf { display: flex; align-items: center; justify-content: space-between; gap: var(--s-2); }
.crm .pl-ordnung select { padding: var(--s-1) var(--s-2); border: .0625rem solid var(--border-strong); border-radius: var(--r-sm); background: var(--bg-surface); color: var(--text-1); font: inherit; font-size: var(--fs-meta); font-weight: 600; cursor: pointer; }
.crm .pl-ordnung select:focus-visible { outline: .125rem solid var(--focus); outline-offset: .125rem; }

/* PR1.706 (#1016) — eigene Ordnung (Vorlage K5, Legende 1, 5, 6). Täglich genutzt: keine Animation. */
.crm .pl-ordnen-zeile { display: flex; align-items: center; justify-content: space-between; gap: var(--s-2); }
.crm .pl-ordnen-label { margin: 0; }
.crm .pl-ansicht-knopf { display: inline-flex; align-items: center; gap: var(--s-1); white-space: nowrap; }
.crm .pl-ansicht-label { font-weight: 400; color: var(--text-1); }
.crm .pl-ansicht-wert { font-weight: 700; color: var(--text-1); }
.crm .pl-rechts { display: flex; flex-direction: column; gap: var(--s-3); }
/* Offenes Feld: Spalte scrollt mit, sonst lägen die Knöpfe unter dem Fensterrand (sticky). */
.crm .pl-rechts:has(.pl-anpassen) { position: static; }
.crm .pl-anpassen { display: flex; flex-direction: column; gap: var(--s-2); padding: var(--s-4); border: .125rem solid var(--ad-blue); border-radius: var(--r-lg); box-shadow: var(--shadow-2); }
.crm .pl-anpassen-h { margin: var(--s-2) 0 0; font-size: var(--fs-meta); font-weight: 600; color: var(--text-2); }
.crm .pl-chips { display: flex; flex-wrap: wrap; gap: var(--s-1) var(--s-2); }
.crm .pl-chip { padding: .1875rem var(--s-3); border: 0; border-radius: 62.4375rem; background: var(--bg-surface-2); color: var(--text-1); font: inherit; font-size: var(--fs-meta); font-weight: 600; cursor: pointer; white-space: nowrap; }
.crm .pl-chip:hover { background: var(--bg-hover); }
.crm .pl-chip.is-on { background: var(--ad-blue); color: var(--text-inv); }
.crm .pl-chip:focus-visible, .crm .pl-switch:focus-visible { outline: .125rem solid var(--focus); outline-offset: .125rem; }
.crm .pl-schalter { display: flex; flex-direction: column; gap: var(--s-2); }
.crm .pl-switch { display: inline-flex; align-items: center; gap: var(--s-2); padding: 0; border: 0; background: transparent; color: var(--text-1); font: inherit; font-size: var(--fs-ui); cursor: pointer; text-align: left; }
.crm .pl-switch:disabled { cursor: not-allowed; color: var(--text-3); }
.crm .pl-switch-bahn { position: relative; flex: none; width: 2.5rem; height: 1.375rem; border-radius: 62.4375rem; background: var(--border-strong); }
.crm .pl-switch-bahn i { position: absolute; top: .1875rem; left: .1875rem; width: 1rem; height: 1rem; border-radius: 50%; background: var(--bg-surface); box-shadow: var(--shadow-1); }
.crm .pl-switch.is-on .pl-switch-bahn { background: var(--ad-blue); }
.crm .pl-switch.is-on .pl-switch-bahn i { left: auto; right: .1875rem; }
.crm .pl-anpassen-aktionen { display: flex; flex-wrap: wrap; gap: var(--s-2); margin-top: var(--s-3); }
.crm .pl-anpassen-aktionen .btn-primary { flex: 1 1 9.5rem; }
.crm .pl-anpassen-aktionen .btn-secondary { flex: 1 0 auto; }
.crm .pl-anpassen-aktionen .btn { justify-content: center; text-align: left; white-space: normal; line-height: 1.2; font-weight: 600; padding: var(--s-2) var(--s-3); }
/* „Zurücksetzen“ immer einzeilig mit vollem Innenabstand; passt es nicht neben den blauen Knopf, rutscht es darunter. */
.crm .pl-anpassen-aktionen .btn-secondary { white-space: nowrap; }
.crm .pl-p-modus { display: flex; align-items: center; gap: var(--s-3); }
.crm .pl-seg { display: inline-flex; padding: .1875rem; border-radius: var(--r-md); background: var(--bg-surface-2); }
.crm .pl-seg-btn { white-space: nowrap; padding: var(--s-1) var(--s-3); border: 0; border-radius: var(--r-sm); background: transparent; color: var(--text-2); font: inherit; font-size: var(--fs-ui); font-weight: 600; cursor: pointer; }
.crm .pl-seg-btn.is-on { background: var(--bg-surface); color: var(--ad-blue-700); box-shadow: var(--shadow-1); }
.crm .pl-seg-btn:focus-visible { outline: .125rem solid var(--focus); outline-offset: .0625rem; }
.crm .pl-p-hinweis { color: var(--text-2); font-size: var(--fs-meta); line-height: 1.25; }
.crm .pl-suche { display: flex; align-items: center; gap: var(--s-2); padding: var(--s-2) var(--s-3); border: .0625rem solid var(--border-strong); border-radius: var(--r-md); color: var(--text-3); }
.crm .pl-suche input { flex: 1; min-width: 0; border: 0; background: transparent; color: var(--text-1); font: inherit; outline: none; }
.crm .pl-suche:focus-within { border-color: var(--focus); box-shadow: 0 0 0 .0625rem var(--focus); }
.crm .pl-p-liste { display: flex; flex-direction: column; gap: var(--s-1); }
.crm .pl-pg { margin: var(--s-2) 0 0; }
.crm .pl-person { display: grid; grid-template-columns: auto minmax(0, 1fr) 18%; align-items: center; gap: 0 var(--s-3); padding: var(--s-2); border-radius: var(--r-md); cursor: grab; }
.crm .pl-person:hover { background: var(--bg-hover); }
.crm .pl-person.is-orange { background: var(--tint-orange); }
.crm .pl-person.is-gezogen { opacity: .45; }
.crm .pl-person-text { display: flex; flex-direction: column; min-width: 0; }
.crm .pl-person-text b { font-size: var(--fs-ui); font-weight: 700; hyphens: auto; overflow-wrap: break-word; }
/* Auslastungsbalken rechts auf Höhe von Name und Unterzeile, kurz (Anteil der Zeile wie Vorlage K5). */
.crm .pl-person > .pl-bar { grid-column: 3; }
/* PR1.753 (#1072) — Häkchen je Person vor dem Foto (Vorlage V23, Legende 1, 2, 4). Ohne Auswahl nur beim
   Überfahren bzw. Tastaturfokus sichtbar, ab der ersten Wahl bei allen. Gewählte Zeile hellblau, randlos
   über die Kartenbreite. Täglich genutzt: keine Animation. */
.crm .pl-personen { --pl-px: var(--s-4); }
.crm .pl-person:has(> .pl-p-check) { grid-template-columns: auto auto minmax(0, 1fr) 18%; }
.crm .pl-person:has(> .pl-p-check) > .pl-bar { grid-column: 4; }
.crm .pl-p-liste:has(.pl-p-check) .pl-person { margin-inline: calc(-1 * var(--pl-px)); padding-inline: var(--pl-px); border-radius: 0; }
.crm .pl-p-liste:has(.pl-p-check) { gap: 0; }
/* V23: nicht gewählte Zeilen bleiben weiß, auch bei hoher Belegung; Orange trägt nur der Balken. */
.crm .pl-p-liste:has(.pl-p-check) .pl-person.is-orange:not(.is-gewaehlt) { background: transparent; }
.crm .pl-p-liste:has(.pl-p-check) .pl-person.is-orange:not(.is-gewaehlt):hover { background: var(--bg-hover); }
.crm .pl-p-liste:has(.pl-p-check) > .pl-link { margin-top: var(--s-2); }
.crm .pl-p-check { opacity: 0; }
.crm .pl-person:hover > .pl-p-check, .crm .pl-p-check:focus-visible, .crm .pl-p-liste.has-auswahl .pl-p-check { opacity: 1; }
.crm .pl-p-check:focus-visible { outline: .14rem solid var(--focus); outline-offset: .125rem; }
.crm .pl-person.is-gewaehlt, .crm .pl-person.is-gewaehlt:hover { background: var(--tint-blue); }
/* Schmale Spalte (1280–1440): „Auswahl leeren“ rutscht unter die Pille, die Pille bleibt einzeilig. */
.crm .pl-auswahl { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-1) var(--s-2); min-height: 2.75rem; padding: .47rem var(--s-2) .47rem var(--s-3); border-radius: var(--r-md); background: var(--tint-blue); }
.crm .pl-auswahl-pille { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 0 var(--s-1); min-width: 0; max-width: 100%; padding: .3rem var(--s-3); border: .0625rem solid var(--ad-blue); border-radius: 62.4375rem; background: var(--ad-blue); color: var(--text-inv); font: inherit; font-size: var(--fs-meta); font-weight: 600; cursor: pointer; text-align: left; overflow-wrap: anywhere; }
.crm .pl-auswahl-pille > svg { flex: none; }
.crm .pl-auswahl-zahl, .crm .pl-auswahl-tat { white-space: nowrap; min-width: 0; }
.crm .pl-auswahl-pille.is-gefiltert { border-color: var(--border-strong); background: var(--bg-surface); color: var(--ad-blue-700); }
.crm .pl-auswahl-pille:focus-visible { outline: .14rem solid var(--focus); outline-offset: .125rem; }
/* V23: Kopf der gefilterten Liste gemischt geschrieben („Ausgewählt · 3“). */
.crm .pl-pg.pl-pg-auswahl { text-transform: none; }
.crm .pl-auswahl-leeren { align-self: center; flex: none; margin-left: auto; font-size: var(--fs-meta); }
.crm .pl-auswahl-hinweis { margin: 0; color: var(--text-2); font-size: var(--fs-meta); line-height: 1.35; }
.crm.dark .pl-auswahl-pille.is-gefiltert, html[data-theme="dark"] .crm .pl-auswahl-pille.is-gefiltert ,
.crm.dark .pl-auswahl-leeren, html[data-theme="dark"] .crm .pl-auswahl-leeren { color: var(--ad-blue-300); }
@media (max-width: 87.5rem) { .crm .pl-person { column-gap: var(--s-2); padding-inline: var(--s-1); } .crm .pl-personen { padding: var(--s-3) var(--s-2); --pl-px: var(--s-2); } .crm .pl-karte-kopf { padding-inline: var(--s-3); } }
.crm .pl-person-sub { font-size: var(--fs-meta); color: var(--text-2); }
.crm .pl-person.is-orange .pl-person-sub { color: var(--ad-orange-900); }
.crm .pl-bar { display: block; height: .3125rem; border-radius: .1875rem; background: var(--bg-surface-3); overflow: hidden; }
.crm .pl-bar i { display: block; height: 100%; background: var(--ad-green-700); }
.crm .pl-bar.is-orange i { background: var(--ad-orange-700); }
.crm .pl-leer { margin: 0; color: var(--text-2); }
.crm .pl-leerkarte { display: flex; flex-direction: column; align-items: flex-start; gap: var(--s-3); }
.crm .pl-leer-satz { margin: 0; color: var(--text-2); max-width: 40rem; }
@media (prefers-reduced-motion: reduce) {
  .crm .pl-fuellen, .crm .pl-frei { transition: none; }
}

/* PR1.539 #820 — Projektteam der Uebersicht (Mitte), nach Rollen gruppiert statt Tabelle.
   Ruhe durch Ordnung: der Rollenkopf traegt die Gliederung, Personen stehen ohne Raster in festen
   Grid-Spalten (Zahlen rechtsbuendig), Aktionen sind gedaempft bis Hover/Fokus. Keine Animation:
   die Karte wird taeglich gelesen und bei jedem Auf-/Zuklappen neu gebaut. Nur rem/Tokens. */
.crm .proj-team-hd { flex-wrap: wrap; row-gap: var(--s-2); }
.crm .proj-team-hd h3 { margin-right: var(--s-1); }
.crm .proj-team-hd-act { display: flex; flex-wrap: wrap; gap: var(--s-2); margin-left: auto; }
.crm .proj-team-body { container-type: inline-size; display: flex; flex-direction: column; gap: var(--s-3); }
.crm .proj-team-none { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-2); padding: var(--s-3); border: .0625rem dashed var(--border-strong); border-radius: .5rem; color: var(--text-2); }
.crm .proj-team-none p { margin: 0; }
/* Eine Spaltenvorlage fuer Kopfzeile, Personen und Plaetze — so stehen die Zahlen untereinander. */
.crm .proj-team-cols, .crm .proj-team-person, .crm .proj-team-seat {
    display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(8.75rem, 1.2fr) 4.5rem 6.5rem 4.25rem;
    align-items: center; column-gap: var(--s-3);
}
.crm .proj-team-cols { padding: 0 var(--s-3); font-size: var(--fs-label); font-weight: 500; color: var(--text-3); }
.crm .proj-team-group { display: flex; flex-direction: column; gap: var(--s-1); }
.crm .proj-team-group-h { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-1) var(--s-2); padding: 0 var(--s-1); }
.crm .proj-team-group-h h4 { margin: 0; font-size: var(--fs-body); font-weight: 600; color: var(--text-1); }
.crm .proj-team-filled { font-size: var(--fs-ui); color: var(--text-2); font-variant-numeric: tabular-nums; }
.crm .proj-team-group-h .proj-team-booked { display: inline; margin: 0; }
.crm .proj-team-group-h .proj-team-booked::before { content: "· "; color: var(--text-3); }
/* Fuellleiste: Text daneben traegt die Aussage, die Farbe nur den Ton (voll/teilweise/leer). */
.crm .proj-team-fill { display: inline-block; width: 4.5rem; height: .375rem; border-radius: .1875rem; background: var(--bg-surface-3); overflow: hidden; }
.crm .proj-team-fill > span { display: block; height: 100%; width: var(--fill, 0%); border-radius: inherit; background: var(--ad-orange-700); }
.crm .proj-team-fill[data-level="full"] > span { background: var(--ad-green-700); }
.crm .proj-team-items { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.crm .proj-team-person { padding: var(--s-2) var(--s-3); border-top: .0625rem solid var(--border); }
.crm .proj-team-person:first-child { border-top: 0; }
.crm .proj-team-who { display: flex; align-items: center; gap: var(--s-2); min-width: 0; }
.crm .proj-team-who-txt { display: flex; flex-direction: column; min-width: 0; }
.crm .proj-team-name-line { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-1); min-width: 0; }
.crm .proj-team-name { background: none; border: 0; padding: 0; font: inherit; font-weight: 600; text-align: left; color: var(--text-1); overflow-wrap: anywhere; }
.crm .proj-team-sub { font-size: var(--fs-meta); color: var(--text-2); }
.crm .proj-team-rest { display: block; margin-top: .125rem; }
.crm .proj-team-pre { white-space: nowrap; }
/* PR1.475 (#729) — Foto/Initialen vor dem Namen (Schmuck, aria-hidden). */
.crm .proj-team-av { display: inline-flex; flex: none; }
.crm .proj-team-av .emp-avatar { overflow: hidden; border-radius: 50%; }
.crm .proj-team-period { color: var(--text-2); font-variant-numeric: tabular-nums; white-space: nowrap; }
.crm .proj-team-body .num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
/* PR1.386 #607 — geerbter Satz: gedaempfte Unterzeile „Projektsatz", Hinweis ohne Warnfarbe. */
.crm .proj-team-rate-src { display: block; margin-top: var(--s-1); font-size: var(--fs-meta); color: var(--text-2); font-family: var(--f-sans); font-variant-numeric: normal; }
.crm .proj-team-act { display: flex; justify-content: flex-end; gap: .125rem; }
/* ✎/✕ bleiben in der Tab-Reihenfolge; gedaempft, voll bei Hover oder Fokus in der Zeile. */
.crm .proj-team-person .proj-team-act .btn { opacity: .45; }
.crm .proj-team-person:hover .proj-team-act .btn, .crm .proj-team-person:focus-within .proj-team-act .btn { opacity: 1; }
.crm .proj-team-body .btn:focus-visible, .crm .proj-team-name:focus-visible { outline: .125rem solid var(--focus); outline-offset: .125rem; }
/* Offener Platz: gestrichelter Platzhalter in seiner Rolle. Stand + Knopf teilen sich die beiden
   rechten Spalten und brechen bei Bedarf um. */
.crm .proj-team-seat { margin-top: var(--s-1); padding: var(--s-2) var(--s-3); border: .0625rem dashed var(--border-strong); border-radius: .5rem; background: var(--bg-surface-2); }
.crm .proj-team-seat-ic { display: inline-flex; color: var(--text-3); }
.crm .proj-team-seat-label { font-weight: 600; color: var(--text-2); }
.crm .proj-team-seat-end { grid-column: 4 / span 2; display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: var(--s-1) var(--s-2); min-width: 0; }
.crm .proj-team-seat-status { font-size: var(--fs-ui); color: var(--text-2); text-align: right; }
.crm .proj-team-seat-status[data-tone="warn"] { color: var(--ad-orange-900); }
.crm .proj-team-seat-status[data-tone="bad"] { color: var(--ad-red-700); }
.crm.dark .proj-team-seat-status[data-tone="warn"], html[data-theme="dark"] .crm .proj-team-seat-status[data-tone="warn"] { color: var(--ad-orange); }
.crm.dark .proj-team-seat-status[data-tone="bad"], html[data-theme="dark"] .crm .proj-team-seat-status[data-tone="bad"] { color: var(--ad-red-300); }
.crm .proj-team-seat-go { white-space: nowrap; }
/* Schmale Mittelspalte (~300px bei 1280er Bildschirm): zwei Zeilen statt fuenf Spalten —
   oben die Person, darunter Einsatz · Umfang · Satz · Aktionen. Spaltenkoepfe entfallen. */
@container (max-width: 36rem) {
    .crm .proj-team-cols { display: none; }
    .crm .proj-team-person, .crm .proj-team-seat { grid-template-columns: minmax(0, 1fr) auto auto; row-gap: var(--s-1); }
    .crm .proj-team-who { grid-column: 1 / -1; }
    .crm .proj-team-person .proj-team-period, .crm .proj-team-seat .proj-team-period { grid-column: 1 / -1; font-size: var(--fs-meta); }
    .crm .proj-team-person .proj-team-pct { grid-column: 1; text-align: left; }
    .crm .proj-team-person .proj-team-rate { grid-column: 2; }
    .crm .proj-team-person .proj-team-act { grid-column: 3; }
    .crm .proj-team-seat .proj-team-pct { grid-column: 1; text-align: left; }
    .crm .proj-team-seat-end { grid-column: 1 / -1; justify-content: space-between; }
    .crm .proj-team-seat-status { text-align: left; }
}
/* Rueckfall bis zum Matching-Cockpit (PR1.536): das Matching-Panel der Rolle unter ihrer Gruppe. */
.crm .proj-team-panel { margin-top: var(--s-2); padding: .75rem; border-radius: .5rem; background: var(--bg-surface-2); }
.crm .proj-team-panel-body { display: flex; flex-direction: column; gap: .75rem; }
.crm .proj-team-ctl { display: flex; flex-direction: column; gap: .5rem; }
.crm .proj-team-more { border: .0625rem solid var(--border); border-radius: .5rem; padding: .5rem .75rem; background: var(--bg-surface); }
.crm .proj-team-more > summary { cursor: pointer; font-size: var(--fs-ui); font-weight: 500; color: var(--text-2); }
.crm .proj-team-more > summary:focus-visible { outline: .125rem solid var(--ad-blue); outline-offset: .125rem; }
/* PR1.355 #569 — dieselbe Hinzufuegen-Zeile an der Opp-Teamliste. */
.crm .opp-team-add-row { margin-top: .75rem; }
.crm .section-h {
  display: flex; align-items: center; gap: 10px;
  margin-bottom: 10px;
}
.crm .section-h h3 {
  font-family: var(--f-cond); font-weight: 600;
  font-size: var(--fs-body);
  margin: 0; color: var(--text-1);
}
.crm .section-h .meta { font-size: var(--fs-meta); color: var(--text-3); margin-left: auto; font-family: var(--f-mono); font-variant-numeric: tabular-nums; }

.crm .field-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px 18px;
}
.crm .field { display: flex; flex-direction: column; gap: 2px; }
.crm .field .lbl { font-size: var(--fs-meta); color: var(--text-3); font-weight: 500; }
.crm .field .val { font-size: var(--fs-body); color: var(--text-1); font-weight: 500; }
.crm .field .val.lnk { color: var(--ad-blue); cursor: pointer; }

/* PR1.444 (#686) — Auslastungs-Diagramm: Layout ungescopt in style.css; im Redesign
   stehen die Knoepfe im `.section-h` rechts wie dort `.meta`. */
.crm .section-h .wl-actions { margin-left: auto; }

/* PR1.851 (#1213) — „Auslastung nächste 12 Monate" der Mitarbeiterseite nach Vorlage
   `ma-entwurf.html` (12.11.2026): Satz, zwoelf Monatskacheln in drei Zustaenden und
   „So rechnet Apollon" mit einem Kaestchen je Arbeitstag. Masse aus dem Prototyp 1:1
   (1 rem = 15 px), Schrift auf die Skala gerundet. Farben nur aus Tokens — die drei
   Zustaende sind Mischungen der Markenfarben mit Weiss. Keine Animation: Werkzeug fuer
   Rueckfragen, mehrmals pro Woche geoeffnet. */
.crm .sra-card {
  --sra-luft-bg: var(--tint-blue);
  /* Vorlage #0B4F8A — gemischt aus Tokens (82 % blue-800, 11 % blue-300, 7 % blue). */
  --sra-luft-fg: color-mix(in srgb, var(--ad-blue-800) 82%, color-mix(in srgb, var(--ad-blue-300) 61%, var(--ad-blue)));
  --sra-luft-rand: color-mix(in srgb, var(--ad-blue) 22%, var(--bg-surface));
  --sra-voll-bg: color-mix(in srgb, var(--ad-green) 25%, var(--bg-surface));
  --sra-voll-fg: color-mix(in srgb, var(--ad-green-700) 50%, black);
  --sra-voll-rand: color-mix(in srgb, var(--ad-green) 50%, var(--bg-surface));
  --sra-zuviel-bg: color-mix(in srgb, var(--ad-orange) 30%, var(--bg-surface));
  --sra-zuviel-fg: var(--ad-orange-900);
  /* Vorlage: „Zu viel“ im Hinweis #8A3A10 — aus Tokens nicht mischbar. */
  --sra-zuviel-hinweis: #8A3A10;
  --sra-zuviel-rand: color-mix(in srgb, var(--ad-orange) 50%, var(--ad-orange-700));
  --sra-fest: var(--ad-blue);
  --sra-vorm: color-mix(in srgb, var(--ad-blue) 50%, var(--bg-surface));
  --sra-feier: color-mix(in srgb, var(--border) 50%, var(--border-strong));
  --sra-schraffur: color-mix(in srgb, var(--text-3) 80%, var(--bg-surface));
}
html[data-theme="dark"] .crm .sra-card, .crm.dark .sra-card {
  --sra-luft-fg: var(--ad-blue-300);
  --sra-voll-fg: var(--ad-green);
  --sra-zuviel-fg: var(--ad-orange);
  --sra-zuviel-hinweis: var(--ad-orange);
}
.crm .sra-card .section-h { margin-bottom: 0.4rem; }
/* Vorlage: Textknoepfe 32 px hoch, 13 px halbfett. */
.crm .sra-card .wl-actions { display: inline-flex; gap: 0.5333rem; }
.crm .sra-card .wl-actions .btn { height: 2.1333rem; padding: 0 0.8rem; font-size: var(--fs-meta); font-weight: 500; }
.crm .sra-card .section-h h3 { font-family: var(--f-sans); font-size: var(--fs-section); font-weight: 600; }
.crm .sra-aussage { margin: 0.1333rem 0 0.9333rem; font-size: var(--fs-ui); color: var(--text-2); }
.crm .sra-aussage b { color: var(--text-1); font-weight: 600; }

.crm .sra-monate, .crm .sra-mlab { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 0.3333rem; }
.crm .sra-mo {
  position: relative; overflow: hidden; display: grid; place-items: center;
  height: 2.6667rem; margin: 0; padding: 0; border: 0.13334rem solid transparent; border-radius: var(--r-md);
  font: inherit; font-size: var(--fs-meta); font-weight: 600; font-variant-numeric: tabular-nums; cursor: pointer;
}
.crm .sra-mo.is-luft { background: var(--sra-luft-bg); color: var(--sra-luft-fg); }
.crm .sra-mo.is-voll { background: var(--sra-voll-bg); color: var(--sra-voll-fg); }
.crm .sra-mo.is-zuviel { background: var(--sra-zuviel-bg); color: var(--sra-zuviel-fg); }
.crm .sra-mo.is-leer { background: var(--bg-surface-2); color: var(--text-3); font-weight: 400; }
.crm .sra-mo.is-sel { border-color: var(--text-1); }
.crm .sra-mo:focus-visible { outline: 0.13334rem solid var(--focus); outline-offset: 0.0667rem; }
.crm .sra-vmk {
  position: absolute; inset: 0 0 auto 0; height: 0.4667rem;
  background: repeating-linear-gradient(135deg, var(--sra-schraffur) 0 0.1333rem, transparent 0.1333rem 0.3333rem);
}
.crm .sra-mlab { margin-top: 0.2667rem; font-size: var(--fs-label); color: var(--text-3); text-align: center; }

.crm .sra-legende { display: flex; flex-wrap: wrap; gap: 0.4rem 1.0667rem; margin: 0.6667rem 0 0; padding: 0; list-style: none; font-size: var(--fs-meta); color: var(--text-2); }
.crm .sra-legende li { display: inline-flex; align-items: center; gap: 0.4rem; }
.crm .sra-lg { display: inline-block; width: 0.8667rem; height: 0.8667rem; border-radius: var(--r-xs); flex: none; }
.crm .sra-lg.is-luft { background: var(--sra-luft-bg); border: thin solid var(--sra-luft-rand); }
.crm .sra-lg.is-voll { background: var(--sra-voll-bg); border: thin solid var(--sra-voll-rand); }
.crm .sra-lg.is-zuviel { background: var(--sra-zuviel-bg); border: thin solid var(--sra-zuviel-rand); }
.crm .sra-lg.is-vmk { background: repeating-linear-gradient(135deg, var(--sra-schraffur) 0 0.1333rem, transparent 0.1333rem 0.3333rem); border: thin dashed var(--border-strong); }
.crm .sra-lg.is-fest { background: var(--sra-fest); }
.crm .sra-lg.is-vorm { background: repeating-linear-gradient(135deg, var(--sra-vorm) 0 0.2rem, var(--bg-surface) 0.2rem 0.4rem); border: thin solid var(--sra-vorm); }
.crm .sra-lg.is-frei { background: var(--bg-surface); border: thin solid var(--border-strong); }
.crm .sra-lg.is-feiertag { background: var(--sra-feier); }
.crm .sra-lg.is-urlaub { background: var(--sra-feier); }
.crm .sra-lg.is-ueber { background: var(--sra-zuviel-bg); border: thin dashed var(--sra-zuviel-rand); }

.crm .sra-rech { margin-top: 1.2rem; padding-top: 0.9333rem; border-top: thin solid var(--border); }
.crm .sra-rh { display: flex; flex-wrap: wrap; align-items: center; gap: 0.8rem; }
.crm .sra-titel { margin: 0; font-size: var(--fs-body); font-weight: 600; color: var(--text-1); }
.crm .sra-nav { display: inline-flex; align-items: center; gap: 0.4rem; margin-left: 0.5333rem; }
.crm .sra-nav-btn {
  width: 1.8667rem; height: 1.8667rem; padding: 0; border: thin solid var(--border-strong); border-radius: var(--r-sm);
  background: var(--bg-surface); color: var(--text-1); font: inherit; cursor: pointer;
}
.crm .sra-nav-btn:disabled { cursor: default; }
.crm .sra-nav-btn:focus-visible, .crm .sra-kopie:focus-visible, .crm .sra-tab summary:focus-visible { outline: 0.13334rem solid var(--focus); outline-offset: 0.1333rem; }
.crm .sra-monat { min-width: 8rem; text-align: center; font-size: var(--fs-ui); font-weight: 500; color: var(--text-1); }
.crm .sra-kopie { margin-left: auto; padding: 0; border: 0; background: none; color: var(--ad-blue); font: inherit; font-size: var(--fs-meta); font-weight: 500; cursor: pointer; }
.crm .sra-kopie:disabled { color: var(--text-3); cursor: default; }
.crm .sra-kopiert { font-size: var(--fs-meta); color: var(--text-3); }
.crm .sra-kopiert:empty { display: none; }

.crm .sra-zeile { display: grid; grid-template-columns: 11.3333rem minmax(0, 1fr); gap: 0 1.0667rem; align-items: start; margin-top: 1.0667rem; }
/* Vorlage: Beschriftung mittig zur ersten Kaestchenreihe — auch wenn die Wochen umbrechen. */
.crm .sra-zeile > :first-child { margin-top: 0.4667rem; }
.crm .sra-zk { font-family: var(--f-cond); font-size: var(--fs-label); font-weight: 600; letter-spacing: .07em; color: var(--text-3); }
.crm .sra-zt { margin-top: 0.1333rem; font-size: var(--fs-meta); color: var(--text-2); }
/* Wie im Prototyp: feste 26-px-Kaestchen, Wochen brechen um, wenn die Karte schmaler ist
   (Detailseite mit Profilspalte). Unter 52 rem Kartenbreite steht die Legende ueber die
   volle Breite, damit lange Einsatznamen nicht umbrechen. */
.crm .sra-rech { container-type: inline-size; }
.crm .sra-tage { display: contents; }
.crm .sra-wochen { display: flex; flex-wrap: wrap; gap: 0.6667rem 0.9333rem; grid-column: 2; min-width: 0; }
.crm .sra-wo { display: flex; flex-direction: column; gap: 0.2667rem; flex: none; }
.crm .sra-ks { display: flex; align-items: center; gap: 0.2rem; }
.crm .sra-k {
  position: relative; overflow: hidden; display: grid; place-items: center; flex: none;
  width: 1.7333rem; height: 1.7333rem; border: thin solid var(--border-strong); border-radius: var(--r-sm);
  background: var(--bg-surface); font-size: var(--fs-label); font-weight: 600; color: var(--text-3);
}
.crm .sra-k > i { position: absolute; inset: 0 auto 0 0; }
.crm .sra-kf { background: var(--sra-fest); }
.crm .sra-kv { background: repeating-linear-gradient(135deg, var(--sra-vorm) 0 0.2rem, var(--bg-surface) 0.2rem 0.4rem); }
.crm .sra-k.is-frei-tag { background: var(--sra-feier); border-color: var(--sra-feier); }
.crm .sra-k.is-urlaub { background: var(--sra-feier); border-color: var(--sra-feier); }
.crm .sra-k.is-ueber { border: thin dashed var(--sra-zuviel-rand); background: var(--sra-zuviel-bg); }
.crm .sra-k.is-ueber .sra-kf { background: var(--sra-zuviel-rand); }
.crm .sra-wl { font-size: var(--fs-label); color: var(--text-3); font-variant-numeric: tabular-nums; }
.crm .sra-wl b { font-weight: 600; color: var(--text-1); }
.crm .sra-legende--tage { margin-top: 0.6667rem; grid-column: 2; }
@container (max-width: 52rem) {
  .crm .sra-legende--tage { grid-column: 1 / -1; gap: 0.4rem 0.8rem; }
}

.crm .sra-gleich {
  display: grid; grid-template-columns: 11.3333rem minmax(0, 1fr); column-gap: 1.0667rem; align-items: center;
  margin-top: 1.2rem; padding: 0.9333rem 1.0667rem; border-radius: var(--r-lg); background: var(--bg-surface-2);
}
.crm .sra-gleich-zeile { display: flex; flex-wrap: wrap; align-items: center; gap: 0.9333rem; }
.crm .sra-gl { display: flex; flex-direction: column; }
.crm .sra-w { font-size: var(--fs-title); font-weight: 600; color: var(--text-1); font-variant-numeric: tabular-nums; }
.crm .sra-x { font-size: var(--fs-label); color: var(--text-3); }
.crm .sra-op { font-size: var(--fs-title); color: var(--text-3); }
.crm .sra-pille {
  display: inline-flex; align-items: baseline; gap: 0.5333rem; padding: 0.5rem 0.9333rem; border-radius: 999rem;
  font-size: var(--fs-title); font-weight: 600; font-variant-numeric: tabular-nums;
}
.crm .sra-pille small { font-size: var(--fs-meta); font-weight: 500; }
.crm .sra-pille.is-luft { background: var(--sra-luft-bg); color: var(--sra-luft-fg); }
.crm .sra-pille.is-voll { background: var(--sra-voll-bg); color: var(--sra-voll-fg); }
.crm .sra-pille.is-zuviel { background: var(--sra-zuviel-bg); color: var(--sra-zuviel-fg); box-shadow: inset 0 0 0 0.0667rem var(--sra-zuviel-rand); }
.crm .sra-zweit { grid-column: 2; margin-top: 0.9333rem; font-size: var(--fs-meta); color: var(--text-2); }
.crm .sra-zweit b { color: var(--text-1); font-weight: 600; }

.crm .sra-hinweise { margin: 0.8rem 0 0; padding-left: 2.6667rem; font-size: var(--fs-meta); color: var(--text-2); }
.crm .sra-hinweise li { margin: 0.2rem 0; }
.crm .sra-hinweise b { color: var(--sra-zuviel-hinweis); font-weight: 600; }
.crm .sra-tab { margin-top: 0.8rem; }
.crm .sra-tab summary { cursor: pointer; width: fit-content; color: var(--ad-blue); font-size: var(--fs-meta); font-weight: 500; }
.crm .sra-tab-scroll { overflow-x: auto; }
.crm .sra-table { width: auto; min-width: 37.3333rem; margin-top: 0.5333rem; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.crm .sra-table th, .crm .sra-table td { padding: 0.4rem 0.8rem; border-bottom: thin solid var(--border); text-align: right; color: var(--text-1); font-size: var(--fs-meta); }
.crm .sra-table th:first-child { text-align: left; }
.crm .sra-table tbody th { font-weight: 400; }
.crm .sra-table thead th { background: none; font-family: var(--f-cond); font-size: var(--fs-label); font-weight: 600; letter-spacing: .06em; color: var(--text-3); }
.crm .sra-table tfoot th, .crm .sra-table tfoot th:first-child, .crm .sra-table tfoot td { font-weight: 600; }
.crm .sra-table tr, .crm .sra-table tr:nth-child(even), .crm .sra-table thead, .crm .sra-table thead tr, .crm .sra-table tbody tr:hover { background: none; }
.crm .sra-fuss { margin: 0.8rem 0 0; font-size: var(--fs-label); color: var(--text-3); }
.crm .sra-state { margin: 0.8rem 0 0; font-size: var(--fs-ui); color: var(--text-2); }
.crm .sra-state.is-error { color: var(--ad-red-700); }
.crm .sra-state span { color: var(--text-3); }

@media (max-width: 60rem) {
  .crm .sra-zeile, .crm .sra-gleich { grid-template-columns: minmax(0, 1fr); row-gap: 0.5333rem; }
  .crm .sra-zweit { grid-column: 1; }
  .crm .sra-zeile > :first-child { margin-top: 0; }
  .crm .sra-wochen { flex-wrap: wrap; }
  .crm .sra-mo { font-size: var(--fs-label); }
}
/* `--primary` ist im `.crm`-Scope nicht neu belegt und fiele im Dunklen auf das Indigo der
   klassischen Shell zurueck — dasselbe Muster wie `.crm .fb-foot`: Markenblau lokal setzen. */
.crm .wl-chart { --primary: var(--ad-blue); }
/* Der Auslastungs-Block traegt ZWEI Kacheln; `.crm .deal-quality` ist fest dreispaltig
   und liesse rechts eine leere Spalte stehen. Das Ausweichraster `.project-quality`
   (auto-fill) taugt hier nicht — es wuerde die beiden Kacheln schmal an den linken Rand
   druecken. Zwei gleiche Haelften sind die richtige Antwort auf zwei Kacheln. */
.crm .deal-quality:has(> .dq:nth-child(2):last-child) { grid-template-columns: repeat(2, 1fr); }
/* Untertitel der Kennzahl-Kacheln — `.dq` bringt nur `lbl` und `val` mit. */
.crm .dq .dq-sub { display: block; font-size: var(--fs-meta); color: var(--text-3); }

.crm .deal-quality {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px;
}
.crm .dq {
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: 10px 12px;
  display: flex; flex-direction: column; gap: 2px;
  background: var(--bg-surface-2);
}
.crm .dq .lbl { font-size: var(--fs-meta); color: var(--text-3); font-weight: 500; }
.crm .dq .val { font-family: var(--f-cond); font-size: var(--fs-title); font-weight: 600; color: var(--text-1); }
.crm .dq.warn { border-color: rgba(255,152,104,.45); background: var(--tint-warn); }
.crm .dq.warn .val { color: var(--ad-orange-700); }
.crm.dark .dq.warn .val , html[data-theme="dark"] .crm .dq.warn .val { color: var(--ad-orange); }

/* PR1.363 #577 — Projektqualität + Projektinfo (rechte Spalte, unter der Statusmeldung):
   zwei Ampel-Listen statt des Kachelrasters von PR1.227. Zeilenmuster der Statusmeldung
   (.sr-row): Punkt · Bereich · Wert. Farbe trägt die Aussage nie allein — jede Zeile nennt
   ihren Zustand im Text und im aria-label; der Punkt ist die schnelle Zweitcodierung.
   Kein Motion: die Karte wird täglich gelesen (PRODUCT.md, Prinzip 2). */
.crm .pq-card { display: flex; flex-direction: column; gap: var(--s-2); min-width: 0; }
.crm .pq-card .section-h { margin-bottom: 0; }
.crm .pq-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.125rem; }
.crm .pq-row {
  -webkit-appearance: none; appearance: none;
  display: grid; grid-template-columns: auto auto minmax(0, 1fr); column-gap: var(--s-2); align-items: baseline;
  width: 100%; margin: 0; padding: var(--s-1) var(--s-2); border: 0; border-radius: var(--r-md);
  background: transparent; font: inherit; font-size: var(--fs-ui); color: inherit; text-align: left; min-width: 0;
}
.crm button.pq-row, .crm .pq-more > summary { cursor: pointer; }
.crm button.pq-row:hover, .crm .pq-more > summary:hover { background: var(--bg-hover); }
.crm button.pq-row:focus-visible, .crm .pq-more > summary:focus-visible { outline: 0.125rem solid var(--focus); outline-offset: 0.0625rem; }
.crm .pq-dot {
  width: 0.5625rem; height: 0.5625rem; border-radius: 50%;
  flex: 0 0 auto; display: inline-block; align-self: center; background: var(--text-3);
}
/* Marker in den -700-Stufen wie .sr-dot — --ad-green/-orange liegen als Marker unter 3:1. */
.crm .pq-row.is-ok .pq-dot { background: var(--ad-green-700); }
.crm .pq-row.is-warn .pq-dot { background: var(--ad-orange-700); }
.crm .pq-row.is-bad .pq-dot { background: var(--ad-red-700); }
.crm .pq-lbl { font-weight: 600; color: var(--text-1); white-space: nowrap; }
.crm .pq-val { color: var(--text-2); text-align: right; overflow-wrap: anywhere; }
.crm .pq-row.is-bad .pq-val { color: var(--text-1); }
/* Datenpflege: natives <details>; der Pfeil sagt, dass sich die Zeile aufklappen lässt. */
.crm .pq-more > summary { list-style: none; }
.crm .pq-more > summary::-webkit-details-marker { display: none; }
.crm .pq-more > summary .pq-val::after { content: ''; display: inline-block; width: 1em; height: 1em; background-color: currentColor; vertical-align: -0.125em; margin-left: .25em; -webkit-mask: var(--ic-mask-caret-down); mask: var(--ic-mask-caret-down); color: var(--text-3); }
.crm .pq-more[open] > summary .pq-val::after { -webkit-mask: var(--ic-mask-caret-up); mask: var(--ic-mask-caret-up); }
.crm .pq-sub {
  list-style: none; margin: 0.125rem 0 var(--s-1) var(--s-3); padding: 0 0 0 var(--s-1);
  border-left: 0.0625rem solid var(--border); display: flex; flex-direction: column; gap: 0.125rem;
}
/* Ladezustand — gleiche Zeilenhöhe wie die fertige Liste, damit nichts springt. */
.crm .pq-skeleton { min-height: 1.625rem; background: var(--bg-surface-3); }
.crm .pq-note { font-size: var(--fs-ui); color: var(--text-3); }
/* Sprungziele der Zeilen (Projektteam, Statusmeldung) — per Skript fokussiert. */
.crm [data-anchor]:focus-visible { outline: 0.125rem solid var(--focus); outline-offset: 0.125rem; }
.crm [data-anchor]:focus:not(:focus-visible) { outline: none; }

/* PR1.359 #573 — Health-Schild (Kopf) + Karte „Statusmeldung" (rechte Spalte oben).
   Farbe nie allein: jedes Schild traegt seinen Text. Marker in den -700-Stufen,
   Schrift in -900 (hell) bzw. hellen Stufen (dunkel) — --ad-green/-orange liegen als
   Marker unter 3:1. Ueberfaellig: Farbe bleibt, gestrichelter Rand (Grill A9).
   Keine Animation: Arbeitsfenster, alle zwei Wochen genutzt (Konvention 22). */
.crm .bdg-health-ok      { background: var(--tint-green);  color: var(--ad-green-900);  border-color: color-mix(in srgb, var(--ad-green-700) 35%, transparent); }
.crm .bdg-health-warn    { background: var(--tint-warn);   color: var(--ad-orange-900); border-color: color-mix(in srgb, var(--ad-orange-700) 35%, transparent); }
.crm .bdg-health-bad     { background: var(--tint-red);    color: var(--ad-red-700);    border-color: color-mix(in srgb, var(--ad-red-700) 35%, transparent); }
.crm .bdg-health-neutral { background: var(--bg-surface-3); color: var(--text-2); border-color: var(--border); }
.crm .bdg-health-overdue { border-style: dashed; border-width: 0.125rem; }
/* PR1.360 #574 — Liste + Kanban-Karte: kurzer Text, der graue Strichrand traegt
   „überfällig" allein (Grill A9: „Liste grau umrandet"); der Satz steht im Tooltip. */
.crm .bdg-health-compact { white-space: nowrap; }
.crm .bdg-health-compact.bdg-health-overdue { border-color: var(--text-2); }
.crm.dark .bdg-health-ok   , html[data-theme="dark"] .crm .bdg-health-ok   { color: var(--ad-green); }
.crm.dark .bdg-health-warn , html[data-theme="dark"] .crm .bdg-health-warn { color: var(--ad-orange); }
.crm.dark .bdg-health-bad  , html[data-theme="dark"] .crm .bdg-health-bad  { color: var(--ad-red-300); }

.crm .sr-card { display: flex; flex-direction: column; gap: var(--s-3); min-width: 0; }
.crm .sr-card .section-h { margin-bottom: 0; flex-wrap: wrap; gap: var(--s-1) var(--s-2); }
.crm .sr-card .section-h .meta { white-space: normal; min-width: 0; }
.crm .sr-note { margin: 0; padding: var(--s-2) var(--s-3); border-radius: var(--r-md); font-size: var(--fs-meta); color: var(--text-1);
  border: 0.0625rem dashed var(--border-strong); background: var(--bg-surface-2); }
.crm .sr-rows { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--s-2); }
/* Rechte Spalte ist bei 1280er Fenstern nur ~300 breit: der Satz bricht unter Bereich + Farbe. */
.crm .sr-row { display: grid; grid-template-columns: auto 1fr auto; column-gap: var(--s-2); row-gap: 0.125rem; align-items: baseline; font-size: var(--fs-ui); min-width: 0; }
.crm .sr-dot { width: 0.5625rem; height: 0.5625rem; border-radius: 50%; background: var(--text-3); display: inline-block; flex: 0 0 auto; align-self: center; }
.crm .sr-dot-ok { background: var(--ad-green-700); }
.crm .sr-dot-warn { background: var(--ad-orange-700); }
.crm .sr-dot-bad { background: var(--ad-red-700); }
.crm .sr-dim { font-weight: 600; color: var(--text-1); }
.crm .sr-color { color: var(--text-3); font-size: var(--fs-meta); }
.crm .sr-text { grid-column: 2 / -1; color: var(--text-2); overflow-wrap: anywhere; }
/* PR1.479 — Marke „wie zuletzt" je Bereich (Zeile) und im Verlauf (hinter dem Melder). */
.crm .sr-carried { font-size: var(--fs-label); color: var(--text-3); font-style: italic; }
.crm .sr-row .sr-carried { grid-column: 2 / -1; }
.crm .sr-empty { display: flex; flex-direction: column; align-items: flex-start; gap: var(--s-2); }
.crm .sr-empty .pq-note { margin: 0; }
.crm .sr-actions { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.crm .sr-history { border-top: 0.0625rem solid var(--border); padding-top: var(--s-2); display: flex; flex-direction: column; gap: var(--s-1); }
.crm .sr-history-h { margin: 0; font-size: var(--fs-label); color: var(--text-3); font-weight: 500; }
.crm .sr-hist { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.crm .sr-hist-item + .sr-hist-item { border-top: 0.0625rem solid var(--border); }
.crm .sr-hist-row {
  width: 100%; display: grid; grid-template-columns: auto 1fr auto; gap: var(--s-2); align-items: center;
  background: transparent; border: 0; border-radius: var(--r-sm); padding: var(--s-2) var(--s-1); font: inherit; font-size: var(--fs-meta);
  color: var(--text-1); text-align: left; cursor: pointer; min-width: 0;
}
.crm .sr-hist-row:hover { background: var(--bg-hover); }
.crm .sr-hist-row:focus-visible { outline: 0.125rem solid var(--focus); outline-offset: 0.0625rem; }
.crm .sr-hist-date { white-space: nowrap; color: var(--text-2); }
.crm .sr-hist-who { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.crm .sr-dots { display: inline-flex; gap: 0.1875rem; }
.crm .sr-hist-detail { padding: 0.125rem var(--s-1) var(--s-3); }
.crm .sr-hist-detail[hidden] { display: none; }
.crm .sr-all { align-self: flex-start; }

/* PR1.394 (#622, B6) — Reiter „Verlauf" (Team & Einsaetze) an Angebot, Projekt, Mitarbeiter.
   Ruhige Nachschlage-Liste nach Tag, Optik wie die Statusmeldungs-Historie (.sr-hist).
   Keine Motion, keine Platzhalter-Animation. Nur Tokens und rem (Ratchet raw-hex/raw-px). */
.crm .tv { display: flex; flex-direction: column; gap: var(--s-3); min-width: 0; }
.crm .tv .section-h { margin-bottom: 0; }
.crm .tv-h:focus { outline: none; }
.crm .tv-h:focus-visible { outline: 0.125rem solid var(--focus); outline-offset: 0.125rem; }
.crm .tv-state { margin: 0; color: var(--text-2); font-size: var(--fs-ui); }
.crm .tv-error { display: flex; flex-direction: column; align-items: flex-start; gap: var(--s-2); }
.crm .tv-error p { margin: 0; color: var(--text-1); }
.crm .tv-skel { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--s-2); }
.crm .tv-skel li { height: 2.25rem; border-radius: var(--r-sm); background: var(--bg-surface-2); }
.crm .tv-skel li:nth-child(2) { width: 85%; }
.crm .tv-skel li:nth-child(3) { width: 70%; }
.crm .tv-filter { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); }
.crm .tv-day { display: flex; flex-direction: column; gap: var(--s-1); }
.crm .tv-day-h { margin: 0; font-size: var(--fs-label); color: var(--text-3); font-weight: 500; }
.crm .tv-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.crm .tv-item { padding: var(--s-2) var(--s-1); display: flex; flex-direction: column; gap: 0.125rem; min-width: 0; }
.crm .tv-item + .tv-item { border-top: 0.0625rem solid var(--border); }
.crm .tv-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); font-size: var(--fs-meta); min-width: 0; }
.crm .tv-time { font-family: var(--f-mono); font-variant-numeric: tabular-nums; color: var(--text-2); white-space: nowrap; }
.crm .tv-who { color: var(--text-1); font-weight: 600; overflow-wrap: anywhere; min-width: 0; }
.crm .tv-weg { margin-left: auto; }
.crm .tv-weg-system { background: transparent; border-style: dashed; color: var(--text-3); }
.crm .tv-satz { margin: 0; font-size: var(--fs-ui); color: var(--text-1); overflow-wrap: anywhere; }
.crm .tv-changes { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.125rem; font-size: var(--fs-meta); color: var(--text-2); }
.crm .tv-ch-label { color: var(--text-3); }
.crm .tv-ch-alt { text-decoration: line-through; text-decoration-color: var(--text-3); }
.crm .tv-ch-neu { color: var(--text-1); }
.crm .tv-foot { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); }
.crm .tv-hint { margin: 0; font-size: var(--fs-meta); color: var(--text-3); }
/* PR1.394: Filter-Chip „Nur <Person>" — --ad-blue auf --tint-blue liegt bei 4,48:1 (axe, hell);
   -700 hebt ihn ueber AA. Dunkel bleibt bei -300 (eigene Regel, sonst gewaenne hier die hoehere Spezifitaet). */
.crm .chip.is-on.tv-filter-chip { color: var(--ad-blue-700); }
.crm.dark .chip.is-on.tv-filter-chip , html[data-theme="dark"] .crm .chip.is-on.tv-filter-chip { color: var(--ad-blue-300); }

/* PR1.448 (#690) — Reiter „Änderungen" am Mitarbeiter (Kompassbild R2_10_verlauf): Filter-Chips,
   Tagesgruppen (Datum + Anzahl links, Einträge rechts), Symbol-Kachel je Art, ganzer Satz,
   alt (durchgestrichen) → neu, Uhrzeit rechts. Keine Motion: Nachschlage-Liste.
   Nur Tokens und rem (Ratchet). */
.crm .tv-person { gap: var(--s-4); }
.crm .tv-chips { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.crm .chip.tv-chip { border-radius: var(--r-sm); font-size: var(--fs-ui); padding: 0.3125rem 0.75rem; }
.crm .chip.tv-chip.is-on { background: var(--text-1); border-color: var(--text-1); color: var(--bg-surface); }
.crm.dark .chip.tv-chip.is-on , html[data-theme="dark"] .crm .chip.tv-chip.is-on { color: var(--bg-surface); }
.crm .chip.tv-chip:focus-visible { outline: 0.125rem solid var(--focus); outline-offset: 0.125rem; }
.crm .tv-tage { display: flex; flex-direction: column; }
.crm .tv-tag { display: grid; grid-template-columns: 10rem minmax(0, 1fr); gap: var(--s-2) var(--s-4); padding: var(--s-4) 0; }
.crm .tv-tag + .tv-tag { border-top: 0.0625rem solid var(--border); }
.crm .tv-tag:first-child { padding-top: 0; }
.crm .tv-tag-kopf { display: flex; flex-direction: column; gap: 0.125rem; }
.crm .tv-tag-t { margin: 0; font-size: var(--fs-body); font-weight: 500; color: var(--text-1); }
.crm .tv-tag-n { font-size: var(--fs-ui); color: var(--text-2); }
.crm .tv-aes { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--s-4); min-width: 0; }
.crm .tv-ae { display: grid; grid-template-columns: 2.25rem minmax(0, 1fr) auto; gap: var(--s-3); align-items: start; }
.crm .tv-sym { display: inline-flex; align-items: center; justify-content: center; width: 2.25rem; height: 2.25rem; border-radius: var(--r-sm);
  background: var(--bg-surface-2); color: var(--text-2); }
.crm .tv-sym-koffer { background: var(--tint-blue); color: var(--ad-blue-700); }
.crm .tv-sym-funken { background: var(--tint-violet); color: var(--ad-violet-600); }
.crm .tv-sym-haken { background: var(--tint-green); color: var(--ad-green-700); }
.crm.dark .tv-sym-koffer , html[data-theme="dark"] .crm .tv-sym-koffer { color: var(--ad-blue-300); }
/* Dunkel: --ad-violet allein verschwindet auf dem violetten Grund (Usability lokal) — zur Textfarbe hin aufhellen. */
.crm.dark .tv-sym-funken , html[data-theme="dark"] .crm .tv-sym-funken { color: color-mix(in srgb, var(--ad-violet) 45%, var(--text-1)); }
.crm.dark .tv-sym-haken , html[data-theme="dark"] .crm .tv-sym-haken { color: var(--ad-green); }
.crm .tv-ae-body { display: flex; flex-direction: column; gap: 0.25rem; min-width: 0; padding-top: 0.375rem; }
.crm .tv-ae-satz { margin: 0; font-size: var(--fs-body); line-height: 1.45; color: var(--text-1); overflow-wrap: anywhere; }
.crm .tv-ae-satz strong { font-weight: 600; }
/* display:inline — sonst bricht der Name als Block aus dem Satz (Usability lokal PR1.448). */
.crm .tv-link { display: inline; background: none; border: 0; padding: 0; font: inherit; color: var(--ad-blue-700); cursor: pointer; text-align: inherit; }
/* Unterstrichen: Farbe allein reicht im Fliesstext nicht (axe link-in-text-block, 2,45:1 zum Satz). */
.crm .tv-link { text-decoration: underline; text-decoration-thickness: 0.0625rem; text-underline-offset: 0.1875rem;
  text-decoration-color: color-mix(in srgb, currentColor 45%, transparent); }
.crm .tv-link:hover { text-decoration-color: currentColor; }
.crm .tv-link:focus-visible { outline: 0.125rem solid var(--focus); outline-offset: 0.125rem; border-radius: 0.125rem; }
.crm.dark .tv-link , html[data-theme="dark"] .crm .tv-link { color: var(--ad-blue-300); }
.crm .tv-det { margin: 0; font-size: var(--fs-ui); color: var(--text-2); overflow-wrap: anywhere; }
.crm .tv-det-l { color: var(--text-2); }
.crm .tv-alt { color: var(--text-2); text-decoration: line-through; }
.crm .tv-pfeil { margin: 0 0.25rem; color: var(--text-2); }
.crm .tv-neu { color: var(--text-1); }
.crm .tv-zusatz { margin: 0; font-size: var(--fs-meta); color: var(--text-2); }
.crm .tv-zeit { padding-top: 0.375rem; font-size: var(--fs-ui); font-variant-numeric: tabular-nums; color: var(--text-2); white-space: nowrap; }
@media (max-width: 40rem) {
  .crm .tv-tag { grid-template-columns: minmax(0, 1fr); }
  .crm .tv-tag-kopf { flex-direction: row; align-items: baseline; gap: var(--s-2); }
}

/* ============== UTILITIES ============== */
.crm .row-flex { display: flex; align-items: center; gap: 10px; }
.crm .col-flex { display: flex; flex-direction: column; gap: 10px; }
.crm .divider { height: 1px; background: var(--border); }
.crm .note {
  font-size: var(--fs-meta); color: var(--text-3); font-family: var(--f-mono); font-variant-numeric: tabular-nums;
  letter-spacing: .2px;
}
.crm .illustr-tag {
  display: inline-flex; align-items: center; gap: var(--s-1);
  font-size: var(--fs-label); color: var(--text-3);
  font-family: var(--f-mono); font-variant-numeric: tabular-nums;
  padding: 1px 6px; border: 1px dashed var(--border-strong);
  border-radius: 999px;
}

.crm .olympus-event {
  display: grid;
  grid-template-columns: minmax(0, 12px) 1fr auto;
  gap: 10px; align-items: flex-start;
  padding: 10px 12px;
  background: var(--bg-surface-2);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  transition: background var(--t-fast), border-color var(--t-fast);
}
.crm .olympus-event:hover { background: var(--bg-hover); border-color: var(--border-strong); }
.crm .olympus-event .pip {
  width: 8px; height: 8px; border-radius: 50%; margin-top: 5px;
  background: var(--ad-blue);
}
.crm .olympus-event.v .pip { background: var(--ad-violet); }
.crm .olympus-event.o .pip { background: var(--ad-orange); }
.crm .olympus-event.t .pip { background: var(--ad-turq-700); }
.crm .olympus-event b { font-size: var(--fs-body); color: var(--text-1); display: block; margin-bottom: 2px; }
.crm .olympus-event small { font-size: var(--fs-meta); color: var(--text-2); }
.crm .olympus-event .when { font-family: var(--f-mono); font-variant-numeric: tabular-nums; font-size: var(--fs-meta); color: var(--text-3); white-space: nowrap; }

/* PR1.643 (#942) — Olympus-Hub: Kopf mit Live-Zeile, eine Filterzeile, Liste nach Tag,
   Zeile mit Uhrzeit · Symbol · „Regel: Objekt" · Verb. Bewegung nur nach „Erledigt"
   (Ueberblendung 160 ms); Filtern und Sortieren bewegen nichts. */
.crm .ev-kopf-titel { display: flex; align-items: baseline; gap: .75rem; flex-wrap: wrap; min-width: 0; }
.crm .ev-kopf-live { color: var(--text-2); font-size: var(--fs-body); }
.crm .ev-kopf .actions { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.crm .ev-modus button { display: inline-flex; align-items: center; gap: .375rem; }
.crm .ev-filterzeile { flex-wrap: wrap; row-gap: .5rem; }
.crm .ev-filterzeile .seg { margin-right: .5rem; }
.crm .ev-filterzeile .lbl { margin-left: .25rem; }
.crm .ev-neu-zahl { color: var(--text-3); font-variant-numeric: tabular-nums; margin-left: .25rem; }
.crm .fpill.is-on .ev-neu-zahl { color: inherit; }
.crm .ev-objekt-feld { min-width: 15rem; flex: 0 1 18rem; }
.crm .ev-objekt-feld .cs, .crm .ev-phase-feld .cs { width: 100%; }
.crm .ev-suche { position: relative; display: flex; align-items: center; }
.crm .ev-suche-lupe { position: absolute; left: .625rem; display: inline-flex; color: var(--text-3); pointer-events: none; }
.crm .ev-suche-input {
  width: 100%; padding: .4375rem 1.875rem .4375rem 2rem; font: inherit; font-size: var(--fs-body);
  color: var(--text-1); background: var(--bg-surface-2);
  border: .0625rem solid var(--border); border-radius: var(--r-md);
}
.crm .ev-suche-input::placeholder { color: var(--text-3); }
.crm .ev-suche-input:focus-visible { outline: .125rem solid var(--focus); outline-offset: .0625rem; }
.crm .ev-suche-weg { position: absolute; right: .375rem; display: inline-flex; padding: .125rem; border: 0; background: transparent; color: var(--text-2); cursor: pointer; border-radius: 50%; }
.crm .ev-suche-weg[hidden] { display: none; }
.crm .ev-suche-liste {
  position: absolute; z-index: 30; top: calc(100% + .25rem); left: 0; right: 0; max-height: 18rem; overflow: auto;
  margin: 0; padding: .25rem; list-style: none;
  background: var(--bg-surface-2); border: .0625rem solid var(--border); border-radius: var(--r-md);
  box-shadow: 0 .5rem 1.5rem rgba(0, 0, 0, .18);
}
.crm .ev-suche-liste[hidden] { display: none; }
.crm .ev-suche-opt { display: flex; justify-content: space-between; gap: .75rem; padding: .375rem .5rem; border-radius: var(--r-sm); cursor: pointer; font-size: var(--fs-body); color: var(--text-1); }
.crm .ev-suche-opt small { color: var(--text-3); font-size: var(--fs-meta); white-space: nowrap; }
.crm .ev-suche-opt:hover, .crm .ev-suche-opt.is-aktiv { background: var(--bg-hover); }
.crm .ev-suche-leer { padding: .375rem .5rem; color: var(--text-3); font-size: var(--fs-meta); }
.crm .ev-phase-feld { min-width: 10rem; }
.crm .ev-tage { display: flex; flex-direction: column; gap: 1rem; }
.crm .ev-tag-kopf {
  display: flex; align-items: center; gap: .75rem;
  margin: 0 0 .5rem; font-size: var(--fs-body); font-weight: 600; color: var(--text-1);
}
.crm .ev-tag-kopf::after { content: ""; flex: 1; height: .0625rem; background: var(--border); }
.crm .ev-tag-liste {
  display: flex; flex-direction: column;
  /* PR1.667 (#966) — Zeilen weiß wie Bild V8, damit die Sammelzeile (--bg-surface-2) sich abhebt. */
  background: var(--bg-surface); border: .0625rem solid var(--border); border-radius: var(--r-md);
}
.crm .ev-zeile {
  display: grid; grid-template-columns: 3.5rem 2rem minmax(0, 1fr) auto;
  align-items: center; gap: .75rem;
  padding: .625rem 1rem; cursor: pointer;
}
.crm .ev-zeile + .ev-zeile { border-top: .0625rem solid var(--border); }
.crm .ev-zeile:focus-visible { outline: .125rem solid var(--focus); outline-offset: -.125rem; }
.crm .ev-zeile-zeit { color: var(--text-3); font-size: var(--fs-meta); white-space: nowrap; }
.crm .ev-zeile-symbol {
  display: inline-flex; align-items: center; justify-content: center;
  width: 2rem; height: 2rem; border-radius: var(--r-sm);
  background: var(--bg-hover); color: var(--text-2);
}
.crm .ev-zeile.ton-risiko .ev-zeile-symbol { color: var(--warning); background: color-mix(in srgb, var(--warning) 14%, transparent); }
.crm .ev-zeile.ton-verloren .ev-zeile-symbol { color: var(--danger); background: color-mix(in srgb, var(--danger) 12%, transparent); }
.crm .ev-zeile-titel { color: var(--text-1); font-size: var(--fs-body); overflow-wrap: anywhere; }
.crm .ev-zeile-titel b { font-weight: 600; }
.crm .ev-zeile-unter { color: var(--text-2); font-size: var(--fs-meta); margin-top: .125rem; }
.crm .ev-zeile-unter .is-ueberfaellig { color: var(--danger); }
.crm .ev-zeile-fehler { color: var(--danger); font-size: var(--fs-meta); margin: .25rem 0 0; }
/* Erledigt: gedaempfte Schrift statt Durchsichtigkeit — bleibt lesbar (Kontrast AA). */
.crm .ev-zeile.is-erledigt .ev-zeile-titel,
.crm .ev-zeile.is-erledigt .ev-zeile-titel b { color: var(--text-2); font-weight: 400; }
.crm .ev-zeile.is-erledigt .ev-zeile-symbol { color: var(--text-2); background: var(--bg-hover); }
.crm .ev-zeile-titel, .crm .ev-zeile-symbol { transition: color var(--t-med), background-color var(--t-med); }
.crm .ev-verb { white-space: nowrap; }
.crm .ev-verb[hidden] { display: none; }
.crm .ev-owner-wahl { grid-column: 4; justify-self: end; min-width: 14rem; }
/* PR1.667 (#966) — Bündelzeilen: Zähler-Chip links vom Verb (Bild V8), Sammelzeile leicht abgesetzt,
   Einzelereignisse aufklappbar (200 ms Höhe + Deckkraft, Bewegungsbudget Blatt B). */
.crm .ev-buendel + .ev-buendel, .crm .ev-buendel + .ev-zeile, .crm .ev-zeile + .ev-buendel { border-top: .0625rem solid var(--border); }
.crm .ev-zeile-buendel { position: relative; }
.crm .ev-zeile-buendel.is-sammel { background: var(--bg-surface-2); }
.crm .ev-zeile-rechts { display: inline-flex; align-items: center; justify-content: flex-end; gap: .75rem; }
.crm .ev-zeile-rechts .ev-owner-wahl { grid-column: auto; }
.crm .ev-zaehler {
  min-width: 1.75rem; height: 1.1875rem; padding: 0 .5rem;
  display: inline-flex; align-items: center; justify-content: center;
  border: 0; border-radius: var(--r-pill, 6.25rem); cursor: pointer;
  background: var(--bg-surface-3); color: var(--text-2);
  font: inherit; font-size: var(--fs-meta); font-weight: 600; line-height: 1;
  transition: background-color var(--t-fast), color var(--t-fast);
}
.crm .ev-zaehler:focus-visible { outline: .125rem solid var(--focus); outline-offset: .125rem; }
.crm .ev-zaehler[aria-expanded="true"] { background: var(--border); color: var(--text-1); }
.crm .ev-zaehler:active { transform: scale(.97); }
.crm .ev-kinder {
  display: grid; grid-template-rows: 0fr; opacity: 0;
  transition: grid-template-rows 200ms var(--ease-out), opacity 200ms var(--ease-out);
}
.crm .ev-buendel.is-offen .ev-kinder { grid-template-rows: 1fr; opacity: 1; }
.crm .ev-kinder-innen { min-height: 0; overflow: hidden; }
.crm .ev-buendel.is-offen .ev-kinder-innen { border-top: .0625rem solid var(--border); }
.crm .ev-kinder .ev-zeile { padding-left: 2.5rem; }
.crm .ev-zeile-buendel .role-pick-free, .crm .ev-zeile-buendel .role-pick-foot:empty,
.crm .ev-zeile-buendel .role-pick-seg { display: none; }
@media (hover: hover) and (pointer: fine) {
  .crm .ev-zaehler:hover { background: var(--border); color: var(--text-1); }
}
@media (prefers-reduced-motion: reduce) {
  .crm .ev-kinder { transition-duration: 1ms; }
  .crm .ev-zaehler:active { transform: none; }
}
@media (hover: hover) and (pointer: fine) {
  .crm .ev-zeile:hover { background: var(--bg-hover); }
}
@media (max-width: 47.99rem) {
  .crm .ev-zeile { grid-template-columns: 2.75rem minmax(0, 1fr) auto; }
  .crm .ev-zeile-symbol { display: none; }
  .crm .ev-objekt-feld { flex-basis: 100%; }
}

/* ============== PALETTE STRIP ============== */
.crm .palette-grid {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: var(--s-2);
}
.crm .swatch {
  display: flex; flex-direction: column;
  border-radius: var(--r-md);
  overflow: hidden;
  border: 1px solid var(--border);
  background: var(--bg-surface);
}
.crm .swatch .chip {
  height: 56px;
}
.crm .swatch .meta { padding: 6px 8px; font-size: var(--fs-meta); color: var(--text-2); font-family: var(--f-mono); font-variant-numeric: tabular-nums; }
.crm .swatch .meta b { color: var(--text-1); display: block; font-family: var(--f-sans); font-size: var(--fs-meta); }

/* ===================================================================
   FLOW (interactive layer)
   =================================================================== */
/* flow.css — interactive prototype additions on top of components.css */

/* ───────── MOTION SYSTEM ───────── */
/* PR1.636 #935 — „Ansicht öffnet (einmal)": Karten fahren gestaffelt ein, 10 px von unten,
   260 ms, je +50 ms (höchstens 8 gestaffelt). Nur unter .is-first-paint (navigation.js setzt
   die Klasse beim Ansichtswechsel); ein renderAll() nach dem Speichern spielt nichts erneut.
   Keine Zeilen-Einflug-Animation an Listen-Tabellen, keine Zahlen-Einblendung. */
@keyframes routeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.crm.is-first-paint .crm-content > *,
.crm.is-first-paint .section-card,
.crm.is-first-paint .kanban-col .kanban-card { animation: routeIn var(--mo-enter) var(--ease-out) both; }
.crm.is-first-paint .section-card:nth-child(2),
.crm.is-first-paint .kanban-col .kanban-card:nth-child(2) { animation-delay: calc(var(--mo-enter-step) * 1); }
.crm.is-first-paint .section-card:nth-child(3),
.crm.is-first-paint .kanban-col .kanban-card:nth-child(3) { animation-delay: calc(var(--mo-enter-step) * 2); }
.crm.is-first-paint .section-card:nth-child(4),
.crm.is-first-paint .kanban-col .kanban-card:nth-child(4) { animation-delay: calc(var(--mo-enter-step) * 3); }
.crm.is-first-paint .section-card:nth-child(5),
.crm.is-first-paint .kanban-col .kanban-card:nth-child(5) { animation-delay: calc(var(--mo-enter-step) * 4); }
.crm.is-first-paint .section-card:nth-child(6) { animation-delay: calc(var(--mo-enter-step) * 5); }
.crm.is-first-paint .section-card:nth-child(7) { animation-delay: calc(var(--mo-enter-step) * 6); }
.crm.is-first-paint .section-card:nth-child(n+8) { animation-delay: calc(var(--mo-enter-step) * 7); }
.crm .kanban-card { transition: transform var(--mo-hover) var(--ease-out), box-shadow var(--mo-hover) var(--ease-out), border-color var(--mo-hover) var(--ease-out); cursor: grab; }
.crm .kanban-card:active { cursor: grabbing; transform: translateY(-1px) scale(.985); }
@media (hover: hover) and (pointer: fine) {
  .crm .kanban-card:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(0,0,0,.10), 0 1px 2px rgba(0,0,0,.04); border-color: var(--border-strong); }
}

/* Zeilen-Hover: nur Farbe, die Zeile verschiebt sich nicht. */
.crm .tbl.tbl-clickable tbody tr { transition: background var(--t-fast); }

/* Sidebar item — slide-in active indicator */
.crm .sb-item { position: relative; transition: background var(--t-fast), color var(--t-fast); }
.crm .sb-item::before {
  content: ''; position: absolute; left: 0; top: 8px; bottom: 8px; width: 3px; border-radius: 0 3px 3px 0;
  background: currentColor; opacity: 0; transform: scaleY(0); transform-origin: center;
  transition: transform var(--mo-hover) var(--ease-out), opacity var(--mo-hover) var(--ease-out);
}
.crm .sb-item.active::before { opacity: .9; transform: scaleY(1); }
.crm .sb-item,.crm .sb-pill { transition: background var(--t-fast), color var(--t-fast); }

/* Status badge — pulse on hover/edit */
.crm .badge,.crm .stage-badge { transition: transform .15s var(--ease-out), background var(--t-fast); }
@media (hover: hover) and (pointer: fine) { .crm .badge:hover,.crm .stage-badge:hover { transform: scale(1.04); } }

/* Dot indicators — gentle breathing */
.crm .dot { transition: transform .2s var(--ease-out); }
@media (hover: hover) and (pointer: fine) { .crm .sb-pill:hover .dot { transform: scale(1.3); } }

/* Buttons — press feedback */
.crm .btn { transition: transform var(--mo-press) var(--ease-out), background var(--t-fast), border-color var(--t-fast), box-shadow var(--t-fast); }
@media (hover: hover) and (pointer: fine) { .crm .btn:hover:not(:disabled) { transform: translateY(-1px); } }
.crm .btn:not(:disabled):active { transform: scale(.97); }
.crm .btn-primary:hover { box-shadow: 0 8px 20px rgba(0,110,199,.22); }

/* Tabs — sliding underline */
.crm .tabs { position: relative; }
.crm .tab { transition: color .18s ease; position: relative; }
.crm .tab::after {
  content: ''; position: absolute; left: 12px; right: 12px; bottom: -1px; height: 2px;
  background: currentColor; border-radius: 2px;
  transform: scaleX(0); transform-origin: center;
  transition: transform .28s var(--ease-out);
}
.crm .tab.active::after,.crm .tab[aria-selected="true"]::after { transform: scaleX(1); }

/* Olympus events — slide-in stream */
.crm .event-row,.crm .olympus-row,.crm .ol-event {
  animation: evtIn .4s var(--ease-out) both;
}
.crm .event-row:nth-child(2),.crm .olympus-row:nth-child(2),.crm .ol-event:nth-child(2) { animation-delay: .04s; }
.crm .event-row:nth-child(3),.crm .olympus-row:nth-child(3),.crm .ol-event:nth-child(3) { animation-delay: .08s; }
.crm .event-row:nth-child(4),.crm .olympus-row:nth-child(4),.crm .ol-event:nth-child(4) { animation-delay: .12s; }
.crm .event-row:nth-child(5),.crm .olympus-row:nth-child(5),.crm .ol-event:nth-child(5) { animation-delay: .16s; }
.crm .event-row:nth-child(6),.crm .olympus-row:nth-child(6),.crm .ol-event:nth-child(6) { animation-delay: .20s; }
.crm .event-row:nth-child(7),.crm .olympus-row:nth-child(7),.crm .ol-event:nth-child(7) { animation-delay: .24s; }
@keyframes evtIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* Card hover lift (generic cards) */
.crm .card { transition: box-shadow .2s ease, border-color .2s ease, transform .2s var(--ease-out); }

/* PR1.236 (#408) — Drop-Ziel beim Ziehen sichtbar machen.
   Die globale Regel dafür steht in style.css (`.staffing-dropzone-over`, dort :7366) und
   greift auf einer Redesign-Karte NICHT: `.crm .card` ist spezifischer und gewinnt den
   Rahmen zurück. Gemessen am 17.08.2026 — die Zone blieb beim Drüberziehen unverändert.
   Betrifft beide Redesign-Gesichter: die Team-Karte der Opportunity-Seite trägt dieselbe
   Klasse seit PR1.127/RD1.08, der Hinweis war dort ebenso unsichtbar.
   Keine Animation, nur ein Zustand: die Karte ist ein Arbeitsgerät, kein Schaufenster. */
.crm .card.staffing-dropzone-over {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 12%, var(--bg-surface));
}

/* Avatar — PR1.636: kein Drehen mehr beim Hover (Frequenz-Regel). */

/* PR1.638 (#937) — der Glanz auf save-pulse ist entfallen (endlose Bewegung, Budget). */
/* ───────── /MOTION SYSTEM ───────── */

/* ===================================================================
   RD1.11 #334 — Staffing-Pool (geteilt von Multi-Opp- und Multi-Projekt-Staffing)
   ===================================================================
   Stand bis RD1.11 als 200-Zeichen-Inline-String wortgleich in beiden Modulen. Der
   Grund dafuer war die Legacy-Regel `.mos-pool-panel` (style.css:11138), die sonst
   zurueckblutet — deshalb eine EIGENE Klasse statt der bestehenden: `.crm .staffing-pool`
   schlaegt sie ueber die Spezifitaet, ohne dass wir uns auf die Ladereihenfolge verlassen.

   Repariert wird dabei `max-height: calc(100vh - 130px)`: die 130px waren gegen den
   Viewport gerechnet, obwohl das Panel in einem Scroll-Container sitzt — der existierte
   bis RD1.11 gar nicht. `100%` bezieht sich auf genau diesen Container und ist damit auch
   dann richtig, wenn Topbar oder Kopfbereich ihre Hoehe aendern. */
.crm .staffing-pool {
  position: sticky;
  top: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
  background: var(--bg-surface);
  border: 1px solid var(--border);
  /* 12px hat kein Token (--r-lg ist 10, --r-xl ist 14) — Literal bleibt, damit sich das
     Aussehen nicht still verschiebt. padding dagegen trifft --s-3 exakt. */
  border-radius: 12px;
  padding: var(--s-3);
  max-height: 100%;
  overflow-y: auto;
}


/* topbar overflow safety — keep all actions visible at narrow widths */
.crm .topbar { flex-wrap: nowrap; }
.crm .tb-crumbs { flex: 0 1 auto; min-width: 0; overflow: hidden; }
.crm .tb-crumbs > :not(#crm-crumb) { flex: 0 0 auto; }
/* BF-130 (#861) — der Seitenname darf als Einziger schrumpfen und endet dann mit „…"
   (voller Text im title); vorher wurde er bei 1280 px hart abgeschnitten. */
.crm #crm-crumb {
  flex: 0 1 auto; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.crm .tb-search.tb-search-flex {
  flex: 1 1 0;
  min-width: 0;
  max-width: 520px;
}
.crm .tb-search.tb-search-flex .tb-search-label {
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; flex: 1;
  text-align: left;   /* PR1.639 Nachzug — Platzhalter linksbündig direkt neben der Lupe (V1), nicht mittig */
}
.crm .tb-export { flex: 0 0 auto; white-space: nowrap; }

@media (max-width: 1180px) {
  .crm .tb-brand-cluster + .sep { display: none; }
  .crm .tb-crumbs .tb-brand-cluster { display: none !important; }
}
@media (max-width: 1024px) {
  .crm .tb-export { display: none; }
  .crm .tb-crumbs span:not(.sep):not(.tb-brand-cluster) { display: none; }
  .crm .tb-crumbs .sep:not(:last-of-type) { display: none; }

}
@media (max-width: 880px) {
  .crm .tb-search.tb-search-flex { max-width: 220px; }
  .crm .tb-search.tb-search-flex kbd { display: none; }
}

/* clickable rows */
.crm .tbl.tbl-clickable tbody tr { transition: background var(--t-fast); }
.crm .tbl.tbl-clickable tbody tr:hover { background: var(--bg-hover); }
.crm .tbl.tbl-clickable tbody tr:hover .lnk { text-decoration: underline; }

/* status trigger on record */
.crm .status-trigger {
  display: inline-flex; align-items: center; gap: 6px;
  background: transparent; border: 1px dashed transparent;
  padding: 4px 8px; border-radius: var(--r-sm); cursor: pointer;
  transition: background var(--t-fast), border-color var(--t-fast);
  font: inherit; color: inherit;
}
.crm .status-trigger:hover { background: var(--bg-hover); border-color: var(--border); }
.crm .popover {
  position: absolute; top: calc(100% + 6px); left: 0;
  min-width: 220px; background: var(--bg-surface);
  border: 1px solid var(--border); border-radius: var(--r-md);
  box-shadow: 0 12px 36px rgba(0,0,0,.16), 0 1px 2px rgba(0,0,0,.05);
  padding: 6px; z-index: 50;
  transform-origin: top left;
  animation: popIn var(--mo-pop-in) var(--ease-out);
}
@keyframes popIn { from { transform: translateY(-4px) scale(.98); opacity: 0; } to { transform: none; opacity: 1; } }
/* PR1.636: Ausgang (exitThen setzt .mo-exit, danach hidden); Esc/Tastatur schließen sofort. */
.crm .popover.mo-exit { animation: popOut var(--mo-exit-ms, var(--mo-pop-out)) var(--ease-in) both; pointer-events: none; }
@keyframes popOut { from { transform: none; opacity: 1; } to { transform: translateY(-4px) scale(.98); opacity: 0; } }
.crm .po-head { font-size: var(--fs-label); color: var(--text-3); padding: 6px 8px 2px; font-weight: 500; }
.crm .po-item {
  display: flex; align-items: center; gap: 10px;
  width: 100%; padding: 7px 10px; border-radius: 5px;
  background: transparent; border: none; cursor: pointer;
  font: inherit; color: var(--text-1); text-align: left;
}
.crm .po-item:hover { background: var(--bg-hover); }
.crm .po-item.is-current { background: var(--bg-surface-2); }
.crm .po-item .led { width: 8px; height: 8px; border-radius: 50%; }

/* inline-edit probability */
.crm .inline-edit {
  background: transparent; border: 1px dashed transparent;
  padding: 2px 8px; border-radius: 5px; cursor: text;
  font: inherit; color: inherit;
  display: inline-flex; align-items: center; gap: var(--s-2);
}
.crm .inline-edit:hover { background: var(--bg-hover); border-color: var(--border-strong); }
.crm .inline-edit .ie-hint { font-size: var(--fs-meta); color: var(--text-3); opacity: 0; transition: opacity var(--t-fast); }
.crm .inline-edit:hover .ie-hint { opacity: 1; }
.crm .pct-input {
  width: 90px; padding: 4px 8px;
  font: inherit; font-family: var(--f-cond); font-weight: 600; font-size: var(--fs-title);
  background: var(--bg-surface);
  border: 2px solid var(--ad-blue);
  border-radius: var(--r-sm); outline: none;
  color: var(--text-1);
}

/* kanban drop targets */
.crm .kan-col.drop-hot { background: var(--tint-blue); border-color: var(--ad-blue); }
/* PR1.647 (#946) — Zieh-Baustein (components/touch-dnd.js): Karte hebt sich, blauer Platzhalter,
   Ablagefelder nur beim Ziehen. Die Formen stehen in style.css; hier die Redesign-Tokens. */
.crm .kan-card.kan-held {
  position: absolute; width: 0; height: 0; margin: 0; padding: 0; border: 0;
  overflow: hidden; opacity: 0; pointer-events: none;
}
.crm .kan-card.kan-ghost {
  position: fixed; z-index: 9999; margin: 0; pointer-events: none; cursor: grabbing;
  transition: transform 140ms var(--ease-out), box-shadow 140ms var(--ease-out);
}
/* Nachzug 2 (#946, V3): tiefer Schatten — die Karte schwebt sichtbar ueber dem Brett. */
.crm .kan-card.kan-ghost.is-lifted {
  transform: rotate(-2deg) scale(1.02);
  box-shadow: 0 1.375rem 2.75rem -0.75rem rgba(15, 23, 38, .38), 0 0.5rem 1rem -0.375rem rgba(15, 23, 38, .2);
}
.crm .kan-slot {
  margin: 0; border-color: var(--ad-blue); border-radius: var(--r-md); background: var(--tint-blue);
}
.crm .kan-zone { border-radius: var(--r-md); background: var(--bg-surface); border-color: var(--border); color: var(--text-2); }
/* Nachzug 2 (#946, V3): grau in Ruhe, nur das aktuelle Ziel faerbt sich. */
.crm .kan-zone-won.is-hot { border-color: var(--ad-green-700); color: var(--ad-green-900); background: var(--tint-green); }
.crm .kan-zone-lost.is-hot { border-color: var(--ad-red-700); color: var(--ad-red-700); background: var(--tint-red); }
.crm .kan-zone-irrelevant.is-hot { border-color: var(--text-2); color: var(--text-1); background: var(--bg-hover, var(--tint-blue)); }
.crm .kan-zone.is-form { color: var(--text-1); background: var(--bg-surface); box-shadow: var(--shadow-3); border-radius: var(--r-md); }
@media (prefers-reduced-motion: reduce) {
  .crm .kan-card.kan-ghost.is-lifted { transform: rotate(-2deg); }
  .crm .kan-card.kan-ghost { transition: none; }
}

/* warn-card */
.crm .warn-card { border-color: rgba(255,152,104,.5); background: var(--tint-orange); }
.crm .warn-card .warn-box b { color: var(--text-1); }

/* PR1.638 (#937) — der blaue Dauer-Puls auf save-pulse ist entfallen (steht oben, einmalig). */

/* command palette */
/* BF-26 #416 — MUSS vor/mit der display:flex-Regel stehen: closeCommandPalette() setzt das
   hidden-Attribut, und ein explizites `display:flex` schlaegt das UA-`display:none` von
   [hidden]. Ohne diese Gegenregel waere die Palette nach dem Umzug in .crm dauerhaft sichtbar.
   Gleiches Muster wie `.crm .popover[hidden]` weiter unten. */
.crm .cmdk-overlay[hidden] { display: none; }
.crm .cmdk-overlay {
  position: fixed; inset: 0; z-index: 100;
  background: rgba(15,20,30,.45);
  display: flex; align-items: flex-start; justify-content: center;
  padding-top: 12vh;
  animation: fadeIn var(--mo-fade) var(--ease-out);
}
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes fadeOut { from { opacity: 1; } to { opacity: 0; } }
.crm .cmdk {
  width: min(640px, 92vw);
  background: var(--bg-surface);
  border: 1px solid var(--border-strong);
  border-radius: 12px;
  box-shadow: 0 24px 60px rgba(0,0,0,.28), 0 2px 4px rgba(0,0,0,.06);
  overflow: hidden;
  animation: cmdkIn var(--mo-pop-in) var(--ease-out);
}
@keyframes cmdkIn { from { transform: translateY(-12px) scale(.98); opacity: 0; } to { transform: none; opacity: 1; } }
.crm .cmdk-search { display: flex; align-items: center; gap: 10px; padding: 14px 16px; border-bottom: 1px solid var(--border); }
.crm .cmdk-search input { flex: 1; border: none; outline: none; background: transparent; font: inherit; font-size: var(--fs-body); color: var(--text-1); }
.crm .cmdk-search kbd { font-family: var(--f-mono); font-variant-numeric: tabular-nums; font-size: var(--fs-meta); padding: 2px 6px; background: var(--bg-surface-3); border: 1px solid var(--border); border-radius: var(--r-xs); color: var(--text-2); }
.crm .cmdk-list { max-height: min(34rem, 60vh); overflow-y: auto; padding: 6px; }
.crm .cmdk-item {
  display: flex; align-items: center; gap: var(--s-3);
  width: 100%; padding: 10px 12px; border-radius: 7px;
  background: transparent; border: none; cursor: pointer;
  font: inherit; color: var(--text-1); text-align: left;
}
.crm .cmdk-item.is-hover,.crm .cmdk-item:hover { background: var(--bg-hover); }
/* BF-26 #416 — die Tastaturauswahl (↑↓) setzt `is-active`; ohne Regel bewegte sie sich
   unsichtbar. Deutlicher als der Hover-Ton, damit beides unterscheidbar bleibt. --tint-blue
   hat ein Dark-Pendant, also traegt die Auswahl in beiden Erscheinungsbildern. */
.crm .cmdk-item.is-active { background: var(--tint-blue); }
/* BF-26 #416 — Label nimmt den Rest, der Typ-Chip sitzt rechts. Vorher klebte der Chip am
   Text und sass in jeder Zeile auf einer anderen X-Position; sichtbar wurde das erst, seit
   die Regeln ueberhaupt greifen. Lange Opp-Namen kuerzen statt die Zeile zu sprengen. */
.crm .cmdk-item > span:first-child {
  flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.crm .cmdk-kind {
  margin-left: auto;
  font-family: var(--f-cond); font-size: var(--fs-label); font-weight: 500;
  padding: 3px 7px; background: var(--bg-surface-3);
  /* BF-26 #416 — --text-3 lag hier bei 4.40:1 (hell) / 4.31:1 (dunkel) gegen --bg-surface-3
     und riss damit WCAG AA; 10px/700 zaehlt nicht als Grosstext. --text-2: 6.57 / 6.07. */
  color: var(--text-2); border-radius: var(--r-xs); flex: 0 0 auto; min-width: 86px; text-align: center;
}
.crm .cmdk-empty { padding: 28px 12px; text-align: center; color: var(--text-3); font-size: var(--fs-body); }
.crm .cmdk-foot { padding: 10px 16px; border-top: 1px solid var(--border); font-size: var(--fs-meta); color: var(--text-3); display: flex; gap: 14px; align-items: center; background: var(--bg-surface-2); }
.crm .cmdk-foot kbd { font-family: var(--f-mono); font-variant-numeric: tabular-nums; padding: 1px 5px; background: var(--bg-surface); border: 1px solid var(--border); border-radius: 3px; }

/* PR1.645 (#944) — Palette: Lupe vor dem Feld, kein Kasten um die Eingabe (V1). Der Fokus der
   Eingabe zeigt sich an der Suchzeile (Unterkante in --focus) statt als Ring um den Text. */
.crm .cmdk-search input:focus-visible { outline: none; }
.crm .cmdk-search:focus-within { border-bottom-color: var(--focus); }
.crm .cmdk[tabindex="-1"]:focus { outline: none; }
.crm .cmdk-lupe { display: inline-flex; flex: none; color: var(--text-2); }
.crm .cmdk-lupe .ic { width: 1rem; height: 1rem; }
/* Suchraum-Chip (V1): blau getönte Pille */
.crm .cmdk-scope { flex: none; font-size: var(--fs-meta); font-weight: 600; padding: 0.2rem 0.6rem; border-radius: 62rem; color: var(--ad-blue); background: var(--tint-blue); white-space: nowrap; }
/* Abschnitte, Trefferzeilen mit Logo und Unterzeile, Aktionszeilen (keine Bewegung). */
.crm .cmdk-gruppe { padding: 0.75rem 0.75rem 0.25rem; font-size: var(--fs-label); font-weight: 600; color: var(--text-2); }
.crm .cmdk-item--reich { gap: var(--s-3); padding: 0.5rem 0.75rem; }
.crm .cmdk-item.cmdk-item--reich > span.cmdk-zeichen {
  flex: none; width: 2.25rem; height: 2.25rem; display: inline-flex; align-items: center; justify-content: center;
  overflow: visible; border-radius: 0.5rem; color: var(--text-2); background: var(--bg-surface-3);
}
.crm .cmdk-item.cmdk-item--reich > span.cmdk-zeichen--logo { background: var(--bg-surface); border: thin solid var(--border); }
/* Nachzug 06.11.2026 — Mitarbeiter-Treffer: rundes Foto (ohne Foto Silhouette) statt Symbol. */
.crm .cmdk-item.cmdk-item--reich > span.cmdk-zeichen--foto { background: transparent; }
.crm .cmdk-zeichen .ic { width: 1.125rem; height: 1.125rem; }
.crm .cmdk-text { display: flex; flex-direction: column; flex: 1; min-width: 0; line-height: 1.3; }
.crm .cmdk-titel, .crm .cmdk-unter { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.crm .cmdk-titel { color: var(--text-1); }
.crm .cmdk-unter { font-size: var(--fs-meta); color: var(--text-2); }
.crm .cmdk-treffer { font-weight: 600; color: var(--info); }
.crm .cmdk-frage { color: var(--text-2); }
.crm .cmdk-rechts { display: inline-flex; align-items: center; gap: 0.375rem; flex: none; margin-left: auto; font-size: var(--fs-meta); color: var(--text-2); }
.crm .cmdk-rechts kbd, .crm .cmdk-hilfe-tasten kbd { font-family: var(--f-mono); font-variant-numeric: tabular-nums; padding: 1px 0.375rem; background: var(--bg-surface); border: thin solid var(--border); border-radius: 0.25rem; color: var(--text-2); }
.crm .cmdk-rechts kbd svg, .crm .cmdk-foot kbd svg { width: 0.75rem; height: 0.75rem; vertical-align: -0.125rem; }
.crm .cmdk-foot { flex-wrap: wrap; }
.crm .cmdk-foot > span:last-child:not(:first-child) { margin-left: auto; }
/* Kürzelhilfe: kleines Fenster in derselben Hülle. */
.crm .cmdk-hilfe-titel { flex: 1; font-weight: 600; color: var(--text-1); }
.crm .cmdk-hilfe-zeile { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); padding: 0.4375rem 0.75rem; color: var(--text-1); }
.crm .cmdk-hilfe-tasten { display: inline-flex; gap: 0.25rem; flex: none; }
/* Die Palette tritt hinter der Kürzelhilfe zurück, damit ihre Liste nicht unter dem kleinen Fenster hervorschaut. */
.crm .cmdk-overlay.cmdk-unter-hilfe { visibility: hidden; }

/* drawer */
.crm .drawer-veil { position: fixed; inset: 0; background: rgba(15,20,30,.32); z-index: 80; animation: fadeIn var(--mo-fade) var(--ease-out); }
.crm .drawer-veil.mo-exit { animation: fadeOut var(--mo-exit-ms, var(--mo-panel-out)) var(--ease-in) both; pointer-events: none; }
.crm .drawer {
  position: fixed; top: 0; right: 0; bottom: 0;
  width: min(480px, 92vw);
  background: var(--bg-surface);
  border-left: 1px solid var(--border-strong);
  box-shadow: -16px 0 40px rgba(0,0,0,.18);
  z-index: 81;
  display: flex; flex-direction: column;
  animation: drawerIn var(--mo-panel-in) var(--ease-drawer);
}
@keyframes drawerIn { from { transform: translateX(40px); opacity: 0; } to { transform: none; opacity: 1; } }
.crm .drawer.mo-exit { animation: drawerOut var(--mo-exit-ms, var(--mo-panel-out)) var(--ease-in) both; pointer-events: none; }
@keyframes drawerOut { from { transform: none; opacity: 1; } to { transform: translateX(40px); opacity: 0; } }
.crm .drawer-head { padding: 20px 22px 16px; border-bottom: 1px solid var(--border); display: flex; align-items: flex-start; gap: var(--s-3); }
.crm .drawer-head .icon-btn { margin-left: auto; }
.crm .drawer-body { flex: 1; overflow-y: auto; padding: 18px 22px; display: flex; flex-direction: column; gap: 14px; }
.crm .drawer-foot { padding: 14px 22px; border-top: 1px solid var(--border); display: flex; gap: 10px; justify-content: flex-end; background: var(--bg-surface-2); }

/* PR1.405 #635 — .lineage-step/.ls-* (Schritte im KI-Herkunfts-Drawer der Opportunity) entfernt: der Drawer ist weg. */

/* modal */
.crm .modal-veil {
  position: fixed; inset: 0; z-index: 90;
  background: rgba(15,20,30,.42);
  display: flex; align-items: center; justify-content: center;
  padding: 24px;
  animation: fadeIn var(--mo-fade) var(--ease-out);
}
.crm .modal-veil.mo-exit { animation: fadeOut var(--mo-exit-ms, var(--mo-panel-out)) var(--ease-in) both; pointer-events: none; }
.crm .modal {
  width: min(820px, 96vw); max-height: 86vh;
  background: var(--bg-surface);
  border: 1px solid var(--border-strong); border-radius: 12px;
  box-shadow: 0 28px 64px rgba(0,0,0,.28);
  display: flex; flex-direction: column; overflow: hidden;
  animation: cmdkIn var(--mo-pop-in) var(--ease-out);
}
.crm .modal-head { padding: 20px 22px; border-bottom: 1px solid var(--border); display: flex; align-items: flex-start; gap: var(--s-3); }
.crm .modal-head .icon-btn { margin-left: auto; }
.crm .modal-body { flex: 1; overflow-y: auto; }
.crm .modal-foot { padding: 14px 22px; border-top: 1px solid var(--border); display: flex; align-items: center; background: var(--bg-surface-2); }

/* toast
   PR1.637 (#936) — der Hinweis hängt im gemeinsamen Stapel `#toast-stack` an <body>,
   also AUSSERHALB von `.crm`; die alten `.crm .toast`-Regeln griffen deshalb nie. Das
   Gesicht hängt jetzt an der Ansicht (`html[data-ui="new"]`), Ort und Zeiten kommen vom
   Stapel in style.css (unten Mitte, ein 220 ms, aus 160 ms) — in beiden Ansichten gleich. */
/* PR1.711 (#1017) — helle Karte statt Tinten-Fläche: Kreis mit Zeichen | Titel, Erklärung,
   Handlungen als Textlinks | × oben rechts. Links ein 4-px-Farbstreifen nach Art. Dunkles
   Thema über die Dark-Tokens am Stapel (oben); der Streifen bleibt. */
/* Vorlage: ca. 15 px zwischen gestapelten Karten (klassisch bleibt 8 px aus style.css). */
html[data-ui="new"] body > #toast-stack { gap: var(--s-4); }
html[data-ui="new"] #toast-stack .toast {
  --toast-ton: var(--ad-green-700);
  display: grid; grid-template-columns: var(--s-6) minmax(0, 1fr) auto; column-gap: var(--s-3); row-gap: 0; align-items: start;
  padding: calc(var(--s-3) - var(--s-1) / 2) var(--s-2) calc(var(--s-3) - var(--s-1) / 2) var(--s-3);
  width: min(480px, calc(100vw - var(--s-8))); max-width: none;
  background: var(--bg-surface); color: var(--text-1);
  border: 1px solid var(--border); border-left: var(--s-1) solid var(--toast-ton);
  border-radius: var(--r-lg); box-shadow: 0 10px 28px rgba(11,26,43,.14);
  font-family: var(--f-sans); font-size: var(--fs-ui); font-weight: 400; line-height: 1.43; text-align: left;
  /* Ein-/Ausgang kommt vom Stapel (style.css, Tokens --mo-toast-in/-out aus PR1.636). */
}
html[data-ui="new"] #toast-stack .toast.info { --toast-ton: var(--ad-blue); }
html[data-ui="new"] #toast-stack .toast.warn,
html[data-ui="new"] #toast-stack .toast.warning { --toast-ton: var(--ad-orange-700); }
html[data-ui="new"] #toast-stack .toast.error { --toast-ton: var(--ad-red-700); }
html[data-ui="new"] #toast-stack .toast > svg { display: none; }
html[data-ui="new"] #toast-stack .toast-pip {
  grid-column: 1; grid-row: 1 / span 3;
  display: flex; align-items: center; justify-content: center;
  width: var(--s-6); height: var(--s-6); margin-top: calc(var(--s-1) / 2); border-radius: 50%;
  background: var(--toast-ton); color: white;
}
html[data-ui="new"] #toast-stack .toast-text { grid-column: 2; grid-row: 1; min-width: 0; color: var(--text-2); overflow-wrap: anywhere; }
html[data-ui="new"] #toast-stack .toast-text:not(:has(.toast-titel)),
html[data-ui="new"] #toast-stack .toast-titel { display: block; color: var(--text-1); font-size: var(--fs-body); font-weight: 600; line-height: 1.34; }
html[data-ui="new"] #toast-stack .toast-trenner { display: none; }
html[data-ui="new"] #toast-stack .toast-erklaerung { display: block; margin-top: 0; }
html[data-ui="new"] #toast-stack .toast-actions {
  grid-column: 2; grid-row: 2;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-start; gap: var(--s-1) var(--s-4);
  margin: var(--s-2) 0 0; flex-basis: auto;
}
html[data-ui="new"] #toast-stack .toast-action {
  padding: 0; border: 0; border-radius: var(--r-xs); background: none;
  color: var(--ad-blue-700); font-size: var(--fs-ui); font-weight: 600; line-height: 1.43; cursor: pointer;
}
html[data-ui="new"] #toast-stack .toast-action:hover { background: none; text-decoration: underline; text-underline-offset: .15em; }
html[data-ui="new"] #toast-stack .toast-action:focus-visible { outline: var(--focus-w, 2px) solid var(--focus); outline-offset: var(--s-1); }
html[data-ui="new"] #toast-stack .toast-close { display: none; }
html[data-ui="new"] #toast-stack .toast-kbd { color: var(--text-3); font-weight: 400; opacity: 1; }
html[data-ui="new"] #toast-stack .toast-details { grid-column: 2; grid-row: 3; margin-top: var(--s-2); color: var(--text-2); border-top-color: var(--border); }
html[data-ui="new"] #toast-stack .toast-x {
  grid-column: 3; grid-row: 1;
  display: inline-flex; align-items: center; justify-content: center;
  width: var(--s-6); height: var(--s-6); margin: calc(var(--s-1) * -1) 0 0 var(--s-1); padding: 0;
  border: 0; border-radius: var(--r-sm); background: none; color: var(--text-2); cursor: pointer;
}
html[data-ui="new"] #toast-stack .toast-x:hover { color: var(--text-1); background: var(--bg-hover); }
html[data-ui="new"] #toast-stack .toast-x:focus-visible { outline: var(--focus-w, 2px) solid var(--focus); outline-offset: 0; }
html[data-ui="new"][data-theme="dark"] #toast-stack .toast { box-shadow: 0 10px 28px rgba(0,0,0,.45); }
html[data-ui="new"][data-theme="dark"] #toast-stack .toast-action { color: var(--ad-blue-300); }

/* coachmarks */
.crm .coachmarks {
  position: fixed; bottom: 22px; right: 22px; z-index: 60;
  width: 320px;
  background: var(--ad-blue-900); color: white;
  border-radius: 12px;
  box-shadow: 0 16px 40px rgba(0,0,0,.28);
  padding: 16px 18px 14px;
  font-size: var(--fs-ui); line-height: 1.5;
  animation: drawerIn var(--mo-panel-in) var(--ease-drawer);
}
.crm .coachmarks .coach-head { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; font-family: var(--f-cond); font-size: var(--fs-body); }
.crm .coachmarks .coach-head .icon-btn { margin-left: auto; color: rgba(255,255,255,.7); border-color: rgba(255,255,255,.2); background: transparent; }
.crm .coachmarks ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.crm .coachmarks li { display: flex; gap: var(--s-2); color: rgba(255,255,255,.85); }
.crm .coachmarks li span:first-child { flex: 0 0 14px; color: var(--ad-orange); font-family: var(--f-cond); font-weight: 600; }
.crm .coachmarks b { color: white; font-weight: 600; }
.crm .coachmarks kbd { font-family: var(--f-mono); font-variant-numeric: tabular-nums; font-size: var(--fs-label); background: rgba(255,255,255,.12); padding: 1px 5px; border-radius: 3px; border: 1px solid rgba(255,255,255,.16); }
.crm .coach-toggle {
  position: fixed; bottom: 22px; right: 22px; z-index: 60;
  width: 42px; height: 42px; border-radius: 50%;
  background: var(--ad-blue-900); color: white;
  border: none; cursor: pointer;
  font-family: var(--f-cond); font-size: var(--fs-title); font-weight: 600;
  box-shadow: 0 10px 26px rgba(0,0,0,.24);
}

/* dq tone */
.crm .dq.ok .val { color: var(--ad-green-700); }

/* ===================================================================
   FLOW-MODULES (heat / nkv / kb-graph / matrix / conf)
   =================================================================== */
/* flow-modules.css — styles for the added routes + dialogs */

/* shared bits */
.crm .card-hd { padding:12px 16px; border-bottom:1px solid var(--border); display:flex; align-items:center; }
.crm .card-hd h3 { margin:0; font-family:var(--f-cond); font-size:var(--fs-body); }
.crm .card-hd .note { margin-left:auto; }
.crm .kan-empty { padding:18px 8px; text-align:center; color:var(--text-3); font-size:var(--fs-ui); border:1px dashed var(--border); border-radius: var(--r-md); }
.crm .tb-inline-search { display:flex; align-items:center; gap: var(--s-2); padding:6px 12px; background:var(--bg-surface-2); border:1px solid var(--border); border-radius: var(--r-md); color:var(--text-3); }
.crm .tb-inline-search input { border:0; background:transparent; outline:none; font:inherit; font-size:var(--fs-body); color:var(--text-1); width:200px; }

/* NKV heatmap */
.crm .heat { height:8px; background:var(--bg-surface-3); border-radius:999px; overflow:hidden; }
.crm .heat > span { display:block; height:100%; border-radius:999px; }
.crm .heat-ok > span { background:var(--ad-green); }
.crm .heat-mid > span { background:var(--ad-orange); }
.crm .heat-high > span { background:var(--ad-red); }
.crm .nkv-chip { font-family:var(--f-mono); font-variant-numeric: tabular-nums; font-size:var(--fs-meta); font-weight:500; padding:2px 8px; border-radius:999px; }
.crm .nkv-ok { background:var(--tint-green); color:var(--ad-green-700); }
.crm .nkv-mid { background:var(--tint-warn); color:var(--ad-orange-700); }
.crm .nkv-high { background:var(--tint-red); color:var(--ad-red-700); }
/* PR1.641 (#940) — Waermestufen: EINE Farblogik fuer NKV-Matrix, Wochenzellen, Pivots und die
   CC-Wochenzellen im Einsatzplan (Gehirn: waerme-stufen.js). Fuenf Stufen des Anteils nicht
   verrechnet bzw. frei plus „ueber" (Ocker, schraffiert, nie gruen). Die Schrift steht in der
   dunklen Farbe ihrer Stufe (hell) bzw. in der hellen (dunkel); gerechnet >= 4,5:1 je Paar. */
.crm { --waerme-1-bg:rgb(232 246 207); --waerme-1-ink:rgb(47 90 0);
  --waerme-2-bg:rgb(251 241 204); --waerme-2-ink:rgb(94 70 0);
  --waerme-3-bg:rgb(252 228 229); --waerme-3-ink:rgb(122 34 39);
  --waerme-4-bg:rgb(247 185 188); --waerme-4-ink:rgb(106 26 31);
  --waerme-5-bg:rgb(229 102 108); --waerme-5-ink:rgb(61 11 14);
  --waerme-ueber-bg:rgb(239 217 142); --waerme-ueber-ink:rgb(79 53 0); --waerme-ueber-strich:rgba(120, 80, 0, .30); }
.crm.dark, html[data-theme="dark"] .crm {
  --waerme-1-bg:rgb(34 54 15); --waerme-1-ink:rgb(191 229 138);
  --waerme-2-bg:rgb(58 51 18); --waerme-2-ink:rgb(235 218 140);
  --waerme-3-bg:rgb(74 36 39); --waerme-3-ink:rgb(244 184 187);
  --waerme-4-bg:rgb(106 42 47); --waerme-4-ink:rgb(251 208 210);
  --waerme-5-bg:rgb(168 52 58); --waerme-5-ink:rgb(255 255 255);
  --waerme-ueber-bg:rgb(74 58 15); --waerme-ueber-ink:rgb(243 220 142); --waerme-ueber-strich:rgba(243, 220, 142, .24); }
.crm .nkv-w1 { background:var(--waerme-1-bg); color:var(--waerme-1-ink); }
.crm .nkv-w2 { background:var(--waerme-2-bg); color:var(--waerme-2-ink); }
.crm .nkv-w3 { background:var(--waerme-3-bg); color:var(--waerme-3-ink); }
.crm .nkv-w4 { background:var(--waerme-4-bg); color:var(--waerme-4-ink); }
.crm .nkv-w5 { background:var(--waerme-5-bg); color:var(--waerme-5-ink); }
.crm .nkv-leer { background:none; color:var(--text-2); }

/* PR1.253 (#447) — Kapazitäts-Angabe in den Staffing-Auswahlpunkten.
   `--warning` schlug hier im hellen Zustand mit dem Grundton der klassischen Datei durch
   (#f59e0b auf weiss = 2,14:1). Deshalb eigene Belegung: auf hellem Grund die dunkle
   Orangestufe, auf dunklem der Grundton — dieselbe Zweiteilung wie bei `.nkv-high` und
   `.conf-lo` nebenan. Kein Gruen fuer „frei": Gruen ist im Redesign keine Textfarbe. */
.crm .cap-tag-ok { color:var(--text-2); }
.crm .cap-tag-none { color:var(--ad-orange-900); }
.crm .cap-tag-unknown { color:var(--text-3); }
.crm.dark .cap-tag-none , html[data-theme="dark"] .crm .cap-tag-none { color:var(--ad-orange); }
.crm.dark .nkv-high , html[data-theme="dark"] .crm .nkv-high { color:var(--ad-red-300); }
.crm .pivot-row { display:flex; align-items:center; gap:10px; padding:7px 0; border-bottom:1px solid var(--border); font-size:var(--fs-ui); }
.crm .pivot-row:last-child { border-bottom:0; }
.crm .pivot-row .pv-label { flex:1; min-width:0; }
.crm .pivot-row .num { color:var(--text-2); }

/* employee */
.crm .hs-mini { font-family:var(--f-mono); font-variant-numeric: tabular-nums; font-size:var(--fs-ui); color:var(--text-2); }
.crm .hs-mini b { color:var(--text-1); }
.crm .cert-chip { display:flex; flex-direction:column; padding:8px 12px; background:var(--bg-surface-2); border:1px solid var(--border); border-radius: var(--r-md); color:var(--text-1); }
/* PR1.279 — color ausdruecklich: die Legacy-Regel .cert-chip setzt --success als Textfarbe
   (gruener Chip auf gruenem Tint). Hier ist der Grund neutral, die geerbte gruene Schrift
   kam auf 2.39:1. Mit --text-1 sind es 16.90:1. Vgl. Konvention 21: Gruen ist im Redesign
   keine Textfarbe. */
.crm .cert-chip b { font-size:var(--fs-ui); }
.crm .cert-chip small { font-size:var(--fs-meta); color:var(--text-3); }
/* PR1.442 (#684) — Zertifikate als Badge-Karten, gruppiert nach Aussteller (Kompass R2_08).
   Markup geteilt mit der klassischen Shell (components/cert-badges.js); nur Tokens.
   Herstellerlogos sind oft dunkle Grafiken — sie stehen deshalb in beiden Themes auf Weiß. */
.crm .cert-badges { display:flex; flex-direction:column; gap:var(--s-4); }
.crm .cert-group-h { display:flex; align-items:center; gap:var(--s-2); margin-bottom:var(--s-2); font-weight:500; font-size:var(--fs-body); color:var(--text-1); }
.crm .cert-issuer-logo { height:1.375rem; width:auto; max-width:4rem; object-fit:contain; padding:.125rem var(--s-1); background:white; border-radius:var(--r-sm); }
.crm .cert-issuer-mono { display:inline-flex; align-items:center; justify-content:center; min-width:1.375rem; height:1.375rem; padding:0 var(--s-1); border-radius:var(--r-sm); background:var(--bg-surface-2); color:var(--text-2); font-size:var(--fs-label); font-weight:500; }
.crm .cert-issuer-count { color:var(--text-3); font-weight:500; font-variant-numeric:tabular-nums; }
.crm .cert-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(14.5rem, 1fr)); gap:var(--s-2); }
.crm .cert-card { display:flex; align-items:center; gap:var(--s-3); min-height:5rem; padding:var(--s-3); border:0.0625rem solid var(--border); border-radius:var(--r-md); background:var(--bg-surface); }
.crm .cert-badge { flex:0 0 3.5rem; width:3.5rem; height:3.5rem; display:inline-flex; align-items:center; justify-content:center; }
.crm .cert-badge-img { width:3.5rem; height:3.5rem; object-fit:contain; }
.crm .cert-badge--logo { background:white; border:0.0625rem solid var(--border); border-radius:var(--r-md); }
.crm .cert-badge-logo { max-width:2.75rem; max-height:2rem; object-fit:contain; }
.crm .cert-badge--mono { border-radius:var(--r-md); background:var(--bg-surface-2); color:var(--text-2); font-size:var(--fs-meta); font-weight:500; letter-spacing:.02em; }
.crm .cert-body { min-width:0; display:flex; flex-direction:column; gap:.1875rem; }
.crm .cert-name { font-size:var(--fs-ui); font-weight:500; line-height:1.3; color:var(--text-1); overflow-wrap:anywhere; }
.crm .cert-status { display:inline-flex; align-items:center; gap:var(--s-1); font-size:var(--fs-meta); color:var(--text-3); }
.crm .cert-status--valid { color:var(--ad-green-900); }
.crm .cert-status--expiring { color:var(--ocker-text); }
.crm .cert-status--expired { color:var(--ad-red-700); }
.crm.dark .cert-status--valid, html[data-theme="dark"] .crm .cert-status--valid { color:var(--ad-green); }
.crm.dark .cert-status--expiring, html[data-theme="dark"] .crm .cert-status--expiring { color:var(--ocker-text); }
.crm.dark .cert-status--expired, html[data-theme="dark"] .crm .cert-status--expired { color:var(--ad-red-300); }
.crm .cert-sub { font-size:var(--fs-label); color:var(--text-3); }
.crm .cert-card--retired .cert-badge-img, .crm .cert-card--retired .cert-badge-logo { filter:grayscale(1); opacity:.55; }
.crm .cert-more { border:0.0625rem solid var(--border); border-radius:var(--r-md); padding:var(--s-2) var(--s-3); }
.crm .cert-more > summary { cursor:pointer; font-size:var(--fs-meta); color:var(--text-2); }
.crm .cert-more[open] > summary { margin-bottom:var(--s-2); }
.crm .cert-unmatched-hint { margin:0 0 var(--s-1); font-size:var(--fs-meta); color:var(--text-3); }
.crm .cert-unmatched ul { margin:0; padding-left:var(--s-4); font-size:var(--fs-meta); color:var(--text-2); }
.crm .cert-empty { display:flex; align-items:center; justify-content:space-between; gap:var(--s-3); padding:var(--s-3); border:0.0625rem dashed var(--border); border-radius:var(--r-md); }
.crm .cert-empty-text { font-size:var(--fs-ui); color:var(--text-3); }
/* PR1.446 (#688) — Credly-Abgleich: Statuswort, Vorschlagskarten, Seitenkarten.
   Markup geteilt mit der klassischen Shell (components/credential-cards.js); nur Tokens.
   Die Seitenspalte bricht ohne Media-Query unter die Badges, wenn der Platz fehlt. */
.crm .cert-status-word { font-weight:600; }
.crm .cert-status-detail { color:var(--text-3); white-space:nowrap; }
.crm .cert-status:has(.cert-status-word) { flex-wrap:wrap; column-gap:var(--s-1); row-gap:0; }
.crm .cert-status--revoked { color:var(--ad-red-700); }
.crm .cert-status--not-found, .crm .cert-status--unverifiable { color:var(--text-2); }
.crm.dark .cert-status--revoked, html[data-theme="dark"] .crm .cert-status--revoked { color:var(--ad-red-300); }
.crm .cert-verify-link, .crm .cert-cred-link { color:var(--ad-blue-700); text-decoration:underline; text-underline-offset:.125rem; }
.crm .cert-cred-link { display:inline-flex; vertical-align:middle; margin-left:var(--s-1); text-decoration:none; }
.crm.dark .cert-verify-link, html[data-theme="dark"] .crm .cert-verify-link, .crm.dark .cert-cred-link, html[data-theme="dark"] .crm .cert-cred-link { color:var(--text-1); }
.crm .cert-card--suggested { border-style:dashed; background:transparent; }
.crm .cert-suggest-all { margin-left:auto; }
.crm .cert-suggest-act { margin-top:var(--s-1); }
.crm .cred-layout { display:flex; flex-wrap:wrap; gap:var(--s-4); align-items:flex-start; }
.crm .cred-main { flex:999 1 26rem; min-width:0; display:flex; flex-direction:column; gap:var(--s-4); }
.crm .cred-side { flex:1 1 16rem; min-width:0; display:flex; flex-direction:column; gap:var(--s-3); }
.crm .cred-card { display:flex; flex-direction:column; gap:var(--s-2); padding:var(--s-3) var(--s-4); border:0.0625rem solid var(--border); border-radius:var(--r-md); background:var(--bg-surface); }
.crm .cred-card-h { display:flex; align-items:center; justify-content:space-between; gap:var(--s-2); }
.crm .cred-card-title { font-size:var(--fs-ui); font-weight:600; color:var(--text-1); }
.crm .cred-flag { display:inline-flex; align-items:center; gap:var(--s-1); font-size:var(--fs-meta); font-weight:500; }
.crm .cred-flag--ok, .crm .cred-ok, .crm .cred-sum--valid .cred-row-k { color:var(--ad-green-900); }
.crm .cred-flag--warn, .crm .cred-sum--expiring .cred-row-k, .crm .cred-note { color:var(--ocker-text); }
.crm .cred-sum--expired .cred-row-k, .crm .cred-sum--revoked .cred-row-k, .crm .cred-live--error { color:var(--ad-red-700); }
.crm.dark .cred-flag--ok, html[data-theme="dark"] .crm .cred-flag--ok, .crm.dark .cred-ok, html[data-theme="dark"] .crm .cred-ok,
.crm.dark .cred-sum--valid .cred-row-k, html[data-theme="dark"] .crm .cred-sum--valid .cred-row-k { color:var(--ad-green); }
.crm.dark .cred-flag--warn, html[data-theme="dark"] .crm .cred-flag--warn, .crm.dark .cred-note, html[data-theme="dark"] .crm .cred-note,
.crm.dark .cred-sum--expiring .cred-row-k, html[data-theme="dark"] .crm .cred-sum--expiring .cred-row-k { color:var(--ocker-text); }
.crm.dark .cred-sum--expired .cred-row-k, html[data-theme="dark"] .crm .cred-sum--expired .cred-row-k,
.crm.dark .cred-sum--revoked .cred-row-k, html[data-theme="dark"] .crm .cred-sum--revoked .cred-row-k,
.crm.dark .cred-live--error, html[data-theme="dark"] .crm .cred-live--error { color:var(--ad-red-300); }
.crm .cred-flag--muted { color:var(--text-3); font-weight:500; }
.crm .cred-link, .crm a.cred-src-name { color:var(--ad-blue-700); font-size:var(--fs-ui); overflow-wrap:anywhere; }
.crm.dark .cred-link, html[data-theme="dark"] .crm .cred-link, .crm.dark a.cred-src-name, html[data-theme="dark"] .crm a.cred-src-name { color:var(--text-1); text-decoration:underline; text-underline-offset:.125rem; }
.crm .cred-row { display:flex; justify-content:space-between; gap:var(--s-3); font-size:var(--fs-meta); }
.crm .cred-row-k { color:var(--text-2); display:inline-flex; align-items:center; gap:var(--s-1); }
.crm .cred-row-v { color:var(--text-1); text-align:right; }
.crm .cred-num { font-variant-numeric:tabular-nums; }
.crm .cred-text, .crm .cred-note { margin:0; font-size:var(--fs-meta); line-height:1.45; color:var(--text-2); }
.crm .cred-note { display:flex; gap:var(--s-1); align-items:flex-start; }
.crm .cred-actions { display:flex; flex-wrap:wrap; gap:var(--s-2); align-items:center; }
.crm .cred-off { align-self:flex-start; padding:.125rem 0; border:0; background:none; color:var(--text-3); font-size:var(--fs-meta); text-decoration:underline; text-underline-offset:.125rem; cursor:pointer; }
.crm .cred-off:hover { color:var(--text-1); }
.crm .cred-cands { margin:0; padding:0; list-style:none; display:flex; flex-direction:column; gap:var(--s-2); }
.crm .cred-cand { display:flex; flex-wrap:wrap; align-items:center; gap:var(--s-1) var(--s-2); }
.crm .cred-cand-meta { font-size:var(--fs-label); color:var(--text-3); flex:1 1 auto; }
.crm .cred-src { display:flex; gap:var(--s-3); align-items:flex-start; padding-top:var(--s-2); border-top:0.0625rem solid var(--border); }
.crm .cred-card-h + .cred-src { border-top:0; padding-top:0; }
.crm .cred-src-mono { flex:0 0 1.75rem; height:1.75rem; display:inline-flex; align-items:center; justify-content:center; border-radius:var(--r-sm); background:var(--bg-surface-2); color:var(--text-2); font-size:var(--fs-label); font-weight:500; }
.crm .cred-src-body { min-width:0; display:flex; flex-direction:column; gap:.125rem; }
.crm .cred-src-name { font-size:var(--fs-ui); font-weight:500; color:var(--text-1); }
.crm .cred-src-text { margin:0; font-size:var(--fs-meta); line-height:1.4; color:var(--text-2); }
.crm .cred-link-form { display:flex; flex-direction:column; gap:var(--s-1); }
.crm .cred-link-label { font-size:var(--fs-meta); color:var(--text-2); }
.crm .cred-link-row { display:flex; gap:var(--s-2); }
.crm .cred-link-row .form-control { flex:1 1 auto; min-width:0; }
.crm .cred-live { margin:0; font-size:var(--fs-meta); color:var(--text-3); }
.crm .cred-live:empty { display:none; }
.crm .cred-live--error { display:flex; gap:var(--s-1); }
.crm .team-chip { display:inline-flex; align-items:center; gap:6px; padding:5px 10px 5px 6px; background:var(--bg-surface-2); border:1px solid var(--border); border-radius:999px; font-size:var(--fs-ui); }

.crm .hd { width:9px; height:9px; border-radius:50%; display:inline-block; }
.crm .hd-lg { width:12px; height:12px; }

/* KB graph */
.crm .kb-node { position:absolute; border-radius:50%; color:white; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; box-shadow:var(--shadow-2); cursor:pointer; transition:transform .18s var(--ease-out,cubic-bezier(.23,1,.32,1)); animation:kbFloat 4s ease-in-out infinite; }
@media (hover: hover) and (pointer: fine) { .crm .kb-node:hover { transform:scale(1.08); z-index:3; } }
.crm .kb-node b { font-size:var(--fs-meta); font-family:var(--f-cond); line-height:1.1; }
.crm .kb-node small { font-size:var(--fs-label); opacity:.85; }
@keyframes kbFloat { 0%,100%{ transform:translateY(0);} 50%{ transform:translateY(-4px);} }

/* admin matrix */
.crm .tbl.matrix td,.crm .tbl.matrix th { border-right:1px solid var(--border); }
.crm .perm.on { color:var(--ad-green-700); font-weight:600; }
.crm .perm.off { color:var(--text-3); }

/* extraction review */
.crm .kb-src-banner { display:flex; align-items:center; gap:10px; padding:10px 22px; background:var(--tint-blue); border-bottom:1px solid var(--border); font-size:var(--fs-ui); }
.crm .kb-src-banner .muted { color:var(--text-2); }
.crm .kb-pill,.crm .kb-src-banner .kb-pill { font-family:var(--f-cond); font-size:var(--fs-label); font-weight:500; padding:2px 8px; background:var(--ad-blue); color:#fff; border-radius: var(--r-xs); }
.crm .conf { font-family:var(--f-mono); font-variant-numeric: tabular-nums; font-size:var(--fs-meta); font-weight:500; padding:2px 8px; border-radius:999px; }
.crm .conf-hi { background:var(--tint-green); color:var(--ad-green-700); }
.crm .conf-mid { background:var(--tint-warn); color:var(--ad-orange-900); }  /* PR1.279 — AA: 2.73->5.62:1; -700 ist auf dem Tint zu hell (siehe Kommentar an --ad-orange-700), .bdg-warn nutzt -900 bereits */
/* Dark braucht die Gegenrichtung: --ad-orange-900 ist dort eine dunkle Schrift auf dunklem
   Tint (1.51:1). Dieselbe Loesung wie bei .bdg-warn eine Datei weiter oben — die helle
   Markenstufe. Ohne diesen Zweig repariert man Hell und zerstoert Dunkel. */
.crm.dark .conf-mid , html[data-theme="dark"] .crm .conf-mid { color: var(--ad-orange); }
.crm .conf-lo { background:var(--tint-red); color:var(--ad-red-700); }
.crm.dark .conf-lo , html[data-theme="dark"] .crm .conf-lo { color:var(--ad-red-300); }
/* PR1.128 (KI-only) F: „nicht bewertet" — neutraler Ton, KEIN Ampel-Rot/Grün. */
.crm .conf-unrated { background:rgba(120,130,140,.14); color:var(--text-3,#64748b); }
.crm .decide { display:inline-flex; gap:6px; }
.crm .dc-btn { font:inherit; font-size:var(--fs-meta); padding:4px 9px; border-radius:5px; border:1px solid var(--border); background:var(--bg-surface); color:var(--text-2); cursor:pointer; transition:background-color var(--t-fast),border-color var(--t-fast),color var(--t-fast),box-shadow var(--t-fast); }
.crm .dc-btn:hover { border-color:var(--border-strong); }
.crm .dc-btn.is-accept { background:var(--tint-green); color:var(--ad-green-700); border-color:rgba(118,200,0,.4); }
.crm .dc-btn.is-reject { background:var(--tint-red); color:var(--ad-red-700); border-color:rgba(229,72,77,.4); }
.crm.dark .dc-btn.is-reject , html[data-theme="dark"] .crm .dc-btn.is-reject { color:var(--ad-red-300); }
.crm .row-rejected td { opacity:.6; }
.crm .honesty-note { display:flex; align-items:flex-start; gap:10px; padding:10px 22px; font-size:var(--fs-ui); color:var(--text-2); background:var(--bg-surface-2); border-top:1px solid var(--border); }

/* score review */
.crm .score-lineage,.crm .convert-flow { display:flex; flex-direction:column; gap:10px; }
.crm .sl-step,.crm .cv-step { display:flex; align-items:center; gap: var(--s-3); padding:10px 12px; background:var(--bg-surface-2); border:1px solid var(--border); border-radius: var(--r-md); position:relative; }
.crm .sl-num,.crm .cv-num { flex:0 0 auto; width:24px; height:24px; border-radius:50%; background:var(--ad-violet); color:#fff; display:inline-flex; align-items:center; justify-content:center; font-family:var(--f-cond); font-weight:500; font-size:var(--fs-ui); }
.crm .cv-num { background:var(--ad-blue); }
.crm .sl-step b,.crm .cv-step b { font-size:var(--fs-body); display:block; }
.crm .sl-step small,.crm .cv-step small { font-size:var(--fs-meta); color:var(--text-2); }
.crm .cv-arrow { margin-left:auto; color:var(--text-3); }
.crm .cv-step:last-child .cv-arrow { display:none; }
.crm .score-range { width:100%; accent-color:var(--ad-violet); }

/* ===================================================================
   PR4.15 OVERRIDES — collision-reset über Legacy-Globals
   =================================================================== */
.crm .sidebar { background: transparent; border: 0; box-shadow: none;
  /* RD1.11 #334 — hier fehlte overflow. style.css Zeile 397 setzt auf `.sidebar` ein
     `overflow-y: auto` und blutete durch: die Seitenleiste bekam einen ZWEITEN
     Scrollbereich neben der Nav-Liste, und weil `auto` einen Clipping-Kontext aufspannt,
     waere das Benutzermenue (absolutes Popover im .sb-foot) an ihrem Rand abgeschnitten
     worden. Gescrollt wird ausschliesslich .sb-list.
     (Keine geschweiften Klammern in CSS-Kommentaren — sie brechen jede naive
     Regel-Regex, die nicht vorher Kommentare entfernt.) */
  overflow: visible; }

/* ===================================================================
   RD1.11 #334 — SICHTBARER TASTATUR-FOKUS
   ===================================================================
   Bis hier stand `:focus-visible` NULL Mal in dieser Datei (Legacy-style.css: 9x),
   dafuer dreimal `outline:none` ohne jeden Ersatz. Die Tastaturbedienung selbst ist
   gut gebaut — 11 `tabindex="0"`, 72 aria-Attribute — nur sehen konnte man den Fokus
   nicht. Das ist der Regelsatz, der Pruefung 1 aus RD1.10 gruen zieht.

   Bewusst EINE generische Regel statt Einzelregeln je Komponente: sie deckt Buttons,
   Eingaben, Links, `tr[tabindex]`, .kan-card, .emp-card, .th-sort und alles kuenftige
   `[role=button]` in einem Zug ab. Kommt dieser Block ans Dateiende, gewinnt er gegen
   die drei `outline:none` weiter oben (gleiche Spezifitaet, spaeter im Dokument) —
   ohne dass irgendwo `!important` noetig waere.

   Kanon uebernommen aus dem Legacy-Stylesheet (style.css:6734 u.a.):
   2px durchgezogen in der Akzentfarbe, 2px Abstand nach aussen.
   =================================================================== */
.crm :focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
  border-radius: inherit;
}

/* Buendige Zeilen und Karten: der Ring gehoert nach INNEN, sonst ueberlappt er die
   Nachbarzeile bzw. wird vom Scroll-Container abgeschnitten. */
.crm tbody tr:focus-visible ,
.crm .kan-card:focus-visible ,
.crm .emp-card:focus-visible {
  outline-offset: -2px;
}

/* Die drei Stellen, die den Fokus bisher ersatzlos unterdrueckt haben. Das `outline:none`
   dort bleibt richtig fuer den Maus-Fokus (die Felder tragen ihren eigenen Rahmen) —
   fehlte nur der Tastatur-Fall. Der Ring sitzt innen, weil beide Felder randlos in einer
   umgebenden Flaeche liegen. */
.crm .sb-search:focus-visible ,
.crm .tb-inline-search input:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: -2px;
}

/* Auf der dunklen Seitenleiste traegt --focus zu wenig Kontrast gegen das Marine-Blau
   (Light-Shell: dunkle Sidebar, heller Canvas). Dort ist Weiss der einzige Ton, der auf
   BEIDEN Themes sicher steht. */
.crm .sidebar :focus-visible {
  outline-color: var(--text-inv);
}

/* ===================================================================
   RD1.11 #334 — ERREICHBARE CHROME (Benutzermenue, Glocke, Nav-Schalter)
   ===================================================================
   Bis hier gab es im neuen Design keinen Abmelde-Weg: das Zahnrad im Benutzer-Chip war
   ein aria-hidden-Span ohne Handler, Glocke und E-Mail-Praeferenzen existierten nur in
   der Alt-Kopfzeile, die unter data-ui="new" ausgeblendet ist. Wer sich abmelden wollte,
   musste erst in die klassische Ansicht wechseln.

   Das Popover-Aussehen (.popover/.po-head/.po-item) lag bereits fertig in dieser Datei
   und wurde von keiner einzigen JS-Datei benutzt — es ist offensichtlich genau dafuer
   gedacht gewesen. Hier kommen nur die Oeffnungsrichtungen und die zwei neuen
   Bedienelemente dazu. */

/* Anker fuer das Benutzermenue (das Popover ist absolut positioniert). */
.crm .sb-foot { position: relative; }

/* .sb-cog war ein <span>, ist jetzt ein <button> — UA-Stile zuruecknehmen. */
.crm .sb-foot button.sb-cog { background: transparent; border: 0; font: inherit; padding: 0; }

/* Nach OBEN oeffnen: das Benutzermenue sitzt am unteren Rand der Seitenleiste. */
.crm .popover.po-up { top: auto; bottom: calc(100% + 6px); }
/* Rechtsbuendig: die Glocke sitzt rechts in der Topbar, ein linksbuendiges Panel liefe
   aus dem Fenster. */
.crm .popover.po-end { left: auto; right: 0; }
.crm .popover[hidden] { display: none; }

.crm .po-head { display: flex; align-items: center; justify-content: space-between; gap: var(--s-2); }
.crm .po-head-act {
  background: transparent; border: 0; font: inherit; font-size: var(--fs-label); font-weight: 500;
  color: var(--ad-blue); cursor: pointer; text-transform: none; letter-spacing: 0; padding: 0;
}
.crm .po-head-act:hover { text-decoration: underline; }
.crm .po-ic { width: 16px; flex: 0 0 auto; text-align: center; opacity: .8; }
.crm .po-item.is-danger { color: var(--ad-red-700); }
.crm .po-empty { padding: var(--s-3) 10px; font-size: var(--fs-ui); color: var(--text-3); text-align: center; }

/* Benachrichtigungs-Eintraege: mehrzeilig, deshalb oben ausgerichtet. */
.crm .po-notif { align-items: flex-start; }
.crm .po-notif-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.crm .po-notif-msg { font-size: var(--fs-ui); line-height: 1.35; white-space: normal; }
.crm .po-notif small { font-size: var(--fs-label); color: var(--text-3); }
.crm .po-notif.is-read { opacity: .55; }
.crm #crm-notif-panel,
.crm #crm-feedback-panel { min-width: 320px; max-width: 380px; max-height: 60vh; overflow-y: auto; }

/* PR1.402 (#632) — Feedback-Sprechblase in der Kopfleiste. Knopf und Zahl tragen
   .tb-bell/.tb-bell-badge (gleiche Optik wie die Glocke), das Fenster .popover.po-end.
   Hier nur, was die Sprechblase zusaetzlich hat: Reiter, Hinweis, Liste mit drei
   Zustaenden. Keine Animation ueber .popover hinaus — taeglich sichtbar (Konvention 22). */
.crm .fb-blase-tabs { display: flex; gap: var(--s-1); padding: var(--s-1); border-bottom: thin solid var(--border); }
.crm .fb-blase-tab {
  flex: 1; padding: var(--s-2) var(--s-3); border: 0; border-radius: var(--r-sm);
  background: transparent; font: inherit; font-size: var(--fs-meta); font-weight: 500;
  color: var(--text-2); cursor: pointer;
}
.crm .fb-blase-tab:hover { background: var(--bg-hover); }
.crm .fb-blase-tab[aria-selected="true"] { background: var(--bg-surface-2); color: var(--text-1); }
.crm .fb-blase-pane { padding: var(--s-3); display: flex; flex-direction: column; gap: var(--s-3); }
.crm .fb-blase-pane[hidden] { display: none; }
.crm .fb-blase-hinweis { margin: 0; font-size: var(--fs-meta); line-height: 1.45; color: var(--text-2); }
.crm .fb-blase-neu { align-self: flex-start; }
.crm .fb-blase-eintraege { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--s-1); }
.crm .fb-blase-eintrag {
  width: 100%; display: flex; flex-direction: column; gap: .125rem; text-align: left;
  padding: var(--s-2); border: 0; border-radius: var(--r-sm); background: transparent;
  font: inherit; color: var(--text-1); cursor: pointer;
}
.crm .fb-blase-eintrag:hover { background: var(--bg-hover); }
.crm .fb-blase-eintrag-kopf { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s-2); font-size: var(--fs-meta); }
.crm .fb-blase-eintrag small { font-size: var(--fs-label); color: var(--text-3); }
.crm .fb-blase-stand { flex: 0 0 auto; font-size: var(--fs-label); color: var(--text-2); }
.crm .fb-blase-leer { margin: 0; font-size: var(--fs-meta); color: var(--text-3); text-align: center; padding: var(--s-3) 0; }
.crm .fb-blase-fehler { display: flex; flex-direction: column; align-items: flex-start; gap: var(--s-2); font-size: var(--fs-meta); color: var(--text-2); }
.crm .fb-blase-fehler p { margin: 0; }
.crm .fb-blase-skelett { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--s-2); }
.crm .fb-blase-skelett li { height: 2.4em; border-radius: var(--r-sm); background: var(--bg-surface-2); }
.crm .fb-blase-alle {
  align-self: flex-start; background: transparent; border: 0; padding: 0;
  font: inherit; font-size: var(--fs-meta); font-weight: 500; color: var(--text-1); text-decoration: underline; cursor: pointer;
}
.crm .fb-blase-alle:hover { color: var(--text-2); }
.crm .tb-bell .fb-blase-badge[hidden] { display: none; }

/* PR1.402 (#632) — Einstellungen: zwei Abschnitte untereinander (Mail-Themen,
   Zugangsschluessel). Die Mail-Themen bringen ihr Markup aus views/email-preferences.js
   mit (geteilt mit der klassischen Ansicht); hier nur Rahmen und Abstaende. */
.crm .crm-settings-body {
  padding: var(--s-3) var(--s-5);
  display: flex; flex-direction: column; gap: var(--s-4);
}
.crm .crm-settings-body > .card { max-width: 47.5rem; }
.crm .crm-settings-h {
  margin: 0 0 var(--s-2); font-family: var(--f-cond); font-size: var(--fs-body);
}
.crm .crm-settings-hint { margin: 0; font-size: var(--fs-ui); color: var(--text-2); }

/* Einstellungen — Anleitung „Mit Claude Code verbinden“ (components/claude-anleitung.js). */
.crm .claude-anl-zwischen {
  margin: var(--s-4) 0 var(--s-2); font-family: var(--f-cond); font-size: var(--fs-ui);
  font-weight: 600; color: var(--text-1);
}
.crm .claude-anl-moeglich {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: var(--s-2);
}
.crm .claude-anl-moeglich-item {
  display: flex; flex-direction: column; gap: var(--s-1);
  padding: var(--s-2) var(--s-3); border: 0.0625rem solid var(--border); border-radius: var(--r-md);
  background: var(--bg-surface-2);
}
.crm .claude-anl-moeglich-t { font-size: var(--fs-ui); font-weight: 600; color: var(--text-1); }
.crm .claude-anl-moeglich-b { font-size: var(--fs-meta); color: var(--text-2); line-height: 1.5; }
.crm .claude-anl-schritte { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--s-3); }
.crm .claude-anl-schritt { display: flex; gap: var(--s-3); align-items: flex-start; }
.crm .claude-anl-nr {
  flex: none; display: inline-flex; align-items: center; justify-content: center;
  width: 1.6rem; height: 1.6rem; border-radius: 50%;
  background: var(--ad-blue); color: var(--text-inv); font-size: var(--fs-ui); font-weight: 600;
}
.crm .claude-anl-schritt-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: var(--s-2); }
.crm .claude-anl-schritt-h { margin: 0.15rem 0 0; font-size: var(--fs-body); font-weight: 600; color: var(--text-1); }
.crm .claude-anl-befehl { display: flex; gap: var(--s-2); align-items: center; flex-wrap: wrap; }
.crm .claude-anl-code {
  flex: 1; min-width: 0; padding: var(--s-2) var(--s-3); border-radius: var(--r-sm);
  background: var(--mono-bg); border: 0.0625rem solid var(--mono-border); color: var(--text-1);
  font-family: var(--f-mono); font-size: var(--fs-meta); font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere; user-select: all;
}
.crm .claude-anl-inline {
  padding: 0 0.3em; border-radius: var(--r-xs); background: var(--mono-bg);
  font-family: var(--f-mono); font-size: var(--fs-meta); font-variant-numeric: tabular-nums;
}
.crm .claude-anl-status { margin: 0; font-size: var(--fs-meta); color: var(--text-2); }
.crm .claude-anl-status:empty { display: none; }
.crm .claude-anl-sicher {
  margin-top: var(--s-4); padding: var(--s-2) var(--s-3); border-radius: var(--r-md);
  background: var(--tint-blue); color: var(--text-1); font-size: var(--fs-ui); line-height: 1.5;
}
.crm .claude-anl-sicher p { margin: 0; }
.crm .claude-anl-details { margin-top: var(--s-3); font-size: var(--fs-ui); color: var(--text-2); }
.crm .claude-anl-details summary { cursor: pointer; color: var(--text-1); font-weight: 600; }
.crm .claude-anl-liste { margin: var(--s-2) 0 0; padding-left: 1.2rem; display: flex; flex-direction: column; gap: var(--s-1); }

/* Glocke */
.crm .tb-bell-wrap { position: relative; flex: 0 0 auto; }
.crm .tb-bell {
  position: relative;
  width: 34px; height: 34px;
  display: inline-flex; align-items: center; justify-content: center;
  background: transparent; border: 1px solid transparent; border-radius: var(--r-md);
  font: inherit; font-size: var(--fs-body); color: var(--text-2); cursor: pointer;
  transition: background var(--t-fast), border-color var(--t-fast);
}
.crm .tb-bell:hover { background: var(--bg-hover); border-color: var(--border); }
.crm .tb-bell-badge {
  position: absolute; top: 1px; right: 1px;
  min-width: 15px; height: 15px; padding: 0 3px;
  display: inline-flex; align-items: center; justify-content: center;
  /* PR1.639 — neutraler Zaehler: dunkle Flaeche, heller Text. Orange bleibt fuer Warnungen. */
  background: var(--ad-blue-900); color: var(--text-inv);
  border-radius: 999px;
  font-family: var(--f-mono); font-variant-numeric: tabular-nums; font-size: var(--fs-label); font-weight: 500; line-height: 1;
}

/* Navigations-Schalter — erst unterhalb des Off-Canvas-Breakpoints sichtbar (s. u.). */
.crm .tb-nav-toggle {
  display: none;
  width: 34px; height: 34px;
  align-items: center; justify-content: center;
  background: transparent; border: 1px solid var(--border); border-radius: var(--r-md);
  font: inherit; font-size: var(--fs-body); color: var(--text-2); cursor: pointer;
  flex: 0 0 auto;
}
.crm .tb-nav-toggle:hover { background: var(--bg-hover); }

/* ===================================================================
   RD1.11 #334 — SEITENLEISTE AUF SCHMALEN FENSTERN
   PR1.683 (#982): ersetzt. Die 64-px-Symbolspalte (769–1024 px) und die 240-px-Schublade
   (bis 768 px) sind ein Verhalten geworden: unter 1024 px ist die Leiste eingeklappt, ☰ holt
   sie als Überlagerung (`.nav-hidden` / `.nav-open`, Regeln am Dateiende).
   ===================================================================
   Bis hier stand die Seitenleiste bei fixen 240px ohne einen einzigen Breakpoint. Das
   Inventar aus RD1.01 hat bei 860px gemessen: 26 Textknoten der Navigation ragten 41-107px
   heraus und wurden ab 250px vom Canvas ueberdeckt. Die drei vorhandenen Breakpoints
   betrafen ausschliesslich die Topbar.

   Zwei Stufen, als echter Bereich statt zweier ueberlappender Regeln:
     769-1024px  Icon-Spalte  — die Leiste bleibt stehen, nur die Beschriftungen weichen.
                                title/aria-label bleiben, die Bedienung verstummt also nicht.
     bis 768px   Off-Canvas   — die Leiste verlaesst den Rasterfluss und kommt als Overlay
                                ueber den Schalter in der Topbar. MIT Beschriftungen: im
                                Overlay ist Platz, und wer sie erst aufklappt, will lesen.
   =================================================================== */

@media (max-width: 768px) {
  /* Auf dieser Breite konkurrieren zu viele Knoepfe um die Topbar. Export und der
     Umschalter treten zurueck; Suche, Glocke, Konto und +Opportunity bleiben. */
  .crm .tb-classic { display: none; }

  /* PR1.336 #550 — Das Glocken-Panel haengt rechtsbuendig an der Glocke; die sitzt hier
     mitten in der Topbar, und das Panel ragte links ueber den Rand von .app-canvas
     (overflow:hidden) — abgeschnitten, nicht lesbar, nicht antippbar. Auf dieser Breite
     haengt es deshalb an der Topbar und nutzt deren volle Breite. */
  .crm .topbar { position: relative; }
  .crm .tb-bell-wrap { position: static; }
  .crm #crm-notif-panel {
    left: var(--s-2); right: var(--s-2);
    min-width: 0; max-width: none;
  }
}

/* ===================================================================
   PR1.683 (#982) — SEITENLEISTE SCHMAL (80 px), BEI BEDARF EINKLAPPBAR
   ===================================================================
   Standard: 80 px, Symbol (20 px) über kurzem Wort (10,5 px, halbfett), Zähler als Plakette am
   Symbol, Gruppen als feine Linien, Admin/Einstellungen unten beim Profil. Maße aus dem
   Prototyp (`body.nav-rail`), umgerechnet auf die rem-Basis der App (15 px, style.css). Eingeklappt (`.nav-hidden`): die Seite bekommt die volle Breite,
   ☰ in der Kopfleiste und der Rand holen die Leiste als Überlagerung (`.nav-open`) — sie
   verschiebt nichts. Bewegung nach Budget (--mo-panel-in/out, Schublade-Kurve); Esc (`.nav-sofort`)
   und „Bewegung reduzieren" ohne Bewegung. Nur Token und rem. */
.crm .app-shell { position: relative; }
/* style.css gibt `.sidebar` 240 px mit; die Spalte der Shell bestimmt die Breite. */
.crm .sidebar { position: relative; width: auto; }
.crm .sb-brand { justify-content: center; padding: 0.2667rem 0 0.8rem; }
.crm .sb-brand-text { display: none; }
.crm .sb-list { gap: 0.1333rem; }
.crm .sb-group + .sb-group,
.crm .sb-bottom .sb-group { margin-top: 0.4rem; padding-top: 0.4rem; border-top: 0.0667rem solid rgba(255,255,255,.14); }
.crm .sb-bottom .sb-group { margin-top: 0; margin-bottom: 0.4rem; }
.crm .sb-item {
  flex-direction: column; justify-content: flex-start; gap: 0.2rem;
  padding: 0.4667rem 0.1333rem 0.4rem; border-radius: var(--r-md);
  font-size: calc(11rem / 15); /* PR1.567 Ausnahme: Vorlage N (10,5 px → 11 px, vorhandene Größe der Skala) */ font-weight: 600; line-height: 1.15; text-align: center;
  position: relative;
}
.crm .sb-item .sb-ic { width: 1.3333rem; height: 1.3333rem; opacity: 0.9; }
.crm .sb-item .sb-ic svg { width: 1.3333rem; height: 1.3333rem; }
.crm .sb-kurz { display: block; max-width: 100%; }
.crm .sb-item .sb-cnt {
  position: absolute; top: 0.2rem; left: calc(50% + 0.4rem); margin: 0;
  min-width: 1rem; padding: 0 0.2667rem; text-align: center;
  font-size: 0.6rem; /* PR1.567 Ausnahme: Vorlage N (Plakette 9,5 px → 9 px, vorhandene Größe der Skala) */ font-weight: 700; line-height: 1rem;
  background: rgba(255,255,255,.16); color: var(--text-inv); opacity: 1;
}
.crm .shell-attio .sb-group + .sb-group,
.crm .shell-attio .sb-bottom .sb-group { border-top-color: var(--border); }
.crm .sb-bottom { display: flex; flex-direction: column; gap: 0.1333rem; }
.crm .sb-kbd {
  display: inline-flex; align-items: center; gap: 0.1333rem; margin-top: 0.0667rem;
  padding: 0 0.2667rem; border-radius: var(--r-xs);
  font-family: var(--f-mono); font-size: 0.6rem; /* PR1.567 Ausnahme: Vorlage N (Kürzel 9 px, vorhandene Größe der Skala) */ font-variant-numeric: tabular-nums; font-weight: 500; line-height: 1.0667rem;
  background: rgba(255,255,255,.10); color: rgba(255,255,255,.78);
}
.crm .sb-kbd .ic { width: 0.6667rem; height: 0.6667rem; }
.crm .sb-anheften { display: none; }
.crm .nav-hidden .sb-anheften { display: flex; }
.crm .nav-hidden .sb-einklappen { display: none; }
/* Profil: nur der Avatar; der vorhandene Knopf (Konto-Menü) liegt unsichtbar darüber. */
.crm .sb-foot { justify-content: center; padding: 0.6667rem 0 0.1333rem; }
.crm .sb-foot .sb-user { display: none; }
.crm .sb-foot button.sb-cog { position: absolute; inset: 0; width: auto; height: auto; margin: 0; border-radius: var(--r-md); color: transparent; }
.crm .sb-foot button.sb-cog > * { opacity: 0; }
/* „Listen": Menü rechts neben der Leiste, auf Höhe des Punkts (top setzt die Shell). */
.crm .sb-listen-menue { top: 0; left: 100%; margin-left: 0.4rem; min-width: 14rem; max-width: 18rem; z-index: 90; }
.crm .sb-listen-menue .sb-pill { width: 100%; color: var(--text-1); }
.crm .sb-listen-menue .sb-pill:hover { background: var(--bg-hover); color: var(--text-1); }

/* Eingeklappt: eine Spalte; die Leiste liegt als Überlagerung darüber, ohne die Seite zu verschieben. */
.crm .app-shell.nav-hidden { grid-template-columns: minmax(0, 1fr); }
.crm .nav-hidden .sidebar {
  position: absolute; top: 0; bottom: 0; left: 0; width: 5.3333rem; z-index: 80; box-sizing: border-box;
  background: var(--bg-shell); visibility: hidden; transform: translateX(-100%);
  transition: transform var(--mo-panel-out) var(--ease-in), visibility 0s linear var(--mo-panel-out);
}
.crm .nav-hidden.nav-open .sidebar {
  visibility: visible; transform: none; box-shadow: 0.9333rem 0 2.6667rem rgba(14, 23, 38, .3);
  transition: transform var(--mo-panel-in) var(--ease-drawer), visibility 0s;
}
.crm .nav-hidden.nav-sofort .sidebar { transition: none; }
.crm .nav-rand { display: none; }
.crm .nav-hidden:not(.nav-open) .nav-rand { display: block; position: absolute; top: 0; bottom: 0; left: 0; width: 0.4rem; z-index: 70; }
.crm .nav-hidden .tb-nav-toggle { display: inline-flex; border-color: transparent; }   /* Vorlage: nacktes ☰ */
/* Unter 1024 px ist festmachen unmöglich (kein Platz): „Anheften" entfällt dort. */
@media (max-width: 1023.98px) {
  .crm .nav-hidden .sb-anheften { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .crm .nav-hidden .sidebar,
  .crm .nav-hidden.nav-open .sidebar { transition: none; }
}

/* Unterebenen: Reiterzeile oben in der Seite, bündig mit dem Seitentitel (22 px wie .page-head). */
.crm #crm-subtabs { flex: 0 0 auto; margin: var(--s-2) 1.4667rem 0; }

/* RD1.11 #334 — KB-Graph: Graph links, Detail/Legende rechts. Stand als Inline-Raster
   in crm-kb-command-center.js und war damit nicht umbrechbar; unterhalb ~1024px nahm die
   starre 300px-Spalte dem Graphen die Flaeche. Diese View ist zugleich die einzige, die
   min-height:0 von Anfang an richtig gesetzt hatte — sie funktionierte trotzdem nicht,
   weil ihr Elternteil #crm-content bis RD1.11 gar kein Flex-Container war. */
/* RD1.14 #337 — `overflow-y` gilt jetzt in JEDER Breite, nicht erst unter 1024px. Die
   Graph-Karte hat `min-height:440px`; in einem kurzen Fenster (gemessen: 1280x520) passt der
   Body damit nicht, und ohne Scroller waren 162px Inhalt unerreichbar. Der Body ist der eine
   Scroll-Bereich dieser Ansicht. Gegenstueck dazu: das frueher inline gesetzte
   `overflow:hidden` in crm-kb-command-center.js ist entfernt — es hat diese Regel geschlagen. */
.crm .kb-body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 300px);
  gap: 14px;
  overflow-y: auto;
}
@media (max-width: 1024px) {
  /* Eine Spalte: der Graph braucht Flaeche, Detail und Legende ruecken darunter. */
  .crm .kb-body { grid-template-columns: 1fr; }

  /* RD1.05 (#305) — dasselbe fuer die Kandidaten-Strecke: die Detail-Kiste rutscht unter
     die Liste, statt beide zu quetschen. Bewusst in DIESEM Block statt in einem eigenen —
     eine zweite `@media`-Zeile waere ein zusaetzlicher roher px-Wert im Ratchet.
     ⚠ Die Basisregeln stehen weiter UNTEN in der Datei. Eine Media-Query gewinnt nicht
     durch ihre Verschachtelung, sondern nur ueber Spezifitaet oder Reihenfolge — deshalb
     tragen diese beiden Regeln den zusaetzlichen `.crm-cand`-Schritt (0,3,0 gegen 0,2,0).
     Ohne ihn blieben zwei Spalten stehen, gemessen bei 900 px. */
  .crm .crm-cand .crm-cand-split { grid-template-columns: minmax(0, 1fr); }
  .crm .crm-cand .crm-cand-list { max-height: 24rem; }

  /* PR1.248 (#442) — dasselbe fuer die Alternativen Suchen, aus denselben zwei
     Gruenden: kein zweiter `@media`-Kopf (roher px-Wert im Ratchet), und der
     zusaetzliche `.crm-alt-panel`-Schritt (0,3,0 gegen 0,2,0), weil die
     Basisregeln weiter unten in der Datei stehen und sonst gewaennen. */
  .crm .crm-alt-panel .crm-alt-split { grid-template-columns: minmax(0, 1fr); }
  .crm .crm-alt-panel .crm-alt-list { max-height: 24rem; }
}

/* RD1.11 #334 — Kuerzung langer Textzellen. Kunde und Opportunity lieferten nacktes <td>
   ohne white-space/overflow, waehrend der Rest der Codebasis konsequent kuerzt: ein langer
   Kundenname sprengte die Zeilenhoehe der gesamten Tabelle. `max-width` in ch statt px,
   damit die Grenze mit der Schriftgroesse mitwandert (und ohne den px-Ratchet zu belasten).
   Der volle Text haengt am title-Attribut. */
.crm .tbl td.cell-clip {
  max-width: 26ch;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* RD1.11 #334 — „Abmelden" im Dunkelmodus. --ad-red-700 kommt auf --bg-surface (#0F2033)
   nur auf 3.07:1 und faellt damit unter AA; --ad-red-300 liegt bei 7.28:1. Derselbe Ton,
   den nkv-high/conf-lo/dc-btn im Dark bereits tragen. */
.crm.dark .po-item.is-danger ,
html[data-theme="dark"] .crm .po-item.is-danger { color: var(--ad-red-300); }

/* ===================================================================
   RD1.08 (#331) — Rollen-Sektion im Opportunity-Detail
   ===================================================================
   Das Besetzungs-Cockpit und der Rollen-Editor bringen ihr Markup aus den geteilten
   Modulen mit (`opp-`-Praefix, Regeln in style.css). Das passt optisch bereits — hier
   steht nur, was in der neuen Shell zusaetzlich noetig ist.

   Sichtbarer Tastatur-Fokus: die Sektion fuehrt Bedienelemente ein, die es im Redesign
   vorher nicht gab (Chip-Entfernen, Aufklapper, Editor-Felder). Ohne Ring waeren sie
   per Tastatur unauffindbar — der Produktionsreife-Massstab der RD-Serie verlangt ihn.

   Groessen in `rem`, Farbe aus `--focus`: der Ratchet in scripts/ui-craft-baseline.json
   zaehlt rohe `px`- und Hex-Werte in dieser Datei und laesst sie nur sinken.

   ⚠️ Nebenwirkung, bewusst in Kauf genommen: `checkFocusVisible` in
   scripts/check-ui-craft.mjs prueft nur, OB diese Datei ueberhaupt eine
   :focus-visible-Regel enthaelt. Mit dieser Regel faellt der Zaehler von 11 auf 0 und
   die Pruefung verliert ihre Warnfunktion fuer RD1.11 (#334), das den Fokus
   flaechendeckend nachziehen soll. RD1.11 braucht dafuer eine feinere Pruefung —
   vermerkt am Ticket.

   `--focus` ist bislang nur im Light-Block definiert (Z. 89) und wird im Dark-Theme
   geerbt. Ergaenzt RD1.11 dort ein Pendant, wirkt es hier automatisch mit. */
.crm #opp-detail-roles-mount button:focus-visible,
.crm #opp-detail-roles-mount summary:focus-visible,
.crm #opp-detail-roles-mount input:focus-visible,
.crm #opp-detail-roles-mount select:focus-visible,
.crm #opp-detail-roles-mount textarea:focus-visible {
  outline: 0.125rem solid var(--focus);
  outline-offset: 0.125rem;
}

/* Die Dropzonen des Cockpits sind im Redesign echte Ablageflaechen. Ohne Zeigerwechsel
   ist nicht erkennbar, dass der Chip greifbar ist. */
.crm #opp-detail-roles-mount .opp-qs-chip-remove { cursor: pointer; }

/* ═══════════════════════════════════════════════════════════════════════════
   RD1.05 (#305) — Matching-Kandidaten im neuen Design
   ═══════════════════════════════════════════════════════════════════════════
   Gesicht zu `components/crm-candidate-panel.js`. Bewusst KEIN Nachbau der
   `.opp-cand-*`-Optik aus style.css: die gehoert der klassischen Shell, und
   Konvention 20 verlangt hier denselben Token-Satz wie im Rest von `.crm`.

   Rohwerte sind Absicht vermieden — der ui-craft-Ratchet (RD1.10 #333) zaehlt
   `raw-px` und `raw-hex` in DIESER Datei und laesst beide nur sinken. Deshalb
   ueberall `var(--s-*)`/`var(--r-*)`/Token-Farben, Restmasse in `rem`.
   Das Raster steht in `minmax()`: der Ratchet erkennt das als flexibel an, und
   es ist auch fachlich richtig — die Kiste soll mitschrumpfen, nicht klippen. */

.crm .crm-cand { margin-bottom: var(--s-4); }

.crm .crm-cand-tools {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: var(--s-2); margin-bottom: var(--s-3);
}

.crm .crm-cand-search {
  flex: 1 1 12rem; min-width: 0;
  padding: var(--s-1) var(--s-2);
  border: 0.0625rem solid var(--border); border-radius: var(--r-sm);
  background: var(--bg-surface); color: var(--text-1);
  font-family: var(--f-sans); font-size: var(--fs-ui);
}

/* Zwei Spalten, aber nie erzwungen: `minmax(0, …)` laesst beide Seiten schrumpfen,
   statt die Zeile aus dem Container zu druecken (Produktionsreife Punkt 1). */
.crm .crm-cand-split {
  display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  gap: var(--s-4); align-items: start;
}
.crm .crm-cand-col { min-width: 0; display: flex; flex-direction: column; }

/* Der EINE Scrollbereich des Panels. `overflow-y` steht im Markup (der Ratchet
   zaehlt Scroll-Container je View-Datei); hier nur seine Begrenzung. */
.crm .crm-cand-list {
  max-height: 32rem; min-height: 0;
  display: flex; flex-direction: column; gap: var(--s-2);
  padding-right: var(--s-1);
}

.crm .crm-cand-group {
  font-size: var(--fs-label); font-weight: 500; color: var(--text-3);
  margin-top: var(--s-2); padding-bottom: var(--s-1);
  border-bottom: 0.0625rem solid var(--border);
}

.crm .crm-cand-row {
  border: 0.0625rem solid var(--border); border-radius: var(--r-md);
  background: var(--bg-surface); padding: var(--s-2);
  display: flex; flex-direction: column; gap: var(--s-1);
  transition: border-color var(--t-fast) var(--ease-out), background var(--t-fast) var(--ease-out);
}
.crm .crm-cand-row:hover { background: var(--bg-hover); }
.crm .crm-cand-row.is-open { border-color: var(--ad-violet); background: var(--tint-violet); }

/* Die Zeile ist ein echter Knopf — deshalb muss ihr Button-Default zurueckgesetzt
   werden, nicht ihre Semantik. */
.crm .crm-cand-main {
  display: flex; align-items: center; gap: var(--s-2); width: 100%;
  background: none; border: 0; padding: 0; cursor: pointer;
  color: inherit; font: inherit; text-align: left;
}
.crm .crm-cand-id { display: flex; align-items: center; gap: var(--s-2); min-width: 0; flex: 1 1 auto; }
/* Lange Namen kuerzen kontrolliert statt die Zeile zu sprengen. */
.crm .crm-cand-name {
  font-weight: 500; font-size: var(--fs-ui); color: var(--text-1);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0;
}

.crm .crm-cand-score {
  flex: 0 0 auto; display: flex; flex-direction: column; align-items: center;
  padding: var(--s-1) var(--s-2); border-radius: var(--r-sm);
  border: 0.0625rem solid var(--border); background: var(--bg-surface-2);
}
.crm .crm-cand-score .v { font-family: var(--f-cond); font-weight: 500; font-size: var(--fs-body); line-height: 1.1; }
.crm .crm-cand-score .l { font-size: var(--fs-label); color: var(--text-3); }
/* Ampel: gefuellt statt getoent. Zwei getoente Gruenstufen sind auf einer Kachel
   dieser Groesse nicht unterscheidbar (gemessen in PR1.147). */
.crm .crm-cand-score.tier-high { background: var(--ad-green-700); border-color: var(--ad-green-700); }
.crm .crm-cand-score.tier-high .v, .crm .crm-cand-score.tier-high .l { color: var(--text-inv); }
.crm .crm-cand-score.tier-good { background: var(--tint-green); border-color: var(--ad-green-700); }
.crm .crm-cand-score.tier-good .v { color: var(--ad-green-700); }
.crm .crm-cand-score.tier-ok { background: var(--tint-orange); border-color: var(--ad-orange-700); }
.crm .crm-cand-score.tier-ok .v { color: var(--ad-orange-700); }

.crm .crm-cand-avail { display: flex; align-items: center; gap: var(--s-2); }
.crm .crm-cand-bar {
  flex: 1 1 auto; height: 0.375rem; min-width: 0;
  background: var(--bg-surface-3); border-radius: var(--r-xs); overflow: hidden;
}
/* Bewusst neutral-blau: zwei Bewertungsfarben je Zeile lesen sich als zwei Urteile. */
.crm .crm-cand-bar-fill { height: 100%; background: var(--ad-blue); }
.crm .crm-cand-avail-txt { font-size: var(--fs-label); color: var(--text-2); flex: 0 0 auto; }

.crm .crm-cand-ctl { display: flex; align-items: center; flex-wrap: wrap; gap: var(--s-2); }
.crm .crm-cand-pick { display: inline-flex; align-items: center; gap: var(--s-1); font-size: var(--fs-label); color: var(--text-2); cursor: pointer; }
.crm .crm-cand-when { font-size: var(--fs-label); color: var(--text-3); }
.crm .crm-cand-link {
  background: none; border: 0; padding: 0; cursor: pointer;
  font-size: var(--fs-label); color: var(--ad-blue); text-decoration: underline; font-family: inherit;
}
.crm .crm-cand-link[disabled] { color: var(--text-3); cursor: not-allowed; text-decoration: none; }

.crm .crm-cand-more {
  margin-top: var(--s-2); padding: var(--s-1); width: 100%;
  background: none; border: 0.0625rem dashed var(--border); border-radius: var(--r-sm);
  color: var(--text-2); font-size: var(--fs-meta); font-family: inherit; cursor: pointer;
}

.crm .crm-cand-foot { margin-top: var(--s-2); font-size: var(--fs-label); color: var(--text-3); }
/* PR1.244 (#423) — Gegenstueck zu .opp-cand-notice: die Einschraenkung steht ueber der
   Rangfolge, nicht unter ihr. Eine Stufe kraeftiger als die Fusszeile, ohne Statusfarbe. */
.crm .crm-cand-notice { margin-bottom: var(--s-2); font-size: var(--fs-meta); color: var(--text-2); }
.crm .crm-cand-notice:empty { margin-bottom: 0; }
.crm .crm-cand-state { font-size: var(--fs-ui); color: var(--text-3); padding: var(--s-3) 0; }

/* PR1.254 (#448) — Reverse-Matching, Redesign-Gesicht.
   Klassisches Pendant: .emp-match-* in style.css. Nur Tokens, keine rohen Hex- oder
   px-Werte — der ui-craft-Ratchet (Konvention 21) zaehlt beides und laesst es nur sinken.
   Groessen deshalb in rem, Abstaende ueber --s-*, Radien ueber --r-*. */
.crm .crm-rev-actions { display: flex; gap: var(--s-2); margin-left: auto; }
.crm .crm-rev-list { display: flex; flex-direction: column; gap: var(--s-2); max-height: 60vh; }
.crm .crm-rev-row {
    padding: var(--s-2) var(--s-3);
    border-radius: var(--r-sm);
}
/* Trennung ueber eine Haarlinie statt ueber eine eigene Flaeche.
   GRUND (gemessen mit axe-core, 21.08.2026): die Linkfarbe --rd-blue (#006EC7) liegt im
   dunklen Redesign auf JEDEM Untergrund unter der AA-Schwelle — 3,45:1 auf dem App-Grund,
   3,18:1 auf der Karte. Ein zusaetzlicher, etwas hellerer Zeilenhintergrund
   (--bg-surface-2) drueckte sie auf 2,82:1 und machte ein vorbestehendes Problem
   messbar schlimmer. Die Flaeche gab optisch wenig und kostete 0,36 Kontrast.
   Der Grundbefund selbst gehoert nicht in dieses Ticket: er betrifft jede Liste der
   Redesign-Shell und waere ein Token-Eingriff. Siehe Evidenz-Fragment. */
.crm .crm-rev-row + .crm-rev-row {
    border-top: thin solid var(--border);
    padding-top: var(--s-3);
}
.crm .crm-rev-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: var(--s-1); }
.crm .crm-rev-when { font-size: var(--fs-meta); color: var(--text-3); }
.crm .crm-rev-reason { font-size: var(--fs-meta); line-height: 1.45; margin-top: var(--s-1); }
.crm .crm-rev-act { flex-shrink: 0; }

/* PR1.447 (#689) — „Passende Einsätze". Klassisches Pendant: .emp-match-* (style.css).
   Nur Tokens, rem und --s-*; Gruen nie als Textfarbe auf dem Grund, nur auf dem Tint
   (--ad-green-900 hell / -700 dunkel, wie .conf-hi). Kein Aufklapp-Motion. */
.crm .crm-rev-head { flex-wrap: wrap; gap: var(--s-2); }
.crm .crm-rev-intro { flex: 1 1 16rem; text-align: left; font-size: var(--fs-ui); color: var(--text-2); }
.crm .crm-rev-title { font-size: var(--fs-body); font-weight: 600; color: var(--text-1); text-decoration: none; cursor: pointer; }
.crm .crm-rev-title:hover { text-decoration: underline; }
.crm .crm-rev-cust { font-size: var(--fs-meta); color: var(--text-2); }
.crm .crm-rev-note { font-size: var(--fs-meta); line-height: 1.45; color: var(--text-2); margin: 0; }
.crm .crm-rev-actions { align-items: center; flex-wrap: wrap; }
.crm .crm-rev-filters { display: inline-flex; gap: var(--s-1); }
.crm .crm-rev-filter { cursor: pointer; font: inherit; font-size: var(--fs-meta); }
.crm .crm-rev-filter-n { font-variant-numeric: tabular-nums; }
/* .chip.is-on traegt --ad-blue auf dem Tint (4,48:1) — Textstufe wie .tv-filter-chip. */
.crm .chip.is-on.crm-rev-filter { color: var(--ad-blue-700); }
.crm.dark .chip.is-on.crm-rev-filter , html[data-theme="dark"] .crm .chip.is-on.crm-rev-filter { color: var(--ad-blue-300); }
/* PR1.447-optik — die Zeile richtet sich nach der PANEL-Breite, nicht nach dem Fenster:
   im MA-Detail ist die Karte bei 1280 px nur ~38rem breit, und feste Spalten fuer Score,
   Zeitraum und Knoepfe liessen dem Titel ein Wort Breite. Standard ist deshalb zweizeilig
   (Titel oben, Score/Zeitraum/Knoepfe darunter, umbrechend); einzeilig erst ab 62rem. */
.crm .crm-rev-list { container-type: inline-size; }
.crm .crm-rev-grid {
    display: grid; grid-template-columns: 2.5rem minmax(0, 1fr);
    gap: var(--s-2) var(--s-3); align-items: center;
}
.crm .crm-rev-side {
    grid-column: 2; display: flex; flex-wrap: wrap; align-items: center;
    gap: var(--s-2) var(--s-4); min-width: 0;
}
.crm .crm-rev-side .crm-rev-score { flex: 1 1 9rem; max-width: 14rem; }
.crm .crm-rev-side .crm-rev-act { margin-left: auto; flex-wrap: wrap; }
.crm .crm-rev-logo { align-self: start; }
.crm .crm-rev-chips { display: flex; flex-wrap: wrap; gap: var(--s-1); }
.crm .crm-rev-chip { font-size: var(--fs-label); padding: 0.125rem var(--s-2); }
.crm .crm-rev-chip.is-fit { background: var(--tint-green); color: var(--ad-green-900); border-color: transparent; }
.crm.dark .crm-rev-chip.is-fit , html[data-theme="dark"] .crm .crm-rev-chip.is-fit { color: var(--ad-green-700); }
.crm .crm-rev-score { display: flex; align-items: center; gap: var(--s-2); }
.crm .crm-rev-pct {
    font-family: var(--f-mono); font-variant-numeric: tabular-nums; font-weight: 600;
    font-size: var(--fs-section); color: var(--text-1); min-width: 3.5rem;
}
.crm .crm-rev-bar {
    display: block; flex: 1; height: 0.375rem; border-radius: var(--r-xs);
    background: var(--bg-surface-2); overflow: hidden;
}
.crm .crm-rev-bar > span { display: block; height: 100%; background: var(--ad-blue); border-radius: inherit; }
.crm .crm-rev-when { display: flex; flex-direction: column; gap: 0.125rem; }
.crm .crm-rev-time { font-size: var(--fs-meta); font-weight: 500; color: var(--text-2); }
.crm .crm-rev-time.is-busy { color: var(--ad-red-700); }
.crm .crm-rev-time.is-freeFrom { color: var(--ad-orange-900); }
.crm .crm-rev-time.is-free , .crm .crm-rev-time.is-possible { color: var(--ad-green-900); }
.crm.dark .crm-rev-time.is-busy , html[data-theme="dark"] .crm .crm-rev-time.is-busy { color: var(--ad-red-300); }
.crm.dark .crm-rev-time.is-freeFrom , html[data-theme="dark"] .crm .crm-rev-time.is-freeFrom { color: var(--ad-orange); }
.crm.dark .crm-rev-time.is-free , html[data-theme="dark"] .crm .crm-rev-time.is-free ,
.crm.dark .crm-rev-time.is-possible , html[data-theme="dark"] .crm .crm-rev-time.is-possible { color: var(--ad-green-700); }
.crm .crm-rev-act { display: flex; gap: var(--s-2); justify-content: flex-end; }
.crm .crm-rev-why {
    display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-4);
    margin: var(--s-3) 0 var(--s-1) 0; padding: var(--s-3) var(--s-4);
    border-radius: var(--r-sm); background: var(--bg-surface-2);
}
.crm .crm-rev-why-h { font-size: var(--fs-ui); font-weight: 500; color: var(--text-1); margin: 0 0 var(--s-1); }
.crm .crm-rev-why-h ~ .crm-rev-why-h { margin-top: var(--s-3); }
.crm .crm-rev-why-list { margin: 0; padding-left: 1.1rem; font-size: var(--fs-ui); line-height: 1.5; color: var(--text-1); }
.crm .crm-rev-why-rec { font-size: var(--fs-ui); line-height: 1.5; color: var(--text-1); margin: var(--s-2) 0 0; }
.crm .crm-rev-why-src { margin-top: var(--s-3); }
.crm .crm-rev-part-sum , .crm .crm-rev-why .crm-rev-note { margin-top: var(--s-2); }
.crm .crm-rev-parts { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--s-2); }
.crm .crm-rev-part {
    display: grid; grid-template-columns: minmax(9rem, 12.5rem) minmax(3rem, 1fr) 5rem; gap: var(--s-2); align-items: center;
    font-size: var(--fs-ui); color: var(--text-1);
}
.crm .crm-rev-part-val { text-align: right; font-variant-numeric: tabular-nums; color: var(--text-2); }
/* BF-115 — „Noch nicht bewertet". Klassisches Pendant: .emp-match-unrated (style.css).
   Der Titel ist ein echter <button> (Tastatur ohne tabindex) im Link-Look der Zeilen. */
.crm .crm-rev-unrated { margin-top: var(--s-3); padding-top: var(--s-3); border-top: thin solid var(--border); }
.crm .crm-rev-unrated-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--s-3); }
.crm .crm-rev-unrated-row { display: flex; flex-wrap: wrap; align-items: flex-start; gap: var(--s-2) var(--s-3); }
.crm .crm-rev-title-btn { background: none; border: 0; padding: 0; font: inherit; font-size: var(--fs-body); font-weight: 600; text-align: left; }
.crm .crm-rev-unrated-why { font-weight: 600; color: var(--text-1); }
.crm .crm-rev-unrated-why.is-failed { color: var(--ad-orange-900); }
.crm.dark .crm-rev-unrated-why.is-failed , html[data-theme="dark"] .crm .crm-rev-unrated-why.is-failed { color: var(--ad-orange); }
/* Breite Panels — NACH den Grundregeln, sonst ueberstimmen diese die Container-Abfrage. */
@container (min-width: 48rem) {
    .crm .crm-rev-why { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); margin-left: 3.25rem; }
}
@container (min-width: 62rem) {
    .crm .crm-rev-grid { grid-template-columns: 2.5rem minmax(18rem, 1fr) auto; }
    .crm .crm-rev-side { grid-column: 3; flex-wrap: nowrap; }
    .crm .crm-rev-side .crm-rev-score { flex: 0 0 10rem; }
    .crm .crm-rev-side .crm-rev-when { flex: 0 0 10.5rem; }
}

/* Die drei Zustaende. `is-loading` traegt zugleich den view-states-Nachweis im
   Quelltext des Panels (siehe Kopfkommentar dort). */
.crm .crm-rev-state {
    display: flex; flex-direction: column; gap: var(--s-2);
    align-items: flex-start;
    font-size: var(--fs-ui); color: var(--text-3);
    padding: var(--s-3) 0;
}
.crm .crm-rev-state .val { color: var(--text-1); font-weight: 600; }
.crm .crm-rev-error {
    /* Volle Umrandung statt Seitenstreifen — dieselbe Begruendung wie im klassischen
       Pendant (.emp-match-error in style.css). */
    /* `thin` statt `1px`: der ui-craft-Ratchet (Konvention 21) zaehlt harte px-Werte
       in dieser Datei und laesst sie nur sinken. Das Keyword ergibt dieselbe
       Haarlinie ohne den Zaehler zu erhoehen. */
    border: thin solid var(--danger);
    border-radius: var(--r-sm);
    padding: var(--s-3);
}

/* BF-32 (#427) — Pendant zu .opp-cand-degraded-action / .opp-cand-unpersisted in
   style.css. Gleiche Aussage, Redesign-Tokens: keine rohen Farbwerte, keine harten
   px-Abstaende (der ui-craft-Ratchet zaehlt beides). */
.crm .crm-cand-state-action { display: block; margin-top: var(--s-2); color: var(--text-3); }
.crm .crm-cand-unpersisted {
    font-size: var(--fs-ui);
    line-height: 1.45;
    color: var(--warning);
    margin-bottom: var(--s-3);
    padding: var(--s-2) var(--s-3);
    background: color-mix(in srgb, var(--warning) 10%, transparent);
    border-radius: var(--radius-sm);
}
.crm .crm-cand-unpersisted-action { color: var(--text-3); }

/* ── Detail-Kiste ──────────────────────────────────────────────────────────── */
.crm .crm-cand-detail { min-width: 0; }
.crm .crm-cd { display: flex; flex-direction: column; gap: var(--s-3); }
.crm .crm-cd-head { display: flex; align-items: center; gap: var(--s-2); }
.crm .crm-cd-head-txt { display: flex; align-items: center; gap: var(--s-2); min-width: 0; flex: 1 1 auto; }
.crm .crm-cd-name { font-weight: 500; font-size: var(--fs-body); color: var(--text-1); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.crm .crm-cd-sec { border-top: 0.0625rem solid var(--border); padding-top: var(--s-2); }
.crm .crm-cd-sec-t { font-size: var(--fs-label); font-weight: 500; color: var(--text-3); margin-bottom: var(--s-2); }
.crm .crm-cd-p { font-size: var(--fs-ui); color: var(--text-2); margin: 0 0 var(--s-2); line-height: 1.5; }
.crm .crm-cd-muted { font-size: var(--fs-meta); color: var(--text-3); }
.crm .crm-cd-block { margin-bottom: var(--s-3); }
.crm .crm-cd-block-t { font-size: var(--fs-meta); font-weight: 500; color: var(--text-2); margin-bottom: var(--s-1); }
.crm .crm-cd-chips { display: flex; flex-wrap: wrap; gap: var(--s-1); }
.crm .crm-cd-chip {
  display: inline-flex; align-items: center; gap: var(--s-1);
  padding: 0 var(--s-1); border-radius: var(--r-xs);
  background: var(--bg-surface-2); color: var(--text-2); font-size: var(--fs-label);
}
.crm .crm-cd-chip.is-ok { background: var(--tint-green); color: var(--ad-green-700); }
.crm .crm-cd-chip.is-warn { background: var(--tint-orange); color: var(--ad-orange-700); }
.crm .crm-cd-card {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2);
  border: 0.0625rem solid var(--border); border-radius: var(--r-sm);
  padding: var(--s-2); margin-bottom: var(--s-1); background: var(--bg-surface);
}
.crm .crm-cd-card-t { font-size: var(--fs-ui); font-weight: 500; color: var(--text-1); }
.crm .crm-cd-list { margin: 0; padding-left: var(--s-4); font-size: var(--fs-meta); color: var(--text-2); }

.crm .crm-cd-metric { border-bottom: 0.0625rem solid var(--border); padding: var(--s-1) 0; }
.crm .crm-cd-metric > summary { display: flex; align-items: center; gap: var(--s-2); cursor: pointer; list-style: none; }
.crm .crm-cd-metric > summary::-webkit-details-marker { display: none; }
.crm .crm-cd-metric-l { font-size: var(--fs-meta); color: var(--text-2); flex: 0 0 8rem; }
.crm .crm-cd-metric-bar { flex: 1 1 auto; height: 0.375rem; min-width: 0; background: var(--bg-surface-3); border-radius: var(--r-xs); overflow: hidden; }
.crm .crm-cd-metric-fill { display: block; height: 100%; background: var(--ad-blue); }
.crm .crm-cd-metric-fill.high { background: var(--ad-green-700); }
.crm .crm-cd-metric-fill.medium { background: var(--ad-orange-700); }
.crm .crm-cd-metric-fill.low { background: var(--ad-red); }
.crm .crm-cd-metric-v { flex: 0 0 auto; font-family: var(--f-cond); font-weight: 500; font-size: var(--fs-ui); color: var(--text-1); }
.crm .crm-cd-ev-body { padding: var(--s-2) 0 var(--s-1); }
.crm .crm-cd-ev-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--s-1); }
.crm .crm-cd-ev { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-1); font-size: var(--fs-meta); color: var(--text-2); }
.crm .crm-cd-ev-q { font-style: italic; }

/* Sichtbarer Tastatur-Fokus fuer die neuen Bedienelemente — RD1.11-Regelsatz,
   hier auf die Kandidaten-Strecke gezogen. */
.crm .crm-cand button:focus-visible,
.crm .crm-cand summary:focus-visible,
.crm .crm-cand input:focus-visible {
  outline: 0.125rem solid var(--focus);
  outline-offset: 0.125rem;
}

/* Schmales Fenster: die Kiste rutscht unter die Liste, statt beide zu quetschen.
   Die Regeln stehen im BESTEHENDEN 1024er-Block weiter oben (Z. 1654) statt in einem
   eigenen: eine neue `@media (max-width: 1024px)`-Zeile waere ein zusaetzlicher roher
   px-Wert und haette den `raw-px`-Ratchet gerissen (683 -> 684), ohne einen einzigen
   zusaetzlichen Breakpoint zu schaffen. */

/* ============== RD1.13 #336 Phase 5 — Kunden-Excel-Tabelle ==============
   Sechs ein-/ausklappbare Spaltengruppen mit klebender Kundenspalte.

   Bewusst OHNE `px` und ohne rohe Hex-Farben: die Ratchets raw-px/raw-hex zaehlen
   ausschliesslich in dieser Datei und duerfen nicht steigen (R1/R9). Nur Tokens,
   `rem`, `%` und `thin` fuer Haarlinien.

   Die Huelle scrollt ausschliesslich WAAGERECHT. `overflow-x` zaehlt fuer die Pruefung
   scroll-container nicht mit (sie sucht `overflow:` und `overflow-y:`) — der eine
   senkrechte Scrollbereich der View bleibt damit der einzige. Die Kundenspalte klebt
   per `position: sticky` IN dieser Huelle, NICHT in einem zweiten Scroll-Container. */
.crm .cust-tbl-hull { overflow-x: auto; border-radius: 0.5rem; }
.crm .tbl-cust { min-width: 100%; }

/* Kopfzeile der Spaltengruppen: dezenter als die Spaltenkoepfe, damit die Hierarchie
   ohne zusaetzliche Linien lesbar ist. */
.crm .tbl-cust thead .grp-row th {
  cursor: pointer;
  text-align: center;
  color: var(--text-2);
  background: var(--bg-surface-3);
  border-bottom: thin solid var(--border);
  user-select: none;
}
.crm .tbl-cust thead .grp-row th.is-collapsed { color: var(--text-3); font-style: italic; }
.crm .tbl-cust thead .grp-row th:hover { color: var(--text-1); }

/* Spaltenkopf: der Sortier-Knopf fuellt die Zelle, damit die gesamte Kopfflaeche
   klickbar ist — er ist ein echter <button> (Fokus-Ratchet RD1.10). */
.crm .tbl-cust th.col-h { white-space: nowrap; }
.crm .tbl-cust th.col-h .col-sort {
  all: unset;
  display: block; width: 100%;
  cursor: pointer;
  font: inherit; color: inherit; letter-spacing: inherit; text-transform: inherit;
}
.crm .tbl-cust th.col-h .col-sort:hover { color: var(--text-1); }
.crm .tbl-cust .sort-rank {
  display: inline-block;
  margin-left: 0.25rem;
  padding: 0 0.3rem;
  /* Pillenform in `rem` statt der sonst ueblichen 999px — der raw-px-Ratchet zaehlt
     auch diesen Wert, und diese Phase soll ihn nicht gegenfinanzieren. */
  border-radius: 0.75rem;
  font-family: var(--f-mono); font-variant-numeric: tabular-nums; font-size: var(--fs-label);
  background: var(--bg-surface-3); color: var(--text-2);
}

/* Klebende Kundenspalte. Der Hintergrund muss gesetzt sein, sonst scheinen die
   darunterliegenden Zellen beim Scrollen durch. */
.crm .tbl-cust th.is-sticky,
.crm .tbl-cust td.is-sticky {
  position: sticky; left: 0; z-index: 2;
  box-shadow: inset -0.0625rem 0 0 0 var(--border);
}
.crm .tbl-cust td.is-sticky { background: var(--bg-surface); }
.crm .tbl-cust thead th.is-sticky { z-index: 3; background: var(--bg-surface-2); }
.crm .tbl-cust tbody tr:hover td.is-sticky { background: var(--bg-hover); }

/* Lange Freitextwerte duerfen die Tabelle nicht in die Breite treiben — sie werden
   gekuerzt, der volle Wert bleibt ueber den Inline-Edit erreichbar. */
.crm .tbl-cust tbody td {
  max-width: 14rem;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.crm .tbl-cust tbody td.is-sticky { max-width: none; }
/* PR1.587 (#889) Nachzug 2 — Kundenname ist die breiteste Spalte (Vorlage E6), nichts abgeschnitten. */
.crm .tbl-cust th.is-sticky, .crm .tbl-cust td.is-sticky { min-width: 18rem; width: 34%; }
.crm .tbl-cust td.is-sticky .list-name { overflow: visible; text-overflow: clip; white-space: normal; }
.crm .tbl-cust .crm-tbl-empty { text-align: center; padding: 1.25rem 0.75rem; }

/* Such- und Filterleiste ueber der Tabelle. */
.crm .cust-filter-bar {
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem;
}
/* Das Suchfeld nimmt den freien Platz. Bewusst ueber den Typ statt ueber eine ID: die
   Leiste wird seit RD1.13 Phase 6 auch vom Audit-Log benutzt, und eine ID-gebundene Regel
   haette dessen Feld auf Inhaltsbreite zusammenfallen lassen. */
.crm .cust-filter-bar input[type="search"] { flex: 1 1 14rem; min-width: 0; }

/* RD1.13 #336 Phase 5 — Karten-Ansicht der Kunden (Inventar Z. 638) und das Popover der
   Erweiterten Suche. Wie oben: nur Tokens, `rem`, `%` und `thin` — keine rohen px, keine
   Hex-Farben, kein zweiter senkrechter Scroll-Container. */
.crm .cust-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(20rem, 1fr));
  align-items: stretch;
  gap: 0.875rem;
}
/* PR1.526 — ab 90rem (1440) genau drei Karten je Reihe; Karte als Spalte mit Fuss
   unten, damit eine Reihe gleich hoch ist. Keine Animation (taeglich genutzt). */
@media (min-width: 90rem) {
  .crm .cust-card-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.crm .cust-card { display: flex; flex-direction: column; padding: 0; cursor: pointer; }
.crm .cust-card-head { display: flex; align-items: center; gap: 0.75rem; padding: 1rem 1.125rem 0.875rem; }
.crm .cust-card-title { display: flex; flex-direction: column; gap: 0.125rem; min-width: 0; flex: 1; }
/* Lange Kundennamen brechen kontrolliert statt die Karte zu sprengen. */
.crm .cust-card-title .strong { overflow-wrap: anywhere; }
.crm .cust-card-title .note { display: flex; flex-wrap: wrap; align-items: center; gap: 0 0.25rem; }
.crm .cust-card-hs { flex: none; display: inline-flex; align-items: center; }
.crm .cust-figs {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  margin: 0;
  border-top: thin solid var(--border); border-bottom: thin solid var(--border);
}
.crm .cust-fig { padding: 0.625rem 0.875rem; min-width: 0; }
.crm .cust-fig + .cust-fig { border-left: thin solid var(--border); }
.crm .cust-fig dt { font-size: var(--fs-meta); color: var(--text-3); white-space: nowrap; }
.crm .cust-fig dd {
  margin: 0.125rem 0 0; font-size: var(--fs-section); font-weight: 600; color: var(--text-1);
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.crm .cust-card-body { flex: 1; padding: 0.75rem 1.125rem 0.625rem; }
.crm .cust-card-line { display: flex; justify-content: space-between; gap: 0.5rem; margin-bottom: 0.375rem; }
.crm .cust-card-line .strong { color: var(--text-1); }
.crm .cust-proj-list { list-style: none; margin: 0; padding: 0; }
.crm .cust-proj {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; align-items: center; gap: 0.625rem;
  padding: 0.4rem 0;
  border-top: thin solid var(--border);
  cursor: pointer;
}
.crm .cust-proj:first-child { border-top: 0; }
.crm .cust-proj:hover { background: var(--bg-hover); }
.crm .cust-proj-name { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.crm .cust-proj-amt { font-weight: 600; white-space: nowrap; }
.crm .cust-proj-more, .crm .cust-proj-empty { padding-top: 0.25rem; }
.crm .cust-team { display: inline-flex; align-items: center; gap: 0.5rem; min-width: 0; }
.crm .cust-team-stack { display: inline-flex; flex: none; }
.crm .cust-team-stack > * + * { margin-left: -0.375rem; }
.crm .cust-team-stack .emp-avatar { box-shadow: 0 0 0 0.125rem var(--bg-surface); }
.crm .cust-team-more { margin-left: 0.25rem; font-size: var(--fs-meta); color: var(--text-3); }
.crm .cust-card-actions { display: inline-flex; align-items: center; gap: 0.375rem; flex: none; }
.crm .cust-card-menu .more-menu-btn span:empty { display: none; }
.crm .cust-card-menu .more-menu-list { top: auto; bottom: calc(100% + 0.25rem); }

/* ── PR1.277 (#471) — Bewegung, Logo in der Zeile, Fokus-Ansicht ───────────────
   Bewusst px-frei: der ui-craft-Ratchet (Konvention 21) steht auf 683/683 harten
   px-Werten und 65/65 rohen Hex — jeder neue Wert blockiert die Pipeline. Alle Maße
   kommen deshalb aus rem, `thin` und den .crm-Tokens. */

/* Bewegungs-Kennzeichen: Punkt UND Wort. Nie nur Farbe — ein Zustand, den man allein
   an der Farbe erkennt, ist fuer Farbfehlsichtige kein Zustand. */
/* PR1.293 (#494) — `font-size` steht jetzt ausdruecklich hier. Vorher erbte die Marke
   13px aus `.crm .tbl`; das war zufaellig richtig, aber nicht festgeschrieben — eine
   Aenderung an der Tabellen-Grundschrift haette sie stillschweigend mitgezogen. Derselbe
   Wert wie klassisch, damit beide Shells dieselbe Groesse zeigen. rem statt px: der
   raw-px-Ratchet steht auf 683/683 und blockiert jeden neuen px-Wert in dieser Datei. */
.crm .mv-tag { display: inline-flex; align-items: center; gap: 0.375rem; white-space: nowrap; font-size: var(--fs-ui); }
.crm .mv-dot { width: 0.5625rem; height: 0.5625rem; border-radius: 50%; flex: 0 0 auto; }
/* PR1.293 — Paritaets-Luecke: `.mv-label` gab es nur klassisch (style.css). Im Redesign
   trug das Wort die volle Zellfarbe und dominierte damit den Punkt daneben. */
.crm .mv-label { color: var(--text-2); }
/* ⚠️ Die -700-Stufen, nicht die Grundtoene: `--ad-green` (#76C800) und `--ad-orange`
   (#FF9868) erreichen auf der weissen Karte nur 2.09:1 bzw. 2.11:1 und verfehlen damit
   WCAG 1.4.11 (nicht-textueller Kontrast, 3:1). Die -700-Stufen liegen bei 3.23:1 und
   3.03:1. Gemessen mit demselben Verfahren wie scripts/check-crm-contrast.mjs. */
.crm .mv-active { background: var(--ad-green-700); }
.crm .mv-quiet { background: var(--text-3); }
.crm .mv-dormant { background: var(--mv-still); }
.crm .mv-unknown { background: transparent; box-shadow: inset 0 0 0 0.0625rem var(--text-3); }

/* Die Bewegung zusaetzlich als schmale Leiste am Zeilen- bzw. Kartenrand. Sie kostet
   keine Spalte und macht die Verteilung beim Ueberfliegen sichtbar. Die Leiste ist eine
   ZWEITE Kodierung derselben Information, nie die einzige — die Spalte „Bewegung"
   nennt den Zustand im Klartext. */
.crm .tbl-cust tbody tr.mv-lead > td:first-child { border-left: 0.2rem solid transparent; }
.crm .tbl-cust tbody tr.mv-lead-active > td:first-child { border-left-color: var(--ad-green-700); }
.crm .tbl-cust tbody tr.mv-lead-quiet > td:first-child { border-left-color: var(--text-3); }
.crm .tbl-cust tbody tr.mv-lead-dormant > td:first-child { border-left-color: var(--mv-still); }
/* Die Karte traegt KEINE farbige Akzentkante mehr.
   Sie war die dritte Kodierung derselben Aussage — der Punkt und das Wort im Kartenfuss
   sagen den Zustand bereits — und eine farbige Leiste am Rand einer abgerundeten Karte ist
   das saturierteste Erkennungsmerkmal generierter Oberflaechen. In der TABELLE bleibt die
   Leiste: dort gibt es keine Gruppierung, 67 Zeilen wollen ueberflogen werden, und die Kante
   spart das Lesen einer Spalte. Auf einer Karte spart sie nichts. */

/* Logo in der Namenszelle — die Luecke, die „keine Logos" meinte. Das Monogramm ist ein
   <span>; das Bild setzt services/account-logo-client.js spaeter als Hintergrund. */
.crm .cust-name-cell { display: flex; align-items: center; gap: 0.5rem; min-width: 0; }
/* PR1.293 (#494) — die Namenszelle ist ein <button> geworden (Klick oeffnet die
   Kundenseite, und nur ein Knopf ist ohne Maus erreichbar). Er soll wie Text wirken:
   Browser-Default zuruecknehmen, Zeiger und Unterstrich als Affordanz, sichtbarer Fokus
   aus dem .crm-Token. Alle Masse in rem — raw-px-Ratchet. */
.crm .cust-name-btn { background: none; border: 0; padding: 0; margin: 0; font: inherit;
  color: inherit; text-align: left; cursor: pointer; width: 100%; }
.crm .cust-name-btn:hover .cust-name-text { text-decoration: underline; }
.crm .cust-name-btn:focus-visible { outline: 0.125rem solid var(--ad-blue); outline-offset: 0.125rem; border-radius: 0.25rem; }
.crm .cust-name-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.crm .cust-strat { color: var(--ad-blue); font-size: var(--fs-meta); flex: 0 0 auto; }
/* PR1.407 Kundenliste — Status-Punkt vor dem Namen (gruen aktiv, gelb ruhig, grau still,
   grauer Ring unbekannt; das Wort steht in title/aria-label). -700-Stufen aus demselben
   Kontrastgrund wie bei .mv-dot. Zahlenspalten der Kundentabelle rechtsbuendig — `.crm .tbl
   .num` setzt nur die Ziffernbreite. Alle Masse in rem (raw-px-Ratchet). */
.crm .cust-status-dot { width: 0.5rem; height: 0.5rem; border-radius: 50%; flex: 0 0 auto; }
.crm .cust-status-active { background: var(--ad-green-700); }
.crm .cust-status-quiet { background: var(--ad-orange-700); }
.crm .cust-status-dormant { background: var(--text-3); }
.crm .cust-status-unknown { background: transparent; box-shadow: inset 0 0 0 0.09375rem var(--text-3); }
.crm .cust-name-btn .cust-name-text { min-width: 0; }
.crm .tbl-cust th.num, .crm .tbl-cust td.num { text-align: right; }

.crm .cust-card-foot {
  display: flex; align-items: center; justify-content: space-between; gap: 0.5rem;
  margin: 0; padding: 0.625rem 1.125rem;
  border-top: thin solid var(--border);
  font-size: var(--fs-meta); color: var(--text-3);
}

/* Fokus-Ansicht: gruppiert nach Bewegung, innerhalb der Gruppe das groesste Geld zuerst. */
.crm .cust-focus-sect { margin-bottom: 1.25rem; }
.crm .cust-focus-head {
  display: flex; align-items: center; gap: 0.5rem; margin: 0 0 0.25rem;
  font-size: var(--fs-ui); font-weight: 500;
  color: var(--text-2);
}
.crm .cust-focus-hint { margin: 0 0 0.5rem; }
/* Ebenfalls ohne Akzentkante: in der Fokus-Ansicht nennt schon die GRUPPE den Zustand,
   und die Meta-Zeile wiederholt ihn im Wort. Eine Leiste waere die vierte Kodierung. */
.crm .cust-focus-row {
  display: flex; align-items: center; gap: 0.625rem;
  padding: 0.5rem 0.75rem; margin-bottom: 0.3rem; cursor: pointer;
  background: var(--bg-surface); border: thin solid var(--border);
  border-radius: var(--r-sm);
}
.crm .cust-focus-row:hover { background: var(--bg-hover); }
.crm .cust-focus-row:focus-visible { outline: 0.125rem solid var(--focus); outline-offset: 0.125rem; }
.crm .cust-focus-main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.crm .cust-focus-main .strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.crm .cust-focus-pipe { font-weight: 600; color: var(--text-1); white-space: nowrap; }
.crm .cust-focus-rest { margin: 0; }
/* ⚠️ `.crm .muted` und `.crm .strong` sind ausschliesslich innerhalb von `.tbl` definiert
   (style-redesign.css:728-729). Die Fokus-Ansicht ist keine Tabelle — ohne diese beiden
   Regeln stuenden ihre Nebentexte in voller Textfarbe und der Kundenname ohne Gewicht. */
.crm .cust-focus-main .strong { font-weight: 600; color: var(--text-1); }
.crm .cust-focus-main .muted,
.crm .cust-focus-hint,
.crm .cust-focus-n,
.crm .cust-focus-rest { color: var(--text-3); font-size: var(--fs-meta); }
.crm .cust-focus-head .cust-focus-n { font-weight: 400; }

/* Popover der Erweiterten Suche: der Query-Builder bringt sein eigenes Markup mit
   (query-builder.js) und wird konsumiert, nicht nachgebaut. Diese Regeln geben ihm die
   Flaeche und den Rahmen der Redesign-Shell. */
.crm .qb-popover {
  padding: 0.75rem;
  background: var(--bg-surface);
  border: thin solid var(--border);
  border-radius: 0.5rem;
}
.crm .qb-popover[hidden] { display: none; }

/* RD1.13 #336 Phase 6 — aufklappbare Diff-Details im Audit-Log (Inventar Z. 725).
   <details>/<summary> statt eines Toggle-Knopfs: ohne JavaScript bedienbar, Tastatur gratis. */
.crm .audit-diff summary { cursor: pointer; color: var(--text-2); font-size: var(--fs-meta); }
.crm .audit-diff summary:hover { color: var(--text-1); }
.crm .audit-diff-body {
  margin: 0.375rem 0 0;
  padding: 0.5rem;
  max-height: 12rem;
  /* Nur waagerecht scrollend — der eine senkrechte Scrollbereich der View bleibt der
     einzige (Pruefung scroll-container zaehlt `overflow:` und `overflow-y:`). */
  overflow-x: auto;
  background: var(--bg-surface-2);
  border: thin solid var(--border);
  border-radius: 0.4rem;
  font-family: var(--f-mono); font-variant-numeric: tabular-nums; font-size: var(--fs-label);
  white-space: pre;
}

/* RD1.13 #336 Phase 6 — Auslastungs-Balken der Auslastungs-Kachel (Inventar Z. 299). Die Farbe
   kommt inline aus bereichsAuslastung (NKV-Ampel-Token, PR1.383), die Geometrie hier. Ohne px, ohne Hex. */
.crm .kpi .crm-fte-bar {
  margin-top: 0.4rem;
  height: 0.3rem;
  border-radius: 0.15rem;
  background: var(--bg-surface-3);
  overflow: hidden;
}
.crm .kpi .crm-fte-bar-fill { height: 100%; border-radius: inherit; transition: width var(--t-fast); }

/* RD1.13 #336 Phase 6 — der Bucket-Titel der Staffability-Kachel ist ein echter <button>
   (Inventar Z. 312): so ist der Detail-Dialog ohne Maus erreichbar und der Fokus-Ratchet
   aus RD1.10 greift. Er soll aber wie Text aussehen, nicht wie ein Knopf. */
.crm .crm-staff-title {
  all: unset;
  cursor: pointer;
  font: inherit; color: inherit;
  text-decoration: underline dotted;
  text-underline-offset: 0.15rem;
}
.crm .crm-staff-title:hover { color: var(--text-1); text-decoration-style: solid; }

/* RD1.13 #336 Reparatur (Coordinator-Befund 03.08.) — die Zahl der Kachel ist jetzt der
   zweite echte Knopf (Filter auf die Opp-Liste), nachdem der Kachelrahmen sein
   `role="button"` abgegeben hat. Sie soll unverändert aussehen wie die Zahl vorher. */
.crm .crm-staff-count {
  display: block;
  padding: 0; border: 0; background: none; cursor: pointer;
  font: inherit; font-size: var(--fs-title); font-weight: 600;
  color: inherit; text-align: left;
}

/* RD1.13 #336 Phase 6 — Untertitel einer Dashboard-Kachel (Inventar Z. 307). */
.crm .dw-card-sub { display: block; margin: -0.25rem 0 0.5rem; }

/* PR1.309 (#518) — Seitenfilter-Leiste und Hinweiszeile im Kartenkopf (Redesign-Gesicht;
   die Grundregeln stehen in style.css). Nur Tokens und rem — der raw-px-Ratchet hat
   keine Luft. Keine transition: taeglich genutzte Startseite. */
.crm .dash-pf { gap: var(--s-2); }
.crm .dash-pf-cc { gap: var(--s-2); }
.crm .dash-pf-info { gap: var(--s-2); }
/* Design-Audit: Sekundaer-Textfarbe (~6,5:1) und mind. .75rem wie klassisch. */
.crm .dash-pf-status { font-size: var(--fs-meta); color: var(--text-2); }
.crm .dash-pf-note {
  display: block; margin: -0.25rem 0 0.5rem;
  font-size: var(--fs-meta); color: var(--text-2);
}
/* `.crm .btn-secondary` (spaeter geladen) ueberdeckt Hintergrund und Farbe der geteilten
   .cc-chip-Regeln — der Aktiv-Zustand braucht hier eigene Toenung + Rand. */
.crm .dash-pf .cc-chip:not(.active) { color: var(--text-2); }
.crm .dash-pf .cc-chip.active { background: var(--tint-blue); border-color: var(--ad-blue); color: var(--text-1); }

/* PR1.732 (#1046) — Reiter und Seitenfilter in EINER Zeile (Vorlage V02, Punkt 1): sechs
   Reiter · feiner Trenner · Competence Center · Zeitraum · Hyperscaler · rechts der Sprung
   in den Einsatzplan. Die Reiter brechen nie einzeln (nowrap); wird es eng, rutscht der
   Filterblock als Ganzes in die naechste Zeile und der Trenner entfaellt dort (Klasse
   --umbruch, gesetzt am echten Umbruch). Der Trenner ist ::before des Filter-Wirts — `hidden` (Project Excellence,
   Vorlagenwahl) blendet ihn mit aus. Keine Bewegung: taeglich genutzte Startseite. */
.crm .dash-cat-zeile--eins { gap: var(--s-2); margin-bottom: 0; }
.crm .dash-cat-zeile--eins > .dash-cat-bar { flex: none; flex-wrap: nowrap; gap: var(--s-1); }
.crm .dash-cat-zeile--eins > #crm-dash-page-filter:not([hidden]),
.crm .dash-cat-zeile--eins > .dash-cat-filter:not([hidden]) { display: flex; align-items: center; min-width: 0; }
.crm .dash-cat-zeile--eins > #crm-dash-page-filter::before,
.crm .dash-cat-zeile--eins > .dash-cat-filter::before {
  content: ''; flex: none; align-self: center; block-size: 1.7333rem;
  border-inline-start: thin solid var(--border-strong); margin-inline: var(--s-2) var(--s-4);
}
/* Passt der Filterblock samt Trenner nicht neben die Reiter (Klasse setzt views/dashboard.js nach
   Messung), steht er in Zeile 2 — ein Trenner davor waere ein Strich ins Leere, er entfaellt. */
.crm .dash-cat-zeile--umbruch > #crm-dash-page-filter::before,
.crm .dash-cat-zeile--umbruch > .dash-cat-filter::before { content: none; }
/* Ladeskelett: Balken so breit und hoch wie die fertigen Filterknoepfe (CC · Zeitraum ·
   Hyperscaler bei 1 rem = 15 px), damit das Skelett an derselben Stelle umbricht. */
.crm .dash-cat-zeile--eins .dash-pf-skelett { min-height: 0; }
.crm .dash-cat-zeile--eins .dash-pf-skelett .skel-balken { block-size: 2.2667rem; border-radius: var(--r-md); }
.crm .dash-cat-zeile--eins .dash-pf-skelett .skel-balken:nth-child(1) { inline-size: 13.8rem; }
.crm .dash-cat-zeile--eins .dash-pf-skelett .skel-balken:nth-child(2) { inline-size: 9.4rem; }
.crm .dash-cat-zeile--eins .dash-pf-skelett .skel-balken:nth-child(3) { inline-size: 10.6667rem; }
/* Der Zeilenwechsel ist erzwungen (Reiter nehmen die ganze erste Zeile): ohne Trenner passte
   der Block sonst wieder neben die Reiter — dann stuende er dort ohne Trenner. */
.crm .dash-cat-zeile--umbruch > .dash-cat-bar { flex-basis: 100%; }
/* Leerer Wirt der Statusmeldungs-Kachel: ohne Kachel kein eigener Flex-Abstand ueber der Zeile. */
.crm #crm-dash-status-due:empty { display: none; }
/* Masse aus dem Prototyp (listen-dashboard.html, 1:1 bei 1920 px; 1 rem = 15 px):
   Reiter 7/13 px Polster, aktiv halbfett; Filterknopf 34 px hoch, 0/11 px, mittel,
   Rand --border-strong, Radius 8 px; Marke „Alle" halbfett, Zeilenhoehe 18 px. Schriftgroessen
   der Vorlage (13,5 / 11,5 px) auf die naechste Skalenstufe gerundet (--fs-ui / --fs-label). */
.crm .dash-cat-zeile--eins .dash-cat-tab { padding: 0.4667rem 0.8667rem; }
.crm .dash-cat-zeile--eins .dash-cat-tab.active { font-weight: 600; }
.crm .dash-cat-zeile--eins .cc-dropdown > summary {
  block-size: 2.2667rem; padding-block: 0; padding-inline: 0.7333rem; gap: 0.4667rem;
  font-size: var(--fs-ui); font-weight: 500; background: var(--bg-surface);
  border-color: var(--border-strong); border-radius: var(--r-md);
}
.crm .dash-cat-zeile--eins .cc-dropdown > summary:hover,
.crm .dash-cat-zeile--eins .cc-dropdown[open] > summary { border-color: var(--ad-blue); }
.crm .dash-cat-zeile--eins .cc-dropdown-count {
  padding: 0 0.4667rem; font-size: var(--fs-label); font-weight: 600; line-height: 1.2rem;
  background: var(--ad-blue); /* Weiss darauf 5,18:1 (AA) — Farbe der Vorlage */
}

/* PR1.308 (#517) — das Kachelraster. Stand bis hierher als Inline-Stil in
   views/dashboard.js; ohne Klasse gibt es keine Media-Query und damit kein
   verlaessliches Verhalten auf schmalem Fenster.
   Vier Spalten statt `auto-fill`: auf einem auto-fill-Raster ist `grid-column: span n`
   nicht verlaesslich — die breite Karte landet je Fensterbreite in einer anderen Zeile.
   Alles in rem und Tokens: der ui-craft-Ratchet `raw-px` hat null Luft, ein einziges
   hartes px in dieser Datei blockt den Merge. */
.crm .crm-dw-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--s-3);
  align-items: start;
}

.crm .dw-card.dash-size-klein  { grid-column: span 1; }
.crm .dw-card.dash-size-mittel { grid-column: span 2; }
.crm .dw-card.dash-size-gross  { grid-column: span 4; }

/* BF-94 (#722) — Gegenstueck zur klassischen Shell: frisch hinzugefuegte Karte leuchtet
   nach dem Schliessen von „Dashboard anpassen" einmal kurz auf. Keyframes bleiben global. */
@keyframes dash-card-neu-aus-rd { from { outline-color: var(--focus); } to { outline-color: transparent; } }
.crm .dash-card-neu { outline: 0.125rem solid var(--focus); outline-offset: 0.125rem; animation: dash-card-neu-aus-rd 1.4s ease-out .2s forwards; }
@media (prefers-reduced-motion: reduce) { .crm .dash-card-neu { animation: none; } }

/* PR1.601 (#893) — „Mein Dashboard" direkt auf der Seite bearbeiten.
   Leiste oben, gestrichelter Rahmen je Karte, Griff, Groessenwahl, Zahnrad, ×, Ecke zum
   Groessenaendern, Platzhalter „Hier ablegen" und ein Seitenleisten-Platz rechts.
   Nur rem und Tokens (ui-craft `raw-px`); Bewegung nur das 200-ms-Nachruecken (JS, FLIP). */
.crm .dash-more-wrap { position: relative; display: inline-flex; }
.crm .dash-more-menu {
  position: absolute; right: 0; top: calc(100% + var(--s-1)); z-index: 40;
  min-width: 14rem; padding: var(--s-1);
  background: var(--bg-surface); border: 0.0625rem solid var(--border-strong); border-radius: var(--r-md);
}
.crm .dash-more-menu button {
  display: block; width: 100%; text-align: left; padding: var(--s-2) var(--s-3);
  background: none; border: 0; border-radius: var(--r-sm); font: inherit; font-size: var(--fs-ui); color: var(--text-1); cursor: pointer;
}
.crm .dash-more-menu button:hover, .crm .dash-more-menu button:focus-visible { background: var(--bg-hover); }

.crm .dash-bearb-leiste {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2) var(--s-4);
  margin: 0 1.375rem; padding: var(--s-2) var(--s-3);
  background: var(--tint-blue); border: 0.0625rem solid var(--ad-blue-300); border-radius: var(--r-md);
}
.crm .dash-bearb-stift { display: inline-flex; color: var(--ad-blue); flex: 0 0 auto; }
.crm .dash-bearb-text { font-size: var(--fs-ui); color: var(--text-1); font-weight: 600; }
.crm .dash-bearb-rechts { margin-left: auto; display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); }
.crm .dash-bearb-status { font-size: var(--fs-meta); color: var(--text-2); }
.crm .dash-bearb-status-ok { color: var(--ad-green-700); font-weight: 600; }
.crm .dash-bearb-status-fehler { color: var(--ad-red-700); font-weight: 600; }
.crm .dash-bearb-retry {
  background: none; border: 0; padding: 0; font: inherit; color: var(--ad-blue-700); text-decoration: underline; cursor: pointer;
}
.crm .dash-bearb-ansage { position: absolute; width: 0.0625rem; height: 0.0625rem; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

.crm .dash-bearb-body { display: flex; flex: 1; min-height: 0; }
.crm .dash-bearb-body > #crm-dash-scroll { flex: 1; min-width: 0; }
.crm .dash-bearb-seite {
  flex: 0 0 19rem; max-width: 40%; overflow: auto; padding: var(--s-4);
  background: var(--bg-surface); border-left: 0.0625rem solid var(--border);
}
.crm .dash-bearb-seite-kopf { display: flex; align-items: center; justify-content: space-between; gap: var(--s-2); }
.crm .dash-bearb-seite-kopf h2 { margin: 0; font-size: var(--fs-body); }
.crm .dash-bearb-seite-name { margin: var(--s-3) 0; font-weight: 600; color: var(--text-1); }
.crm .dash-bearb-seite-zeile { display: flex; align-items: center; gap: var(--s-2); font-size: var(--fs-ui); }
/* PR1.604 (#919) — „Kachel einstellen“: Abschnitte der Seitenleiste. Täglich genutzt → keine Bewegung. */
.crm .dash-ks-abschnitt { margin: 0 0 var(--s-4); display: flex; flex-direction: column; gap: var(--s-2); }
.crm .dash-ks-titel { margin: 0; font-size: var(--fs-meta); font-weight: 600; color: var(--text-2); text-transform: none; }
.crm .dash-ks-feld { width: 100%; min-width: 0; padding: var(--s-2) var(--s-3); font: inherit; font-size: var(--fs-ui); color: var(--text-1); background: var(--bg-surface); border: 0.0625rem solid var(--border); border-radius: var(--r-sm); }
.crm .dash-ks-label { display: flex; flex-direction: column; gap: var(--s-1); font-size: var(--fs-meta); color: var(--text-2); }
.crm .dash-ks-satz { margin: 0; font-size: var(--fs-ui); color: var(--text-1); }
/* PR1.603 (#918) — Katalog „Kacheln hinzufügen“ als Seitenleiste (Entwurf D3: .kat/.ki/.chips).
   Selten genutzt, mit Anspruch → keine eigene Bewegung; das Aufleuchten der neuen Karte ist BF-94.
   Masse aus d3 (÷ 2) bzw. entwuerfe.html; die Shell rechnet 1rem = 15px, deshalb Werte wie 25.6rem = 384px. */
.crm .dash-kat-rahmen { display: flex; flex: 1; min-height: 0; height: 100%; }
.crm .dash-kat-links { flex: 1; min-width: 0; min-height: 0; display: flex; flex-direction: column; }
.crm .dash-kat-rahmen > .dash-kat {
  flex: 0 0 25.6rem; max-width: 45%; min-height: 0; display: flex; flex-direction: column;
  position: relative; z-index: 2; background: var(--bg-surface); border-left: 0.0625rem solid var(--border);
  box-shadow: -0.8rem 0 2rem -1.2rem color-mix(in srgb, var(--text-1) 45%, transparent), var(--shadow-3);
}
.crm .dash-kat-kopf { display: flex; flex-direction: column; gap: 0.6667rem; padding: 0.9333rem 1.0667rem 0.6667rem; border-bottom: 0.0625rem solid var(--border); }
.crm .dash-kat-zeile1 { display: flex; align-items: center; gap: var(--s-2); }
.crm .dash-kat-zeile1 h2 { flex: 1; margin: 0; font-size: var(--fs-section); font-weight: 700; color: var(--text-1); }
.crm .dash-kat-zu {
  width: 1.6rem; height: 1.6rem; display: grid; place-items: center; padding: 0;
  background: none; border: 0; border-radius: var(--r-sm); color: var(--text-2); cursor: pointer;
}
.crm .dash-kat-zu:hover { background: var(--bg-hover); color: var(--text-1); }
.crm .dash-kat-bauen {
  display: flex; align-items: center; justify-content: center; gap: var(--s-2); width: 100%; min-height: 2.2667rem;
  padding: var(--s-2) var(--s-3); font: inherit; font-size: var(--fs-meta); font-weight: 600;
  background: var(--ad-orange); color: var(--anlegen-text); border: 0.0625rem solid var(--ad-orange); border-radius: var(--r-md); cursor: pointer;
}
.crm .dash-kat-bauen:hover { background: color-mix(in srgb, var(--ad-orange) 88%, var(--ad-orange-700)); border-color: var(--ad-orange-700); }
.crm .dash-kat-suche {
  display: flex; align-items: center; gap: var(--s-2); padding: 0.5rem 0.6667rem;
  border: 0.0625rem solid var(--border-strong); border-radius: var(--r-md); color: var(--text-3); background: var(--bg-surface);
}
.crm .dash-kat-suche:focus-within { border-color: var(--focus); outline: 0.125rem solid color-mix(in srgb, var(--focus) 35%, transparent); }
.crm .dash-kat-suche input {
  flex: 1; min-width: 0; border: 0; padding: 0; background: none; outline: none;
  font: inherit; font-size: var(--fs-meta); color: var(--text-1);
}
.crm .dash-kat-suche input::placeholder { color: var(--text-3); }
/* Kein zweites Loeschen-× des Browsers: „Suche leeren“ steht im Leerzustand (Bild d3 zeigt keins). */
.crm .dash-kat-suche input::-webkit-search-cancel-button { appearance: none; -webkit-appearance: none; }
.crm .dash-kat-chips { display: flex; flex-wrap: wrap; gap: 0.3333rem; }
.crm .dash-kat-chip {
  padding: 0.1333rem 0.6rem; font: inherit; font-size: var(--fs-label); font-weight: 600; line-height: 1.5;
  color: var(--text-2); background: var(--bg-surface); border: 0.0625rem solid var(--border-strong); border-radius: var(--r-pill, 6.25rem); cursor: pointer;
}
.crm .dash-kat-chip:hover { background: var(--bg-hover); }
.crm .dash-kat-chip.ist-aktiv { background: var(--text-1); border-color: var(--text-1); color: var(--bg-surface); }
.crm .dash-kat-liste { flex: 1; min-height: 0; overflow: auto; padding: 0.4rem 0.6667rem var(--s-4); }
/* Gruppenkopf: Typo-Rolle Abschnittstitel (fonts.css .typo-abschnitt) — hier nur der Abstand. */
.crm .dash-kat-gruppe-titel { margin: 0; padding: 0.6667rem 0.4rem 0.2667rem; }
.crm .dash-kat-zeilen { list-style: none; margin: 0; padding: 0; }
.crm .dash-kat-zeile {
  display: grid; grid-template-columns: 2.1333rem minmax(0, 1fr) auto; gap: 0.6667rem; align-items: center; width: 100%;
  padding: 0.5rem 0.4rem; text-align: left; font: inherit; color: var(--text-1);
  background: none; border: 0; border-radius: var(--r-md); cursor: pointer;
}
.crm .dash-kat-zeile:hover, .crm .dash-kat-zeile:focus-visible { background: var(--bg-hover); }
.crm .dash-kat-zeile:focus-visible { outline: 0.125rem solid var(--focus); outline-offset: -0.125rem; }
.crm .dash-kat-zeile[aria-disabled="true"] { cursor: default; }
.crm .dash-kat-symbol {
  width: 2.1333rem; height: 2.1333rem; display: grid; place-items: center; border-radius: 0.4667rem;
  background: var(--bg-surface-2); border: 0.0625rem solid var(--border); color: var(--text-2);
}
/* Linien-Symbole des Entwurfs (24er-Raster, Strich 1.9 bei 16 px). */
.crm .dash-kat .dash-kat-i { width: 1.0667rem; height: 1.0667rem; flex: none; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.crm .dash-kat-symbol .dash-kat-i { width: 1rem; height: 1rem; }
.crm .dash-kat-knopf .dash-kat-i { width: 0.9333rem; height: 0.9333rem; }
.crm .dash-kat-text { min-width: 0; display: flex; flex-direction: column; }
.crm .dash-kat-titel, .crm .dash-kat-wert { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.crm .dash-kat-titel { font-size: var(--fs-meta); font-weight: 600; line-height: 1.4; color: var(--text-1); }
.crm .dash-kat-wert { font-size: var(--fs-label); line-height: 1.4; color: var(--text-3); }
.crm .dash-kat-knopf {
  width: 1.8667rem; height: 1.8667rem; display: grid; place-items: center; border-radius: 0.4667rem;
  border: 0.0625rem solid var(--border-strong); color: var(--text-2); background: var(--bg-surface);
}
.crm .dash-kat-knopf.ist-drauf { background: var(--tint-blue); border-color: color-mix(in srgb, var(--ad-blue) 20%, var(--bg-surface)); color: var(--ad-blue-700); }
.crm .dash-kat-knopf.ist-gesperrt { color: var(--text-3); border-style: dashed; }
.crm .dash-kat-skelett, .crm .dash-kat-skelett-zeile {
  display: inline-block; height: 0.625rem; width: 4.5rem; border-radius: var(--r-xs); background: var(--border);
  vertical-align: middle;
}
.crm .dash-kat-skelett-zeile { display: block; width: 100%; height: 2.75rem; margin: var(--s-1) 0; border-radius: var(--r-md); }
.crm .dash-kat-leer { padding: var(--s-6) var(--s-3); text-align: center; color: var(--text-2); font-size: var(--fs-meta); }
.crm .dash-kat-leer p { margin: 0 0 var(--s-2); }
.crm .dash-kat-link {
  padding: 0; background: none; border: 0; font: inherit; color: var(--ad-blue-700); text-decoration: underline; cursor: pointer;
}
.crm .dash-kat-meldung { margin: 0 0.4rem var(--s-1) 3.2rem; }
.crm .dash-kat-meldung, .crm .dash-kat-hinweis { padding: 0; font-size: var(--fs-label); color: var(--ad-orange-900); }
.crm .dash-kat-hinweis { color: var(--text-2); }
.crm .dash-kat .sr-only {
  position: absolute; width: 0.0625rem; height: 0.0625rem; overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}
/* Reiter-Kachel auf „Mein Dashboard“: der Kartenrahmen kommt von der Kachel-Huelle (dwCard), der
   Titel steht in deren Kopf — die Bauplan-Kachel innen ohne eigenen Rahmen und Titel. */
.crm .dash-reiter-kachel .dbp-grid { display: block; }
.crm .dash-reiter-kachel .dbp-kachel, .crm .dash-reiter-kachel .dbp-passiert {
  border: 0; box-shadow: none; background: none; padding: 0; min-height: 0;
}
.crm .dash-reiter-kachel .dbp-kpi-titel, .crm .dash-reiter-kachel .dbp-titel, .crm .dash-reiter-kachel .dbp-passiert-titel { display: none; }
.crm .dash-reiter-kachel .dbp-kpi { display: flex; flex-direction: column; align-items: flex-start; gap: var(--s-1); background: none; }
.crm .dash-reiter-kachel .dbp-kopf { justify-content: flex-end; }
@media (max-width: 64rem) {
  .crm .dash-kat-rahmen > .dash-kat { flex-basis: 20rem; }
}
.crm .dash-ks-hinweis { margin: 0; }
.crm .dash-ks-datum { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-2); }
.crm .dash-ks-regel { display: grid; grid-template-columns: 4.5rem 1fr 4.5rem auto; gap: var(--s-1); align-items: center; }
.crm .dash-ks-fuss { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); position: sticky; bottom: calc(var(--s-4) * -1); padding: var(--s-3) 0; background: var(--bg-surface); border-top: 0.0625rem solid var(--border); }
.crm .dash-ks-fuss .btn-primary { margin-left: auto; }
.crm .dash-ks-feld:focus-visible, .crm .dash-ks-fuss button:focus-visible { outline-color: var(--focus); }
.crm .dnk--ton-gruen { background: var(--tint-green); }
.crm .dnk--ton-ocker { background: var(--tint-warn); }

.crm .dw-card.dash-bearb-karte {
  position: relative; border: 0.125rem dashed var(--ad-blue-300);
}
/* Nachzug 3 (#893) — Kachelkopf im Modus als EINE Zeile wie Vorlage D3, fuer alle Groessen
   (Klein = Pruefstein): ⠿ Titel… [Klein ▾] ⚙ × — der Titel kuerzt mit Ellipse, Griff und
   Steuerung schrumpfen nie, nichts bricht um. */
.crm .dw-card.dash-bearb-karte .dash-bearb-kopf { flex-wrap: nowrap; gap: var(--s-2); min-width: 0; }
.crm .dw-card.dash-bearb-karte .dash-bearb-kopf > h3 {
  flex: 1 1 auto; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.crm .dw-card.dash-bearb-karte .dash-bearb-kopf > .dash-griff { flex: 0 0 auto; margin-right: 0; }
.crm .dash-bearb-steuerung { display: inline-flex; flex: 0 0 auto; flex-wrap: nowrap; align-items: center; gap: var(--s-1); margin-left: auto; }
.crm .dash-bearb-steuerung > * { flex-shrink: 0; }
/* Groessenwahl schmal wie „Klein ▾“ in D3 — die Kompakt-Auswahl haette sonst 8rem Mindestbreite. */
.crm .dash-bearb-steuerung .cs { width: auto; min-width: 0; flex: 0 0 auto; }
.crm .dash-bearb-steuerung .cs-field { width: auto; min-width: 0; gap: var(--s-1); }
.crm .dash-bearb-x { display: inline-block; min-width: 1.25rem; font-size: var(--fs-title); line-height: 1.25rem; text-align: center; }
.crm .dw-card.dash-bearb-karte:focus-visible { outline: 1.5pt solid var(--focus); outline-offset: 1.5pt; } /* 1.5pt = 2 px, nur Tastatur */
.crm .dw-card.dash-bearb-karte.dash-aufgenommen { border-style: solid; border-color: var(--ad-blue); }
.crm .dash-griff {
  background: none; border: 0; padding: 0 var(--s-1); margin-right: var(--s-2);
  font-size: var(--fs-body); line-height: 1; color: var(--text-3); cursor: grab; touch-action: none;
  min-width: 18pt; min-height: 18pt; /* #893: 18pt = 24 px, unabhängig von der Root-Schrift */ display: inline-flex; align-items: center; justify-content: center;
}
.crm .dash-griff:hover, .crm .dash-griff:focus-visible { color: var(--text-1); }
.crm .dash-bearb-btn {
  display: inline-flex; align-items: center; justify-content: center; padding: var(--s-1);
  background: none; border: 0; border-radius: var(--r-sm); color: var(--text-2); cursor: pointer;
}
.crm .dash-bearb-btn:hover, .crm .dash-bearb-btn:focus-visible { background: var(--bg-hover); color: var(--text-1); }
.crm .dash-groesse-wahl {
  font: inherit; font-size: var(--fs-meta); color: var(--text-1);
  background: var(--bg-surface); border: 0.0625rem solid var(--border-strong); border-radius: var(--r-sm); padding: var(--s-1) var(--s-2);
}
.crm .dash-ecke {
  position: absolute; right: 0.125rem; bottom: 0.125rem; width: 1rem; height: 1rem; cursor: nwse-resize; touch-action: none;
  background: linear-gradient(135deg, transparent 0 55%, var(--ad-blue-300) 55% 65%, transparent 65% 78%, var(--ad-blue-300) 78% 88%, transparent 88%);
}
.crm .dw-card.dash-groesse-zieht { border-style: solid; border-color: var(--ad-blue); }

/* PR1.699 (#1003) — Kachelgruppen, Teil B (Entwurf E3, abgenommen 03.11.2026).
   Masse aus dem Prototyp entwuerfe-03-11 (px ÷ 15 = rem wie der Katalog), Spalten anteilig.
   Instanz = ein Block ueber die volle Rasterbreite: graue Flaeche, eigener Rahmen (im Modus
   gestrichelt), Kopf mit Gruppen-Symbol, Name, Filter-Pille, „gebunden · von …", „⋯". */
.crm .crm-dw-grid > .dw-card.dash-kg-block { grid-column: 1 / -1; }
.crm .dw-card.dash-kg-block {
  position: relative; padding: 0 0.8rem 0.8rem; background: var(--bg-surface-2);
  border: 0.0625rem solid var(--border-strong); border-radius: var(--r-xl); box-shadow: none;
}
.crm .dw-card.dash-kg-block.dash-bearb-karte { border: 0.0625rem dashed var(--border-strong); }
.crm .dw-card.dash-kg-block.dash-bearb-karte.dash-aufgenommen { border-style: solid; border-color: var(--ad-blue); }
.crm .dash-kg-kopf { display: flex; align-items: center; gap: 0.6667rem; padding: 0.6667rem 0.1333rem; min-width: 0; }
.crm .dash-kg-kopf > .dash-griff { margin-right: 0; flex: 0 0 auto; }
.crm .dash-kg-i { width: 1rem; height: 1rem; flex: none; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.crm .dash-kg-symbol {
  width: 1.8667rem; height: 1.8667rem; flex: 0 0 auto; display: grid; place-items: center;
  border-radius: var(--r-md); background: var(--tint-blue); color: var(--ad-blue-700);
}
.crm .dash-kg-name { margin: 0; font-size: var(--fs-body); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.crm .dash-kg-pille {
  display: inline-flex; align-items: center; gap: 0.4rem; flex: 0 0 auto; padding: 0.1333rem 0.6667rem;
  font: inherit; font-size: var(--fs-meta); font-weight: 600; color: var(--text-1); white-space: nowrap;
  background: var(--bg-surface); border: 0.0625rem solid var(--border-strong); border-radius: 62.5rem;
}
.crm button.dash-kg-pille { cursor: pointer; }
.crm button.dash-kg-pille:hover { background: var(--bg-hover); }
.crm .dash-kg-pille .dash-kg-i { width: 0.8667rem; height: 0.8667rem; color: var(--text-3); }
.crm .dash-kg-meta { font-size: var(--fs-label); color: var(--text-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.crm .dash-kg-sp { flex: 1 1 auto; }
.crm .dash-kg-menue-wrap { position: relative; flex: 0 0 auto; }
.crm .dash-kg-mehr {
  width: 2rem; height: 2rem; display: grid; place-items: center; padding: 0; cursor: pointer;
  color: var(--text-2); background: none; border: 0.0625rem solid transparent; border-radius: var(--r-md);
}
.crm .dash-kg-mehr:hover, .crm .dash-kg-mehr.ist-offen { background: var(--bg-surface); border-color: var(--border-strong); color: var(--text-1); }
.crm .dash-kg-mehr .dash-kg-i { stroke-width: 2.6; }
.crm .dash-kg-mehr:focus-visible, .crm .dash-kg-pille:focus-visible, .crm .dash-kg-menue-eintrag:focus-visible,
.crm .dash-kg-weg-zu:focus-visible, .crm .dash-kg-dlg-zu:focus-visible { outline: 0.125rem solid var(--focus); outline-offset: 0.0625rem; }

/* Kacheln der Gruppe im 3er-Raster (anteilig). Innen keine Bedienelemente. */
.crm .dash-kg-kacheln { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.8rem; align-items: start; }
.crm .dash-kg-kachel {
  min-width: 0; padding: 0.7333rem 0.9333rem 0.8667rem; background: var(--bg-surface);
  border: 0.0625rem solid var(--border); border-radius: var(--r-lg);
}
.crm .dash-kg-kachel-kopf { display: flex; align-items: center; gap: 0.5333rem; padding-bottom: 0.5333rem; margin-bottom: 0.6667rem; border-bottom: 0.0625rem solid var(--border); }
.crm .dash-kg-kachel-kopf h4 { margin: 0; font-size: var(--fs-ui); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.crm .dash-kg-sk-titel { display: block; width: 55%; height: 0.9333rem; border-radius: var(--r-xs); background: var(--bg-surface-3); }
.crm .dash-kg-sk-flaeche { height: 3.7333rem; border-radius: var(--r-md); background: var(--bg-surface-3); }
.crm .dash-kg-fehler, .crm .dash-kg-weg {
  display: flex; align-items: center; gap: 0.5333rem; padding: 0.4667rem 0.6667rem; margin: 0 0 0.6667rem;
  border-radius: var(--r-md); font-size: var(--fs-meta); color: var(--text-1);
}
.crm .dash-kg-fehler { background: var(--bg-surface); border: 0.0625rem solid var(--border); }
.crm .dash-kg-weg { background: var(--ocker-grund); }
.crm .dash-kg-weg > .dash-kg-i, .crm .dash-kg-fehler > .dash-kg-i { color: var(--ocker-fuell); }
.crm .dash-kg-weg-zu {
  margin-left: auto; display: grid; place-items: center; width: 1.6rem; height: 1.6rem; padding: 0;
  background: none; border: 0; border-radius: var(--r-sm); color: var(--text-2); cursor: pointer;
}
.crm .dash-kg-weg-zu:hover { background: color-mix(in srgb, var(--ocker-fuell) 16%, transparent); }
.crm .dash-kg-link { padding: 0; background: none; border: 0; font: inherit; font-weight: 600; color: var(--ad-blue-700); text-decoration: underline; cursor: pointer; }

/* Menue „⋯" (Legende 3/7): rechtsbuendig unter dem Knopf. */
.crm .dash-kg-menue {
  position: absolute; right: 0; top: calc(100% + 0.3333rem); z-index: 35; width: 15.7333rem; padding: 0.4rem;
  background: var(--bg-surface); border: 0.0625rem solid var(--border-strong); border-radius: 0.8rem; box-shadow: var(--shadow-3);
  animation: dash-kg-peek var(--mo-step) var(--ease-out) both;
}
.crm .dash-kg-menue-lab { padding: 0.2667rem 0.6rem 0.1333rem; font-size: var(--fs-label); font-weight: 700; color: var(--text-3); }
.crm .dash-kg-menue-eintrag {
  display: flex; align-items: center; gap: 0.6rem; width: 100%; padding: 0.4667rem 0.6rem; text-align: left;
  font: inherit; font-size: var(--fs-ui); color: var(--text-1); background: none; border: 0; border-radius: 0.4667rem; cursor: pointer;
}
.crm .dash-kg-menue-eintrag .dash-kg-i { color: var(--text-3); }
.crm .dash-kg-menue-eintrag:hover, .crm .dash-kg-menue-eintrag:focus-visible { background: var(--bg-hover); }
.crm .dash-kg-menue hr { border: 0; border-top: 0.0625rem solid var(--border); margin: 0.3333rem 0.1333rem; }

/* Markieren (Legende 5): blauer Rand + heller Ring, Haken-Plakette links oben am Rand. */
.crm .dw-card.dash-bearb-karte.dash-kg-markiert {
  border: 0.1333rem solid var(--ad-blue); box-shadow: 0 0 0 0.2rem color-mix(in srgb, var(--ad-blue) 22%, transparent);
}
.crm .dash-kg-haken {
  position: absolute; top: 0.8rem; left: -0.6rem; z-index: 2; width: 1.3333rem; height: 1.3333rem; display: grid; place-items: center;
  border-radius: var(--r-sm); background: var(--ad-blue); color: var(--text-inv); box-shadow: 0 0 0 0.1333rem var(--bg-surface);
}
.crm .dash-kg-haken .dash-kg-i { width: 0.8667rem; height: 0.8667rem; stroke-width: 2.6; }

/* Dialoge (Legende 5/6/9) — Panel mit grau abgesetzter Fusszeile. */
.crm .dash-kg-dim { position: fixed; inset: 0; z-index: 900; background: rgba(14, 23, 38, 0.32); }
.crm .dash-kg-dlg {
  position: fixed; z-index: 901; left: 50%; top: 18vh; transform: translateX(-50%);
  width: min(32rem, calc(100vw - 2rem)); background: var(--bg-surface); border-radius: var(--r-xl); box-shadow: var(--shadow-3);
  animation: dash-kg-dlg-ein var(--mo-step) var(--ease-out) both;
}
.crm .dash-kg-dlg.ist-schmal { width: min(29.3333rem, calc(100vw - 2rem)); }
.crm .dash-kg-dlg-kopf { display: flex; align-items: flex-start; gap: 0.6667rem; padding: 1.0667rem 3rem 0.4rem 1.2rem; }
.crm .dash-kg-dlg-kopf > .dash-kg-i { margin-top: 0.1333rem; color: var(--text-2); }
.crm .dash-kg-dlg-kopf h2 { margin: 0; font-size: var(--fs-section); font-weight: 600; }
.crm .dash-kg-dlg-kopf p { margin: 0.1333rem 0 0; font-size: var(--fs-meta); color: var(--text-2); }
.crm .dash-kg-dlg-zu {
  position: absolute; top: 0.9333rem; right: 1rem; width: 1.8667rem; height: 1.8667rem; display: grid; place-items: center; padding: 0;
  background: none; border: 0; border-radius: var(--r-sm); color: var(--text-2); cursor: pointer;
}
.crm .dash-kg-dlg-zu:hover { background: var(--bg-hover); color: var(--text-1); }
.crm .dash-kg-dlg-rumpf { display: flex; flex-direction: column; gap: 0.8rem; padding: 0.4rem 1.2rem 0.9333rem; }
/* Beschriftung : Feld = 112 : 368 im Entwurf → anteilig 7 : 23. */
.crm .dash-kg-zeile { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 23fr); gap: 0.8rem; align-items: start; font-size: var(--fs-ui); }
.crm .dash-kg-zeile > label, .crm .dash-kg-lab { padding-top: 0.4rem; font-size: var(--fs-meta); font-weight: 600; color: var(--text-2); }
.crm .dash-kg-feld {
  display: flex; align-items: center; gap: 0.5333rem; padding: 0 0.6667rem; background: var(--bg-surface);
  border: 0.0625rem solid var(--border-strong); border-radius: var(--r-md);
}
.crm .dash-kg-feld:focus-within { border-color: var(--ad-blue); box-shadow: 0 0 0 0.2rem color-mix(in srgb, var(--ad-blue) 18%, transparent); }
.crm .dash-kg-feld input { flex: 1 1 auto; min-width: 0; padding: 0.4667rem 0; font: inherit; font-size: var(--fs-ui); color: var(--text-1); background: none; border: 0; outline: 0; }
.crm .dash-kg-feld small { flex: 0 0 auto; font-size: var(--fs-label); color: var(--text-3); font-variant-numeric: tabular-nums; }
.crm .dash-kg-auswahl {
  width: 100%; padding: 0.4rem 0.6667rem; font: inherit; font-size: var(--fs-meta); color: var(--text-1);
  background: var(--bg-surface); border: 0.0625rem solid var(--border-strong); border-radius: var(--r-md);
}
.crm .dash-kg-auswahl:focus-visible { outline: 0.125rem solid var(--focus); outline-offset: 0.0625rem; }
.crm .dash-kg-seg { display: inline-flex; justify-self: start; padding: 0.1333rem; gap: 0.1333rem; background: var(--bg-surface-3); border-radius: var(--r-md); }
.crm .dash-kg-seg-opt { position: relative; }
.crm .dash-kg-seg-opt input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.crm .dash-kg-seg-opt span { display: block; padding: 0.2667rem 0.6667rem; font-size: var(--fs-label); font-weight: 500; color: var(--text-2); border-radius: var(--r-sm); }
.crm .dash-kg-seg-opt input:checked + span { background: var(--bg-surface); color: var(--text-1); font-weight: 600; box-shadow: var(--shadow-1); }
.crm .dash-kg-seg-opt input:focus-visible + span { outline: 0.125rem solid var(--focus); outline-offset: 0.0625rem; }
.crm .dash-kg-marken { display: flex; flex-wrap: wrap; gap: 0.4rem; padding-top: 0.2rem; }
.crm .dash-kg-marken span {
  display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.2rem 0.6rem; font-size: var(--fs-label); font-weight: 600;
  background: var(--bg-surface-3); border-radius: 0.4667rem;
}
.crm .dash-kg-marken .dash-kg-i { width: 0.8667rem; height: 0.8667rem; color: var(--ad-blue); stroke-width: 2.4; }
.crm .dash-kg-dlg-fuss {
  display: flex; align-items: center; gap: 0.5333rem; padding: 0.8rem 1.2rem; font-size: var(--fs-label); color: var(--text-2);
  background: var(--bg-surface-2); border-top: 0.0625rem solid var(--border); border-radius: 0 0 var(--r-xl) var(--r-xl);
}
.crm .dash-kg-reich { display: inline-flex; align-items: center; gap: 0.5333rem; white-space: nowrap; }
.crm .dash-kg-reich .dash-kg-i { color: var(--text-3); }
.crm .dash-kg-fuss-fehler { color: var(--ad-red-700); font-weight: 600; }
/* „Gruppe bearbeiten“ (Legende 9): eigene Leiste direkt unter der Instanz — Personen-Symbol,
   Reichweite, rechts „Abbrechen“ · „Änderung speichern“. Name im Kopf als Feld, × je Kachel. */
.crm .crm-dw-grid > .dash-kg-reichleiste { grid-column: 1 / -1; }
.crm .dash-kg-reichleiste {
  display: flex; align-items: center; gap: 0.5333rem; padding: 0.8rem 1.2rem; font-size: var(--fs-label); color: var(--text-2);
  background: var(--bg-surface-2); border: 0.0625rem solid var(--border); border-radius: var(--r-xl); box-shadow: var(--shadow-2);
}
.crm .dash-kg-name-feld { flex: 0 1 16rem; min-width: 6rem; }
.crm .dash-kg-name-feld input {
  width: 100%; padding: 0.2667rem 0.5333rem; font: inherit; font-size: var(--fs-body); font-weight: 600; color: var(--text-1);
  background: var(--bg-surface); border: 0.0625rem solid var(--ad-blue); border-radius: var(--r-md);
  box-shadow: 0 0 0 0.2rem color-mix(in srgb, var(--ad-blue) 18%, transparent); outline: 0;
}
.crm .dash-kg-kachel-raus {
  margin-left: auto; flex: none; display: grid; place-items: center; width: 1.6rem; height: 1.6rem; padding: 0;
  background: none; border: 0; border-radius: var(--r-sm); color: var(--text-2); cursor: pointer;
}
.crm .dash-kg-kachel-raus:hover { background: var(--bg-hover); color: var(--text-1); }
.crm .dash-kg-kachel-raus:focus-visible { outline: 0.125rem solid var(--focus); outline-offset: 0.0625rem; }
.crm .dash-kg .sr-only, .crm .dash-kg-name-feld .sr-only { position: absolute; width: 0.0625rem; height: 0.0625rem; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
/* Einsetzen (Legende 6): Optionsliste, das eigene CC vorgewaehlt. */
.crm .dash-kg-opts { display: flex; flex-direction: column; gap: 0.1333rem; }
.crm .dash-kg-opt {
  position: relative; display: flex; align-items: center; gap: 0.5333rem; padding: 0.3333rem 0.5333rem;
  font-size: var(--fs-label); color: var(--text-1); border-radius: 0.4667rem; cursor: pointer;
}
.crm .dash-kg-opt input {
  appearance: none; -webkit-appearance: none; flex: none; width: 0.9333rem; height: 0.9333rem; margin: 0;
  border: 0.1067rem solid var(--border-strong); border-radius: 50%; background: var(--bg-surface); cursor: pointer;
}
.crm .dash-kg-opt input:checked { border: 0.2667rem solid var(--ad-blue); }
.crm .dash-kg-opt input:focus-visible { outline: 0.125rem solid var(--focus); outline-offset: 0.125rem; }
.crm .dash-kg-opt:hover { background: var(--bg-hover); }
.crm .dash-kg-opt.ist-an { background: var(--tint-blue); color: var(--ad-blue-700); font-weight: 600; }
.crm .dash-kg-opt small { margin-left: auto; font-size: var(--fs-label); font-weight: 500; color: var(--text-3); }

/* Katalog-Bereich „Kachelgruppen" (Legende 4): Symbol hellblau, Link rechts in der Bereichszeile. */
.crm .dash-kat-kg-titel { display: flex; align-items: center; gap: var(--s-2); }
.crm .dash-kat-kg-anlegen { margin-left: auto; font-size: var(--fs-meta); font-weight: 600; letter-spacing: 0; text-transform: none; text-decoration: none; }
.crm .dash-kat-kg-anlegen:hover { text-decoration: underline; }
.crm .dash-kat-symbol.ist-gruppe { background: var(--tint-blue); border-color: color-mix(in srgb, var(--ad-blue) 20%, var(--bg-surface)); color: var(--ad-blue-700); }
.crm .dash-kat-kg-leer { margin: 0; padding: var(--s-2) 0.4rem; font-size: var(--fs-meta); color: var(--text-2); }

@keyframes dash-kg-peek { from { opacity: 0; transform: translateY(-0.25rem); } to { opacity: 1; transform: none; } }
@keyframes dash-kg-dlg-ein { from { opacity: 0; transform: translate(-50%, 0.4rem); } to { opacity: 1; transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) {
  .crm .dash-kg-menue, .crm .dash-kg-dlg { animation: none; }
}
@media (max-width: 60rem) {
  .crm .dash-kg-kacheln { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 40rem) {
  .crm .dash-kg-kacheln { grid-template-columns: minmax(0, 1fr); }
  .crm .dash-kg-zeile { grid-template-columns: minmax(0, 1fr); gap: 0.2667rem; }
  .crm .dash-kg-meta { display: none; }
}

/* Ziehen: die gegriffene Karte hebt sich, an der Zielstelle liegt der schraffierte Platz. */
.crm .dw-card.dash-angehoben { box-shadow: 0 0.5rem 1.5rem rgba(0, 0, 0, 0.18); opacity: 0.96; cursor: grabbing; }
.crm .dash-platzhalter {
  display: flex; align-items: center; justify-content: center; box-sizing: border-box;
  border: 0.125rem dashed var(--ad-blue); border-radius: var(--r-lg);
  background: repeating-linear-gradient(-45deg, var(--ad-blue-300) 0 .2rem, var(--tint-blue) .2rem .4rem);
}
.crm .dash-platzhalter-text { font-size: var(--fs-ui); font-weight: 600; color: var(--ad-blue-700); background: var(--bg-surface); border-radius: var(--r-sm); padding: var(--s-1) var(--s-3); }
@media (prefers-reduced-motion: reduce) {
  .crm .dw-card.dash-angehoben { box-shadow: none; opacity: 1; }
}

/* Die grossen Schaubilder bleiben ausserhalb des Spaltenmodells und behalten
   ihr bisheriges Verhalten (bewusst ausserhalb von PR1.307/1.308).

   PR1.311 (#520): die Mindestbreite von 20rem auf 28rem gehoben. Seit diese Karten
   echte Diagramme zeigen, ist die Breite nicht mehr nur Geschmack: chart-kit zeichnet
   in fester 800er-Breite mit festen Abstaenden, und auf 20rem (=320px, bei 1280px
   Fensterbreite drei Spalten a ~380px) ueberlappten die zwoelf Monatsbeschriftungen
   der Auslastungslinie einander — gemessen von test/layout, 13 Fundstellen bei 768
   und bei 1280. Ab 28rem liegen es hoechstens zwei Spalten, und die Beschriftung hat
   wieder Platz. In `rem`, damit der ui-craft-Ratchet `raw-px` nicht steigt. */
.crm .crm-dw-grid-charts {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--s-3);
  align-items: start;
}

.crm .crm-dw-grid-charts > .dw-card.dash-size-klein  { grid-column: span 1; }
.crm .crm-dw-grid-charts > .dw-card.dash-size-mittel { grid-column: span 2; }
.crm .crm-dw-grid-charts > .dw-card.dash-size-gross  { grid-column: span 4; }

/* Die Umbrueche stehen bewusst HIER und nicht in den bestehenden px-Bloecken weiter
   oben: die Grundregel `.crm .crm-dw-grid` hat dieselbe Spezifitaet und steht in der
   Datei spaeter — sie haette jede frueher notierte Media-Regel wieder ueberstimmt, und
   das Redesign waere auf schmalem Fenster stur vierspaltig geblieben (gemessen).
   In `rem` statt `px`, damit der ui-craft-Ratchet `raw-px` nicht steigt; 64rem/48rem
   entsprechen den 1024px/768px der uebrigen Shell-Breakpoints. */
@media (max-width: 64rem) {
  .crm .crm-dw-grid , .crm .crm-dw-grid-charts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .crm .dw-card.dash-size-klein  { grid-column: span 1; }
  .crm .dw-card.dash-size-mittel { grid-column: span 1; }
  .crm .dw-card.dash-size-gross  { grid-column: span 2; }
  /* Dieselben Spannen noch einmal mit der Spezifitaet des charts-Rasters: dessen
     Grundregel traegt drei Klassen und haette die zwei Zeilen darueber sonst
     ueberstimmt — eine `gross`-Karte waere mit `span 4` in einem Zweispalter stehen
     geblieben und ueber ihre Nachbarin gelaufen (gemessen: 14px Ueberlappung). */
  .crm .crm-dw-grid-charts > .dw-card.dash-size-klein  { grid-column: span 1; }
  .crm .crm-dw-grid-charts > .dw-card.dash-size-mittel { grid-column: span 1; }
  .crm .crm-dw-grid-charts > .dw-card.dash-size-gross  { grid-column: span 2; }
}

/* Eine Spalte: jede Karte ist voll breit, unabhaengig von der Stufe. Das ist die
   Zusicherung „auf schmalem Fenster wird gross zur vollen Breite". */
@media (max-width: 48rem) {
  .crm .crm-dw-grid , .crm .crm-dw-grid-charts { grid-template-columns: minmax(0, 1fr); }
  .crm .dw-card.dash-size-klein ,
  .crm .dw-card.dash-size-mittel ,
  .crm .dw-card.dash-size-gross { grid-column: span 1; }
  .crm .crm-dw-grid-charts > .dw-card.dash-size-klein ,
  .crm .crm-dw-grid-charts > .dw-card.dash-size-mittel ,
  .crm .crm-dw-grid-charts > .dw-card.dash-size-gross { grid-column: span 1; }
}

/* ============================================================
   PR1.189 (#347) — In-App-Feedback, Redesign-Gesicht
   ============================================================
   Struktur und Abstaende des Formulars stehen in style.css und sind NICHT
   .crm-gescopt — sie greifen damit bereits in beiden Shells. Hier wird deshalb
   kein Layout wiederholt, sondern nur die Designsprache uebersetzt: die
   Legacy-Tokens werden im .crm-Scope auf ihre Redesign-Entsprechung gemappt.

   Das hat zwei Vorteile ueber eine zweite Regelmenge: Layoutaenderungen bleiben
   an einer Stelle (ein Gehirn, zwei Gesichter — Konvention 20), und dieser Block
   kommt ohne einen einzigen rohen px- oder Hex-Wert aus, wie Konvention 21 und
   der ui-craft-Ratchet es verlangen. Dark wird automatisch mitgetragen, weil die
   Zieltokens selbst themenabhaengig sind. */
.crm .fb-form,
.crm .fb-foot {
  /* PR1.229: die naechsten vier stehen seit PR1.229 auch an der .crm-Wurzel und
     sind hier redundant. Sie bleiben als Selbstbeschreibung des Bausteins
     stehen — der Block traegt weiterhin allein, was die Wurzel nicht fuehrt
     (--primary/-glow, --danger, --warning, --radius*, --transition). */
  --bg-card: var(--bg-surface);
  --bg-card2: var(--bg-surface-2);
  --bg-input: var(--bg-surface);
  --border-light: var(--border);
  /* Bewusste Abweichung von der Wurzel (--bg-hover dort auf eigenem Wert):
     Formularzeilen heben sich flaechig ab, nicht ueber einen Hover-Ton. */
  --bg-hover: var(--bg-surface-3);
  --primary: var(--ad-blue);
  --primary-glow: var(--tint-blue);
  --danger: var(--ad-red);
  --warning: var(--ad-orange-700);
  --radius: var(--r-md);
  --radius-sm: var(--r-sm);
  --transition: var(--t-fast);
}

/* Die Kategorie-Wahl ist der erste Schritt und traegt deshalb die
   Condensed-Schrift der Redesign-Kopfzeilen. */
.crm .fb-legend { font-family: var(--f-cond); }
.crm .fb-cat { font-family: var(--f-cond); letter-spacing: 0.01em; }

/* Der Zaehler ist eine Messgroesse — im Redesign steht so etwas in Mono. */
.crm .fb-count { font-family: var(--f-mono); font-variant-numeric: tabular-nums; }

/* PR1.330 (#542) — Die Bestaetigung nach dem Absenden traegt die Condensed-
   Schrift der Redesign-Kopfzeilen. Farben und Abstaende kommen aus style.css
   ueber die Token-Bruecke oben; das Haekchen-Zeichen bleibt bewusst in Blau,
   Gruen ist im Redesign keine Textfarbe. */
.crm .fb-done-title { font-family: var(--f-cond); }
/* Die Hinweiszeile unter den Aufnahme-Knoepfen ist Fliesstext: --ad-orange-700 lag im Hellen
   bei 3,0:1. Hell die -900-Stufe, Dunkel die helle Markenstufe — Muster wie .conf-mid. */
.crm .fb-hint { color: var(--ad-orange-900); }
.crm.dark .fb-hint , html[data-theme="dark"] .crm .fb-hint { color: var(--ad-orange); }

/* Der Fuss traegt links die Begruendung, rechts die Knoepfe (crmModalFoot). */
.crm .fb-foot { display: flex; align-items: center; gap: var(--s-3); }

/* PR1.189 (#347) — Konto-Bereich unten in der Seitenleiste. PR1.402 (#632): der
   Feedback-Knopf ist von hier als Sprechblase in die Kopfleiste gewandert; der
   Container bleibt, damit der Konto-Bereich weiter nach unten geschoben wird. */
.crm .sb-bottom { margin-top: auto; }
.crm .sb-bottom .sb-foot { margin-top: 0; }

/* ============================================================
   PR1.191 (#350) — Auswahl-Baustein, Redesign-Gesicht
   ============================================================
   Struktur und Abstaende des Bausteins stehen in style.css und sind NICHT
   .crm-gescopt — sie greifen damit bereits in beiden Shells. Hier wird deshalb
   kein Layout wiederholt, sondern nur die Designsprache uebersetzt: die
   Legacy-Tokens werden im .crm-Scope auf ihre Redesign-Entsprechung gemappt.
   Gleiches Vorgehen wie PR1.189 (#347) weiter oben — ein Gehirn, zwei Gesichter
   (Konvention 20), und der Block kommt ohne einen einzigen rohen px- oder
   Hex-Wert aus, wie Konvention 21 und der ui-craft-Ratchet es verlangen. Dark
   traegt sich automatisch mit, weil die Zieltokens selbst themenabhaengig sind.

   Kein `transition`: der Baustein wird dutzende Male am Tag ueber die Tastatur
   bedient (Konvention 22, DESIGN.md-Prinzip 2 „Frequenz bestimmt Motion"). */
.crm .ms,
.crm .ms-list {
  /* PR1.229: die naechsten vier sind seit PR1.229 auch an der .crm-Wurzel belegt
     und hier redundant; sie bleiben als Selbstbeschreibung stehen. Eigenstaendig
     bleiben --primary, --radius-sm und vor allem --danger (dunklere Stufe). */
  --bg-card: var(--bg-surface);
  --bg-card2: var(--bg-surface-2);
  --bg-input: var(--bg-surface);
  --border-light: var(--border);
  /* Bewusste Abweichung von der Wurzel — s. Feedback-Block oben. */
  --bg-hover: var(--bg-surface-3);
  --primary: var(--ad-blue);
  --radius-sm: var(--r-sm);
  /* --ad-red traegt weisse Schrift nur auf 3.91:1 — fuer Flaechen mit Text gilt
     die dunklere Stufe (siehe Kontrast-Reparatur RD1.13 am Token selbst). */
  --danger: var(--ad-red-700);
}

/* Die Gruppen-Ueberschrift ist eine Kopfzeile — im Redesign traegt so etwas
   die Condensed-Schrift, wie die uebrigen Abschnittstitel. */
.crm .ms-group-header { font-family: var(--f-cond); }

.crm .ms-chip-x:hover { color: var(--text-inv); }

/* BF-40 (#439) — Der markierte Chip (siehe style.css). Im Redesign traegt `--danger`
   bereits die dunklere Rotstufe (--ad-red-700, Kontrast-Reparatur RD1.13), die Regel
   oben greift also schon richtig. Hier steht nur, was darueber hinaus noetig ist: der
   getoente Grund folgt der Filter-Pillen-Sprache dieser Shell statt dem grauen
   Hover-Ton der klassischen. */
/* Rahmen und Textfarbe muessen HIER mitstehen, nicht nur in style.css: die
   `.crm .chip`-Regeln dieser Datei haben dieselbe Spezifitaet und kommen spaeter in der
   Kaskade — im Browser gemessen kam sonst nur der Innenrahmen durch, waehrend der
   aeussere Rand grau blieb. */
.crm .ms-chip.is-armed {
  background: var(--tint-red, var(--bg-surface-2));
  border-color: var(--ms-armed);
  color: var(--text-1);
}

/* Im Dunkeln liegt derselbe Rahmen (--danger = --ad-red-700, #C4353A) auf dem dunklen
   Marken-Grund (--tint-red, #3A1F20) bei nur 2.80:1 und verfehlt damit die 3:1, die
   WCAG 1.4.11 fuer nicht-textuelle Bedienelemente verlangt. Eine Stufe heller loest das
   (#E5484D: 3.84:1 auf dem Chip, 4.47:1 gegen den App-Grund daneben) — dieselbe
   Zwei-Stufen-Logik wie beim Fokus-Ring (RD1.11) und beim --danger-Token selbst.
   Nur die Farbe, nicht die Form: den Innenrahmen setzt style.css einmal. */
.crm.dark .ms-chip.is-armed,
html[data-theme="dark"] .crm .ms-chip.is-armed { --ms-armed: var(--ad-red); }

/* Aktive Pillen folgen der Filter-Pillen-Sprache des Redesigns (.fpill.is-on):
   getoenter Grund mit farbigem Text, nicht Weiss auf Vollton. */
.crm .ms-pill { background: var(--bg-surface); }
.crm .ms-pill:hover:not(:disabled) { border-color: var(--border-strong); }
.crm .ms-pill.is-on {
  background: var(--tint-blue);
  border-color: var(--ad-blue-300);
  color: var(--ad-blue);
}

/* Fokusring ist im Redesign ein eigenes Token, kein Primaerton. */
.crm .ms-chip-x:focus-visible,
.crm .ms-option:focus-visible,
.crm .ms-pill:focus-visible,
.crm .ms-retry:focus-visible { outline-color: var(--focus); }

/* ============================================================
   PR1.190 (#349) — Schritt-Huelle, Redesign-Gesicht
   ============================================================
   Struktur, Abstaende und Verhalten stehen in style.css und sind nicht
   .crm-gescopt — sie greifen damit bereits in beiden Shells. Hier wird deshalb
   kein Layout wiederholt, sondern nur die Designsprache uebersetzt: die von der
   Huelle benutzten Legacy-Tokens werden im .crm-Scope auf ihre
   Redesign-Entsprechung gemappt (Muster PR1.189, Block oben).

   Damit bleibt das Layout an einer Stelle (Konvention 20), Dark wird automatisch
   mitgetragen, weil die Zieltokens selbst themenabhaengig sind, und dieser Block
   kommt ohne einen einzigen rohen px- oder Hex-Wert aus, wie Konvention 21 und
   der ui-craft-Ratchet es verlangen. */
.crm .fw {
  /* PR1.229: die naechsten vier sind seit PR1.229 auch an der .crm-Wurzel belegt
     und hier redundant; sie bleiben als Selbstbeschreibung stehen. Eigenstaendig
     bleiben --text-muted, --primary, --success, --radius-sm und --transition. */
  --bg-card2: var(--bg-surface-2);
  --border-light: var(--border);
  --text-primary: var(--text-1);
  --text-secondary: var(--text-2);
  /* Bewusste Abweichung von der Wurzel — s. Feedback-Block oben. */
  --bg-hover: var(--bg-surface-3);
  --text-muted: var(--text-3);
  --primary: var(--ad-blue);
  --success: var(--ad-green-700);
  --radius-sm: var(--r-sm);
  --transition: var(--t-fast);
}

/* PR1.454 #702 — Zeitraum-Kalender: Geometrie in style.css, hier nur die Tokens.
   Flaeche und Schatten wie `.crm .popover`, Auswahl im adesso-Blau. */
.crm .drp {
  --drp-surface: var(--bg-surface);
  --drp-line: var(--border);
  --drp-hover: var(--bg-surface-3);
  --drp-range: var(--tint-blue);
  --drp-edge: var(--ad-blue-700);
  --drp-edge-text: var(--text-inv);
  --drp-focus: var(--focus);
  --drp-holiday: var(--ad-orange);
  --drp-radius: var(--r-md);
  --drp-day-radius: var(--r-sm);
  --drp-shadow: var(--shadow-3);
}
.crm .drp-title { font-family: var(--f-cond); }
/* PR1.584 #903 — Frage am Feld / Fehler rot am Feld: Grundregeln in style.css (beide
   Shells), hier nur die Farben der Redesign-Sprache. Ocker = Warnton ohne Orange-Tint
   (Farbregel 30.10.: Orange bleibt Anlegen und KI). */
/* Grund und Text erbt der Scope aus style.css (:root hell/dunkel) — keine zweite Ocker-Quelle. */
.crm { --feld-fehler: var(--ad-red-700); }
.crm.dark , html[data-theme="dark"] .crm {
  --feld-frage-grund: color-mix(in srgb, var(--warning) 18%, var(--bg-surface));
  --feld-fehler: var(--ad-red-300);
}
.crm .feld-frage-btn { background: var(--bg-surface); border-color: var(--border); color: var(--text-1); }
.crm .feld-frage-btn.is-ghost { background: none; border-color: transparent; color: var(--text-2); }
.crm .feld-frage-btn:focus-visible { outline-color: var(--focus); }

/* PR1.455 #704 — Rollenzeilen mit Personen: Geometrie in style.css, hier nur die Tokens.
   Balken und aktiver Schalter im adesso-Blau, Hinweistext in der lesbaren Orange-Stufe. */
.crm .opp-role-card {
  --bg-subtle: var(--bg-surface-2);
  --primary: var(--ad-blue);
  --primary-dark: var(--ad-blue-700);
  --warning: var(--ad-orange-900);
  --radius-sm: var(--r-sm);
  --bg-input: var(--bg-surface);
}
.crm.dark .opp-role-card, html[data-theme="dark"] .crm .opp-role-card { --warning: var(--ad-orange); }
.crm .role-seg-btn.is-active { color: var(--text-inv); }
.crm .role-pt, .crm .role-stepper input { font-family: var(--f-mono); font-variant-numeric: tabular-nums; }

/* PR1.485 A — Spalte „Wer", Leiste, „Ohne Rolle", Suchliste: Geometrie in style.css, hier
   nur die Tokens. Die Suchliste haengt in `.role-row-wrap` (ausserhalb `.opp-role-card`),
   deshalb eine eigene Zuordnung. Marke „Extern" wie die Orange-Badges: -900-Stufe auf
   --tint-orange (5,3:1), dunkel --ad-orange auf dunklem Tint (6,9:1). Fokus ueber --focus
   (dunkel --ad-blue-300; --ad-blue kaeme dort auf 1,7:1). */
.crm .role-row-wrap,
.crm .role-unassigned,
.crm .role-who-banner,
.crm .role-who-count,
.crm .role-pick {
  --primary: var(--ad-blue);
  --primary-dark: var(--ad-blue-700);
  --primary-text: var(--ad-blue-700);
  --warning: var(--ad-orange-900);
  --danger: var(--ad-red-700);
  --success: var(--ad-green-900);
  --bg-card: var(--bg-surface);
  --bg-card2: var(--bg-surface-2);
  --bg-hover: var(--bg-surface-3);
  --bg-input: var(--bg-surface);
  --border-light: var(--border-strong);
  --radius-sm: var(--r-sm);
  --radius: var(--r-md);
  --shadow: var(--shadow-3);
  --role-ext-ink: var(--ad-orange-900);
  --role-ext-ground: var(--tint-orange);
  --role-who-ok: var(--ad-green-900);
}
.crm.dark .role-row-wrap, html[data-theme="dark"] .crm .role-row-wrap,
.crm.dark .role-unassigned, html[data-theme="dark"] .crm .role-unassigned,
.crm.dark .role-who-banner, html[data-theme="dark"] .crm .role-who-banner,
.crm.dark .role-pick, html[data-theme="dark"] .crm .role-pick {
  --primary-text: var(--ad-blue-300);
  --warning: var(--ad-orange);
  --danger: var(--ad-red-300);
  --success: var(--ad-green);
  --role-ext-ink: var(--ad-orange);
  --role-who-ok: var(--ad-green);
}
.crm .role-who-banner { border-left-color: var(--ad-blue); background: var(--tint-blue); }
.crm .role-pick-seg-btn.is-active { color: var(--text-inv); }
.crm .role-pick-titles strong { font-family: var(--f-cond); }
.crm .role-pick-free-text { font-family: var(--f-mono); font-variant-numeric: tabular-nums; }
.crm .role-who-open:focus-visible,
.crm .role-who-chip:focus-visible,
.crm .role-who-clear:focus-visible,
.crm .role-who-act:focus-visible,
.crm .role-pick-seg-btn:focus-visible,
.crm .role-pick-foot-btn:focus-visible,
.crm .role-pick-search:focus-within,
.crm .role-pick-opt.is-active { outline-color: var(--focus); }

/* Schrittbeschriftungen sind Kopfzeilen der Maske und tragen deshalb die
   Condensed-Schrift der Redesign-Ueberschriften. */
.crm .fw-step-label { font-family: var(--f-cond); }

/* „3 von 8" ist eine Messgroesse — so etwas steht im Redesign in Mono. */
.crm .fw-progress-num { font-family: var(--f-mono); font-variant-numeric: tabular-nums; }

/* PR1.457 #703 — Seitenspalte und Chips: Geometrie in style.css; hier nur die
   Redesign-Optik (Mono fuer Messgroessen, Kartengrund, Tokens statt Rohwerte). */
.crm .fw-aside { background: var(--bg-surface-2); border-radius: var(--r-md); }
.crm .fw-ring-num,
.crm .fw-aside-step-num,
.crm .fw-glance dd { font-family: var(--f-mono); font-variant-numeric: tabular-nums; }
.crm .fw-aside-title { font-family: var(--f-cond); }
.crm .fw-ring-fill { stroke: var(--ad-blue); }
.crm .fw-chip:hover { border-color: var(--ad-blue); }

/* ── PR1.198 #357 — Der ⓘ neben einem Formular-Label ────────────────────────
   Geometrie und Verhalten stehen in style.css; hier nur die Redesign-Optik.
   Der Fokusring kommt aus der generischen `.crm :focus-visible`-Regel oben —
   eine eigene Regel waere Doppelung und wuerde den focus-visible-Zaehler
   verwaessern. Nur Tokens, rem und Prozent (Pruefungen raw-px, raw-hex). */
.crm .fh-btn { color: var(--text-2); }
.crm .fh-btn > span { border-color: var(--border-strong); }
.crm .fh-btn:hover,
.crm .fh-btn[aria-expanded="true"] { color: var(--focus); }
.crm .fh-btn:hover > span,
.crm .fh-btn[aria-expanded="true"] > span { border-color: var(--focus); }
/* Der Hinweis schwebt ueber dem Feld und muss sich klar davon abheben — in
   `--bg-surface-2` mit `--text-2` sah er in der Sichtpruefung 07.08.2026 aus wie der
   Placeholder des Feldes darunter. Kraeftigere Flaeche, voller Text, grosser Schatten
   und die Interaktivfarbe als Rahmen: er liegt sichtbar DAVOR. */
.crm .fh-pop {
  background: var(--bg-surface-3);
  border-color: var(--focus);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-3);
  color: var(--text-1);
  font-family: var(--f-sans);
}

/* PR1.213 #373 — Externen-Tabelle der Projekt-Detailseite. Der waagerechte Scroll-Rahmen
   steht hier und nicht inline in `crm-project-detail.js`: die Datei darf genau einen
   Scroll-Container tragen (Ratchet `scroll-container`), und ein zweiter inline haette die
   Baseline gebrochen. Nur `overflow-x` — keine px, keine Hex (raw-px, raw-hex). */
.crm .ext-table-scroll { overflow-x: auto; }

/* ────────────────────────────────────────────────────────────────────────────
   PR1.240 (#417) — KB-Status: Bestand und Verdrahtung (Redesign-Shell)

   Die Landeansicht des KB Command Center ist eine Status-Seite: Kennzahlen, eine
   Tabelle je Datensatztyp, aufklappbare Befundlisten. Keine Animation — das Auf-
   und Zuklappen laeuft ueber <summary> und ist tastaturinitiiert.

   Zwei Dinge stehen hier bewusst NICHT:
   • Kein eigener Fokusring — die generische `.crm :focus-visible`-Regel (:1836)
     greift auf <summary> und <button> von selbst.
   • Kein eigener Rahmen fuer `.kb-finding` — der Befund traegt im Markup `card`
     und bekommt Rahmen, Radius und Schatten von dort.
   Beides waeren zusaetzliche rohe px-Werte, und der Ratchet `raw-px` (Konvention 21)
   laesst die Zahl nur sinken.

   Die Overflow-Regeln stehen hier statt inline in `crm-kb-command-center.js`: die
   Datei traegt bereits ihren einen Scroll-Container (Ratchet `scroll-container`) —
   dieselbe Ueberlegung wie bei `.ext-table-scroll` (PR1.213 #373).
   ──────────────────────────────────────────────────────────────────────────── */

.crm .kb-status-body { padding: var(--s-4) var(--s-6); overflow-y: auto; }

/* Erklaerender Fliesstext.
   NICHT `.note` verwenden: die Klasse ist die Zahlen-Schrift (--f-mono, :—) und damit fuer Zahlenkolonnen
   und IDs gedacht, nicht fuer Saetze. Auf dieser Seite steht viel erklaerender Text
   („Das Feld ist gefuellt, das Ziel existiert nicht mehr …") — in Mono liest sich das
   wie ein Log-Auszug. Schriftgroesse in em statt px: die Skala bleibt relativ und der
   Ratchet `raw-px` sieht keinen neuen harten Wert. */
.crm .kb-prose { color: var(--text-2); max-width: 70ch; font-size: var(--fs-body); }

.crm .kb-kpi-label { color: var(--text-3); font-size: var(--fs-ui); margin-top: var(--s-1); }

/* Breite Tabellen scrollen in sich, die Seite selbst nie waagerecht. */
.crm .kb-status-scroll { overflow-x: auto; }

.crm .kb-events-toggle {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  margin-top: var(--s-3);
  color: var(--text-2);
  cursor: pointer;
}

/* ── Befunde ── */
.crm .kb-finding { margin-bottom: var(--s-2); }

.crm .kb-finding-summary {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  padding: var(--s-3) var(--s-4);
  cursor: pointer;
  list-style: none;
  color: var(--text-1);
}

.crm .kb-finding-summary::-webkit-details-marker { display: none; }

.crm .kb-finding-summary::before { content: ''; display: inline-block; width: 1em; height: 1em; flex: 0 0 auto; background-color: currentColor; -webkit-mask: var(--ic-mask-caret-right); mask: var(--ic-mask-caret-right); color: var(--text-3); }

.crm .kb-finding[open] > .kb-finding-summary::before { -webkit-mask: var(--ic-mask-caret-down); mask: var(--ic-mask-caret-down); }

.crm .kb-finding-count {
  background: var(--bg-surface-3);
  border-radius: var(--r-xl);
  padding-inline: var(--s-2);
  font-variant-numeric: tabular-nums;
  color: var(--text-2);
}

/* Nur die Stufe „kaputt" traegt Farbe, und zwar an der Zahl statt am Rand: eine
   Randlinie waere ein weiterer roher px-Wert, und der Zaehler ist ohnehin die
   Stelle, auf die das Auge zuerst faellt. Tint + dunkle Schrift ist die Sprache
   der Statusfelder dieser Shell (AA auf hellem Grund). */
.crm .kb-finding.is-broken .kb-finding-count {
  background: var(--tint-red);
  color: var(--ad-red-800);
  font-weight: 600;
}

.crm .kb-finding-hint { margin: 0; padding: 0 var(--s-4) var(--s-2); }

.crm .kb-finding-list {
  margin: 0;
  padding: 0 var(--s-4) var(--s-3);
  list-style: none;
  max-height: 20rem;
  overflow-y: auto;
}

.crm .kb-finding-item {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--s-2);
  padding-block: var(--s-1);
}

.crm .kb-finding-link {
  appearance: none;
  background: none;
  border: none;
  padding: 0;
  font: inherit;
  color: var(--ad-blue);
  text-align: left;
  cursor: pointer;
}

.crm .kb-finding-link:hover { text-decoration: underline; }

/* PR1.241 (#418) — zweiter Weg pro Befund: „wie hängt DAS hier zusammen".
   Zurückhaltender gesetzt als der Name: der Sprung in die Detailansicht ist der
   häufigere Weg und behält die stärkere Farbe.
   BEWUSST OHNE px — `raw-px` ist eine Ratchet-Kennzahl des Gates `ui-craft`
   (Konvention 21) und liegt auf ihrer Baseline. */
.crm .kb-finding-graph {
  margin-left: auto;
  padding: 0.1em 0.6em;
  border-radius: var(--r-sm);
  border: none;
  background: none;
  color: var(--text-3);
  font: inherit;
  font-size: var(--fs-ui);
  font-weight: 500;
  cursor: pointer;
}

.crm .kb-finding-graph:hover {
  color: var(--ad-blue);
  text-decoration: underline;
}

/* ── BF-33 #428 · Outbox-Anzeige in der Redesign-Topbar ────────────────────── */
/* Basis (Farbtoene, Einblenden, Zustandsklassen) steht in style.css und traegt
   hier durch — `--primary`, `--warning` und `--danger` sind im .crm-Scope oben
   auf die adesso-Palette gemappt, die Toene stimmen also von selbst.
   Hier steht nur die Geometrie, die zur Redesign-Topbar passt.

   BEWUSST OHNE px: `raw-px` ist eine Ratchet-Kennzahl des Gates `ui-craft`
   (Konvention 21) und liegt exakt auf ihrer Baseline — jeder harte Wert hier
   wuerde die Pipeline blockieren. Radien kommen aus den Tokens, Abstaende in
   em, damit sie mit der Schriftgroesse mitwandern. */
.crm .outbox-indicator {
  border-radius: var(--r-xl);
  font-size: var(--fs-meta);
  padding: 0.3em 0.85em;
  gap: 0.35em;
  white-space: nowrap;
}

/* Enge Topbar: der Zaehler ist die Information, der Satz darf weichen. */
.crm .outbox-indicator {
  max-width: 22em;
  overflow: hidden;
  text-overflow: ellipsis;
}

.crm .outbox-indicator:focus-visible {
  outline: 0.125rem solid var(--primary);
  outline-offset: 0.125rem;
}

/* PR1.904 · Toene der Speicheranzeige in der neuen Ansicht. Die Basisregeln liegen in
   style.css — das laedt die neue Ansicht aber nicht (Stylesheet-Trennung), Fehler und
   Offline standen dort deshalb als schwarzer Text ohne Rahmen. Hier dieselben drei Toene
   mit den Textstufen der neuen Ansicht (AA auf dem eigenen Tint), ohne Bewegung: die
   Anzeige erscheint in einem Moment, in dem man ohnehin beunruhigt ist. */
.crm .outbox-indicator {
  display: inline-flex;
  align-items: center;
  font-weight: 600;
  border: 0.0625rem solid transparent;
  background: transparent;
  color: var(--text-2);
  cursor: pointer;
}
.crm .outbox-indicator .ic { width: 1em; height: 1em; }
.crm .outbox-indicator.is-pending {
  color: var(--ad-orange-900);
  border-color: color-mix(in srgb, var(--ad-orange-700) 55%, transparent);
  background: var(--tint-orange);
}
.crm .outbox-indicator.is-error {
  color: var(--ad-red-700);
  border-color: color-mix(in srgb, var(--ad-red) 60%, transparent);
  background: var(--tint-red);
}
.crm .outbox-indicator.is-busy {
  color: var(--primary);
  border-color: color-mix(in srgb, var(--primary) 45%, transparent);
  background: var(--tint-blue);
  cursor: progress;
}
.crm.dark .outbox-indicator.is-pending,
html[data-theme="dark"] .crm .outbox-indicator.is-pending { color: var(--ad-orange); }
.crm.dark .outbox-indicator.is-error,
html[data-theme="dark"] .crm .outbox-indicator.is-error { color: var(--ad-red-300); }
.crm.dark .outbox-indicator.is-busy,
html[data-theme="dark"] .crm .outbox-indicator.is-busy { color: var(--primary-text); }

/* PR1.904 · leiser Zustand „Gespeichert ✓" — 2 s nach jedem bestaetigten Speichern, dann
   leer. Bewusst ohne Farbe, Rahmen und Hover: es ist eine Bestaetigung, keine Aufgabe.
   Das 120-ms-Einblenden der Basisregel entfaellt bei reduzierter Bewegung (style.css). */
.crm .outbox-indicator.is-saved {
  color: var(--text-2);
  background: transparent;
  border-color: transparent;
  cursor: default;
}

/* ════════════════════════════════════════════════════════════════════════════
   PR1.248 (#442) — Alternative Suchen (Redesign-Gesicht)
   ────────────────────────────────────────────────────────────────────────────
   Die dritte Kiste gab es bisher nur in der klassischen Shell. Bewusst KEIN
   Nachbau der `.opp-alt-*`-Optik aus style.css: beide Stylesheets sind
   gleichzeitig geladen, die alten Regeln griffen also technisch — aber sie
   tragen das Vokabular der Legacy-Shell. Konvention 20 verlangt hier denselben
   Token-Satz wie der Rest des Redesigns.

   Alle Masse als Token oder `rem`. Der ui-craft-Ratchet zaehlt jedes rohe
   px-Literal und jede Hex-Farbe in dieser Datei; beides blockt die CI.
   ════════════════════════════════════════════════════════════════════════════ */

.crm .crm-alt-panel { margin-bottom: var(--s-4); }

.crm .crm-alt-intro { font-size: var(--fs-ui); color: var(--text-2); line-height: 1.5; }

/* Leer-, Lade- und Fehlerzustand teilen sich eine Grundform — sie stehen an
   derselben Stelle und sollen sich nicht gegenseitig verspringen lassen. */
.crm .crm-alt-state {
  font-size: var(--fs-ui); color: var(--text-3); padding: var(--s-3) 0;
}
/* Fehlerfarbe theme-abhaengig: `--ad-red` (#E5484D) traegt auf hellem Grund nur
   3.91:1 und reisst AA fuer Text dieser Groesse. Die dunkle Variante waere im
   Dark-Theme umgekehrt zu dunkel — deshalb dasselbe Paar-Muster wie `.warn-box b`. */
.crm .crm-alt-state.is-error {
  color: var(--ad-red-700); display: flex; flex-wrap: wrap;
  align-items: center; gap: var(--s-2);
}
.crm.dark .crm-alt-state.is-error,
html[data-theme="dark"] .crm .crm-alt-state.is-error { color: var(--ad-red-300); }

.crm .crm-alt-spec {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: var(--s-2); margin-bottom: var(--s-3);
}
.crm .crm-alt-spec-why { font-size: var(--fs-meta); color: var(--text-3); }

.crm .crm-alt-split {
  display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  gap: var(--s-4); align-items: start;
}

/* Der EINE Scrollbereich dieser View. `overflow-y` steht im Markup (der Ratchet
   zaehlt Scroll-Container je View-Datei); hier nur seine Begrenzung. */
.crm .crm-alt-list {
  max-height: 32rem; min-height: 0;
  display: flex; flex-direction: column; gap: var(--s-2);
  padding-right: var(--s-1);
}

.crm .crm-alt-row {
  border: 0.0625rem solid var(--border); border-radius: var(--r-md);
  background: var(--bg-surface); padding: var(--s-2);
  display: flex; flex-direction: column; gap: var(--s-1);
  transition: border-color var(--t-fast) var(--ease-out), background var(--t-fast) var(--ease-out);
}
.crm .crm-alt-row:hover { background: var(--bg-hover); }
.crm .crm-alt-row.is-open { border-color: var(--ad-violet); background: var(--tint-violet); }
/* Uebernommen: ruhiger Zustand, kein Erfolgs-Jubel. Die Zeile bleibt lesbar und
   sagt nur, dass sie erledigt ist. */
.crm .crm-alt-row.is-taken { border-color: var(--ad-green); background: var(--tint-green); }

/* Die Zeile ist ein echter Knopf — zurueckgesetzt wird sein Aussehen, nicht seine
   Semantik. */
.crm .crm-alt-main {
  appearance: none; background: none; border: 0; padding: 0;
  font: inherit; color: inherit; text-align: left; cursor: pointer;
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2);
  min-width: 0; width: 100%;
}
.crm .crm-alt-name { font-weight: 600; min-width: 0; }
.crm .crm-alt-score {
  margin-left: auto; font-family: var(--f-mono); font-variant-numeric: tabular-nums; font-size: var(--fs-ui);
  font-weight: 500; padding: 0 var(--s-2); border-radius: var(--r-sm);
}

.crm .crm-alt-meta {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: var(--s-2); font-size: var(--fs-meta); color: var(--text-3);
}
.crm .crm-alt-avail { min-width: 0; }
.crm .crm-alt-take { margin-left: auto; }
/* Bewusst KEINE gruene Schrift: `--ad-green` (#76C800) kommt auf hellem Grund auf
   2.09:1, `--ad-green-700` auf 3.23:1 — beides reisst AA fuer Text dieser Groesse.
   Den Zustand traegt der Zeilenrahmen (`.is-taken`) plus das Haekchen im Wortlaut. */
.crm .crm-alt-done {
  margin-left: auto; color: var(--text-2); font-weight: 600; white-space: nowrap;
}

.crm .crm-alt-detail {
  border: 0.0625rem solid var(--border); border-radius: var(--r-md);
  background: var(--bg-surface-2); padding: var(--s-3);
  display: flex; flex-direction: column; gap: var(--s-3); min-width: 0;
}
.crm .crm-alt-detail-head {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: var(--s-2); justify-content: space-between;
}
.crm .crm-alt-detail-sec { font-size: var(--fs-ui); line-height: 1.5; }
.crm .crm-alt-detail-t {
  font-size: var(--fs-label); font-weight: 500; color: var(--text-3); margin-bottom: var(--s-1);
}
.crm .crm-alt-muted { color: var(--text-3); }

.crm .crm-alt-foot {
  margin-top: var(--s-3); font-size: var(--fs-meta); color: var(--text-3);
  font-family: var(--f-mono); font-variant-numeric: tabular-nums;
}

/* ─────────────────────────────────────────────────────────────
   PR1.275 (#469) — Kundenlogo im Redesign.
   Konvention 21: keine rohen px, keine Hex-Literale. Groessen kommen aus
   dem style-Attribut (size-Option von accountLogoHtml), nicht von hier —
   deshalb steht unten keine einzige Laengenangabe in px.
   `white` ist ein CSS-Keyword und kein Hex-Literal; der Ratchet-Pruefer
   matcht /#[0-9a-fA-F]{3,8}/.
   ───────────────────────────────────────────────────────────── */

.crm .acc-logo {
  border-radius: .55rem;
  font-family: var(--f-cond);
  font-weight: 600;
  letter-spacing: .03em;
}

.crm .acc-logo.is-loaded {
  background-color: white;
  box-shadow: inset 0 0 0 .06rem rgba(0, 0, 0, .14);
  /* BF-76 (#641): kein Prozent-Padding (bezieht sich auf den umgebenden Block). */
  box-sizing: border-box;
  padding: .16em;
}

/* PR1.735 (V03 Legende 1, Prototyp listen-dashboard.html `.lg` / `.lg-leer`) — neutrale
   Logoflaeche statt Kuerzel. Zeichenfarbe ≈ #9AA5B5 aus Tokens gemischt (keine Hex-Literale). */
.crm .acc-logo-leer,
.crm .acc-logo-ladend.acc-logo-failed {
  background-color: var(--bg-surface-3);
  color: color-mix(in srgb, var(--text-3) 60%, var(--bg-surface-3));
  border: .0667rem dashed var(--border);
  box-shadow: none;
}
.crm .acc-logo-ladend { background-color: white; box-shadow: inset 0 0 0 .0667rem var(--border); }
/* Gate R1: gegen den Kuerzel-Ring aus PR1.653 (.crm .acc-logo-mono:not(.is-loaded), spaeter im
   Stylesheet) — die leere Flaeche traegt nur die gestrichelte Kante. */
.crm .acc-logo-mono.acc-logo-leer:not(.is-loaded),
.crm .acc-logo-mono.acc-logo-ladend.acc-logo-failed:not(.is-loaded) { box-shadow: none; }
.crm .acc-logo.is-loaded { background-origin: content-box; }

/* Erste Spalte „Kunde · Opportunity" / „Kunde · Projekt" (V03/V04): Kachel 32 px, Radius 7 px,
   1 px Kante --border, Polster 7 % (Prototyp `.lg`, --s:32px; Vorlage 1:1, 1 rem = 15 px).
   Die Inline-Groesse (28) bleibt fuer die klassische Ansicht; hier gilt das Vorlagenmass. */
.crm .list-logo .acc-logo.entity-logo {
  width: 2.1333rem !important; height: 2.1333rem !important;
  font-size: var(--fs-label) !important;
  border-radius: .4667rem;
  box-sizing: border-box;
}
.crm .list-logo .acc-logo.entity-logo.is-loaded,
.crm .list-logo .acc-logo.entity-logo.acc-logo-ladend:not(.acc-logo-failed) {
  box-shadow: inset 0 0 0 .0667rem var(--border);
  padding: .15rem;
}

.crm .acc-logo-drop {
  border-radius: .55rem;
  font-family: var(--f-cond);
  font-size: var(--fs-body);
}

/* ═══════════════════════════════════════════════════════════════════
   PR1.276 (#470) — Kunden-Dossier als Full-Page (Redesign-Shell).
   Pendant in der klassischen Shell: .cd-* in style.css.
   Bewusst px-frei (rem/%/Tokens) — Konvention 21, Ratchet raw-px.
   ═══════════════════════════════════════════════════════════════════ */

/* .card ist als flex-row definiert (Kachel-Karten der Listen). Das Dossier stapelt
   seine Abschnitte - ohne display:block laufen die Statusgruppen nebeneinander statt
   untereinander (Befund der Optik-Abnahme auf der Pruefseite). */
.crm .crm-cd-card {
  display: block;
  margin-bottom: 1rem;
}


.crm .crm-cd-row {
  display: flex;
  gap: .75rem;
  padding: .3rem 0;
  border-bottom: .0625rem dashed var(--border);
  font-size: var(--fs-body);
}
.crm .crm-cd-row-label { flex: 0 0 40%; color: var(--text-3); }
.crm .crm-cd-row-value { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.crm .crm-dash { color: var(--text-3); }

.crm .crm-cd-empty,
.crm .crm-cd-locked {
  color: var(--text-3);
  font-size: var(--fs-body);
  padding: .625rem 0;
}
.crm .crm-cd-note,
.crm .crm-cd-legend { margin-bottom: .5rem; }

.crm .crm-cd-group { margin-bottom: .875rem; }
/* PR1.438 — look from the shared section-head rule (style.css); only spacing here. */
.crm .crm-cd-group-title {
  margin-bottom: .375rem;
}
.crm .crm-cd-list { list-style: none; margin: 0; padding: 0; }
.crm .crm-cd-list li {
  display: flex;
  gap: .625rem;
  justify-content: space-between;
  padding: .25rem 0;
  font-size: var(--fs-body);
}

.crm .crm-cd-team { width: 100%; font-size: var(--fs-body); }
/* PR1.377: mehrere Team-Tabellen untereinander (Aktuell/Frueher/Vorgemerkt) — feste
   Spaltenbreiten, damit die Spalten fluchten statt je Tabelle anders zu springen. */
.crm .crm-cd-team { table-layout: fixed; }
.crm .crm-cd-team th:nth-child(1) { width: 20%; }
.crm .crm-cd-team th:nth-child(2) { width: 18%; }
.crm .crm-cd-team th:nth-child(3) { width: 8%; }
.crm .crm-cd-team th:nth-child(4) { width: 26%; }
.crm .crm-cd-team th,
.crm .crm-cd-team td { white-space: normal; overflow-wrap: break-word; }

/* PR1.377 (#596) — Gruppen Laufend/Abgeschlossen bzw. Aktuell/Frueher/Vorgemerkt.
   Der Kopf der langen Abgeschlossen-Liste ist ein echter Button; Fokusring kommt aus der
   generischen `.crm :focus-visible`-Regel. Keine Transition: taeglich genutzte Ansicht. */
.crm .crm-cd-group-toggle {
  display: inline-flex;
  align-items: center;
  gap: .375rem;
  padding: .125rem .25rem;
  margin-left: -.25rem;
  color: inherit;
  background: none;
  border: 0;
  border-radius: var(--r-sm);
  cursor: pointer;
}
.crm .crm-cd-group-toggle:hover { background: var(--bg-surface-2); }
.crm .crm-cd-chev::before { content: ''; display: inline-block; width: 1em; height: 1em; background-color: currentColor; vertical-align: -0.125em; -webkit-mask: var(--ic-mask-caret-right); mask: var(--ic-mask-caret-right); color: var(--text-2); }
.crm .crm-cd-group-toggle[aria-expanded="true"] .crm-cd-chev::before { transform: rotate(90deg); }
.crm .crm-cd-list[hidden] { display: none; }
.crm .crm-cd-meta {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  flex-shrink: 0;
}

/* Der Betrag ist in der Pipeline die Kernaussage, keine Fussnote - .note (--text-3)
   war dafuer zu leise (Befund der Optik-Abnahme). */
.crm .crm-cd-amount {
  color: var(--text-2);
  font-family: var(--f-mono);
  font-size: var(--fs-ui);
  font-variant-numeric: tabular-nums;
}

.crm .crm-cd-portfolio {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  gap: .25rem 1rem;
}
.crm .crm-cd-pf {
  padding: .3rem 0;
  font-size: var(--fs-body);
  min-width: 0;
}
.crm .crm-cd-pf-line {
  display: flex;
  align-items: baseline;
  gap: .5rem;
}
/* PR1.781: bei mehrzeiligen Namen sitzt der Punkt an Zeile 1 (Mitte der ersten Zeile). */
.crm .crm-cd-pf-line .crm-cd-pf-dot { align-self: flex-start; margin-top: calc((1lh - .55rem) / 2); }
.crm .crm-cd-pf-dot {
  width: .55rem;
  height: .55rem;
  border-radius: 50%;
  flex: 0 0 auto;
  background: var(--text-3);
}
/* „bezogen" traegt zusaetzlich zur Farbe einen gefuellten Punkt, „nicht bezogen"
   einen leeren Ring — die Unterscheidung darf nicht allein an der Farbe haengen. */
.crm .crm-cd-pf-bezogen .crm-cd-pf-dot { background: var(--ad-violet); }
.crm .crm-cd-pf-nicht-bezogen .crm-cd-pf-dot {
  background: transparent;
  border: .125rem solid var(--text-2);
}
.crm .crm-cd-pf-label { flex: 1; min-width: 0; }
.crm .crm-cd-pf-state { font-size: var(--fs-label); color: var(--text-3); }
.crm .crm-cd-pf-driftmark {
  font-size: var(--fs-label);
  padding: .0625rem .375rem;
  border-radius: .5rem;
  border: .0625rem solid var(--ad-violet);
  color: var(--ad-violet);
}
/* PR1.781 (#1104) — Portfolio aus echten Vorgaengen: CC-Gruppen, „in Anbahnung" als halb
   gefuellter Punkt (nicht nur Farbe), Vorgangs-Links, Altbestand-Block. Keine Uebergaenge. */
.crm .crm-cd-pf-anbahnung .crm-cd-pf-dot {
  background: linear-gradient(90deg, var(--ad-violet) 50%, transparent 50%);
  border: .125rem solid var(--ad-violet);
}
.crm .crm-cd-pf-retired .crm-cd-pf-label { color: var(--text-2); }
/* PR1.781 (Gate): Violett auf dunklem Grund nur ~1,7:1 — aufgehellt wie .badge-pf / --tb-violet. */
html[data-theme="dark"] .crm .crm-cd-pf-bezogen .crm-cd-pf-dot, .crm.dark .crm-cd-pf-bezogen .crm-cd-pf-dot {
  background: color-mix(in srgb, var(--ad-violet) 40%, white);
}
html[data-theme="dark"] .crm .crm-cd-pf-anbahnung .crm-cd-pf-dot, .crm.dark .crm-cd-pf-anbahnung .crm-cd-pf-dot {
  background: linear-gradient(90deg, color-mix(in srgb, var(--ad-violet) 40%, white) 50%, transparent 50%);
  border-color: color-mix(in srgb, var(--ad-violet) 40%, white);
}
html[data-theme="dark"] .crm .crm-cd-pf-driftmark, .crm.dark .crm-cd-pf-driftmark {
  border-color: color-mix(in srgb, var(--ad-violet) 40%, white);
  color: color-mix(in srgb, var(--ad-violet) 40%, white);
}
.crm .crm-cd-pf-groups { display: flex; flex-direction: column; gap: .875rem; margin-top: .75rem; }
.crm .crm-cd-pf-group-h {
  margin: 0 0 .25rem;
  font-size: var(--fs-ui);
  font-weight: 600;
  color: var(--text-1);
}
.crm .crm-cd-pf-group-h .crm-cd-muted { font-weight: 400; margin-left: .375rem; }
.crm .crm-cd-pf-links {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: .125rem .625rem;
  margin: .125rem 0 0 1.05rem;
  font-size: var(--fs-meta);
  min-width: 0;
}
.crm .crm-cd-pf-links a { overflow-wrap: anywhere; }
.crm .crm-cd-pf-rest > summary { cursor: pointer; color: var(--ad-blue-700); }
.crm.dark .crm-cd-pf-rest > summary, html[data-theme="dark"] .crm .crm-cd-pf-rest > summary { color: var(--ad-blue-300); }
.crm .crm-cd-pf-rest[open] { display: contents; }
.crm .crm-cd-pf-empty { margin: .25rem 0 .75rem; color: var(--text-2); }
.crm .crm-cd-pf-legacy {
  margin-top: 1rem;
  border-top: .0625rem solid var(--border);
  padding-top: .625rem;
}
.crm .crm-cd-pf-legacy > summary { cursor: pointer; font-weight: 600; font-size: var(--fs-ui); }
.crm .crm-cd-pf-legacy > summary .crm-cd-muted { font-weight: 400; margin-left: .375rem; }
.crm .crm-cd-pf-legacy-body { margin-top: .5rem; }

/* ── PR1.407 (#637) Kundenseite neu — Kopfband, drei Spalten, Reiter, Status, Ausblick ──
   Ein Look mit der klassischen Shell (.cd-* in style.css). px-frei (Ratchet raw-px), nur
   Tokens. Keine Uebergaenge: die Seite wird mehrmals pro Woche benutzt. Fokusringe aus der
   generischen `.crm :focus-visible`-Regel. */
.crm .crm-cd-page { padding: 0 var(--s-6) var(--s-6); }
.crm .crm-cd-crumbs { display: flex; gap: var(--s-1); min-width: 0; margin: var(--s-3) 0 var(--s-2); font-size: var(--fs-ui); color: var(--text-2); }
.crm .crm-cd-crumbs a { color: var(--ad-blue-700); text-decoration: none; }
.crm .crm-cd-crumbs a:hover { text-decoration: underline; }
.crm .crm-cd-crumbs > span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.crm .crm-cd-logo {
  display: flex; align-items: center; justify-content: center; flex: 0 0 auto;
  width: 4rem; height: 4rem; border-radius: var(--r-lg);
  font-size: var(--fs-title); font-weight: 600; color: var(--text-inv);
  background: var(--ad-blue-700) center/contain no-repeat;
}
.crm .crm-cd-logo.is-loaded { background-color: var(--bg-surface); border: .0625rem solid var(--border); }
/* PR1.588 (#890) — Kopf wie alle Detailseiten (Anatomie V5): weisse Karte, Typzeile, Titel,
   Aktionen rechts; darunter vier Fakten an festen Plaetzen. Keine Animation (taeglich genutzt). */
.crm .crm-cd-header {
  margin-bottom: var(--s-4); padding: var(--s-4) var(--s-5);
  background: var(--bg-surface); border: .0625rem solid var(--border); border-radius: var(--r-xl);
}
.crm .crm-cd-head-top { display: flex; align-items: flex-start; gap: var(--s-4); }
.crm .crm-cd-head-text { flex: 1; min-width: 0; }
.crm .crm-cd-typeline { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-1) var(--s-2); font-size: var(--fs-ui); color: var(--text-2); }
.crm .crm-cd-type {
  padding: .0625rem .375rem; font-size: var(--fs-label); font-weight: 600; letter-spacing: .02em;
  color: var(--text-2); background: var(--bg-surface-2); border-radius: var(--r-xs);
}
.crm .crm-cd-title {
  margin: var(--s-1) 0 0; font-size: var(--fs-title); line-height: 1.2; color: var(--text-1);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.crm .crm-cd-flag { padding: .0625rem .5rem; font-size: var(--fs-label); border: .0625rem solid var(--border); border-radius: var(--r-lg); }
.crm .crm-cd-head-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); }
.crm .crm-cd-head-actions .btn { display: inline-flex; align-items: center; gap: .375rem; }
.crm .crm-cd-btn-create { color: var(--ad-blue-900); background: var(--ad-orange); border: .0625rem solid var(--ad-orange); font-weight: 600; }
.crm .crm-cd-btn-create:hover { background: var(--ad-orange-700); border-color: var(--ad-orange-700); }
.crm .crm-cd-head-menu .more-menu-btn span:empty { display: none; }
.crm .crm-cd-head-menu .more-menu-list { right: 0; left: auto; }
/* Vier Fakten: feste Plaetze, das vierte Feld (Angaben) immer rechts aussen. */
.crm .crm-cd-facts-row {
  display: grid; grid-template-columns: minmax(0, 2.6fr) repeat(3, minmax(0, 1fr)); gap: var(--s-4) var(--s-5);
  margin-top: var(--s-4); padding-top: var(--s-4); border-top: .0625rem solid var(--border);
}
.crm .crm-cd-fact-cell { display: flex; flex-direction: column; align-items: flex-start; gap: .25rem; min-width: 0; }
.crm .crm-cd-fact-k { font-size: var(--fs-ui); color: var(--text-2); }
.crm .crm-cd-fact-v { display: flex; align-items: center; gap: var(--s-2); font-size: var(--fs-section); font-weight: 600; color: var(--text-1); }
.crm .crm-cd-fact-sub { font-size: var(--fs-ui); color: var(--text-2); overflow-wrap: anywhere; }
.crm .crm-cd-faces { display: inline-flex; }
.crm .crm-cd-faces .emp-avatar + .emp-avatar { margin-left: -.375rem; box-shadow: 0 0 0 .125rem var(--bg-surface); }
.crm .crm-cd-ocker { color: var(--ad-orange-900); font-weight: 600; }
.crm .crm-cd-textlink, .crm .crm-cd-card-link {
  padding: .125rem 0; font: inherit; font-size: var(--fs-ui); font-weight: 600; color: var(--ad-blue-700);
  background: none; border: 0; text-decoration: underline; cursor: pointer;
}
.crm .crm-cd-card-link { margin-left: auto; text-decoration: none; }
.crm .crm-cd-card-link:hover { text-decoration: underline; }
/* Stufenband: sechs Pfeil-Stufen, Stand als Farbe UND als Wort (Tooltip/Vorleser, Satz darunter). */
.crm .crm-cd-strip { display: flex; flex-wrap: wrap; gap: .25rem .125rem; max-width: 100%; }
.crm .crm-cd-step {
  flex: 0 0 auto; padding: .3125rem .625rem .3125rem .875rem; font: inherit; font-size: var(--fs-meta); font-weight: 600;
  color: var(--text-2); background: var(--bg-surface-2); border: 0; cursor: pointer; white-space: nowrap;
  clip-path: polygon(0 0, calc(100% - .5rem) 0, 100% 50%, calc(100% - .5rem) 100%, 0 100%, .5rem 50%);
}
.crm .crm-cd-step:first-child { padding-left: .625rem; clip-path: polygon(0 0, calc(100% - .5rem) 0, 100% 50%, calc(100% - .5rem) 100%, 0 100%); }
.crm .crm-cd-step:hover { color: var(--text-1); background: var(--bg-hover); }
.crm .crm-cd-step:focus-visible { outline: .125rem solid var(--ad-blue-700); outline-offset: .125rem; }
.crm .crm-cd-step.is-offered { color: var(--ad-blue-700); background: var(--tint-blue); }
.crm .crm-cd-step.is-running { color: var(--text-inv); background: var(--ad-blue-700); }
.crm .crm-cd-step.is-closed { color: var(--ad-green-900); background: var(--tint-green); }
.crm .crm-cd-item-opp .crm-cd-item-sub { white-space: normal; }
.crm .crm-cd-quiet { margin: var(--s-3) 0 0; padding-top: var(--s-3); border-top: .0625rem solid var(--border); font-size: var(--fs-body); color: var(--text-1); }
.crm .crm-cd-quiet .crm-cd-textlink { font-size: var(--fs-body); }
/* PR1.743 (#1052) — Kopf der Kundenseite exakt nach V13; Sollwerte gemessen am Prototyp
   design/mockups/vorlive-05-11/masken-detail.html (Abschnitt V13). Keine Animation (taeglich genutzt). Zeilenhoehe 1.45 wie der Prototyp (body).
   Titel bleibt --fs-title (20 px): 21 px des Prototyps ist keine Rolle der Typo-Skala (max. 12 Groessen, test/type-scale).
   rem-Werte auf die App-Basis 15 px gerechnet (1rem = 15px): 52px = 3.4667rem usw. */
.crm .crm-cd-header .crm-cd-head-top { align-items: center; }
/* Logo-Flaeche 52x52, weiss, Rand, Radius 10; ohne Logo neutrale Flaeche mit ruhigem Kuerzel (Legende 6). */
.crm .crm-cd-header .crm-cd-logo {
  width: 3.4667rem; height: 3.4667rem; border-radius: var(--r-lg);
  font-size: var(--fs-label); font-weight: 700; color: var(--text-3);
  background-color: var(--bg-surface); border: .0625rem solid var(--border);
}
/* PR1.736-Nachzug — im Kopf steht accountLogoHtml (echtes Logo oder Gebaeude-Flaeche, nie
   Buchstaben); der Rahmen `.crm-cd-logo` haelt nur noch Platz und Lage. */
.crm .crm-cd-head-top > .crm-cd-logo { border: 0; }
.crm .crm-cd-logo-bild { border-radius: var(--r-lg); }
.crm .crm-cd-header .crm-cd-typeline { gap: var(--s-2); font-size: var(--fs-meta); line-height: 1.45; }
.crm .crm-cd-header .crm-cd-type.typo-abschnitt { padding: 0; font-weight: 700; letter-spacing: .04em; color: var(--text-3); background: none; }
/* Titel: Zeilenhoehe wie Prototyp-h2 (21 px × 1.45 ≈ 30 px Zeile) → 10 px Luft zwischen Typzeile und Titel. */
.crm .crm-cd-header .crm-cd-title { margin-top: .1333rem; line-height: 1.5; }
.crm .crm-cd-header .crm-cd-head-actions .btn {
  height: 2.4rem; padding: .4667rem .8rem; font-size: var(--fs-meta); font-weight: 600; border-radius: var(--r-md); box-shadow: none;
}
/* Abstand der Kopfknoepfe 16 px (Prototyp gap:16px). */
.crm .crm-cd-header .crm-cd-head-actions { gap: var(--s-4); }
/* „⋯" wie .btn.icon: 32 x 30, Innenabstand 6 — niedriger als die Textknoepfe. */
.crm .crm-cd-header .crm-cd-head-actions .crm-cd-more-btn { width: 2.1333rem; height: 2rem; padding: .4rem; justify-content: center; }
.crm .crm-cd-head-menu .crm-cd-more-btn svg { flex: 0 0 auto; width: 1.0667rem; height: 1.0667rem; }
/* Stammdaten-Leiste: Linie mit 16 px Ueberstand je Seite, Trenner vor JEDER Zelle (auch vor „Branche"). */
.crm .crm-cd-master {
  display: grid; grid-template-columns: .75fr .85fr 1.3fr 1.15fr 1.25fr .9fr;
  margin: var(--s-4) calc(-1 * var(--s-4)) 0; padding-top: .9333rem; border-top: .0625rem solid var(--border);
}
.crm .crm-cd-master-cell {
  display: flex; flex-direction: column; align-items: flex-start; min-width: 0;
  padding: .1333rem var(--s-4); border-left: .0625rem solid var(--border);
}
.crm .crm-cd-master-k { margin-bottom: .3333rem; font-size: var(--fs-label); line-height: 1.45; font-weight: 600; color: var(--text-3); }
.crm .crm-cd-master-v {
  display: flex; align-items: center; gap: .4667rem; max-width: 100%; min-width: 0; white-space: nowrap;
  font-size: var(--fs-ui); font-weight: 600; line-height: 1.45; color: var(--text-1);
}
/* Kuerzen nur am Namen — sonst schnitte die Zelle den Fokusring an „ergänzen" ab. */
.crm .crm-cd-master-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* „fehlt" in Ocker ueber das Token (hell #8A5200, dunkel schaltet es selbst um). */
.crm .crm-cd-master .crm-cd-ocker, .crm.dark .crm-cd-master .crm-cd-ocker, html[data-theme="dark"] .crm .crm-cd-master .crm-cd-ocker { color: var(--ocker-text); }
.crm .crm-cd-master-person {
  padding: 0; font: inherit; font-size: var(--fs-ui); font-weight: 600; color: var(--text-1);
  background: none; border: 0; border-radius: var(--r-xs); cursor: pointer; text-align: left;
}
.crm .crm-cd-master-person:hover .crm-cd-master-name { text-decoration: underline; }
.crm .crm-cd-master-person:focus-visible, .crm .crm-cd-master .crm-cd-textlink:focus-visible {
  /* 2 px Ring, 2 px Abstand: .13334rem = 2,0001 px (bei 15er-rem rundete .125rem = 1,875 auf 1 px ab). */
  outline: .13334rem solid var(--focus); outline-offset: .13334rem;
}
.crm .crm-cd-master-person .emp-avatar { flex: 0 0 auto; }
/* PR1.744 (#1077) — Person ohne Apollon-Konto: neutrale Fotoflaeche (22 px), kein Link. */
.crm .crm-cd-master-person.is-free { cursor: default; }
.crm .crm-cd-master-noacc {
  display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto;
  width: 1.4667rem; height: 1.4667rem; border-radius: 50%; background: var(--bg-surface-3); color: var(--text-3);
}
.crm .crm-cd-master-sub { margin-top: .1333rem; line-height: 1.45; max-width: 100%; font-size: var(--fs-label); color: var(--text-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.crm .crm-cd-master .crm-cd-textlink { padding: 0; font-size: var(--fs-label); text-underline-offset: .1333rem; }
.crm .crm-cd-master-none { margin: var(--s-4) calc(-1 * var(--s-4)) 0; padding: .9333rem var(--s-4) 0; border-top: .0625rem solid var(--border); font-size: var(--fs-ui); color: var(--text-3); }
@media (max-width: 68rem) {
  .crm .crm-cd-master { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: var(--s-3); }
}
@media (max-width: 54rem) {
  .crm .crm-cd-master { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* PR1.661 (#960) — Ein Kopf fuer Opportunity, Projekt und Mitarbeitende (V5, detail-kopf.js):
   gleiche Anatomie und gleiche Masse wie der Kundenkopf oben (#890). Bild · Typzeile · Titel ·
   Aktionen rechts, Linie, vier Fakten (das erste Feld breiter fuer das Stufenband, wie im Bild).
   Keine Animation (taeglich mehrfach geoeffnet). */
.crm .dk {
  /* Farben aus V5 (Pipette: Ocker #8A5200, Gruen #2E7D0F, erledigt #CFE2F5) auf die App-Tokens
     gelegt: Ocker wie Kundenkopf und Liegezeit (ad-orange-900), dunkles Gruen, kraeftigeres Hellblau. */
  --dk-ocker: var(--ad-orange-900); --dk-gruen: var(--ad-green-900);
  --dk-done: color-mix(in srgb, var(--tint-blue) 88%, var(--ad-blue));
  margin-bottom: var(--s-4); padding: var(--s-4) var(--s-5);
  background: var(--bg-surface); border: .0625rem solid var(--border); border-radius: var(--r-xl);
}
.crm .dk-top { display: flex; align-items: flex-start; gap: var(--s-4); }
.crm .dk-bild { flex: 0 0 auto; display: flex; }
.crm .dk-bild .opp-head-logo, .crm .dk-bild-leer { width: 3.25rem; height: 3.25rem; border-radius: var(--r-md); }
.crm .dk-bild-leer {
  display: inline-flex; align-items: center; justify-content: center; font-size: var(--fs-section); font-weight: 600;
  color: var(--text-2); background: var(--bg-surface-2); border: .0625rem solid var(--border);
}
.crm .dk-text { flex: 1; min-width: 0; }
.crm .dk-typ { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-1) var(--s-2); font-size: var(--fs-ui); color: var(--text-2); }
.crm .dk-typ-label {
  padding: .0625rem .375rem; font-size: var(--fs-label); font-weight: 600; letter-spacing: .02em;
  color: var(--text-2); background: var(--bg-surface-3); border-radius: var(--r-xs);
}
.crm .dk-typ-teil { display: inline-flex; align-items: center; gap: .25rem; min-width: 0; }
.crm .dk-typ-sep { color: var(--text-3); }
.crm .dk-typ-hs { display: inline-flex; align-items: center; gap: .25rem; }
.crm .dk-apo { font-variant-numeric: tabular-nums; }
.crm .dk-copy {
  display: inline-flex; padding: .125rem; color: var(--text-3); background: none; border: 0; border-radius: var(--r-xs); cursor: pointer;
}
.crm .dk-copy:hover, .crm .dk-copy.is-copied { color: var(--ad-blue-700); }
.crm .dk-titel {
  margin: var(--s-1) 0 0; font-size: var(--fs-title); line-height: 1.2; color: var(--text-1);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.crm .dk-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: var(--s-2); }
.crm .dk-actions .btn { display: inline-flex; align-items: center; gap: .5rem; min-height: 2.25rem; padding-inline: .875rem; font-size: var(--fs-body); }
.crm .dk-actions .dk-more-btn { width: 2.25rem; padding-inline: 0; justify-content: center; }
.crm .dk-more .more-menu-btn span:empty { display: none; }
.crm .dk-more .more-menu-list { right: 0; left: auto; }
.crm .dk-facts {
  display: grid; grid-template-columns: minmax(0, 1.6fr) repeat(3, minmax(0, 1fr)); gap: var(--s-4) var(--s-5);
  margin-top: var(--s-4); padding-top: var(--s-4); border-top: .0625rem solid var(--border);
}
.crm .dk-fact { display: flex; flex-direction: column; align-items: flex-start; gap: .25rem; min-width: 0; }
.crm .dk-fact-k { font-size: var(--fs-ui); color: var(--text-2); }
.crm .dk-fact-v { display: flex; align-items: center; gap: var(--s-2); max-width: 100%; font-size: var(--fs-section); font-weight: 600; color: var(--text-1); overflow-wrap: anywhere; }
.crm .dk-fact-sub { display: flex; align-items: center; gap: .25rem; font-size: var(--fs-ui); color: var(--text-2); overflow-wrap: anywhere; }
.crm .dk-fact-v .emp-kz-logos { display: inline-flex; gap: .25rem; }
.crm .dk-fact-v .hs-logo { gap: .375rem; }
.crm .dk-fact-v .hs-logo-name { font-size: inherit; font-weight: inherit; color: inherit; }
.crm .dk-tone-ocker { color: var(--dk-ocker); }
.crm .dk-tone-gruen { color: var(--dk-gruen); }
.crm .dk-tone-rot { color: var(--ad-red-700); }
.crm .dk-lz--ocker { color: var(--dk-ocker); font-weight: 600; }
.crm .dk-lz--rot { color: var(--ad-red-700); font-weight: 600; }
.crm .dk-link {
  display: inline-flex; align-items: center; gap: .25rem; padding: .125rem 0; font: inherit; font-size: var(--fs-ui);
  color: var(--text-2); background: none; border: 0; cursor: pointer; text-align: left;
}
.crm .dk-link:hover { color: var(--ad-blue-700); text-decoration: underline; }
.crm .dk-fact--gap .dk-link, .crm .dk-zuletzt .dk-link { font-weight: 600; color: var(--ad-blue-700); text-decoration: underline; }
.crm .dk-typ-link { color: var(--text-1); }
.crm .dk-kunde-fehlt { font-weight: 600; color: var(--dk-ocker); }
.crm .dk-link:focus-visible, .crm .dk-copy:focus-visible { outline: .125rem solid var(--ad-blue-700); outline-offset: .125rem; border-radius: var(--r-xs); }
/* Stufenband: Pfeilsegmente, Wort immer im Segment. Erledigt hellblau, aktuell blau, kommend grau. */
.crm .dk-fact .status-change-trigger { display: inline-flex; align-items: center; max-width: 100%; padding: 0; background: none; border: 0; cursor: pointer; }
.crm .dk-fact .status-change-trigger .status-change-caret { display: none; }
.crm .dk-fact .status-change-trigger:focus-visible { outline: .125rem solid var(--ad-blue-700); outline-offset: .1875rem; border-radius: var(--r-xs); }
.crm .dk-band { display: flex; gap: .125rem; width: 100%; max-width: 100%; }
.crm .dk-step {
  flex: 1 1 0; min-width: 0; padding: .3125rem .875rem; font-size: var(--fs-meta); font-weight: 600; text-align: center;
  color: var(--text-2); background: var(--bg-surface-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  clip-path: polygon(0 0, calc(100% - .5rem) 0, 100% 50%, calc(100% - .5rem) 100%, 0 100%, .5rem 50%);
}
.crm .dk-step:first-child { clip-path: polygon(0 0, calc(100% - .5rem) 0, 100% 50%, calc(100% - .5rem) 100%, 0 100%); }
.crm .dk-step.is-done { color: var(--ad-blue-700); background: var(--dk-done); }
.crm .dk-step.is-current { color: var(--text-inv); background: var(--ad-blue); }
.crm .dk-step.is-current.is-ocker { color: var(--ad-blue-900); background: var(--ad-orange); }
.crm .dk-step.is-current.is-rot { color: var(--text-inv); background: var(--ad-red-700); }
.crm .dk-step.is-current.is-grau { color: var(--text-inv); background: var(--text-3); }
.crm .dk-fact .status-change-trigger:hover .dk-step.is-next { color: var(--text-1); background: var(--bg-hover); }
.crm .dk-fact[data-dk-fact="phase"] .dk-fact-v, .crm .dk-fact[data-dk-fact="phase"] .status-change-trigger { width: 100%; }
.crm .dk-zuletzt { margin: var(--s-3) 0 0; font-size: var(--fs-ui); color: var(--text-1); }
.crm .dk-zuletzt-k { color: var(--text-2); }
/* Ladezustand: Skelett in Kopfform, ohne Schimmer-Animation. */
.crm .dk-skel { display: block; background: var(--bg-surface-2); border-radius: var(--r-xs); }
.crm .dk-skel--bild { width: 3.25rem; height: 3.25rem; border-radius: var(--r-md); }
.crm .dk-skel--typ { width: 12rem; height: .875rem; }
.crm .dk-skel--titel { width: 22rem; max-width: 100%; height: 1.5rem; margin-top: var(--s-2); }
.crm .dk-skel--k { width: 5rem; height: .75rem; }
.crm .dk-skel--v { width: 8rem; height: 1.125rem; }
.crm .emp-head-wrap--dk { padding: var(--s-3) var(--s-5) 0; }
.crm .emp-head-wrap--dk .emp-head-path { margin-bottom: var(--s-3); }
.crm .dk-bild--rund .emp-avatar, .crm .dk-bild--rund img { border-radius: 50%; }
@media (max-width: 80rem) {
  .crm .dk-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 54rem) {
  .crm .dk-facts { grid-template-columns: minmax(0, 1fr); }
  .crm .dk-top { flex-wrap: wrap; }
}
.crm.dark .dk-step.is-done, html[data-theme="dark"] .crm .dk-step.is-done { color: var(--ad-blue-300); background: var(--tint-blue); }
.crm.dark .dk-fact--gap .dk-link, html[data-theme="dark"] .crm .dk-fact--gap .dk-link,
.crm.dark .dk-zuletzt .dk-link, html[data-theme="dark"] .crm .dk-zuletzt .dk-link { color: var(--ad-blue-300); }
.crm.dark .dk-tone-ocker, html[data-theme="dark"] .crm .dk-tone-ocker,
.crm.dark .dk-lz--ocker, html[data-theme="dark"] .crm .dk-lz--ocker,
.crm.dark .dk-kunde-fehlt, html[data-theme="dark"] .crm .dk-kunde-fehlt { color: var(--ad-orange); }
.crm.dark .dk-tone-gruen, html[data-theme="dark"] .crm .dk-tone-gruen { color: var(--ad-green); }
.crm.dark .dk-tone-rot, html[data-theme="dark"] .crm .dk-tone-rot,
.crm.dark .dk-lz--rot, html[data-theme="dark"] .crm .dk-lz--rot { color: var(--ad-red-300); }

/* Seite: Hauptspalte | Stand. Stammdaten + Dokumente nebeneinander. */
.crm .crm-cd-grid {
  display: grid; gap: var(--s-4); align-items: start;
  grid-template-columns: minmax(0, 2.4fr) minmax(17rem, 1fr);
}
.crm .crm-cd-col { display: flex; flex-direction: column; gap: var(--s-4); min-width: 0; }
.crm .crm-cd-col > .crm-cd-card, .crm .crm-cd-pair > .crm-cd-card { margin-bottom: 0; }
.crm .crm-cd-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-4); align-items: start; }
/* PR1.819 (#1162) — Stammdaten stehen oben in der Kopf-Leiste; „Dokumente“ nimmt die volle Breite. */
.crm .crm-cd-docs-wide { display: flex; flex-direction: column; min-width: 0; }
.crm .crm-cd-docs-wide > .crm-cd-card { margin-bottom: 0; }
@media (max-width: 80rem) {
  .crm .crm-cd-facts-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 68rem) {
  .crm .crm-cd-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 54rem) {
  .crm .crm-cd-pair, .crm .crm-cd-facts-row { grid-template-columns: minmax(0, 1fr); }
  .crm .crm-cd-head-top { flex-wrap: wrap; }
}
.crm .crm-cd-card .section-h { display: flex; justify-content: space-between; align-items: baseline; gap: var(--s-2); }
.crm .crm-cd-aside { white-space: nowrap; }
.crm .crm-cd-num { font-variant-numeric: tabular-nums; }
.crm .crm-cd-muted { font-size: var(--fs-ui); color: var(--text-2); }

/* Stammdaten */
.crm .crm-cd-facts { margin: 0; }
.crm .crm-cd-fact { display: grid; grid-template-columns: minmax(6rem, 40%) minmax(0, 1fr); gap: var(--s-3); padding: .3rem 0; font-size: var(--fs-body); }
.crm .crm-cd-fact dt { color: var(--text-2); }
.crm .crm-cd-fact dd { margin: 0; overflow-wrap: anywhere; }
/* Reiter */
.crm .crm-cd-tabcard { display: block; padding: 0; overflow: hidden; }
.crm .crm-cd-tabs { display: flex; gap: var(--s-1); padding: 0 var(--s-3); border-bottom: .0625rem solid var(--border); overflow-x: auto; }
.crm .crm-cd-tab {
  padding: var(--s-3) var(--s-2) .625rem; font: inherit; font-weight: 500; font-size: var(--fs-body); color: var(--text-2);
  background: none; border: 0; border-bottom: .1875rem solid transparent; cursor: pointer; white-space: nowrap;
}
.crm .crm-cd-tab:hover { color: var(--text-1); }
.crm .crm-cd-tab[aria-selected="true"] { color: var(--text-1); border-bottom-color: var(--ad-blue-700); }
.crm .crm-cd-tab-count { font-weight: 400; color: var(--text-2); font-variant-numeric: tabular-nums; }
.crm .crm-cd-panel[hidden], .crm .crm-cd-all[hidden] { display: none; }
.crm .crm-cd-items { list-style: none; margin: 0; padding: 0; }
.crm .crm-cd-item {
  /* BF-99 (#734): Name · Budget · PT · Status · Person. Team-Zeilen nutzen die ersten drei. */
  display: grid; grid-template-columns: minmax(0, 1fr) 6.5rem 4rem 7.5rem 8rem; gap: var(--s-3); align-items: center;
  padding: .625rem var(--s-4); border-top: .0625rem solid var(--border); font-size: var(--fs-body);
}
.crm .crm-cd-item:first-child { border-top: 0; }
.crm .crm-cd-item:hover { background: var(--bg-hover); }
.crm .crm-cd-item-main { display: flex; flex-direction: column; min-width: 0; color: var(--text-1); text-decoration: none; }
.crm .crm-cd-item-main:hover .crm-cd-item-name { text-decoration: underline; }
.crm .crm-cd-item-name { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.crm .crm-cd-item-sub { font-size: var(--fs-meta); color: var(--text-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.crm .crm-cd-item-hs { display: flex; flex-wrap: wrap; gap: var(--s-1) var(--s-2); min-width: 0; font-size: var(--fs-ui); color: var(--text-2); }
.crm .crm-cd-item-num { text-align: right; font-size: var(--fs-ui); color: var(--text-2); white-space: nowrap; }
.crm .crm-cd-item-budget,
.crm .crm-cd-item-days { text-align: right; font-size: var(--fs-ui); color: var(--text-1); white-space: nowrap; font-variant-numeric: tabular-nums; }
.crm .crm-cd-item-owner { min-width: 0; font-size: var(--fs-ui); color: var(--text-1); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.crm .crm-cd-item-none { color: var(--text-2); }
.crm .crm-cd-tab-summary { margin: 0; padding: var(--s-2) var(--s-4); border-bottom: .0625rem solid var(--border); font-size: var(--fs-ui); color: var(--text-2); font-variant-numeric: tabular-nums; }
.crm .crm-cd-hs { display: inline-flex; align-items: center; gap: .3rem; color: var(--text-1); }
.crm .crm-cd-hs-dot { width: .5rem; height: .5rem; border-radius: .125rem; background: var(--text-3); }
.crm .crm-cd-hs-aws { background: var(--ad-orange); }
.crm .crm-cd-hs-azure { background: var(--ad-blue); }
.crm .crm-cd-hs-gcp { background: var(--ad-red); }
.crm .crm-cd-hs-stackit { background: var(--ad-green); }
.crm .crm-cd-staff { display: inline-flex; align-items: center; gap: .375rem; font-size: var(--fs-meta); font-weight: 500; white-space: nowrap; }
.crm .crm-cd-staff-dot { width: .45rem; height: .45rem; border-radius: 50%; background: currentColor; }
.crm .crm-cd-staff-voll { color: var(--ad-green-900); }
.crm .crm-cd-staff-teil { color: var(--ad-orange-900); }
.crm .crm-cd-staff-fehlt { color: var(--ad-red-700); }
.crm .crm-cd-tab-foot { padding: var(--s-2) var(--s-4); border-top: .0625rem solid var(--border); }
.crm .crm-cd-more-link,
.crm .crm-cd-invite-btn { padding: .125rem; font: inherit; font-weight: 600; color: var(--ad-blue-700); background: none; border: 0; cursor: pointer; }
.crm .crm-cd-more-link:hover, .crm .crm-cd-invite-btn { text-decoration: underline; }
.crm .crm-cd-invite { padding: var(--s-4); font-size: var(--fs-body); color: var(--text-2); }
.crm .crm-cd-all { padding: var(--s-1) var(--s-4) var(--s-3); border-top: .0625rem solid var(--border); }
@media (max-width: 68rem) {
  .crm .crm-cd-item { grid-template-columns: minmax(0, 1fr) auto auto; }
  .crm .crm-cd-item-hs, .crm .crm-cd-item-staff, .crm .crm-cd-item-budget, .crm .crm-cd-item-owner { display: none; }
}

/* PR1.588 (#890) — Karte „Stand": vier Abschnitte, Saetze statt Nullen-Kacheln. */
.crm .crm-cd-stand-sec { padding: var(--s-3) 0; border-top: .0625rem solid var(--border); }
.crm .crm-cd-stand-sec:first-of-type { border-top: 0; padding-top: 0; }
.crm .crm-cd-stand-k { margin: 0 0 .25rem; font-size: var(--fs-ui); font-weight: 500; color: var(--text-2); }
.crm .crm-cd-stand-k span[title] { border-bottom: .0625rem dotted var(--text-3); cursor: help; }
.crm .crm-cd-stand-v { font-size: var(--fs-section); font-weight: 600; color: var(--text-1); }
.crm .crm-cd-stand-t { margin: .25rem 0 0; font-size: var(--fs-body); color: var(--text-1); }
.crm .crm-cd-stand-t a, .crm .crm-cd-stand .crm-cd-textlink { font-size: inherit; }
.crm .crm-cd-ol-label { font-weight: 600; }
.crm .crm-cd-tlcard .crm-cj-axis { margin-top: 0; padding-top: 0; border-top: 0; }
.crm .crm-cd-bars { display: flex; align-items: flex-end; gap: .375rem; height: 3.25rem; margin-top: var(--s-2); }
.crm .crm-cd-bar { flex: 1; min-height: .125rem; background: var(--ad-blue-300); border-radius: .125rem .125rem 0 0; }
.crm .crm-cd-bars-future .crm-cd-bar { background: transparent; border: .09375rem dashed var(--ad-blue-700); border-bottom: 0; }
.crm .crm-cd-bar-labels { display: flex; gap: .375rem; margin-top: .25rem; font-size: var(--fs-label); color: var(--text-2); }
.crm .crm-cd-bar-labels span { flex: 1; text-align: center; }
.crm .crm-cd-warn-note { margin-top: var(--s-2); font-size: var(--fs-meta); color: var(--ad-orange-900); }
/* PR1.434 (#667) — Foto/Initialen im Team beim Kunden und das ⓘ am Ausblick. Nur Tokens/rem. */
.crm .crm-cd-item-person, .crm .crm-cd-team-person { display: flex; align-items: center; gap: var(--s-2); min-width: 0; }
.crm .crm-cd-item-person .emp-avatar, .crm .crm-cd-team-person .emp-avatar { flex: 0 0 auto; }
.crm .crm-cd-hint { margin-right: auto; align-self: center; }
.crm .crm-cd-hint .fh-pop { right: auto; width: 18rem; max-width: 70vw; }
.crm .crm-cd-warn-note a { color: inherit; text-decoration: underline; }
.crm .fh-btn--icon > .fh-icon { border: 0; }
.crm .crm-cd-ol-text { margin: 0 0 .25rem; font-size: var(--fs-body); white-space: pre-line; overflow-wrap: anywhere; }
.crm .crm-cd-ol-view[hidden], .crm .crm-cd-ol-form[hidden] { display: none; }
.crm .crm-cd-ol-form { display: flex; flex-direction: column; gap: .375rem; margin-top: var(--s-3); font-size: var(--fs-body); }
.crm .crm-cd-ol-form textarea { width: 100%; padding: var(--s-2); font: inherit; color: var(--text-1); background: var(--bg-surface); border: .0625rem solid var(--border-strong); border-radius: var(--r-md); resize: vertical; }
.crm .crm-cd-ol-actions { display: flex; gap: var(--s-2); margin-top: var(--s-1); }

/* Weitere Angaben */
.crm .crm-cd-more { margin-top: var(--s-4); background: var(--bg-surface); border: .0625rem solid var(--border); border-radius: var(--r-lg); }
.crm .crm-cd-more > summary { padding: var(--s-3) var(--s-4); font-weight: 600; cursor: pointer; }
.crm .crm-cd-more-body { padding: var(--s-1) var(--s-4) var(--s-2); }
.crm .crm-cd-more-body .crm-cd-card { box-shadow: none; border: 0; padding-left: 0; padding-right: 0; }

/* Lade-Skelett */
.crm .crm-cd-skel { display: block; height: .75rem; margin: var(--s-2) 0; background: var(--bg-surface-2); border-radius: var(--r-xs); }
.crm .crm-cd-skel-card { display: block; min-height: 10rem; }
.crm .crm-cd-skel-head { min-height: 9rem; }

/* Dunkel: Markenblau in der hellen Stufe (Linkfarbe dunkel unter AA, Merker). */
.crm.dark .crm-cd-crumbs a, html[data-theme="dark"] .crm .crm-cd-crumbs a,
.crm.dark .crm-cd-textlink, html[data-theme="dark"] .crm .crm-cd-textlink,
.crm.dark .crm-cd-card-link, html[data-theme="dark"] .crm .crm-cd-card-link,
.crm.dark .crm-cd-more-link, html[data-theme="dark"] .crm .crm-cd-more-link,
.crm.dark .crm-cd-invite-btn, html[data-theme="dark"] .crm .crm-cd-invite-btn,
.crm.dark .crm-cd-step.is-offered, html[data-theme="dark"] .crm .crm-cd-step.is-offered { color: var(--ad-blue-300); }
.crm.dark .crm-cd-ocker, html[data-theme="dark"] .crm .crm-cd-ocker { color: var(--ad-orange); }
.crm.dark .crm-cd-step.is-closed, html[data-theme="dark"] .crm .crm-cd-step.is-closed { color: var(--ad-green); }
.crm.dark .crm-cd-step:focus-visible, html[data-theme="dark"] .crm .crm-cd-step:focus-visible { outline-color: var(--ad-blue-300); }
.crm.dark .crm-cd-tab[aria-selected="true"], html[data-theme="dark"] .crm .crm-cd-tab[aria-selected="true"] { border-bottom-color: var(--ad-blue-300); }
.crm.dark .crm-cd-staff-voll, html[data-theme="dark"] .crm .crm-cd-staff-voll { color: var(--ad-green); }
.crm.dark .crm-cd-staff-teil, html[data-theme="dark"] .crm .crm-cd-staff-teil,
.crm.dark .crm-cd-warn-note, html[data-theme="dark"] .crm .crm-cd-warn-note { color: var(--ad-orange); }
.crm.dark .crm-cd-staff-fehlt, html[data-theme="dark"] .crm .crm-cd-staff-fehlt { color: var(--ad-red-300); }
.crm.dark .crm-cd-bars-future .crm-cd-bar, html[data-theme="dark"] .crm .crm-cd-bars-future .crm-cd-bar { border-color: var(--ad-blue-300); }

/* PR1.642 (#941) — Liegezeit („In Phase") und ueberschrittener Start, Redesign. Ocker/Rot wie
   .crm-cd-ocker bzw. .bdg-danger (hell: 900er/700er Stufe, dunkel: helle Stufe), halbfett.
   Die Stufe steht zusaetzlich im title und als .sr-only-Text (liegezeit.js). Keine Bewegung. */
.crm .liegezeit { font-variant-numeric: tabular-nums; white-space: nowrap; }
/* PR1.738 (#1050, V03 Punkt 2) — Wahrscheinlichkeit: nur die Zahl, mittig, halbfett. */
.crm .tbl td.opp-prob { font-weight: 600; white-space: nowrap; }
.crm .liegezeit--ruhig { color: var(--text-2); }
.crm .liegezeit--ocker { color: var(--ad-orange-900); font-weight: 600; }
.crm .liegezeit--rot { color: var(--ad-red-700); font-weight: 600; }
.crm .start-datum { font-variant-numeric: tabular-nums; white-space: nowrap; }
/* Nachzug: .crm .start-datum (Startseiten-Datum, weiter unten) setzt die Textfarbe — darum doppelte Klasse. */
.crm .start-datum.start-ueberschritten { color: var(--ad-red-700); }
.crm .hstrip-liegezeit { font-size: var(--fs-meta); color: var(--text-3); white-space: nowrap; }
.crm.dark .liegezeit--ocker, html[data-theme="dark"] .crm .liegezeit--ocker { color: var(--ad-orange); }
.crm.dark .liegezeit--rot, html[data-theme="dark"] .crm .liegezeit--rot,
.crm.dark .start-datum.start-ueberschritten, html[data-theme="dark"] .crm .start-datum.start-ueberschritten { color: var(--ad-red-300); }

/* ── PR1.376 (#595) / PR1.407 (#637) Cloud Journey als Weg ───────────────────
   Sechs Stationen auf einer Linie (Buttons; Klick/Enter klappt die Vorgaenge auf). Fuellstand
   der Linie bis zur letzten erreichten/laufenden Station (--cj-fill-n, 0…1).
   PR1.820 (#1163): Linie nur noch mit Schalter (Modifier .crm-cj-line), sonst nur Punkte.
   erreicht = gefuellt, laufend = hervorgehoben mit Ring, offen = grau/gestrichelt. Der Stand
   steht als Wort in der Zaehlzeile. Darunter Marken auf der Zeitachse. Kein Uebergang. */
.crm .crm-cj-wrap { container-type: inline-size; }
.crm .crm-cj { position: relative; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: var(--s-1); padding-top: var(--s-1); }
.crm .crm-cj.crm-cj-line::before, .crm .crm-cj.crm-cj-line::after {
  content: ''; position: absolute; top: 1.55rem; left: calc(100% / 12); height: .1875rem; border-radius: .125rem;
}
.crm .crm-cj.crm-cj-line::before { right: calc(100% / 12); background: var(--border-strong); }
.crm .crm-cj.crm-cj-line::after { width: calc((100% - 100% / 6) * var(--cj-fill-n, 0)); background: var(--ad-blue-700); }
.crm .crm-cj-tile {
  position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: var(--s-1); min-width: 0;
  padding: 0 var(--s-1) .375rem; font: inherit; text-align: center; color: var(--text-1);
  background: none; border: 0; border-radius: var(--r-md); cursor: pointer;
}
.crm .crm-cj-dot {
  display: flex; align-items: center; justify-content: center; width: 2.75rem; height: 2.75rem; border-radius: 50%;
  color: var(--text-2); background: var(--bg-surface); border: .125rem dashed var(--border-strong);
}
.crm .crm-cj-station.is-reached .crm-cj-dot { color: var(--text-inv); background: var(--ad-blue-700); border: .125rem solid var(--ad-blue-700); }
.crm .crm-cj-station.is-current .crm-cj-dot { color: var(--ad-blue-700); border: .125rem solid var(--ad-blue-700); box-shadow: 0 0 0 .3rem var(--tint-blue); }
.crm .crm-cj-station.is-current .crm-cj-cc { color: var(--ad-blue-700); }
.crm .crm-cj-tile:hover .crm-cj-cc { text-decoration: underline; }
.crm .crm-cj-tile[aria-expanded="true"] .crm-cj-dot { outline: .125rem solid var(--focus); outline-offset: .2rem; }
.crm .crm-cj-cc { margin-top: var(--s-1); font-weight: 500; font-size: var(--fs-ui); line-height: 1.25; overflow-wrap: break-word; hyphens: auto; }
.crm .crm-cj-counts { font-size: var(--fs-label); color: var(--text-2); }
.crm .crm-cj-placeholder { cursor: default; color: var(--text-3); }
.crm.dark .crm-cj.crm-cj-line::after, html[data-theme="dark"] .crm .crm-cj.crm-cj-line::after { background: var(--ad-blue-300); }
.crm.dark .crm-cj-station.is-reached .crm-cj-dot, html[data-theme="dark"] .crm .crm-cj-station.is-reached .crm-cj-dot { color: var(--bg-surface); background: var(--ad-blue-300); border-color: var(--ad-blue-300); }
.crm.dark .crm-cj-station.is-current .crm-cj-dot, html[data-theme="dark"] .crm .crm-cj-station.is-current .crm-cj-dot { color: var(--ad-blue-300); border-color: var(--ad-blue-300); }
.crm.dark .crm-cj-station.is-current .crm-cj-cc, html[data-theme="dark"] .crm .crm-cj-station.is-current .crm-cj-cc { color: var(--ad-blue-300); }
.crm .crm-cj-panel { margin-top: var(--s-3); padding: var(--s-3); border: .0625rem solid var(--border); border-radius: var(--r-md); }
.crm .crm-cj-panel-title { font-weight: 600; margin-bottom: var(--s-2); }
.crm .crm-cj-items { list-style: none; margin: 0; padding: 0; }
.crm .crm-cj-item {
  display: grid; grid-template-columns: 6.5rem minmax(0, 1fr) minmax(0, 1fr) auto; gap: var(--s-3);
  align-items: center; padding: .375rem 0; border-top: .0625rem solid var(--border); font-size: var(--fs-body);
}
.crm .crm-cj-item:first-child { border-top: 0; }
.crm .crm-cj-type { font-size: var(--fs-label); color: var(--text-2); }
.crm .crm-cj-unassigned { margin-top: var(--s-3); }
.crm .crm-cj-unassigned .cell-link { text-decoration: underline; }
/* Links der Kundenseite: ohne eigene Regel erbte .cell-link das Legacy-`--primary`
   (#6366f1, dunkel 4.1:1 — unter AA, axe im lokalen Durchlauf). */
.crm .crm-cd-card .cell-link { color: var(--ad-blue-700); }
.crm.dark .crm-cd-card .cell-link, html[data-theme="dark"] .crm .crm-cd-card .cell-link { color: var(--ad-blue-300); }

/* Marken auf der Zeitachse */
.crm .crm-cj-axis { margin-top: var(--s-4); padding-top: var(--s-2); border-top: .0625rem solid var(--border); }
.crm .crm-cj-lane { display: grid; grid-template-columns: 4.5rem minmax(0, 1fr); gap: var(--s-2); align-items: center; min-height: 1.875rem; }
.crm .crm-cj-lane-label { font-size: var(--fs-meta); color: var(--text-2); }
.crm .crm-cj-lane-track { position: relative; height: 1.625rem; }
.crm .crm-cj-ticks .crm-cj-lane-track { height: 1.125rem; }
.crm .crm-cj-tick { position: absolute; top: 0; padding-left: .25rem; border-left: .0625rem solid var(--border); font-size: var(--fs-label); color: var(--text-2); white-space: nowrap; }
.crm .crm-cj-now { position: absolute; top: 0; bottom: -3.75rem; width: .125rem; margin-left: -.0625rem; background: var(--focus); opacity: .5; }
.crm .crm-cj-lane-empty { font-size: var(--fs-meta); line-height: 1.625rem; color: var(--text-3); }
.crm .crm-cj-mark {
  position: absolute; top: .125rem; height: 1.375rem; min-width: .375rem; padding: 0 .375rem; overflow: hidden;
  font: inherit; font-size: var(--fs-meta); text-align: left; white-space: nowrap; cursor: pointer; color: var(--text-1);
  background: var(--tint-blue); border: .0625rem solid var(--ad-blue-300); border-radius: var(--r-xs);
}
.crm .crm-cj-mark span { display: block; overflow: hidden; text-overflow: ellipsis; }
.crm .crm-cj-lane-track.has-slots-2 { height: 3.25rem; }
.crm .crm-cj-lane-track.has-slots-3 { height: 4.875rem; }
.crm .crm-cj-mark.is-slot-1 { top: 1.75rem; }
.crm .crm-cj-mark.is-slot-2 { top: 3.375rem; }
.crm .crm-cj-mark-closed { color: var(--text-2); background: var(--bg-surface-2); border-color: var(--border); }
.crm .crm-cj-mark-opp { background: var(--bg-surface); border-style: dashed; border-color: var(--text-3); }
.crm .crm-cj-mark:hover { border-color: var(--focus); }
.crm .crm-cj-mark:focus-visible { z-index: 2; }
.crm .crm-cj-undated { margin-top: var(--s-2); }
@container (max-width: 35rem) {
  .crm .crm-cj { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: var(--s-3); }
  .crm .crm-cj.crm-cj-line::before, .crm .crm-cj.crm-cj-line::after { display: none; }
  .crm .crm-cj-item { grid-template-columns: minmax(0, 1fr) auto; }
  .crm .crm-cj-type, .crm .crm-cj-elements { grid-column: 1 / -1; }
}

.crm .crm-cd-timeline { list-style: none; margin: 0; padding: 0; }
.crm .crm-cd-tl {
  display: flex;
  gap: .75rem;
  padding: .3rem 0;
  border-bottom: .0625rem dashed var(--border);
  font-size: var(--fs-body);
}
.crm .crm-cd-tl-date { flex: 0 0 5.5rem; color: var(--text-3); }
.crm .crm-cd-tl-label { flex: 1; min-width: 0; }

@media (max-width: 45rem) {
  .crm .crm-cd-row { flex-direction: column; gap: .125rem; }
  .crm .crm-cd-row-label { flex: none; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   PR1.269 (#463) — Daten-Cockpit (Redesign-Gesicht)

   Ausschliesslich Tokens und rem: die Ratchet-Pruefungen `raw-px` und `raw-hex`
   zaehlen ueber die GANZE Datei, ein einzelner harter Wert hier laesst den CI-Job
   kippen. Die Raster arbeiten mit auto-fit/minmax statt fester Spaltenbreiten
   (Pruefung `breakpoints`).
   ═══════════════════════════════════════════════════════════════════════════ */

.crm .dcp-body > * + * { margin-top: 0.875rem; }

.crm .dcp-label {
  display: block;
  font-size: var(--fs-ui);
  font-weight: 500;
  color: var(--text-2);
  margin-bottom: 0.375rem;
}

.crm .dcp-frage-zeile {
  display: flex;
  gap: 0.625rem;
  align-items: flex-start;
}

.crm .dcp-input {
  flex: 1;
  min-width: 0;
  padding: 0.5rem 0.75rem;
  font: inherit;
  font-size: var(--fs-body);
  color: var(--text-1);
  background: var(--bg-input);
  border: 0.0625rem solid var(--border-strong);
  border-radius: var(--radius-sm);
  resize: vertical;
}

.crm .dcp-frage:focus-within { border-color: var(--primary); }

/* #957 Nachzug 2 — das Feld selbst ist die Karte (Bild C1): kein innerer Kasten. */
.crm .dcp-frage .dcp-input {
  display: block;
  width: 100%;
  padding: 0;
  background: transparent;
  border: 0;
  outline: 0;
  resize: none;
}
.crm .dcp-fuss {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.625rem;
  margin-top: 0.5rem;
  flex-wrap: wrap;
}
.crm .dcp-fuss .dcp-hint { margin-top: 0; }
.crm .dcp-fuss-rechts { display: flex; align-items: center; gap: 0.625rem; margin-left: auto; }
.crm .dcp-ausfuehren { font-size: var(--fs-meta); color: var(--text-3); }
.crm .dcp-ausfuehren kbd { font: inherit; padding: 0 0.25rem; border: 0.0625rem solid var(--border); border-radius: 0.25rem; }
.crm .dcs-stand-kopf { margin-left: auto; padding-bottom: 0.1875rem; }

.crm .dcp-hint {
  margin-top: 0.5rem;
  font-size: var(--fs-meta);
  color: var(--text-3);
}

.crm .dcp-beispiele {
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem;
  margin-top: 0.625rem;
}

.crm .dcp-h2 {
  margin: 0;
  font-size: var(--fs-body);
  font-weight: 500;
  color: var(--text-1);
}

.crm .dcp-abfrage-kopf,
.crm .dcp-ergebnis-kopf {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 0.75rem;
}

.crm .dcp-meta { font-size: var(--fs-meta); color: var(--text-3); }

/* Eine Zeile je Gruppe: Titel links, Merkzettel rechts. auto-fit statt fester
   Spalten — auf schmalen Fenstern rutscht der Titel ueber die Zettel. */
.crm .dcp-zeile {
  display: grid;
  grid-template-columns: minmax(7rem, max-content) 1fr;
  gap: 0.5rem 0.75rem;
  align-items: start;
  padding: 0.4375rem 0;
  border-top: 0.0625rem solid var(--border);
}
.crm .dcp-zeile:first-of-type { border-top: 0; }

.crm .dcp-zeile-titel {
  font-size: var(--fs-meta);
  font-weight: 500;
  color: var(--text-3);
  padding-top: 0.3125rem;
}

.crm .dcp-zeile-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem;
  align-items: center;
}

.crm .dcp-chip-wrap { display: inline-flex; align-items: center; gap: 0.125rem; }

.crm .dcp-chip {
  display: inline-flex;
  align-items: baseline;
  gap: 0.375rem;
  padding: 0.3125rem 0.625rem;
  font: inherit;
  font-size: var(--fs-ui);
  color: var(--text-1);
  background: var(--bg-surface-2);
  border: 0.0625rem solid var(--border-strong);
  border-radius: var(--radius-sm);
  cursor: pointer;
}
.crm .dcp-chip:hover { background: var(--bg-hover); }
.crm .dcp-chip.is-open { border-color: var(--ad-violet); }
.crm .dcp-chip.is-missing { border-color: var(--warning); }
.crm .dcp-chip.is-invalid { border-color: var(--danger); }

.crm .dcp-chip-label { font-size: var(--fs-label); color: var(--text-3); }
.crm .dcp-chip-value { font-weight: 600; }

.crm .dcp-chip-x {
  padding: 0.125rem 0.3125rem;
  font: inherit;
  line-height: 1;
  color: var(--text-3);
  background: transparent;
  border: 0;
  border-radius: var(--radius-sm);
  cursor: pointer;
}
.crm .dcp-chip-x:hover { color: var(--danger); background: var(--bg-hover); }

.crm .dcp-add {
  padding: 0.3125rem 0.625rem;
  font: inherit;
  font-size: var(--fs-ui);
  color: var(--text-2);
  background: transparent;
  border: 0.0625rem dashed var(--border-strong);
  border-radius: var(--radius-sm);
  cursor: pointer;
}
.crm .dcp-add:hover:not(:disabled) { color: var(--text-1); border-color: var(--text-3); }
.crm .dcp-add:disabled { opacity: 0.45; cursor: not-allowed; }
/* BF-67 (#601) — Kapazitaet: Reset-Knopf ist ausgegraut, solange kein Filter aktiv ist. */
.crm #crm-cap-filters-reset:disabled { opacity: 0.45; cursor: not-allowed; }

.crm .dcp-issue {
  flex-basis: 100%;
  font-size: var(--fs-meta);
  color: var(--danger);
}

/* Bearbeiten geschieht in einer Zeile UNTER den Merkzetteln — kein schwebendes
   Fenster, also auch keine Positionsrechnerei und keine Fokusfalle. */
.crm .dcp-editor {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
  gap: 0.5rem 0.75rem;
  align-items: end;
  margin-top: 0.625rem;
  padding: 0.75rem;
  background: var(--bg-surface-2);
  border: 0.0625rem solid var(--border-strong);
  border-radius: var(--radius-sm);
}

.crm .dcp-control {
  width: 100%;
  padding: 0.375rem 0.5rem;
  font: inherit;
  font-size: var(--fs-ui);
  color: var(--text-1);
  background: var(--bg-input);
  border: 0.0625rem solid var(--border-strong);
  border-radius: var(--radius-sm);
}

.crm .dcp-check {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  font-size: var(--fs-ui);
  color: var(--text-2);
}

.crm .dcp-band {
  display: inline-block;
  padding: 0.1875rem 0.5rem;
  font-size: var(--fs-meta);
  font-weight: 500;
  border-radius: var(--radius-sm);
  background: var(--bg-surface-2);
  color: var(--text-2);
}
.crm .dcp-band-hoch { color: var(--success); }
.crm .dcp-band-mittel { color: var(--warning); }
.crm .dcp-band-niedrig { color: var(--danger); }

.crm .dcp-missing-note { margin-left: 0.625rem; font-size: var(--fs-ui); color: var(--text-3); }

.crm .dcp-missing-list {
  margin: 0.5rem 0 0;
  padding-left: 1.125rem;
  font-size: var(--fs-ui);
  color: var(--text-2);
}

.crm .dcp-rueckfrage-titel,
.crm .dcp-fehler-titel {
  font-size: var(--fs-body);
  font-weight: 500;
  color: var(--text-1);
  margin-bottom: 0.375rem;
}
.crm .dcp-rueckfrage-text,
.crm .dcp-fehler-text { margin: 0 0 0.625rem; font-size: var(--fs-body); color: var(--text-2); }

.crm .dcp-fehler-wege { display: flex; flex-wrap: wrap; gap: 0.375rem; }
.crm .dcp-request { margin-top: 0.5rem; font-size: var(--fs-meta); color: var(--text-3); }

/* PR1.659 (#957) — Bausteine beim Tippen, eine Zeile „Das wird abgefragt“, Annahme als Satz.
   Die Chip-Optik (.ve-*) teilt sich das Cockpit mit Pythia; hier nur, was das Cockpit zusätzlich braucht. */
.crm .dcp-bausteine { margin-top: 0.625rem; }
.crm .dcp-zeilen-bausteine { margin-top: 0; margin-bottom: 0.5rem; }
.crm .ve-zusatz { margin-left: 0.375rem; font-size: var(--fs-meta); opacity: 0.8; }
.crm .ve-statisch { cursor: default; }
.crm .ve-statisch:hover { background: color-mix(in srgb, var(--info) 10%, transparent); }
.crm .dcp-abfrage-aktionen { display: inline-flex; align-items: center; gap: 0.5rem; }
.crm .dcp-hint kbd { font: inherit; padding: 0 0.25rem; border: 0.0625rem solid var(--border); border-radius: 0.25rem; }
.crm .dcp-skelett { display: flex; flex-direction: column; gap: 0.5rem; }
.crm .dcp-skelett-chip { height: 1.5rem; border-radius: 62rem; background: var(--bg-hover); }
.crm .dcp-annahme {
  display: flex;
  align-items: flex-start;
  gap: 0.625rem;
  margin: 0.75rem 0 0;
  padding: 0.625rem 0.875rem;
  color: var(--text-2);
  font-size: var(--fs-body);
  border: 0.0625rem solid color-mix(in srgb, var(--warning) 45%, transparent);
  border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--warning) 10%, transparent);
}
.crm .dcp-annahme-symbol { flex: none; margin-top: 0.125rem; color: var(--warning); }
.crm .dcp-annahme-text p { margin: 0; }
.crm .dcp-annahme-text p + p { margin-top: 0.25rem; }
.crm .dcp-support { margin-top: 0.5rem; font-size: var(--fs-meta); color: var(--text-3); }
.crm .dcp-support summary { cursor: pointer; width: fit-content; }
.crm .dcp-support .dcp-request { margin-top: 0.25rem; }

/* Die Ergebnistabelle scrollt WAAGERECHT in ihrem eigenen Kasten. Senkrecht scrollt
   die Ansicht als Ganzes — zwei senkrechte Scroll-Zonen uebereinander sind
   unvorhersagbar zu bedienen. */
.crm .dcp-tabelle { overflow-x: auto; }
.crm .dcp-tabelle table { width: 100%; }

.crm .dcp-leer-titel { font-weight: 600; color: var(--text-1); }
.crm .dcp-leer-hinweis { margin-top: 0.25rem; font-size: var(--fs-ui); color: var(--text-3); }

/* ── PR1.270 (#464) — Diagramm-Baukasten, Redesign-Fassung ──────────────────
   Die Umgebung des Baukastens steht in style.css und traegt hier ueber die
   .crm-Aliase (--bg-card2 -> --bg-surface-2 usw.) schon fast richtig. Hier steht
   nur, was die Redesign-Formensprache anders will: die Marke fuer das aktive Bild,
   der Fokusring in --ad-blue und die ruhigeren Trennlinien.

   Keine rohen Farbwerte, keine px-Werte — der ui-craft-Ratchet zaehlt beides. */

.crm .ck-typ {
    padding: 0.3125rem 0.75rem;
    border: 0.0625rem solid var(--border);
    border-radius: var(--radius-sm, 0.375rem);
    background: var(--bg-surface);
    color: var(--text-2);
    font-size: var(--fs-ui);
    cursor: pointer;
}

.crm .ck-typ:hover {
    background: var(--bg-hover);
    color: var(--text-1);
}

.crm .ck-typ.is-active {
    background: var(--ad-blue);
    border-color: var(--ad-blue);
    color: var(--text-inv);
}

/* --focus traegt im dunklen Zustand bereits die hellere Stufe (Zeile 197). */
.crm .ck-el:focus-visible,
.crm .ck-sort:focus-visible,
.crm .ck-drill-link:focus-visible {
    outline: 0.125rem solid var(--focus, var(--ad-blue));
    outline-offset: 0.125rem;
}

.crm .ck-kachel-wert {
    color: var(--text-1);
}

.crm .ck-kachel-label {
    color: var(--text-3);
    opacity: 1;
}

.crm .ck-leer {
    color: var(--text-3);
    opacity: 1;
}

.crm .ck-legend {
    color: var(--text-2);
}

.crm .ck-drill {
    border-top-color: var(--border);
}

.crm .ck-drill-titel {
    color: var(--text-1);
}

.crm .ck-drill-link {
    color: var(--ad-blue-700);
}

/* Dasselbe Muster wie bei den Tabellen-Links (Zeile 846): --ad-blue-700 liegt auf dem
   dunklen Grund bei rund 1,7:1 und waere praktisch unlesbar. */
.crm.dark .ck-drill-link,
html[data-theme="dark"] .crm .ck-drill-link {
    color: var(--ad-blue-300);
}

.crm .ck-drill-leer,
.crm .ck-drill-hinweis {
    color: var(--text-3);
    opacity: 1;
}

/* ── PR1.286 (#484) — Freigabe-Rueckfrage: Token-Bruecke ────────────────────
   Das Fenster selbst liegt in style.css (ein Layout fuer beide Shells,
   Konvention 20). Was dort fehlt, ist die Uebersetzung zweier Legacy-Namen in
   die Redesign-Palette: --primary und --danger stehen NICHT an der .crm-Wurzel
   (siehe .crm .fb-form weiter oben — dort steht dieselbe Begruendung). Ohne
   diesen Block bekaeme das Fenster in der Redesign-Shell das indigo --primary
   und das grelle --danger aus :root und saehe damit aus wie ein
   Alt-Design-Einsprengsel.

   Kein roher px- oder Hex-Wert, wie Konvention 21 und der ui-craft-Ratchet es
   verlangen; Dark wird automatisch mitgetragen, weil die Zieltokens selbst
   themenabhaengig sind. --ad-red-700 statt --ad-red: der Fehlertext muss als
   TEXT lesbar sein, nicht nur als Flaeche. */
.crm .website-consent-veil .modal {
  --primary: var(--ad-blue);
  --primary-glow: var(--tint-blue);
  --danger: var(--ad-red-700);
  --radius: var(--r-md);
}

/* ── PR1.286 (#484) — Nutzerverwaltung: Token-Bruecke ───────────────────────
   Das Layout liegt in style.css (ein Regelsatz fuer beide Shells, Konvention 20).
   Was dort fehlt, ist die Uebersetzung der Legacy-Namen in die Redesign-Palette:
   --primary, --danger, --warning und --success stehen NICHT an der .crm-Wurzel
   (dieselbe Lage wie bei .crm .fb-form weiter oben, dort steht die Begruendung).
   Ohne diesen Block truege die Nutzertabelle das indigo --primary und das grelle
   --danger aus :root — sichtbare Alt-Design-Einsprengsel mitten im Redesign.

   Die -700-Stufen sind Absicht: --ad-green und --ad-orange bleiben unter 3:1 und
   taugen als Flaeche, nicht als Schriftfarbe. Kein roher px- oder Hex-Wert, wie
   Konvention 21 und der ui-craft-Ratchet es verlangen. */
.crm .admin-users-erklaerung,
.crm .admin-users-suche input,
.crm .admin-users-select,
.crm .admin-users-bulk select,
.crm .admin-sort,
.crm .admin-users-status,
.crm .admin-users-warnung,
.crm .admin-users-speichern,
.crm .admin-section-erklaerung,
.crm .status-pill {
  --primary: var(--ad-blue);
  --danger: var(--ad-red-700);
  --warning: var(--ad-orange-700);
  --success: var(--ad-green-700);
  --radius: var(--r-md);
}
/* PR1.768 (#1083) — Liste „Ohne Logo": Adresse und Knopf brechen nicht um, der lange Kundenname schon. */
.crm .logo-ohne-tbl td:not(:first-child) { white-space: nowrap; }

/* ═══════════════════════════════════════════════════════════════════════════
   PR1.273 (#467) — KB-Chat im Daten-Cockpit
   ───────────────────────────────────────────────────────────────────────────
   Motion-Budget: der Chat wird mehrmals taeglich benutzt (Vertrieb, CC-Leitung).
   Nach der Frequenz-Regel aus DESIGN.md heisst das: keine Tipp-Animation, keine
   Einblend-Choreografie, nichts ueber --t-fast. Die einzige Bewegung ist der
   wartende Punkt — und der hoert auf, sobald die Antwort da ist.

   Zwei Entscheidungen, die man sonst fuer Nachlaessigkeit halten koennte:

   1. Die Sprechblasen sind `.card` — die vorhandene Karte, nicht ein zweiter,
      fast gleicher Kasten. DESIGN.md: keine neuen Werte erfinden, wenn eine
      Skala existiert; dasselbe gilt fuer Bausteine.
   2. Linienstaerken kommen als rem, nicht als px. Der ui-craft-Ratchet zaehlt
      rohe px-Werte und blockt Rueckschritte — und nebenbei skaliert eine
      rem-Linie beim Zoom mit, statt duenner zu wirken.
   ═══════════════════════════════════════════════════════════════════════════ */

.crm .chat-panel,
.crm .dcp-reiter {
  --chat-linie: 0.0625rem;
  --chat-linie-aktiv: 0.125rem;
}

.crm .dcp-reiter {
  display: flex;
  gap: var(--s-1);
  border-bottom: var(--chat-linie) solid var(--border);
  margin-bottom: var(--s-4);
}

.crm .dcp-reiter-btn {
  appearance: none;
  background: none;
  border: none;
  border-bottom: var(--chat-linie-aktiv) solid transparent;
  color: var(--text-2);
  padding: var(--s-2) var(--s-4);
  font: inherit;
  cursor: pointer;
  transition: color var(--t-fast), border-color var(--t-fast);
}

.crm .dcp-reiter-btn:hover { color: var(--text-1); }

.crm .dcp-reiter-btn.is-aktiv {
  color: var(--text-1);
  border-bottom-color: var(--primary);
  font-weight: 600;
}

.crm .chat-panel {
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
}

.crm .chat-verlauf {
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
}

/* Die eigene Frage rechts und schmal, die Antwort ueber die volle Breite: eine
   Antwort mit Belegen und Diagramm braucht Platz, eine Frage nicht. */
.crm .chat-zeile.chat-ich {
  align-self: flex-end;
  max-width: 80%;
  background: var(--bg-card2);
  padding: var(--s-2) var(--s-4);
}

.crm .chat-zeile.chat-apollon { padding: var(--s-4); }

.crm .chat-zeile p { margin: 0; }

.crm .chat-hinweis {
  margin-top: var(--s-2) !important;
  color: var(--text-3);
  font-size: var(--fs-body);
}

.crm .chat-quellen {
  margin-top: var(--s-3);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-2);
}

.crm .chat-quellen-titel {
  color: var(--text-3);
  font-size: var(--fs-ui);
}

.crm .chat-quelle {
  display: inline-block;
  border: var(--chat-linie) solid var(--border);
  border-radius: var(--r-sm);
  padding: var(--s-1) var(--s-2);
  font-size: var(--fs-ui);
  color: var(--text-2);
  background: var(--bg-card2);
  max-width: 22rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.crm button.chat-quelle-doc {
  cursor: pointer;
  font-family: inherit;
  transition: border-color var(--t-fast), color var(--t-fast);
}

.crm button.chat-quelle-doc:hover {
  border-color: var(--primary);
  color: var(--text-1);
}

/* Kein Beleg ist eine Auskunft, kein Fehler — deshalb ruhig statt rot. */
.crm .chat-ohne-beleg {
  margin-top: var(--s-3) !important;
  color: var(--text-3);
  font-size: var(--fs-body);
  font-style: italic;
}

/* PR1.320 (#529) — was offen bleibt: ein ruhiger Nachsatz, keine Warnkarte. Sonst sieht
   jede ehrliche Teilantwort wie ein Fehler aus. */
.crm .chat-luecke {
  margin-top: var(--s-3);
  padding-left: var(--s-3);
  border-left: var(--chat-linie) solid var(--border);
  font-size: var(--fs-body);
  color: var(--text-2);
}

.crm .chat-luecke p { margin: 0 0 var(--s-1); }
.crm .chat-luecke-titel { font-weight: 600; }
.crm .chat-luecke ul { margin: var(--s-1) 0 0; padding-left: var(--s-5); }

/* Rueckfrage: dieselben Knoepfe wie die Beispiele im Leerzustand, nur nebeneinander. */
.crm .chat-rueckfrage { margin-top: var(--s-3); }
.crm .chat-rueckfrage p { margin: 0 0 var(--s-2); }

.crm .chat-rueckfrage-optionen {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
}

/* Gesperrt waehrend eines Zugs — ohne opacity, damit der Hover nicht durchschlaegt. */
.crm .chat-rueckfrage-option:disabled,
.crm .chat-rueckfrage-option:disabled:hover {
  cursor: not-allowed;
  color: var(--text-3);
  border-color: var(--border);
}

.crm .chat-diagramm {
  margin-top: var(--s-4);
  padding-top: var(--s-4);
  border-top: var(--chat-linie) solid var(--border);
}

.crm .chat-uebernehmen { margin-top: var(--s-3); }

/* Leerzustand: aktives Verb, anklickbare Startpunkte. */
.crm .chat-leer {
  padding: var(--s-8) var(--s-4);
  text-align: center;
  color: var(--text-2);
}

.crm .chat-leer-titel {
  color: var(--text-1);
  font-weight: 600;
  margin: 0 0 var(--s-2);
}

.crm .chat-leer-sub { margin: 0 0 var(--s-6); font-size: var(--fs-body); color: var(--text-3); }

.crm .chat-beispiele {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  align-items: center;
}

.crm .chat-beispiel {
  appearance: none;
  background: var(--bg-card2);
  border: var(--chat-linie) solid var(--border);
  border-radius: var(--r-md);
  color: var(--text-2);
  padding: var(--s-2) var(--s-4);
  font: inherit;
  font-size: var(--fs-body);
  cursor: pointer;
  max-width: 100%;
  transition: border-color var(--t-fast), color var(--t-fast);
}

.crm .chat-beispiel:hover { border-color: var(--primary); color: var(--text-1); }

/* Ladezustand: was gerade passiert, und wie weit es noch gehen kann. */
.crm .chat-laeuft {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  color: var(--text-2);
  font-size: var(--fs-body);
  padding: var(--s-2) 0;
}

.crm .chat-punkt {
  width: var(--s-2);
  height: var(--s-2);
  border-radius: 50%;
  background: var(--primary);
  animation: chat-puls 1.4s ease-in-out infinite;
}

/* Die einzige Bewegung im Panel — und sie zeigt etwas an, statt zu schmuecken. */
@keyframes chat-puls {
  0%, 100% { opacity: 0.35; }
  50%      { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .crm .chat-punkt { animation: none; opacity: 0.7; }
}

.crm .chat-runde { color: var(--text-3); margin-left: auto; }

/* PR1.657 (#955) — Pythia beim Tippen: grauer Rest (Tab), „Ich verstehe:“-Bausteine, @-Liste.
   Blau = erkannt, ocker gestrichelt = unsicher, nie Rot. Bewegung nur beim Erscheinen eines
   neuen Bausteins (.mo-chip-in, 220 ms) und ein einmaliges Aufleuchten (900 ms); der graue Rest
   erscheint ohne Bewegung; reduzierte Bewegung: alles sofort. */
.crm .chat-eingabe-feld { position: relative; }
.crm .chat-eingabe-feld .chat-eingabe { position: relative; z-index: 1; }
.crm .chat-geist { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; padding: var(--s-1) 0; font: inherit; white-space: pre-wrap; overflow-wrap: break-word; color: transparent; }
.crm .chat-geist-anker { display: inline-block; width: 0; height: 1.3em; vertical-align: text-bottom; }
.crm .chat-geist-rest { color: var(--text-3); }
.crm .chat-geist-tab { font: inherit; font-size: var(--fs-meta); margin-left: 0.375rem; padding: 0 0.3125rem; border: 0.0625rem solid var(--border); border-radius: 0.25rem; color: var(--text-3); white-space: nowrap; }
.crm .chat-verstehen { position: relative; display: flex; align-items: center; flex-wrap: wrap; gap: var(--s-2); }
.crm .chat-verstehen[hidden] { display: none; }
.crm .ve-titel { color: var(--text-3); font-size: var(--fs-meta); }
.crm .ve-liste { display: flex; flex-wrap: wrap; gap: var(--s-2); margin: 0; padding: 0; list-style: none; }
.crm .ve-chip { display: inline-flex; align-items: center; gap: 0.375rem; padding: 0.125rem 0.625rem; border: 0.0625rem solid; border-radius: 62rem; font: inherit; font-size: var(--fs-meta); cursor: pointer; background: transparent; transition: background-color 120ms var(--ease-out); }
.crm .ve-erkannt { color: var(--info); border-color: color-mix(in srgb, var(--info) 45%, transparent); background: color-mix(in srgb, var(--info) 10%, transparent); }
.crm .ve-erkannt:hover { background: color-mix(in srgb, var(--info) 20%, transparent); }
.crm .ve-unsicher { color: var(--warning); border: 0.0625rem dashed var(--warning); background: color-mix(in srgb, var(--warning) 10%, transparent); }
.crm .ve-unsicher:hover { background: color-mix(in srgb, var(--warning) 20%, transparent); }
.crm .ve-leucht .ve-chip { animation: veLeucht 900ms var(--ease-out) 1; }
@keyframes veLeucht { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--warning) 55%, transparent); } 100% { box-shadow: 0 0 0 0.5rem transparent; } }
.crm .ve-auswahl { position: absolute; top: calc(100% + 0.25rem); z-index: 20; min-width: 14rem; display: flex; flex-direction: column; gap: 0.125rem; padding: 0.375rem; background: var(--bg-card); border: 0.0625rem solid var(--border); border-radius: var(--r-md); box-shadow: var(--shadow-2); }
.crm .ve-frage { margin: 0.125rem 0.375rem 0.25rem; color: var(--text-3); font-size: var(--fs-meta); }
.crm .ve-wahl { padding: 0.375rem 0.625rem; border: 0; border-radius: 0.375rem; background: transparent; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.crm .ve-wahl:hover, .crm .ve-wahl:focus-visible { background: var(--bg-hover); }
/* Nachzug: Marke im Eingabefeld (Spiegel hinter dem Feld; der Platzhalter haelt 1 em fuer das Logo frei) */
.crm .pe-feld-marke { position: relative; background: color-mix(in srgb, var(--info) 12%, transparent); box-shadow: 0 0 0 0.0625rem color-mix(in srgb, var(--info) 45%, transparent); }
.crm .pe-feld-marke.ist-start { border-top-left-radius: 0.6em; border-bottom-left-radius: 0.6em; }
.crm .pe-feld-marke.ist-ende { border-top-right-radius: 0.6em; border-bottom-right-radius: 0.6em; }
.crm .pe-feld-logo { position: absolute; left: 0.1em; top: 50%; display: inline-flex; width: 1em; height: 1em; transform: translateY(-50%); color: var(--info); }
.crm .pe-feld-logo > * { width: 1em !important; height: 1em !important; min-width: 0; color: var(--info); }
.crm .ve-entfernen { margin-top: 0.125rem; border-top: 0.0625rem solid var(--border); border-radius: 0 0 0.375rem 0.375rem; color: var(--text-3); }
.crm .pe-host { position: absolute; z-index: 30; width: min(22rem, 100%); }
.crm .pe-host[hidden] { display: none; }
.crm .pe-liste { max-height: 18rem; margin: 0; padding: 0.25rem; overflow: auto; list-style: none; background: var(--bg-card); border: 0.0625rem solid var(--border); border-radius: var(--r-md); box-shadow: var(--shadow-2); }
.crm .pe-eintrag { display: flex; align-items: center; gap: 0.625rem; padding: 0.375rem 0.5rem; border-radius: 0.375rem; cursor: pointer; }
.crm .pe-eintrag.is-aktiv, .crm .pe-eintrag:hover { background: var(--bg-hover); }
.crm .pe-bild { display: inline-flex; flex: none; }
.crm .pe-text { display: flex; flex-direction: column; min-width: 0; }
.crm .pe-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.crm .pe-zusatz { color: var(--text-3); font-size: var(--fs-meta); }
.crm .pe-hinweis { padding: 0.5rem 0.625rem; color: var(--text-3); font-size: var(--fs-meta); }
.crm .pe-symbol { display: inline-flex; align-items: center; justify-content: center; }
.crm .pe-projekt { border-radius: 0.375rem; border: 0.0625rem solid color-mix(in srgb, var(--info) 45%, transparent); background: color-mix(in srgb, var(--info) 18%, transparent); }
.crm .pe-person { border-radius: 50%; background: var(--bg-hover); color: var(--text-2, inherit); }
.crm .pe-marke { display: inline-flex; align-items: center; gap: 0.25rem; padding: 0 0.5rem 0 0.1875rem; border: 0.0625rem solid color-mix(in srgb, var(--info) 45%, transparent); border-radius: 62rem; background: color-mix(in srgb, var(--info) 10%, transparent); color: var(--info); vertical-align: middle; }
.crm .pe-marke-bild { display: inline-flex; }
.crm .ve-erwaehnung .pe-marke { padding: 0; border: 0; background: none; }
@media (prefers-reduced-motion: reduce) {
  .crm .ve-leucht .ve-chip, .crm .ve-chip { animation: none; }
}
/* Ende PR1.657 (#955) */

/* ── PR1.651 (#950) — Pythia arbeitet sichtbar: Schrittspur, Skelett, Wort für Wort ──
   Zwilling zum gleichnamigen Block in style.css; Maße in rem (ui-craft raw-px).
   Dauern aus dem Bewegungsbudget (--mo-step, --mo-check, --mo-word); Orange bleibt der
   KI (Drehkreis), Grün nur der Haken. Die Spur steht außerhalb der Live-Region. */
.crm .chat-laeuft { align-items: stretch; }
.crm .chat-spur-live { display: flex; flex-direction: row; align-items: flex-start; gap: var(--s-2); }
.crm .chat-spur-live .chat-spur { flex: 1 1 auto; min-width: 0; }
.crm .chat-spur-pythia { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 1.75rem; height: 1.75rem; box-sizing: border-box; border-radius: 50%; background: color-mix(in srgb, var(--pythia-terra) 14%, var(--bg-card)); color: var(--pythia-terra); }
.crm .chat-fehl { width: 1rem; height: 1rem; fill: none; stroke: var(--text-3); stroke-width: 2; stroke-linecap: round; }
.crm .chat-spur-zeile.is-fehlgeschlagen .chat-spur-name { color: var(--text-2); font-weight: 500; }
.crm .chat-spur { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--s-2); font-size: var(--fs-ui); color: var(--text-2); }
.crm .chat-spur:empty { display: none; }
.crm .chat-spur-zeile, .crm .chat-spur-start { display: flex; align-items: center; gap: var(--s-2); margin: 0; font-size: var(--fs-ui); color: var(--text-2); }
.crm .chat-spur-zeile { animation: chatSpurEin var(--mo-step) var(--ease-out) both; }
.crm .chat-spur.is-ruhig .chat-spur-zeile { animation: none; }
.crm .chat-spur-name { color: var(--text-1); font-weight: 600; }
.crm .chat-spur-zeile.is-fertig .chat-spur-name { color: var(--text-2); }
.crm .chat-spur-ergebnis { color: var(--text-2); }
.crm .chat-spur-zeichen { flex: 0 0 auto; width: 1rem; height: 1rem; display: inline-flex; align-items: center; justify-content: center; }
.crm .chat-dreh { width: 0.75rem; height: 0.75rem; border-radius: 50%; border: 0.125rem solid color-mix(in srgb, var(--pythia-terra) 25%, transparent); border-top-color: var(--pythia-terra); animation: chatDreh 700ms linear infinite; }
.crm .chat-haken { width: 1rem; height: 1rem; fill: none; stroke: var(--success); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 16; stroke-dashoffset: 0; animation: chatHaken var(--mo-check) var(--ease-out) both; }
.crm .chat-spur.is-ruhig .chat-haken, .crm .chat-zf-haken .chat-haken { animation: none; }
@keyframes chatSpurEin { from { opacity: 0; transform: translateX(-0.375rem); } to { opacity: 1; transform: none; } }
@keyframes chatHaken { from { stroke-dashoffset: 16; } to { stroke-dashoffset: 0; } }
@keyframes chatDreh { to { transform: rotate(360deg); } }
.crm .chat-lauf-funde:empty { display: none; }
.crm .chat-skelett { display: flex; flex-direction: column; gap: var(--s-2); padding: var(--s-1) 0; }
.crm .chat-skelett-zeile { display: block; height: 0.75rem; border-radius: var(--r-sm); background: var(--border); }
.crm .chat-wort { display: inline-block; animation: chatWort var(--mo-word) var(--ease-out) both; animation-delay: var(--wort-d, 0ms); }
@keyframes chatWort { from { opacity: 0; filter: blur(0.1875rem); } to { opacity: 1; filter: none; } }
.crm .chat-suchweg.chat-zusammenfassung { margin: 0 0 var(--s-2); font-size: var(--fs-ui); }
.crm .chat-zusammenfassung summary { display: inline-flex; align-items: center; gap: var(--s-2); list-style: none; color: var(--text-2); }
.crm .chat-zusammenfassung summary::-webkit-details-marker { display: none; }
.crm .chat-zf-haken { display: inline-flex; }
.crm .chat-zf-auf { color: var(--primary); }
.crm .chat-zusammenfassung summary:hover .chat-zf-auf, .crm .chat-zusammenfassung summary:focus-visible .chat-zf-auf { text-decoration: underline; }
.crm .chat-zusammenfassung .chat-spur { margin: var(--s-2) 0 0; padding-left: var(--s-3); border-left: var(--chat-linie) solid var(--border); }
.crm .chat-fehler-spur { margin-bottom: var(--s-2); }
.crm .chat-angehalten { margin: var(--s-2) 0 0; color: var(--text-2); font-size: var(--fs-body); }
.crm .chat-warte-slot:empty { display: none; }
.crm .chat-warte-slot { flex: 1 1 100%; }
.crm .chat-warte { display: flex; align-items: center; gap: var(--s-2); font-size: var(--fs-ui); color: var(--text-2); }
.crm .chat-warte-text { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.crm .chat-warte-zeichen, .crm .chat-anhalten-zeichen { display: inline-flex; }
.crm .chat-warte-weg { margin-left: auto; background: none; border: 0; padding: var(--s-1); color: var(--text-2); cursor: pointer; display: inline-flex; border-radius: var(--r-sm); }
.crm .chat-warte-weg:hover { color: var(--text-1); }
.crm .chat-anhalten { flex: 0 0 auto; display: inline-flex; align-items: center; gap: var(--s-2); }
@media (prefers-reduced-motion: reduce) {
  .crm .chat-spur-zeile, .crm .chat-haken, .crm .chat-wort { animation-duration: 1ms; animation-delay: 0ms; }
  .crm .chat-dreh { animation: none; border: 0; width: 0.5rem; height: 0.5rem; background: var(--pythia-terra); }
}

.crm .chat-fehler {
  /* PR1.663 (Bild P4): ein Ausfall ist neutral — weisse Karte, kein Rot. */
  background: var(--bg-surface);
  border: var(--chat-linie) solid var(--border);
  border-radius: var(--r-xl);
  padding: var(--s-4) calc(var(--s-4) + var(--s-1) / 2);
  color: var(--text-1);
}

.crm .chat-fehler p { margin: 0; }
.crm .chat-fehler-knoepfe { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); margin-top: var(--s-2); }
/* .chat-erneut hatte einen eigenen Abstand nach oben — in der Knopfreihe stehen alle gleich hoch. */
.crm .chat-fehler-knoepfe .btn { display: inline-flex; align-items: center; gap: var(--s-2); margin-top: 0; }
.crm .chat-fehler-knoepfe .btn svg { width: 1rem; height: 1rem; flex: none; }
.crm .chat-fehler-knoepfe .btn-ghost { font-weight: 600; }
.crm .chat-ausfall { margin-top: var(--s-1); }
.crm .chat-fehler.is-ausfall { display: grid; grid-template-columns: minmax(0, 1fr); column-gap: 0.875rem; row-gap: var(--s-1); animation: chatAusfallEin 260ms var(--ease-out, ease-out) both; }
.crm .chat-fehler.is-ausfall.hat-ring { grid-template-columns: auto minmax(0, 1fr); }
.crm .chat-fehler.is-ausfall > :not(.chat-ring) { grid-column: -2; }
.crm .chat-fehler-titel { margin: 0; font-size: var(--fs-section); font-weight: 700; line-height: 1.35; color: var(--text-1); }
.crm .chat-fehler-text { font-size: var(--fs-ui); line-height: 1.5; color: var(--text-2); }
.crm .chat-ring { grid-column: 1; grid-row: 1 / 4; position: relative; width: var(--s-10); height: var(--s-10); }
.crm .chat-ring svg { width: var(--s-10); height: var(--s-10); transform: rotate(-90deg); display: block; }
.crm .chat-ring circle { fill: none; stroke-width: 3; }
.crm .chat-ring-grund { stroke: var(--bg-surface-3, var(--border)); }
.crm .chat-ring-bogen { stroke: var(--ad-orange-700); stroke-dasharray: 113; transition: stroke-dashoffset 1s linear; }
.crm .chat-ring-zahl { position: absolute; inset: 0; display: grid; place-items: center; font-size: var(--fs-label); font-weight: 700; color: var(--text-2); font-variant-numeric: tabular-nums; }
.crm .chat-fehler-support { margin-top: calc(var(--s-1) * 1.5); font-size: var(--fs-label); color: var(--text-3); }
.crm .chat-fehler-support summary { cursor: pointer; width: max-content; }
.crm .chat-fehler-support summary:focus-visible { outline: 0.125rem solid var(--focus, var(--primary)); outline-offset: 0.125rem; border-radius: var(--r-xs); }
.crm .chat-fehler-support[open] summary { margin-bottom: var(--s-1); }
.crm .chat-fehler-support-zeile { margin-right: var(--s-2); }
.crm .chat-support-kopieren { font-size: var(--fs-label); }
@keyframes chatAusfallEin { from { opacity: 0; transform: translateY(0.375rem); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .crm .chat-fehler.is-ausfall { animation: none; }
  .crm .chat-ring-bogen { transition: none; stroke-dashoffset: 0 !important; }
}

.crm .chat-form {
  display: flex;
  gap: var(--s-2);
  align-items: flex-end;
}

.crm .chat-eingabe {
  flex: 1;
  resize: vertical;
  min-height: var(--s-10);
  font: inherit;
}

.crm .chat-rest {
  margin: 0;
  text-align: right;
  color: var(--text-3);
  font-size: var(--fs-meta);
}

/* ═══════════════════════════════════════════════════════════════════════════
   PR1.319 (#528) — Pythia bekommt ein Gesicht: Bereich, Seitenleiste, Protokoll,
   Fund-Karten, Belegmarken, Suchweg, Gespraechsliste, Wegweiser.
   Motion-Budget wie beim Chat: keine Einblend-Choreografie, keine neue Animation —
   Protokollzeilen und Karten erscheinen einfach. rem statt px, Tokens statt Hex
   (Ratchets raw-px / raw-hex bleiben, wo sie sind).
   ═══════════════════════════════════════════════════════════════════════════ */

.crm .pythia-bereich {
  display: grid;
  grid-template-columns: 16rem minmax(0, 1fr);
  gap: var(--s-4);
  align-items: start;
}

.crm .pythia-gespraeche { padding: var(--s-3); }
.crm .pythia-hauptteil { padding: var(--s-4); }
.crm .pythia-kopf { margin-bottom: var(--s-4); display: flex; align-items: center; gap: var(--s-3); }
/* PR1.324 #533 — Pythia-Zeichen: Medaillon nur im Bereichskopf (4rem = 64 px), sonst
   der Dreifuss in Textfarbe. Statisch — keine Motion auf Knopf und Menuepunkt. */
.crm .pythia-kopf-zeichen { flex: none; width: 4rem; height: 4rem; }
.crm .pythia-kopf-text { min-width: 0; }
.crm .pythia-medaillon { display: block; color: var(--pythia-terra); }
.crm .pythia-medaillon .pz-grund,
.crm .pythia-medaillon .pz-gewand { fill: var(--pythia-terra-grund); }
.crm .pythia-zeichen { flex: none; }
.crm .sb-ic .pythia-dreifuss { display: block; }
.crm .pythia-leiste-titel { display: flex; align-items: center; gap: var(--s-2); }
.crm .pythia-titel { margin: 0; font-family: var(--f-cond); font-size: var(--fs-title); }
.crm .pythia-sub { margin: var(--s-1) 0 0; color: var(--text-3); font-size: var(--fs-body); }

/* Linkfarbe fuer kleine Texte: adesso-Blau (#006EC7) faellt im Dunkel-Theme auf 3,2:1 —
   deshalb ein eigener Token, der dort auf die helle Stufe wechselt (AA, axe-belegt). */
.crm .pythia-bereich,
.crm .pythia-leiste,
.crm .chat-panel { --chat-link: var(--ad-blue-700); }
.crm.dark .pythia-bereich, html[data-theme="dark"] .crm .pythia-bereich,
.crm.dark .pythia-leiste, html[data-theme="dark"] .crm .pythia-leiste,
.crm.dark .chat-panel, html[data-theme="dark"] .crm .chat-panel { --chat-link: var(--ad-blue-300); }

/* Gespraechsliste — drei Zustaende, aktiver Eintrag, Knoepfe immer sichtbar (Tastatur). */
/* PR1.812 (#1150): aus einer offenen Maske heraus geoeffnet (Strg/Cmd J) liegt die Leiste
   UEBER der Maske (die steht auf Ebene 90), sonst oeffnete sie sich unsichtbar dahinter. */
.crm .pythia-leiste-veil.is-ueber-maske { z-index: 92; }
.crm .pythia-leiste.is-ueber-maske { z-index: 93; }

.crm .chat-gespraeche-kopf { display: flex; flex-direction: column; gap: var(--s-2); margin-bottom: var(--s-3); }
.crm .chat-gespraeche-titel { color: var(--text-3); font-size: var(--fs-meta); }
.crm .chat-gespraeche-liste { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--s-1); }
.crm .chat-gespraech { display: flex; align-items: center; gap: var(--s-1); border-radius: var(--r-sm); }
.crm .chat-gespraech.is-aktiv { background: var(--bg-card2); }
.crm .chat-gespraech-oeffnen {
  flex: 1;
  min-width: 0;
  appearance: none;
  background: none;
  border: none;
  text-align: left;
  padding: var(--s-2);
  font: inherit;
  font-size: var(--fs-body);
  color: var(--text-2);
  cursor: pointer;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  border-radius: var(--r-sm);
}
.crm .chat-gespraech-oeffnen:hover { color: var(--text-1); background: var(--bg-card2); }
.crm .chat-gespraech.is-aktiv .chat-gespraech-oeffnen { color: var(--chat-link); font-weight: 600; }
.crm .chat-gespraech-knoepfe { display: flex; gap: var(--s-1); }
.crm .chat-gespraech-umbenennen { display: flex; gap: var(--s-1); flex-wrap: wrap; width: 100%; padding: var(--s-1); }
.crm .chat-gespraech-umbenennen input { flex: 1; min-width: 8rem; }
.crm .chat-gespraeche-leer,
.crm .chat-gespraeche-laedt { color: var(--text-3); font-size: var(--fs-body); margin: 0; padding: var(--s-2); }
.crm .chat-gespraeche-fehler {
  border: var(--chat-linie) solid var(--danger);
  border-radius: var(--r-md);
  padding: var(--s-2) var(--s-3);
  font-size: var(--fs-body);
}
.crm .chat-gespraeche-fehler p { margin: 0 0 var(--s-2); }

/* Statuszeile + Protokoll: die Liste waechst nach unten, ohne Bewegung. */
.crm .chat-laeuft { flex-direction: column; align-items: stretch; gap: var(--s-3); }
.crm .chat-schritt { display: flex; align-items: center; gap: var(--s-2); }
.crm .chat-protokoll {
  list-style: none;
  margin: 0;
  padding: 0 0 0 var(--s-3);
  border-left: var(--chat-linie-aktiv) solid var(--border);
  display: flex;
  flex-direction: column;
  gap: var(--s-1);
  font-size: var(--fs-ui);
  color: var(--text-2);
}
.crm .chat-protokoll-schritt { display: flex; align-items: center; gap: var(--s-2); }
.crm .chat-protokoll-schritt.is-fertig { color: var(--text-3); }
.crm .chat-protokoll-ok { color: var(--success); font-weight: 600; }
.crm .chat-suchweg { margin-top: var(--s-3); font-size: var(--fs-body); color: var(--text-2); }
.crm .chat-suchweg summary { cursor: pointer; }
.crm .chat-suchweg .chat-protokoll { margin-top: var(--s-2); }

/* Fund-Karten: der Ort, an dem man in den Bestand hineinklickt. */
.crm .chat-funde { display: flex; flex-direction: column; gap: var(--s-2); margin-top: var(--s-3); }
.crm .chat-fund { padding: var(--s-2) var(--s-3); background: var(--bg-card2); font-size: var(--fs-ui); }
.crm .chat-fund-kopf { display: flex; justify-content: space-between; gap: var(--s-2); color: var(--text-2); margin-bottom: var(--s-1); }
.crm .chat-fund-titel { font-weight: 600; color: var(--text-1); }
.crm .chat-fund-anzahl { color: var(--text-3); white-space: nowrap; }
.crm .chat-fund-tabelle { overflow-x: auto; }
.crm .chat-fund-liste { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--s-1); }
.crm .chat-fund-link {
  appearance: none;
  background: none;
  border: none;
  padding: 0;
  font: inherit;
  font-size: var(--fs-ui);
  color: var(--chat-link);
  cursor: pointer;
  text-align: left;
}
.crm .chat-fund-link:hover { text-decoration: underline; }
.crm .chat-fund-auszug { color: var(--text-3); }
.crm .chat-fund-hinweis { margin: var(--s-1) 0 0; color: var(--text-3); font-size: var(--fs-meta); font-style: italic; }
/* PR1.346 (#560) — Treffer oeffnen den Datensatz. Fokusring kommt aus der generischen
   `.crm :focus-visible`-Regel; taeglich genutzt → kein Uebergang. */
.crm .chat-fund-gruppe > summary { cursor: pointer; color: var(--chat-link); }
.crm .chat-fund-tabelle td { vertical-align: top; }
.crm .chat-fund-gruppe-anzahl { color: var(--text-3); }
.crm .chat-fund-gruppe .chat-fund-liste { margin: var(--s-1) 0 0 var(--s-3); }
.crm .chat-fund-gruppe-mehr { margin: var(--s-1) 0 0 var(--s-3); color: var(--text-3); font-size: var(--fs-meta); }
.crm .chat-quelle-text { border-style: dashed; background: none; cursor: default; }

/* Belegmarken im Satz — klein, aber ein echter Knopf mit Fokusring. */
.crm .chat-beleg {
  appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.125rem;
  height: 1.125rem;
  padding: 0 var(--s-1);
  margin: 0 0.125rem;
  border: var(--chat-linie) solid var(--chat-link);
  border-radius: var(--r-sm);
  background: var(--bg-card2);
  color: var(--chat-link);
  font: inherit;
  font-size: var(--fs-label);
  font-weight: 500;
  line-height: 1;
  vertical-align: 0.125rem;
  cursor: pointer;
}
.crm .chat-beleg:hover { background: var(--primary); color: var(--bg-surface); }
.crm .chat-quelle-nr { color: var(--text-3); font-size: var(--fs-meta); }
.crm button.chat-quelle-datensatz,
.crm button.chat-quelle-zahl { cursor: pointer; font-family: inherit; transition: border-color var(--t-fast), color var(--t-fast); }
.crm button.chat-quelle-datensatz:hover,
.crm button.chat-quelle-zahl:hover { border-color: var(--primary); color: var(--text-1); }

/* Zusammenhang: als Chip an der Frage und abwaehlbar ueber dem Feld. */
.crm .chat-kontext {
  display: inline-flex;
  align-items: center;
  gap: var(--s-1);
  border-radius: 999rem;
  padding: var(--s-1) var(--s-3);
  background: var(--bg-card2);
  border: var(--chat-linie) solid var(--border);
  font-size: var(--fs-ui);
  color: var(--text-2);
  max-width: 100%;
}
.crm .chat-kontext-titel { color: var(--text-3); }
.crm .chat-kontext-weg { appearance: none; background: none; border: none; color: var(--text-3); cursor: pointer; font: inherit; padding: 0 var(--s-1); }
.crm .chat-kontext-weg:hover { color: var(--text-1); }
.crm .chat-ich .chat-kontext { margin-bottom: var(--s-2); }

/* Dokumenttext unter der Antwort (Beleg-Klick). */
.crm .chat-dokument {
  margin-top: var(--s-3);
  border: var(--chat-linie) solid var(--border);
  border-radius: var(--r-md);
  padding: var(--s-2) var(--s-3);
  font-size: var(--fs-ui);
  color: var(--text-2);
}
.crm .chat-dokument-kopf { display: flex; justify-content: space-between; align-items: center; gap: var(--s-2); margin-bottom: var(--s-2); color: var(--text-1); }
.crm .chat-dokument-text { margin: 0; white-space: pre-wrap; max-height: 20rem; overflow: auto; font: inherit; }
.crm .chat-dokument-fehler { border-color: var(--danger); }

/* Wegweiser im Cockpit + „Erneut fragen" */
.crm .chat-wegweiser { padding: var(--s-6); text-align: center; }
.crm .chat-wegweiser-titel { margin: 0 0 var(--s-2); font-weight: 600; color: var(--text-1); }
.crm .chat-wegweiser-sub { margin: 0 0 var(--s-4); color: var(--text-2); font-size: var(--fs-body); }
.crm .chat-erneut { margin-top: var(--s-2); }

/* Seitenleiste = der vorhandene Drawer, etwas breiter fuer Karten und Tabellen. */
.crm .pythia-leiste { width: min(34rem, 96vw); }
.crm .pythia-leiste-body .chat-panel { flex: 1; }
.crm .tb-pythia { white-space: nowrap; display: inline-flex; align-items: center; gap: var(--s-2); position: relative; }
/* BF-166 (#1141) — Punkt: eine Antwort wartet, waehrend eine andere Seite offen ist.
   Neutral wie das Glocken-Badge (Orange bleibt Warnungen); taeglich sichtbar → keine Bewegung. */
.crm .tb-pythia-punkt {
  position: absolute; top: -0.1875rem; right: -0.1875rem;
  width: 0.625rem; height: 0.625rem; border-radius: 50%;
  background: var(--ad-blue-900); box-shadow: 0 0 0 0.125rem var(--bg-surface);
}
/* BF-166 — Pythia zeichnet in einen eigenen Behaelter in #crm-content; er setzt die
   Hoehenkette (RD1.11) fort, gescrollt wird weiter genau eine Ebene tiefer. */
.crm .pythia-wurzel { display: flex; flex-direction: column; flex: 1; min-height: 0; }
/* Das 20-px-Zeichen darf den Knopf nicht hoeher machen als seine Nachbarn. */
.crm .tb-pythia .pythia-dreifuss { margin-block: -0.25rem; }
.crm .pythia-leiste-bereich { appearance: none; background: none; border: none; padding: 0; font: inherit; font-size: var(--fs-ui); color: var(--chat-link); cursor: pointer; text-decoration: underline; }

@media (max-width: 56rem) {
  .crm .pythia-bereich { grid-template-columns: minmax(0, 1fr); }
  .crm .pythia-leiste { width: 100vw; }
}

/* Schmale Fenster: kein harter Umbruchpunkt noetig. Das Formular bricht um, sobald
   das Eingabefeld seine Mindestbreite unterschreitet, und die Sprechblase kann nie
   breiter werden als der Platz — das traegt jede Fensterbreite ohne Sprungstelle. */
.crm .chat-form { flex-wrap: wrap; }
.crm .chat-eingabe { flex: 1 1 12rem; }
/* Der Knopf behaelt seine natuerliche Breite. Mit flex-grow zog er sich ueber die halbe
   Zeile — ein Absenden-Knopf, der breiter ist als noetig, sieht nach Fehler aus. */
.crm .chat-senden { flex: 0 0 auto; }

/* Waehrend der Chat arbeitet, sind Feld und Knopf gesperrt — das muss man auch SEHEN.
   Bewusst an diesen beiden Elementen statt global an `.btn:disabled`: eine app-weite
   Regel traefe jeden Knopf der Anwendung, und genau deshalb hat sich das Projekt an
   zwei anderen Stellen schon dagegen entschieden (style.css:13231, :13456). */
.crm .chat-senden:disabled,
.crm .chat-eingabe:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}
/* ── PR1.274 (#468) — Bestaetigungskarten fuer Chat-Aktionen ─────────────────────
   Zwilling zum gleichnamigen Block in style.css.

   Alle Masse in rem, nicht in px: der ui-craft-Ratchet `raw-px` (Konvention 21) zaehlt
   harte Pixelwerte in dieser Datei, und der Chat-Block darueber ist aus demselben Grund
   schon so gebaut.

   Ebenfalls bewusst: keine Bewegung. Was in einem scrollenden Verlauf erscheint, soll
   dastehen, nicht auffahren. */
.crm .chat-aktionen { display: flex; flex-direction: column; gap: 0.625rem; margin-top: 0.75rem; }

.crm .chat-aktion {
  border-left: 0.1875rem solid var(--primary);
  padding: 0.75rem;
  background: var(--bg-surface-2);
}

.crm .chat-aktion-titel {
  margin: 0 0 0.5rem;
  font-weight: 600;
  color: var(--text-1);
}

.crm .chat-aktion-felder { margin: 0; display: grid; gap: 0.25rem 0.75rem; }
.crm .chat-aktion-feld { display: grid; grid-template-columns: minmax(7rem, 11rem) 1fr; gap: 0.25rem 0.75rem; }
.crm .chat-aktion-feld dt { color: var(--text-2); font-size: var(--fs-ui); }
.crm .chat-aktion-feld dd { margin: 0; color: var(--text-1); font-size: var(--fs-body); overflow-wrap: anywhere; }

.crm .chat-aktion-knoepfe { display: flex; gap: 0.5rem; flex-wrap: wrap; margin-top: 0.75rem; }

.crm .chat-aktion-status { margin: 0.5rem 0 0; color: var(--text-2); font-size: var(--fs-ui); }

/* Der Fehlerton kommt aus der -700-Stufe: `--ad-red` liegt unter 3:1 gegen die helle
   Flaeche und taugt fuer Text nicht (dokumentierte AA-Korrektur dieser Datei). */
.crm .chat-aktion-fehler { margin: 0.5rem 0 0; color: var(--ad-red-700); font-size: var(--fs-ui); }

/* Gruen ist im Redesign keine Textfarbe — hier faerbt es nur den Balken, nicht Schrift. */
.crm .chat-aktion.is-erledigt { border-left-color: var(--ad-green-700); }
.crm .chat-aktion.is-fehler { border-left-color: var(--ad-red-700); }
.crm .chat-aktion.is-abgelehnt { border-left-color: var(--border); opacity: 0.7; }
.crm .chat-aktion.is-laeuft { border-left-color: var(--text-3); }

@media (max-width: 26rem) {
  .crm .chat-aktion-feld { grid-template-columns: 1fr; }
}

/* ── PR1.321 (#530) — Pythias Bestaetigungsliste ──────────────────────────────
   Bewusst OHNE px und ohne rohe Farben (Konvention 21, ui-craft-Ratchet). Ton-
   stufen nach der Kontrast-Lehre dieser Datei: Text in -900 bzw. -700, die
   Grundtoene nur fuer Balken. Keine Animation: gelegentlich genutzt, hoher
   Einsatz — Klarheit vor Effekt. */
.crm .chat-plan-zaehlung { margin: 0; color: var(--text-2); font-size: var(--fs-body); }

.crm .pythia-plan-hinweise { display: flex; flex-direction: column; gap: 0.375rem; margin-bottom: 0.75rem; }
.crm .pythia-plan-hinweise:empty { display: none; }
.crm .pythia-plan-hinweise p {
  margin: 0; padding: 0.5rem 0.75rem; font-size: var(--fs-body);
  border-left: 0.1875rem solid var(--border-strong);
  background: var(--bg-surface-2); color: var(--text-1);
}
.crm .pythia-plan-hinweise .pythia-plan-sperre,
.crm .pythia-plan-hinweise .pythia-plan-fehler { border-left-color: var(--ad-red-700); font-weight: 600; }
.crm .pythia-plan-hinweise .pythia-plan-hinweis.is-warnung { border-left-color: var(--ad-orange-700); }
.crm .pythia-plan-hinweise .pythia-plan-lauf { border-left-color: var(--primary); }
.crm .pythia-plan-hinweise .pythia-plan-leer { color: var(--text-2); }

.crm .pythia-plan-huelle {
  max-height: 60vh; overflow: auto;
  border: 0.0625rem solid var(--border); border-radius: var(--r-md);
}
.crm .pythia-plan-tabelle { width: 100%; min-width: 44rem; border-collapse: collapse; font-size: var(--fs-body); }
.crm .pythia-plan-tabelle th {
  position: sticky; top: 0; z-index: 1;
  background: var(--bg-surface-2); text-align: left; font-weight: 600; color: var(--text-2);
  padding: 0.5rem 0.625rem; border-bottom: 0.0625rem solid var(--border);
}
.crm .pythia-plan-tabelle td {
  padding: 0.5rem 0.625rem; border-bottom: 0.0625rem solid var(--border);
  vertical-align: top; color: var(--text-1);
}
.crm .pythia-plan-tabelle tr:last-child td { border-bottom: 0; }
.crm .pythia-plan-wahl { width: 2.5rem; }
.crm .pythia-plan-wahl input { width: 1.125rem; height: 1.125rem; }
.crm .pythia-plan-name { display: block; font-weight: 600; overflow-wrap: anywhere; }
.crm .pythia-plan-art { display: block; color: var(--text-2); font-size: var(--fs-ui); }
.crm .pythia-plan-status { display: inline-block; margin-top: 0.25rem; font-size: var(--fs-meta); font-weight: 500; color: var(--text-2); }
.crm .pythia-plan-bisher { color: var(--text-2); overflow-wrap: anywhere; }
.crm .pythia-plan-felder { display: grid; gap: 0.375rem; }
.crm .pythia-plan-feld { display: grid; grid-template-columns: minmax(6rem, 9rem) 1fr; gap: 0.25rem 0.5rem; align-items: center; }
.crm .pythia-plan-feld.is-einzeln { grid-template-columns: 1fr; }
.crm .pythia-plan-feld label { color: var(--text-2); font-size: var(--fs-ui); }
.crm .pythia-plan-feld .form-control { padding: 0.25rem 0.5rem; font-size: var(--fs-body); }
.crm .pythia-plan-feldfehler { grid-column: 1 / -1; color: var(--ad-red-700); font-size: var(--fs-ui); }
.crm .pythia-plan-weg { color: var(--ad-red-700); font-weight: 600; }
.crm .pythia-plan-maske { margin-top: 0.375rem; }
.crm .pythia-plan-meldung { margin: 0.375rem 0 0; font-size: var(--fs-ui); color: var(--text-2); }

.crm .pythia-plan-zeile.is-ab td:not(.pythia-plan-wahl),
.crm .pythia-plan-zeile.is-unmoeglich td:not(.pythia-plan-wahl) { color: var(--text-3); }
.crm .pythia-plan-zeile.is-ab .pythia-plan-bisher,
.crm .pythia-plan-zeile.is-ab .pythia-plan-art { color: var(--text-3); }
.crm .pythia-plan-zeile.is-geaendert td:first-child { box-shadow: inset 0.1875rem 0 0 var(--ad-orange-700); }
.crm .pythia-plan-zeile.is-geaendert .pythia-plan-status,
.crm .pythia-plan-zeile.is-geaendert .pythia-plan-meldung { color: var(--ad-orange-900); }
.crm .pythia-plan-zeile.is-fehler td:first-child { box-shadow: inset 0.1875rem 0 0 var(--ad-red-700); }
.crm .pythia-plan-zeile.is-fehler .pythia-plan-status,
.crm .pythia-plan-zeile.is-fehler .pythia-plan-meldung { color: var(--ad-red-700); }
.crm .pythia-plan-zeile.is-erledigt td:first-child { box-shadow: inset 0.1875rem 0 0 var(--ad-green-700); }
.crm .pythia-plan-knoepfe { display: flex; gap: 0.5rem; }
/* Gesperrt MUSS gesperrt aussehen: bei einer Sperre (mehr als drei Loeschungen, leere
   Pflichtangabe) und waehrend der Ausfuehrung. Nur an dieser Liste, nicht global an
   `.btn:disabled` — dieselbe Abwaegung wie bei .chat-senden:disabled oben. */
.crm .pythia-plan-knoepfe .btn:disabled,
.crm .pythia-plan-maske:disabled { opacity: 0.55; cursor: not-allowed; }

/* Dunkelmodus: --ad-red-700 kommt auf dem dunklen Grund nur auf 3.07:1 (Palette-
   Kommentar oben) — Rot-TEXT nimmt dort die helle Stufe, Orange-Text den Grundton.
   Die Balken bleiben, wie sie sind; sie sind Markierung, kein Text. */
.crm.dark .pythia-plan-weg , html[data-theme="dark"] .crm .pythia-plan-weg ,
.crm.dark .pythia-plan-feldfehler , html[data-theme="dark"] .crm .pythia-plan-feldfehler ,
.crm.dark .pythia-plan-zeile.is-fehler .pythia-plan-status ,
html[data-theme="dark"] .crm .pythia-plan-zeile.is-fehler .pythia-plan-status ,
.crm.dark .pythia-plan-zeile.is-fehler .pythia-plan-meldung ,
html[data-theme="dark"] .crm .pythia-plan-zeile.is-fehler .pythia-plan-meldung { color: var(--ad-red-300); }
.crm.dark .pythia-plan-zeile.is-geaendert .pythia-plan-status ,
html[data-theme="dark"] .crm .pythia-plan-zeile.is-geaendert .pythia-plan-status ,
.crm.dark .pythia-plan-zeile.is-geaendert .pythia-plan-meldung ,
html[data-theme="dark"] .crm .pythia-plan-zeile.is-geaendert .pythia-plan-meldung { color: var(--ad-orange); }

/* ── PR1.265 (#459) — Org-Struktur (BL → CC → MA) ───────────────────────────
   Bewusst OHNE px und ohne rohe Farben: der ui-craft-Ratchet zaehlt beide ueber
   die ganze Datei, ein einziger harter Wert kippt den Job (Konvention 21).
   Kein overflow hier — die Ansicht scrollt ueber #crm-content, genau wie die
   Status-Seite. Keine transition: der Aufklapp-Weg ist tastaturinitiiert. */
.crm .kb-eyebrow { font-size:var(--fs-label); color:var(--text-3); font-weight:500; }
/* Nachzug 3 (#882, K1) — Kopf des KB Command Center: Eyebrow und Titel links, rechts auf
   Höhe des Titels der Organigramm-Verweis (blauer Text mit Pfeil) und der Umschalter. */
.crm .kb-cc-head { align-items:center; border-bottom:0; padding-bottom:0.3rem; }
.crm .kb-cc-head .kb-eyebrow { font-size:var(--fs-ui); color:var(--text-2); font-weight:600; margin-bottom:0.125rem; }
.crm .kb-cc-head .kb-cc-aktionen { flex-wrap:nowrap; gap:1.25rem; margin-top:0.3rem; }
.crm .kb-org-link { display:inline-flex; align-items:center; gap:0.375rem; padding:0; border:0; background:none; color:var(--focus); font:inherit; font-size:var(--fs-meta); font-weight:600; white-space:nowrap; cursor:pointer; }
.crm .kb-org-link:hover { text-decoration:underline; }
.crm .kb-org-link:focus-visible { outline:0.125rem solid var(--focus); outline-offset:0.125rem; border-radius:0.25rem; }
.crm .kb-org-link svg { width:0.875rem; height:0.875rem; fill:none; stroke:currentColor; stroke-width:1.6; stroke-linecap:round; }
.crm .kb-cc-head .seg button { padding:0.3125rem 0.625rem; }
.crm .kb-cc-head .seg button.is-active { color:var(--text-1); font-weight:600; }
@media (max-width: 52rem) {
  .crm .kb-cc-head .kb-cc-aktionen { flex-wrap:wrap; gap:0.5rem 1rem; }
}
.crm .org-name { display:flex; align-items:baseline; gap:0.5rem; }
 /* PR1.416: Zeichen passt in die Aufklapp-Spalte */
.crm .org-count { color:var(--text-3); font-size:var(--fs-label); }
.crm .org-sub { flex-basis:100%; color:var(--text-3); font-size:var(--fs-meta); }
/* „Ohne Zuordnung" ist ein Datenqualitaets-Befund, kein normales Center. Der Hinweis
   traegt den Warnton als TEXTfarbe — eine Flaeche haette einen Farbwert gebraucht,
   den es als AA-gepruefter Token nicht gibt. */
/* PR1.265 — in der halbierten Pruefspalte brach „Kai Peters" ueber zwei Zeilen.
   Der Name bleibt jetzt zusammen; umbrochen wird der Projektname dahinter. */
.crm .org-name { flex-wrap: wrap; }
.crm .org-retry { padding: 0.75rem 1rem 0; }
/* PR1.548 (#829) — Organigramm im KB Command Center. Kein Motion (Frequenzregel),
   kein eigener Scroll-Bereich: das Raster bricht um. Linien = Rahmen + Pseudo-Elemente. */
.crm .och { display: flex; flex-direction: column; gap: var(--s-6); padding: var(--s-4); }

/* ── PR1.264 (#458) — Kunden-Baum (Kunde → Vorgang → Projekt → Team) ────────
   Vier Ebenen statt drei, sonst dieselben Regeln wie die Org-Struktur oben.
   Wieder OHNE px und ohne rohe Farben — der raw-px-Ratchet stand beim Bau
   exakt auf seiner Grenze (683/683), ein einziger harter Wert kippt den Job.
   Kein overflow: die Ansicht scrollt ueber #crm-content, wie die Status-Seite.
   Keine transition: der Aufklapp-Weg ist tastaturinitiiert (Konvention 22). */
/* Die Einrueckung ist die einzige Tiefenanzeige — ohne sie waere ein Projekt
   unter einem Vorgang von einem Vorgang nicht zu unterscheiden. */
/* flex:1 1 0 ist hier kein Feinschliff: ohne die Angabe waehlt der Browser die
   Inhaltsbreite als Basis, die Zelle bricht um — und der Aufklapp-Pfeil stand in
   einer eigenen Zeile UEBER dem Namen, zu dem er gehoert. */
/* Platzhalter fuer das Kundenlogo: die Flaeche steht sofort, das Bild kommt ueber
   die authentifizierte Route nach (resolveAccountLogos). Ohne feste Flaeche
   ruckelte die Zeile beim Nachladen. */
/* Nur Groesse und Ausrichtung: Farbe, Radius und das Ausblenden der Initialen bei
   geladenem Logo kommen aus .acc-logo in style.css, die sich beide Shells teilen. */
/* Die Kundenzeile ist der Blockanfang — bei 40+ Kunden findet das Auge ihn sonst
   nicht wieder. Tonung statt zweiter Linienstaerke, sonst wird das Raster unruhig. */
/* Hoehenkette (RD1.11): #crm-content ist der Flex-KONTEXT, gescrollt wird eine Ebene
   tiefer. Die Karte fuellt die Hoehe, die Tabelle darin scrollt. Live gemessen lief
   ohne das #crm-content um 3543px ueber — die Org-Sicht faellt nur deshalb nicht auf,
   weil sie kuerzer ist. */

/* ── PR1.549 (#830) — Kundenlandkarte ─────────────────────────────────────────
   Vier Spalten Kunde → Opportunities → Projekte → Team, Kurven als SVG darueber.
   Die Linien misst customer-map-html.js aus der Darstellung; hier liegt nur das Raster.
   Keine Bewegung: die Sicht wird mehrmals die Woche benutzt, Linien stehen sofort.
   Nur rem und Tokens (ui-craft-Ratchet). */
/* PR1.570 — Mindestbreite = Spuren (12 + 3*13 + 3*3.5 rem) plus Innenabstand, sonst ragt die Team-Spalte ueber. */
.crm .cmap { position:relative; min-width:calc(61.5rem + 2 * var(--s-4)); padding:var(--s-4); }
/* Handlungsbedarf: offen, aber weder Projekt noch Team. Ton ueber Flaeche + Rand, der
   Text bleibt in Textfarbe (AA in beiden Themes). */
/* Verloren tritt zurueck — ueber Farbe, nicht Deckkraft: der Text bleibt lesbar. */

/* ── PR1.267 (#461) — Sicht „Datenqualitaet" ────────────────────────────────
   Bewusst ohne rohe Pixel- und Farbwerte: der ui-craft-Ratchet zaehlt beides ueber
   die ganze Datei und stand bei raw-px exakt an der Grenze (683/683). Alle Groessen
   in rem, alle Farben aus Tokens.

   Die Regelzeilen sind natives <details>/<summary> — tastaturbedienbar, mit
   sichtbarem Fokus und korrekter Zustandsmeldung, ohne eine Zeile Skript. Und sie
   animieren nicht: die Sicht liegt auf einem Aufraeum-Weg, nicht auf einem
   Hochfrequenz-Pfad, aber ein Aufklappen mit Bewegung waere hier reine Dekoration. */
.crm .dq-head { display:flex; align-items:center; justify-content:space-between;
  gap:var(--s-3); flex-wrap:wrap; margin-bottom:var(--s-3); }
.crm .dq-rules { display:flex; flex-direction:column; gap:var(--s-1); }
/* Trennung ueber Flaechenwechsel statt Trennlinien — das ist die Redesign-Sprache
   fuer Karten (DESIGN.md, „Cards/Containers") und spart zugleich rohe px-Werte, die
   der Ratchet zaehlt. */
.crm .dq-rule { border-radius:var(--r-md); background:var(--bg-surface-2); }
.crm .dq-rule + .dq-rule { margin-top:0; }
.crm .dq-summary { display:flex; align-items:baseline; gap:var(--s-3);
  padding:var(--s-2) var(--s-3); cursor:pointer; flex-wrap:wrap; }
.crm .dq-summary::-webkit-details-marker { display:none; }
/* Eigenes Dreieck statt des Browser-Markers: das Standardglyph sitzt je nach
   Plattform anders und bricht die Grundlinie der Zeile. */
.crm .dq-summary::before { content:""; color:var(--text-3); flex:0 0 auto;
  width:0.875rem; height:0.875rem; transition:none; background-color:currentColor; align-self:center;
  -webkit-mask:var(--ic-mask-caret-right); mask:var(--ic-mask-caret-right); }
.crm .dq-rule[open] > .dq-summary::before { -webkit-mask:var(--ic-mask-caret-down); mask:var(--ic-mask-caret-down); }
.crm .dq-count { font-family:var(--f-cond); font-weight:600; font-size:var(--fs-section);
  min-width:2rem; text-align:right; flex:0 0 auto; }
.crm .dq-label { font-weight:600; color:var(--text-1); }
/* Nur im Zeilen-Kontext: `flex-basis` wird in einem Spalten-Container zur HOEHE,
   und der Hinweis im Dubletten-Block stand dadurch 12rem hoch statt einzeilig.
   Auf der Pruefseite im Leerzustand als klaffende Luecke aufgefallen. */
.crm .dq-summary .dq-hint { flex:1 1 12rem; min-width:0; }
.crm .dq-muted { flex:0 0 auto; }
.crm .dq-list { list-style:none; margin:0; padding:0 var(--s-3) var(--s-3);
  display:flex; flex-direction:column; gap:var(--s-1); }
.crm .dq-list-empty { padding:0 var(--s-3) var(--s-3); }
.crm .dq-item { display:flex; align-items:baseline; gap:var(--s-2); flex-wrap:wrap;
  padding:var(--s-2); border-radius:var(--r-sm); background:var(--bg-surface); }
.crm .dq-link { background:none; border:0; padding:0; font:inherit; cursor:pointer;
  color:var(--text-1); font-weight:600; text-align:left; text-decoration:underline;
  text-underline-offset:0.125rem; }
.crm .dq-grund { flex:1 1 14rem; min-width:0; }
/* Das Urteilswort teilt die Farbstufen der Zaehlspalte, aber NICHT ihre Groesse:
   „Verschieden" in Zaehlgroesse draengt sich vor die Namen, um die es geht. Bei der
   Abnahme auf der Pruefseite genau so aufgefallen. */
.crm .dq-verdict { font-size:var(--fs-meta); font-weight:500; min-width:5.5rem; flex:0 0 auto; }
.crm .dq-pair-names { flex:1 1 16rem; min-width:0; color:var(--text-1); }
.crm .dq-vs { color:var(--text-3); }
.crm .dq-mute-wrap { display:flex; align-items:baseline; gap:var(--s-2);
  flex-wrap:wrap; flex:0 0 auto; }
.crm .dq-mute { background:var(--bg-surface-3); border:0; border-radius:var(--r-sm);
  padding:0.125rem var(--s-2); font:inherit; font-size:var(--fs-meta); cursor:pointer;
  color:var(--text-2); }
.crm .dq-mute:hover { background:var(--bg-hover); color:var(--text-1); }
.crm .dq-reason { display:flex; align-items:center; gap:var(--s-2); flex-wrap:wrap; }
/* `display:flex` aus der Zeile darueber schlaegt das UA-Stylesheet fuer [hidden] —
   ohne diese Regel stehen ALLE Begruendungsfelder dauerhaft offen und die Trefferliste
   ist zugemuellt. Beim ersten Blick auf die Pruefseite genau so aufgefallen. */
.crm .dq-reason[hidden] { display:none; }
/* Das Label ist sichtbar und mit dem Feld verbunden — ein Platzhalter allein
   verschwindet beim Tippen und ist kein Ersatz. */
.crm .dq-reason-lbl { font-size:var(--fs-meta); color:var(--text-3); }
/* Groesse und Mindestbreite hier, alles Uebrige aus .crm-input — ein zweiter
   Eingabefeld-Stil waere genau die Designsprachen-Mischung, die Konvention 21 meint. */
.crm .dq-reason-in { font-size:var(--fs-ui); min-width:12rem; }
.crm .dq-actions { margin-top:var(--s-2); }
.crm .dq-dupes-hd { margin-top:var(--s-5); }
.crm .dq-dupes-idle { display:flex; flex-direction:column; gap:var(--s-2); }
.crm .dq-trunc , .crm .dq-nomerge { margin-top:var(--s-2); }
/* ── BF-71 (#616, BB8) — Zeile „Team, Einsätze und Auslastung" ────────────────
   Nur rem und Tokens (ui-craft-Ratchet). Rot nach der Textstufen-Regel: -700 hell,
   -300 dunkel. Gruppen sind native <details> wie die Regelzeilen — tastaturbedienbar,
   ohne Animation. */
.crm .dq-ek-body { padding:0 var(--s-3) var(--s-3); display:flex; flex-direction:column; gap:var(--s-2); }
.crm .dq-ek-rot { color:var(--ad-red-700); }
.crm.dark .dq-ek-rot , html[data-theme="dark"] .crm .dq-ek-rot { color:var(--ad-red-300); }
.crm .dq-ek-gruen { color:var(--text-2); }
.crm .dq-ek-ok , .crm .dq-ek-fehler { padding:var(--s-2); border-radius:var(--r-sm); background:var(--bg-surface); }
.crm .dq-ek-gruppe { border-radius:var(--r-sm); background:var(--bg-surface); }
.crm .dq-ek-gruppe-kopf { display:flex; align-items:baseline; gap:var(--s-2); padding:var(--s-2); cursor:pointer; }
.crm .dq-ek-gruppe-kopf::-webkit-details-marker { display:none; }
.crm .dq-ek-gruppe-kopf::before { content:""; color:var(--text-3); width:0.875rem; height:0.875rem; flex:0 0 auto; background-color:currentColor; align-self:center;
  -webkit-mask:var(--ic-mask-caret-right); mask:var(--ic-mask-caret-right); }
.crm .dq-ek-gruppe[open] > .dq-ek-gruppe-kopf::before { -webkit-mask:var(--ic-mask-caret-down); mask:var(--ic-mask-caret-down); }
.crm .dq-ek-gruppe-nav { padding:0 var(--s-2) var(--s-1) calc(var(--s-2) + 0.875rem + var(--s-2)); }
.crm .dq-ek-gruppe-akt { display:flex; align-items:center; gap:var(--s-2); flex-wrap:wrap; padding:0 var(--s-2) var(--s-2); }
.crm .dq-ek-frage { display:flex; align-items:center; gap:var(--s-2); flex-wrap:wrap; }
.crm .dq-ek-frage[hidden] , .crm .dq-ek-gruppe-akt [hidden] { display:none; }
.crm .dq-ek-fall { background:var(--bg-surface-2); }
.crm .dq-ek-person { font-weight:600; color:var(--text-1); }
.crm .dq-ek-vorschau { flex:1 1 100%; display:grid; grid-template-columns:max-content 1fr; gap:0.125rem var(--s-3); margin:0; font-size:var(--fs-ui); }
.crm .dq-ek-vorschau dt { color:var(--text-3); }
.crm .dq-ek-vorschau dd { margin:0; color:var(--text-1); }
.crm .dq-ek-akt { display:flex; gap:var(--s-2); flex-wrap:wrap; }
.crm .dq-ek-stellen { flex:1 1 100%; margin:0; padding-left:var(--s-4); font-size:var(--fs-ui); }
.crm .dq-ek-selbst-kopf { font-weight:600; color:var(--text-1); margin-top:var(--s-2); }
.crm .dq-ek-zeit { color:var(--text-3); font-variant-numeric:tabular-nums; }
/* ── PR1.612 (#909) — Sammelbehebung mit Vorschau (Abnahmebild K1, Markierung 4) ────────
   Gruppe: Titel halbfett + graue Zahl, Knöpfe rechts. Personenzeile: Wer · Team/Person ·
   Handlung · Angleichen. Dialog: schwebende Karte ohne Abdunkelung, keine Animation
   (Admin, selten). Nur rem und Tokens (ui-craft-Ratchet). */
.crm .dq-ek-sammel-akt { display:flex; justify-content:flex-end; }
/* Knöpfe stehen rechts auf der Titelzeile (K1), liegen im DOM aber hinter dem <summary>
   (kein Knopf im summary, axe nested-interactive). Bei offener Rückfrage oder schmal: darunter. */
.crm .dq-ek , .crm .dq-ek-gruppe { position:relative; }
.crm .dq-ek > .dq-summary:has(+ .dq-ek-body > .dq-ek-sammel-akt) { padding-right:13rem; }
.crm .dq-ek-body > .dq-ek-sammel-akt { position:absolute; top:var(--s-2); right:var(--s-3); }
.crm .dq-ek-gruppe:has(> .dq-ek-gruppe-akt) > .dq-ek-gruppe-kopf { padding-right:17rem; min-height:2.5rem; align-items:center; }
.crm .dq-ek-gruppe-akt > .dq-link { font-weight:600; color:var(--text-1); text-decoration:none; }
.crm .dq-ek-gruppe-akt > .dq-link:hover { text-decoration:underline; }
.crm .dq-ek-gruppe > .dq-ek-gruppe-akt { position:absolute; top:var(--s-1); right:var(--s-2); padding:0; }
.crm .dq-ek-gruppe > .dq-ek-gruppe-akt:has(.dq-ek-frage:not([hidden])) { position:static; padding:0 var(--s-2) var(--s-2); }
@media (max-width: 48rem) {
  .crm .dq-ek > .dq-summary , .crm .dq-ek-gruppe > .dq-ek-gruppe-kopf { padding-right:var(--s-2) !important; }
  .crm .dq-ek-body > .dq-ek-sammel-akt , .crm .dq-ek-gruppe > .dq-ek-gruppe-akt { position:static; }
}
.crm .dq-ek-gruppe-kopf .dq-label { font-weight:600; color:var(--text-1); }
.crm .dq-ek-gruppe-zahl { color:var(--text-3); font-size:var(--fs-ui); }
.crm .dq-ek-gruppe-akt { justify-content:flex-end; }
.crm .dq-ek-fall { flex-wrap:wrap; align-items:center; column-gap:var(--s-4); row-gap:var(--s-1); }
.crm .dq-ek-wer { display:flex; flex-direction:column; flex:0 0 11rem; min-width:0; }
.crm .dq-ek-fall .dq-grund { flex:none; font-size:var(--fs-ui); font-weight:600; color:var(--ad-orange-700); }
.crm.dark .dq-ek-fall .dq-grund , html[data-theme="dark"] .crm .dq-ek-fall .dq-grund { color:var(--ad-orange); }
.crm .dq-ek-fall .dq-ek-vorschau { flex:1 1 15rem; }
.crm .dq-ek-fall .dq-ek-vorschau dd { white-space:nowrap; }
/* PR1.847 — Umfang ≠ Eingabe: der Vorgangsname darf umbrechen. */
.crm .dq-ek-umfang .dq-ek-vorschau dd { white-space:normal; }
.crm .dq-ek-umfang .dq-ek-vorschau .dq-link { text-align:left; }
.crm .dq-ek-handlung { display:flex; flex-direction:column; width:11rem; font-size:var(--fs-ui); color:var(--text-1); min-width:0; }
.crm .dq-ek-handlung-unter { color:var(--text-3); }
.crm .dq-ek-fall .dq-ek-akt { margin-left:auto; justify-content:flex-end; align-items:center; }
.crm .dq-ek-sammel-schleier { position:fixed; inset:0; z-index:1000; display:flex; align-items:center; justify-content:center; padding:var(--s-4); background:transparent; }
.crm .dq-ek-sammel { width:min(26rem, 100%); max-height:calc(100vh - 2rem); overflow:auto; background:var(--bg-surface); color:var(--text-1); border:0.0625rem solid var(--border); border-radius:var(--r-lg); box-shadow:var(--shadow-3); }
.crm .dq-ek-sammel:focus { outline:none; }
.crm .dq-ek-sammel-kopf { display:flex; align-items:center; gap:var(--s-2); padding:var(--s-3) var(--s-4); border-bottom:0.0625rem solid var(--border); }
.crm .dq-ek-sammel-kopf .ic { color:var(--ad-blue); flex:0 0 auto; }
.crm .dq-ek-sammel-kopf h2 { margin:0; font-size:var(--fs-body); font-weight:600; color:var(--text-1); }
.crm .dq-ek-sammel-liste { list-style:none; margin:0; padding:var(--s-2) var(--s-4) 0; }
.crm .dq-ek-sammel-zeile { display:flex; justify-content:space-between; gap:var(--s-3); padding:var(--s-1) 0; font-size:var(--fs-ui); }
.crm .dq-ek-sammel-zeile b { font-weight:600; font-variant-numeric:tabular-nums; }
.crm .dq-ek-sammel-hinweis { margin:var(--s-2) var(--s-4) var(--s-3); padding:var(--s-2) var(--s-3); border-radius:var(--r-md); background:var(--bg-surface-2); color:var(--text-2); font-size:var(--fs-ui); line-height:1.5; }
.crm .dq-ek-sammel-fehler { margin:0 var(--s-4) var(--s-3); color:var(--ad-red-700); font-size:var(--fs-ui); }
.crm .dq-ek-sammel-fehler[hidden] { display:none; }
.crm.dark .dq-ek-sammel-fehler , html[data-theme="dark"] .crm .dq-ek-sammel-fehler { color:var(--ad-red-300); }
.crm .dq-ek-sammel-fuss { display:flex; align-items:center; justify-content:space-between; gap:var(--s-2); padding:var(--s-3) var(--s-4); border-top:0.0625rem solid var(--border); }
.crm .dq-ek-sammel-knoepfe { display:flex; gap:var(--s-2); }
.crm .dq-ek-sammel-fuss button { font:inherit; font-size:var(--fs-ui); font-weight:600; cursor:pointer; border-radius:var(--r-md); padding:var(--s-2) var(--s-3); white-space:nowrap; }
.crm .dq-ek-sammel-einzeln { background:none; border:0; color:var(--text-1); }
.crm .dq-ek-sammel-nein { background:var(--bg-surface); border:0.0625rem solid var(--border); color:var(--text-1); }
.crm .dq-ek-sammel-ok { background:var(--ad-blue); border:0.0625rem solid var(--ad-blue); color:white; }
.crm .dq-ek-sammel-ok:hover { background:var(--ad-blue-700); border-color:var(--ad-blue-700); }
.crm .dq-ek-sammel-ok:disabled { opacity:.6; cursor:default; }
.crm .dq-ek-sammel-fuss button:focus-visible { outline:0.125rem solid var(--ad-blue); outline-offset:0.125rem; }
/* ── PR1.393 (#621) — Zeile „Mögliche doppelte Projekte" ─────────────────────
   Nur rem und Tokens (ui-craft-Ratchet). Tabelle scrollt in sich, Vorschau inline,
   keine Animation (Admin, selten). */
.crm .dq-pd-body { padding:0 var(--s-3) var(--s-3); display:flex; flex-direction:column; gap:var(--s-3); }
.crm .dq-pd-gruppe { border-radius:var(--r-sm); background:var(--bg-surface); padding:var(--s-2) var(--s-3); display:flex; flex-direction:column; gap:var(--s-2); }
.crm .dq-pd-titel { margin:0; font-size:var(--fs-body); font-weight:500; color:var(--text-1); }
.crm .dq-pd-scroll { overflow-x:auto; }
.crm .dq-pd-tab { width:100%; border-collapse:collapse; font-size:var(--fs-ui); }
.crm .dq-pd-tab th , .crm .dq-pd-tab td { text-align:left; padding:var(--s-1) var(--s-2); border-bottom:0.0625rem solid var(--border); vertical-align:top; }
.crm .dq-pd-tab thead th { color:var(--text-3); font-weight:500; background:transparent; }
.crm .dq-pd-tab { min-width:35rem; }
.crm .dq-pd-tab tbody th { font-weight:400; text-transform:none; letter-spacing:normal; }
.crm .dq-pd-zeit { white-space:nowrap; }
.crm .dq-pd-tab td:last-child { min-width:12.5rem; }
.crm .dq-pd-tab .dq-pd-zahl { text-align:right; font-variant-numeric:tabular-nums; }
.crm .dq-pd-fuehrt { font-weight:600; color:var(--text-1); }
.crm .dq-pd-akt { display:flex; gap:var(--s-2); flex-wrap:wrap; }
.crm .dq-pd-akt [hidden] , .crm .dq-pd-vorschau[hidden] { display:none; }
.crm .dq-pd-vorschau { display:flex; flex-direction:column; gap:var(--s-2); border-top:0.0625rem solid var(--border); padding-top:var(--s-2); font-size:var(--fs-ui); }
.crm .dq-pd-wahl { border:0; margin:0; padding:0; display:flex; gap:var(--s-1) var(--s-4); flex-wrap:wrap; }
.crm .dq-pd-wahl legend { padding:0; margin-bottom:var(--s-1); color:var(--text-3); }
.crm .dq-pd-radio { display:inline-flex; align-items:center; gap:var(--s-1); color:var(--text-1); }
.crm .dq-pd-folgen { display:grid; grid-template-columns:max-content 1fr; gap:var(--s-1) var(--s-3); margin:0; }
.crm .dq-pd-folgen dt { color:var(--text-3); }
.crm .dq-pd-folgen dd { margin:0; color:var(--text-1); }
.crm .dq-pd-liste { margin:0; padding-left:var(--s-4); }
@media (max-width: 40rem) { .crm .dq-pd-folgen { grid-template-columns:1fr; } }
/* ── PR1.294 (#499) — KB-Graph: Legende mit Zeichen + Ladehinweis ─────────────
   Ausschliesslich rem und Tokens: der ui-craft-Ratchet zaehlt jeden rohen
   px- und Hex-Wert in dieser Datei, und beide Zaehler stehen exakt auf ihrer
   Grenze (683 bzw. 65). Ein einziger harter Wert hier blockt den CI-Job. */
.crm .kbg-legend { display: flex; flex-direction: column; gap: 0.4375rem; margin-top: 0.375rem; }
.crm .kbg-legend-row { gap: 0.5rem; }
/* Das Zeichen sitzt weiss auf der Typfarbe — dieselbe Kombination wie im Graphen,
   damit Legende und Bild als dasselbe gelesen werden. */
.crm .kbg-legend-mark {
  width: 1.125rem;
  height: 1.125rem;
  flex: 0 0 auto;
  border-radius: 50%;
  color: var(--bg-surface);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
/* Ordnungsbegriffe eckig — dieselbe Unterscheidung wie im Graphen, und sie
   traegt auch dann, wenn Farben nicht unterscheidbar sind. */
.crm .kbg-legend-mark--hub { border-radius: var(--r-sm); }
.crm .kbg-legend-name { flex: 1; min-width: 0; }
/* Der dritte Zustand des Graphen: waehrend das Layout rechnet. */
.crm .kbg-busy {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: var(--text-3);
  font-size: var(--fs-ui);
  background: var(--bg-surface);
  pointer-events: none;
}
.crm .kbg-busy[hidden] { display: none; }

/* ── PR1.305 (#513) — Linienarten-Legende + Verbindungen in der Karte ─────────
   Wie der Block darueber: ausschliesslich rem und Tokens. Die Linienfarben kommen
   als Inline-Stil aus kb-graph-icons.js, nicht von hier — der ui-craft-Ratchet steht
   auf 65/65 (raw-hex) und 683/683 (raw-px), ein einziger harter Wert blockt den
   CI-Job. Genau deshalb ist die Vorschau ein SVG aus dem geteilten Modul. */
.crm .kbg-legend-sub {
  margin-top: 0.625rem;
  margin-bottom: 0.25rem;
  color: var(--text-3);
  font-size: var(--fs-meta);
  font-weight: 500;
}
/* Traeger der Linienvorschau. `color` gilt der Art „gehoert zu": sie traegt keine
   eigene Farbe und folgt per currentColor dem Rahmen-Token — wie im Bild. */
.crm .kbg-legend-line {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
  width: 1.375rem;
  /* Folgt der Kantenfarbe im Graphen — dort `--text-3` seit PR1.305. */
  color: var(--text-3);
}
/* Eine Verbindungszeile: Linie, Beziehungswort, Gegenueber. Das Gegenueber darf
   kuerzen statt die Zeile zu sprengen — Namen sind hier beliebig lang. */
.crm .kbg-edgerow {
  gap: 0.5rem;
  min-height: 1.375rem;
}
.crm .kbg-edgerow .lbl {
  flex: 0 0 auto;
}
.crm .kbg-edgerow-other {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--text-2);
}
/* PR1.302 (#510) — Vollständigkeit des Startpunkts, direkt über dem Bild.
   Feststellend gesetzt, nicht alarmierend: keine Signalfarbe, kein Rahmen, kein
   Zeichen. Die Zahl steht in der Vordergrundfarbe, die Aufzählung eine Stufe
   zurückgenommen. Ausschließlich rem + Tokens — die Ratchets `raw-px` und `raw-hex`
   dieser Datei sind ausgereizt.

   Die Aufzählung trägt bewusst NICHT `.lbl`: die Regel `.crm .filter-row .lbl` setzt
   `text-transform: uppercase`, und der Satz stünde dann in Großbuchstaben — geschrien
   statt festgestellt. */
.crm .kbg-expect {
  align-items: baseline;
  gap: 0.5rem;
  flex-wrap: wrap;
  padding: 0.5rem 1.375rem;
  border-bottom: 0.0625rem solid var(--border);
  font-size: var(--fs-ui);
}
.crm .kbg-expect b {
  color: var(--text-1);
  font-variant-numeric: tabular-nums;
}
.crm .kbg-expect-missing { color: var(--text-3); }
/* Die Zeichenfläche ist seit PR1.294 per Tastatur anspringbar. Den Ring selbst zieht
   schon die generische `.crm :focus-visible`-Regel oben; korrigiert wird hier nur der
   Versatz: die Graph-Karte trägt `overflow:hidden`, ein nach außen gesetzter Ring
   würde an ihrer Kante abgeschnitten. Farbe und Stärke bleiben bewusst geerbt —
   ein eigener Rington wäre ein zweiter Fokus-Stil in derselben Shell. */
.crm #kb-cy:focus-visible {
  outline-offset: -0.25rem;
  border-radius: var(--r-md);
}
/* ============== PR1.303 (#511) — NAMENSSCHILDER ==============
   Die Beschriftung eines Knotens liegt seit PR1.303 nicht mehr auf der Zeichenfläche,
   sondern als echtes Textkästchen darüber. Grund: eine Cytoscape-Beschriftung trägt
   genau EINE Schriftgröße, Entscheid A21 will aber den Namen groß und Kennung plus
   Art klein darunter.

   Die Maße hier sind die Sicht-Entsprechung der Rechnung in kb-graph-labels.js
   (LABEL_HEIGHT, LABEL_PAD_X, Schriftgrößen 11/9 px). Wer hier Schrift oder
   Innenabstand ändert, muss sie dort nachziehen — sonst schiebt der Mindestabstand
   nach einem Schild auseinander, das es so nicht gibt.

   Bewusst ohne rohe px und ohne Hex: der ui-craft-Ratchet steht bei raw-px 683/683
   und raw-hex 65/65, also exakt an der Grenze — ein einziger roher Wert hier blockt
   den Job. */
.crm .kbg-labels {
  position: absolute;
  inset: 0;
  overflow: hidden;
  /* Die Ebene fängt NICHTS ab: Klicken, Doppeltippen und Ziehen gehen unverändert an
     die Zeichenfläche darunter. Ohne das wäre der Graph nicht mehr bedienbar. */
  pointer-events: none;
  z-index: 1;
}
.crm .kbg-labels[hidden] { display: none; }
.crm .kbg-label {
  position: absolute;
  transform-origin: top center;
  display: flex;
  flex-direction: column;
  gap: 0.0625rem;
  padding: 0.125rem 0.375rem;
  border: 0.0625rem solid var(--border-strong);
  border-radius: var(--r-sm);
  background: var(--bg-surface);
  box-shadow: var(--shadow-1);
  text-align: center;
  pointer-events: none;
  /* Der Name steht einzeilig — die Kürzung passiert in kb-graph-labels.js, das hier
     ist der zweite Gürtel für den Fall, dass ein Zeichen breiter ausfällt als
     gerechnet. */
  white-space: nowrap;
  overflow: hidden;
}
.crm .kbg-label-name {
  font-size: 11px; /* PR1.567 Ausnahme: Graph-Schild, Masse rechnet kb-graph-labels.js mit */
  line-height: 1.25;
  font-weight: 500;
  color: var(--text-1);
  overflow: hidden;
  text-overflow: ellipsis;
}
.crm .kbg-label-meta {
  font-size: 9px; /* PR1.567 Ausnahme: Graph-Schild, Masse rechnet kb-graph-labels.js mit */
  line-height: 1.25;
  color: var(--text-3);
  overflow: hidden;
  text-overflow: ellipsis;
}
/* Überfahren oder ausgewählt: der volle Name. Die Kürzung ist eine Platzentscheidung,
   keine Auskunftsverweigerung. Kein Übergang — das Schild sitzt auf einer Fläche, die
   sich beim Zoomen ohnehin bewegt, und zwei Bewegungen übereinander sind nicht mehr
   zu lesen (Motion-Budget, Konvention 22). */
.crm .kbg-label.is-open {
  max-width: 20rem !important;
  white-space: normal;
  z-index: 2;
}
.crm .kbg-label.is-open .kbg-label-name { white-space: normal; overflow: visible; }

/* ============== PR1.546 (#827) — GRAPH ALS KARTEN ==============
   Jeder Knoten traegt eine Karte: Zeichen (Logo, Foto, Marke oder Typsymbol), Name,
   eine Kontextzeile. Die Karte liegt GENAU auf dem Knoten; die Masse (240 x 52,
   Startpunkt 280 x 64) rechnet kb-graph-cards.js mit — wer sie hier aendert, muss sie
   dort nachziehen. Die Karten fangen nichts ab: Klick und Tastatur gehen an die
   Zeichenflaeche darunter. Kein Uebergang (Motion-Budget: die Flaeche zoomt ohnehin).
   Zwilling: style.css, Praefix .kbcc-. Ohne rohe px und ohne Hex (ui-craft-Ratchet). */
.crm .kbg-card {
  position: absolute;
  transform-origin: center;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  gap: 0.625rem;
  padding: 0 0.75rem;
  border: 0.0625rem solid var(--border-strong);
  border-radius: var(--r-md);
  background: var(--bg-surface);
  box-shadow: var(--shadow-1);
  pointer-events: none;
  overflow: hidden;
}
.crm .kbg-card.is-root {
  border: 0.125rem solid var(--primary);
  box-shadow: 0 0 0 0.25rem var(--primary-glow), var(--shadow-1);
}
.crm .kbg-card.is-hover { border-color: var(--text-3); }
/* Verloren/irrelevant tritt zurueck — ueber Farbe, nicht Deckkraft: der Text bleibt AA. */
.crm .kbg-card.is-muted { box-shadow: none; background: var(--bg-surface-2); }
.crm .kbg-card.is-muted .kbg-card-name { color: var(--text-2); font-weight: 500; }
.crm .kbg-card.is-muted .kbg-card-glyph { opacity: 0.5; }
.crm .kbg-card.is-selected {
  border-color: var(--primary);
  outline: 0.125rem solid var(--primary);
  outline-offset: 0.125rem;
  z-index: 2;
}
.crm .kbg-card.is-ghost {
  border: 0.0625rem dashed var(--danger);
  background: color-mix(in srgb, var(--danger) 7%, var(--bg-surface));
  box-shadow: none;
}
.crm .kbg-card.is-ghost .kbg-card-name { color: var(--danger); }
/* Luecken pulsieren leise rot. Nur Deckkraft einer Innen-Kontur bewegt sich; der
   Zustand selbst (gestrichelter roter Rand, roter Name) steht auch ohne Bewegung. */
@media (prefers-reduced-motion: no-preference) {
  .crm .kbg-card.is-ghost::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    box-shadow: inset 0 0 0 0.125rem var(--danger);
    opacity: 0;
    pointer-events: none;
    animation: kbg-gap-pulse 2.4s ease-in-out infinite;
  }
}
@keyframes kbg-gap-pulse { 0%, 100% { opacity: 0; } 50% { opacity: 0.55; } }
.crm .kbg-card-glyph {
  flex: none;
  display: grid;
  place-items: center;
}
.crm .kbg-card-glyph.is-icon {
  width: 2rem;
  height: 2rem;
  border-radius: var(--r-sm);
  background: var(--card-type);
  color: white;
}
.crm .kbg-card.is-ghost .kbg-card-glyph.is-icon {
  background: transparent;
  color: var(--danger);
  border: 0.0625rem dashed var(--danger);
}
.crm .kbg-card-glyph.is-brand {
  width: 2rem;
  height: 2rem;
  border-radius: var(--r-sm);
  background: var(--bg-surface-2);
}
.crm .kbg-card-glyph.is-brand img { max-width: 1.5rem; max-height: 1.25rem; }
.crm .kbg-card-text {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.0625rem;
}
.crm .kbg-card-name,
.crm .kbg-card-meta {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.crm .kbg-card-name {
  font-size: var(--fs-meta);
  font-weight: 600;
  line-height: 1.25;
  color: var(--text-1);
}
.crm .kbg-card.is-root .kbg-card-name { font-size: var(--fs-section); }
.crm .kbg-card-meta {
  font-size: var(--fs-label);
  line-height: 1.25;
  color: var(--text-2);
}
/* Spaltenkoepfe „Opportunities · 7" */
.crm .kbg-group {
  position: absolute;
  transform-origin: left bottom;
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding-bottom: 0.25rem;
  font-size: var(--fs-label);
  font-weight: 600;
  color: var(--text-2);
  white-space: nowrap;
  pointer-events: none;
}
.crm .kbg-group-dot {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 0.125rem;
}
/* Der Erzaehlsatz ueber dem Bild */
.crm .kbg-story { padding: 0.625rem 1.375rem; border-bottom: 0.0625rem solid var(--border); }
.crm .kbg-story-text {
  margin: 0;
  font-size: var(--fs-body);
  line-height: 1.45;
  color: var(--text-1);
}
.crm .kbg-story-gap { color: var(--danger); font-weight: 600; }
/* Linienarten im Bild, oben links */
.crm .kbg-legend-mini {
  position: absolute;
  top: 0.75rem;
  left: 0.75rem;
  z-index: 2;
  max-width: 15rem;
  padding: 0.5rem 0.625rem;
  border: 0.0625rem solid var(--border);
  border-radius: var(--r-md);
  background: color-mix(in srgb, var(--bg-surface) 94%, transparent);
  font-size: var(--fs-label);
  pointer-events: none;
}
/* Zoom-Knoepfe unten rechts */
.crm .kbg-zoom {
  position: absolute;
  right: 0.75rem;
  bottom: 0.75rem;
  z-index: 3;
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
}
.crm .kbg-zoom[hidden] { display: none; }
.crm .kbg-zoom-btn {
  width: 2.25rem;
  height: 2.25rem;
  display: grid;
  place-items: center;
  padding: 0;
  border: 0.0625rem solid var(--border-strong);
  border-radius: var(--r-md);
  background: var(--bg-surface);
  box-shadow: var(--shadow-1);
  color: var(--text-1);
  font: inherit;
  font-size: var(--fs-section);
  line-height: 1;
  cursor: pointer;
}
.crm .kbg-zoom-btn:hover { background: var(--bg-hover); }
.crm .kbg-zoom-btn:focus-visible { outline: 0.125rem solid var(--focus); outline-offset: 0.125rem; }
/* PR1.546 Nachbesserung — Graph in voller Breite; Detail + Legende als Fenster rechts IM
   Graphen, nur bei gewaehlter Karte. Die feste Seitenspalte liess bei 1280px so wenig
   Breite, dass die Karten erst bei Zoom 0,5 ins Bild passten. */
.crm .kb-body.kb-body--graph { grid-template-columns: minmax(0, 1fr); }
.crm .kbg-legend-hint {
  margin-top: 0.375rem;
  color: var(--text-2);
}
.crm .kbg-side {
  position: absolute;
  top: 0.75rem;
  right: 0.75rem;
  bottom: 0.75rem;
  z-index: 4;
  width: min(20rem, calc(100% - 1.5rem));
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  overscroll-behavior: contain;
}
.crm .kbg-side[hidden] { display: none; }
.crm .kbg-side > .card { box-shadow: var(--shadow-2); flex: none; }
.crm .kbg-side-close {
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
  z-index: 1;
  width: 2rem;
  height: 2rem;
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: var(--r-md);
  background: transparent;
  color: var(--text-2);
  font: inherit;
  font-size: var(--fs-section);
  line-height: 1;
  cursor: pointer;
}
.crm .kbg-side-close:hover { background: var(--bg-hover); color: var(--text-1); }
.crm .kbg-side-close:focus-visible { outline: 0.125rem solid var(--focus); outline-offset: 0.125rem; }
/* Offenes Fenster: die Zoom-Knoepfe ruecken links daneben statt darunter zu liegen. */
.crm .kbg-side:not([hidden]) ~ .kbg-zoom { right: calc(min(20rem, 100% - 1.5rem) + 1.5rem); }
@media (prefers-reduced-motion: reduce) {
  .crm .kbg-card, .crm .kbg-group, .crm .kbg-zoom-btn { transition: none; animation: none; }
}
/* ── PR1.271 (#465) — Gespeicherte Auswertungen ───────────────────────────────
   Dritter Reiter des Daten-Cockpits: eine Kachel je Auswertung.

   Bewusst ohne Bewegung. Das Cockpit ist ein Werkzeug fuer wenige Leute, die es
   taeglich oeffnen — eine Einblend-Animation, die man zweimal sieht, ist Charme;
   dieselbe Animation beim zwanzigsten Mal am Tag ist Wartezeit.

   "Freigegeben" ist eine Flaeche, keine gruene Schrift: --ad-green traegt als
   Textfarbe keine 3:1 gegen den Kartengrund, und Gruen ist im Redesign ohnehin
   kein Textfarb-Token. */

.crm .sv-kopf {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 0.75rem;
  flex-wrap: wrap;
}

/* auto-fill statt fester Spaltenzahl: die Galerie steht neben dem Baukasten in
   derselben Breite und muss von einer Kachel bis zu einer vollen Reihe tragen. */
.crm .sv-raster {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
  gap: 0.75rem;
}

.crm .sv-kachel {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 0.875rem;
  background: var(--bg-card);
  border: 0.0625rem solid var(--border);
  border-radius: var(--radius-sm);
}

.crm .sv-kachel.is-frei { border-color: var(--ad-violet); }

/* Die ganze Kachelflaeche oeffnet — aber als echter Knopf, nicht als Klickflaeche
   mit Zeigefinger-Cursor. Ohne das gibt es keinen Tastaturweg zur Auswertung. */
.crm .sv-oeffnen {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.25rem;
  width: 100%;
  padding: 0;
  background: none;
  border: 0;
  cursor: pointer;
  text-align: left;
  color: inherit;
  font: inherit;
}

.crm .sv-name {
  font-size: var(--fs-body);
  font-weight: 500;
  color: var(--text-1);
  line-height: 1.3;
}

.crm .sv-oeffnen:hover .sv-name { text-decoration: underline; }

.crm .sv-art { font-size: var(--fs-meta); color: var(--text-3); }

.crm .sv-fuss {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.375rem 0.5rem;
  font-size: var(--fs-meta);
  color: var(--text-3);
}

.crm .sv-marke {
  padding: 0.0625rem 0.375rem;
  border-radius: var(--radius-sm);
  font-size: var(--fs-label);
  font-weight: 500;
  border: 0.0625rem solid var(--border);
}

.crm .sv-marke-frei {
  background: var(--ad-violet);
  border-color: var(--ad-violet);
  color: white;
}

.crm .sv-marke-privat { color: var(--text-2); }

.crm .sv-besitzer { color: var(--text-2); }

.crm .sv-aktionen {
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem;
  padding-top: 0.5rem;
  border-top: 0.0625rem solid var(--border);
}

/* Der Loeschknopf, nachdem er einmal gedrueckt wurde. Die Farbe ist die Warnung —
   ein zweiter Klick loescht wirklich. */
.crm .sv-loeschen.is-scharf { font-weight: 600; }

/* Ladezustand: das Raster der echten Kacheln, damit beim Eintreffen nichts springt. */
.crm .sv-skelett { gap: 0.625rem; }

.crm .sv-skelett-zeile {
  display: block;
  height: 0.75rem;
  border-radius: var(--radius-sm);
  background: var(--bg-hover);
}

.crm .sv-skelett-kurz { width: 45%; }

.crm .sv-leer-titel {
  font-size: var(--fs-body);
  font-weight: 500;
  color: var(--text-1);
  margin-bottom: 0.375rem;
}

.crm .sv-leer-text {
  margin: 0 0 0.75rem;
  font-size: var(--fs-ui);
  color: var(--text-2);
  line-height: 1.5;
}

/* ── Speichern-Dialog ──────────────────────────────────────────────────────── */

.crm .sv-dialog-huelle {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  background: rgba(14, 23, 38, 0.55);
}

.crm .sv-dialog {
  width: min(28rem, 94vw);
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
}

.crm .sv-dialog-titel {
  margin: 0;
  font-size: var(--fs-body);
  font-weight: 500;
  color: var(--text-1);
}

.crm .sv-dialog-hinweis {
  margin: 0;
  font-size: var(--fs-meta);
  color: var(--text-3);
  line-height: 1.5;
}

.crm .sv-dialog-fehler {
  margin: 0;
  font-size: var(--fs-ui);
  color: var(--danger);
}

.crm .sv-schalter {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: var(--fs-ui);
  color: var(--text-1);
  cursor: pointer;
}

/* PR1.349 (#563) — Kategorie-Auswahl unter „Auch aufs Dashboard heften". */
.crm .sv-heften-wahl {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  padding-left: 1.5rem;
}
.crm .sv-heften-wahl[hidden] { display: none; }

.crm .sv-dialog-fuss {
  display: flex;
  justify-content: flex-end;
  gap: 0.5rem;
  margin-top: 0.25rem;
}

/* ── BF-52 (#501) — Hinweisstreifen im Redesign ─────────────────────────────
   Das Element traegt die Klasse `crm` selbst, weil es ausserhalb von `#app-crm`
   haengen kann (klassische Shell: direkt an `body`). Ohne diese Regeln griffen dort
   die Redesign-Marken nicht, und der Streifen saehe aus wie ein Fremdkoerper aus
   dem alten Design. Werte kommen aus Marken, nicht aus rohen Pixeln. */
.crm.session-banner {
  background: var(--bg-surface);
  color: var(--text-1);
  /* Rahmenbreite erbt aus style.css — hier nur die Farbe des Redesigns. */
  border-bottom-color: var(--warning);
  font-family: var(--f-sans);
  padding: var(--s-3) var(--s-5);
  gap: var(--s-4);
}

.crm.session-banner .session-banner-btn {
  border-radius: var(--r-sm);
}

/* ── PR1.540 (#821) — Warndialog vor der Leerlauf-Abmeldung im Redesign ────────
   Wie beim Streifen traegt das Overlay die Klasse `crm` selbst. Nur Marken, keine
   rohen Pixel (ui-craft-Ratchet). Knoepfe kommen aus `.crm .btn-primary/-secondary`. */
.crm.idle-dialog-overlay {
  padding: var(--s-4);
}

.crm .idle-dialog {
  background: var(--bg-surface);
  border-color: var(--border-strong);
  border-top-color: var(--warning);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-3);
  font-family: var(--f-sans);
  padding: var(--s-5);
}

.crm .idle-dialog-titel {
  font-size: var(--fs-section);
  margin-bottom: var(--s-2);
}

.crm .idle-dialog-text {
  color: var(--text-2);
}

.crm .idle-dialog-rest {
  color: var(--text-1);
}

.crm .idle-dialog-aktionen {
  gap: var(--s-2);
  margin-top: var(--s-5);
}
/* ===================================================================
   PR1.250 (#444) / PR1.435 (#674) / PR1.523 (#791) — MA-Übersicht: nur noch Tabelle
   ===================================================================
   K9 (Abendpunkte 21.10.): keine gedimmten Zeilen, keine Ampelpunkte, Auslastung als
   Balken mit Zahl, Filter auf einer Zeile mit Schildchen darunter. Die Verfügbarkeit über
   die Zeit steht im Einsatzplan (PR1.523). Wie die Phasen davor buchstaeblich OHNE px und ohne rohe
   Hex-Farben — nur Tokens, rem und Prozent (Ratchet raw-px/raw-hex,
   scripts/check-ui-craft.mjs). Kein zweiter overflow:auto-Container (Pruefung
   scroll-container): die Tabelle scrollt waagerecht ueber `overflow-x`.
   Farbpaare: Gruen-Schrift immer die dunkle Stufe auf `--tint-green` (hell) bzw.
   `--ad-green` auf dem dunklen Tint; Weiss auf `--ad-blue` (5.18:1); Rot als Schrift
   `--ad-red-700` (hell) / `--ad-red-300` (dunkel). Keine neuen Transitions. */

.crm .emp-page {
  padding: .9rem 1.4rem;
  display: flex; flex-direction: column; gap: .75rem;
}

/* ── Kopfleiste: Weg zum Einsatzplan · mit Planung · Neu · Mehr ── */
.crm .emp-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; }
.crm .emp-plan-toggle.is-on {
  background: var(--tint-blue); color: var(--ad-blue-700); border-color: var(--ad-blue);
  font-weight: 600;
}
.crm.dark .emp-plan-toggle.is-on , html[data-theme="dark"] .crm .emp-plan-toggle.is-on { color: var(--ad-blue-300); }
/* PR1.523 — ruhiger Textlink in den Einsatzplan (Farbe/Hover aus `.crm .lnk`). */
.crm .emp-plan-link { font: inherit; font-size: var(--fs-body); background: none; border: 0; padding: .3rem .1rem; }
.crm .emp-plan-link:focus-visible { outline: .125rem solid var(--focus); outline-offset: .15rem; }
.crm.dark .emp-plan-link , html[data-theme="dark"] .crm .emp-plan-link { color: var(--ad-blue-300); }
/* Auswahlspalte der Tabelle (Massenlauf, Sammel-Bearbeitung) */
.crm .emp-tbl .emp-th-select, .crm .emp-tbl .emp-td-select { width: 2.2rem; padding-right: 0; }

/* ── Menü „Mehr" (list-more-menu.js) ── */
.crm .more-menu { position: relative; }
.crm .more-menu-btn { display: inline-flex; align-items: center; gap: .4rem; }
.crm .more-menu-list {
  position: absolute; right: 0; top: calc(100% + .3rem); z-index: 40;
  min-width: 13rem; padding: .3rem;
  display: flex; flex-direction: column;
  background: var(--bg-surface);
  border: thin solid var(--border); border-radius: var(--r-md);
  box-shadow: var(--shadow-2);
}
.crm .more-menu-list[hidden] { display: none; }
.crm .more-menu-item {
  display: flex; align-items: center; gap: .55rem;
  font: inherit; font-size: var(--fs-body); text-align: left;
  padding: .5rem .65rem;
  border: 0; border-radius: var(--r-sm);
  background: none; color: var(--text-1);
  cursor: pointer;
}
.crm .more-menu-item:hover { background: var(--bg-hover); }
.crm .more-menu-item:focus-visible { outline: .125rem solid var(--focus); outline-offset: -.125rem; background: var(--bg-hover); }

/* ── Karte um Filterzeile, Schildchen und Liste ── */
.crm .emp-list-card { padding: 0; overflow: visible; }
.crm .emp-filter-bar {
  display: flex; flex-wrap: wrap; align-items: center; gap: .6rem;
  padding: .8rem 1rem;
  border-bottom: thin solid var(--border);
}
.crm .emp-filter-spacer { flex: 1 1 auto; }
.crm .emp-search { position: relative; flex: 0 1 18rem; min-width: 12rem; display: flex; align-items: center; }
.crm .emp-search .ic { position: absolute; left: .65rem; color: var(--text-3); pointer-events: none; }
.crm .emp-search input[type="search"] { width: 100%; padding: .45rem .7rem .45rem 2.1rem; font-size: var(--fs-body); }
.crm .emp-sort { font-size: var(--fs-body); padding: .45rem .7rem; }

/* Aufklapper: dieselbe Hülle wie filter-dropdown.js (.cc-dropdown), hier im Redesign-Ton. */
.crm .emp-filter-bar .cc-dropdown > summary {
  background: var(--bg-surface); border-color: var(--border); border-radius: .4rem;
  font-size: var(--fs-body); padding: .45rem .8rem; color: var(--text-1);
}
.crm .emp-filter-bar .cc-dropdown > summary .ic { color: var(--text-2); }
.crm .emp-filter-bar .emp-dd.is-set > summary {
  background: var(--tint-blue); border-color: var(--ad-blue); color: var(--ad-blue-700); font-weight: 600;
}
.crm.dark .emp-filter-bar .emp-dd.is-set > summary , html[data-theme="dark"] .crm .emp-filter-bar .emp-dd.is-set > summary { color: var(--ad-blue-300); }
.crm .emp-filter-bar .cc-dropdown-panel {
  background: var(--bg-surface); border-color: var(--border);
  border-radius: var(--r-md); box-shadow: var(--shadow-2);
}
.crm .emp-dd-panel { gap: .6rem; min-width: 15rem; }
/* PR1.491 (#756): fuenf Felder plus Admin-Kaestchen sprengen die 300px der Grunddefinition. */
.crm .emp-filter-bar .emp-dd-panel { max-height: min(32rem, 70vh); }
.crm .emp-dd-field { display: flex; flex-direction: column; gap: .25rem; font-size: var(--fs-meta); color: var(--text-2); }
.crm .emp-dd-panel .fpill { align-self: flex-start; }
.crm .emp-dd-panel .lnk { align-self: flex-start; }

/* Schildchenzeile: nur wenn Filter gesetzt. */
.crm .emp-chips-row {
  display: flex; flex-wrap: wrap; align-items: center; gap: .5rem;
  padding: .55rem 1rem;
  background: var(--bg-surface-2);
  border-bottom: thin solid var(--border);
  font-size: var(--fs-ui); color: var(--text-2);
}
.crm .emp-chip {
  display: inline-flex; align-items: center; gap: .3rem;
  padding: .15rem .3rem .15rem .6rem;
  border-radius: var(--r-sm);
  background: var(--tint-blue); color: var(--ad-blue-700); font-weight: 600;
}
.crm.dark .emp-chip , html[data-theme="dark"] .crm .emp-chip { color: var(--ad-blue-300); }
.crm .emp-chip-x {
  display: inline-flex; align-items: center; justify-content: center;
  padding: .1rem; border: 0; border-radius: var(--r-xs);
  background: none; color: inherit; cursor: pointer;
}
.crm .emp-chip-x:hover { background: var(--bg-hover); }
.crm .emp-chips-count { color: var(--text-3); }
.crm .emp-reset-all { text-decoration: none; font-weight: 500; }
/* Linkblau im Dunkeln unter AA (3.2:1) — die helle Stufe. */
.crm.dark .emp-list-card .lnk , html[data-theme="dark"] .crm .emp-list-card .lnk { color: var(--ad-blue-300); }
.crm .emp-reset-all:hover { text-decoration: underline; }

/* ── Avatar: rund, ohne Punkt ── */
.crm .emp-avatar { border-radius: 50%; width: 2.25rem; height: 2.25rem; font-size: var(--fs-meta); }
.crm .emp-avatar.is-lg { width: 3rem; height: 3rem; font-size: var(--fs-body); }
.crm .emp-avatar.is-sm { width: 1.75rem; height: 1.75rem; font-size: var(--fs-label); }
.crm .emp-avatar .emp-photo { border-radius: 50%; }

/* ── Auslastungsbalken (Karte + Tabelle) ── */
.crm .emp-load { display: flex; align-items: center; gap: .55rem; min-width: 0; }
.crm .emp-bar {
  position: relative; display: flex;
  flex: 0 0 9.5rem; height: .45rem;
  border-radius: 99rem; overflow: hidden;
  background: var(--bg-surface-3);
}
.crm .emp-bar-fest { display: block; height: 100%; background: var(--ad-blue); }
.crm .emp-bar-plan {
  display: block; height: 100%;
  background: repeating-linear-gradient(-45deg, var(--ad-blue-300) 0 .2rem, var(--tint-blue) .2rem .4rem);
}
.crm .emp-load.is-ueberbucht .emp-bar-fest { background: var(--ad-red-700); }
.crm .emp-load-num {
  flex: 0 0 3.2rem; text-align: right;
  font-size: var(--fs-body); font-weight: 500; font-variant-numeric: tabular-nums; color: var(--text-1);
}
.crm .emp-load.is-ueberbucht .emp-load-num { color: var(--ad-red-700); }
.crm.dark .emp-load.is-ueberbucht .emp-load-num , html[data-theme="dark"] .crm .emp-load.is-ueberbucht .emp-load-num { color: var(--ad-red-300); }
.crm .emp-load .ic-tone-bad, .crm .emp-over .ic { color: var(--ad-red-700); }
.crm .emp-load-off { font-size: var(--fs-ui); color: var(--text-3); }
/* PR1.843 (#1204) — „belegt X %" (verrechnet + intern): ruhiger grauer Zusatz hinter der Zahl. */
.crm .emp-load-belegt { font-size: var(--fs-ui); font-variant-numeric: tabular-nums; color: var(--text-3); white-space: nowrap; }
.crm .eorg-belegt { display: block; font-size: var(--fs-ui); color: var(--text-3); }
.crm .emp-free-tag {
  display: inline-flex; align-items: center;
  padding: .1rem .45rem; border-radius: var(--r-xs);
  background: var(--tint-green); color: var(--ad-green-900);
  font-size: var(--fs-ui); font-weight: 500; white-space: nowrap;
}
.crm.dark .emp-free-tag , html[data-theme="dark"] .crm .emp-free-tag { color: var(--ad-green); }
.crm .emp-free-date { font-weight: 600; color: var(--text-1); white-space: nowrap; }
.crm .emp-over { display: inline-flex; align-items: center; gap: .3rem; color: var(--ad-red-700); font-size: var(--fs-body); }
.crm.dark .emp-over , html[data-theme="dark"] .crm .emp-over,
.crm.dark .emp-load .ic-tone-bad , html[data-theme="dark"] .crm .emp-load .ic-tone-bad { color: var(--ad-red-300); }

/* Fähigkeiten-Chips */
.crm .emp-skills { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem; }
.crm .emp-skill {
  padding: .15rem .5rem; border-radius: var(--r-xs);
  background: var(--bg-surface-3); color: var(--text-2);
  font-size: var(--fs-meta); white-space: nowrap;
}
.crm .emp-skill-more { font-size: var(--fs-meta); color: var(--text-3); }

/* Karten (Staffing-Ansichten nutzen dieselbe Mitarbeiter-Karte) */
.crm .emp-card { display: flex; flex-direction: column; gap: .8rem; height: 100%; cursor: pointer; }
.crm .emp-card-head { display: flex; gap: .75rem; align-items: center; min-width: 0; }
.crm .emp-card-ident { flex: 1; min-width: 0; }
.crm .emp-card-sub {
  /* style.css traegt eine unscoped `.emp-card-sub` (klassische Karte) — zuruecknehmen. */
  margin-left: 0; opacity: 1; text-transform: none;
  font-size: var(--fs-ui); font-weight: 400; color: var(--text-2);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.crm .emp-card .emp-bar { flex: 1 1 auto; }
.crm .emp-card-status {
  display: flex; align-items: center; justify-content: space-between; gap: .5rem;
  min-height: 1.6rem; font-size: var(--fs-body);
}
.crm .emp-card-aside { color: var(--text-2); font-size: var(--fs-ui); text-align: right; }
.crm .emp-card-skills { margin-top: auto; }
.crm .emp-select-cell { align-self: flex-start; }
/* Die Auswahl fuer den Massenlauf stoert das Kartenbild nicht: sichtbar bei Zeiger, Fokus
   oder wenn angehakt — per Tastatur bleibt sie erreichbar (opacity, nicht display). */
.crm .emp-card .emp-select { opacity: 0; accent-color: var(--ad-blue); }
.crm .emp-card:hover .emp-select, .crm .emp-card .emp-select:focus-visible, .crm .emp-card .emp-select:checked { opacity: 1; }
.crm .emp-card .emp-card-open { font-size: var(--fs-body); font-weight: 500; }

/* ── Darstellung 2: Tabelle (randlos in der Listenkarte) ── */
.crm .emp-table-wrap { overflow-x: auto; }
.crm .emp-tbl thead th { white-space: nowrap; border-radius: 0; border-left: 0; border-right: 0; border-top: 0; }
.crm .emp-tbl tbody td { border-left: 0; border-right: 0; border-radius: 0; }
.crm .emp-tbl tbody tr:last-child td { border-radius: 0; }
.crm .emp-tbl thead th.is-sorted { color: var(--ad-blue-700); }
.crm.dark .emp-tbl thead th.is-sorted , html[data-theme="dark"] .crm .emp-tbl thead th.is-sorted { color: var(--ad-blue-300); }
.crm .emp-tbl .emp-th-free { min-width: 18rem; }
.crm .emp-th-sort {
  font: inherit; color: inherit; letter-spacing: inherit; text-transform: inherit;
  display: inline-flex; align-items: center; gap: .3rem;
  background: none; border: 0; padding: 0; cursor: pointer;
}
.crm .emp-th-sort:hover { color: var(--text-1); }
.crm .emp-sort-caret { font-size: var(--fs-label); }
.crm .emp-tbl tbody tr { cursor: pointer; }
.crm .emp-tbl tbody tr:hover td { background: var(--bg-hover); }
.crm .emp-row-name { display: inline-flex; align-items: center; gap: .65rem; min-width: 0; }
.crm .emp-row-ident { display: flex; flex-direction: column; min-width: 0; }
.crm .emp-row-sub { font-size: var(--fs-meta); color: var(--text-2); }
.crm .emp-row .emp-card-open { font-weight: 600; }

/* Legende unter der Tabelle */
.crm .emp-legend {
  display: flex; flex-wrap: wrap; align-items: center; gap: 1.2rem;
  padding: .7rem 1rem;
  border-top: thin solid var(--border);
  font-size: var(--fs-ui); color: var(--text-2);
}
.crm .emp-legend-item { display: inline-flex; align-items: center; gap: .45rem; }
.crm .emp-legend-sw { display: inline-block; width: 1.6rem; height: .45rem; border-radius: 99rem; background: var(--ad-blue); }
.crm .emp-legend-sw.is-plan {
  background: repeating-linear-gradient(-45deg, var(--ad-blue-300) 0 .2rem, var(--tint-blue) .2rem .4rem);
  border: thin dashed var(--ad-blue-300);
}
.crm .emp-legend-sw.is-over { background: var(--ad-red-700); }

/* Leerzustand in der Listenkarte */
.crm .emp-empty { padding: 2rem 1rem; display: flex; flex-direction: column; align-items: center; gap: .6rem; }

/* PR1.295 (#500) — Nebentexte im Reiter „Funktionen" (Zwilling zu style.css).
   Die Redesign-Regel fuer graue Nebentexte lautet `.crm .tbl .muted`; die
   Tabelle hier heisst aber `crm-table`, der Selektor greift also nicht. */
.crm .crm-table .muted { color: var(--text-3); }
.crm .funk-hinweis { margin-top: 0.25rem; font-size: var(--fs-body); color: var(--text-3); }
.crm .funk-tabelle-rahmen { overflow-x: auto; }
/* Zwei Stufen wie bei Rot (--ad-red-700/-300): --ad-orange-700 kommt auf hellem
   Grund nur auf 3,4:1 und faellt fuer 12px-Text unter AA; auf dunklem Grund ist die
   -900-Stufe zu dunkel. Deshalb je Grund die passende Stufe. */
.crm .funk-aus { color: var(--ad-orange-900); }
.crm.dark .funk-aus , html[data-theme="dark"] .crm .funk-aus { color: var(--ad-orange); }

/* ═══ PR1.307 (#516) — geheftete Auswertungen: Farben der Redesign-Shell ════════
   Struktur und Abstaende kommen aus style.css. Hier stehen nur die Toene, deren
   Legacy-Token im `.crm`-Scope gar nicht existiert (--warning, --danger, --accent)
   und die sonst ihren Dunkel-Wert auf hellen Grund erbten. */

/* --ad-orange kommt auf hellem Grund nur auf 2,6:1; fuer 11px-Grossbuchstaben gilt
   4,5:1. Auf dunklem Grund ist die -900-Stufe umgekehrt zu dunkel — deshalb zwei. */
.crm .dash-pin-marke { color: var(--ad-orange-900); }
.crm.dark .dash-pin-marke , html[data-theme="dark"] .crm .dash-pin-marke { color: var(--ad-orange); }

.crm .dash-pin-entfernen {
  border-color: var(--ad-red-700);
  color: var(--ad-red-700);
}
.crm.dark .dash-pin-entfernen , html[data-theme="dark"] .crm .dash-pin-entfernen {
  border-color: var(--ad-red-300);
  color: var(--ad-red-300);
}

.crm .dash-pin-skelett-label , .crm .dash-pin-skelett-balken { background: var(--bg-surface-3); }

.crm .sv-kachel.is-geheftet { border-color: var(--ad-blue); }
.crm.dark .sv-kachel.is-geheftet , html[data-theme="dark"] .crm .sv-kachel.is-geheftet {
  border-color: var(--ad-blue-300);
}

.crm .dash-cfg-weg:hover { border-color: var(--ad-red-700); color: var(--ad-red-700); }
.crm.dark .dash-cfg-weg:hover , html[data-theme="dark"] .crm .dash-cfg-weg:hover {
  border-color: var(--ad-red-300);
  color: var(--ad-red-300);
}

/* PR1.299 (#506) — Einzelfall-Knopf im Betriebs-Reiter.
   Zwillingsregel zu `style.css`. Unter `.crm` gescoped wie alles hier; der
   Fokusring kommt aus der generischen `.crm :focus-visible`-Regel weiter oben,
   diese Regel liefert nur den Zeigerzustand. */
.crm .ops-fall-btn:hover {
    background: var(--bg-hover) !important;
}

/* PR1.299 (#506) — gesperrter Knopf im Einzelfall-Fenster.
   „Bring mich hin" bleibt auch ohne Ziel stehen (User-Entscheid 12.09.2026) —
   dann MUSS man ihm ansehen, dass er nicht klickt. Ohne diese Regel trug er
   volle Farbe und sah aus wie jeder andere.

   Bewusst an DIESEM Knopf statt global auf `.btn:disabled`: dieselbe Abwaegung,
   die in dieser Datei schon dreimal getroffen wurde (siehe die Regeln beim
   Konvertier- und beim Freigabe-Dialog). Eine app-weite Regel wuerde jeden
   deaktivierten Knopf im Bestand umfaerben — das ist ein eigenes Ticket wert,
   nicht ein Nebeneffekt von diesem. */
.crm .ops-ef-btn:disabled {
    opacity: .5;
    cursor: not-allowed;
}

/* ===== PR1.331 #543 — Seite „Feedback" (Redesign) =====
   Gesicht: public/js/components/crm-feedback-board.js (Zwilling views/feedback-board.js).
   Baut auf .kanban/.kan-col/.kan-head/.kan-card/.kan-empty auf; eigene Teile heissen fb-*.
   Buchstaeblich OHNE px und ohne rohe Hex-Farben (Ratchets raw-px/raw-hex), kein festes
   px-Raster, keine Animation: die Seite ist ein Tageswerkzeug, Hover und Fokus wechseln nur
   Farben. Gescrollt wird das Brett (der eine Inline-Scrollbereich der View) und die
   Seitenleiste fuer sich — beide unabhaengig, damit die Leiste beim Blaettern stehen bleibt. */
.crm .fb-seite { display: flex; flex-direction: column; flex: 1; min-height: 0; }
.crm .fb-suche { flex: 0 1 18rem; width: 18rem; max-width: 100%; min-width: 0; }
.crm .fb-filter { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2) var(--s-4); min-width: 0; }
.crm .fb-filter-gruppe { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-1) var(--s-2); }
.crm .fb-filter-lbl {
  color: var(--text-3); font-weight: 500; font-size: var(--fs-label);
}
.crm .fb-reset[hidden] ,
.crm .fb-reiter[hidden] { display: none; }

/* Bereich: Brett links, Seitenleiste rechts. Kein Schleier — das Brett bleibt bedienbar. */
.crm .fb-bereich { flex: 1; min-height: 0; display: flex; align-items: stretch; }
.crm .fb-brett-scroll { flex: 1; min-width: 0; padding: var(--s-4) 1.375rem; }
.crm .fb-brett.kanban { grid-template-columns: repeat(4, minmax(11rem, 1fr)); align-items: start; gap: var(--s-3); }
.crm .fb-spalte { min-height: 12rem; }
.crm .fb-spalte .kan-head .name { margin: 0; line-height: 1.2; color: var(--text-1); }
.crm .fb-spalte[data-stand="offen"] .led { background: var(--ad-blue); }
.crm .fb-spalte[data-stand="in_bearbeitung"] .led { background: var(--ad-violet); }
.crm .fb-spalte[data-stand="verfuegbar"] .led { background: var(--ad-turq); }
.crm .fb-spalte[data-stand="abgelehnt"] .led { background: var(--ad-red-700); }
.crm .fb-spalte-liste { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--s-2); }
.crm .fb-spalte .kan-empty { margin: 0; }
.crm .fb-spalte-fuss {
  margin-top: auto; padding-top: var(--s-2);
  display: flex; flex-direction: column; align-items: stretch; gap: var(--s-1);
}
.crm .fb-hinweis { font-size: var(--fs-label); color: var(--text-3); text-align: center; }
.crm .fb-spalte-fuss .btn { justify-content: center; }
.crm .fb-klein { padding: .1875rem var(--s-2); font-size: var(--fs-meta); }
.crm .fb-klein[aria-disabled="true"] { opacity: .6; cursor: progress; }

/* Karte: echter <button>. Ueberschreibt Greif-Cursor, Hub und Uebergang der .kan-card. */
.crm .fb-karte {
  width: 100%; margin: 0;
  font: inherit; font-size: var(--fs-meta); text-align: left; color: var(--text-1);
  gap: var(--s-1);
  cursor: pointer;
  transition: none;
}
@media (hover: hover) and (pointer: fine) { .crm .fb-karte:hover { transform: none; background: var(--bg-hover); box-shadow: var(--shadow-1); } }
.crm .fb-karte[aria-current="true"] {
  background: var(--tint-blue);
  border-top-color: var(--focus); border-right-color: var(--focus); border-bottom-color: var(--focus);
}
.crm .fb-karte-titel {
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2;
  overflow: hidden;
  font-weight: 500; font-size: var(--fs-ui); line-height: 1.35; color: var(--text-1);
  overflow-wrap: anywhere;
}
.crm .fb-karte-tags ,
.crm .fb-karte-fortschritt { font-size: var(--fs-meta); color: var(--text-2); }
.crm .fb-karte-seit { font-size: var(--fs-meta); font-weight: 500; color: var(--ad-turq-900); }
.crm .fb-karte-grund {
  font-size: var(--fs-meta); color: var(--text-2);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.crm .fb-karte-marken { display: flex; flex-wrap: wrap; gap: var(--s-1); }
.crm .fb-marke {
  display: inline-flex; align-items: center;
  padding: .0625rem .4375rem;
  border: .0625rem solid transparent; border-radius: 999rem;
  font-family: var(--f-cond); font-size: var(--fs-label); font-weight: 500; letter-spacing: .02em;
}
.crm .fb-marke-neu { background: var(--tint-blue); color: var(--ad-blue-700); }
.crm .fb-marke-pruefen { background: var(--tint-warn); color: var(--ad-orange-900); }
.crm .fb-marke-meine { border-color: var(--border-strong); color: var(--text-2); }
/* PR1.352 — Admin-Hinweis „ohne Owner": gestrichelt = Luecke, kein Alarm. */
.crm .fb-marke-ohne-owner { border-color: var(--border-strong); border-style: dashed; color: var(--text-2); }
.crm .fb-karte-fuss {
  display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 0 var(--s-2);
  font-size: var(--fs-label); color: var(--text-3);
}
/* Auf der gewaehlten (--tint-blue) und der ueberfahrenen Karte (--bg-hover) faellt --text-3
   unter 4.5:1 (gemessen 4.31 bzw. 4.46) — dort traegt der Fuss --text-2. */
.crm .fb-karte:hover .fb-karte-fuss ,
.crm .fb-karte[aria-current="true"] .fb-karte-fuss { color: var(--text-2); }
/* PR1.352: „Melder · Owner: Name" bricht an Leerzeichen um statt abzuschneiden — der Owner
   ist die Information. Reicht der Platz nicht, rutscht das Datum in die naechste Zeile. */
.crm .fb-karte-melder { min-width: 0; overflow-wrap: break-word; }
.crm .fb-karte-datum { flex: none; font-family: var(--f-mono); font-variant-numeric: tabular-nums; }

/* Ladezustand: ruhige Platzhalter in Kartenform (kein Pulsieren). */
.crm .fb-skel-karte { height: 4.5rem; margin: 0; border-radius: var(--r-md); animation: none; opacity: .6; }

.crm .fb-brett-scroll > .crm-empty { max-width: 32rem; margin: var(--s-6) auto; }
.crm .fb-leer-aktion { margin-top: var(--s-3); }

/* Reiter (nur schmal sichtbar, siehe @media unten). */
.crm .fb-reiter { display: none; }
.crm .fb-tab {
  display: inline-flex; align-items: center; gap: var(--s-1);
  padding: var(--s-2) var(--s-3);
  border: 0; border-bottom: .125rem solid transparent; background: transparent;
  font: inherit; font-size: var(--fs-ui); font-weight: 500; color: var(--text-2);
  cursor: pointer;
}
.crm .fb-tab:hover { color: var(--text-1); }
.crm .fb-tab[aria-selected="true"] { color: var(--ad-blue); border-bottom-color: var(--ad-blue); }
.crm .fb-tab-cnt {
  padding: 0 .375rem;
  font-family: var(--f-mono); font-variant-numeric: tabular-nums; font-size: var(--fs-label); color: var(--text-3);
  background: var(--bg-surface); border: .0625rem solid var(--border); border-radius: 999rem;
}

/* Seitenleiste: Optik der .drawer, aber im Fluss statt fixed — ohne drawerIn. */
.crm .fb-leiste {
  flex: 0 0 min(30rem, 40%); min-width: 0; min-height: 0;
  display: flex; flex-direction: column;
  background: var(--bg-surface);
  border-left: .0625rem solid var(--border-strong);
}
.crm .fb-leiste-kopf {
  display: flex; flex-direction: column; gap: var(--s-1);
  padding: var(--s-4) var(--s-5) var(--s-3);
  border-bottom: .0625rem solid var(--border);
}
.crm .fb-leiste-zeile { display: flex; align-items: center; gap: var(--s-2); }
.crm .fb-leiste-zeile .fb-zu { margin-left: auto; }
.crm .fb-zurueck { display: none; align-self: flex-start; }
.crm .fb-leiste-titel {
  margin: var(--s-1) 0 0;
  font-family: var(--f-cond); font-size: var(--fs-title); font-weight: 600; line-height: 1.2;
  color: var(--text-1); overflow-wrap: anywhere;
}
.crm .fb-leiste-meta { font-size: var(--fs-ui); color: var(--text-2); }
.crm .fb-leiste-body {
  flex: 1; min-height: 0; overflow-y: auto;
  display: flex; flex-direction: column; gap: var(--s-5);
  padding: var(--s-4) var(--s-5);
}
.crm .fb-leiste-fuss {
  display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--s-2);
  padding: var(--s-3) var(--s-5);
  border-top: .0625rem solid var(--border);
  background: var(--bg-surface-2);
}
.crm .fb-leiste-lade { margin: 0; font-size: var(--fs-ui); color: var(--text-3); }
.crm .fb-leiste-fehler { display: flex; flex-direction: column; align-items: flex-start; gap: var(--s-2); font-size: var(--fs-ui); color: var(--text-1); }
.crm .fb-leiste-fehler p { margin: 0; }
.crm .fb-abschnitt-titel {
  margin: 0 0 var(--s-2);
  font-family: var(--f-cond); font-size: var(--fs-ui); font-weight: 500; color: var(--text-2);
}
.crm .fb-meldung { margin: 0; }
.crm .fb-meldung dt { margin-top: var(--s-3); font-size: var(--fs-meta); font-weight: 500; color: var(--text-3); }
.crm .fb-meldung dt:first-child { margin-top: 0; }
.crm .fb-meldung dd {
  margin: .125rem 0 0;
  font-size: var(--fs-body); line-height: 1.5; color: var(--text-1);
  white-space: pre-wrap; overflow-wrap: anywhere;
}
.crm .fb-ablehnung {
  padding: var(--s-3);
  background: var(--tint-red);
  border: .0625rem solid var(--border); border-left: .1875rem solid var(--ad-red-700);
  border-radius: var(--r-sm);
  font-size: var(--fs-ui); color: var(--text-1);
}
.crm .fb-ablehnung b { color: var(--ad-red-700); }
.crm .fb-ablehnung p { margin: var(--s-1) 0 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.crm .fb-fotos { display: grid; grid-template-columns: repeat(auto-fill, minmax(8rem, 1fr)); gap: var(--s-2); }
.crm .fb-foto {
  margin: 0; aspect-ratio: 4 / 3; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  background: var(--bg-surface-2);
  border: .0625rem solid var(--border); border-radius: var(--r-md);
}
.crm .fb-foto-bild { display: block; width: 100%; height: 100%; object-fit: contain; }
.crm .fb-foto-platz { padding: var(--s-2); font-size: var(--fs-meta); color: var(--text-3); text-align: center; }
.crm .fb-tickets ,
.crm .fb-verlauf { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--s-2); }
.crm .fb-ticket {
  padding: var(--s-2) var(--s-3);
  background: var(--bg-surface-2);
  border: .0625rem solid var(--border); border-radius: var(--r-md);
  font-size: var(--fs-ui);
}
.crm .fb-ticket-kopf { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--s-2); }
.crm .fb-ticket-titel { font-weight: 600; color: var(--text-1); overflow-wrap: anywhere; }
.crm .fb-ticket-text { margin: var(--s-1) 0 0; color: var(--text-2); white-space: pre-wrap; overflow-wrap: anywhere; }
.crm .fb-ticket-fertig { margin-top: var(--s-1); font-size: var(--fs-meta); color: var(--text-3); }
.crm .fb-ticket-admin { margin-top: var(--s-2); display: flex; align-items: center; gap: var(--s-2); }
.crm .fb-iid { font-family: var(--f-mono); font-variant-numeric: tabular-nums; font-size: var(--fs-meta); color: var(--text-3); }
.crm .fb-verlauf li { display: flex; gap: var(--s-3); font-size: var(--fs-ui); color: var(--text-1); }
.crm .fb-verlauf-am { flex: none; min-width: 5.5rem; font-family: var(--f-mono); font-variant-numeric: tabular-nums; font-size: var(--fs-meta); color: var(--text-3); }
.crm .fb-verlauf-von { color: var(--text-3); }
.crm .fb-kommentare-slot:empty { display: none; }

/* PR1.332 #544 — Kommentarstrang im Slot (components/feedback-kommentare.js): Typo des
   Verlaufs, kein eigener Scroll-Container (.fb-leiste-body scrollt), keine Bewegung.
   `.btn:disabled` gibt es im Redesign nicht — der gesperrte Zustand (aria-disabled) steht hier. */
.crm .fbk { display: flex; flex-direction: column; gap: var(--s-3); }
.crm .fbk .fb-abschnitt-titel { margin: 0; }
.crm .fbk-leer { margin: 0; font-size: var(--fs-ui); color: var(--text-2); }
.crm .fbk-liste { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--s-3); }
.crm .fbk-kopf {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-2);
  min-height: 1.75rem; font-size: var(--fs-ui);
}
.crm .fbk-wer { min-width: 0; overflow-wrap: anywhere; }
.crm .fbk-autor { font-weight: 600; color: var(--text-1); }
.crm .fbk-du { color: var(--text-3); }
.crm .fbk-am { font-family: var(--f-mono); font-variant-numeric: tabular-nums; font-size: var(--fs-meta); color: var(--text-3); white-space: nowrap; }
.crm .fbk-inhalt {
  margin: .125rem 0 0;
  font-size: var(--fs-body); line-height: 1.5; color: var(--text-1);
  white-space: pre-wrap; overflow-wrap: anywhere;
}
.crm .fbk .btn { transition: none; }
@media (hover: hover) and (pointer: fine) { .crm .fbk .btn:hover { transform: none; } }
.crm .fbk-loeschen { flex: none; }
.crm .fbk .btn[aria-disabled="true"] { opacity: .6; cursor: progress; }
.crm .fbk-fehler {
  padding: var(--s-2) var(--s-3);
  background: var(--tint-red);
  border: .0625rem solid var(--border); border-left: .1875rem solid var(--ad-red-700);
  border-radius: var(--r-sm);
  font-size: var(--fs-ui); color: var(--text-1);
}
.crm .fbk-fehler[hidden] { display: none; }
.crm .fbk-form { display: flex; flex-direction: column; gap: var(--s-2); margin: 0; }
.crm .fbk-feld {
  width: 100%; box-sizing: border-box;
  padding: var(--s-2) var(--s-3);
  font: inherit; font-size: var(--fs-body); line-height: 1.5; color: var(--text-1);
  background: var(--bg-input);
  border: .0625rem solid var(--border-strong); border-radius: var(--r-sm);
  resize: vertical;
}
.crm .fbk-feld::placeholder { color: var(--text-3); }
.crm .fbk-feld:focus-visible { outline: .125rem solid var(--focus); outline-offset: .0625rem; }
.crm .fbk .btn:focus-visible { outline: .125rem solid var(--focus); outline-offset: .125rem; }
.crm .fbk-feld[readonly] { background: var(--bg-surface-2); color: var(--text-2); }
.crm .fbk-fuss { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-1) var(--s-3); font-size: var(--fs-meta); color: var(--text-3); }
.crm .fbk-rest { font-family: var(--f-mono); font-variant-numeric: tabular-nums; color: var(--text-2); }
.crm .fbk-rest[data-knapp] { color: var(--ad-red-700); }
.crm .fbk-status { color: var(--text-2); }
.crm .fbk-senden { margin-left: auto; }

/* Dunkles Theme: nur die Toene, die auf dunklem Grund zu schwach waeren. */
.crm.dark .fb-spalte[data-stand="abgelehnt"] .led , html[data-theme="dark"] .crm .fb-spalte[data-stand="abgelehnt"] .led { background: var(--ad-red-300); }
.crm.dark .fb-karte-seit , html[data-theme="dark"] .crm .fb-karte-seit { color: var(--ad-turq); }
.crm.dark .fb-marke-neu , html[data-theme="dark"] .crm .fb-marke-neu { color: var(--ad-blue-300); }
.crm.dark .fb-marke-pruefen , html[data-theme="dark"] .crm .fb-marke-pruefen { color: var(--ad-orange); }
.crm.dark .fb-tab[aria-selected="true"] , html[data-theme="dark"] .crm .fb-tab[aria-selected="true"] { color: var(--ad-blue-300); border-bottom-color: var(--ad-blue-300); }
.crm.dark .fb-ablehnung , html[data-theme="dark"] .crm .fb-ablehnung { border-left-color: var(--ad-red-300); }
.crm.dark .fb-ablehnung b , html[data-theme="dark"] .crm .fb-ablehnung b { color: var(--ad-red-300); }
.crm.dark .fbk-fehler , html[data-theme="dark"] .crm .fbk-fehler { border-left-color: var(--ad-red-300); }
.crm.dark .fbk-rest[data-knapp] , html[data-theme="dark"] .crm .fbk-rest[data-knapp] { color: var(--ad-red-300); }

/* Schmal: eine Spalte je Reiter; die offene Leiste ersetzt das Brett, „Zurück" schliesst. */
@media (max-width: 48rem) {
  .crm .fb-suche { flex: 1 1 100%; width: 100%; }
  .crm .fb-reiter:not([hidden]) {
    display: flex; flex-wrap: wrap; gap: var(--s-1);
    padding: var(--s-1) var(--s-4) 0;
    background: var(--bg-surface);
    border-bottom: .0625rem solid var(--border);
  }
  .crm .fb-brett-scroll { padding: var(--s-3) var(--s-4); }
  .crm .fb-brett.kanban { grid-template-columns: minmax(0, 1fr); }
  .crm .fb-spalte[data-aktiv="false"] { display: none; }
  .crm .fb-seite[data-offen="true"] .toolbar ,
  .crm .fb-seite[data-offen="true"] .fb-reiter ,
  .crm .fb-seite[data-offen="true"] .fb-brett-scroll { display: none; }
  .crm .fb-leiste { flex: 1 1 100%; border-left: 0; }
  .crm .fb-zurueck { display: inline-flex; }
  .crm .fb-leiste-zeile .fb-zu { display: none; }
}

/* PR1.331 #543 — Aktions-Dialog: Pflicht-Stern und Fehlertext im Redesign-Rot
   (--danger ist im .crm-Scope der geerbte Legacy-Wert, siehe Lost-Dialog oben). */
.crm .fb-dialog .fbd-pflicht,
.crm .fb-dialog .fbd-fehler { color: var(--ad-red-700); }
.crm.dark .fb-dialog .fbd-pflicht ,
html[data-theme="dark"] .crm .fb-dialog .fbd-pflicht ,
.crm.dark .fb-dialog .fbd-fehler ,
html[data-theme="dark"] .crm .fb-dialog .fbd-fehler { color: var(--ad-red-300); }
/* PR1.352 — Owner-Radioliste: --primary ist im .crm-Scope nicht belegt, darum Redesign-Blau. */
.crm .fb-dialog .fbd-liste-zeile input { accent-color: var(--ad-blue-700); }
.crm .fb-dialog .fbd-liste-zeile input:focus-visible { outline-color: var(--ad-blue-700); }
.crm .fb-dialog .fbd-liste-zeile:has(input:checked) { background: var(--tint-blue); }
.crm.dark .fb-dialog .fbd-liste-zeile input ,
html[data-theme="dark"] .crm .fb-dialog .fbd-liste-zeile input { accent-color: var(--ad-blue-300); }
.crm.dark .fb-dialog .fbd-liste-zeile input:focus-visible ,
html[data-theme="dark"] .crm .fb-dialog .fbd-liste-zeile input:focus-visible { outline-color: var(--ad-blue-300); }
/* Gesperrt kein Hover-Wechsel: der Knopf behaelt seine Grundfarbe. */
.crm .fb-dialog .btn-danger[data-fbd-ok]:disabled:hover { background: var(--ad-red-700); border-color: var(--ad-red-700); }
.crm .fb-dialog .btn-primary[data-fbd-ok]:disabled:hover { background: var(--ad-blue); border-color: var(--ad-blue); }

/* PR1.344 #558 — Pre-Staffing: Herkunft des FTE-Vorschlags am Feld und Budget-Hinweis im
   Team-Block. Orange nur als Rahmen + Toenung (Nicht-Text, 3:1 reicht); der Text bleibt in
   --text-1, weil --ad-orange(-700) als Schriftfarbe unter 4,5:1 liegt. Bewusst kein
   Seitenstreifen links (impeccable-Verbot). */
.crm .opp-fte-hint { flex: 1 0 100%; font-size: var(--fs-label); color: var(--text-2); }
.crm .opp-edit-fte[aria-invalid="true"] { border-color: var(--ad-red-700); }
/* PR1.386 #607 — ungueltiger Tagessatz; Ring statt Rand, weil das Feld seinen Rand inline traegt. */
.crm .proj-edit-rate[aria-invalid="true"] { box-shadow: 0 0 0 .125rem var(--ad-red-700); }
/* PR1.395 (#623) — errechnete Personentage + neutrale Budget-Zeile (A5, keine Ampel). */
.crm .team-pt-calc { font-family: var(--f-mono); font-variant-numeric: tabular-nums; font-size: var(--fs-label); color: var(--text-3); white-space: nowrap; }
.crm .team-pt-calc-missing { font-family: inherit; font-style: italic; }
.crm .team-pt-einsatzplan {
  background: none; border: 0; padding: 0; font: inherit; font-style: normal;
  color: var(--text-1); text-decoration: underline; cursor: pointer;
}
.crm .team-budget-line {
  display: flex; flex-wrap: wrap; align-items: center; gap: .375rem .75rem;
  margin-top: .75rem; font-size: var(--fs-ui); color: var(--text-2); font-variant-numeric: tabular-nums;
}
.crm .team-budget-line-text { flex: 1 1 16rem; min-width: 0; }
.crm .team-budget-line .team-budget-split { flex: 0 0 auto; }
/* PR1.396 (#624) — Ampel, Personenbudget, Rückfrage am PT-Feld, Verplanen-Panel.
   Farbe nur als Rahmen/Tönung/Zeichen (Nicht-Text, 3:1), Text bleibt --text-1 — die
   -700-Stufen liegen als Schriftfarbe unter 4,5:1. Keine Animation (wöchentlich genutzt). */
.crm .team-budget-ampel {
  flex: 1 0 100%; display: inline-flex; align-items: baseline; gap: .375rem;
  padding: .375rem .625rem; border-radius: var(--r-md); color: var(--text-1);
  border: thin solid var(--border); background: var(--bg-surface);
}
.crm .team-budget-line.is-ok .team-budget-ampel { border-color: var(--ad-green-700); background: color-mix(in srgb, var(--ad-green) 8%, var(--bg-surface)); }
.crm .team-budget-line.is-ok .team-budget-ampel > span[aria-hidden] { color: var(--ad-green-700); }
.crm .team-budget-line.is-knapp .team-budget-ampel { border-color: var(--ad-orange-700); background: color-mix(in srgb, var(--ad-orange) 12%, var(--bg-surface)); }
.crm .team-budget-line.is-knapp .team-budget-ampel > span[aria-hidden] { color: var(--ad-orange-700); }
.crm .team-budget-line.is-ueber .team-budget-ampel { border-color: var(--ad-red-700); background: color-mix(in srgb, var(--ad-red) 10%, var(--bg-surface)); }
.crm .team-budget-line.is-ueber .team-budget-ampel > span[aria-hidden] { color: var(--ad-red-700); }
.crm .team-pt-budget { font-family: var(--f-mono); font-variant-numeric: tabular-nums; font-size: var(--fs-label); color: var(--text-3); white-space: nowrap; }
.crm .team-budget-erhoeht {
  display: flex; flex-wrap: wrap; align-items: center; gap: .375rem .75rem;
  margin: .5rem 0; padding: .5rem .75rem; font-size: var(--fs-ui); color: var(--text-1);
  background: color-mix(in srgb, var(--ad-orange) 12%, var(--bg-surface));
  border: thin solid var(--ad-orange-700); border-radius: var(--r-md);
}
.crm .team-budget-erhoeht > span { flex: 1 1 18rem; min-width: 0; }
.crm .pt-rueckfrage {
  display: flex; flex-wrap: wrap; align-items: center; gap: .375rem .625rem;
  margin: -.25rem 0 .625rem; padding: .5rem .625rem; font-size: var(--fs-ui); color: var(--text-2);
  border: thin solid var(--border); border-radius: var(--r-md); background: var(--bg-surface);
}
.crm .pt-rueckfrage-gruppe { display: inline-flex; border: thin solid var(--border); border-radius: var(--r-sm); overflow: hidden; }
.crm .pt-rueckfrage-wahl { font: inherit; padding: .25rem .625rem; border: 0; background: transparent; color: var(--text-2); cursor: pointer; }
.crm .pt-rueckfrage-wahl + .pt-rueckfrage-wahl { border-left: thin solid var(--border); }
.crm .pt-rueckfrage-wahl.is-an { background: color-mix(in srgb, var(--primary) 16%, var(--bg-surface)); color: var(--text-1); font-weight: 600; box-shadow: inset 0 0 0 .125rem var(--primary-dark); }
.crm .pt-rueckfrage-wahl:focus-visible, .crm .pt-rueckfrage-zu:focus-visible { outline: .125rem solid var(--text-1); outline-offset: .125rem; }
.crm .pt-rueckfrage-zu { margin-left: auto; background: none; border: 0; padding: 0; font: inherit; color: var(--text-2); text-decoration: underline; cursor: pointer; }
.crm .pt-rueckfrage-ergebnis { flex: 1 0 100%; color: var(--text-1); font-weight: 600; font-variant-numeric: tabular-nums; }
.crm .pt-rueckfrage-tipp, .crm .pt-rueckfrage-warn { flex: 1 0 100%; }
.crm .team-verplanen-panel {
  margin: .5rem 0; padding: .625rem .75rem; font-size: var(--fs-ui); color: var(--text-1);
  border: thin solid var(--border); border-radius: var(--r-md); background: var(--bg-surface);
  display: flex; flex-direction: column; gap: .5rem;
}
.crm .team-verplanen-panel .vp-titel { font-weight: 600; }
.crm .team-verplanen-panel .vp-hinweis { margin: 0; color: var(--text-2); font-size: var(--fs-meta); }
.crm .team-verplanen-panel .vp-warn.is-aktiv, .crm .team-verplanen-panel .vp-warn:not([data-vp-warn]) {
  padding: .375rem .625rem; border: thin solid var(--ad-orange-700); border-radius: var(--r-sm);
  background: color-mix(in srgb, var(--ad-orange) 12%, var(--bg-surface));
}
.crm .team-verplanen-panel [hidden] { display: none !important; }
.crm .vp-kal-tag { border-color: var(--border); color: var(--text-1); border-radius: var(--r-sm); }
.crm .vp-kal-tag.is-an { background: color-mix(in srgb, var(--primary) 16%, var(--bg-surface)); border-color: var(--primary-dark); color: var(--text-1); font-weight: 600; box-shadow: inset 0 0 0 .0625rem var(--primary-dark); }
.crm .vp-kal-tag:focus-visible { outline: .125rem solid var(--text-1); outline-offset: .0625rem; }
.crm .opp-team-budget-warn {
  margin: 0 0 .75rem; padding: .5rem .75rem;
  font-size: var(--fs-ui); color: var(--text-1);
  background: color-mix(in srgb, var(--ad-orange) 12%, var(--bg-surface));
  border: thin solid var(--ad-orange-700); border-radius: var(--r-md);
}

/* ── PR1.328 (#538) — Pythia-Routinen ───────────────────────────────────────────
   Liste unter den Gespraechen, Knopf im Kopf, Dialog zum Speichern. Taeglich bis
   woechentlich genutzt → keine Animation. Fokusring aus der generischen
   `.crm :focus-visible`-Regel; nur Tokens, keine festen Pixel. */
.crm .pythia-kopf .chat-routine-speichern { margin-left: auto; flex: 0 0 auto; }
/* Wird es eng, rutscht der Knopf unter den Text, statt ihn zusammenzudruecken. */
.crm .pythia-kopf { flex-wrap: wrap; }
.crm .pythia-kopf-text { flex: 1 1 12rem; }
.crm .pythia-leiste-aktionen { margin-left: auto; display: flex; align-items: center; gap: var(--s-2); }
.crm .pythia-leiste-aktionen .icon-btn { margin-left: 0; }

.crm .chat-routinen { margin-top: var(--s-4); padding-top: var(--s-3); border-top: thin solid var(--border); }
.crm .chat-routinen-titel { margin: 0 0 var(--s-2); color: var(--text-3); font-size: var(--fs-meta); font-weight: 500; }
.crm .chat-routinen-gruppe + .chat-routinen-gruppe { margin-top: var(--s-3); }
.crm .chat-routinen-ueberschrift { margin: 0 0 var(--s-1); font-size: var(--fs-ui); font-weight: 500; color: var(--text-1); }
.crm .chat-routinen-liste { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--s-1); }
.crm .chat-routine { display: flex; align-items: flex-start; gap: var(--s-1); border-radius: var(--r-sm); }
.crm .chat-routine-nutzen {
  flex: 1;
  min-width: 0;
  appearance: none;
  background: none;
  border: none;
  text-align: left;
  padding: var(--s-2);
  font: inherit;
  cursor: pointer;
  border-radius: var(--r-sm);
  color: var(--text-1);
}
.crm .chat-routine-nutzen:hover { background: var(--bg-card2); }
.crm .chat-routine-titel { display: block; font-size: var(--fs-body); font-weight: 500; overflow-wrap: anywhere; }
.crm .chat-routine-beschreibung {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-size: var(--fs-ui);
  color: var(--text-3);
}
.crm .chat-routinen-leer,
.crm .chat-routinen-laedt { color: var(--text-3); font-size: var(--fs-body); margin: 0; padding: var(--s-1) var(--s-2); }
.crm .chat-routinen-fehler {
  border: thin solid var(--danger);
  border-radius: var(--r-md);
  padding: var(--s-2) var(--s-3);
  font-size: var(--fs-body);
}
.crm .chat-routinen-fehler p { margin: 0 0 var(--s-2); }

.crm .pythia-routine-hinweis { margin: 0 0 var(--s-3); color: var(--text-2); font-size: var(--fs-body); }
.crm .pythia-routine-form .form-group { display: flex; flex-direction: column; gap: var(--s-1); margin-bottom: var(--s-3); }
.crm .pythia-routine-form .form-group label { font-size: var(--fs-ui); font-weight: 500; color: var(--text-2); }
.crm .pythia-routine-form input[type="text"],
.crm .pythia-routine-form textarea {
  font: inherit;
  font-size: var(--fs-body);
  padding: var(--s-2);
  background: var(--bg-surface);
  color: var(--text-1);
  border: thin solid var(--border);
  border-radius: var(--r-sm);
}
.crm .pythia-routine-form textarea { resize: vertical; }
.crm .pythia-routine-form [aria-invalid="true"] { border-color: var(--danger); }
/* PR1.438 — „Speichern für" is a plain section (shared section pattern), no frame. */
.crm .pythia-routine-ablage {
  margin: 0 0 var(--s-2);
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2) var(--s-5);
}
.crm .pythia-routine-ablage label { display: inline-flex; align-items: center; gap: var(--s-2); cursor: pointer; color: var(--text-1); }
.crm .pythia-routine-fehler { margin: 0; min-height: 1.25em; color: var(--danger); font-size: var(--fs-body); font-weight: 500; }

/* ===================================================================
   PR1.378 (#597) — Persönliche Zugangsschlüssel (Einstellungen + Admin-Übersicht)
   Markup geteilt mit der klassischen Shell (components/api-keys-section.js); die
   Grundregeln stehen in style.css, hier nur die Redesign-Optik. Nur Tokens, rem und
   `thin` — kein raw-px, kein raw-hex (Ratchet). Keine Bewegung.
   =================================================================== */
.crm .api-keys-card { max-width: 47.5rem; margin-top: var(--s-4); }
.crm .api-keys-head { gap: var(--s-4); margin-bottom: var(--s-3); }
.crm .api-keys-title {
  margin: 0 0 var(--s-1);
  font-family: var(--f-cond);
  font-size: var(--fs-body);
  font-weight: 600;
  color: var(--text-1);
}
.crm .api-keys-intro { margin: 0 0 var(--s-1); color: var(--text-2); font-size: var(--fs-ui); line-height: 1.55; }
.crm .api-keys-docs { color: var(--text-3); font-size: var(--fs-meta); }
.crm .api-keys-date { color: var(--text-2); font-variant-numeric: tabular-nums; }
.crm .api-keys-email { color: var(--text-3); font-size: var(--fs-meta); }
.crm .api-keys-row--revoked td { color: var(--text-3); }
.crm .api-keys-status-date { margin-top: var(--s-1); font-size: var(--fs-meta); }
.crm .api-keys-scopes { margin-top: var(--s-1); color: var(--text-2); font-size: var(--fs-meta); }
.crm .api-keys-scopes-hint { color: var(--text-3); font-size: var(--fs-meta); }
.crm .api-keys-expiry { display: block; color: var(--text-3); font-size: var(--fs-meta); font-variant-numeric: tabular-nums; } /* PR1.760 Ablauf je Schluessel */
.crm .api-keys-expiry--warn { color: var(--ocker-text); font-weight: 500; }
.crm .api-keys-scope-field, .crm .api-keys-expiry-field { margin: var(--s-4) 0 0; padding: 0; border: 0; min-width: 0; }
.crm .api-keys-scope-field legend { padding: 0; margin-bottom: var(--s-1); font-size: var(--fs-meta); font-weight: 500; color: var(--text-2); }
.crm .api-keys-scope-options { display: flex; flex-direction: column; gap: var(--s-2); }
.crm .api-keys-scope-option { display: flex; align-items: flex-start; gap: var(--s-2); padding: var(--s-2) var(--s-3); border: thin solid var(--border-strong); border-radius: var(--r-sm); cursor: pointer; }
.crm .api-keys-scope-option:has(input:checked) { border-color: var(--accent); background: var(--bg-surface); }
.crm .api-keys-field .api-keys-scope-option { font-size: var(--fs-ui); font-weight: 400; color: var(--text-1); }
.crm .api-keys-field .api-keys-scope-option input { flex: none; width: auto; margin: .1875rem 0 0; padding: 0; accent-color: var(--accent); }
.crm .api-keys-scope-option input:focus-visible { outline: .125rem solid var(--accent); outline-offset: .125rem; }
.crm .api-keys-scope-text { display: flex; flex-direction: column; gap: var(--s-1); }
.crm .api-keys-scope-name { font-size: var(--fs-ui); font-weight: 500; color: var(--text-1); }
.crm .api-keys-scope-hint, .crm .api-keys-scope-only { margin: 0; font-size: var(--fs-meta); color: var(--text-3); }
.crm .api-keys-expiry-field select { width: auto; padding: var(--s-2) var(--s-3); font: inherit; font-size: var(--fs-ui); color: var(--text-1); background: var(--bg-surface); border: thin solid var(--border-strong); border-radius: var(--r-sm); }
.crm .api-keys-loading { gap: var(--s-2); color: var(--text-3); font-size: var(--fs-ui); }
.crm .api-keys-empty {
  gap: var(--s-3);
  padding: var(--s-4);
  border: thin dashed var(--border-strong);
  border-radius: var(--r-md);
  background: var(--bg-surface-2);
}
.crm .api-keys-note {
  padding: var(--s-3) var(--s-4);
  border-radius: var(--r-md);
  background: var(--bg-surface-2);
  color: var(--text-2);
  font-size: var(--fs-ui);
}
.crm .api-keys-empty-text { font-size: var(--fs-ui); }
.crm .api-keys-actions { margin-top: var(--s-3); }

.crm .api-keys-dialog {
  padding: var(--s-5) var(--s-6);
  border: thin solid var(--border);
  border-radius: var(--r-xl);
  background: var(--bg-surface);
  color: var(--text-1);
  box-shadow: var(--shadow-3);
  font-family: var(--f-sans);
}
.crm .api-keys-dialog::backdrop { background: rgba(14, 23, 38, 0.55); }
.crm .api-keys-dialog-title { margin: 0 0 var(--s-2); font-size: var(--fs-body); font-weight: 600; color: var(--text-1); }
.crm .api-keys-dialog-text { margin: 0 0 var(--s-4); color: var(--text-2); font-size: var(--fs-ui); }
.crm .api-keys-field { display: flex; flex-direction: column; gap: var(--s-1); }
.crm .api-keys-field label { font-size: var(--fs-meta); font-weight: 500; color: var(--text-2); }
.crm .api-keys-field input {
  width: 100%;
  padding: var(--s-2) var(--s-3);
  font: inherit;
  font-size: var(--fs-ui);
  color: var(--text-1);
  background: var(--bg-surface);
  border: thin solid var(--border-strong);
  border-radius: var(--r-sm);
}
.crm .api-keys-key-row { gap: var(--s-2); }
.crm .api-keys-key-row .api-keys-key { width: auto; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: var(--fs-meta); } /* PR1.437 Ausnahme: API-Schluessel, Zeichen unterscheidbar */
.crm .api-keys-field-error { margin: var(--s-1) 0 0; color: var(--danger); font-size: var(--fs-ui); }
.crm .api-keys-warning {
  margin: 0 0 var(--s-3);
  padding: var(--s-2) var(--s-3);
  border-left: .1875rem solid var(--ad-orange-700);
  border-radius: var(--r-sm);
  background: var(--tint-warn);
  color: var(--text-1);
  font-size: var(--fs-ui);
}
.crm .api-keys-copy-hint { margin: var(--s-1) 0 0; color: var(--text-2); font-size: var(--fs-ui); }
.crm .api-keys-copy-hint:empty { min-height: 0; margin: 0; }
.crm .api-keys-dialog-actions { gap: var(--s-2); margin-top: var(--s-5); }
/* Die Fokusregel aus style.css traegt --primary; im .crm-Scope gilt der Markenring. */
.crm .api-keys .btn:focus-visible,
.crm .api-keys-dialog .btn:focus-visible { outline-color: var(--focus); }
/* Schmale Breite (Grundregeln in style.css): die .tbl-Zellregeln wiegen mehr als die
   klassischen, darum hier eigens. Jede Zeile wird eine Karte. Steht nach den Grundregeln. */
@container api-keys (max-width: 40rem) {
  .crm .tbl.api-keys-table tbody { display: flex; flex-direction: column; gap: var(--s-2); }
  .crm .tbl.api-keys-table tbody tr {
    padding: var(--s-3) var(--s-4);
    border: thin solid var(--border);
    border-radius: var(--r-md);
    background: var(--bg-surface);
  }
  .crm .tbl.api-keys-table tbody td { padding: 0; border: 0; border-radius: 0; background: transparent; }
  .crm .tbl.api-keys-table tbody tr:hover td { background: transparent; }
  .crm .api-keys-meta { font-size: var(--fs-meta); }
  .crm .api-keys-action { margin-top: var(--s-2); }
}

/* ── PR1.383 (#604) — Auslastung: zwei Werte + Aufschluesselung (Redesign-Optik) ──
   Geometrie in style.css; hier nur Farben. Gruen ist im Redesign keine Textfarbe —
   die Farbe sitzt nur am Punkt (-700-Stufen, ≥ 3:1 als Marker). Gelb gibt es in der
   Palette nicht als Token: Senf aus Orange und Gruen gemischt (keine Roh-Hex, Ratchet). */
.crm .ausl-zahl { color: var(--text-1); border-bottom-color: var(--border-strong); }
.crm .ausl-zahl:hover, .crm .ausl-zahl[aria-expanded="true"] { border-bottom-color: var(--focus); }
.crm .ausl-titel, .crm .ausl-sub, .crm .ausl-chip { color: var(--text-2); }
.crm .ausl-chip { border-color: var(--border-strong); }
.crm .ausl--frei .ausl-dot { background: var(--ad-red-700); }
.crm .ausl--teil .ausl-dot { background: color-mix(in srgb, var(--ad-orange-700) 55%, var(--ad-green-700)); }
.crm .ausl--voll .ausl-dot, .crm .ausl--ueber .ausl-dot { background: var(--ad-green-700); }
.crm .ausl--intern .ausl-dot { background: var(--text-3); }
.crm .ausl--leer .ausl-dot { border-color: var(--text-3); }
.crm .ausl-fehlt, .crm .ausl--fehler { text-decoration-color: var(--ad-red-700); }
.crm .ausl-pop {
  background: var(--bg-surface-3);
  border-color: var(--focus);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-3);
  color: var(--text-1);
  font-family: var(--f-sans);
}
.crm .ausl-pop-kopf, .crm .ausl-pop-titel, .crm .ausl-pop-hinweis { color: var(--text-2); }
.crm .ausl-pop-summe { border-top-color: var(--border-strong); }

/* ── PR1.384 #605 — Kapazität · NKV-Einsatzplan (crm-capacity-nkv.js) ─────────────────
   Bernds Power-BI-Wochenblick. Täglich/wöchentlich genutztes Arbeitswerkzeug → keine
   Übergänge, keine Bewegung. Ampelfarben aus .nkv-ok/-mid/-high (oben), Fokus aus der
   generischen `.crm :focus-visible`-Regel. Grün ist hier nie Textfarbe (Kontrast). */
.crm .cnkv-body { display:flex; flex-direction:column; gap:1.875rem; padding:var(--s-4) var(--s-6); }
/* Nachjustierung #628 — fuenf gleich breite Kacheln im Raster; schmal: gleichmaessiger Umbruch. */
.crm .cnkv-weeks { display:grid; grid-template-columns:repeat(auto-fit, minmax(max(9.5rem, calc((100% - 4 * var(--s-2)) / 5 - 0.0625rem)), 1fr)); align-items:stretch; gap:var(--s-2); }
.crm .cnkv-weeks .cnkv-week { flex-direction:column; align-items:flex-start; justify-content:flex-start; gap:var(--s-1); white-space:nowrap; min-width:0; }
.crm .cnkv-week-head { display:inline-flex; align-items:center; gap:var(--s-2); }
.crm .cnkv-week-meta { color:var(--text-3); font-size:var(--fs-meta); white-space:nowrap; }
/* PR1.398 — zweite Zeile je Woche: "mit Planung" in der Planungsfarbe (wie .cnkv-plan b). */
.crm .cnkv-week-plan { text-align:left; color:var(--ad-blue-700); font-size:var(--fs-meta); font-weight:500; }
.crm.dark .cnkv-week-plan , html[data-theme="dark"] .crm .cnkv-week-plan { color:var(--ad-blue-300); }
.crm .cnkv-muted { color:var(--text-3); font-size:var(--fs-meta); }
.crm .cnkv-goto { margin-left:auto; flex:none; }
.crm .cnkv-src { grid-column:1 / -1; flex-basis:100%; text-align:right; color:var(--text-3); font-size:var(--fs-meta); }
.crm .cnkv-h { margin:0; font-family:var(--f-cond); font-size:var(--fs-body); }
.crm .cnkv-week { display:inline-flex; align-items:center; gap:var(--s-2); padding:var(--s-2) var(--s-3);
  background:var(--bg-surface); border:0.0625rem solid var(--border); border-radius:var(--r-md);
  color:var(--text-1); font:inherit; font-size:var(--fs-ui); cursor:pointer; }
.crm .cnkv-week:hover { background:var(--bg-hover); }
.crm .cnkv-week-val { font-family:var(--f-mono); font-variant-numeric: tabular-nums; font-weight:600; font-size:var(--fs-title); line-height:1.2; }
.crm .cnkv-dot { display:inline-block; width:.625rem; height:.625rem; border-radius:50%; flex:none; }
.crm .cnkv-pivots { display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:var(--s-4); align-items:start; }
.crm .cnkv-main { display:flex; flex-direction:column; gap:var(--s-3); }
.crm .cnkv-sentence { margin:0; color:var(--text-2); }
.crm .cnkv-big { font-family:var(--f-cond); font-size:var(--fs-kpi); font-weight:600; line-height:1.1; color:var(--text-1);
  display:flex; align-items:center; gap:var(--s-2); }
.crm .cnkv-big::before { content:""; width:.875rem; height:.875rem; border-radius:50%; flex:none; }
.crm .cnkv-big::before { border-radius:.25rem; box-shadow:inset 0 0 0 0.0625rem var(--border-strong); }
.crm .cnkv-big-w1::before { background:var(--waerme-1-bg); }
.crm .cnkv-big-w2::before { background:var(--waerme-2-bg); }
.crm .cnkv-big-w3::before { background:var(--waerme-3-bg); }
.crm .cnkv-big-w4::before { background:var(--waerme-4-bg); }
.crm .cnkv-big-w5::before { background:var(--waerme-5-bg); }
.crm .cnkv-big-leer::before { background:none; }
.crm .cnkv-plan { color:var(--text-2); }
.crm .cnkv-plan b, .crm .cnkv-hint { color:var(--ad-blue-700); }
.crm .cnkv-legend, .crm .cnkv-chips { display:flex; flex-wrap:wrap; align-items:center; gap:var(--s-3); font-size:var(--fs-meta); color:var(--text-2); }
.crm .cnkv-legend span { display:inline-flex; align-items:center; gap:var(--s-1); }
.crm .cnkv-chip { display:inline-flex; align-items:center; gap:var(--s-1); }
.crm .cnkv-chip-x { background:none; border:0; color:inherit; font:inherit; cursor:pointer; padding:0 var(--s-1); }
.crm .cnkv-tbl { width:100%; }
.crm .cnkv-tbl th, .crm .cnkv-tbl td { padding:var(--s-2) var(--s-2); }
/* Jeder Filterklick rendert neu — die Zeilen-Einblendung (.tbl tbody tr, rowIn) flackerte
   sonst bei jedem Klick. Gleiche Ausnahme wie .proj-team-tbl. */
.crm .cnkv-tbl tbody tr { animation:none; }
.crm .cnkv-tbl .nkv-chip { padding:.125rem .375rem; }
/* Hell: Gruen/Orange als Text auf dem Tint unter 4.5:1 — hier stehen dutzende Zellen, also
   die dunkle Stufe (Memory: Gruen ist im Redesign keine Textfarbe). Dunkel bleibt die Grundregel. */
.crm .cnkv-tbl .nkv-ok { color:var(--ad-green-900); }
.crm .cnkv-tbl .nkv-mid { color:var(--ad-orange-900); }
.crm.dark .cnkv-tbl .nkv-ok, html[data-theme="dark"] .crm .cnkv-tbl .nkv-ok { color:var(--ad-green-700); }
.crm.dark .cnkv-tbl .nkv-mid, html[data-theme="dark"] .crm .cnkv-tbl .nkv-mid { color:var(--ad-orange-700); }
.crm .cnkv-legend .cnkv-dot { width:.875rem; height:.875rem; border-radius:.25rem; box-shadow:inset 0 0 0 0.0625rem var(--border-strong); }
.crm .cnkv-legend-unit { color:var(--text-2); }
.crm .cnkv-tbl th.num, .crm .cnkv-tbl td.num { text-align:right; white-space:nowrap; }
.crm .cnkv-total td { font-weight:600; }
.crm .cnkv-sub td:first-child { padding-left:var(--s-5); }
/* Nachjustierung #628 — Auswahl ueber Balken + fette Schrift an der Namenszelle; die Ampel-Chips behalten ihre Farbe. */
.crm .cnkv-active td:first-child { box-shadow:inset 0.1875rem 0 0 var(--ad-blue-700); }
.crm .cnkv-active .cnkv-rowbtn, .crm .cnkv-active td:first-child { font-weight:600; }
.crm .cnkv-dimmed td, .crm .cnkv-dimmed .cnkv-rowbtn { color:var(--text-3); }
.crm .cnkv-rowbtn { background:none; border:0; padding:0; color:var(--text-1); font:inherit; text-align:left; cursor:pointer; }
.crm .cnkv-rowbtn:hover { text-decoration:underline; }
.crm .cnkv-hint { display:inline-flex; align-items:center; gap:var(--s-1); font-size:var(--fs-meta); }
.crm .cnkv-trend { font-size:var(--fs-label); }
.crm .cnkv-trend-steigend { color:var(--ad-red-700); }
.crm .cnkv-trend-sinkend { color:var(--ad-green-900); }
.crm .cnkv-trend-gleich { color:var(--text-3); }
/* PR1.641 (#940) — Wochenleiste neutral: keine Ampelfarbe, nur die gewaehlte Woche ist hell getoent
   (--tint-blue) mit blauem Rand. Farbwechsel 150 ms (Budget PR1.636), bei reduzierter Bewegung sofort. */
.crm .cnkv-week { transition:background-color 150ms ease, border-color 150ms ease, box-shadow 150ms ease; }
.crm .cnkv-week.active { background:var(--tint-blue); border-color:var(--ad-blue); box-shadow:inset 0 0 0 0.0625rem var(--ad-blue); }
.crm .cnkv-week.active:hover { background:var(--tint-blue); }
.crm .cnkv-week.active .cnkv-week-val { font-weight:600; }
.crm .cnkv-week-gleich { text-align:left; color:var(--text-2); font-size:var(--fs-meta); }
.crm .cnkv-kw { color:var(--text-2); font-weight:400; }
.crm .cnkv-tbl th .cnkv-kw { display:block; }
@media (prefers-reduced-motion: reduce) { .crm .cnkv-week { transition:none; } }
.crm .cnkv-empty { padding:var(--s-6) var(--s-4); text-align:center; color:var(--text-2); }
.crm.dark .cnkv-plan b, html[data-theme="dark"] .crm .cnkv-plan b,
.crm.dark .cnkv-hint, html[data-theme="dark"] .crm .cnkv-hint { color:var(--ad-blue-300); }
.crm.dark .cnkv-trend-steigend, html[data-theme="dark"] .crm .cnkv-trend-steigend { color:var(--ad-red-300); }
.crm.dark .cnkv-trend-sinkend, html[data-theme="dark"] .crm .cnkv-trend-sinkend { color:var(--ad-green); }
.crm.dark .cnkv-active td:first-child, html[data-theme="dark"] .crm .cnkv-active td:first-child { box-shadow:inset 0.1875rem 0 0 var(--ad-blue-300); }
/* ── PR1.690 (#991) — NKV: vier Wochen als Heatmap, Klick auf CC zeigt freie MAs ─────────
   Vorlage N1/N2. Jede Woche eine eigene Zelle (kein colspan), gewaehlte Woche nur ueber die blaue
   Spaltenueberschrift, keine Zellrahmen. Personenwerte ruhig: Punkt + Zahl statt Farbblock.
   Abstaende: 1,75 rem zwischen den Karten, Kartenrand innen 1,375 / 1,625 rem. Keine Bewegung. */
.crm .cnkv-body > .card, .crm .cnkv-pivots > .card { padding:1.4667rem 1.7333rem; }
.crm .cnkv-cardhead { margin-bottom:var(--s-1); }
.crm .cnkv-sub { margin:0 0 var(--s-4); color:var(--text-3); font-size:var(--fs-meta); }
.crm .cnkv-heat { border-collapse:separate; border-spacing:0 0.375rem; border:0; background:none; box-shadow:none; border-radius:0; }
.crm .cnkv-pp { border:0; background:none; box-shadow:none; border-radius:0; }
.crm .cnkv-heat thead, .crm .cnkv-pp thead, .crm .cnkv-heat thead tr, .crm .cnkv-pp thead tr { background:none; border:0; }
.crm .cnkv-heat thead th, .crm .cnkv-pp thead th { background:none; text-transform:none; letter-spacing:normal; position:static; border:0; border-radius:0; }
.crm .cnkv-heat thead th:first-child, .crm .cnkv-pp thead th:first-child, .crm .cnkv-heat thead th:last-child, .crm .cnkv-pp thead th:last-child,
.crm .cnkv-heat tbody td:first-child, .crm .cnkv-pp tbody td:first-child, .crm .cnkv-heat tbody td:last-child, .crm .cnkv-pp tbody td:last-child { border-left:0; border-right:0; border-radius:0; }
.crm .cnkv-heat tbody tr:hover td, .crm .cnkv-pp tbody tr:hover td { background:none; }
.crm .cnkv-heat tbody tr.cnkv-active:hover td:not(.cnkv-hz) { background:var(--tint-blue); }
.crm .cnkv-pivot .cnkv-heat thead th.cnkv-wk { width:auto; }
.crm .cnkv-pivot .cnkv-heat tbody td:first-child { white-space:nowrap; }
.crm .cnkv-heat thead th { border-bottom:0; color:var(--text-3); font-weight:600; font-size:var(--fs-meta); padding:var(--s-1) var(--s-3); vertical-align:bottom; }
.crm .cnkv-heat thead th.cnkv-wk { text-align:center; width:7.3333rem; }
.crm .cnkv-heat thead th.cnkv-wk .cnkv-kw { display:block; font-weight:500; }
.crm .cnkv-heat thead th.cnkv-col-sel, .crm .cnkv-pp thead th.cnkv-col-sel { color:var(--ad-blue); }
.crm .cnkv-heat thead th.cnkv-col-sel .cnkv-kw, .crm .cnkv-pp thead th.cnkv-col-sel .cnkv-kw { color:inherit; }
.crm .cnkv-heat tbody td, .crm .cnkv-pp tbody td { border-bottom:0; background:none; padding:var(--s-2) var(--s-3); font-size:var(--fs-ui); }
.crm .cnkv-heat tbody td.cnkv-hz { text-align:center; font-family:var(--f-mono); font-variant-numeric:tabular-nums; font-weight:700; border-radius:var(--r-sm); }
.crm .cnkv-heat tbody td.cnkv-hz.nkv-w1 { background:var(--waerme-1-bg); color:var(--waerme-1-ink); }
.crm .cnkv-heat tbody td.cnkv-hz.nkv-w2 { background:var(--waerme-2-bg); color:var(--waerme-2-ink); }
.crm .cnkv-heat tbody td.cnkv-hz.nkv-w3 { background:var(--waerme-3-bg); color:var(--waerme-3-ink); }
.crm .cnkv-heat tbody td.cnkv-hz.nkv-w4 { background:var(--waerme-4-bg); color:var(--waerme-4-ink); }
.crm .cnkv-heat tbody td.cnkv-hz.nkv-w5 { background:var(--waerme-5-bg); color:var(--waerme-5-ink); }
.crm .cnkv-heat tbody td.cnkv-hz.nkv-leer { background:var(--bg-hover); color:var(--text-3); }
.crm .cnkv-heat .cnkv-sub td:first-child { padding-left:var(--s-3); }
.crm .cnkv-legend .cnkv-legend-end { font-weight:600; }
.crm .cnkv-heat .cnkv-total td:not(:first-child):not(.cnkv-hz) { font-weight:400; }
.crm .cnkv-main { gap:0; }
/* Vorlage: Kartentitel, Zellen und Köpfe in der normalen Schrift (nicht Condensed), Köpfe 12 px */
.crm .cnkv-main .cnkv-h, .crm .cnkv-personen .cnkv-h, .crm .cnkv-pivot .cnkv-h { font-family:var(--f-sans); font-size:var(--fs-section); font-weight:700; }
.crm .cnkv-heat th, .crm .cnkv-heat td, .crm .cnkv-pp th, .crm .cnkv-pp td, .crm .cnkv-heat .cnkv-rowbtn { font-family:var(--f-sans); }
.crm .cnkv-heat thead th, .crm .cnkv-pp thead th { font-size:var(--fs-label); }
.crm .cnkv-heat thead th:nth-child(-n+3) { vertical-align:middle; }
.crm .cnkv-heat thead th.cnkv-wk, .crm .cnkv-pp thead th.cnkv-wk { font-size:var(--fs-label); font-weight:600; }
.crm .cnkv-heat thead th .cnkv-kw, .crm .cnkv-pp thead th .cnkv-kw { font-size:var(--fs-label); }
.crm .cnkv-pp tbody tr { border-bottom:0.0625rem solid var(--border); }
.crm .cnkv-heat tbody td:not(.cnkv-hz), .crm .cnkv-heat tbody td.cnkv-hz { padding-top:.625rem; padding-bottom:.625rem; }
.crm .cnkv-heat .cnkv-active td:first-child { box-shadow:inset 0.25rem 0 0 var(--ad-blue-700); }
.crm .cnkv-heat .cnkv-rowbtn { font-weight:500; display:inline-flex; align-items:center; gap:var(--s-2); }
.crm .cnkv-heat .cnkv-rowbtn::after { content:"›"; color:var(--text-3); font-size:var(--fs-body); }
.crm .cnkv-heat .cnkv-rowbtn:hover { text-decoration:none; }
.crm .cnkv-heat .cnkv-active td:not(.cnkv-hz) { background:var(--tint-blue); }
.crm .cnkv-heat .cnkv-active td:first-child { border-radius:var(--r-sm) 0 0 var(--r-sm); }
.crm .cnkv-heat .cnkv-active .cnkv-rowbtn { color:var(--ad-blue-700); font-weight:700; }
.crm .cnkv-heat .cnkv-dimmed td { opacity:.72; }
.crm .cnkv-heat .cnkv-dimmed td.cnkv-hz { opacity:.55; }
.crm .cnkv-legend .cnkv-legend-bar { gap:var(--s-1); width:auto; height:auto; background:none; box-shadow:none; overflow:visible; border-radius:0; }
.crm .cnkv-legend .cnkv-legend-bar .cnkv-dot { flex:none; width:1.4667rem; min-width:1.4667rem; height:.8rem; border-radius:.2rem; box-shadow:none; }
.crm .cnkv-personen-head { flex-wrap:wrap; justify-content:flex-start; align-items:baseline; gap:var(--s-2) var(--s-3); margin-bottom:var(--s-2); }
.crm .cnkv-personen-head .cnkv-goto { margin-left:auto; }
.crm .cnkv-chip { display:inline-flex; align-items:center; gap:var(--s-1); background:var(--tint-blue); color:var(--ad-blue-700); border-radius:62rem; padding:.125rem .25rem .125rem var(--s-3); font-weight:600; font-size:var(--fs-meta); }
.crm .cnkv-chip-x { display:inline-grid; place-items:center; width:1.125rem; height:1.125rem; border-radius:50%; background:var(--bg-card); padding:0; line-height:1; }
.crm .cnkv-link { background:none; border:0; padding:0; font:inherit; font-size:var(--fs-meta); font-weight:600; color:var(--ad-blue); cursor:pointer; white-space:nowrap; }
.crm .cnkv-link:hover { text-decoration:underline; }
.crm .cnkv-pp { border-collapse:collapse; }
.crm .cnkv-pp thead th { color:var(--text-3); font-weight:600; font-size:var(--fs-meta); padding:var(--s-1) var(--s-3); border-bottom:0; white-space:nowrap; }
.crm .cnkv-pp thead th.cnkv-wk { text-align:right; }
.crm .cnkv-pp tbody td { padding:.7333rem var(--s-3); white-space:nowrap; }
.crm .cnkv-pp td.cnkv-pw { font-weight:500; font-variant-numeric:tabular-nums; }
.crm .cnkv-pdot { display:inline-block; width:.625rem; height:.625rem; border-radius:50%; margin-right:.4375rem; box-shadow:inset 0 0 0 0.0625rem var(--border-strong); }
.crm .cnkv-pw-leer { color:var(--text-3); }
.crm .cnkv-person { display:inline-flex; align-items:center; gap:.5625rem; font-weight:600; }
.crm .cnkv-more { display:flex; justify-content:space-between; align-items:center; margin-top:var(--s-2); }
.crm .cnkv-pivot .cnkv-cardhead { justify-content:flex-start; align-items:baseline; gap:var(--s-3); }
.crm .cnkv-pivots > .card { overflow-x:auto; min-width:0; }
.crm .cnkv-pivots { gap:1.875rem; align-items:stretch; }
@media (max-width: 75rem) {
  .crm .cnkv-pivots { grid-template-columns:minmax(0, 1fr); }
}

/* ===================================================================
   PR1.385 (#606) — Einsatzplan (Personen-Wochenmatrix, Kompass 2_Einsatzplan.png)
   Gesicht: components/crm-capacity.js, Gehirn: einsatzplan-grid-model.js.
   Ein Scroll-Bereich (.crm-ep-page, seit PR1.692 die ganze Seite, beide Richtungen): KW-Kopf und Zeile „nicht verrechnet"
   kleben oben, die Namensspalte links. Chip-Farben kommen global aus style.css (--ea-*),
   hier nur Layout und Zustandstoene. Taeglich genutzt → keine Uebergaenge, keine Bewegung.
   Rot steht nur fuer „frei" (und ⚠ ueber 100 %); Gruen ist Text nur in der Ampelzeile.
   =================================================================== */
.crm .crm-ep-top { padding:0 var(--s-6) 0.875rem; }
.crm .crm-ep-head { display:flex; flex-direction:column; gap:var(--s-2);
  padding:var(--s-3) var(--s-4); background:var(--bg-surface); border:0.0625rem solid var(--border); border-radius:var(--r-lg); }
/* PR1.541 — Filterkopf in einer Zeile (Suche, CC, Weitere Filter, mit Planung); aufgeklappt
   eine zweite Zeile mit Verfuegbarkeit, Level, Sourcing, krank. */
.crm .crm-ep-head-row,
.crm .crm-ep-head-more { display:flex; flex-wrap:wrap; align-items:center; gap:var(--s-2); }
/* PR1.692 — die Filterzeile bricht nicht um (Vorlage E1; haelt bis 1280 px). */
.crm .crm-ep-head-row { flex-wrap:nowrap; }
.crm .crm-ep-head-row > * { flex:none; }
.crm .crm-ep-head-row .crm-ep-search { flex:0 1 14.6667rem; width:14.6667rem; min-width:7rem; }
.crm .crm-ep-switch { white-space:nowrap; }
/* Auswahl „Competence Center · alle 5 ▾" (cc-filter.js im Dropdown-Modus). Das Panel zeigt die
   Ampel-Chips senkrecht; Mehrfachauswahl, ESC schliesst (crm-capacity.js). */
.crm .crm-ep-auswahl-cc { display:flex; }
.crm .crm-ep-head .cc-dropdown > summary { gap:var(--s-2); padding:0.3125rem 0.625rem; background:var(--bg-surface);
  border:0.0625rem solid var(--border-strong); border-radius:var(--r-md); font-size:var(--fs-meta); font-weight:600;
  color:var(--text-1); white-space:nowrap; }
.crm .crm-ep-head .cc-dropdown > summary:hover,
.crm .crm-ep-head .cc-dropdown[open] > summary { border-color:var(--ad-blue); }
.crm .crm-ep-head .cc-dropdown > summary::after { color:var(--text-1); }
.crm .crm-ep-head .cc-dropdown-count { padding:0; background:none; color:var(--text-3); font-size:var(--fs-label); font-weight:500; }
.crm .crm-ep-head .cc-dropdown-panel { z-index:20; max-height:min(24rem, 60vh); background:var(--bg-surface);
  border-color:var(--border); border-radius:var(--r-md); box-shadow:var(--shadow-2); }
.crm .crm-ep-head-more { padding-top:var(--s-2); border-top:0.0625rem solid var(--border); }
.crm .crm-ep-page-actions { display:inline-flex; align-items:center; gap:var(--s-1); }

/* PR1.692 — Seitenkopf geraeumig (Vorlage E1): Titel + Unterzeile auf einer Grundlinie, darunter
   die Zaehl-Pillen; Kundentabelle/Export rechts mittig. Taeglich genutzt -> keine Bewegung. */
.crm .crm-ep-kopf { flex-wrap:nowrap; align-items:center; padding:var(--s-5) 1.375rem 0.875rem; }
.crm .crm-ep-titel { display:flex; flex-direction:column; gap:0.625rem; min-width:0; }
.crm .crm-ep-titelzeile { display:flex; align-items:baseline; gap:0.875rem; min-width:0; }
/* Vorlage E1 misst ~22px; naechste Rolle der Schriftskala (PR1.567, max. 12 Groessen) ist --fs-title. */
.crm .crm-ep-kopf h1 { font-size:var(--fs-title); }
.crm .crm-ep-kopf .sub { margin:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.crm .crm-ep-kopf .crm-ep-page-actions { flex-wrap:nowrap; align-self:center; }
/* PR1.754 — Zeitraum als kompakter Knopf (Vorlage V24, Werte per Pipette aus der Vorlage,
   1440er-Rahmen, rem-Basis 15 px). Titel ueber der Unterzeile, der Knopf rechts daneben auf
   Hoehe der Unterzeile. Taeglich genutzt -> Popover ohne Bewegung.
   Farben als --drp-wk-*-Tokens; Dunkel ummappen (Kontrast >= 4,5:1 auf der dunklen Toenung). */
.crm {
  --drp-wk-ink: var(--ad-blue-700);        /* Knopftext, aktive Schnellwahl  (V24: #0059A2 / #005AA3) */
  --drp-wk-range-ink: var(--ad-blue-800);  /* Tageszahl im Bereich, halbfett (V24: #003F75) */
  --drp-wk-edge: var(--ad-blue);           /* Start-/Endkante, Knopfrand     (V24: #006EC7) */
  --drp-wk-edge-ink: var(--text-inv);
  --drp-wk-range: var(--tint-blue);        /* Bereich (V24: #E6F0FA) */
  --drp-wk-today: var(--ad-orange-700);    /* Heute-Rahmen (V24: #E07842) */
  --drp-wk-outside: color-mix(in srgb, var(--text-3) 45%, var(--bg-surface)); /* V24: #B8C0CC */
}
.crm.dark, html[data-theme="dark"] .crm {
  --drp-wk-ink: var(--ad-blue-300);
  --drp-wk-range-ink: var(--ad-blue-300);
  --drp-wk-edge: var(--ad-blue);
  --drp-wk-today: var(--ad-orange);
}
.crm .crm-ep-titelzeile:has(.drp-wk) { align-items:flex-end; gap:2.2rem; }
.crm .crm-ep-kopf:has(.drp-wk) .crm-ep-page-actions { align-self:flex-start; }
.crm .crm-ep-titelblock { display:flex; flex-direction:column; gap:0.125rem; min-width:0; }
.crm .drp-wk { position:relative; flex:none; }
.crm .drp-wk-btn { display:inline-flex; align-items:center; gap:0.667rem; height:2.2rem; padding:0 0.9rem 0 0.833rem;
  border:0.0625rem solid var(--drp-wk-edge); border-radius:var(--r-sm); background:var(--bg-surface);
  font:inherit; font-size:var(--fs-ui); font-weight:600; color:var(--drp-wk-ink);
  white-space:nowrap; cursor:pointer; }
.crm .drp-wk-btn:hover { background:var(--bg-hover); }
/* Offen: Rand Primaerblau, innen weiss, ~3 px heller Halo (V24 Punkt 1). */
.crm .drp-wk.is-open .drp-wk-btn { background:var(--bg-surface); box-shadow:0 0 0 0.2rem var(--drp-wk-range); }
.crm .drp-wk-btn:focus-visible { outline:0.134rem solid var(--focus); outline-offset:0.125rem; }
.crm .drp-wk-btn .ic { width:0.933rem; height:0.933rem; }
.crm .drp-wk-btn .ic:last-child { width:0.8rem; height:0.8rem; margin-left:-0.2rem; }
.crm .drp-wk-pop { position:absolute; top:calc(100% + 0.4rem); left:0; z-index:60; width:59.875rem; max-width:calc(100vw - 2rem);
  background:var(--bg-surface); border:0.0625rem solid var(--border-strong); border-radius:var(--r-md); box-shadow:var(--shadow-3); }
.crm .drp-wk-pop[hidden] { display:none; }
.crm .drp-wk-body { display:flex; min-width:0; }
.crm .drp-wk-side { flex:0 0 16.667rem; display:flex; flex-direction:column; padding:0.8rem 0.667rem; border-right:0.0625rem solid var(--border); }
.crm .drp-wk-cap { padding:0.267rem 0.667rem 0.4rem; font-size:var(--fs-label); font-weight:600; color:var(--text-3); }
.crm .drp-wk-presets { display:flex; flex-direction:column; margin-bottom:0.6rem; }
.crm .drp-wk-preset { display:flex; align-items:center; justify-content:space-between; gap:0.533rem; height:2.4rem; padding:0 0.667rem;
  border:0; border-radius:var(--r-sm); background:none; font:inherit; font-size:var(--fs-ui); color:var(--text-1); text-align:left; cursor:pointer; }
.crm .drp-wk-preset-sub { font-size:var(--fs-label); color:var(--text-3); white-space:nowrap; font-variant-numeric:tabular-nums; }
.crm .drp-wk-preset:hover { background:var(--bg-hover); }
.crm .drp-wk-preset.is-active { background:var(--drp-wk-range); color:var(--drp-wk-ink); font-weight:600; }
.crm .drp-wk-preset.is-active .drp-wk-preset-sub { color:var(--drp-wk-ink); font-weight:600; }
.crm .drp-wk-preset:focus-visible, .crm .drp-wk-nav:focus-visible, .crm .drp-wk-day:focus-visible, .crm .drp-wk-cancel:focus-visible {
  outline:0.134rem solid var(--focus); outline-offset:0.0625rem; position:relative; z-index:1; }
.crm .drp-wk-howto { margin:0; padding:0.733rem 0.667rem 0.267rem; font-size:var(--fs-ui); color:var(--text-2); }
.crm .drp-wk-cal { flex:1 1 auto; min-width:0; padding:0.8rem 1.2rem 1.333rem; }
.crm .drp-wk-head { display:flex; align-items:center; gap:0.533rem; margin-bottom:0.8rem; }
.crm .drp-wk-headtext { flex:1 1 auto; text-align:center; font-size:var(--fs-label); color:var(--text-3); }
.crm .drp-wk-nav { display:inline-flex; align-items:center; justify-content:center; width:2rem; height:2rem; padding:0;
  border:0.0625rem solid var(--border); border-radius:var(--r-sm); background:var(--bg-surface); color:var(--text-2); cursor:pointer; }
.crm .drp-wk-nav:hover { background:var(--bg-hover); color:var(--text-1); }
.crm .drp-wk-nav .ic { width:1.0667rem; height:1.0667rem; stroke-width:1.2; }
.crm .drp-wk-months { display:flex; gap:1.333rem; justify-content:space-between; margin:0 -0.133rem 0 -0.167rem; }
.crm .drp-wk-month { display:flex; flex-direction:column; gap:0.133rem; }
/* Monatstitel: Fira Sans halbfett (nicht Condensed) — V24 misst „November 2026" ~104 px breit. */
.crm .drp-wk-title { text-align:center; font-size:var(--fs-body); font-weight:600; color:var(--text-1); }
/* Raster: KW-Spalte + 7 Tage; Wochenzeilen 32 px hoch mit ~3 px weissem Spalt (V24). */
.crm .drp-wk-grid { display:grid; grid-template-columns:2.133rem repeat(7, 2.5rem); grid-template-rows:1.867rem; grid-auto-rows:2.133rem; row-gap:0.2rem; align-items:center; }
.crm .drp-wk-wd { position:relative; top:0.267rem; text-align:center; font-size:var(--fs-label); color:var(--text-3); align-self:center; }
.crm .drp-wk-kw { text-align:center; font-size:var(--fs-label); color:var(--text-3); font-variant-numeric:proportional-nums; }
.crm .drp-wk-day { display:flex; align-items:center; justify-content:center; height:100%; padding:0; border:0; border-radius:0;
  background:none; font:inherit; font-size:var(--fs-meta); color:var(--text-1); font-variant-numeric:proportional-nums; cursor:pointer; }
.crm .drp-wk-day.is-outside { color:var(--drp-wk-outside); cursor:default; }
.crm .drp-wk-day:hover:not(.is-outside):not(.is-start):not(.is-end) { background:var(--bg-hover); }
.crm .drp-wk-day.in-range { background:var(--drp-wk-range); color:var(--drp-wk-range-ink); font-weight:400; }
.crm .drp-wk-day.in-range:hover:not(.is-start):not(.is-end) { background:var(--drp-wk-range); box-shadow:inset 0 0 0 0.0625rem var(--drp-wk-edge); }
/* Heute: orange umrandet (~2 px), im Band bleibt der Bandgrund (V24). */
.crm .drp-wk-day.is-today { font-weight:400; box-shadow:inset 0 0 0 0.133rem var(--drp-wk-today); border-radius:var(--r-sm); }
.crm .drp-wk-day.in-range.is-today:hover { box-shadow:inset 0 0 0 0.133rem var(--drp-wk-today); }
/* Start-/Endkante: Primaerblau wie „Uebernehmen", aussen gerundet, zum Band hin eckig. */
.crm .drp-wk-day.is-start, .crm .drp-wk-day.is-end { background:var(--drp-wk-edge); color:var(--drp-wk-edge-ink); font-weight:600; box-shadow:none; }
.crm .drp-wk-day.is-start { border-radius:var(--r-sm) 0 0 var(--r-sm); }
.crm .drp-wk-day.is-end { border-radius:0 var(--r-sm) var(--r-sm) 0; }
.crm .drp-wk-day.is-start.is-end { border-radius:var(--r-sm); }
.crm .drp-wk-foot { display:flex; align-items:center; gap:0.667rem; min-height:3.867rem; padding:0.533rem 1.067rem;
  border-top:0.0625rem solid var(--border); }
.crm .drp-wk-gew { font-size:var(--fs-label); color:var(--text-3); }
.crm .drp-wk-range { font-size:var(--fs-ui); font-weight:700; letter-spacing:-0.04em; color:var(--text-1); font-variant-numeric:tabular-nums; white-space:nowrap; }
.crm .drp-wk-pill { padding:0.3rem 0.667rem; border-radius:62.5rem; background:var(--bg-surface-3); font-size:var(--fs-label); font-weight:600; color:var(--text-2); white-space:nowrap; }
.crm .drp-wk-cancel { padding:0.4rem 0.8rem; border:0; border-radius:var(--r-sm); background:none; font:inherit; font-size:var(--fs-ui); font-weight:600; color:var(--text-2); cursor:pointer; }
.crm .drp-wk-cancel:hover { background:var(--bg-hover); color:var(--text-1); }
.crm .drp-wk-apply { height:2.333rem; min-width:7.333rem; padding:0 0.933rem; font-size:var(--fs-ui); font-weight:600; }
.crm .drp-wk-apply:disabled { opacity:0.5; cursor:not-allowed; }
/* Zaehl-Pillen: Punkt + fette Zahl + Kurztext, jede ein Filter-Knopf (zweiter Klick hebt auf).
   Gedrueckt: blauer Rahmen + Toenung (nie Farbe allein: aria-pressed + title „Filter aufheben"). */
.crm .crm-ep-pillen { display:flex; flex-wrap:wrap; gap:0.375rem; }
.crm .crm-ep-pille { display:inline-flex; align-items:center; gap:0.375rem; padding:0.1875rem 0.6875rem;
  background:var(--bg-surface); border:0.0625rem solid var(--border); border-radius:62.5rem;
  font:inherit; font-size:var(--fs-meta); font-weight:600; color:var(--text-1); white-space:nowrap; cursor:pointer; }
.crm .crm-ep-pille b { font-weight:700; font-variant-numeric:tabular-nums; }
.crm .crm-ep-pille:hover:not(:disabled) { border-color:var(--border-strong); background:var(--bg-hover); }
.crm .crm-ep-pille:focus-visible { outline:0.125rem solid var(--focus); outline-offset:0.125rem; }
.crm .crm-ep-pille.is-on { background:var(--tint-blue); border-color:var(--ad-blue); box-shadow:inset 0 0 0 0.0625rem var(--ad-blue); }
.crm .crm-ep-pille:disabled { cursor:default; color:var(--text-2); }
.crm .crm-ep-pille-punkt { flex:none; width:0.4375rem; height:0.4375rem; border-radius:50%; background:var(--text-3); }
.crm .crm-ep-pille--frei .crm-ep-pille-punkt { background:var(--ad-red-700); }
.crm .crm-ep-pille--ueberplant .crm-ep-pille-punkt { background:var(--ad-orange-900); }
.crm .crm-ep-pille--planung .crm-ep-pille-punkt { background:var(--ad-blue); }
.crm.dark .crm-ep-pille--frei .crm-ep-pille-punkt, html[data-theme="dark"] .crm .crm-ep-pille--frei .crm-ep-pille-punkt { background:var(--ad-red-300); }
.crm.dark .crm-ep-pille--ueberplant .crm-ep-pille-punkt, html[data-theme="dark"] .crm .crm-ep-pille--ueberplant .crm-ep-pille-punkt { background:var(--ad-orange); }
.crm.dark .crm-ep-pille--planung .crm-ep-pille-punkt, html[data-theme="dark"] .crm .crm-ep-pille--planung .crm-ep-pille-punkt { background:var(--ad-blue-300); }
.crm .crm-ep-search,
.crm .crm-ep-select { min-height:2rem; background:var(--bg-surface); border:0.0625rem solid var(--border-strong);
  border-radius:var(--r-md); color:var(--text-1); font:inherit; font-size:var(--fs-ui); padding:var(--s-1) var(--s-3); }
.crm .crm-ep-search { flex:0 1 15rem; min-width:10rem; }
.crm .crm-ep-select { cursor:pointer; }
.crm .crm-ep-chips-group { display:flex; flex-wrap:wrap; gap:var(--s-1); }
/* PR1.414 #648 — Hyperscaler-Logos: Redesign ist hell als Standard, dunkel ueber .crm.dark /
   html[data-theme="dark"] .crm. Grundmasse stehen in style.css (.hs-logo). */
.crm .hs-logo-img--light { display:inline-block; }
.crm .hs-logo-img--dark { display:none; }
.crm.dark .hs-logo-img--light , html[data-theme="dark"] .crm .hs-logo-img--light { display:none; }
.crm.dark .hs-logo-img--dark , html[data-theme="dark"] .crm .hs-logo-img--dark { display:inline-block; }
.crm .hs-logo-name { font-size:var(--fs-ui); color:var(--text-1); }
/* PR1.430 #675 — Logo-Knoepfe der Hyperscaler-Auswahl: Masse in style.css (.ms-pill--logo),
   hier die Redesign-Toene; gewaehlt mit 2-px-Rand wie im Bild „Logo-Groessen". */
.crm .ms-pill--logo { background:var(--bg-surface); border-radius:var(--r-md); }
.crm .ms-pill--logo.is-on { background:var(--tint-blue); border-color:var(--ad-blue); box-shadow:inset 0 0 0 0.0625rem var(--ad-blue); color:var(--ad-blue); }
.crm .fpill .hs-logo-name { font-size:inherit; color:inherit; }
/* PR1.441 #683 — Hyperscaler-Kompetenz (Stufe + Leiste + Belege). Masse in style.css (.hs-comp);
   hier nur die Redesign-Farben, weil --primary/--bg-card2/--border-light im .crm-Scope nicht gelten. */
.crm .hs-comp-row { border-radius:var(--r-md); }
.crm .hs-comp-row.is-strongest { background:var(--tint-blue); }
.crm .hs-comp-name , .crm .hs-comp-level { color:var(--text-1); }
.crm .hs-comp-evidence , .crm .hs-comp-foot , .crm .hs-comp-empty p , .crm .hs-comp-sort-label { color:var(--text-2); }
.crm .hs-comp-row.is-none .hs-comp-name , .crm .hs-comp-row.is-none .hs-comp-level , .crm .hs-comp-none { color:var(--text-3); }
.crm .hs-comp-seg { background:var(--border); }
.crm .hs-comp-seg.is-on { background:var(--ad-blue); }
.crm .hs-comp-conflict { color:var(--warning); }
.crm .hs-comp-sort { background:var(--bg-surface-3); border-color:var(--border); border-radius:var(--r-md); }
.crm .hs-comp-sort-btn { color:var(--text-2); border-radius:var(--r-sm); }
.crm .hs-comp-sort-btn:hover { color:var(--text-1); }
.crm .hs-comp-sort-btn[aria-pressed="true"] { background:var(--bg-surface); color:var(--text-1); border-color:var(--border-strong); }
.crm .hs-comp-sort-btn:focus-visible , .crm .hs-level-opt:focus-visible { outline:0.125rem solid var(--ad-blue); outline-offset:0.125rem; }
/* PR1.521 #801 — Kompetenzen-Karte: Umschalter Cloud | Portfolio + Portfolio-Zeilen. Masse in style.css (.comp-*). */
.crm .comp-tabs { background:var(--bg-surface-3); border-color:var(--border); border-radius:var(--r-md); }
.crm .comp-tab { color:var(--text-2); border-radius:var(--r-sm); }
.crm .comp-tab:hover { color:var(--text-1); }
.crm .comp-tab[aria-pressed="true"] { background:var(--bg-surface); color:var(--text-1); border-color:var(--border-strong); }
.crm .comp-tab:focus-visible , .crm .comp-link:focus-visible { outline:0.125rem solid var(--ad-blue); outline-offset:0.125rem; }
.crm .comp-link { color:var(--ad-blue); }
.crm .comp-pf-dot { background:var(--border); }
.crm .comp-pf-dot--1 { background:color-mix(in srgb, var(--ad-blue) 25%, transparent); }
.crm .comp-pf-dot--2 { background:color-mix(in srgb, var(--ad-blue) 45%, transparent); }
.crm .comp-pf-dot--3 { background:color-mix(in srgb, var(--ad-blue) 70%, transparent); }
.crm .comp-pf-dot--4 { background:var(--ad-blue); }
.crm .comp-state { color:var(--text-2); }
.crm .comp-state.is-error , .crm .comp-pf-row.is-conflict .hs-comp-evidence , .crm .comp-pf-row.is-conflict .hs-comp-level , .crm .hs-comp-hint { color:var(--warning); }
.crm .hs-level-name { color:var(--text-1); }
.crm .hs-level-opt { border-color:var(--border-strong); color:var(--text-2); border-radius:var(--r-sm); }
.crm .hs-level-opt:hover { color:var(--text-1); }
.crm .hs-level-opt[aria-checked="true"] { background:var(--ad-blue); border-color:var(--ad-blue); color:var(--bg-surface); }
html[data-theme="dark"] .crm .hs-level-opt[aria-checked="true"] , .crm.dark .hs-level-opt[aria-checked="true"] { color:var(--text-1); }
.crm .crm-ep-head .cc-chip.active,
.crm .crm-ep-head .sourcing-chip.active,
.crm .crm-ep-head .crm-ep-chip.active { background:var(--tint-blue); border-color:var(--ad-blue); color:var(--text-1); }
.crm .crm-ep-head .cc-chip:not(.active),
.crm .crm-ep-head .sourcing-chip:not(.active),
.crm .crm-ep-head .crm-ep-chip:not(.active) { color:var(--text-2); }
.crm .crm-ep-switch { display:inline-flex; align-items:center; gap:var(--s-2); font-size:var(--fs-ui); color:var(--text-2); cursor:pointer; }
.crm .crm-ep-switch input { width:1rem; height:1rem; margin:0; accent-color:var(--ad-blue); cursor:pointer; }
.crm .crm-ep-head-end { margin-left:auto; display:inline-flex; flex-wrap:nowrap; align-items:center; gap:var(--s-1); }
/* PR1.399 #629 — Filter einklappen. Eingeklappt steht eine Zeile rechts im Seitenkopf (.page-head .actions),
   das Raster bekommt die Hoehe. Kein Uebergang: taeglich genutzt. */
.crm .crm-ep-fold[aria-expanded="true"] { background:var(--tint-blue); border-color:var(--ad-blue); color:var(--text-1); }
.crm .crm-ep-foldbar { flex:1 1 auto; justify-content:flex-end; }
/* Bricht die Zeile unter den Titel um, rueckt sie naeher heran (sonst fehlt die zehnte Zeile bei 720px Hoehe). */
.crm .page-head:has(> .crm-ep-foldbar) { row-gap:var(--s-2); }
.crm .crm-ep-foldbar .crm-ep-head-end { margin-left:0; }

/* Matrix */
/* PR1.399 #629: drei Schriftstufen fuer das Raster — kleinste 12px, Text 13px, Name 14px (html-Wurzel 15px). */
.crm .crm-ep-grid { --ep-fs-klein: var(--fs-ui); --ep-fs-text: var(--fs-body); --ep-fs-name: var(--fs-body); }
.crm .crm-ep-grid { flex:none; min-width:100%; border-collapse:separate; border-spacing:0; font-size:var(--ep-fs-text);
  background:var(--bg-surface); border:0.0625rem solid var(--border); border-radius:var(--r-md); }
/* :where() haelt die Grundregel auf der Spezifitaet einer Klasse — sonst ueberstimmt sie
   Innenabstand der Namensspalte und die Ampelfarben der Zeile „nicht verrechnet". */
.crm .crm-ep-grid :where(th, td) { padding:0; vertical-align:top; text-align:left; font-weight:400;
  text-transform:none; letter-spacing:normal; font-size:inherit; color:var(--text-1);
  border-right:0.0625rem solid var(--border); border-bottom:0.0625rem solid var(--border); }
/* Kopf + Ampelzeile kleben oben und decken die Zellen ab (deckender Grund, z-index ueber
   allen Zellen). Die Kopfzeile hat eine feste Hoehe, die Ampelzeile klebt genau darunter. */
.crm .crm-ep-grid { --ep-kw-h:3rem; }
.crm .crm-ep-grid thead th,
.crm .crm-ep-grid thead td { position:sticky; z-index:4; background:var(--bg-surface-2); background-clip:padding-box; }
.crm .crm-ep-kw-row th { top:0; height:var(--ep-kw-h); max-height:var(--ep-kw-h); vertical-align:middle; }
.crm .crm-ep-nkv-row th,
.crm .crm-ep-nkv-row td { top:var(--ep-kw-h); height:2rem; vertical-align:middle; background:var(--bg-surface-2);
  box-shadow:inset 0 -0.125rem 0 var(--border-strong); }
/* PR1.692 — flach: Wert je Woche, darunter eine 3-px-Farblinie in der Ampelfarbe statt Saeule. */
.crm .crm-ep-nkv-row td { box-shadow:inset 0 -0.1875rem 0 currentColor; }
.crm .crm-ep-grid .crm-ep-nkv-row .crm-ep-name { padding-top:0; padding-bottom:0; font-weight:600; }
/* PR1.570 — klebt buendig an der Kante der Scrollflaeche, nicht erst nach deren Innenabstand
   (sonst laufen beim Querscrollen Balkenreste links neben den Namen durch). */
.crm .crm-ep-name { position:sticky; left:calc(-1 * var(--ep-body-px, 0rem)); z-index:2; width:var(--ep-name-w, 20rem); min-width:var(--ep-name-w, 20rem); max-width:var(--ep-name-w, 20rem); /* PR1.734: Namensspalte verstellbar, Anteil der Fensterbreite */
  padding:var(--s-1) var(--s-3); background:var(--bg-surface); }
.crm .crm-ep-grid thead .crm-ep-name { z-index:5; font-weight:600; vertical-align:middle; background:var(--bg-surface-2); }
/* Kopf-Unterzeile bleibt einzeilig in der festen Kopfhoehe — volle Erklaerung im title der Kopfzelle. */
.crm .crm-ep-name-head .crm-ep-kw-sub { text-align:left; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
/* PR1.403 (#633) — eine Zeile je Person: Foto + Name. CC, Teilzeit und Prozentwerte stehen in
   der Infokarte (person-infocard.js, Stil in style.css); die Spalte ist dafür breiter (20rem). */
.crm .crm-ep-namebox { display:flex; align-items:center; gap:var(--s-2); min-width:0; }
.crm .crm-ep-avatar { position:relative; flex:0 0 2rem; width:2rem; height:2rem; border-radius:50%; overflow:hidden;
  display:inline-flex; align-items:center; justify-content:center; font-size:var(--ep-fs-klein); font-weight:600; color:var(--text-inv); }
.crm .crm-ep-name-txt { min-width:0; font-size:var(--ep-fs-name); font-weight:600; color:var(--text-1);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; border-radius:var(--r-sm); }
.crm .crm-ep-name-btn:focus-visible { outline:0.125rem solid var(--ad-blue); outline-offset:0.125rem; }
/* CC-Ampel an den CC-Chips: Symbol + Name + Quote; die Farbe trägt mit, nie allein. */
.crm .cc-chip--amp { display:inline-flex; align-items:center; gap:var(--s-1); }
.crm .cc-amp-sym { font-weight:600; }
.crm .cc-amp-pct { font-variant-numeric:tabular-nums; font-size:var(--fs-meta); }
/* Hell: dunkle Stufen (Grün/Orange-700 liegen auf Weiß unter 3:1); dunkel: die Grundtöne. */
.crm .cc-chip--amp-ok .cc-amp-sym { color:var(--ad-green-900); }
.crm .cc-chip--amp-mid .cc-amp-sym, .crm .cc-chip--amp-mid .cc-amp-pct { color:var(--ad-orange-900); }
.crm.dark .cc-chip--amp-ok .cc-amp-sym, html[data-theme="dark"] .crm .cc-chip--amp-ok .cc-amp-sym { color:var(--ad-green-700); }
.crm.dark .cc-chip--amp-mid .cc-amp-sym, .crm.dark .cc-chip--amp-mid .cc-amp-pct,
html[data-theme="dark"] .crm .cc-chip--amp-mid .cc-amp-sym, html[data-theme="dark"] .crm .cc-chip--amp-mid .cc-amp-pct { color:var(--ad-orange); }
.crm .cc-chip--amp-high .cc-amp-sym, .crm .cc-chip--amp-high .cc-amp-pct { color:var(--ad-red-700); }
.crm .crm-ep-head .cc-chip--amp-high { border-color:var(--ad-red-700); }
.crm.dark .cc-chip--amp-high .cc-amp-sym, .crm.dark .cc-chip--amp-high .cc-amp-pct,
html[data-theme="dark"] .crm .cc-chip--amp-high .cc-amp-sym, html[data-theme="dark"] .crm .cc-chip--amp-high .cc-amp-pct { color:var(--ad-red-300); }
.crm .nkv-sym { display:inline-block; min-width:1em; margin-right:var(--s-1); }

.crm .crm-ep-kw { min-width:6.5rem; }
.crm .crm-ep-kw-btn { display:flex; flex-direction:column; align-items:center; justify-content:center; width:100%; height:100%;
  padding:var(--s-1); background:transparent; border:0; color:var(--text-1); font:inherit; font-weight:600; cursor:pointer; }
.crm .crm-ep-kw-btn:hover { background:var(--bg-hover); }
.crm .crm-ep-kw-sub { display:block; font-size:var(--ep-fs-klein); font-weight:400; color:var(--text-3); }
.crm .crm-ep-kw.is-current .crm-ep-kw-label { color:var(--ad-blue-700); }  /* BF-98: Blau statt Rot */
.crm .crm-ep-grid thead .crm-ep-kw.is-sorted { background:var(--tint-blue); }
.crm .crm-ep-kw.is-sorted .crm-ep-kw-label { color:var(--ad-blue-700); }

.crm .crm-ep-nkv { padding:var(--s-1); text-align:center; font-weight:600; font-variant-numeric:tabular-nums; white-space:nowrap; }
.crm .crm-ep-grid .crm-ep-nkv-row .crm-ep-name { vertical-align:middle; }
/* PR1.541 — Saeule je Woche in der Ampelfarbe (currentColor), Wert steht darueber. */
.crm .crm-ep-nkv-wert { display:block; font-size:var(--ep-fs-klein); }
.crm .crm-ep-grid .crm-ep-nkv--ok { color:var(--ad-green-900); }
.crm .crm-ep-grid .crm-ep-nkv--mid { color:var(--ad-orange-900); }
.crm .crm-ep-grid .crm-ep-nkv--high { color:var(--ad-red-700); }

/* Zelle: der ganze Inhalt ist ein echter Knopf (auslastungZelleHtml) */
.crm .crm-ep-cell { min-width:6.5rem; max-width:6.5rem; }
.crm .crm-ep-cell .ausl-zelle-wrap { display:block; height:100%; }
.crm .crm-ep-cell .ausl-zelle { display:flex; flex-direction:column; gap:.125rem; width:100%; min-height:2.75rem;
  padding:.1875rem; background:transparent; border:0; color:inherit; font:inherit; text-align:left; cursor:pointer; }
.crm .crm-ep-cell .ausl-zelle:hover { background:var(--bg-hover); }
.crm .crm-ep-cell-chips { display:flex; flex-direction:column; gap:.125rem; min-width:0; }
.crm .crm-ep-cell .ea-chip { display:block; max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  font-size:var(--ep-fs-klein); line-height:1.35; }
.crm .crm-ep-cell-status { align-self:flex-end; margin-top:auto; font-size:var(--ep-fs-klein); font-weight:600; white-space:nowrap; }
.crm .crm-ep-cell--frei { background:var(--tint-red); }
.crm .crm-ep-cell--frei .crm-ep-cell-status,
.crm .crm-ep-cell--ueber .crm-ep-cell-status { color:var(--ad-red-700); }
.crm .crm-ep-cell--teil .crm-ep-cell-status { color:var(--ad-orange-900); }
.crm .crm-ep-kw-btn:focus-visible,
.crm .crm-ep-cell .ausl-zelle:focus-visible { outline:0.125rem solid var(--focus); outline-offset:-0.125rem; }

/* PR1.542 — Personenzeile als durchgehende Einsatzbalken (Kompass 1b).
   Ein Feld ueber alle Wochen (colspan): Wochen-Knoepfe als Flaeche hinten (Aufschluesselung),
   Balken auf Bahnen davor. Farbe gehoert allein der Einsatzart (--ea-chip-bg/-ink aus style.css);
   Zustaende per Muster + Text: frei rot schraffiert, teilweise frei gelb, Planung gestrichelt,
   Abwesenheit schraffiert. Taeglich genutzt -> keine Animation. */
.crm .crm-ep-kw { width:6.5rem; }
.crm .crm-ep-grid .crm-ep-lauf { padding:.25rem 0; border-bottom:0.0625rem solid var(--border); }
.crm .crm-ep-bahnen { display:grid; grid-template-columns:repeat(var(--ep-wochen, 16), minmax(0, 1fr));
  grid-template-rows:repeat(var(--ep-bahnen, 1), 1.5rem); row-gap:.25rem; }
.crm .crm-ep-bahnen > .crm-ep-cell { z-index:0; min-width:0; max-width:none; margin-block:-.25rem; background:none; }
.crm .crm-ep-bahnen > .crm-ep-cell.is-current { background:color-mix(in srgb, var(--tint-blue) 60%, transparent); }
.crm .crm-ep-bahnen > .crm-ep-cell .ausl-zelle { display:block; min-height:0; height:100%; padding:0;
  border-left:0.0625rem solid var(--border); }
.crm .crm-ep-bahnen > .crm-ep-cell .ausl-zelle:hover { background:var(--bg-hover); }
.crm .crm-ep-bar { position:relative; z-index:1; display:flex; align-items:center; gap:.375rem; min-width:0;
  margin:0 .125rem; padding:0 .5rem; border:0; border-radius:.1875rem; font:inherit; font-size:var(--ep-fs-klein);
  line-height:1.2; text-align:left; white-space:nowrap; overflow:hidden; cursor:pointer; }
.crm .crm-ep-bar--einsatz { background:var(--ea-chip-bg); color:var(--ea-chip-ink); }
.crm .crm-ep-bar-name { min-width:0; overflow:hidden; text-overflow:ellipsis; font-weight:700; }
.crm .crm-ep-bar-pct { flex:none; font-weight:500; }
.crm .crm-ep-bar-txt { min-width:0; overflow:hidden; text-overflow:ellipsis; }
.crm button.crm-ep-bar:hover { box-shadow:inset 0 0 0 10rem color-mix(in srgb, var(--text-1) 10%, transparent); }
.crm .crm-ep-bar:focus-visible { z-index:2; outline:0.125rem solid var(--focus); outline-offset:0.0625rem; }
.crm .crm-ep-bar--einsatz.ea-chip--wert-fehlt { box-shadow:inset 0 -0.1875rem 0 var(--ad-red-700); }
/* Planung (moeglicher Einsatz): heller Grund, gestrichelter Rand — noch nicht beauftragt. */
.crm .crm-ep-bar--gestrichelt { background:color-mix(in srgb, var(--ea-chip-bg) 16%, var(--bg-surface));
  color:var(--text-1); border:0.0625rem dashed color-mix(in srgb, var(--ea-chip-bg) 65%, var(--text-1)); }
/* Abwesenheit: schraffiert; Name und Umfang auf vollem Grund, damit der Text lesbar bleibt. */
.crm .crm-ep-bar--schraffiert { background:repeating-linear-gradient(135deg, var(--ea-chip-bg) 0 .375rem,
  color-mix(in srgb, var(--ea-chip-bg) 72%, var(--bg-surface)) .375rem .75rem); }
.crm .crm-ep-bar--schraffiert .crm-ep-bar-name,
.crm .crm-ep-bar--schraffiert .crm-ep-bar-pct { padding:0 .25rem; border-radius:.125rem; background:var(--ea-chip-bg); }
.crm .crm-ep-bar--frei { background:repeating-linear-gradient(135deg, var(--tint-red) 0 .375rem, var(--bg-surface) .375rem .75rem);
  color:var(--ad-red-700); font-weight:600; border:0.0625rem solid color-mix(in srgb, var(--ad-red-700) 35%, transparent); }
.crm .crm-ep-bar--frei .crm-ep-bar-txt { padding:0 .25rem; border-radius:.125rem; background:var(--bg-surface); }
.crm .crm-ep-bar--teil { background:var(--tint-warn); color:var(--ad-orange-900); font-weight:600;
  border:0.0625rem solid color-mix(in srgb, var(--ad-orange-900) 30%, transparent); }
.crm .crm-ep-bar--hinweis { color:var(--text-3); background:none; cursor:default; pointer-events:none; }
/* Ueberplant: eigene rote Zeile mit Klartext, linksbuendig (bleibt im sichtbaren Teil lesbar);
   Klicks gehen durch auf die Wochen dahinter. */
.crm .crm-ep-ueber { position:relative; z-index:1; display:flex; align-items:center; justify-content:flex-start; gap:.375rem;
  min-width:0; margin:0 .125rem; padding:0 .5rem; border-radius:.1875rem; color:var(--waerme-ueber-ink);
  background:repeating-linear-gradient(135deg, var(--waerme-ueber-strich) 0 0.125rem, transparent 0.125rem 0.375rem), var(--waerme-ueber-bg);
  border-left:0.25rem solid var(--waerme-ueber-ink);
  font-size:var(--ep-fs-klein); font-weight:600; white-space:nowrap; overflow:clip; text-overflow:ellipsis; pointer-events:none; }
/* PR1.570 — Klartext bleibt beim Querscrollen rechts neben der klebenden Namensspalte stehen,
   statt darunter zu verschwinden. overflow:clip (nicht hidden) am Zeilenkasten, damit das
   Kleben an der Scrollflaeche greift. Abstand = Namensspalte minus deren Rueckversatz. */
.crm .crm-ep-ueber-in { position:sticky; left:calc(20rem - var(--ep-body-px, 0rem) + .5rem);
  display:inline-flex; align-items:center; gap:.375rem; min-width:0; overflow:hidden; }
/* Referenzwoche rechts neben dem Kurznamen. */
.crm .crm-ep-ref { display:flex; flex-direction:column; align-items:flex-end; flex:none; margin-left:auto;
  font-size:var(--ep-fs-klein); line-height:1.25; font-variant-numeric:tabular-nums; }
.crm .crm-ep-ref-pct { font-weight:700; white-space:nowrap; }
.crm .crm-ep-ref-kw { color:var(--text-3); }
.crm .crm-ep-ref--voll .crm-ep-ref-pct { color:var(--ad-green-900); }
.crm .crm-ep-ref--teil .crm-ep-ref-pct { color:var(--ad-orange-900); }
.crm .crm-ep-ref--frei .crm-ep-ref-pct,
.crm .crm-ep-ref--ueber .crm-ep-ref-pct { color:var(--ad-red-700); }
/* Legende: Muster je Art + Hinweis „nur sichtbare Arten". */
.crm .crm-ep-lg-muster--schraffiert { background-image:repeating-linear-gradient(135deg, transparent 0 .125rem,
  color-mix(in srgb, var(--bg-surface) 55%, transparent) .125rem .25rem); }
.crm .crm-ep-lg-muster--gestrichelt { background:color-mix(in srgb, var(--ea-moeglich) 16%, var(--bg-surface));
  border:0.0625rem dashed color-mix(in srgb, var(--ea-moeglich) 65%, var(--text-1)); }
.crm .crm-ep-legend-hint { flex:1 0 100%; margin:0; font-size:var(--fs-ui); color:var(--text-3); }
.crm.dark .crm-ep-bar--frei, html[data-theme="dark"] .crm .crm-ep-bar--frei { color:var(--ad-red-300); }
.crm.dark .crm-ep-bar--teil, html[data-theme="dark"] .crm .crm-ep-bar--teil { color:var(--ad-orange); }
.crm.dark .crm-ep-ref--frei .crm-ep-ref-pct, html[data-theme="dark"] .crm .crm-ep-ref--frei .crm-ep-ref-pct,
.crm.dark .crm-ep-ref--ueber .crm-ep-ref-pct, html[data-theme="dark"] .crm .crm-ep-ref--ueber .crm-ep-ref-pct { color:var(--ad-red-300); }
.crm.dark .crm-ep-ref--teil .crm-ep-ref-pct, html[data-theme="dark"] .crm .crm-ep-ref--teil .crm-ep-ref-pct { color:var(--ad-orange); }
.crm.dark .crm-ep-ref--voll .crm-ep-ref-pct, html[data-theme="dark"] .crm .crm-ep-ref--voll .crm-ep-ref-pct { color:var(--ad-green); }

.crm .crm-ep-sep th { position:sticky; left:calc(-1 * var(--ep-body-px, 0rem)); padding:var(--s-1) var(--s-3); background:var(--bg-surface-2);
  color:var(--text-2); font-size:var(--ep-fs-klein); font-weight:600; }

/* PR1.524 — Einsatzplan nach Competence Center: Gruppenzeilen (die Reiterleiste entfiel mit PR1.692).
   Keine eigene Farbe: der Farbcode gehoert allein den Einsatzarten (--ea-*). Oe-Balken neutral grau.
   Taeglich genutzt -> keine Animation (Chevron dreht ohne Uebergang). */
.crm .crm-ep-grp th, .crm .crm-ep-grp td { background:var(--bg-surface-2); vertical-align:middle; }
.crm .crm-ep-grid .crm-ep-grp-name { padding:0; }
.crm .crm-ep-grp-toggle { display:flex; align-items:center; gap:var(--s-2); width:100%; min-height:2.75rem;
  padding:var(--s-1) var(--s-3); border:0; background:none; color:var(--text-1); font:inherit; text-align:left; cursor:pointer; }
.crm .crm-ep-grp-toggle:hover { background:var(--bg-hover); }
.crm .crm-ep-grp-toggle:focus-visible { outline:0.125rem solid var(--focus); outline-offset:-0.125rem; }
.crm .crm-ep-grp-chev { display:inline-flex; flex:0 0 auto; color:var(--text-2); }
.crm .crm-ep-grp-toggle[aria-expanded="true"] .crm-ep-grp-chev { transform:rotate(90deg); }
.crm .crm-ep-grp-text { display:flex; flex-direction:column; min-width:0; }
.crm .crm-ep-grp-title { font-size:var(--ep-fs-name); font-weight:650; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.crm .crm-ep-grp-info { font-size:var(--ep-fs-klein); color:var(--text-2); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
/* PR1.541 — Farbzelle je CC-Woche: Ø-Belegung als Zahl UND Stufe (rot < 25 %, gelb < 50 %,
   hellgruen < 80 %, gruen ab 80 %). Zahl in --text-1 auf Tint: AA in hell und dunkel. */
.crm .crm-ep-grid .crm-ep-grp-avg { padding:var(--s-1); text-align:center; vertical-align:middle;
  font-weight:600; font-variant-numeric:tabular-nums; white-space:nowrap; color:var(--text-1); }
.crm .crm-ep-grp-wert { display:flex; align-items:center; justify-content:center; min-height:2.5rem; border-radius:var(--r-sm); }
.crm .crm-ep-lg-farbe { display:inline-block; width:.75rem; height:.75rem; border-radius:.125rem; }
/* PR1.542 — Stufen kraeftiger und klar unterscheidbar (Abnahme: hell war 50-79 % fast weiss,
   dunkel alles kontrastarm). Gelb = Orange und Gruen in oklch gemischt (kein neuer Hex-Wert).
   Zahl in --text-1: hell >= 7:1, dunkel >= 4.8:1 (gerechnet gegen --bg-surface). */
.crm .crm-ep-stufe--w1 .crm-ep-grp-wert, .crm .crm-ep-lg-farbe.crm-ep-stufe--w1 { background:var(--waerme-1-bg); color:var(--waerme-1-ink); }
.crm .crm-ep-stufe--w2 .crm-ep-grp-wert, .crm .crm-ep-lg-farbe.crm-ep-stufe--w2 { background:var(--waerme-2-bg); color:var(--waerme-2-ink); }
.crm .crm-ep-stufe--w3 .crm-ep-grp-wert, .crm .crm-ep-lg-farbe.crm-ep-stufe--w3 { background:var(--waerme-3-bg); color:var(--waerme-3-ink); }
.crm .crm-ep-stufe--w4 .crm-ep-grp-wert, .crm .crm-ep-lg-farbe.crm-ep-stufe--w4 { background:var(--waerme-4-bg); color:var(--waerme-4-ink); }
.crm .crm-ep-stufe--w5 .crm-ep-grp-wert, .crm .crm-ep-lg-farbe.crm-ep-stufe--w5 { background:var(--waerme-5-bg); color:var(--waerme-5-ink); }
/* PR1.641 — ueberplant (> 100 %): Ocker mit feiner Schraffur und dem Wort, nie gruen. */
.crm .crm-ep-stufe--ueber .crm-ep-grp-wert, .crm .crm-ep-lg-farbe.crm-ep-stufe--ueber { color:var(--waerme-ueber-ink);
  background:repeating-linear-gradient(135deg, var(--waerme-ueber-strich) 0 0.125rem, transparent 0.125rem 0.375rem), var(--waerme-ueber-bg); }
.crm .crm-ep-stufe--ueber .crm-ep-grp-wert { flex-direction:column; line-height:1.15; }
.crm .crm-ep-grp-wort { font-size:var(--fs-meta); font-weight:500; }
.crm .crm-ep-lg-farbe.crm-ep-stufe--w1, .crm .crm-ep-lg-farbe.crm-ep-stufe--w2, .crm .crm-ep-lg-farbe.crm-ep-stufe--w3,
.crm .crm-ep-lg-farbe.crm-ep-stufe--w4, .crm .crm-ep-lg-farbe.crm-ep-stufe--w5, .crm .crm-ep-lg-farbe.crm-ep-stufe--ueber { box-shadow:inset 0 0 0 0.0625rem var(--border-strong); }
.crm .crm-ep-stufe--leer .crm-ep-grp-wert { color:var(--text-3); }
.crm .crm-ep-grp-ueber { color:var(--waerme-ueber-ink); font-weight:600; }
/* Mischleiste der aktuellen Woche unter dem CC-Namen. */
.crm .crm-ep-grp-mix { display:flex; gap:0.0625rem; width:10rem; max-width:100%; height:0.25rem; margin-top:var(--s-1); border-radius:0.125rem; overflow:hidden; }
.crm .crm-ep-grp-mix i { display:block; min-width:0.125rem; }
.crm .crm-ep-mix--voll { background:var(--ad-green-700); }
.crm .crm-ep-mix--teil { background:var(--ad-orange-700); }
.crm .crm-ep-mix--frei, .crm .crm-ep-mix--ueber { background:var(--ad-red-700); }
.crm .crm-ep-legend-head { font-weight:600; color:var(--text-1); }

/* Legende + Zustaende */
.crm .crm-ep-legend { display:flex; flex-wrap:wrap; align-items:center; gap:var(--s-2) var(--s-4); font-size:var(--fs-ui); color:var(--text-2); }
.crm .crm-ep-legend .ea-legend,
.crm .crm-ep-legend-states { display:flex; flex-wrap:wrap; gap:var(--s-2) var(--s-3); margin:0; padding:0; list-style:none; }
.crm .crm-ep-legend-states li { display:inline-flex; align-items:center; gap:var(--s-1); }
.crm .crm-ep-lg { display:inline-block; width:.75rem; height:.75rem; border-radius:.125rem; }
.crm .crm-ep-lg--frei { background:repeating-linear-gradient(135deg, var(--tint-red) 0 .125rem, var(--bg-surface) .125rem .25rem); border:0.0625rem solid var(--ad-red-700); }
.crm .crm-ep-lg--teil { background:var(--tint-warn); }
.crm .crm-ep-lg--wert-fehlt { height:.125rem; background:var(--ad-red-700); }
.crm .crm-ep-lg--ueber { background:repeating-linear-gradient(135deg, var(--waerme-ueber-strich) 0 0.125rem, transparent 0.125rem 0.375rem), var(--waerme-ueber-bg); box-shadow:inset 0 0 0 0.0625rem var(--waerme-ueber-ink); }

.crm .crm-ep-empty { display:flex; flex-direction:column; align-items:flex-start; gap:var(--s-2); }
.crm .crm-ep-empty-hint { margin:0; color:var(--text-2); font-size:var(--fs-ui); }

/* Dunkel: helle Stufen fuer Text auf dunklem Grund (AA) */
.crm.dark .crm-ep-plan, html[data-theme="dark"] .crm .crm-ep-plan,
.crm.dark .crm-ep-kw.is-sorted .crm-ep-kw-label, html[data-theme="dark"] .crm .crm-ep-kw.is-sorted .crm-ep-kw-label,
.crm.dark .crm-ep-kw.is-current .crm-ep-kw-label, html[data-theme="dark"] .crm .crm-ep-kw.is-current .crm-ep-kw-label { color:var(--ad-blue-300); }
.crm.dark .crm-ep-grid .crm-ep-nkv--high, html[data-theme="dark"] .crm .crm-ep-grid .crm-ep-nkv--high,
.crm.dark .crm-ep-cell--frei .crm-ep-cell-status, html[data-theme="dark"] .crm .crm-ep-cell--frei .crm-ep-cell-status,
.crm.dark .crm-ep-cell--ueber .crm-ep-cell-status, html[data-theme="dark"] .crm .crm-ep-cell--ueber .crm-ep-cell-status { color:var(--ad-red-300); }
.crm.dark .crm-ep-grid .crm-ep-nkv--mid, html[data-theme="dark"] .crm .crm-ep-grid .crm-ep-nkv--mid,
.crm.dark .crm-ep-cell--teil .crm-ep-cell-status, html[data-theme="dark"] .crm .crm-ep-cell--teil .crm-ep-cell-status { color:var(--ad-orange); }
.crm.dark .crm-ep-grid .crm-ep-nkv--ok, html[data-theme="dark"] .crm .crm-ep-grid .crm-ep-nkv--ok { color:var(--ad-green); }
/* Aufschluesselung (auslastung-popover.js) haengt sich an die .crm-Wurzel. Die Grundregel in
   style.css liest Legacy-Namen (--surface-2, --primary, --shadow-lg), die im .crm-Scope nicht
   belegt sind und dann aus dem dunklen Legacy-:root kaemen — hier auf Redesign-Tokens. */
.crm .ausl-pop { background:var(--bg-surface); color:var(--text-1); border-color:var(--border-strong);
  border-radius:var(--r-md); box-shadow:var(--shadow-3); }

/* BF-73 (#625) — Kennzeichen „· gestuft" und Sperr-Hinweis am Umfang-Feld; dieselbe
   Zurücknahme wie in style.css, im .crm-Scope (sonst überstimmt die Shell-Kaskade). */
.crm .umfang-gestuft { color: var(--text-2); font-weight: 400; font-size: var(--fs-meta); white-space: nowrap; }
.crm .umfang-gesperrt-hinweis { color: var(--text-2); font-size: var(--fs-meta); }
/* PR1.842 (#1203) — Teilzeit-Hinweis am Umfang-Feld. */
.crm .umfang-bezug { display: block; margin-top: var(--s-1); color: var(--text-2); font-weight: 400; font-size: var(--fs-meta); white-space: nowrap; }
/* Hinweis macht die Umfang-Spalte hoeher: Feldzeile oben ausrichten, damit Von/Bis auf einer Linie bleiben. */
.crm :has(> label > .umfang-bezug) { align-items: flex-start !important; } /* schlaegt das Inline-flex-end der Feldzeile */
/* Inline-Styles der Redesign-Editoren setzen den Rahmen — nur die Strichart wird überstimmt. */
.crm input[readonly][aria-describedby*="-gesperrt-"] { border-style: dashed !important; cursor: not-allowed; }

/* PR1.404 (#634) — Hinweis unter dem Rollen-Auswahlfeld („Rolle bitte aus Liste wählen").
   Gleiche Zurücknahme wie in style.css, im .crm-Scope. Warnung über Gewicht + Zeichen,
   nicht über Orange: --ad-orange-700 hält auf hellem Grund kein AA. */
.crm .role-name-hint { display: block; margin-top: var(--s-1); color: var(--text-2); font-size: var(--fs-meta); }
.crm .role-name-hint--warn { color: var(--text-1); font-weight: 600; }
/* PR1.420 #655 — Spalte „Was fehlt": jede Lücke ein Kästchen (Kompass 3_Projektliste-Was-fehlt).
   Rot = überfällig, Orange = fehlt noch — Farben wie die Health-Schilder (.bdg-health-*), die
   AA in beiden Themes halten. Keine Bewegung: täglich genutzte Liste. */
/* BF-152 (V04, Legende 2) — gelbe Luecke „Projektname fehlt": Stift + Text, halbfett,
   Ocker-Grund wie die „fehlt"-Kaestchen (eine Sprache fuer Luecken). Projektliste und
   Staffing-Tafel. Keine Bewegung: taeglich genutzte Liste. */
.crm .name-gap {
  display: inline-flex; align-items: center; gap: var(--s-1); max-width: 100%;
  padding: 0.0625rem var(--s-2); border-radius: var(--r-xs);
  border: 0.0625rem dashed var(--gelb-rand);
  background: var(--gelb); color: var(--gelb-text);
  font: inherit; font-size: var(--fs-ui); font-weight: 600; line-height: 1.35; white-space: nowrap;
}
.crm .name-gap svg { flex: none; }
/* Schmale Spalten (Staffing-Liste bei 1280): die Marke kürzt ihren Text, statt in die Nachbarn zu laufen. */
.crm .name-gap { min-width: 0; overflow: hidden; }
.crm .name-gap > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.crm button.name-gap { cursor: pointer; }
.crm button.name-gap:hover { border-color: currentColor; }
.crm .project-gap-cell { white-space: nowrap; }
.crm .project-gap-list { display: inline-flex; flex-wrap: nowrap; gap: var(--s-1); align-items: center; }
.crm .project-gap-chip, .crm .project-gap-ok { white-space: nowrap; }
.crm .project-gap-chip {
  display: inline-flex; align-items: center; padding: 0.125rem var(--s-2); border-radius: var(--r-xs);
  border: 0.0625rem solid transparent; font: inherit; font-size: var(--fs-meta); font-weight: 500; line-height: 1.4;
  cursor: pointer; position: relative;
}
.crm .project-gap-chip.is-bad  { background: var(--tint-red);  color: var(--ad-red-700);    border-color: color-mix(in srgb, var(--ad-red-700) 35%, transparent); }
.crm .project-gap-chip.is-warn,
.crm .project-gap-chip.is-more { background: var(--ocker-grund); color: var(--ocker-text); border-color: color-mix(in srgb, var(--ocker-fuell) 35%, transparent); }
.crm.dark .project-gap-chip.is-bad , html[data-theme="dark"] .crm .project-gap-chip.is-bad { color: var(--ad-red-300); }
.crm.dark .project-gap-chip.is-warn, html[data-theme="dark"] .crm .project-gap-chip.is-warn,
.crm.dark .project-gap-chip.is-more, html[data-theme="dark"] .crm .project-gap-chip.is-more { color: var(--ocker-text); }
.crm .project-gap-chip:hover { border-color: currentColor; }
.crm .project-gap-chip:focus-visible { outline: 0.125rem solid var(--focus); outline-offset: 0.125rem; }
/* „+N": der Rest im Tooltip — per Maus UND Tastatur-Fokus (title erscheint nie per Fokus). */
.crm .project-gap-chip.is-more[data-tip]:hover::after,
.crm .project-gap-chip.is-more[data-tip]:focus-visible::after {
  content: attr(data-tip); position: absolute; left: 0; top: calc(100% + var(--s-1)); z-index: 30;
  padding: var(--s-1) var(--s-2); border-radius: var(--r-sm); white-space: nowrap; font-weight: 500;
  background: var(--surface, var(--bg-card)); color: var(--text-1); border: 0.0625rem solid var(--border);
}
.crm .project-gap-ok { display: inline-flex; align-items: center; gap: var(--s-1); font-size: var(--fs-ui); font-weight: 500; color: var(--ad-green-900); }
.crm.dark .project-gap-ok, html[data-theme="dark"] .crm .project-gap-ok { color: var(--ad-green); }

/* ─────────────────────────────────────────────────────────────────────────────
   PR1.406 #636 — Opportunity anlegen in drei Schritten. Die Bausteine stehen in
   style.css (eine Maske, beide Shells); hier nur, was im .crm-Bereich anders ist:
   Schrift der Untertitel, die Gruenstufe der Übernommen-Zeile (Gruen ist im Redesign
   kein Textton — hell -900, dunkel der Grundton) und das neutrale Etikett.
   ───────────────────────────────────────────────────────────────────────────── */
.crm .fw-step-sub { font-family: var(--f-cond); }
.crm .fw-step.has-sub.active .fw-step-mark { background: var(--ad-blue); border-color: var(--ad-blue); }
.crm .opp-customer-takeover { color: var(--ad-green-900); }
.crm.dark .opp-customer-takeover, html[data-theme="dark"] .crm .opp-customer-takeover { color: var(--ad-green); }
.crm .bdg.opp-incomplete-badge { margin-left: var(--s-1); border-style: dashed; border-color: var(--border); background: transparent; color: var(--text-2); }
/* In der Tabelle steht das Etikett VOR dem Namen: die Zelle kuerzt mit „…", ein
   angehaengtes Etikett waere bei langen Namen abgeschnitten (lokal beobachtet 20.10.). */
.crm .bdg.opp-incomplete-badge.is-lead { margin-left: 0; margin-right: var(--s-2); }
.crm .kc-incomplete { margin-top: var(--s-1); }
.crm .draft-offer { border-color: color-mix(in srgb, var(--ad-blue) 30%, transparent); background: color-mix(in srgb, var(--ad-blue) 8%, transparent); }
.crm .draft-offer-icon { color: var(--ad-blue); }

/* PR1.405 #635 — Staffing-Block der Opportunity (components/opp-staffing-block.js), Redesign.
   Nur Tokens, rem und Prozent (ui-craft-Ratchet: keine neuen px, kein px-Raster); schmal per @container.
   Das Aufleuchten nimmt die globale reduced-motion-Regel am .crm-Kopf zurueck. */
.crm .opp-staffing { border: thin solid var(--border); border-radius: var(--r-md); background: var(--bg-surface); box-shadow: var(--shadow-1); container-type: inline-size; min-width: 0; }
.crm .opp-staffing-head { display: flex; align-items: center; flex-wrap: wrap; gap: var(--s-2) var(--s-3); padding: var(--s-3) var(--s-4); border-bottom: thin solid var(--border); }
.crm .opp-staffing-title { margin: 0; font-size: var(--fs-body); font-weight: 600; color: var(--text-1); }
.crm .opp-staffing-meter { display: inline-flex; gap: .2rem; }
.crm .opp-staffing-meter i { width: 1.1rem; height: .375rem; border-radius: var(--r-xs); background: var(--bg-surface-3); }
.crm .opp-staffing-meter i.is-filled { background: var(--ad-green-700); }
.crm .opp-staffing-note { font-size: var(--fs-meta); color: var(--text-3); white-space: nowrap; }
.crm .opp-staffing-spacer { flex: 1; }
.crm .opp-staffing-ico { display: inline-block; margin-right: var(--s-1); }
.crm .opp-staffing-lnk { font-size: inherit; text-underline-offset: .15em; }
.crm .opp-staffing [aria-disabled="true"] { opacity: .55; cursor: not-allowed; }
.crm .opp-staffing-missing { margin: 0; padding: var(--s-2) var(--s-4); font-size: var(--fs-meta); border-bottom: thin solid var(--border); }
.crm .opp-staffing-missing .opp-staffing-lnk { color: var(--text-2); }
.crm .opp-staffing-empty { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); padding: var(--s-4); font-size: var(--fs-body); color: var(--text-3); }
.crm .opp-staffing-role { display: grid; grid-template-columns: minmax(0, 10.5rem) minmax(0, 1fr) auto; gap: var(--s-3); padding: var(--s-3) var(--s-4); align-items: start; scroll-margin-top: 5rem; }
.crm .opp-staffing-role + .opp-staffing-role { border-top: thin solid var(--border); }
.crm .opp-staffing-role-name { font-size: var(--fs-body); font-weight: 500; color: var(--text-1); }
.crm .opp-staffing-role-spec { margin-top: .125rem; font-size: var(--fs-meta); color: var(--text-3); font-variant-numeric: tabular-nums; }
.crm .opp-staffing-role-status { margin-top: .375rem; }
.crm .opp-staffing-pill { display: inline-flex; align-items: center; gap: .375rem; padding: .125rem .55rem; border-radius: 999rem; font-size: var(--fs-label); font-weight: 500; background: var(--bg-surface-3); color: var(--text-2); }
.crm .opp-staffing-pill.is-ok { background: var(--tint-green); color: var(--text-1); }
.crm .opp-staffing-dot { width: .375rem; height: .375rem; border-radius: 50%; background: var(--text-3); }
.crm .opp-staffing-pill.is-ok .opp-staffing-dot { background: var(--ad-green-700); }
.crm .opp-staffing-slot { min-width: 0; }
.crm .opp-staffing-person { display: flex; align-items: center; flex-wrap: wrap; gap: var(--s-1) var(--s-2); min-height: 2.25rem; min-width: 0; }
.crm .opp-staffing-person + .opp-staffing-person { margin-top: var(--s-1); }
.crm .opp-staffing-person-text { flex: 1 1 8rem; min-width: 0; }
.crm .opp-staffing-person-name, .crm .opp-staffing-person-sub { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.crm .opp-staffing-person-name { font-size: var(--fs-body); font-weight: 500; color: var(--text-1); }
.crm .opp-staffing-person-sub { font-size: var(--fs-meta); color: var(--text-3); }
.crm .opp-staffing-person.is-suggestion .opp-staffing-person-name { color: var(--text-2); }
.crm .opp-staffing-tag { margin-left: var(--s-2); padding: 0 .3rem; border: thin dashed var(--border-strong); border-radius: var(--r-xs); font-size: var(--fs-label); font-weight: 500; color: var(--text-3); }
.crm .opp-staffing-avatar { position: relative; overflow: hidden; flex: none; width: 1.75rem; height: 1.75rem; border-radius: 50%; display: grid; place-items: center; background: var(--bg-surface-3); color: color-mix(in srgb, var(--text-3) 60%, var(--bg-surface-3)); }
.crm .opp-staffing-person.is-suggestion .opp-staffing-avatar { background: var(--bg-surface-3); color: var(--text-2); }
.crm .opp-staffing-fit { flex: none; display: inline-flex; align-items: center; gap: var(--s-2); font-size: var(--fs-meta); color: var(--text-2); white-space: nowrap; font-variant-numeric: tabular-nums; }
.crm .opp-staffing-fitbar { width: 3.5rem; height: .3rem; border-radius: var(--r-xs); background: var(--bg-surface-3); overflow: hidden; }
.crm .opp-staffing-fitbar b { display: block; height: 100%; background: var(--ad-blue); }
.crm .opp-staffing-person.is-suggestion .opp-staffing-fitbar b { background: var(--ad-blue-300); }
.crm .opp-staffing-take, .crm .opp-staffing-remove { flex: none; }
.crm .opp-staffing-more { margin-top: var(--s-1); font-size: var(--fs-meta); color: var(--text-3); }
.crm .opp-staffing-more-list { margin-top: var(--s-2); padding: var(--s-2) var(--s-3); border: thin solid var(--border); border-radius: var(--r-sm); background: var(--bg-surface-2); }
.crm .opp-staffing-more-links { display: flex; gap: var(--s-4); margin-top: var(--s-2); }
.crm .opp-staffing-run { display: flex; align-items: center; flex-wrap: wrap; gap: var(--s-1) var(--s-2); min-height: 2.25rem; }
.crm .opp-staffing-run-label { font-size: var(--fs-meta); color: var(--text-2); min-width: 0; }
.crm .opp-staffing-skel { flex: 1 1 4rem; height: .6rem; border-radius: var(--r-xs); background: var(--bg-surface-3); }
.crm .opp-staffing-error { display: flex; align-items: center; flex-wrap: wrap; gap: var(--s-1) var(--s-2); min-height: 2.25rem; font-size: var(--fs-ui); color: var(--ad-red-700); }
.crm .opp-staffing-error .opp-staffing-lnk { color: inherit; }
html[data-theme="dark"] .crm .opp-staffing-error, .crm.dark .opp-staffing-error { color: var(--ad-red-300); }
.crm .opp-staffing-hint { color: var(--text-3); }
.crm .opp-staffing-open { display: flex; align-items: center; min-height: 2.25rem; font-size: var(--fs-ui); color: var(--text-3); }
/* BF-100 (#736) — Veraltet-Band, „auch fuer Rolle X", „Erfahrung nicht bestaetigt", gleiche Anforderungen.
   Orange nur als Markierung (Rahmen, Symbol) — als Textfarbe liegt --ad-orange-700 unter AA. */
.crm .opp-staffing-open .opp-staffing-lnk { margin-left: var(--s-1); }
.crm .opp-staffing-outdated { display: flex; align-items: flex-start; gap: var(--s-2); margin-bottom: var(--s-1); padding: var(--s-1) var(--s-2); border: thin solid var(--ad-orange-700); border-radius: var(--r-xs); background: var(--tint-orange); font-size: var(--fs-meta); color: var(--text-1); }
.crm .opp-staffing-outdated .opp-staffing-ico, .crm .opp-staffing-same .opp-staffing-ico { color: var(--ad-orange-700); }
.crm .opp-staffing-note.is-outdated { color: var(--text-1); font-weight: 500; }
.crm .opp-staffing-tag.is-unverified { border-style: solid; border-color: var(--ad-orange-700); color: var(--text-2); }
.crm .opp-staffing-person-also { font-size: var(--fs-label); color: var(--text-3); }
.crm .opp-staffing-person-flag { margin-top: .125rem; }
.crm .opp-staffing-person-flag .opp-staffing-tag { display: inline-block; margin: .125rem var(--s-1) 0 0; white-space: nowrap; }
.crm .opp-staffing-tag.is-short { border-style: solid; border-color: var(--ad-red-700); color: var(--text-2); }
/* Links im Block: --primary/--ad-blue liegt dunkel unter AA (3,2:1) — dort die helle Stufe. */
html[data-theme="dark"] .crm .opp-staffing-lnk, .crm.dark .opp-staffing-lnk { color: var(--ad-blue-300); }
html[data-theme="dark"] .crm .opp-staffing-missing .opp-staffing-lnk, .crm.dark .opp-staffing-missing .opp-staffing-lnk { color: var(--text-2); }
html[data-theme="dark"] .crm .opp-staffing-error .opp-staffing-lnk, .crm.dark .opp-staffing-error .opp-staffing-lnk { color: inherit; }
.crm .opp-staffing-same { display: flex; align-items: flex-start; gap: var(--s-2); margin: 0; padding: var(--s-2) var(--s-4); font-size: var(--fs-meta); color: var(--text-2); border-bottom: thin solid var(--border); }
.crm .opp-staffing-role.is-flash { animation: opp-staffing-flash-rd .55s var(--ease-out); }
@keyframes opp-staffing-flash-rd { from { background: var(--tint-green); } to { background: transparent; } }

/* ============== DRUCK (BF-81 #660) ==============
   Die Redesign-Shell hatte keine einzige Druckregel: #app-crm ist auf die Fensterhoehe
   geklammert (overflow:hidden), das Dashboard scrollt in #crm-dash-scroll — gedruckt wurde
   nur der sichtbare Ausschnitt, mit Seitenleiste, Kopfleiste, Reitern und Filter-Chips.
   Die gemeinsamen Regeln (Knoepfe aus, Bauplan-Kacheln zurueck, helle Tokens) stehen im
   Druckblock von style.css; hier nur, was die Shell selbst betrifft. */
@media print {
  html[data-ui="new"],
  html[data-ui="new"] body { overflow: visible !important; }
  html[data-ui="new"] #app-crm.crm,
  .crm .app-shell,
  .crm .app-canvas,
  .crm #crm-content,
  .crm #crm-dash-scroll {
    display: block !important;
    height: auto !important;
    min-height: 0 !important;
    overflow: visible !important;
    padding: 0 !important;
    background: var(--bg-surface) !important;
    box-shadow: none !important;
  }
  .crm .sidebar,
  .crm .topbar,
  .crm #crm-dash-category-bar,
  .crm #crm-dash-page-filter,
  .crm .won-nudge-banner {
    display: none !important;
  }
  /* Die Dashboard-Ueberschrift steht im Druckkopf. */
  .crm .page-head { display: none !important; }
  /* Startbild von Einblend-Animationen (opacity 0, scale 0) nie drucken. */
  .crm *,
  .crm *::before,
  .crm *::after {
    animation: none !important;
    transition: none !important;
  }
  .crm .dbp {
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
  .crm .dbp-kachel,
  .crm .card,
  .crm .crm-dw-grid > *,
  .crm .crm-dw-grid-charts > * {
    break-inside: avoid;
  }
  .crm .crm-dw-grid,
  .crm .crm-dw-grid-charts {
    margin-bottom: var(--s-3);
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   PR1.536 — Matching-Cockpit (Redesign-Gesicht, crm-matching-cockpit.js).
   Nur Tokens, rem, keine rohen Farben/px. Hell und Dunkel ueber die Tokens.
   Motion: Rollen-/Zeilenwechsel ohne Animation; Detail 150 ms Einblenden, Vergleichsleiste
   200 ms ease-out, :active scale(.97); alles aus unter prefers-reduced-motion.
   ═══════════════════════════════════════════════════════════════════════════ */
.crm .crm-mc-page { display: flex; flex-direction: column; gap: var(--s-5); padding: var(--s-5) var(--s-6) var(--s-10); min-width: 0; }
.crm .crm-mc-muted { color: var(--text-2); font-weight: 400; }
.crm .crm-mc-num { font-variant-numeric: tabular-nums; color: var(--text-1); }
.crm .crm-mc-warn-text { color: var(--ad-orange-900); font-weight: 600; }
.crm.dark .crm-mc-warn-text, html[data-theme="dark"] .crm .crm-mc-warn-text { color: var(--ad-orange); }
.crm .crm-mc-link { border: 0; background: none; padding: 0; font: inherit; font-weight: 600; color: var(--ad-blue-700); cursor: pointer; }
.crm .crm-mc-link:hover { text-decoration: underline; }
.crm.dark .crm-mc-link, html[data-theme="dark"] .crm .crm-mc-link { color: var(--ad-blue-300); }
.crm .crm-mc-page :focus-visible { outline: 0.125rem solid var(--focus); outline-offset: 0.125rem; }
.crm .crm-mc-press:active:not(:disabled) { transform: scale(.97); }

/* Kopf */
.crm .crm-mc-crumbs ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-1); font-size: var(--fs-body); color: var(--text-2); }
.crm .crm-mc-crumbs li { display: inline-flex; align-items: center; gap: var(--s-1); min-width: 0; }
.crm .crm-mc-crumbs li + li::before { content: "›"; color: var(--text-3); }
.crm .crm-mc-crumb { border: 0; background: none; padding: 0; font: inherit; color: var(--text-2); cursor: pointer; }
.crm .crm-mc-crumb:hover { color: var(--text-1); text-decoration: underline; }
.crm .crm-mc-crumb-title { max-width: 24rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.crm .crm-mc-crumb-now { color: var(--text-1); font-weight: 600; }
.crm .crm-mc-head-row { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--s-3) var(--s-5); margin-top: var(--s-2); }
.crm .crm-mc-head-title { flex: 1 1 18rem; min-width: 0; }
.crm .crm-mc-head h1 { margin: 0; font-family: var(--f-cond); font-size: var(--fs-display); line-height: 1.15; color: var(--text-1); }
.crm .crm-mc-sub { margin-top: var(--s-1); color: var(--text-2); font-size: var(--fs-body); }
.crm .crm-mc-sub-logo { vertical-align: middle; margin-right: var(--s-2); }   /* PR1.689 (#990): Kundenlogo vor dem Kundennamen */
.crm .crm-mc-head-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3); }
.crm .crm-mc-last { color: var(--text-2); font-size: var(--fs-ui); }

/* Karten */
.crm .crm-mc-card { min-width: 0; }
.crm .crm-mc-card-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s-3); padding: var(--s-4) var(--s-5); border-bottom: 0.0625rem solid var(--border); }
.crm .crm-mc-card-head.is-tight { padding: var(--s-3) var(--s-4); }
.crm .crm-mc-card-head h2 { margin: 0; font-family: var(--f-cond); font-size: var(--fs-section); color: var(--text-1); }
.crm .crm-mc-emptycard h2 { margin: 0 0 var(--s-2); font-size: var(--fs-section); }
.crm .crm-mc-emptycard p { margin: 0 0 var(--s-4); color: var(--text-2); }

/* Kennzahlen */
.crm .crm-mc-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); gap: var(--s-3); }
.crm .crm-mc-kpi::before { display: none; }
.crm .crm-mc-kpi-label { font-size: var(--fs-ui); color: var(--text-2); }
.crm .crm-mc-kpi-value { color: var(--text-2); font-size: var(--fs-body); }
.crm .crm-mc-kpi-value b { font-family: var(--f-cond); font-size: var(--fs-display); color: var(--text-1); font-variant-numeric: tabular-nums; }
.crm .crm-mc-kpi-meta { font-size: var(--fs-ui); color: var(--text-2); }
.crm .crm-mc-kpi-meta.is-warn { color: var(--ad-orange-900); font-weight: 600; }
.crm.dark .crm-mc-kpi-meta.is-warn, html[data-theme="dark"] .crm .crm-mc-kpi-meta.is-warn { color: var(--ad-orange); }

/* Uebersicht: Tabelle + Zu erledigen */
.crm .crm-mc-ov { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-4); align-items: start; }
.crm .crm-mc-tbl-wrap { padding: 0 var(--s-3) var(--s-3); }
.crm .crm-mc-tbl { width: 100%; }
.crm .crm-mc-tbl thead th { background: transparent; border: 0; }
.crm .crm-mc-tbl tbody td { vertical-align: middle; }
.crm .crm-mc-tbl tbody tr:hover td { background: transparent; }
.crm .crm-mc-tbl .crm-mc-ghead td { padding-top: var(--s-4); background: var(--bg-surface); }
.crm .crm-mc-gname { display: flex; align-items: center; gap: var(--s-2); flex-wrap: wrap; font-size: var(--fs-body); }
.crm .crm-mc-gline { margin-top: var(--s-1); font-size: var(--fs-ui); }
.crm .crm-mc-tbl td.crm-mc-act { text-align: right; white-space: nowrap; }
.crm .crm-mc-person-cell, .crm .crm-mc-best { display: inline-flex; align-items: center; gap: var(--s-2); flex-wrap: wrap; }
.crm .crm-mc-open-dot { width: 1.5rem; height: 1.5rem; border-radius: 50%; border: 0.0625rem dashed var(--border-strong); flex: none; }
.crm .crm-mc-avs { display: inline-flex; }
.crm .crm-mc-avs .crm-mc-av + .crm-mc-av { margin-left: calc(var(--s-2) * -1); }
.crm .crm-mc-av { display: inline-flex; flex: none; }
.crm .crm-mc-av .emp-avatar { box-shadow: 0 0 0 0.125rem var(--bg-surface); }
.crm .crm-mc-av-empty { width: 2rem; height: 2rem; border-radius: 50%; background: var(--bg-surface-3); flex: none; }
.crm .crm-mc-todo-list { list-style: none; margin: 0; padding: 0; }
.crm .crm-mc-todo { display: grid; grid-template-columns: 1.75rem minmax(0, 1fr); gap: var(--s-3); padding: var(--s-4) var(--s-5); }
.crm .crm-mc-todo + .crm-mc-todo { border-top: 0.0625rem solid var(--border); }
.crm .crm-mc-todo-mark { width: 1.75rem; height: 1.75rem; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: var(--tint-blue); color: var(--ad-blue-700); font-weight: 500; font-size: var(--fs-ui); }
.crm .crm-mc-todo-mark.is-warn { background: var(--tint-warn); color: var(--ad-orange-900); }
.crm.dark .crm-mc-todo-mark, html[data-theme="dark"] .crm .crm-mc-todo-mark { color: var(--ad-blue-300); }
.crm.dark .crm-mc-todo-mark.is-warn, html[data-theme="dark"] .crm .crm-mc-todo-mark.is-warn { color: var(--ad-orange); }
.crm .crm-mc-todo h3 { margin: 0; font-size: var(--fs-body); color: var(--text-1); }
.crm .crm-mc-todo p { margin: var(--s-1) 0 0; color: var(--text-2); font-size: var(--fs-body); }
.crm .crm-mc-plan { list-style: none; margin: var(--s-3) 0 0; padding: 0; border: 0.0625rem solid var(--border); border-radius: var(--r-md); }
.crm .crm-mc-plan li { display: flex; align-items: center; gap: var(--s-2); padding: var(--s-2) var(--s-3); font-size: var(--fs-body); }
.crm .crm-mc-plan li + li { border-top: 0.0625rem solid var(--border); }
.crm .crm-mc-plan li .crm-mc-num { margin-left: auto; white-space: nowrap; }
.crm .crm-mc-btns { display: flex; flex-wrap: wrap; gap: var(--s-2); margin-top: var(--s-3); }
.crm .crm-mc-calm { display: flex; align-items: center; gap: var(--s-2); padding: var(--s-5); color: var(--text-2); }

/* Stufe 2: drei Spalten (ab 80rem), darunter gestapelt */
.crm .crm-mc-stage { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-4); align-items: start; }
.crm .crm-mc-midcol { display: flex; flex-direction: column; gap: var(--s-4); min-width: 0; }
.crm .crm-mc-ri { width: 100%; display: flex; flex-direction: column; gap: var(--s-1); padding: var(--s-2) var(--s-3); border: 0; border-radius: var(--r-md); background: transparent; color: var(--text-1); font: inherit; text-align: left; cursor: pointer; }
.crm .crm-mc-ri:hover { background: var(--bg-hover); }
.crm .crm-mc-ri.is-current { background: var(--tint-blue); }
.crm .crm-mc-ri-top { display: flex; justify-content: space-between; gap: var(--s-2); font-size: var(--fs-body); }
.crm .crm-mc-ri-state { display: flex; align-items: center; gap: var(--s-1); font-size: var(--fs-ui); color: var(--text-2); }
.crm .crm-mc-seg { display: flex; gap: var(--s-1); }
.crm .crm-mc-seg i { width: 1rem; height: 0.25rem; border-radius: var(--r-xs); background: var(--border); }
.crm .crm-mc-seg i.is-on { background: var(--ad-blue); }
.crm .crm-mc-seg i.is-me { outline: 0.0625rem solid var(--ad-blue); outline-offset: 0.0625rem; }
.crm .crm-mc-dot { width: 0.5rem; height: 0.5rem; border-radius: 50%; flex: none; background: var(--text-3); }
.crm .crm-mc-dot.is-ok { background: var(--ad-green-700); }
.crm .crm-mc-dot.is-info { background: var(--ad-blue); }
.crm .crm-mc-dot.is-warn { background: var(--ad-orange-700); }
.crm .crm-mc-dot.is-alert { background: var(--ad-red-700); }

.crm .crm-mc-rolehead { padding: var(--s-4) var(--s-5); border-bottom: 0.0625rem solid var(--border); display: flex; flex-direction: column; gap: var(--s-3); }
.crm .crm-mc-rolehead h2 { margin: 0; font-family: var(--f-cond); font-size: var(--fs-title); color: var(--text-1); }
.crm .crm-mc-rolehead h2 .crm-mc-muted { font-family: var(--f-sans); font-size: var(--fs-body); margin-left: var(--s-2); }
.crm .crm-mc-chips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--s-2); }
.crm .crm-mc-chips li { padding: var(--s-1) var(--s-3); border: 0.0625rem solid var(--border); border-radius: 999rem; font-size: var(--fs-ui); color: var(--text-1); }
.crm .crm-mc-chips li.is-must { border-color: var(--text-1); font-weight: 600; }
.crm .crm-mc-lead { margin: 0; display: flex; gap: var(--s-2); align-items: baseline; font-size: var(--fs-body); color: var(--text-1); }
.crm .crm-mc-lead .bdg { flex: none; }
.crm .crm-mc-notice { display: flex; align-items: center; gap: var(--s-2); flex-wrap: wrap; margin: var(--s-3) var(--s-5) 0; padding: var(--s-2) var(--s-3); border-radius: var(--r-md); background: var(--bg-surface-2); font-size: var(--fs-body); color: var(--text-1); }
.crm .crm-mc-notice.is-warn { background: var(--tint-warn); }
.crm .crm-mc-notice.is-alert { background: var(--tint-red); }
.crm .crm-mc-empty { margin: var(--s-4) var(--s-5); padding: var(--s-6) var(--s-5); border: 0.0625rem dashed var(--border-strong); border-radius: var(--r-lg); text-align: center; color: var(--text-2); }
.crm .crm-mc-empty p { margin: 0 0 var(--s-3); }
.crm .crm-mc-empty p:last-child { margin: 0; }

.crm .crm-mc-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3); padding: var(--s-3) var(--s-5); border-bottom: 0.0625rem solid var(--border); }
.crm .crm-mc-check { display: inline-flex; align-items: center; }
.crm .crm-mc-search { margin-left: auto; display: inline-flex; align-items: center; gap: var(--s-2); padding: var(--s-1) var(--s-3); border: 0.0625rem solid var(--border-strong); border-radius: var(--r-sm); background: var(--bg-surface); color: var(--text-2); }
.crm .crm-mc-search:focus-within { border-color: var(--focus); }
.crm .crm-mc-search input { border: 0; background: transparent; color: var(--text-1); font: inherit; font-size: var(--fs-body); width: 10rem; outline: none; }
.crm .crm-mc-listwrap { container-type: inline-size; min-width: 0; }
/* Festes Raster für Kopf und Zeilen (BF-140, PR1.764 V40): Auswahl · Rang · Foto · Person · Gesamtwert · Zusammensetzung · Freie Zeit · Bewegung */
.crm .crm-mc-listhead, .crm .crm-mc-row { position: relative; display: grid; grid-template-columns: 1.25rem 1.25rem 2.2rem minmax(8.65rem, 1fr) 6.8rem 7.4rem 15.2rem 3.6rem; gap: var(--s-2); align-items: center; padding: var(--s-2) var(--s-4); }
.crm .crm-mc-listhead > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.crm .crm-mc-listhead { font-size: var(--fs-meta); color: var(--text-2); padding-top: var(--s-3); }
.crm .crm-mc-list { list-style: none; margin: 0; padding: 0; }
.crm .crm-mc-lgroup { padding: var(--s-3) var(--s-5) var(--s-1); font-size: var(--fs-ui); color: var(--text-1); }
.crm .crm-mc-row { border-top: 0.0625rem solid var(--border); cursor: pointer; }
.crm .crm-mc-row:hover { background: var(--bg-hover); }
.crm .crm-mc-row.is-sel { background: var(--tint-blue); }
.crm .crm-mc-cb { accent-color: var(--ad-blue); width: 1rem; height: 1rem; margin: 0; }
.crm .crm-mc-rank { color: var(--text-2); font-variant-numeric: tabular-nums; text-align: right; }
.crm .crm-mc-pick { min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 0.125rem; border: 0; background: none; padding: 0; font: inherit; color: var(--text-1); text-align: left; cursor: pointer; }
.crm .crm-mc-pick b { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.crm .crm-mc-pick span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text-2); font-size: var(--fs-ui); }
.crm .crm-mc-fit { display: inline-flex; align-items: center; gap: var(--s-2); min-width: 0; }
.crm .crm-mc-fit b { font-family: var(--f-cond); font-size: var(--fs-title); font-variant-numeric: tabular-nums; min-width: 1.5rem; }
.crm .crm-mc-fitbar { display: inline-flex; gap: 0.125rem; }
.crm .crm-mc-fitbar i { width: 0.8125rem; height: 0.3125rem; border-radius: var(--r-xs); background: linear-gradient(90deg, var(--ad-blue) 0 var(--v, 0%), var(--border) 0); }
.crm .crm-mc-strip { display: flex; flex-direction: column; gap: 0.125rem; min-width: 0; }
.crm .crm-mc-weeks { position: relative; display: flex; align-items: flex-end; gap: 0.125rem; height: 1.5rem; }
.crm .crm-mc-weeks i { flex: 1 1 0; min-width: 0.25rem; height: var(--h, 4%); border-radius: var(--r-xs) var(--r-xs) 0 0; background: var(--ad-blue); }
.crm .crm-mc-weeks i.is-below { background: var(--ad-orange); }
.crm .crm-mc-weeks i.is-unknown { height: 10%; background: var(--border); }
.crm .crm-mc-need { position: absolute; left: 0; right: 0; bottom: var(--n, 0%); border-top: 0.0625rem dashed var(--text-2); pointer-events: none; }
.crm .crm-mc-strip-text { display: flex; justify-content: space-between; gap: var(--s-2); white-space: nowrap; font-size: var(--fs-meta); color: var(--text-2); }
.crm .crm-mc-strip-text.is-warn { color: var(--ad-orange-900); font-weight: 600; }
.crm.dark .crm-mc-strip-text.is-warn, html[data-theme="dark"] .crm .crm-mc-strip-text.is-warn { color: var(--ad-orange); }
.crm .crm-mc-staff { opacity: 0; justify-self: end; }
.crm .crm-mc-row:hover .crm-mc-staff, .crm .crm-mc-row.is-sel .crm-mc-staff, .crm .crm-mc-row:focus-within .crm-mc-staff { opacity: 1; }
.crm .crm-mc-listfoot { display: flex; justify-content: space-between; align-items: center; gap: var(--s-3); padding: var(--s-3) var(--s-5); border-top: 0.0625rem solid var(--border); font-size: var(--fs-body); }

/* Arbeitsschritte (kein Kreisel) */
.crm .crm-mc-steps { margin: var(--s-4) var(--s-5); }
.crm .crm-mc-steps h3 { margin: 0; font-size: var(--fs-body); }
.crm .crm-mc-steps p { margin: var(--s-1) 0 var(--s-3); font-size: var(--fs-body); }
.crm .crm-mc-steps ol, .crm .crm-mc-steps-mini { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--s-2); font-size: var(--fs-body); }
.crm .crm-mc-steps-mini { margin: var(--s-3) 0 0; }
.crm .crm-mc-steps li, .crm .crm-mc-steps-mini li { display: flex; align-items: center; gap: var(--s-2); color: var(--text-1); }
.crm .crm-mc-steps li.is-next, .crm .crm-mc-steps-mini li.is-next { color: var(--text-2); }
.crm .crm-mc-step-dot { width: 1rem; height: 1rem; border-radius: 50%; border: 0.125rem solid var(--border-strong); flex: none; }
.crm .is-done > .crm-mc-step-dot { background: var(--ad-blue); border-color: var(--ad-blue); }
.crm .is-now > .crm-mc-step-dot { border-color: var(--ad-blue); box-shadow: inset 0 0 0 0.1875rem var(--bg-surface), inset 0 0 0 0.5rem var(--ad-blue); }
.crm .crm-mc-skel { margin-top: var(--s-4); padding: 0; border: 0; box-shadow: none; background: transparent; }

/* Rechte Spalte */
.crm .crm-mc-tabs { display: flex; gap: var(--s-4); padding: 0 var(--s-5); border-bottom: 0.0625rem solid var(--border); }
.crm .crm-mc-tab { border: 0; border-bottom: 0.125rem solid transparent; background: none; padding: var(--s-3) var(--s-1); font: inherit; font-weight: 600; color: var(--text-2); cursor: pointer; }
.crm .crm-mc-tab.is-on { color: var(--text-1); border-bottom-color: var(--ad-blue); }
.crm .crm-mc-pane { padding: var(--s-4) var(--s-5); display: flex; flex-direction: column; gap: var(--s-3); }
.crm .crm-mc-pane.is-fresh { animation: crm-mc-fade 150ms var(--ease-out); }
.crm .crm-mc-pane h4 { margin: var(--s-2) 0 0; font-size: var(--fs-body); color: var(--text-1); }
.crm .crm-mc-who { display: flex; align-items: center; gap: var(--s-3); }
.crm .crm-mc-who h3 { margin: 0; font-family: var(--f-cond); font-size: var(--fs-section); }
.crm .crm-mc-who p { margin: 0; font-size: var(--fs-ui); }
.crm .crm-mc-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border: 0.0625rem solid var(--border); border-radius: var(--r-md); }
.crm .crm-mc-facts > div { display: flex; flex-direction: column; gap: 0.125rem; padding: var(--s-3); }
.crm .crm-mc-facts > div + div { border-left: 0.0625rem solid var(--border); }
.crm .crm-mc-facts span, .crm .crm-mc-facts small { font-size: var(--fs-ui); color: var(--text-2); }
.crm .crm-mc-facts b { font-family: var(--f-cond); font-size: var(--fs-title); color: var(--text-1); font-variant-numeric: tabular-nums; }
.crm .crm-mc-bars { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--s-2); }
.crm .crm-mc-bars li { display: grid; grid-template-columns: 6rem minmax(0, 1fr) 2rem; align-items: center; gap: var(--s-3); font-size: var(--fs-body); }
.crm .crm-mc-bars b { text-align: right; font-variant-numeric: tabular-nums; }
.crm .crm-mc-bar { height: 0.375rem; border-radius: 999rem; background: var(--border); overflow: hidden; }
.crm .crm-mc-bar i { display: block; height: 100%; width: var(--v, 0%); background: var(--ad-blue); border-radius: inherit; }
.crm .crm-mc-evidence { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--s-2); font-size: var(--fs-body); }
.crm .crm-mc-evidence li { display: flex; gap: var(--s-2); align-items: flex-start; }
.crm .crm-mc-evidence small { display: block; color: var(--text-2); font-size: var(--fs-meta); }
.crm .crm-mc-ev-mark { width: 1.25rem; height: 1.25rem; border-radius: 50%; flex: none; display: inline-flex; align-items: center; justify-content: center; font-size: var(--fs-meta); font-weight: 500; background: var(--tint-green); color: var(--ad-green-900); }
.crm .is-gap > .crm-mc-ev-mark { background: var(--tint-warn); color: var(--ad-orange-900); }
.crm.dark .crm-mc-ev-mark, html[data-theme="dark"] .crm .crm-mc-ev-mark { color: var(--ad-green); }
.crm.dark .is-gap > .crm-mc-ev-mark, html[data-theme="dark"] .crm .is-gap > .crm-mc-ev-mark { color: var(--ad-orange); }
.crm .crm-mc-pane-foot { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); margin-top: var(--s-2); padding-top: var(--s-3); border-top: 0.0625rem solid var(--border); }
.crm .crm-mc-fs { margin: 0; padding: 0 0 var(--s-3); border: 0; border-bottom: 0.0625rem solid var(--border); display: flex; flex-direction: column; gap: var(--s-2); }
.crm .crm-mc-fs legend, .crm .crm-mc-fs h4 { margin: 0 0 var(--s-2); padding: 0; font-size: var(--fs-body); font-weight: 600; color: var(--text-1); }
.crm .crm-mc-fs p { margin: 0; font-size: var(--fs-ui); }
.crm .crm-mc-radio { display: flex; gap: var(--s-3); align-items: flex-start; padding: var(--s-3); border: 0.0625rem solid var(--border); border-radius: var(--r-md); cursor: pointer; }
.crm .crm-mc-radio + .crm-mc-radio { margin-top: var(--s-2); }
.crm .crm-mc-radio.is-on { border-color: var(--ad-blue); background: var(--tint-blue); }
.crm .crm-mc-radio input { accent-color: var(--ad-blue); margin-top: 0.1875rem; }
.crm .crm-mc-radio span { display: flex; flex-direction: column; gap: 0.125rem; }
.crm .crm-mc-radio small { color: var(--text-2); font-size: var(--fs-ui); }
.crm .crm-mc-reqs { list-style: none; margin: 0; padding: 0; }
.crm .crm-mc-reqs li { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); padding: var(--s-2) 0; }
.crm .crm-mc-reqs li + li { border-top: 0.0625rem solid var(--border); }
.crm .crm-mc-reqs li > span { display: flex; flex-direction: column; min-width: 0; font-size: var(--fs-body); }
.crm .crm-mc-reqs small { color: var(--text-2); font-size: var(--fs-meta); }
.crm .crm-mc-segsm button { padding: var(--s-1) var(--s-3); font-size: var(--fs-ui); }
.crm .crm-mc-pw button.is-must.is-active { background: var(--text-1); color: var(--bg-surface); }
.crm .crm-mc-kv { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); flex-wrap: wrap; font-size: var(--fs-body); }
.crm .crm-mc-fine-toggle { width: 100%; display: flex; align-items: center; gap: var(--s-2); border: 0; background: none; padding: 0; font: inherit; color: var(--text-1); cursor: pointer; text-align: left; }
.crm .crm-mc-fine-toggle .crm-mc-muted { margin-left: auto; font-size: var(--fs-ui); }
.crm .crm-mc-chev { width: 0.5rem; height: 0.5rem; border-right: 0.125rem solid currentColor; border-bottom: 0.125rem solid currentColor; transform: rotate(-45deg); flex: none; }
.crm .crm-mc-fine-toggle[aria-expanded="true"] .crm-mc-chev { transform: rotate(45deg); }
.crm .crm-mc-sliders { list-style: none; margin: var(--s-3) 0; padding: 0; display: flex; flex-direction: column; gap: var(--s-2); }
.crm .crm-mc-sliders li { display: grid; grid-template-columns: 6rem minmax(0, 1fr) 3rem; align-items: center; gap: var(--s-3); font-size: var(--fs-body); }
.crm .crm-mc-sliders input { accent-color: var(--ad-blue); width: 100%; }
.crm .crm-mc-sliders b { text-align: right; font-variant-numeric: tabular-nums; }
.crm .crm-mc-info { padding: var(--s-3) var(--s-4); border-radius: var(--r-md); background: var(--tint-blue); font-size: var(--fs-body); color: var(--text-1); }
.crm .crm-mc-info.is-warn { background: var(--tint-warn); }
.crm .crm-mc-info p { margin: var(--s-1) 0 0; color: var(--text-2); }
.crm .crm-mc-info .btn { margin-top: var(--s-2); }

/* Vergleich: Bereich ueber der Liste + schwebende Auswahl-Leiste */
.crm .crm-mc-compare-body { padding: var(--s-4) var(--s-5); }
.crm .crm-mc-compare:focus { outline: none; }
.crm .crm-mc-cbar { position: sticky; bottom: var(--s-4); z-index: 3; align-self: center; display: inline-flex; align-items: center; gap: var(--s-3); margin: var(--s-4) auto 0; padding: var(--s-2) var(--s-3) var(--s-2) var(--s-4); border-radius: var(--r-lg); background: var(--bg-shell); color: var(--text-inv); box-shadow: var(--shadow-3); font-size: var(--fs-body); }
.crm .crm-mc-cbar.is-enter { animation: crm-mc-rise 200ms var(--ease-out); }
.crm .crm-mc-cbar .crm-mc-av .emp-avatar { box-shadow: 0 0 0 0.125rem var(--bg-shell); }
.crm .crm-mc-cbar-go { background: var(--bg-surface); color: var(--text-1); border-color: var(--bg-surface); }
.crm .crm-mc-cbar-go:disabled { opacity: .55; cursor: not-allowed; }
.crm .crm-mc-cbar-clear { color: var(--text-inv); }
.crm .crm-mc-cbar-clear:hover { background: transparent; color: var(--text-inv); text-decoration: underline; }
.crm .crm-mc-cbar :focus-visible { outline-color: var(--text-inv); }
@keyframes crm-mc-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes crm-mc-rise { from { opacity: 0; transform: translateY(0.5rem); } to { opacity: 1; transform: none; } }

@media (min-width: 80em) {
  .crm .crm-mc-ov { grid-template-columns: minmax(0, 1fr) minmax(20rem, 28rem); }
  /* PR1.695 (#997, Vorlage K2): Rollen als Reiterleiste oben, Kandidaten | rechts als Anteil (Vorgabe 04.11.: Spalten
     wachsen mit der Breite). 828 : 440 px bei 1440 → 1,882 : 1; 24 px Abstand. */
  /* PR1.764 (#1079, Vorlage V40): links Reglerleiste, rechts Liste — 598 : 1020 px → 1 : 1,706; 24 px Abstand. */
  .crm .crm-mc-stage { grid-template-columns: minmax(0, 1fr) minmax(0, 1.706fr); gap: var(--s-6); }
  .crm .crm-mc-wp { position: sticky; top: 0; }
  .crm .crm-mc-mid { padding: 0.4rem 0.6667rem; }
}
@media (max-width: 48em) {
  .crm .crm-mc-page { padding: var(--s-4) var(--s-4) var(--s-8); }
  .crm .crm-mc-search { margin-left: 0; }
}
/* Schmale Karte (PR1.764): unter ca. 735 px wandern Freie Zeit und Bewegung in eine zweite Zeile unter
   Person · Gesamtwert · Zusammensetzung — nichts überlappt, nichts wird abgeschnitten (BF-140). */
@container (max-width: 48.99rem) {
  .crm .crm-mc-listhead, .crm .crm-mc-row { grid-template-columns: 1.25rem 1.25rem 2.2rem minmax(0, 1fr) 6.8rem 7.4rem; row-gap: var(--s-1); }
  .crm .crm-mc-listhead > :nth-child(7), .crm .crm-mc-listhead > :nth-child(8) { display: none; }
  .crm .crm-mc-row .crm-mc-strip { grid-column: 4 / 6; grid-row: 2; }
  .crm .crm-mc-row .crm-mc-mv { grid-column: 6; grid-row: 2; }
}
@media (prefers-reduced-motion: reduce) {
  .crm .crm-mc-pane.is-fresh, .crm .crm-mc-cbar.is-enter { animation: none; }
  .crm .crm-mc-press:active:not(:disabled) { transform: none; }
}

/* ── PR1.695 #997 — Matching-Wunsch (Vorlage K1/K2, Markup-Quelle mc-umbau.js) ─────────────
   Nur Tokens und rem (1 rem = 15 px). Taeglich genutzt → keine Animation; einzige Bewegung
   ist die 3-s-Hervorhebung geaenderter Regler, bei reduzierter Bewegung ohne Uebergang. */
.crm .crm-mc-wish { border: 0.0667rem solid color-mix(in srgb, var(--ad-blue) 22%, var(--bg-surface)); border-radius: 0.8rem; padding: 0.9333rem 1.0667rem;
  background: linear-gradient(180deg, color-mix(in srgb, var(--ad-blue) 5%, var(--bg-surface)), var(--bg-surface)); display: flex; flex-direction: column; gap: 0; margin: 0.2667rem 0 0.9333rem; }
.crm .crm-mc-wish.is-wide { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 1.8667rem; align-items: start; padding: var(--s-5) var(--s-6); margin: 0 0 var(--s-6); }
.crm .crm-mc-wish h3 { display: flex; align-items: center; gap: var(--s-2); margin: 0 0 0.1333rem; font-size: var(--fs-body); font-weight: 600; color: var(--text-1); }
.crm .crm-mc-ki { font-size: var(--fs-label); /* Mindestschrift 12 px (Gate R3 #1079) */ font-weight: 700; line-height: 1.3; color: var(--ad-orange-900); background: var(--tint-orange); border-radius: 62.5rem; padding: 0.0667rem 0.5333rem; }
.crm.dark .crm-mc-ki, html[data-theme="dark"] .crm .crm-mc-ki { color: var(--ad-orange); }
.crm .crm-mc-wish-sub { margin: 0 0 var(--s-2); font-size: calc(12.5rem / 15); /* PR1.567 Ausnahme: Vorlage K1/K2 (mc-umbau.js p.s 12,5 px) */ color: var(--text-2); }
.crm .crm-mc-wish-ta { display: block; width: 100%; box-sizing: border-box; min-height: 5.6rem; resize: none; padding: var(--s-3) 0.9333rem; border: 0.0667rem solid var(--border-strong); border-radius: 0.6rem;
  background: var(--bg-surface); color: var(--text-1); font: inherit; font-size: calc(13.5rem / 15); /* PR1.567 Ausnahme: Vorlage K1/K2 (mc-umbau.js .ta 13,5 px) */ line-height: 1.45; field-sizing: content; max-height: 16rem; }
.crm .crm-mc-wish-ta::placeholder { color: var(--text-3); }
.crm .crm-mc-wish-ta[readonly] { background: var(--bg-surface-2, var(--bg-surface)); }
.crm .crm-mc-wish-vs { margin-top: 0.8rem; border-top: 0.0667rem solid var(--border); padding-top: 0.6667rem; min-width: 0; }
.crm .crm-mc-wish.is-wide .crm-mc-wish-vs { margin-top: 0; border-top: 0; padding-top: 0; }
.crm .crm-mc-wish .crm-mc-wish-vt { margin: 0 0 0.4rem; font-size: calc(12.5rem / 15); /* PR1.567 Ausnahme: Vorlage K1/K2 (mc-umbau.js b.t 12,5 px) */ font-weight: 700; color: var(--text-2); }
.crm .crm-mc-wish-items { list-style: none; margin: 0; padding: 0; }
.crm .crm-mc-wish-it { display: flex; align-items: flex-start; gap: 0.6rem; padding: 0.4667rem 0; font-size: var(--fs-meta); line-height: 1.35; color: var(--text-1); }
.crm .crm-mc-wish-sym { flex: none; width: 1.2rem; height: 1.2rem; border-radius: 0.3333rem; display: grid; place-items: center; font-style: normal; font-size: calc(11rem / 15); /* PR1.567 Ausnahme: Vorlage K1/K2 (mc-umbau.js .it i 11 px) */ font-weight: 700; }
.crm .crm-mc-wish-sym.is-regler { background: var(--tint-blue); color: var(--ad-blue-700); }
.crm .crm-mc-wish-sym.is-regler .ic { transform: rotate(90deg); }
.crm .crm-mc-wish-sym.is-ki { background: var(--tint-orange); color: var(--ad-orange-900); }
.crm .crm-mc-wish-sym.is-frage { background: var(--tint-warn); color: var(--ad-orange-900); }
.crm.dark .crm-mc-wish-sym.is-regler, html[data-theme="dark"] .crm .crm-mc-wish-sym.is-regler { color: var(--ad-blue-300); }
.crm.dark .crm-mc-wish-sym.is-ki, .crm.dark .crm-mc-wish-sym.is-frage, html[data-theme="dark"] .crm .crm-mc-wish-sym.is-ki, html[data-theme="dark"] .crm .crm-mc-wish-sym.is-frage { color: var(--ad-orange); }
.crm .crm-mc-wish-txt { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.crm .crm-mc-wish-txt small { display: block; font-size: var(--fs-label); color: var(--text-2); }
.crm .crm-mc-wish-x { flex: none; margin-left: auto; border: 0; background: none; padding: 0 0.2667rem; font: inherit; font-size: var(--fs-meta); line-height: 1.35; color: var(--text-3); cursor: pointer; border-radius: var(--r-xs); }
.crm .crm-mc-wish-x:hover { color: var(--text-1); background: var(--bg-hover); }
.crm .crm-mc-wish-state { margin: 0; padding: 0.4667rem 0; font-size: var(--fs-meta); color: var(--text-2); }
.crm .crm-mc-wish-state.is-alert { color: var(--ad-red-800, var(--text-1)); }
.crm .crm-mc-wish-ac { display: flex; flex-direction: column; align-items: flex-start; gap: var(--s-2); margin-top: 0.6667rem; }
.crm .crm-mc-wish-ac2 { display: flex; flex-wrap: nowrap; align-items: center; gap: var(--s-2); }
.crm .crm-mc-wish.is-wide .crm-mc-wish-ac { grid-column: 1 / -1; margin-top: 0; flex-direction: row; flex-wrap: wrap; align-items: center; border-top: 0.0667rem solid var(--border); padding-top: 0.9333rem; }
.crm .crm-mc-wish.is-wide .crm-mc-wish-ac2 { display: contents; }
.crm .crm-mc-wish-ac .btn:disabled { opacity: .5; cursor: not-allowed; box-shadow: none; transform: none; }
.crm .crm-mc-wish-note { font-size: var(--fs-label); color: var(--text-2); white-space: nowrap; }
/* Schmale Kriterien-Spalte (1280: 384 px): Knopf und Hinweis bleiben in einer Zeile (Vorlage K2), die Karte gibt innen etwas Rand ab */
.crm .crm-mc-detail { container: mc-detail / inline-size; }
@container mc-detail (max-width: 26rem) {
  .crm .crm-mc-wish:not(.is-wide) { padding-left: 0.7333rem; padding-right: 0.7333rem; }
}
.crm .crm-mc-wtag .ic, .crm .crm-mc-wish-sym .ic { width: 0.7333rem; height: 0.7333rem; }
.crm .crm-mc-wtag { display: inline-flex; align-items: center; gap: 0.2667rem; margin-left: 0.4rem; padding: 0 0.5333rem; border-radius: 62.5rem; background: var(--tint-orange); color: var(--ad-orange-900); font-size: calc(11.5rem / 15); /* PR1.567 Ausnahme: Vorlage K1/K2 (mc-umbau.js .mw-tag 11,5 px) */ font-weight: 600; line-height: 1.2rem; white-space: nowrap; }
.crm.dark .crm-mc-wtag, html[data-theme="dark"] .crm .crm-mc-wtag { color: var(--ad-orange); }
.crm .is-wish-flash { background: var(--tint-orange); box-shadow: 0 0 0 0.1333rem var(--tint-orange); border-radius: var(--r-md); transition: background-color 600ms var(--ease-out), box-shadow 600ms var(--ease-out); }
.crm .crm-mc-radio.is-on.is-wish-flash { background: var(--tint-orange); border-color: var(--ad-orange-700); }

/* Rollen als Reiterleiste ueber volle Breite (K2): Kopf inline, Reiter nebeneinander, bei vielen Rollen waagrecht scrollen */
.crm .crm-mc-roletabs { display: flex; align-items: center; gap: 1.2rem; padding: 0.6667rem 1.2rem; overflow-x: auto; }
.crm .crm-mc-roletabs.is-more { mask-image: linear-gradient(to right, black calc(100% - 3rem), transparent); }
.crm .crm-mc-wish-txt b { font-weight: 600; }
.crm .crm-mc-roletabs-head { flex: none; display: flex; align-items: baseline; gap: 0.6667rem; white-space: nowrap; }
.crm .crm-mc-roletabs-head h2 { margin: 0; font-size: var(--fs-body); font-weight: 600; color: var(--text-1); }
.crm .crm-mc-roletabs ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: nowrap; gap: var(--s-2); }
.crm .crm-mc-roletabs li { flex: none; margin: 0; }
.crm .crm-mc-roletabs .crm-mc-ri { min-width: 13.3333rem; padding: 0.6rem 0.9333rem; border-radius: var(--r-lg); white-space: nowrap; }
.crm .crm-mc-roletabs .crm-mc-ri-top { gap: var(--s-6); }

/* Uebersicht: Rollentabelle ohne Umbruch, Zeilen mit 12 px Innenabstand oben und unten */
.crm .crm-mc-tbl td, .crm .crm-mc-tbl th { white-space: nowrap; padding-top: var(--s-3); padding-bottom: var(--s-3); }
.crm .crm-mc-tbl tbody td, .crm .crm-mc-tbl thead th, .crm .crm-mc-tbl .crm-mc-ghead td { padding-top: var(--s-3); padding-bottom: var(--s-3); }
.crm .crm-mc-tbl-wrap { overflow-x: auto; }
.crm .crm-mc-tbl .crm-mc-person-cell, .crm .crm-mc-tbl .crm-mc-best, .crm .crm-mc-tbl .crm-mc-gname { flex-wrap: nowrap; }
/* PR1.695 Nachzug (#997, Test-Smoke 04.11.): die Tabelle passt immer in ihre Karte, der Knopf rechts wird nie
   abgeschnitten. Spalten bleiben anteilig (auto-Layout); wird es eng, bricht zuerst "Bester Vorschlag" um (Badge
   rutscht unter den Namen), dann die Kriterienzeile, zuletzt ein langer Name. Aktion und Badges selbst brechen nie. */
.crm .crm-mc-tbl td.crm-mc-bestcell, .crm .crm-mc-tbl td.crm-mc-personcell, .crm .crm-mc-tbl .crm-mc-ghead td { white-space: normal; }
.crm .crm-mc-tbl .crm-mc-best, .crm .crm-mc-tbl .crm-mc-gname { flex-wrap: wrap; row-gap: var(--s-1); }
.crm .crm-mc-tbl .bdg, .crm .crm-mc-tbl .btn, .crm .crm-mc-tbl .crm-mc-wtag { white-space: nowrap; }
.crm .crm-mc-tbl .crm-mc-person-cell b { min-width: 0; overflow-wrap: break-word; }
@media (max-width: 48em) {
  .crm .crm-mc-wish.is-wide { grid-template-columns: minmax(0, 1fr); }
  .crm .crm-mc-wish.is-wide .crm-mc-wish-vs { border-top: 0.0667rem solid var(--border); padding-top: 0.6667rem; }
}
@media (prefers-reduced-motion: reduce) {
  .crm .is-wish-flash { transition: none; }
}


/* ── PR1.764 #1079 — Matching-Cockpit mit Reglern (Vorlage V40/V41) ──────────────────────────
   Reglerleiste links („Gewichtung"), je Kategorie Schalter + Regler + Algorithmus-Strich, darunter
   aufklappbare Unterregler; rechts Liste mit Zusammensetzung, Aufschlüsselung und Bewegung.
   Kategoriefarben = Legende der Liste. 1 rem = 15 px. */
.crm .crm-mc-page { --mc-pf: var(--ad-blue); --mc-hs: var(--ad-blue-900); --mc-sk: var(--ad-violet); --mc-ro: var(--ad-blue-300); }
.crm.dark .crm-mc-page, html[data-theme="dark"] .crm .crm-mc-page { --mc-hs: color-mix(in srgb, var(--ad-blue-300) 55%, var(--bg-surface)); --mc-sk: var(--ad-violet-600); }
.crm .is-portfolio { --cat: var(--mc-pf); }
.crm .is-hyperscaler { --cat: var(--mc-hs); }
.crm .is-skills { --cat: var(--mc-sk); }
.crm .is-role { --cat: var(--mc-ro); }

.crm .crm-mc-wp { padding: var(--s-5) var(--s-5) var(--s-4); display: flex; flex-direction: column; gap: var(--s-3); min-width: 0; }
.crm .crm-mc-wp-head { display: flex; align-items: center; flex-wrap: wrap; gap: var(--s-2) var(--s-3); }
.crm .crm-mc-wp-head .crm-mc-link { white-space: nowrap; }
.crm .crm-mc-wp-head h2 { margin: 0; font-size: var(--fs-title); font-weight: 600; color: var(--text-1); outline: none; }
.crm .crm-mc-wp-head .crm-mc-link { margin-left: auto; font-weight: 600; }
.crm .crm-mc-quick { display: flex; align-items: center; gap: var(--s-3); font-size: var(--fs-ui); flex-wrap: wrap; }
.crm .crm-mc-quick .seg { flex-wrap: wrap; }
.crm .crm-mc-quick .seg button { white-space: nowrap; font-size: var(--fs-ui); padding-inline: var(--s-2); }
.crm .crm-mc-quick .seg button:disabled { cursor: default; color: var(--text-2); }
.crm .crm-mc-cats { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.crm .crm-mc-cat { padding: var(--s-4) 0 var(--s-3); border-top: 0.0667rem solid var(--border); }
.crm .crm-mc-cat:first-child { border-top: 0; padding-top: var(--s-2); }
.crm .crm-mc-cat-top { display: flex; align-items: center; gap: var(--s-3); min-width: 0; }
.crm .crm-mc-cat-name { font-weight: 600; font-size: var(--fs-body); color: var(--text-1); }
.crm .crm-mc-cat.is-off .crm-mc-cat-name, .crm .crm-mc-subrow.is-off .crm-mc-sub-name { color: var(--text-3); }
.crm .crm-mc-cat-val { margin-left: auto; display: inline-flex; align-items: baseline; gap: var(--s-3); white-space: nowrap; font-variant-numeric: tabular-nums; }
.crm .crm-mc-cat-val s { color: var(--text-3); font-size: var(--fs-ui); }
.crm .crm-mc-cat-val b { font-weight: 600; color: var(--text-1); min-width: 2.6rem; text-align: right; }
.crm .crm-mc-cat-val.is-off { color: var(--text-2); font-size: var(--fs-ui); }

/* Schalter (role="switch", Leertaste) */
.crm .crm-mc-sw { flex: none; position: relative; width: 2.1333rem; height: 1.2rem; border-radius: 50rem; border: 0; padding: 0; background: var(--border-strong); cursor: pointer; }
.crm .crm-mc-sw i { position: absolute; top: 0.1333rem; left: 0.1333rem; width: 0.9333rem; height: 0.9333rem; border-radius: 50%; background: var(--bg-surface); box-shadow: var(--shadow-1); }
.crm .crm-mc-sw[aria-checked="true"] { background: var(--ad-blue); }
.crm .crm-mc-sw[aria-checked="true"] i { left: auto; right: 0.1333rem; }
.crm .crm-mc-sw:disabled { cursor: not-allowed; opacity: .5; }

/* Regler: Füllung in Kategoriefarbe, weißer Griff, senkrechter Strich an der Algorithmus-Stelle */
.crm .crm-mc-rg { position: relative; margin: var(--s-2) 0 0 2.9333rem; padding-bottom: 0.1rem; }
.crm .crm-mc-rg input[type="range"] { -webkit-appearance: none; appearance: none; display: block; width: 100%; height: 1.2rem; margin: 0; background: transparent; cursor: pointer; }
.crm .crm-mc-rg input[type="range"]::-webkit-slider-runnable-track { height: 0.3333rem; border-radius: 50rem;
  background: linear-gradient(90deg, var(--cat, var(--ad-blue)) 0 calc(var(--v) * 1%), var(--border) 0); }
.crm .crm-mc-rg input[type="range"]::-moz-range-track { height: 0.3333rem; border-radius: 50rem;
  background: linear-gradient(90deg, var(--cat, var(--ad-blue)) 0 calc(var(--v) * 1%), var(--border) 0); }
.crm .crm-mc-rg input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; width: 1.0667rem; height: 1.0667rem; margin-top: -0.3667rem; border-radius: 50%;
  background: var(--bg-surface); border: 0.1333rem solid var(--ad-blue-900); }
.crm .crm-mc-rg input[type="range"]::-moz-range-thumb { width: 0.8rem; height: 0.8rem; border-radius: 50%; background: var(--bg-surface); border: 0.1333rem solid var(--ad-blue-900); }
.crm .crm-mc-rg input[type="range"]:disabled { cursor: default; }
.crm .crm-mc-cat.is-off > .crm-mc-rg input[type="range"]::-webkit-slider-thumb, .crm .crm-mc-subrow.is-off .crm-mc-rg input[type="range"]::-webkit-slider-thumb { opacity: 0; }
.crm .crm-mc-cat.is-off > .crm-mc-rg input[type="range"]::-moz-range-thumb, .crm .crm-mc-subrow.is-off .crm-mc-rg input[type="range"]::-moz-range-thumb { opacity: 0; }
.crm .crm-mc-cat.is-off .crm-mc-rg input[type="range"]::-webkit-slider-runnable-track,
.crm .crm-mc-subrow.is-off .crm-mc-rg input[type="range"]::-webkit-slider-runnable-track { background: var(--border); }
.crm .crm-mc-cat.is-off .crm-mc-rg input[type="range"]::-moz-range-track,
.crm .crm-mc-subrow.is-off .crm-mc-rg input[type="range"]::-moz-range-track { background: var(--border); }
.crm .crm-mc-rg-algo { position: absolute; top: 0.2333rem; left: calc(0.5333rem + (100% - 1.0667rem) * var(--a) / 100); width: 0.0667rem; height: 0.7333rem; background: var(--text-2); pointer-events: none; }
.crm .crm-mc-rg-lbl { position: relative; display: block; width: max-content; left: calc(0.5333rem + (100% - 1.0667rem) * var(--a) / 100); transform: translateX(-50%);
  margin-top: 0.1333rem; font-size: var(--fs-meta); color: var(--text-2); white-space: nowrap; }
.crm .crm-mc-rg input[type="range"]:focus-visible { outline: 0.1333rem solid var(--focus); outline-offset: 0.1333rem; border-radius: var(--r-sm); }

/* Aufklapper „n … feinjustieren" */
.crm .crm-mc-fine { display: flex; align-items: center; flex-wrap: wrap; gap: var(--s-2); margin: var(--s-2) 0 0 2.9333rem; }
.crm .crm-mc-fine .crm-mc-fine-toggle { width: auto; gap: var(--s-1); color: var(--ad-blue); font-weight: 600; font-size: var(--fs-ui); }
.crm.dark .crm-mc-fine .crm-mc-fine-toggle, html[data-theme="dark"] .crm .crm-mc-fine .crm-mc-fine-toggle { color: var(--ad-blue-300); }
.crm .crm-mc-bdg-sm { font-size: var(--fs-meta); }
.crm .crm-mc-chip { display: inline-flex; align-items: center; gap: 0.2rem; padding: 0 var(--s-2); border: 0.0667rem solid var(--ad-blue-900); border-radius: 50rem; font-size: var(--fs-meta); font-weight: 600; color: var(--ad-blue-900); }
.crm.dark .crm-mc-chip, html[data-theme="dark"] .crm .crm-mc-chip { color: var(--ad-blue-300); border-color: var(--ad-blue-300); }
.crm .crm-mc-taskchips { list-style: none; display: flex; flex-wrap: wrap; gap: var(--s-1) var(--s-2); margin: var(--s-2) 0 0 2.9333rem; padding: 0; }
.crm .crm-mc-taskchips li { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding: 0.0667rem var(--s-2); border: 0.0667rem solid var(--border); border-radius: var(--r-sm); font-size: var(--fs-meta); color: var(--text-2); }
.crm .crm-mc-cat-note { margin: var(--s-2) 0 0 2.9333rem; font-size: var(--fs-ui); color: var(--text-1); line-height: 1.45; }
.crm .crm-mc-cat-note .crm-mc-link { font-weight: 600; }
.crm .crm-mc-althint { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2) var(--s-3); margin: var(--s-3) 0 0 2.9333rem; padding: var(--s-3); border-radius: var(--r-md); background: var(--tint-blue); font-size: var(--fs-ui); }
.crm .crm-mc-althint p { margin: 0; flex: 1 1 14rem; color: var(--text-2); }
.crm .crm-mc-althint p b { color: var(--text-1); }
.crm .crm-mc-althint .btn { flex: none; }

/* Unterregler-Box (grau), Aufklappen 180 ms über grid-template-rows + opacity */
.crm .crm-mc-subwrap { display: grid; grid-template-rows: 1fr; margin: var(--s-3) 0 0 2.9333rem; }
.crm .crm-mc-subwrap.is-enter { animation: crm-mc-open 180ms var(--ease-out); }
@keyframes crm-mc-open { from { grid-template-rows: 0fr; opacity: 0; } to { grid-template-rows: 1fr; opacity: 1; } }
.crm .crm-mc-subs { min-height: 0; overflow: hidden; padding: var(--s-3) var(--s-4); border-radius: var(--r-md); background: var(--bg-subtle); }
.crm .crm-mc-subs ul { list-style: none; margin: 0; padding: 0; }
.crm .crm-mc-subrow { padding: var(--s-3) 0; border-bottom: 0.0667rem solid var(--border); }
.crm .crm-mc-subrow .crm-mc-rg { margin-left: 2.9333rem; }
.crm .crm-mc-sub-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--fs-ui); font-weight: 600; color: var(--text-1); }
.crm .crm-mc-pflicht { flex: none; display: inline-flex; align-items: center; gap: 0.2rem; padding: 0 var(--s-2); border: 0.0667rem solid var(--ad-blue); border-radius: 50rem; font-size: var(--fs-meta); font-weight: 600; color: var(--ad-blue); }
.crm.dark .crm-mc-pflicht, html[data-theme="dark"] .crm .crm-mc-pflicht { color: var(--ad-blue-300); border-color: var(--ad-blue-300); }
.crm .crm-mc-subs-lock { display: flex; align-items: center; gap: var(--s-2); margin: 0 0 var(--s-1); font-size: var(--fs-meta); color: var(--text-2); }
.crm .crm-mc-subs-sum { margin: var(--s-3) 0 0; font-size: var(--fs-meta); color: var(--text-2); }

.crm .crm-mc-twolevel { display: flex; gap: var(--s-2); padding: var(--s-3) var(--s-4); border-radius: var(--r-md); background: var(--bg-subtle); font-size: var(--fs-ui); color: var(--text-2); line-height: 1.5; }
.crm .crm-mc-twolevel p { margin: 0; }
.crm .crm-mc-twolevel b { color: var(--text-1); }
.crm .crm-mc-who-box { border: 0.0667rem solid var(--border); border-radius: var(--r-md); }
.crm .crm-mc-who-toggle { width: 100%; display: flex; align-items: center; gap: var(--s-3); padding: var(--s-3) var(--s-4); border: 0; background: none; font: inherit; font-size: var(--fs-ui); color: var(--text-1); cursor: pointer; text-align: left; }
.crm .crm-mc-who-toggle .crm-mc-muted { margin-left: auto; }
.crm #crm-mc-who { padding: 0 var(--s-4) var(--s-4); display: flex; flex-direction: column; gap: var(--s-2); }
.crm #crm-mc-who[hidden] { display: none; }
.crm #crm-mc-who h4 { margin: var(--s-2) 0 0; font-size: var(--fs-ui); }

/* Liste: Gesamtwert, Stapelbalken, Bewegung, Aufschlüsselung */
.crm .crm-mc-legend { list-style: none; display: flex; gap: var(--s-3); margin: 0 0 0 auto; padding: 0; font-size: var(--fs-meta); color: var(--text-2); }
.crm .crm-mc-legend li { display: inline-flex; align-items: center; gap: 0.2667rem; white-space: nowrap; }
.crm .crm-mc-legend i { width: 0.5333rem; height: 0.5333rem; border-radius: 0.1333rem; background: var(--cat); }
.crm .crm-mc-legend + .crm-mc-search { margin-left: 0; }
.crm .crm-mc-tot { display: flex; flex-direction: column; min-width: 0; }
.crm .crm-mc-tot b { font-family: var(--f-cond); font-size: var(--fs-title); font-weight: 600; font-variant-numeric: tabular-nums; color: var(--text-1); }
.crm .crm-mc-tot b small { font-size: var(--fs-ui); font-weight: 600; margin-left: 0.0667rem; }
.crm .crm-mc-tot > small { font-size: var(--fs-meta); color: var(--text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.crm .crm-mc-stack { display: flex; gap: 0.0667rem; height: 0.4667rem; border-radius: 50rem; overflow: hidden; background: var(--border); min-width: 0; }
.crm .crm-mc-stack i { width: var(--w); background: var(--cat); }
.crm .crm-mc-mv { display: flex; justify-content: flex-end; min-width: 0; }
.crm .crm-mc-mvb { display: inline-flex; align-items: center; gap: 0.1333rem; padding: 0 var(--s-2); border-radius: 50rem; font-size: var(--fs-meta); font-weight: 600; white-space: nowrap; }
.crm .crm-mc-mvb.is-same { color: var(--text-2); font-weight: 400; }
.crm .crm-mc-mvb.is-up { background: var(--tint-green); color: var(--ad-green-900); }
.crm .crm-mc-mvb.is-down { background: var(--tint-red); color: var(--ad-red-800); }
.crm .crm-mc-mvb.is-new { background: var(--tint-blue); color: var(--ad-blue-900); }
.crm.dark .crm-mc-mvb.is-up, html[data-theme="dark"] .crm .crm-mc-mvb.is-up { color: var(--ad-green); }
.crm.dark .crm-mc-mvb.is-down, html[data-theme="dark"] .crm .crm-mc-mvb.is-down { color: var(--ad-red-300); }
.crm.dark .crm-mc-mvb.is-new, html[data-theme="dark"] .crm .crm-mc-mvb.is-new { color: var(--ad-blue-300); }
.crm .crm-mc-row.is-below { opacity: .7; }
.crm .crm-mc-xrow { list-style: none; padding: var(--s-1) var(--s-4) var(--s-4) calc(var(--s-4) + 4.7rem + 3 * var(--s-3)); background: var(--tint-blue); }
.crm .crm-mc-bd { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)) minmax(9rem, 0.85fr); gap: var(--s-2); }
.crm .crm-mc-bdc { min-width: 0; padding: var(--s-2) var(--s-3); border-radius: var(--r-md); background: var(--bg-surface); border: 0.0667rem solid var(--border); font-size: var(--fs-meta); }
.crm .crm-mc-bdc-h { display: flex; align-items: center; gap: 0.3333rem; font-size: var(--fs-ui); }
.crm .crm-mc-bdc-h i { width: 0.5333rem; height: 0.5333rem; border-radius: 0.1333rem; background: var(--cat); flex: none; }
.crm .crm-mc-bdc-h .crm-mc-num { margin-left: auto; }
.crm .crm-mc-bdc > small { display: block; color: var(--text-2); margin: 0.0667rem 0 var(--s-2) 0.8667rem; }
.crm .crm-mc-bdc ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.2rem; }
.crm .crm-mc-bdc li { display: grid; grid-template-columns: minmax(0, 1fr) auto 2.2rem; gap: var(--s-2); align-items: baseline; color: var(--text-2); }
.crm .crm-mc-bdc li span { overflow-wrap: break-word; hyphens: auto; }
.crm .crm-mc-bdc li b { color: var(--text-1); font-variant-numeric: tabular-nums; }
.crm .crm-mc-bdc li small { text-align: right; font-variant-numeric: tabular-nums; }
.crm .crm-mc-bdc li.is-off span { text-decoration: line-through; color: var(--text-3); }
.crm .crm-mc-bdc.is-off { opacity: .6; }
.crm .crm-mc-bd-sum { display: flex; flex-direction: column; gap: var(--s-1); padding: var(--s-1) 0 0 var(--s-2); font-size: var(--fs-meta); color: var(--text-2); }
.crm .crm-mc-bd-sum b { font-family: var(--f-cond); font-size: var(--fs-title); color: var(--text-1); }
.crm .crm-mc-bd-sum .btn { width: 100%; justify-content: center; white-space: normal; text-align: center; height: auto; min-height: 2.2rem; }
.crm .crm-mc-hidden { display: flex; align-items: center; flex-wrap: wrap; gap: var(--s-2) var(--s-4); padding: var(--s-3) var(--s-4); border-top: 0.0667rem solid var(--border); font-size: var(--fs-ui); }
.crm .crm-mc-hid { display: inline-flex; align-items: center; gap: var(--s-1); }
.crm .crm-mc-hidden .crm-mc-link { margin-left: auto; font-weight: 600; }
.crm .crm-mc-lead.is-preview { background: var(--tint-orange); border-radius: var(--r-md); padding: var(--s-3) var(--s-4); }

/* Textblock „Was ist sonst wichtig?" und Speichern-Leiste */
.crm .crm-mc-wish.is-role { padding: var(--s-5); border-radius: var(--r-lg); }
.crm .crm-mc-wish.is-role h3 { font-size: var(--fs-title); }
.crm .crm-mc-wish.is-role h3 .crm-mc-muted { font-size: var(--fs-ui); font-weight: 400; }
.crm .crm-mc-wish-cols { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--s-6); margin-top: var(--s-4); }
.crm .crm-mc-wish.is-role .crm-mc-wish-txt { font-weight: 600; color: var(--text-1); }
.crm .crm-mc-wish.is-role .crm-mc-wish-txt small { font-weight: 400; }
.crm .crm-mc-wish-how { display: flex; flex-direction: column; gap: var(--s-3); }
.crm .crm-mc-wish-so { display: flex; gap: var(--s-2); padding: var(--s-3) var(--s-4); border-radius: var(--r-md); background: var(--tint-orange); font-size: var(--fs-ui); color: var(--text-2); line-height: 1.5; }
.crm .crm-mc-wish-so p { margin: 0; }
.crm .crm-mc-wish-so b { color: var(--text-1); }
.crm .crm-mc-wish-st { margin: 0; font-size: var(--fs-ui); color: var(--text-2); }
.crm .crm-mc-wish-st.is-ok { color: var(--ad-green-900); font-weight: 600; }
.crm .crm-mc-wish-how .crm-mc-btns { margin-top: 0; }
.crm .crm-mc-savebar { display: flex; align-items: center; flex-wrap: wrap; gap: var(--s-3); padding: var(--s-4) var(--s-5); }
.crm .crm-mc-savebar .crm-mc-link { font-weight: 600; }
.crm .crm-mc-savebar-note { margin-left: auto; font-size: var(--fs-ui); }

/* PR1.764 Nachzug Gate R1: Dichte nach V40 (Werkzeugleiste einzeilig, nichts abgeschnitten) */
.crm .crm-mc-mid .crm-mc-toolbar { flex-wrap: nowrap; gap: var(--s-3); }
.crm .crm-mc-mid .crm-mc-toolbar .seg button { font-size: var(--fs-ui); padding-inline: var(--s-2); white-space: nowrap; }
.crm .crm-mc-mid .crm-mc-check { white-space: nowrap; font-size: var(--fs-ui); }
.crm .crm-mc-mid .crm-mc-legend { flex: 0 1 auto; min-width: 0; overflow: hidden; gap: var(--s-2); }
.crm .crm-mc-mid .crm-mc-search { flex: 0 1 10rem; min-width: 7rem; }
.crm .crm-mc-mid .crm-mc-search input { width: 100%; min-width: 0; }
.crm .crm-mc-tot > small { overflow: visible; }
.crm .crm-mc-strip.is-row .crm-mc-strip-text span { overflow: visible; white-space: nowrap; }
.crm .crm-mc-xrow { padding-left: calc(var(--s-4) + 2.5rem + var(--s-2)); }
.crm .crm-mc-mid .crm-mc-toolbar .seg { flex: none; }
.crm .crm-mc-mid .crm-mc-legend { gap: var(--s-1) var(--s-2); }
.crm .crm-mc-mid .crm-mc-search { flex: 0 1 8.5rem; min-width: 6rem; }
.crm .crm-mc-strip.is-row .crm-mc-weeks { gap: 0.0667rem; min-width: 0; }
.crm .crm-mc-listhead > :nth-child(8) { overflow: visible; justify-self: end; text-align: right; }
.crm .crm-mc-strip.is-row .crm-mc-weeks i { min-width: 0; }
.crm .crm-mc-mid .crm-mc-search { flex: none; width: 8.9rem; min-width: 0; padding-inline: var(--s-2); gap: var(--s-1); }
.crm .crm-mc-mid .crm-mc-search input { font-size: var(--fs-meta); }
.crm .crm-mc-mid .crm-mc-legend { gap: 0.4rem; }
.crm .crm-mc-mid .crm-mc-legend li { gap: 0.2rem; }
.crm .crm-mc-mid .crm-mc-toolbar .seg button, .crm .crm-mc-mid .crm-mc-check { font-size: var(--fs-meta); }
.crm .crm-mc-mid .crm-mc-toolbar { gap: 0.4rem var(--s-2); column-gap: 0.4rem; }
.crm .crm-mc-strip.is-row .crm-mc-strip-text span { text-overflow: clip; }
.crm .crm-mc-bd { align-items: start; grid-template-columns: repeat(4, minmax(6.5rem, 1fr)) minmax(10.5rem, 1.1fr); }
.crm .crm-mc-bdc-h { font-size: var(--fs-meta); gap: 0.2rem; }
.crm .crm-mc-bdc { padding-inline: 0.4rem; }
.crm .crm-mc-bdc-h b:first-of-type { overflow: visible; text-overflow: clip; }
.crm .crm-mc-bd-sum .btn { font-size: var(--fs-ui); }
.crm .crm-mc-bdc-h b:first-of-type { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.crm .crm-mc-bdc-h .crm-mc-num { flex: none; }
.crm .crm-mc-sub-name { flex: 0 1 auto; min-width: 0; white-space: normal; overflow: visible; }
.crm .crm-mc-subrow .crm-mc-cat-val { gap: var(--s-2); }
.crm .crm-mc-subs { padding-inline: var(--s-3); }
.crm .crm-mc-subs-lock { margin-bottom: var(--s-2); }
.crm .crm-mc-rg input[type="range"] { position: relative; z-index: 1; }
.crm .crm-mc-wish-cols { grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); }
.crm .crm-mc-wish-how .crm-mc-btns { flex-wrap: wrap; }
/* 1280–1400 px: Werkzeugleiste und Schnellwahl dürfen umbrechen statt Texte abzuschneiden */
@media (max-width: 87.5em) {
  .crm .crm-mc-mid .crm-mc-toolbar { flex-wrap: wrap; }
  .crm .crm-mc-mid .crm-mc-legend { overflow: visible; }
  .crm .crm-mc-quick .seg { flex-wrap: nowrap; }
  .crm .crm-mc-quick .seg button { font-size: var(--fs-meta); padding-inline: 0.3333rem; }
  .crm .crm-mc-wp-head .crm-mc-link { font-size: var(--fs-meta); }
  .crm .crm-mc-who-toggle b { white-space: nowrap; }
  .crm .crm-mc-who-toggle .crm-mc-muted { min-width: 0; text-align: right; }
  .crm .crm-mc-who-toggle .ic, .crm .crm-mc-who-toggle svg { flex: none; }
  .crm .crm-mc-who-toggle .crm-mc-muted { font-size: var(--fs-meta); }
}
/* Bewegung (V41 ⑥): FLIP nur transform, 220 ms; neue Zeilen 180 ms ease-out, 8 px; Tastatur ohne Gleiten */
.crm .crm-mc-row.is-flip { transition: transform 220ms var(--ease-drawer); }
.crm .crm-mc-row.is-fade { animation: crm-mc-come 180ms var(--ease-out); }
@keyframes crm-mc-come { from { opacity: 0; transform: translateY(0.5333rem); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .crm .crm-mc-row.is-flip { transition: none; }
  .crm .crm-mc-row.is-fade { animation: crm-mc-fade 120ms linear; }
  .crm .crm-mc-subwrap.is-enter { animation: crm-mc-fade 120ms linear; }
}
/* Bis ca. 840 px Kartenbreite: Kacheln 2×2, Summe rechts daneben — Unterpunkt-Namen bleiben lesbar */
@container (max-width: 56rem) {
  .crm .crm-mc-bd { grid-template-columns: repeat(2, minmax(0, 1fr)) minmax(10.5rem, 0.9fr); }
  .crm .crm-mc-bd-sum { grid-column: 3; grid-row: 1 / span 2; }
}
@container (max-width: 48.99rem) {
  .crm .crm-mc-bd { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .crm .crm-mc-bd-sum { grid-column: 1 / -1; grid-row: auto; }
  .crm .crm-mc-xrow { padding-left: var(--s-4); }
}
/* Wochenstreifen in der Zeile (V40): Balken links, rechts Ø fett + kurze Zeile */
.crm .crm-mc-strip.is-row { flex-direction: row; align-items: center; gap: var(--s-2); }
.crm .crm-mc-strip.is-row .crm-mc-weeks { flex: 0 0 3.4rem; height: 1.3333rem; }
.crm .crm-mc-strip.is-row .crm-mc-strip-text { flex-direction: column; justify-content: center; gap: 0; min-width: 0; }
.crm .crm-mc-strip.is-row .crm-mc-strip-text b { color: var(--text-1); font-size: var(--fs-ui); }
.crm .crm-mc-strip.is-row .crm-mc-strip-text span { overflow: hidden; text-overflow: ellipsis; }
.crm .crm-mc-wish-how .crm-mc-btns .btn { white-space: nowrap; }
.crm .crm-mc-sub-name { flex: 0 1 auto; }

/* PR1.764 Neubau Raster (Coordinator-Gate 05.11.): alle acht Spalten einzeilig ab ca. 510 px Listenbreite,
   Anteile nach V40 (Person 230 · Gesamtwert 98 · Zusammensetzung 155 · Freie Zeit 240 · Bewegung 85 bei 980 px
   Inhaltsbreite) statt fester rem-Spalten. Lange Texte enden mit „…" bzw. brechen nur zwischen Wörtern. */
.crm .crm-mc-listhead, .crm .crm-mc-row {
  grid-template-columns: 1.0667rem 1.0667rem 2.1333rem minmax(0, 2.3fr) minmax(5.6rem, 1fr) minmax(3.5rem, 1.55fr) minmax(0, 2.4fr) minmax(4.6rem, 0.85fr);
  column-gap: 0.5333rem; row-gap: 0; padding-inline: var(--s-3); }
.crm .crm-mc-listhead > :nth-child(7), .crm .crm-mc-listhead > :nth-child(8) { display: block; }
.crm .crm-mc-row .crm-mc-strip, .crm .crm-mc-row .crm-mc-mv { grid-column: auto; grid-row: auto; }
.crm .crm-mc-tot > small { display: flex; flex-wrap: wrap; column-gap: 0.2667rem; white-space: normal; }
.crm .crm-mc-tot > small > span { white-space: nowrap; }
.crm .crm-mc-strip.is-row { min-width: 0; }
.crm .crm-mc-strip.is-row .crm-mc-weeks { flex: 0 1 3.4rem; min-width: 2.2rem; }
.crm .crm-mc-strip.is-row .crm-mc-strip-text { flex: 1 1 auto; }
.crm .crm-mc-strip.is-row .crm-mc-strip-text span { white-space: normal; overflow-wrap: normal; hyphens: manual; overflow: visible; }
.crm .crm-mc-xrow { padding-inline: calc(var(--s-3) + 4.2667rem + 1.6rem) var(--s-3); }
.crm .crm-mc-bd { grid-template-columns: repeat(4, minmax(0, 1fr)) minmax(8.5rem, 0.95fr); }
.crm .crm-mc-bd-sum { grid-column: auto; grid-row: auto; }
/* Unterpunkt-Namen der Aufschlüsselung: einzeilig mit „…" (Name im title), nie mitten im Wort getrennt */
.crm .crm-mc-bdc li span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; overflow-wrap: normal; hyphens: manual; }
@container (max-width: 63.99rem) {
  .crm .crm-mc-bd { grid-template-columns: repeat(2, minmax(0, 1fr)) minmax(8.5rem, 0.9fr); }
  .crm .crm-mc-bd-sum { grid-column: 3; grid-row: 1 / span 2; }
  .crm .crm-mc-xrow { padding-inline: calc(var(--s-3) + 2.1333rem + 1.0667rem) var(--s-3); }
}
@container (max-width: 34rem) {
  .crm .crm-mc-listhead, .crm .crm-mc-row { grid-template-columns: 1.0667rem 1.0667rem 2.1333rem minmax(0, 1fr) 5.6rem; row-gap: var(--s-1); }
  .crm .crm-mc-listhead > :nth-child(6), .crm .crm-mc-listhead > :nth-child(7), .crm .crm-mc-listhead > :nth-child(8) { display: none; }
  .crm .crm-mc-row .crm-mc-stack { grid-column: 4 / 6; grid-row: 2; }
  .crm .crm-mc-row .crm-mc-strip { grid-column: 4; grid-row: 3; }
  .crm .crm-mc-row .crm-mc-mv { grid-column: 5; grid-row: 3; }
  .crm .crm-mc-bd { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .crm .crm-mc-bd-sum { grid-column: 1 / -1; grid-row: auto; }
  .crm .crm-mc-xrow { padding-inline: var(--s-3); }
}
/* Unterregler-Namen einzeilig wie V40 (Name im title), Pflicht-Etikett und Wert bleiben stehen */
.crm .crm-mc-subrow .crm-mc-cat-top .crm-mc-sub-name { flex: 0 1 auto; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.crm .crm-mc-subrow .crm-mc-cat-top .crm-mc-pflicht, .crm .crm-mc-subrow .crm-mc-cat-top .crm-mc-cat-val { flex: none; }
/* Freie Zeit: Wochenbalken schmal, Text daneben höchstens zweizeilig (Ø-Wert + Beschreibung) */
.crm .crm-mc-strip.is-row .crm-mc-weeks { flex: 0 0 2.6667rem; min-width: 2.6667rem; }
@container (min-width: 34.01rem) and (max-width: 47rem) {
  .crm .crm-mc-listhead, .crm .crm-mc-row { grid-template-columns: 1.0667rem 1.0667rem 2.1333rem minmax(0, 1.8fr) minmax(5.6rem, 1fr) minmax(6.9rem, 1.35fr) minmax(0, 2.6fr) minmax(4.6rem, 0.85fr); }
  .crm .crm-mc-listhead > :nth-child(6) { overflow: visible; text-overflow: clip; }
  .crm .crm-mc-listhead > :nth-child(7) { padding-left: 0.5333rem; }
  .crm .crm-mc-pick span { white-space: normal; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; }
}
/* Nachzug Gate R2 (Entscheid 05.11.: ab 1440 px wie V40/V41, darunter dürfen Nebentexte sauber in eine
   zweite Zeile rutschen — nichts abgeschnitten, nichts überlappt, alle acht Spalten bleiben). */
.crm .crm-mc-wp-head .crm-mc-link { font-size: var(--fs-meta); }
.crm .crm-mc-quick { gap: var(--s-1) var(--s-2); }
.crm .crm-mc-quick > .crm-mc-muted { flex: none; font-size: var(--fs-meta); }
.crm .crm-mc-quick .seg { flex-wrap: wrap; }
.crm .crm-mc-quick .seg button { font-size: var(--fs-meta); padding-inline: 0.3333rem; }
.crm .crm-mc-who-toggle { padding-inline: var(--s-3); gap: var(--s-2); }
.crm .crm-mc-who-toggle b { flex: none; }
.crm .crm-mc-who-toggle .crm-mc-muted { font-size: var(--fs-meta); text-align: right; }
.crm .crm-mc-mid .crm-mc-toolbar { padding-inline: var(--s-3); column-gap: 0.3333rem; flex-wrap: wrap; }
.crm .crm-mc-mid .crm-mc-toolbar .seg button { padding-inline: 0.4rem; }
.crm .crm-mc-mid .crm-mc-legend { gap: 0.3333rem; }
.crm .crm-mc-mid .crm-mc-search { width: 10.6rem; margin-left: auto; }
.crm .crm-mc-mid .crm-mc-search input { text-overflow: clip; }
.crm .crm-mc-althint p { flex-basis: 11rem; }
.crm .crm-mc-wish-how .crm-mc-btns .btn { padding-inline: var(--s-3); }
@media (min-width: 90em) {
  .crm .crm-mc-wish.is-role .crm-mc-wish-cols { grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); gap: var(--s-5); }
}
.crm .crm-mc-hidden { gap: var(--s-1) var(--s-3); padding-inline: var(--s-3); }
.crm .crm-mc-hidden > .crm-mc-muted, .crm .crm-mc-hidden .crm-mc-link { white-space: nowrap; }
.crm .crm-mc-wish-how .crm-mc-btns { flex-wrap: wrap; gap: var(--s-2); }
@container (min-width: 64rem) {
  .crm .crm-mc-bd { grid-template-columns: repeat(4, minmax(0, 1fr)) minmax(12.8rem, 1.2fr); gap: 0.4rem; }
  .crm .crm-mc-xrow { padding-inline: calc(var(--s-3) + 2.1333rem + 1.0667rem) var(--s-3); }
  .crm .crm-mc-bd-sum .btn { padding-inline: var(--s-3); }
  .crm .crm-mc-bdc-h { gap: 0.1333rem; }
  .crm .crm-mc-bd-sum { grid-column: auto; grid-row: auto; }
}
@container (min-width: 47.01rem) {
  .crm .crm-mc-tot > small { flex-wrap: nowrap; white-space: nowrap; }
  /* ab ca. 1440 px: Freie Zeit bekommt Platz für einen lesbaren Wochenstreifen und den Text in einer Zeile */
  .crm .crm-mc-listhead, .crm .crm-mc-row { grid-template-columns: 1.0667rem 1.0667rem 2.1333rem minmax(0, 1.9fr) minmax(5.6rem, 1fr) minmax(7.8rem, 1.2fr) minmax(0, 3.1fr) minmax(4.6rem, 0.7fr); }
  .crm .crm-mc-strip.is-row .crm-mc-weeks { flex: 0 0 3.9rem; }
  .crm .crm-mc-strip.is-row { overflow: hidden; }
  .crm .crm-mc-strip.is-row .crm-mc-strip-text { min-width: 0; }
  .crm .crm-mc-listhead > :nth-child(6) { overflow: visible; text-overflow: clip; }
}
/* Reglerknopf im dunklen Modus sichtbar: heller Rand statt Dunkelblau auf dunkler Fläche */
.crm.dark .crm-mc-rg input[type="range"]::-webkit-slider-thumb, html[data-theme="dark"] .crm .crm-mc-rg input[type="range"]::-webkit-slider-thumb { border-color: var(--ad-blue-300); background: var(--bg-surface-2); }
.crm.dark .crm-mc-rg input[type="range"]::-moz-range-thumb, html[data-theme="dark"] .crm .crm-mc-rg input[type="range"]::-moz-range-thumb { border-color: var(--ad-blue-300); background: var(--bg-surface-2); }
/* Sprechblase beim Ziehen eines Unterreglers (V41 ③): gezogene Zeile hervorgehoben, dunkle Box darunter */
.crm .crm-mc-subrow.is-drag { margin-inline: calc(-1 * var(--s-2)); padding-inline: var(--s-2); border-radius: var(--r-md); background: var(--bg-surface); box-shadow: var(--shadow-1); }
.crm .crm-mc-tip { margin: var(--s-2) 0 0 2.9333rem; padding: var(--s-2) var(--s-3); border-radius: var(--r-md); background: var(--bg-shell); color: var(--text-inv); font-size: var(--fs-meta); line-height: 1.45; }
.crm .crm-mc-tip b { color: var(--text-inv); }

.crm .crm-mc-mid .crm-mc-toolbar .seg button { padding: 0.2rem 0.6667rem; }
.crm .crm-mc-mid .crm-mc-toolbar .seg button.is-active { font-weight: 600; color: var(--ad-blue-700); }
.crm.dark .crm-mc-mid .crm-mc-toolbar .seg button.is-active, html[data-theme="dark"] .crm .crm-mc-mid .crm-mc-toolbar .seg button.is-active { color: var(--ad-blue-300); }
.crm .crm-mc-bd-sum .btn { white-space: normal; overflow: visible; }
/* PR1.764 Gate R2 (Coordinator-Maßtabelle 06.11., Prototyp matching-regler.html 1:1, 1 rem = 15 px):
   Schriften auf die Skala gerundet (12 = 0.8rem, 13 = --fs-meta, 14 = --fs-ui, 16 = 1.0667rem). */
.crm .crm-mc-wp-head h2, .crm .crm-mc-wish.is-role h3 { font-size: var(--fs-section); font-weight: 700; }
.crm .crm-mc-wp .bdg.bdg-warn, .crm .crm-mc-fine .bdg.bdg-warn { font-size: var(--fs-label); font-weight: 600; color: var(--ad-orange-900); background: var(--tint-orange); }
.crm.dark .crm-mc-wp .bdg.bdg-warn, html[data-theme="dark"] .crm .crm-mc-wp .bdg.bdg-warn,
.crm.dark .crm-mc-fine .bdg.bdg-warn, html[data-theme="dark"] .crm .crm-mc-fine .bdg.bdg-warn { color: var(--ad-orange); }
.crm .crm-mc-lead.is-preview .bdg { font-size: var(--fs-label); font-weight: 700; color: var(--ad-orange-900); background: var(--bg-surface); border: 0.0667rem solid color-mix(in srgb, var(--ad-orange) 35%, var(--bg-surface)); }
.crm.dark .crm-mc-lead.is-preview .bdg, html[data-theme="dark"] .crm .crm-mc-lead.is-preview .bdg { color: var(--ad-orange); }
.crm .crm-mc-quick .seg { background: var(--bg-surface-3); }
.crm .crm-mc-quick .seg button { padding: 0.2rem 0.6667rem; font-size: var(--fs-meta); }
.crm .crm-mc-quick .seg button.is-active { font-weight: 600; color: var(--ad-blue-700); }
.crm.dark .crm-mc-quick .seg button.is-active, html[data-theme="dark"] .crm .crm-mc-quick .seg button.is-active { color: var(--ad-blue-300); }
.crm .crm-mc-cat-val s { font-size: var(--fs-meta); color: var(--text-3); }
.crm .crm-mc-rg-lbl { font-size: var(--fs-label); color: var(--text-3); }
.crm .crm-mc-fine .crm-mc-fine-toggle { font-size: var(--fs-meta); color: var(--ad-blue-700); }
.crm .crm-mc-pflicht { font-size: var(--fs-label); color: var(--ad-blue-800); border-color: var(--ad-blue-800); }
.crm .crm-mc-cat-note { font-size: var(--fs-meta); color: var(--text-2); }
.crm .crm-mc-taskchips li { border-radius: 62.5rem; background: var(--bg-surface); font-size: var(--fs-label); padding-inline: var(--s-3); }
.crm .crm-mc-mid .crm-mc-search { flex: 1 1 9.5rem; width: auto; max-width: 16rem; min-width: 0; min-height: 2.2667rem; box-sizing: border-box; }
.crm .crm-mc-listhead { font-size: var(--fs-meta); font-weight: 600; color: var(--text-3); }
.crm .crm-mc-row { min-height: 4.4rem; }
.crm .crm-mc-rank { font-size: var(--fs-ui); }
.crm .crm-mc-pick span { font-size: var(--fs-meta); color: var(--text-3); }
.crm .crm-mc-tot > small { font-size: var(--fs-label); }
.crm .crm-mc-bd small, .crm .crm-mc-bd-sum small, .crm .crm-mc-bdc > small, .crm .crm-mc-bdc li small { font-size: var(--fs-label); }
.crm .crm-mc-bdc li span { font-size: var(--fs-label); color: var(--text-2); }
.crm .crm-mc-wish.is-role h3 .crm-mc-muted { font-size: var(--fs-meta); color: var(--text-3); }
.crm .crm-mc-savebar-note { font-size: var(--fs-meta); color: var(--text-3); }
.crm .crm-mc-tip { background: var(--text-1); color: var(--bg-surface); }
.crm .crm-mc-tip b { color: var(--bg-surface); }
.crm.dark .crm-mc-tip, html[data-theme="dark"] .crm .crm-mc-tip { background: var(--bg-shell); color: var(--text-inv); }
.crm.dark .crm-mc-tip b, html[data-theme="dark"] .crm .crm-mc-tip b { color: var(--text-inv); }
/* Fokusring effektiv 2 px (0.1333rem zeichnete 1 px) */
.crm .crm-mc-page :is(.crm-mc-sw, .crm-mc-fine-toggle, .crm-mc-who-toggle, .crm-mc-rg input[type="range"]):focus-visible { outline: 0.14rem solid var(--focus); outline-offset: 0.14rem; }
/* Entscheid „Umbruch erlaubt": Namen und Unterpunkte brechen um statt zu kürzen (nie mitten im Wort) */
.crm .crm-mc-pick b, .crm .crm-mc-pick span { white-space: normal; overflow: visible; text-overflow: clip; display: block; -webkit-line-clamp: unset; line-clamp: none; }
.crm .crm-mc-subrow .crm-mc-cat-top .crm-mc-sub-name { white-space: normal; overflow: visible; text-overflow: clip; }
.crm .crm-mc-bdc li span { white-space: normal; overflow: visible; text-overflow: clip; }
/* Listenraster nach Prototyp: Person 1,45 · Gesamtwert 0,64 · Zusammensetzung 1 · Freie Zeit 1,45 · Bewegung 0,6 */
@container (min-width: 34.01rem) {
  .crm .crm-mc-listhead, .crm .crm-mc-row { grid-template-columns: 1.0667rem 1.0667rem 2.1333rem minmax(0, 1.45fr) minmax(4.8rem, 0.62fr) minmax(6.9rem, 1fr) minmax(0, 1.45fr) minmax(4.6rem, 0.6fr); }
}
/* ab ca. 1920 px: Prototyp-Raster 1:1, Abstand 13 px, Wochenstreifen ca. 95 px */
@container (min-width: 64rem) {
  .crm .crm-mc-listhead, .crm .crm-mc-row { column-gap: 0.8667rem; }
  /* V40 ⑨: Kachel-Unterpunkte einzeilig mit „…" (voller Name im title) */
  .crm .crm-mc-bdc li span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .crm .crm-mc-strip.is-row .crm-mc-weeks { flex: 0 0 6.3333rem; }
}
/* ab ca. 1440 px wie V40: Namen, Unterzeile und Kachel-Unterpunkte einzeilig mit „…" (Text im title) */
@container (min-width: 50rem) {
  .crm .crm-mc-pick b, .crm .crm-mc-pick span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .crm .crm-mc-strip.is-row .crm-mc-strip-text span { white-space: normal; }
  .crm .crm-mc-tot > small { flex-wrap: wrap; white-space: normal; }
}
.crm .crm-mc-bdc li small, .crm .crm-mc-bdc li b { white-space: nowrap; }
.crm .crm-mc-stack { height: 0.6667rem; border-radius: 0.2rem; }
/* PR1.777 (#1092) — Unterregler + Aufschluesselung nach Prototyp matching-regler.html (1:1 bei 1920, 1 rem = 15 px);
   Schriftgroessen auf die Skala gerundet (11 px -> --fs-label 12, Untergrenze PR1.567) */
.crm .crm-mc-subs { padding: 0.2667rem 0.9333rem 0.5333rem; background: var(--bg-surface-2); }
.crm .crm-mc-subrow { padding: 0.6667rem 0 0.2667rem; }
.crm .crm-mc-subrow .crm-mc-rg { margin-top: 0; margin-bottom: 0; }
.crm .crm-mc-subrow .crm-mc-rg-lbl { margin-top: 0.0667rem; line-height: 1.2; }
.crm .crm-mc-subrow .crm-mc-cat-val b { font-size: var(--fs-ui); }
.crm .crm-mc-subrow .crm-mc-cat-val s { font-size: var(--fs-label); }
.crm .crm-mc-subrow .crm-mc-cat-val.is-off { font-size: var(--fs-ui); color: var(--text-3); }
.crm .crm-mc-rg-lbl { font-size: var(--fs-label); }
.crm .crm-mc-rg-algo { z-index: 2; width: 0.1333rem; margin-left: -0.0667rem; border-radius: 0.0667rem; background: var(--text-2); border: 0; }
.crm .crm-mc-subs-sum { color: var(--text-3); }
.crm .crm-mc-taskchips li { white-space: normal; overflow: visible; text-overflow: clip; overflow-wrap: break-word; hyphens: manual; }
.crm .crm-mc-bdc { padding-inline: 0.6667rem; }
.crm .crm-mc-bdc-h .crm-mc-num { font-size: var(--fs-ui); }
.crm .crm-mc-bdc li { font-size: var(--fs-label); }
.crm .crm-mc-bdc li span { font-size: var(--fs-label); }
.crm .crm-mc-bdc li small { font-size: var(--fs-label); }
.crm .crm-mc-bdc li small, .crm .crm-mc-bdc > small { color: var(--text-3); }   /* Prototyp .bd-u li small / .bd-k span */
/* Gate-Befund #1092: Farblegende mit Luft zu „Andere CCs" und zum Suchfeld (mind. 12 px) */
.crm .crm-mc-mid .crm-mc-legend { padding-inline: var(--s-3); box-sizing: content-box; }
/* Beifund PR1.764: Schnellwahl bleibt einzeilig, auch bei 1280 mit offener Leiste */
.crm .crm-mc-quick .crm-mc-segsm { flex-wrap: nowrap; max-width: 100%; }
.crm .crm-mc-quick .crm-mc-segsm button { white-space: nowrap; flex: 0 1 auto; min-width: 0; }
@media (max-width: 83.75em) { .crm .crm-mc-quick .crm-mc-segsm button { padding-inline: var(--s-2); } }
/* Gate-Befund #1092: „vorher n % · Platz n" einzeilig wie V40 (1920); schmaler sauber untereinander ohne Trennpunkt */
.crm .crm-mc-tot > small { display: flex; flex-direction: column; align-items: flex-start; }
.crm .crm-mc-tot > small > span { display: block; white-space: nowrap; }
/* einzeilig mit „·" nur, wenn die Liste breit genug ist (Gesamtwert-Spalte >= ca. 140 px), unabhaengig von Fenster/Leiste */
@container (min-width: 76rem) {
  .crm .crm-mc-tot > small { flex-direction: row; column-gap: 0; }
  .crm .crm-mc-tot > small > .crm-mc-prevrank::before { content: "\00a0·\00a0"; }
}
/* Gate-Befund #1092: im Cockpit keine einzelnen Woerter allein am Zeilenende (Fliesstext, Zeilen-Untertexte, Knoepfe) */
.crm .crm-mc-page :is(p, small, li, .crm-mc-subs-sum, .crm-mc-strip-text, .crm-mc-pick span, .crm-mc-sub-name) { text-wrap-style: pretty; }
.crm .crm-mc-page :is(.btn, button) { text-wrap-style: balance; }
/* Gate-Befund #1092: Zusammenfassung „Wer kommt in Frage?" nie mit einzelnem Wort umbrechen —
   breit einzeilig rechts, unter ca. 1340 px als ganze zweite Zeile unter der Ueberschrift */
.crm .crm-mc-who-toggle .crm-mc-muted { white-space: nowrap; }
@media (max-width: 83.75em) {
  .crm .crm-mc-who-toggle { display: grid; grid-template-columns: minmax(0, 1fr) auto; row-gap: 0.1333rem; }
  .crm .crm-mc-who-toggle b { grid-column: 1; grid-row: 1; }
  .crm .crm-mc-who-toggle .crm-mc-muted { grid-column: 1; grid-row: 2; margin-left: 0; text-align: left; white-space: normal; }
  .crm .crm-mc-who-toggle > svg, .crm .crm-mc-who-toggle > .ic { grid-column: 2; grid-row: 1 / span 2; align-self: center; }
}

/* ── PR1.565 #851 — Struktur bearbeiten (crm-org-structure.js, Entwurf 5e) ──────────────
   Nur Tokens und rem (ui-craft: raw-hex/raw-px duerfen nicht steigen). Taeglich selten
   genutzt (Admin) → keine Animation ausser der Drop-Hervorhebung. */
.crm .org-page { display: flex; flex-direction: column; gap: var(--s-4); padding: var(--s-6); min-height: 0; }
.crm .org-h1 { font-size: var(--fs-title); font-weight: 600; margin: 0; color: var(--text-1); }
.crm .org-h2 { font-size: var(--fs-body); font-weight: 500; margin: 0; color: var(--text-1); }
.crm .org-h3 { font-size: var(--fs-ui); font-weight: 500; margin: 0 0 var(--s-2); color: var(--text-2); }
.crm .org-muted { color: var(--text-3); font-weight: 400; font-size: var(--fs-body); }
.crm .org-head p { margin: var(--s-1) 0 0; }
.crm .org-bar { display: flex; align-items: center; flex-wrap: wrap; gap: var(--s-3); padding: var(--s-3) var(--s-4); }
.crm .org-dot { inline-size: .5rem; block-size: .5rem; border-radius: 50%; background: var(--ad-blue); }
.crm .org-bar-actions { margin-inline-start: auto; display: flex; gap: var(--s-2); }
.crm .org-error { padding: var(--s-3) var(--s-4); border-radius: var(--r-md); background: var(--tint-red); color: var(--ad-red-800); }
.crm .org-state { padding: var(--s-8) var(--s-6); text-align: center; color: var(--text-2); }
.crm div.org-grid { display: grid; grid-template-columns: minmax(16rem, 1fr) minmax(20rem, 1.6fr) minmax(18rem, 1.1fr); gap: var(--s-4); align-items: start; }
.crm .org-col { display: flex; flex-direction: column; min-width: 0; }
.crm .org-hd { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); flex-wrap: wrap; padding: var(--s-3) var(--s-4); border-block-end: .0625rem solid var(--border); }
.crm .org-actions { display: flex; align-items: center; gap: var(--s-2); flex-wrap: wrap; }
/* „Zu <Team>" ohne Auswahl: gesperrt MUSS gesperrt aussehen — gedaempft, kein Hover-Schatten,
   keine Hover-Farbe. Nur in dieser Leiste, nicht global an `.btn:disabled` (Abwaegung wie
   .head-actions/.ops-ef-btn). Die Ansicht laeuft fuer beide Shells hier (Shell-Scope „geteilt"). */
.crm .org-actions .btn:disabled { opacity: .5; cursor: not-allowed; box-shadow: none; transform: none; }
.crm .org-actions .btn-primary:disabled:hover { background: var(--ad-blue); border-color: var(--ad-blue); box-shadow: none; }
.crm .org-tree { list-style: none; margin: 0; padding: var(--s-2) 0; }
.crm .org-node { display: flex; align-items: center; gap: var(--s-2); padding: var(--s-2) var(--s-3); padding-inline-start: calc(var(--s-3) + var(--depth, 0) * 1.25rem); margin: 0 var(--s-2); border-radius: var(--r-sm); cursor: pointer; color: var(--text-1); }
.crm .org-node:hover { background: var(--bg-hover); }
.crm .org-node.is-selected { background: var(--tint-blue); box-shadow: inset 0 0 0 .0625rem var(--ad-blue); }
.crm .org-node:focus-visible { outline: .125rem solid var(--focus); outline-offset: .0625rem; }
.crm .org-node.drop-hot { background: var(--tint-blue); box-shadow: inset 0 0 0 .125rem var(--ad-blue); }
.crm .org-caret { inline-size: 1rem; display: inline-flex; color: var(--text-3); }
.crm .org-type { inline-size: 1.5rem; font-size: var(--fs-label); font-weight: 500; color: var(--text-3); }
.crm .org-name { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.crm .org-count { color: var(--text-3); font-variant-numeric: tabular-nums; font-size: var(--fs-body); }
.crm .org-add { display: flex; align-items: center; gap: var(--s-2); margin: 0 var(--s-2); padding: var(--s-2) var(--s-3); padding-inline-start: calc(var(--s-3) + 1.5rem + var(--depth, 0) * 1.25rem); background: none; border: 0; color: var(--ad-blue); font: inherit; cursor: pointer; border-radius: var(--r-sm); text-align: start; }
.crm .org-add:hover { background: var(--bg-hover); }
.crm .org-add:focus-visible { outline: .125rem solid var(--focus); outline-offset: .0625rem; }
.crm .org-create { display: flex; gap: var(--s-2); align-items: center; margin: 0 var(--s-2); padding: var(--s-2) var(--s-3); padding-inline-start: calc(var(--s-3) + 1.5rem + var(--depth, 0) * 1.25rem); }
.crm .org-create .crm-input { flex: 1; min-width: 0; }
.crm .org-people-list { list-style: none; margin: 0; padding: 0; }
.crm .org-person { display: flex; align-items: center; gap: var(--s-3); padding: var(--s-2) var(--s-4); border-block-end: .0625rem solid var(--border); }
.crm .org-person.is-checked { background: var(--bg-surface-2); }
.crm .org-person.is-dragging { opacity: .55; }
.crm .org-grip { color: var(--text-3); cursor: grab; letter-spacing: -.15em; }
.crm .org-check { inline-size: 1rem; block-size: 1rem; accent-color: var(--ad-blue); }
.crm .org-avatar { inline-size: 2.25rem; block-size: 2.25rem; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: var(--bg-surface-3); color: var(--text-2); font-size: var(--fs-meta); font-weight: 500; flex: none; }
.crm .org-person-main { display: flex; flex-direction: column; min-width: 0; }
.crm .org-person-name { font-weight: 600; color: var(--text-1); }
.crm .org-person-sub { font-size: var(--fs-body); color: var(--text-3); }
.crm .org-foot { display: flex; justify-content: space-between; align-items: center; padding: var(--s-3) var(--s-4); color: var(--text-3); }
.crm .org-props { display: flex; flex-direction: column; gap: var(--s-4); padding: var(--s-4); }
.crm .org-row2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-3); }
.crm .org-field { display: flex; flex-direction: column; gap: var(--s-1); font-size: var(--fs-body); color: var(--text-2); }
.crm .org-sub { border-block-start: .0625rem solid var(--border); padding-block-start: var(--s-3); }
.crm .org-members, .crm .org-hist { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--s-2); }
.crm .org-members li, .crm .org-hist li { display: flex; justify-content: space-between; gap: var(--s-3); align-items: center; font-size: var(--fs-body); color: var(--text-1); }
.crm .org-props-foot { display: flex; justify-content: space-between; gap: var(--s-3); border-block-start: .0625rem solid var(--border); padding-block-start: var(--s-3); }
.crm .org-danger { color: var(--ad-red-700); border-color: var(--ad-red-300); }
@media (max-width: 75rem) {
    .crm div.org-grid { grid-template-columns: minmax(16rem, 1fr) minmax(18rem, 1.4fr); }
    .crm div.org-grid > :last-child { grid-column: 1 / -1; }
}
@media (max-width: 48rem) {
    .crm div.org-grid { grid-template-columns: 1fr; }
    .crm .org-page { padding: var(--s-4); }
    .crm .org-row2 { grid-template-columns: 1fr; }
}

/* ─────────────────────────────────────────
   PR1.566 (#852) — Mitarbeiter „Organisation" (Redesign-Gesicht)
   Markup: js/components/employee-org-html.js · klassisch: style.css (#view-employees .eorg-*)
   Nur Tokens + rem (Konvention 21, ui-craft).
───────────────────────────────────────── */
.crm .eorg-page > .eorg-host { padding-bottom: var(--s-6); }
.crm .eorg-tabs { margin: 0 0 var(--s-4); }
.crm .eorg-tabs { display: inline-flex; gap: 0.125rem; padding: 0.1875rem; border-radius: var(--r-md); background: var(--bg-surface); border: 0.0625rem solid var(--border); }
.crm .eorg-tab { border: 0; background: transparent; color: var(--text-2); padding: 0.375rem 0.875rem; border-radius: var(--r-sm); font: inherit; font-size: var(--fs-body); cursor: pointer; }
.crm .eorg-tab:hover { color: var(--text-1); }
.crm .eorg-tab.is-active { background: var(--bg-card); color: var(--text-1); font-weight: 600; box-shadow: var(--shadow-1); }
.crm .eorg-tab:focus-visible,
.crm .eorg-card:focus-visible,
.crm .eorg-bd:focus-visible,
.crm .eorg-row:focus-visible,
.crm .eorg-hit:focus-visible,
.crm .eorg-link:focus-visible { outline: 0.125rem solid var(--focus); outline-offset: 0.125rem; }
.crm .eorg-host { display: flex; flex-direction: column; gap: 1rem; margin-top: 0.75rem; }
.crm .eorg-toolbar { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; }
.crm .eorg-search { flex: 1 1 17.5rem; max-width: 28.75rem; }
.crm .eorg-search-input { width: 100%; padding: 0.5rem 0.75rem; border-radius: var(--r-md); border: 0.0625rem solid var(--border); background: var(--bg-input); color: var(--text-1); font: inherit; }
.crm .eorg-results { background: var(--bg-card); border: 0.0625rem solid var(--border); border-radius: var(--r-md); padding: 0.5rem; }
.crm .eorg-hits { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); gap: 0.25rem; }
.crm .eorg-hit { display: flex; align-items: center; gap: 0.5rem; width: 100%; padding: 0.375rem 0.5rem; border: 0; background: transparent; color: var(--text-1); border-radius: var(--r-sm); cursor: pointer; text-align: left; font: inherit; }
.crm .eorg-hit:hover { background: var(--bg-hover); }
.crm .eorg-hit .eorg-muted { margin-left: auto; font-size: var(--fs-meta); }
.crm .eorg-muted { color: var(--text-3); font-size: var(--fs-ui); }
.crm .eorg-eyebrow { color: var(--text-3); font-size: var(--fs-meta); letter-spacing: .02em; }
.crm .eorg-sr { position: absolute; width: 0.0625rem; height: 0.0625rem; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.crm .eorg-bl { display: grid; grid-template-columns: minmax(12.5rem, 1.4fr) repeat(3, minmax(6.875rem, .8fr)) minmax(16.25rem, 2fr); gap: 1.25rem; padding: 1.125rem 1.25rem; background: var(--bg-card); border: 0.0625rem solid var(--border); border-radius: var(--r-lg); }
.crm .eorg-bl-title { margin: 0.125rem 0 0.625rem; font-size: var(--fs-title); color: var(--text-1); }
.crm .eorg-kpi { display: flex; flex-direction: column; gap: 0.25rem; }
.crm .eorg-kpi strong { font-size: var(--fs-display); color: var(--text-1); font-variant-numeric: tabular-nums; line-height: 1.1; }
.crm .eorg-lead { display: flex; align-items: center; gap: 0.625rem; }
.crm .eorg-lead > span:last-child { display: flex; flex-direction: column; min-width: 0; }
.crm .eorg-lead-name { color: var(--text-1); font-weight: 500; font-size: var(--fs-body); }
.crm .eorg-lead-ph { width: 2.5rem; height: 2.5rem; border-radius: 50%; border: 0.0625rem dashed var(--border-strong); display: inline-flex; align-items: center; justify-content: center; color: var(--text-3); flex: none; }
.crm .eorg-tree { display: grid; grid-template-columns: minmax(12.5rem, 16.25rem) minmax(0, 1fr); gap: 1rem; align-items: start; }
.crm .eorg-tree:not(:has(.eorg-bds)) { grid-template-columns: minmax(0, 1fr); }
.crm .eorg-bds { display: flex; flex-direction: column; gap: 0.75rem; }
.crm .eorg-bd { padding: 0.875rem 1rem; border: 0.0625rem dashed var(--border-strong); border-radius: var(--r-md); background: var(--bg-card); cursor: pointer; display: flex; flex-direction: column; gap: 0.25rem; }
.crm .eorg-bd-name { color: var(--text-1); font-weight: 600; }
.crm .eorg-bu { padding: 0.875rem; border-radius: var(--r-lg); background: var(--bg-surface); border: 0.0625rem solid var(--border); }
.crm .eorg-bu-head { display: flex; gap: 0.5rem; align-items: baseline; margin-bottom: 0.75rem; }
.crm .eorg-bu-name { color: var(--text-1); font-weight: 600; }
.crm .eorg-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(14.375rem, 1fr)); gap: 0.75rem; }
.crm .eorg-card { display: flex; flex-direction: column; gap: 0.75rem; padding: 1rem; background: var(--bg-card); border: 0.0625rem solid var(--border); border-radius: var(--r-md); cursor: pointer; }
.crm .eorg-card:hover, .crm .eorg-bd:hover { border-color: var(--ad-blue); }
.crm .eorg-card.is-restricted { cursor: default; border-style: dashed; }
.crm .eorg-card.is-restricted:hover { border-color: var(--border); }
.crm .eorg-card-title { margin: 0; font-size: var(--fs-body); color: var(--text-1); line-height: 1.25; }
.crm .eorg-wall { display: flex; flex-wrap: wrap; gap: 0.375rem; min-height: 1.75rem; }
.crm .eorg-face { display: inline-flex; border-radius: 50%; }
/* PR1.708 (#1011): eingesetzte Personen bleiben farbig — frei/belegt zeigt nur die Zahl. */
.crm .eorg-face-more { display: inline-flex; align-items: center; justify-content: center; min-width: 1.75rem; height: 1.75rem; padding: 0 0.25rem; border-radius: 0.875rem; background: var(--bg-surface); color: var(--text-2); font-size: var(--fs-label); }
.crm .eorg-free-today { color: var(--text-2); font-size: var(--fs-body); }
.crm .eorg-free-today strong { font-size: var(--fs-title); color: var(--text-1); margin-right: 0.25rem; font-variant-numeric: tabular-nums; }
.crm .eorg-cap { border-top: 0.0625rem solid var(--border); padding-top: 0.625rem; display: flex; flex-direction: column; gap: 0.375rem; }
.crm .eorg-cap-head { display: flex; justify-content: space-between; color: var(--text-2); font-size: var(--fs-ui); }
.crm .eorg-bars { display: flex; align-items: flex-end; gap: 0.1875rem; }
.crm .eorg-bars-sm { height: 2.5rem; }
.crm .eorg-bars-lg { height: 4.5rem; }
.crm .eorg-bar { flex: 1; background: var(--ad-blue); border-radius: 0.125rem 0.125rem 0 0; min-height: 0.1875rem; }
.crm .eorg-axis { display: flex; justify-content: space-between; color: var(--text-3); font-size: var(--fs-label); }
.crm .eorg-card-foot { display: flex; justify-content: space-between; align-items: center; margin-top: auto; }
.crm .eorg-open { color: var(--ad-blue); font-weight: 500; font-size: var(--fs-body); }
.crm .eorg-legend { display: flex; flex-wrap: wrap; gap: 1.125rem; color: var(--text-3); font-size: var(--fs-ui); }
.crm .eorg-legend > span { display: inline-flex; align-items: center; gap: 0.375rem; }
.crm .eorg-dot { width: 0.625rem; height: 0.625rem; border-radius: 50%; display: inline-block; }
.crm .eorg-dot.is-free { background: var(--ad-orange); }
.crm .eorg-dot.is-busy { background: var(--text-3); }
.crm .eorg-dot.is-bar { background: var(--ad-blue); border-radius: 0.125rem; }
.crm .eorg-link { border: 0; background: transparent; padding: 0; color: var(--ad-blue); font: inherit; cursor: pointer; text-decoration: underline; text-underline-offset: 0.125rem; }
/* PR1.568 (#855) — Kopfzeile: „Frei ab", „Fähigkeit", Begriffe-Schalter, gesetzte Filter. */
.crm .eorg-toolbar .eorg-bar-host { display: contents; }
.crm .eorg-filters { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; flex: 1 1 auto; }
.crm .eorg-fpick { position: relative; }
.crm .eorg-fchip { display: inline-flex; align-items: center; gap: 0.375rem; padding: 0.375rem 0.75rem; border: 0.0625rem solid var(--border); border-radius: var(--r-md); background: var(--bg-card); color: var(--text-2); font: inherit; font-size: var(--fs-ui); cursor: pointer; }
.crm .eorg-fchip:hover { color: var(--text-1); border-color: var(--border-strong); }
.crm .eorg-fchip.is-set { color: var(--ad-blue); border-color: var(--ad-blue); font-weight: 500; }
.crm .eorg-caret { display: inline-flex; color: var(--text-3); }
.crm .eorg-pop { position: absolute; z-index: 30; top: calc(100% + 0.25rem); left: 0; min-width: 13rem; max-height: 22rem; overflow: auto; display: flex; flex-direction: column; gap: 0.125rem; padding: 0.375rem; background: var(--bg-card); border: 0.0625rem solid var(--border); border-radius: var(--r-md); box-shadow: var(--shadow-2); }
.crm .eorg-pop-skills { min-width: 16rem; }
.crm .eorg-pop-search { width: 100%; padding: 0.375rem 0.5rem; margin-bottom: 0.25rem; border-radius: var(--r-sm); border: 0.0625rem solid var(--border); background: var(--bg-input); color: var(--text-1); font: inherit; font-size: var(--fs-ui); }
.crm .eorg-pop-list { display: flex; flex-direction: column; gap: 0.125rem; }
.crm .eorg-opt { display: flex; align-items: center; gap: 0.5rem; width: 100%; padding: 0.375rem 0.5rem; border: 0; border-radius: var(--r-sm); background: transparent; color: var(--text-1); font: inherit; font-size: var(--fs-ui); text-align: left; cursor: pointer; }
.crm .eorg-opt:hover { background: var(--bg-hover); }
.crm .eorg-opt.is-active { color: var(--ad-blue); font-weight: 500; }
.crm .eorg-opt-check input { width: 1rem; height: 1rem; margin: 0; accent-color: var(--ad-blue); flex: none; }
/* Native Haekchen folgen dem Theme der .crm-Flaeche, nicht dem der Seite (Muster .ki-modelle). */
.crm .eorg-pop { color-scheme: light; }
.crm.dark .eorg-pop, html[data-theme="dark"] .crm .eorg-pop { color-scheme: dark; }
.crm.dark .eorg-opt-check input, html[data-theme="dark"] .crm .eorg-opt-check input { accent-color: var(--ad-blue-300); }
.crm .eorg-opt-check .eorg-muted { margin-left: auto; font-size: var(--fs-meta); font-variant-numeric: tabular-nums; }
.crm .eorg-pop-empty { margin: 0.25rem 0.5rem; }
.crm .eorg-terms { display: inline-flex; align-items: center; gap: 0.5rem; margin-left: auto; }
.crm .eorg-active { display: flex; flex-wrap: wrap; gap: 0.375rem; align-items: center; flex-basis: 100%; }
.crm .eorg-achip { display: inline-flex; align-items: center; gap: 0.375rem; padding: 0.25rem 0.625rem; border: 0.0625rem solid var(--border); border-radius: 62.5rem; background: var(--bg-surface-2); color: var(--text-1); font: inherit; font-size: var(--fs-ui); cursor: pointer; }
.crm .eorg-achip:hover { border-color: var(--border-strong); }
.crm .eorg-achip span { color: var(--text-3); }
.crm .eorg-error { color: var(--danger); font-size: var(--fs-ui); }
.crm .eorg-card.is-dimmed { opacity: .72; }
.crm .eorg-fchip:focus-visible,
.crm .eorg-opt:focus-visible,
.crm .eorg-opt-check:focus-within,
.crm .eorg-achip:focus-visible,
.crm .eorg-pop-search:focus-visible,
.crm .eorg-seg button:focus-visible { outline: 0.125rem solid var(--focus); outline-offset: 0.125rem; }
.crm .eorg-empty { padding: 2rem; text-align: center; background: var(--bg-card); border: 0.0625rem dashed var(--border-strong); border-radius: var(--r-lg); display: flex; flex-direction: column; align-items: center; gap: 0.625rem; }
.crm .eorg-empty-title { margin: 0; font-size: var(--fs-section); color: var(--text-1); }
.crm .eorg-crumbs { display: flex; flex-wrap: wrap; gap: 0.375rem; align-items: center; color: var(--text-3); font-size: var(--fs-body); }
.crm .eorg-unit { display: flex; flex-direction: column; gap: 0.75rem; }
.crm .eorg-unit-title { margin: 0; font-size: var(--fs-title); color: var(--text-1); }
.crm .eorg-unit-title:focus { outline: none; }
.crm .eorg-unit-head { display: grid; grid-template-columns: minmax(0, 2fr) minmax(16.25rem, 1.2fr); gap: 0; background: var(--bg-card); border: 0.0625rem solid var(--border); border-radius: var(--r-lg); overflow: hidden; }
.crm .eorg-chain, .crm .eorg-unit-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-column: 1; }
.crm .eorg-chain { grid-template-columns: repeat(auto-fit, minmax(9.375rem, 1fr)); }
.crm .eorg-chain-item, .crm .eorg-unit-kpis .eorg-kpi { padding: 0.875rem 1rem; border-right: 0.0625rem solid var(--border); border-bottom: 0.0625rem solid var(--border); display: flex; flex-direction: column; gap: 0.375rem; }
.crm .eorg-chain-lead { display: flex; align-items: center; gap: 0.5rem; color: var(--text-1); font-weight: 500; font-size: var(--fs-body); }
.crm .eorg-unit-head > .eorg-kpi-wide { grid-column: 2; grid-row: 1 / span 2; padding: 1rem; }
.crm .eorg-table-wrap { overflow-x: auto; background: var(--bg-card); border: 0.0625rem solid var(--border); border-radius: var(--r-lg); }
.crm .eorg-table { width: 100%; border-collapse: collapse; font-size: var(--fs-body); }
.crm .eorg-table th, .crm .eorg-table td { padding: 0.625rem 0.875rem; text-align: left; border-bottom: 0.0625rem solid var(--border); color: var(--text-1); vertical-align: middle; }
.crm .eorg-table thead th { color: var(--text-3); font-weight: 500; font-size: var(--fs-ui); }
.crm .eorg-group th { background: var(--bg-surface); font-weight: 600; }
.crm .eorg-row { cursor: pointer; }
.crm .eorg-row:hover { background: var(--bg-hover); }
.crm .eorg-num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.crm .eorg-person { display: flex; align-items: center; gap: 0.625rem; }
.crm .eorg-person > span:last-child { display: flex; flex-direction: column; }
.crm .eorg-person-name { font-weight: 600; color: var(--text-1); }
.crm .eorg-weeks { display: flex; gap: 0.125rem; font-weight: 400; font-size: var(--fs-label); }
.crm .eorg-weeks > span, .crm .eorg-cell { width: 1.125rem; text-align: center; }
.crm .eorg-strip { display: inline-flex; gap: 0.125rem; }
.crm .eorg-cell { height: 0.875rem; border-radius: 0.1875rem; background: var(--bg-surface); border: 0.0625rem solid var(--border); }
.crm .eorg-cell.is-low { background: color-mix(in srgb, var(--ad-blue) 35%, transparent); }
.crm .eorg-cell.is-high { background: color-mix(in srgb, var(--ad-blue) 65%, transparent); }
.crm .eorg-cell.is-full { background: var(--ad-blue); border-color: var(--ad-blue); }
.crm .eorg-chip { display: inline-block; padding: 0.125rem 0.5rem; margin: 0 0.25rem 0.25rem 0; border-radius: var(--r-sm); background: var(--bg-surface); color: var(--text-2); font-size: var(--fs-meta); }
/* PR1.708 (#1011) — Vorlage K7: beide Leitungen im Kopf, fuenf CC-Karten ueber die volle Breite,
   Fotos 36 px in hoechstens zwei Reihen, Business Development unter den Karten. Taeglich genutzt →
   keine Animation. */
.crm .eorg-bl { grid-template-columns: minmax(28rem, 2.1fr) repeat(3, minmax(6.875rem, 1fr)) minmax(16.25rem, 1.8fr); }
.crm .eorg-body, .crm .eorg-skel-wurzel { display: flex; flex-direction: column; gap: 1rem; }
.crm .eorg-tree { gap: 1rem; }
.crm .eorg-leads { display: flex; flex-wrap: wrap; gap: 0.75rem 1.75rem; }
.crm .eorg-leads > .eorg-lead { flex: none; }
.crm .eorg-lead-name { font-weight: 600; }
.crm .eorg-tree, .crm .eorg-tree:not(:has(.eorg-bds)) { grid-template-columns: minmax(0, 1fr); }
.crm .eorg-cards,
.crm .eorg-bds { --eorg-col: max(15rem, calc((100% - 3rem) / 5)); }
.crm .eorg-cards { grid-template-columns: repeat(auto-fit, minmax(var(--eorg-col), 1fr)); }
.crm .eorg-bds { display: grid; grid-template-columns: repeat(auto-fill, minmax(var(--eorg-col), 1fr)); gap: 0.75rem; }
.crm .eorg-bus > .eorg-bu:only-child { padding: 0; background: none; border: 0; border-radius: 0; }
.crm .eorg-bus > .eorg-bu:only-child > .eorg-bu-head { display: none; }
.crm .eorg-wall { gap: 0.5rem; min-height: 2.25rem; }
.crm .eorg-face-more { min-width: 2.25rem; height: 2.25rem; border-radius: 1.125rem; font-weight: 600; background: var(--bg-surface-3); color: var(--text-2); }
.crm .eorg-skel .eorg-wall > .skel-a28 { width: 2.25rem; height: 2.25rem; }
.crm .eorg-skel .eorg-wall > :nth-child(n+11) { display: none; }
@media (max-width: 75rem) {
  .crm .eorg-bl { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .crm .eorg-kpi-wide { grid-column: 1 / -1; }
  .crm .eorg-tree, .crm .eorg-unit-head { grid-template-columns: minmax(0, 1fr); }
  .crm .eorg-unit-head > .eorg-kpi-wide { grid-column: 1; grid-row: auto; }
}
@media (max-width: 48rem) {
  X
}

/* ── PR1.543 (#824) — Admin: gruppierte Seitenleiste + Ueberblick ─────────────
   Taeglich genutzt → keine Animation. Nur Tokens beider Themes, keine rohen
   Farben; Zustaende tragen immer auch Text (Farbe allein sagt nichts). */
.crm .adm-layout, .crm .adm-ov { --adm-blau: var(--ad-blue-700); --adm-rot: var(--ad-red-700); --adm-orange: var(--ad-orange-900);
  --adm-gruen: var(--ad-green-900); --adm-violett: var(--ad-violet); }
.crm.dark .adm-layout, .crm.dark .adm-ov, html[data-theme="dark"] .crm .adm-layout, html[data-theme="dark"] .crm .adm-ov {
  --adm-blau: var(--ad-blue-300); --adm-rot: var(--ad-red-300); --adm-orange: var(--ad-orange); --adm-gruen: var(--ad-green);
  --adm-violett: color-mix(in srgb, var(--ad-violet) 40%, white); }
.crm .adm-scroll { min-height: 0; }
.crm .adm-layout { display: flex; flex-wrap: wrap; align-items: flex-start; gap: var(--s-4); padding: 0 var(--s-5) var(--s-5);
  container: adm-layout / inline-size; }
.crm .adm-nav { flex: 0 0 15rem; position: sticky; top: 0;
  background: var(--bg-card); border: .0625rem solid var(--border); border-radius: var(--r-lg); padding: var(--s-2); }
.crm .adm-nav-gruppe { font-size: var(--fs-meta); color: var(--text-3); padding: var(--s-3) var(--s-3) var(--s-1); }
.crm .adm-nav-liste { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .125rem; }
.crm .adm-nav-eintrag { display: flex; align-items: center; gap: var(--s-2); width: 100%; text-align: left;
  background: none; border: 0; border-radius: var(--r-md); padding: var(--s-2) var(--s-3); color: var(--text-1);
  font: inherit; font-size: var(--fs-ui); cursor: pointer; }
.crm .adm-nav-eintrag > span:first-of-type { flex: 1; }
.crm .adm-nav-eintrag .ic { color: var(--text-3); flex: none; }
.crm .adm-nav-eintrag:hover { background: var(--bg-hover); }
.crm .adm-nav-eintrag.aktiv { background: var(--tint-blue); color: var(--adm-blau); font-weight: 600; }
.crm .adm-nav-eintrag.aktiv .ic { color: currentColor; }
.crm .adm-nav-eintrag:focus-visible { outline: .125rem solid var(--focus); outline-offset: -.125rem; }
.crm .adm-nav-zahl { min-width: 1.5rem; padding: 0 var(--s-1); border-radius: 62.5rem; text-align: center;
  font-size: var(--fs-meta); font-weight: 600; font-variant-numeric: tabular-nums; }
.crm .adm-nav-bad { background: var(--tint-red); color: var(--adm-rot); }
.crm .adm-nav-warn { background: var(--tint-warn); color: var(--adm-orange); }
.crm .adm-main { flex: 1; min-width: 0; }

.crm .adm-ov-stand { display: flex; align-items: center; gap: var(--s-3); color: var(--text-2); font-size: var(--fs-meta); flex-wrap: wrap; }
.crm .adm-ov-stand > span { flex: 1; }
/* Spaltenzahl nach der echten Inhaltsbreite (neben App-Navi + Admin-Leiste), nicht nach dem Fenster. */
.crm .adm-ov-raster { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 20rem), 1fr)); gap: var(--s-4); }
.crm .adm-ov-karte { background: var(--bg-card); border: .0625rem solid var(--border); border-radius: var(--r-lg);
  display: flex; flex-direction: column; min-width: 0; }
.crm .adm-ov-kopf { display: flex; align-items: baseline; gap: var(--s-2); padding: var(--s-3) var(--s-4); flex-wrap: wrap; }
.crm .adm-ov-kopf h2 { margin: 0; font-family: var(--f-cond); font-size: var(--fs-section); font-weight: 600; color: var(--text-1); }
.crm .adm-ov-luecke { flex: 1; }
.crm .adm-ov-zusatz { color: var(--text-3); font-size: var(--fs-meta); }
.crm .adm-ov-inhalt { padding: 0 var(--s-4) var(--s-4); display: flex; flex-direction: column; gap: var(--s-3); flex: 1; }
.crm .adm-ov-satz { margin: 0; color: var(--text-1); line-height: 1.5; }
.crm .adm-ov-hinweis { margin: 0; color: var(--text-2); font-size: var(--fs-ui); line-height: 1.5; }
.crm .adm-ov-hinweis.adm-ov-fehler { color: var(--adm-rot); display: flex; gap: var(--s-2); align-items: center; flex-wrap: wrap; }
.crm .adm-ov-hinweis.adm-ov-ok { color: var(--adm-gruen); }
.crm .adm-ov-pill { display: inline-flex; align-items: center; padding: .0625rem var(--s-2); border-radius: 62.5rem;
  font-size: var(--fs-meta); font-weight: 600; background: var(--bg-surface-3); color: var(--text-2); white-space: nowrap; }
.crm .adm-ov-pill.adm-ov-bad { background: var(--tint-red); color: var(--adm-rot); }
.crm .adm-ov-pill.adm-ov-ok { background: var(--tint-green); color: var(--adm-gruen); }
.crm .adm-ov-pill.adm-ov-info { background: var(--tint-blue); color: var(--adm-blau); }
.crm .adm-ov-zahl.adm-ov-bad-text { color: var(--adm-rot); }

.crm .adm-ov-saeulen { display: flex; align-items: flex-end; gap: .1875rem; height: 4.5rem; }
.crm .adm-ov-saeulen i { flex: 1; min-height: .1875rem; background: color-mix(in srgb, var(--primary) 28%, transparent); border-radius: .125rem .125rem 0 0; }
.crm .adm-ov-saeulen i.adm-ov-hoch { background: var(--danger); }
.crm .adm-ov-achse { display: flex; justify-content: space-between; color: var(--text-3); font-size: var(--fs-meta); }
.crm .adm-ov-zahlen { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 6rem), 1fr)); border-top: .0625rem solid var(--border); padding-top: var(--s-3); gap: var(--s-2); }
.crm .adm-ov-zahlen > div { display: flex; flex-direction: column; gap: .125rem; min-width: 0; }
.crm .adm-ov-zahl { font-family: var(--f-cond); font-size: var(--fs-kpi); font-weight: 600; font-variant-numeric: tabular-nums; color: var(--text-1);
  line-height: 1.15; overflow-wrap: anywhere; }
.crm .adm-ov-zahlen span { color: var(--text-2); font-size: var(--fs-meta); }
.crm .adm-ov-fuss { margin-top: auto; }

.crm .adm-ov-liste { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.crm .adm-ov-liste > li { display: flex; align-items: center; gap: var(--s-3); padding: var(--s-2) 0; border-bottom: .0625rem solid var(--border); }
.crm .adm-ov-liste > li:last-child { border-bottom: 0; }
.crm .adm-ov-tx { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: .125rem; }
.crm .adm-ov-tx b { font-weight: 600; }
.crm .adm-ov-tx small { color: var(--text-2); font-size: var(--fs-meta); }
.crm .adm-ov-anzahl { flex: none; width: 2rem; height: 2rem; border-radius: var(--r-md); display: grid; place-items: center;
  font-weight: 700; font-variant-numeric: tabular-nums; }
.crm .adm-ov-anzahl.adm-ov-warn { background: var(--tint-warn); color: var(--adm-orange); }
.crm .adm-ov-anzahl.adm-ov-bad { background: var(--tint-red); color: var(--adm-rot); }
.crm .adm-ov-anzahl.adm-ov-violet { background: var(--tint-violet); color: var(--adm-violett); }
.crm .adm-ov-todo-hinweis { color: var(--text-2); font-size: var(--fs-meta); }
.crm .adm-ov-sprung { flex: none; display: inline-flex; align-items: center; gap: var(--s-1); background: none; border: 0;
  padding: var(--s-1); border-radius: var(--r-sm); color: var(--adm-blau); font: inherit; font-size: var(--fs-ui); font-weight: 600; cursor: pointer; }
.crm .adm-ov-sprung:hover { text-decoration: underline; }
.crm .adm-ov-sprung:focus-visible { outline: .125rem solid var(--focus); outline-offset: .0625rem; }

.crm .adm-ov-nutzer { display: flex; align-items: center; gap: var(--s-5); flex-wrap: wrap; }
.crm .adm-ov-donut { width: 7.5rem; height: 7.5rem; flex: none; }
.crm .adm-ov-donut-zahl { font-family: var(--f-cond); font-size: var(--fs-title); font-weight: 600; fill: var(--text-1); }
.crm .adm-ov-ring-grund { stroke: var(--bg-surface-3); }
.crm .adm-ov-ring-ok { stroke: var(--success); }
.crm .adm-ov-ring-info { stroke: var(--primary); }
.crm .adm-ov-ring-bad { stroke: var(--danger); }
.crm .adm-ov-ring-muted { stroke: var(--text-3); }
.crm .adm-ov-ring-ok-bg { background: var(--success); }
.crm .adm-ov-ring-info-bg { background: var(--primary); }
.crm .adm-ov-ring-bad-bg { background: var(--danger); }
.crm .adm-ov-ring-muted-bg { background: var(--text-3); }
.crm .adm-ov-legende { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--s-2); flex: 1; min-width: 9rem; }
.crm .adm-ov-legende li { display: flex; align-items: center; gap: var(--s-2); }
.crm .adm-ov-legende b { margin-left: auto; font-variant-numeric: tabular-nums; }
.crm .adm-ov-punkt { width: .625rem; height: .625rem; border-radius: 50%; flex: none; }

.crm .adm-ov-anteile { display: flex; height: .5rem; border-radius: 62.5rem; overflow: hidden; background: var(--bg-surface-3); }
.crm .adm-ov-anteile i { display: block; height: 100%; }
.crm .adm-ov-anteil-0 { background: var(--ad-violet); }
.crm .adm-ov-anteil-1 { background: var(--primary); }
.crm .adm-ov-anteil-2 { background: var(--ad-turq-700); }
.crm .adm-ov-anteil-3 { background: var(--ad-orange); }
.crm .adm-ov-anteil-4 { background: var(--text-3); }
.crm .adm-ov-betrag { min-width: 4.5rem; text-align: right; color: var(--text-2); font-variant-numeric: tabular-nums; font-size: var(--fs-meta); }

.crm .adm-ov-protokoll time { flex: none; width: 3.75rem; color: var(--text-3); font-size: var(--fs-meta); font-variant-numeric: tabular-nums; }
.crm .adm-ov-mono { position: relative; overflow: hidden; flex: none; width: 1.75rem; height: 1.75rem; border-radius: 50%; display: grid; place-items: center;
  background: var(--bg-surface-3); color: color-mix(in srgb, var(--text-3) 60%, var(--bg-surface-3)); }
.crm .adm-ov-protokoll b { font-weight: 600; }

/* Echter Ein/Aus-Schalter (Funktionen + Ueberblick). Zustand steht auch als Wort daneben. */
/* PR1.709 #1012 — Admin › Darstellung: Schriftgroesse fuer alle (Vorlage K9). */
/* PR1.748 #1054 — Pille hell wie Vorlage V26; dunkle Schrift statt weiss, weil weiss auf
   Hellorange den AA-Kontrast verfehlt (axe color-contrast, test/layout/a11y.spec.mjs). */
.crm .adm-nav-neu { flex: none; padding: 0 var(--s-2); border-radius: 62.5rem; background: var(--ad-orange); color: var(--ad-blue-900); font-size: var(--fs-label); font-weight: 600; line-height: 1.25rem; }
/* PR1.748 #1054 — Admin › Rollen und Rechte: Lesefassung „Wer darf was“.
   Sollwerte per getComputedStyle aus dem Prototyp design/mockups/vorlive-05-11/steuerung-admin.html#v26
   (Vorlage V26). In der App gilt 1 rem = 15 px, daher Masse ueber die px-genauen Tokens (--s-*, --r-*).
   Schriftgrade auf die Skala gerundet (Vasili 05.11.): 18 → --fs-title, 17 → --fs-section.
   Anteile 32 % / 4 × 17 %. Selten genutzt → keine Animation. Zustand nie nur ueber Farbe.
   Fokus: Hausstandard .crm :focus-visible. */
.crm .adm-nav-text { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.crm .adm-nav-text > span { white-space: nowrap; }
.crm .adm-nav-unter { font-size: var(--fs-label); font-weight: 400; color: currentColor; opacity: .85; line-height: 1.3; }
/* PR1.756 (#1056) — „war: Wissensgraph-Zugang“ einzeilig wie V25: die Unterzeile darf unter der Pille weiterlaufen. */
.crm .adm-nav-eintrag[data-adm-nav="freischaltungen"] { display: grid; grid-template-columns: auto 1fr auto; column-gap: var(--s-2); row-gap: 0.1333rem; align-items: center; }
.crm .adm-nav-eintrag[data-adm-nav="freischaltungen"] > .ic { grid-row: 1; grid-column: 1; }
.crm .adm-nav-eintrag[data-adm-nav="freischaltungen"] .adm-nav-text { display: contents; }
.crm .adm-nav-eintrag[data-adm-nav="freischaltungen"] .adm-nav-text > span:first-child { grid-row: 1; grid-column: 2; }
.crm .adm-nav-eintrag[data-adm-nav="freischaltungen"] .adm-nav-unter { grid-row: 2; grid-column: 2 / 4; white-space: nowrap; }
.crm .adm-nav-eintrag[data-adm-nav="freischaltungen"] .adm-nav-neu { grid-row: 1; grid-column: 3; }

/* Kopf: Titel + Satz links, Matrix-Knopf rechts, unten buendig (Prototyp align-items:flex-end) */
.crm .rl { display: flex; flex-direction: column; gap: var(--s-3); }
.crm .rl-kopf { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--s-4); flex-wrap: wrap; }
.crm .rl-titel { margin: 0; font-size: var(--fs-title); font-weight: 700; line-height: 1.4; color: var(--text-1); }
.crm .rl-sub { margin: 0; font-size: var(--fs-ui); line-height: 1.4; color: var(--text-2); }
/* Knopf: 14/500, Rand --border-strong, Radius 8, Hoehe 36 (Padding 7/13, Zeile 19,6) */
.crm .rl-matrix-knopf { display: inline-flex; align-items: center; gap: calc(var(--s-2) - var(--s-1) / 4);
  padding: calc(var(--s-2) - var(--s-1) / 4) calc(var(--s-3) + var(--s-1) / 4); background: var(--bg-surface);
  border: calc(var(--s-1) / 4) solid var(--border-strong); border-radius: var(--r-md);
  color: var(--text-1); font-size: var(--fs-ui); font-weight: 500; line-height: 1.4; }
.crm .rl-chevron { flex: none; width: calc(var(--s-4) - var(--s-1) / 4); height: calc(var(--s-4) - var(--s-1) / 4); }
.crm .rl-matrix-knopf[aria-expanded="true"] .rl-chevron { transform: rotate(90deg); }

/* Karte: Rahmen 1 px --border, Radius 12 */
.crm .rl-karte { background: var(--bg-surface); border: calc(var(--s-1) / 4) solid var(--border);
  border-radius: calc(var(--r-md) + var(--s-1)); overflow: hidden; }
.crm .rl-scroll { overflow-x: auto; }
.crm .rl-tab { width: 100%; border-collapse: collapse; table-layout: fixed; }
.crm .rl-col-was { width: 32%; }
.crm .rl-col-rolle { width: 17%; }
/* PR1.775 — angebunden (xl-fixed): die gezogenen Kopfbreiten gelten, nicht die festen Spaltenvorgaben. */
.crm .rl-tab.xl-fixed .rl-col-was, .crm .rl-tab.xl-fixed .rl-col-rolle { width: auto; }
.crm .rl-tab th, .crm .rl-tab td { text-align: left; vertical-align: top; white-space: normal;
  font-size: var(--fs-body); line-height: 1.4; color: var(--text-1); background: var(--bg-surface); }
.crm .rl-tab thead tr, .crm .rl-tab tbody tr { background: none; border-bottom: 0; transition: none; }
.crm .rl-tab tbody tr:not(.rl-gruppe) > * { border-top: calc(var(--s-1) / 4) solid var(--border); }

/* Spaltenkoepfe: Padding 18/18/16; Name 16/700 mit 10-px-Punkt, Satz 14/400 (Zeile 1,45), „heute: …“ 12/500 */
.crm .rl-tab .rl-rolle { position: relative; padding: calc(var(--s-4) + var(--s-1) / 2) calc(var(--s-4) + var(--s-1) / 2) var(--s-4);
  border-left: calc(var(--s-1) / 4) solid var(--border); font-weight: 400; }
/* eigener 2-px-Trenner im Kopf neben der Rasterlinie (Prototyp .grip, oben/unten 7 px eingerueckt) */
.crm .rl-tab .rl-rolle::before { content: ""; position: absolute; left: calc(-1 * var(--s-1)); top: var(--s-2); bottom: var(--s-2); width: 0;
  border-left: calc(var(--s-1) / 2) solid var(--border-strong); }
.crm .rl-rolle-name { display: flex; align-items: center; gap: var(--s-2); font-size: var(--fs-section); font-weight: 700; line-height: 1.4; color: var(--text-1); }
.crm .rl-punkt { flex: none; width: calc(var(--s-2) + var(--s-1) / 2); height: calc(var(--s-2) + var(--s-1) / 2); border-radius: 50%; }
.crm .rl-ton-violet { background: var(--ad-violet); }
.crm .rl-ton-orange { background: var(--ad-orange-700); }
.crm .rl-ton-blue { background: var(--ad-blue); }
.crm .rl-ton-grey { background: color-mix(in srgb, var(--text-3) 57%, var(--border-strong)); }
.crm.dark .rl-ton-violet, html[data-theme="dark"] .crm .rl-ton-violet { background: var(--adm-violett); }
.crm .rl-satz { display: block; margin-top: var(--s-2); font-size: var(--fs-ui); font-weight: 400; line-height: 1.45; color: var(--text-2); }
.crm .rl-fuss { display: block; margin-top: var(--s-2); font-size: var(--fs-label); font-weight: 500; line-height: 1.4; color: var(--text-3); }
.crm .rl-nobr { white-space: nowrap; }

/* Zeilenkoepfe 15/500 (Zeile 1,4), Unterzeile 13/400 block; Gruppen 13/600, Padding 8/18 → Hoehen 64 / 52 / 35 */
.crm .rl-tab .rl-was { padding: var(--s-3) calc(var(--s-4) + var(--s-1) / 2); font-weight: 400; }
.crm .rl-tab .rl-was.rl-was-kopf { vertical-align: bottom; padding: calc(var(--s-4) + var(--s-1) / 2) calc(var(--s-4) + var(--s-1) / 2) var(--s-4);
  font-size: var(--fs-meta); font-weight: 600; line-height: 1.4; color: var(--text-3); }
.crm .rl-tab .rl-gruppe th { padding: var(--s-2) calc(var(--s-4) + var(--s-1) / 2); background: var(--bg-surface-2);
  font-size: var(--fs-meta); font-weight: 600; line-height: 1.4; color: var(--text-2); border-top: calc(var(--s-1) / 4) solid var(--border); }
.crm .rl-z-titel { display: block; font-size: var(--fs-body); font-weight: 500; line-height: 1.4; color: var(--text-1); }
.crm .rl-z-unter { display: block; font-size: var(--fs-meta); font-weight: 400; line-height: 1.4; color: var(--text-3); }

/* Zellen: Padding 12/18; Haken 26-px-Kreis mit 15-px-Strichhaken; Strich „–“ hellgrau; Pille 13/600, Padding 3/10 */
.crm .rl-tab .rl-zelle { text-align: center; vertical-align: middle; padding: var(--s-3) calc(var(--s-4) + var(--s-1) / 2);
  border-left: calc(var(--s-1) / 4) solid var(--border); line-height: 1.4; }
.crm .rl-ja { display: inline-flex; align-items: center; justify-content: center; vertical-align: middle;
  width: calc(var(--s-6) + var(--s-1) / 2); height: calc(var(--s-6) + var(--s-1) / 2); border-radius: 50%;
  background: color-mix(in srgb, var(--tint-green) 60%, var(--bg-surface-2));
  color: color-mix(in srgb, var(--ad-green-700) 54%, var(--ad-green-900)); }
.crm .rl-ja svg { width: calc(var(--s-4) - var(--s-1) / 4); height: calc(var(--s-4) - var(--s-1) / 4); }
/* Dunkel: Kreis sichtbar vom Kartengrund abheben (sonst ~1:1). */
.crm.dark .rl-ja, html[data-theme="dark"] .crm .rl-ja { background: color-mix(in srgb, var(--ad-green) 36%, var(--bg-surface)); color: var(--ad-green); }
.crm .rl-nein { font-size: var(--fs-section); line-height: 1.4; color: color-mix(in srgb, var(--text-3) 15%, var(--border-strong)); }
.crm .rl-cc { display: inline-flex; align-items: center; gap: calc(var(--s-1) + var(--s-1) / 2);
  padding: calc(var(--s-1) - var(--s-1) / 4) calc(var(--s-2) + var(--s-1) / 2); border-radius: 62.5rem;
  background: var(--tint-blue); color: var(--adm-blau); font-size: var(--fs-meta); font-weight: 600; line-height: 1.4; }
.crm .rl-cc svg { flex: none; width: calc(var(--s-3) + var(--s-1) / 4); height: calc(var(--s-3) + var(--s-1) / 4); }
.crm .rl-matrix-bereich:not([hidden]) { display: flex; flex-direction: column; gap: var(--s-3); }
.crm .dar { padding: var(--s-6); display: flex; flex-direction: column; gap: var(--s-3); }
.crm .dar-titel { margin: 0; font-size: var(--fs-title); font-weight: 600; color: var(--text-1); }
.crm .dar-sub { margin: calc(-1 * var(--s-2)) 0 var(--s-2); font-size: var(--fs-meta); color: var(--text-3); }
.crm .dar-h3 { margin: var(--s-2) 0 0; font-size: var(--fs-ui); font-weight: 600; color: var(--text-1); }
.crm .dar-stufen { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s-2); }
.crm .dar-stufe { display: flex; align-items: center; gap: var(--s-3); padding: var(--s-4) var(--s-4); border: .0625rem solid var(--border); border-radius: var(--r-md); background: var(--bg-surface); cursor: pointer; }
.crm .dar-stufe:hover { background: var(--bg-hover); }
.crm .dar-stufe.gewaehlt { border-color: var(--ad-blue); background: var(--tint-blue); }
.crm .dar-stufe input[type="radio"] { appearance: none; flex: none; width: 1.25rem; height: 1.25rem; margin: 0; border: .125rem solid var(--border-strong); border-radius: 50%; background: var(--bg-surface); cursor: pointer; }
.crm .dar-stufe input[type="radio"]:checked { border-color: var(--ad-blue); background: var(--ad-blue); box-shadow: inset 0 0 0 .25rem var(--bg-surface); }
/* Fokus: die allgemeine Regel .crm :focus-visible (2 px) greift; .125rem waere bei 15 px Basis nur 1,875 px → 1 px. */
.crm .dar-schalter .funk-switch:focus-visible { outline-width: .14rem; }
.crm .dar-stufe-text { display: flex; flex-direction: column; min-width: 0; }
.crm .dar-stufe-name { font-size: var(--fs-section); font-weight: 600; color: var(--text-1); }
.crm .dar-stufe-px { font-size: var(--fs-meta); color: var(--text-3); }
.crm .dar-schalter { display: flex; align-items: center; gap: var(--s-3); font-size: var(--fs-body); color: var(--text-1); }
.crm .dar-vorschau { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-4); }
.crm .dar-v { padding: var(--s-4) var(--s-5); border: .0625rem solid var(--border); border-radius: var(--r-md); background: var(--bg-surface); min-width: 0; }
.crm .dar-v-kopf { font-size: var(--fs-ui); font-weight: 600; color: var(--text-2); margin-bottom: var(--s-2); }
.crm .dar-v-auswahl .dar-v-kopf { color: var(--ad-blue); }
.crm .dar-v-titel { font-size: var(--fs-section); font-weight: 600; color: var(--text-1); }
.crm .dar-v-zahlen { font-size: var(--fs-meta); color: var(--text-3); margin-bottom: var(--s-3); }
.crm .dar-v-tab { width: 100%; border-collapse: collapse; table-layout: fixed; }
.crm .dar-v-c1 { width: 55%; } .crm .dar-v-c2 { width: 27%; } .crm .dar-v-c3 { width: 18%; }
.crm .dar-v-tab thead tr { background: transparent; border-bottom: 0; }
.crm .dar-v-tab th { background: transparent; text-align: left; font-size: var(--fs-label); font-weight: 600; color: var(--text-2); padding: var(--s-1) var(--s-3); border-bottom: .0625rem solid var(--border); }
.crm .dar-v-tab td { padding: var(--s-3); border-bottom: .0625rem solid var(--border); overflow-wrap: anywhere; vertical-align: middle; }
.crm .dar-v-name, .crm .dar-v-vol { font-size: var(--fs-body); color: var(--text-1); }
.crm .dar-v-vol { font-variant-numeric: tabular-nums; white-space: nowrap; }
.crm .dar-v-kunde { font-size: var(--fs-meta); color: var(--text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; overflow-wrap: normal; }
.crm .dar-aktionen .btn:disabled { opacity: .5; cursor: not-allowed; transform: none; }
.crm .dar-aktionen { display: flex; justify-content: flex-end; gap: var(--s-2); margin-top: var(--s-2); }
.crm .dar-hinweis { font-size: var(--fs-body); color: var(--text-2); }
.crm .dar-fehler { display: flex; align-items: center; gap: var(--s-3); color: var(--text-1); }
@media (max-width: 75rem) { .crm .dar-stufen { grid-template-columns: repeat(2, minmax(0, 1fr)); } .crm .dar-vorschau { grid-template-columns: 1fr; } }
/* PR1.710 #1014 — Admin › Wissensgraph-Zugang (Vorlage K10): Suche, „Für alle", Liste mit Schalter. */
.crm .kgz { padding: var(--s-6); display: flex; flex-direction: column; gap: var(--s-3); }
.crm .kgz-sub { margin: calc(-1 * var(--s-2)) 0 var(--s-2); font-size: var(--fs-body); color: var(--text-2); }
.crm .kgz-werkzeug { display: flex; flex-wrap: wrap; gap: var(--s-3); align-items: stretch; }
.crm .kgz-suche { flex: 1 1 14rem; display: flex; align-items: center; gap: var(--s-2); padding: 0 var(--s-3); min-height: 2.5rem; border: .0625rem solid var(--border-strong); border-radius: var(--r-md); background: var(--bg-surface); color: var(--text-3); }
.crm .kgz-suche:focus-within { border-color: var(--ad-blue); }
.crm .kgz-suche input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; font: inherit; font-size: var(--fs-body); color: var(--text-1); }
.crm .kgz-alle { flex: none; min-height: 2.5rem; font-weight: 600; }
.crm .kgz-alle:disabled { opacity: .5; cursor: not-allowed; transform: none; }
.crm .kgz-liste { list-style: none; margin: 0; padding: 0; border-top: .0625rem solid var(--border); }
.crm .kgz-zeile { display: flex; align-items: center; gap: var(--s-3); padding: var(--s-3) var(--s-1); border-bottom: .0625rem solid var(--border); }
.crm .kgz-avatar { flex: none; display: inline-flex; }
.crm .kgz-text { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.crm .kgz-name { font-size: var(--fs-ui); font-weight: 600; color: var(--text-1); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.crm .kgz-unter { font-size: var(--fs-body); color: var(--text-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.crm .kgz-zeile .funk-switch { width: 2.75rem; height: 1.625rem; }
.crm .kgz-zeile .funk-switch-knopf { width: 1.25rem; height: 1.25rem; }
.crm .kgz-zeile .funk-switch[aria-checked="true"] .funk-switch-knopf { left: 1.25rem; }
.crm .kgz-zeile .funk-switch:focus-visible { outline-width: .14rem; }
.crm .kgz-leer, .crm .kgz-hinweis { margin: 0; font-size: var(--fs-body); color: var(--text-2); }
.crm .kgz-fehler { color: var(--text-1); }
.crm .kgz-fuss { margin: var(--s-1) 0 0; font-size: var(--fs-body); color: var(--text-2); }
/* PR1.756 (#1056) — Freischaltungen (Vorlage V25, Maße aus steuerung-admin.html, Abschnitt V25).
   Personen als Zeilen, Funktionen als Spalten. rem auf Basis 15 px (html, style.css). Schrift auf die Skala gerundet (18 → --fs-title wie V26,
   13 → --fs-meta, 12/12.5/11.5 → --fs-label, 14 → --fs-ui). */
.crm .fsz { padding: 0; overflow: hidden; }
.crm .fsz-kopf { display: flex; align-items: center; flex-wrap: wrap; gap: var(--s-2) 0.6667rem; padding: var(--s-4) 1.2rem 0.4rem; }
.crm .fsz-kopf-text { flex: 1 1 17.0667rem; min-width: 0; }
.crm .fsz-titel { margin: 0; font-size: var(--fs-title); font-weight: 600; line-height: 1.4; color: var(--text-1); }
.crm .fsz-hilfe { margin: 0.1333rem 0 0; font-size: var(--fs-meta); color: var(--text-3); }
.crm .fsz-werkzeug { display: flex; align-items: center; gap: 0.6667rem; flex-wrap: wrap; }
.crm .fsz-suche { flex: none; width: 18.6667rem; max-width: 100%; display: flex; align-items: center; gap: var(--s-2); padding: 0.4667rem var(--s-3); border: 0.0667rem solid var(--border); border-radius: var(--r-md); background: var(--bg-surface); color: var(--text-3); }
.crm .fsz-suche:focus-within { border-color: var(--ad-blue); box-shadow: 0 0 0 0.2rem var(--tint-blue); }
.crm .fsz-suche input { flex: 1; min-width: 0; border: 0; outline: 0; padding: 0; background: transparent; font: inherit; font-size: var(--fs-ui); line-height: 1.4; color: var(--text-1); }
.crm .fsz-suche input::placeholder { color: var(--text-3); }
.crm .fsz-auswahl { position: relative; display: inline-flex; align-items: center; }
.crm .fsz-auswahl .cs { width: auto; min-width: 0; flex: 0 0 auto; }
.crm .fsz-auswahl .cs-field { width: auto; min-width: 0; }
.crm .fsz .sr-only { position: absolute; width: 0.0667rem; height: 0.0667rem; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.crm .fsz-hinweis { margin: var(--s-2) 1.2rem; font-size: var(--fs-meta); color: var(--text-2); }
.crm .fsz-fehler { color: var(--text-1); margin: 0; }
.crm .fsz-fehler-box { display: flex; flex-direction: column; align-items: flex-start; gap: var(--s-3); padding: var(--s-3) 1.2rem var(--s-5); }
.crm .fsz-laedt { padding: 0 1.2rem var(--s-4); }
.crm .fsz-rahmen { overflow-x: auto; }
.crm .fsz-tab { width: 100%; min-width: 55.4667rem; border-collapse: collapse; table-layout: fixed; }
.crm .fsz-tab thead tr, .crm .fsz-tab tbody tr { background: transparent; border-bottom: 0; }
.crm .fsz-tab th { white-space: normal; position: relative; padding: var(--s-3) 0.6667rem 0.6667rem; vertical-align: bottom; text-align: center; font-size: var(--fs-meta); font-weight: 600; line-height: 1.4; color: var(--text-1); border-bottom: 0.0667rem solid var(--border); }
.crm .fsz-tab th[data-col="person"] { width: var(--colw-person, 28%); text-align: left; padding-left: 1.2rem; }
.crm .fsz-tab th[data-col="wissensgraph"] { width: var(--colw-wissensgraph, auto); }
.crm .fsz-tab th[data-col="neue-oberflaeche"] { width: var(--colw-neue-oberflaeche, auto); }
.crm .fsz-tab th[data-col="cockpit-abfrage"] { width: var(--colw-cockpit-abfrage, auto); }
.crm .fsz-tab th[data-col="olympus"] { width: var(--colw-olympus, auto); }
.crm .fsz-tab th[data-col="cc-cockpit"] { width: var(--colw-cc-cockpit, auto); }
.crm .fsz-tab th[data-col="startseite"] { width: var(--colw-startseite, auto); }
.crm .fsz-tab th[data-col="datenherz"] { width: var(--colw-datenherz, auto); }
.crm .fsz-kopf-name { display: block; white-space: nowrap; }
.crm .fsz-tab th:not([data-col="person"]) { padding-left: 0.4rem; padding-right: 0.4rem; }
.crm .fsz-tab th small { display: block; margin-top: 0.1333rem; font-size: var(--fs-label); font-weight: 400; color: var(--text-3); }
.crm .fsz-alle, .crm .fsz-alle-platz { display: inline-block; margin-top: 0.4667rem; padding: 0.0667rem 0.6rem; border: 0.0667rem solid color-mix(in srgb, var(--adm-blau, var(--ad-blue-700)) 22%, transparent); border-radius: 62.5rem; background: transparent; font: inherit; font-size: var(--fs-label); font-weight: 600; line-height: 1.4; color: var(--adm-blau, var(--ad-blue-700)); cursor: pointer; }
.crm .fsz-alle-platz { visibility: hidden; min-height: 1.2667rem; }
/* PR1.780 — Kopf-Schalter „für alle“ (Pythia) an der Stelle des Knopfs „für alle an“. */
.crm .fsz-alle-schalter { display: inline-flex; align-items: center; gap: var(--s-2); margin-top: 0.2667rem; }
.crm .fsz-alle-text { font-size: var(--fs-label); font-weight: 600; line-height: 1.4; color: var(--adm-blau, var(--ad-blue-700)); white-space: nowrap; }
.crm .fsz-alle:hover:not(:disabled) { background: var(--tint-blue); }
.crm .fsz-alle:focus-visible { outline: 0.14rem solid var(--focus); outline-offset: 0.14rem; }
.crm .fsz-tab .funk-switch:focus-visible { outline: 0.14rem solid var(--focus); outline-offset: 0.14rem; }
.crm .fsz-alle:disabled { opacity: .5; cursor: not-allowed; }
.crm .fsz-alle[aria-busy="true"] { cursor: progress; }
.crm .fsz-tab .col-resize { position: absolute; top: 0.4667rem; right: -0.0625rem; bottom: 0.4667rem; width: 0.4rem; z-index: 2; cursor: col-resize; touch-action: none; }
.crm .fsz-tab .col-resize::after { content: ""; position: absolute; top: 0; bottom: 0; left: 0.1333rem; width: 0.1333rem; border-radius: 0.0667rem; background: var(--border-strong); }
.crm .fsz-tab .col-resize:hover::after, .crm .fsz-tab .col-resize:focus-visible::after { left: 0.1rem; width: 0.2rem; background: var(--ad-blue); }
.crm .fsz-tab .col-resize:focus-visible { outline: 0.14rem solid var(--focus); outline-offset: 0; }
.crm .fsz-tab td { padding: 0.9333rem 0.6667rem; text-align: center; font-size: var(--fs-ui); border-top: 0.0667rem solid var(--border); }
.crm .fsz-tab td:first-child { text-align: left; padding-left: 1.2rem; }
.crm .fsz-tab tbody tr:first-child td { border-top: 0; }
.crm .fsz-tab tr.fsz-admin td { background: var(--bg-surface-2); }
.crm .fsz-wer { display: flex; align-items: center; gap: 0.7333rem; min-width: 0; }
.crm .fsz-foto { flex: none; display: inline-flex; width: 2.4rem; height: 2.4rem; }
.crm .fsz-foto .emp-avatar { width: 2.4rem !important; height: 2.4rem !important; }
.crm .fsz-foto-leer { position: relative; display: inline-grid; place-items: end center; width: 2.4rem; height: 2.4rem; border-radius: 50%; overflow: hidden; background: color-mix(in srgb, var(--border-strong) 71%, var(--bg-surface-3)); color: color-mix(in srgb, var(--border-strong) 69%, var(--text-3)); }
.crm .fsz-foto-leer svg { width: 76%; height: 76%; }
.crm .fsz-wer-text { min-width: 0; display: flex; flex-direction: column; }
.crm .fsz-name { font-size: var(--fs-ui); font-weight: 500; color: var(--text-1); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.crm .fsz-rolle-text { font-size: var(--fs-label); color: var(--text-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.crm .fsz-tab .funk-switch { width: 2.5333rem; height: 1.4667rem; border: 0; background: var(--border-strong); vertical-align: middle; }
.crm .fsz-tab .funk-switch-knopf { top: 0.2rem; left: 0.2rem; width: 1.0667rem; height: 1.0667rem; background: var(--bg-surface); box-shadow: var(--shadow-1); }
.crm .fsz-tab .funk-switch[aria-checked="true"] { background: var(--ad-blue); }
.crm .fsz-tab .funk-switch[aria-checked="true"] .funk-switch-knopf { left: 1.2667rem; }
.crm .fsz-tab .funk-switch:disabled { opacity: .45; }
.crm .fsz-tab .funk-switch[aria-busy="true"] { opacity: .7; }
.crm .fsz-strich { display: block; font-size: var(--fs-title); color: color-mix(in srgb, var(--border-strong) 85%, var(--text-3)); line-height: 1.4667rem; }
.crm .fsz-via { display: block; margin-top: 0.2rem; font-size: var(--fs-label); color: var(--text-3); }
.crm .fsz-leer { padding: var(--s-6) 1.2rem; text-align: left !important; font-size: var(--fs-body); color: var(--text-2); }
.crm .fsz-fuss { margin: 0; padding: var(--s-3) 1.2rem 0.9333rem; border-top: 0.0667rem solid var(--border); font-size: var(--fs-meta); color: var(--text-3); }
/* Lage/Betrieb im Admin-Panel: EIN Scroll-Bereich (der des Admin-Panels). */
.crm .adm-kb-bereich { display: flex; flex-direction: column; min-width: 0; }
.crm .adm-kb-bereich .kb-status-body { overflow: visible; }
.crm .crm-settings-schrift-wahl { display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-5); }
.crm .crm-settings-schrift-opt { display: inline-flex; align-items: center; gap: var(--s-2); font-size: var(--fs-body); color: var(--text-1); cursor: pointer; }
.crm .funk-switch { position: relative; flex: none; width: 2.5rem; height: 1.5rem; border-radius: 62.5rem; border: .0625rem solid var(--border-strong);
  background: var(--bg-surface-3); padding: 0; cursor: pointer; }
.crm .funk-switch-knopf { position: absolute; top: .125rem; left: .125rem; width: 1.125rem; height: 1.125rem; border-radius: 50%;
  background: var(--bg-card); box-shadow: var(--shadow-1); }
.crm .funk-switch[aria-checked="true"] { background: var(--primary); border-color: var(--primary); }
.crm .funk-switch[aria-checked="true"] .funk-switch-knopf { left: 1.125rem; }
.crm .funk-switch:disabled { opacity: .5; cursor: not-allowed; }
.crm .funk-switch[aria-busy="true"] { opacity: .7; cursor: progress; }
.crm .funk-switch:focus-visible { outline: .125rem solid var(--focus); outline-offset: .125rem; }

/* Leiste stapelt nach der Breite des Admin-Bereichs: bei 1280 px Fenster bleibt neben
   App-Navi + 15-rem-Leiste zu wenig fuer die Nutzertabelle (Befund Live-Abnahme). */
/* PR1.570 — gestapelt nicht mehr als Fliesstext (Gruppennamen grau zwischen den Eintraegen),
   sondern eine Zeile je Gruppe: Name links in fester Spalte, Eintraege rechts daneben. */
@container adm-layout (max-width: 76rem) {
  .crm .adm-layout > .adm-nav, .crm .adm-layout > .adm-main { flex: 1 1 100%; }
  .crm .adm-layout > .adm-nav { position: static; align-self: stretch; display: grid;
    grid-template-columns: minmax(8rem, max-content) minmax(0, 1fr); align-items: stretch; column-gap: var(--s-3); row-gap: 0; }
  /* Name auf Hoehe der ersten Eintragszeile (Knopf: --s-2 oben + Zeile), Trennlinie buendig. */
  .crm .adm-layout > .adm-nav .adm-nav-gruppe { grid-column: 1; padding: calc(var(--s-2) + .25rem) var(--s-2) 0; }
  .crm .adm-layout > .adm-nav .adm-nav-liste { grid-column: 2; flex-direction: row; flex-wrap: wrap; padding: .125rem 0; }
  .crm .adm-layout > .adm-nav .adm-nav-gruppe:not(:first-child),
  .crm .adm-layout > .adm-nav .adm-nav-gruppe:not(:first-child) + .adm-nav-liste { border-top: .0625rem solid var(--border); }
  .crm .adm-layout > .adm-nav .adm-nav-eintrag { width: auto; }
}
/* PR1.570 — Gegenstueck zur Schwelle in style.css fuer das Redesign-Raster (20rem-Spalten).
   Schwelle ab zwei Spalten (2 x 20rem + Abstand): bei 62.5rem griff sie live nie, weil das
   Raster bei 1280px Fensterbreite nur 936px (< 937.5px) breit ist. */
@container adm-ov (min-width: 42rem) {
  .crm .adm-ov-raster > .adm-ov-breit { grid-column: span 2; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   PR1.652 (#951) — Daten-Cockpit-Start: Vorschau-Karten, „Zuletzt gefragt", „Gespeichert".
   Markup kommt aus components/cockpit-start-model.js (neutrale dcs-*-Klassen); das
   Gegenstueck fuer die klassische Ansicht steht in style.css (#view-daten-cockpit).
   Nur Tokens und rem (Ratchet raw-px/raw-hex). Bewegung nach Blatt B: Karten fahren
   einmal gestaffelt ein, Mini-Balken wachsen einmal, Hover hebt 2 px. Bei reduzierter
   Bewegung bleibt nur eine Ueberblendung von 1 ms; der Stand-Punkt pulsiert nicht.
   ═══════════════════════════════════════════════════════════════════════════ */

/* PR1.659 Nachzug (#957) — Design-Sperre C1/C2: Kopf und Inhalt stehen in EINER mittigen Spalte
   (Bild: Titel, Eingabe, Karten, Listen auf gleicher Flucht), nicht über die volle Breite. */
.crm .page-head:has(+ .dcp-body) {
  padding-inline: max(1.375rem, calc((100% - var(--dcp-spalte, 54rem)) / 2));
  border-bottom: 0;
}
.crm .dcp-body > * { max-width: var(--dcp-spalte, 54rem); margin-inline: auto; }

.crm .dcs-abschnitt-kopf { display: flex; align-items: center; min-height: 1.75rem; justify-content: space-between; gap: var(--s-3); margin-bottom: var(--s-3); }
.crm .dcs-abschnitt-titel { margin: 0; }
.crm .dcs-link {
  appearance: none; background: none; border: none; padding: var(--s-1) var(--s-2);
  color: var(--text-2); font: inherit; font-size: var(--fs-ui); cursor: pointer;
  border-radius: var(--r-sm); text-decoration: underline; text-underline-offset: 0.2em;
}
.crm .dcs-link:hover { background: var(--bg-hover); color: var(--text-1); }
.crm .dcs-link:focus-visible,
.crm .dcs-karte:focus-visible,
.crm .dcs-zeile:focus-visible,
.crm .dcs-vorlage:focus-visible { outline: 0.125rem solid var(--focus); outline-offset: 0.125rem; }

.crm .dcs-karten { display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: var(--s-4); }
.crm .dcs-karte {
  appearance: none; text-align: left; font: inherit; color: var(--text-1); cursor: pointer;
  display: flex; flex-direction: column; gap: var(--s-2); min-width: 0;
  padding: var(--s-4); background: var(--bg-surface);
  border: 0.0625rem solid var(--border); border-radius: var(--r-lg);
  transition: transform var(--t-med), border-color var(--t-med), box-shadow var(--t-med);
}
.crm .dcs-karte:hover:not(:disabled) { transform: translateY(-0.125rem); border-color: var(--border-strong); }
.crm .dcs-karte:disabled { cursor: progress; }
.crm .dcs-karte-titel { display: flex; align-items: center; gap: var(--s-2); font-size: var(--fs-ui); font-weight: 600; color: var(--text-2); }
.crm .dcs-marke { flex: none; margin-left: auto; width: 0.5rem; height: 0.5rem; border-radius: 50%; background: var(--danger); }
.crm .dcs-zahl-zeile { display: flex; align-items: baseline; gap: var(--s-2); }
.crm .dcs-zahl { font-size: var(--fs-kpi); font-weight: 600; line-height: 1.1; color: var(--text-1); font-variant-numeric: tabular-nums; }
.crm .dcs-zahl-aus { font-size: var(--fs-body); font-weight: 500; color: var(--text-2); }
.crm .dcs-einheit { font-size: var(--fs-ui); color: var(--text-3); }
.crm .dcs-fuss { font-size: var(--fs-ui); color: var(--text-3); }
.crm .dcs-karte.is-fehler { border-style: dashed; }

.crm .dcs-balken { display: flex; align-items: flex-end; gap: var(--s-1); height: 2.5rem; }
.crm .dcs-balken-st { flex: 1; height: var(--h); background: var(--border-strong); border-radius: var(--r-xs) var(--r-xs) 0 0; transform-origin: bottom; }
.crm .dcs-balken-st.is-gross { background: var(--primary); }
.crm .dcs-logos { display: flex; align-items: center; gap: var(--s-1); min-height: 2.5rem; }
/* PR1.736-Nachzug — die Logos kommen aus accountLogoHtml (Logo oder Gebaeude-Flaeche, nie Buchstaben). */
.crm .dcs-logo-bild { border-radius: var(--r-sm); }
.crm .dcs-logo-mehr { font-size: var(--fs-ui); color: var(--text-3); margin-left: var(--s-1); }
.crm .dcs-anteil { display: block; height: 0.5rem; margin: var(--s-3) 0; border-radius: var(--r-xs); background: var(--bg-surface-3); overflow: hidden; }
.crm .dcs-anteil-teil { display: block; height: 100%; background: var(--primary); }

.crm .dcs-skel { display: block; border-radius: var(--r-sm); background: var(--bg-surface-3); }
.crm .dcs-skel-zahl { height: 2rem; width: 55%; }
.crm .dcs-skel-zeile { height: 0.875rem; width: 80%; }

.crm .dcs-vorlagen { list-style: none; margin: var(--s-3) 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--s-2); }
.crm .dcs-vorlage { appearance: none; font: inherit; font-size: var(--fs-ui); cursor: pointer; color: var(--text-2); background: var(--bg-surface); border: 0.0625rem solid var(--border); border-radius: var(--r-md); padding: var(--s-2) var(--s-3); }
.crm .dcs-vorlage:hover { background: var(--bg-hover); color: var(--text-1); }

.crm .dcs-spalten { display: grid; grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr)); gap: var(--s-4); }
.crm .dcs-spalten > .dcs-abschnitt { min-width: 0; }
.crm .dcs-box { background: var(--bg-surface); border: 0.0625rem solid var(--border); border-radius: var(--r-lg); padding: var(--s-4); }
.crm .dcs-liste { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--s-1); }
.crm .dcs-gruppe { font-size: var(--fs-ui); color: var(--text-3); padding: var(--s-2) var(--s-2) 0; }
.crm .dcs-zeile { appearance: none; width: 100%; font: inherit; text-align: left; cursor: pointer; display: flex; justify-content: space-between; gap: var(--s-3); align-items: baseline; background: none; border: none; border-radius: var(--r-sm); padding: var(--s-2); color: var(--text-1); }
.crm .dcs-zeile:hover { background: var(--bg-hover); }
.crm .dcs-zeile-ico { flex: none; display: inline-flex; align-self: center; color: var(--text-3); }
.crm .dcs-zeile-text { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.crm .dcs-zeile-meta { flex: none; font-size: var(--fs-ui); color: var(--text-3); }
.crm .dcs-leer-titel { margin: 0 0 var(--s-1); font-weight: 600; color: var(--text-1); }
.crm .dcs-leer-text { margin: 0 0 var(--s-2); color: var(--text-2); font-size: var(--fs-ui); }

.crm .dcs-stand { display: inline-flex; align-items: center; gap: var(--s-2); font-size: var(--fs-ui); color: var(--text-3); }
.crm .dcs-stand-punkt { width: 0.5rem; height: 0.5rem; border-radius: 50%; background: var(--success); animation: dcs-puls 2.4s ease-in-out infinite; }
.crm .dcs-galerie { scroll-margin-top: var(--s-4); }

.crm .tb-pfad { display: contents; }
/* Mit Pfad ist der Brotkrumen laenger: die Marke weicht dem Pfad (Layout-Wächter: bei 1280 Breite war die Kopfleiste sonst zu voll). */
.crm .tb-crumbs:has(.tb-pfad-link) .tb-brand-cluster,
.crm .tb-crumbs:has(.tb-pfad-link) .tb-brand-cluster + .sep { display: none !important; }
.crm .tb-pfad-link { color: var(--text-2); text-decoration: none; white-space: nowrap; border-radius: var(--r-xs); }
/* PR1.659 Nachzug (#957) — Mit Pfad bleibt der Seitenname ganz lesbar („Daten-Cockpit", nicht „Date…"):
   die Pfad-Links weichen zuerst und enden mit „…" (gewollte Kürzung), der Name selbst schrumpft nicht. */
.crm .tb-crumbs:has(.tb-pfad-link) #crm-crumb { flex: 0 0 auto; }
.crm .tb-pfad-link { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.crm .tb-pfad-link:hover { color: var(--text-1); text-decoration: underline; }
.crm .tb-pfad-link:focus-visible { outline: 0.125rem solid var(--focus); outline-offset: 0.125rem; }

@keyframes dcs-ein { from { opacity: 0; transform: translateY(0.625rem); } to { opacity: 1; transform: none; } }
@keyframes dcs-wachs { from { transform: scaleY(0); } to { transform: scaleY(1); } }
@keyframes dcs-puls { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } }
@keyframes dcs-blende { from { opacity: 0; } to { opacity: 1; } }

.crm .dcs-karte.is-ein { animation: dcs-ein 260ms var(--ease-out) both; animation-delay: calc(var(--k, 0) * 50ms); }
.crm .dcs-balken.is-wachsen .dcs-balken-st { animation: dcs-wachs 360ms var(--ease-out) both; animation-delay: calc(var(--i, 0) * 40ms); }

@media (prefers-reduced-motion: reduce) {
  .crm .dcs-karte.is-ein { animation: dcs-blende 1ms both; animation-delay: 0s; }
  .crm .dcs-balken.is-wachsen .dcs-balken-st { animation: dcs-blende 1ms both; animation-delay: 0s; }
  .crm .dcs-stand-punkt { animation: none; }
  .crm .dcs-karte { transition: none; }
  .crm .dcs-karte:hover:not(:disabled) { transform: none; }
}

.crm .dcs-abschnitt:has(> .dcs-link-oben) { position: relative; }
.crm .dcs-link-oben { position: absolute; top: 0; right: 0; }

/* ── PR1.658 (#956) — Pythia-Antwort: Belege mit Vorschau, Tabelle Zeile fuer Zeile,
   Folgefragen und Aktionen, Fuss. Zwilling zum Block in style.css. Nur Tokens (RD1.10). */
.crm {
  --pv-sprung: 200ms; --pv-ein: 180ms; --pv-zeile: 240ms; --pv-folge: 240ms;
  --chat-folge: var(--ad-orange-900);
  --chat-ocker: var(--ad-orange-900);
  --chat-heute: var(--ad-red-700);
}
.crm.dark, html[data-theme="dark"] .crm { --chat-folge: var(--ad-orange); --chat-ocker: var(--ad-orange); --chat-heute: var(--ad-red-300); }
.crm .chat-beleg:focus-visible { outline: var(--chat-linie-aktiv) solid var(--focus, var(--primary)); outline-offset: 0.0625rem; }
.crm .chat-beleg.is-springt { animation: belegSprung var(--pv-sprung) var(--ease-out) both; animation-delay: var(--sprung-d, 0ms); }
@keyframes belegSprung { from { opacity: 0; transform: scale(.6); } to { opacity: 1; transform: none; } }

.crm .pythia-vorschau {
  position: fixed; z-index: 950; width: 18.75rem; max-width: calc(100vw - 1rem); pointer-events: none;
  padding: var(--s-3); border: var(--chat-linie) solid var(--border); border-radius: var(--r-md); background: var(--bg-surface);
  box-shadow: var(--shadow-2); color: var(--text-1); font-size: var(--fs-ui);
  opacity: 0; transform: scale(.96); transform-origin: top center;
  transition: opacity var(--pv-ein) var(--ease-out), transform var(--pv-ein) var(--ease-out);
}
.crm .pythia-vorschau[data-ort="oben"] { transform-origin: bottom center; }
.crm .pythia-vorschau.is-da { opacity: 1; transform: none; }
.crm .pv-kopf { display: flex; align-items: center; gap: var(--s-2); }
.crm .pv-text { min-width: 0; }
.crm .pv-titel { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.crm .pv-hinweis { color: var(--text-2); font-size: var(--fs-meta); }
.crm .pv-zeilen { margin: var(--s-2) 0 0; display: grid; gap: var(--s-1); }
.crm .pv-zeilen > div { display: grid; grid-template-columns: 4.5rem 1fr; gap: var(--s-3); }
.crm .pv-zeilen dt { color: var(--text-2); }
.crm .pv-zeilen dd { margin: 0; text-align: left; font-weight: 600; }
.crm .pv-zeilen .pv-rot { color: var(--chat-heute); font-weight: 600; }
.crm .pv-zeilen .pv-ocker { color: var(--chat-ocker); font-weight: 600; }
.crm .pv-beleg { margin: var(--s-2) 0 0; color: var(--text-2); font-size: var(--fs-meta); }
.crm .pv-fehlt { margin: var(--s-2) 0 0; color: var(--text-2); }
.crm .pv-skelett { display: grid; gap: var(--s-2); margin-top: var(--s-3); }
.crm .pv-skelett span { display: block; height: 0.625rem; border-radius: var(--r-sm); background: var(--border); }
.crm .pv-skelett span:nth-child(2) { width: 70%; }
.crm .pv-skelett span:nth-child(3) { width: 45%; }

.crm .chat-zeile-logo { display: inline-flex; vertical-align: middle; margin-right: var(--s-2); }
.crm .chat-zeile-klick { cursor: pointer; }
.crm .chat-zeile-klick:hover > td { background: var(--bg-surface-2); }
.crm .chat-datum-rot { color: var(--chat-heute); font-weight: 600; }
.crm .chat-besetzung-fehlt { color: var(--chat-ocker); font-weight: 500; }
.crm .chat-phase { display: inline-block; padding: 0 var(--s-2); border-radius: var(--r-lg); border: var(--chat-linie) solid var(--border); font-size: var(--fs-meta); }
.crm .chat-phase-proposal { border-color: var(--chat-link); color: var(--chat-link); }
.crm .chat-liste-alle { margin-top: var(--s-2); }
/* PR1.658 Nachzug (#956) — Ergebnistabelle nach Bild P3: weisse Karte ohne Kopfzeile, ruhige
   Trennlinien, Name fett mit Logo, Phase als gefuelltes Schild. Zwischenstaende stehen im Suchweg. */
.crm .chat-fund.chat-ergebnis { padding: 0; background: var(--bg-surface); border: var(--chat-linie) solid var(--border); border-radius: var(--r-md); overflow: hidden; }
.crm .chat-ergebnis-tabelle { width: 100%; border-collapse: collapse; }
.crm .chat-fund.chat-ergebnis .chat-ergebnis-tabelle th { text-align: left; font-weight: 500; font-size: var(--fs-meta); color: var(--text-3); padding: var(--s-2) var(--s-3); border-bottom: var(--chat-linie) solid var(--border); background: none; }
.crm .chat-ergebnis-tabelle td { padding: var(--s-3); border-bottom: var(--chat-linie) solid var(--border); vertical-align: middle; }
.crm .chat-ergebnis-tabelle tr:last-child > td { border-bottom: 0; }
.crm .chat-ergebnis-name { font-weight: 600; color: var(--text-1); }
.crm .chat-ergebnis-tabelle .chat-phase { border: 0; padding: 0.125rem var(--s-2); background: var(--bg-surface-2); color: var(--text-2); font-weight: 500; }
.crm .chat-ergebnis-tabelle .chat-phase-proposal { background: color-mix(in srgb, var(--chat-link) 12%, transparent); color: var(--chat-link); }
.crm .chat-fund.chat-ergebnis .chat-ergebnis-tabelle thead tr { background: none; }
.crm .chat-besetzung { color: var(--text-2); }
.crm .chat-ergebnis-tabelle .chat-besetzung-fehlt, .crm .chat-ergebnis-tabelle .chat-datum { white-space: nowrap; }
.crm .chat-ergebnis-tabelle td { padding-top: var(--s-2); padding-bottom: var(--s-2); }
.crm .chat-ergebnis > .chat-fund-hinweis, .crm .chat-ergebnis > .chat-liste-alle { margin: var(--s-2) var(--s-3); }
.crm .chat-luecke-zu { margin-top: var(--s-2); font-size: var(--fs-meta); color: var(--text-3); }
.crm .chat-luecke-zu > summary { cursor: pointer; width: max-content; }
.crm .chat-luecke-zu > .chat-luecke { margin-top: var(--s-2); }
.crm .chat-tabelle-ein { animation: tabelleEin var(--pv-zeile) var(--ease-out) both; animation-delay: var(--zeile-d, 0ms); }
@keyframes tabelleEin { from { opacity: 0; transform: translateY(0.625rem); } to { opacity: 1; transform: none; } }

.crm .chat-weiter { display: flex; flex-direction: column; gap: var(--s-2); margin-top: var(--s-3); }
.crm .chat-folgen, .crm .chat-weiter-aktionen { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.crm .chat-folge, .crm .chat-weiter-aktion { appearance: none; font: inherit; font-size: var(--fs-ui); cursor: pointer; }
.crm .chat-folge { padding: var(--s-1) var(--s-3); border: var(--chat-linie) solid var(--chat-folge); border-radius: var(--r-lg); background: none; color: var(--chat-folge); }
.crm .chat-folge:hover { background: var(--pythia-terra-grund); }
.crm .chat-folge-stern, .crm .chat-besetzung-zeichen, .crm .chat-fuss-zeichen { display: inline-flex; vertical-align: middle; }
.crm .chat-besetzung-zeichen { margin-right: var(--s-1); }
.crm .chat-weiter-aktion { padding: var(--s-1) var(--s-3); border: var(--chat-linie) solid var(--border); border-radius: var(--r-sm); background: var(--bg-surface-2); color: var(--text-2); }
.crm .chat-weiter-aktion:hover:not(:disabled) { color: var(--text-1); border-color: var(--text-3); }
.crm .chat-weiter-aktion:disabled { cursor: default; opacity: .6; }

/* ── PR1.813 (#1151) — Pythia „Hinbringen“ und „Zeig mir“ ────────────────────
   Knopf „Zeig mir“ in der Knopfreihe: Pythia-Orange als Rand, sonst wie eine Aktion.
   Ring um das Ziel-Element + Kärtchen mit dem Schritt. Über Masken (z 90) und Leiste (80). */
.crm .chat-weiter-aktion.is-zeigen { border-color: var(--pythia-terra); color: var(--pythia-terra); background: none; font-weight: 500; }
.crm .chat-weiter-aktion.is-zeigen:hover:not(:disabled) { border-color: var(--pythia-terra); color: var(--pythia-terra); background: var(--pythia-terra-grund); }
.crm .pythia-zeig-ring { position: fixed; z-index: 1200; pointer-events: none; border: 0.125rem solid var(--pythia-terra); border-radius: var(--r-md); box-shadow: 0 0 0 0.25rem color-mix(in srgb, var(--pythia-terra) 22%, transparent); }
.crm .pythia-zeig-ring.is-ein { animation: pythiaZeigEin var(--mo-enter) var(--ease-out) 1; }
@keyframes pythiaZeigEin { from { opacity: 0; transform: scale(1.06); } to { opacity: 1; transform: scale(1); } }
.crm .pythia-zeig-karte { position: fixed; z-index: 1201; width: 20rem; max-width: calc(100vw - 2rem); padding: var(--s-3) var(--s-4) var(--s-4); background: var(--bg-surface); color: var(--text-1); border: 0.0625rem solid var(--border-strong); border-left: 0.1875rem solid var(--pythia-terra); border-radius: var(--r-md); box-shadow: var(--shadow-3); }
.crm .pythia-zeig-karte:focus { outline: none; }
.crm .pythia-zeig-karte:focus-visible { outline: 0.125rem solid var(--focus); outline-offset: 0.125rem; }
.crm .pythia-zeig-kopf { display: flex; align-items: center; gap: var(--s-2); margin-bottom: var(--s-2); font-size: var(--fs-meta); }
.crm .pythia-zeig-marke { color: var(--pythia-terra); font-weight: 600; }
.crm .pythia-zeig-zaehler { color: var(--text-3); }
.crm .pythia-zeig-zu { appearance: none; margin-left: auto; border: 0; background: none; color: var(--text-3); font: inherit; font-size: var(--fs-section); line-height: 1; padding: 0 var(--s-1); border-radius: var(--r-sm); cursor: pointer; }
.crm .pythia-zeig-zu:hover { color: var(--text-1); }
.crm .pythia-zeig-text { margin: 0; font-size: var(--fs-body); line-height: 1.45; }
.crm .pythia-zeig-text strong { font-weight: 600; }
.crm .pythia-zeig-text.is-leise { color: var(--text-2); }
.crm .pythia-zeig-hinweis { margin: var(--s-2) 0 0; font-size: var(--fs-meta); color: var(--text-2); }
.crm .pythia-zeig-knoepfe { display: flex; justify-content: flex-end; gap: var(--s-2); margin-top: var(--s-3); }
@media (prefers-reduced-motion: reduce) { .crm .pythia-zeig-ring.is-ein { animation: none; } }

.crm .chat-folge:focus-visible, .crm .chat-weiter-aktion:focus-visible, .crm .chat-fuss-knopf:focus-visible { outline: var(--chat-linie-aktiv) solid var(--focus, var(--primary)); outline-offset: 0.0625rem; }
.crm .chat-weiter:not(.is-ruhig) .chat-folge, .crm .chat-weiter:not(.is-ruhig) .chat-weiter-aktion { animation: folgeEin var(--pv-folge) var(--ease-out) both; animation-delay: var(--ein-d, 0ms); }
@keyframes folgeEin { from { opacity: 0; transform: translateY(var(--s-2)); } to { opacity: 1; transform: none; } }

.crm .chat-fuss { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-1) var(--s-3); margin-top: var(--s-3); color: var(--text-2); font-size: var(--fs-meta); }
.crm .chat-fuss-knopf { appearance: none; background: none; border: 0; padding: 0.125rem var(--s-1); border-radius: var(--r-sm); font: inherit; color: var(--text-2); cursor: pointer; }
.crm .chat-fuss-knopf:hover:not(:disabled) { color: var(--text-1); text-decoration: underline; }
.crm .chat-fuss-knopf[aria-pressed="true"] { color: var(--text-1); font-weight: 600; }
.crm .chat-fuss-knopf:disabled { cursor: default; opacity: .6; }

/* PR1.809 (#1147, Entwurf abgenommen 10.11.2026): Text · ein Ergebnis · eine Knopfreihe (max. 3),
   der Rest hinter „Mehr“. Täglich genutzt → Auf- und Zuklappen ohne Bewegung. */
.crm .chat-reihe { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); margin-top: var(--s-3); }
.crm .chat-mehr-knopf { appearance: none; display: inline-flex; align-items: center; gap: 0.25rem; padding: var(--s-1) var(--s-2); border: 0; border-radius: var(--r-sm); background: none; font: inherit; font-size: var(--fs-ui); color: var(--text-2); cursor: pointer; }
.crm .chat-mehr-knopf:hover { color: var(--text-1); }
.crm .chat-mehr-knopf[aria-expanded="true"] { color: var(--text-1); font-weight: 600; }
.crm .chat-mehr-pfeil { display: inline-flex; }
.crm .chat-mehr-winkel { flex: none; }
.crm .chat-mehr-knopf[aria-expanded="true"] .chat-mehr-winkel { transform: rotate(180deg); }
.crm .chat-mehr-knopf:focus-visible, .crm .chat-mehr-beleg:focus-visible { outline: var(--chat-linie-aktiv) solid var(--focus, var(--primary)); outline-offset: 0.0625rem; }
.crm .chat-ohne-beleg { display: inline-flex; align-items: center; gap: 0.25rem; font-size: var(--fs-meta); }
.crm .chat-mehr { display: grid; gap: var(--s-3); max-width: 46rem; margin-top: var(--s-2); padding: var(--s-3) var(--s-4); border-left: var(--chat-linie) solid var(--border); font-size: var(--fs-meta); color: var(--text-2); }
.crm .chat-mehr h4 { margin: 0 0 var(--s-1); font-size: var(--fs-meta); font-weight: 600; color: var(--text-1); }
.crm .chat-mehr ol, .crm .chat-mehr ul { margin: 0; padding-left: 1.25rem; }
.crm .chat-mehr li + li { margin-top: 0.125rem; }
.crm .chat-mehr p { margin: 0; }
.crm .chat-mehr .chat-reihe { margin-top: 0; }
.crm .chat-mehr-beleg { display: inline; vertical-align: top; appearance: none; padding: 0; border: 0; background: none; font: inherit; color: var(--ad-blue); text-align: left; cursor: pointer; }
/* dunkel: helle Blaustufe (AA auf dunklem Grund), wie die Belegmarken */
html[data-theme="dark"] .crm .chat-mehr-beleg, .crm.dark .chat-mehr-beleg { color: var(--ad-blue-300); }
.crm .chat-mehr-leise { color: var(--text-3); }
.crm .chat-mehr-fuss { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-1) var(--s-3); padding-top: var(--s-2); border-top: var(--chat-linie) solid var(--border); }
.crm .chat-mehr-fuss .chat-fuss-knopf { padding-left: 0; }
.crm .chat-mehr-stand { margin-right: var(--s-2); color: var(--text-3); }
/* PR1.809: die Ergebniszelle traegt Logo + Titel als Block-Elemente. Mit text-overflow: ellipsis
   am td ersetzte Chrome den ganzen Titel durch „…" (die Namen fehlten); gekuerzt wird im Titel. */
.crm table.xl-prop.xl-fixed tbody td.chat-ergebnis-name.xl-cut { text-overflow: clip; }
/* PR1.809: Kunde und Titel teilen sich die Zelle — in der schmalen Leiste bekommt der Kunde
   hoechstens die Haelfte (dann mit „…"), der Titel den Rest (mit „…"); keiner verschwindet. */
.crm td.chat-ergebnis-name > span.chat-ergebnis-titel { display: inline-flex; max-width: calc(100% - 1.875rem); }
.crm td.chat-ergebnis-name .chat-ergebnis-titel > .chat-ergebnis-kunde { max-width: 50%; overflow: hidden; text-overflow: ellipsis; }
/* PR1.809: in der schmalen Leiste (Ergebnis < 34rem) reicht eine Zeile nicht — Kunde und Titel
   stehen untereinander, beide ueber die volle Zellbreite und mit „…". */
.crm .chat-funde { container-type: inline-size; }
@container (max-width: 34rem) {
  .crm .chat-funde td.chat-ergebnis-name > span.chat-ergebnis-titel { display: inline-flex; flex-direction: column; align-items: stretch; max-width: 100%; }
  .crm td.chat-ergebnis-name .chat-ergebnis-titel > .chat-ergebnis-kunde { max-width: 100%; font-weight: 400; color: var(--text-2); font-size: var(--fs-meta); }
  .crm td.chat-ergebnis-name .chat-ergebnis-titel > .chat-ergebnis-trenner { display: none; }
  .crm td.chat-ergebnis-name .chat-ergebnis-titel > .chat-ergebnis-opp { max-width: 100%; }
  .crm td.chat-ergebnis-name > .chat-zeile-logo { display: none; }
}
/* BF-175 — in der Leiste verteilt keine Spaltenautomatik die Breite (column-resize.js nimmt die
   Tabelle aus): Phase, Start und Besetzung bekommen schmale Spalten, der Name den Rest.
   Kunde klein oben (eine Zeile), Titel darunter in bis zu zwei Zeilen; Besetzung darf umbrechen. */
/* Nachzug 3: keine festen rem-Spalten mehr — die Schriftstufe (Admin › Darstellung) hebt nur die
   Schrift, nicht rem, feste Breiten liefen bei „Groß" ueber. Phase, Start und Besetzung schrumpfen
   auf ihren Inhalt (width: 1 %): Pille und Datum einzeilig, Besetzung bricht nur an Wortgrenzen,
   ihre Mindestbreite ist also das laengste Wort. Der Name nimmt den Rest (width: 100 %). */
.crm .pythia-leiste .chat-ergebnis-tabelle { table-layout: auto; }
.crm .pythia-leiste .chat-ergebnis-tabelle :is(th, td):first-child { width: 100%; }
.crm .pythia-leiste .chat-ergebnis-tabelle :is(th, td):not(:first-child) { width: 1%; }
.crm .pythia-leiste .chat-ergebnis-tabelle :is(th, td):is(:nth-child(2), :nth-child(3)) { white-space: nowrap; }
.crm .pythia-leiste .chat-fund.chat-ergebnis .chat-ergebnis-tabelle th,
.crm .pythia-leiste .chat-ergebnis-tabelle td { padding-inline: var(--s-2); }
.crm .pythia-leiste .chat-fund.chat-ergebnis .chat-ergebnis-tabelle :is(th, td):not(:first-child) { padding-inline: var(--s-1); }
.crm .pythia-leiste .chat-ergebnis-tabelle td.chat-ergebnis-name { white-space: normal; }
.crm .pythia-leiste td.chat-ergebnis-name > span.chat-ergebnis-titel { display: flex; flex-direction: column; align-items: stretch; max-width: 100%; white-space: normal; }
.crm .pythia-leiste td.chat-ergebnis-name .chat-ergebnis-titel > .chat-ergebnis-opp {
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2;
  max-width: 100%; overflow: hidden; white-space: normal; overflow-wrap: anywhere;
}
.crm .pythia-leiste .chat-ergebnis-tabelle .chat-besetzung-fehlt { white-space: normal; }
/* Nachzug 3: Warnzeichen nie allein in einer Zeile — es sitzt im Einzug der ersten Zeile, so
   bleibt es bei „niemand", und die Spalte ist nur so breit wie Zeichen + „niemand". */
.crm .pythia-leiste .chat-ergebnis-tabelle .chat-besetzung-fehlt { position: relative; display: inline-block; text-indent: calc(1rem + var(--s-1)); }
.crm .pythia-leiste .chat-ergebnis-tabelle .chat-besetzung-zeichen { position: absolute; left: 0; top: calc((1lh - 1rem) / 2); margin: 0; text-indent: 0; }
/* Nachzug 3 (Reparatur): Namen brechen nur an Wortgrenzen (nie „Maximili/an"); die Besetzung steht
   als Nebentext eine Stufe kleiner, damit das laengste Namenswort dem Titel keinen Platz nimmt. */
.crm .pythia-leiste .chat-ergebnis-tabelle :is(.chat-besetzung, .chat-besetzung-fehlt) { font-size: var(--fs-meta); overflow-wrap: normal; }

@media (prefers-reduced-motion: reduce) {
  .crm .chat-beleg.is-springt, .crm .chat-tabelle-ein, .crm .chat-weiter .chat-folge, .crm .chat-weiter .chat-weiter-aktion { animation: none; }
  .crm .pythia-vorschau { transform: none; transition: opacity var(--pv-ein) linear; }
}

/* ── Import direkt in der Liste: Ablage, Leiste, Vorschau-Zeilen, Fragen-Karte ─────────── */
.crm .imp-host { position: relative; }
.crm .imp-ablage {
  position: absolute; inset: 0; z-index: 40; display: flex; align-items: center; justify-content: center;
  background: color-mix(in srgb, var(--bg-app) 86%, transparent);
  border: 0.125rem dashed var(--ad-blue); border-radius: var(--r-lg);
  animation: imp-ein 120ms var(--ease-out) both;
}
.crm .imp-ablage-box { max-width: 30rem; text-align: center; padding: 1.5rem; display: flex; flex-direction: column; gap: 0.75rem; align-items: center; }
.crm .imp-ablage-icon svg { width: 3rem; height: 3rem; color: var(--ad-blue); }
.crm .imp-ablage-titel { font-size: var(--fs-title); font-weight: 600; color: var(--text-1); }
.crm .imp-ablage-text, .crm .imp-ablage-tipp { color: var(--text-2); }
.crm .imp-chips { display: flex; flex-wrap: wrap; gap: 0.375rem; justify-content: center; }
.crm .imp-chip { background: var(--tint-blue); border-radius: var(--r-sm); padding: 0.125rem 0.5rem; color: var(--text-1); }
@keyframes imp-ein { from { opacity: 0; } to { opacity: 1; } }

.crm .imp-leiste { border: 0.0625rem solid var(--ad-blue); border-radius: var(--r-lg); background: var(--bg-card); padding: 0.75rem 1rem; display: flex; flex-direction: column; gap: 0.5rem; }
.crm .imp-leiste-kopf { display: flex; align-items: center; gap: 0.75rem; flex-wrap: wrap; }
.crm .imp-leiste-icon svg { width: 1.5rem; height: 1.5rem; color: var(--ad-blue); }
.crm .imp-leiste-text { flex: 1 1 16rem; min-width: 0; }
.crm .imp-leiste-knoepfe { display: flex; gap: 0.5rem; flex-wrap: wrap; margin-left: auto; }
.crm .imp-punkte { display: flex; gap: 0.875rem; flex-wrap: wrap; margin-top: 0.25rem; color: var(--text-2); }
.crm .imp-punkt { display: inline-flex; align-items: center; gap: 0.375rem; }
.crm .imp-punkt .pip { width: 0.5rem; height: 0.5rem; border-radius: 50%; background: var(--ad-blue); }
.crm .imp-punkt-ergaenzt .pip { background: var(--ad-violet); }
.crm .imp-punkt-frage .pip { background: var(--ad-orange); }
.crm .imp-punkt-schon .pip { background: var(--text-2); }
.crm .imp-verkn-bestand .imp-verkn-icon svg { color: var(--text-2); }
.crm .imp-btn-frage { border-color: var(--ad-orange); }
.crm .imp-hinweis, .crm .imp-bestand-hinweis { color: var(--text-3); margin-top: 0.25rem; }
.crm .imp-fehler { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; color: var(--danger); }
.crm .imp-fortschritt { display: flex; gap: 0.25rem; }
.crm .imp-fp { flex: 1; height: 0.25rem; border-radius: var(--r-xs); background: var(--border); }
.crm .imp-fp-fertig { background: var(--ad-blue); }
.crm .imp-fp-liest { background: var(--ad-blue-300); }
.crm .imp-fp-fehler { background: var(--danger); }

.crm .imp-zeilen { padding: 0; overflow: auto; flex: none; }  /* flex: none — sonst schrumpft die Karte im Spalten-Container auf 2px */
.crm .imp-tabelle td, .crm .imp-tabelle th { text-align: left; }
.crm .imp-zeile > td:first-child { box-shadow: inset 0.1875rem 0 0 var(--ad-blue); }
.crm .imp-zeile-ergaenzt > td:first-child { box-shadow: inset 0.1875rem 0 0 var(--ad-violet); }
.crm .imp-zeile-frage > td:first-child { box-shadow: inset 0.1875rem 0 0 var(--ad-orange); }
.crm .imp-zeile-schon > td:first-child { box-shadow: inset 0.1875rem 0 0 var(--border-strong); }
.crm .imp-zeile[data-imp-frage-zeile] { cursor: pointer; }
.crm .imp-zeile[data-imp-frage-zeile]:focus-visible { outline: 0.125rem solid var(--focus); outline-offset: -0.125rem; }
.crm .imp-name { display: flex; align-items: center; gap: 0.5rem; flex-wrap: nowrap; min-width: 0; }
.crm .imp-name-text { font-weight: 600; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.crm .imp-etikett { flex: none; white-space: nowrap; }
.crm .tbl tbody tr.imp-zeile-frage > td { background: color-mix(in srgb, var(--tint-warn) 70%, transparent); }
.crm .imp-zahl { text-align: right; }
.crm .imp-kunde { color: var(--text-2); }
.crm .imp-kunde.imp-ungueltig { display: flex; flex-wrap: wrap; gap: 0.125rem 0.25rem; max-width: 17.5rem; margin-top: 0.125rem; }
.crm .imp-kunde.imp-ungueltig .imp-luecke { white-space: nowrap; }
/* PR1.677 — Verknüpfung unter dem Projektnamen: Kette + Text (gewonnene Opportunity | Schatten-Opp) */
.crm .imp-verkn { display: flex; align-items: center; gap: 0.375rem; color: var(--text-2); min-width: 0; }
.crm .imp-verkn > span:last-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.crm .imp-verkn-icon svg { width: 1rem; height: 1rem; flex: none; }
.crm .imp-mit-logo { display: flex; align-items: center; gap: 0.75rem; }
.crm .imp-logo { flex: none; display: inline-flex; }
.crm .imp-name-spalte { min-width: 0; }
.crm .imp-zelle-projekt .imp-name { flex-wrap: nowrap; }
.crm .imp-zelle-projekt { padding-block: 0.625rem; }
.crm .imp-zelle-projekt .imp-name-text { flex: 0 1 auto; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.crm .imp-zelle-projekt .imp-verkn { line-height: 1.4; margin-top: 0.125rem; }
.crm .imp-zelle-projekt .imp-verkn > span:last-child { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.crm .imp-verkn-opp { color: var(--ad-blue-800); }
.crm .imp-verkn-opp .imp-verkn-icon svg { color: var(--ad-blue); }
.crm .imp-etikett { border-radius: var(--r-sm); padding: 0 0.5rem; background: var(--tint-blue); color: var(--ad-blue-800); }
.crm .imp-etikett-ergaenzt { background: var(--tint-violet); color: var(--ad-violet-600); }
.crm .imp-etikett-frage { background: var(--tint-orange); color: var(--ad-orange-900); }
.crm .imp-etikett-schon { background: var(--bg-subtle); color: var(--text-2); }
.crm .imp-luecke { background: var(--tint-warn); border-radius: var(--r-xs); padding: 0 0.375rem; color: var(--text-1); }
.crm .imp-aus-import { color: var(--text-3); }
/* PR1.677 Nachzug 5 — Ganz-Prüfung 1280/1366/1440: Vorschau-Zeilen machen die Tabelle nicht breiter als den Platz
   (Zeitraum bricht in der Zelle um, Namenszelle ist gedeckelt, der Titel kürzt mit Auslassung). */
.crm .tbl.tbl-clickable:has(tr.imp-zeile) tbody tr.imp-zeile > td { white-space: normal; }
.crm .tbl.tbl-clickable:has(tr.imp-zeile) tbody tr.imp-zeile > td.imp-zelle-projekt { min-width: 16rem; max-width: 28rem; }
@media (max-width: 100em) {
  .crm .tbl.tbl-clickable:has(tr.imp-zeile) th, .crm .tbl.tbl-clickable:has(tr.imp-zeile) td { padding-inline: 0.5rem; }
}
@media (max-width: 87.5em) {
  .crm .tbl.tbl-clickable:has(tr.imp-zeile) tbody tr.imp-zeile > td.imp-zelle-projekt { max-width: 22rem; }
  .crm #crm-project-kennzahlen .opp-kz { padding-inline: .375rem; }
  .crm .tbl.tbl-clickable:has(tr.imp-zeile) .imp-zelle-projekt .imp-verkn > span:last-child { white-space: normal; overflow: visible; text-overflow: clip; }
}
@media (max-width: 80em) { .crm .tbl.tbl-clickable:has(tr.imp-zeile) tbody tr.imp-zeile > td.imp-zelle-projekt { max-width: 20rem; } }
.crm .imp-mehr, .crm .imp-bestand-hinweis { margin: 0.5rem 1rem; }
.crm .imp-bestand-blass { opacity: 0.55; }
.crm .imp-bestand-blass:focus-within { opacity: 1; }  /* kein :hover — sonst wirkt der Bestand unter dem Mauszeiger nie blass */
.crm .imp-mit-vorschau tbody tr:not(.imp-zeile):not(.imp-fuss) { opacity: 0.55; }
.crm .imp-mit-vorschau tbody tr:not(.imp-zeile):not(.imp-fuss):focus-within { opacity: 1; }
.crm .imp-fuss td { padding: 0.25rem 0.75rem; text-align: left; }
.crm .imp-fuss .imp-mehr, .crm .imp-fuss .imp-bestand-hinweis { margin: 0.25rem 0; }
.crm .imp-karte-balken { height: 0.25rem; border-radius: var(--r-xs); background: var(--border); overflow: hidden; margin: -0.25rem 0 0; }
.crm .imp-karte-balken > span { display: block; height: 100%; background: var(--ad-blue); transition: width 120ms var(--ease-out); }
.crm .imp-neu-aufleuchten { animation: imp-gruen 600ms var(--ease-out) both; }
@keyframes imp-gruen { from { background: var(--tint-green); } to { background: transparent; } }

.crm .imp-karte {
  position: fixed; right: 1.5rem; top: 6rem; z-index: 50; width: min(26rem, calc(100vw - 2rem));
  background: var(--bg-card); border: 0.0625rem solid var(--border); border-radius: var(--r-xl);
  box-shadow: var(--shadow-3); padding: 1rem; display: flex; flex-direction: column; gap: 0.75rem;
}
.crm .imp-karte-kopf { display: flex; align-items: center; gap: 0.5rem; }
.crm .imp-karte-pos { color: var(--text-3); margin-right: auto; }
.crm .imp-fp-punkte { display: flex; gap: 0.25rem; }
.crm .imp-fp-punkt { width: 0.5rem; height: 0.5rem; border-radius: 50%; background: var(--border-strong); }
.crm .imp-fp-punkt.ist-fertig { background: var(--ad-blue); }
.crm .imp-fp-punkt.ist-jetzt { background: var(--ad-orange); }
.crm .imp-karte-titel { margin: 0; font-size: var(--fs-section); }
.crm .imp-karte-herkunft { color: var(--text-2); }
.crm .imp-antworten { display: flex; flex-direction: column; gap: 0.5rem; }
.crm .imp-antwort {
  display: grid; grid-template-columns: 1fr auto; text-align: left; gap: 0.125rem 0.75rem; align-items: center;
  padding: 0.75rem 1rem; border-radius: var(--r-md); border: 0.0625rem solid var(--border); background: var(--bg-surface);
  color: var(--text-1); cursor: pointer; font: inherit;
}
.crm .imp-antwort:hover { background: var(--bg-hover); }
.crm .imp-antwort.ist-gewaehlt { border-color: var(--ad-blue); background: var(--tint-blue); }
.crm .imp-antwort:focus-visible, .crm .imp-antwort-neben:focus-visible { outline: 0.125rem solid var(--focus); outline-offset: 0.125rem; }
.crm .imp-antwort-label { font-weight: 600; }
.crm .imp-antwort-detail { grid-column: 1; color: var(--text-2); }
.crm .imp-taste { grid-row: 1 / span 2; grid-column: 2; border: 0.0625rem solid var(--border-strong); border-radius: var(--r-xs); padding: 0 0.375rem; color: var(--text-2); font-family: var(--f-mono); font-variant-numeric: tabular-nums; }
.crm .imp-neben { display: flex; flex-wrap: wrap; align-items: center; gap: 0.25rem 0.5rem; }
.crm .imp-neben > .imp-antwort-neben + .imp-antwort-neben::before { content: "·"; display: inline-block; margin-right: 0.5rem; color: var(--text-3); text-decoration: none; }
.crm .imp-antwort-neben { background: none; border: 0; padding: 0; color: var(--ad-blue-700); text-decoration: underline; cursor: pointer; font: inherit; }
.crm .imp-eingabe { display: flex; flex-direction: column; gap: 0.25rem; }
.crm .imp-karte-fuss { display: flex; justify-content: space-between; gap: 0.5rem; }
/* PR2.08 (#180) — Spalten-Zuordnung mit gemerktem Profil: Panel unter der Import-Leiste. Ohne Animation. */
.crm .imp-btn-spalten { border-color: var(--ad-orange); }
.crm .imp-profil-hinweis { display: flex; align-items: center; flex-wrap: wrap; gap: 0.25rem 0.75rem; }
/* Nachzug #180 (Vorlage I3): erkanntes Profil als gruener Hinweis mit Haken. */
.crm .imp-hinweis.imp-profil-hinweis {
  background: var(--tint-green); color: var(--ad-green-900); border-radius: var(--r-md);
  padding: 0.5rem 0.75rem; font-weight: 600; margin-top: 0.5rem;
}
.crm .imp-profil-hinweis-text { display: inline-flex; align-items: center; gap: 0.5rem; }
.crm .imp-profil-haken { display: inline-flex; flex: none; }
.crm .imp-profil-haken svg { width: 1rem; height: 1rem; fill: currentColor; }
.crm .imp-profil-hinweis .imp-link { color: var(--ad-green-900); font-weight: 500; }
/* Ohne Profil sicher zugeordnet: ruhiger Hinweis (kein Gruen — es ist nichts gemerkt). */
.crm .imp-hinweis.imp-zuordnung-hinweis { background: none; color: var(--text-3); padding: 0; font-weight: 400; margin-top: 0.25rem; }
.crm .imp-zuordnung-hinweis .imp-link { color: var(--ad-blue-700); }
.crm .imp-link { padding: 0 0.25rem; min-height: auto; color: var(--ad-blue-700); text-decoration: underline; }
.crm .imp-sp {
  border: 0.0625rem solid var(--border); border-radius: var(--r-lg); background: var(--bg-card);
  box-shadow: var(--shadow-2); padding: 1rem; display: flex; flex-direction: column; gap: 0.75rem; margin-top: 0.5rem;
}
/* Native Auswahlfelder/Haekchen folgen dem Theme der .crm-Flaeche, nicht dem dunklen Seiten-Schema (Muster PR1.428). */
.crm .imp-sp { color-scheme: light; }
.crm.dark .imp-sp, html[data-theme="dark"] .crm .imp-sp { color-scheme: dark; }
.crm .imp-sp-kopf { display: flex; align-items: flex-start; gap: 0.75rem; flex-wrap: wrap; }
.crm .imp-sp-kopf > div:first-child { flex: 1 1 16rem; min-width: 0; }
.crm .imp-sp-titel { margin: 0; font-size: var(--fs-section); }
.crm .imp-sp-quelle { color: var(--text-2); overflow-wrap: anywhere; }
.crm .imp-sp-blatt { display: flex; align-items: center; gap: 0.5rem; color: var(--text-2); }
.crm .imp-sp-koerper { display: grid; grid-template-columns: minmax(18rem, 2fr) minmax(0, 3fr); gap: 1rem; align-items: start; }
.crm .imp-sp-links { display: flex; flex-direction: column; gap: 0.75rem; min-width: 0; }
.crm .imp-sp-tabelle { width: 100%; border-collapse: collapse; }
.crm .imp-sp-tabelle th, .crm .imp-sp-tabelle td { text-align: left; padding: 0.25rem 0.5rem; vertical-align: middle; }
.crm .imp-sp-tabelle thead th { color: var(--text-3); font-weight: 500; }
.crm .imp-sp-tabelle tbody th { font-weight: 600; overflow-wrap: anywhere; }
.crm .imp-sp-tabelle tbody tr.ist-offen th { color: var(--text-3); font-weight: 500; }
.crm .imp-sp-auswahl { width: 100%; min-width: 10rem; }
/* Nachzug #180 (Vorlage I3): Spalte der Datei im grauen Feld mit Festbreitenschrift, dann „→",
   dann das Zielfeld. Orange sitzt auf dem ZIELfeld (getoent, oranger Text), nie auf der Quellzeile. */
.crm .imp-sp-tabelle tbody tr + tr > * { border-top: 0.0625rem solid var(--border); }
.crm .imp-sp-spalte {
  display: block; padding: 0.3125rem 0.625rem; border-radius: var(--r-sm); background: var(--bg-surface-2);
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-weight: 400; color: var(--text-1); /* PR1.437 Ausnahme: Spaltennamen der Datei roh, wie Vorlage I3 */
  overflow-wrap: anywhere;
}
.crm .imp-sp-tabelle tbody tr.ist-offen .imp-sp-spalte { color: var(--text-2); }
.crm .imp-sp-pfeil { width: 1.5rem; text-align: center; color: var(--text-3); padding-inline: 0; }
.crm .imp-sp-auto + .cs .cs-field, .crm select.imp-sp-auto:not(.cs-native) {
  background: var(--tint-orange); border-color: color-mix(in srgb, var(--ad-orange) 55%, transparent);
  color: var(--ad-orange-900); font-weight: 600;
}
.crm .imp-sp-auto + .cs .cs-value, .crm .imp-sp-auto + .cs .cs-chevron { color: var(--ad-orange-900); }
.crm .imp-sp-legende { margin: 0; display: flex; align-items: center; gap: 0.5rem; color: var(--text-2); }
.crm .imp-sp-punkt { width: 0.625rem; height: 0.625rem; border-radius: 50%; background: var(--ad-orange); flex: none; }
.crm .imp-sp-werte { border: 0.0625rem solid var(--border); border-radius: var(--r-md); padding: 0.5rem 0.75rem; display: flex; flex-direction: column; gap: 0.5rem; margin: 0; }
.crm .imp-sp-werte legend { color: var(--text-2); padding: 0 0.25rem; }
.crm .imp-sp-wert { display: grid; grid-template-columns: minmax(0, 1fr) minmax(8rem, 1fr); align-items: center; gap: 0.5rem; }
.crm .imp-sp-wert label { overflow-wrap: anywhere; }
.crm .imp-sp-rechts { min-width: 0; display: flex; flex-direction: column; gap: 0.5rem; }
.crm .imp-sp-rechts-titel { color: var(--text-3); }
.crm .imp-sp-scroll { overflow: auto; max-height: 20rem; border: 0.0625rem solid var(--border); border-radius: var(--r-md); }
.crm .imp-sp-beispiel { border-collapse: collapse; width: max-content; min-width: 100%; }
.crm .imp-sp-beispiel th, .crm .imp-sp-beispiel td { text-align: left; padding: 0.375rem 0.625rem; white-space: nowrap; border-bottom: 0.0625rem solid var(--border); }
.crm .imp-sp-beispiel thead th { position: sticky; top: 0; background: var(--tint-orange); color: var(--ad-orange-900); font-weight: 600; }
/* Nachzug #180 (Vorlage I3): Zeilennummern der Datei links, leere Zellen als ockerfarbenes „leer". */
.crm .imp-sp-beispiel .imp-sp-nr { width: 1%; text-align: right; color: var(--text-3); font-weight: 400; background: var(--bg-surface-2); font-variant-numeric: tabular-nums; }
.crm .imp-sp-beispiel thead .imp-sp-nr { background: var(--tint-orange); }
.crm .imp-sp-leer { color: var(--ad-orange-900); }
.crm .imp-sp-beispiel .ist-offen { color: var(--text-3); }
.crm .imp-sp-beispiel thead th.ist-offen { background: var(--bg-subtle); }
.crm .imp-sp-fuss { display: flex; align-items: center; flex-wrap: wrap; gap: 0.5rem 0.75rem; border-top: 0.0625rem solid var(--border); padding-top: 0.75rem; }
.crm .imp-sp-merken { display: inline-flex; align-items: center; gap: 0.5rem; }
.crm .imp-sp-name .inp { width: 16rem; max-width: 100%; }
.crm .imp-sp-pflicht { color: var(--ad-orange-900); }
.crm .imp-sp-fuss-knoepfe { display: flex; gap: 0.5rem; margin-left: auto; }
.crm .imp-sp-auswahl:focus-visible, .crm .imp-sp input:focus-visible { outline: 0.125rem solid var(--focus); outline-offset: 0.0625rem; }
@media (max-width: 56rem) {
  .crm .imp-sp-koerper { grid-template-columns: minmax(0, 1fr); }
}

@media (prefers-reduced-motion: reduce) {
  .crm .imp-ablage { animation: none; }
  .crm .imp-neu-aufleuchten { animation: none; border-left: 0.1875rem solid var(--ad-green); }
}


/* PR1.758 Teil A — Seite „Ansichten", neue Ansicht: ruhiges Startbild (Vorlage V30).
   Neubau nach Gate R1: alle Maße einheitlich im Maß des Abnahmebilds = Prototyp ansichten-entwurf.html
   × 4/3 (Schrift auf die Skala gerundet, Abstände in rem bei 15 px). Täglich genutzt → keine Bewegung.
   Spalten nach Vorlage-Anteilen (Karten 395 : 292 : 292 : 292; Tabelle in Prozent). */
.crm .crm-subtabs { align-items: center; }
.crm .crm-subtabs-aktionen { display: flex; align-items: center; gap: var(--s-2); margin-left: auto; padding-bottom: var(--s-2); }
.crm .crm-subtab.crm-subtab-stern { display: inline-flex; align-items: center; gap: 0.4rem; max-width: 22rem; color: var(--text-2); }
.crm .crm-subtab.crm-subtab-stern:hover { color: var(--text-1); }
.crm .crm-subtab-sternzeichen { display: inline-flex; flex: none; }
.crm .crm-subtab-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.crm .ans-host.is-neu { padding: 0 2.4867rem 1.5rem; }
.crm .ans-seite.is-neu { display: block; }
.crm .sr-only { position: absolute; width: 0.0625rem; height: 0.0625rem; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

.crm .ans-start { display: flex; flex-direction: column; min-width: 0; padding-top: 1.4667rem; }
/* Kopf: Überschrift + Satz links, KI-Feld rechts (Prototyp .lead: Lücke 24, unten 22 → ×4/3). */
.crm .ans-start-kopfbereich { display: grid; grid-template-columns: minmax(22rem, 1fr) minmax(18rem, 46.22rem); gap: 2.1333rem; align-items: end; margin-bottom: 1.9333rem; }
.crm .ans-start-titel { margin: 0; font-size: var(--fs-display); line-height: 1.3; font-weight: 700; color: var(--text-1); }
.crm .ans-start-untertitel { margin: 0.3333rem 0 0; font-size: var(--fs-title); line-height: 1.4; color: var(--text-2); text-wrap: pretty; }
.crm .ans-start-frage .ans-frage-bereich { margin: 0; }
.crm .ans-start-frage .ans-frage { min-height: 3.7333rem; padding: 0 1.0667rem; gap: 0.8rem; border-radius: var(--r-xl); font-size: var(--fs-title); }
.crm .ans-start-frage .ans-frage-eingabe { font-size: var(--fs-title); color: var(--text-1); }
.crm .ans-start-frage .ans-frage-eingabe::placeholder { color: var(--text-3); }
.crm .ans-start-frage .ans-frage-enter { font-size: var(--fs-section); font-weight: 600; color: var(--ad-orange-900); }
/* „Gerade wichtig" + Zusatz (Prototyp .sh 15/600 + 13 → 20/600 + 16, Lücke 10 → 13). */
.crm .ans-start-wichtig { display: flex; flex-direction: column; }
.crm .ans-start-abschnitt { margin: 0 0 0.8667rem 0.1333rem; font-size: var(--fs-title); font-weight: 600; color: var(--text-1); }
.crm .ans-start-abschnitt-zusatz { margin-left: 0.8667rem; font-size: var(--fs-section); font-weight: 400; color: var(--text-3); }
.crm .ans-start-karten { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1.35fr 1fr 1fr 1fr; gap: 1.0667rem; }
.crm .ans-start-karte-wrap { container-type: inline-size; display: flex; min-width: 0; }
.crm .ans-start-karte { display: flex; flex-direction: column; gap: 0.7333rem; width: 100%; min-height: 14.9333rem; padding: 1.4222rem 1.3333rem 1.2444rem; border: 0.0625rem solid var(--border); border-radius: 1.0667rem; background: var(--bg-surface); color: var(--text-1); font: inherit; text-align: left; cursor: pointer; }
.crm .ans-start-karte.is-breit { box-shadow: var(--shadow-2); }
.crm .ans-start-karte:hover, .crm .ans-start-ueberblick:hover { border-color: var(--text-3); }
.crm .ans-start-karte:hover .ans-start-oeffnen, .crm .ans-start-ueberblick:hover .ans-start-oeffnen { text-decoration: underline; }
.crm .ans-start-kopf { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--s-3); }
.crm .ans-start-zahlzeile { display: flex; align-items: baseline; gap: 0.7333rem; }
.crm .ans-start-zahl { font-size: var(--fs-icon); line-height: 1; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--text-1); }
.crm .ans-start-einheit { font-size: var(--fs-title); font-weight: 600; color: var(--text-2); }
.crm .ans-start-zahl-laedt { border-radius: var(--r-md); background: var(--bg-surface-2); color: transparent; }
.crm .ans-start-zahl-laedt.is-klein { display: inline-block; width: 2rem; height: 1rem; }
.crm .ans-start-marke { display: inline-flex; align-items: center; gap: 0.5333rem; font-size: var(--fs-section); font-weight: 600; white-space: nowrap; }
.crm .ans-start-punkt { width: 0.7111rem; height: 0.7111rem; border-radius: 50%; background: currentColor; }
.crm .ans-start-marke.is-ueberfaellig { color: var(--ad-red-700); }
.crm .ans-start-marke.is-ueberfaellig .ans-start-punkt { background: var(--ad-red); }
.crm .ans-start-marke.is-pruefen { color: hsl(36 100% 27%); }
.crm .ans-start-marke.is-pruefen .ans-start-punkt { background: hsl(43 100% 44%); }
.crm .ans-start-satz { font-size: var(--fs-title); line-height: 1.4; font-weight: 600; color: var(--text-1); text-wrap: balance; }
.crm .ans-start-unten { display: flex; align-items: center; justify-content: space-between; gap: 0.6rem; margin-top: auto; min-width: 0; }
.crm .ans-start-fuss { display: flex; align-items: center; gap: 0.2667rem; min-width: 0; font-size: var(--fs-section); color: var(--text-3); white-space: nowrap; }
/* Beträge und Fußtexte werden nie gekürzt — der Platz ist je Breite ausgemessen (Logo-Stufen, Fuß 13 nur bei 1280 offen). */
.crm .ans-start-summe, .crm .ans-start-fuss-text { flex: none; }
.crm .ans-start-summe strong { color: var(--text-1); font-weight: 700; }
.crm .ans-start-oeffnen { display: inline-flex; align-items: center; gap: 0.2667rem; flex: none; font-size: var(--fs-section); font-weight: 600; color: var(--ad-blue-700); }
/* Kundenlogos 30 → 40, gerahmt, überlappend (Prototyp-Raster 26 von 30 → 35 von 40). */
.crm .ans-start-logos { display: inline-flex; align-items: center; flex: none; }
.crm .ans-start-logo { display: inline-flex; margin-left: -0.7667rem; border-radius: 0.6rem; box-shadow: 0 0 0 0.1333rem var(--bg-surface); background: var(--bg-surface); }
.crm .ans-start-logo:first-child { margin-left: 0; }
/* Schmale Karte (1280/1366): Logos stufenweise weglassen statt den Fuß umzubrechen. */
/* Entscheid 05.11. (Vasili): Logos bleiben, Beträge nie gekürzt. Platz gemessen mit 8-stelliger Summe — Fuß ohne Logo
   258 px (Lücke 4 + „zusammen 10.895.500 €" 174 + 9 + „Öffnen ›" 71), Polster 2 × 20, Logo 45, Schritt 33,5:
   3 Logos ab Karte 410 px · 2 ab 376,5 · 1 × 45 ab 343 · darunter 1 × 34 mit Polster 16 (1280 mit offener Leiste). */
@container (max-width: 27.3rem) { .crm .ans-start-karte .ans-start-logo:nth-child(n+3) { display: none; } }
@container (max-width: 25.05rem) { .crm .ans-start-karte .ans-start-logo:nth-child(n+2) { display: none; } }
@container (max-width: 22.85rem) {
    .crm .ans-start-karte.is-breit { padding-inline: 1.0667rem; }
    .crm .ans-start-karte .ans-start-logo .acc-logo { width: 2.2667rem !important; height: 2.2667rem !important; font-size: var(--fs-ui) !important; }
}
/* Karten 2–4 bei 1366 offen / 1280 zu (≤ 17,6 rem): Polster 16 (Toleranz ±4), Fuß bleibt 16 px. */
@container (max-width: 17.6rem) { .crm .ans-start-karte { padding-inline: 1.0667rem; } }
/* Nur 1280 mit offener Leiste (Karte ≤ 17 rem): Fuß 13 px, Polster 16 (Entscheid). */
@container (max-width: 17rem) {
    .crm .ans-start-karte { padding-inline: 1.0667rem; }
    .crm .ans-start-karte .ans-start-fuss { font-size: var(--fs-meta); }
}
.crm .ans-start-ueberblicke { display: flex; flex-direction: column; gap: 1.0667rem; margin-top: 1.0667rem; }
.crm .ans-start-ueberblick { display: flex; align-items: center; gap: 1.6rem; width: 100%; min-height: 6.4667rem; padding: 1.2444rem 1.6rem; border: 0.0625rem solid var(--border); border-radius: 1.0667rem; background: var(--bg-surface); color: var(--text-1); font: inherit; text-align: left; cursor: pointer; }
.crm .ans-start-ue-zahl { min-width: 2.6667rem; font-size: var(--fs-icon); line-height: 1; font-weight: 600; font-variant-numeric: tabular-nums; }
.crm .ans-start-ue-text { display: flex; flex-direction: column; gap: 0.1333rem; min-width: 0; flex: 1; }
.crm .ans-start-ue-titel { font-size: var(--fs-title); font-weight: 600; }
.crm .ans-start-ue-sub { font-size: var(--fs-section); font-weight: 500; color: var(--text-3); }
.crm .ans-start-ue-rechts { display: flex; align-items: center; gap: 1.6rem; flex: none; }

/* Meine Ansichten (Prototyp .mine: oben 30 → 40, Kopf 12/600 → 16/600, Zeilen 13,5 → 16). */
.crm .ans-start-meine { margin-top: 2.6667rem; }
.crm .ans-start-tabelle-wrap { container-type: inline-size; overflow-x: auto; border: 0.0625rem solid var(--border); border-radius: 1.0667rem; background: var(--bg-surface); }
.crm .ans-start-tabelle-wrap.is-geteilt { margin-top: 1.0667rem; }
.crm .ans-start-tabelle { width: 100%; border-collapse: collapse; table-layout: fixed; font-size: var(--fs-section); }
.crm .ans-start-c-sym { width: 5.12%; }
.crm .ans-start-c-name { width: 22.25%; }
.crm .ans-start-c-was { width: 31.96%; }
.crm .ans-start-c-anzahl { width: 8.79%; }
.crm .ans-start-c-geteilt { width: 13.68%; }
.crm .ans-start-c-zuletzt { width: 12.24%; }
.crm .ans-start-c-akt { width: 5.96%; }
.crm .ans-start-tabelle th { height: 3.2rem; padding: 0 0.6333rem; background: var(--bg-surface-2); border-bottom: 0.0625rem solid var(--border); text-align: left; font-size: var(--fs-section); font-weight: 600; color: var(--text-3); padding-left: 0; padding-right: 0.9333rem; }
.crm .ans-start-tabelle td { height: 4.8667rem; padding: 0 0.9333rem 0 0; border-bottom: 0.0625rem solid var(--border); font-size: var(--fs-section); color: var(--text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.crm .ans-start-tabelle tr:last-child td { border-bottom: 0; }
.crm .ans-start-tabelle .ans-start-sym { padding-left: 1.45%; overflow: visible; text-overflow: clip; }
.crm .ans-start-tabelle .ans-start-zuletzt { color: var(--text-3); }
.crm .ans-start-tabelle .ans-start-aktionen { padding-left: 0; padding-right: 1.6rem; overflow: visible; }
/* Knöpfe rechtsbündig; bei schmaler Tabelle ragen sie nach links in die leere Spalte „Zuletzt geöffnet", nie über den Rand. */
.crm .ans-start-akt { display: flex; justify-content: flex-end; align-items: center; gap: 0.1778rem; }
.crm .ans-start-zeile { cursor: pointer; }
.crm .ans-start-zeile:hover td { background: var(--bg-hover); }
.crm .ans-start-symkasten { display: inline-flex; align-items: center; justify-content: center; width: 2.6667rem; height: 2.6667rem; border-radius: 0.7111rem; background: color-mix(in srgb, var(--border) 30%, var(--bg-app)); color: var(--text-2); }
.crm .ans-start-symkasten .ic { width: 1.3333rem; height: 1.3333rem; }
.crm .ans-start-symkasten.is-neu { background: var(--tint-blue); color: var(--ad-blue-700); }
.crm .ans-start-namelink { max-width: 100%; padding: 0; border: 0; background: transparent; font: inherit; font-size: var(--fs-section); font-weight: 600; color: var(--text-1); text-align: left; cursor: pointer; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.crm .ans-start-namelink.is-neu { color: var(--ad-blue-700); }
.crm .ans-start-tabelle .ans-start-anzahl { font-weight: 600; color: var(--text-1); font-variant-numeric: tabular-nums; }
.crm .ans-start-geteilt { display: inline-flex; align-items: center; gap: 0.5333rem; }
.crm .ans-start-geteilt .ic { width: 1.2rem; height: 1.2rem; }
.crm .ans-start-geteilt-text .ic { flex: none; width: 1.4222rem; height: 1.4222rem; margin-right: 1.0667rem; }
.crm .ans-start-stern, .crm .ans-start-mehr { display: inline-flex; flex: none; align-items: center; justify-content: center; width: 2.4889rem; height: 2.4889rem; padding: 0; border: 0; border-radius: 0.6222rem; background: transparent; cursor: pointer; }
.crm .ans-start-stern .ic, .crm .ans-start-mehr .ic { width: 1.3333rem; height: 1.3333rem; }
/* Vorlage V30: Stern-Gelb heller als --stern (Pipette #E0A100), Umriss blassgrau, „⋯" kräftig. */
.crm .ans-start-stern { color: var(--border-strong); }
.crm .ans-start-mehr { color: var(--text-3); }
.crm .ans-start-stern.is-an, .crm .crm-subtab-sternzeichen { color: hsl(43 100% 44%); }
.crm .ans-start-stern:hover, .crm .ans-start-mehr:hover { background: var(--bg-hover); color: var(--text-1); }
.crm .ans-start-stern.is-an:hover { color: hsl(43 100% 44%); }
.crm .ans-start-menue-wrap { position: relative; display: inline-flex; }
.crm .ans-start-menue { position: absolute; right: 0; top: calc(100% + 0.25rem); z-index: 20; display: flex; flex-direction: column; min-width: 11rem; padding: var(--s-1); border: 0.0625rem solid var(--border); border-radius: var(--r-md); background: var(--bg-surface); box-shadow: var(--shadow-2); }
.crm .ans-start-menue-punkt { padding: var(--s-2) var(--s-3); border: 0; border-radius: var(--r-sm); background: transparent; color: var(--text-1); font: inherit; font-size: var(--fs-body); text-align: left; cursor: pointer; }
.crm .ans-start-menue-punkt:hover { background: var(--bg-hover); }
.crm .ans-start-menue-punkt.is-rot { color: var(--ad-red-700); }
.crm .ans-start-hinweiszeile td { color: var(--text-2); white-space: normal; }
.crm .ans-start-skel td { background: var(--bg-surface-2); }

/* Kopfknöpfe der Ansichten-Seite wie Prototyp .btn × 4/3: Höhe 46, 16/600, Radius 10,7. */
.crm .crm-subtabs-aktionen .btn { min-height: 3.0667rem; padding: 0 1.0667rem; font-size: var(--fs-section); font-weight: 600; border-radius: 0.7111rem; }

/* Geteilt von anderen (Prototyp .shared: oben 14 → 19, Polster 12/18 → 16/24, 13,5 → 16; Suche 230×31 → 307×41). */
.crm .ans-start-geteilt-bereich { margin-top: 1.2444rem; }
.crm .ans-start-geteilt-leiste { display: flex; align-items: center; justify-content: space-between; gap: 1.0667rem; min-height: 4.8889rem; padding: 1.0667rem 1.6rem; border-radius: 1.0667rem; background: color-mix(in srgb, var(--border) 30%, var(--bg-app)); }
.crm .ans-start-geteilt-text { display: inline-flex; align-items: center; gap: 0; min-width: 0; font-size: var(--fs-section); color: var(--text-2); }
.crm .ans-start-geteilt-text strong { color: var(--text-1); font-weight: 700; }
.crm .ans-start-suche { position: relative; flex: 0 1 20.4444rem; }
.crm .ans-start-suche-icon { position: absolute; left: 0.8889rem; top: 50%; transform: translateY(-50%); display: inline-flex; color: var(--text-3); pointer-events: none; }
.crm .ans-start-suche-feld { width: 100%; box-sizing: border-box; height: 2.7556rem; padding: 0 0.8889rem 0 2.4rem; border: 0.0625rem solid var(--border-strong); border-radius: 0.7111rem; background: var(--bg-surface); color: var(--text-1); font: inherit; font-size: var(--fs-section); }
.crm .ans-start-suche-feld::placeholder { color: var(--text-3); }
.crm .ans-start-keine { margin: var(--s-3) 0 0; color: var(--text-2); }

.crm .ans-alle { display: inline-flex; align-items: center; gap: 0.375rem; margin: var(--s-2) 0 var(--s-3); padding: 0.25rem 0; border: 0; background: transparent; color: var(--text-1); font: inherit; font-weight: 600; cursor: pointer; }
.crm .ans-alle:hover { color: var(--ad-blue-700); }
/* Fokusring 2 px (0,1334 rem bei 15 px). */
.crm .ans-start-karte:focus-visible, .crm .ans-start-ueberblick:focus-visible, .crm .ans-start-namelink:focus-visible, .crm .ans-start-stern:focus-visible,
.crm .ans-start-mehr:focus-visible, .crm .ans-start-menue-punkt:focus-visible, .crm .ans-start-suche-feld:focus-visible, .crm .ans-alle:focus-visible { outline: 0.1334rem solid var(--focus); outline-offset: 0.1334rem; }

/* Dunkel: Marken und Links mit ≥ 4,5 : 1 auf --bg-surface. */
.crm.dark .ans-start-marke.is-ueberfaellig, html[data-theme="dark"] .crm .ans-start-marke.is-ueberfaellig,
.crm.dark .ans-start-menue-punkt.is-rot, html[data-theme="dark"] .crm .ans-start-menue-punkt.is-rot { color: var(--ad-red-300); }
.crm.dark .ans-start-marke.is-pruefen, html[data-theme="dark"] .crm .ans-start-marke.is-pruefen { color: hsl(43 100% 62%); }
.crm.dark .ans-start-oeffnen, html[data-theme="dark"] .crm .ans-start-oeffnen,
.crm.dark .ans-start-namelink.is-neu, html[data-theme="dark"] .crm .ans-start-namelink.is-neu,
.crm.dark .ans-start-symkasten.is-neu, html[data-theme="dark"] .crm .ans-start-symkasten.is-neu,
.crm.dark .ans-alle:hover, html[data-theme="dark"] .crm .ans-alle:hover { color: var(--ad-blue-300); }

@media (max-width: 64rem) {
    .crm .ans-start-karten { grid-template-columns: 1fr 1fr; }
    .crm .ans-start-kopfbereich { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 56rem) {
    .crm .ans-start-karten { grid-template-columns: minmax(0, 1fr); }
    .crm .ans-start-ueberblick { flex-wrap: wrap; }
}

/* PR1.631 (#899) — Seite „Ansichten": Reiterzeile, Spalte links, Ergebnisbereich.
   Nur Token und rem (Ratchet raw-px/raw-hex). Bewegung: nur das Hervorheben der Auswahl (kein Übergang). */
.crm .sb-neu, .crm .crm-subtab-neu { margin-left: 0.375rem; padding: 0 0.3125rem; border-radius: var(--r-sm); font-size: var(--fs-label); font-weight: 600; background: color-mix(in srgb, var(--ad-orange) 28%, transparent); color: var(--ad-orange); }
.crm .shell-attio .sb-neu, .crm .crm-subtab-neu { color: var(--ad-orange-900); background: var(--tint-orange); }
.crm.dark .crm-subtab-neu, html[data-theme="dark"] .crm .crm-subtab-neu { color: var(--ad-orange); background: color-mix(in srgb, var(--ad-orange) 22%, transparent); }
.crm .crm-subtabs { display: flex; gap: 1.25rem; margin: 0 0 var(--s-4); border-bottom: 0.0625rem solid var(--border); }
/* PR1.758 Nachzug: Reiter liegen im inneren Behälter (role=tablist) — gleiche Lücke und Lage wie zuvor. */
.crm .crm-subtabs-liste { display: flex; align-self: stretch; align-items: center; gap: 1.25rem; min-width: 0; }
/* Nachzug #899 — Reiterzeile und Spalte stehen bündig unter dem Titel (gleiche 22px wie .page-head). */
.crm .page-head + .crm-subtabs { margin-inline: 1.375rem; }
.crm .page-head ~ .ans-host { padding: 0 1.375rem 1.125rem; }
.crm .crm-subtab { padding: 0.5rem 0.125rem; margin-bottom: -0.0625rem; border: 0; border-bottom: 0.125rem solid transparent; background: transparent; color: var(--text-2); font: inherit; font-weight: 500; cursor: pointer; }
.crm .crm-subtab:hover { color: var(--text-1); }
.crm .crm-subtab.active { color: var(--ad-blue); border-bottom-color: var(--ad-blue); font-weight: 600; }
.crm .crm-subtab:focus-visible, .crm .ans-eintrag:focus-visible, .crm .ans-zeile:focus-visible, .crm .ans-suche-feld:focus-visible { outline: 0.125rem solid var(--focus); outline-offset: 0.125rem; }
.crm .ans-seite { display: grid; grid-template-columns: minmax(14rem, 18rem) minmax(0, 1fr); gap: var(--s-6); align-items: start; min-width: 0; }
.crm .ans-spalte { display: flex; flex-direction: column; gap: var(--s-4); min-width: 0; padding: var(--s-4); border: 0.0625rem solid var(--border); border-radius: var(--r-lg); background: var(--bg-surface); }
.crm .ans-suche { position: relative; }
.crm .ans-suche-icon { position: absolute; left: var(--s-3); top: 50%; transform: translateY(-50%); display: inline-flex; color: var(--text-3); pointer-events: none; }
.crm .ans-suche-feld { width: 100%; box-sizing: border-box; padding: 0.4375rem var(--s-3) 0.4375rem 2rem; border: 0.0625rem solid var(--border-strong); border-radius: var(--r-md); background: var(--bg-surface); color: var(--text-1); font: inherit; }
.crm .ans-abschnitt-titel { display: flex; align-items: center; gap: 0.5rem; margin: 0 0 var(--s-1); }
.crm .ans-live { margin-left: auto; font-weight: 500; text-transform: none; letter-spacing: 0; color: var(--ad-blue); }
.crm .ans-liste { list-style: none; margin: 0 0 var(--s-4); padding: 0; display: flex; flex-direction: column; gap: 0.125rem; }
.crm .ans-eintrag { display: flex; align-items: center; gap: 0.625rem; width: 100%; padding: 0.4375rem var(--s-3); border: 0; border-radius: var(--r-md); background: transparent; color: var(--text-1); font: inherit; text-align: left; cursor: pointer; min-width: 0; }
.crm .ans-eintrag:hover { background: var(--bg-hover); }
.crm .ans-eintrag.active { background: var(--tint-blue); color: var(--ad-blue-700); font-weight: 600; }
.crm .ans-icon { display: inline-flex; flex: none; color: var(--text-3); }
.crm .ans-eintrag.active .ans-icon { color: var(--ad-blue); }
.crm .ans-name { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.crm .ans-zaehler { flex: none; min-width: 1.5rem; text-align: right; font-variant-numeric: tabular-nums; color: var(--text-2); font-weight: 600; }
.crm .ans-zaehler-laedt { display: inline-block; width: 1.5rem; height: 0.875rem; border-radius: var(--r-sm); background: var(--bg-surface-3); }
.crm .ans-ungespeichert { flex: none; font-size: var(--fs-label); font-weight: 600; color: var(--ad-orange-900); }
.crm .ans-leer, .crm .ans-keine, .crm .ans-hinweis, .crm .ans-gekuerzt { padding: 0.375rem var(--s-3); color: var(--text-3); font-size: var(--fs-meta); }
.crm .ans-hinweis { font-size: var(--fs-body); color: var(--text-2); padding: var(--s-6) var(--s-2); }
.crm .ans-unten { position: sticky; bottom: 0; padding: var(--s-3) 0 0; background: var(--bg-surface); }
.crm .ans-neu { width: 100%; justify-content: center; }
.crm .ans-ergebnis { min-width: 0; }
.crm .ans-ergebnis-titel { margin: 0; font-size: var(--fs-section); font-weight: 600; color: var(--text-1); }
.crm .ans-ergebnis-sub { margin: 0.25rem 0 var(--s-4); color: var(--text-2); }
.crm .ans-zeilen { list-style: none; margin: 0; padding: 0; border: 0.0625rem solid var(--border); border-radius: var(--r-lg); background: var(--bg-surface); overflow: hidden; }
.crm .ans-zeile { display: grid; grid-template-columns: 1.75rem minmax(0, 1fr) 6rem 6.5rem 5rem 6rem; gap: var(--s-3); align-items: center; padding: 0.5rem var(--s-3); border-top: 0.0625rem solid var(--border); cursor: pointer; }
.crm .ans-zeile-projekt { grid-template-columns: 1.75rem minmax(0, 1fr) 5.5rem 12rem 5rem 4.5rem 5rem; }
.crm .ans-zeile:first-child { border-top: 0; }
.crm .ans-zeile:hover { background: var(--bg-hover); }
.crm .ans-z-titel { display: flex; flex-direction: column; min-width: 0; }
.crm .ans-z-name, .crm .ans-z-kunde { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.crm .ans-z-name { font-weight: 600; color: var(--text-1); }
.crm .ans-z-kunde { font-size: var(--fs-meta); color: var(--text-3); }
.crm .ans-z-status, .crm .ans-z-zeit, .crm .ans-z-team, .crm .ans-z-cc { color: var(--text-2); white-space: nowrap; }
.crm .ans-z-zahl { text-align: right; font-variant-numeric: tabular-nums; color: var(--text-1); white-space: nowrap; }
.crm .ans-warn { color: var(--ad-orange-900); font-weight: 600; }
.crm.dark .ans-warn, html[data-theme="dark"] .crm .ans-warn, .crm.dark .ans-ungespeichert, html[data-theme="dark"] .crm .ans-ungespeichert { color: var(--ad-orange); }
.crm .ans-skel-block { display: flex; flex-direction: column; gap: 0.5rem; margin-top: var(--s-4); }
.crm .ans-skel { height: 2.5rem; border-radius: var(--r-md); background: var(--bg-surface-3); }
.crm .ans-fehler { padding: var(--s-4); border: 0.0625rem solid var(--border-strong); border-radius: var(--r-lg); background: var(--bg-surface); color: var(--text-1); display: flex; flex-direction: column; gap: var(--s-3); align-items: flex-start; }
@media (max-width: 47.5em) {
  .crm .ans-seite { grid-template-columns: minmax(0, 1fr); }
  .crm .ans-zeile, .crm .ans-zeile-projekt { grid-template-columns: 1.75rem minmax(0, 1fr) 5rem; }
  .crm .ans-zeile > .ans-z-status, .crm .ans-zeile > .ans-z-cc, .crm .ans-zeile-projekt > .ans-z-zahl, .crm .ans-zeile-projekt > .ans-z-team { display: none; }
}

/* PR1.634 (#915) — Ansichten speichern, teilen, anheften (Vorlage A2 ④, A1 ④, A4): Dialog „Ansicht speichern",
   Kopf mit Stern · „Teilen" · „⋯", Banner „Neue Ansicht", Meldungszeile, Zeilen unter „Listen". Nur Tokens, rem und
   thin (ui-craft-Ratchet: kein neues px, kein @media). Stern gelb (Zeichen, nie allein: Name und Beschriftung tragen es). */
.crm { --stern: hsl(40 92% 40%); }
.crm.dark, html[data-theme="dark"] .crm { --stern: hsl(42 92% 56%); }
.crm .ans-stern-zeichen { display: inline-flex; flex: none; color: var(--stern); }
.crm .ans-geteilt-hinweis { flex: none; font-size: var(--fs-label); color: var(--text-3); }
.crm .ans-eintrag-skel { height: 1.75rem; margin: 0.125rem 0; border-radius: var(--r-md); background: var(--bg-surface-3); }
.crm .ans-leer-fehler { display: flex; flex-direction: column; align-items: flex-start; gap: var(--s-1); }
.crm .ans-link { appearance: none; border: 0; background: none; padding: 0; font: inherit; font-size: var(--fs-meta); color: var(--ad-blue); text-decoration: underline; cursor: pointer; }
.crm .ans-ergebnis-kopf { margin: 0 0 var(--s-4); }
.crm .ans-kopf-ansicht .ans-ergebnis-sub { margin: 0.25rem 0 0; }
.crm .ans-kopf-zeile { display: flex; align-items: center; flex-wrap: wrap; gap: var(--s-3); min-width: 0; }
.crm .ans-kopf-zeile .ans-ergebnis-titel { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.crm .ans-ergebnis-besitz { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text-3); font-size: var(--fs-ui); }
.crm .ans-kopf-aktionen { display: flex; align-items: center; gap: var(--s-3); margin-left: auto; }
.crm .ans-gespeichert { display: inline-flex; align-items: center; gap: var(--s-1); color: var(--text-2); font-size: var(--fs-ui); white-space: nowrap; }
.crm .ans-gespeichert .ic { color: var(--ad-green-700); }
.crm .ans-stern { appearance: none; display: inline-flex; flex: none; padding: 0.125rem; border: 0; border-radius: var(--r-sm); background: transparent; color: var(--border-strong); cursor: pointer; }
.crm .ans-stern .ic { width: 1.25rem; height: 1.25rem; }
.crm .ans-stern:hover { color: var(--stern); }
.crm .ans-stern.on { color: var(--stern); }
.crm .ans-stern:focus-visible, .crm .ans-teilen:focus-visible, .crm .ans-menue-knopf:focus-visible, .crm .ans-menue-eintrag:focus-visible,
.crm .ans-banner-text-knopf:focus-visible, .crm .ans-meldung-zu:focus-visible, .crm .ans-dlg-x:focus-visible, .crm .ans-link:focus-visible { outline: 0.125rem solid var(--focus); outline-offset: 0.125rem; }
.crm .ans-teilen { display: inline-flex; align-items: center; gap: var(--s-2); }
.crm .ans-teilen.ist-geteilt { border-color: var(--ad-blue); color: var(--ad-blue-700); }
.crm .ans-menue-wrap { position: relative; display: inline-flex; }
.crm .ans-menue-knopf { min-width: 2.25rem; justify-content: center; font-weight: 700; letter-spacing: 0.05em; }
.crm .ans-menue { position: absolute; right: 0; top: calc(100% + var(--s-1)); z-index: 20; min-width: 11rem; padding: var(--s-1); border: 0.0625rem solid var(--border); border-radius: var(--r-md); background: var(--bg-surface); box-shadow: var(--shadow-2); display: flex; flex-direction: column; }
.crm .ans-menue-eintrag { appearance: none; border: 0; border-radius: var(--r-sm); padding: 0.4375rem var(--s-3); background: transparent; color: var(--text-1); font: inherit; text-align: left; cursor: pointer; }
.crm .ans-menue-eintrag:hover, .crm .ans-menue-eintrag:focus-visible { background: var(--bg-hover); }
.crm .ans-menue-rot { color: var(--ad-red-700); }
.crm .ans-sicht-hinweis { margin: var(--s-2) 0 0; padding: var(--s-2) var(--s-3); border-radius: var(--r-md); background: var(--tint-warn); color: var(--ad-orange-900); font-size: var(--fs-ui); }
.crm.dark .ans-sicht-hinweis, html[data-theme="dark"] .crm .ans-sicht-hinweis { color: var(--ad-orange); }
.crm .ans-banner { display: flex; align-items: center; flex-wrap: wrap; gap: var(--s-3); margin: 0 0 var(--s-4); padding: var(--s-3) var(--s-4); border-radius: var(--r-lg); background: var(--tint-blue); color: var(--text-1); }
.crm .ans-banner-icon { display: inline-flex; flex: none; color: var(--ad-blue); }
.crm .ans-banner-text { flex: 1 1 14rem; min-width: 0; }
.crm .ans-banner-zusatz { color: var(--ad-blue-700); }
.crm .ans-banner-aktionen { display: flex; align-items: center; gap: var(--s-4); margin-left: auto; }
.crm .ans-banner-text-knopf { appearance: none; border: 0; background: none; padding: var(--s-1); font: inherit; font-weight: 600; color: var(--text-2); cursor: pointer; }
.crm .ans-banner-text-knopf:hover { color: var(--text-1); }
.crm .ans-meldung { display: flex; align-items: center; gap: var(--s-3); margin: 0 0 var(--s-4); padding: var(--s-2) var(--s-3); border-radius: var(--r-md); }
.crm .ans-meldung-ok { background: var(--tint-green); color: var(--ad-green-900); }
.crm .ans-meldung-fehler { background: var(--tint-red); color: var(--ad-red-700); }
.crm .ans-meldung-text { flex: 1 1 auto; min-width: 0; font-weight: 600; }
.crm .ans-meldung-zu { appearance: none; display: inline-flex; border: 0; border-radius: var(--r-sm); background: transparent; color: inherit; cursor: pointer; padding: 0.125rem; }
.crm .ans-dlg-scrim { position: fixed; inset: 0; z-index: 60; display: flex; align-items: flex-end; justify-content: flex-end; padding: var(--s-8); background: transparent; }
.crm .ans-dlg { width: min(26.5rem, 100%); max-height: calc(100vh - 4rem); overflow: auto; border: 0.0625rem solid var(--border); border-radius: var(--r-lg); background: var(--bg-surface); color: var(--text-1); box-shadow: var(--shadow-3); }
.crm .ans-dlg-kopf { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); padding: var(--s-4) var(--s-5) 0; }
.crm .ans-dlg-titel { margin: 0; font-size: var(--fs-section); font-weight: 700; }
.crm .ans-dlg-x { appearance: none; display: inline-flex; padding: 0.25rem; border: 0; border-radius: var(--r-sm); background: transparent; color: var(--text-2); cursor: pointer; }
.crm .ans-dlg-x:hover { color: var(--text-1); }
.crm .ans-dlg-form { display: flex; flex-direction: column; gap: var(--s-3); padding: var(--s-3) var(--s-5) var(--s-4); }
.crm .ans-dlg-feld { display: flex; flex-direction: column; gap: var(--s-1); }
.crm .ans-dlg-label { padding: 0; font-size: var(--fs-meta); font-weight: 600; color: var(--text-2); }
.crm .ans-dlg-eingabe { box-sizing: border-box; width: 100%; padding: 0.3rem var(--s-3); border: 0.0625rem solid var(--border-strong); border-radius: var(--r-md); background: var(--bg-surface); color: var(--text-1); font: inherit; font-size: var(--fs-ui); }
.crm .ans-dlg-eingabe:focus { outline: none; border-color: var(--focus); box-shadow: 0 0 0 0.1875rem color-mix(in srgb, var(--focus) 28%, transparent); }
.crm .ans-dlg-eingabe[aria-invalid="true"] { border-color: var(--ad-red-700); }
.crm .ans-dlg-gruppe { display: flex; flex-direction: column; gap: 0.5rem; min-width: 0; margin: 0; padding: 0; border: 0; }
.crm .ans-dlg-gruppe .ans-dlg-label { margin-bottom: var(--s-1); }
.crm .ans-dlg-wahl { display: flex; align-items: flex-start; gap: var(--s-3); cursor: pointer; }
.crm .ans-dlg-wahl input { flex: none; width: 0.9375rem; height: 0.9375rem; margin: 0.125rem 0 0; accent-color: var(--ad-blue); }
.crm .ans-dlg-wahl input[type="radio"] { appearance: none; border: 0.125rem solid var(--border-strong); border-radius: 50%; background: var(--bg-surface); }
.crm .ans-dlg-wahl input[type="radio"]:checked { border-color: var(--ad-blue); background: var(--ad-blue); box-shadow: inset 0 0 0 0.1875rem var(--bg-surface); }
.crm .ans-dlg-wahl input:focus-visible { outline: 0.125rem solid var(--focus); outline-offset: 0.125rem; }
.crm .ans-dlg-wahl-text { display: flex; flex-direction: column; gap: 0; min-width: 0; }
.crm .ans-dlg-wahl-kopf { font-size: var(--fs-ui); font-weight: 400; color: var(--text-1); }
.crm .ans-dlg-wahl-sub { font-size: var(--fs-meta); line-height: 1.35; color: var(--text-3); }
.crm .ans-dlg-stern { color: var(--text-1); }
.crm .ans-dlg-text { margin: 0; color: var(--text-2); }
.crm .ans-dlg-fehler { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2) var(--s-3); margin: 0; padding: var(--s-2) var(--s-3); border-radius: var(--r-md); background: var(--tint-red); color: var(--ad-red-700); font-weight: 600; }
.crm .ans-dlg-erneut { appearance: none; border: 0; background: none; padding: 0; font: inherit; font-weight: 600; color: var(--ad-blue-700); text-decoration: underline; cursor: pointer; }
.crm .ans-dlg-fuss { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); padding: var(--s-3) var(--s-5); border-top: 0.0625rem solid var(--border); }
.crm .ans-dlg-hinweis { flex: 1 1 8rem; min-width: 0; font-size: var(--fs-meta); line-height: 1.35; color: var(--text-3); }
.crm .ans-dlg-knoepfe .btn { padding: 0.25rem var(--s-3); font-size: var(--fs-meta); font-weight: 600; min-height: 0; }
.crm .ans-dlg-knoepfe { display: flex; gap: var(--s-2); flex: none; }
.crm .ans-dlg.laeuft .ans-dlg-knoepfe { opacity: 0.7; }
/* ── PR1.632 (#914) — Darstellungen der Ansichten: Umschalter, Kreuztabelle, Zellen-Popup, Liste gruppiert ── */
.crm .ans-sortierung { flex: none; white-space: nowrap; }
.crm .ans-sortierung { border: 0.0625rem solid var(--border-strong); border-radius: var(--r-md); padding: 0 0 0 var(--s-3); background: var(--bg-surface); gap: 0.25rem; }
.crm .ans-sortierung .cs .cs-field, .crm .ans-sortierung .cs-control .cs-field, .crm .ans-sortierung select { border-color: transparent; background: transparent; box-shadow: none; padding-left: 0.375rem; }
.crm .ans-kopf-zeile:has(.ans-sortierung) { flex-wrap: nowrap; }
.crm .ans-kopf-zeile:has(.ans-sortierung) .ans-ergebnis-sub { flex: 0 0 auto; overflow: visible; }
.crm .ans-kopf-zeile:has(.ans-sortierung) .ans-kopf-aktionen { gap: var(--s-1); }
.crm .ans-kopf-zeile:has(.ans-sortierung) .ans-ergebnis-titel { flex: 0 0 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.crm .ans-kopf-zeile .ans-ergebnis-sub { margin: 0; color: var(--text-2); font-size: var(--fs-ui); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.crm .ans-bausteine { display: flex; justify-content: flex-end; align-items: center; gap: var(--s-3); margin: 0 0 var(--s-4); padding: var(--s-3) var(--s-4); border: 0.0625rem solid var(--border); border-radius: var(--r-lg); background: var(--bg-surface); }
.crm .ans-umschalter { display: inline-flex; border: 0.0625rem solid var(--border); border-radius: var(--r-md); overflow: hidden; background: var(--bg-surface); }
.crm .ans-umschalter-knopf { appearance: none; border: 0; border-left: 0.0625rem solid var(--border); padding: 0.5rem 1rem; background: transparent; color: var(--text-1); font: inherit; font-weight: 500; cursor: pointer; white-space: nowrap; }
.crm .ans-umschalter-knopf:first-child { border-left: 0; }
.crm .ans-umschalter-knopf:hover { background: var(--bg-hover); }
.crm .ans-umschalter-knopf.active { background: var(--tint-blue); color: var(--ad-blue-700); font-weight: 600; }
.crm .ans-umschalter-knopf:focus-visible, .crm .ans-kt-zelle:focus-visible, .crm .ans-gr-kopf:focus-visible, .crm .ans-gr-zeile:focus-visible { outline: 0.125rem solid var(--focus); outline-offset: 0.125rem; }
.crm .ans-sortierung { display: inline-flex; align-items: center; gap: var(--s-2); font-size: var(--fs-ui); color: var(--text-1); }
.crm .ans-sortierung-label { font-weight: 600; }
.crm .ans-kt-karte, .crm .ans-gr-karte { border: 0.0625rem solid var(--border); border-radius: var(--r-lg); background: var(--bg-surface); min-width: 0; }
.crm .ans-kt-scroll { position: relative; overflow-x: auto; max-width: 100%; }
.crm .ans-kt { width: 100%; border-collapse: separate; border-spacing: 0; font-variant-numeric: tabular-nums; }
.crm .ans-kt thead th:not(.ans-kt-rand) { background: var(--bg-surface); border-color: var(--border); text-transform: none; letter-spacing: 0; }
.crm .ans-kt th { font-size: var(--fs-body); }
.crm .ans-kt th, .crm .ans-kt td { padding: 0.25rem; border-bottom: 0.0625rem solid var(--border); vertical-align: middle; }
.crm .ans-kt tbody tr:last-child th, .crm .ans-kt tbody tr:last-child td { border-bottom-width: 0.125rem; }
.crm .ans-kt tfoot th, .crm .ans-kt tfoot td { border-bottom: 0; padding-top: var(--s-3); padding-bottom: var(--s-3); }
.crm .ans-kt th.ans-kt-ecke { font-size: var(--fs-body); text-align: left; padding-left: var(--s-4); font-weight: 500; color: var(--text-2); white-space: nowrap; }
.crm .ans-kt-sk { min-width: 5.5rem; text-align: center; font-weight: 600; color: var(--text-2); white-space: nowrap; }
.crm .ans-kt-sk-logo { display: flex; justify-content: center; align-items: flex-end; height: 1.75rem; margin-bottom: 0.25rem; }
.crm .ans-kt-sk-name { display: block; }
.crm .ans-kt th.ans-kt-zk { text-align: left; padding-left: var(--s-4); font-weight: 600; color: var(--text-1); min-width: 15rem; }
.crm .ans-kt-zk-in { display: flex; align-items: center; gap: var(--s-3); }
.crm .ans-kt-zk-text { display: flex; flex-direction: column; min-width: 0; }
.crm .ans-kt-zk-name { font-weight: 600; color: var(--text-1); white-space: nowrap; }
.crm .ans-kt-zk-unter { font-weight: 400; font-size: var(--fs-meta); color: var(--text-3); white-space: nowrap; }
.crm .ans-bild { display: inline-flex; flex: none; align-items: center; justify-content: center; }
.crm .ans-bild .emp-avatar, .crm .ans-bild .acc-logo { border-radius: 50%; }
.crm .ans-mono { display: inline-flex; flex: none; align-items: center; justify-content: center; width: 1.75rem; height: 1.75rem; border-radius: 50%; border: 0.0625rem solid var(--border); background: var(--bg-surface-2); color: var(--text-2); font-size: var(--fs-label); font-weight: 700; }
.crm .ans-kt-z { text-align: center; }
.crm .ans-kt-zelle { appearance: none; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.125rem; width: 100%; min-width: 4.75rem; min-height: 3.25rem; padding: 0.375rem 0.5rem; border: 0.125rem solid transparent; border-radius: var(--r-md); background: color-mix(in srgb, var(--ad-blue) calc(10% + var(--stufe, 0) * 34%), var(--bg-surface)); color: var(--text-1); font: inherit; cursor: pointer; }
.crm .ans-kt-zelle.is-null { background: var(--bg-surface-2); }
.crm .ans-kt-zelle:hover { border-color: color-mix(in srgb, var(--ad-blue) 45%, transparent); }
.crm .ans-kt-zelle.active { border-color: var(--ad-blue); }
.crm .ans-kt-n { font-weight: 700; color: var(--text-1); line-height: 1.2; }
.crm .ans-kt-s { font-size: var(--fs-meta); color: var(--text-2); white-space: nowrap; }
.crm .ans-kt-zelle .ans-kt-s { color: var(--text-1); }
.crm .ans-kt-leer { color: var(--text-3); }
.crm .ans-kt-rand { min-width: 5.5rem; text-align: center; background: var(--bg-surface-2); border-left: 0.0625rem solid var(--border); }
.crm .ans-kt-rand .ans-kt-n, .crm .ans-kt-summe .ans-kt-n { font-weight: 600; }
.crm .ans-kt-rand-kopf { font-weight: 600; color: var(--text-2); }
.crm .ans-kt-summe .ans-kt-z { display: table-cell; }
.crm .ans-kt-summe-z { padding: var(--s-3) 0.25rem; }
.crm .ans-kt-summe-z .ans-kt-n, .crm .ans-kt-summe-z .ans-kt-s { display: block; }
.crm .ans-kt-rand .ans-kt-n, .crm .ans-kt-rand .ans-kt-s { display: block; }
.crm .ans-kt-hinweis { display: flex; gap: var(--s-2); align-items: flex-start; margin: 0; padding: var(--s-3) var(--s-4); border-top: 0.0625rem solid var(--border); color: var(--text-2); font-size: var(--fs-ui); }
.crm .ans-gr-karte + .ans-kt-hinweis { border: 0.0625rem solid var(--border); border-top: 0; border-radius: 0 0 var(--r-lg) var(--r-lg); }
.crm .ans-kt-hinweis-icon { display: inline-flex; flex: none; margin-top: 0.125rem; color: var(--text-3); }
.crm .ans-kt-fehler { margin: 0; }
.crm .ans-pop { position: absolute; z-index: 30; width: 27rem; max-width: calc(100% - 1rem); border: 0.0625rem solid var(--border); border-radius: var(--r-lg); background: var(--bg-surface); box-shadow: var(--shadow-2); text-align: left; }
.crm .ans-pop-kopf { display: flex; align-items: center; gap: var(--s-3); padding: var(--s-3) var(--s-4); border-bottom: 0.0625rem solid var(--border); }
.crm .ans-pop-logo { display: inline-flex; flex: none; }
.crm .ans-pop-h { flex: 1 1 auto; min-width: 0; margin: 0; font-size: var(--fs-body); font-weight: 600; color: var(--text-1); }
.crm .ans-pop-summe { flex: none; color: var(--text-2); font-size: var(--fs-ui); white-space: nowrap; }
.crm .ans-pop-liste { list-style: none; margin: 0; padding: 0; max-height: 18rem; overflow-y: auto; }
.crm .ans-pop-zeile { display: grid; grid-template-columns: 1.75rem minmax(0, 1fr) auto; gap: var(--s-3); align-items: center; padding: 0.625rem var(--s-4); border-bottom: 0.0625rem solid var(--border); }
.crm .ans-pop-text { display: flex; flex-direction: column; min-width: 0; }
.crm .ans-pop-titel { font-weight: 600; color: var(--text-1); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.crm .ans-pop-meta { overflow-wrap: anywhere; font-size: var(--fs-meta); color: var(--text-2); }
.crm .ans-pop-betrag { font-weight: 700; color: var(--text-1); white-space: nowrap; }
.crm .ans-pop-fuss .btn { white-space: nowrap; }
.crm .ans-pop-fuss { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--s-2); padding: var(--s-3) var(--s-4); }
.crm .ans-gr { border-top: 0.0625rem solid var(--border); }
.crm .ans-gr:first-child { border-top: 0; }
.crm .ans-gr-kopf { appearance: none; display: flex; align-items: center; gap: var(--s-3); width: 100%; padding: 0.75rem var(--s-4); border: 0; background: var(--bg-surface-2); color: var(--text-1); font: inherit; text-align: left; cursor: pointer; }
.crm .ans-gr:first-child .ans-gr-kopf { border-radius: var(--r-lg) var(--r-lg) 0 0; }
.crm .ans-gr-kopf:hover { background: var(--bg-hover); }
.crm .ans-gr-pfeil { display: inline-flex; flex: none; color: var(--text-2); }
.crm .ans-gr-name { font-weight: 700; color: var(--text-1); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.crm .ans-gr-anzahl { flex: none; display: inline-flex; align-items: center; justify-content: center; min-width: 1.5rem; height: 1.5rem; padding: 0 0.375rem; border: 0.0625rem solid var(--border); border-radius: 62.5rem; background: var(--bg-surface); font-size: var(--fs-label); font-weight: 600; color: var(--text-2); }
.crm .ans-gr-zusatz { flex: none; color: var(--text-2); font-size: var(--fs-ui); white-space: nowrap; }
.crm .ans-gr-rechts { display: flex; align-items: center; gap: var(--s-4); margin-left: auto; flex: none; }
.crm .ans-gr-balken { display: inline-block; width: 10rem; height: 0.25rem; border-radius: 62.5rem; background: var(--border); overflow: hidden; }
.crm .ans-gr-balken-fuell { display: block; height: 100%; border-radius: inherit; background: var(--ad-blue); }
.crm .ans-gr-summe { min-width: 6.5rem; text-align: right; font-weight: 700; color: var(--text-1); font-variant-numeric: tabular-nums; white-space: nowrap; }
.crm .ans-gr-pt { min-width: 4.5rem; text-align: right; color: var(--text-2); white-space: nowrap; }
.crm .ans-gr-pt strong { color: var(--text-1); }
.crm .ans-gr-clouds, .crm .ans-gr-ccs { display: inline-flex; align-items: center; gap: 0.375rem; }
.crm .ans-pille { display: inline-flex; align-items: center; padding: 0.0625rem 0.4375rem; border-radius: var(--r-sm); background: var(--bg-surface-2); border: 0.0625rem solid var(--border); font-size: var(--fs-label); font-weight: 600; color: var(--text-2); white-space: nowrap; }
.crm .ans-gr-zeilen { list-style: none; margin: 0; padding: 0; }
.crm .ans-gr-zeile { display: grid; grid-template-columns: 1.75rem minmax(0, 1fr) 7rem 6.5rem 4.5rem 7rem; gap: var(--s-3); align-items: center; padding: 0.625rem var(--s-4) 0.625rem 3.25rem; border-top: 0.0625rem solid var(--border); cursor: pointer; }
.crm .ans-gr-zeile-projekt { grid-template-columns: minmax(0, 1fr) 6.5rem 12rem 4.5rem 4rem 6rem; }
.crm .ans-gr-zeile:not(.ans-gr-zeile-projekt) .ans-z-zahl { font-weight: 700; }
.crm .ans-gr-zeile-projekt .ans-z-zahl { font-weight: 400; }
.crm .ans-gr-zeile .ans-gr-status { min-width: 5.5rem; }
.crm .ans-gr-zeile:hover { background: var(--bg-hover); }
.crm .ans-gr-zeile .ans-z-cc { display: inline-flex; justify-content: flex-end; gap: 0.25rem; }
.crm .ans-gr-zeile .ans-z-zeit, .crm .ans-gr-zeile .ans-z-team { white-space: nowrap; }
.crm .ans-gr-zeile-projekt .ans-z-zeit { text-align: right; }
.crm .ans-gr-status { display: inline-flex; justify-content: flex-start; padding: 0.125rem 0.625rem; border-radius: 62.5rem; font-size: var(--fs-ui); font-weight: 600; white-space: nowrap; width: fit-content; }
.crm .ans-gr-status.is-blau { background: var(--tint-blue); color: var(--ad-blue-700); }
.crm .ans-gr-status.is-gruen { background: var(--tint-green); color: var(--ad-green-900, var(--ad-green-700)); }
.crm .ans-gr-status.is-rot { background: var(--bg-surface-2); color: var(--text-2); }
.crm .ans-gr-stufe2 { border-top: 0.0625rem solid var(--border); }
.crm .ans-gr-zwischen { display: flex; align-items: center; gap: var(--s-3); padding: 0.5rem var(--s-4) 0.5rem 3.25rem; background: var(--bg-surface); font-size: var(--fs-ui); }
.crm .ans-gr-zwischen .ans-gr-name { font-weight: 600; }
.crm .ans-gr-buendel { display: flex; align-items: center; gap: var(--s-3); padding: 0.75rem var(--s-4) 0.75rem 3.25rem; border-top: 0.0625rem solid var(--border); color: var(--text-2); }
.crm .ans-skel-kt { gap: 0.375rem; }
.crm .ans-skel-reihe { display: grid; grid-template-columns: 14rem repeat(6, minmax(0, 1fr)); gap: 0.375rem; }
.crm .ans-skel-reihe .ans-skel { height: 3.25rem; }
.crm .ans-skel-gruppe { height: 3.25rem; }

/* ── PR1.633 — Bausteine der Ansichten (A1/A2): Leiste, Chips, Auswahl, Fenster, Zustände ──
   Leiste = Karte über dem Ergebnis; Reihenfolge = Tab-Reihenfolge; bricht um statt abzuschneiden.
   Bewegung: nur das Auswahl-Fenster blendet kurz ein (Aus sofort), ohne bei reduzierter Bewegung. */
.crm .ans-bs { position: relative; display: block; padding: var(--s-3) var(--s-4); }
.crm .ans-bs-reihe { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3) var(--s-2); min-width: 0; }
.crm .ans-bs-label { flex: none; font-size: var(--fs-label); font-weight: 600; color: var(--text-2); margin-right: 0.125rem; }
.crm .ans-bs-label + .ans-bs-label, .crm .ans-bs-wahl + .ans-bs-label, .crm .ans-bs-plus + .ans-bs-label { margin-left: var(--s-2); }
.crm .ans-bs-chip-wrap { display: inline-flex; align-items: center; max-width: 100%; min-height: 2rem; border-radius: var(--r-md); background: var(--tint-blue); border: 0.0625rem solid transparent; }
.crm .ans-bs-chip-wrap.is-fehler { border: 0.09375rem solid var(--danger); }
.crm .ans-bs-chip { appearance: none; border: 0; background: none; padding: 0 0.25rem 0 0.75rem; min-height: 1.875rem; font: inherit; font-size: var(--fs-ui); color: var(--ad-blue-700); cursor: pointer; min-width: 0; max-width: 22rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; border-radius: var(--r-md); }
.crm .ans-bs-chip-feld { font-weight: 600; color: var(--text-1); }
.crm .ans-bs-chip-wert { color: var(--ad-blue-700); }
/* Dunkel: --ad-blue-700 hält auf der dunklen Fläche nur 2:1 → helle Blaustufe (wie --focus im dunklen Zweig). */
.crm.dark .ans-bs-chip-wert, html[data-theme="dark"] .crm .ans-bs-chip-wert,
.crm.dark .ans-bs-chip, html[data-theme="dark"] .crm .ans-bs-chip,
.crm.dark .ans-umschalter-knopf.active, html[data-theme="dark"] .crm .ans-umschalter-knopf.active,
.crm.dark .ans-bs-option.is-gewaehlt, html[data-theme="dark"] .crm .ans-bs-option.is-gewaehlt,
.crm.dark .ans-bs-schnell-knopf.is-gewaehlt, html[data-theme="dark"] .crm .ans-bs-schnell-knopf.is-gewaehlt { color: var(--ad-blue-300); }
.crm.dark .ans-bs-chip-feld, html[data-theme="dark"] .crm .ans-bs-chip-feld { color: var(--text-1); }
.crm .ans-bs-x { appearance: none; border: 0; background: none; display: inline-flex; align-items: center; justify-content: center; width: 1.75rem; min-height: 1.875rem; padding: 0; color: var(--text-2); cursor: pointer; border-radius: var(--r-md); }
.crm .ans-bs-x:hover { color: var(--text-1); }
.crm .ans-bs-plus { appearance: none; display: inline-flex; align-items: center; gap: 0.375rem; min-height: 2rem; padding: 0 0.75rem; border: 0.0625rem dashed var(--border-strong); border-radius: var(--r-md); background: transparent; font: inherit; font-size: var(--fs-ui); color: var(--text-2); cursor: pointer; white-space: nowrap; }
.crm .ans-bs-plus:hover { color: var(--text-1); border-color: var(--text-3); }
.crm .ans-bs-wahl { appearance: none; display: inline-flex; align-items: center; gap: 0.375rem; min-height: 2rem; padding: 0 0.625rem 0 0.75rem; border: 0.0625rem solid var(--border-strong); border-radius: var(--r-md); background: var(--bg-surface); font: inherit; font-size: var(--fs-ui); color: var(--text-1); cursor: pointer; white-space: nowrap; max-width: 100%; }
.crm .ans-bs-wahl:hover { background: var(--bg-hover); }
.crm .ans-bs-wahl.is-fehler { border: 0.09375rem solid var(--danger); }
.crm .ans-bs-wahl-text { font-weight: 600; overflow: hidden; text-overflow: ellipsis; }
.crm .ans-bs-wahl-zusatz { color: var(--text-2); font-weight: 400; }
.crm .ans-bs-pfeil { flex: none; color: var(--text-2); }
.crm .ans-bs-trenner { flex: none; width: 0.0625rem; height: 1.5rem; margin: 0 var(--s-2); background: var(--border); }
.crm .ans-bs-deckel { flex: none; font-size: var(--fs-label); color: var(--text-2); }
.crm .ans-bs .ans-umschalter { margin-left: auto; flex: none; }
.crm .ans-bs-fehler { margin: var(--s-2) 0 0; font-size: var(--fs-label); color: var(--danger); }
.crm .ans-bs-chip:focus-visible, .crm .ans-bs-x:focus-visible, .crm .ans-bs-plus:focus-visible, .crm .ans-bs-wahl:focus-visible,
.crm .ans-bs-option:focus-visible, .crm .ans-bs-check input:focus-visible, .crm .ans-bs-schnell-knopf:focus-visible, .crm .ans-bs-text-knopf:focus-visible,
.crm .ans-bs-fenster select:focus-visible, .crm .ans-bs-fenster input:focus-visible, .crm #ans-als-neu:focus-visible, .crm #ans-speichern-geaendert:focus-visible { outline: 0.125rem solid var(--focus); outline-offset: 0.125rem; }
/* Auswahl-Fenster */
.crm .ans-bs-fenster { position: absolute; z-index: 30; left: 0; top: 100%; width: 20rem; max-width: calc(100% - var(--s-2)); max-height: 26rem; overflow: auto; padding: var(--s-3); border: 0.0625rem solid var(--border); border-radius: var(--r-lg); background: var(--bg-surface); box-shadow: var(--shadow-2); color: var(--text-1); animation: ansBsEin var(--mo-pop-in) var(--ease-out); }
.crm .ans-bs-filter-fenster { width: 23rem; }
@keyframes ansBsEin { from { opacity: 0; transform: translateY(-0.25rem); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .crm .ans-bs-fenster { animation: none; } }
.crm .ans-bs-fenster-titel { margin: 0 0 var(--s-2); font-size: var(--fs-label); font-weight: 600; color: var(--text-2); }
.crm .ans-bs-optionen, .crm .ans-bs-checks { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.125rem; }
.crm .ans-bs-option { appearance: none; width: 100%; text-align: left; border: 0; background: none; padding: 0.4375rem var(--s-2); border-radius: var(--r-sm); font: inherit; font-size: var(--fs-ui); color: var(--text-1); cursor: pointer; }
.crm .ans-bs-option:hover { background: var(--bg-hover); }
.crm .ans-bs-option.is-gewaehlt { background: var(--tint-blue); color: var(--ad-blue-700); font-weight: 600; }
.crm .ans-bs-check { display: flex; align-items: center; gap: var(--s-2); padding: 0.3125rem var(--s-2); border-radius: var(--r-sm); font-size: var(--fs-ui); cursor: pointer; }
.crm .ans-bs-check:hover { background: var(--bg-hover); }
.crm .ans-bs-check input { margin: 0; accent-color: var(--ad-blue); }
.crm .ans-bs-check input:disabled + span { color: var(--text-3); }
.crm .ans-bs-leer { padding: var(--s-2); font-size: var(--fs-label); color: var(--text-2); }
.crm .ans-bs-filter-felder, .crm .ans-bs-wert-zeile { display: flex; flex-wrap: wrap; gap: var(--s-2); margin: 0 0 var(--s-3); }
.crm .ans-bs-feld { display: flex; flex-direction: column; gap: 0.25rem; flex: 1 1 8rem; min-width: 0; font-size: var(--fs-label); color: var(--text-2); }
.crm .ans-bs-feld select, .crm .ans-bs-feld input { min-height: 2rem; padding: 0 var(--s-2); border: 0.0625rem solid var(--border-strong); border-radius: var(--r-md); background: var(--bg-surface); font: inherit; font-size: var(--fs-ui); color: var(--text-1); }
.crm .ans-bs-wert { margin: 0 0 var(--s-3); padding: 0; border: 0; }
.crm .ans-bs-wert legend { padding: 0; margin: 0 0 0.25rem; font-size: var(--fs-label); color: var(--text-2); }
.crm .ans-bs-wert .ans-bs-checks { max-height: 13rem; overflow: auto; }
.crm .ans-bs-datum { display: flex; flex-direction: column; gap: 0.375rem; flex: 1 1 9rem; min-width: 0; }
.crm .ans-bs-schnell { display: flex; flex-wrap: wrap; gap: 0.375rem; }
.crm .ans-bs-schnell-knopf { appearance: none; min-height: 1.75rem; padding: 0 0.625rem; border: 0.0625rem solid var(--border-strong); border-radius: var(--r-md); background: var(--bg-surface); font: inherit; font-size: var(--fs-label); color: var(--text-1); cursor: pointer; }
.crm .ans-bs-schnell-knopf.is-gewaehlt { background: var(--tint-blue); border-color: transparent; color: var(--ad-blue-700); font-weight: 600; }
.crm .ans-bs-hinweis { margin: 0 0 var(--s-3); font-size: var(--fs-label); color: var(--text-2); }
.crm .ans-bs-fenster-fehler { margin: 0 0 var(--s-2); font-size: var(--fs-label); color: var(--danger); }
.crm .ans-bs-fenster-fuss { display: flex; justify-content: flex-end; align-items: center; gap: var(--s-3); padding-top: var(--s-2); border-top: 0.0625rem solid var(--border); margin-top: var(--s-2); }
.crm .ans-bs-text-knopf { appearance: none; border: 0; background: none; padding: var(--s-1); margin-right: auto; font: inherit; font-weight: 600; color: var(--text-2); cursor: pointer; }
.crm .ans-bs-text-knopf:hover { color: var(--text-1); }
/* Zustand „geändert" (gleiche blaue Leiste wie „neu") und „wird aktualisiert" */
.crm .ans-banner-geaendert .ans-banner-aktionen { gap: var(--s-3); }
.crm .ans-aktualisiert { font-size: var(--fs-label); color: var(--text-2); white-space: nowrap; }
.crm .ans-ergebnis.is-aktualisiert .ans-kt-karte, .crm .ans-ergebnis.is-aktualisiert .ans-gr-karte, .crm .ans-ergebnis.is-aktualisiert .ans-zeilen { opacity: 0.6; }
.crm .ans-bs-datum .ans-bs-feld { flex: none; }
.crm .ans-bs-fenster { color-scheme: light; }
.crm.dark .ans-bs-fenster, html[data-theme="dark"] .crm .ans-bs-fenster { color-scheme: dark; }
/* PR1.633 — A1/A2: zweite Zeile der Leiste beginnt mit Wert bzw. Summe; Ergebniskopf sitzt in der weißen Karte. */
.crm .ans-bs-umbruch { flex: 0 0 100%; height: 0; }
.crm .ans-bs-label + .ans-bs-umbruch + .ans-bs-wahl, .crm .ans-bs-umbruch + .ans-bs-label { margin-left: 0; }
.crm .ans-ergebnis-kopf:has(+ .ans-kt-karte), .crm .ans-ergebnis-kopf:has(+ .ans-gr-karte) { margin: 0; padding: var(--s-3) var(--s-4); border: 0.0625rem solid var(--border); border-bottom: 0; border-radius: var(--r-lg) var(--r-lg) 0 0; background: var(--bg-surface); }
.crm .ans-ergebnis-kopf + .ans-kt-karte, .crm .ans-ergebnis-kopf + .ans-gr-karte { border-top-left-radius: 0; border-top-right-radius: 0; }

/* ── PR1.635 — Frage in Worten (A1/A2): orange Zeile, Antwortkarte, KI-Bausteine. Orange = KI.
   Keine Bewegung: täglich genutzte Handlung (Konvention 22). ── */
.crm .ans-frage-bereich { display: flex; flex-direction: column; gap: var(--s-3); margin: 0 0 var(--s-3); }
.crm .ans-frage { display: flex; align-items: center; gap: 0.625rem; min-height: 2.25rem; padding: 0 var(--s-3); border: 0.0625rem solid color-mix(in srgb, var(--ad-orange) 55%, transparent); border-radius: var(--r-md); background: var(--tint-orange-zart); }
.crm .ans-frage:focus-within { border-color: var(--ad-orange-700); box-shadow: 0 0 0 0.125rem color-mix(in srgb, var(--ad-orange) 35%, transparent); }
.crm .ans-frage-funkel { flex: none; color: var(--ad-orange-700); }
.crm .ans-frage-eingabe { flex: 1 1 auto; min-width: 0; height: 2.125rem; border: 0; background: none; padding: 0; font: inherit; font-size: var(--fs-body); color: var(--text-1); outline: none; text-overflow: ellipsis; }
.crm .ans-frage-eingabe::placeholder { color: var(--text-2); opacity: 1; }
.crm .ans-frage.is-laedt .ans-frage-eingabe { color: var(--text-2); cursor: progress; }
.crm .ans-frage-enter { flex: none; font: inherit; font-size: var(--fs-meta); font-weight: 600; color: var(--ad-orange-900); background: none; border: 0; padding: 0; }
.crm .ans-frage-status { flex: none; display: inline-flex; align-items: baseline; gap: var(--s-2); font-size: var(--fs-meta); font-weight: 600; color: var(--ad-orange-900); }
.crm .ans-frage-esc { font-weight: 400; color: var(--text-2); }
.crm .ans-frage-live:empty { display: none; }
.crm .ans-frage-karte { display: flex; align-items: flex-start; gap: 0.625rem; padding: var(--s-3) var(--s-4); border: 0.0625rem solid color-mix(in srgb, var(--ad-orange) 55%, transparent); border-radius: var(--r-md); background: var(--bg-surface); color: var(--text-1); }
.crm .ans-frage-karte:focus-visible { outline: 0.125rem solid var(--focus); outline-offset: 0.125rem; }
.crm .ans-frage-karte.is-fehler { border-color: var(--danger); }
.crm .ans-frage-haken { flex: none; margin-top: 0.1875rem; color: var(--ad-green-700); }
.crm .ans-frage-symbol { flex: none; margin-top: 0.1875rem; color: var(--ad-orange-700); }
.crm .ans-frage-karte.is-fehler .ans-frage-symbol { color: var(--danger); }
.crm .ans-frage-text { flex: 1 1 auto; min-width: 0; }
.crm .ans-frage-satz { margin: 0; font-size: var(--fs-body); line-height: 1.45; overflow-wrap: anywhere; }
.crm .ans-frage-zeile { margin: 0.125rem 0 0; font-size: var(--fs-meta); color: var(--text-2); overflow-wrap: anywhere; }
.crm .ans-frage-annahmen { margin: 0.25rem 0 0; padding: 0; list-style: none; font-size: var(--fs-meta); color: var(--ad-orange-900); }
.crm .ans-frage-beispiel { appearance: none; border: 0; background: none; padding: 0; font: inherit; color: var(--ad-blue-700); cursor: pointer; text-decoration: underline; text-underline-offset: 0.125rem; }
.crm .ans-frage-link { color: var(--ad-blue-700); }
.crm .ans-frage-beispiel:focus-visible, .crm .ans-frage-link:focus-visible { outline: 0.125rem solid var(--focus); outline-offset: 0.125rem; border-radius: var(--r-sm); }
/* KI-Bausteine (A2): orange getönt + Marke „KI"; die Marke entfällt nach einer Änderung. */
.crm .ans-bs-chip-wrap.is-ki, .crm .ans-bs-wahl.is-ki { background: var(--tint-orange-zart); border: 0.0625rem solid color-mix(in srgb, var(--ad-orange) 55%, transparent); }
.crm .ans-bs-chip-wrap.is-ki .ans-bs-chip-wert { color: var(--text-1); }
.crm .ans-bs-chip-wrap.is-ki { padding-right: 0.375rem; }
.crm .ans-bs-chip-wrap.is-annahme, .crm .ans-bs-wahl.is-annahme { border-style: dashed; border-color: var(--ad-orange-700); }
.crm .ans-bs-ki { display: inline-flex; align-items: center; height: 1.125rem; padding: 0 0.3125rem; margin-left: 0.25rem; border-radius: var(--r-sm); background: var(--tint-orange); color: var(--ad-orange-900); font-size: var(--fs-label); font-weight: 700; letter-spacing: 0.02em; line-height: 1; flex: none; }
.crm.dark .ans-bs-chip-wrap.is-ki .ans-bs-chip-wert, html[data-theme="dark"] .crm .ans-bs-chip-wrap.is-ki .ans-bs-chip-wert { color: var(--text-1); }
.crm .ans-frage-allein .ans-frage-bereich { margin: 0; }
/* Dunkel: Marke und „Enter" in der hellen Stufe, sonst orange auf dunkel-orange (zu blass). */
.crm.dark .ans-bs-ki, html[data-theme="dark"] .crm .ans-bs-ki,
.crm.dark .ans-frage-enter, html[data-theme="dark"] .crm .ans-frage-enter,
.crm.dark .ans-frage-status, html[data-theme="dark"] .crm .ans-frage-status,
.crm.dark .ans-frage-annahmen, html[data-theme="dark"] .crm .ans-frage-annahmen { color: var(--ad-orange); }

@media (max-width: 56rem) {
  .crm .ans-gr-zeile, .crm .ans-gr-zeile-projekt { grid-template-columns: minmax(0, 1fr) auto; padding-left: var(--s-4); }
  .crm .ans-gr-zeile > .ans-z-logo, .crm .ans-gr-zeile > .ans-gr-status, .crm .ans-gr-zeile > .ans-z-team, .crm .ans-gr-zeile > .ans-z-cc, .crm .ans-gr-zeile-projekt > .ans-z-zahl { display: none; }
  .crm .ans-gr-balken, .crm .ans-gr-clouds, .crm .ans-gr-ccs, .crm .ans-gr-zusatz { display: none; }
}
/* Seitenleiste „Listen": Stern, Name, Zähler — Name darf auf zwei Zeilen laufen (Vorlage A1). */
.crm .sb-pill-ansicht { align-items: flex-start; }
.crm .sb-pill-ansicht .sb-stern { display: inline-flex; flex: none; margin-top: 0.125rem; color: var(--stern); }
.crm .sb-pill-ansicht .sb-pill-name { flex: 1 1 auto; min-width: 0; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; }
.crm .sb-pill-ansicht .sb-pill-zahl { flex: none; margin-left: auto; font-size: var(--fs-meta); font-variant-numeric: tabular-nums; opacity: 0.7; }
.crm .sb-pill-ansicht .sb-pill-zahl-laedt { width: 1.25rem; height: 0.75rem; margin-top: 0.1875rem; border-radius: var(--r-sm); background: currentColor; opacity: 0.18; }
.crm .sb-pill-ansicht:focus-visible { outline: 0.125rem solid var(--focus); outline-offset: -0.125rem; }

/* ── PR1.665 (#964) — Diagramm frei gestalten, direkt am Bild (Vorlage C3) ───────────────────
   Gesicht: public/js/components/crm-diagramm-gestalten.js. Alles in rem und Tokens (Konvention 21).
   Masse aus dem abgenommenen Prototyp (1440 breit): Raster 1fr + 18,75rem, Abstand .875rem,
   Buehne Radius 14, Galerie 4 Spalten, Popover 15,625rem, Ziellinie gestrichelt. */
.crm { --dzg-ok: var(--ad-green-900); --dzg-blau-text: var(--ad-blue-700); }
.crm.dark, html[data-theme="dark"] .crm { --dzg-ok: var(--ad-green); --dzg-blau-text: var(--ad-blue-300); }
.crm .dzg-host { display: flex; flex-direction: column; flex: 1; min-height: 0; }
.crm .dzg { padding: 1.75rem 4rem 2rem; background: var(--bg-app); }
.crm .dzg-kopf { display: flex; align-items: flex-end; gap: .625rem; margin-bottom: .875rem; flex-wrap: wrap; }
.crm .dzg-titelblock { flex: 1; min-width: 0; }
.crm .dzg-eyebrow { font-size: var(--fs-label); font-weight: 600; color: var(--text-3); }
.crm .dzg-titel, .crm .dzg-titel-eingabe { font-size: var(--fs-display); font-weight: 700; letter-spacing: -.015em; line-height: 1.25; margin: 0; padding: 0 .25rem; margin-left: -.25rem; border-radius: var(--r-sm); color: var(--text-1); outline: none; }
.crm .dzg-titel:hover { background: var(--bg-surface-3); cursor: text; }
.crm .dzg-titel:focus-visible, .crm .dzg-titel-eingabe:focus-visible { outline: .125rem solid var(--ad-blue); outline-offset: .125rem; }
.crm .dzg-titel-eingabe { width: 100%; font-family: inherit; background: var(--bg-surface); border: .0625rem solid var(--ad-blue); }
.crm .dzg-cmd::before { content: "\2318"; }
.crm .dzg-chevron { color: var(--text-3); transition: transform 200ms var(--ease-out); }
.crm .dzg-unter { margin: .125rem 0 0; font-size: var(--fs-ui); color: var(--text-2); }
.crm .dzg-kopf-aktionen { display: flex; gap: .625rem; align-items: center; }
.crm .dzg-fehler { display: flex; gap: .75rem; align-items: center; justify-content: space-between; margin-bottom: .75rem; padding: .625rem .875rem; border-radius: var(--r-md); border: .0625rem solid var(--ad-orange-700); background: color-mix(in srgb, var(--ad-orange-700) 10%, var(--bg-surface)); color: var(--text-1); font-size: var(--fs-meta); }

.crm .dzg-raster { display: grid; grid-template-columns: minmax(0, 1fr) 18.75rem; gap: .875rem; align-items: start; }
.crm .dzg-buehne { background: var(--bg-surface); border: .0625rem solid var(--border); border-radius: var(--r-xl); padding: .875rem 1rem; min-width: 0; }
.crm .dzg-daten { display: flex; flex-wrap: wrap; gap: .375rem; align-items: center; margin-bottom: .75rem; }
.crm .dzg-daten-label { font-size: var(--fs-label); color: var(--text-3); margin-right: .25rem; white-space: nowrap; }
.crm .dzg-chip { display: inline-flex; align-items: center; border-radius: var(--r-md); padding: .1875rem .5625rem; font-size: var(--fs-meta); font-weight: 600; white-space: nowrap; background: color-mix(in srgb, var(--ad-blue) 10%, var(--bg-surface)); color: var(--dzg-blau-text); }
.crm .dzg-sp { flex: 1; }
.crm .dzg-link { all: unset; display: inline-flex; align-items: center; gap: .375rem; font-size: var(--fs-meta); font-weight: 500; color: var(--text-2); cursor: pointer; border-radius: var(--r-sm); padding: .125rem .375rem; }
.crm .dzg-link:hover { background: var(--bg-hover); color: var(--text-1); }
.crm .dzg-link:focus-visible { outline: .125rem solid var(--ad-blue); outline-offset: .0625rem; }
.crm .dzg-canvas { position: relative; min-height: 24rem; transition: opacity 160ms ease; }
.crm .dzg-bild .ck-svg { width: 100%; height: auto; display: block; }
.crm .dzg-canvas.dzg-aus .dzg-bild { opacity: 0; transition: opacity 160ms ease; }
.crm .dzg-bild .ck-el { cursor: pointer; }
.crm .dzg-bild .ck-el:hover .ck-bar { filter: brightness(1.06); }
.crm .dzg-bild .ck-el.ck-sel:hover .ck-bar { filter: none; }
.crm .dzg-bild .ck-el.is-gezogen { opacity: .75; cursor: grabbing; }
.crm .dzg-bild .ck-el:focus:not(:focus-visible) { outline: none; }
/* Tastaturfokus (WCAG 2.4.7): Ring mit Abstand um das Element, dunkel (--text-1) — auch auf dem Akzent-Balken lesbar. */
.crm .dzg-bild .ck-el:focus-visible { outline: .125rem solid var(--text-1); outline-offset: .25rem; border-radius: var(--r-sm); }
.crm .dzg-bild .ck-el:focus-visible .ck-bar { stroke: var(--text-1); stroke-width: 2; stroke-opacity: 1; }
.crm .dzg-bild .ck-ziel-griff { transition: r 120ms ease; }
.crm .dzg-bild .ck-ziel-griff:hover, .crm .dzg-bild .ck-ziel-griff:focus-visible { r: 8; outline: none; }
.crm .dzg-ausgeblendet { font-size: var(--fs-meta); color: var(--text-3); margin-top: .5rem; }
.crm .dzg-tipp { display: flex; gap: .375rem; align-items: center; font-size: var(--fs-meta); color: var(--text-3); margin-top: .375rem; }
.crm .dzg-tipp .dzg-stern { color: var(--ad-orange-700); flex: none; }

.crm .dzg-seite { background: var(--bg-surface); border: .0625rem solid var(--border); border-radius: var(--r-xl); padding: .75rem; }
.crm .dzg-seite-kopf { display: flex; justify-content: space-between; align-items: baseline; margin: .125rem .125rem .5rem; }
.crm .dzg-seite-titel { font-size: var(--fs-meta); font-weight: 700; }
.crm .dzg-passt { font-size: var(--fs-label); font-weight: 500; color: var(--ad-orange-900); }
.crm .dzg-formen { display: grid; grid-template-columns: repeat(4, 1fr); gap: .375rem; margin-bottom: .5rem; }
.crm .dzg-form { all: unset; box-sizing: border-box; cursor: pointer; border: .0625rem solid var(--border); border-radius: .5625rem; padding: .3125rem .0625rem .25rem; display: flex; flex-direction: column; align-items: center; gap: .125rem; font-size: var(--fs-label); font-weight: 600; color: var(--text-2); text-align: center; transition: border-color 150ms ease, transform 150ms var(--ease-out), background 150ms ease; }
.crm .dzg-form .ck-mini { width: 3.25rem; height: 1.875rem; }
.crm .dzg-form span .dzg-stern { display: inline-block; width: .625rem; height: .625rem; margin-right: .0625rem; vertical-align: -.0625rem; color: currentColor; }
.crm .dzg-passt .dzg-stern { vertical-align: -.0625rem; }
.crm .dzg-form:hover { transform: translateY(-.0625rem); border-color: var(--border-strong); }
.crm .dzg-form:focus-visible { outline: .125rem solid var(--ad-blue); outline-offset: .0625rem; }
.crm .dzg-form.is-on { border-color: var(--ad-blue); background: color-mix(in srgb, var(--ad-blue) 10%, var(--bg-surface)); color: var(--dzg-blau-text); box-shadow: 0 0 0 .125rem color-mix(in srgb, var(--ad-blue) 18%, transparent); }
.crm .dzg-form.is-blass { color: var(--text-3); }
.crm .dzg-form.is-blass .ck-mini { opacity: .7; }
.crm .dzg-form[disabled] { cursor: not-allowed; opacity: .55; transform: none; }

.crm .dzg-gruppe { border-top: .0625rem solid var(--border); }
.crm .dzg-gruppe-kopf { all: unset; box-sizing: border-box; width: 100%; display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 0 .5rem; padding: .8125rem .125rem; font-size: var(--fs-meta); cursor: pointer; }
.crm .dzg-gruppe-kopf[disabled] { cursor: not-allowed; opacity: .55; }
.crm .dzg-gruppe-kopf:focus-visible { outline: .125rem solid var(--ad-blue); outline-offset: -.0625rem; border-radius: var(--r-sm); }
.crm .dzg-gruppe-text { display: flex; flex-direction: column; min-width: 0; }
.crm .dzg-gruppe-text b { font-weight: 600; }
.crm .dzg-gruppe-text small { color: var(--text-3); font-size: var(--fs-label); }
.crm .dzg-gruppe.is-offen .dzg-gruppe-kopf .dzg-chevron { transform: rotate(180deg); }
.crm .dzg-gruppe-koerper { padding: 0 .125rem .625rem; display: flex; flex-direction: column; gap: .375rem; animation: dzg-rise 220ms var(--ease-out) both; }
.crm .dzg-pal { display: flex; gap: .4375rem; margin: .625rem 0; }
.crm .dzg-gruppe-koerper .dzg-pal { margin: .5rem 0 .25rem; }
.crm .dzg-punkt { all: unset; box-sizing: border-box; width: 1.25rem; height: 1.25rem; border-radius: 50%; cursor: pointer; box-shadow: inset 0 0 0 .0625rem color-mix(in srgb, var(--text-1) 10%, transparent); transition: transform 140ms var(--ease-out); }
.crm .dzg-punkt:hover { transform: scale(1.12); }
.crm .dzg-punkt:focus-visible { outline: .125rem solid var(--ad-blue); outline-offset: .1875rem; }
.crm .dzg-punkt.is-on { box-shadow: 0 0 0 .125rem var(--bg-surface), 0 0 0 .25rem var(--text-1); }
.crm .dzg-schalter { all: unset; display: flex; gap: .5rem; align-items: center; font-size: var(--fs-meta); color: var(--text-2); cursor: pointer; }
.crm .dzg-schalter:focus-visible { outline: .125rem solid var(--ad-blue); outline-offset: .125rem; border-radius: var(--r-sm); }
.crm .dzg-sw { width: 1.75rem; height: 1rem; border-radius: 62.4375rem; background: var(--border-strong); position: relative; flex: none; transition: background 160ms ease; }
.crm .dzg-sw::after { content: ''; position: absolute; top: .125rem; left: .125rem; width: .75rem; height: .75rem; border-radius: 50%; background: var(--bg-surface); transition: transform 200ms var(--ease-out); }
.crm .dzg-sw.is-on { background: var(--ad-blue); }
.crm .dzg-sw.is-on::after { transform: translateX(.75rem); }
.crm .dzg-wahlen { display: flex; flex-wrap: wrap; gap: .375rem; }
.crm .dzg-wahl { all: unset; box-sizing: border-box; cursor: pointer; padding: .25rem .625rem; border-radius: var(--r-md); border: .0625rem solid var(--border); font-size: var(--fs-label); font-weight: 600; color: var(--text-2); }
.crm .dzg-wahl:hover { border-color: var(--border-strong); }
.crm .dzg-wahl:focus-visible { outline: .125rem solid var(--ad-blue); outline-offset: .0625rem; }
.crm .dzg-wahl.is-on { border-color: var(--ad-blue); background: color-mix(in srgb, var(--ad-blue) 10%, var(--bg-surface)); color: var(--dzg-blau-text); }
.crm .dzg-label { font-size: var(--fs-label); color: var(--text-3); }
.crm .dzg-ziel-zeile { display: flex; gap: .5rem; align-items: center; }
.crm .dzg-eingabe { flex: 1; min-width: 0; font: inherit; font-size: var(--fs-meta); padding: .3125rem .5rem; border: .0625rem solid var(--border-strong); border-radius: var(--r-md); background: var(--bg-input); color: var(--text-1); }
.crm .dzg-eingabe:focus-visible { outline: .125rem solid var(--ad-blue); outline-offset: .0625rem; }

.crm .dzg-pop { position: absolute; z-index: 20; width: 15.625rem; background: var(--bg-surface); border: .0625rem solid var(--border-strong); border-radius: .75rem; box-shadow: var(--shadow-3); padding: .75rem .875rem; transform-origin: top left; animation: dzg-pop-ein 240ms var(--ease-out) both; }
.crm .dzg-pop-titel { display: block; font-size: var(--fs-ui); font-weight: 700; }
.crm .dzg-pop-wert { color: var(--text-3); font-size: var(--fs-label); }
.crm .dzg-pop-aktionen { display: flex; flex-direction: column; gap: .125rem; border-top: .0625rem solid var(--border); padding-top: .5rem; }
.crm .dzg-zeile { all: unset; box-sizing: border-box; display: flex; gap: .5rem; align-items: center; font-size: var(--fs-meta); padding: .375rem .125rem; color: var(--text-1); cursor: pointer; border-radius: var(--r-sm); }
.crm .dzg-zeile .ic, .crm .dzg-zeile .dzg-linie { color: var(--text-3); flex: none; }
.crm .dzg-zeile:hover { background: var(--bg-hover); }
.crm .dzg-zeile:focus-visible { outline: .125rem solid var(--ad-blue); outline-offset: -.0625rem; }
.crm .dzg-notiz { margin-bottom: .5rem; }
.crm .dzg-notiz-text { width: 100%; box-sizing: border-box; resize: vertical; font: inherit; font-size: var(--fs-meta); padding: .375rem .5rem; border: .0625rem solid var(--border-strong); border-radius: var(--r-md); background: var(--bg-input); color: var(--text-1); }
.crm .dzg-notiz-zeile { display: flex; justify-content: space-between; align-items: center; margin-top: .375rem; }
.crm .dzg-notiz-zaehler { font-size: var(--fs-label); color: var(--text-3); }

.crm .dzg-leer { display: flex; flex-direction: column; gap: .375rem; align-items: center; justify-content: center; min-height: 15rem; text-align: center; color: var(--text-2); }
.crm .dzg-leer b { font-size: var(--fs-body); color: var(--text-1); }
.crm .dzg-leer p { margin: 0; max-width: 26rem; font-size: var(--fs-meta); }
.crm .dzg-skelett { display: flex; flex-direction: column; gap: 1.125rem; padding: 1rem 0 0 10.5rem; }
.crm .dzg-sk-balken { height: 1.125rem; border-radius: var(--r-sm); background: linear-gradient(90deg, var(--bg-surface-3), var(--bg-hover), var(--bg-surface-3)); background-size: 200% 100%; animation: dzg-glanz 1.4s linear infinite; }

/* Formwechsel: 160 ms aus, dann wachsen (Balken 520 ms je +50 ms, Ring im Uhrzeigersinn je Stueck +60 ms). */
.crm .dzg-canvas.dzg-ein .ck-bar { animation: dzg-wachsen-x 520ms var(--ease-out) both; transform-box: fill-box; transform-origin: left center; }
.crm .dzg-canvas.dzg-ein .ck-svg[aria-label^="Säulen"] .ck-bar { animation-name: dzg-wachsen-y; transform-origin: center bottom; }
.crm .dzg-canvas.dzg-ein .ck-arc { stroke-dasharray: 100 100; animation: dzg-bogen 600ms var(--ease-out) both; }
.crm .dzg-canvas.dzg-ein .ck-el:nth-child(2) .ck-bar, .crm .dzg-canvas.dzg-ein .ck-el:nth-child(2) .ck-arc { animation-delay: 50ms; }
.crm .dzg-canvas.dzg-ein .ck-el:nth-child(3) .ck-bar, .crm .dzg-canvas.dzg-ein .ck-el:nth-child(3) .ck-arc { animation-delay: 100ms; }
.crm .dzg-canvas.dzg-ein .ck-el:nth-child(4) .ck-bar, .crm .dzg-canvas.dzg-ein .ck-el:nth-child(4) .ck-arc { animation-delay: 150ms; }
.crm .dzg-canvas.dzg-ein .ck-el:nth-child(5) .ck-bar, .crm .dzg-canvas.dzg-ein .ck-el:nth-child(5) .ck-arc { animation-delay: 200ms; }
.crm .dzg-canvas.dzg-ein .ck-el:nth-child(6) .ck-bar, .crm .dzg-canvas.dzg-ein .ck-el:nth-child(6) .ck-arc { animation-delay: 250ms; }
.crm .dzg-canvas.dzg-ein .ck-el:nth-child(n+7) .ck-bar, .crm .dzg-canvas.dzg-ein .ck-el:nth-child(n+7) .ck-arc { animation-delay: 300ms; }
@keyframes dzg-wachsen-x { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes dzg-wachsen-y { from { transform: scaleY(0); } to { transform: scaleY(1); } }
@keyframes dzg-bogen { from { stroke-dasharray: 0 100; } to { stroke-dasharray: 100 100; } }
@keyframes dzg-pop-ein { from { opacity: 0; transform: translateY(-.25rem) scale(.98); } to { opacity: 1; transform: none; } }
@keyframes dzg-rise { from { opacity: 0; transform: translateY(-.25rem); } to { opacity: 1; transform: none; } }
@keyframes dzg-glanz { from { background-position: 200% 0; } to { background-position: -200% 0; } }
@media (prefers-reduced-motion: reduce) {
  .crm .dzg-canvas.dzg-ein .ck-bar, .crm .dzg-canvas.dzg-ein .ck-arc { animation: none; }
  .crm .dzg-pop { animation: dzg-fade 160ms linear both; }
  .crm .dzg-gruppe-koerper { animation: none; }
  .crm .dzg-sk-balken { animation: none; }
  .crm .dzg-form, .crm .dzg-punkt { transition: none; }
  @keyframes dzg-fade { from { opacity: 0; } to { opacity: 1; } }
}
@media (max-width: 64rem) {
  .crm .dzg { padding: 1.25rem 1.5rem 1.5rem; }
  .crm .dzg-raster { grid-template-columns: minmax(0, 1fr); }
}

/* PR1.668 #967 — Vorlage C4 (Prototyp `cMore`/`timeSvg`): Abfragezeile A/B/ƒ, Kombibild der Zeitachse
   (zweite Achse in Orange, laufende Periode schraffiert, Markierungen), Legende mit Summe, Ocker-Hinweis.
   Farben nur ueber Tokens; die Zeichnung selbst traegt ihre Farben als SVG-Attribute (chart-kit.js). */
.crm { --kf-orange-text: color-mix(in srgb, var(--ad-orange-700) 35%, var(--ad-orange-900)); --kf-orange-grund: color-mix(in srgb, var(--tint-orange) 64%, white);
  /* Gate R1 (3): Gitter, Schraffur und Markierung leise in beiden Themen (hell = Werte der Vorlage). */
  --kf-gitter: color-mix(in srgb, var(--text-1) 6%, var(--bg-surface)); --kf-schraffur: color-mix(in srgb, var(--text-1) 11%, var(--bg-surface));
  --kf-marke: var(--ad-green-700); --kf-marke-grund: var(--tint-green); --kf-marke-text: var(--ad-green-900); }
.crm.dark, html[data-theme="dark"] .crm { --kf-orange-text: var(--ad-orange); --kf-orange-grund: color-mix(in srgb, var(--ad-orange-700) 18%, var(--bg-surface));
  --kf-gitter: color-mix(in srgb, var(--text-1) 9%, var(--bg-surface)); --kf-schraffur: color-mix(in srgb, var(--text-1) 14%, var(--bg-surface));
  --kf-marke: var(--ad-green); --kf-marke-grund: color-mix(in srgb, var(--ad-green) 16%, var(--bg-surface)); --kf-marke-text: var(--ad-green); }
.crm .dzg-abfragen { display: flex; flex-wrap: wrap; gap: .375rem; align-items: center; margin-bottom: .5rem; }
.crm .dzg-abfrage, .crm .dzg-formel-chip { all: unset; box-sizing: border-box; display: inline-flex; gap: .375rem; align-items: center; font-size: var(--fs-meta); font-weight: 600; border-radius: var(--r-md); padding: .25rem .5625rem; background: var(--tint-blue); color: var(--dzg-blau-text); white-space: nowrap; }
.crm .dzg-abfrage { cursor: pointer; transition: background 160ms ease, color 160ms ease; }
.crm .dzg-abfrage:focus-visible { outline: .125rem solid var(--ad-blue); outline-offset: .0625rem; }
.crm .dzg-abfrage b, .crm .dzg-formel-chip b { display: inline-grid; place-items: center; width: 1.125rem; height: 1.125rem; border-radius: .3125rem; background: var(--bg-surface); font-size: var(--fs-label); }
.crm .dzg-abfrage.is-aus { background: var(--bg-surface-3); color: var(--text-3); }
.crm .dzg-abfrage-aus { display: inline-flex; gap: .375rem; align-items: center; }
.crm .dzg-abfrage-aus i { width: .4375rem; height: .4375rem; border-radius: 50%; border: .0625rem solid currentColor; }
.crm .dzg-abfrage-aus small, .crm .dzg-formel-chip small { font-weight: 500; opacity: .8; font-size: var(--fs-label); }
.crm .dzg-formel-chip { background: var(--kf-orange-grund); color: var(--kf-orange-text); }
.crm .dzg-abfrage-plus { color: var(--text-2); font-weight: 500; }
.crm .dzg-bild .ck-kombi { width: 100%; height: auto; overflow: visible; }
.crm .ck-kombi .ck-kombi-gitter { stroke: var(--kf-gitter); }
.crm .ck-kombi .ck-kombi-schraffur { fill: var(--kf-schraffur); }
.crm .ck-kombi .ck-kombi-zeitraum { fill: var(--kf-marke-grund); }
.crm .ck-kombi .ck-kombi-pille { fill: var(--kf-marke-grund); }
.crm .ck-kombi .ck-kombi-markelinie { stroke: var(--kf-marke); }
.crm .ck-kombi .ck-kombi-raute, .crm .ck-kombi .ck-kombi-marke-text { fill: var(--kf-marke-text); }
.crm .ck-kombi .ck-kombi-punkt { fill: var(--bg-surface); }
/* Werte bleiben lesbar, auch wo eine Gitter- oder Ø-Linie darunter laeuft. */
.crm .ck-kombi .ck-kombi-wert { paint-order: stroke; stroke: var(--bg-surface); stroke-width: .1875rem; stroke-linejoin: round; }
.crm .ck-kombi-hinweis { margin: .25rem 0 0; font-size: var(--fs-meta); color: var(--text-2); }
.crm .ck-kombi .ck-kombi-tick { font-size: var(--fs-label); font-weight: 500; fill: var(--text-2); }
.crm .ck-kombi .ck-kombi-abschnitt { font-weight: 600; }
.crm .ck-kombi .ck-kombi-tick-rechts { fill: var(--kf-orange-text); }
.crm .dzg-abfragen-umbruch { flex-basis: 100%; height: 0; }
.crm .ck-kombi .ck-kombi-wert { font-size: var(--fs-meta); font-weight: 600; fill: var(--text-1); }
.crm .ck-kombi .ck-kombi-marke-text { font-size: var(--fs-label); font-weight: 700; }
.crm .kf-ein .ck-kombi .ck-kombi-saeule { transform-box: fill-box; transform-origin: center bottom; animation: dzg-wachsen-y 520ms var(--ease-out) both; }
/* Nur beim ersten Erscheinen (.kf-ein): die Linie zeichnet sich nach den Saeulen (900 ms), Punkte und
   Markierungen folgen. Ein Klick in der Seitenleiste zeichnet still neu — keine Bewegung bei jeder Einstellung. */
.crm .kf-ein .ck-kombi .ck-kombi-linie { stroke-dasharray: 1; stroke-dashoffset: 1; animation: kf-zeichnen 900ms var(--ease-out) 300ms forwards; }
.crm .kf-ein .ck-kombi .ck-kombi-punkt { animation: dzg-fade-kf 200ms ease-out 1000ms both; }
.crm .kf-ein .ck-kombi .ck-kombi-marke { animation: dzg-rise 300ms var(--ease-out) 700ms both; }
@keyframes kf-zeichnen { to { stroke-dashoffset: 0; } }
@keyframes dzg-fade-kf { from { opacity: 0; } to { opacity: 1; } }
.crm .ck-legende2 { display: flex; flex-wrap: wrap; gap: .5rem 1rem; align-items: center; font-size: var(--fs-meta); color: var(--text-2); margin-top: .125rem; }
.crm .ck-legende2-eintrag { display: inline-flex; align-items: center; gap: .375rem; }
.crm .ck-legende2-eintrag i { display: inline-block; width: .625rem; height: .625rem; border-radius: .1875rem; }
.crm .ck-legende2-eintrag i.ist-linie { border-radius: 50%; }
.crm .ck-legende2-sp { flex: 1; }
.crm .ck-legende2-summe { color: var(--text-2); }
.crm .dzg-luecke { display: flex; gap: .375rem; align-items: center; font-size: var(--fs-meta); color: var(--text-2); margin-top: .625rem; background: var(--ocker-grund); border-radius: var(--r-md); padding: .4375rem .625rem; }
.crm .dzg-luecke-sym { display: inline-flex; color: var(--ocker-fuell); flex: none; }
.crm .dzg-luecke-link { all: unset; color: var(--ocker-text); font-weight: 600; cursor: pointer; }
.crm .dzg-luecke-link:hover { text-decoration: underline; }
.crm .dzg-luecke-link:focus-visible { outline: .125rem solid var(--ad-blue); outline-offset: .0625rem; border-radius: var(--r-sm); }
.crm .dzg-skelett-zeit { flex-direction: row; align-items: flex-end; gap: 1.75rem; height: 16rem; padding: 2.5rem 2.5rem 1.5rem 4rem; }
.crm .dzg-sk-saeule { flex: 1; border-radius: var(--r-sm); background: linear-gradient(180deg, var(--bg-surface-3), var(--bg-hover), var(--bg-surface-3)); background-size: 100% 200%; animation: dzg-glanz 1.4s linear infinite; }
.crm .dzg-formel-abfragen { display: flex; flex-direction: column; gap: .375rem; }
.crm .dzg-formel-abfrage { display: flex; gap: .5rem; align-items: center; font-size: var(--fs-meta); }
.crm .dzg-buchstabe { display: inline-grid; place-items: center; width: 1.125rem; height: 1.125rem; border-radius: .3125rem; background: var(--tint-blue); color: var(--dzg-blau-text); font-size: var(--fs-label); flex: none; }
.crm .dzg-formel-text { color: var(--text-2); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.crm .dzg-formel-teile { display: flex; gap: .375rem; }
.crm .dzg-marken { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .25rem; }
.crm .dzg-marke { display: flex; justify-content: space-between; align-items: center; gap: .5rem; font-size: var(--fs-meta); color: var(--ad-green-900); }
.crm .dzg-marke-form { display: flex; flex-direction: column; gap: .25rem; }
.crm .dzg-achse-zeile { display: flex; justify-content: space-between; align-items: center; gap: .5rem; font-size: var(--fs-meta); }
@media (prefers-reduced-motion: reduce) {
  /* Reduzierte Bewegung: die Linie erscheint ohne Zeichnen, nur als Ueberblendung. */
  .crm .kf-ein .ck-kombi .ck-kombi-saeule { animation: none; }
  .crm .kf-ein .ck-kombi .ck-kombi-linie { stroke-dasharray: none; stroke-dashoffset: 0; animation: dzg-fade-kf 200ms linear both; }
  .crm .kf-ein .ck-kombi .ck-kombi-punkt, .crm .kf-ein .ck-kombi .ck-kombi-marke { animation: dzg-fade-kf 200ms linear both; }
  .crm .dzg-sk-saeule { animation: none; }
}

/* ── PR1.600 (Ticket 923): Vorlagenwahl im Leerzustand von „Mein Dashboard" (Bild d2) ──
   Masse aus design/mockups/dashboard-31-10/entwuerfe.html (CSS „Vorlagen (D2)"), 1rem = 15 px,
   Schriftgroessen aus der Rollen-Skala (fonts.css). Spalten anteilig (Vorgabe 04.11.): so viele
   gleiche Spalten wie Vorlagen angeboten werden. Keine Bewegung: die Wahl kommt einmal je Person. */
.crm .crm-dw-grid > .dash-vw-wirt { grid-column: 1 / -1; min-width: 0; }
.crm .dash-vw { display: flex; flex-direction: column; gap: .8rem; line-height: 1.45; }
.crm .dash-vw-karte { background: var(--bg-card); border: .0667rem solid var(--border); border-radius: .8rem; padding: 1.3333rem 1.4667rem; }
.crm .dash-vw-titel { margin: 0; font-size: var(--fs-title); font-weight: 700; color: var(--text-1); line-height: 1.3; }
.crm .dash-vw-lead { margin: .2667rem 0 0; font-size: var(--fs-meta); color: var(--text-2); }
.crm .dash-vw-tpls { display: grid; grid-template-columns: repeat(var(--dash-vw-n, 4), minmax(0, 1fr)); gap: .8rem; margin-top: 1.0667rem; }
.crm .dash-vw-tpl { position: relative; display: flex; flex-direction: column; gap: .6667rem; min-width: 0; padding: .9333rem; background: var(--bg-card); border: .0667rem solid var(--border); border-radius: .8rem; cursor: pointer; }
.crm .dash-vw-tpl:hover { border-color: var(--border-strong); }
.crm .dash-vw-tpl.is-on { border: .134rem solid var(--ad-blue); padding: .8667rem; box-shadow: 0 0 0 .2667rem var(--tint-blue); }  /* .134rem = 2,01 px: .1333rem rundet Chrome auf 1 px ab */
.crm .dash-vw-tpl:focus-visible { outline: .134rem solid var(--focus); outline-offset: .2rem; }
.crm .dash-vw-rb { position: absolute; top: .9333rem; right: .9333rem; width: 1.2rem; height: 1.2rem; box-sizing: border-box; border-radius: 50%; border: .1rem solid var(--border-strong); background: var(--bg-card); }
.crm .dash-vw-tpl.is-on .dash-vw-rb { top: .8667rem; right: .8667rem; border: .334rem solid var(--ad-blue); }  /* 5,01 px Ring, 8 px Loch */
.crm .dash-vw-hd { display: flex; gap: .6667rem; align-items: center; padding-right: 1.6rem; min-width: 0; }
.crm .dash-vw-ic { flex: none; width: 2.2667rem; height: 2.2667rem; display: grid; place-items: center; border-radius: .6rem; background: var(--tint-blue); color: var(--ad-blue-700); }
.crm .dash-vw-hd b { display: block; font-size: var(--fs-body); font-weight: 700; color: var(--text-1); }
.crm .dash-vw-hd small { display: block; font-size: var(--fs-label); color: var(--text-3); }
.crm .dash-vw-mini { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .4rem; }
.crm .dash-vw-zelle, .crm .dash-vw-zelle-person .dash-vw-pers { min-width: 0; padding: .4667rem .6rem; background: var(--bg-card2); border: .0667rem solid var(--border); border-radius: .5333rem; }
.crm .dash-vw-zelle-breit { grid-column: span 2; }
.crm .dash-vw-zelle-achtung { background: var(--ocker-grund); border-color: color-mix(in srgb, var(--ocker-fuell) 40%, transparent); }
.crm .dash-vw-zl { display: block; font-size: var(--fs-label); color: var(--text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.crm .dash-vw-zwz { display: flex; align-items: baseline; gap: .2667rem; min-width: 0; }
.crm .dash-vw-zw { font-size: var(--fs-section); font-weight: 600; color: var(--text-1); font-variant-numeric: tabular-nums; }
.crm .dash-vw-neben { font-size: var(--fs-label); color: var(--text-2); white-space: nowrap; }
.crm .dash-vw-zw-fehlt { color: var(--text-3); cursor: help; }
.crm .dash-vw-zelle-person { display: flex; gap: .5333rem; align-items: center; }
.crm .dash-vw-zelle-person .dash-vw-pers { flex: 1; }
.crm .dash-vw-zelle-person .dash-vw-zw { font-size: var(--fs-ui); font-weight: 700; }
.crm .dash-vw-ava { flex: none; display: flex; }
.crm .dash-vw-ava .emp-avatar { width: 1.7333rem !important; height: 1.7333rem !important; border-radius: 50%; --mono-bg: var(--border); }
.crm .dash-vw-skel { display: inline-block; width: 2.4rem; height: 1.1333rem; margin-top: .1333rem; border-radius: .2667rem; background: var(--border); }
.crm .dash-vw-zelle-breit .dash-vw-skel { width: 6rem; }
.crm .dash-vw-liste { margin: 0; padding: 0 0 0 1.0667rem; font-size: var(--fs-meta); line-height: 1.6; color: var(--text-2); }
.crm .dash-vw-cnt { margin-top: auto; font-size: var(--fs-label); color: var(--text-3); }
.crm .dash-vw-fuss { display: flex; flex-wrap: wrap; gap: .6667rem; align-items: center; margin-top: 1.0667rem; padding-top: .9333rem; border-top: .0667rem solid var(--border); }
.crm .dash-vw-note { font-size: var(--fs-meta); color: var(--text-2); }
.crm .dash-vw-fuss .btn { font-size: var(--fs-meta); font-weight: 600; line-height: 1.45; padding: .4667rem .8rem; border-radius: .5333rem; }
.crm .dash-vw-ghost { color: var(--text-1); }
.crm .dash-vw-sp { flex: 1; }
.crm .dash-vw-info { display: flex; gap: .6667rem; align-items: center; padding: .6667rem .8rem; border-radius: .6667rem; background: var(--tint-blue); color: var(--ad-blue-800); font-size: var(--fs-meta); }
.crm .dash-vw-info svg { flex: none; }
html[data-theme="dark"] .crm .dash-vw-info { color: var(--text-1); }
@media (max-width: 73.3333rem) {
  .crm .dash-vw-tpls { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 42.6667rem) {
  .crm .dash-vw-tpls { grid-template-columns: minmax(0, 1fr); }
  .crm .dash-vw-sp { display: none; }
  .crm .dash-vw-start { width: 100%; }
}

/* ─────────────────────────────────────────
   PR1.698 (Ticket 1002) — Bericht per Mail (Vorlage E2, abgenommen 03.11.2026)
   Dialog 540 breit · Zeilenraster 112 + 1fr · Fusszeile grau · Berichte-Liste · Einstellungszeile.
   ───────────────────────────────────────── */
.crm .dbr-host { position: fixed; inset: 0; z-index: 95; display: flex; align-items: center; justify-content: center; padding: 1.6rem; }
.crm .dbr-veil { position: absolute; inset: 0; background: color-mix(in srgb, var(--text-1) 32%, transparent); animation: fadeIn var(--mo-fade) var(--ease-out); }
.crm .dbr-dlg {
  position: relative; width: min(36rem, 96vw); max-height: 90vh; overflow: auto;
  background: var(--bg-surface); border-radius: 0.9333rem; box-shadow: var(--shadow-3);
  display: flex; flex-direction: column; animation: cmdkIn var(--mo-pop-in) var(--ease-out);
}
.crm .dbr-dlg:focus-visible { outline: 0.1333rem solid var(--focus); outline-offset: 0.1333rem; }
.crm .dbr-kopf { display: flex; align-items: flex-start; gap: 0.6667rem; padding: 1.0667rem 1.2rem 0.4467rem; }
.crm .dbr-kopf-sym { color: var(--text-1); display: inline-flex; padding-top: 0.2rem; }
.crm .dbr-kopf h2 { margin: 0; font-size: var(--fs-section); line-height: 1.4rem; font-weight: 700; color: var(--text-1); letter-spacing: -0.005em; }
.crm .dbr-kopf p { margin: 0.2867rem 0 0; font-size: var(--fs-meta); line-height: 1.2667rem; color: var(--text-2); }
.crm .dbr-x { margin-left: auto; color: var(--text-2); cursor: pointer; display: inline-flex; padding: 0.1333rem; border-radius: var(--r-sm); }
.crm .dbr-x:hover { color: var(--text-1); background: var(--bg-surface-3); }
.crm .dbr-x:focus-visible { outline: 0.1333rem solid var(--focus); outline-offset: 0.0667rem; }
.crm .dbr-koerper { padding: 0.4rem 1.2rem 0.9667rem; display: flex; flex-direction: column; gap: 0.8rem; }
/* Vorlage E2: Zeilenluecken Inhalt→Rhythmus und Rhythmus→Zeitraum je 1 px groesser (Gate R2). */
.crm .dbr-koerper > .dbr-zeile:nth-child(2), .crm .dbr-koerper > .dbr-zeile:nth-child(3) { margin-top: 0.0667rem; }
.crm .dbr-zeile { display: grid; grid-template-columns: 7.4667rem minmax(0, 1fr); gap: 0.8rem; align-items: start; font-size: var(--fs-ui); }
.crm .dbr-label { font-weight: 600; color: var(--text-2); font-size: var(--fs-meta); padding-top: 0.4rem; }
.crm .dbr-fest { display: flex; gap: 0.5333rem; align-items: center; padding: 0.4rem 0; line-height: 1.2rem; color: var(--text-1); }
.crm .dbr-fest svg { color: var(--text-3); flex: none; }
.crm .dbr-fest small { color: var(--text-3); font-size: var(--fs-label); }
.crm .dbr-seg { display: flex; flex-wrap: wrap; justify-self: stretch; background: var(--bg-surface-3); border-radius: 0.6rem; padding: 0.2rem; gap: 0.1333rem; }
.crm .dbr-seg-wahl { all: unset; box-sizing: border-box; padding: 0.3333rem 0.7333rem; line-height: 1.2rem; border-radius: 0.4667rem; font-size: var(--fs-meta); font-weight: 600; color: var(--text-2); cursor: pointer; }
.crm .dbr-seg-wahl.is-on { background: var(--bg-surface); color: var(--text-1); box-shadow: var(--shadow-1); }
.crm .dbr-seg-wahl:focus-visible { outline: 0.1333rem solid var(--focus); outline-offset: 0.0667rem; }
.crm .dbr-seg-wahl[disabled] { cursor: default; opacity: .6; }
.crm .dbr-opt { display: flex; flex-direction: column; gap: 0.2rem; margin-bottom: 0.2rem; }
.crm .dbr-opt-zeile { position: relative; display: flex; gap: 0.5333rem; align-items: center; font-size: var(--fs-meta); line-height: 1.1333rem; color: var(--text-1); padding: 0.3333rem 0.5333rem; border-radius: 0.4667rem; cursor: pointer; }
.crm .dbr-opt-zeile input { position: absolute; opacity: 0; width: 0.0667rem; height: 0.0667rem; margin: 0; }
.crm .dbr-opt-zeile i { width: 0.9333rem; height: 0.9333rem; border-radius: 50%; border: 0.1067rem solid var(--border-strong); background: var(--bg-surface); flex: none; box-sizing: border-box; }
.crm .dbr-opt-zeile:hover { background: var(--bg-surface-3); }
.crm .dbr-opt-zeile.is-on { background: var(--tint-blue); color: var(--ad-blue-700); font-weight: 600; }
.crm .dbr-opt-zeile.is-on i { border: 0.2667rem solid var(--ad-blue); }
.crm .dbr-opt-zeile:has(input:focus-visible) { outline: 0.1333rem solid var(--focus); outline-offset: 0.0667rem; }
.crm .dbr-fuss { display: flex; align-items: center; flex-wrap: nowrap; gap: 0.5333rem; padding: 0.8rem 1.2rem; border-top: 0.0667rem solid var(--border); background: var(--bg-surface-2); border-radius: 0 0 0.9333rem 0.9333rem; font-size: var(--fs-meta); color: var(--text-2); }
.crm .dbr-sp { flex: 1; }
.crm .dbr-fuss-text { flex: 0 1 auto; min-width: 0; }
.crm .dbr-fuss > .btn { flex: 0 0 auto; }
.crm .dbr-fuss-fehler { color: var(--danger); font-weight: 600; flex: 1 1 0; min-width: 0; }
.crm .dbr-fuss:has(.dbr-fuss-fehler) .dbr-sp { display: none; }
.crm .dbr-link { all: unset; cursor: pointer; color: var(--ad-blue-700); font-weight: 600; font-size: var(--fs-meta); border-radius: var(--r-sm); }
.crm .dbr-link:hover { text-decoration: underline; }
.crm .dbr-link:focus-visible { outline: 0.1333rem solid var(--focus); outline-offset: 0.1333rem; }
.crm .dbr-link[disabled] { opacity: .55; cursor: default; }
.crm .dbr-link-rot { color: var(--danger); }
.crm .dbr-platz { display: block; height: 0.9333rem; border-radius: var(--r-sm); background: var(--bg-surface-3); margin-top: 0.4rem; width: 100%; }
.crm .dbr-platz-stapel { display: flex; flex-direction: column; gap: 0.2667rem; }
.crm .dbr-meldung { display: flex; align-items: center; gap: 0.8rem; flex-wrap: wrap; padding: 0.6667rem 0.8rem; border-radius: var(--r-md); background: var(--ocker-grund); color: var(--ocker-text); font-size: var(--fs-meta); }
/* Berichte-Liste (Einstellungen) */
.crm .dbr-liste-satz { margin: 0 0 0.6667rem; font-size: var(--fs-meta); color: var(--text-2); }
.crm .dbr-liste { list-style: none; margin: 0; padding: 0; }
.crm .dbr-eintrag { display: grid; grid-template-columns: 2rem minmax(0, 4fr) minmax(max-content, 1.3fr) minmax(0, 1fr); gap: 0.8rem; align-items: center; padding: 0.6667rem 0.1333rem; border-top: 0.0667rem solid var(--border); font-size: var(--fs-ui); }
.crm .dbr-eintrag-sym { width: 2rem; height: 2rem; border-radius: var(--r-md); background: var(--tint-blue); color: var(--ad-blue-700); display: grid; place-items: center; }
.crm .dbr-eintrag-text { min-width: 0; }
.crm .dbr-eintrag-text b { display: block; font-weight: 600; color: var(--text-1); }
.crm .dbr-eintrag-text small { display: block; color: var(--text-3); font-size: var(--fs-meta); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.crm .dbr-eintrag-r { text-align: right; }
.crm .dbr-pille { display: inline-flex; align-items: center; border-radius: 62.4375rem; padding: 0.0667rem 0.6rem; font-size: var(--fs-label); font-weight: 600; line-height: 1.3333rem; white-space: nowrap; background: var(--bg-surface-3); color: var(--text-2); }
.crm .dbr-pille-ok { background: var(--tint-green); color: var(--ad-green-900); }
.crm .dbr-pille-warn { background: var(--ocker-grund); color: var(--ocker-text); }
.crm .dbr-leer { margin: 0; padding: 0.6667rem 0.1333rem; border-top: 0.0667rem solid var(--border); font-size: var(--fs-meta); color: var(--text-3); }
.crm .dbr-liste-platz { display: flex; flex-direction: column; gap: 0.5333rem; padding: 0.4rem 0; }
@media (max-width: 42.6667rem) {
  .crm .dbr-eintrag { grid-template-columns: 2rem minmax(0, 1fr); }
  .crm .dbr-eintrag > span:nth-child(3), .crm .dbr-eintrag-r { grid-column: 2; text-align: left; }
  .crm .dbr-zeile { grid-template-columns: minmax(0, 1fr); gap: 0.2667rem; }
}
/* Thema „Berichte“ in den Mail-Einstellungen */
.crm .email-pref-neu { display: inline-block; margin-left: 0.2667rem; padding: 0 0.4rem; border-radius: 62.4375rem; background: var(--ad-orange-700); color: var(--text-inv); font-size: var(--fs-label); font-weight: 700; line-height: 1rem; vertical-align: 0.0667rem; }
.crm .email-pref-hinweis { display: block; color: var(--text-3); font-size: var(--fs-meta); font-weight: 400; }
/* Einstellungszeile „Teilen und Bericht“ im Gestalten + Menüeintrag */
.crm .dzg-gruppe-bericht.is-offen { background: var(--tint-blue); border-radius: var(--r-md); margin: 0 -0.375rem; padding: 0 0.4rem; }
.crm .dzg-bericht-zustand { margin: 0; font-size: var(--fs-meta); color: var(--text-2); }
.crm .dzg-bericht-knopf { align-self: flex-start; margin-top: 0.5333rem; gap: 0.4667rem; }
@media (prefers-reduced-motion: reduce) {
  .crm .dbr-veil, .crm .dbr-dlg { animation: none; }
}
.crm .dbr-fuss .btn { font-size: var(--fs-meta); height: 2.3333rem; padding: 0 0.9333rem; border-radius: var(--r-md); }
.crm .dzg-bericht-knopf.btn { font-size: var(--fs-meta); padding: 0.3333rem 0.6667rem; }
.crm .dbr-fuss .btn[disabled] { opacity: .5; cursor: not-allowed; }
/* Dunkles Thema: helle Stufen, damit Pille, Link und gewählte Zeile >= 4,5:1 erreichen. */
.crm.dark .dbr-pille-ok, html[data-theme="dark"] .crm .dbr-pille-ok { color: var(--ad-green); }
.crm.dark .dbr-link:not(.dbr-link-rot), html[data-theme="dark"] .crm .dbr-link:not(.dbr-link-rot) { color: var(--ad-blue-300); }
.crm.dark .dbr-opt-zeile.is-on, html[data-theme="dark"] .crm .dbr-opt-zeile.is-on { color: var(--ad-blue-300); }
.crm.dark .dbr-eintrag-sym, html[data-theme="dark"] .crm .dbr-eintrag-sym { color: var(--ad-blue-300); }
/* PR1.698 (Vorlage E2 Punkt 5): Mail-Themen als Schalter mit halbfettem Namen (Bild zeigt beide Zeilen so). */
.crm .crm-settings-mail .email-pref-row > span:first-child { font-weight: 600; }
.crm .crm-settings-mail .email-pref-toggle {
  appearance: none; -webkit-appearance: none; flex: none; margin: 0;
  width: 1.8667rem !important; height: 1.0667rem !important; border-radius: 62.4375rem;
  background: var(--border-strong); position: relative; cursor: pointer; transition: background 160ms ease;
}
.crm .crm-settings-mail .email-pref-toggle::after {
  content: ''; position: absolute; top: 0.1333rem; left: 0.1333rem; width: 0.8rem; height: 0.8rem;
  border-radius: 50%; background: var(--bg-surface); transition: transform 200ms var(--ease-out);
}
.crm .crm-settings-mail .email-pref-toggle:checked { background: var(--ad-blue); }
.crm .crm-settings-mail .email-pref-toggle:checked::after { transform: translateX(0.8rem); }
.crm .crm-settings-mail .email-pref-toggle:focus-visible { outline: 0.125rem solid var(--focus); outline-offset: 0.125rem; }
@media (prefers-reduced-motion: reduce) {
  .crm .crm-settings-mail .email-pref-toggle, .crm .crm-settings-mail .email-pref-toggle::after { transition: none; }
}

/* ============================================================
   PR1.680 — Mehrfachauswahl + Sammelleiste (Vorlage M1, prototyp.html `.bulk`, `.cb`,
   `.hint-th`). Maße aus der Vorlage in rem (1 rem = 15 Bildpunkte); Schriftgrade auf die Rollen der Typografie v2 gerundet: Leiste Radius 14, Innenabstand
   8/8/8/16, Lücke 6, Knöpfe 8 × 12 Radius 9, Schrift 13,5 halbfett, Logos 22, Summe 12,5.
   ============================================================ */
.crm .sel-kaestchen {
  appearance: none; -webkit-appearance: none; margin: 0;
  width: 1.0667rem; height: 1.0667rem; flex: none; vertical-align: middle;
  border: .1rem solid rgb(185 195 208); border-radius: .2667rem; background: var(--bg-surface);
  display: inline-grid; place-items: center; cursor: pointer;
  background-repeat: no-repeat; background-position: center; background-size: .6667rem .6667rem;
}
.crm .sel-kaestchen:checked,
.crm .sel-kaestchen:indeterminate { background-color: var(--ad-blue); border-color: var(--ad-blue); }
.crm .sel-kaestchen:checked {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M1.5 5.2l2.3 2.3L8.5 2.8' fill='none' stroke='white' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.crm .sel-kaestchen:indeterminate {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M1.5 5h7' stroke='white' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E");
}
.crm .sel-kaestchen:focus-visible { outline: .125rem solid var(--focus); outline-offset: .125rem; }

/* Hinweis am Titel der ersten Datenspalte. */
.crm .sel-hinweis {
  display: inline-flex; align-items: center; gap: .4rem; margin-left: .9333rem;
  color: var(--ad-blue-700); font-weight: 600; font-size: var(--fs-label); white-space: nowrap;
  text-transform: none; letter-spacing: 0;
}
.crm .sel-hinweis svg { flex: none; }
/* Dunkles Thema: helles Blau, sonst ca. 2:1 auf dem Kopfgrund (Soll ≥ 4,5:1). */
.crm.dark .sel-hinweis, html[data-theme="dark"] .crm .sel-hinweis { color: var(--ad-blue-300); }
.crm .sel-hinweis .sel-shift { display: inline-flex; vertical-align: -.1333rem; }
/* Hinweis in derselben Zeile wie der Spaltentitel (Vorlage), der Sortierknopf nur so breit wie sein Text. */
.crm .tbl thead th:has(> .sel-hinweis) { white-space: nowrap; }
.crm .tbl thead th.th-sort:has(> .sel-hinweis) .th-sort-btn { display: inline-block; width: auto; }
.crm .tbl thead th:has(> .sel-hinweis) > * { vertical-align: middle; }

/* Gewählte Zeile hellblau (Vorlage: helles Blau), Kanban-Karte dazu mit blauem Rand. */
.crm tr.is-selected > td { background: color-mix(in srgb, var(--ad-blue) 5%, var(--bg-surface)); }
.crm .kan-card { position: relative; }
.crm .kan-card.is-selected { border-color: var(--ad-blue); background: color-mix(in srgb, var(--ad-blue) 5%, var(--bg-surface)); }
/* Kanban-Kästchen oben links: beim Überfahren/Fokussieren, und auf allen Karten, sobald etwas gewählt ist. */
.crm .kan-card .kc-sel {
  position: absolute; top: -.2667rem; left: -.2667rem; z-index: 2; display: inline-grid; line-height: 0;
  opacity: 0; transition: opacity var(--mo-fade) var(--ease-out);
}
.crm .kan-card:hover .kc-sel,
.crm .kan-card:focus-within .kc-sel,
.crm .kanban.has-auswahl .kan-card .kc-sel { opacity: 1; }
.crm .kan-card .kc-sel .sel-kaestchen { box-shadow: 0 0 0 .1333rem var(--bg-surface); }

/* Sammelleiste: schwebt unten mittig über dem Inhalt (nicht über der Seitenleiste). */
.crm #crm-content:has(> .sammelleiste) { position: relative; }
.crm .sl-platz { flex: none; height: 4rem; }
.crm .sammelleiste {
  --sl-ink: rgb(14 23 38);
  position: absolute; left: 50%; bottom: 1.4667rem; z-index: 40;
  display: flex; align-items: center; gap: .4rem; max-width: calc(100% - var(--s-8));
  padding: var(--s-2) var(--s-2) var(--s-2) var(--s-4);
  background: var(--sl-ink); color: white; border-radius: .9333rem;
  box-shadow: 0 1.2rem 3.3333rem rgba(14, 23, 38, .2), 0 .1333rem .4rem rgba(14, 23, 38, .08);
  transform: translateX(-50%);
  animation: sl-ein 280ms var(--ease-out) both;
  white-space: nowrap;
}
@keyframes sl-ein { from { opacity: 0; transform: translateX(-50%) translateY(var(--s-4)); } }
.crm.dark .sammelleiste, html[data-theme="dark"] .crm .sammelleiste { box-shadow: 0 0 0 .0667rem rgba(255, 255, 255, .14), var(--shadow-3); }
.crm .sammelleiste .sl-cnt {
  display: flex; align-items: center; gap: var(--s-2); font-weight: 600; font-size: var(--fs-ui);
  padding-right: .6667rem; margin-right: .2667rem; border-right: .0667rem solid rgba(255, 255, 255, .18);
}
.crm .sammelleiste .sl-cnt i {
  font-style: normal; background: var(--ad-blue); border-radius: .4rem; padding: 0 .4667rem; line-height: 1.4667rem;
  font-variant-numeric: tabular-nums;
}
.crm .sammelleiste .sl-logos { display: flex; margin-left: .1333rem; }
.crm .sammelleiste .sl-logo {
  width: 1.4667rem; height: 1.4667rem; margin-right: -.4rem; display: inline-grid; place-items: center; overflow: hidden;
  border-radius: .3333rem; background: white; padding: .1333rem; box-shadow: 0 0 0 .1333rem var(--sl-ink);
  color: var(--sl-ink); font-size: var(--fs-label); font-weight: 700;
}
.crm .sammelleiste .sl-logo > * { max-width: 100%; max-height: 100%; }
.crm .sammelleiste .sl-logo .sl-logo-img { width: 100%; height: 100%; border: 0; border-radius: .2rem; }
.crm .sammelleiste .sl-logo { box-sizing: border-box; }
.crm .sammelleiste .sl-logo:has(.acc-logo-mono) { padding: 0; }
/* Monogramm füllt die 22er-Kachel (accountLogoHtml setzt Breite/Höhe inline). */
.crm .sammelleiste .sl-logo > .acc-logo { width: 100% !important; height: 100% !important; min-width: 0; font-size: var(--fs-label) !important; letter-spacing: -.02em; }
.crm .sammelleiste .sl-summe { color: rgb(154 166 182); font-size: var(--fs-meta); margin-right: .4rem; font-variant-numeric: tabular-nums; }
.crm .sammelleiste .sl-summe.is-fehler { color: var(--ad-orange); }
.crm .sammelleiste .sl-btn {
  display: inline-flex; align-items: center; gap: .4667rem; white-space: nowrap;
  /* Feste Höhe (Vorlage ca. 33 px): das Kürzel-Kästchen „S" darf den Knopf nicht strecken. */
  box-sizing: border-box; height: 2.2rem; line-height: 1;
  padding: 0 var(--s-3); border: 0; border-radius: .6rem; background: transparent;
  color: white; font: inherit; font-weight: 600; font-size: var(--fs-ui); cursor: pointer;
  transition: background-color var(--mo-hover) var(--ease-out), opacity var(--mo-hover) var(--ease-out);
}
.crm .sammelleiste .sl-btn:focus-visible { outline: .125rem solid white; outline-offset: .125rem; }
.crm .sammelleiste .sl-pri { background: var(--ad-blue); }
.crm .sammelleiste .sl-ai { background: var(--ad-orange-700); }
.crm .sammelleiste .sl-x { color: rgb(197 207 219); padding: 0 .6667rem; }
@media (hover: hover) and (pointer: fine) {
  .crm .sammelleiste .sl-pri:hover { background: var(--ad-blue-700); }
  .crm .sammelleiste .sl-ai:hover { background: var(--ad-orange-900); }
  .crm .sammelleiste .sl-gh:hover, .crm .sammelleiste .sl-x:hover { background: rgba(255, 255, 255, .1); }
}
.crm .sammelleiste .sl-btn[aria-disabled="true"] { opacity: .45; cursor: not-allowed; }
.crm .sammelleiste .sl-kbd {
  display: inline-grid; place-items: center; box-sizing: border-box; min-width: 1.2rem; height: 1.2rem; padding: 0 .3333rem; line-height: 1;
  border-radius: .3333rem; border: .0667rem solid rgba(255, 255, 255, .2); background: rgba(255, 255, 255, .12);
  color: white; font: inherit; font-size: var(--fs-label); font-weight: 600;
}
.crm .sammelleiste .sl-sep { width: .0667rem; height: 1.4667rem; background: rgba(255, 255, 255, .18); margin: 0 .1333rem; }
/* Der Hinweis-Stapel weicht der Leiste aus (Toast über der Leiste). */
html:has(.crm .sammelleiste) body > #toast-stack { bottom: 5.3333rem; }
@media (prefers-reduced-motion: reduce) {
  .crm .sammelleiste { animation: sl-blende var(--mo-fade) linear both; }
  @keyframes sl-blende { from { opacity: 0; } }
}

/* ============================================================
   PR1.740 — Cloud-Chips mit Kaestchen + Schalter „Läuft auf einer Plattform" (Vorlage V10)
   ============================================================
   Opportunity- und Projektmaske, nur neue Ansicht. Masse 1:1 aus
   design/mockups/vorlive-05-11/masken-detail.html (.lc/.sw/.swrow/.plat/.note/.why) bei
   1 rem = 15 px. Keine Animation: Masken werden taeglich genutzt.
   Die festen Raster aus style.css haengen an IDs — deshalb hier dieselben IDs. */
.crm { --pf-linie: color-mix(in srgb, var(--ad-blue) 19%, var(--bg-surface));   /* #CFE2F5 */
       --pf-grund: color-mix(in srgb, var(--ad-blue) 3.5%, var(--bg-surface));  /* #F6FAFE */
       --pf-hinweis: var(--ad-blue-800); --pf-chip-an: var(--ad-blue-700); }
.crm.dark, html[data-theme="dark"] .crm { --pf-hinweis: var(--ad-blue-300); --pf-chip-an: var(--ad-blue-300); }

/* Eine gemeinsame, umbrechende Chip-Reihe (Opp: Cloud- und Multi-Cloud-Baustein). */
.crm .pf-cloud-row { display:flex; flex-wrap:wrap; gap:0.5333rem; }
.crm .pf-cloud-row > .ms,
.crm .pf-cloud-row .ms-pills,
.crm .pf-cloud-row .ms-pill-group,
.crm .pf-cloud-row .ms-pill-row,
.crm #opp-cloud-row #opp-hyperscaler-grid .ms-pill-row,
.crm #opp-cloud-row #opp-multicloud-grid .ms-pill-row,
.crm .pf-cloud-row #pm-hyperscaler .ms-pill-row { display:contents; }
/* Versteckte Werttraeger und Meldungen des Bausteins duerfen keine Luecke in der Reihe oeffnen. */
.crm .pf-cloud-row > .ms > :not(.ms-pills),
.crm .pf-cloud-row > .ms[hidden] { display:none; }
.crm .pf-switch-grid #opp-platform-grid .ms-pill-row,
.crm .pf-switch-grid #pm-platform .ms-pill-row { display:flex; flex-wrap:wrap; gap:0.5333rem; }

/* Chip (.lc): 34 hoch, Radius 9, Rand line-s, Innen 6/11/9, Lücke 8, 13,5 → Skala / 600 / t2. */
.crm #opp-cloud-row #opp-hyperscaler-grid .ms-pill.ms-pill--logo,
.crm #opp-cloud-row #opp-multicloud-grid .ms-pill.ms-pill--logo,
.crm .pf-cloud-row #pm-hyperscaler .ms-pill.ms-pill--logo,
.crm .mask-panel .pf-cloud-row #pm-hyperscaler .ms-pill.ms-pill--logo,
.crm .pf-switch-grid #opp-platform-grid .ms-pill.ms-pill--logo,
.crm .pf-switch-grid #pm-platform .ms-pill.ms-pill--logo {
  display:inline-flex; align-items:center; gap:0.5333rem; width:auto; box-sizing:border-box;
  min-height:2.2667rem; padding:0.4rem 0.7333rem 0.4rem 0.6rem; overflow:visible;
  justify-content:flex-start; white-space:nowrap;
  border:0.0667rem solid var(--border-strong); border-radius:0.6rem; box-shadow:none;
  background:var(--bg-surface); color:var(--text-2); font-weight:600;
}
.crm #opp-cloud-row #opp-hyperscaler-grid .ms-pill.ms-pill--logo.is-on,
.crm #opp-cloud-row #opp-multicloud-grid .ms-pill.ms-pill--logo.is-on,
.crm .pf-cloud-row #pm-hyperscaler .ms-pill.ms-pill--logo.is-on,
.crm .mask-panel .pf-cloud-row #pm-hyperscaler .ms-pill.ms-pill--logo.is-on,
.crm .pf-switch-grid #opp-platform-grid .ms-pill.ms-pill--logo.is-on,
.crm .pf-switch-grid #pm-platform .ms-pill.ms-pill--logo.is-on {
  border-color:var(--ad-blue); background:var(--tint-blue); color:var(--pf-chip-an); box-shadow:none;
}
.crm #opp-cloud-row #opp-hyperscaler-grid .ms-pill .hs-logo-name,
.crm #opp-cloud-row #opp-multicloud-grid .ms-pill .hs-logo-name,
.crm .pf-cloud-row #pm-hyperscaler .ms-pill .hs-logo-name,
.crm .mask-panel .pf-cloud-row #pm-hyperscaler .ms-pill .hs-logo-name,
.crm .pf-switch-grid #opp-platform-grid .ms-pill .hs-logo-name,
.crm .pf-switch-grid #pm-platform .ms-pill .hs-logo-name { font-size:var(--fs-ui); font-weight:600; color:inherit; }
.crm .pf-cloud-row .ms-pill--logo .hs-logo,
.crm .pf-switch-grid .ms-pill--logo .hs-logo { gap:0.5333rem; min-width:0; }
/* Logos: 17 hoch, hoechstens 44 breit (.lc img); svg-Logos (Multi-Cloud) ebenso. */
.crm #opp-cloud-row #opp-hyperscaler-grid .ms-pill img,
.crm #opp-cloud-row #opp-multicloud-grid .ms-pill img,
.crm .mask-panel #opp-cloud-row #opp-hyperscaler-grid .ms-pill img,
.crm .pf-cloud-row #pm-hyperscaler .ms-pill img,
.crm .mask-panel .pf-cloud-row #pm-hyperscaler .ms-pill img,
.crm .pf-switch-grid #opp-platform-grid .ms-pill img,
.crm .pf-switch-grid #pm-platform .ms-pill img {
  /* !important nur hier: die Breitenregel der Team-Tabelle (style.css, BF-19) .fw-panel :not(…)
     setzt max-width mit ID-Gewicht auf --fw-max — sonst wird VMware 106 statt 44 px breit. */
  height:1.1333rem; width:auto; max-width:2.9333rem !important; object-fit:contain;
}
/* Kaestchen (.ck): 15, Radius 4, Rand 1,5 line-s; an: blau mit weissem Haken. */
.crm .pf-cloud-row .ms-pill--logo::before,
.crm .pf-switch-grid .ms-pill--logo::before {
  content:""; flex:none; width:1rem; height:1rem; box-sizing:border-box;
  border:0.1rem solid var(--border-strong); border-radius:0.2667rem; background:var(--bg-surface);
}
.crm .pf-cloud-row .ms-pill--logo.is-on::before,
.crm .pf-switch-grid .ms-pill--logo.is-on::before {
  border-color:var(--ad-blue); background-color:var(--ad-blue);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-size:0.7333rem 0.7333rem; background-repeat:no-repeat; background-position:center;
}
.crm .ms-pill:focus-visible.ms-pill--logo { outline:0.1334rem solid var(--focus); outline-offset:0.1334rem; }
/* Marke (.why): weisse Pille, Rand blue-t2, 11,5 → Skala / 600 / blue-d, Zeile 18. */
.crm .hs-logo-badge {
  display:inline-block; padding:0 0.4667rem; line-height:1.2rem; border-radius:999rem;
  border:0.0667rem solid var(--pf-linie); background:var(--bg-surface); color:var(--pf-chip-an);
  font-size:var(--fs-label); font-weight:600; white-space:nowrap;
}

/* Schalter-Kasten (.swrow): Abstand zur Cloud-Reihe 14, Rand line, Radius 10, Innen 11/13, Luecke 12. */
.crm #opp-platform-switch-host .pf-switch-box { margin-top:0.5333rem; }   /* + 6 px Feldabstand = 14 */
.crm #pm-platform-switch.pf-switch-box { margin-top:0.2667rem; }          /* + 10 px Feldabstand = 14 */
.crm .pf-switch-head {
  display:flex; align-items:center; gap:0.8rem; padding:0.7333rem 0.8667rem;
  border:0.0667rem solid var(--border); border-radius:0.6667rem; background:var(--bg-surface);
}
.crm .pf-switch-box.is-on .pf-switch-head {
  border-color:var(--pf-linie); background:var(--pf-grund); border-bottom-left-radius:0; border-bottom-right-radius:0;
}
/* Schalter (.sw): 38 × 22, Knopf 16 mit 3 Rand; aus line-s, an blau. */
.crm .pf-switch {
  position:relative; flex:none; width:2.5333rem; height:1.4667rem; padding:0;
  border:0; border-radius:999rem; background:var(--border-strong); cursor:pointer;
}
.crm .pf-switch-knob {
  position:absolute; top:0.2rem; left:0.2rem; width:1.0667rem; height:1.0667rem; border-radius:50%;
  background:var(--bg-surface); box-shadow:0 0.0667rem 0.1334rem rgba(0,0,0,.2);
}
.crm .pf-switch[aria-checked="true"] { background:var(--ad-blue); }
.crm .pf-switch[aria-checked="true"] .pf-switch-knob { left:1.2667rem; }
.crm .pf-switch:disabled { opacity:.5; cursor:default; }
.crm .pf-switch:focus-visible { outline:0.1334rem solid var(--focus); outline-offset:0.1334rem; }
/* Wie .swrow: Titel als Block, Unterzeile als Inline-Text in einer 20,3-px-Zeile (14 × 1,45)
   mit eigener Zeilenhoehe 18,1 px (12,5 × 1,45) — Kopf zusammen 64,6 px. */
.crm .pf-switch-text { min-width:0; cursor:pointer; font-size:var(--fs-ui); line-height:1.3533rem; }
.crm .pf-switch-title { display:block; font-size:var(--fs-ui); font-weight:700; line-height:1.3533rem; color:var(--text-1); }
.crm .pf-switch-sub { display:inline; font-size:var(--fs-meta); line-height:1.2067rem; color:var(--text-3); }
/* Plattform-Bereich (.plat): Rand blue-t2 ohne Oberkante, Radius unten 10, Innen 12/13/13, Luecke 10. */
.crm .pf-switch-body {
  display:flex; flex-direction:column; gap:0.6667rem; padding:0.8rem 0.8667rem 0.8667rem;
  border:0.0667rem solid var(--pf-linie); border-top:0; border-radius:0 0 0.6667rem 0.6667rem;
  background:var(--pf-grund);
}
.crm .pf-switch-body[hidden] { display:none; }
.crm .pf-switch-empty { margin:0; font-size:var(--fs-meta); color:var(--text-3); }
/* Hinweis (.note): weiss, Rand blue-t2, Radius 10, Innen 10/12, 13 px, Farbe #0A3F6E, Luecke 10. */
.crm .pf-hint {
  display:flex; align-items:flex-start; gap:0.6667rem; margin:0; padding:0.6667rem 0.8rem;
  border:0.0667rem solid var(--pf-linie); border-radius:0.6667rem; background:var(--bg-surface);
  font-size:var(--fs-meta); line-height:1.45; color:var(--pf-hinweis);
}
.crm .pf-hint [data-pf-hint-text] { text-wrap:pretty; }
.crm .pf-hint strong { font-weight:700; color:var(--text-1); }
.crm .pf-hint-icon { flex:none; width:1.0667rem; height:1.0667rem; margin-top:0.0667rem; }

/* ═══ PR1.749 #1063 — CC-Cockpit (Vorlage V20, Prototyp steuerung-admin.html 1:1; 1 rem = 15 Pixel;
   .1334rem statt .1333rem, sonst rundet der Browser 1,9995 auf 1 Pixel ab) ═══ */
.crm .ccc { padding: 1.4667rem 1.7333rem; background: var(--bg-app); position: relative; }
.crm .ccc-kopf { display: flex; flex-wrap: wrap; align-items: center; gap: 1.2rem 1.4667rem; margin-bottom: 1.2rem; }
/* Nachzug #1130: Titelblock mit Mindestbreite (Untertitel hoechstens zwei Zeilen); reicht der Platz nicht,
   bricht der Block aus Kennzahlen und Wechsel-Knopf in die zweite Zeile um. */
.crm .ccc-titel { min-width: 0; flex: 0 0 17rem; }
.crm .ccc-kopf-rechts { display: flex; align-items: center; gap: 1.4667rem; margin-left: auto; }
.crm .ccc-h1 { font-size: var(--fs-display); font-weight: 700; letter-spacing: -.01em; color: var(--text-1); margin: 0; }
.crm .ccc-sub { font-size: var(--fs-ui); color: var(--text-2); margin-top: .1334rem; }
.crm .ccc-leitung { display: flex; align-items: center; gap: .8rem; flex: none; white-space: nowrap; }
.crm .ccc-leitung b { display: block; font-size: var(--fs-section); font-weight: 600; color: var(--text-1); }
.crm .ccc-leitung small { display: block; font-size: var(--fs-meta); color: var(--text-3); }
.crm .ccc-kpis { display: flex; background: var(--bg-surface); border: .0667rem solid var(--border); border-radius: .8rem; }
.crm .ccc-kpi { padding: .9rem clamp(.8rem, 1.25vw, 1.6rem); border-left: .0667rem solid var(--border); }
.crm .ccc-kpi:first-child { border-left: 0; }
.crm .ccc-kpi b { display: block; font-family: var(--f-cond); font-size: var(--fs-display); font-weight: 600; line-height: 1.05; color: var(--text-1); font-variant-numeric: tabular-nums; }
.crm .ccc-kpi span { font-size: var(--fs-meta); color: var(--text-3); white-space: nowrap; }
.crm .ccc-wechseln { display: inline-flex; align-items: center; gap: .5333rem; border: .0667rem solid var(--border-strong); border-radius: var(--r-md); padding: .4rem .6667rem; font-size: var(--fs-ui); background: var(--bg-surface); color: var(--text-1); white-space: nowrap; cursor: pointer; font-family: inherit; }
.crm .ccc-raster { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 1.2rem; align-items: start; }
.crm .ccc-karte { background: var(--bg-surface); border: .0667rem solid var(--border); border-radius: .8rem; position: relative; min-width: 0; }
.crm .ccc-kk { display: flex; align-items: center; gap: .5333rem; padding: 1.0667rem 1.2rem .8rem; }
.crm .ccc-kk .ccc-meta { flex: 0 1 auto; }
.crm .ccc-kk .ccc-h2, .crm .ccc-kk .ccc-btn { flex: none; }
.crm .ccc-h2 { font-size: var(--fs-section); font-weight: 600; color: var(--text-1); margin: 0; }
.crm .ccc-meta { font-size: var(--fs-meta); color: var(--text-3); min-width: 0; }
.crm .ccc-chev { display: inline-flex; transform: rotate(90deg); color: var(--text-3); }
.crm .ccc-sp { display: none; }
.crm .ccc-kk > .ccc-btn { margin-left: auto; }
.crm .ccc-btn { display: inline-flex; align-items: center; gap: .4667rem; border: .0667rem solid var(--border-strong); background: var(--bg-surface); border-radius: var(--r-md); padding: .4667rem .8667rem; font-weight: 500; font-size: var(--fs-ui); color: var(--text-1); white-space: nowrap; font-family: inherit; cursor: pointer; }
.crm .ccc-btn.is-sm { padding: .3667rem .6667rem; font-size: var(--fs-meta); }
.crm .ccc-btn.is-pri { background: var(--ad-blue); border-color: var(--ad-blue); color: var(--text-inv); }
.crm .ccc-btn.is-gh { border-color: transparent; background: transparent; color: var(--text-2); }
.crm .ccc-btn:disabled { opacity: .55; cursor: default; }
.crm .ccc-icb { width: 2rem; height: 2rem; display: inline-grid; place-items: center; border-radius: var(--r-sm); color: var(--text-3); background: transparent; border: 0; cursor: pointer; justify-self: end; }
.crm .ccc-icb:hover, .crm .ccc-icb[aria-expanded="true"] { background: var(--bg-hover); color: var(--text-1); }
.crm .ccc-btn:focus-visible, .crm .ccc-icb:focus-visible, .crm .ccc-wechseln:focus-visible, .crm .ccc-foto:focus-visible,
.crm .ccc-ld:focus-visible, .crm .ccc-mehr:focus-visible, .crm .ccc-chip:focus-visible, .crm .ccc-menu-item:focus-visible,
.crm .ccc-input:focus-visible { outline: .1334rem solid var(--focus); outline-offset: .1334rem; }

/* Portfolio-Elemente */
.crm .ccc-pf-row { display: grid; grid-template-columns: minmax(0, 1fr) 4.4rem 4.4rem 5.0667rem 2.4rem; align-items: center; gap: .4rem; padding: .8rem 1.2rem; border-top: .0667rem solid var(--border); font-size: var(--fs-body); }
.crm .ccc-pf-row.is-kopf { font-size: var(--fs-label); color: var(--text-3); font-weight: 600; padding-top: .4rem; padding-bottom: .4rem; }
.crm .ccc-pf-row.is-hot, .crm .ccc-pf-row.is-offen { background: var(--bg-hover); }
.crm .ccc-pf-row.is-neu { grid-template-columns: minmax(0, 1fr); }
.crm .ccc-r { text-align: right; }
.crm .ccc-pf-name { font-weight: 500; display: flex; align-items: center; gap: .6667rem; min-width: 0; color: var(--text-1); overflow-wrap: anywhere; }
.crm .ccc-dot { width: .5333rem; height: .5333rem; border-radius: .1334rem; background: var(--ad-blue); flex: none; }
.crm .ccc-z { font-family: var(--f-cond); font-size: var(--fs-section); text-align: right; color: var(--text-1); font-variant-numeric: tabular-nums; }
.crm .ccc-z.is-null { color: var(--text-3); }
.crm .ccc-eintraege { display: grid; gap: .4rem; padding: .2667rem 1.2rem .8rem 2.4rem; background: var(--bg-hover); font-size: var(--fs-meta); color: var(--text-2); }
.crm .ccc-eg b { display: block; font-weight: 600; color: var(--text-1); }
.crm .ccc-eg-liste { display: flex; flex-wrap: wrap; gap: .2667rem .8rem; }
.crm .ccc-eg-liste span { white-space: nowrap; }
.crm .ccc-fuss-ic { display: inline-flex; vertical-align: -.1334rem; }
.crm .ccc-fuss { font-size: var(--fs-meta); color: var(--text-3); padding: .8rem 1.2rem .9333rem; border-top: .0667rem solid var(--border); }
.crm .ccc-leer, .crm .ccc-laedt { font-size: var(--fs-ui); color: var(--text-2); padding: 1.0667rem 1.2rem; border-top: .0667rem solid var(--border); margin: 0; }
.crm .ccc-leise { font-size: var(--fs-label); color: var(--text-3); }

/* PR1.801 (#1128) — Pruefliste „Automatisch eingetragen, bitte pruefen" (volle Breite unter dem Raster). */
.crm .ccc-pr { margin-top: 1.2rem; }
.crm .ccc-pr-liste { list-style: none; margin: 0; padding: 0; }
.crm .ccc-pr-row { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) auto; gap: .8rem; align-items: center; padding: .8rem 1.2rem; border-top: .0667rem solid var(--border); }
.crm .ccc-pr-opp, .crm .ccc-pr-person { display: grid; gap: .1334rem; min-width: 0; }
.crm .ccc-pr-name { justify-self: start; border: 0; background: none; padding: 0; font: inherit; font-size: var(--fs-body); font-weight: 500; color: var(--text-1); text-align: left; cursor: pointer; overflow-wrap: anywhere; }
.crm .ccc-pr-name:hover { color: var(--ad-blue); text-decoration: underline; }
.crm .ccc-pr-person b { font-weight: 500; font-size: var(--fs-body); color: var(--text-1); overflow-wrap: anywhere; }
.crm .ccc-pr-akt { display: flex; gap: .4rem; justify-content: flex-end; }
.crm .ccc-pr-name:focus-visible, .crm .ccc-pr .ccc-h2:focus-visible { outline: .1334rem solid var(--focus); outline-offset: .1334rem; }
@media (max-width: 52rem) {
  .crm .ccc-pr-row { grid-template-columns: minmax(0, 1fr); }
  .crm .ccc-pr-akt { justify-content: flex-start; }
}
.crm .opp-delivery-vorschlag-btn { color: var(--ad-blue); font-family: inherit; }
/* PR1.830 (#1182) — Tipp bei zu knappem Namen (Opp- und Projekt-Maske). */
.crm .name-hint { color: var(--text-2); font-family: inherit; }
.crm .name-hint-btn { color: var(--ad-blue); font-family: inherit; }
.crm .name-hint-btn:focus-visible { outline: .1334rem solid var(--focus); outline-offset: .1334rem; border-radius: var(--r-sm); }
/* PR1.801 (#1128) — „Stimmt" hinter dem Auto-Hinweis im Opp-Detail. */
.crm .stamm-stimmt { border: 0; background: none; padding: 0 0 0 var(--s-1); font: inherit; font-size: var(--fs-meta); font-weight: 600; color: var(--ad-blue); cursor: pointer; }
.crm .stamm-stimmt:hover { text-decoration: underline; }
.crm .stamm-stimmt:focus-visible { outline: .1334rem solid var(--focus); outline-offset: .1334rem; border-radius: var(--r-sm); }

/* Teams */
.crm .ccc-team { display: grid; grid-template-columns: minmax(15.6rem, 1.1fr) minmax(0, 1fr) minmax(min-content, 1.25fr) 2.4rem; gap: .8rem; align-items: center; padding: .8667rem 1.2rem; border-top: .0667rem solid var(--border); }
.crm .ccc-team.is-neu { grid-template-columns: minmax(0, 1fr); }
.crm .ccc-tn { min-width: 0; }
.crm .ccc-tn b { display: block; font-size: var(--fs-body); line-height: 1.4rem; font-weight: 600; color: var(--text-1); overflow-wrap: anywhere; }
.crm .ccc-tn small { display: block; font-size: var(--fs-meta); line-height: 1.4rem; color: var(--text-3); }
.crm .ccc-team.is-ziel .ccc-tn small { white-space: nowrap; }
.crm .ccc-team.is-ohne .ccc-tn b { color: var(--text-2); }
.crm .ccc-team.is-ziel { background: var(--tint-blue); outline: .1334rem dashed var(--ad-blue); outline-offset: -.2667rem; border-radius: var(--r-lg); }
.crm .ccc-team.is-ziel .ccc-tn small { color: var(--ad-blue-700); font-weight: 600; }
/* Dunkel: helles Blau auf der dunklen Zielflaeche (6,5 : 1). */
.crm.dark .ccc-team.is-ziel .ccc-tn small, html[data-theme="dark"] .crm .ccc-team.is-ziel .ccc-tn small { color: var(--ad-blue-300); }
.crm .ccc-ld { display: flex; align-items: center; gap: .6rem; font-size: var(--fs-ui); color: var(--text-1); background: transparent; border: 0; padding: 0; text-align: left; cursor: pointer; min-width: 0; font-family: inherit; border-radius: var(--r-md); }
.crm .ccc-ld > span { min-width: 0; }
.crm .ccc-ld small { display: block; font-size: var(--fs-label); color: var(--text-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.crm .ccc-ld-name { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.crm .ccc-stapel { display: flex; align-items: center; min-width: 0; flex-wrap: nowrap; }
.crm .ccc-foto { padding: 0; border: 0; background: transparent; border-radius: 50%; margin-right: -.5333rem; cursor: grab; line-height: 0; }
.crm .ccc-foto .person-foto { box-shadow: 0 0 0 .1334rem var(--bg-surface); }
.crm .ccc-mehr { margin-left: .9333rem; font-size: var(--fs-meta); color: var(--text-2); font-weight: 500; background: transparent; border: 0; padding: .1334rem .2667rem; cursor: pointer; font-family: inherit; border-radius: var(--r-sm); }
.crm .ccc-mitglieder { display: flex; flex-wrap: wrap; gap: .4rem; padding: .2667rem 1.2rem .8rem; background: var(--bg-surface-2); }
.crm .ccc-chip { display: inline-flex; align-items: center; gap: .4rem; padding: .1334rem .6667rem .1334rem .1334rem; border: .0667rem solid var(--border); border-radius: 62.5rem; background: var(--bg-surface); font-size: var(--fs-meta); color: var(--text-1); cursor: grab; font-family: inherit; }

/* Eingabezeile */
.crm .ccc-eingabe { display: flex; align-items: center; gap: .5333rem; flex-wrap: wrap; min-width: 0; }
.crm .ccc-input { flex: 1 1 12rem; min-width: 0; font-size: var(--fs-ui); padding: .3333rem .6667rem; border: .0667rem solid var(--border-strong); border-radius: var(--r-md); background: var(--bg-input); color: var(--text-1); font-family: inherit; }
.crm .ccc-eingabe-fehler { flex-basis: 100%; font-size: var(--fs-meta); color: var(--danger); }
/* PR1.782 — Schwerpunkte beim Anlegen/Bearbeiten eines Portfolio-Elements */
.crm .ccc-sp-wahl { flex-basis: 100%; display: flex; flex-direction: column; gap: .4rem; padding-top: .2667rem; min-width: 0; }
.crm .ccc-sp-titel { font-size: var(--fs-label); font-weight: 600; color: var(--text-2); }
.crm .ccc-sp-titel .ccc-leise { font-weight: 400; }
.crm .ccc-sp-chips { display: flex; flex-wrap: wrap; gap: .4rem; }
.crm .ccc-sp-chip { display: inline-flex; align-items: center; gap: .3333rem; padding: .2667rem .6667rem; border: .0667rem solid var(--border-strong); border-radius: 62.5rem; background: var(--bg-surface); font-size: var(--fs-meta); color: var(--text-1); font-family: inherit; cursor: pointer; }
.crm .ccc-sp-chip:hover:not(:disabled) { background: var(--bg-hover); }
.crm .ccc-sp-chip.is-on { background: var(--tint-blue); border-color: var(--ad-blue); color: var(--ad-blue-700); font-weight: 600; }
html[data-theme="dark"] .crm .ccc-sp-chip.is-on { color: var(--ad-blue-300); border-color: var(--ad-blue-300); }
.crm .ccc-sp-chip:disabled { opacity: .45; cursor: default; }
.crm .ccc-sp-chip:focus-visible { outline: .1334rem solid var(--focus); outline-offset: .1334rem; }
.crm .ccc-sp-rang { display: inline-grid; place-items: center; width: 1.0667rem; height: 1.0667rem; border-radius: 50%; background: var(--ad-blue); color: var(--text-inv); font-size: var(--fs-label); font-weight: 600; }
.crm .ccc-sp-hinweis { font-size: var(--fs-meta); color: var(--text-3); }
.crm .crm-cd-gewichte { margin-top: .5333rem; }

/* Menue (alle ⋯, Fotos, Leitung, CC wechseln) */
.crm .ccc-menu { position: absolute; z-index: 30; padding: .2667rem; min-width: 14rem; max-width: 22rem; max-height: 24rem; overflow-y: auto; background: var(--bg-surface); border: .0667rem solid var(--border-strong); border-radius: .8rem; box-shadow: var(--shadow-3); }
.crm .ccc-menu-item { display: flex; align-items: center; gap: .6667rem; width: 100%; padding: .6333rem .6667rem; border-radius: var(--r-sm); font-size: var(--fs-ui); color: var(--text-1); background: transparent; border: 0; text-align: left; cursor: pointer; font-family: inherit; }
.crm .ccc-menu-item .ic { color: var(--text-3); flex: none; }
.crm .ccc-menu-leer { width: 1.0667rem; flex: none; }
.crm .ccc-menu-item:hover, .crm .ccc-menu-item:focus-visible { background: var(--bg-hover); }
.crm .ccc-menu-item.is-danger, .crm .ccc-menu-item.is-danger .ic { color: var(--danger); }
.crm .ccc-menu-hr { border: 0; border-top: .0667rem solid var(--border); margin: .2667rem .1334rem; }
.crm .ccc-menu-kopf { padding: .4rem .6667rem .2667rem; font-size: var(--fs-label); font-weight: 600; color: var(--text-3); }

/* Zieh-Pille (Zugbild beim Umhaengen) */
.crm .ccc-zieh { position: fixed; left: -100rem; top: 0; display: flex; align-items: center; gap: .6rem; background: var(--bg-surface); border: .0667rem solid var(--ad-blue); border-radius: 62.5rem; padding: .2667rem .9333rem .2667rem .2667rem; box-shadow: var(--shadow-3); font-size: var(--fs-ui); font-weight: 500; color: var(--text-1); }

/* Zustaende */
.crm .ccc-zustand { max-width: 40rem; padding-block: 2.4rem; }
.crm .ccc-zustand-satz { font-size: var(--fs-body); color: var(--text-2); margin: .5333rem 0 1.0667rem; }

/* Medienabfragen rechnen rem mit 16 Pixeln: 85.3125rem = 1365, 68.75rem = 1100 Pixel. */
@media (max-width: 85.3125rem) {
  .crm .ccc-team { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr) minmax(min-content, 1.25fr) 2.4rem; }
  .crm .ccc-team.is-ziel .ccc-tn small { overflow: hidden; text-overflow: ellipsis; }
}
@media (max-width: 68.75rem) {
  .crm .ccc-raster { grid-template-columns: minmax(0, 1fr); }
  .crm .ccc-kopf-rechts { margin-left: 0; flex-wrap: wrap; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   PR1.785 (Ticket 1110) — Startseite nach Vorlage S1/S2 (design/mockups/start-11-09/start.html).
   Maßstab 1:1 bei 1440 (1rem = 15 px); Klassen st-* der Vorlage → .start-*. Schriftgrade auf die
   Skala gerundet (Entscheid 05.11.): 12,5/13 → meta · 13,5/14 → ui · 15/15,5 → body · 18 → title ·
   24 → display · 30 → kpi · 40 → icon (App-Regel: höchstens 12 Schriftgrößen). Farben nur aus Tokens; dunkel über die Token-Umschaltung.
   ═══════════════════════════════════════════════════════════════════════════ */
.crm .start-page.start-page-neu {
  --st-linie: var(--border); --st-linie-s: color-mix(in srgb, var(--border) 50%, var(--border-strong));
  --st-blau-t: var(--tint-blue); --st-blau-d: var(--ad-blue-700);
  --st-ok: color-mix(in srgb, color-mix(in srgb, var(--ad-green-700) 65%, var(--ad-turq-900)) 85%, black); --st-ok-t: var(--tint-green);
  --st-warn: color-mix(in srgb, var(--ad-orange-900) 50%, var(--gelb-text)); --st-warn-t: var(--gelb);
  --st-or-rand: color-mix(in srgb, var(--ad-orange) 52%, var(--bg-surface));
  --st-or-grund: color-mix(in srgb, var(--tint-orange) 36.4%, var(--bg-surface));
  --st-or-t: var(--tint-orange); --st-or-d: var(--pythia-terra);
  --st-ease: cubic-bezier(.23, 1, .32, 1);
  padding: 0; background: var(--bg-app); line-height: 1.45;
}
.crm.dark .start-page.start-page-neu, html[data-theme="dark"] .crm .start-page.start-page-neu {
  --st-blau-d: var(--ad-blue-300); --st-ok: var(--ad-green); --st-ok-t: color-mix(in srgb, var(--ad-green) 18%, transparent);
  --st-warn: var(--gelb-rand); --st-warn-t: color-mix(in srgb, var(--gelb-rand) 18%, transparent);
  --st-or-rand: color-mix(in srgb, var(--ad-orange) 45%, transparent); --st-or-grund: color-mix(in srgb, var(--ad-orange) 10%, var(--bg-surface));
  --st-or-t: color-mix(in srgb, var(--ad-orange) 22%, transparent); --st-or-d: var(--ad-orange);
}
.crm .start-page-neu .start-inhalt { padding: 1.4667rem 1.8667rem 2.6667rem; display: flex; flex-direction: column; gap: 1.2rem; }
.crm .start-page-neu .start-num { font-variant-numeric: tabular-nums; }
.crm .start-page-neu .start-i { width: 1.2rem; height: 1.2rem; flex: none; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.crm .start-page-neu .start-i-klein { width: 1rem; height: 1rem; }
.crm .start-page-neu p, .crm .start-page-neu h1, .crm .start-page-neu h2, .crm .start-page-neu h3 { margin: 0; }
.crm .start-page-neu :focus-visible { outline: .1333rem solid var(--ad-blue); outline-offset: .1333rem; border-radius: .4rem; }

/* Kopf */
.crm .start-page-neu .start-kopf-neu { display: flex; align-items: flex-end; gap: 1.0667rem; flex-wrap: wrap; padding: 0; }
.crm .start-page-neu .start-kopf-neu .start-kopf-links { flex: 1 1 auto; min-width: 0; }
.crm .start-page-neu .start-datum { font-size: var(--fs-meta); font-weight: 600; color: var(--text-2); }
.crm .start-page-neu .start-kopf-neu h1 { font-size: var(--fs-kpi); font-weight: 700; letter-spacing: -.015em; color: var(--text-1); margin-top: .1333rem; line-height: 1.45; }
.crm .start-page-neu .start-wer { font-size: var(--fs-body); color: var(--text-2); margin-top: .1333rem; }
.crm .start-page-neu .start-wer strong { color: var(--text-1); font-weight: 700; }
.crm .start-page-neu .start-kopf-rechts { margin-left: auto; display: flex; gap: .6667rem; align-items: center; }
.crm .start-page-neu .start-seg { display: inline-flex; border: .0667rem solid var(--st-linie-s); border-radius: .6667rem; overflow: hidden; background: var(--bg-surface); padding: 0; gap: 0; }
.crm .start-page-neu .start-seg .start-opt { padding: .6rem .9333rem; font-size: var(--fs-ui); font-weight: 600; color: var(--text-2); background: var(--bg-surface); border: 0; border-right: .0667rem solid var(--st-linie); border-radius: 0; white-space: nowrap; box-shadow: none; min-height: 0; }
.crm .start-page-neu .start-seg .start-opt:last-child { border-right: 0; }
.crm .start-page-neu .start-seg .start-opt.is-active { background: var(--st-blau-t); color: var(--st-blau-d); }
.crm .start-page-neu .start-seg .start-opt:disabled { color: var(--text-3); cursor: not-allowed; }

/* Satz */
.crm .start-page-neu .start-satz-neu { font-size: var(--fs-display); line-height: 1.38; font-weight: 500; letter-spacing: -.01em; max-width: 73.3333rem; color: var(--text-1); }
.crm .start-page-neu .start-satz-neu b { font-weight: 700; }

/* Pythia */
.crm .start-page-neu .start-ki-neu { display: flex; gap: .9333rem; align-items: flex-start; border: .0667rem solid var(--st-or-rand); background: var(--st-or-grund); border-radius: .9333rem; padding: .9333rem 1.2rem; }
.crm .start-page-neu .start-ki-ic { width: 2.2667rem; height: 2.2667rem; border-radius: 50%; background: var(--st-or-t); color: var(--st-or-d); display: grid; place-items: center; flex: none; }
.crm .start-page-neu .start-ki-lb { font-size: var(--fs-meta); color: var(--st-or-d); margin-bottom: .2rem; display: flex; gap: .5333rem; align-items: center; }
.crm .start-page-neu .start-ki-lb strong { font-weight: 700; }
.crm .start-page-neu .start-ki-lb span { font-weight: 500; color: var(--text-2); }
.crm .start-page-neu .start-ki-p { font-size: var(--fs-body); line-height: 1.6; max-width: 70rem; color: var(--text-1); }
.crm .start-page-neu .start-ki-p b { font-weight: 700; }
.crm .start-page-neu .start-ki-neu.is-laedt .start-ki-skel { display: grid; gap: .4rem; min-width: 20rem; }

/* Vier Kacheln */
.crm .start-page-neu .start-kacheln-neu { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .9333rem; }
.crm .start-page-neu .start-kachel-neu { background: var(--bg-surface); border: .0667rem solid var(--st-linie); border-radius: .9333rem; padding: 1.0667rem 1.2rem; position: relative; min-width: 0; display: flex; flex-direction: column; box-shadow: none; }
.crm .start-page-neu .start-kachel-t { display: flex; align-items: center; gap: .5333rem; color: var(--text-2); }
.crm .start-page-neu .start-kachel-t .start-kachel-titel { font-size: var(--fs-body); font-weight: 600; color: var(--text-2); margin: 0; }
.crm .start-page-neu .start-so { margin-left: auto; display: inline-flex; align-items: center; gap: .2667rem; font-size: var(--fs-meta); font-weight: 600; color: var(--st-blau-d); background: none; border: 0; padding: 0; cursor: pointer; white-space: nowrap; }
.crm .start-page-neu .start-kachel-v { font-size: var(--fs-icon); font-weight: 700; letter-spacing: -.02em; color: var(--text-1); line-height: 1.1; margin-top: .5333rem; overflow-wrap: anywhere; }
.crm .start-page-neu .start-kachel-erk { font-size: var(--fs-body); color: var(--text-1); margin-top: .1333rem; }
.crm .start-page-neu .start-kachel-liste { list-style: none; margin: .9333rem 0 0; padding: .8rem 0 0; border-top: .0667rem solid var(--st-linie); display: flex; flex-direction: column; gap: .4667rem; font-size: var(--fs-ui); line-height: 1.45; color: var(--text-2); }
.crm .start-page-neu .start-kachel-liste li { display: flex; gap: .5333rem; align-items: baseline; }
.crm .start-page-neu .start-kachel-liste li b { color: var(--text-1); font-weight: 700; min-width: 1.8667rem; text-align: right; flex: none; }
.crm .start-page-neu .start-kachel-liste li.start-ton-ok b { color: var(--st-ok); }
.crm .start-page-neu .start-kachel-liste li.start-ton-bad b { color: var(--ad-red-700); }
.crm .start-page-neu .start-kachel-liste li.start-dat b { min-width: 3.4667rem; text-align: left; }
.crm .start-page-neu .start-kachel-liste li.start-leise { color: var(--text-3); font-size: var(--fs-meta); }
.crm .start-page-neu .start-weiter { margin-top: auto; padding-top: .8rem; font-size: var(--fs-ui); font-weight: 600; color: var(--st-blau-d); text-decoration: none; display: inline-flex; gap: .4rem; align-items: center; align-self: flex-start; }
.crm .start-page-neu .start-weiter:hover { text-decoration: underline; }
.crm .start-page-neu .start-pop { position: absolute; right: .8rem; top: 2.8rem; z-index: 5; width: 20rem; max-width: calc(100% - 1.6rem); background: var(--bg-surface); border: .0667rem solid var(--st-linie-s); border-radius: .8rem; box-shadow: var(--shadow-3); padding: .8rem .9333rem; font-size: var(--fs-meta); line-height: 1.5; color: var(--text-1); opacity: 0; transform: translateY(-.2667rem) scale(.98); }
.crm .start-page-neu .start-pop.is-offen { opacity: 1; transform: none; animation: start-pop-ein .16s var(--st-ease); }
@keyframes start-pop-ein { from { opacity: 0; transform: translateY(-.2667rem) scale(.98); } to { opacity: 1; transform: none; } }
.crm .start-page-neu .start-pop h3 { margin: 0 0 .2667rem; font-size: var(--fs-meta); font-weight: 700; color: var(--text-2); }
.crm .start-page-neu .start-pop-q { margin-top: .5333rem; padding-top: .5333rem; border-top: .0667rem solid var(--st-linie); font-size: var(--fs-meta); color: var(--text-3); }

/* Zwei Spalten */
.crm .start-page-neu .start-zwei { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 1.0667rem; align-items: start; }
.crm .start-page-neu .start-card { background: var(--bg-surface); border: .0667rem solid var(--st-linie); border-radius: .9333rem; min-width: 0; }
.crm .start-page-neu .start-card-h { display: flex; align-items: baseline; gap: .6667rem; padding: .9333rem 1.2rem; border-bottom: .0667rem solid var(--st-linie); }
.crm .start-page-neu .start-card-h h2 { font-size: var(--fs-title); font-weight: 700; color: var(--text-1); }
.crm .start-page-neu .start-card-n { font-size: var(--fs-ui); color: var(--text-2); font-weight: 600; }
.crm .start-page-neu .start-card-r { margin-left: auto; font-size: var(--fs-ui); font-weight: 600; color: var(--st-blau-d); text-decoration: none; white-space: nowrap; }
.crm .start-page-neu .start-card-r:hover { text-decoration: underline; }
.crm .start-page-neu .start-card-unter { padding: .6667rem 1.2rem 0; font-size: var(--fs-ui); color: var(--text-2); }

/* Braucht dich */
.crm .start-page-neu .start-bd { display: grid; grid-template-columns: 1.8667rem minmax(0, 1fr) auto; gap: .8rem; padding: .9333rem 1.2rem; border-bottom: .0667rem solid var(--st-linie); align-items: start; transition: opacity .2s var(--st-ease); }
.crm .start-page-neu .start-bd:last-of-type { border-bottom: 0; }
.crm .start-page-neu .start-bd input { width: 1.3333rem; height: 1.3333rem; margin: .1333rem 0 0; accent-color: var(--st-ok); cursor: pointer; }
.crm .start-page-neu .start-bd-was { font-size: var(--fs-body); font-weight: 600; color: var(--text-1); }
.crm .start-page-neu .start-z { display: inline-block; min-width: 2.2667rem; padding: 0 .5333rem; border-radius: 999rem; background: var(--st-warn-t); color: var(--st-warn); font-weight: 700; text-align: center; margin-right: .4rem; }
.crm .start-page-neu .start-z.is-info { background: var(--st-blau-t); color: var(--st-blau-d); }
.crm .start-page-neu .start-bd-warum { font-size: var(--fs-ui); color: var(--text-2); margin-top: .2rem; line-height: 1.5; }
.crm .start-page-neu .start-bd-namen { font-size: var(--fs-ui); color: var(--text-1); margin-top: .4rem; display: flex; flex-wrap: wrap; gap: .4rem; }
.crm .start-page-neu .start-bd-namen span { background: var(--bg-surface-3); border-radius: .4667rem; padding: .1333rem .5333rem; }
.crm .start-page-neu .start-bd-akt { display: flex; flex-direction: column; gap: .4rem; align-items: flex-end; }
.crm .start-page-neu .start-bd-akt .btn { white-space: nowrap; text-decoration: none; font-size: var(--fs-meta); padding: .3333rem .6667rem; border-radius: .5333rem; line-height: 1.45; min-height: 0; }
.crm .start-page-neu .start-spaeter { font-size: var(--fs-meta); color: var(--text-3); font-weight: 600; background: none; border: 0; padding: 0; cursor: pointer; }
.crm .start-page-neu .start-spaeter:hover { color: var(--text-2); }
.crm .start-page-neu .start-bd.is-erledigt { opacity: .55; }
.crm .start-page-neu .start-bd.is-erledigt .start-bd-was { text-decoration: line-through; }
.crm .start-page-neu .start-fertig { padding: .8rem 1.2rem; font-size: var(--fs-ui); color: var(--st-ok); font-weight: 600; }

/* Was passiert ist */
.crm .start-page-neu .start-gr { border-bottom: .0667rem solid var(--st-linie); }
.crm .start-page-neu .start-gr:last-child { border-bottom: 0; }
.crm .start-page-neu .start-gr-k { width: 100%; display: grid; grid-template-columns: 2.2667rem minmax(0, 1fr) auto; gap: .8rem; padding: .8667rem 1.2rem; text-align: left; align-items: center; background: none; border: 0; cursor: pointer; color: inherit; font: inherit; }
.crm .start-page-neu .start-gr-k:hover { background: var(--bg-hover); }
.crm .start-page-neu .start-gr-ic { width: 2.2667rem; height: 2.2667rem; border-radius: .6667rem; display: grid; place-items: center; }
.crm .start-page-neu .start-gr-ic.is-ok { background: var(--st-ok-t); color: var(--st-ok); }
.crm .start-page-neu .start-gr-ic.is-blau { background: var(--st-blau-t); color: var(--st-blau-d); }
.crm .start-page-neu .start-gr-ic.is-bad { background: var(--tint-red); color: var(--ad-red-700); }
.crm .start-page-neu .start-gr-ic.is-grau { background: var(--bg-surface-3); color: var(--text-2); }
.crm .start-page-neu .start-gr-text { display: flex; flex-direction: column; min-width: 0; }
.crm .start-page-neu .start-gr-tt { font-size: var(--fs-body); font-weight: 600; color: var(--text-1); }
.crm .start-page-neu .start-gr-ss { font-size: var(--fs-ui); color: var(--text-2); margin-top: .0667rem; }
.crm .start-page-neu .start-gr-pf { color: var(--text-3); transition: transform .18s var(--st-ease); }
.crm .start-page-neu .start-gr.is-offen .start-gr-pf { transform: rotate(90deg); }
.crm .start-page-neu .start-gr.is-leise .start-gr-tt { color: var(--text-2); font-weight: 500; }
.crm .start-page-neu .start-gr-liste { padding: 0 1.2rem .8rem 4.2667rem; }
.crm .start-page-neu .start-gr-e { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .6667rem; padding: .4rem 0; border-top: .0667rem dashed var(--st-linie); font-size: var(--fs-ui); color: var(--text-1); text-decoration: none; }
.crm .start-page-neu a.start-gr-e:hover > span:first-child { text-decoration: underline; }
.crm .start-page-neu .start-gr-e small { display: block; color: var(--text-3); font-size: var(--fs-meta); }
.crm .start-page-neu .start-gr-w { font-weight: 600; white-space: nowrap; }
.crm .start-page-neu .start-leer { padding: .9333rem 1.2rem; font-size: var(--fs-ui); color: var(--text-2); margin: 0; }
.crm .start-page-neu .start-fehler { padding: .9333rem 1.2rem; display: flex; flex-direction: column; gap: .5333rem; align-items: flex-start; font-size: var(--fs-ui); color: var(--text-1); }
.crm .start-page-neu .start-feed-skel { padding: .9333rem 1.2rem; display: grid; gap: .6667rem; }
.crm .start-page-neu .start-braucht-neu[aria-hidden="true"] { padding: .9333rem 1.2rem; display: grid; gap: .6667rem; }

/* Schmale Fenster: Kacheln 2×2, Spalten untereinander. */
@media (max-width: 68.75em) {
  .crm .start-page-neu .start-kacheln-neu { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .crm .start-page-neu .start-zwei { grid-template-columns: minmax(0, 1fr); }
}
@media (prefers-reduced-motion: reduce) {
  .crm .start-page-neu .start-pop.is-offen { animation: none; }
  .crm .start-page-neu .start-gr-pf, .crm .start-page-neu .start-bd { transition: none; }
}

/* PR1.405 #635 — Opportunity-Detail als eine Seite (components/crm-opportunity-detail.js):
   Brotkrume, Kopf mit Kundenlogo und zwei Schildern, drei Spalten nach der Kompass-Vorlage.
   Nur Tokens, rem und thin (ui-craft-Ratchet: keine neuen px, kein @media — der Umbruch auf
   eine Spalte kommt aus .record-grid-3). Farbe traegt nie allein: jedes Schild und jede
   Qualitaetszeile sagt ihren Zustand im Text; Marker in den -700-Stufen, Schrift --text-1. */
.crm .opp-crumb { display: flex; align-items: center; gap: var(--s-1); padding: var(--s-4) var(--s-5) 0; font-size: var(--fs-ui); color: var(--text-3); }
.crm .opp-crumb-back { font-size: inherit; color: var(--text-2); text-decoration: none; }
.crm .opp-crumb-back:hover { text-decoration: underline; }
.crm .opp-head { display: flex; align-items: center; flex-wrap: wrap; gap: var(--s-2) var(--s-4); padding: var(--s-2) var(--s-5) var(--s-1); }
.crm .opp-head-logo { flex: none; border-radius: var(--r-md); }
.crm .opp-head-text { min-width: 0; flex: 0 1 auto; }
.crm .opp-head-title { margin: 0; font-size: var(--fs-title); line-height: 1.25; font-weight: 600; color: var(--text-1); overflow-wrap: anywhere; }
.crm .opp-head-meta { margin-top: .125rem; font-size: var(--fs-ui); color: var(--text-3); }
.crm .opp-head-customer { background: none; border: 0; padding: 0; font: inherit; color: inherit; cursor: pointer; }
.crm .opp-head-customer:hover { color: var(--text-1); text-decoration: underline; }
/* PR1.473 (#726) — Hyperscaler-Logo mittig im freien Kopfraum; bricht der Kopf um, steht es zentriert. */
.crm .opp-head-hs { flex: 1 1 auto; min-width: 0; display: flex; justify-content: center; align-items: center; }
.crm .opp-head-pills { display: flex; align-items: center; flex-wrap: wrap; gap: var(--s-2); }
.crm .opp-head-actions { margin-left: auto; display: flex; flex-wrap: wrap; gap: var(--s-2); }
/* PR1.510 (#777) — Kopfleiste Opp + Projekt (components/detail-head-actions.js): EINE Reihe,
   hoechstens vier Elemente — Hauptaktion · naechster Schritt · Symbolgruppe · „Abschließen ▾".
   Keine Animation: taeglich mehrfach geoeffnet (Konvention 22). */
/* Opp: der Titel bricht lieber auf zwei Zeilen um, als die Knopfreihe in eine zweite Zeile
   zu schieben; das Hyperscaler-Logo nimmt nur noch seinen eigenen Platz (Entwurf 03). */
.crm .opp-head:has(.head-actions) .opp-head-text { flex: 1 1 16rem; }
.crm .opp-head:has(.head-actions) .opp-head-hs { flex: 0 0 auto; }
/* Eine Reihe, solange Platz ist; erst in sehr schmalen Fenstern (Layout-Pruefung 600 px)
   bricht sie rechtsbuendig um statt ueber den Rand zu laufen. */
.crm .head-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: var(--s-2); }
.crm .head-actions .head-text-btn { display: inline-flex; align-items: center; gap: .4rem; white-space: nowrap; }
.crm .head-icon-group { display: inline-flex; }
.crm .head-icon-group .head-icon-btn { border-radius: 0; margin-left: -.0625rem; padding-inline: .55rem; }
.crm .head-icon-group .head-icon-btn:first-child { margin-left: 0; border-radius: var(--r-sm) 0 0 var(--r-sm); }
.crm .head-icon-group .head-icon-btn:last-child { border-radius: 0 var(--r-sm) var(--r-sm) 0; }
.crm .head-icon-group .head-icon-btn:focus-visible { position: relative; z-index: 2; outline: .125rem solid var(--focus); outline-offset: .0625rem; }
/* Hinweis = Name + ein Satz, bei Hover UND Fokus (Muster .gap-count[data-tip]). */
.crm .head-icon-btn { position: relative; }
/* Statusauswahl in der Kennzahl „Status“ des Projektkopfs: in schmalen Fenstern darf der
   Pfeil unter das Schild rutschen, statt die Kennzahlen-Zeile zu verbreitern. */
.crm .hl-value .status-change-trigger { display: inline-flex; flex-wrap: wrap; align-items: center; max-width: 100%; }
.crm .head-icon-btn[data-tip]:hover::after,
.crm .head-icon-btn[data-tip]:focus-visible::after {
  content: attr(data-tip); position: absolute; right: 0; top: calc(100% + var(--s-1)); z-index: 45;
  width: max-content; max-width: 16rem; white-space: pre-line; text-align: left;
  padding: .4rem .65rem; border-radius: var(--r-sm); font-size: var(--fs-meta); font-weight: 500; line-height: 1.4;
  background: var(--text-1); color: var(--bg-surface); pointer-events: none;
  box-shadow: var(--shadow-2);
}
.crm .head-icon-btn[aria-busy="true"] { cursor: progress; opacity: .6; }
/* Gesperrt sieht gesperrt aus (Recht fehlt, schreibgeschuetzt). */
.crm .head-actions .btn:disabled { opacity: .5; cursor: not-allowed; box-shadow: none; }
.crm .head-actions .more-menu-btn { white-space: nowrap; }
.crm .head-actions .more-menu-list { min-width: 15rem; max-width: 19rem; }
.crm .head-actions .more-menu-item { align-items: flex-start; }
.crm .head-actions .more-menu-item .ic { flex: none; margin-top: .125rem; }
.crm .more-menu-item:disabled { cursor: not-allowed; opacity: .6; }
.crm .more-menu-item:disabled:hover { background: none; }
.crm .more-menu-text { display: flex; flex-direction: column; gap: .125rem; min-width: 0; }
.crm .more-menu-label { font-weight: 600; }
.crm .more-menu-hint { font-size: var(--fs-meta); color: var(--text-3); line-height: 1.35; }
.crm .more-menu-item.is-danger { color: var(--danger); }
/* Endgueltiges sitzt abgesetzt am Ende der Liste. */
.crm .more-menu-item.is-danger:not(:first-child) { margin-top: .3rem; box-shadow: 0 -.2rem 0 -.125rem var(--border); }
.crm .opp-level-pill { display: inline-flex; align-items: center; gap: .375rem; padding: .125rem .6rem; border-radius: 999rem; font-size: var(--fs-meta); font-weight: 500; white-space: nowrap; color: var(--text-1); background: var(--bg-surface-3); }
.crm .opp-level-pill.is-ok { background: var(--tint-green); }
.crm .opp-level-pill.is-warn { background: var(--tint-warn); }
.crm .opp-level-pill.is-bad { background: var(--tint-red); }
.crm .opp-level-dot { width: .4375rem; height: .4375rem; border-radius: 50%; background: var(--text-3); }
.crm .opp-level-pill.is-ok .opp-level-dot { background: var(--ad-green-700); }
.crm .opp-level-pill.is-warn .opp-level-dot { background: var(--ad-orange-700); }
.crm .opp-level-pill.is-bad .opp-level-dot { background: var(--ad-red-700); }
.crm .opp-head-customer:focus-visible, .crm .opp-crumb-back:focus-visible, .crm .opp-q-jump:focus-visible,
.crm .opp-plan-sum:focus-visible, .crm .opp-card-act:focus-visible { outline: .125rem solid var(--focus); outline-offset: .125rem; border-radius: var(--r-xs); }
.crm .opp-grid { align-items: start; }
.crm .opp-card .section-h { margin-bottom: var(--s-2); }
.crm .opp-card-act { margin-left: auto; font-size: var(--fs-meta); text-decoration: none; }
.crm .opp-card-act:hover { text-decoration: underline; }
/* Etikett links, Wert rechts (Vorlage) — statt des Kachelrasters der frueheren Reiter. */
.crm .record-grid-3 .opp-card .opp-field-list { grid-template-columns: minmax(0, 1fr); gap: var(--s-2); }
.crm .opp-field-list .field { display: grid; grid-template-columns: minmax(0, 7rem) minmax(0, 1fr); gap: var(--s-3); align-items: baseline; }
.crm .opp-field-list .field .lbl { font-size: var(--fs-ui); font-weight: 400; letter-spacing: 0; text-transform: none; }
.crm .opp-field-list .field .val { font-size: var(--fs-body); }
.crm .opp-rate { display: block; }
.crm .opp-rate-sub { display: block; font-size: var(--fs-meta); font-weight: 400; color: var(--text-3); }
.crm .opp-empty { margin: 0; font-size: var(--fs-ui); color: var(--text-3); }
.crm .opp-contacts { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--s-3); }
.crm .opp-contact { display: flex; align-items: center; gap: var(--s-3); min-width: 0; }
.crm .opp-contact-av { flex: none; width: 1.75rem; height: 1.75rem; border-radius: 50%; display: grid; place-items: center; font-size: var(--fs-label); font-weight: 500; color: var(--text-1); background: var(--tint-blue); }
.crm .opp-contact-av.is-2 { background: var(--tint-green); }
.crm .opp-contact-av.is-3 { background: var(--tint-warn); }
.crm .opp-contact-av.is-4 { background: var(--bg-surface-3); }
.crm .opp-contact-text { min-width: 0; display: flex; flex-direction: column; }
.crm .opp-contact-name { font-size: var(--fs-body); font-weight: 500; color: var(--text-1); overflow-wrap: anywhere; }
.crm .opp-contact-sub { font-size: var(--fs-meta); color: var(--text-3); }
.crm .opp-att-mount { display: flex; flex-direction: column; gap: var(--s-2); min-width: 0; font-size: var(--fs-ui); }
.crm .opp-prose { margin: 0 0 var(--s-2); max-width: 75ch; font-size: var(--fs-body); line-height: 1.6; color: var(--text-1); }
.crm .opp-prose:last-child { margin-bottom: 0; }
.crm .opp-tasks { margin: 0; padding-left: 1.1rem; font-size: var(--fs-body); line-height: 1.6; color: var(--text-1); }
.crm .opp-req { display: grid; grid-template-columns: minmax(0, 8rem) minmax(0, 1fr); gap: var(--s-3); margin: 0; align-items: baseline; font-size: var(--fs-ui); }
.crm .opp-req dt { color: var(--text-3); }
.crm .opp-req dd { margin: 0; min-width: 0; display: flex; flex-wrap: wrap; gap: .375rem; color: var(--text-1); }
.crm .opp-skill { display: inline-flex; align-items: center; gap: .3rem; padding: .125rem .55rem; border-radius: var(--r-xs); background: var(--bg-surface-3); font-size: var(--fs-ui); color: var(--text-1); }
.crm .opp-skill { list-style: none; }
/* PR1.516 — Gesuchte Skills gruppiert nach Stufe (Wort statt Sterne); steht nach .opp-req, damit
   dessen dt/dd-Regeln die verschachtelte Liste nicht faerben. */
.crm .skill-groups { flex: 1 1 100%; width: 100%; margin: 0; display: grid; gap: var(--s-2); }
.crm .skill-group { display: grid; gap: var(--s-1); }
.crm .skill-groups .skill-group-label { display: flex; flex-wrap: wrap; align-items: baseline; gap: .125rem .5rem; margin: 0; color: var(--text-1); }
.crm .skill-group-name { font-size: var(--fs-ui); font-weight: 500; color: var(--text-1); }
.crm .skill-group-hint { font-size: var(--fs-meta); color: var(--text-3); }
.crm .skill-groups .skill-group-chips { display: block; margin: 0; min-width: 0; }
.crm .skill-group-chips ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .375rem; }
.crm .skill-group-chips li { max-width: 100%; }
.crm .opp-lang { display: inline-flex; align-items: center; padding: .0625rem .5rem; border: thin solid var(--border); border-radius: var(--r-xs); font-size: var(--fs-meta); color: var(--text-2); }
.crm .opp-dash { color: var(--text-3); }
.crm .opp-staffing-mount { min-width: 0; scroll-margin-top: 5rem; }
.crm .opp-staffing-mount .opp-staffing-role:focus-visible { outline: .125rem solid var(--focus); outline-offset: -.125rem; }
.crm .opp-match-area { display: flex; flex-direction: column; gap: var(--s-3); padding: var(--s-3) var(--s-4); border: thin solid var(--border); border-radius: var(--r-md); background: var(--bg-surface); scroll-margin-top: 5rem; }
.crm .opp-match-area:focus-visible { outline: .125rem solid var(--focus); outline-offset: .125rem; }
.crm .opp-match-head { display: flex; align-items: center; gap: var(--s-3); }
.crm .opp-match-title { margin: 0; font-size: var(--fs-body); font-weight: 600; color: var(--text-1); }
.crm .opp-match-head .btn { margin-left: auto; }
.crm .opp-plan { border: thin solid var(--border); border-radius: var(--r-md); background: var(--bg-surface); }
.crm .opp-plan-sum { display: flex; align-items: center; gap: var(--s-2); padding: var(--s-3) var(--s-4); cursor: pointer; font-size: var(--fs-body); font-weight: 500; color: var(--text-1); }
/* display:flex nimmt dem <summary> den nativen Marker — eigener Winkel, gedreht bei [open].
   Der Auf/Zu-Zustand kommt nativ vom <details> (Screenreader: „erweitert/reduziert"). */
.crm .opp-plan-sum { list-style: none; }
.crm .opp-plan-sum::-webkit-details-marker { display: none; }
.crm .opp-plan-chev { flex: none; width: .45rem; height: .45rem; margin-right: var(--s-1); border-right: .125rem solid var(--text-2); border-bottom: .125rem solid var(--text-2); transform: rotate(-45deg); transition: transform var(--t-fast); }
.crm .opp-plan[open] > .opp-plan-sum .opp-plan-chev { transform: rotate(45deg); }
/* Kundenname in den Stammdaten: eine Zeile, Rest per Ellipse (voller Name im title). */
.crm .opp-field-link { display: block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; background: none; border: 0; padding: 0; font: inherit; color: var(--ad-blue); text-align: left; cursor: pointer; }
.crm .opp-field-link:hover { text-decoration: underline; }
html[data-theme="dark"] .crm .opp-field-link, .crm.dark .opp-field-link { color: var(--ad-blue-300); }
.crm .opp-field-link:focus-visible { outline: .125rem solid var(--focus); outline-offset: .125rem; border-radius: var(--r-xs); }
.crm .opp-plan-meta { margin-left: auto; font-size: var(--fs-meta); font-weight: 400; color: var(--text-3); }
.crm .opp-plan-body { display: flex; flex-direction: column; gap: var(--s-3); padding: 0 var(--s-4) var(--s-4); }
.crm .opp-q-score { display: flex; align-items: baseline; gap: .375rem; margin-bottom: var(--s-2); }
.crm .opp-q-score b { font-size: var(--fs-display); font-weight: 600; color: var(--text-1); font-variant-numeric: tabular-nums; }
.crm .opp-q-score span { font-size: var(--fs-meta); color: var(--text-3); }
.crm .opp-q-list { list-style: none; margin: 0; padding: 0; }
.crm .opp-q-item { display: flex; align-items: flex-start; gap: .55rem; padding: var(--s-2) 0; font-size: var(--fs-ui); color: var(--text-1); }
.crm .opp-q-item + .opp-q-item { border-top: thin solid var(--border); }
.crm .opp-q-ico { flex: none; width: 1.125rem; height: 1.125rem; margin-top: .0625rem; border-radius: 50%; display: grid; place-items: center; font-size: var(--fs-label); font-weight: 500; color: var(--text-1); }
.crm .opp-q-item.is-ok .opp-q-ico { background: var(--tint-green); }
.crm .opp-q-item.is-warn .opp-q-ico { background: var(--tint-warn); }
.crm .opp-q-body { min-width: 0; }
.crm .opp-q-jump { background: none; border: 0; padding: 0; font: inherit; color: var(--text-1); text-align: left; cursor: pointer; text-decoration: underline; text-underline-offset: .15em; }
.crm .opp-q-detail { display: block; margin-top: .125rem; font-size: var(--fs-meta); color: var(--text-3); }

/* PR1.405 #635 — Projekt-Kopf mit Kundenlogo (components/crm-project-detail.js projectHeaderHtml):
   das Logo steht links neben dem Highlights-Panel, Klasse wie im Opp-Kopf (.opp-head-logo).
   Die Huelle uebernimmt Flaeche und Trennlinie des Panels, damit beides als EIN Kopf liest. */
.crm .proj-head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); background: var(--bg-surface); border-bottom: thin solid var(--border); }
/* PR1.405 (#635) — Kennzahlen-Raster schrumpft nicht unter seinen Inhalt; unter ~36rem
   Restbreite rutscht es unter das Logo, statt rechts aus dem Fenster zu laufen. */
.crm .proj-head > :first-child { margin-left: var(--s-5); }
.crm .proj-head > .highlights { flex: 1 1 36rem; min-width: 0; border-bottom: 0; }

/* PR1.538 (#819) — Kopfkarte Opp + Projekt (components/header-strip-model.js): Zeile 1 mit
   Logo, Titel, Metazeile (nur Kunde · CC) und Knopfreihe; darunter der Kennzahl-Streifen mit
   sechs Feldern. Keine Animation (taeglich mehrfach geoeffnet, Konvention 22). Farbe traegt
   nie allein: Warnzeilen sagen die Luecke im Text, offene Plaetze haben eine gestrichelte
   Kontur. Umbruch ohne @media: die Karte ist ein Container, der Streifen geht von 6 Spalten
   auf 3×2 und schmal auf 2×3 — nie ein einzelnes Feld allein in einer Zeile. */
.crm .hcard {
  --hcard-warn: var(--ad-orange-900); --hcard-ok: var(--ad-green-900);
  margin: var(--s-2) var(--s-5) var(--s-3); padding: var(--s-4) var(--s-5) var(--s-3);
  background: var(--bg-surface); border: thin solid var(--border); border-radius: var(--r-lg);
  container-type: inline-size; container-name: hcard;
}
.crm.dark .hcard, html[data-theme="dark"] .crm .hcard { --hcard-warn: var(--ad-orange); --hcard-ok: var(--ad-green); }
/* Projektseite: Kopfkarte und Reiter liegen im Scroll-Bereich; die Reiter bleiben oben stehen. */
.crm .proj-scroll > .tabs { position: sticky; top: 0; z-index: 5; background: var(--bg-app); }
.crm .hcard-row { display: flex; align-items: center; flex-wrap: wrap; gap: var(--s-3) var(--s-4); }
.crm .hcard-row > .opp-head-logo { flex: none; }
.crm .hcard-text { flex: 1 1 18rem; min-width: 0; }
.crm .hcard-title { margin: 0; font-size: var(--fs-title); line-height: 1.25; font-weight: 650; letter-spacing: -.01em; color: var(--text-1); overflow-wrap: anywhere; text-wrap: balance; }
.crm .hcard-meta { display: flex; align-items: center; flex-wrap: wrap; gap: var(--s-2); margin-top: .3rem; font-size: var(--fs-body); color: var(--text-2); }
.crm .hcard-meta .hcard-customer { font-weight: 650; color: var(--text-1); }
.crm .hcard-sep { width: .25rem; height: .25rem; border-radius: 50%; background: var(--border-strong); }
.crm .hcard-actions { margin-left: auto; }
.crm .head-actions--strip .head-more-btn { padding-inline: .55rem; }
.crm .hstrip {
  display: grid; grid-template-columns: repeat(6, minmax(0, 1fr));
  row-gap: var(--s-3); margin-top: var(--s-4); padding-top: var(--s-3); border-top: thin solid var(--border);
}
.crm .hstrip-field { min-width: 0; padding: 0 var(--s-4); border-left: thin solid var(--border); }
.crm .hstrip-field:first-child { padding-left: 0; border-left: 0; }
@container hcard (max-width: 66rem) {
  .crm .hstrip { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .crm .hstrip-field:nth-child(3n+1) { padding-left: 0; border-left: 0; }
}
@container hcard (max-width: 36rem) {
  .crm .hstrip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .crm .hstrip-field:nth-child(3n+1) { padding-left: var(--s-4); border-left: thin solid var(--border); }
  .crm .hstrip-field:nth-child(2n+1) { padding-left: 0; border-left: 0; }
}
.crm .hstrip-lbl { font-size: var(--fs-meta); font-weight: 500; color: var(--text-3); }
.crm .hstrip-val { display: flex; align-items: center; flex-wrap: wrap; gap: var(--s-1) var(--s-2); margin-top: .2rem; min-height: 1.75rem; font-variant-numeric: tabular-nums; }
.crm .hstrip-apo { font-family: var(--f-mono); font-variant-numeric: tabular-nums; font-size: var(--fs-title); font-weight: 600; letter-spacing: .03em; color: var(--text-1); }
.crm .hstrip-apo.is-empty, .crm .hstrip-empty { color: var(--text-3); font-weight: 500; }
.crm .hstrip-copy {
  display: inline-grid; place-items: center; width: 1.75rem; height: 1.75rem; padding: 0;
  border: thin solid var(--border); border-radius: var(--r-sm); background: var(--bg-surface); color: var(--text-3); cursor: pointer;
}
.crm .hstrip-copy:hover { color: var(--text-1); border-color: var(--border-strong); }
.crm .hstrip-copy:focus-visible { outline: .125rem solid var(--focus); outline-offset: .0625rem; }
.crm .hstrip-copy.is-copied { color: var(--hcard-ok); border-color: currentColor; }
.crm .hstrip-copied { font-size: var(--fs-meta); font-weight: 500; color: var(--hcard-ok); }
.crm .hstrip-copied:empty { display: none; }
.crm .hstrip-field[data-strip-field="health"] .hstrip-val > * { max-width: 100%; white-space: normal; }
.crm .hstrip-hs .hs-logo { display: inline-flex; align-items: center; gap: var(--s-2); padding: .2rem .6rem; border: thin solid var(--border); border-radius: var(--r-md); background: var(--bg-surface); }
.crm .hstrip-hs .hs-logo-name { font-size: var(--fs-body); font-weight: 500; }
.crm .hstrip-big { font-size: var(--fs-title); font-weight: 600; color: var(--text-1); }
.crm .hstrip-of { font-size: var(--fs-body); color: var(--text-3); }
.crm .hstrip-meter { display: flex; gap: .2rem; margin-top: .45rem; max-width: 18rem; }
.crm .hstrip-meter i { flex: 1; height: .375rem; border-radius: .125rem; background: var(--bg-surface-3); }
.crm .hstrip-meter i.is-full { background: var(--ad-blue); }
.crm .hstrip-meter i.is-half { background: linear-gradient(90deg, var(--ad-blue) 50%, var(--bg-surface-3) 50%); }
.crm .hstrip-slots { display: flex; flex-wrap: wrap; gap: .25rem; margin-top: .45rem; }
.crm .hstrip-slots i { width: .9rem; height: .9rem; border-radius: 50%; border: .09rem dashed var(--border-strong); background: var(--bg-surface); }
.crm .hstrip-slots i.is-filled { border: 0; background: var(--ad-blue); }
.crm .hstrip-slots i.is-reserved { border-style: solid; border-color: var(--ad-blue); }
.crm .hstrip-note { margin-top: .3rem; font-size: var(--fs-ui); line-height: 1.35; color: var(--text-2); }
.crm .hstrip-note.is-warn { color: var(--hcard-warn); font-weight: 600; }
.crm .hstrip-note.is-ok { color: var(--hcard-ok); font-weight: 600; }
/* Schmale Mitte (Container, nicht Fenster): Rolle + Aktion oben, Inhalt darunter in voller Breite. */
@container (max-width: 40rem) {
  .crm .opp-staffing-role { grid-template-columns: minmax(0, 1fr) auto; row-gap: var(--s-2); }
  .crm .opp-staffing-role-info { grid-column: 1; grid-row: 1; }
  .crm .opp-staffing-side { grid-column: 2; grid-row: 1; justify-self: end; }
  .crm .opp-staffing-slot { grid-column: 1 / -1; grid-row: 2; }
}

/* ─────────────────────────────────────────
   PR1.408 (#638) — Dashboard-Bauplan im Redesign. Layout und Bewegung stehen in style.css
   (ein Markup fuer beide Shells); hier nur die Designsprache: Tokens umgemappt, Schrift,
   Radien. Kein einziger Rohwert (Konvention 21, ui-craft-Ratchet).
   ───────────────────────────────────────── */
.crm .dbp {
  --primary: var(--ad-blue);
  --primary-text: var(--ad-blue-700);
  --warning: var(--ad-orange-900);
  --bg-hover: var(--bg-surface-2);
  --dbp-gap: var(--s-4);
  --dbp-radius: var(--r-md);
  font-family: var(--f-sans);
}
.crm.dark .dbp , html[data-theme="dark"] .crm .dbp {
  --primary-text: var(--ad-blue-300);
  --warning: var(--ad-orange);
}
.crm .dbp-titel { font-family: var(--f-cond); font-size: var(--fs-body); }
.crm .dbp-zeitraum-knopf { background: var(--bg-surface); }
.crm .dbp-zeitraum-knopf[aria-pressed="true"] { background: var(--tint-blue); color: var(--text-1); }
.crm .page-head .actions .dbp-zeitraum { margin-right: var(--s-2); }
/* PR1.731 (#1045) — Reiter Kunden, Tabelle „Aktive Kunden" — 1:1 nach Prototyp V02
   (design/mockups/vorlive-05-11/listen-dashboard.html: .kpi, .tkarte, .tk-kopf, .seg, .tk-sum, .tbl, .grip, .ec, .lg,
   .lg-leer, .tag, .bar, .tk-fuss, .anm). Schriftgroessen auf die naechste Stufe der Skala (Regel Vasili). */
/* Kachel „Aktive Kunden" & Co. (.kpi h3 15/600 text-1 · .ks 13,5 text-2 · .kv small 13/500 text-2) */
.crm [data-dbp-reiter="kunden"] .dbp-kpi-titel { font-weight: 600; color: var(--text-1); }
.crm [data-dbp-reiter="kunden"] .dbp-kpi .dbp-satz { color: var(--text-2); }
.crm [data-dbp-reiter="kunden"] .dbp-kpi .dbp-einheit { font-size: var(--fs-meta); }
/* Karte randlos: Kopfband und Zeilenlinien laufen bis zum Kartenrand (.tkarte padding 16 0 6) */
.crm .dbp-karte[data-dbp-key="aktive-kunden"] { padding: 1.0667rem 0 .4rem; }
.crm .dbp-ak-kopf { flex-wrap: wrap; gap: var(--s-2) .9333rem; padding: 0 1.3333rem; }
.crm .dbp-ak-kopf .dbp-titel { font-family: var(--f-sans); font-size: var(--fs-section); font-weight: 700; color: var(--text-1); white-space: nowrap; }
.crm .dbp-ak-zahl { margin-left: .2667rem; font-weight: 500; color: var(--text-3); }
/* .seg: Huelle surface-3, Rand border, Radius 9 · Teil 5/12, Radius 6, 500 text-2 · an: weiss, blue-700, 600, shadow-1 */
.crm .dbp-ak-seg, .crm .dbp-ak-modus { display: inline-flex; align-items: center; gap: .1333rem; padding: .2rem; border: .0667rem solid var(--border); border-radius: .6rem; background: var(--bg-surface-3); white-space: nowrap; }
.crm .dbp-ak-seg-knopf, .crm .dbp-ak-modus-knopf { border: 0; border-radius: .4rem; background: transparent; padding: .3333rem .8rem; font: inherit; font-size: var(--fs-ui); font-weight: 500; color: var(--text-2); cursor: pointer; white-space: nowrap; }
.crm .dbp-ak-modus-knopf { padding: .2rem .6667rem; font-size: var(--fs-label); }
.crm .dbp-ak-seg-knopf[aria-pressed="true"], .crm .dbp-ak-modus-knopf[aria-pressed="true"] { background: var(--bg-surface); color: var(--ad-blue-700); font-weight: 600; box-shadow: 0 .0667rem 0 rgba(15,23,38,.04), 0 .0667rem .1333rem rgba(15,23,38,.06); }
.crm.dark .dbp-ak-seg-knopf[aria-pressed="true"], html[data-theme="dark"] .crm .dbp-ak-seg-knopf[aria-pressed="true"],
.crm.dark .dbp-ak-modus-knopf[aria-pressed="true"], html[data-theme="dark"] .crm .dbp-ak-modus-knopf[aria-pressed="true"] { color: var(--primary-text); }
.crm .dbp-ak-seg-knopf:focus-visible, .crm .dbp-ak-modus-knopf:focus-visible, .crm .dbp-ak-alle:focus-visible { outline: .1333rem solid var(--focus); outline-offset: .0667rem; }
.crm .dbp-ak-rechts { display: inline-flex; align-items: center; gap: .9333rem; margin-left: auto; }
.crm .dbp-ak-rechts .dbp-ecke { font-size: var(--fs-label); color: var(--text-3); } /* em.c3 12,5 */
/* .tk-sum: margin 10 20 12 · 13,5 text-2 · b 19/700 text-1, 4 px Abstand */
.crm .dbp-karte[data-dbp-key="aktive-kunden"] .dbp-top-summe { margin: .6667rem 1.3333rem .8rem; gap: 0 .2667rem; }
.crm .dbp-karte[data-dbp-key="aktive-kunden"] .dbp-top-betrag { font-size: var(--fs-title); font-weight: 700; color: var(--text-1); }
.crm .dbp-karte[data-dbp-key="aktive-kunden"] .dbp-top-summe .dbp-satz { font-size: var(--fs-ui); color: var(--text-2); }
/* .tbl: th 12,5/600 text-3, Polster 10 12, Flaeche surface-2, Linie border · td Polster 0 12, 46 hoch, 14 · erste Spalte 20 */
.crm .dbp-ak-wrap { max-height: 40rem; overflow-x: hidden; }
.crm .dbp-ak { table-layout: fixed; width: 100%; border-collapse: collapse; }
.crm .dbp-ak thead th, .crm .dbp-ak thead td { position: sticky; top: 0; background: var(--bg-surface-2); font-size: var(--fs-label); font-weight: 600; color: var(--text-3); white-space: nowrap; overflow: visible; padding: .6667rem .8rem; border-bottom: .0667rem solid var(--border); vertical-align: middle; line-height: 1.25; }
/* Zahlenkopf: Beschriftung rechtsbuendig, ragt bei schmaler Spalte nach links in den leeren Balkenkopf statt umzubrechen. */
.crm .dbp-ak thead th.dbp-num .dbp-ak-th { position: absolute; right: .8rem; top: 50%; transform: translateY(-50%); z-index: 1; }
.crm .dbp-ak thead th.dbp-num::before { content: "\200b"; }
/* .grip::after: Strich 25 %–75 %, 1 px, text-3 bei 50 % Deckkraft, am rechten Kopfrand */
.crm .dbp-ak thead th:not(.dbp-ak-c-menue):not(.dbp-ak-c-satz)::after { content: ""; position: absolute; right: -.0667rem; top: 25%; bottom: 25%; width: .0667rem; background: var(--text-3); opacity: .5; pointer-events: none; }
.crm .dbp-ak thead th.dbp-ak-c-satz::after { content: ""; position: absolute; right: 0; top: 25%; bottom: 25%; width: .0667rem; background: var(--text-3); opacity: .5; pointer-events: none; }
.crm .dbp-ak tbody td { height: 3.0667rem; }
/* Nachzug: Geldbetraege nie kuerzen. Links steht der Balken mit 12 px Abstand — die Umsatzzelle braucht dort kein eigenes
   Polster (+8 px, traegt „13.755.000 €“ ab ~735 px Tabellenbreite, also 1280 mit Leiste und echter Bildlaufleiste). */
.crm .dbp-ak td.dbp-ak-c-umsatz { padding-left: .2667rem; }
.crm .dbp-ak td.dbp-ak-c-umsatz, .crm .dbp-ak td.dbp-ak-c-satz { text-overflow: clip; }
/* Noch schmalere Karte: die Kundenspalte gibt 2 Punkte an den Umsatz ab (Name kuerzt weiter mit „…“ + title). */
.crm .dbp-ak-wrap { container-type: inline-size; }
@container (max-width: 46rem) {
  .crm .dbp-ak .dbp-ak-c-kunde { width: var(--colw-kunde, 28%); }
  .crm .dbp-ak .dbp-ak-c-umsatz { width: var(--colw-umsatz, 15%); }
}
.crm .dbp-ak td { padding: 0 .8rem; font-size: var(--fs-ui); border-bottom: .0667rem solid var(--border); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; vertical-align: middle; }
.crm .dbp-ak tbody tr:last-child td { border-bottom: 0; }
.crm .dbp-ak th:first-child, .crm .dbp-ak td:first-child { padding-left: 1.3333rem; text-overflow: clip; }
.crm .dbp-ak th:first-child, .crm .dbp-ak td:first-child { padding-right: 0; overflow: visible; } /* 4 % bei 1280 schmaler als 20 px Einzug + „01“: Nummer darf in den Einzug der Kundenspalte ragen */
/* Anteile nach Vorlage V02 (colgroup des Prototyps): # 4 · Kunde 30 · Projekte 9 · Opps 7 · Balken 22 · Umsatz 13 ·
   Ø-Tagessatz 11 · ⋯ 4 % — in allen Breiten gleich. Gezogene Breiten (--colw-*) uebersteuern. */
.crm .dbp-ak-c-rang { width: var(--colw-rang, 4%); color: var(--text-3); font-variant-numeric: tabular-nums; }
.crm .dbp-ak-c-kunde { width: var(--colw-kunde, 30%); }
.crm .dbp-ak-c-projekte { width: var(--colw-projekte, 9%); }
.crm .dbp-ak-c-opps { width: var(--colw-opps, 7%); }
.crm .dbp-ak-c-balken { width: 22%; }
.crm .dbp-ak-c-umsatz { width: var(--colw-umsatz, 13%); }
.crm .dbp-ak-c-satz { width: var(--colw-satz, 11%); }
.crm .dbp-ak-c-menue { width: var(--colw-menue, 4%); }
.crm .dbp-ak td.dbp-ak-c-menue { padding: 0 .2667rem; text-align: center; overflow: visible; color: var(--text-3); }
.crm .dbp-ak td.dbp-ak-c-kunde { overflow: hidden; }
.crm .dbp-ak .col-resize { position: absolute; top: 0; right: -.4rem; bottom: 0; width: .8rem; z-index: 5; cursor: col-resize; touch-action: none; }
.crm .dbp-ak .col-resize:hover, .crm .dbp-ak .col-resize:focus-visible { box-shadow: inset .2rem 0 0 -.0667rem var(--focus); outline: none; }
.crm .dbp-ak thead th:last-of-type .col-resize, .crm .dbp-ak thead th.dbp-ak-c-satz .col-resize { right: 0; width: .4rem; } /* kein Mini-Querscroll */
/* .ec: Logo und Name, Abstand 11 · Name b 700 · Marke .tag mit 8 px Rand links */
.crm .dbp-ak-kunde { display: flex; align-items: center; gap: .7333rem; min-width: 0; }
.crm .dbp-ak-text { display: flex; flex-wrap: nowrap; align-items: center; min-width: 0; }
.crm .dbp-ak-name { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 700; color: var(--text-1); }
/* .lg: 28 px, Radius 7, weiss, Rand border, Innenabstand 7 % · .lg-leer: surface-3, gestrichelter Rand, Zeichen hellgrau (text-3 zu 60 % auf surface-3, wie Prototyp) */
.crm .dbp-ak-logo { position: relative; flex: none; display: inline-grid; place-items: center; width: 1.8667rem; height: 1.8667rem; border-radius: .4667rem; background: var(--bg-surface-3); border: .0667rem dashed var(--border); color: color-mix(in srgb, var(--text-3) 60%, var(--bg-surface-3)); overflow: hidden; }
.crm .dbp-ak-logo > svg { width: .9333rem; height: .9333rem; }
.crm .dbp-ak-logo .dbp-ak-logo-bild { position: absolute; inset: 0; transform: scale(.86); } /* .lg Innenabstand 7 % */
.crm .dbp-ak-logo .acc-logo-mono:not(.is-loaded) { visibility: hidden; }
.crm .dbp-ak-logo:has(.acc-logo.is-loaded) { background: var(--bg-surface); border-style: solid; }
.crm .dbp-ak-logo .acc-logo.is-loaded { box-shadow: none; background-color: var(--bg-surface); }
/* .tag: 11,5/600 text-3, Flaeche surface-3, Radius 5, Polster 1 7, 8 px Rand links (+ 11 Luecke = 20 wie V02) */
.crm .dbp-ak-chip { flex: none; margin-left: 1.2667rem; padding: .0667rem .4667rem; border-radius: .3333rem; background: var(--bg-surface-3); font-size: var(--fs-label); font-weight: 600; line-height: 1.15; color: var(--text-3); white-space: nowrap; }
/* tr.nur-opp td: text-2 (Name bleibt 700) */
.crm .dbp-ak-nur-opp td, .crm .dbp-ak-nur-opp .dbp-ak-name { color: var(--text-2); }
.crm .dbp-ak td.dbp-achtung-text { font-weight: 600; }
/* .bar: 8 px, Radius 4, Spur surface-3, Fuellung ad-blue; Kleinstwert mindestens 2 px sichtbar */
.crm .dbp-ak .dbp-spur { display: block; height: .5333rem; border-radius: .2667rem; background: var(--bg-surface-3); overflow: hidden; }
.crm .dbp-ak .dbp-ak-balken { width: max(.1333rem, var(--dbp-breite, 0%)); transform: none; border-radius: .2667rem; background: var(--ad-blue); } /* Kleinstwert >= 2 px */
.crm.dark .dbp-ak-chip, html[data-theme="dark"] .crm .dbp-ak-chip { color: var(--text-2); } /* Kontrast >= 4,5 auf surface-3 */
/* ⋯-Menue */
.crm .dbp-ak .more-menu { display: inline-flex; position: relative; }
.crm .dbp-ak .dbp-ak-mehr { border: 0; background: none; box-shadow: none; padding: 0; min-width: 0; width: auto; height: auto; color: var(--text-3); } /* .act: nur die Punkte, passt in 4 % */
.crm .dbp-ak .dbp-ak-mehr:hover { color: var(--text-1); background: var(--bg-surface-2); }
.crm .dbp-ak .more-menu-list { right: 0; left: auto; min-width: 13rem; white-space: nowrap; text-align: left; }
/* .tk-fuss: margin 6 20 8 · 13 text-3 · .lnk blue-700 600 · .anm: block, 8 oben, Polster 8 12, Radius 8, surface-2, gestrichelt border-strong, text-2 */
.crm .dbp-ak-fuss { margin: .4rem 1.3333rem 0; font-size: var(--fs-meta); color: var(--text-3); }
.crm .dbp-ak-alle { border: 0; background: none; padding: 0; font: inherit; font-weight: 600; color: var(--ad-blue-700); cursor: pointer; }
.crm.dark .dbp-ak-alle, html[data-theme="dark"] .crm .dbp-ak-alle { color: var(--primary-text); }
.crm .dbp-ak-alle:hover { text-decoration: underline; }
.crm .dbp-ak-anmerkung { margin: .5333rem 1.3333rem .5333rem; padding: .5333rem .8rem; border: .0667rem dashed var(--border-strong); border-radius: .5333rem; background: var(--bg-surface-2); font-size: var(--fs-meta); color: var(--text-2); }
.crm .dbp-ak-leer { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3); padding: 0 1.3333rem; }
/* PR1.597 (#892) — Schalter „Erweitert" und Ocker-Flaeche der Handlungs-Kacheln.
   Ocker = Warnton ohne Orange-Tint: Orange bleibt Anlegen und KI (Farbregel 30.10.). */
.crm .dbp-achtung { background: color-mix(in srgb, var(--warning) 10%, var(--bg-surface)); }
.crm .dbp-kritisch { background: color-mix(in srgb, var(--danger) 8%, var(--bg-surface)); }
.crm .dbp-kopf-gruppe { display: inline-flex; align-items: center; gap: var(--s-3); margin-right: var(--s-2); }
.crm .dbp-erweitert { display: inline-flex; align-items: center; gap: var(--s-2); background: var(--bg-surface); border: .0625rem solid var(--border); border-radius: var(--r-pill, 6.25rem); padding: var(--s-1) var(--s-3) var(--s-1) var(--s-2); font: inherit; font-size: var(--fs-ui); font-weight: 600; color: var(--text-1); cursor: pointer; white-space: nowrap; }
.crm .dbp-erweitert-spur { position: relative; flex: none; width: 1.875rem; height: 1.125rem; border-radius: var(--r-pill, 6.25rem); background: var(--bg-surface); border: .0625rem solid var(--border); }
.crm .dbp-erweitert-knopf { position: absolute; top: .125rem; left: .125rem; width: .75rem; height: .75rem; border-radius: 50%; background: var(--text-3); }
.crm .dbp-erweitert[aria-checked="true"] { background: var(--tint-blue); border-color: var(--ad-blue); color: var(--primary-text, var(--ad-blue)); }
.crm .dbp-erweitert[aria-checked="true"] .dbp-erweitert-spur { background: var(--ad-blue); border-color: var(--ad-blue); }
.crm .dbp-erweitert[aria-checked="true"] .dbp-erweitert-knopf { left: .875rem; background: var(--bg-surface); }
.crm .dbp-erweitert:focus-visible { outline: .125rem solid var(--focus); outline-offset: .125rem; border-radius: var(--r-sm); }
/* PR1.563 (#849) — Monatssaeulen: Tipp und Kennzahlen in der Redesign-Sprache. */
.crm .dbp-saeule-tipp { border-radius: var(--r-sm); box-shadow: var(--shadow-2); }
.crm .dbp-mk { gap: var(--s-1) var(--s-6); }

/* PR1.599 — „Was ist passiert“ in der Redesign-Sprache (Grundregeln in style.css, beide
   Shells). Kreise: Gruen/Blau als Tint mit Textstufe; Ocker kommt aus den Bauplan-Tokens --dbp-ocker-* (style.css), wie die Kachel „Nicht gestafft“. */
.crm .dbp-passiert { background: var(--bg-surface); border-color: var(--border); border-radius: .75rem; font-family: var(--f-sans); }
.crm .dbp-passiert-kopf { padding: .625rem var(--s-4); gap: .625rem; }
.crm .dbp-passiert-titel { font-family: var(--f-sans); font-size: var(--fs-ui); }
.crm .dbp-passiert-seg { background: color-mix(in srgb, var(--text-3) 14%, var(--bg-surface)); border-radius: var(--r-md); }
.crm .dbp-passiert-seg-knopf { border-radius: var(--r-sm); }
.crm .dbp-passiert-seg-knopf[aria-pressed="true"] { background: var(--bg-surface); box-shadow: var(--shadow-1); }
.crm .dbp-passiert-alle { color: var(--primary-text, var(--ad-blue)); gap: var(--s-1); }
.crm .dbp-passiert-baustein { padding: .875rem var(--s-4); }
.crm button.dbp-passiert-baustein:hover { background: var(--bg-surface-2); }
.crm .dbp-passiert-ic-ok { background: var(--tint-green); color: var(--ad-green-900); }
.crm .dbp-passiert-ic-neutral { background: var(--bg-surface-2); color: var(--text-2); }
.crm .dbp-passiert-ic-blau { background: var(--tint-blue); color: var(--ad-blue-700); }
.crm .dbp-passiert-logos > * { width: 1.4667rem !important; height: 1.4667rem !important; min-width: 1.4667rem; box-sizing: content-box !important; border-color: var(--bg-surface); border-radius: var(--r-sm) !important; font-size: var(--fs-label) !important; }
.crm .dbp-passiert-knopf { background: var(--bg-surface); border-radius: var(--r-md); }
.crm .dbp-passiert-knopf-ghost { background: none; border-color: transparent; }
.crm .dbp-passiert button:focus-visible { outline: .125rem solid var(--focus); outline-offset: -.125rem; border-radius: var(--r-sm); }
.crm.dark .dbp-passiert-ic-blau, html[data-theme="dark"] .crm .dbp-passiert-ic-blau { color: var(--ad-blue-300); }
.crm .owner-zw-zeile { border-color: var(--border); }

/* PR1.400 (#630) — Planungsfenster: Abstaende im Veil-Dialog und der Namensknopf der Matrix.
   Grundregeln stehen in style.css (beide Shells). */
.crm .eplan-veil .modal-body { padding: var(--s-4); }
.crm .eplan-veil .modal-foot > .eplan-footslot { flex: 1; }
.crm .crm-ep-name-btn { width: 100%; margin: 0; padding: 0; border: 0; background: none; font: inherit; color: inherit; text-align: left; cursor: pointer; }
.crm .crm-ep-name-btn:hover .crm-ep-name-txt { text-decoration: underline; }

/* ─────────────────────────────────────────────────────────────────────────
   PR1.413 (#646) — Einsatz-Übersicht im Projekt-/Opp-Detail (Redesign):
   Budget-Balken mit Heute-Linie + Wochenkacheln je Person (ersetzt Mini-Gantt/Gantt).
   Täglich genutzt → keine Animation. Farbe nur auf Flächen/Rahmen; Text bleibt --text-1/-2,
   weil die -700-Stufen als Schriftfarbe unter 4,5:1 liegen.
   ───────────────────────────────────────────────────────────────────────── */
.crm .einsatz-budget { margin: .25rem 0 .75rem; font-size: var(--fs-ui); color: var(--text-2); font-variant-numeric: tabular-nums; }
.crm .einsatz-budget-kopf { display: flex; flex-wrap: wrap; align-items: center; gap: .375rem .625rem; margin-bottom: .375rem; }
.crm .einsatz-budget-titel { font-weight: 600; color: var(--text-1); }
.crm .einsatz-budget-kopf .team-budget-split { margin-left: auto; }
.crm .einsatz-ampel {
  display: inline-flex; align-items: center; padding: .125rem .5rem; border-radius: 999rem;
  font-size: var(--fs-label); color: var(--text-1); border: thin solid var(--border); background: var(--bg-surface-2);
}
.crm .einsatz-ampel.is-ok { border-color: var(--ad-green-700); background: color-mix(in srgb, var(--ad-green) 10%, var(--bg-surface)); }
.crm .einsatz-ampel.is-knapp { border-color: var(--ad-orange-700); background: color-mix(in srgb, var(--ad-orange) 14%, var(--bg-surface)); }
.crm .einsatz-ampel.is-ueber { border-color: var(--ad-red-700); background: color-mix(in srgb, var(--ad-red) 12%, var(--bg-surface)); }
.crm .einsatz-ueber-text { font-weight: 600; color: var(--text-1); }
.crm .einsatz-balken {
  position: relative; display: flex; height: 1.375rem; border-radius: var(--r-sm); overflow: hidden;
  border: thin solid var(--border-strong); background: var(--bg-surface);
}
/* PR1.515 — Budget und Plan auf einer Skala: zwei Spuren, rechts die Werte. */
.crm .einsatz-skala { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: .375rem .625rem; }
.crm .einsatz-skala-titel { font-weight: 600; color: var(--text-1); }
.crm .einsatz-skala-spur { position: relative; display: flex; height: 1.375rem; border-radius: var(--r-sm); background: var(--bg-surface-2); overflow: hidden; }
.crm .einsatz-skala-spur.einsatz-balken { border: 0; background: var(--bg-surface-2); }
.crm .einsatz-skala-budget { flex: 0 0 var(--breite); background: color-mix(in srgb, var(--text-2) 28%, var(--bg-surface-2)); }
.crm .einsatz-skala-wert { white-space: nowrap; color: var(--text-2); }
.crm .einsatz-skala-wert strong { color: var(--text-1); }
.crm .einsatz-skala-person { flex: 0 0 var(--breite); min-width: 0; }
.crm .einsatz-skala-person + .einsatz-skala-person { border-left: .125rem solid var(--bg-surface); }
.crm .einsatz-skala-person.is-ton-0, .crm .einsatz-leg.is-ton-0::before { background: var(--ad-blue-700); }
.crm .einsatz-skala-person.is-ton-1, .crm .einsatz-leg.is-ton-1::before { background: var(--ad-blue); }
.crm .einsatz-skala-person.is-ton-2, .crm .einsatz-leg.is-ton-2::before { background: color-mix(in srgb, var(--ad-blue) 60%, var(--bg-surface)); }
.crm .einsatz-skala-person.is-ton-3, .crm .einsatz-leg.is-ton-3::before { background: color-mix(in srgb, var(--ad-blue) 36%, var(--bg-surface)); }
.crm .einsatz-urteil {
  display: flex; flex-wrap: wrap; align-items: center; gap: .375rem .75rem; margin: .625rem 0 .25rem; padding: .5rem .75rem;
  border-radius: var(--r-md); border: thin solid var(--border); background: var(--bg-surface-2); color: var(--text-1);
}
.crm .einsatz-urteil.is-ueber { border-color: var(--ad-red-700); background: color-mix(in srgb, var(--ad-red) 10%, var(--bg-surface)); }
.crm .einsatz-urteil.is-warn { border-color: var(--ad-orange-700); background: color-mix(in srgb, var(--ad-orange) 12%, var(--bg-surface)); }
.crm .einsatz-urteil-text { display: flex; align-items: baseline; gap: .5rem; flex: 1 1 16rem; margin: 0; font-size: var(--fs-ui); line-height: 1.4; }
.crm .einsatz-urteil-zeichen { flex: 0 0 auto; font-weight: 600; }
.crm .einsatz-urteil-knoepfe { display: flex; flex-wrap: wrap; gap: .5rem; margin-left: auto; }
/* Nachjustierung #646: Balken = gesamte Planung; Budget als Linie, Überzug als Schraffur darüber. */
.crm .einsatz-ueber-flaeche {
  position: absolute; top: 0; bottom: 0; left: var(--von); width: var(--breite); z-index: 1; pointer-events: none;
  background: repeating-linear-gradient(135deg, color-mix(in srgb, var(--ad-red) 50%, transparent) 0 .3125rem, transparent .3125rem .625rem);
  box-shadow: inset 0 0 0 .125rem var(--ad-red-700);
}
.crm .einsatz-budget-linie { position: absolute; top: 0; bottom: 0; left: var(--pos); width: 0; margin-left: -.0625rem; z-index: 2; border-left: .125rem solid var(--text-1); }
.crm .einsatz-budget-summe { font-size: var(--fs-body); font-weight: 500; color: var(--text-1); }
.crm .einsatz-hinweis a { color: inherit; font-weight: 600; text-decoration: underline; text-underline-offset: .125rem; }
.crm .einsatz-budget-legende { display: flex; flex-wrap: wrap; gap: .25rem .875rem; margin-top: .375rem; font-size: var(--fs-label); }
.crm .einsatz-leg { display: inline-flex; align-items: center; gap: .375rem; }
.crm .einsatz-leg::before { content: ''; width: .625rem; height: .625rem; border-radius: .125rem; }
.crm .einsatz-leg.is-grenze::before { width: 0; height: .75rem; border-radius: 0; border-left: .125rem solid var(--text-1); }
.crm .einsatz-leg.is-ueber::before {
  background: repeating-linear-gradient(135deg, color-mix(in srgb, var(--ad-red) 50%, transparent) 0 .1875rem, transparent .1875rem .375rem);
  box-shadow: inset 0 0 0 .0625rem var(--ad-red-700);
}
.crm .einsatz-achse {
  position: relative; display: flex; justify-content: space-between; align-items: flex-start;
  margin-top: .375rem; padding-top: .25rem; min-height: 1.125rem; border-top: thin solid var(--border);
  font-size: var(--fs-label); color: var(--text-2);
}
.crm .einsatz-heute { position: absolute; left: var(--pos); top: -.25rem; bottom: 0; width: 0; border-left: .125rem solid var(--ad-orange-700); }
.crm .einsatz-heute-zeile { display: flex; align-items: center; gap: .375rem; margin-top: .125rem; font-size: var(--fs-label); color: var(--text-1); }
.crm .einsatz-heute-zeile::before { content: ''; width: .125rem; height: .75rem; background: var(--ad-orange-700); }
.crm .einsatz-heute-zeile.is-ausserhalb { color: var(--text-2); }
.crm .einsatz-heute-zeile.is-ausserhalb::before { content: none; }
.crm .einsatz-kein-budget { font-weight: 600; color: var(--text-1); }
.crm .einsatz-budget-zusatz { color: var(--text-2); }
.crm .einsatz-leer, .crm .einsatz-laedt, .crm .einsatz-zeitraum-fehlt { margin: .25rem 0; font-size: var(--fs-meta); color: var(--text-2); }
.crm .einsatz-fehler {
  margin: .375rem 0; padding: .5rem .625rem; border-radius: var(--r-md); font-size: var(--fs-meta); color: var(--text-1);
  border: thin solid var(--ad-red-700); background: color-mix(in srgb, var(--ad-red) 10%, var(--bg-surface));
}
.crm .einsatz-host { margin-top: .25rem; }
/* PR1.500 (#767) — Wochenstreifen: je KW ein Segment, Farbe = Gesamtauslastung aller Projekte.
   Farbe steht nie allein: Spitze als Zahl, Segment-Titel, Legende. Taeglich genutzt: ohne Animation. */
.crm .einsatz-streifen-zeile { display: flex; align-items: center; gap: .75rem; }
.crm .einsatz-streifen {
  flex: 1 1 auto; min-width: 0; display: flex; gap: .1875rem; margin: 0; padding: .125rem 0; list-style: none;
  overflow-x: auto;
}
/* PR1.515 — Wochenzelle mit KW und Prozentzahl. Stufenfarbe als getönte Fläche + voller Balken
   oben (Farben der Stufen unverändert), Text bleibt --text-1 für den Kontrast. */
.crm .einsatz-streifen-woche {
  --stufe: var(--border-strong);
  flex: 1 1 0; min-width: 2.75rem; padding: .1875rem .125rem .25rem; border-radius: var(--r-sm); text-align: center;
  display: flex; flex-direction: column; align-items: center; gap: .0625rem;
  background: color-mix(in srgb, var(--stufe) 18%, var(--bg-surface)); border: thin solid transparent;
  box-shadow: inset 0 .1875rem 0 var(--stufe); color: var(--text-1); font-variant-numeric: tabular-nums;
}
.crm .einsatz-zelle-kw { font-size: var(--fs-label); color: var(--text-2); white-space: nowrap; }
.crm .einsatz-zelle-wert { display: inline-flex; align-items: center; font-family: var(--f-mono); font-variant-numeric: tabular-nums; font-size: var(--fs-meta); font-weight: 500; white-space: nowrap; }
.crm .einsatz-zelle-zeichen { margin-right: .125rem; }
.crm .einsatz-streifen-woche.is-gering { --stufe: var(--ad-turq-700); }
.crm .einsatz-streifen-woche.is-normal { --stufe: var(--ad-blue); }
.crm .einsatz-streifen-woche.is-hoch { --stufe: var(--ad-orange); }
.crm .einsatz-streifen-woche.is-ueber { --stufe: var(--ad-red-300); }
.crm .einsatz-streifen-woche.is-frei { background: var(--bg-surface-2); box-shadow: none; }
.crm .einsatz-streifen-woche.is-frei .einsatz-zelle-wert { font-weight: 400; color: var(--text-2); }
.crm .einsatz-streifen-woche.is-vergangen { opacity: .55; }
.crm .einsatz-streifen-woche.is-aktuell { border-color: var(--text-1); }
.crm .einsatz-satz { margin: .375rem 0 0; font-size: var(--fs-ui); line-height: 1.4; color: var(--text-1); }
.crm .einsatz-weitere { margin-top: .25rem; }
.crm .einsatz-weitere-sum { cursor: pointer; font-size: var(--fs-meta); color: var(--text-2); width: fit-content; border-radius: var(--r-sm); }
.crm .einsatz-weitere-sum:hover { color: var(--text-1); }
.crm .einsatz-weitere-sum:focus-visible { outline: .125rem solid var(--focus); outline-offset: .125rem; }

/* ── PR1.849 (Ticket 1211) — Karte „Einsatzplanung": Auslastung einfach ────────────────────────
   Vorlage design/mockups/auslastung-einfach-12-11/entwurf.html (abgenommen 12.11.2026).
   Drei Zustände (Luft < 80 %, voll 80–105 %, zu viel > 105 %), Vormerkungen als Schraffur.
   Täglich genutzt: keine Animation. Farben nur aus Tokens (color-mix), Maße in rem. */
.crm .ep-karte {
  --ep-luft-bg: var(--tint-blue);
  --ep-luft-fg: color-mix(in srgb, var(--ad-blue-700) 70%, var(--ad-blue-900));
  --ep-luft-rand: color-mix(in srgb, var(--ad-blue) 24%, var(--bg-surface));
  --ep-voll-bg: color-mix(in srgb, var(--tint-green) 82%, var(--ad-green));
  --ep-voll-fg: color-mix(in srgb, var(--ad-green-900) 78%, black);
  --ep-voll-rand: color-mix(in srgb, var(--ad-green) 42%, var(--bg-surface));
  --ep-zuviel-bg: color-mix(in srgb, var(--tint-orange) 88%, var(--ad-orange));
  --ep-zuviel-fg: color-mix(in srgb, var(--ad-orange-900) 90%, black);
  --ep-zuviel-rand: color-mix(in srgb, var(--ad-orange) 70%, var(--ad-orange-700));
  --ep-schraffur: color-mix(in srgb, var(--text-3) 85%, var(--bg-surface));
  --ep-links: calc(20.77% + 1.2rem); /* Vorlage 278 px von 1252 px Innenbreite */
  position: relative; margin-bottom: .9333rem; padding: 0; background: var(--bg-surface);
  border: thin solid var(--border); border-radius: .8rem; overflow: visible;
  font-variant-numeric: tabular-nums;
}
.crm .ep-kopf { display: flex; align-items: center; gap: 1.0667rem; padding: 1.0667rem 1.3333rem; border-bottom: thin solid var(--border); }
.crm .ep-titel { margin: 0; font-size: var(--fs-section); font-weight: 600; color: var(--text-1); }
.crm .ep-sub { font-size: var(--fs-meta); color: var(--text-3); }
.crm .ep-schalter { margin-left: auto; display: flex; gap: .9333rem; align-items: center; }
.crm .ep-seg { display: inline-flex; border: thin solid var(--border-strong); border-radius: var(--r-md); overflow: hidden; }
.crm .ep-seg button {
  border: 0; background: transparent; padding: .4rem .8rem; font: 500 var(--fs-meta) var(--f-sans);
  color: var(--text-2); cursor: pointer;
}
.crm .ep-seg button.is-on { background: var(--tint-blue); color: var(--ad-blue); }
.crm .ep-seg button:focus-visible { outline: .13334rem solid var(--focus); outline-offset: -.13334rem; }
.crm .ep-chk { display: inline-flex; gap: .4rem; align-items: center; font-size: var(--fs-meta); color: var(--text-2); cursor: pointer; }
.crm .ep-chk input { accent-color: var(--ad-blue); }
.crm .ep-legende {
  display: flex; flex-wrap: wrap; gap: .5333rem 1.0667rem; align-items: center; padding: .6667rem 1.3333rem;
  border-bottom: thin solid var(--border); font-size: var(--fs-meta); color: var(--text-2);
}
.crm .ep-lg { display: inline-flex; gap: .4rem; align-items: center; }
.crm .ep-lg i { width: .9333rem; height: .9333rem; border-radius: var(--r-xs); display: inline-block; }
.crm .ep-lg i.is-luft { background: var(--ep-luft-bg); border: thin solid var(--ep-luft-rand); }
.crm .ep-lg i.is-voll { background: var(--ep-voll-bg); border: thin solid var(--ep-voll-rand); }
.crm .ep-lg i.is-zuviel { background: var(--ep-zuviel-bg); border: thin solid var(--ep-zuviel-rand); }
.crm .ep-lg i.is-vorm {
  background: repeating-linear-gradient(135deg, var(--ep-schraffur) 0 .1333rem, transparent .1333rem .3333rem);
  border: thin dashed var(--ep-schraffur);
}
.crm .ep-frage {
  margin-left: auto; border: 0; background: none; padding: 0; cursor: pointer;
  font: 500 var(--fs-meta) var(--f-sans); color: var(--ad-blue);
}
.crm .ep-frage:hover { text-decoration: underline; }
.crm .ep-frage:focus-visible { outline: .13334rem solid var(--focus); outline-offset: .06667rem; border-radius: var(--r-xs); }
.crm .ep-person { padding: .9333rem 1.3333rem 1.0667rem; border-bottom: thin solid var(--border); }
.crm .ep-person:last-child { border-bottom: 0; }
.crm .ep-zeile {
  display: grid; grid-template-columns: 20.77% 13.58% minmax(0, 1fr) 2.6667rem; gap: 1.2rem; align-items: center;
}
.crm .ep-wer { display: flex; gap: .6667rem; align-items: center; min-width: 0; }
.crm .ep-av { flex: 0 0 auto; display: grid; place-items: center; }
.crm .ep-wer-text { min-width: 0; }
.crm .ep-nm { font-size: var(--fs-ui); font-weight: 600; color: var(--text-1); overflow-wrap: anywhere; }
.crm .ep-rl { font-size: var(--fs-meta); color: var(--text-3); }
.crm .ep-k, .crm .ep-gk {
  /* Versalien kommen aus der Typo-Rolle .typo-abschnitt (fonts.css); hier nur Schnitt + Laufweite der Vorlage. */
  font-family: var(--f-cond); font-weight: 600; letter-spacing: .07em; color: var(--text-3);
}
.crm .ep-z { font-size: var(--fs-title); font-weight: 600; line-height: 1.2; color: var(--text-1); }
.crm .ep-t { font-size: var(--fs-meta); color: var(--text-3); }
.crm .ep-gesamt { display: flex; flex-wrap: wrap; gap: .6667rem; align-items: center; min-width: 0; }
.crm .ep-pille {
  display: inline-flex; gap: .5333rem; align-items: baseline; padding: .3333rem .8rem; border-radius: 999rem;
  font-size: var(--fs-ui); font-weight: 600; white-space: nowrap;
}
.crm .ep-pille small { font-size: var(--fs-meta); font-weight: 500; }
.crm .ep-pille.is-luft { background: var(--ep-luft-bg); color: var(--ep-luft-fg); }
.crm .ep-pille.is-voll { background: var(--ep-voll-bg); color: var(--ep-voll-fg); }
.crm .ep-pille.is-zuviel { background: var(--ep-zuviel-bg); color: var(--ep-zuviel-fg); border: thin solid var(--ep-zuviel-rand); }
.crm .ep-vm { font-size: var(--fs-meta); color: var(--text-2); }
.crm .ep-aktionen { display: flex; gap: .4rem; align-items: center; justify-content: flex-start; }
.crm .ep-knopf {
  width: 2.2667rem; height: 2.2667rem; border-radius: var(--r-md); border: thin solid var(--border);
  background: var(--bg-surface); display: grid; place-items: center; cursor: pointer; color: var(--text-2);
}
.crm .ep-knopf:hover { background: var(--bg-hover); color: var(--text-1); }
.crm .ep-knopf:focus-visible { outline: .13334rem solid var(--focus); outline-offset: .06667rem; }
.crm .ep-band { margin-left: var(--ep-links); }
.crm .ep-leiste, .crm .ep-achse {
  display: grid; grid-template-columns: repeat(var(--ep-n, 1), minmax(0, 1fr)); gap: .2667rem;
}
/* Wochen: dreistellige Werte bleiben lesbar — Mindestbreite, bei engen Fenstern scrollt das Band. */
.crm .ep-person.is-woche .ep-leiste, .crm .ep-person.is-woche .ep-achse { gap: .2rem; }
/* Wochen: Schraffur nur als schmaler Streifen oben, die (umgebrochene) Zahl bleibt frei. */
/* Wochen: Kasten fest 34 px (Vorlage); Schraffur liegt absolut oben, die zweizeilige Zahl passt mit Zeilenhöhe 1. */
.crm .ep-person.is-woche .ep-zelle { height: 2.2667rem; min-height: 0; padding: .3333rem 0 0; line-height: 1; letter-spacing: -.02em; }
.crm .ep-person.is-woche .ep-vmk { height: .2667rem; }
.crm .ep-leiste { margin-top: .8rem; }
.crm .ep-zelle {
  position: relative; min-height: 2.2667rem; padding: .1333rem; border-radius: var(--r-sm); display: grid; place-items: center;
  border: thin solid transparent; overflow: hidden; cursor: pointer; text-align: center;
  font: 600 var(--fs-meta) var(--f-sans); line-height: 1.15; font-variant-numeric: tabular-nums;
}
.crm .ep-zelle.is-luft { background: var(--ep-luft-bg); color: var(--ep-luft-fg); }
.crm .ep-zelle.is-voll { background: var(--ep-voll-bg); color: var(--ep-voll-fg); }
.crm .ep-zelle.is-zuviel { background: var(--ep-zuviel-bg); color: var(--ep-zuviel-fg); border-color: var(--ep-zuviel-rand); }
.crm .ep-zelle.is-leer { background: var(--bg-surface-2); color: var(--text-3); font-weight: 400; cursor: default; }
.crm .ep-zelle:focus-visible { outline: .13334rem solid var(--focus); outline-offset: .06667rem; }
.crm .ep-vmk {
  position: absolute; inset: 0 0 auto 0; height: .4667rem;
  background: repeating-linear-gradient(135deg, var(--ep-schraffur) 0 .1333rem, transparent .1333rem .3333rem);
}
.crm .ep-achse { margin-top: .2667rem; font-size: var(--fs-label); color: var(--text-3); text-align: center; }
.crm .ep-person.is-woche .ep-zelle, .crm .ep-person.is-woche .ep-achse { font-size: var(--fs-label); }
.crm .ep-hinweis { margin: .5333rem 0 0 var(--ep-links); font-size: var(--fs-meta); color: var(--text-2); }
.crm .ep-hinweis b { color: var(--ep-zuviel-fg); font-weight: 600; }
.crm .ep-status { margin: .5333rem 0 0 var(--ep-links); font-size: var(--fs-meta); color: var(--text-2); }
.crm .ep-status-block { margin: 0; padding: 1.0667rem 1.3333rem; font-size: var(--fs-meta); color: var(--text-2); }
.crm .ep-editor { margin: .9333rem 0 0 var(--ep-links); }
/* PR1.850 (Ticket 1212) — „Einsatz bearbeiten" nach Vorlage (entwurf.html ?v=editor, Bild 3).
   Maße 1:1 aus der Vorlage in rem (px ÷ 15, wie PR1.849). Täglich genutzt: keine Animation. */
.crm .ee {
  padding: 1.0667rem 1.2rem; background: var(--bg-surface-2); border: thin solid var(--border-strong);
  border-radius: var(--r-lg); color: var(--text-1); font-size: var(--fs-ui); font-variant-numeric: tabular-nums;
}
.crm .ee-grid {
  display: grid; grid-template-columns: minmax(0, 200fr) minmax(0, 220fr) minmax(0, 150fr) minmax(0, 150fr) minmax(0, 140fr);
  gap: 1.0667rem; align-items: start;
}
/* Opportunity ohne Tagessatz: dieselben Spaltenanteile, die fünfte Spalte bleibt frei. */
.crm .ee-grid.ohne-satz { grid-template-columns: minmax(0, 200fr) minmax(0, 220fr) minmax(0, 150fr) minmax(0, 150fr) minmax(0, 140fr); }
.crm .ee-f { display: flex; flex-direction: column; min-width: 0; }
.crm .ee-l { display: block; margin-bottom: .2667rem; font-size: var(--fs-label); font-weight: 400; color: var(--text-3); }
.crm .ee-feld {
  box-sizing: border-box; width: 100%; height: 2.4rem; padding: 0 .6667rem; border: thin solid var(--border-strong);
  border-radius: .4667rem; background: var(--bg-surface); color: var(--text-1); font: inherit; font-size: var(--fs-ui);
}
.crm .ee-f-satz .ee-feld { padding-right: .4rem; } /* „wie Opportunity" passt auch bei 1280 ganz */
.crm .ee-feld:focus-visible { outline: .13334rem solid var(--focus); outline-offset: .06667rem; }
.crm .ee-feld[aria-invalid="true"] { border-color: var(--danger, var(--ad-orange-700)); }
.crm .ee-umfang { display: flex; align-items: center; gap: .5333rem; white-space: nowrap; }
.crm .ee-umfang .ee-umfang-in { flex: 0 0 auto; width: 5.3333rem; text-align: right; font-size: var(--fs-title); font-weight: 600; }
.crm .ee-e { font-size: var(--fs-meta); color: var(--text-2); }
.crm .ee-bezug { margin-top: .2667rem; }
.crm .ee-mehr-rollen { display: flex; flex-direction: column; gap: .2667rem; max-width: 22rem; margin-top: .8rem; font-size: var(--fs-label); color: var(--text-3); }
.crm .ee-folge { margin: .4rem 0 0; font-size: var(--fs-meta); color: var(--text-2); }
.crm .ee-folge b { font-weight: 700; color: inherit; }
/* PR1.867 (#1231) — ruhiger Hinweis bei festen Personentagen (Info-Ton, kein Warn-Gelb, keine
   Bewegung): am Feld „Personentage" der Rolle und unter „Ergibt N PT" in Einsatz bearbeiten. */
.crm .role-fixed-pt-hint,
.crm .ee-feste-pt {
  display: flex; align-items: flex-start; gap: .4rem;
  margin: 0; font-size: var(--fs-meta); line-height: 1.4; color: var(--text-2);
}
.crm .ee-feste-pt { margin: .25rem 0 0; }
.crm .role-fixed-pt-hint[hidden] { display: none; }
.crm .role-fixed-pt-hint svg,
.crm .ee-feste-pt svg { flex: 0 0 auto; width: 1em; height: 1em; margin-top: .2em; }
.crm .ee-phasen { margin-top: 1.0667rem; }
.crm .ee-h { margin: 0 0 .4rem; font-size: var(--fs-meta); font-weight: 600; color: var(--text-1); }
.crm .ee-ph { display: flex; flex-wrap: wrap; gap: .6667rem; align-items: center; font-size: var(--fs-meta); color: var(--text-2); }
.crm .ee-link {
  padding: 0; border: 0; background: none; color: var(--ad-blue); font: inherit; font-size: var(--fs-meta); font-weight: 500; cursor: pointer;
}
.crm .ee-link:hover { text-decoration: underline; }
.crm .ee-link:focus-visible { outline: .13334rem solid var(--focus); outline-offset: .06667rem; border-radius: var(--r-xs); }
.crm .ee-liste { display: flex; flex-direction: column; gap: .4rem; margin: 0; padding: 0; list-style: none; }
.crm .ee-liste:not(:empty) { margin-top: .5333rem; }
.crm .ee-zeile { display: flex; flex-wrap: wrap; gap: .6667rem; align-items: center; font-size: var(--fs-meta); color: var(--text-2); }
.crm .ee-zeile .ee-ph-from { width: 10rem; }
.crm .ee-zeile .ee-ph-pct { width: 4.6667rem; text-align: right; }
.crm .ee-wie { margin-top: .9333rem; padding-top: .6667rem; border-top: thin solid var(--border); }
.crm .ee-wie summary { width: fit-content; color: var(--ad-blue); font-size: var(--fs-meta); font-weight: 500; cursor: pointer; }
.crm .ee-wie summary:focus-visible { outline: .13334rem solid var(--focus); outline-offset: .06667rem; border-radius: var(--r-xs); }
.crm .ee-schritte { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .6667rem; margin-top: .6667rem; }
.crm .ee-schritt { padding: .6667rem .8rem; background: var(--bg-surface); border: thin solid var(--border); border-radius: var(--r-md); }
/* Kastenkopf: Typo-Rolle Abschnittstitel (fonts.css .typo-abschnitt, kleine graue Versalien). */
.crm .ee-schritt-n { font-family: var(--f-cond); font-weight: 600; letter-spacing: .049rem; color: var(--text-3); } /* Laufweite der Vorlage: .07em bei 10,5 px */
.crm .ee-schritt-w { margin: .1333rem 0; font-size: var(--fs-section); font-weight: 600; color: var(--text-1); }
.crm .ee-schritt-x { font-size: var(--fs-label); color: var(--text-3); }
.crm .ee-fuss { display: flex; flex-wrap: wrap; gap: 1.2rem; align-items: center; margin-top: .9333rem; font-size: var(--fs-meta); color: var(--text-2); }
.crm .ee-chk { display: inline-flex; gap: .2667rem; align-items: center; cursor: pointer; }
.crm .ee-chk input { width: .8667rem; height: .8667rem; margin: .2rem .2rem .2rem .2667rem; accent-color: var(--ad-blue); } /* 13 px, Zeile 19 px wie die Vorlage */
.crm .ee-knoepfe { display: flex; gap: .5333rem; margin-left: auto; }
.crm .ee-knoepfe .btn-secondary { color: black; } /* Vorlage: Standard-Knopftext */
.crm.dark .ee-knoepfe .btn-secondary, html[data-theme="dark"] .crm .ee-knoepfe .btn-secondary { color: var(--text-1); }
.crm .ee-knoepfe .btn { height: 2.2667rem; padding: 0 .9333rem; font-size: var(--fs-meta); }
/* Rollenauswahl: das Gesicht des Auswahl-Bausteins sieht aus wie ein Feld der Vorlage. */
.crm .ee-f-rolle .cs { display: block; width: 100%; min-width: 0; max-width: none; height: 2.4rem; background: var(--bg-surface); border: thin solid var(--border-strong); border-radius: .4667rem; }
.crm .ee-f-rolle .cs-control, .crm .ee-f-rolle .cs-field { height: 100%; }
.crm .ee-f-rolle .cs-field { padding: 0 1.6rem 0 .6667rem; border: 0; background: transparent; border-radius: .4667rem; font-size: var(--fs-ui); } /* Name ganz wie das Auswahlfeld der Vorlage */
.crm .ee-f-rolle .cs-chevron { right: .6667rem; }
/* Der Löschen-Knopf ist in der kompakten Form ausgeblendet — sein Platz (60 px) gehört dem Namen. */
.crm .ee-f-rolle .cs-control:has(.cs-clear:not([hidden])) .cs-field { padding-right: 1.6rem; }
.crm .ee-f-rolle .cs-field:focus { outline: .13334rem solid var(--focus); outline-offset: .06667rem; }
/* Schmaler Bereich (≈ 1280): Spaltenanteile bleiben wie die Vorlage; „≈ N Tage/Woche" bleibt in
   der Zeile, die Abstände in der Umfang-Zeile werden enger, damit nichts ins Von-Feld läuft. */
.crm .ee { container-type: inline-size; }
@container (max-width: 57rem) {
  .crm .ee-umfang { gap: .2667rem; }
}
@container (max-width: 40rem) {
  .crm .ee-grid, .crm .ee-grid.ohne-satz { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .crm .ee-schritte { grid-template-columns: minmax(0, 1fr); }
}
.crm .ep-person .opp-team-vermerk { margin: .4rem 0 0 var(--ep-links); }
/* Opportunity: Karte unter dem Spaltenraster, gleiche Seitenränder wie .record-grid (22 px). */
.crm .opp-ep-voll { margin: 0 1.4667rem 1.4667rem; }
.crm .ep-pop {
  position: absolute; z-index: 20; left: var(--ep-x, 0); top: var(--ep-y, 0); width: min(22rem, 90vw);
  padding: .9333rem 1.0667rem; background: var(--bg-surface); border: thin solid var(--border-strong); border-radius: var(--r-lg);
  box-shadow: var(--shadow-3); font-size: var(--fs-meta); color: var(--text-1);
}
.crm .ep-pop-titel { margin: 0 0 .5333rem; font-size: var(--fs-ui); font-weight: 600; }
.crm .ep-pop-r { display: flex; justify-content: space-between; gap: .8rem; padding: .2rem 0; }
.crm .ep-pop-r span:first-child { color: var(--text-2); }
.crm .ep-pop-r span:last-child { flex: 0 0 auto; white-space: nowrap; }
.crm .ep-pop-r.is-vorgemerkt span { color: var(--text-3); font-style: italic; }
.crm .ep-pop-r.is-summe { margin-top: .4rem; padding-top: .4rem; border-top: thin solid var(--border); font-weight: 600; }
.crm .ep-pop-r.is-summe span:first-child { color: var(--text-1); }
.crm .ep-pop-bar { position: relative; height: .5333rem; margin: .6667rem 0 .2667rem; border-radius: var(--r-xs); background: var(--bg-surface-2); }
.crm .ep-pop-bar i { position: absolute; inset: 0 auto 0 0; width: var(--breite, 0); border-radius: var(--r-xs); }
.crm .ep-pop-bar i.is-luft { background: color-mix(in srgb, var(--ad-blue) 50%, var(--bg-surface)); }
.crm .ep-pop-bar i.is-voll { background: color-mix(in srgb, var(--ad-green) 80%, var(--ad-green-700)); }
.crm .ep-pop-bar i.is-zuviel { background: var(--ep-zuviel-rand); }
.crm .ep-pop-bar b { position: absolute; top: -.2rem; bottom: -.2rem; left: var(--pos, 66.67%); width: .1333rem; background: var(--text-1); }
.crm .ep-pop-fuss { margin: 0; font-size: var(--fs-label); color: var(--text-3); }
.crm .ep-erkl {
  position: fixed; inset: 0; margin: auto; height: fit-content;
  width: min(37.3333rem, 92vw); padding: 1.4667rem 1.6rem; border: 0; border-radius: .8rem;
  background: var(--bg-surface); color: var(--text-1); box-shadow: var(--shadow-3);
}
.crm .ep-erkl::backdrop { background: color-mix(in srgb, var(--text-1) 35%, transparent); }
.crm .ep-erkl h3 { margin: 0 0 .8rem; font-size: var(--fs-title); font-weight: 600; }
.crm .ep-erkl ul { margin: 0 0 1rem; padding-left: 1.25rem; }
.crm .ep-erkl li { margin: .4rem 0; color: var(--text-2); }
.crm .ep-erkl b { color: var(--text-1); }
/* Schmale Karte (unter ~56rem Kartenbreite): Leiste unter die Kopfzeile statt eingerückt. */
.crm .ep-karte { container-type: inline-size; }
@container (max-width: 56rem) {
  .crm .ep-person { --ep-links: 0rem; }
  .crm .ep-zeile { grid-template-columns: minmax(0, 1fr) 2.6667rem; row-gap: .5rem; }
  .crm .ep-hier, .crm .ep-gesamt { grid-column: 1 / -1; }
}
.crm .einsatz-rollen-stand { margin: 0 0 .5rem; font-size: var(--fs-ui); color: var(--text-2); }
.crm .einsatz-rolle-offen {
  display: flex; align-items: center; gap: .75rem; padding: .5rem 0; border-top: thin solid var(--border);
  font-size: var(--fs-ui); color: var(--text-2);
}
.crm .einsatz-rolle-besetzen {
  padding: .25rem .625rem; border-radius: 999rem; border: thin dashed var(--border-strong);
  background: transparent; color: var(--text-1); font: inherit; cursor: pointer;
}
.crm .einsatz-rolle-besetzen:hover { border-color: var(--ad-blue); }
.crm .einsatz-rolle-besetzen:focus-visible { outline: .125rem solid var(--focus); outline-offset: .125rem; }
.crm .einsatz-legende { display: flex; flex-wrap: wrap; gap: .25rem 1rem; margin: .75rem 0 0; padding: 0; list-style: none; font-size: var(--fs-meta); color: var(--text-2); }
.crm .einsatz-legende-punkt { display: inline-flex; align-items: center; gap: .375rem; }
.crm .einsatz-legende-punkt::before { content: ""; width: .5rem; height: .5rem; border-radius: 50%; background: var(--bg-surface-2); }
.crm .einsatz-legende-punkt.is-gering::before { background: var(--ad-turq-700); }
.crm .einsatz-legende-punkt.is-normal::before { background: var(--ad-blue); }
.crm .einsatz-legende-punkt.is-hoch::before { background: var(--ad-orange); }
.crm .einsatz-legende-punkt.is-ueber::before { background: var(--ad-red-300); }
.crm .einsatz-legende-punkt.is-frei::before { border: thin solid var(--border-strong); }
.crm .einsatz-hinweise { display: flex; flex-wrap: wrap; gap: .25rem .375rem; margin: .25rem 0 0; padding: 0; list-style: none; }
.crm .einsatz-hinweis {
  padding: .125rem .5rem; border-radius: 999rem; font-size: var(--fs-label); color: var(--text-1);
  border: thin solid var(--ad-orange-700); background: color-mix(in srgb, var(--ad-orange) 12%, var(--bg-surface));
}
.crm .einsatz-hinweis.is-konflikt { border-color: var(--ad-red-700); background: color-mix(in srgb, var(--ad-red) 10%, var(--bg-surface)); }

/* PR1.416 (#651) — Zeichen (components/icons.js, Groessen-Token aus style.css). Das Zeichen
   erbt die Textfarbe des Elternteils; Hover/aktiv/Fokus laufen damit ueber dessen Regeln.
   Tagliche Navigation: bewusst ohne Animation. */
.crm .sb-item .sb-ic .ic,
.crm .po-ic .ic,
.crm .sb-search .ic,
.crm .tb-search .ic,
.crm .tb-bell .ic,
.crm .tb-nav-toggle .ic,
.crm .sb-cog .ic { display: block; vertical-align: baseline; }
.crm .po-ic { display: inline-flex; align-items: center; justify-content: center; }
.crm .page-head .actions .btn { display: inline-flex; align-items: center; gap: .375rem; }
.crm .btn .ic { vertical-align: -0.2em; }

/* PR1.416 Nachzug — Opportunities/Dashboard */
.crm .opp-q-ico .ic { width: 1em; height: 1em; }

/* PR1.416 Nachzug — Mitarbeiter/Kapazität/Shell */
.crm kbd .ic,
.crm .emp-sort-caret .ic,
.crm .nkv-sym .ic,
.crm .crm-ep-kw-label .ic { width: 1em; height: 1em; }
.crm .tb-search kbd,
.crm .sb-search kbd { white-space: nowrap; }
.crm .tb-search kbd .ic,
.crm .sb-search kbd .ic { display: inline-block; vertical-align: -0.12em; }

/* ============== PR1.424 (#661) — Listen-Optik Opportunities, Projekte, Kunden ==============
   Kompass-Bilder 2_Opp-Liste / 3_Projektliste-Was-fehlt / 4_Kundenliste (abgenommen 21.10.2026).
   Feste Zeilenhoehe, je Zelle eine Zeile, leer = blasser Strich, Haarlinie statt Schatten.
   Taeglich genutzte Listen: keine Bewegung, nur Farbwechsel bei Hover/Fokus. Masse in rem
   (raw-px-Ratchet RD1.10). */
.crm .tbl.tbl-clickable tbody tr:not(.grp-row) > td { height: calc(var(--s-10) + var(--s-4)); padding-top: 0; padding-bottom: 0; white-space: nowrap; }
/* PR1.677 Nachzug 2 (#976) — Vorschau-Zeilen: die Klick-Zeilen-Regel oben nimmt das Innenpolster (padding 0) → Titel/Verknüpfung klebten an der Kante */
.crm .tbl.tbl-clickable tbody tr.imp-zeile > td { height: auto; padding-top: 0.625rem; padding-bottom: 0.625rem; }
.crm .tbl.tbl-clickable thead th { position: sticky; top: 0; z-index: 3; }
.crm .tbl.tbl-clickable th.is-first,
.crm .tbl.tbl-clickable td.is-first {
  position: sticky; left: 0; z-index: 2;
  box-shadow: inset -0.0625rem 0 0 0 var(--border);
}
.crm .tbl.tbl-clickable thead th.is-first { z-index: 4; }
.crm .tbl .num, .crm .tbl td.num, .crm .tbl th.num { text-align: right; }
.crm .list-empty { color: var(--text-3); font-weight: 400; }

/* Erste Spalte: Logo 28px + Name fett + Meta-Zeile klein. */
.crm .list-entity { display: flex; align-items: center; gap: var(--s-3); min-width: 0; max-width: 22rem; }
.crm .list-logo { flex: none; display: inline-flex; }
.crm .list-logo .acc-logo { border-radius: var(--r-sm); }
.crm .list-text { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
.crm .list-line { display: flex; align-items: center; gap: var(--s-2); min-width: 0; }
.crm .list-name { font-weight: 600; color: var(--text-1); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.crm .list-meta { font-size: var(--fs-meta); color: var(--text-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.crm td.is-first { overflow: visible; }

/* Lueckenzahl am Namen (ersetzt das Etikett „unvollständig" in der Tabellenzeile). */
.crm .gap-count {
  flex: none; position: relative;
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 1.25rem; height: 1.25rem; padding: 0 0.3rem; border-radius: 0.625rem;
  border: 0.0625rem solid color-mix(in srgb, var(--ad-orange-700) 35%, transparent);
  background: var(--tint-warn); color: var(--ad-orange-900);
  font: inherit; font-size: var(--fs-meta); font-weight: 500; font-variant-numeric: tabular-nums; line-height: 1;
  cursor: pointer;
}
.crm.dark .gap-count, html[data-theme="dark"] .crm .gap-count { color: var(--ad-orange); }
.crm .gap-count:hover { border-color: currentColor; }
.crm .gap-count:focus-visible { outline: 0.125rem solid var(--focus); outline-offset: 0.125rem; }
.crm .gap-count[data-tip]:hover::after,
.crm .gap-count[data-tip]:focus-visible::after {
  content: attr(data-tip); position: absolute; left: 0; top: calc(100% + var(--s-1)); z-index: 30;
  padding: var(--s-1) var(--s-2); border-radius: var(--r-sm); white-space: nowrap; font-weight: 500;
  background: var(--bg-card); color: var(--text-1); border: 0.0625rem solid var(--border); box-shadow: var(--shadow-2);
}

/* Staffing als Kaestchen je Platz: gefuellt = besetzt, schraffiert = vorgemerkt,
   gestrichelt = offen. Zahl rot 0, orange teilweise, gruen voll. */
.crm .staff-slots { display: inline-flex; align-items: center; gap: var(--s-2); font-variant-numeric: tabular-nums; font-size: var(--fs-meta); font-weight: 500; white-space: nowrap; }
.crm .staff-slot-row { display: inline-flex; align-items: center; gap: 0.25rem; }
.crm .staff-slot { display: inline-block; width: 1.125rem; height: 1.125rem; border-radius: 0.3125rem; box-sizing: border-box; border: 0.09375rem dashed var(--text-3); background: var(--bg-surface); }
.crm .staff-slot-filled { border: 0.09375rem solid var(--ad-green-700); background: var(--ad-green-700); }
.crm .staff-slot-reserved { border: 0.09375rem solid var(--ad-blue-300); background: repeating-linear-gradient(135deg, var(--ad-blue-300) 0 0.125rem, var(--bg-surface) 0.125rem 0.375rem); }
.crm .staff-slot-more { color: var(--text-3); font-weight: 600; }
.crm .staff-slot-num small { margin-left: 0.1875rem; color: var(--text-3); font-size: var(--fs-label); font-weight: 500; }
.crm .staff-slots-bad .staff-slot-num { color: var(--ad-red-700); }
.crm .staff-slots-mid .staff-slot-num { color: var(--ad-orange-900); }
.crm .staff-slots-ok .staff-slot-num { color: var(--ad-green-900); }
.crm.dark .staff-slots-ok .staff-slot-num, html[data-theme="dark"] .crm .staff-slots-ok .staff-slot-num { color: var(--ad-green); }
.crm.dark .staff-slots-bad .staff-slot-num, html[data-theme="dark"] .crm .staff-slots-bad .staff-slot-num { color: var(--ad-red-300); }
.crm.dark .staff-slots-mid .staff-slot-num, html[data-theme="dark"] .crm .staff-slots-mid .staff-slot-num { color: var(--ad-orange); }

/* Gruppenzeile „LEAD 30" (Schalter „Nach Status gruppieren", Standard aus). */
.crm .tbl tbody tr.grp-row th {
  text-align: left; padding: var(--s-2) 0.875rem;
  font-size: var(--fs-label); font-weight: 500;
  color: var(--text-2); background: var(--bg-surface-2);
  border-bottom: 0.0625rem solid var(--border); border-left: 0.0625rem solid var(--border); border-right: 0.0625rem solid var(--border);
}
.crm .chip-count { font-variant-numeric: tabular-nums; font-weight: 500; color: var(--text-3); margin-left: 0.15rem; }
.crm .fpill[aria-pressed="true"] .chip-count, .crm .seg .on .chip-count { color: inherit; opacity: .85; }

/* Fusszeile unter der Tabelle: Anzahl links, Legende rechts (seit PR1.532 nur noch Kundenliste). */
.crm .list-foot { display: flex; justify-content: space-between; gap: var(--s-4); padding: var(--s-2) var(--s-1); font-size: var(--fs-meta); color: var(--text-3); }

/* Kundenliste: keine dauerhafte Bewegungs-Farbkante mehr, nur Referenzkunden (User-Entscheid 22.10.2026). */
.crm .tbl-cust tbody tr.mv-lead-active > td:first-child,
.crm .tbl-cust tbody tr.mv-lead-quiet > td:first-child,
.crm .tbl-cust tbody tr.mv-lead-dormant > td:first-child { border-left-color: transparent; }
.crm .tbl-cust tbody tr.is-reference > td:first-child { border-left-color: var(--focus); }
/* Gruppenschalter: der Zustand haengt an aria-pressed, sichtbar als ruhige Fuellung. */
.crm #crm-opp-group-status[aria-pressed="true"] { background: var(--tint-blue); border-color: var(--focus); color: var(--text-1); }
/* Letzte Zeilen: Tooltip nach oben, sonst schneidet die Tabellenhuelle ihn ab. */
.crm .tbl tbody tr:nth-last-child(-n+2) .gap-count[data-tip]::after { top: auto; bottom: calc(100% + var(--s-1)); }

/* ── PR1.427 (#664) — Admin · KI-Modelle (Kompass-Bild 7) ─────────────────
   Fuenf Gruppenkarten + Leitplanken. Raster ohne Breakpoint: auto-fill mit
   Mindestbreite, schmal faellt es von selbst auf eine Spalte. Keine Animation
   (seltenes Verwaltungswerkzeug). Gruen nur fuer Zeichen, nie als Textfarbe. */
.crm .ki-einleitung { margin: 0 0 var(--s-2); color: var(--text-2); font-size: var(--fs-body); max-width: 70rem; }
.crm .ki-kosten-zeile { margin: 0 0 var(--s-4); color: var(--text-3); font-size: var(--fs-ui); }
.crm .ki-raster { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 22rem), 1fr)); gap: var(--s-4); }
.crm .ki-gruppe {
  display: flex; flex-direction: column; gap: var(--s-3);
  padding: var(--s-4) var(--s-5);
  border: thin solid var(--border); border-radius: var(--r-xl);
  background: var(--bg-surface);
}
.crm .ki-gruppe-kopf { display: flex; gap: var(--s-3); align-items: flex-start; }
.crm .ki-gruppe-icon {
  display: inline-flex; align-items: center; justify-content: center; flex: none;
  width: 2.75rem; height: 2.75rem; border-radius: var(--r-lg);
  background: var(--tint-blue); color: var(--ad-blue-700);
}
.crm .ki-gruppe-icon--bewerten { background: color-mix(in srgb, var(--ad-violet) 14%, transparent); color: var(--ad-violet); }
.crm .ki-gruppe-icon--einordnen { background: var(--tint-green); color: var(--ad-green-700); }
.crm .ki-gruppe-icon--recherche { background: var(--tint-orange); color: var(--ad-orange-700); }
.crm .ki-gruppe-icon--antworten { background: var(--tint-warn); color: var(--ad-orange-900); }
.crm .ki-gruppe-icon--leitplanken { background: var(--bg-surface-2); color: var(--text-1); }
.crm .ki-gruppe-titel { margin: 0; font-size: var(--fs-body); font-weight: 500; color: var(--text-1); }
.crm .ki-gruppe-text { margin: var(--s-1) 0 0; color: var(--text-2); font-size: var(--fs-ui); }
.crm .ki-gruppe-modell {
  display: flex; gap: var(--s-3); align-items: center; justify-content: space-between;
  padding: var(--s-3) var(--s-4); border-radius: var(--r-md); background: var(--bg-surface-2);
}
.crm .ki-gruppe-modellname { font-weight: 600; color: var(--text-1); }
.crm .ki-gruppe-meta { margin-top: var(--s-1); color: var(--text-2); font-size: var(--fs-meta); }
.crm .ki-chip {
  display: inline-flex; align-items: center; gap: var(--s-1); flex: none;
  padding: var(--s-1) var(--s-3); border-radius: var(--r-lg);
  background: var(--bg-surface-3); color: var(--text-1); font-size: var(--fs-meta); font-weight: 500;
}
.crm .ki-chip--auto { background: var(--tint-green); }
.crm .ki-chip--auto .ic { color: var(--ad-green-700); }
.crm .ki-chip--bisher { background: transparent; border: thin dashed var(--border-strong); color: var(--text-2); }
.crm .ki-stufen { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-2); }
.crm .ki-stufe {
  display: flex; flex-direction: column; align-items: center; gap: var(--s-1);
  padding: var(--s-2) var(--s-1); font: inherit; cursor: pointer;
  border: thin solid var(--border-strong); border-radius: var(--r-md);
  background: var(--bg-surface); color: var(--text-1);
}
.crm .ki-stufe:hover:not(:disabled) { background: var(--bg-hover); }
.crm .ki-stufe.ist-aktiv { border-color: var(--primary); background: var(--tint-blue); box-shadow: inset 0 0 0 0.0625rem var(--primary); }
.crm .ki-stufe:disabled { cursor: not-allowed; opacity: .6; }
.crm .ki-stufe:focus-visible,
.crm .ki-modelle .btn:focus-visible,
.crm .ki-dialog .btn:focus-visible,
.crm .ki-modelle input:focus-visible,
.crm .ki-dialog select:focus-visible { outline: .125rem solid var(--focus); outline-offset: .125rem; }
.crm .ki-stufe-name { font-size: var(--fs-body); font-weight: 500; }
.crm .ki-stufe-familie { font-size: var(--fs-meta); color: var(--text-2); }
.crm .ki-optionen { display: flex; flex-wrap: wrap; gap: var(--s-2); align-items: center; }
.crm .ki-option { display: inline-flex; align-items: center; gap: var(--s-2); font-size: var(--fs-ui); color: var(--text-1); }
.crm .ki-modelle .btn .ic { margin-right: var(--s-1); vertical-align: -.125em; }
.crm .ki-bestaetigung {
  padding: var(--s-3) var(--s-4); border-radius: var(--r-md);
  background: var(--tint-blue); border-left: .1875rem solid var(--primary);
}
.crm .ki-bestaetigung p { margin: 0 0 var(--s-2); font-size: var(--fs-ui); color: var(--text-1); }
.crm .ki-bestaetigung-knoepfe { display: flex; gap: var(--s-2); }
.crm .ki-rueckweg .btn { padding-left: 0; }
.crm .ki-gruppe-aufgaben { margin: 0; color: var(--text-2); font-size: var(--fs-ui); }
.crm .ki-gruppe-aufgaben strong { color: var(--text-1); }
.crm .ki-gruppe-fuss {
  display: flex; align-items: center; justify-content: space-between; margin-top: auto;
  padding-top: var(--s-3); border-top: thin solid var(--border); color: var(--text-2); font-size: var(--fs-ui);
}
.crm .ki-leitplanken { border-style: dashed; background: transparent; }
.crm .ki-leitplanken-liste { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--s-2); }
.crm .ki-leitplanken-liste li { display: flex; gap: var(--s-2); align-items: flex-start; font-size: var(--fs-ui); color: var(--text-1); }
.crm .ki-fussnote { margin: var(--s-4) 0 0; color: var(--text-3); font-size: var(--fs-meta); }
.crm .ki-zustand {
  display: flex; gap: var(--s-2); align-items: center; flex-wrap: wrap;
  margin: 0 0 var(--s-4); padding: var(--s-3) var(--s-4); border-radius: var(--r-md);
  background: var(--bg-surface-2); color: var(--text-1); font-size: var(--fs-ui);
}
.crm .ki-zustand--fehler { background: var(--tint-warn); }
.crm .ki-gruppe--laedt { min-height: 18rem; }
.crm .ki-platzhalter { border-radius: var(--r-md); background: var(--bg-surface-2); }
.crm .ki-platzhalter--kopf { height: 2.75rem; width: 70%; }
.crm .ki-platzhalter--box { height: 4rem; }
.crm .ki-platzhalter--stufen { height: 3rem; }
.crm .ki-dialog {
  margin: auto; width: min(52rem, 92vw); max-height: 85vh; overflow-y: auto; padding: var(--s-5) var(--s-6);
  border: thin solid var(--border); border-radius: var(--r-xl);
  background: var(--bg-surface); color: var(--text-1); box-shadow: var(--shadow-3); font-family: var(--f-sans);
}
.crm .ki-dialog::backdrop { background: rgba(14, 23, 38, 0.55); }
.crm .ki-dialog-kopf { display: flex; justify-content: space-between; align-items: center; gap: var(--s-3); margin-bottom: var(--s-3); }
.crm .ki-dialog-titel { margin: 0; font-size: var(--fs-body); font-weight: 500; }
.crm .ki-dialog-unter { margin: var(--s-5) 0 var(--s-2); font-size: var(--fs-body); font-weight: 500; }
.crm .ki-dialog-tabelle { overflow-x: auto; }
.crm .ki-dialog select { font: inherit; font-size: var(--fs-ui); padding: var(--s-1) var(--s-2); border: thin solid var(--border-strong); border-radius: var(--r-sm); background: var(--bg-surface); color: var(--text-1); }
.crm .ki-klein { color: var(--text-2); font-size: var(--fs-meta); }
.crm .ki-marke { margin-left: var(--s-1); padding: 0 var(--s-2); border-radius: var(--r-sm); background: var(--tint-warn); font-size: var(--fs-meta); }
.crm .ki-protokoll { margin: 0; padding-left: var(--s-5); color: var(--text-2); font-size: var(--fs-ui); display: flex; flex-direction: column; gap: var(--s-1); }

/* ── PR1.428 (#665) — Neue KI-Modelle: Banner, Slot, Freigabe-Dialog (Kompass-Bild 8) ──
   Gruen ist im Redesign kein Text-Token: fuer Ziffern eine eigene Stufe je Theme
   (--ad-green-900 hell, --ad-green dunkel), ebenso Orange fuer „schlechter".
   Keine Animation (seltenes Verwaltungswerkzeug); Ziffern tabellarisch. */
.crm .ki-modelle, .crm .ki-freigabe {
  /* Native Wahlknoepfe/Haekchen folgen dem Theme der .crm-Flaeche, nicht dem der Seite —
     sonst zeichnet ein dunkles Seiten-Schema den ungewaehlten Knopf als gefuellten Punkt. */
  color-scheme: light;
  --ki-gut: var(--ad-green-900);
  --ki-schlecht: var(--ad-orange-900);
  --ki-blau-text: var(--ad-blue-700);
}
.crm.dark .ki-modelle, .crm.dark .ki-freigabe,
html[data-theme="dark"] .crm .ki-modelle, html[data-theme="dark"] .crm .ki-freigabe {
  color-scheme: dark;
  --ki-gut: var(--ad-green);
  --ki-schlecht: var(--ad-orange);
  --ki-blau-text: var(--ad-blue-300);
}
.crm .ki-banner {
  display: flex; flex-wrap: wrap; gap: var(--s-3) var(--s-4); align-items: center;
  margin: 0 0 var(--s-4); padding: var(--s-4) var(--s-5);
  border: thin solid var(--border-strong); border-radius: var(--r-xl); background: var(--tint-blue);
}
.crm .ki-banner-icon {
  display: inline-flex; align-items: center; justify-content: center; flex: none;
  width: 2.75rem; height: 2.75rem; border-radius: var(--r-lg); background: var(--ad-blue); color: var(--text-inv);
}
.crm .ki-banner-text { flex: 1 1 18rem; min-width: 0; }
.crm .ki-banner-titel { margin: 0; font-weight: 600; color: var(--text-1); }
.crm .ki-banner-unter { margin: var(--s-1) 0 0; color: var(--text-2); font-size: var(--fs-ui); }
.crm .ki-slot {
  display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-3); align-items: center;
  padding: var(--s-3) var(--s-4); border-radius: var(--r-md);
  background: var(--tint-blue); color: var(--text-1); font-size: var(--fs-ui);
}
.crm .ki-slot strong { color: var(--ki-blau-text); }
.crm .ki-slot--fehler, .crm .ki-slot--vorsicht { background: var(--tint-warn); }
.crm .ki-slot--laeuft { background: var(--bg-surface-2); color: var(--text-2); }
.crm .ki-slot-text { flex: 1 1 12rem; min-width: 0; }
.crm .ki-slot-zahlen { display: inline-flex; gap: var(--s-2); align-items: baseline; margin-left: var(--s-1); color: var(--text-2); }
.crm .ki-zahl { font-variant-numeric: tabular-nums; font-weight: 600; color: var(--text-1); }
.crm .ki-zahl--gut { color: var(--ki-gut); }
.crm .ki-zahl--schlecht { color: var(--ki-schlecht); }
.crm .ki-zahl--still { color: var(--text-3); }
.crm .ki-freigabe {
  margin: auto; padding: 0; width: min(46rem, 92vw); max-height: 88vh; overflow-y: auto;
  border: thin solid var(--border); border-radius: var(--r-xl);
  background: var(--bg-surface); color: var(--text-1); box-shadow: var(--shadow-3); font-family: var(--f-sans);
}
.crm .ki-freigabe::backdrop { background: rgba(14, 23, 38, 0.55); }
.crm .ki-fz-kopf { display: flex; gap: var(--s-3); align-items: flex-start; padding: var(--s-5) var(--s-6); border-bottom: thin solid var(--border); }
.crm .ki-fz-kopf > div { flex: 1 1 auto; min-width: 0; }
.crm .ki-fz-unter { margin: var(--s-1) 0 0; color: var(--text-2); font-size: var(--fs-ui); }
.crm .ki-fz-rumpf { display: flex; flex-direction: column; gap: var(--s-4); padding: var(--s-5) var(--s-6); }
.crm .ki-fz-vergleich { display: grid; grid-template-columns: 1fr auto 1fr; gap: var(--s-3); align-items: center; }
.crm .ki-fz-karte { padding: var(--s-3) var(--s-4); border: thin solid var(--border-strong); border-radius: var(--r-lg); }
.crm .ki-fz-karte--neu { border-color: var(--ad-blue); background: var(--tint-blue); }
.crm .ki-fz-karte p { margin: 0; }
.crm .ki-fz-marke { font-family: var(--f-cond); font-size: var(--fs-meta); font-weight: 500; color: var(--text-2); }
.crm .ki-fz-karte--neu .ki-fz-marke { color: var(--ki-blau-text); }
.crm .ki-fz-modell { margin-top: var(--s-1); font-size: var(--fs-section); font-weight: 600; }
.crm .ki-fz-seit { margin-top: var(--s-1); color: var(--text-2); font-size: var(--fs-ui); }
.crm .ki-fz-pfeil { display: inline-flex; color: var(--text-2); }
.crm .ki-fz-tabelle { width: 100%; border-collapse: collapse; font-size: var(--fs-body); }
.crm .ki-fz-tabelle th,
.crm .ki-fz-tabelle td { padding: var(--s-3); border-bottom: thin solid var(--border); text-align: left; font-weight: 400; vertical-align: top; }
.crm .ki-fz-tabelle thead th { font-family: var(--f-cond); font-size: var(--fs-meta); font-weight: 500; color: var(--text-2); }
.crm .ki-fz-tabelle tbody th { font-family: var(--f-sans); text-transform: none; letter-spacing: normal; font-size: inherit; color: var(--text-1); }
.crm .ki-freigabe input { accent-color: var(--ad-blue); }
.crm .ki-fz-tabelle .ki-num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.crm .ki-fz-tabelle .ic { vertical-align: -.125em; }
.crm .ki-fz-schlechter > * { background: var(--tint-warn); }
.crm .ki-fz-lassen { display: flex; gap: var(--s-2); align-items: center; margin-top: var(--s-1); font-size: var(--fs-meta); color: var(--text-1); }
.crm .ki-fz-np th, .crm .ki-fz-np td, .crm .ki-fz-rest th, .crm .ki-fz-rest td { color: var(--text-3); }
.crm .ki-empfehlung { display: flex; gap: var(--s-3); align-items: center; padding: var(--s-3) var(--s-4); border-radius: var(--r-lg); }
.crm .ki-empfehlung p { margin: 0; font-size: var(--fs-body); color: var(--text-1); }
.crm .ki-empfehlung--ok { background: var(--tint-green); }
.crm .ki-empfehlung--ok .ki-empfehlung-titel { color: var(--ki-gut); }
.crm .ki-empfehlung--warn { background: var(--tint-warn); }
.crm .ki-empfehlung--warn .ki-empfehlung-titel { color: var(--ki-schlecht); }
.crm .ki-empfehlung-titel { font-weight: 600; }
.crm .ki-fz-modus { display: flex; flex-direction: column; gap: var(--s-2); margin: 0; padding: 0; border: 0; }
.crm .ki-fz-option {
  display: flex; gap: var(--s-3); align-items: flex-start; padding: var(--s-3) var(--s-4); cursor: pointer;
  border: thin solid var(--border-strong); border-radius: var(--r-lg);
}
.crm .ki-fz-option.ist-aktiv { border-color: var(--ad-blue); background: var(--tint-blue); }
.crm .ki-fz-option input { margin-top: var(--s-1); }
.crm .ki-fz-option-titel { display: block; font-size: var(--fs-body); }
.crm .ki-fz-option-text { display: block; color: var(--text-2); font-size: var(--fs-meta); }
.crm .ki-preis { display: flex; gap: var(--s-3); align-items: flex-start; padding: var(--s-3) var(--s-4); border-radius: var(--r-lg); background: var(--tint-warn); }
.crm .ki-preis p { margin: 0; }
.crm .ki-preis-titel { font-weight: 500; font-size: var(--fs-body); color: var(--ki-schlecht); }
.crm .ki-preis-ok { display: flex; gap: var(--s-2); align-items: flex-start; margin-top: var(--s-2); font-size: var(--fs-ui); color: var(--text-1); }
.crm .ki-fz-liste { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: var(--s-2); }
.crm .ki-fz-liste li { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--s-2); padding: var(--s-3) var(--s-4); border-radius: var(--r-md); background: var(--bg-surface-2); font-size: var(--fs-body); }
.crm .ki-fz-fuss { display: flex; justify-content: flex-end; gap: var(--s-2); padding: var(--s-4) var(--s-6); border-top: thin solid var(--border); background: var(--bg-surface-2); }
.crm .ki-freigabe .btn:disabled { opacity: .5; cursor: not-allowed; }
.crm .ki-freigabe .btn:focus-visible,
.crm .ki-freigabe input:focus-visible { outline: .125rem solid var(--focus); outline-offset: .125rem; }

/* ─────────────────────────────────────────
   PR1.425 (#662) — Beschreibung gegliedert (description-view.js, ein Markup fuer beide
   Shells; Legacy-Gegenstueck in style.css). Kompass `5_Beschreibung.png`: Blick-Kasten,
   Abschnitte mit Versal-Kopf, Kaertchen, Originaltext eingeklappt. Keine Bewegung —
   die Seite wird mehrmals taeglich geoeffnet. Nur Tokens (Konvention 21).
   ───────────────────────────────────────── */
.crm .desc-structured {
  --desc-accent: var(--ad-blue-700);
  display: flex; flex-direction: column; gap: var(--s-3);
  font-size: var(--fs-body); line-height: 1.6; color: var(--text-1);
}
.crm.dark .desc-structured, html[data-theme="dark"] .crm .desc-structured { --desc-accent: var(--ad-blue-300); }
.crm .desc-glance { padding: var(--s-3); border: .0625rem solid var(--border); border-radius: var(--r-md); background: var(--tint-blue); }
.crm .desc-glance-h, .crm .desc-sec-h {
  display: flex; align-items: center; gap: var(--s-2); margin: 0 0 var(--s-2);
  font-size: var(--fs-meta); font-weight: 500;
}
.crm .desc-glance-h { color: var(--desc-accent); }
.crm .desc-sec-h { color: var(--text-2); }
.crm .desc-glance ul, .crm .desc-items { margin: 0; padding-left: 1.1rem; }
.crm .desc-glance li + li, .crm .desc-items li + li { margin-top: var(--s-1); }
.crm .desc-items li::marker { color: var(--desc-accent); }
.crm .desc-sec { padding-top: var(--s-3); border-top: .0625rem solid var(--border); }
.crm .desc-sec-text { margin: 0; max-width: 75ch; }
.crm .desc-sec-text + .desc-items { margin-top: var(--s-2); }
.crm .desc-chips { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.crm .desc-chip { display: inline-flex; align-items: center; padding: .125rem .6rem; border: .0625rem solid transparent; border-radius: var(--r-sm); font-size: var(--fs-ui); font-weight: 500; }
.crm .desc-chip-tech { background: var(--bg-surface-3); color: var(--text-1); }
.crm .desc-chip-must { background: var(--tint-blue); color: var(--desc-accent); }
.crm .desc-chip-nice { border-style: dashed; border-color: var(--border-strong); color: var(--text-2); }
.crm .desc-more { margin-top: var(--s-1); }
.crm .desc-more > summary, .crm .desc-original > summary { cursor: pointer; list-style: none; border-radius: var(--r-xs); }
.crm .desc-more > summary::-webkit-details-marker, .crm .desc-original > summary::-webkit-details-marker { display: none; }
.crm .desc-more > summary { color: var(--desc-accent); font-weight: 500; font-size: var(--fs-ui); }
.crm .desc-more[open] > summary { display: none; }
.crm .desc-original { padding-top: var(--s-2); }
.crm .desc-original > summary { display: inline-flex; align-items: center; gap: var(--s-1); font-size: var(--fs-meta); color: var(--text-3); }
.crm .desc-original > summary:hover, .crm .desc-more > summary:hover { text-decoration: underline; }
.crm .desc-original[open] > summary .ic { transform: rotate(180deg); }
.crm .desc-original-text { margin-top: var(--s-2); padding: var(--s-3); border-radius: var(--r-sm); background: var(--bg-surface-2); }
.crm .desc-more > summary:focus-visible, .crm .desc-original > summary:focus-visible { outline: .125rem solid var(--focus); outline-offset: .125rem; }
.crm .desc-pending { display: flex; align-items: center; gap: var(--s-2); margin: 0 0 var(--s-2); font-size: var(--fs-ui); color: var(--text-3); }
/* Rueckfall: formatierter Originaltext (renderMarkdownLight) — die Grundregeln dafuer gab es
   im Redesign bis PR1.425 nicht. */
.crm .markdown-light { font-size: var(--fs-body); line-height: 1.6; color: var(--text-1); max-width: 75ch; }
.crm .markdown-light p { margin: 0 0 var(--s-2); }
.crm .markdown-light p:last-child { margin-bottom: 0; }
.crm .markdown-light ul, .crm .markdown-light ol { margin: 0 0 var(--s-2); padding-left: 1.1rem; }
.crm .markdown-light .ml-h { margin: var(--s-3) 0 var(--s-1); font-size: var(--fs-ui); font-weight: 500; color: var(--text-1); }

/* ============== PR1.440 (#682) MITARBEITER-DETAIL: ZWEI SPALTEN ============== */
/* Links Organisation, Profil-Qualität, Zusammenfassung, Unterlagen (vorher Reiter
   „Übersicht"); rechts die vier Reiter. Schmal (Container < 60rem) stapelt die Spalte
   über den Reitern. Nur Tokens und rem; Steckbrief-Regeln (`esb-*`) liegen geteilt in
   style.css. */
.crm .emp-detail-scroll { container-type: inline-size; }
.crm .emp-detail-layout {
  display: grid;
  grid-template-columns: minmax(16rem, 20rem) minmax(0, 1fr);
  gap: var(--s-4);
  align-items: start;
  padding: var(--s-4) var(--s-5) var(--s-5);
}
.crm .emp-detail-aside { position: sticky; top: 0; }
.crm .emp-detail-aside .record-stack { gap: var(--s-3); }
.crm .emp-detail-main { min-width: 0; }
/* style.css `.tabs` (Segment-Look, fit-content) schlägt hier sonst durch. */
.crm .emp-detail-main > .tabs { width: auto; padding: 0; background: transparent; border: 0; border-bottom: thin solid var(--border); border-radius: 0; }
.crm .emp-detail-main > [role="tabpanel"] > div:first-child { padding-left: 0; padding-right: 0; }
.crm .emp-detail-aside .field-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.crm .emp-detail-aside .field .val { overflow-wrap: anywhere; }
.crm .emp-detail-aside .deal-quality { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.crm .emp-detail-aside .dq { min-width: 0; }
.crm .tab:focus-visible { outline: .125rem solid var(--focus); outline-offset: -.125rem; }
.crm .emp-steckbrief .esb-head h3 { font-family: var(--f-cond, inherit); }
/* BF-127 (#858) — Karte Unterlagen: Lebenslauf liegt vor, nie ausgewertet. Neutraler
   Info-Ton (keine Warnfarbe), selten genutzt → keine Animation. */
.crm .emp-cv-hint { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-2); margin-bottom: var(--s-3); padding: var(--s-2) var(--s-3); border: thin solid var(--border); border-radius: var(--r-md); background: var(--bg-surface-2); }
.crm .emp-cv-hint__text { margin: 0; font-size: var(--fs-ui); line-height: 1.4; color: var(--text-1); }
.crm .emp-cv-hint .btn:focus-visible { outline: .125rem solid var(--focus); outline-offset: .125rem; }
/* PR1.522 (#802) — Profil-Überblick oben im Profil-Reiter: Einsätze als Jahres-Zeitleiste,
   Zertifikate als Abzeichen. Grundregeln geteilt in style.css (`.emp-ov-*`); hier nur die
   Redesign-Tokens. Keine Animation. */
.crm .emp-ov-stack { display: grid; gap: var(--s-3); margin-bottom: var(--s-3); }
.crm .emp-ov {
  --ov-done: var(--tint-blue);
  --ov-done-text: var(--text-1);
  --ov-now: var(--ad-blue);
  --ov-today: var(--ad-red-700);
  --ov-line: var(--border);
}
.crm .emp-ov-title { font-family: var(--f-cond, inherit); font-size: var(--fs-body); letter-spacing: 0; text-transform: none; color: var(--text-1); }
.crm .emp-ov-title small { font-family: inherit; font-size: var(--fs-ui); }
.crm .emp-ov-more { color: var(--text-2); border-radius: var(--r-sm); }
.crm .emp-ov-more:focus-visible, .crm .emp-ov-bar:focus-visible { outline: .125rem solid var(--focus); outline-offset: .125rem; }
.crm .emp-ov-bar { border-radius: var(--r-sm); }
.crm .emp-ov-badge-mono, .crm .emp-ov-badge--rest .emp-ov-badge-pic { background: var(--bg-surface-2); border-color: var(--border); }
@container (max-width: 60rem) {
  .crm .emp-detail-layout { grid-template-columns: minmax(0, 1fr); }
  .crm .emp-detail-aside { position: static; }
}

/* PR1.519 (#796) — Mitarbeiter-Kopf: dasselbe Markup wie die klassische Shell
   (employee-head-model.js), die Grundregeln stehen geteilt in style.css. Hier nur die
   Redesign-Tokens: Flächen, Linien, Schrift, Radius, Fokus und das Rot der Überlast. */
.crm .emp-head-wrap { container-type: inline-size; padding: var(--s-3) var(--s-5) 0; margin-bottom: 0; }
.crm .emp-head-path { color: var(--text-2); }
.crm .emp-head-back { color: var(--text-1); border-radius: var(--r-sm); }
.crm .emp-head { background: var(--bg-surface); border: thin solid var(--border); border-radius: var(--r-lg); }
.crm .emp-head-name { font-family: var(--f-cond); font-weight: 600; color: var(--text-1); }
.crm .emp-head-contact { color: var(--text-2); border-radius: var(--r-sm); }
.crm .emp-head-contact:hover { background: var(--bg-hover); color: var(--text-1); }
.crm .emp-head-sub { color: var(--text-2); }
.crm .emp-head-sep,
.crm .emp-head-path-sep { color: var(--text-3); }
.crm .emp-head-back:focus-visible,
.crm .emp-head-contact:focus-visible,
.crm .emp-head-actions .btn:focus-visible { outline: .125rem solid var(--focus); outline-offset: .125rem; }
.crm .emp-ki-menu .more-menu-list {
  min-width: 18rem; padding: .3rem;
  background: var(--bg-surface); border: thin solid var(--border);
  border-radius: var(--r-md); box-shadow: var(--shadow-2);
}
.crm .emp-ki-menu .more-menu-item { border-radius: var(--r-sm); color: var(--text-1); align-items: flex-start; }
.crm .emp-ki-menu .more-menu-item:focus-visible { outline: .125rem solid var(--focus); outline-offset: -.125rem; background: var(--bg-hover); }
.crm .emp-ki-menu .more-menu-hint { color: var(--text-3); }
.crm .emp-kz { background: var(--bg-surface-2); border-top: thin solid var(--border); border-radius: 0 0 var(--r-lg) var(--r-lg); }
.crm .emp-kz-cell + .emp-kz-cell { border-left: thin solid var(--border); }
.crm .emp-kz-label,
.crm .emp-kz-sub { color: var(--text-3); }
.crm .emp-kz-value { color: var(--text-1); font-family: var(--f-cond); font-weight: 600; }
.crm .emp-kz-value--bad { color: var(--ad-red-800); }
.crm.dark .emp-kz-value--bad, html[data-theme="dark"] .crm .emp-kz-value--bad { color: var(--ad-red-300); }
@container (max-width: 70rem) {
  .crm .emp-kz { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .crm .emp-kz-cell + .emp-kz-cell { border-left: 0; }
  .crm .emp-kz-cell { border-top: thin solid var(--border); }
  .crm .emp-kz-cell:nth-child(-n+3) { border-top: 0; }
}
@container (max-width: 44rem) {
  .crm .emp-head-top { grid-template-columns: auto minmax(0, 1fr); gap: var(--s-3); }
  .crm .emp-head-actions { grid-column: 1 / -1; flex-wrap: wrap; }
  .crm .emp-kz { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .crm .emp-kz-cell:nth-child(-n+3) { border-top: thin solid var(--border); }
  .crm .emp-kz-cell:nth-child(-n+2) { border-top: 0; }
}

/* PR1.445 (#687) — Kurzprofil-Kopf in der Condensed-Schrift der Redesign-Titel; die
   übrigen Regeln (`kp-`, `aeb-`, `tb-`) liegen geteilt in style.css. */
.crm .tb-title { font-family: var(--f-cond, inherit); }
   PR1.438 — Einzelauswahl-Baustein, Redesign-Gesicht
   ============================================================
   Struktur steht in style.css (nicht .crm-gescopt, greift in beiden Shells).
   Hier nur die Uebersetzung der Legacy-Tokens, wie beim .ms-Block (PR1.191).
   Kein roher px- oder Hex-Wert; Dark traegt sich ueber die Zieltokens mit. */
.crm .cs,
.crm .cs-pop {
  --bg-input: var(--bg-surface);
  --bg-card: var(--bg-surface);
  --bg-hover: var(--bg-surface-3);
  --primary: var(--ad-blue);
  --primary-text: var(--ad-blue);
  --radius-sm: var(--r-sm);
  --shadow-lg: var(--shadow-2);
  --danger: var(--ad-red-700);
}

.crm .cs-group-label { font-family: var(--f-cond); }

/* Fokusring ist im Redesign ein eigenes Token, kein Primaerton. */
.crm .cs-field:focus-visible,
.crm .cs-search:focus-visible,
.crm .cs-clear:focus-visible,
.crm .cs-seg:focus-visible,
.crm .cs-retry:focus-visible { outline-color: var(--focus); }

/* PR1.458 — Dublettenwarnung im Rollenfeld: Primärknopf wie .crm .btn-primary. */
.crm .cs-warn-take { background: var(--ad-blue); border-color: var(--ad-blue); color: white; }
.crm .cs-warn-btn.is-active,
.crm .cs-warn-btn:focus-visible { outline-color: var(--focus); }

/* Aktive Segment-Taste folgt der Filter-Pillen-Sprache (.fpill.is-on / .ms-pill.is-on). */
.crm .cs-seg[aria-checked="true"] {
  background: var(--tint-blue);
  color: var(--ad-blue);
}

.crm .cs-field:hover:not(:disabled) { border-color: var(--border-strong); }

/* PR1.454 (E3) — Kompakt-Variante in Filterleisten: Rahmen wie die Nachbar-Bedienelemente
   (.crm-ep-select, Filter-Pillen), Schrift aus der Redesign-Skala. */
.crm .cs--kompakt .cs-field { border-color: var(--border-strong); font-size: var(--fs-ui); }

/* ─────────────────────────────────────────
   PR1.449 (#693) — Textbausteine Stil A (description-view.js, ein Markup fuer beide
   Shells; Legacy-Gegenstueck in style.css). Kompass `1_Opportunity-Vorschlag-A.png` /
   `4_Opportunity-dunkel.png`: Abschnittskopf mit Farbkachel, Leitsatz, nummerierte Liste,
   Faktenkacheln, schmales KI-Herkunftsband. Keine Bewegung (taeglich genutzt), nur Tokens.
   Farbstufen je Kachel: Zeichen/Text auf dem eigenen Tint mind. 4.5:1 (hell -700/-900,
   dunkel die hellen Grundtoene).
   ───────────────────────────────────────── */
.crm .txb-stack, .crm .desc-structured { --tb-blue: var(--ad-blue-700); --tb-green: var(--ad-green-900); --tb-orange: var(--ad-orange-900); --tb-violet: var(--ad-violet); }
.crm.dark .txb-stack, html[data-theme="dark"] .crm .txb-stack,
.crm.dark .desc-structured, html[data-theme="dark"] .crm .desc-structured {
  --tb-blue: var(--ad-blue-300); --tb-green: var(--ad-green); --tb-orange: var(--ad-orange);
  --tb-violet: color-mix(in srgb, var(--ad-violet) 40%, white);
}
.crm .txb-stack { display: flex; flex-direction: column; gap: var(--s-4); }
.crm .txb-stack > * + .txb-sec, .crm .txb-stack > * + .desc-mount { padding-top: var(--s-4); border-top: .0625rem solid var(--border); }
.crm .txb-h { display: flex; align-items: center; gap: var(--s-3); margin: 0 0 var(--s-2); }
.crm .txb-tile {
  flex: none; display: inline-grid; place-items: center; width: 1.75rem; height: 1.75rem;
  border-radius: var(--r-sm); text-transform: none;
}
.crm .txb-blue { background: var(--tint-blue); color: var(--tb-blue); }
.crm .txb-green { background: var(--tint-green); color: var(--tb-green); }
.crm .txb-orange { background: var(--tint-orange); color: var(--tb-orange); }
.crm .txb-violet { background: var(--tint-violet); color: var(--tb-violet); }
.crm .txb-t {
  margin: 0; font-family: var(--f-cond); font-size: var(--fs-ui); font-weight: 500; color: var(--text-1);
}
.crm .txb-meta { margin-left: auto; font-size: var(--fs-meta); color: var(--text-3); }
.crm .desc-sec-h { gap: var(--s-3); font-family: var(--f-cond); font-size: var(--fs-ui); letter-spacing: .06em; color: var(--text-1); }
.crm .txb-body { padding-left: calc(1.75rem + var(--s-3)); }
.crm .txb-lead { margin: 0 0 var(--s-1); max-width: 72ch; font-size: var(--fs-body); font-weight: 500; line-height: 1.5; color: var(--text-1); }
.crm .txb-lead-s { font-size: var(--fs-body); }
.crm .txb-body .markdown-light, .crm .txb-text { max-width: 72ch; font-size: var(--fs-body); line-height: 1.6; color: var(--text-2); }
.crm .txb-body .markdown-light .txb-lead { color: var(--text-1); }
.crm p.txb-text { margin: 0 0 var(--s-2); }
.crm .txb-sub { margin: var(--s-3) 0 var(--s-1); font-size: var(--fs-meta); font-weight: 500; color: var(--text-2); }
.crm .txb-sub:first-child { margin-top: 0; }
/* Nummerierte Liste: runde Ziffer im Gruen-Tint, Trennlinie gestrichelt. list-item zaehlt
   ueber txb-step; der aufgeklappte Rest setzt den Zaehler per counter-reset fort. */
.crm .txb-steps { counter-reset: txb-step; list-style: none; margin: 0; padding: 0; max-width: 80ch; font-size: var(--fs-body); line-height: 1.5; color: var(--text-1); }
.crm .txb-steps li { counter-increment: txb-step; display: grid; grid-template-columns: 1.375rem minmax(0, 1fr); gap: var(--s-3); padding: .45rem 0; border-top: .0625rem dashed var(--border); }
.crm .txb-steps li:first-child { border-top: 0; padding-top: 0; }
.crm .txb-steps li + li { margin-top: 0; }
.crm .txb-steps li::before {
  content: counter(txb-step); display: grid; place-items: center; width: 1.375rem; height: 1.375rem;
  border-radius: 50%; background: var(--tint-green); color: var(--tb-green);
  font-size: var(--fs-meta); font-weight: 500; font-variant-numeric: tabular-nums;
}
.crm .txb-more { margin-top: var(--s-1); }
.crm .txb-more > summary { display: inline-flex; align-items: center; gap: var(--s-1); font-weight: 500; font-size: var(--fs-ui); color: var(--tb-blue); }
.crm .txb-more > ol { border-top: .0625rem dashed var(--border); padding-top: .45rem; }
/* Faktenkacheln */
.crm .txb-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); gap: var(--s-2); }
.crm .txb-fact { display: flex; flex-direction: column; gap: .125rem; padding: var(--s-2) var(--s-3); border: .0625rem solid var(--border); border-radius: var(--r-md); background: var(--bg-surface-2); min-width: 0; }
.crm .txb-fact-k { font-size: var(--fs-label); color: var(--text-3); }
.crm .txb-fact-v { display: flex; align-items: center; gap: .375rem; font-size: var(--fs-body); font-weight: 500; color: var(--text-1); overflow-wrap: anywhere; }
.crm .txb-fact-v.txb-ja { color: var(--tb-green); }
.crm .txb-fact-v.txb-nein { color: var(--text-2); }
.crm .txb-fact-v.txb-ja .ic { color: inherit; }
.crm .txb-fact-n { font-size: var(--fs-label); color: var(--text-3); }
.crm .txb-rest { margin-top: var(--s-3); padding-left: var(--s-3); border-left: .1875rem solid var(--border-strong); font-size: var(--fs-body); }
/* KI-Herkunftsband */
.crm .txb-prov {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2) var(--s-3);
  padding: var(--s-2) var(--s-3); border-radius: var(--r-md);
  background: linear-gradient(90deg, var(--tint-violet), transparent 70%);
  font-size: var(--fs-meta); color: var(--text-2);
}
.crm .txb-prov .txb-tile { width: 1.5rem; height: 1.5rem; }
.crm .txb-prov b { color: var(--text-1); font-weight: 600; }
.crm .txb-prov-sicher { display: inline-flex; align-items: center; gap: var(--s-2); }
.crm .txb-meter { display: inline-block; width: 4.5rem; height: .375rem; border-radius: var(--r-xs); background: var(--bg-surface-3); overflow: hidden; }
.crm .txb-meter > i { display: block; height: 100%; background: var(--tb-violet); }
.crm .txb-prov-fehlt { margin-left: auto; display: inline-flex; flex-wrap: wrap; align-items: center; gap: var(--s-1); }
.crm .txb-miss { padding: 0 .375rem; border: .0625rem dashed var(--border-strong); border-radius: var(--r-xs); background: var(--bg-surface); font-size: var(--fs-label); color: var(--text-2); }
/* „Für das Matching": Untertitel + leerer Wert mit „ergänzen" */
.crm .opp-card .section-h { flex-wrap: wrap; }
.crm .opp-card-sub { flex-basis: 100%; font-size: var(--fs-meta); color: var(--text-3); }
.crm .opp-req-fill { padding: 0; border: 0; background: none; font: inherit; color: var(--ad-blue-700); text-decoration: underline; cursor: pointer; }
.crm.dark .opp-req-fill, html[data-theme="dark"] .crm .opp-req-fill { color: var(--ad-blue-300); }
.crm .txb-more > summary:focus-visible, .crm .opp-req-fill:focus-visible { outline: .125rem solid var(--focus); outline-offset: .125rem; border-radius: var(--r-xs); }
/* PR1.449 Ende */

/* PR1.450 (#694) — Projekt: Lage-Kopf Stil A in der Statuskarte (Marke + Leitsatz vor den
   fuenf Bereichen). Farbstufen wie PR1.449: Text auf eigenem Tint mind. 4.5:1. */
.crm .sr-card { --tb-green: var(--ad-green-900); --tb-orange: var(--ad-orange-900); --tb-red: var(--ad-red-800); }
.crm.dark .sr-card, html[data-theme="dark"] .crm .sr-card { --tb-green: var(--ad-green); --tb-orange: var(--ad-orange); --tb-red: var(--ad-red-300); }
.crm .sr-card .sr-head .txb-h { flex: 1; margin: 0; min-width: 0; }
.crm .sr-card .sr-head .txb-meta { white-space: normal; }
.crm .txb-lage { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--s-1) var(--s-2); }
.crm .txb-lage .txb-lead { flex: 1 1 14rem; margin: 0; }
.crm .txb-mark { flex: none; padding: .125rem .625rem; border-radius: 62.4375rem; font-size: var(--fs-ui); font-weight: 500; line-height: 1.5; }
.crm .txb-mark-ok { background: var(--tint-green); color: var(--tb-green); }
.crm .txb-mark-warn { background: var(--tint-orange); color: var(--tb-orange); }
.crm .txb-mark-bad { background: var(--tint-red); color: var(--tb-red); }
.crm .txb-mark-neutral { background: var(--bg-surface-2); color: var(--text-2); }
/* PR1.450 Ende */

/* PR1.451 (#695) — Karte „Ausgang" (Stil A, violett) ueber dem Opp-Raster. Markup geteilt mit
   der klassischen Ansicht (description-view.js renderAusgangKarte). Nur rem/Tokens. */
.crm .opp-ausgang-wrap { padding: var(--s-4) 1.375rem 0; }
.crm .opp-ausgang .txb-text { margin: 0 0 var(--s-1); }
.crm .txb-link {
  padding: 0; border: 0; background: none; font: inherit; font-weight: 600; cursor: pointer;
  color: var(--ad-blue-700); text-decoration: underline; text-underline-offset: .15em;
}
.crm.dark .txb-link, html[data-theme="dark"] .crm .txb-link { color: var(--ad-blue-300); }
.crm .txb-link:hover { text-decoration-thickness: .125rem; }
.crm .txb-link:focus-visible { outline: .125rem solid var(--ad-blue); outline-offset: .125rem; border-radius: var(--r-sm); }
.crm .txb-ausgang-btn { margin-top: var(--s-2); }

/* PR1.459 (#705) — Rollenliste aufräumen (Admin → Zuordnungen). Dieselben Regeln wie in
   style.css, im .crm-Scope auf Redesign-Tokens (sonst überstimmt die Shell-Kaskade).
   Levelwort-Chip: gestrichelter Rand statt Orange-Text (--ad-orange hält kein AA). */
.crm .role-cleanup { margin-top: var(--s-8); display: flex; flex-direction: column; gap: var(--s-3); }
.crm .role-cleanup-title { margin: 0; }
.crm .role-cleanup-kpi { margin: 0; font-size: var(--fs-section); font-weight: 600; color: var(--text-1); }
.crm .role-cleanup-sub { margin: 0; font-size: var(--fs-ui); color: var(--text-2); }
.crm .role-cleanup-status { margin: 0; min-height: 1.2em; font-size: var(--fs-ui); font-weight: 500; color: var(--text-1); }
.crm .role-cleanup-empty { margin: 0; padding: var(--s-4); border: thin dashed var(--border-strong); border-radius: var(--r-md); color: var(--text-2); text-align: center; }
.crm .role-cleanup-cards, .crm .role-cleanup-list, .crm .role-cleanup-chips { list-style: none; margin: 0; padding: 0; }
.crm .role-cleanup-cards { display: flex; flex-direction: column; gap: var(--s-3); }
.crm .role-cleanup-card { display: flex; flex-direction: column; gap: var(--s-3); padding: var(--s-4); background: var(--bg-surface); border: thin solid var(--border); border-radius: var(--r-lg); }
.crm .role-cleanup-card-head { display: flex; align-items: center; gap: var(--s-3); flex-wrap: wrap; }
.crm .role-cleanup-label { font-size: var(--fs-meta); font-weight: 500; color: var(--text-2); }
.crm .role-cleanup-chips { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.crm .role-cleanup-chip { padding: var(--s-1) var(--s-3); border-radius: var(--r-xl); background: var(--bg-surface-3); border: thin solid var(--border); font-size: var(--fs-meta); color: var(--text-1); }
.crm .role-cleanup-chip--level { border-style: dashed; border-color: var(--text-2); }
.crm .role-cleanup-chip-note { color: var(--text-2); }
.crm .role-cleanup-fold > summary { cursor: pointer; font-weight: 600; padding: var(--s-2) 0; color: var(--text-1); }
.crm .role-cleanup-h4 { margin: var(--s-2) 0 0; font-size: var(--fs-body); color: var(--text-1); }
.crm .role-cleanup-row { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); padding: var(--s-2) 0; border-bottom: thin solid var(--border); color: var(--text-1); }
.crm .role-cleanup-target { flex: 0 1 28rem; padding: var(--s-2) var(--s-3); border: thin solid var(--border-strong); border-radius: var(--r-md); background: var(--bg-surface); color: var(--text-1); font: inherit; font-weight: 600; }

/* PR1.485 B — Besetzung in Detailseiten und Mitarbeiterliste (Redesign).
   Marken auf .bdg: „Extern · Partnerfirma" blau, „neu, ungeprueft" Warnton, „Extern, noch
   offen" neutral gestrichelt. Textstufen wie .bdg-lead/.bdg-warn (AA in beiden Themes). */
.crm .roster-mark { margin-left: var(--s-1); white-space: nowrap; }
.crm .roster-mark-ext { background: var(--tint-blue); color: var(--ad-blue-700); border-color: var(--border); }
.crm .roster-mark-new { background: var(--tint-warn); color: var(--ad-orange-900); border-color: var(--border); }
.crm .roster-mark-ph { margin-left: 0; border-style: dashed; }
.crm.dark .roster-mark-ext, html[data-theme="dark"] .crm .roster-mark-ext { color: var(--ad-blue-300); }
.crm.dark .roster-mark-new, html[data-theme="dark"] .crm .roster-mark-new { color: var(--ad-orange); }
.crm .roster-ph-detail { color: var(--text-2); font-size: var(--fs-ui); }
.crm .roster-ph-role { color: var(--text-1); font-weight: 500; font-size: var(--fs-ui); }
.crm .roster-ph-group { display: flex; flex-direction: column; gap: var(--s-1); margin-top: var(--s-3); padding-top: var(--s-3); border-top: thin solid var(--border); }
.crm .roster-ph-head { font-size: var(--fs-meta); font-weight: 500; color: var(--text-2); }
.crm .roster-ph-hint { font-weight: 400; color: var(--text-3); }
.crm .roster-ph-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-1); }
.crm .proj-team-row-ph .proj-team-who { color: var(--text-2); }
.crm .emp-roster-marks { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-1); margin-top: var(--s-1); }
.crm .emp-roster-marks .roster-mark { margin-left: 0; }
.crm .roster-review-btn { margin-left: var(--s-1); }
.crm .emp-dd-check { flex-direction: row; align-items: center; gap: var(--s-2); color: var(--text-1); cursor: pointer; }

/* PR1.595 (#904) — Lage anpassen (Bild E9): Redesign-Werte der Anpassen-Tokens. */
.crm .cz-host {
    --cz-accent-tint: var(--tint-blue);
    --cz-accent-line: color-mix(in srgb, var(--ad-blue-700) 28%, transparent);
    --cz-accent-deep: var(--ad-blue-800);
    --cz-note-bg: var(--tint-orange);
    --cz-note-line: color-mix(in srgb, var(--ad-orange) 55%, transparent);
    --cz-note-text: var(--ad-orange-900);
    --cz-lift-shadow: var(--shadow-3);
    --cz-scroll-edge: color-mix(in srgb, var(--text-1) 16%, transparent);
}
.crm .cz-lt-head .cs-field { font-size: var(--fs-label); border-color: var(--border); }
.crm.dark .cz-host, html[data-theme="dark"] .crm .cz-host {
    --cz-accent-tint: color-mix(in srgb, var(--ad-blue-300) 18%, transparent);
    --cz-accent-deep: var(--ad-blue-300);
    --cz-note-bg: color-mix(in srgb, var(--ad-orange) 16%, transparent);
    --cz-note-text: var(--ad-orange);
}

/* PR1.464 (#715) — Reiter „Zertifikate": Aufbau steht in style.css (beide Shells),
   hier nur die Redesign-Werte. Ampel-Text in den dunklen Stufen (AA, wie .bdg-ok/-warn). */
.crm .cz-host {
    --cz-surface: var(--bg-surface);
    --cz-surface-2: var(--bg-surface-2);
    --cz-hover: var(--bg-hover);
    --cz-line: var(--border);
    --cz-text: var(--text-1);
    --cz-text-2: var(--text-2);
    --cz-text-3: var(--text-3);
    --cz-accent: var(--ad-blue);
    --cz-accent-text: var(--ad-blue-700);
    --cz-ok: var(--ad-green-900);
    --cz-warn: var(--ad-orange-900);
    --cz-bad: var(--ad-red-700);
    --cz-idle: var(--text-3);
    --cz-ok-bg: var(--tint-green);
    --cz-warn-bg: var(--tint-warn);
    --cz-bad-bg: var(--tint-red);
    --cz-idle-bg: var(--bg-surface-3);
    --cz-radius: var(--r-lg);
    --cz-radius-sm: var(--r-sm);
    --cz-gap: var(--s-4);
    --cz-num-font: var(--f-cond);
    --cz-hi: var(--tint-blue);
}
.crm.dark .cz-host, html[data-theme="dark"] .crm .cz-host {
    --cz-accent-text: var(--ad-blue-300);
    --cz-ok: var(--ad-green);
    --cz-warn: var(--ad-orange);
    --cz-bad: var(--ad-red-300);
}
.crm .cz-scroll { padding: 0 var(--s-6) var(--s-6); }
.crm .cz-scroll > .crm-empty { margin-bottom: var(--s-4); }
.crm .cz-bar-ok { background: var(--ad-green); }
.crm .cz-ds-fill { background: var(--ad-green-700); } /* Vorlage E8 gemessen #5DA000 */
.crm.dark .cz-ds-fill, html[data-theme="dark"] .crm .cz-ds-fill { background: var(--ad-green); }
/* Vorlage E8 (gemessen): Datenstand-Schiene 8 Pixel in #EEF1F5; Nachweiszeilen in „Läuft bald ab" auf 22er-Raster mit 18er-Abzeichen (1rem = 15 Pixel). */
.crm .cz-ds-bar { height: var(--s-2); background: var(--cz-idle-bg); }
.crm .cz-soon-cert { min-height: 1.2rem; line-height: 1.2rem; }
.crm .cz-soon-cert .cz-badge { width: 1.2rem; height: 1.2rem; }
.crm .cz-soon-row { padding-block: .9333rem; } /* einzeiliger Personenblock ~66 px wie Vorlage */
.crm .cz-bar-warn { background: var(--ocker-fuell); }  /* PR1.697: Frist = Ocker (e8) */
.crm .cz-bar-bad { background: var(--ad-red); }
.crm .cz-lg-ok::before { background: var(--ad-green); }
.crm .cz-lg-warn::before { background: var(--ocker-fuell); }
.crm .cz-lg-bad::before { background: var(--ad-red); }
.crm .cz-yv-bar--exp, .crm .cz-pg-fill { background: var(--ocker-fuell); }  /* PR1.697: Ablauf-Saeulen und offene Ziel-Segmente Ocker (e8) */
/* PR1.697 (#1001): Luecken-Schilder der Partnerziele („2 Foundational fehlen") in Ocker wie e8 —
   die Tokens schalten selbst zwischen hell und dunkel um. */
.crm .cz-pill--warn { background: var(--ocker-grund); color: var(--ocker-text); }
.crm .cz-teams-exp { color: var(--ocker-text); }  /* PR1.697: „laeuft ab" je Team als Ocker-Zahl wie e8 */
.crm .cz-pg-seg.is-ok .cz-pg-fill { background: var(--ad-green); }
.crm .cz-lg-plan::before, .crm .cz-yv-bar--plan { background: var(--ad-blue); }
.crm .cz-host :is(button, select, input, a):focus-visible { outline-color: var(--focus); }

/* PR1.490 #755 — Karte „Notizen" auf der Opp-Detailseite (Basis in style.css). Nur Tokens
   der Redesign-Shell; Zaehler steht wie .meta rechts in der Kopfzeile. */
.crm .opp-notes-card .section-h .opp-notes-count { font-family: var(--f-mono); font-variant-numeric: tabular-nums; font-size: var(--fs-label); color: var(--text-3); }
.crm .opp-notes-input {
  min-height: 5.25rem; /* PR1.567: drei Zeilen der groesseren Schrift ohne Eigen-Scroll */
  background: var(--bg-input); border-color: var(--border); border-radius: var(--r-sm);
  padding: var(--s-2) var(--s-3); font-size: var(--fs-ui); color: var(--text-1);
}
.crm .opp-notes-input:focus-visible { outline: .125rem solid var(--focus); outline-offset: .0625rem; border-color: transparent; }
.crm .opp-notes-form { gap: var(--s-2); margin-bottom: var(--s-3); }
.crm .opp-note { padding: var(--s-3) 0; }
.crm .opp-note:first-child { padding-top: 0; }
.crm .opp-note-text { font-size: var(--fs-ui); }
.crm .opp-note-link { color: var(--focus); }
.crm .opp-note-link:focus-visible { outline: .125rem solid var(--focus); outline-offset: .125rem; border-radius: var(--r-xs); }
.crm .opp-notes-msg.is-error { color: var(--danger); }

/* PR1.481 (#739) — Project Excellence: Aufbau in style.css (.pex-*, geteilt), hier nur die
   Flächen/Text-Tokens auf die Redesign-Werte umbelegt (Muster .cz-host). */
.crm .pex-host {
  --pex-surface: var(--bg-surface);
  --pex-surface-2: var(--bg-surface-2);
  --pex-hover: var(--bg-hover);
  --pex-line: var(--border);
  --pex-text: var(--text-1);
  --pex-text-2: var(--text-2);
  --pex-text-3: var(--text-3);
  --pex-accent: var(--ad-blue);
  --pex-accent-text: var(--focus);
  --pex-tint: var(--tint-blue);
  --pex-radius: var(--r-md);
}
/* PR1.480 (#738) — Statusmeldung überfällig: Hinweisleiste (Projekt) + Kachel (Dashboard).
   Markup geteilt mit der klassischen Shell (status-report-due.js). Nur Tokens/rem. */
.crm .status-due-banner { --sdb-ink: var(--ad-orange-900); display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2) var(--s-4); margin: var(--s-3) 1.375rem 0; padding: var(--s-3) 1.25rem; border: thin solid var(--ad-orange); border-radius: var(--r-lg); background: var(--tint-warn); color: var(--text-1); }
.crm.dark .status-due-banner, html[data-theme="dark"] .crm .status-due-banner { --sdb-ink: var(--ad-orange); }
.crm .status-due-banner .sdb-icon { flex: none; color: var(--sdb-ink); }
.crm .status-due-banner__text { flex: 1 1 26rem; margin: 0; line-height: 1.45; }
.crm .status-due-banner__text strong { color: var(--sdb-ink); }
.crm .status-due-card { --sdb-ink: var(--ad-orange-900); --sdb-ok: var(--ad-green-900); margin: 0; padding: var(--s-4) 1.25rem; border: thin solid var(--border); border-radius: var(--r-lg); background: var(--bg-surface); color: var(--text-1); }
.crm.dark .status-due-card, html[data-theme="dark"] .crm .status-due-card { --sdb-ink: var(--ad-orange); --sdb-ok: var(--ad-green); }
.crm .status-due-card__head { display: flex; align-items: baseline; gap: .625rem; }
.crm .status-due-card__count { font-size: var(--fs-kpi); font-weight: 600; line-height: 1; color: var(--sdb-ink); font-variant-numeric: tabular-nums; }
.crm .status-due-card__count--ok { color: var(--sdb-ok); }
.crm .status-due-card__title { margin: 0; font-size: var(--fs-body); }
.crm .status-due-card__list, .crm .status-due-card__soon { margin: .625rem 0 0; padding: 0; list-style: none; }
.crm .status-due-card__row { display: flex; align-items: center; gap: var(--s-3); padding: .625rem 0; border-top: thin solid var(--border); }
.crm .status-due-card__name { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.crm .status-due-card__age { font-size: var(--fs-ui); font-weight: 500; color: var(--sdb-ink); }
.crm .status-due-card__link { align-self: flex-start; padding: 0; border: 0; background: none; font: inherit; font-weight: 600; color: inherit; text-align: left; cursor: pointer; }
.crm .status-due-card__link:hover { text-decoration: underline; }
.crm .status-due-card__customer { font-weight: 400; color: var(--text-2); } /* Kunde hinter dem Projektnamen */
.crm .status-due-card__soon li { padding: .375rem 0; border-top: thin solid var(--border); font-size: var(--fs-ui); color: var(--text-3); }
.crm .status-due-card__soon .status-due-card__link { font-weight: 500; }
.crm .status-due-card__ok { margin: var(--s-2) 0 0; font-weight: 600; color: var(--sdb-ok); }
.crm .status-due-card__note { margin: var(--s-2) 0 0; font-size: var(--fs-body); color: var(--text-2); }
.crm .status-due-card__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2) .875rem; margin-top: var(--s-3); }
.crm .status-due-card__hint { font-size: var(--fs-meta); color: var(--text-3); }

/* PR1.483 (#741) — Monitoring-Verantwortliche (Admin, Reiter Benutzer). Nur Token. */
.crm .crm-monitoring-verantwortliche { display: flex; flex-direction: column; gap: var(--s-2); }
.crm .crm-monitoring-verantwortliche h3 { margin: 0; font-family: var(--f-cond); font-size: var(--fs-body); }
.crm .crm-mv-hilfe { margin: 0; color: var(--text-2); font-size: var(--fs-ui); line-height: 1.5; }
.crm .crm-mv-liste { margin: 0; padding: 0; list-style: none; }
.crm .crm-mv-liste li { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); padding: var(--s-2) 0; border-top: thin solid var(--border); font-size: var(--fs-body); }
.crm .crm-mv-liste li:first-child { border-top: 0; }
.crm .crm-mv-leer { margin: 0; color: var(--ad-orange-700); font-size: var(--fs-ui); }
.crm.dark .crm-mv-leer, html[data-theme="dark"] .crm .crm-mv-leer { color: var(--ad-orange); }
.crm .crm-mv-leer:empty { display: none; }
.crm .crm-mv-neu { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); }
.crm .crm-mv-neu select { flex: 1 1 16rem; min-width: 0; padding: var(--s-1) var(--s-2); border: thin solid var(--border); border-radius: var(--r-md); background: var(--bg-surface); color: var(--text-1); font: inherit; font-size: var(--fs-ui); }
.crm .crm-mv-neu select:focus-visible { outline: .125rem solid var(--ad-blue); outline-offset: .125rem; }
.crm .crm-mv-meta { margin: 0; color: var(--text-3); font-size: var(--fs-meta); }

/* PR1.498 — Zusatz zur Rolle in der Teamliste („leitet das Projekt · 6 / 30 PT gebucht"). */
.crm .proj-team-booked { display: block; margin-top: .125rem; font-size: var(--fs-meta); color: var(--text-2); font-variant-numeric: tabular-nums; }

/* PR1.511 (#782) — Stammdaten-Karte (geteiltes Gesicht stammdaten-card.js). Grundlayout
   ungescopt in style.css; hier nur Redesign-Toene, Schrift und Masse. Nur Tokens (ui-craft). */
.crm .stamm-card .section-h { margin-bottom: var(--s-3); }
.crm .stamm-head { gap: var(--s-3); padding-bottom: var(--s-4); }
.crm .stamm-tiles { gap: var(--s-2); }
.crm .stamm-tile { border: 0; border-radius: var(--r-lg); background: var(--bg-surface-2); padding: var(--s-2) var(--s-3); }
.crm .stamm-tile-lbl { font-size: var(--fs-meta); color: var(--text-3); }
.crm .stamm-tile-val { font-size: var(--fs-section); }
.crm .stamm-tile.is-warn .stamm-tile-val, .crm .stamm-tile-sub.is-alert { color: var(--ocker-text); }  /* PR1.586: Luecke = Ocker */
.crm .stamm-bar { background: var(--bg-surface-3); }
.crm .stamm-bar-fill { background: var(--ad-blue); }
.crm .stamm-bar.is-over .stamm-bar-fill { background: var(--ad-orange); }
.crm .stamm-sec { border-top-color: var(--border); padding: var(--s-4) 0; }
.crm .stamm-sec:last-child { padding-bottom: 0; }
.crm .stamm-sec-h { font-family: var(--f-cond); font-size: var(--fs-meta); letter-spacing: .05em; margin-bottom: var(--s-3); }
.crm .stamm-rows, .crm .stamm-people { gap: var(--s-3); }
.crm .stamm-row { font-size: var(--fs-ui); gap: var(--s-3); }
.crm .stamm-span-track { background: var(--bg-surface-3); }
.crm .stamm-span-track::before, .crm .stamm-span-track::after { background: var(--ad-blue); }
.crm .stamm .stamm-avatar.emp-avatar { width: 2.25rem; height: 2.25rem; border-radius: 50%; background: var(--bg-surface-3); color: var(--text-2); }
.crm .stamm-avatar.is-missing { width: 2.25rem; height: 2.25rem; border-color: var(--border); }
.crm .stamm-auto { background: var(--bg-surface-3); color: var(--text-2); }
.crm .stamm-chip { background: var(--bg-surface-3); border-color: transparent; }
.crm .stamm-chip.is-neg { background: transparent; border-color: var(--border); }
.crm .stamm-link:focus-visible { outline: .125rem solid var(--focus); outline-offset: .125rem; }
/* PR1.533 (#809) — Kundenknopf in Markenblau wie .opp-field-link; Umbruch-Regeln stehen in style.css. */
.crm .stamm-link { color: var(--ad-blue); gap: var(--s-2); border-radius: var(--r-xs); }
html[data-theme="dark"] .crm .stamm-link, .crm.dark .stamm-link { color: var(--ad-blue-300); }
.crm .stamm-chips + .stamm-frame-open { margin-top: var(--s-2); }
/* Portfolio-Schilder: die Bestandsfarben (style.css, fuer Dunkel gebaut) erreichen auf hellem
   Grund nur ~2,4:1 — in der Karte zur Lesefarbe hin mischen (hell und dunkel ausreichend). */
.crm .stamm-badges .badge-pf.cc-advisory { color: var(--ad-blue-700); }
.crm .stamm-badges .badge-pf.cc-infra { color: var(--ad-green-900); }
.crm .stamm-badges .badge-pf.cc-app2cloud { color: var(--ad-orange-900); }
.crm .stamm-badges .badge-pf.cc-platforms { color: var(--ad-violet); }
.crm .stamm-badges .badge-pf.cc-integration { color: var(--ad-turq-900); }
.crm .stamm-badges .badge-pf.cc-default { color: var(--text-2); }
html[data-theme="dark"] .crm .stamm-badges .badge-pf.cc-advisory, .crm.dark .stamm-badges .badge-pf.cc-advisory { color: var(--ad-blue-300); }
html[data-theme="dark"] .crm .stamm-badges .badge-pf.cc-infra, .crm.dark .stamm-badges .badge-pf.cc-infra { color: var(--ad-green); }
html[data-theme="dark"] .crm .stamm-badges .badge-pf.cc-app2cloud, .crm.dark .stamm-badges .badge-pf.cc-app2cloud { color: var(--ad-orange); }
html[data-theme="dark"] .crm .stamm-badges .badge-pf.cc-platforms, .crm.dark .stamm-badges .badge-pf.cc-platforms { color: color-mix(in srgb, var(--ad-violet) 35%, white); }
html[data-theme="dark"] .crm .stamm-badges .badge-pf.cc-integration, .crm.dark .stamm-badges .badge-pf.cc-integration { color: var(--ad-turq); }
/* PR1.537 (#818) — Stammdaten als ruhiges Kachel-Raster (Variante B), nur Redesign
   (stammCardBodyHtml layout:'grid'). Breite Budget-Kachel, darunter zwei Kacheln; Flaechen eine
   Tonstufe dunkler als die Karte, ohne Rahmen/Schatten. Taeglich genutzt: keine Animation. */
.crm .stamm-head.is-grid { gap: var(--s-4); }
.crm .stamm-head.is-grid .stamm-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-3); }
.crm .stamm-head.is-grid .stamm-tile { display: flex; flex-direction: column; gap: var(--s-1); padding: var(--s-4); border: 0; box-shadow: none; border-radius: var(--r-lg); background: var(--bg-surface-2); min-width: 0; }
.crm .stamm-head.is-grid .stamm-tile.is-wide { grid-column: 1 / -1; }
.crm .stamm-head.is-grid .stamm-tile-lbl { font-size: var(--fs-ui); font-weight: 500; color: var(--text-2); white-space: normal; }
.crm .stamm-head.is-grid .stamm-tile > .stamm-tile-val { text-align: left; font-size: var(--fs-title); font-weight: 600; line-height: 1.2; color: var(--text-1); font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.crm .stamm-head.is-grid .stamm-tile.is-wide > .stamm-tile-val { font-size: var(--fs-display); }
.crm .stamm-head.is-grid .stamm-tile.is-empty > .stamm-tile-val { color: var(--text-3); }
.crm .stamm-head.is-grid .stamm-tile.is-warn > .stamm-tile-val { color: var(--ad-orange-900); }
.crm .stamm-head.is-grid .stamm-tile-sub { font-size: var(--fs-ui); color: var(--text-2); }
/* Warnschrift: orange-700 erreicht auf --bg-surface-2 nur ~2,9:1 — Text in orange-900 (AA), Punkt bleibt kraeftig. */
.crm .stamm-head.is-grid .stamm-tile-sub.is-alert { display: inline-flex; align-items: center; gap: var(--s-1); color: var(--ocker-text); font-weight: 600; }
html[data-theme="dark"] .crm .stamm-head.is-grid .stamm-tile-sub.is-alert, .crm.dark .stamm-head.is-grid .stamm-tile-sub.is-alert,
html[data-theme="dark"] .crm .stamm-head.is-grid .stamm-tile.is-warn > .stamm-tile-val, .crm.dark .stamm-head.is-grid .stamm-tile.is-warn > .stamm-tile-val { color: var(--ocker-text); }
.crm .stamm-warn-dot { flex: none; width: .5rem; height: .5rem; border-radius: 50%; background: var(--ocker-fuell); }
.crm .stamm-head.is-grid .stamm-usage { width: 100%; margin-top: var(--s-3); }
.crm .stamm-head.is-grid .stamm-bar { height: .375rem; background: var(--bg-surface); }
.crm .stamm-head.is-grid .stamm-usage-txt { margin-top: var(--s-2); font-size: var(--fs-ui); color: var(--text-2); }
.crm .stamm-head.is-grid .stamm-usage-txt > :last-child { margin-left: auto; text-align: right; }
@container (max-width: 17rem) {
  .crm .stamm-head.is-grid .stamm-tiles { grid-template-columns: minmax(0, 1fr); }
}
/* Laufzeit: Daten fett links/rechts, Linie mit Ring-Punkten, darunter Phase und Dauer. */
.crm .stamm-run { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--s-2) var(--s-3); font-variant-numeric: tabular-nums; }
.crm .stamm-run-date { font-size: var(--fs-body); font-weight: 500; color: var(--text-1); }
.crm .stamm-run-date + .stamm-run-date, .crm .stamm-run-note + .stamm-run-note { text-align: right; }
.crm .stamm-run-date.is-empty { color: var(--text-3); font-weight: 500; }
.crm .stamm-run-track { grid-column: 1 / -1; position: relative; height: .125rem; margin: var(--s-1) .375rem; background: var(--bg-surface-3); }
.crm .stamm-run-track::before, .crm .stamm-run-track::after { content: ''; position: absolute; top: 50%; width: .75rem; height: .75rem; margin-top: -.375rem; border-radius: 50%; border: .1875rem solid var(--ad-blue); background: var(--bg-surface); box-sizing: border-box; }
.crm .stamm-run-track::before { left: -.375rem; }
.crm .stamm-run-track::after { right: -.375rem; }
.crm .stamm-run-note { font-size: var(--fs-ui); color: var(--text-2); }
.crm .stamm-run + .stamm-rows { margin-top: var(--s-3); }
/* ── PR1.507 (#787) — Opp- und Projektliste wie in Excel (Redesign) ──
   Baustein column-resize.js attachSheetColumns (dieselben Klassen wie in der Klassik): `xl-sheet` =
   Griffe da, `xl-fixed` = feste Spaltenbreiten des Nutzers (Liste rollt quer), `data-row-lines` =
   Zeilenzahl fuer Namen und Kunden. Optik der Griffe wie die Team-Tabelle; keine Transition. */
.crm .tbl.xl-sheet .col-resize { position: absolute; top: 0; right: 0; bottom: 0; width: 0.5rem; z-index: 5; cursor: col-resize; touch-action: none; }
.crm .tbl.xl-sheet .col-resize::after { content: ""; position: absolute; top: 25%; bottom: 25%; right: 0; width: 0.0625rem; background: var(--text-3); opacity: .5; }
.crm .tbl.xl-sheet .col-resize:hover::after, .crm .tbl.xl-sheet .col-resize:focus-visible::after { top: 0; bottom: 0; right: 0; width: 0.1875rem; border-radius: 0.0625rem; background: var(--focus); opacity: 1; }
.crm .tbl.xl-sheet .col-resize:focus-visible { outline: 0.125rem solid var(--focus); outline-offset: -0.125rem; }
.crm .tbl.xl-sheet .row-resize { position: absolute; left: 0; right: 0; bottom: 0; height: 0.375rem; z-index: 1; cursor: row-resize; touch-action: none; }
.crm .tbl.xl-sheet tr:hover .row-resize::after { content: ""; position: absolute; left: 25%; right: 25%; bottom: 0.0625rem; height: 0.125rem; border-radius: 0.0625rem; background: var(--text-3); }
.crm .tbl.xl-sheet .row-resize:hover::after { background: var(--focus); }
.crm .tbl.xl-fixed { table-layout: fixed; }
.crm .tbl.xl-fixed tbody td, .crm .tbl.xl-fixed td.cell-clip { max-width: none; overflow: hidden; text-overflow: ellipsis; }
.crm .tbl.xl-fixed .list-entity { max-width: none; }
.crm .tbl.xl-measure tbody td { white-space: nowrap; }
.crm .tbl.xl-measure .list-name, .crm .tbl.xl-measure .list-meta, .crm .tbl.xl-measure .xl-clamp { white-space: nowrap; display: inline; -webkit-line-clamp: none; }
/* ── PR1.734 (#1076) — jede Tabelle der neuen Ansicht verstellbar (Vorlage V03) ──
   column-resize.js startAutoColumnResize bindet jede <table> mit Kopfzeile an (auch ohne .tbl).
   Ruhe: feine Linie an jedem Kopf. Maus darueber/Fokus: Griff 3 Pixel blau ueber die volle
   Kopfhoehe, dazu eine Hilfslinie durch die Tabelle und der Hinweis. `xl-prop` = Breiten als
   Anteile der Tabellenbreite (die Tabelle bleibt 100 % breit, nie feste Pixel-Spalten).
   Keine Transition: taeglich genutzte Listen. */
.crm table.xl-sheet:not(.tbl) .col-resize { position: absolute; top: 0; right: 0; bottom: 0; width: 0.5rem; z-index: 5; cursor: col-resize; touch-action: none; }
.crm table.xl-sheet:not(.tbl) .col-resize::after { content: ""; position: absolute; top: 25%; bottom: 25%; right: 0; width: 0.0625rem; background: var(--text-3); opacity: .5; }
.crm table.xl-sheet:not(.tbl) .col-resize:hover::after, .crm table.xl-sheet:not(.tbl) .col-resize:focus-visible::after { top: 0; bottom: 0; right: 0; width: 0.1875rem; border-radius: 0.0625rem; background: var(--focus); opacity: 1; }
.crm table.xl-sheet:not(.tbl) .col-resize:focus-visible { outline: 0.125rem solid var(--focus); outline-offset: -0.125rem; }
.crm table.xl-prop.xl-fixed { table-layout: fixed; width: 100%; max-width: 100%; }
.crm table.xl-prop.xl-measure th, .crm table.xl-prop.xl-measure td { white-space: nowrap; }
/* Gekuerzt wird nur Fliesstext (column-resize.js setzt .xl-cut + title); Zahlen, Daten, Pillen nie. */
.crm table.xl-prop.xl-fixed tbody td { overflow: visible; text-overflow: clip; }
/* Kopf: Beschriftung passt immer (Untergrenze); Zusatzhinweise im Kopf werden gekuerzt statt in die
   Nachbarkoepfe zu laufen (title traegt den vollen Text). Der Griff liegt innen am rechten Rand. */
.crm table.xl-prop.xl-fixed thead th.xl-kopf-cut { overflow: hidden; text-overflow: ellipsis; }
.crm table.xl-prop.xl-fixed tbody td.xl-cut { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Text + Schild in einer Textzelle: nur der Text kuerzt, das Schild bleibt ganz (Breite reserviert
   column-resize.js). Schilder einer Textzelle brechen nicht um. */
.crm table.xl-prop.xl-fixed tbody td.xl-cut .cc-tzeile { display: flex; align-items: center; gap: 0.3333rem; min-width: 0; }
.crm table.xl-prop.xl-fixed tbody td.xl-cut .cc-tz-text { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.crm table.xl-prop.xl-fixed tbody td.xl-cut .cc-tzeile > .cz-src-tag { flex: none; }
.crm table.xl-prop.xl-fixed tbody td.xl-cut .emp-skills { flex-wrap: nowrap; }
/* Unterzeile unter einem Zaehler („0 / 4“ + Text): kuerzt selbst mit „…“, die Zelle laeuft nicht ueber. */
.crm table.xl-prop.xl-fixed tbody td.xl-cut .cc-sub { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Zeilenkopf (th scope=row) als Textspalte: Name und Unterzeile kuerzen selbst mit „…“ (title traegt den
   vollen Text), Kuerzel und Status-Pille bleiben ganz. Nie ueber den Zellrand, nie unter eine Pille. */
.crm table.xl-prop.xl-fixed tbody th.xl-cut { overflow: hidden; }
/* Nur reiner Text (keine Element-Kinder) wird einzeilig mit „…“ gekuerzt; Zeilenkoepfe mit Block-Kindern
   (Teams-Name + Anbieter, Rechte Titel + Unterzeile) brechen wie gehabt um. */
.crm table.xl-prop.xl-fixed tbody th.xl-cut:not(:has(*)) { text-overflow: ellipsis; white-space: nowrap; }
.crm table.xl-prop.xl-fixed tbody th.xl-cut .cc-name { min-width: 0; }
.crm table.xl-prop.xl-fixed tbody th.xl-cut .cc-name > span:not(.cc-mono) { display: block; min-width: 0; overflow: hidden; }
.crm table.xl-prop.xl-fixed tbody th.xl-cut .cc-name b { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.crm table.xl-prop.xl-fixed tbody th.xl-cut .cc-sub { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.crm table.xl-prop.xl-fixed tbody th.xl-cut .cc-tzeile { display: flex; align-items: center; gap: 0.3333rem; min-width: 0; }
.crm table.xl-prop.xl-fixed tbody th.xl-cut .cc-tz-text { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.crm table.xl-prop.xl-fixed tbody th.xl-cut .cc-tzeile > .cc-inline { flex: none; margin-left: 0; }
/* Personenknopf in einer Textspalte (Zertifikate je Person, Pflege): Name endet mit „…“, Bild bleibt ganz. */
.crm table.xl-prop.xl-fixed tbody td.xl-cut .cz-person { max-width: 100%; min-width: 0; overflow: hidden; }
.crm table.xl-prop.xl-fixed tbody td.xl-cut .cz-person > :not(.cz-person-name) { flex: none; }
.crm table.xl-prop.xl-fixed tbody td.xl-cut .cz-person-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
body.col-resizing, body.col-resizing * { cursor: col-resize !important; user-select: none; }
.crm .col-resize-guide { position: fixed; z-index: 60; width: 0.1333rem; background: var(--focus); opacity: .55; pointer-events: none; }
.crm .col-resize-tip { font-size: var(--fs-meta); position: fixed; z-index: 61; display: flex; flex-direction: column; gap: 0.2rem; padding: 0.6rem 0.9333rem 0.8rem; min-width: 20rem; max-width: 26.6667rem; border-radius: var(--r-sm); background: var(--ad-blue-800); color: white; box-shadow: var(--shadow-2); pointer-events: none; }
.crm .col-resize-tip-t { font-size: var(--fs-meta); font-weight: 400; line-height: 1.1333rem; white-space: nowrap; }
.crm .col-resize-tip-s { font-size: var(--fs-label); font-weight: 400; line-height: 0.9333rem; opacity: .78; white-space: nowrap; }
.crm .col-resize-tip[hidden], .crm .col-resize-guide[hidden] { display: none; }
.crm .tbl:not([data-row-lines="1"])[data-row-lines] td:has(.list-name, .xl-clamp) { white-space: normal; }
.crm .tbl:not([data-row-lines="1"])[data-row-lines] .list-name,
.crm .tbl:not([data-row-lines="1"])[data-row-lines] .list-meta,
.crm .tbl:not([data-row-lines="1"])[data-row-lines] .xl-clamp {
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: var(--row-lines, 3);
  white-space: normal; overflow: hidden; overflow-wrap: break-word;
}

/* PR1.650 (#949) — Pythia-Start im Redesign: Gruss + Stand-Stempel, drei Karten mit Live-Zahl,
   „Weiter, wo du warst". Neutral weiss, Orange bleibt der KI; rot/ocker nur als Punkt.
   Einfahren ueber .mo-stagger (style.css), reduzierte Bewegung = globale Regel. */
.crm .vs-stand { display: inline-flex; align-items: center; gap: var(--s-2); margin: var(--s-3) 0 0; font-size: var(--fs-meta); color: var(--text-3); }
.crm .vs-stand-punkt { width: 0.5rem; height: 0.5rem; border-radius: 50%; background: var(--success); animation: vsPuls var(--mo-pulse) ease-in-out infinite; }
@keyframes vsPuls { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } }
.crm .vs-fuer-dich { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: var(--s-3); row-gap: var(--s-2); margin-top: var(--s-5); align-items: center; }
.crm .vs-titel, .crm .vs-weiter-titel { margin: 0; }
.crm .vs-karten { grid-column: 1 / -1; grid-row: 2; display: grid; grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); gap: var(--s-3); }
.crm .vs-tausch { grid-column: 2; grid-row: 1; appearance: none; background: none; border: none; color: var(--text-2); font: inherit; font-size: var(--fs-meta); cursor: pointer; display: inline-flex; align-items: center; gap: var(--s-2); padding: var(--s-1) var(--s-2); border-radius: var(--r-sm); }
.crm .vs-tausch:hover { color: var(--text-1); }
.crm .vs-karte { position: relative; appearance: none; display: flex; flex-direction: column; align-items: flex-start; gap: var(--s-2); text-align: left; padding: var(--s-4); min-width: 0; font: inherit; color: var(--text-1); background: var(--bg-card); border: 0.0625rem solid var(--border); border-radius: var(--r-lg); cursor: pointer; transition: transform 180ms var(--ease-out), border-color 180ms var(--ease-out); }
.crm .vs-karte:hover { transform: translateY(-0.125rem); border-color: var(--border-strong); }
.crm .vs-karte:active { transform: scale(0.97); transition-duration: 140ms; }
.crm .vs-karte:focus-visible, .crm .vs-tausch:focus-visible, .crm .vs-weiter-knopf:focus-visible { outline: 0.125rem solid var(--focus, var(--primary)); outline-offset: 0.125rem; }
.crm .vs-punkt { position: absolute; top: var(--s-4); right: var(--s-4); width: 0.5rem; height: 0.5rem; border-radius: 50%; background: var(--text-3); }
.crm .vs-punkt-rot { background: var(--danger); }
.crm .vs-punkt-ocker { background: var(--warning); }
.crm .vs-zahl { font-family: var(--f-cond); font-size: var(--fs-kpi); font-weight: 600; line-height: 1.1; font-variant-numeric: tabular-nums; }
.crm .vs-einheit { font-family: inherit; font-size: var(--fs-body); font-weight: 500; color: var(--text-2); }
.crm .vs-satz { font-size: var(--fs-body); color: var(--text-2); }
.crm .vs-logos { display: inline-flex; gap: var(--s-1); margin-top: var(--s-1); }
.crm .vs-zusatz { font-size: var(--fs-meta); color: var(--text-3); margin-top: var(--s-1); }
.crm .vs-fuss-zeichen { display: inline-flex; vertical-align: middle; margin-right: var(--s-1); }
.crm .vs-fuss { margin-top: auto; padding-top: var(--s-2); font-size: var(--fs-meta); color: var(--text-3); }
.crm .vs-skelett { min-height: 8.5rem; cursor: default; background: var(--bg-card2); }
.crm .vs-skelett:hover { transform: none; border-color: var(--border); }
.crm .vs-karten.is-tausch .vs-karte { animation: vsBlende 160ms var(--ease-out) both; }
@keyframes vsBlende { from { opacity: 0; } to { opacity: 1; } }
.crm .vs-leer { margin: var(--s-5) 0 var(--s-2); color: var(--text-2); font-size: var(--fs-body); }
.crm .vs-weiter { margin-top: var(--s-5); display: flex; flex-direction: column; gap: var(--s-2); }
.crm .vs-weiter-reihe { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.crm .vs-weiter-knopf { appearance: none; display: inline-flex; align-items: center; gap: var(--s-2); max-width: 100%; padding: var(--s-2) var(--s-4) var(--s-2) var(--s-3); font: inherit; font-size: var(--fs-body); color: var(--text-1); background: var(--bg-card); border: 0.0625rem solid var(--border); border-radius: 62rem; cursor: pointer; transition: border-color 180ms var(--ease-out); }
.crm .vs-weiter-knopf:hover { border-color: var(--border-strong); }
.crm .vs-weiter-zeichen { display: inline-flex; color: var(--text-2); }
.crm .vs-weiter-titel-text { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 16rem; }
.crm .vs-weiter-zusatz { font-size: var(--fs-meta); color: var(--text-3); white-space: nowrap; }
.crm .pythia-leiste .vs-karten { grid-template-columns: minmax(0, 1fr); }

/* ── PR1.700 (#1004) — Filter in EINER Zeile, Optik der neuen Shell ──
   Grundregeln (Aufbau, Popover, Haken) in style.css; hier nur die Tokens der Redesign-Shell
   und das Band unter der Werkzeugleiste wie in der Vorlage (filterzeile-03-11, Bild 2/3).
   Ohne px (ui-craft-Ratchet). Täglich genutzt → keine Übergänge. */
.crm .crm-opp-filter-panel,
.crm .crm-project-filter-panel {
  display: block;
  background: var(--bg-surface-2);
  border: .0625rem solid var(--border);
  border-radius: var(--r-md, .625rem);
  padding: .3125rem .875rem;
}
.crm .filter-line { gap: .5rem; }
.crm .fl-dims { gap: .375rem; padding: .1875rem .25rem; }
.crm .fl-btn {
  border: .0625rem solid var(--border-strong); background: var(--bg-surface); color: var(--text-1);
  font-size: var(--fs-meta); font-weight: 600; border-radius: .4375rem; padding: .25rem .5625rem; gap: .3125rem;
}
.crm .fl-btn:hover { border-color: var(--ad-blue); }
.crm .fl-btn:focus-visible { outline: .125rem solid var(--focus); outline-offset: .0625rem; }
.crm .fl-v { color: var(--text-3); font-weight: 500; }
.crm .fl-caret { width: .75rem; height: .75rem; color: var(--text-3); }
.crm .fl-dd.is-active > .fl-btn { background: var(--tint-blue); border-color: rgba(0,110,199,.30); color: var(--ad-blue); }
.crm .fl-dd.is-active > .fl-btn .fl-v,
.crm .fl-dd.is-active > .fl-btn .fl-caret { color: var(--ad-blue); }
.crm .fl-dd.is-open > .fl-btn { border-color: var(--ad-blue); box-shadow: 0 0 0 .1875rem var(--tint-blue); }
.crm .fl-pop {
  background: var(--bg-surface); border: .0625rem solid var(--border-strong); border-radius: .625rem;
  box-shadow: var(--shadow-3); padding: .375rem; min-width: 15rem; max-width: 22.5rem;
}
.crm .fl-pop:has(.fl-q) { min-width: 18.75rem; }
.crm .fl-q { border: .0625rem solid var(--border-strong); border-radius: .4375rem; padding: .3125rem .5rem; margin: .125rem .125rem .375rem; gap: .4375rem; color: var(--text-3); }
.crm .fl-q:focus-within { border-color: var(--ad-blue); }
.crm .fl-q-ic { width: .875rem; height: .875rem; }
.crm .fl-q input, .crm .fl-q input:focus, .crm .fl-q input:focus-visible { font-size: var(--fs-meta); color: var(--text-1); border: 0; box-shadow: none; outline: 0; background: transparent; padding: 0 0 0 .125rem; height: auto; min-height: 0; }
.crm .fl-opts { max-height: 17.5rem; }
.crm .fl-opt { gap: .5625rem; padding: .375rem .5rem; border-radius: .375rem; font-size: var(--fs-meta); color: var(--text-1); }
.crm .fl-opt:hover, .crm .fl-opt:focus-visible { background: var(--bg-hover); }
.crm .fl-opt:focus-visible { box-shadow: inset 0 0 0 .125rem var(--focus); }
.crm .fl-bx { width: 1rem; height: 1rem; border-radius: .25rem; border: .09375rem solid var(--border-strong); }
.crm .fl-opt.is-on .fl-bx { background: var(--ad-blue); border-color: var(--ad-blue); }
.crm .fl-opt.is-on .fl-bx::after { width: .5rem; height: .25rem; border-width: .125rem; }
.crm .fl-opt.is-radio .fl-bx { border-radius: 50%; }
.crm .fl-opt.is-radio.is-on .fl-bx { background: transparent; }
.crm .fl-opt.is-radio.is-on .fl-bx::after { width: .5rem; height: .5rem; background: var(--ad-blue); }
.crm .fl-opt.tone-orange .fl-lbl { color: var(--warn-ink, var(--text-1)); }
.crm .fl-n { color: var(--text-3); font-size: var(--fs-label); padding-left: .75rem; }
.crm .fl-empty { padding: .5rem; font-size: var(--fs-meta); color: var(--text-3); }
.crm .fl-foot { border-top: .0625rem solid var(--border); margin-top: .375rem; padding: .4375rem .375rem .125rem; }
.crm .fl-link, .crm .fl-reset { color: var(--ad-blue); font-size: var(--fs-meta); font-weight: 600; padding: .125rem 0; }
.crm .fl-reset { margin-left: .375rem; }
.crm .fl-link:focus-visible, .crm .fl-reset:focus-visible { outline: .125rem solid var(--focus); outline-offset: .125rem; border-radius: .1875rem; }
/* PR1.751 (#1064) — Portfolio-Auswahl mit Suche und Gruppen je CC (Vorlage V22, PNG 1:1 in
   App-px gemessen, 1 rem = 15 px): 400 px breit, Gruppenkopf 36 px, Zeile 32 px, Kästchen 18 px
   bündig unter dem Gruppen-Kästchen, Trennlinien über die volle Breite. Kein Übergang: täglich
   genutzt, Auf-/Zuklappen sofort. */
.crm .fl-pop.is-grouped { box-sizing: border-box; width: 26.6667rem; min-width: 0; max-width: calc(100vw - 1rem); padding: .375rem .375rem 0; overflow: hidden; }
.crm .fl-pop.is-grouped .fl-q { box-sizing: border-box; min-height: 2.4rem; margin: .375rem .375rem .25rem; padding: 0 .625rem 0 .75rem; gap: .5rem; flex: none; }
.crm .fl-pop.is-grouped .fl-q-ic { width: .9333rem; height: .9333rem; }
.crm .fl-pop.is-grouped .fl-q input, .crm .fl-pop.is-grouped .fl-q input:focus, .crm .fl-pop.is-grouped .fl-q input:focus-visible { font-size: var(--fs-ui); }
.crm .fl-pop.is-grouped .fl-q input::placeholder { color: var(--text-3); }
.crm .fl-hits { flex: none; margin-left: auto; font-size: var(--fs-label); color: var(--text-3); font-variant-numeric: tabular-nums; white-space: nowrap; }
.crm .fl-hits[hidden] { display: none; }
.crm .fl-pop.is-grouped .fl-opts { max-height: none; flex: 1 1 auto; min-height: 0; overflow-y: auto; margin: 0 -.375rem; padding: 0 .375rem; }
.crm .fl-grp[hidden] { display: none; }
.crm .fl-grp + .fl-grp { border-top: .0625rem solid var(--border); margin: 0 -.375rem; padding: 0 .375rem; }
.crm .fl-grp:not(.is-open) .fl-gopts { display: none; }
.crm .fl-grp.is-open .fl-gopts { padding-bottom: .125rem; }
.crm .fl-gh { display: flex; align-items: center; min-height: 2.3333rem; gap: 0; cursor: pointer; }
.crm .fl-gtog { flex: none; display: grid; place-items: center; width: 2.1333rem; height: 2.1333rem; padding: 0; border: 0; border-radius: .375rem; background: transparent; color: var(--text-3); cursor: pointer; }
.crm .fl-gchev { width: .8rem; height: .8rem; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; transform: rotate(0deg); }
.crm .fl-grp.is-open .fl-gchev { transform: rotate(90deg); }
.crm .fl-gtog:hover { color: var(--text-1); }
.crm .fl-gtog:focus-visible, .crm .fl-gbx:focus-visible { outline: .1334rem solid var(--focus); outline-offset: .0625rem; }
.crm .fl-gbx {
  position: relative; flex: none; display: grid; place-items: center; box-sizing: border-box;
  width: 1.2rem; height: 1.2rem; padding: 0; border-radius: .25rem; border: .09375rem solid var(--border-strong);
  background: var(--bg-surface); cursor: pointer;
}
.crm .fl-gbx.is-on, .crm .fl-gbx.is-mixed { background: var(--ad-blue); border-color: var(--ad-blue); }
.crm .fl-gbx.is-on::after { content: ""; width: .5625rem; height: .3125rem; border: .125rem solid var(--text-inv); border-top: 0; border-right: 0; transform: rotate(-45deg) translate(.0625rem, -.0625rem); }
.crm .fl-gbx.is-mixed::after { content: ""; width: .6rem; height: .125rem; border-radius: .0625rem; background: var(--text-inv); }
.crm .fl-gname { flex: 1 1 auto; min-width: 0; margin-left: .75rem; font-size: var(--fs-ui); font-weight: 600; color: var(--text-1); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.crm .fl-gmeta { flex: none; padding: 0 .5rem 0 .75rem; font-size: var(--fs-label); font-weight: 500; color: var(--text-3); font-variant-numeric: tabular-nums; white-space: nowrap; }
.crm .fl-pop.is-grouped .fl-opt { box-sizing: border-box; min-height: 2.1333rem; gap: .75rem; padding: 0 .5rem 0 2.1333rem; border-radius: .5rem; font-size: var(--fs-ui); }
.crm .fl-pop.is-grouped .fl-opt.is-on { background: var(--tint-blue); }
.crm .fl-pop.is-grouped .fl-opt.is-on:hover, .crm .fl-pop.is-grouped .fl-opt.is-on:focus-visible { background: color-mix(in srgb, var(--tint-blue) 70%, var(--bg-hover)); }
.crm .fl-pop.is-grouped .fl-bx { box-sizing: border-box; width: 1.2rem; height: 1.2rem; }
.crm .fl-pop.is-grouped .fl-opt.is-on .fl-bx::after { width: .5625rem; height: .3125rem; }
.crm .fl-pop.is-grouped .fl-n { padding-left: .75rem; }
.crm mark.fl-hit { background: var(--treffer); color: inherit; border-radius: .125rem; padding: .0625rem 0; margin: 0; }
.crm .fl-pop.is-grouped .fl-q input::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; display: none; }
.crm .fl-pop.is-grouped .fl-empty { padding: .75rem .625rem; font-size: var(--fs-ui); }
.crm .fl-pop.is-grouped .fl-empty .fl-link { font-size: var(--fs-ui); margin-left: .25rem; }
.crm .fl-foot.is-grouped {
  display: flex; align-items: center; justify-content: flex-start; gap: 1.1333rem; flex: none;
  box-sizing: border-box; min-height: 2.6667rem; margin: 0 -.375rem; padding: 0 .7333rem 0 1rem;
  border-top: .0625rem solid var(--border);
}
.crm .fl-foot.is-grouped .fl-link { font-size: var(--fs-ui); }
.crm .fl-note { margin-left: auto; font-size: var(--fs-ui); font-weight: 500; color: var(--text-3); white-space: nowrap; }
.crm .fl-cnt {
  display: inline-grid; place-items: center; box-sizing: border-box; min-width: 1.2rem; height: 1.2rem; padding: 0 .3125rem;
  border-radius: 62.4375rem; background: var(--ad-blue); color: var(--text-inv); font-size: var(--fs-label); font-weight: 600; font-variant-numeric: tabular-nums;
}
/* PR1.751 — dieselbe Portfolio-Auswahl als einzelner Knopf in fremden Leisten (Mitarbeiter-Liste,
   Dashboard-Seitenfilter): kein eigener Zeilenumbruch, Maße der Nachbarknöpfe (gemessen: 34 px hoch;
   Dashboard 14 px/500, Radius 8 px; Mitarbeiter 15 px/400, Radius 6 px, Rand --border). */
.crm .emp-filter-bar > .filter-line, .crm .dash-pf-portfolio > .filter-line { width: auto; flex: none; }
.crm .emp-filter-bar > .filter-line .fl-dims, .crm .dash-pf-portfolio .fl-dims { padding: 0; overflow: visible; }
.crm .dash-pf-portfolio { display: flex; align-items: center; flex: none; }
.crm .dash-pf-portfolio .fl-btn { box-sizing: border-box; min-height: 2.2667rem; padding: 0 .7333rem; font-size: var(--fs-ui); font-weight: 500; border-radius: .5333rem; }
.crm .emp-filter-bar > .filter-line .fl-btn { box-sizing: border-box; min-height: 2.2667rem; padding: 0 .8rem; font-size: var(--fs-body); font-weight: 400; border-radius: .4rem; border-color: var(--border); }
.crm .fl-actions { gap: .25rem; }
.crm .fl-actions .fl-act { display: inline-flex; align-items: center; gap: .375rem; padding: .3125rem .5rem; font-size: var(--fs-meta); font-weight: 600; color: var(--text-2); }
.crm .fl-actions .fl-act.is-on { color: var(--ad-blue); }

/* ============== PR1.681 (#980) — Gemeinsam staffen mit ähnlichen Vorhaben (Bild M5, Marke 1) ==============
   Karte unter dem Staffing-Block: Kopf, Untertitel, je Vorhaben eine Zeile (Logo, Titel, Unterzeile,
   Gründe-Chips), Knopfzeile. Täglich genutzt → keine Animation. */
.crm .aehnl-karte {
  background: linear-gradient(180deg, color-mix(in srgb, var(--primary) 5%, var(--bg-surface)), var(--bg-surface) 60%);
  border: thin solid color-mix(in srgb, var(--primary) 22%, var(--border));
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-1);
  padding: 0.875rem 1rem;
}
.crm .aehnl-titel { display: flex; align-items: center; gap: var(--s-2); margin: 0 0 var(--s-2); font-size: var(--fs-ui); font-weight: 600; color: var(--text-1); }
.crm .aehnl-titel svg { width: 1rem; height: 1rem; flex: none; }
.crm .aehnl-unter { margin: -0.125rem 0 0.375rem; font-size: var(--fs-meta); color: var(--text-3); }
.crm .aehnl-liste { display: flex; flex-direction: column; }
.crm .aehnl-zeile {
  display: flex; align-items: center; gap: 0.625rem; width: 100%; padding: var(--s-2) 0;
  border: 0; border-top: thin solid var(--border); background: none; color: inherit;
  font: inherit; font-size: var(--fs-ui); text-align: left; cursor: pointer;
}
.crm .aehnl-zeile[hidden] { display: none; }
.crm .aehnl-zeile:hover .aehnl-text b { color: var(--primary-text); }
.crm .aehnl-zeile:focus-visible { outline: 0.125rem solid var(--focus); outline-offset: 0.125rem; border-radius: var(--r-sm); }
.crm .aehnl-logo { flex: none; }
.crm .aehnl-text { display: flex; flex-direction: column; min-width: 0; flex: 1 1 auto; }
.crm .aehnl-text b { font-size: var(--fs-ui); font-weight: 600; color: var(--text-1); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.crm .aehnl-text small { display: flex; min-width: 0; font-size: var(--fs-label); color: var(--text-3); white-space: nowrap; }
.crm .aehnl-wo { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.crm .aehnl-rollen { flex: none; white-space: pre; }
.crm .aehnl-gruende { display: flex; flex-wrap: nowrap; justify-content: flex-end; gap: var(--s-2); flex: 0 0 auto; min-width: 0; max-width: 50%; }
.crm .aehnl-chip { min-width: 0; overflow: hidden; text-overflow: ellipsis; font-size: var(--fs-label); font-weight: 600; color: var(--text-2); background: var(--bg-surface-3); border-radius: var(--r-sm); padding: 0.0625rem 0.4375rem; white-space: nowrap; }
.crm .aehnl-mehr { align-self: flex-start; margin: var(--s-1) 0 0; padding: var(--s-1) 0.375rem; border: 0; background: none; font: inherit; font-size: var(--fs-label); font-weight: 600; color: var(--primary-text); cursor: pointer; }
.crm .aehnl-mehr:focus-visible { outline: 0.125rem solid var(--focus); outline-offset: 0.125rem; border-radius: var(--r-sm); }
.crm .aehnl-knoepfe { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); margin-top: var(--s-2); }
.crm .aehnl-knoepfe .btn svg { width: 1rem; height: 1rem; }
.crm .aehnl-knoepfe .btn:disabled { opacity: .5; cursor: not-allowed; box-shadow: none; transform: none; }
.crm .aehnl-knoepfe .btn-primary:disabled:hover { background: var(--ad-blue); border-color: var(--ad-blue); }
.crm .aehnl-hinweis { font-size: var(--fs-meta); color: var(--text-3); }
.crm .aehnl-allein, .crm .aehnl-fehler { margin: var(--s-1) 0 0; padding-top: var(--s-2); border-top: thin solid var(--border); font-size: var(--fs-label); color: var(--text-2); }
.crm .aehnl-erneut { padding: 0; border: 0; background: none; font: inherit; color: var(--primary-text); font-weight: 600; cursor: pointer; }
.crm .aehnl-platz { cursor: default; }
.crm .aehnl-platz-logo { width: 1.75rem; height: 1.75rem; border-radius: var(--r-sm); background: var(--bg-surface-3); flex: none; }
.crm .aehnl-platz-text { height: 1.75rem; flex: 0 1 50%; border-radius: var(--r-sm); background: var(--bg-surface-3); }
/* PR1.681 (#980) — Palette „Staffen": Meta rechts einzeilig, grau (Bild M5, Marke 3). */
.crm .cmdk-meta { font-size: var(--fs-meta); color: var(--text-3); white-space: nowrap; }

/* ═══════════════════════════════════════════════════════════════════════════
   PR1.527 — Pythia neu geordnet (Entwurf 08/09). Zwilling in style.css.
   Taeglich genutzt: keine Animation, keine Verlaeufe, keine Glows. rem + Tokens.
   ═══════════════════════════════════════════════════════════════════════════ */
.crm .pythia-bereich { grid-template-columns: 17rem minmax(0, 1fr); }
.crm .pythia-gespraeche { padding: var(--s-3); }
.crm .pythia-hauptteil { padding: 0; }
.crm .pythia-kopf { margin: 0; padding: var(--s-3) var(--s-5); border-bottom: var(--chat-linie, 0.0625rem) solid var(--border); flex-wrap: wrap; }
.crm .pythia-kopf-rechts { margin-left: auto; display: flex; align-items: center; gap: var(--s-2); flex-wrap: wrap; }
.crm .pythia-bestand { display: inline-flex; align-items: center; gap: var(--s-1); padding: var(--s-1) var(--s-3); border-radius: 999rem; background: var(--bg-card2); font-size: var(--fs-ui); font-weight: 500; color: var(--text-1); white-space: nowrap; font-variant-numeric: tabular-nums; }
.crm .pythia-bestand-titel { color: var(--text-2); font-weight: 400; }
.crm .pythia-lesespalte { max-width: 51.25rem; margin: 0 auto; padding: var(--s-6) clamp(var(--s-3), 2.5vw, var(--s-5)); }

/* Gespraechsliste: Gruppen, Suche, Zeilenknoepfe erst bei Hover oder Fokus */
.crm .chat-gespraech-neu { width: 100%; justify-content: center; display: inline-flex; align-items: center; gap: var(--s-2); }
.crm .chat-gespraeche-suche { width: 100%; }
.crm .chat-gespraeche-gruppe + .chat-gespraeche-gruppe { margin-top: var(--s-3); }
.crm .chat-gespraeche-gruppe .chat-gespraeche-titel { display: block; margin: 0 0 var(--s-1); padding: 0 var(--s-2); font-size: var(--fs-meta); font-weight: 500; color: var(--text-2); text-transform: none; letter-spacing: 0; }
.crm .chat-gespraech-oeffnen { display: flex; align-items: center; gap: var(--s-2); }
.crm .chat-gespraech-zeichen { flex: none; display: inline-flex; color: var(--text-3); }
.crm .chat-gespraech-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.crm .chat-gespraech { position: relative; }
/* Die Knoepfe liegen ueber dem Zeilenende statt Platz zu belegen — sonst kuerzten
   unsichtbare Knoepfe jeden Titel. */
.crm .chat-gespraech-knoepfe { opacity: 0; position: absolute; right: 0.125rem; top: 50%; transform: translateY(-50%); background: var(--bg-card2); border-radius: var(--r-sm); }
.crm .chat-gespraech:hover .chat-gespraech-knoepfe,
.crm .chat-gespraech:focus-within .chat-gespraech-knoepfe,
.crm .chat-gespraech.is-aktiv .chat-gespraech-knoepfe { opacity: 1; }
.crm .chat-gespraech-oeffnen:focus-visible,
.crm .chat-gespraech-knoepfe .icon-btn:focus-visible,
.crm .chat-beispiel:focus-visible { outline: var(--chat-linie-aktiv, 0.125rem) solid var(--focus, var(--primary)); outline-offset: 0.0625rem; }
.crm .chat-gespraeche-frist { margin: var(--s-3) 0 0; padding: 0 var(--s-2); color: var(--text-3); font-size: var(--fs-meta); }

/* Leerzustand: Ueberschrift, Satz, Eingabe-Karte, Vorschlaege nach Art */
.crm .chat-panel.is-leer { padding-top: var(--s-8); }
/* Pythia-Zeichen neben der Begruessung (Bild P1): grosses Zeichen im hellen runden Feld, Text rechts daneben */
.crm .chat-leer-kopf { display: flex; align-items: center; gap: var(--s-3); margin: 0 0 var(--s-2); }
.crm .chat-leer-kopf .chat-leer-titel { margin: 0; }
.crm .chat-leer-kopf .chat-leer-sub { margin: 0; }
.crm .chat-leer-text { display: flex; flex-direction: column; min-width: 0; }
.crm .chat-leer-zeichen { display: inline-flex; flex: none; align-items: center; justify-content: center; width: 3rem; height: 3rem; box-sizing: border-box; border-radius: 50%; background: var(--bg-card); box-shadow: var(--shadow-1), 0 0 0 0.0625rem var(--border); color: var(--text-2); }
.crm .chat-panel.is-leer .chat-leer { padding: 0; text-align: left; }
.crm .chat-leer-titel { font-family: var(--f-cond); font-size: 2.1333rem; font-weight: 700; line-height: 1.15; margin: 0 0 var(--s-2); } /* PR1.567 Ausnahme: Pythia-Gruss, Bild P1 (32 px = 2.1333rem bei 15 px Basis) */
.crm .chat-leer-zeile { display: flex; flex-wrap: wrap; align-items: center; column-gap: var(--s-3); row-gap: var(--s-1); }
.crm .chat-leer-zeile .vs-stand { margin: 0; }
.crm .chat-leer-sub { margin: 0; font-size: var(--fs-body); color: var(--text-2); }
.crm .chat-beispiele { display: grid; grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); gap: var(--s-3); align-items: stretch; }
.crm .chat-beispiel { display: flex; flex-direction: column; align-items: flex-start; gap: var(--s-1); text-align: left; padding: var(--s-3) var(--s-4); background: var(--bg-card); max-width: none; }
.crm .chat-beispiel-art { font-size: var(--fs-meta); font-weight: 500; color: var(--text-2); }
.crm .chat-beispiel-text { color: var(--text-1); }

/* Eingabe als Karte */
.crm .chat-form.chat-eingabe-karte { flex-direction: column; align-items: stretch; flex-wrap: nowrap; gap: var(--s-2); padding: var(--s-3) var(--s-4); border: var(--chat-linie, 0.0625rem) solid var(--border); border-radius: var(--r-lg); background: var(--bg-card); box-shadow: var(--shadow-1); }
.crm .chat-eingabe-karte:focus-within { border-color: var(--primary); }
.crm .chat-eingabe-karte .chat-eingabe { flex: none; width: 100%; min-height: 4.5rem; border: none; background: transparent; padding: var(--s-1) 0; resize: none; box-shadow: none; outline: none; }
.crm .chat-eingabe-fuss { display: flex; align-items: center; gap: var(--s-3); flex-wrap: wrap; }
.crm .chat-eingabe-platz { flex: 1 1 auto; }
.crm .chat-eingabe-hinweis { color: var(--text-3); font-size: var(--fs-ui); }
.crm .chat-eingabe-hinweis { display: inline-flex; align-items: center; gap: var(--s-1); }
.crm .chat-eingabe-hinweis kbd { font: inherit; display: inline-flex; align-items: center; }

/* Gespraech: eigene Frage rechts als Blase, Antwort links mit Marke */
.crm .chat-zeile.chat-ich { border-radius: var(--r-lg); border: none; box-shadow: none; padding: var(--s-3) var(--s-4); }
.crm .chat-zeile.chat-apollon { display: grid; grid-template-columns: 1.75rem minmax(0, 1fr); gap: var(--s-3); padding: 0; background: none; border: none; box-shadow: none; }
.crm .chat-marke { width: 1.75rem; height: 1.75rem; border-radius: var(--r-sm); display: inline-flex; align-items: center; justify-content: center; background: var(--pythia-terra-grund); color: var(--pythia-terra); }
.crm .chat-antwort { min-width: 0; }

/* Belege als Chips, Nummer im Chip */
.crm .chat-quellen { gap: var(--s-2); }
.crm .chat-quelle { display: inline-flex; align-items: center; gap: var(--s-2); background: var(--bg-card); }
.crm .chat-quelle .chat-quelle-nr { flex: none; font-weight: 600; color: var(--chat-link); }
.crm .chat-quelle-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Seitenleiste: schmal — Vorschlaege untereinander, kein Luftraum ueber der Ueberschrift */
.crm .pythia-leiste .chat-beispiele { grid-template-columns: minmax(0, 1fr); gap: var(--s-2); }
.crm .pythia-leiste .chat-panel.is-leer { padding-top: var(--s-2); }


/* PR1.514 — Team-Spalte der Projektliste: Fotos + Karte (team-stack.js). Masse stehen in
   style.css; hier nur die Redesign-Farben. Die Karte haengt an .crm (fixed). */
.crm { --team-ring: var(--bg-surface); --team-more-bg: var(--bg-surface-3); }
.crm .team-stack-item:focus-visible { border-radius: 50%; } /* Fokusring folgt dem Kreis (statt inherit) */
.crm .team-hc {
  background: var(--bg-surface); color: var(--text-1); border-color: var(--border);
  border-radius: var(--r-lg); box-shadow: var(--shadow-3); font-family: var(--f-sans);
}

/* PR1.507 (#787) — Schalter „Zeilen: Einzeilig | Umbrechen" im Fenster „Filter & Anpassen". */
.crm .row-mode-switch { display: inline-flex; align-items: center; gap: var(--s-2); font-size: var(--fs-ui); color: var(--text-2); }
.crm .row-mode-segs { display: inline-flex; border: 0.0625rem solid var(--border); border-radius: 0.5rem; overflow: hidden; }
.crm .row-mode-seg { padding: 0.375rem 0.75rem; border: 0; background: var(--bg-surface); color: var(--text-2); font: inherit; cursor: pointer; }
.crm .row-mode-seg + .row-mode-seg { border-left: 0.0625rem solid var(--border); }
.crm .row-mode-seg.is-on { background: var(--bg-surface-2); color: var(--text-1); font-weight: 600; }
.crm .row-mode-seg:focus-visible { outline: 0.125rem solid var(--focus); outline-offset: 0.125rem; }
.crm .row-mode-error { font-size: var(--fs-meta); color: var(--ad-red-700); }

/* ──────────────────────────────────────────────────────────────────────────
   PR1.528 — Pythia liest Dateien (Entwurf 09). Zwilling in style.css.
   Karten im Eingabefeld: Typ-Kachel, Name, Lesestand, ×. Getoente Kachel mit
   Grundtext statt Weiss auf Farbe — haelt AA in Hell und Dunkel.
   ────────────────────────────────────────────────────────────────────────── */
.crm .chat-eingabe-karte { position: relative; }
.crm .chat-anhaenge { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--s-2); }
.crm .chat-anhang { display: flex; align-items: center; gap: var(--s-2); min-width: 0; flex: 0 1 15rem; padding: var(--s-2); border: var(--chat-linie, 0.0625rem) solid var(--border); border-radius: var(--r-md); background: var(--bg-card2); }
.crm .chat-anhang.is-fehler { border-color: var(--danger); background: var(--tint-red); }
.crm .chat-anhang-typ { flex: none; width: 2.25rem; height: 2.25rem; border-radius: var(--r-sm); display: inline-flex; align-items: center; justify-content: center; font-size: var(--fs-label); font-weight: 500; letter-spacing: 0.02em; color: var(--text-1); background: var(--bg-card); }
.crm .chat-anhang-typ.typ-pdf { background: var(--tint-red); }
.crm .chat-anhang-typ.typ-xlsx { background: var(--tint-green); }
.crm .chat-anhang-typ.typ-docx { background: var(--tint-blue); }
.crm .chat-anhang-typ.typ-eml { background: var(--tint-violet); }
.crm .chat-anhang-text { display: flex; flex-direction: column; min-width: 0; flex: 1 1 auto; }
.crm .chat-anhang-name { font-weight: 600; color: var(--text-1); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.crm .chat-anhang-stand { display: flex; align-items: center; gap: var(--s-2); font-size: var(--fs-meta); color: var(--text-2); }
.crm .chat-anhang.is-fehler .chat-anhang-stand { color: var(--text-1); white-space: normal; }
.crm .chat-anhang-weg { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 1.75rem; height: 1.75rem; border: none; border-radius: var(--r-sm); background: none; color: var(--text-2); cursor: pointer; }
.crm .chat-anhang-weg:hover { background: var(--bg-card); color: var(--text-1); }
.crm .chat-anhang-weg:focus-visible,
.crm .chat-anhang-knopf:focus-visible { outline: 0.125rem solid var(--primary); outline-offset: 0.0625rem; }
.crm .chat-anhang-fuss { display: inline-flex; align-items: center; gap: var(--s-2); min-width: 0; }
.crm .chat-anhang-knopf { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 2rem; height: 2rem; border: none; border-radius: var(--r-sm); background: none; color: var(--text-2); cursor: pointer; }
.crm .chat-anhang-knopf:hover { background: var(--bg-card2); color: var(--text-1); }
.crm .chat-anhang-knopf:disabled { opacity: 0.5; cursor: not-allowed; }
.crm .chat-anhang-hinweis { display: inline-flex; flex-direction: column; line-height: 1.3; min-width: 0;  color: var(--text-3); font-size: var(--fs-ui); }
.crm .chat-anhaenge-bekannt { margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); font-size: var(--fs-meta); color: var(--text-2); }
.crm .chat-datei-chip { display: inline-flex; align-items: center; gap: var(--s-1); max-width: 16rem; padding: var(--s-1) var(--s-2); border: var(--chat-linie, 0.0625rem) solid var(--border); border-radius: var(--r-sm); background: var(--bg-card); font-size: var(--fs-meta); color: var(--text-1); }
.crm .chat-datei-chip span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.crm .chat-ich-anhaenge { display: flex; flex-wrap: wrap; gap: var(--s-2); margin-top: var(--s-2); }
.crm .chat-quelle-anhang { cursor: default; }
.crm .chat-beleg-anhang { cursor: default; }
/* Ablage: die Karte wird zur Zielflaeche, solange eine Datei darueber schwebt. */
.crm .chat-ablage-hinweis { display: none; }
.crm .chat-eingabe-karte.is-ablage { border-style: dashed; border-color: var(--primary); background: var(--tint-blue); }
.crm .chat-eingabe-karte.is-ablage .chat-ablage-hinweis { display: flex; position: absolute; inset: 0; z-index: 1; align-items: center; justify-content: center; border-radius: inherit; background: var(--tint-blue); color: var(--text-1); font-weight: 600; pointer-events: none; }
.crm .pythia-leiste .chat-anhang { flex-basis: 100%; }
.crm .pythia-leiste .chat-anhang-privat { display: none; }

.crm .chat-anhang-weg span { font-size: var(--fs-section); line-height: 1; }
.crm .chat-anhang-privat { font-size: var(--fs-meta); }

/* PR1.536 — Einstieg ins Cockpit ueber dem Staffing-Block der Opportunity. */
.crm .opp-cockpit-entry { display: flex; justify-content: flex-end; }

/* PR1.534 (#810) — Ansprechpartner-Zeilen im Redesign: Grundraster aus style.css, hier nur
   die Redesign-Toene und Abstaende (Token statt fester Werte). */
.crm .contact-rows { gap: var(--s-3); }
.crm .contact-row { column-gap: var(--s-3); }
.crm .contact-role { font-size: var(--fs-meta); color: var(--text-3); }
.crm .contact-av.emp-avatar { width: 1.75rem; height: 1.75rem; border-radius: 50%; background: var(--bg-surface-3); color: var(--text-2); }
.crm .contact-av.is-missing { width: 1.75rem; height: 1.75rem; }
.crm .contact-name { font-size: var(--fs-ui); font-weight: 500; }
.crm a.contact-name:focus-visible, .crm .stamm-person-link:focus-visible { outline-color: var(--focus); }
/* PR1.535 #816 — Änderungsverlauf (modals/kb-history-viewer.js): Grundform global in
   style.css, hier nur die Redesign-Farben. Grün als Text in --ad-green-900 (AA auf Weiß). */
.crm .kb-hist-chip[aria-pressed="true"] { border-color: var(--ad-blue); background: var(--ad-blue); color: var(--bg-surface); }
.crm .kb-hist-chip:focus-visible,
.crm .kb-hist-tech-toggle:focus-visible { outline-color: var(--focus); }
.crm .kb-hist-sym { background: var(--bg-surface); color: var(--ad-blue); }
.crm .kb-hist-tech-toggle { color: var(--ad-blue-700); }
.crm .kb-hist-delta.is-good { color: var(--ad-green-900); }
.crm .kb-hist-new { background: var(--tint-green); color: var(--ad-green-900); }
.crm.dark .kb-hist-delta.is-good, html[data-theme="dark"] .crm .kb-hist-delta.is-good { color: var(--success-light, var(--ad-green-700)); }
.crm.dark .kb-hist-new, html[data-theme="dark"] .crm .kb-hist-new { background: var(--tint-green); color: var(--success-light, var(--ad-green-700)); }
.crm.dark .kb-hist-chip[aria-pressed="true"], html[data-theme="dark"] .crm .kb-hist-chip[aria-pressed="true"] { color: var(--text-1); }

/* ── PR1.561 (#844) — Hinweisleiste „Neuer Stand verfügbar" im Redesign ──────────
   Grundoptik und Lage kommen aus style.css; das Element traegt `crm` selbst
   (haengt ggf. ausserhalb von #app-crm). Nur Marken. */
.crm.stand-hinweis {
  background: var(--bg-surface);
  color: var(--text-1);
  border-color: var(--border);
  border-left-color: var(--ad-blue);
  border-radius: var(--r-md);
  font-family: var(--f-sans);
  padding: var(--s-2) var(--s-2) var(--s-2) var(--s-4);
  gap: var(--s-3);
}
.crm.stand-hinweis .stand-hinweis-zu {
  border-radius: var(--r-sm);
}
/* PR1.861 (#1223) — Übernehmen-Knopf und fremd geänderte Felder im Redesign. */
.crm.stand-hinweis .stand-hinweis-knopf {
  background: var(--ad-blue);
  border-color: var(--ad-blue);
  color: white;
  border-radius: var(--r-sm);
  font-family: var(--f-sans);
}
.crm.stand-hinweis .stand-hinweis-knopf-leise {
  background: transparent;
  border-color: var(--border-strong);
  color: var(--text-1);
}
.crm.stand-hinweis .stand-hinweis-knopf:hover { background: var(--ad-blue-700); border-color: var(--ad-blue-700); filter: none; }
.crm.stand-hinweis .stand-hinweis-knopf-leise:hover { background: var(--bg-surface-2); border-color: var(--text-3); }
.crm.stand-hinweis .stand-hinweis-knopf:focus-visible { outline-color: var(--focus); }
.crm.stand-hinweis[data-art="verbindung"] { border-left-color: var(--warning); }
.crm .stand-hinweis-maske {
  margin: var(--s-2) var(--s-4) 0;
  padding: var(--s-2) var(--s-2) var(--s-2) var(--s-3);
  gap: var(--s-2) var(--s-3);
  background: color-mix(in srgb, var(--ad-blue) 6%, var(--bg-surface));
  border-color: var(--border);
  border-left-color: var(--ad-blue);
  border-radius: var(--r-md);
  font-family: var(--f-sans);
}
.crm .stand-hinweis-maske .stand-hinweis-knopf {
  background: var(--ad-blue);
  border-color: var(--ad-blue);
  color: white;
  border-radius: var(--r-sm);
  font-family: var(--f-sans);
}
.crm .stand-hinweis-maske .stand-hinweis-knopf:hover { background: var(--ad-blue-700); border-color: var(--ad-blue-700); filter: none; }
.crm .stand-hinweis-maske .stand-hinweis-knopf-leise { background: transparent; border-color: var(--border-strong); color: var(--text-1); }
.crm .stand-hinweis-maske .stand-hinweis-knopf:focus-visible,
.crm .stand-hinweis-maske .stand-hinweis-zu:focus-visible { outline-color: var(--focus); }
.crm .stand-hinweis-maske .stand-hinweis-zu { border-radius: var(--r-sm); }
/* PR1.862 — Loesch-Hinweis in der offenen Maske: Warnton (Marken-Orange) statt Blau. */
.crm .stand-hinweis-maske.stand-hinweis-geloescht {
  background: color-mix(in srgb, var(--warning) 9%, var(--bg-surface));
  border-left-color: var(--warning);
}
.crm .stand-fremd {
  outline: 0.125rem solid color-mix(in srgb, var(--ad-blue) 55%, transparent);
  outline-offset: var(--s-1);
  background: color-mix(in srgb, var(--ad-blue) 5%, transparent);
  border-radius: var(--r-sm);
}

/* PR1.544 (#825) — Nutzerverwaltung: Seitenfenster, Rollen-Legende, Zustands-Chips.
   Aufbau und Abstände stehen in style.css (beide Shells laden sie); hier werden im
   `.crm`-Scope nur die Tokens auf die Redesign-Palette umgelegt — keine eigenen Maße. */
.crm .aud,
.crm .aud-filterleiste,
.crm #crm-admin-users-mount {
  --bg-card: var(--bg-surface);
  --bg-card2: var(--bg-surface-2);
  --border-light: var(--border-strong);
  --primary: var(--focus);
  --purple: var(--ad-violet);
  --info: var(--ad-blue);
  --danger: var(--ad-red-700);
  --radius-sm: var(--r-md);
}
.crm.dark .aud, html[data-theme="dark"] .crm .aud,
.crm.dark .aud-filterleiste, html[data-theme="dark"] .crm .aud-filterleiste,
.crm.dark #crm-admin-users-mount, html[data-theme="dark"] .crm #crm-admin-users-mount {
  --purple: color-mix(in srgb, var(--ad-violet) 40%, white);
  --info: var(--ad-blue-300);
  --danger: var(--ad-red-300);
}
.crm .aud { font-family: inherit; }
/* Kontrast im Fenster: die Statuspille setzt ihre Toene selbst (.crm .status-pill) und die
   aktive Segment-Taste nimmt Markenblau — beides bleibt im Dunkeln unter 3:1. */
.crm .aud .cs-seg[aria-checked="true"] { color: var(--ad-blue-700); }
.crm.dark .aud .cs-seg[aria-checked="true"], html[data-theme="dark"] .crm .aud .cs-seg[aria-checked="true"] { color: var(--ad-blue-300); }
.crm.dark .aud .status-pill, html[data-theme="dark"] .crm .aud .status-pill {
  --danger: var(--ad-red-300);
  --warning: color-mix(in srgb, var(--ad-orange-700) 70%, white);
  --success: color-mix(in srgb, var(--ad-green-700) 70%, white);
}

/* ── PR1.550 (#831) — KB-Zustand: Ring, Balken, Reparatur-Liste, Trichter, Wochensaeulen ──
   Statisch, keine Transition: die Seite wird wenige Male pro Woche geoeffnet
   (Frequenz-Regel). Masse nur ueber Tokens, rem und Prozent — der Ratchet `raw-px`
   laesst keinen neuen harten Wert zu. Farbe ist nie allein Traeger: jede Zahl steht
   als Text daneben, jeder Balken traegt eine Beschriftung in Worten. Das Raster
   bricht ueber auto-fit um, ohne eigenen Breakpoint. */
.crm .kbz-grid {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-4);
  margin-bottom: var(--s-4);
  align-items: flex-start;
}
.crm .kbz-grid > * { flex: 1 1 22rem; min-width: 0; }
.crm .kbz-grid > .kbz-ring-card { flex: 1 1 17rem; }
.crm .kbz-grid > .kbz-bars-card { flex: 2 1 30rem; }
.crm .kbz-card-h { display: flex; align-items: baseline; flex-wrap: wrap; gap: var(--s-2) var(--s-3); margin-bottom: var(--s-3); }
.crm .kbz-card-h h3 { margin: 0; }
.crm .kbz-card-h .kbz-legend { margin-left: auto; }

.crm .kbz-ring { position: relative; width: 9.5rem; margin: var(--s-3) auto var(--s-2); }
.crm .kbz-ring svg { display: block; width: 100%; height: auto; }
.crm .kbz-ring circle { fill: none; stroke-width: 3.6; }
.crm .kbz-ring-bg { stroke: var(--bg-surface-3); }
.crm .kbz-ring-val { stroke: var(--success); }
.crm .kbz-ring-txt { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.crm .kbz-ring-txt b { font-size: var(--fs-kpi); line-height: 1.1; color: var(--text-1); font-variant-numeric: tabular-nums; }
.crm .kbz-ring-txt span { color: var(--text-2); font-size: var(--fs-ui); }
.crm .kbz-ring-stats { display: grid; grid-template-columns: repeat(3, 1fr); border-top: thin solid var(--border); }
.crm .kbz-ring-stats > div { padding: var(--s-3) var(--s-4); display: flex; flex-direction: column; gap: var(--s-1); }
.crm .kbz-ring-stats > div + div { border-left: thin solid var(--border); }
.crm .kbz-ring-stats b { font-size: var(--fs-title); line-height: 1.1; color: var(--text-1); font-variant-numeric: tabular-nums; }
.crm .kbz-ring-stats span { color: var(--text-2); font-size: var(--fs-ui); }
.crm .kbz-ring-stats .is-warn b { color: var(--ad-orange-900); }
.crm .kbz-ring-stats .is-broken b { color: var(--danger); }

.crm .kbz-legend { display: inline-flex; align-items: center; gap: var(--s-1) var(--s-2); color: var(--text-2); font-size: var(--fs-ui); flex-wrap: wrap; }
.crm .kbz-dot { display: inline-block; width: 0.6rem; height: 0.6rem; border-radius: 50%; }
.crm .kbz-dot.is-ok, .crm .kbz-seg.is-ok { background: var(--success); }
.crm .kbz-dot.is-warn, .crm .kbz-seg.is-warn { background: var(--warning); }
.crm .kbz-dot.is-broken, .crm .kbz-seg.is-broken { background: var(--danger); }

.crm .kbz-bars { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--s-3); }
.crm .kbz-bar-row { display: grid; grid-template-columns: minmax(6rem, 10rem) 1fr auto; align-items: center; gap: var(--s-3); }
.crm .kbz-bar-label { color: var(--text-1); }
.crm .kbz-bar { display: flex; height: 0.75rem; border-radius: var(--r-xs); overflow: hidden; background: var(--bg-surface-3); }
.crm .kbz-seg { display: block; height: 100%; }
.crm .kbz-bar-num { color: var(--text-2); font-variant-numeric: tabular-nums; min-width: 4.5rem; text-align: right; }

.crm .kbz-rep-list { list-style: none; margin: 0; padding: 0; }
.crm .kbz-rep-row { display: grid; grid-template-columns: auto 1fr; gap: var(--s-2) var(--s-3); padding: var(--s-3) var(--s-4); border-top: thin solid var(--border); align-items: start; }
.crm .kbz-rep-count { min-width: 2rem; text-align: center; padding: var(--s-1) var(--s-2); border-radius: var(--r-sm); font-weight: 600; font-variant-numeric: tabular-nums; }
.crm .kbz-rep-count.is-broken { background: var(--tint-red); color: var(--ad-red-800); }
.crm .kbz-rep-count.is-warn { background: var(--tint-orange); color: var(--ad-orange-900); }
.crm .kbz-rep-text { display: flex; flex-direction: column; gap: var(--s-1); min-width: 0; }
.crm .kbz-rep-text b { color: var(--text-1); }
.crm .kbz-rep-text span { color: var(--text-2); font-size: var(--fs-ui); }
.crm .kbz-rep-actions { grid-column: 2; display: flex; flex-wrap: wrap; gap: var(--s-2); }

.crm .kbz-funnel { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--s-2); }
.crm .kbz-fun-row { display: grid; grid-template-columns: minmax(6rem, 9rem) 1fr; gap: var(--s-1) var(--s-3); align-items: center; }
.crm .kbz-fun-track { display: block; }
.crm .kbz-fun-bar { display: block; min-width: max-content; padding: var(--s-1) var(--s-2); border-radius: var(--r-xs); background: var(--primary); color: var(--text-inv); font-weight: 600; font-variant-numeric: tabular-nums; }
.crm .kbz-fun-note { grid-column: 2; color: var(--text-2); font-size: var(--fs-ui); }
.crm .kbz-fun-note:empty { display: none; }
.crm .kbz-fun-note.is-loss { color: var(--ad-orange-900); font-weight: 600; }

.crm .kbz-cols { list-style: none; margin: 0 0 var(--s-2); padding: 0; display: grid; grid-template-columns: repeat(7, 1fr); gap: var(--s-2); }
.crm .kbz-col { display: flex; flex-direction: column; align-items: stretch; gap: var(--s-1); text-align: center; }
.crm .kbz-col-n { color: var(--text-2); font-size: var(--fs-ui); font-variant-numeric: tabular-nums; }
.crm .kbz-col-bar { display: flex; align-items: flex-end; height: 5rem; border-bottom: thin solid var(--border); }
.crm .kbz-col-bar > span { display: block; width: 100%; background: var(--tint-blue); border-radius: var(--r-xs) var(--r-xs) 0 0; }
.crm .kbz-col.is-peak .kbz-col-bar > span { background: var(--danger); }
.crm .kbz-col-day { color: var(--text-2); font-size: var(--fs-ui); }
.crm .kbz-cols-note { margin: 0 0 var(--s-2); }

.crm .kbz-table { margin-bottom: var(--s-4); }
.crm .kbz-table > summary::before { content: ''; display: inline-block; width: 1em; height: 1em; flex: 0 0 auto; background-color: currentColor; -webkit-mask: var(--ic-mask-caret-right); mask: var(--ic-mask-caret-right); color: var(--text-3); }
.crm .kbz-table[open] > summary::before { -webkit-mask: var(--ic-mask-caret-down); mask: var(--ic-mask-caret-down); }
.crm .kbz-rep-more { margin: 0; padding: var(--s-2) var(--s-4) var(--s-3); border-top: thin solid var(--border); }

/* ── PR1.587 (#889) — Kundenliste nach Bild E6 ─────────────────────────────────────────
   Bewegung nach der Farbregel: aktiv gruen, ruhig neutral grau, still Ocker. Rot bleibt
   Fehlern und Abgelaufenem vorbehalten. Das Ocker ist aus vorhandenen Stufen gemischt
   (kein neues Hex, raw-hex-Ratchet); hell ≈ 5.4:1 als Text auf Weiss, dunkel die helle
   Mischung aus den Grundtoenen. Bis die Farbregel (PR1.586) ein app-weites Ocker-Token
   liefert, lebt es hier — der Wechsel ist dann eine Zeile. */
/* PR1.586 (#875): das app-weite Ocker-Token ist da (style.css, hell und dunkel). Die
   Anlegen-Schrift kommt jetzt ebenfalls von dort (--anlegen-text #0E1726, 8.50:1). */
.crm { --mv-still: var(--ocker-text); }
.crm .mv-cell { gap: 0.375rem; }
.crm .mv-word-dormant { color: var(--mv-still); font-weight: 600; }
.crm .mv-when { color: var(--text-3); font-size: var(--fs-meta); margin-left: 0.25rem; }

/* Genau eine farbige Aktion im Kopf: „+ Kunde" (Anlegen = Orange). Keine Animation —
   die Liste wird mehrmals taeglich benutzt. */
.crm .btn-create {
  background: var(--ad-orange); color: var(--anlegen-text); border-color: var(--ad-orange);
  font-weight: 600;
}
.crm .btn-create:hover { background: color-mix(in srgb, var(--ad-orange) 88%, var(--ad-orange-700)); border-color: var(--ad-orange-700); }
.crm .btn-create:focus-visible { outline: 0.125rem solid var(--focus); outline-offset: 0.125rem; }

/* Zaehlzeile statt Untertitel; die Regel steht als Tooltip daran. */
.crm .page-head .cust-summary { color: var(--text-2); font-variant-numeric: tabular-nums; cursor: help; }

/* Logo mit ruhigem Rahmen (28 px Kachel kommt aus accountLogoHtml). */
.crm .tbl-cust .list-logo .acc-logo,
.crm .tbl-cust .list-logo .acc-logo.is-loaded { box-shadow: inset 0 0 0 0.0625rem var(--border-strong); }
/* PR1.735 Gate R2: die neutrale Logoflaeche traegt nur ihre gestrichelte Kante, keinen Ring. */
.crm .tbl-cust .list-logo .acc-logo.acc-logo-leer:not(.is-loaded),
.crm .tbl-cust .list-logo .acc-logo.acc-logo-ladend.acc-logo-failed:not(.is-loaded) { box-shadow: none; }

/* Trefferzahl rechts in der Filterzeile (frueher Ende der Pillenzeile). */
.crm .cust-filter-bar .cust-filter-count { margin-left: auto; white-space: nowrap; }

/* Pfeil am Zeilenende: nur bei Ueberfahren oder Fokus in der Zeile, ohne Uebergang.
   Er ersetzt den Satz „Klick auf eine Zeile oeffnet …". */
.crm .tbl-cust td[data-col="_action"] { white-space: nowrap; text-align: right; }
.crm .row-go { display: inline-flex; vertical-align: middle; color: var(--text-3); margin-left: 0.25rem; line-height: 1; opacity: 0; }
/* PR1.587 (#889) Nachzug 2 — „›" nur beim Ueberfahren oder mit Fokus in der Zeile (Vorlage E6). */
.crm .tbl-cust tbody tr:hover .row-go, .crm .tbl-cust tbody tr:focus-within .row-go, .crm .tbl-cust tbody tr:focus .row-go { opacity: 1; }
/* PR1.587 (#889) Nachzug — im Ruhezustand nur der Pfeil; Zeilenknoepfe (inkl. Papierkorb) erst
   beim Ueberfahren oder wenn der Fokus in der Zeile steht. Touch: Tipp fokussiert die Zeile (tabindex), dann stehen sie da. */
.crm .tbl-cust td[data-col="_action"] .icon-btn { visibility: hidden; }
.crm .tbl-cust tbody tr:hover td[data-col="_action"] .icon-btn,
.crm .tbl-cust tbody tr:focus-within td[data-col="_action"] .icon-btn,
.crm .tbl-cust tbody tr:focus td[data-col="_action"] .icon-btn { visibility: visible; }
/* Bewegung als Schild: ruhig grau, still Ocker, aktiv gruen. */
.crm .mv-schild { display: inline-block; padding: 0.0625rem 0.5rem; border-radius: var(--r-sm); border: thin solid var(--border); font-size: var(--fs-meta); font-weight: 600; line-height: 1.4; background: var(--bg-surface-3); color: var(--text-2); }
.crm .mv-schild-active { background: var(--tint-turq); color: var(--ad-turq-900); border-color: transparent; }
.crm .mv-schild-dormant { background: color-mix(in srgb, var(--mv-still) 14%, transparent); color: color-mix(in srgb, var(--mv-still) 60%, var(--text-1)); border-color: transparent; }
.crm.dark .mv-schild-active, html[data-theme="dark"] .crm .mv-schild-active { color: var(--ad-turq); }
/* Breite bei 1280 px: lange Zahlen-Koepfe duerfen umbrechen (Standardwahl ohne waagerechtes
   Scrollen, auch mit drei Aktions-Symbolen fuer pflegende Nutzer). */
.crm .tbl-cust th.num, .crm .tbl-cust th.num .col-sort { white-space: normal; text-align: right; }
.crm .tbl-cust th.num { min-width: 5.5rem; }
.crm .tbl-cust tbody td.is-sticky { max-width: 15rem; }

/* PR1.606 (#881) — Vorlagen-Kacheln im Redesign: Zahlenschrift, Redesign-Farben, Fokus
   über die generische `.crm :focus-visible`-Regel. Täglich genutzt → keine Bewegung. */
.crm .dnk-zahl { font-family: var(--font-num, inherit); font-weight: 500; }
.crm .dnk-zahl:focus-visible,
.crm .dnk-link:focus-visible,
.crm .dnk-zeile-haupt:focus-visible,
.crm .dnk-balken-teil:focus-visible { outline-color: var(--focus); }
.crm .dnk-balken--lead { background: var(--ad-blue); }
.crm .dnk-balken--proposal { background: color-mix(in srgb, var(--ad-blue) 39%, white); }  /* PR1.697: Hellblau wie d3 (#9CC4EA) */
.crm.dark .dnk-balken--proposal, html[data-theme="dark"] .crm .dnk-balken--proposal { background: var(--ad-blue-300); }
.crm .dnk-verlauf { color: var(--primary, var(--focus)); }
.crm .dnk-verlauf-jetzt { fill: var(--primary, var(--focus)); }
.crm .dnk-zeile { border-top-color: var(--border); }
/* PR1.684 (#983) — Kachel „Offene Rollen“ (M5, Marke 2): Zahl in Rot, Knopf in Blau über die Knopf-Regel. */
.crm .dnk-zahl.dnk-ton-kritisch { color: var(--danger); }
.crm .dnk--rollen .dnk-sub { font-size: var(--fs-body); color: var(--text-2); }
.crm .dnk--rollen .dnk-einheit { color: var(--text-1); font-weight: 600; font-size: var(--fs-body); }
.crm .dnk-rollen-logos { display: flex; flex-wrap: wrap; align-items: center; gap: 0.25rem; min-width: 0; }
.crm .dnk-rollen-logo .acc-logo { box-shadow: inset 0 0 0 0.0625rem var(--border-strong); }
.crm .dnk-rollen-mehr { font-size: var(--fs-meta); color: var(--text-2); margin-left: 0.125rem; }
.crm .dnk-rollen-knopf { width: 100%; justify-content: center; margin-top: 0.25rem; }
.crm .dnk-rollen-knopf:focus-visible { outline: 0.125rem solid var(--focus); outline-offset: 0.125rem; }
/* PR1.615 (#925) — Kachel „Vom Vorgang zum Projekt“: Trichter in den Farben des Lage-Trichters
   (.kbz-fun-*), Verlust und Dauer-Hinweis in der Orange-Textstufe. */
.crm .dnk-trichter-balken { background: var(--primary); color: var(--text-inv); border-radius: var(--r-xs); }
.crm .dnk-trichter-label { color: var(--text-2); }
.crm .dnk-trichter-notiz { color: var(--text-2); }
.crm .dnk-trichter-notiz--verlust, .crm .dnk-konv-hinweis { color: var(--ad-orange-900); }
.crm.dark .dnk-trichter-notiz--verlust, html[data-theme="dark"] .crm .dnk-trichter-notiz--verlust,
.crm.dark .dnk-konv-hinweis, html[data-theme="dark"] .crm .dnk-konv-hinweis { color: var(--ad-orange); }
.crm .dnk-konv-lage:focus-visible { outline: 0.125rem solid var(--focus); outline-offset: 0.125rem; }
/* PR1.729 (#1035) — Erfolgs-Kacheln: Balken in den Maßen des Ziel-Balkens (.dnk-ziel-balken, style.css),
   Füllung grau, erreicht grün; Ziellinie in Textfarbe. */
.crm .dnk-erfolg-balken { height: 0.4rem; margin-top: 0.5334rem; border-radius: 0.2rem; }  /* = 6 / 8 / 3 px bei 15 px Basis */
.crm .dnk-erfolg-fuellung { border-radius: 0.2rem; background: var(--text-2); }
.crm .dnk-erfolg-balken--erreicht .dnk-erfolg-fuellung { background: var(--success); }
.crm .dnk-erfolg-linie { background: var(--text-1); }


/* ============== PR1.626 (#921) — Seite „Start" =======

   Blau = die eine Hauptaktion („Alles gesehen"), Ocker = Lücken und Warnungen, Rot nur Fehler,
   Orange gehört der KI (PR1.629). Keine Bewegung: die Seite wird täglich geöffnet. */
/* PR1.730: Startseite nutzt die volle Breite (Vorlage V01) — kein max-width mehr. */
.crm .start-page { display: flex; flex-direction: column; gap: var(--s-4, 1rem); }
.crm .start-kopf { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--s-3, 0.75rem) 0.5rem; }
.crm .start-kopf-links { min-width: 0; flex: 1 1 20rem; }
.crm .start-datum { margin: 0 0 0.25rem; font-size: var(--fs-ui); color: var(--text-2); }
.crm .start-kopf h1 { margin: 0; width: fit-content; }
.crm .start-bereich { margin: 0.25rem 0 0; font-size: var(--fs-body); color: var(--text-2); min-height: 1.25em; }
.crm .start-kopf-rechts { flex: 0 0 auto; display: flex; flex-wrap: wrap; align-items: center; gap: 0.375rem; }
.crm .start-zeitraum-platz { width: 16rem; max-width: 100%; height: 2.25rem; }
/* Zeile mit Namen, Zahlen und Schild bleibt in einer Zeile: der Umschalter ist dafür etwas enger gesetzt (Bild S2). */
.crm .start-kopf-rechts .start-seg button { padding-inline: 0.375rem; }
.crm .start-seg button[disabled] { opacity: .5; cursor: not-allowed; }
.crm .start-seg button.is-active { color: var(--text-1); font-weight: 600; }
.crm .start-seg button:focus-visible { outline: .125rem solid var(--focus); outline-offset: .0625rem; }
.crm .start-hinweise { display: flex; flex-wrap: wrap; gap: 0.25rem 1rem; }
.crm .start-hinweis { margin: 0; padding: 0; font: inherit; font-size: var(--fs-ui); color: var(--text-2); background: none; border: 0; }
.crm .start-hinweis-ocker { padding: 0.125rem 0.25rem; font-size: var(--fs-label); white-space: nowrap; color: var(--ad-orange-900); font-weight: 600; text-decoration: none; cursor: pointer; border-radius: var(--r-lg); background: color-mix(in srgb, var(--ad-orange-900) 14%, transparent); }
.crm .start-bereich-art { margin-right: 0.25rem; font-size: var(--fs-label); font-weight: 600; letter-spacing: 0.04em; color: var(--text-2); }
.crm .start-bereich-name { color: var(--text-1); font-weight: 600; }
/* Nachzug 5 (Neubau nach S2): Name, Zusatz und Schild stehen in EINER nicht umbrechenden Zeile, ohne max-width am Kopf.
   Name und Zusatz werden nie gekürzt; nur das Schild darf schrumpfen (min-width 0 + Auslassungspunkte). */
.crm .start-bereich:has(.start-sub-kopf) { display: flex; flex-wrap: nowrap; align-items: baseline; gap: 0.25rem; min-width: 0; }
.crm .start-bereich .start-sub-kopf, .crm .start-bereich .start-sub-rest { flex: 0 0 auto; white-space: nowrap; }
.crm .start-bereich .start-hinweis-ocker { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.crm .start-hinweis-ocker:focus-visible { outline: .125rem solid var(--focus); outline-offset: .125rem; }
.crm .start-hinweis-text { margin: 0; flex-basis: 100%; font-size: var(--fs-ui); color: var(--text-2); }
.crm .start-satz { margin: 0; font-size: var(--fs-title); line-height: 1.45; color: var(--text-1); max-width: none; overflow-wrap: anywhere; }
.crm .start-ki-platz:empty { display: none; }
/* PR1.629 — „Pythia fasst zusammen": Orange nur hier, als KI-Kennzeichen (Farbregel 30.10.).
   Rahmen + Fläche hell, Kopf + Symbol dunkles Orange, Text bleibt dunkel. Täglich gesehen → keine Bewegung.
   Schmal bricht „Ausblenden" unter den Text (flex-wrap statt Breakpoint). */
.crm .start-ki { display: flex; flex-wrap: wrap; align-items: flex-start; gap: var(--s-2, 0.5rem) var(--s-3, 0.75rem);
  padding: var(--s-3, 0.75rem) var(--s-4, 1rem); background: var(--tint-orange-zart); border: .0625rem solid color-mix(in srgb, var(--ad-orange) 45%, transparent); border-radius: var(--r-md); }
.crm .start-ki-symbol { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 1.75rem; height: 1.75rem; border-radius: 50%;
  color: var(--pythia-terra); background: color-mix(in srgb, var(--ad-orange) 22%, transparent); }
.crm .start-ki-text { flex: 1 1 18rem; min-width: 0; }
.crm .start-ki-kopf { margin: 0 0 0.25rem; font-size: var(--fs-ui); color: var(--text-2); }
.crm .start-ki-kopf strong { color: var(--pythia-terra); font-weight: 600; }
.crm .start-ki-absatz, .crm .start-ki-fehler { margin: 0; font-size: var(--fs-body); line-height: 1.5; color: var(--text-1); max-width: 70rem; overflow-wrap: anywhere; }
.crm .start-ki-skel { display: grid; gap: var(--s-2, 0.5rem); padding-top: 0.25rem; }
.crm .start-ki-skel .start-skel-zeile:last-child { width: 45%; }
.crm .start-ki .start-ki-knopf { flex: 0 0 auto; margin-left: auto; white-space: nowrap; }
.crm .start-ki-aus { margin: 0; }
.crm .start-ki-aus .start-link { display: inline-flex; align-items: center; gap: 0.375rem; }
/* „Ausblenden" / „Zusammenfassung einblenden": ruhig grau, ohne Unterstrich, auch dunkel (schlägt .crm.dark .start-link). */
.crm .start-ki-platz .start-ki-knopf, .crm .start-ki-platz .start-ki-aus .start-link,
.crm.dark .start-ki-platz .start-ki-knopf, html[data-theme="dark"] .crm .start-ki-platz .start-ki-knopf,
.crm.dark .start-ki-platz .start-ki-aus .start-link, html[data-theme="dark"] .crm .start-ki-platz .start-ki-aus .start-link { color: var(--text-2); font-weight: 400; text-decoration: none; }
.crm .start-ki-platz .start-ki-knopf:hover, .crm .start-ki-platz .start-ki-aus .start-link:hover { color: var(--text-1); }
.crm .start-page { padding: 0 1.375rem .875rem; }
.crm .start-satz-zahl { font-weight: 600; }
.crm .start-page { padding-top: 1.25rem; padding-inline: 1.875rem; }
.crm .start-kachel .start-bewegung { padding-top: 0.75rem; border-top: .0625rem solid var(--border); }
.crm .start-spalten { display: flex; flex-wrap: wrap; gap: var(--s-3, 0.75rem); align-items: flex-start; }
.crm .start-spalten > .start-feed { flex: 3 1 30rem; min-width: 0; }
.crm .start-spalten > .start-braucht { flex: 2 1 20rem; min-width: 0; }
/* Titel bekommt den Fokus nur per Skript beim Öffnen (tabindex=-1, nicht in der Tab-Folge) — kein Rahmen. */
.crm .start-kopf h1:focus, .crm .start-kopf h1:focus-visible { outline: none; box-shadow: none; }
.crm .start-kachel-titel { display: inline-flex; align-items: center; gap: 0.375rem; }
.crm .start-kachel-symbol { display: inline-flex; color: var(--text-2); }
.crm .start-schild { display: inline-flex; align-items: center; gap: 0.125rem; min-width: 1.375rem; justify-content: center; padding: 0.0625rem 0.375rem; border-radius: var(--r-sm, 0.25rem); font-weight: 600; font-variant-numeric: tabular-nums; line-height: 1.35; }
.crm .start-schild-gut { color: var(--ad-green-900, var(--success)); background: color-mix(in srgb, var(--success) 14%, transparent); }
.crm .start-schild-schlecht { color: var(--ad-red-700, var(--danger)); background: color-mix(in srgb, var(--danger) 12%, transparent); }
.crm .start-schild-neutral { color: var(--text-2); background: var(--bg-muted, color-mix(in srgb, var(--text-3) 14%, transparent)); }
.crm.dark .start-schild-gut, html[data-theme="dark"] .crm .start-schild-gut { color: var(--success); }
.crm.dark .start-schild-schlecht, html[data-theme="dark"] .crm .start-schild-schlecht { color: var(--danger); }

/* PR1.730: höchstens vier Kacheln je Reihe (V01: ~430 px bei 1920); unter 14rem je Kachel bricht das Raster um. */
.crm .start-kacheln { display: grid; grid-template-columns: repeat(auto-fit, minmax(max(14rem, calc((100% - 3 * 0.9333rem) / 4)), 1fr)); gap: 0.9333rem; }
.crm .start-kachel { padding: 1rem; display: flex; flex-direction: column; gap: 0.5rem; min-width: 0; }
.crm .start-kachel-kopf { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; }
.crm .start-kachel-titel { margin: 0; font-size: var(--fs-ui); font-weight: 600; color: var(--text-2); }
.crm .start-pfeil-knopf { display: inline-flex; align-items: center; justify-content: center; min-width: 2rem; min-height: 2rem; padding: 0; font: inherit; color: var(--text-2); background: none; border: .0625rem solid var(--border); border-radius: var(--r-md); cursor: pointer; }
.crm .start-pfeil-knopf:hover { color: var(--text-1); border-color: var(--border-strong); }
.crm .start-pfeil-knopf:focus-visible { outline: .125rem solid var(--focus); outline-offset: .125rem; }
.crm .start-kachel-wert { margin: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.25rem 0.5rem; }
.crm .start-zahl { font-family: var(--font-num, inherit); font-size: var(--fs-kpi); font-weight: 500; line-height: 1.1; color: var(--text-1); }
.crm .start-einheit { font-size: var(--fs-ui); color: var(--text-2); }
.crm .start-bewegung { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 0.125rem; font-size: var(--fs-ui); color: var(--text-2); }
.crm .start-ton-muted { color: var(--text-3); }
.crm .start-ton-gut { color: var(--text-1); }
.crm .start-ton-schlecht { color: var(--text-1); font-weight: 600; }
.crm .start-ton-ocker { color: var(--ad-orange-900); font-weight: 600; }
.crm .start-pfeil { display: inline-block; width: 1em; }

.crm .start-abschnitt { margin: 0; font-size: var(--fs-body); font-weight: 600; color: var(--text-1); }
.crm .start-braucht-liste { margin: 0.75rem 0 0; padding: 0; list-style: none; display: flex; flex-direction: column; }
.crm .start-braucht-zeile { display: flex; align-items: center; gap: 0.75rem; padding: 0.625rem 0; border-top: .0625rem solid var(--border); }
.crm .start-braucht-zeile:first-child { border-top: 0; }
.crm .start-braucht-zahl { flex: 0 0 2rem; font-family: var(--font-num, inherit); font-size: var(--fs-title); font-weight: 500; color: var(--ad-orange-900); text-align: right; }
.crm .start-braucht-text { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 0.125rem; }
.crm .start-braucht-details { display: flex; flex-wrap: wrap; gap: 0.125rem 0.875rem; font-size: var(--fs-ui); color: var(--text-2); overflow-wrap: anywhere; }
.crm .start-detail { display: inline-flex; align-items: center; gap: 0.375rem; min-width: 0; }
.crm .start-braucht-fuss { margin: 0.75rem 0 0; font-size: var(--fs-ui); color: var(--text-2); }
.crm .start-leer { margin: 0.75rem 0 0; color: var(--text-2); }
.crm .start-leer-tipp { margin: 0.25rem 0 0; font-size: var(--fs-ui); color: var(--text-3); }

/* PR1.628 — Start: BL-/BU-Sicht, eine Zeile je Competence Center (Bild s2). Ruhig, keine Bewegung. */
.crm .start-bl { padding: 0; overflow-x: auto; }
.crm .start-bl-kopf { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.25rem 0.75rem; padding: 1rem 1.25rem 0.75rem; }
.crm .start-bl-zusatz { font-size: var(--fs-ui); font-weight: 400; color: var(--text-2); }
.crm .start-bl-tabelle { width: 100%; border-collapse: collapse; font-size: var(--fs-ui); font-variant-numeric: tabular-nums; }
.crm .start-bl-kopfzelle { padding: 0.625rem 0.5rem; text-align: right; vertical-align: bottom; font-weight: 600; color: var(--text-2); border-top: .0625rem solid var(--border); border-bottom: .0625rem solid var(--border); }
.crm .start-bl-kopfzelle.start-bl-erste { padding-left: 1.25rem; text-align: left; }
.crm .start-bl-zelle { white-space: nowrap; padding: 0.75rem 0.5rem; text-align: right; vertical-align: middle; border-top: .0625rem solid var(--border); color: var(--text-1); }
.crm .start-bl-name-zelle { padding: 0.625rem 0.5rem 0.625rem 1.25rem; text-align: left; vertical-align: middle; font-weight: 400; border-top: .0625rem solid var(--border); }
.crm .start-bl-person { display: inline-flex; align-items: center; gap: 0.625rem; min-width: 0; }
.crm .start-bl-text { display: flex; flex-direction: column; gap: 0.0625rem; min-width: 0; }
.crm .start-bl-name { font-weight: 600; color: var(--text-1); }
.crm .start-bl-unter { color: var(--text-2); }
.crm .start-bl-foto-leer { display: inline-flex; flex: 0 0 auto; align-items: center; justify-content: center; width: 2rem; height: 2rem; border-radius: 50%; background: var(--bg-surface-2); border: .0625rem solid var(--border); }
.crm .start-bl-zeile.is-klickbar { cursor: pointer; }
.crm .start-bl-zeile.is-klickbar:hover > * { background: color-mix(in srgb, var(--ad-blue) 7%, transparent); }
.crm .start-bl-zeile.is-klickbar:focus-visible { outline: .125rem solid var(--focus); outline-offset: -.125rem; }
.crm .start-bl-pipeline { background: color-mix(in srgb, var(--ad-blue) 5%, transparent); }
.crm .start-bl-null { color: var(--text-3); font-weight: 400; }
.crm .start-bl-ocker { color: var(--ad-orange-900); font-weight: 600; }
.crm .start-zahl-kaestchen.start-bl-null { background: none; color: var(--text-3); font-weight: 400; }
.crm .start-bl-gut { color: var(--ad-green-900, var(--success)); font-weight: 600; }
.crm .start-bl-summe > * { font-weight: 600; background: var(--bg-surface-2); border-top: .0625rem solid var(--border-strong); }
.crm .start-bl-hinweis { display: flex; align-items: flex-start; gap: 0.5rem; margin: 0; padding: 0.75rem 1.25rem; font-size: var(--fs-ui); color: var(--text-2); border-top: .0625rem solid var(--border); }
.crm .start-bl-hinweis svg { flex: 0 0 auto; color: var(--ad-orange-900); }
.crm .start-bl-fehler { margin: 0 1.25rem 0.75rem; }
.crm .start-bl-skel { display: grid; gap: 0.5rem; padding: 0 1.25rem 1rem; }
.crm .start-bl-zurueck { margin-right: 0.375rem; }
.crm .start-bl-braucht-spalten { margin: 0.75rem 0 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: 0.75rem 1.25rem; }
.crm .start-bl-braucht-spalte { display: flex; flex-direction: column; align-items: flex-start; gap: 0.375rem; min-width: 0; padding-left: 1rem; border-left: .0625rem solid var(--border); }
.crm .start-bl-braucht-spalte:first-child { padding-left: 0; border-left: 0; }
.crm .start-bl-braucht-kopf { margin: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.25rem 0.5rem; }
.crm .start-bl-braucht-detail { margin: 0; font-size: var(--fs-ui); color: var(--text-2); overflow-wrap: anywhere; }
.crm.dark .start-bl-ocker, html[data-theme="dark"] .crm .start-bl-ocker, .crm.dark .start-bl-hinweis svg, html[data-theme="dark"] .crm .start-bl-hinweis svg { color: var(--ad-orange); }
.crm .start-link { padding: 0; font: inherit; font-size: var(--fs-ui); font-weight: 600; color: var(--ad-blue-700); background: none; border: 0; text-decoration: underline; cursor: pointer; }
.crm .start-link:focus-visible { outline: .125rem solid var(--focus); outline-offset: .125rem; border-radius: 0.125rem; }

.crm .start-feed-kopf { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.25rem 0.75rem; margin-bottom: 0.75rem; }
.crm .start-feed-summe { font-size: var(--fs-ui); color: var(--text-2); }
.crm .start-feed-rechts { margin-left: auto; display: flex; gap: 1rem; }
.crm .start-filter { display: flex; flex-wrap: wrap; gap: 0.375rem; margin-bottom: 0.5rem; }
.crm .start-chip { padding: 0.25rem 0.75rem; font: inherit; font-size: var(--fs-ui); color: var(--text-1); background: var(--bg-surface-2); border: .0625rem solid var(--border); border-radius: var(--r-pill, 6.25rem); cursor: pointer; }
.crm .start-chip.is-active { background: var(--bg-surface); border-color: var(--ad-blue); font-weight: 600; }
.crm .start-chip:focus-visible { outline: .125rem solid var(--focus); outline-offset: .125rem; }
.crm .start-chip-zahl { color: var(--text-2); font-weight: 400; }
.crm .start-feed-liste { margin: 0; padding: 0; list-style: none; }
.crm .start-zeile { border-top: .0625rem solid var(--border); }
.crm .start-zeile-kopf { display: flex; flex-direction: column; align-items: flex-start; gap: 0.125rem; width: 100%; padding: 0.625rem 0.25rem; font: inherit; text-align: left; color: var(--text-1); background: none; border: 0; cursor: pointer; }
.crm .start-zeile-kopf:hover { background: var(--bg-surface-2); }
.crm .start-zeile-kopf:focus-visible { outline: .125rem solid var(--focus); outline-offset: -.125rem; }
.crm .start-zeile-titel { font-weight: 600; overflow-wrap: anywhere; }
.crm .start-zeile-satz { font-size: var(--fs-ui); color: var(--text-1); overflow-wrap: anywhere; }
.crm .start-zeile-meta { font-size: var(--fs-ui); color: var(--text-2); }
.crm .start-zeile-grau .start-zeile-titel, .crm .start-zeile-grau .start-zeile-satz { color: var(--text-2); font-weight: 400; }
.crm .start-rest { display: inline-block; margin-top: 0.625rem; }
.crm .start-tabelle { width: 100%; margin: 0 0 0.625rem; border-collapse: collapse; font-size: var(--fs-ui); }
.crm .start-tabelle th, .crm .start-tabelle td { padding: 0.25rem 0.5rem; text-align: left; border-top: .0625rem solid var(--border); overflow-wrap: anywhere; }
.crm .start-tabelle th { color: var(--text-2); font-weight: 600; }
.crm .start-fehler { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 1rem; }
.crm .start-fehler p { margin: 0; color: var(--text-1); }

/* Ladezustand: gleiche Maße wie der fertige Inhalt, damit nichts springt. */
.crm .start-skel { display: block; border-radius: 0.25rem; background: var(--bg-surface-2); }
.crm .start-skel-satz { height: 1.4rem; margin: 0.375rem 0; max-width: 40rem; }
.crm .start-skel-titel { height: .875rem; width: 40%; }
.crm .start-skel-zahl { height: 2rem; width: 30%; }
.crm .start-skel-zeile { height: .875rem; width: 70%; }
.crm .start-skel-feedzeile { height: 2.75rem; margin: 0.375rem 0; }
.crm .start-kachel-skel { min-height: 9rem; }
.crm .start-satz-skel { min-height: 3.5rem; }

.crm.dark .start-hinweis-ocker, html[data-theme="dark"] .crm .start-hinweis-ocker,
.crm.dark .start-ton-ocker, html[data-theme="dark"] .crm .start-ton-ocker,
.crm.dark .start-braucht-zahl, html[data-theme="dark"] .crm .start-braucht-zahl { color: var(--ad-orange); }
.crm.dark .start-link, html[data-theme="dark"] .crm .start-link { color: var(--ad-blue-300); }


.crm .kanban-leer { grid-column: 1 / -1; flex: 1 1 100%; }

/* PR1.921-Nachzug — Zeile wie Vorlage s1: Symbol links, Grund als Schild rechts, Personenbilder in der Fußzeile. */
.crm .start-zeile-kopf { flex-direction: row; align-items: flex-start; gap: 0.75rem; }
.crm .start-zeile-symbol { flex: 0 0 1.75rem; width: 1.75rem; height: 1.75rem; display: inline-flex; align-items: center; justify-content: center; border-radius: 0.375rem; background: var(--bg-surface-2); color: var(--text-2); overflow: hidden; }
.crm .start-zeile-text { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 0.125rem; }
.crm .start-zeile-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 0.25rem; }
.crm .start-wer-bild { display: inline-flex; }
.crm .start-grund { flex: 0 0 auto; margin-left: auto; padding: 0.0625rem 0.5rem; font-size: var(--fs-ui); font-weight: 600; color: var(--ad-blue-700); background: var(--bg-surface-2); border-radius: 0.25rem; white-space: nowrap; }
.crm .start-alt { color: var(--text-2); text-decoration: line-through; }
.crm .start-chip.is-active { background: var(--text-1); color: var(--bg-surface); border-color: var(--text-1); }
.crm .start-chip.is-active .start-chip-zahl { color: inherit; }

/* ── PR1.653 — Kuerzel einfarbig, Logo mit ruhigem Rahmen ───────────── */
.crm .acc-logo-mono:not(.is-loaded),
.crm .emp-avatar-initials,
.crm .emp-avatar-photo,
.crm .crm-ep-avatar {
  box-shadow: inset 0 0 0 0.0625rem var(--mono-border);
}
.crm .acc-logo.is-loaded { box-shadow: inset 0 0 0 0.0625rem var(--border); }

/* PR1.653 — Wochenbalken: Wert sofort als Marke bei Ueberfahren und Fokus
   (vorher title, ~1 s Verzug, nicht per Tastatur). Keine Animation. Esc → is-tag-hidden. */
.crm .eorg-bar[data-tip] { position: relative; }
.crm .eorg-bar[data-tip]:hover::after,
.crm .eorg-bar[data-tip]:focus-visible::after {
  content: attr(data-tip); position: absolute; left: 50%; bottom: calc(100% + var(--s-1)); transform: translateX(-50%); z-index: 30;
  padding: var(--s-1) var(--s-2); border-radius: var(--r-sm); white-space: nowrap; font-weight: 500; font-size: var(--fs-meta);
  background: var(--bg-card); color: var(--text-1); border: 0.0625rem solid var(--border); box-shadow: var(--shadow-2);
  pointer-events: none;
}
.crm .eorg-bar[data-tip]:nth-child(-n+3):hover::after,
.crm .eorg-bar[data-tip]:nth-child(-n+3):focus-visible::after { left: 0; transform: none; }
.crm .eorg-bar[data-tip]:nth-last-child(-n+3):hover::after,
.crm .eorg-bar[data-tip]:nth-last-child(-n+3):focus-visible::after { left: auto; right: 0; transform: none; }
.crm .eorg-bar[data-tip].is-tag-hidden::after { content: none; }
.crm .eorg-bar[data-eorg-bar]:focus-visible { outline: 0.125rem solid var(--ad-blue); outline-offset: 0.125rem; }
/* ── PR1.639 — Ruhige Kopfleiste + Profilmenü ───────────────────────────
   Kopfleiste: Ort, Suche, „Apollon fragen", Glocke. Hell/Dunkel, Ansicht, Feedback und
   Drucken liegen im Profilmenü. Popover-Bewegung kommt aus .popover (PR1.636, 160/120 ms;
   reduzierte Bewegung 1 ms) — hier keine eigene. */
.crm .tb-ort { display: inline-flex; align-items: baseline; gap: var(--s-2); min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.crm .tb-ort-bereich { font-weight: 600; color: var(--text-1); }
.crm .tb-ort-sub { color: var(--text-3); }
.crm .tb-ort .sep { color: var(--text-3); }
.crm .tb-kuerzel {
  margin-left: var(--s-2); padding: 0 var(--s-1); border: thin solid var(--border); border-radius: var(--r-sm);
  font-family: var(--f-mono); font-variant-numeric: tabular-nums; font-size: var(--fs-label); color: var(--text-3); background: var(--bg-surface-2);
}
.crm .po-toggle { display: flex; align-items: center; width: 100%; }
.crm .po-text { display: flex; flex-direction: column; align-items: flex-start; flex: 1; min-width: 0; text-align: left; }
.crm .po-sub { font-size: var(--fs-label); color: var(--text-3); }
.crm .po-switch {
  position: relative; flex: 0 0 auto; width: 1.875rem; height: 1.125rem; border-radius: 62.4375rem;
  background: var(--bg-surface-3); border: thin solid var(--border-strong);
}
.crm .po-switch::after {
  content: ''; position: absolute; top: 0.0625rem; left: 0.0625rem; width: 0.875rem; height: 0.875rem; border-radius: 50%;
  background: var(--bg-surface); box-shadow: var(--shadow-1, none);
}
.crm .po-switch.is-on { background: var(--ad-blue-900); border-color: var(--ad-blue-900); }
.crm .po-switch.is-on::after { left: 0.8125rem; }
.crm .po-foot { border-top: thin solid var(--border); padding: var(--s-1); }
.crm .po-foot-act {
  width: 100%; padding: var(--s-2) var(--s-3); border: 0; border-radius: var(--r-sm); background: transparent;
  font: inherit; font-size: var(--fs-meta); color: var(--text-2); text-align: left; cursor: pointer;
}
.crm .po-foot-act:hover { background: var(--bg-hover); color: var(--text-1); }
.crm .po-foot-act:focus-visible, .crm .po-toggle:focus-visible { outline: 0.125rem solid var(--focus-ring, var(--ad-blue-700)); outline-offset: -0.125rem; }
.crm .po-skelett { list-style: none; margin: 0; padding: var(--s-2) var(--s-3); display: grid; gap: var(--s-2); }
.crm .po-skelett li { height: 1.75rem; border-radius: var(--r-sm); background: var(--bg-surface-2); }
.crm .po-fehler { color: var(--text-2); }

/* PR1.658 Nachzug 2 — die eigene Frage in blauer Blase (Bild P3), Beleg-Nummer am Namen der Zeile. */
.crm .chat-zeile.chat-ich { background: var(--ad-blue); color: white; }
.crm .chat-zeile.chat-ich p, .crm .chat-zeile.chat-ich .chat-kontext, .crm .chat-zeile.chat-ich .chat-kontext-titel { color: white; }
/* BF-175 — Zusammenhang-Chip in der eigenen (blauen) Blase: dunkles Blau statt Kartengrund,
   sonst blau auf blau (dunkel) bzw. weiss auf weiss (hell). Weiss auf --ad-blue-900 >= 4,5:1,
   in beiden Themen gleich, weil die Blase in beiden blau ist. Ausserhalb der Blase unveraendert. */
.crm .chat-zeile.chat-ich { --chat-ich-chip-grund: var(--ad-blue-900); --chat-ich-chip-linie: color-mix(in srgb, white 35%, transparent); }
.crm .chat-zeile.chat-ich .chat-kontext { background: var(--chat-ich-chip-grund); border-color: var(--chat-ich-chip-linie); }
.crm .chat-ergebnis-name .chat-beleg-zeile { margin-left: var(--s-2); }

/* PR1.641 Nachzug 3 (V6) — Kartenkopf mit Farbbalken, „Stand live" oben rechts neben dem Seitentitel */
.crm .cnkv-cardhead { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:var(--s-2) var(--s-4); }
.crm .cnkv-legend { gap:var(--s-2); }
.crm .cnkv-legend-bar { display:inline-flex; width:10rem; height:.75rem; border-radius:.25rem; overflow:hidden; box-shadow:inset 0 0 0 0.0625rem var(--border-strong); }
.crm .cnkv-legend-bar .cnkv-dot { flex:1; width:auto; height:100%; border-radius:0; box-shadow:none; }
.crm .cnkv-stand { margin-left:auto; display:inline-flex; align-items:center; gap:var(--s-2); font-size:var(--fs-meta); color:var(--text-2); }
.crm .cnkv-live { width:.5rem; height:.5rem; border-radius:50%; background:var(--success); flex:none; }

.crm .start-zahl-kaestchen { display: inline-block; min-width: 1.5rem; padding: 0.0625rem 0.375rem; text-align: center; border-radius: var(--r-sm, 0.25rem); background: color-mix(in srgb, var(--ad-orange-900) 14%, transparent); color: var(--ad-orange-900); font-weight: 600; font-variant-numeric: tabular-nums; font-size: var(--fs-ui); }
.crm .start-braucht-zahl { display: flex; justify-content: center; }
.crm .start-abschnitt-zahl { margin-left: 0.25rem; font-weight: 400; color: var(--text-3); }
.crm .start-braucht-details { flex-wrap: nowrap; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; display: block; }
.crm .start-braucht-details .start-detail { margin-right: 0.875rem; }
.crm .start-datum-klein { color: var(--text-3); }
.crm .start-datum-ocker { color: var(--ad-orange-900); font-weight: 600; }
.crm .start-person-zeile { display: inline-flex; align-items: center; gap: 0.375rem; min-width: 0; }
.crm .start-person-foto { display: inline-flex; flex: 0 0 auto; }
.crm.dark .start-datum-ocker, html[data-theme="dark"] .crm .start-datum-ocker, .crm.dark .start-zahl-kaestchen, html[data-theme="dark"] .crm .start-zahl-kaestchen { color: var(--ad-orange); }

/* PR1.677 Nachzug — Kennzahlen der Projektliste in EINER Zeile: Kacheln brechen nicht um, bei wenig Platz
   entfallen zuerst die Trennpunkte, dann gibt die Trefferzahl nach. */
.crm #crm-project-kennzahlen { flex-wrap: nowrap; container-type: inline-size; }
.crm #crm-project-kennzahlen .opp-kz { flex: none; white-space: nowrap; }
.crm #crm-project-kennzahlen .opp-kz-count { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
@container (max-width: 76rem) { .crm #crm-project-kennzahlen .opp-kz-sep { display: none; } }
/* BF-152: eine Kachel mehr — die Trefferzahl weicht früher, statt als „8…“ abzubrechen. */
@container (max-width: 78rem) { .crm #crm-project-kennzahlen .opp-kz-count { display: none; } }
/* BF-152 — „ohne Projektname“ in Ocker wie die Vorlage (.ock), nicht im Lücken-Ocker der übrigen Zähler. */
.crm .opp-kz[data-project-kz="ohneName"] .opp-kz-num { color: var(--ad-orange-900); }
.crm.dark .opp-kz[data-project-kz="ohneName"] .opp-kz-num, html[data-theme="dark"] .crm .opp-kz[data-project-kz="ohneName"] .opp-kz-num { color: var(--ad-orange); }
/* BF-152 — mit „ohne Projektname" eine Kachel mehr: bei 1280 rücken die Kacheln enger statt abzuschneiden. */
/* BF-152 — eine Kachel mehr: bis 92rem Container rücken die Kacheln enger und die Trennpunkte
   entfallen, damit „x von y angezeigt“ ganz stehen bleibt statt als „84 v…“ abzubrechen. */
@container (max-width: 92rem) { .crm #crm-project-kennzahlen .opp-kz { padding-inline: .25rem; gap: .25rem; } .crm #crm-project-kennzahlen { gap: 0; } .crm #crm-project-kennzahlen .opp-kz-sep { display: none; } }
@container (max-width: 86rem) { .crm #crm-project-kennzahlen .opp-kz { padding-inline: .125rem; } .crm #crm-project-kennzahlen .opp-kz-count { padding-inline: .25rem; } }
/* Knapp darüber (1280 mit eingeklappter Leiste) noch ein paar Pixel enger, damit die Trefferzahl
   ganz steht statt als „84 von 85 angezei…“. */
@container (max-width: 82rem) { .crm #crm-project-kennzahlen .opp-kz { gap: .1875rem; } .crm #crm-project-kennzahlen .opp-kz-count { padding-inline: .125rem; } }

/* PR1.658 Nachzug 3 — Tabellentitel einzeilig „Kunde · Kurzname", Rest mit Auslassung. */
.crm .chat-ergebnis-tabelle td.chat-ergebnis-name { max-width: 0; width: 60%; white-space: nowrap; }
.crm .chat-ergebnis-name > span:not(.chat-zeile-logo) { display: inline-block; max-width: calc(100% - 2.75rem); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: middle; }

/* Nachzug PR1.610 — Dokumente am Ende des Betriebs: eine Zeile, Tabelle erst beim Klick. */
.crm .betrieb-docs { margin-top: 0.75rem; }
.crm .betrieb-docs-kopf { appearance: none; display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.25rem 0.5rem; width: 100%; padding: 0.75rem 1rem; border: 0; border-radius: var(--radius-card, 0.75rem); background: var(--surface, var(--bg-card)); color: inherit; font: inherit; text-align: left; cursor: pointer; }
.crm .betrieb-docs-hinweis { color: var(--text-2); }
.crm .betrieb-docs-kopf:hover .betrieb-link { text-decoration: underline; }
.crm .betrieb-docs-kopf:focus-visible { outline: 0.125rem solid var(--focus); outline-offset: -0.125rem; }
.crm .betrieb-docs-kopf + div { margin-top: 0.75rem; }
/* PR1.658 Nachzug 4 — Kundenkurzname vorn; bei Platzmangel wird zuerst der Kundenteil gekuerzt, nie zuerst der Opportunity-Teil. */
.crm td.chat-ergebnis-name > span.chat-ergebnis-titel { display: inline-flex; align-items: baseline; min-width: 0; max-width: calc(100% - 1.875rem); overflow: hidden; }
.crm .chat-ergebnis-titel > .chat-ergebnis-kunde { flex: none; white-space: nowrap; }
.crm .chat-ergebnis-titel > .chat-ergebnis-trenner { flex: none; margin: 0 0.3em; }
.crm .chat-ergebnis-titel > .chat-ergebnis-opp { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* PR1.658 Nachzug 5 — Kundenteil kommt fertig gekuerzt aus dem Code („IT-Dienstleist…“), nie per CSS: keine Luecke vor dem „·“. */

/* ===================================================================
   PR1.692 — Einsatzplan geraeumig: die ganze Seite scrollt (Vorlage E1/E2).
   .crm-ep-page ist der EINE Scroll-Bereich (beide Richtungen, Inline-Stil in crm-capacity.js).
   Seitenkopf, Pillen und Filter (.crm-ep-vorspann) liegen darin und scrollen senkrecht weg;
   waagrecht bleiben sie stehen (sticky left, Breite = sichtbare Breite ueber container-type).
   KW-Kopf und Zeile „nicht verrechnet" kleben oben an der Seite, die Namensspalte links.
   Taeglich genutzt -> keine Bewegung.
   =================================================================== */
.crm .crm-ep-page { container-type:inline-size; background:var(--bg-app); }
.crm .crm-ep-canvas--matrix { width:max-content; min-width:100%; }
.crm .crm-ep-vorspann { position:sticky; left:0; z-index:6; width:100cqw; }
.crm .crm-ep-vorspann > .filter-row { margin-bottom:var(--s-3); }
/* Raster-Flaeche: seitlicher Abstand als Innenabstand, die Namensspalte klebt buendig an der
   Kante der Seite (--ep-body-px 0 → left:0, PR1.570-Regel bleibt gueltig). */
.crm .crm-ep-body { --ep-body-px:0rem; display:flex; flex-direction:column; gap:0.875rem; padding:0 1.375rem 2.6667rem; }
.crm .crm-ep-canvas--matrix .crm-ep-body > :not(.crm-ep-grid) { position:sticky; left:1.375rem; max-width:calc(100cqw - 2.75rem); }
/* Personenzeile einzeilig, 40 px: Foto 1.75rem, Kurzname und „0 % KW45" in einer Zeile. */
.crm .crm-ep-person > th,
.crm .crm-ep-person > td { height:2.6667rem; padding-top:0.125rem; padding-bottom:0.125rem; }
.crm .crm-ep-person .crm-ep-avatar { flex-basis:1.75rem; width:1.75rem; height:1.75rem; }
.crm .crm-ep-person .crm-ep-name-txt { font-size:var(--fs-ui); }
.crm .crm-ep-person .crm-ep-ref { flex-direction:row; align-items:baseline; gap:var(--s-1); white-space:nowrap; }
.crm .crm-ep-person .crm-ep-namebox { height:100%; }
/* Gruppenzeile 52 px. */
.crm .crm-ep-grp > th,
.crm .crm-ep-grp > td { height:3.4667rem; }


/* ── PR1.664 — Ergebniskarte: Redesign-Farben der Folge-Chips ─────────────────────────
   Folgefragen (✦) Orange-Tint, Aktionen neutral — Orange bleibt die Farbe der KI. */
.crm .dcp-folge { background: var(--bg-surface); }
.crm .dcp-folge:hover { background: var(--bg-hover); }
.crm .dcp-folge-frage {
    border-color: color-mix(in srgb, var(--ad-orange-700) 45%, var(--border));
    color: var(--ad-orange-900);
}
.crm .dcp-folge-frage:hover { background: color-mix(in srgb, var(--ad-orange-700) 10%, var(--bg-surface)); }
.crm .dcp-folge-aktion { color: var(--text-1); }
.crm.dark .dcp-folge-frage, html[data-theme="dark"] .crm .dcp-folge-frage { color: var(--ad-orange-700); }

/* PR1.664 — Umschalter im Ergebniskopf: segmentiert (Vorlage C2), aktiv weiß auf grauem Grund. */
.crm .dcp-erg-kopf .ck-leiste { display: inline-flex; flex-wrap: nowrap; gap: 0.125rem; padding: 0.1875rem; border: 0.0625rem solid var(--border); border-radius: 0.5rem; background: var(--bg-surface-2); }
.crm .dcp-erg-kopf .ck-typ { display: inline-flex; align-items: center; gap: 0.375rem; border: 0; border-radius: 0.375rem; background: transparent; color: var(--text-2); font-weight: 600; }
.crm .dcp-erg-kopf .ck-typ:hover { color: var(--text-1); background: transparent; }
.crm .dcp-erg-kopf .ck-typ.is-active { background: var(--bg-surface); color: var(--text-1); box-shadow: 0 0.0625rem 0.1875rem color-mix(in srgb, var(--text-1) 18%, transparent); }

/* PR1.664 — Ergebniskarte: Eckenradius 14 wie in der Vorlage C2. */
.crm .card.dcp-ergebnis { border-radius: var(--r-xl); }

/* PR1.598 — Erweitert Opportunities: Redesign-Sprache ueber den Tokens (Layout in style.css). */
.crm .dbp-stand { margin-right: var(--s-2); }
.crm .dbp-kpi-fuss { margin-top: var(--s-3); padding-top: var(--s-3); }
.crm .dbp-al-zeile { gap: var(--s-3); padding: var(--s-3) 0; }
.crm .dbp-al-zeile:first-child { padding-top: var(--s-1); }
.crm .dbp-al-knopf { border-radius: var(--r-sm); background: var(--bg-surface); }
.crm .dbp-al-schlicht { background: none; }
.crm .dbp-saeule-tipp-zwei { border-radius: var(--r-sm); box-shadow: var(--shadow-2); }

/* ── PR1.656 — Kanban: gewichtete Summe, Liegezeit, Spur „Gewonnen" (Entwurf V3, Legende 1/2/4) ──
   Klassik-Pendant: Block „PR1.656" in style.css. Nur Tokens und rem (ui-craft-Ratchet).
   Wochenblick, keine Animation. KEINE Seitenkante an der Karte (PR1.653/PR1.647): die Phase steht
   allein im Spaltenkopf; Ocker/Rot heisst „liegt zu lange" und sonst nichts. */
.crm .kan-sums2 {
  display: flex; align-items: baseline; justify-content: space-between; gap: var(--s-2);
  padding: 0 var(--s-1);
  font-size: var(--fs-meta); color: var(--text-2);
  font-variant-numeric: tabular-nums;
}
.crm .kan-sums2 .kan-weighted { position: relative; border-radius: var(--r-sm); cursor: help; }
.crm .kan-sums2 .kan-weighted:focus-visible { outline: .125rem solid var(--ad-blue); outline-offset: .125rem; }
.crm .kan-sums2 .kan-weighted:focus-visible::after {
  content: attr(data-tip);
  position: absolute; z-index: 5; top: 100%; left: 0; margin-top: var(--s-1);
  width: max-content; max-width: 16rem; padding: var(--s-2) var(--s-3);
  background: var(--bg-surface); color: var(--text-1);
  border: .0625rem solid var(--border); border-radius: var(--r-md); box-shadow: var(--shadow-2);
  white-space: normal; font-weight: 400;
}
.crm .kan-sums2 .kan-overdue {
  font: inherit; font-weight: 600; border: 0; background: transparent; cursor: pointer;
  padding: 0 var(--s-1); border-radius: var(--r-sm);
  color: var(--ad-orange-900);
}
.crm .kan-sums2 .kan-overdue:hover { text-decoration: underline; }
.crm .kan-sums2 .kan-overdue[aria-pressed="true"] { background: var(--tint-warn); }
.crm .kan-sums2 .kan-overdue:focus-visible { outline: .125rem solid var(--ad-blue); outline-offset: .0625rem; }
.crm.dark .kan-sums2 .kan-overdue ,
html[data-theme="dark"] .crm .kan-sums2 .kan-overdue { color: var(--ad-orange); }
.crm .kan-card .kc-liegezeit {
  display: inline-flex; align-items: center; gap: var(--s-1);
  font-size: var(--fs-meta); color: var(--text-2); white-space: nowrap;
}
.crm .kan-card .kc-liegezeit.neu { color: var(--text-3); }
.crm .kan-card .kc-liegezeit.warn,
.crm .kan-card .kc-liegezeit.bad { padding: .125rem var(--s-2); border-radius: var(--r-sm); font-weight: 600; }
.crm .kan-card .kc-liegezeit.warn { background: var(--tint-warn); color: var(--ad-orange-900); }
.crm .kan-card .kc-liegezeit.bad { background: var(--tint-red); color: var(--ad-red-800); }
.crm.dark .kan-card .kc-liegezeit.warn ,
html[data-theme="dark"] .crm .kan-card .kc-liegezeit.warn { color: var(--ad-orange); }
.crm.dark .kan-card .kc-liegezeit.bad ,
html[data-theme="dark"] .crm .kan-card .kc-liegezeit.bad { color: var(--ad-red-300); }
.crm .kan-won-lane {
  flex: 0 0 15rem; align-self: flex-start; margin-inline-start: var(--s-3);
  display: flex; flex-direction: column; gap: var(--s-2);
  padding: var(--s-3); border: .0625rem dashed var(--border); border-radius: var(--r-lg);
  background: transparent;
}
.crm .kan-won-head { display: flex; align-items: center; gap: var(--s-2); padding: 0 var(--s-1); }
.crm .kan-won-head .name { font-weight: 600; font-size: var(--fs-body); color: var(--text-2); }
.crm .kan-won-head .cnt {
  font-size: var(--fs-meta); color: var(--text-2); font-variant-numeric: tabular-nums;
  padding: .0625rem var(--s-2); background: var(--bg-surface); border: .0625rem solid var(--border); border-radius: 6.25rem;
}
.crm .kan-won-card {
  display: flex; align-items: flex-start; gap: var(--s-2); min-width: 0;
  padding: var(--s-2) var(--s-3); cursor: pointer;
  background: var(--bg-surface); border: .0625rem solid var(--border); border-radius: var(--r-md); box-shadow: var(--shadow-1);
}
.crm .kan-won-card:focus-visible { outline: .14rem solid var(--ad-blue); outline-offset: .125rem; }
.crm .kan-won-text { min-width: 0; }
.crm .kan-won-title { font-weight: 600; font-size: var(--fs-ui); line-height: 1.3; color: var(--text-1); overflow-wrap: anywhere; }
.crm .kan-won-date { font-size: var(--fs-meta); color: var(--text-2); }
.crm .kan-won-foot { margin: 0; padding: 0 var(--s-1); font-size: var(--fs-meta); color: var(--text-2); }
/* PR1.656 — Faktenzeile enger, damit das kurze Liegezeit-Schild hinter Volumen und PT Platz hat. */
.crm .kan-card .kc-facts { gap: var(--s-1) var(--s-2); }
.crm .kan-card .kc-facts .kc-liegezeit { flex: 0 0 auto; }

/* PR1.664 — Kopfsatz der Ergebniskarte: Rolle Abschnitt (20 px) mit engerer Laufweite ≈ 18 px Breite der Vorlage C2 (schlägt .crm .dcp-h2). */
.crm .dcp-h2.dcp-erg-titel { font-size: var(--fs-title); font-weight: 600; letter-spacing: -0.03em; }

/* PR1.669 (Vorlage E1) — Aufteilen je … als kleine Vielfache, Tooltip „Klick öffnet …“, Radio-Liste der Gestalten-Gruppen. */
.crm { --kv-tip-bg: var(--text-1); --kv-tip-2: color-mix(in srgb, var(--bg-surface) 78%, var(--text-1)); --kv-gl: var(--bg-surface-3); }
.crm .kv { position: relative; min-width: 0; }
.crm .kv-raster { display: grid; gap: .625rem; }
.crm .kv-raster.c2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.crm .kv-raster.c3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.crm .kv-raster.c4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.crm .kv-bild { border: .0625rem solid var(--border); border-radius: var(--r-lg); padding: .5625rem .6875rem .375rem; background: var(--bg-surface); position: relative; min-width: 0; }
.crm .kv-bild.is-ohne { background: var(--bg-surface-2); }
.crm .kv-titel { display: flex; align-items: baseline; gap: .375rem; font-size: var(--fs-meta); white-space: nowrap; color: var(--text-1); }
.crm .kv-titel b { font-weight: 600; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.crm .kv-titel span { margin-left: auto; color: var(--text-2); font-weight: 600; font-variant-numeric: tabular-nums; }
.crm .kv-svg { display: block; width: 100%; height: auto; overflow: visible; }
.crm .kv-svg .kv-lb { font-size: var(--fs-label); fill: var(--text-3); font-weight: 500; }
.crm .kv-svg .kv-vl { font-size: var(--fs-label); fill: var(--text-1); font-weight: 600; font-variant-numeric: tabular-nums; }
.crm .kv-svg .kv-gl { stroke: var(--kv-gl); }
.crm .kv-c[data-chart-el] { cursor: pointer; }
.crm .kv-c:focus { outline: none; }
.crm .kv-c:focus-visible rect, .crm .kv-c.is-hot rect { stroke: var(--text-1); stroke-width: 2; }
.crm .kv.is-ohne-ziel .kv-c, .crm .is-ohne-ziel .ck-el { cursor: default; }
.crm .kv-bild.is-sk .kv-titel b, .crm .kv-bild.is-sk .kv-titel span { background: var(--bg-surface-3); color: transparent; border-radius: .25rem; }
.crm .kv-svg .kv-sk { fill: var(--bg-surface-3); }
.crm .kv-fuss { display: flex; gap: .875rem; align-items: center; flex-wrap: wrap; font-size: var(--fs-meta); color: var(--text-2); margin-top: .625rem; }
.crm .kv-fuss .kv-sp { flex: 1; }
.crm .kv-fuss-kachel { font-size: var(--fs-label); color: var(--text-3); margin-top: .5rem; }
.crm .kv-legende { display: inline-flex; gap: .875rem; flex-wrap: wrap; }
.crm .kv-leg { display: inline-flex; align-items: center; color: var(--text-1); }
.crm .kv-leg i { display: inline-block; width: .625rem; height: .625rem; border-radius: .1875rem; margin-right: .375rem; }
.crm .kv-hinweis { display: flex; gap: .5rem; align-items: flex-start; margin-top: .625rem; padding: .5rem .75rem; border-radius: var(--r-md); background: var(--ocker-grund); color: var(--text-1); font-size: var(--fs-meta); }
.crm .kv-hinweis .kv-warn { color: var(--ocker-fuell); }
.crm .kv-weitere { margin: .5rem 0 0; font-size: var(--fs-meta); color: var(--text-2); }
.crm .kv-tip { position: absolute; z-index: 30; background: var(--kv-tip-bg); color: var(--bg-surface); border-radius: var(--r-md); padding: .375rem .625rem; font-size: var(--fs-meta); font-weight: 600; white-space: nowrap; box-shadow: 0 .375rem 1.125rem rgba(14, 23, 38, .22); pointer-events: none; }
.crm .kv-tip span { display: block; }
.crm .kv-tip small { display: block; font-weight: 500; color: var(--kv-tip-2); font-size: var(--fs-label); }
.crm .kv-tip::after { content: ''; position: absolute; left: var(--kv-pfeil, 1.125rem); bottom: -.3125rem; width: .625rem; height: .625rem; background: var(--kv-tip-bg); transform: rotate(45deg); }
.crm .kv-fehler { display: flex; gap: .75rem; align-items: center; justify-content: space-between; margin-top: .625rem; padding: .5rem .75rem; border-radius: var(--r-md); border: .0625rem solid var(--ad-orange-700); background: color-mix(in srgb, var(--ad-orange-700) 10%, var(--bg-surface)); font-size: var(--fs-meta); color: var(--text-1); }
.crm .dash-pin-bild[data-kv] { position: relative; }
.crm .dash-pin-je { margin-left: .375rem; font-size: var(--fs-meta); font-weight: 500; color: var(--text-3); }
.crm .dzg-neu { display: inline-block; margin-left: .375rem; padding: 0 .4375rem; border-radius: 62.4375rem; background: var(--ad-orange-700); color: var(--text-inv); font-size: var(--fs-label); font-weight: 700; line-height: 1.5; vertical-align: .0625rem; }
.crm .dzg-opt { display: flex; flex-direction: column; gap: .125rem; margin-top: .25rem; }
.crm .dzg-opt-z { all: unset; box-sizing: border-box; display: flex; gap: .5rem; align-items: center; font-size: var(--fs-meta); color: var(--text-1); padding: .3125rem .5rem; border-radius: .4375rem; cursor: pointer; }
.crm .dzg-opt-z:hover { background: var(--bg-hover); }
.crm .dzg-opt-z:focus-visible { outline: .125rem solid var(--ad-blue); outline-offset: -.0625rem; }
.crm .dzg-opt-z i { width: .875rem; height: .875rem; border-radius: 50%; border: .1rem solid var(--border-strong); flex: none; background: var(--bg-surface); box-sizing: border-box; }
.crm .dzg-opt-z.is-on { background: color-mix(in srgb, var(--ad-blue) 10%, var(--bg-surface)); color: var(--dzg-blau-text); font-weight: 600; }
.crm .dzg-opt-z.is-on i { border-color: var(--ad-blue); background: var(--ad-blue); box-shadow: inset 0 0 0 .125rem var(--bg-surface); }
.crm .dzg-opt-z > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.crm .dzg-opt-z small { margin-left: auto; padding-left: .5rem; color: var(--text-3); font-weight: 500; white-space: nowrap; }
.crm .dzg-hinweis-klein { margin: .25rem 0; font-size: var(--fs-meta); color: var(--text-2); }

.crm .opp-herkunft { display: inline-flex; gap: .5rem; align-items: center; background: color-mix(in srgb, var(--ad-blue) 10%, var(--bg-surface)); color: var(--dzg-blau-text); border-radius: 62.4375rem; padding: .25rem .5rem .25rem .75rem; font-size: var(--fs-meta); font-weight: 600; }
.crm .opp-herkunft > svg { width: .875rem; height: .875rem; }
.crm .opp-herkunft-x { all: unset; box-sizing: border-box; display: grid; place-items: center; width: 1.25rem; height: 1.25rem; border-radius: 50%; background: var(--bg-surface); cursor: pointer; }
.crm .opp-herkunft-x svg { width: .75rem; height: .75rem; }
.crm .opp-herkunft-x:focus-visible { outline: .125rem solid var(--ad-blue); outline-offset: .0625rem; }

/* ── PR1.701 — NKV-Einsatzplan geräumig, Spalten ziehbar (Vorlage K1, nur neue Ansicht) ──
   Nur die CC-Matrix (.cnkv-matrix); Personen- und Pivot-Karten bleiben unverändert. Wurzel = 15 px:
   54 px Kachel = 3.6rem, Wert in der Rolle --fs-title (20 px; nächste Skalenstufe zu 19 px, Ziffernhöhe wie K1), 6 px Abstand = .4rem. Breiten stehen am <col>
   (nkv-spalten.js), deshalb festes Tabellen-Layout; Wochen ohne Breite teilen sich den Rest.
   Keine Bewegung (täglich genutzt): der Griff wechselt nur die Farbe. */
.crm .cnkv-main { position:relative; }
/* Vorlage K1: ~80 px vom Untertitel bis zur Kopfzeile — in diesem Abstand steht der Zieh-Hinweis. */
.crm .cnkv-matrix-wrap { overflow-x:auto; margin-top:2.6667rem; }
/* Senkrecht 6 px zwischen den Zeilen; waagerecht nur zwischen den Kacheln (je 3 px Innenabstand, Fläche auf
   den Inhalt beschnitten) — so stehen Bereich/FTE/frei exakt auf 300/90/90 wie in K1. */
.crm .cnkv-heat.cnkv-matrix { table-layout:fixed; width:100%; border-spacing:0 .4rem; }
.crm .cnkv-matrix thead th.cnkv-wk { width:auto; }
.crm .cnkv-matrix thead th, .crm .cnkv-matrix thead th.num { position:relative; overflow:visible; padding-top:var(--s-1); padding-bottom:var(--s-1); font-size:var(--fs-label); }
.crm .cnkv-matrix thead th.cnkv-col-sel { color:var(--text-3); }
.crm .cnkv-matrix thead th.cnkv-wk .cnkv-kw { color:var(--text-1); font-weight:700; font-size:var(--fs-meta); }
.crm .cnkv-matrix thead th.cnkv-col-sel .cnkv-kw { color:var(--ad-blue); }
.crm .cnkv-matrix tbody td { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.crm .cnkv-matrix tbody td.cnkv-hz { height:3.6rem; padding-top:0; padding-bottom:0; vertical-align:middle;
  font-family:var(--f-cond); font-size:var(--fs-title); font-weight:700; font-variant-numeric:tabular-nums;
  padding-inline:.2rem; background-clip:content-box; border-radius:.6rem; }
/* Die Stufen-Regeln setzen `background` als Kurzform (Zuschnitt zurueck auf border-box) — hier gleich stark, spaeter. */
.crm .cnkv-matrix tbody td.cnkv-hz[class*="nkv-"] { background-clip:content-box; }
/* Vorlage K1: Legendentext ruhig grau, nicht fett. */
.crm .cnkv-main .cnkv-legend .cnkv-legend-end { font-weight:400; color:var(--text-3); }
.crm .cnkv-matrix .cnkv-rowbtn { font-weight:600; }
.crm .cnkv-matrix .cnkv-total td:first-child b { font-weight:700; }
.crm .cnkv-matrix tbody td:not(.cnkv-hz) { font-size:var(--fs-ui); }
/* Griff: dünner Strich am rechten Rand der Kopfzelle, Trefferfläche .6rem, aktiv blau. */
.crm .cnkv-grip { position:absolute; top:0; bottom:0; right:-.5rem; width:.6rem; cursor:col-resize; z-index:1; touch-action:none; }
.crm .cnkv-grip::after { content:""; position:absolute; top:0; bottom:0; left:50%; width:.1333rem; margin-left:-.0667rem; border-radius:.0667rem; background:var(--border-strong); }
.crm .cnkv-grip:hover::after, .crm .cnkv-grip:focus-visible::after, .crm .cnkv-grip.cnkv-grip-zieht::after { background:var(--ad-blue); }
.crm .cnkv-grip:focus-visible { outline:.1333rem solid var(--focus); outline-offset:0; border-radius:.1333rem; }
.crm .cnkv-griff-hinweis { position:absolute; z-index:5; pointer-events:none; white-space:nowrap;
  background:var(--ad-blue-900); color:white; font-size:var(--fs-meta); font-weight:500; padding:.5333rem .8rem; border-radius:var(--r-sm); box-shadow:var(--shadow-lg); }
.crm .cnkv-menu { position:absolute; z-index:6; min-width:14rem; padding:var(--s-1); background:var(--bg-card); border:.0667rem solid var(--border); border-radius:var(--r-md); box-shadow:var(--shadow-lg); }
.crm .cnkv-menu-item { display:block; width:100%; text-align:left; background:none; border:0; border-radius:var(--r-sm); padding:var(--s-2) var(--s-3); color:var(--text-1); font:inherit; font-size:var(--fs-ui); cursor:pointer; }
.crm .cnkv-menu-item:hover, .crm .cnkv-menu-item:focus-visible { background:var(--bg-hover); outline:none; }
.crm .cnkv-menu-item:focus-visible { box-shadow:inset 0 0 0 .1333rem var(--focus); }

/* Einsatzplan: von der Staffing-Tafel eben zugeordnete Personen (oben, markiert). */
.crm .crm-ep-person--neu > .crm-ep-name { box-shadow: inset .1875rem 0 0 var(--ad-blue); background: var(--tint-blue); }

/* PR1.697 — Farbregel-Nachzug Pythia (Bilder P1/P2): Eingaberahmen im Fokus und waehrend
   des Laufs Orange (Orange = Anlegen und KI), Knopf „Fragen" in der Orange-Flaeche aus P1
   (= --ad-orange-700). Schrift dunkel statt weiss (Vasili 04.11.2026): weiss auf
   --ad-orange-700 ergibt 3.02:1 (vgl. BF-50), --anlegen-text ergibt 5.9:1. Keine Bewegung. */
.crm .chat-eingabe-karte:focus-within,
.crm .chat-eingabe-karte:has(.chat-anhalten) {
  border-color: var(--ad-orange-700);
  box-shadow: 0 0 0 0.1875rem color-mix(in srgb, var(--ad-orange) 22%, transparent);
}
.crm .btn.chat-senden { background: var(--ad-orange-700); border-color: var(--ad-orange-700); color: var(--anlegen-text); font-weight: 600; }
.crm .btn.chat-senden:hover:not(:disabled) {
  background: color-mix(in srgb, var(--ad-orange-700) 88%, var(--ad-orange-900));
  border-color: color-mix(in srgb, var(--ad-orange-700) 88%, var(--ad-orange-900));
  color: var(--anlegen-text);
}
.crm .btn.chat-senden:focus-visible { outline: 0.125rem solid var(--focus); outline-offset: 0.125rem; }




/* PR1.757 — Admin-Panel › Datenherz (Vorlage V27, nur neue Ansicht).
   Maße 1:1 aus dem Prototyp steuerung-admin.html#v27 (getComputedStyle), 1 rem = 15 px.
   Farben: Tokens der neuen Ansicht; die Prototyp-Töne ohne Token als rgb() hier am Block,
   dunkel eigene Stufen (Kontrast ≥ 4,5). Fokus: die gemeinsame 2-px-Regel (.crm :focus-visible). */
.crm .dhz {
  --dhz-balken: rgb(207 226 245);
  --dhz-gruen-text: rgb(79 138 0); --dhz-gruen-grund: rgb(238 248 224);
  --dhz-gelb-text: rgb(138 106 0); --dhz-gelb-grund: rgb(255 246 214); --dhz-gelb-marke: rgb(255 239 179); --dhz-gelb-neu: rgb(255 229 138);
  --dhz-rot-text: var(--ad-red-700); --dhz-rot-grund: rgb(253 236 236);
  --dhz-zeile-neu: rgb(243 250 234); --dhz-zeile-geaendert: rgb(255 250 232); --dhz-zeile-geloescht: rgb(253 241 241);
  --dhz-q-neu: rgb(221 240 196); --dhz-q-geloescht: rgb(248 211 212);
  --dhz-chip-text: var(--ad-blue-700); --dhz-griff-text: var(--ad-blue-800);
  display: flex; flex-direction: column; gap: 0.9333rem; min-width: 0;
}
.crm.dark .dhz, html[data-theme="dark"] .crm .dhz {
  --dhz-balken: color-mix(in srgb, var(--ad-blue) 30%, var(--bg-surface));
  --dhz-gruen-text: var(--ad-green); --dhz-gruen-grund: color-mix(in srgb, var(--ad-green) 18%, var(--bg-surface));
  --dhz-gelb-text: rgb(240 200 90); --dhz-gelb-grund: color-mix(in srgb, rgb(240 200 90) 16%, var(--bg-surface));
  --dhz-gelb-marke: color-mix(in srgb, rgb(240 200 90) 22%, var(--bg-surface)); --dhz-gelb-neu: color-mix(in srgb, rgb(240 200 90) 34%, var(--bg-surface));
  --dhz-rot-text: var(--ad-red-300); --dhz-rot-grund: color-mix(in srgb, var(--ad-red) 20%, var(--bg-surface));
  --dhz-zeile-neu: color-mix(in srgb, var(--ad-green) 9%, var(--bg-surface)); --dhz-zeile-geaendert: color-mix(in srgb, rgb(240 200 90) 9%, var(--bg-surface));
  --dhz-zeile-geloescht: color-mix(in srgb, var(--ad-red) 10%, var(--bg-surface));
  --dhz-q-neu: color-mix(in srgb, var(--ad-green) 35%, var(--bg-surface)); --dhz-q-geloescht: color-mix(in srgb, var(--ad-red) 35%, var(--bg-surface));
  --dhz-chip-text: var(--ad-blue-300); --dhz-griff-text: var(--ad-blue-300);
}
.crm .dhz .sr-only { position: absolute; width: 0.0667rem; height: 0.0667rem; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.crm .dhz-kopf { display: flex; align-items: center; gap: 0.9333rem; }
.crm .dhz-kopf-text { min-width: 0; flex: 1 1 auto; }
.crm .dhz-titel { margin: 0; font-size: var(--fs-title); font-weight: 700; line-height: 1.4; color: var(--text-1); }
.crm .dhz-hilfe { margin: 0.1333rem 0 0; font-size: var(--fs-ui); line-height: 1.4; color: var(--text-2); }
.crm .dhz-hinweis { flex: none; display: inline-flex; align-items: center; gap: 0.5333rem; padding: 0.2667rem 0.8rem; border: 0.0667rem solid var(--border); border-radius: 62.5rem; background: var(--bg-surface); font-size: var(--fs-meta); line-height: 1.4; color: var(--text-2); white-space: nowrap; }
.crm .dhz-punkt { width: 0.5333rem; height: 0.5333rem; border-radius: 50%; background: var(--ad-green-700); flex: none; }

.crm .dhz-regler { padding: 0.9333rem 1.2rem 0.6667rem; border-radius: 0.8rem; box-shadow: none; }
.crm .dhz-regler-kopf { display: flex; align-items: center; flex-wrap: wrap; gap: 0.4rem 0.5333rem; margin-bottom: 0.4rem; font-size: var(--fs-ui); }
.crm .dhz-regler-titel { font-weight: 600; color: var(--text-1); }
.crm .dhz-regler-hilfe { flex: 1 1 0; min-width: 0; font-size: var(--fs-label); line-height: 1.4; color: var(--text-3); } /* schmal: bricht um, nie gekürzt */
.crm .dhz-regler-rechts { flex: none; display: inline-flex; align-items: center; gap: 0.5333rem; margin-left: auto; }
.crm .dhz-schalter { display: inline-flex; align-items: center; gap: 0.5333rem; font-size: var(--fs-ui); font-weight: 500; color: var(--text-1); }
.crm .dhz-schalter .funk-switch { width: 2.5333rem; height: 1.4667rem; border: 0; border-radius: 0.7333rem; background: var(--border-strong); }
.crm .dhz-schalter .funk-switch-knopf { top: 0.2rem; left: 0.2rem; width: 1.0667rem; height: 1.0667rem; background: var(--bg-surface); box-shadow: 0 0.0667rem 0.1333rem rgb(0 0 0 / .15); }
.crm .dhz-schalter .funk-switch[aria-checked="true"] { background: var(--ad-blue); }
.crm .dhz-schalter .funk-switch:focus-visible { outline-width: .14rem; outline-offset: .14rem; } /* 2 px wie .dar-schalter (.125rem rundet Chromium auf 1 px) */
.crm .dhz-schalter .funk-switch[aria-checked="true"] .funk-switch-knopf { left: 1.2667rem; }
.crm .dhz-chip { display: inline-flex; align-items: center; padding: 0.2rem 0.7333rem; border-radius: 62.5rem; background: var(--tint-blue); font-size: var(--fs-label); font-weight: 600; line-height: 1.4; color: var(--dhz-chip-text); white-space: nowrap; }
.crm .dhz-pfeil { display: inline-flex; font-size: var(--fs-label); color: var(--text-3); }
.crm .dhz-spur { position: relative; height: 4.9333rem; margin: 0 0.5333rem; }
.crm .dhz-balken-reihe { position: absolute; left: 0; right: 0; bottom: 1.4667rem; height: 2.6667rem; display: flex; align-items: flex-end; gap: 0.2rem; }
.crm .dhz-balken { flex: 1 1 0; min-width: 0; min-height: 0.1333rem; border-radius: 0.1333rem 0.1333rem 0 0; background: var(--dhz-balken); cursor: pointer; }
.crm .dhz-balken-aktiv { background: var(--ad-blue); }
.crm .dhz-linie { position: absolute; left: 0; right: 0; bottom: 1.0667rem; height: 0.2667rem; border-radius: 0.1333rem; background: var(--bg-surface-3); }
.crm .dhz-linie-aktiv { position: absolute; top: 0; bottom: 0; background: var(--ad-blue); }
.crm .dhz-griff { position: absolute; bottom: 0.2667rem; transform: translateX(-50%); display: grid; place-items: center; width: 1.7333rem; height: 1.7333rem; padding: 0; border: 0.1334rem solid var(--ad-blue); border-radius: 50%; background: var(--bg-surface); box-shadow: 0 0.1333rem 0.4rem rgb(0 60 120 / .2); font: inherit; font-size: var(--fs-meta); font-weight: 700; line-height: 1; color: var(--ad-blue-700); cursor: grab; touch-action: none; z-index: 2; }
.crm.dark .dhz-griff, html[data-theme="dark"] .crm .dhz-griff { color: var(--ad-blue-300); }
.crm .dhz-griff:active { cursor: grabbing; }
.crm .dhz-griff-text { position: absolute; bottom: 2.3333rem; transform: translateX(-50%); padding: 0.0667rem 0.4667rem; border-radius: 0.4rem; background: var(--tint-blue); font-size: var(--fs-label); font-weight: 600; line-height: 1.4; color: var(--dhz-griff-text); white-space: nowrap; pointer-events: none; }
.crm .dhz-griff-text-y { transform: translateX(calc(-100% + 0.8667rem)); }
.crm .dhz-achse { display: flex; justify-content: space-between; margin: 0.1333rem 0.5333rem 0; font-size: var(--fs-label); line-height: 1.4; color: var(--text-3); }

.crm .dhz-unten { display: grid; grid-template-columns: 15.3333rem minmax(0, 1fr); gap: 0.9333rem; align-items: start; }
.crm .dhz-arten { padding: 0; overflow: hidden; border-radius: 0.8rem; box-shadow: none; }
.crm .dhz-arten ul { list-style: none; margin: 0; padding: 0; }
.crm .dhz-arten li + li { border-top: 0.0667rem solid var(--border); }
.crm .dhz-art { display: flex; align-items: center; width: 100%; padding: 0.6rem 0.9333rem; border: 0; background: transparent; font: inherit; font-size: var(--fs-ui); line-height: 1.4; color: var(--text-1); text-align: left; cursor: pointer; }
.crm .dhz-art:hover { background: var(--bg-hover); }
.crm .dhz-art.is-aktiv { background: var(--tint-blue); color: var(--dhz-chip-text); font-weight: 600; }
.crm .dhz-art-name { flex: none; }
.crm .dhz-art-zahl { margin-left: auto; padding-left: 0; font-family: var(--font-num); font-size: var(--fs-ui); font-weight: 400; color: var(--text-3); font-variant-numeric: tabular-nums; }
.crm .dhz-art.is-aktiv .dhz-art-zahl { font-weight: 600; color: var(--dhz-chip-text); }
.crm .dhz-art-marke { flex: none; margin-left: 0.5333rem; padding: 0 0.4rem; border-radius: 62.5rem; font-family: var(--font-num); font-size: var(--fs-label); /* Vorlage 11,5 px → Skalenstufe 12 */ font-weight: 700; line-height: 1.1333rem; }
.crm .dhz-art-marke-neu { background: var(--dhz-gruen-grund); color: var(--dhz-gruen-text); }
.crm .dhz-art-marke-geaendert { background: var(--dhz-gelb-grund); color: var(--dhz-gelb-text); }
.crm .dhz-art-marke-geloescht { background: var(--dhz-rot-grund); color: var(--dhz-rot-text); }

.crm .dhz-tabelle-karte { padding: 0; min-width: 0; overflow: hidden; border-radius: 0.8rem; box-shadow: none; }
.crm .dhz-tabelle-karte { container-type: inline-size; }
.crm .dhz-tab .dhz-th-marke { width: 9%; }
.crm .dhz-tab .dhz-th-aktionen { width: 6%; }
@container (max-width: 70rem) {
  .crm .dhz-tab .dhz-th-marke { width: 6.4rem; }
  .crm .dhz-tab .dhz-th-aktionen { width: 4rem; } /* ⋯ + Stift (2 × 24 px) + 12 px Polster passen ohne Kappung */
}
.crm .dhz-werkzeug { display: flex; align-items: center; flex-wrap: wrap; gap: 0.6667rem; padding: 0.8rem 0.9333rem 0.6667rem; }
.crm .dhz-suche { flex: 1 1 auto; max-width: 20rem; min-width: 8rem; display: flex; align-items: center; gap: 0.5333rem; padding: 0.4667rem 0.8rem; border: 0.0667rem solid var(--border); border-radius: 0.5333rem; background: transparent; font-size: var(--fs-ui); color: var(--text-3); }
.crm .dhz-suche svg { width: 1rem; height: 1rem; flex: none; }
.crm .dhz-suche:focus-within { border-color: var(--ad-blue); box-shadow: 0 0 0 0.2rem var(--tint-blue); }
.crm .dhz-suche input { flex: 1; min-width: 0; text-overflow: ellipsis; border: 0; outline: 0; padding: 0; background: transparent; font: inherit; font-size: var(--fs-ui); line-height: 1.4; color: var(--text-1); }
.crm .dhz-suche input::placeholder { color: var(--text-3); }
.crm .dhz-auswahl { flex: none; position: relative; display: inline-flex; align-items: center; }
.crm .dhz-auswahl .cs { width: auto; min-width: 0; flex: 0 0 auto; }
.crm .dhz-auswahl .cs-field { width: auto; min-width: 0; font-size: var(--fs-ui); }
.crm .dhz-zaehler { margin-left: auto; font-size: var(--fs-label); line-height: 1.4; color: var(--text-3); }
.crm .dhz-spalten-platz { position: relative; flex: none; }
.crm .dhz .dhz-spalten-knopf { padding: 0.2667rem 0.6667rem; border: 0.0667rem solid var(--border-strong); border-radius: 0.5333rem; background: var(--bg-surface); font-size: var(--fs-meta); font-weight: 500; line-height: 1.4; color: var(--text-1); min-height: 0; }
.crm .dhz-spaltenwahl { position: absolute; right: 0; top: calc(100% + 0.2667rem); z-index: 5; display: flex; flex-direction: column; gap: 0.1333rem; width: 16rem; max-height: 22rem; overflow-y: auto; padding: 0.5333rem; border: 0.0667rem solid var(--border); border-radius: 0.5333rem; background: var(--bg-surface); box-shadow: var(--shadow-2); }
.crm .dhz-spaltenwahl-zeile { display: flex; align-items: center; gap: 0.5333rem; padding: 0.2667rem 0.4rem; border-radius: 0.4rem; font-size: var(--fs-meta); color: var(--text-1); cursor: pointer; }
.crm .dhz-spaltenwahl-zeile:hover { background: var(--bg-hover); }
.crm .dhz-unvollst { margin: 0 0.9333rem 0.6667rem; padding: 0.4rem 0.8rem; border: 0.0667rem solid var(--dhz-gelb-marke); border-radius: 0.5333rem; background: var(--dhz-gelb-grund); font-size: var(--fs-meta); color: var(--text-1); }
.crm .dhz-unvollst summary { cursor: pointer; }
.crm .dhz-unvollst ul { margin: 0.2667rem 0 0; padding-left: 1.2rem; color: var(--text-2); }
.crm .dhz-rahmen { overflow-x: auto; }
.crm .dhz-tab { width: 100%; min-width: 0; border-collapse: collapse; table-layout: fixed; }
.crm .dhz-tab thead tr, .crm .dhz-tab tbody tr { background: transparent; border-bottom: 0; }
.crm .dhz-tab th { position: relative; padding: 0.6rem 0.8rem; text-align: left; vertical-align: bottom; font-size: var(--fs-label); font-weight: 600; line-height: 1.4; color: var(--text-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; border-bottom: 0.0667rem solid var(--border); } /* Spaltenköpfe brechen nie mitten im Wort; Spalten haben Mindestbreiten */
.crm .dhz-tab .dhz-zahl { text-align: right; }
.crm .dhz-tab .col-resize { position: absolute; top: 0.4667rem; right: -0.0667rem; bottom: 0.4667rem; width: 0.4rem; z-index: 2; cursor: col-resize; touch-action: none; }
.crm .dhz-tab .col-resize::after { content: ""; position: absolute; top: 0; bottom: 0; left: 0.1333rem; width: 0.1333rem; border-radius: 0.0667rem; background: var(--border-strong); }
.crm .dhz-tab .col-resize:hover::after, .crm .dhz-tab .col-resize:focus-visible::after { width: 0.2rem; background: var(--ad-blue); }
.crm .dhz-tab td { padding: 0.6rem 0.8rem; font-size: var(--fs-ui); line-height: 1.4; color: var(--text-1); border-top: 0.0667rem solid var(--border); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; vertical-align: middle; }
.crm .dhz-tab tbody tr:first-child td { border-top: 0; }
.crm .dhz-tab td.dhz-zahl { font-family: var(--font-num); white-space: normal; overflow: visible; text-overflow: clip; } /* Beträge nie mit „…“ kürzen */
.crm .dhz-zeile-neu td { background: var(--dhz-zeile-neu); }
.crm .dhz-zeile-geaendert td { background: var(--dhz-zeile-geaendert); }
.crm .dhz-zeile-geloescht td { background: var(--dhz-zeile-geloescht); }
.crm .dhz-marke { display: inline-block; white-space: nowrap; padding: 0.0667rem 0.5333rem; border-radius: 62.5rem; font-size: var(--fs-label); /* Vorlage 11,5 px → Skalenstufe 12 */ font-weight: 700; line-height: 1.4; }
.crm .dhz-marke-neu { background: var(--dhz-gruen-grund); color: var(--dhz-gruen-text); }
.crm .dhz-marke-geaendert { background: var(--dhz-gelb-marke); color: var(--dhz-gelb-text); }
.crm .dhz-marke-geloescht { background: var(--dhz-rot-grund); color: var(--dhz-rot-text); }
.crm .dhz-wer { display: flex; align-items: center; gap: 0.6rem; min-width: 0; }
.crm .dhz-wer .acc-logo { flex: none; box-sizing: border-box; width: 1.8667rem !important; height: 1.8667rem !important; padding: 0.2rem; border: 0.0667rem solid var(--border); border-radius: 0.4667rem; background: var(--bg-surface) !important; }
.crm .dhz-wer-text { min-width: 0; display: flex; flex-direction: column; }
.crm .dhz-name { display: block; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.crm .dhz-unter { display: block; font-size: var(--fs-label); color: var(--text-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.crm .dhz-zeile-geloescht .dhz-name, .crm .dhz-zeile-geloescht .dhz-unter { text-decoration: line-through; color: var(--text-3); }
.crm .dhz-tab td:has(.dhz-alt) { white-space: normal; overflow: visible; text-overflow: clip; } /* wie Prototyp (Budget-Zelle overflow:visible): schmal rückt neu unter alt, nie gekürzt */
.crm .dhz-alt { margin-right: 0.4rem; color: var(--dhz-rot-text); text-decoration: line-through; white-space: nowrap; }
.crm .dhz-neu-wert { padding: 0 0.2rem; border-radius: 0.2rem; background: var(--dhz-gelb-neu); font-weight: 600; color: var(--text-1); white-space: nowrap; }
.crm .dhz-unbekannt { font-style: italic; color: var(--text-3); }
.crm .dhz-aktionen { text-align: right; white-space: nowrap; text-overflow: clip !important; padding-left: 0 !important; }
.crm .dhz-stift, .crm .dhz-mehr { display: inline-grid; place-items: center; width: 1.6rem; height: 1.6rem; padding: 0; border: 0; border-radius: 0.4667rem; background: transparent; color: var(--text-3); cursor: pointer; vertical-align: middle; }
.crm .dhz-stift svg, .crm .dhz-mehr svg { width: 1.0667rem; height: 1.0667rem; }
.crm .dhz-stift:hover:not(:disabled), .crm .dhz-mehr:hover { background: var(--bg-hover); color: var(--text-1); }
.crm .dhz-stift:disabled { opacity: .45; cursor: not-allowed; }
.crm .dhz-stift[aria-pressed="true"] { background: var(--tint-blue); color: var(--dhz-chip-text); }
.crm .dhz-eingabe { display: block; width: 100%; min-width: 0; margin: -0.3rem 0; padding: 0.2rem 0.4667rem; border: 0.1001rem solid var(--ad-blue); border-radius: 0.4rem; background: var(--bg-surface); box-shadow: 0 0 0 0.2rem var(--tint-blue); font: inherit; font-family: var(--font-num); font-size: var(--fs-ui); line-height: 1.4; color: var(--text-1); text-overflow: ellipsis; } /* Vorlage .edit input; nur die bearbeitete Zelle ist Feld; Rand ±4,5 px: Zeile wächst nicht */
.crm .dhz-tab tr.is-bearbeiten td[data-dhz-zelle] { cursor: text; }
.crm .dhz-tab td:has(> .dhz-eingabe.dhz-zahl) { overflow: visible; } /* Betragsfeld darf nach links wachsen: Beträge nie gekappt */
.crm .dhz-eingabe { position: relative; z-index: 3; }
.crm .dhz-eingabe:focus { outline: 0; }
.crm .dhz-eingabe.dhz-zahl { text-align: right; }
.crm .dhz-wer-text:has(.dhz-eingabe) { flex: 1 1 auto; }
.crm .dhz-eingabe-name { width: calc(100% + 1.1334rem); margin: -0.2667rem -0.5667rem 0; padding-block: 0.0667rem; font-family: inherit; font-weight: 500; } /* Text bündig über der Unterzeile; Feld ragt nur ins obere Zellpolster, Unterzeile bleibt frei */
.crm .dhz-leer { padding: 1.6rem 0.9333rem !important; white-space: normal !important; font-size: var(--fs-ui) !important; color: var(--text-2) !important; }
.crm .dhz-legende { display: flex; align-items: center; flex-wrap: wrap; gap: 0.4rem 1.0667rem; padding: 0.6667rem 0.9333rem; border-top: 0.0667rem solid var(--border); font-size: var(--fs-meta); line-height: 1.4; color: var(--text-2); }
.crm .dhz-legende-punkt { display: inline-flex; align-items: center; white-space: nowrap; }
.crm .dhz-quadrat { display: inline-block; width: 0.8rem; height: 0.8rem; margin-right: 0.4rem; border-radius: 0.2rem; }
.crm .dhz-quadrat-neu { background: var(--dhz-q-neu); }
.crm .dhz-quadrat-geaendert { background: var(--dhz-gelb-marke); }
.crm .dhz-quadrat-geloescht { background: var(--dhz-q-geloescht); }
.crm .dhz-legende-stift { margin-left: auto; font-size: var(--fs-label); color: var(--text-3); }
.crm .dhz-laedt { padding: 0.8rem 0.9333rem 1.0667rem; }
.crm .dhz-fehler-box { display: flex; flex-direction: column; align-items: flex-start; gap: 0.8rem; padding: 1.0667rem 0.9333rem 1.3333rem; }
.crm .dhz-fehler { margin: 0; font-size: var(--fs-ui); color: var(--text-1); }
/* ── PR1.772 (V31) — offene Ansicht als EIN Satz ──────────────────────────────────────────
   Neubau nach Gate R1: alle Maße im Maß des Abnahmebilds = Prototyp ansichten-entwurf.html × 4/3
   (rem bei 15 px; Schrift auf die Skala gerundet: 12–13,5 → 16 · 14–16,5 → 20 · 21 → 26).
   Kopf · Satzkarte (blau, orange = geändert, Ring = offen) · Liste/Tabelle · Ergebnis wie die
   Opp-Liste (Spalten 34:11:11:9:12:13:4) · Zustände leer und „nichts zu tun". Keine Bewegung. */
.crm .ans-offen-ergebnis { display: flex; flex-direction: column; gap: 1.0667rem; }
.crm .ans-offen-kopf { display: flex; align-items: center; gap: 1.0667rem; flex-wrap: wrap; min-width: 0; }
.crm .ans-offen-links { display: flex; align-items: center; gap: 1.0667rem; min-width: 0; flex: 1 1 auto; white-space: nowrap; }
.crm .ans-offen-titel-wrap { position: relative; min-width: 0; }
.crm .ans-offen-titel { margin: 0; font-size: var(--fs-display); font-weight: 700; letter-spacing: -0.01em; color: var(--text-1); min-width: 0; }
.crm .ans-offen-titel-knopf { appearance: none; display: inline-flex; align-items: center; gap: 0.7111rem; max-width: 100%; padding: 0; border: 0; background: transparent; font: inherit; color: inherit; cursor: pointer; text-align: left; }
.crm .ans-offen-titel-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.crm .ans-offen-titel-knopf .ic { flex: none; width: 1.4222rem; height: 1.4222rem; color: var(--text-3); }
.crm .ans-offen-besitz { flex: none; font-size: var(--fs-section); color: var(--text-3); white-space: nowrap; }
.crm .ans-offen-aktionen { display: flex; align-items: center; gap: 0.7111rem; flex: none; margin-left: auto; }
.crm .ans-offen-unveraendert { font-size: var(--fs-section); color: var(--text-3); white-space: nowrap; }
.crm .ans-offen-geaendert { display: inline-flex; align-items: center; gap: 0.6222rem; margin-right: 0.3556rem; font-size: var(--fs-section); font-weight: 600; color: var(--text-2); white-space: nowrap; }
.crm .ans-offen-punkt { width: 0.7111rem; height: 0.7111rem; border-radius: 50%; background: var(--ad-orange); }
.crm .ans-offen-text-knopf { appearance: none; border: 0; background: transparent; padding: 0.6222rem 0.8889rem; border-radius: 0.7111rem; font: inherit; font-size: var(--fs-section); font-weight: 600; color: var(--text-2); cursor: pointer; }
.crm .ans-offen-text-knopf:hover { background: var(--bg-hover); color: var(--text-1); }
.crm .ans-offen-split { position: relative; display: inline-flex; }
.crm .ans-offen-split .btn { font-size: var(--fs-section); font-weight: 600; padding: 0.6222rem 1.2444rem; border-radius: 0.7111rem 0 0 0.7111rem; }
.crm .ans-offen-split .ans-offen-split-pfeil { display: inline-flex; align-items: center; justify-content: center; padding: 0.6222rem 0.7111rem; border-radius: 0 0.7111rem 0.7111rem 0; box-shadow: inset 0.0667rem 0 0 color-mix(in srgb, var(--text-inv) 35%, transparent); }
.crm .ans-offen-split .ans-offen-split-pfeil .ic { width: 1.1556rem; height: 1.1556rem; }
.crm .ans-offen-aktionen > .btn { font-size: var(--fs-section); font-weight: 600; padding: 0.6222rem 1.2444rem; border-radius: 0.7111rem; }
.crm .ans-offen-split .ans-menue, .crm .ans-offen-titel-wrap .ans-menue { position: absolute; z-index: 30; top: calc(100% + 0.5333rem); right: 0; min-width: 19.5556rem; font-size: var(--fs-section); }
.crm .ans-offen-titel-wrap .ans-menue { left: 0; right: auto; max-height: 30.2222rem; overflow: auto; font-weight: 400; letter-spacing: 0; }

/* Satzkarte (Prototyp .sent / .tok) */
.crm .ans-satz-karte { position: relative; padding: 1.2444rem 1.4222rem; border: 0.0667rem solid var(--border); border-radius: 1.0667rem; background: var(--bg-surface); }
.crm .ans-satz-reihe { display: flex; align-items: center; gap: 1.2444rem; }
.crm .ans-satz { flex: 1 1 auto; margin: 0; min-width: 0; font-size: var(--fs-title); line-height: 2.1; color: var(--text-2); }
.crm .ans-satz-glied, .crm .ans-satz-wort { white-space: nowrap; }
.crm .ans-satz-wort.is-komma { margin-left: -0.25em; }
.crm .ans-satz-wahl, .crm .ans-satz-plus { appearance: none; display: inline-flex; align-items: center; gap: 0.5333rem; max-width: 100%; padding: 0.1778rem 0.8rem; vertical-align: baseline; border: 0.0667rem solid transparent; border-radius: 0.6222rem; font: inherit; line-height: 1.6; white-space: nowrap; cursor: pointer; }
.crm .ans-satz-wahl { background: var(--tint-blue); color: var(--ad-blue-700); font-weight: 600; }
.crm .ans-satz-wahl:hover { border-color: color-mix(in srgb, var(--ad-blue) 30%, transparent); }
.crm .ans-satz-wahl-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.crm .ans-satz-wahl .ans-bs-pfeil, .crm .ans-satz-plus svg { flex: none; width: 1.1556rem; height: 1.1556rem; opacity: 0.7; color: currentColor; }
.crm .ans-satz-wahl.is-geaendert { background: color-mix(in srgb, var(--tint-orange) 50%, var(--bg-surface)); border-color: color-mix(in srgb, var(--ad-orange) 50%, var(--bg-surface)); color: var(--ad-orange-900); }
.crm .ans-satz-wahl[aria-expanded="true"] { box-shadow: 0 0 0 0.2667rem var(--tint-orange); }
.crm .ans-satz-wahl.is-fehler { border-color: var(--danger); }
.crm .ans-satz-plus { background: none; border: 0.0667rem dashed var(--border-strong); color: var(--text-3); font-weight: 500; }
.crm .ans-satz-plus:hover { color: var(--text-1); border-color: var(--text-3); }
.crm .ans-satz-rechts { display: flex; align-items: center; gap: 1.2444rem; flex: none; }
.crm .ans-satz-frage { appearance: none; display: inline-flex; align-items: center; gap: 0.5333rem; padding: 0.5333rem 0.8889rem; border: 0.0667rem solid color-mix(in srgb, var(--ad-orange) 50%, var(--bg-surface)); border-radius: 0.7111rem; background: var(--tint-orange-zart); font: inherit; font-size: var(--fs-section); font-weight: 600; color: var(--ad-orange-900); cursor: pointer; white-space: nowrap; }
.crm .ans-satz-frage svg { width: 1.2444rem; height: 1.2444rem; }
.crm .ans-satz-frage:hover, .crm .ans-satz-frage.is-offen { border-color: var(--ad-orange); }
.crm .ans-darst { display: inline-flex; gap: 0.5333rem; }
.crm .ans-darst-knopf.ans-umschalter-knopf { display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.2667rem; width: 6.2222rem; padding: 0.6222rem 0 0.5333rem; line-height: 1.3; border: 0.0667rem solid var(--border-strong); border-radius: 0.8rem; background: var(--bg-surface); font: inherit; font-size: var(--fs-section); font-weight: 600; color: var(--text-2); }
.crm .ans-darst-knopf.ans-umschalter-knopf svg { width: 1.7778rem; height: 1.7778rem; }
.crm .ans-darst-knopf.ans-umschalter-knopf.active { border-color: color-mix(in srgb, var(--ad-blue) 35%, var(--tint-blue)); background: var(--tint-blue); color: var(--ad-blue-700); }
.crm .ans-satz-frage-bereich { margin-top: 1.0667rem; }
.crm .ans-satz-karte .ans-bs-fehler { margin-top: 0.7111rem; }
/* Auswahl-Fenster (Prototyp .pop) */
.crm .ans-satz-fenster { width: 26.6667rem; max-width: calc(100% - 0.7111rem); max-height: none; padding: 0.7111rem; border: 0.0667rem solid var(--border-strong); border-radius: 1.0667rem; font-size: var(--fs-section); line-height: 1.45; }
.crm .ans-satz-fenster .ans-bs-fenster-titel { margin: 0; padding: 0.5333rem 0.7111rem 0.3556rem; font-size: var(--fs-section); font-weight: 600; color: var(--text-3); }
.crm .ans-satz-fenster .ans-bs-option { font-size: var(--fs-section); }
.crm .ans-satz-option { display: flex; align-items: center; gap: 0.8889rem; padding: 0.6222rem 0.7111rem; border-radius: 0.6222rem; }
.crm .ans-satz-option:hover { background: var(--bg-surface-2); }
.crm .ans-satz-option-text { flex: 1 1 auto; min-width: 0; font-weight: 400; }
.crm .ans-satz-option.is-gewaehlt .ans-satz-option-text { font-weight: 600; }
.crm .ans-satz-option-zusatz { flex: none; margin-left: auto; font-size: var(--fs-section); font-weight: 400; color: var(--text-3); }
.crm .ans-satz-sym { flex: none; width: 1.4222rem; height: 1.4222rem; color: var(--text-3); }
.crm .ans-satz-option.is-gewaehlt .ans-satz-sym { color: currentColor; }
.crm .ans-satz-fenster-trenner { height: 0.0667rem; margin: 0.5333rem 0.3556rem; background: var(--border); list-style: none; }
.crm .ans-satz-wahl:focus-visible, .crm .ans-satz-plus:focus-visible, .crm .ans-satz-frage:focus-visible, .crm .ans-darst-knopf:focus-visible,
.crm .ans-offen-titel-knopf:focus-visible, .crm .ans-offen-text-knopf:focus-visible, .crm .ans-offen-split .btn:focus-visible,
.crm .ans-t-werkzeug:focus-visible, .crm .ans-t-kopf-knopf:focus-visible, .crm .ans-t-gruppe:focus-visible, .crm .ans-t-zeile:focus-visible,
.crm .ans-st-pille:focus-visible, .crm .ans-t-mehr-knopf:focus-visible, .crm .ans-t-fuss:focus-visible, .crm .ans-satz-option:focus-visible { outline: 0.1334rem solid var(--focus); outline-offset: 0.1334rem; }
.crm.dark .ans-satz-wahl, html[data-theme="dark"] .crm .ans-satz-wahl, .crm.dark .ans-darst-knopf.active, html[data-theme="dark"] .crm .ans-darst-knopf.active,
.crm.dark .ans-st-pille.is-blau, html[data-theme="dark"] .crm .ans-st-pille.is-blau, .crm.dark .ans-t-kopf-knopf.is-aktiv, html[data-theme="dark"] .crm .ans-t-kopf-knopf.is-aktiv { color: var(--ad-blue-300); }
.crm.dark .ans-satz-wahl.is-geaendert, html[data-theme="dark"] .crm .ans-satz-wahl.is-geaendert,
.crm.dark .ans-satz-frage, html[data-theme="dark"] .crm .ans-satz-frage { color: var(--ad-orange); }

/* Ergebnis wie die Opp-Liste (Prototyp .res / .grid / .grow / .it) */
.crm .ans-t-karte { position: relative; border: 0.0667rem solid var(--border); border-radius: 1.0667rem; background: var(--bg-surface); min-width: 0; }
.crm .ans-t-kopfzeile { display: flex; align-items: center; gap: 1.0667rem; padding: 1.0667rem 1.4222rem; border-bottom: 0.0667rem solid var(--border); flex-wrap: wrap; }
.crm .ans-t-summe { margin: 0; font-size: var(--fs-title); color: var(--text-2); }
.crm .ans-t-summe strong { font-weight: 600; color: var(--text-1); }
.crm .ans-t-zusammen { color: var(--text-2); }
.crm .ans-t-werkzeuge { display: flex; align-items: center; gap: 0.7111rem; margin-left: auto; }
.crm .ans-t-werkzeug { appearance: none; display: inline-flex; align-items: center; gap: 0.5333rem; padding: 0.4444rem 0.8889rem; border: 0.0667rem solid var(--border-strong); border-radius: 0.7111rem; background: var(--bg-surface); font: inherit; font-size: var(--fs-section); font-weight: 600; color: var(--text-2); cursor: pointer; white-space: nowrap; }
.crm .ans-t-werkzeug svg { width: 1.1556rem; height: 1.1556rem; }
.crm .ans-t-werkzeug:hover { background: var(--bg-hover); color: var(--text-1); }
.crm .ans-t-werkzeug-icon { border-color: transparent; padding: 0.4444rem 0.6222rem; }
.crm .ans-t-werkzeug-icon svg { width: 1.4222rem; height: 1.4222rem; }
.crm .ans-t-werkzeuge .ans-menue-wrap { position: relative; }
.crm .ans-t-werkzeuge .ans-menue { position: absolute; z-index: 30; top: calc(100% + 0.5333rem); right: 0; min-width: 17.7778rem; font-size: var(--fs-section); }
.crm .ans-menue-eintrag.is-gewaehlt { color: var(--ad-blue-700); font-weight: 600; }
.crm .ans-spalten-eintrag { display: flex; align-items: center; gap: 0.7111rem; }
.crm .ans-spalten-haken { display: inline-flex; width: 1.2444rem; color: var(--ad-blue-700); }
.crm .ans-t { display: block; }
.crm .ans-t-kopf, .crm .ans-t-zeile { display: grid; grid-template-columns: var(--ans-t-raster); align-items: center; }
.crm .ans-t-kopf { background: var(--bg-surface-2); border-bottom: 0.0667rem solid var(--border); font-size: var(--fs-section); font-weight: 600; color: var(--text-3); }
.crm .ans-t-k { position: relative; display: flex; align-items: center; gap: 0.3556rem; min-width: 0; padding: 0.8rem 1.2444rem; white-space: nowrap; }
.crm .ans-t-k.ans-t-rechts { justify-content: flex-end; }
.crm .ans-t-k.ans-t-mitte { justify-content: flex-start; }
.crm .ans-t-kopf-knopf, .crm .ans-t-kopf-text { appearance: none; display: inline-flex; align-items: center; gap: 0.3556rem; padding: 0; border: 0; background: transparent; font: inherit; color: inherit; cursor: pointer; }
.crm .ans-t-kopf-text { cursor: default; }
.crm .ans-t-kopf-knopf.is-aktiv { color: var(--ad-blue-700); }
.crm .ans-t-griff { position: absolute; top: 0.6222rem; bottom: 0.6222rem; right: 0; width: 0.2667rem; box-shadow: inset 0.0667rem 0 0 var(--border-strong), inset -0.0667rem 0 0 var(--border-strong); cursor: col-resize; touch-action: none; }
.crm .ans-t-griff:hover { box-shadow: inset 0.0667rem 0 0 var(--ad-blue), inset -0.0667rem 0 0 var(--ad-blue); }
.crm .ans-t-zeilen { list-style: none; margin: 0; padding: 0; }
/* Nachzug PR1.772: Rollen-Hüllen der Tabelle (row/cell um den Gruppenkopf) ohne eigene Box. */
.ans-t-rolle { display: contents; }
.crm .ans-t-zeile { border-bottom: 0.0667rem solid var(--border); font-size: var(--fs-section); cursor: pointer; }
.crm .ans-t-zeile:hover { background: var(--bg-hover); }
.crm .ans-t-c { display: flex; align-items: center; min-width: 0; padding: 0.8rem 1.2444rem; color: var(--text-1); }
.crm .ans-t-titel { gap: 0.8889rem; }
.crm .ans-t-gr .ans-t-titel { padding-left: 3.7333rem; }
.crm .ans-t-titel .ans-z-logo { flex: none; }
.crm .ans-t-titel .ans-z-name { font-weight: 600; }
.crm .ans-t-titel .ans-z-kunde { font-size: var(--fs-section); color: var(--text-3); }
.crm .ans-t-rechts { justify-content: flex-end; text-align: right; }
.crm .ans-t-c.ans-t-mitte { justify-content: flex-start; }
.crm .ans-t-betrag { font-weight: 400; font-variant-numeric: tabular-nums; white-space: nowrap; }
.crm .ans-t-start { flex-direction: column; align-items: flex-start; }
.crm .ans-t-datum { font-weight: 600; white-space: nowrap; }
.crm .ans-t-datum.is-vorbei { color: var(--danger); }
.crm .ans-t-rel { font-size: var(--fs-section); font-weight: 500; color: var(--text-3); white-space: nowrap; }
.crm .ans-t-niemand { font-size: var(--fs-section); font-weight: 600; color: var(--ad-orange-900); }
.crm.dark .ans-t-niemand, html[data-theme="dark"] .crm .ans-t-niemand { color: var(--ad-orange); }
.crm .ans-t-team { gap: 0.5333rem; }
.crm .ans-t-fotos { display: inline-flex; }
.crm .ans-t-foto.kc-av { display: inline-grid; place-items: center; width: 2.3111rem; height: 2.3111rem; margin-left: -0.6222rem; border-radius: 50%; border: 0.1778rem solid var(--bg-surface); background-color: var(--mono-bg); background-size: cover; box-shadow: 0 0 0 0.0667rem var(--border); font-family: var(--f-cond); font-size: var(--fs-label); font-weight: 500; color: var(--mono-fg); }
.crm .ans-t-foto.kc-av:first-child { margin-left: 0; }
.crm .ans-t-foto.kc-av.has-ma-photo { color: transparent; }
.crm .ans-st-pille { appearance: none; display: inline-flex; align-items: center; gap: 0.4444rem; padding: 0.0889rem 0.5333rem 0.0889rem 0.8rem; border: 0; border-radius: 62.5rem; font: inherit; font-size: var(--fs-section); font-weight: 600; line-height: 1.7778rem; cursor: pointer; white-space: nowrap; }
.crm .ans-st-pille svg { width: 1.0667rem; height: 1.0667rem; }
.crm .ans-st-pille.is-blau { background: var(--tint-blue); color: var(--ad-blue-700); }
.crm .ans-st-pille.is-violett { background: var(--tint-violet); color: var(--ad-violet); }
.crm.dark .ans-st-pille.is-violett, html[data-theme="dark"] .crm .ans-st-pille.is-violett { color: var(--text-1); }
.crm .ans-st-pille.is-gruen { background: var(--tint-green); color: var(--ad-green-900, var(--ad-green-700)); }
.crm .ans-st-pille.is-rot { background: var(--bg-surface-2); color: var(--text-2); }
.crm .ans-t-mehr { justify-content: flex-end; padding-left: 0; }
.crm .ans-t-mehr-knopf { appearance: none; display: inline-flex; align-items: center; justify-content: center; width: 2.1333rem; height: 2.1333rem; padding: 0; border: 0; border-radius: 0.5333rem; background: transparent; color: var(--text-3); cursor: pointer; }
.crm .ans-t-mehr-knopf svg { width: 1.4222rem; height: 1.4222rem; }
.crm .ans-t-mehr-knopf:hover { background: var(--bg-surface-3); color: var(--text-1); }
.crm .ans-t-gr .ans-t-zeile:last-child { border-bottom: 0.0667rem solid var(--border); }
.crm .ans-t-gruppe { appearance: none; display: flex; align-items: center; gap: 0.8889rem; width: 100%; padding: 0.8rem 1.2444rem; border: 0; border-bottom: 0.0667rem solid var(--border); background: var(--bg-surface-2); font: inherit; font-size: var(--fs-section); color: var(--text-1); cursor: pointer; text-align: left; }
.crm .ans-t-gruppe .ans-gr-pfeil { display: flex; color: var(--text-3); }
.crm .ans-t-gruppe .ans-gr-pfeil svg { width: 1.2444rem; height: 1.2444rem; }
.crm .ans-t-gruppe .ans-gr-name { font-weight: 600; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.crm .ans-t-gruppe .ans-gr-anzahl { min-width: 0; height: auto; padding: 0 0.6222rem; border: 0; border-radius: 62.5rem; background: var(--bg-surface-3); font-size: var(--fs-section); font-weight: 600; line-height: 1.6889rem; color: var(--text-3); }
.crm .ans-t-gr-rechts { display: inline-flex; align-items: center; gap: 0.8889rem; margin-left: auto; }
.crm .ans-t-gr-summe { font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.crm .ans-t-gr-rechts .ans-gr-balken { width: 10.6667rem; height: 0.5333rem; border-radius: 0.2667rem; background: var(--bg-surface-3); }
.crm .ans-t-gr-rechts .ans-gr-balken-fuell { border-radius: 0; background: color-mix(in srgb, var(--ad-blue) 35%, var(--tint-blue)); }
.crm .ans-t-fuss { appearance: none; display: flex; align-items: center; gap: 0.8889rem; width: 100%; margin: 0; padding: 0.8889rem 1.4222rem; border: 0; background: transparent; font: inherit; font-size: var(--fs-section); color: var(--text-3); cursor: pointer; text-align: left; border-radius: 0 0 1.0667rem 1.0667rem; }
.crm .ans-t-fuss svg { width: 1.1556rem; height: 1.1556rem; }
.crm .ans-t-fuss:hover { color: var(--text-1); }
.crm .ans-t-karte-kt .ans-kt-karte { border: 0; border-radius: 0; }

/* Zustände: leer mit Ursache (V31 ⑤) und „nichts zu tun" (Prototyp .empty) */
.crm .ans-leer-karte { display: flex; align-items: flex-start; gap: 1.6rem; padding: 2.3111rem 2.4889rem; border: 0.0667rem solid var(--border); border-radius: 1.0667rem; background: var(--bg-surface); }
.crm .ans-leer-sym { flex: none; display: grid; place-items: center; width: 3.9111rem; height: 3.9111rem; border-radius: 50%; background: var(--bg-surface-3); color: var(--text-2); }
.crm .ans-leer-sym svg { width: 1.9556rem; height: 1.9556rem; }
.crm .ans-leer-sym.is-gruen { background: var(--tint-green); color: var(--ad-green-900, var(--ad-green-700)); }
.crm .ans-leer-text { min-width: 0; }
.crm .ans-leer-titel { margin: 0 0 0.5333rem; font-size: var(--fs-title); font-weight: 700; color: var(--text-1); }
.crm .ans-leer-satz { margin: 0; max-width: 60ch; font-size: var(--fs-title); line-height: 1.55; color: var(--text-2); }
.crm .ans-leer-zahlen { list-style: none; margin: 1.0667rem 0 0; padding: 0; display: flex; flex-direction: column; gap: 0.5333rem; font-size: var(--fs-section); color: var(--text-1); }
.crm .ans-leer-zahlen li { display: flex; align-items: center; gap: 0.8889rem; }
.crm .ans-leer-zahlen strong { min-width: 2.4889rem; text-align: right; font-weight: 600; font-variant-numeric: tabular-nums; }
.crm .ans-leer-zahlen .is-null strong { color: var(--danger); }
.crm .ans-leer-knoepfe { display: flex; flex-wrap: wrap; gap: 0.7111rem; margin-top: 1.2444rem; }
.crm .ans-leer-knoepfe .btn { display: inline-flex; align-items: center; gap: 0.5333rem; font-size: var(--fs-section); font-weight: 600; padding: 0.6222rem 1.2444rem; border-radius: 0.7111rem; }
.crm .ans-leer-knoepfe .btn svg { width: 1.2444rem; height: 1.2444rem; }

/* Gate R2: alle Satzteil-Fenster im Maß ×4/3 (Prototyp .pop): Summe/Wert, Bedingung, Zeilen/Spalten. */
.crm .ans-satz-fenster { width: 26.6667rem; }
.crm .ans-satz-fenster .ans-bs-check { gap: 0.8889rem; padding: 0.6222rem 0.7111rem; border-radius: 0.6222rem; font-size: var(--fs-section); line-height: 1.45; }
.crm .ans-satz-fenster .ans-bs-check input { width: 1.2444rem; height: 1.2444rem; }
.crm .ans-satz-fenster .ans-bs-option { padding: 0.6222rem 0.7111rem; border-radius: 0.6222rem; line-height: 1.45; }
.crm .ans-satz-fenster .ans-bs-feld, .crm .ans-satz-fenster .ans-bs-wert legend, .crm .ans-satz-fenster .ans-bs-feld > span { font-size: var(--fs-section); font-weight: 600; color: var(--text-3); }
.crm .ans-satz-fenster .ans-bs-feld select, .crm .ans-satz-fenster .ans-bs-feld input { min-height: 2.8444rem; padding: 0 0.7111rem; border-radius: 0.7111rem; font-size: var(--fs-section); font-weight: 400; color: var(--text-1); }
.crm .ans-satz-fenster .ans-bs-schnell-knopf { min-height: 2.3111rem; padding: 0 0.8889rem; border-radius: 0.6222rem; font-size: var(--fs-section); }
.crm .ans-satz-fenster .ans-bs-filter-felder, .crm .ans-satz-fenster .ans-bs-wert-zeile { gap: 0.7111rem; margin: 0 0.7111rem 0.8889rem; }
.crm .ans-satz-fenster .ans-bs-wert { margin: 0 0 0.5333rem; padding: 0; border: 0; }
.crm .ans-satz-fenster .ans-bs-wert legend { padding: 0 0.7111rem; margin-bottom: 0.3556rem; }
.crm .ans-satz-fenster .ans-bs-fenster-fuss { padding: 0.7111rem 0.7111rem 0; }
.crm .ans-satz-fenster .ans-bs-fenster-fuss .btn, .crm .ans-satz-fenster .ans-bs-text-knopf { font-size: var(--fs-section); font-weight: 600; }
.crm .ans-satz-fenster .ans-bs-fenster-fehler, .crm .ans-satz-fenster .ans-bs-deckel, .crm .ans-satz-fenster .ans-bs-hinweis, .crm .ans-satz-fenster .ans-bs-leer { padding: 0 0.7111rem; font-size: var(--fs-section); }
/* Gate R2: Fokus am Speichern-Knopf sichtbar (schlägt die id-Regeln der alten Leiste), 2 px mit Abstand. */
.crm .ans-offen-split #ans-als-neu:focus-visible, .crm .ans-offen-split #ans-speichern-geaendert:focus-visible,
.crm .ans-offen-split #ans-speichern-pfeil:focus-visible, .crm .ans-offen-aktionen #ans-speichern-dlg:focus-visible { outline: 0.1334rem solid var(--focus); outline-offset: 0.1334rem; position: relative; z-index: 1; }
/* Gate R2: dunkel — Gruppen-Anzahl ≥ 4,5 : 1. */
.crm.dark .ans-t-gruppe .ans-gr-anzahl, html[data-theme="dark"] .crm .ans-t-gruppe .ans-gr-anzahl { color: var(--text-2); }
.crm .ans-satz-fenster .cs-field, .crm .ans-satz-fenster .cs-value, .crm .ans-satz-fenster .cs-clear { font-size: var(--fs-section); }
.crm .ans-satz-fenster .cs-control { min-height: 2.8444rem; border-radius: 0.7111rem; }
/* Gate R3: Fokusring in ALLEN Satzteil-Fenstern 2 px mit Abstand (schlägt die 1-px-Regeln der alten Leiste). */
.crm .ans-satz-fenster.ans-bs-fenster :focus-visible, .crm .ans-satz-fenster.ans-bs-fenster input:focus-visible,
.crm .ans-satz-fenster.ans-bs-fenster select:focus-visible, .crm .ans-satz-fenster.ans-bs-fenster .cs-control:has(:focus-visible) { outline: 0.1334rem solid var(--focus); outline-offset: 0.1334rem; }
/* Gate R4: Ring am letzten Häkchen nicht abgeschnitten — Luft unten in der Liste, Fokus scrollt mit Rand. */
.crm .ans-satz-fenster .ans-bs-checks { padding: 0.2667rem 0.2667rem 0.4rem; }
.crm .ans-satz-fenster .ans-bs-check-zeile, .crm .ans-satz-fenster .ans-bs-check, .crm .ans-satz-fenster .ans-bs-check input, .crm .ans-satz-fenster .ans-bs-option { scroll-margin-block: 0.4rem; }
/* Gate R3: „Fertig" im Knopfmaß ×4/3 (Radius ~10,7, Höhe ~42). */
.crm .ans-satz-fenster .ans-bs-fenster-fuss .btn { min-height: 2.8rem; padding: 0.4667rem 0.9333rem; border-radius: 0.7111rem; }
.crm .ans-satz-fenster.ans-bs-fenster input[type="date"]:focus { outline: 0.1334rem solid var(--focus); outline-offset: 0.1334rem; }

/* PR1.730 (V01): grauer Schluss im Satz, Luft unter der Kopfleiste, Trennlinie über den Bewegungen je Kachel. */
.crm .start-satz-leise { color: var(--text-2); }
.crm .start-bereich-foto { display: inline-flex; flex: 0 0 auto; align-self: center; margin-right: 0.375rem; vertical-align: middle; }
.crm .start-satz { font-weight: 600; }
.crm .start-seg .start-opt-stempel { font-weight: 400; color: var(--text-2); }
.crm .start-satz-kopf, .crm .start-satz .start-satz-leise { font-weight: 400; }
.crm .start-seg button.is-active { color: var(--ad-blue-700); }
.crm.dark .start-seg button.is-active, html[data-theme="dark"] .crm .start-seg button.is-active { color: var(--ad-blue-300); }
.crm .start-kachel .start-kachel-titel { color: var(--text-1); }
.crm .start-kachel .start-pfeil-knopf { border-color: transparent; }
.crm .start-kachel .start-pfeil-knopf:hover { border-color: var(--border); }
.crm .start-kachel .start-einheit { font-size: var(--fs-body); font-weight: 600; }
.crm .start-schild-ocker { color: var(--ad-orange-900); background: color-mix(in srgb, var(--ad-orange-900) 14%, transparent); }
.crm.dark .start-schild-ocker, html[data-theme="dark"] .crm .start-schild-ocker { color: var(--ad-orange); }
.crm .start-b-zahl { font-weight: 600; color: var(--text-1); }
.crm .start-ton-ocker .start-b-zahl { color: inherit; }
/* Gate-Runde 2 (V01 gemessen, 1rem = 15 px): Umschalter-Spur, Ocker-Flächen, Abschnittstitel, Chips, Fuß, Knöpfe, Detailzeilen. */
.crm .start-kopf-rechts .start-seg { background: var(--bg-surface-3); }
.crm .start-kopf-rechts .start-seg button { padding-inline: 0.9rem; }
.crm .start-schild-ocker, .crm .start-zahl-kaestchen { background: var(--tint-orange); }
.crm .start-abschnitt { font-size: var(--fs-section); }
.crm .start-chip:not(.is-active) { color: var(--text-2); background: var(--bg-surface); }
.crm p.start-rest { display: block; }
.crm .start-braucht-zeile .btn { min-height: 2.1333rem; }
.crm .start-braucht-bilder { display: inline-flex; align-items: center; gap: 0.25rem; margin-right: 0.5rem; vertical-align: middle; }
.crm .start-braucht-details .start-datum-normal { font-size: inherit; color: inherit; }
.crm .start-link, .crm.dark .start-link, html[data-theme="dark"] .crm .start-link { text-decoration: none; }
.crm .start-link:hover { text-decoration: underline; }
.crm .start-gewonnen { font-weight: 600; color: var(--ad-green-900, var(--success)); }
.crm.dark .start-gewonnen, html[data-theme="dark"] .crm .start-gewonnen { color: var(--success); }
.crm .start-grund { background: color-mix(in srgb, var(--ad-blue) 10%, white); }
.crm.dark .start-grund, html[data-theme="dark"] .crm .start-grund { color: var(--ad-blue-300); background: color-mix(in srgb, var(--ad-blue) 22%, transparent); }
.crm p.start-rest { margin: 0.625rem 0 0; padding-top: 0.625rem; border-top: .0625rem solid var(--border); font-size: var(--fs-ui); color: var(--text-2); }
/* Langer Bereichsname: die Kopfzeile wird nie gekürzt — reicht der Platz nicht, rutscht der Umschalter darunter. */
.crm .start-kopf-links { flex: 1 1 max-content; }
.crm .start-braucht-details .start-detail { display: inline; }
.crm .start-braucht-details .start-detail > * { vertical-align: middle; }
.crm .start-bereich-foto-leer { align-items: center; justify-content: center; width: 1.25rem; height: 1.25rem; border-radius: 50%; background: var(--bg-surface-2); border: .0625rem solid var(--border); }
/* PR1.730 (V01) Gate-Runde 3: Werte 1:1 aus dem Prototyp listen-dashboard.html#v01 @1920 gemessen (1rem = 15 px).
   Schriftgrade auf die Skala gerundet (Entscheid Vasili 05.11.): 12,5 → meta; 13,5 Nebentext → meta, Bedienelement → ui; 14,5 → body; 17 → section; 21 → title; 28 → kpi. */
.crm .start-page { padding: 1.4667rem 2rem 1.8667rem; }
.crm .start-datum { font-size: var(--fs-meta); color: var(--text-2); }
.crm .start-kopf h1, .crm .start-titel { font-size: var(--fs-kpi); font-weight: 600; }
.crm .start-sub, .crm .start-bereich { font-size: var(--fs-ui); color: var(--text-2); gap: .4rem; }
.crm .start-bereich-name { font-size: var(--fs-ui); font-weight: 700; color: var(--text-1); }
.crm .start-sub-rest { font-size: var(--fs-ui); color: var(--text-2); }
.crm .start-bereich-foto { margin-right: 0; }
.crm .start-bereich-foto, .crm .start-bereich-foto img, .crm .start-bereich-foto-leer { width: 1.4667rem; height: 1.4667rem; }
.crm .start-bereich-foto-leer { background: var(--bg-surface-3); border: 0; }
.crm .start-kopf-rechts { gap: .8rem; }
.crm .start-kopf-rechts .start-seg { gap: .1333rem; border-radius: .6rem; }
.crm .start-kopf-rechts .start-seg button { font-size: var(--fs-ui); padding: .3333rem .8rem; border-radius: var(--r-sm); }
.crm .start-seg .start-opt-stempel { font-size: var(--fs-meta); font-weight: 600; color: var(--text-3); }
.crm #start-alles-gesehen { font-size: var(--fs-ui); font-weight: 600; min-height: 2.4rem; padding: 0 .9333rem; gap: .4667rem; border-radius: var(--r-md); }
.crm .start-satz { font-size: var(--fs-title); font-weight: 700; line-height: 1.4; }
.crm .start-satz .start-satz-zahl { font-weight: inherit; }
.crm .start-satz .start-satz-kopf, .crm .start-satz .start-satz-und { font-weight: 500; }
.crm .start-satz .start-satz-leise { font-weight: 500; color: var(--text-3); }
.crm .start-ki { gap: .9333rem; padding: .9333rem 1.2rem; border-radius: .8rem; background: var(--tint-orange-zart); border: .0625rem solid color-mix(in srgb, color-mix(in srgb, var(--ad-orange-700) 50%, var(--ad-orange)) 46%, white); }
.crm.dark .start-ki, html[data-theme="dark"] .crm .start-ki { border-color: color-mix(in srgb, var(--ad-orange) 35%, transparent); }
.crm .start-ki-symbol { width: 2rem; height: 2rem; background: var(--tint-orange); }
.crm .start-ki-kopf { font-size: var(--fs-meta); color: var(--text-3); }
.crm .start-ki-kopf strong { font-weight: 700; }
.crm .start-ki-absatz, .crm .start-ki-fehler { font-size: var(--fs-body); line-height: 1.55; max-width: 73.6rem; }
.crm .start-ki .start-ki-knopf { font-size: var(--fs-ui); font-weight: 600; color: var(--text-2); }
.crm .start-kachel { gap: 0; padding: 1.0667rem 1.2rem; border-radius: .8rem; }
.crm .start-kachel .start-kachel-kopf { height: 1.2rem; }
.crm .start-kachel .start-kachel-titel { font-size: var(--fs-body); font-weight: 600; gap: .5333rem; }
.crm .start-kachel-kopf svg, .crm .start-kachel .start-pfeil-knopf { color: var(--text-3); }
.crm .start-kachel .start-pfeil-knopf { margin-block: -.4rem; }
.crm .start-kachel .start-kachel-wert { margin: .5333rem 0 0; padding-bottom: .8rem; }
.crm .start-kachel .start-zahl { font-family: inherit; font-size: var(--fs-kpi); font-weight: 600; line-height: 1.2; }
.crm .start-kachel .start-einheit { font-size: var(--fs-ui); font-weight: 600; color: var(--text-2); }
.crm .start-kachel .start-bewegung { margin: 0; padding-top: .6667rem; gap: .4667rem; font-size: var(--fs-meta); color: var(--text-2); }
.crm .start-kachel .start-bewegung > * { font-size: var(--fs-meta); }
.crm .start-schild { font-size: var(--fs-label); font-weight: 700; line-height: normal; padding: .0667rem .4rem; border-radius: .3333rem; color: var(--text-2); background: var(--bg-surface-3); }
.crm .start-schild-gut { color: color-mix(in srgb, var(--ad-green-700) 67%, black); background: var(--tint-green); }
.crm .start-schild-ocker { color: var(--ad-orange-900); background: var(--tint-orange); }
.crm.dark .start-schild-gut, html[data-theme="dark"] .crm .start-schild-gut { color: var(--ad-green); }
.crm .start-spalten { gap: 1.0667rem; }
.crm .start-spalten > .start-feed, .crm .start-spalten > .start-braucht { padding: 1.0667rem 1.3333rem; border-radius: .8rem; }
.crm .start-abschnitt { font-weight: 700; }
.crm .start-abschnitt .start-abschnitt-zahl, .crm .start-abschnitt span { font-weight: 500; color: var(--text-3); }
.crm .start-feed-summe { font-size: var(--fs-meta); color: var(--text-3); }
.crm .start-feed-rechts { gap: .8rem; }
.crm .start-feed-rechts .start-link, .crm p.start-rest .start-link, .crm .start-braucht-fuss .start-link { font-size: var(--fs-ui); font-weight: 600; }
.crm .start-chips, .crm .start-filter { gap: .4rem; }
.crm .start-chip { font-size: var(--fs-meta); font-weight: 500; padding: .2667rem .7333rem; }
.crm .start-chip:not(.is-active) { border-color: var(--border-strong); }
.crm .start-chip.is-active { font-weight: 500; }
.crm .start-chip .start-chip-zahl { font-size: inherit; }
.crm .start-zeile-kopf { padding: .8667rem 0; gap: .9333rem; }
.crm .start-zeile-symbol { flex-basis: 2rem; width: 2rem; height: 2rem; border-radius: var(--r-md); background: var(--bg-surface-3); }
.crm .start-zeile-text { gap: .2rem; }
.crm .start-zeile-titel { font-size: var(--fs-body); font-weight: 700; }
.crm .start-zeile-satz { font-size: var(--fs-meta); line-height: 1.45; color: var(--text-2); }
.crm .start-zeile-meta { font-size: var(--fs-meta); color: var(--text-3); gap: .4rem; }
.crm .start-gewonnen { color: var(--ad-green-700); }
.crm .start-grund { font-size: var(--fs-label); font-weight: 600; padding: .1333rem .5333rem; border-radius: var(--r-sm); color: var(--ad-blue-700); background: var(--tint-blue); }
.crm p.start-rest { font-size: var(--fs-meta); color: var(--text-3); padding-top: .6667rem; }
.crm .start-braucht-zeile, .crm .start-braucht-zeile:first-child { padding: .8667rem 0; gap: .8rem; border-top: .0625rem solid var(--border); }
.crm .start-zahl-kaestchen { display: inline-flex; align-items: center; justify-content: center; width: 1.7333rem; height: 1.6rem; padding: 0; font-family: inherit; font-size: var(--fs-meta); font-weight: 700; border-radius: var(--r-sm); }
.crm .start-braucht-zeile strong { font-size: var(--fs-body); font-weight: 700; }
.crm .start-braucht-details, .crm .start-braucht-details.start-braucht-kurz { display: flex; align-items: center; gap: .5333rem; min-width: 0; font-size: var(--fs-meta); color: var(--text-2); white-space: nowrap; overflow: hidden; }
.crm .start-braucht-details .start-braucht-bilder { flex: 0 0 auto; margin-right: 0; }
.crm .start-braucht-detailtext { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.crm .start-braucht-text { min-width: 0; }
.crm .start-braucht-zeile .btn { font-size: var(--fs-ui); font-weight: 500; min-height: 2.1333rem; padding: 0 .8rem; border-radius: var(--r-md); border-color: var(--border-strong); }
.crm .start-braucht-fuss { margin-top: 0; padding-top: .6667rem; border-top: .0625rem solid var(--border); font-size: var(--fs-meta); color: var(--text-3); }
.crm .start-spalten > .start-feed { flex: 1.55 1 31rem; }
.crm .start-spalten > .start-braucht { flex: 1 1 20rem; }
.crm .start-zeile-kopf { align-items: flex-start; padding-right: 2.1333rem; }
.crm .start-zeile-symbol { margin: .1333rem .2667rem 0 0; }
.crm .start-kachel .start-bewegung > li { display: flex; align-items: center; gap: .4rem; white-space: nowrap; line-height: normal; }
.crm .start-kachel .start-schild svg { width: .8rem; height: .8rem; }
.crm .start-kachel .start-kachel-wert { gap: 0 .2rem; }
/* Gate-Runde 3, Prüfer 1: Foto 22 px mit 6 px Luft, Kästchen in Fira Sans, Pfeil als 16-px-Symbol, Bewegungen dürfen bei schmalen Kacheln umbrechen. */
.crm .start-bereich .start-bereich-foto { margin-right: .4rem; }
.crm .start-bereich-foto .emp-avatar, .crm .start-bereich-foto > * { width: 1.4667rem; height: 1.4667rem; }
.crm .start-braucht-zeile .start-braucht-zahl, .crm .start-braucht-zeile .start-zahl-kaestchen { font-family: 'Fira Sans', system-ui, sans-serif; }
.crm .start-braucht-zeile .start-braucht-zahl { flex-basis: 1.7333rem; }
.crm .start-kachel .start-pfeil-knopf svg { width: 1.0667rem; height: 1.0667rem; }
.crm .start-kachel .start-bewegung > li { flex-wrap: wrap; row-gap: .1333rem; }
/* Gate-Runde 3, Prüfer 2: Bewegungszeilen 17 px (Abstand 24), Pfeil rechtsbündig am Polster, Bildplatz in „Braucht dich" 24 px. */
.crm .start-kachel .start-bewegung > li { min-height: 1.1333rem; }
.crm .start-kachel .start-pfeil-knopf { margin-inline-end: -.4667rem; }
.crm .start-braucht-details .start-braucht-bilder { gap: .5333rem; min-height: 1.6rem; }
.crm .start-braucht-text .start-braucht-details { margin-top: .1333rem; }
/* Gate-Runde 3, Prüfer 3: Titel-Zeilenhöhe 33 px, Satz höchstens 1444 px breit, Abschnittstitel 21 px hoch (Prototyp @1920). */
.crm .start-kopf h1, .crm .start-titel { line-height: 1.1; }
.crm .start-satz { max-width: 96.2667rem; }
.crm .start-abschnitt { line-height: 1.4rem; }
/* Gate-Runde 3, Prüfer 4: 18 px vom Kopf zum Satz (Satz-Zeilenhöhe 29,4 px), 10 px Luft über der Fußlinie von „Braucht dich". */
.crm .start-satz { margin-top: .1333rem; line-height: 1.47; }
.crm .start-braucht .start-braucht-fuss { margin-top: .6667rem; }
/* Gate R4: Aufklapp-Pfeil an Feed-Zeilen mit Detailtabelle (Prototyp .feed li>svg: 16 px, text-3, rechte 18-px-Spalte, 4 px unter der Titeloberkante). */
.crm .start-zeile-kopf { position: relative; }
.crm .start-zeile-pfeil { position: absolute; right: .1333rem; top: 1.1333rem; display: inline-flex; color: var(--text-3); }
.crm .start-zeile-kopf[aria-expanded="true"] .start-zeile-pfeil { transform: rotate(180deg); }
/* Gate R4, Ganz-Prüfung: Chip-Zahl im Gewicht der Beschriftung, „Alles gesehen" flach, Schild-Pfeile als Zeichen ▲/▼. */
.crm .start-chip .start-chip-zahl { font-weight: inherit; }
.crm #start-alles-gesehen, .crm #start-alles-gesehen:hover { box-shadow: none; }
.crm .start-schild-pfeil { font-size: inherit; line-height: 1; }
.crm .start-kachel .start-bewegung > li { display: block; white-space: normal; line-height: 1.1333rem; }
.crm .start-kachel .start-bewegung .start-schild { margin-right: .1333rem; }
.crm .start-schild-pfeil { display: inline-flex; vertical-align: 0; margin-right: 0; }
.crm .start-schild-pfeil svg { width: .5333rem; height: .5333rem; }
.crm .start-schild-pfeil.is-ab svg { transform: rotate(180deg); }
.crm .start-kachel, .crm .start-spalten > .start-feed, .crm .start-spalten > .start-braucht { box-shadow: none; }
.crm .start-kachel .start-schild .start-schild-pfeil svg { width: .5333rem; height: .5333rem; }
/* Ganz-Prüfung R10: 6 px zwischen Bereichsname und Zusatz (Prototyp .ber gap), Dreiecke 9 px mit 1 px Luft zur Zahl. */
.crm .start-bereich:has(.start-sub-kopf) { gap: .4rem; }
.crm .start-kachel .start-schild .start-schild-pfeil svg { width: .6rem; height: .6rem; }
.crm .start-kachel .start-schild .start-schild-pfeil { margin-right: .0667rem; }
.crm .start-braucht-zeile .start-braucht-zahl { flex: 0 0 2rem; text-align: left; }
.crm .start-braucht-zeile .start-braucht-zahl { display: flex; justify-content: flex-start; }


/* ─────────────────────────────────────────
   PR1.746 — „Noch nicht da“ bis zum ersten Arbeitstag (Vorlage V14, Prototyp
   masken-detail.html#v14). Ruhiges Blau; Chip im Maskenkopf, Pille in der Liste, Feld +
   Hinweis in der Maske. Keine Bewegung (seltene Pflege-Aufgabe).
   ───────────────────────────────────────── */
/* Farben aus dem Prototyp: Hinweistext wie der Masken-Hinweis (e1 .info), Silhouette .fo.none. */
.crm { --emp-start-hint-text: color-mix(in srgb, var(--ad-blue) 43%, var(--text-1)); --emp-start-silhouette: color-mix(in srgb, var(--border-strong) 66%, var(--text-2)); }
.crm.dark, html[data-theme="dark"] .crm { --emp-start-hint-text: var(--ad-blue-300); --emp-start-silhouette: var(--text-3); }
/* Liste: Pille „ab 01.12.“ — Grund hellblau, rund, 22 hoch, 12er Schrift, Umriss-Uhr. */
.crm .emp-load.is-start { display: inline-flex; align-items: center; }
.crm .emp-start-tag {
  display: inline-flex; align-items: center; gap: .3rem;
  min-height: 1.4667rem; padding: .0667rem .6rem; border-radius: 99rem; box-sizing: border-box;
  background: var(--tint-blue); color: var(--ad-blue-700);
  font-size: var(--fs-label); font-weight: 600; line-height: 1.2; white-space: nowrap;
}
.crm .emp-start-tag svg { flex: 0 0 auto; width: .8125rem; height: .8125rem; }
/* Kopf der Maske: Chip, 12er Schrift (--fs-label; 1 rem = 15 px). */
.crm .emp-start-chip {
  display: inline-flex; align-items: center; gap: .3rem;
  align-self: flex-start; width: fit-content; box-sizing: border-box;
  /* 22 hoch, Polster 1/9, Zeile 20 (wie .emp-start-tag); 1 rem = 15 px. */
  min-height: 1.4667rem; line-height: 1.3333rem;
  margin-top: .35rem; padding: .0667rem .6rem; border-radius: 99rem;
  background: var(--tint-blue); color: var(--ad-blue-700);
  font-size: var(--fs-label); font-weight: 600; white-space: nowrap;
}
.crm .emp-start-chip[hidden] { display: none; }
/* Feld eine Spalte breit, die Gruppe volle Zeile: das Raster springt nicht. */
.crm .emp-avail-group { grid-column: span 6; }
.crm .emp-start-group .emp-start-field { width: calc(50% - .5rem); }
.crm .emp-start-field {
  display: flex; align-items: center; gap: .5rem;
  padding: 0 .75rem; border: .0625rem solid var(--border-strong); border-radius: var(--r-sm);
  background: var(--bg-surface);
}
/* Fokus wie die übrigen Maskenfelder (#emp-fte): Rand Primärblau + Halo. */
.crm .emp-start-field:focus-within { border-color: var(--primary); box-shadow: 0 0 0 .2rem var(--primary-glow); }
.crm .emp-start-field.field-error { border-color: var(--ad-red-700); }
.crm .emp-start-field input[type="date"] {
  flex: 1 1 auto; min-width: 0; border: 0; padding-left: 0; padding-right: 0;
  background: transparent; box-shadow: none; outline: none;
}
.crm .emp-start-field input[type="date"]:focus,
.crm .emp-start-field input[type="date"]:focus-visible { outline: none; box-shadow: none; border: 0; }
.crm .emp-start-field input[type="date"]::-webkit-calendar-picker-indicator { display: none; }
.crm .emp-start-cal { flex: 0 0 auto; color: var(--text-2); cursor: pointer; }
.crm .emp-start-in { flex: 0 0 auto; font-size: var(--fs-meta); color: var(--text-3); white-space: nowrap; }
/* Hinweis: 13er Schrift (--fs-meta), Text Prototyp-Dunkelblau, Datum 700 in Tinte. */
.crm .emp-start-hint {
  display: flex; align-items: flex-start; gap: .6rem; margin: 0;
  padding: .75rem 1rem; border-radius: var(--r-sm);
  background: var(--tint-blue); color: var(--emp-start-hint-text);
  font-size: var(--fs-meta); line-height: 1.45;
}
.crm .emp-start-hint strong { font-weight: 700; color: var(--text-1); }
.crm .emp-start-hint-ic { flex: 0 0 auto; margin-top: .2rem; }
/* Umschalter über die volle Breite, vier gleiche Teile wie im Bild. */
.crm #emp-availability + .cs--segment .cs-segment { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.crm #emp-availability + .cs--segment .cs-seg { justify-content: center; text-align: center; }
/* Gewählte Taste im Verfügbarkeits-Umschalter: Text Blau 700 (hell) / 300 (dunkel), Kontrast >= 4,5
   (Muster .aud .cs-seg). */
.crm #emp-availability + .cs--segment .cs-seg[aria-checked="true"] { color: var(--ad-blue-700); }
.crm.dark #emp-availability + .cs--segment .cs-seg[aria-checked="true"],
html[data-theme="dark"] .crm #emp-availability + .cs--segment .cs-seg[aria-checked="true"] { color: var(--ad-blue-300); }
/* Gewählte Taste „Noch nicht da“ (zweite Taste) trägt die Uhr wie im Bild. */
.crm #emp-availability + .cs--segment .cs-seg:nth-child(2)[aria-checked="true"]::before {
  content: ""; display: inline-block; width: .8rem; height: .8rem; margin-right: .35rem;
  vertical-align: -.1rem; background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.5'%3E%3Ccircle cx='8' cy='8' r='6.2'/%3E%3Cpath d='M8 4.6V8l2.3 1.5' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.5'%3E%3Ccircle cx='8' cy='8' r='6.2'/%3E%3Cpath d='M8 4.6V8l2.3 1.5' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat;
}
/* Neutrale Fotofläche (Silhouette) statt Initialen. ID im Selektor: die Kopfregel
   #emp-modal .mp-avatar (style.css) trägt selbst eine ID. */
.crm #emp-modal .mp-avatar.is-neutral { font-size: 0; color: var(--emp-start-silhouette); background: color-mix(in srgb, var(--border) 50%, var(--bg-surface-3)); }
/* PR1.736-Nachzug — der Kopf traegt jetzt selbst die Silhouette; im Startzustand malt ::after sie. */
.crm #emp-modal .mp-avatar.is-neutral > .emp-avatar-silhouette { display: none; }
.crm #emp-modal .mp-avatar.is-neutral::after {
  content: ""; position: absolute; inset: 22%; background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Ccircle cx='8' cy='5.2' r='3.1' fill='black'/%3E%3Cpath d='M2.2 15c.4-3.4 2.9-5.2 5.8-5.2s5.4 1.8 5.8 5.2z' fill='black'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Ccircle cx='8' cy='5.2' r='3.1' fill='black'/%3E%3Cpath d='M2.2 15c.4-3.4 2.9-5.2 5.8-5.2s5.4 1.8 5.8 5.2z' fill='black'/%3E%3C/svg%3E") center / contain no-repeat;
}
.crm.dark .emp-start-tag, html[data-theme="dark"] .crm .emp-start-tag,
.crm.dark .emp-start-chip, html[data-theme="dark"] .crm .emp-start-chip { color: var(--ad-blue-300); }
/* Liste: neutrale Fotofläche für Personen, die noch nicht da sind und kein Foto haben. */
.crm .emp-avatar.is-neutral { position: relative; overflow: hidden; color: var(--emp-start-silhouette); background: color-mix(in srgb, var(--border) 50%, var(--bg-surface-3)); }
/* Nachzug 06.11.2026 — die Silhouette steht als Markup in der Blase (neutralPersonHtml); ein
   ::after-Bild laege sonst ueber einem nachgeladenen Foto. */

/* ─────────────────────────────────────────
   PR1.741 — Block „Verantwortliche" (Projekt-Detail, Vorlage V11).
   Zwei Felder: Delivery-Verantwortlicher (gibt in adtime frei) und Projektleitung
   (Rolle im Team oder „leitet auch das Projekt", PR1.787). Ruhig, keine Animation — Weitergeben ist selten (Konvention 22).
   ───────────────────────────────────────── */
.crm .vw-card-wrap .vw-body { display: flex; flex-direction: column; gap: .5rem; }
/* Trennlinie unter dem Kartentitel ueber die ganze Kartenbreite (Vorlage V11). */
.crm .vw-card-wrap > .section-h { margin: 0 -1.125rem .75rem; padding: 0 1.125rem .75rem; border-bottom: .0625rem solid var(--border); }
.crm .vw-nowrap { white-space: nowrap; }
.crm .vw-lbl { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: .5rem; margin-top: .375rem; font-size: var(--fs-ui); }
.crm .vw-lbl b { font-weight: 600; color: var(--text-1); }
.crm .vw-lbl span { font-size: var(--fs-meta); color: var(--text-3); }
.crm .vw-card {
  display: flex; align-items: center; gap: .75rem; min-width: 0;
  padding: .625rem .75rem; border: .0625rem solid var(--border-strong); border-radius: var(--r-md); background: var(--bg-surface);
}
/* Kundenkarte: Textblock in Inhaltsbreite, hoechstens Zeile minus Avatar (2.4rem) und Abstand — so bleiben
   Avatar + Text immer in einer Zeile; passt der Link nicht daneben, weicht nur „im Team ansehen" aus. */
.crm .vw-card-customer { background: var(--bg-surface-2); flex-wrap: wrap; }
.crm .vw-card-customer > .vw-card-txt { flex: 1 1 auto; min-width: 0; max-width: calc(100% - 2.4rem - .75rem); }
.crm .vw-card-none { border-style: dashed; background: transparent; color: var(--text-3); min-height: 3.5333rem; flex-wrap: wrap; }
.crm .vw-card-txt { display: flex; flex-direction: column; min-width: 0; flex: 1 1 auto; }
/* Namen werden nie gekuerzt — sie brechen um; der Link daneben weicht in die naechste Zeile. */
.crm .vw-name { font-weight: 600; font-size: var(--fs-ui); color: var(--text-1); overflow-wrap: break-word; }
.crm .vw-sub { font-size: var(--fs-meta); color: var(--text-3); }
.crm .vw-none-txt { font-size: var(--fs-ui); color: var(--text-3); }
.crm .vw-plus { display: inline-flex; align-items: center; justify-content: center; width: 1.5rem; height: 1.5rem; border: .0625rem solid var(--border); border-radius: 50%; color: var(--text-3); }
.crm .vw-plus svg { width: .875rem; height: .875rem; }
.crm .vw-av { display: inline-flex; flex: 0 0 auto; }
.crm .vw-av .emp-avatar { border-radius: 50%; }
.crm .vw-hand { flex: 0 0 auto; margin-left: auto; display: inline-flex; align-items: center; gap: .375rem; }
.crm .vw-link { flex: 0 0 auto; margin-left: auto; text-decoration: underline; text-underline-offset: .15em; font-weight: 500; font-size: var(--fs-meta); color: var(--ad-blue-700); }
.crm .vw-note .vw-link { font-size: inherit; margin-left: 0; }
.crm .vw-lock { flex: 0 0 auto; margin-left: auto; display: inline-flex; color: var(--text-3); }
.crm .vw-lock svg { width: 1.125rem; height: 1.125rem; }
/* PR1.787 — Schalter „Leitet auch das Projekt“ unter dem Delivery-Verantwortlichen. */
.crm .vw-also { display: flex; flex-direction: column; gap: .25rem; }
.crm .vw-also .vw-sub { margin: 0; font-size: var(--fs-meta); color: var(--text-2); }
.crm .vw-note { display: flex; align-items: center; gap: .375rem; margin: 0; font-size: var(--fs-meta); color: var(--text-2); }
.crm .vw-note svg { flex: 0 0 auto; width: .875rem; height: .875rem; color: var(--text-3); }
.crm .vw-search {
  display: flex; align-items: center; gap: .5rem; padding: .5rem .75rem; min-height: 3.5333rem;
  border: .0625rem solid var(--border-strong); border-radius: var(--r-md); background: var(--bg-surface); color: var(--text-3);
}
.crm .vw-search:focus-within { border-color: var(--ad-blue); box-shadow: 0 0 0 .1875rem var(--tint-blue); }
.crm .vw-search svg { flex: 0 0 auto; width: 1rem; height: 1rem; }
.crm .vw-search-input { flex: 1 1 auto; min-width: 0; border: 0; outline: 0; background: transparent; font: inherit; font-size: var(--fs-ui); color: var(--text-1); }
.crm .vw-pop {
  margin-top: .25rem; padding: .5rem; border: .0625rem solid var(--border); border-radius: var(--r-md);
  background: var(--bg-surface); box-shadow: 0 .25rem 1rem rgba(11,26,43,.10);
  display: flex; flex-direction: column; gap: .375rem;
}
.crm .vw-pop .vw-search { margin: .25rem .25rem 0; min-height: 0; }
.crm .vw-pop-h { padding: .25rem .5rem 0; font-size: var(--fs-meta); font-weight: 600; color: var(--text-2); }
.crm .vw-pop-f { display: flex; align-items: center; gap: .375rem; margin: .25rem 0 0; padding: .5rem .5rem .25rem; border-top: .0625rem solid var(--border); font-size: var(--fs-meta); color: var(--text-2); }
.crm .vw-pop-f svg { flex: 0 0 auto; width: .875rem; height: .875rem; color: var(--text-3); }
.crm .vw-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; max-height: 20rem; overflow-y: auto; }
.crm .vw-grp { padding: .5rem .5rem .25rem; font-size: var(--fs-label); font-weight: 500; color: var(--text-3); }
.crm .vw-sep { height: 0; margin: .25rem .5rem; border-top: .0625rem solid var(--border); }
.crm .vw-opt { display: flex; align-items: center; gap: .625rem; padding: .5rem; min-height: 3.4667rem; border-radius: var(--r-sm); cursor: pointer; }
.crm .vw-opt:hover, .crm .vw-opt.is-active { background: var(--bg-hover); }
.crm .vw-opt:focus-visible { outline: .125rem solid var(--ad-blue); outline-offset: -.125rem; }
.crm .vw-opt-txt { display: flex; flex-direction: column; min-width: 0; flex: 1 1 auto; }
.crm .vw-opt-name { font-weight: 600; font-size: var(--fs-ui); color: var(--text-1); overflow-wrap: break-word; }
.crm .vw-opt-sub { font-size: var(--fs-meta); color: var(--text-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.crm .vw-opt-arrow { flex: 0 0 auto; display: inline-flex; color: var(--text-3); }
.crm .vw-opt-arrow svg { width: .875rem; height: .875rem; }
.crm .vw-empty { margin: 0; padding: .5rem; font-size: var(--fs-meta); color: var(--text-3); }
.crm .vw-locked {
  display: flex; align-items: flex-start; gap: .5rem; margin: .25rem 0 0; padding: .625rem .75rem;
  border-radius: var(--r-md); background: var(--bg-surface-2); font-size: var(--fs-meta); color: var(--text-2);
}
.crm .vw-locked svg { flex: 0 0 auto; width: 1rem; height: 1rem; margin-top: .0625rem; color: var(--text-3); }
.crm .vw-locked b { font-weight: 600; color: var(--text-1); }
/* Marken in der Projektteam-Tabelle (Legende 6) */
.crm .vw-marks { display: flex; flex-wrap: wrap; gap: .25rem; margin-top: .125rem; }
.crm .vw-mark { display: inline-flex; align-items: center; min-height: 1.4667rem; font-size: var(--fs-label); font-weight: 500; border-radius: 999rem; padding: 0 .5rem; }
.crm .vw-mark-customer { background: var(--tint-violet); color: var(--ad-violet); border-color: transparent; }
.crm .vw-mark-internal { background: var(--tint-blue); color: var(--ad-blue-700); border-color: transparent; }
html[data-theme="dark"] .crm .vw-mark-customer, .crm.dark .vw-mark-customer { color: color-mix(in srgb, var(--ad-violet) 40%, white); }
html[data-theme="dark"] .crm .vw-mark-internal, .crm.dark .vw-mark-internal, html[data-theme="dark"] .crm .vw-link, .crm.dark .vw-link { color: var(--ad-blue-300); }

/* PR1.736 (V03 Legende 3, V23 Legende 3) — Mitarbeiter immer mit Foto: runde Fotoflaeche;
   ohne Foto neutrale Flaeche mit Silhouette (wie .acc-logo-leer), nie Initialen. Das Foto legt
   der globale Beobachter (ma-photo.js) als Ebene darueber. */
.crm .person-foto {
  position: relative;
  display: inline-grid;
  place-items: center;
  flex: none;
  border-radius: 50%;
  overflow: hidden;
  background-color: var(--bg-surface-3);
  color: color-mix(in srgb, var(--text-3) 60%, var(--bg-surface-3));
}
.crm .person-foto .emp-avatar-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
.crm .emp-avatar-silhouette { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; }
/* Zeichen passt ganz in die Flaeche: nichts wird abgeschnitten (Layout-Waechter RD1.14). */
.crm .emp-avatar-silhouette .ic { width: 62%; height: 62%; }
.crm .emp-avatar-neutral,
.crm .person-foto-chip,
.crm :is(.org-avatar, .cs-avatar, .sb-avatar, .role-who-av, .kc-av):has(> .emp-avatar-silhouette) {
  background: var(--bg-surface-3);
  color: color-mix(in srgb, var(--text-3) 60%, var(--bg-surface-3));
  border-color: transparent;
}
.crm .person-mit-foto { display: inline-flex; align-items: center; gap: .5rem; min-width: 0; max-width: 100%; vertical-align: middle; }
.crm .person-mit-foto-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* PR1.736 — Staffing-Platz: Foto 30 px mit feinem Ring (V23 „Michael Melchers"). */
.crm .pl-foto-platz { box-shadow: 0 0 0 .0625rem var(--mono-border); }
/* PR1.736 (V04 Legende 1) — Teamreihe 24 px, leicht ueberlappend; „+N" in derselben Groesse. */
.crm .team-stack-item { margin-left: -.375rem; }
.crm .team-stack-item:first-child { margin-left: 0; }
.crm .team-stack-more { width: 1.5rem; height: 1.5rem; font-size: var(--fs-label); }
.crm .proj-leiter-fehlt { font-weight: 600; color: var(--ocker-text); }

/* ── Rolle in drei Schritten (Vorlage V12 rechts) ─────────────────────────────────────
   1 Rolle · 2 Umfang · 3 Wer. Jede Rolle eine Karte; ueber jeder Luecke ihre Nummer, die
   offene Luecke gestrichelt mit grauer Marke. Zeitraum als Hinweis unter dem Satz, Umfang-
   Schnellwahl solange offen, „Mehr für das Matching" eingeklappt mit Zaehler. Keine
   Bewegung: die Maske wird taeglich benutzt (Konvention 22). Nur die neue Ansicht.
   Masse aus dem Prototyp design/mockups/vorlive-05-11/masken-detail.html (V12), 1:1 bei
   1 rem = 15 px; Zwischen-Schriftgroessen auf die naechste Skalenstufe gerundet.
   Hell/dunkel ueber eigene Tokens: Tinte der Luecken und Links schaltet dunkel auf die
   helle Blaustufe (Kontrast ≥ 4,5:1 auf --tint-blue bzw. --bg-surface). */
html[data-ui="new"] .crm {
  --rs-ink: var(--ad-blue-700);          /* Luecke, Link (Prototyp --blue-d) */
  --rs-blank-bg: var(--tint-blue);       /* Prototyp --blue-t */
  --rs-blank-line: color-mix(in srgb, var(--ad-blue) 19%, var(--bg-surface)); /* Prototyp --blue-t2 */
}
html[data-ui="new"] .crm.dark, html[data-ui="new"][data-theme="dark"] .crm {
  --rs-ink: var(--ad-blue-300);
  --rs-blank-line: color-mix(in srgb, var(--ad-blue-300) 35%, var(--bg-surface));
}
html[data-ui="new"] .crm .is-role-steps > .role-bands:empty { display: none; }
/* Karte: Rand 1 px, Radius 10, Innen 14/16, Zeilenabstand 12, Abstand zwischen Karten 14. */
html[data-ui="new"] .crm .role-row-wrap.is-steps {
  display: flex; flex-direction: column; gap: .8rem;
  margin: 0 0 .9333rem; padding: .9333rem 1.0667rem;
  border: .0667rem solid var(--border); border-radius: var(--r-lg); background: var(--bg-surface);
}
html[data-ui="new"] .crm .role-row-wrap.is-steps:focus-within {
  border-color: var(--rs-blank-line); box-shadow: 0 0 0 .2rem var(--rs-blank-bg);
}
html[data-ui="new"] .crm .role-sentence.is-steps { display: block; padding: 0; }
html[data-ui="new"] .crm .role-sentence.is-steps .role-sent-main { padding: 0; display: flex; flex-direction: column; gap: .8rem; }
/* Satzzeile: Flex, unten ausgerichtet, Abstand 4, Schrift 15, Zeilenhoehe 34; „···" am Ende. */
html[data-ui="new"] .crm .role-sent-row { display: flex; align-items: flex-end; gap: .2667rem; }
html[data-ui="new"] .crm .role-sentence.is-steps .role-sent-txt {
  flex: 1 1 auto; min-width: 0; margin: 0;
  display: flex; flex-wrap: wrap; align-items: flex-end; gap: .2667rem;
  color: var(--text-1); font-size: var(--fs-body); line-height: 2.2667rem;
}
/* Schrittmarke ueber der Luecke: Kreis 16 + Wort 12/700/text-3, Abstand zur Luecke 3. */
html[data-ui="new"] .crm .role-step { display: inline-flex; flex-direction: column; align-items: flex-start; gap: .2rem; margin: 0 .1333rem; }
html[data-ui="new"] .crm .role-step-cap {
  display: inline-flex; align-items: center; gap: .3333rem; white-space: nowrap;
  font-size: var(--fs-label); line-height: 1.0667rem; font-weight: 700; color: var(--text-3);
}
html[data-ui="new"] .crm .role-step-n {
  display: inline-grid; place-items: center; width: 1.0667rem; height: 1.0667rem; border-radius: 50%;
  background: var(--bg-surface-3); color: var(--text-2); font-size: var(--fs-label); font-weight: 700; line-height: 1;
}
html[data-ui="new"] .crm .role-step.is-on .role-step-n { background: var(--ad-blue); color: var(--text-inv); }
html[data-ui="new"] .crm .role-step-glue { display: inline-flex; align-items: flex-end; white-space: nowrap; }
html[data-ui="new"] .crm .role-step-glue .role-blank { white-space: normal; }
html[data-ui="new"] .crm .role-step-dot { margin-left: .4rem; }
/* Luecke: Rand 1,5 hellblau, Grund tint-blue, Tinte blau 600, Radius 8, Innen 5/10, Zeile 22. */
html[data-ui="new"] .crm .role-sentence.is-steps .role-blank {
  height: auto; margin: 0; padding: .3333rem .6667rem; gap: .4667rem;
  border: .1rem solid var(--rs-blank-line); border-radius: var(--r-md);
  background: var(--rs-blank-bg); color: var(--rs-ink); font-size: var(--fs-body); font-weight: 600; line-height: 1.4667rem;
  box-shadow: none;
}
html[data-ui="new"] .crm .role-sentence.is-steps .role-blank:hover { background: color-mix(in srgb, var(--rs-blank-line) 60%, var(--rs-blank-bg)); }
html[data-ui="new"] .crm .role-sentence.is-steps .role-blank.is-empty {
  background: var(--bg-surface); color: var(--text-3); font-weight: 600; border-style: dashed; border-color: var(--border-strong);
}
html[data-ui="new"] .crm .role-sentence.is-steps .role-blank.is-static { cursor: default; }
html[data-ui="new"] .crm .role-sentence.is-steps .role-blank-dot { width: .6rem; height: .6rem; }
html[data-ui="new"] .crm .role-sentence.is-steps .role-blank-av { width: 1.4667rem; height: 1.4667rem; }
html[data-ui="new"] .crm .role-sentence.is-steps .role-blank-av.is-ph { border: 0; background: var(--bg-surface-3); color: var(--text-3); }
html[data-ui="new"] .crm .role-sentence.is-steps .role-blank:focus-visible { outline: .1333rem solid var(--focus); outline-offset: .1333rem; }
/* Unter dem Satz: Schnellwahl, Zeitraum-Hinweis, Rechenzeile — je 12 auseinander (Kartenraster). */
html[data-ui="new"] .crm .role-steps-under { display: flex; flex-direction: column; gap: .8rem; }
html[data-ui="new"] .crm .role-steps-under:empty { display: none; }
html[data-ui="new"] .crm .role-steps-quick { display: flex; flex-wrap: wrap; align-items: center; gap: .5333rem; }
html[data-ui="new"] .crm .role-steps-lbl { font-size: var(--fs-meta); color: var(--text-3); }
html[data-ui="new"] .crm .role-steps-q {
  padding: .3333rem .6667rem; border: .0667rem solid var(--border-strong); border-radius: .4667rem;
  background: var(--bg-surface); color: var(--text-1); font: inherit; font-size: var(--fs-meta); font-weight: 600; line-height: 1.2; cursor: pointer;
}
html[data-ui="new"] .crm .role-steps-q:hover { background: var(--bg-surface-2); }
html[data-ui="new"] .crm .role-steps-q:disabled { opacity: .5; cursor: not-allowed; }
html[data-ui="new"] .crm .role-steps-q:focus-visible { outline: .1333rem solid var(--focus); outline-offset: .1333rem; }
html[data-ui="new"] .crm .role-steps-range {
  display: flex; flex-wrap: wrap; align-items: center; gap: .5333rem; margin: 0;
  font-size: var(--fs-meta); color: var(--text-2); font-variant-numeric: tabular-nums;
}
html[data-ui="new"] .crm .role-steps-range.is-warn { color: var(--ocker-text); }
html[data-ui="new"] .crm .role-steps-cal { flex: none; width: 1rem; height: 1rem; color: var(--text-2); }
html[data-ui="new"] .crm .role-steps-range-act {
  padding: 0; border: 0; background: none; font: inherit; font-weight: 600; color: var(--rs-ink);
  text-decoration: underline; text-underline-offset: .1333rem; cursor: pointer;
}
html[data-ui="new"] .crm .role-steps-range-act:focus-visible { outline: .1333rem solid var(--focus); outline-offset: .1333rem; }
html[data-ui="new"] .crm .role-sentence.is-steps .role-sent-follow { margin: 0; font-size: var(--fs-meta); line-height: 1.45; color: var(--text-2); }
html[data-ui="new"] .crm .role-sentence.is-steps .role-sent-follow:empty { display: none; }
html[data-ui="new"] .crm .role-sentence.is-steps .role-sent-matches:empty,
html[data-ui="new"] .crm .role-sentence.is-steps .role-sent-pop:empty { display: none; }
/* „···": Geisterknopf 32 breit am Ende der Satzzeile, unten buendig. */
html[data-ui="new"] .crm .role-steps-more { position: relative; flex: none; }
html[data-ui="new"] .crm .role-steps-more-btn {
  display: inline-grid; place-items: center; width: 2.1333rem; height: 2.1333rem; padding: 0;
  border: 0; border-radius: var(--r-md); background: none; color: var(--text-2); cursor: pointer;
}
html[data-ui="new"] .crm .role-steps-more-btn:hover { background: var(--bg-surface-3); }
html[data-ui="new"] .crm .role-steps-more-btn:focus-visible { outline: .1333rem solid var(--focus); outline-offset: .1333rem; }
html[data-ui="new"] .crm .role-steps-menu {
  position: absolute; right: 0; top: calc(100% + .2667rem); z-index: 5; min-width: 11rem; padding: .2667rem;
  border: .0667rem solid var(--border); border-radius: var(--r-md); background: var(--bg-surface); box-shadow: var(--shadow-2);
}
html[data-ui="new"] .crm .role-steps-menu [role="menuitem"] {
  display: flex; align-items: center; gap: .5333rem; width: 100%; padding: .4667rem .6667rem;
  border: 0; border-radius: var(--r-sm); background: none; color: var(--text-1);
  font: inherit; font-size: var(--fs-ui); text-align: left; cursor: pointer;
}
html[data-ui="new"] .crm .role-steps-menu [role="menuitem"]:hover,
html[data-ui="new"] .crm .role-steps-menu [role="menuitem"]:focus-visible { background: var(--bg-surface-3); outline: none; }
/* „Mehr für das Matching": Trennlinie, 10 darunter, Pfeil buendig am Innenrand, Zaehler rechts. */
html[data-ui="new"] .crm .role-row-wrap.is-steps > .opp-role-card {
  margin: 0; padding: .6667rem 0 0; border: 0; border-top: .0667rem solid var(--border); border-radius: 0; background: none; box-shadow: none;
}
html[data-ui="new"] .crm .role-row-wrap.is-steps > .opp-role-card > .role-row-sum { display: block; min-height: 0; padding: 0; }
html[data-ui="new"] .crm .role-row-wrap.is-steps .role-row-sum .role-cell-name { display: flex; align-items: center; gap: .5333rem; width: 100%; padding: 0; }
html[data-ui="new"] .crm .role-row-wrap.is-steps .role-caret { display: inline-grid; place-items: center; width: 1rem; height: 1rem; margin: 0; color: var(--text-1); }
html[data-ui="new"] .crm .role-row-wrap.is-steps .role-caret .ic { display: none; }
html[data-ui="new"] .crm .role-row-wrap.is-steps .role-caret::before {
  content: ""; display: block; width: .4rem; height: .4rem; margin-right: .1333rem;
  border-right: .1333rem solid currentColor; border-bottom: .1333rem solid currentColor; transform: rotate(-45deg);
}
html[data-ui="new"] .crm .role-row-wrap.is-steps .role-sum-label { font-size: var(--fs-ui); font-weight: 600; color: var(--text-1); }
html[data-ui="new"] .crm .role-steps-sum-sub { font-size: var(--fs-meta); font-weight: 500; color: var(--text-3); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
html[data-ui="new"] .crm .role-steps-gap {
  margin-left: auto; flex: none; padding: .0667rem .6rem; border-radius: 62.5rem; line-height: 1.3333rem;
  background: var(--ocker-surface); color: var(--ocker-text); font-size: var(--fs-label); font-weight: 600; font-variant-numeric: tabular-nums;
}
html[data-ui="new"] .crm .role-steps-gap.is-ok { background: var(--bg-surface-3); color: var(--text-2); }
html[data-ui="new"] .crm .role-row-wrap.is-steps > .opp-role-card > .role-body { padding-top: .8rem; }
/* Projektmaske: kein Rahmen „Rollen". Die Karten gehen ueber die volle Panelbreite wie in der
   Vorlage — die Lesebreite --fw-max (45rem) der alten Schrittmaske gilt fuer Formularfelder,
   nicht fuer die Rollenliste. */
html[data-ui="new"] .crm [data-fw-section]:has(> .fw-sec-body .pm-roles-steps) { --fw-max: none; }
html[data-ui="new"] .crm .pm-roles-steps { --fw-max: none; display: flex; flex-direction: column; align-items: stretch; gap: .9333rem; }
/* „+ Rolle": Knopf 13/600, Rand, Radius 8, Innen 7/12, Plus als Symbol. */
html[data-ui="new"] .crm .role-steps-add {
  display: inline-flex; align-items: center; gap: .4667rem; margin: 0 0 .9333rem; padding: .4667rem .8rem;
  border: .0667rem solid var(--border-strong); border-radius: var(--r-md); background: var(--bg-surface);
  color: var(--text-1); font: inherit; font-size: var(--fs-meta); font-weight: 600; line-height: 1.2; cursor: pointer;
}
html[data-ui="new"] .crm .role-steps-add:hover { background: var(--bg-surface-2); }
html[data-ui="new"] .crm .role-steps-add:focus-visible { outline: .1333rem solid var(--focus); outline-offset: .1333rem; }
/* Hinweis: Grund surface-3, Radius 10, Innen 10/12, Schrift 13, Symbol 16. */
html[data-ui="new"] .crm .role-steps-lead-hint {
  display: flex; align-items: flex-start; gap: .6667rem; margin: 0 0 .9333rem; padding: .6667rem .8rem;
  border-radius: var(--r-lg); background: var(--bg-surface-3); color: var(--text-2); font-size: var(--fs-meta); line-height: 1.45;
}
html[data-ui="new"] .crm .role-steps-lead-hint strong { color: var(--text-1); font-weight: 700; }
html[data-ui="new"] .crm .role-steps-lead-hint .ic { flex: none; color: var(--text-2); }
html[data-ui="new"] .crm .role-steps-empty { margin: 0 0 .9333rem; font-size: var(--fs-body); color: var(--text-2); }
html[data-ui="new"] .crm .role-steps-empty strong { color: var(--text-1); font-weight: 600; }

/* PR1.736-Nachzug — MA-Liste: das Bild liegt ueber der neutralen Fotoflaeche (Silhouette);
   faellt es aus, bleibt die Silhouette stehen, nie Initialen. */
.crm .emp-avatar > .emp-photo { position: absolute; inset: 0; }

/* Nachzug 06.11.2026 — Kopf ohne Kunde / Leitung fehlt: Gebaeude bzw. Silhouette statt „?". */
.crm .dk-bild-leer .ic, .crm .sbk-bild-leer .ic { width: 55%; height: 55%; color: var(--text-3); }
.crm .eorg-lead-ph .emp-avatar-silhouette .ic { width: 60%; height: 60%; }

/* ── PR1.721 (Ticket 1027) — KI-Hinweis zur Lage: Karte in der Kundenakte (Vorlage W2) und Zeichen
   am Kunden (W1). Violett = KI-Hinweis, nie Lage-Farbe. Masse: Prototyp gruppen.html x 4/3,
   auf die Skala gerundet (Text 12.5 → --fs-section, Woraus 11.5 → --fs-body). Ohne Motion. */
.crm {
  --kh-bg: rgb(247, 244, 255);
  --kh-line: rgb(220, 210, 255);
  --kh-mark: rgb(124, 92, 224);
  --kh-on-mark: rgb(255, 255, 255);
  --kh-btn-bg: rgb(255, 255, 255);
  --kh-btn-line: rgb(201, 210, 222);
  --kh-ok-bg: rgb(231, 247, 239);
  --kh-ok-line: rgb(63, 191, 138);
  --kh-ok-text: rgb(16, 107, 69);
}
.crm.dark, html[data-theme="dark"] .crm {
  --kh-bg: color-mix(in srgb, var(--kh-mark) 14%, var(--bg-surface));
  --kh-line: color-mix(in srgb, var(--kh-mark) 45%, var(--bg-surface));
  --kh-btn-bg: var(--bg-surface-2);
  --kh-btn-line: var(--border-strong);
  --kh-ok-bg: color-mix(in srgb, var(--kh-ok-line) 18%, var(--bg-surface));
  --kh-ok-text: color-mix(in srgb, var(--kh-ok-line) 70%, var(--text-1));
}
.crm .kh-slot { margin-bottom: var(--s-4); }
.crm .kh-slot:empty { display: none; }
.crm .kh-karte {
  padding: .8667rem 1.0667rem; font-size: var(--fs-section); line-height: 1.45; color: var(--text-1);
  background: var(--kh-bg); border: .0667rem solid var(--kh-line); border-radius: .8667rem;
}
.crm .kh-text { margin: 0; overflow-wrap: anywhere; }
.crm .kh-text b { font-weight: 700; }
.crm .kh-q {
  display: inline-grid; place-items: center; width: 1.6rem; height: 1.6rem; margin-right: var(--s-2);
  margin-block: -.3333rem; vertical-align: middle; color: var(--kh-on-mark); background: var(--kh-mark); border-radius: 50%;
}
.crm .kh-woher { margin: .3333rem 0 0; font-size: var(--fs-body); color: var(--text-3); }
.crm .kh-btns { display: flex; flex-wrap: wrap; gap: var(--s-2); margin-top: .7333rem; }
.crm .kh-btn {
  display: inline-flex; align-items: center; gap: .2667rem;
  padding: .3333rem .8667rem; font: 500 var(--fs-section)/1.4 var(--f-sans); color: var(--text-1);
  background: var(--kh-btn-bg); border: .0667rem solid var(--kh-btn-line); border-radius: .7333rem; cursor: pointer;
}
.crm .kh-btn:hover:not(:disabled):not(.is-ok) { border-color: var(--kh-mark); }
.crm .kh-btn:focus-visible { outline: .1334rem solid var(--focus); outline-offset: .1334rem; }
.crm .kh-btn:disabled { cursor: progress; opacity: .7; }
.crm .kh-btn.is-ok { color: var(--kh-ok-text); background: var(--kh-ok-bg); border-color: var(--kh-ok-line); }
/* Zeichen am Kunden (W1): r13 + Rand 2 im Prototyp → Ø 35, unten links ueber dem Logo-Rand. */
.crm .kh-mark {
  display: inline-grid; place-items: center; width: 2.4889rem; height: 2.4889rem; box-sizing: border-box; padding: .1778rem;
  /* Weisser Ring als Innenschatten statt border: der Browser rundet border auf ganze px (2,67 → 2). */
  color: var(--kh-on-mark); background: var(--kh-mark) content-box; box-shadow: inset 0 0 0 .1778rem var(--kh-on-mark); border: 0; border-radius: 50%;
}
/* Sterne nach Vorlage (11 bzw. 14 Prototyp-px x 4/3): 14,67 → 15 px im Kreis, 18,67 → 19 px im Zeichen. */
.crm .kh-q .ic { width: 1rem; height: 1rem; }
.crm .kh-mark .ic { width: 1.2444rem; height: 1.2444rem; }
/* ── PR1.722 — Karte „Mail" auf der Kundenseite (Mail auf den Kunden ziehen) ──
   Bildsprache der Akte (W4/W5): grauer Nebentext, halbfette Titelzeile, Knopfreihe links.
   Ziehen ueber der Seite: nur Rahmenfarbe, keine Bewegung (taeglich genutzt → kein Motion). */
.crm .crm-km { border: .0625rem dashed var(--border-strong); }
.crm .crm-km.is-dragover { border: .0625rem solid var(--primary); box-shadow: 0 0 0 .125rem var(--focus); }
.crm .crm-km .section-h h3 { display: inline-flex; align-items: center; gap: var(--s-2); }
.crm .crm-km-badge { font-weight: 500; }
.crm .crm-km-muted { font-size: var(--fs-meta); color: var(--text-2); overflow-wrap: anywhere; }
.crm .crm-km-empty { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-2) var(--s-3); }
.crm .crm-km-loading-text { font-size: var(--fs-body); color: var(--text-2); }
.crm .crm-km-draft { display: flex; flex-direction: column; gap: var(--s-3); min-width: 0; }
.crm .crm-km-head { display: flex; align-items: flex-start; gap: var(--s-2); color: var(--text-2); }
.crm .crm-km-head-text { min-width: 0; }
.crm .crm-km-subject { font-size: var(--fs-body); font-weight: 600; color: var(--text-1); overflow-wrap: anywhere; }
.crm .crm-km-summary { margin: 0; font-size: var(--fs-body); color: var(--text-1); line-height: 1.5; overflow-wrap: anywhere; }
.crm .crm-km-sub { font-size: var(--fs-meta); font-weight: 600; color: var(--text-2); margin-bottom: var(--s-1); }
.crm .crm-km-list { margin: 0; padding-left: var(--s-4); font-size: var(--fs-body); color: var(--text-1); overflow-wrap: anywhere; }
.crm .crm-km-list li + li { margin-top: var(--s-1); }
.crm .crm-km-attach {
  display: inline-flex; align-items: center; gap: var(--s-1); align-self: flex-start; max-width: 100%;
  padding: 0; border: 0; background: none; color: var(--primary-text); font: inherit; font-size: var(--fs-body);
  cursor: pointer; text-align: left; overflow-wrap: anywhere;
}
.crm .crm-km-attach:hover span { text-decoration: underline; }
.crm .crm-km-attach:focus-visible { outline: .125rem solid var(--focus); outline-offset: .125rem; }
.crm .crm-km-actions { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.crm .crm-km-error { display: flex; flex-direction: column; gap: var(--s-2); }
.crm .crm-km-error-title { font-size: var(--fs-body); font-weight: 600; color: var(--text-1); }
/* PR1.728 — weitergeleitete Mails: Entwurf leuchtet (Rahmen + zarte Flaeche in Primaerfarbe, keine Seitenkante, keine Animation) */
.crm .crm-km.has-weiter { border: .0625rem solid var(--primary); }
.crm .crm-km-weiter-list { display: flex; flex-direction: column; gap: var(--s-4); margin-bottom: var(--s-4); }
.crm .crm-km-weiter { padding: var(--s-3); border-radius: var(--r-md); background: color-mix(in srgb, var(--primary) 6%, transparent); }
.crm .crm-mok { border: .0625rem solid var(--primary); }
.crm .crm-mok .section-h h3 { display: inline-flex; align-items: center; gap: var(--s-2); }
.crm .crm-mok-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.crm .crm-mok-item { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: var(--s-2) var(--s-4); padding: var(--s-3) 0; }
.crm .crm-mok-item + .crm-mok-item { border-top: .0625rem solid var(--border); }
.crm .crm-mok-text { flex: 1 1 20rem; min-width: 0; }
/* Leerer Platzhalter erzeugt keine Lücke im Spaltenabstand (keine Zusatzfläche ohne Mails). */
.crm [data-mail-ohne-kunde]:empty { display: none; }
.crm .crm-mok-summary { margin: var(--s-1) 0 0; font-size: var(--fs-body); color: var(--text-1); line-height: 1.5; overflow-wrap: break-word; }
.crm .crm-mok-mehr { align-self: flex-start; margin-top: var(--s-2); }
.crm .crm-mok-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); flex: 0 1 auto; }
.crm .crm-mok-select { min-width: 14rem; max-width: 100%; }

/* PR1.800 (Ticket 1127) — Pflegeliste „Delivery-Verantwortliche ohne Person" (Admin → Zuordnungen). */
.crm .delivery-care { display: flex; flex-direction: column; gap: var(--s-2); margin-top: var(--s-4); }
.crm .delivery-care-summary { margin: 0; }
.crm .delivery-care-details > summary { cursor: pointer; font-size: var(--fs-body); color: var(--text-2); }
.crm .delivery-care-list { list-style: none; margin: var(--s-2) 0 0; padding: 0; display: flex; flex-direction: column; gap: var(--s-1); }
.crm .delivery-care-list li { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--s-2); }
.crm .delivery-care-text { font-size: var(--fs-body); color: var(--text-3); overflow-wrap: anywhere; }

/* PR1.803 (Issue 1130) — Abschnitt „Mit Beteiligung" unter Opp- und Projektliste (CC-Filter aktiv).
   Ruhig: Kopf in Gruppenzeilen-Optik, eingeklappt; Zeilen kompakt, Grund grau. Keine Motion. */
.crm .mit-beteiligung { border: 0.0625rem solid var(--border); border-radius: var(--r-sm); background: var(--bg-surface); }
.crm .mit-beteiligung > .mb-kopf {
  display: flex; align-items: baseline; gap: var(--s-2); cursor: pointer; list-style: none;
  padding: var(--s-2) 0.875rem; font-size: var(--fs-label); font-weight: 500; color: var(--text-2);
  background: var(--bg-surface-2); border-radius: var(--r-sm);
}
.crm .mit-beteiligung > .mb-kopf::-webkit-details-marker { display: none; }
.crm .mit-beteiligung > .mb-kopf::before { content: "›"; display: inline-block; width: 0.75rem; color: var(--text-3); }
.crm .mit-beteiligung[open] > .mb-kopf::before { transform: rotate(90deg); }
.crm .mit-beteiligung[open] > .mb-kopf { border-bottom: 0.0625rem solid var(--border); border-radius: var(--r-sm) var(--r-sm) 0 0; }
.crm .mit-beteiligung > .mb-kopf:hover { color: var(--text-1); }
.crm .mit-beteiligung > .mb-kopf:focus-visible { outline: 0.125rem solid var(--focus); outline-offset: 0.125rem; }
.crm .mb-zahl { font-variant-numeric: tabular-nums; color: var(--text-3); }
.crm .mb-hinweis { margin-left: auto; font-size: var(--fs-meta); font-weight: 400; color: var(--text-3); }
.crm .mb-liste { list-style: none; margin: 0; padding: 0; }
.crm .mb-liste li + li { border-top: 0.0625rem solid var(--border); }
.crm .mb-zeile {
  display: grid; grid-template-columns: minmax(0, 2.2fr) minmax(0, 1.6fr) minmax(0, 2fr) minmax(0, 1.4fr);
  gap: var(--s-3); align-items: center; width: 100%; min-height: calc(var(--s-10) + var(--s-1));
  padding: 0 0.875rem; background: transparent; border: 0; text-align: left; cursor: pointer;
  font: inherit; color: var(--text-1);
}
.crm .mb-zeile:hover { background: var(--bg-hover); }
.crm .mb-zeile:focus-visible { outline: 0.125rem solid var(--focus); outline-offset: -0.125rem; }
.crm .mb-zeile > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.crm .mb-name { font-weight: 500; }
.crm .mb-kunde, .crm .mb-grund, .crm .mb-fuehrend { color: var(--text-2); font-size: var(--fs-meta); }
.crm .mb-fuehrend b { font-weight: 500; color: var(--text-1); }
.crm .ccc-kpi-zusatz { display: block; margin-top: 0.125rem; font-size: var(--fs-meta); color: var(--text-3); white-space: nowrap; }

/* ── PR1.831 — Pools Extern / Intern / Shoring (Mitarbeiter, Einsatzplan, Maske) ──
   Ruhig: Blockform wie die CC-Karten (.eorg-card), graue Zahl, keine neue Farbe. */
.crm .emp-pools-host { margin-top: var(--s-4); }
.crm .pool-section-head { display: flex; align-items: baseline; flex-wrap: wrap; gap: var(--s-2) var(--s-3); margin-bottom: var(--s-3); }
.crm .pool-section-title { margin: 0; font-size: var(--fs-section); font-weight: 600; color: var(--text-1); }
.crm .pool-section-sub { margin: 0; font-size: var(--fs-meta); color: var(--text-3); }
.crm .pool-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr)); gap: var(--s-3); }
.crm .pool-block { display: flex; flex-direction: column; gap: var(--s-2); min-width: 0; padding: 1rem; background: var(--bg-card); border: 0.0625rem solid var(--border); border-radius: var(--r-md); }
.crm .pool-head { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--s-1) var(--s-2); align-items: start; }
.crm .pool-title { margin: 0; font-size: var(--fs-body); font-weight: 600; color: var(--text-1); }
.crm .pool-count { margin-left: var(--s-1); font-weight: 500; color: var(--text-3); font-variant-numeric: tabular-nums; }
.crm .pool-hint { grid-column: 1 / -1; grid-row: 2; margin: 0; font-size: var(--fs-meta); color: var(--text-3); }
.crm .pool-actions { grid-column: 2; grid-row: 1; display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--s-1); }
.crm .pool-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.crm .pool-person { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: var(--s-2); padding: var(--s-2) 0; border-top: 0.0625rem solid var(--border); }
.crm .pool-person:first-child { border-top: 0; }
.crm .pool-av { display: inline-flex; }
.crm .pool-ident { display: flex; flex-direction: column; min-width: 0; }
.crm .pool-name { all: unset; cursor: pointer; font-size: var(--fs-ui); font-weight: 500; color: var(--text-1); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.crm .pool-name:hover { text-decoration: underline; }
.crm .pool-name:focus-visible { outline: 0.125rem solid var(--focus); outline-offset: 0.125rem; border-radius: var(--radius-sm); }
.crm .pool-note { font-size: var(--fs-meta); color: var(--text-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.crm .pool-proj { font-size: var(--fs-meta); color: var(--text-2); white-space: nowrap; }
.crm .pool-proj.is-none { color: var(--text-3); }
.crm .pool-empty, .crm .pool-error { margin: 0; font-size: var(--fs-meta); color: var(--text-3); }
.crm .pool-skel { height: 2rem; border-radius: var(--radius-sm); background: var(--bg-surface-2); }
/* Platzhalterbild: das Pool-Wort mittig statt der Silhouette (ab 44 px, darunter nur Silhouette). */
.crm :is(.emp-avatar, .person-foto).is-pool { position: relative; overflow: hidden; }
.crm :is(.emp-avatar, .person-foto).is-pool > .emp-avatar-silhouette { visibility: hidden; }
.crm .emp-avatar-pool { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: var(--text-2); font-size: var(--fs-label); font-weight: 600; line-height: 1; letter-spacing: 0; }
.crm .crm-ep-pool { margin-left: var(--s-1); }
.crm .crm-ep-sep-hint { margin-left: var(--s-1); font-weight: 400; font-size: var(--fs-meta); color: var(--text-3); }
/* Anlage-Maske */
.crm .ppd-form { display: flex; flex-direction: column; gap: var(--s-3); }
.crm .ppd-pools { margin: 0; padding: 0; border: 0; }
.crm .ppd-pools legend, .crm .ppd-field label { display: block; margin-bottom: var(--s-1); font-size: var(--fs-label); font-weight: 600; color: var(--text-2); }
.crm .ppd-pool-row { display: flex; flex-wrap: wrap; gap: var(--s-1); }
.crm .ppd-pool-opt { display: inline-flex; align-items: center; gap: var(--s-1); padding: var(--s-1) var(--s-3); border: 0.0625rem solid var(--border); border-radius: var(--r-md); cursor: pointer; font-size: var(--fs-ui); color: var(--text-1); }
.crm .ppd-pool-opt.is-on { border-color: var(--ad-blue-700); background: var(--tint-blue); }
.crm .ppd-pool-opt:focus-within { outline: 0.125rem solid var(--focus); outline-offset: 0.125rem; }
.crm .ppd-hint { margin: var(--s-1) 0 0; font-size: var(--fs-meta); color: var(--text-3); }
.crm .ppd-names { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 10rem), 1fr)); gap: var(--s-3); }
.crm .ppd-field { display: flex; flex-direction: column; min-width: 0; }
.crm .ppd-field .crm-input { width: 100%; }
.crm .ppd-opt { font-weight: 400; color: var(--text-3); }
.crm .ppd-err { margin-top: var(--s-1); font-size: var(--fs-meta); color: var(--danger, var(--ad-red-700)); }


/* PR1.875 Nachzug — Foto-Ebene der Personen-Bubble (ma-photo-layer.js). Die Regel stand nur in
   style.css, das die neue Ansicht seit PR1.875 nicht mehr lädt; der Klassenname kommt im Code nur
   über eine Konstante vor, deshalb fand css-geteilt.mjs sie nicht. Ohne sie rendert das Foto
   ungestylt in voller Größe (512 px) über der Seite. Inhalt identisch zu style.css. */
.ma-photo-layer {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    object-fit: cover; object-position: center;
    border-radius: inherit;
    z-index: 1;
    pointer-events: none;
    display: block;
    max-width: none;
}
.has-ma-photo > .emp-dot,
.has-ma-photo > .emp-avatar-edit,
.has-ma-photo > [class*="badge"],
.has-ma-photo > [class*="dot"] { z-index: 2; }

/* ════════════════════════════════════════════════════════════════════════════
   PR1.882 — Hinweis „Stand von HH:MM · wird aktualisiert" (Sofortstart)
   ────────────────────────────────────────────────────────────────────────────
   Ruhig: grauer Meta-Text links neben der Glocke, keine Animation (jeder Start).
   Im Fehlerfall ein Knopf in derselben Form (Fokusring wie die Outbox-Anzeige).
   Nur Tokens, em und rem (ui-craft-Ratchet, Konvention 21).
   ════════════════════════════════════════════════════════════════════════════ */
.crm .bestand-hinweis-anker { display: inline-flex; min-width: 0; }
.crm .bestand-hinweis {
  font-size: var(--fs-meta);
  color: var(--text-3);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  /* Platz fuer den ganzen Fehlersatz samt „Erneut versuchen" (1280 mit offener Leiste). */
  max-width: 36em;
  padding: 0.3em 0.85em;
  border-radius: var(--r-xl);
}
.crm button.bestand-hinweis {
  background: transparent;
  border: 0.0625rem solid var(--border);
  color: var(--text-2);
  cursor: pointer;
  font: inherit;
  font-size: var(--fs-meta);
}
.crm button.bestand-hinweis:hover { color: var(--text-1); }
.crm button.bestand-hinweis:focus-visible {
  outline: 0.125rem solid var(--primary);
  outline-offset: 0.125rem;
}
.crm .bestand-hinweis[hidden] { display: none; }


/* ════════════════════════════════════════════════════════════════════════════
   Admin › Freigaben (admin-freigaben.js) — Vier-Augen-Prinzip für Massenlöschungen.
   Selten, im Ausnahmefall: keine Bewegung, Klartext, sichtbarer Fokus.
   Zeilen sind Knöpfe (volle Breite), das Detail ersetzt die Liste.
   Nur Tokens, em und rem (ui-craft-Ratchet, Konvention 21).
   ════════════════════════════════════════════════════════════════════════════ */
.crm .fgb { display: flex; flex-direction: column; gap: 0.75rem; max-width: 64rem; min-width: 0; }
.crm .fgb-kopf { display: flex; flex-direction: column; gap: 0.25rem; }
.crm .fgb-titel { margin: 0; font-size: var(--fs-title); font-weight: 700; line-height: 1.4; color: var(--text-1); }
.crm .fgb-hilfe { margin: 0; max-width: 48rem; font-size: var(--fs-ui); line-height: 1.5; color: var(--text-2); }
.crm .fgb-abschnitt { margin: 0.75rem 0 0; font-size: var(--fs-ui); font-weight: 600; color: var(--text-2); }
.crm .fgb-liste { list-style: none; margin: 0; padding: 0; border: 0.0625rem solid var(--border); border-radius: var(--r-md); background: var(--bg-card); }
.crm .fgb-liste > li + li { border-top: 0.0625rem solid var(--border-light); }
.crm .fgb-zeile { display: flex; align-items: flex-start; gap: 1rem; width: 100%; padding: 0.75rem 1rem; border: 0; background: transparent; font: inherit; color: var(--text-1); text-align: left; cursor: pointer; }
.crm .fgb-zeile:hover { background: var(--bg-hover); }
.crm .fgb-zeile:focus-visible,
.crm .fgb-titel:focus-visible,
.crm .fgb-zurueck:focus-visible,
.crm .fgb-knoepfe .btn:focus-visible { outline: 0.125rem solid var(--focus); outline-offset: 0.125rem; }
.crm .fgb-zeile-haupt { display: flex; flex-direction: column; gap: 0.15rem; flex: 1 1 auto; min-width: 0; }
.crm .fgb-zeile-titel { font-size: var(--fs-body); font-weight: 600; }
.crm .fgb-zeile-meta { font-size: var(--fs-meta); color: var(--text-2); overflow-wrap: anywhere; }
.crm .fgb-zeile-begr { font-size: var(--fs-meta); color: var(--text-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.crm .fgb-status { flex: none; padding: 0.15rem 0.6rem; border-radius: var(--r-xl); font-size: var(--fs-label); font-weight: 600; line-height: 1.5; color: var(--text-1); white-space: nowrap; }
.crm .fgb-status-warn { background: var(--tint-warn); }
.crm .fgb-status-info { background: var(--tint-blue); }
.crm .fgb-status-ok { background: var(--tint-green); }
.crm .fgb-status-neutral { background: var(--bg-surface-2); color: var(--text-2); }
.crm .fgb-leer { padding: 1.25rem 1rem; border: 0.0625rem dashed var(--border); border-radius: var(--r-md); }
.crm .fgb-leer p { margin: 0; }
.crm .fgb-leer-titel { font-size: var(--fs-body); font-weight: 600; color: var(--text-1); }
.crm .fgb-zustand { display: flex; flex-direction: column; align-items: flex-start; gap: 0.75rem; padding: 0.5rem 0; }
.crm .fgb-fehler { margin: 0; font-size: var(--fs-ui); color: var(--text-1); padding: 0.6rem 0.8rem; border: 0.0625rem solid var(--danger); background: var(--tint-red); border-radius: var(--r-sm); }
.crm .fgb-ergebnis { margin: 0; padding: 0.6rem 0.8rem; font-size: var(--fs-ui); color: var(--text-1); background: var(--tint-blue); border-radius: var(--r-sm); }
.crm .fgb-detail { display: flex; flex-direction: column; gap: 0.6rem; min-width: 0; }
.crm .fgb-zurueck { align-self: flex-start; }
.crm .fgb-detail-kopf { display: flex; align-items: center; gap: 0.75rem; flex-wrap: wrap; }
.crm .fgb-meta { margin: 0; font-size: var(--fs-meta); color: var(--text-2); overflow-wrap: anywhere; }
.crm .fgb-unter { margin: 0.5rem 0 0; font-size: var(--fs-ui); font-weight: 600; color: var(--text-1); }
.crm .fgb-begruendung { margin: 0; max-width: 48rem; font-size: var(--fs-body); line-height: 1.5; color: var(--text-1); white-space: pre-wrap; overflow-wrap: anywhere; }
.crm .fgb-knoepfe { display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; margin-top: 0.25rem; }
.crm .fgb-knoepfe .btn:disabled { opacity: 0.45; cursor: not-allowed; }
.crm .fgb-eigen { margin: 0; font-size: var(--fs-meta); color: var(--text-2); }
.crm .fgb-namen { margin: 0; padding: 0 0 0 2.25rem; columns: 2 18rem; column-gap: 2rem; font-size: var(--fs-ui); color: var(--text-1); }
.crm .fgb-namen > li { break-inside: avoid; padding: 0.2rem 0; }
.crm .fgb-name { overflow-wrap: anywhere; }
.crm .fgb-id { margin-left: 0.5rem; font-family: var(--font-num); font-size: var(--fs-label); color: var(--text-3); overflow-wrap: anywhere; }
.crm .fgb-grund { display: block; font-size: var(--fs-meta); color: var(--text-2); }