/* 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
   ────────────────────────────────────────────────────────────── */


.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;
  /* 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;
  /* 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) */
  --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 */
  --t-fast: 120ms cubic-bezier(.2,.6,.2,1);
  --t-med:  160ms cubic-bezier(.2,.6,.2,1);
  --t-slow: 220ms cubic-bezier(.2,.6,.2,1);
  --ease-out: cubic-bezier(.2,.7,.3,1);
  /* 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; }

.crm.dark , html[data-theme="dark"] .crm {
  --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;
  --pythia-terra: var(--ad-orange);
  --pythia-terra-grund: var(--tint-orange);
  --tint-green: #1B2D0A;
  --tint-turq: #0E2E26;
  --tint-warn: #3A2A1B;
  --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; }

@media (prefers-reduced-motion: reduce) {
  .crm *, .crm *::before, .crm *::after { transition: none !important; animation: none !important; }
}

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

/* ============== APP SHELL ============== */
.crm .app-shell {
  display: grid;
  grid-template-columns: minmax(0, 240px) 1fr;
  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, 232px) 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, 240px) 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: 14px 12px 10px;
  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: 12px 10px; 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 14px; 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;
  opacity: .55;
  padding: 12px 8px 6px;
}
/* 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-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); }

/* PR1.223 #383 — Unterebene „Aktuell | Archiv" unter Opportunities und Projekte.
   Dauerhaft sichtbar statt aufklappbar: das Archiv ist damit EIN Klick, und es entsteht
   keine Aufklapp-Semantik, die hier nur Aufwand ohne Gegenwert waere. Bewusst ohne
   eigene Bewegung — taegliche Navigation, Motion-Budget null; die Farbblende erbt sie
   von .sb-item.

   Die Masse stehen bewusst in `rem`/`em` statt in rohen px: in einer Seitenleiste soll
   die Unterebene mit der Schriftgroesse des Nutzers mitwachsen, und der ui-craft-Ratchet
   (`raw-px`, Baseline 683) darf durch neue Regeln nicht steigen. */
.crm .sb-sub-list {
  display: flex; flex-direction: column;
  padding: 0 0 .25rem;
}
.crm .sb-sub {
  padding: .25rem .625rem .25rem 2.25rem;
  border-radius: var(--r-sm);
  font-size: var(--fs-meta);
  font-weight: 500;
  color: rgba(255,255,255,.62);
  background: transparent;
  border: 0;
  font-family: inherit;
  text-align: left;
  cursor: pointer;
  transition: background var(--t-fast), color var(--t-fast);
}
.crm .sb-sub:hover { background: rgba(255,255,255,.07); color: white; }
.crm .sb-sub.active { color: white; font-weight: 600; }
.crm .shell-attio .sb-sub { color: var(--text-2); }
.crm .shell-attio .sb-sub:hover { background: var(--bg-hover); color: var(--text-1); }
.crm .shell-attio .sb-sub.active { color: var(--ad-blue); }

.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%;
  background: var(--ad-violet);
  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);
}
.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); }
.crm .btn-violet { background: var(--ad-violet); color: white; border-color: var(--ad-violet); }
.crm .btn-violet:hover { background: var(--ad-violet-600); border-color: var(--ad-violet-600); }
.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(--tint-warn);   color: var(--ad-orange-900); border-color: rgba(255,152,104,.25); }
.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. */
.crm.dark .bdg-warn    , html[data-theme="dark"] .crm .bdg-warn    { color: var(--ad-orange); }

/* 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-skeleton-label { display: block; margin-bottom: .6rem; color: var(--text-3); font-size: var(--fs-ui); }
.crm .skel-row {
  height: 1.6rem; margin-bottom: .5rem;
  border-radius: .35rem;
  background: var(--bg-surface-3);
  animation: skel-pulse 1.4s ease-in-out infinite;
}
.crm .skel-row:last-child { margin-bottom: 0; }
@keyframes skel-pulse { 0%, 100% { opacity: .35; } 50% { opacity: .7; } }
/* Wer Bewegung reduziert haben will, bekommt einen ruhigen Platzhalter statt Gepulse. */
@media (prefers-reduced-motion: reduce) {
  .crm .skel-row { animation: none; opacity: .5; }
}
.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-left: 3px solid var(--ad-blue);
  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);
}
.crm .kan-card:hover { transform: translateY(-1px); box-shadow: var(--shadow-2); }
.crm .kan-card.k-prop    { border-left-color: var(--ad-violet); }
.crm .kan-card.k-running { border-left-color: var(--ad-orange); }
.crm .kan-card.k-won     { border-left-color: var(--ad-turq); }
/* PR1.327 (#537) — verloren bekommt einen eigenen Rand. Bis hierher war der
   Lost-Zweig im Kartenbauer ein toter Ternaer (`: '' : ''`): verloren und irrelevant
   sahen identisch aus, obwohl das eine ein ERGEBNIS ist und das andere eine
   Aussortierung. Klassisch war der Unterschied die ganze Zeit sichtbar
   (`colors.Lost = --danger`, views/opportunities.js).
   `--ad-red-700` statt `--danger`: letzteres ist im .crm-Scope NUR im Dark-Block
   belegt und erbt im Light-Modus aus dem Legacy-:root — eine Farbe, die diese Shell
   nicht kontrolliert. Die Status-Pille bleibt neutral (components/status-pill.js,
   Palette-Rollen-Lock PR4.15); unterschieden wird nur im Brett. */
.crm .kan-card.k-lost    { border-left-color: var(--ad-red-700); }
/* PR1.367 (#581) — Projekt-Brett: Randfarbe je Status, dieselbe Palette wie die LEDs im
   Spaltenkopf (crm-project-list.js). Planung behaelt den Standardrand (--ad-blue). */
.crm .kan-card.k-active  { border-left-color: var(--ad-turq); }
.crm .kan-card.k-hold    { border-left-color: var(--ad-orange); }
.crm .kan-card.k-closed  { border-left-color: var(--text-3); }

/* 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;
}
.crm .kan-card { cursor: pointer; }
.crm .kan-card[draggable="true"] { cursor: grab; }
.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(--ad-violet); background-size: cover;
  font-family: var(--f-cond); font-size: var(--fs-label); font-weight: 500; color: white;
}
.crm .kan-card .kc-av:first-child { margin-left: 0; }
.crm .kan-card .kc-av-1 { background-color: var(--ad-turq-700); }
.crm .kan-card .kc-av-2 { background-color: var(--ad-orange-700); }
.crm .kan-card .kc-av-3 { background-color: var(--ad-blue); }
.crm .kan-card .kc-av-more { background-color: var(--bg-surface-3); color: var(--text-2); }
.crm .kan-card .kc-av[data-ma-photo-done] { color: transparent; }
.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); }

.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); }
.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); }
.crm .opp-kz.is-alert .opp-kz-num { color: var(--danger); }
.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(--tint-warn);
  border: 1px solid rgba(255,152,104,.4);
  border-left: 3px solid var(--ad-orange);
  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(--ad-orange-900); }
.crm.dark .warn-box b , html[data-theme="dark"] .crm .warn-box b { color: var(--ad-orange); }

/* ============== 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 ============== */
@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; }

/* ============== 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;
}
@media (max-width: 64rem) {
  .crm .record-grid.record-grid-3 { grid-template-columns: minmax(0, 1fr); }
}
/* 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; }
/* 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; }
/* `--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; transition: none; }
.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; }

/* ============== 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 ───────── */
/* Page-mount fade-up for routes */
.crm .app-canvas > * { animation: routeIn .35s var(--ease-out); }
@keyframes routeIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* Stagger children of common containers */
.crm .section-card { animation: routeIn .4s var(--ease-out) both; }
.crm .kanban-col .kanban-card { animation: cardIn .45s var(--ease-out) both; }
.crm .kanban-col .kanban-card:nth-child(2) { animation-delay: .05s; }
.crm .kanban-col .kanban-card:nth-child(3) { animation-delay: .10s; }
.crm .kanban-col .kanban-card:nth-child(4) { animation-delay: .15s; }
.crm .kanban-col .kanban-card:nth-child(5) { animation-delay: .20s; }
@keyframes cardIn { from { opacity: 0; transform: translateY(10px) scale(.98); } to { opacity: 1; transform: none; } }
.crm .kanban-card { transition: transform .18s var(--ease-out), box-shadow .18s ease, border-color .18s ease; cursor: grab; }
.crm .kanban-card:hover { transform: translateY(-3px); box-shadow: 0 10px 24px rgba(0,0,0,.10), 0 1px 2px rgba(0,0,0,.04); border-color: var(--border-strong); }
.crm .kanban-card:active { cursor: grabbing; transform: translateY(-1px) scale(.985); }

/* Table-row stagger + hover lift */
.crm .tbl tbody tr { animation: rowIn .35s var(--ease-out) both; }
.crm .tbl tbody tr:nth-child(2) { animation-delay: .04s; }
.crm .tbl tbody tr:nth-child(3) { animation-delay: .08s; }
.crm .tbl tbody tr:nth-child(4) { animation-delay: .12s; }
.crm .tbl tbody tr:nth-child(5) { animation-delay: .16s; }
.crm .tbl tbody tr:nth-child(6) { animation-delay: .20s; }
.crm .tbl tbody tr:nth-child(7) { animation-delay: .24s; }
.crm .tbl tbody tr:nth-child(8) { animation-delay: .28s; }
.crm .tbl tbody tr:nth-child(9) { animation-delay: .32s; }
@keyframes rowIn { from { opacity: 0; transform: translateX(-6px); } to { opacity: 1; transform: none; } }
.crm .tbl.tbl-clickable tbody tr { transition: background var(--t-fast), transform var(--t-fast); }
.crm .tbl.tbl-clickable tbody tr:hover { transform: translateX(3px); }

/* 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 .25s var(--ease-out), opacity .2s ease;
}
.crm .sb-item.active::before { opacity: .9; transform: scaleY(1); }
.crm .sb-item:hover { transform: translateX(2px); }
.crm .sb-item,.crm .sb-pill { transition: transform .15s var(--ease-out), background var(--t-fast); }
.crm .sb-pill:hover { transform: translateX(2px); }

/* KPI numbers — gentle count-in via opacity/translate */
.crm .kpi-value,.crm .kpi-num,.crm .stat-value,.crm .big-num {
  animation: kpiIn .55s var(--ease-out) both;
}
@keyframes kpiIn { from { opacity: 0; transform: translateY(6px); letter-spacing: -.04em; } to { opacity: 1; transform: none; letter-spacing: var(--ls-kpi); } }

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

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

/* Buttons — press feedback */
.crm .btn { transition: transform .12s var(--ease-out), background var(--t-fast), border-color var(--t-fast), box-shadow var(--t-fast); }
.crm .btn:hover:not(:disabled) { transform: translateY(-1px); }
.crm .btn:active:not(:disabled) { transform: translateY(0) scale(.985); }
.crm .btn-violet:hover { box-shadow: 0 8px 20px rgba(122,84,255,.22); }
.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 — subtle wiggle on hover */
.crm .avatar { transition: transform .2s var(--ease-out); }
.crm .avatar:hover { transform: scale(1.08) rotate(-3deg); }

/* Subtle gradient shimmer on the "save-pulse" save state */
.crm .save-pulse::after {
  content: ''; position: absolute; inset: 0; border-radius: inherit;
  background: linear-gradient(120deg, transparent 30%, rgba(255,255,255,.55) 50%, transparent 70%);
  animation: shimmer 2.4s ease-in-out infinite; pointer-events: none; mix-blend-mode: overlay;
}
@keyframes shimmer { 0% { transform: translateX(-100%); } 100% { transform: translateX(100%); } }
.crm .save-pulse { position: relative; overflow: hidden; }
/* ───────── /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;
}
.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;
  animation: popIn .14s ease-out;
}
@keyframes popIn { from { transform: translateY(-4px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
.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); }
.crm .kan-card.is-dragging { opacity: .55; transform: rotate(-1deg); }

/* 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); }

/* save-pulse */
.crm .save-pulse { box-shadow: 0 0 0 0 rgba(0,110,199,.45); animation: pulse 2.4s ease-out infinite; }
@keyframes pulse {
  0%   { box-shadow: 0 0 0 0 rgba(0,110,199,.4); }
  60%  { box-shadow: 0 0 0 12px rgba(0,110,199,0); }
  100% { box-shadow: 0 0 0 0 rgba(0,110,199,0); }
}

/* 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 .12s ease-out;
}
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
.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 .18s cubic-bezier(.2,.7,.3,1);
}
@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: 380px; 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; }

/* drawer */
.crm .drawer-veil { position: fixed; inset: 0; background: rgba(15,20,30,.32); z-index: 80; animation: fadeIn .14s ease-out; }
.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 .22s cubic-bezier(.2,.7,.3,1);
}
@keyframes drawerIn { from { transform: translateX(40px); opacity: 0; } to { transform: none; opacity: 1; } }
.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 .14s ease-out;
}
.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 .2s cubic-bezier(.2,.7,.3,1);
}
.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 */
.crm .toast {
  position: fixed; bottom: 22px; left: 50%; transform: translateX(-50%);
  z-index: 200;
  display: inline-flex; align-items: center; gap: 10px;
  padding: 10px 16px;
  background: var(--text-1); color: var(--bg-surface);
  border-radius: var(--r-md); box-shadow: 0 10px 30px rgba(0,0,0,.25);
  font-size: var(--fs-body); font-weight: 500;
  animation: toastIn .22s cubic-bezier(.2,.7,.3,1);
}
@keyframes toastIn { from { transform: translate(-50%, 18px); opacity: 0; } to { transform: translate(-50%, 0); opacity: 1; } }
.crm .toast-pip { width: 8px; height: 8px; border-radius: 50%; background: var(--ad-green); }
.crm .toast-warn .toast-pip { background: var(--ad-orange); }

/* 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 .26s cubic-bezier(.2,.7,.3,1);
}
.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.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(--ad-orange-900); }
.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(--ad-orange); }
.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(--ad-orange-900); }
.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(--ad-orange); }
.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:#fff; 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(.2,.7,.3,1)); animation:kbFloat 4s ease-in-out infinite; }
.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:all var(--t-fast,.14s); }
.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 .cmdk-search input: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); }

/* 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;
  background: var(--ad-orange-700); 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
   ===================================================================
   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: 1024px) and (min-width: 769px) {
  .crm .app-shell ,
  .crm .app-shell.shell-hybrid ,
  .crm .app-shell.shell-attio { grid-template-columns: minmax(0, 64px) 1fr; }

  .crm .sidebar { padding-left: 6px; padding-right: 6px; }
  .crm .sb-brand-text ,
  .crm .sb-section ,
  .crm .sb-pill-list ,
  .crm .sb-user ,
  .crm .sb-search-label ,
  .crm .sb-search kbd ,
  .crm .sb-item > span:not(.sb-ic) { display: none; }

  .crm .sb-brand ,
  .crm .sb-search ,
  .crm .sb-item ,
  .crm .sb-foot { justify-content: center; }
  /* Avatar UND Zahnrad passen nicht nebeneinander auf 64px. Das Zahnrad bleibt: es ist
     der Auslöser des Konto-Menues und damit der einzige Abmelde-Weg — der Avatar ist
     nur Schmuck. Der Name steht weiterhin im aria-label des Knopfes. */
  .crm .sb-foot .sb-avatar { display: none; }
  .crm .sb-foot .sb-cog { margin-left: 0; }

  /* PR1.223 #383 — die Unterebene bleibt auf der Icon-Spalte bedienbar, nur enger. Sie
     wird NICHT wie die Beschriftungen der Hauptpunkte ausgeblendet: die tragen dort ihr
     Symbol weiter, „Aktuell/Archiv" hat keines und waere sonst gar nicht erreichbar. */
  .crm .sb-sub {
    padding: .2rem .125rem;
    font-size: var(--fs-label);
    text-align: center;
  }
}

@media (max-width: 768px) {
  .crm .app-shell ,
  .crm .app-shell.shell-hybrid ,
  .crm .app-shell.shell-attio { grid-template-columns: 1fr; position: relative; }

  .crm .sidebar {
    position: absolute; z-index: 60;
    top: 0; bottom: 0; left: 0;
    width: 240px; max-width: 82vw;
    background: var(--bg-shell);
    border-radius: var(--r-lg);
    transform: translateX(-102%);
    transition: transform var(--t-med) var(--ease-out);
  }
  .crm .app-shell.nav-open .sidebar { transform: none; box-shadow: var(--shadow-3); }
  .crm .shell-attio .sidebar { background: var(--bg-surface-2); }

  .crm .tb-nav-toggle { display: inline-flex; }
  /* 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;
  }
}

/* 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: 16rem; }
.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(--ad-orange-700); }
.crm .mv-dormant { background: var(--ad-red-700); }
.crm .mv-unknown { background: 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(--ad-orange-700); }
.crm .tbl-cust tbody tr.mv-lead-dormant > td:first-child { border-left-color: var(--ad-red-700); }
/* 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.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; } }

/* 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.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.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;
}

.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 {
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: .3rem 0;
  font-size: var(--fs-body);
}
.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.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-band {
  display: flex; align-items: center; gap: var(--s-4); padding: var(--s-4) var(--s-5); margin-bottom: var(--s-4);
  background: var(--tint-blue); border: .0625rem solid var(--border); border-radius: var(--r-xl);
}
.crm .crm-cd-logo {
  display: flex; align-items: center; justify-content: center; flex: 0 0 auto;
  width: 4.5rem; height: 4.5rem; 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); }
.crm .crm-cd-logo.is-loaded .crm-cd-logo-text { visibility: hidden; }
.crm .crm-cd-band-text { flex: 1; min-width: 0; }
.crm .crm-cd-title {
  margin: 0; font-size: var(--fs-title); line-height: 1.2; color: var(--ad-blue-700);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.crm .crm-cd-band-meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-1) var(--s-4); margin-top: var(--s-1); font-size: var(--fs-body); color: var(--text-2); }
.crm .crm-cd-pill {
  display: inline-flex; align-items: center; gap: .375rem; padding: .125rem .625rem; border-radius: 999rem;
  font-size: var(--fs-ui); font-weight: 500; color: var(--text-2); background: var(--bg-surface-2);
}
.crm .crm-cd-pill-active { color: var(--ad-green-900); background: var(--tint-green); }
.crm .crm-cd-pill-dot { width: .45rem; height: .45rem; border-radius: 50%; background: currentColor; }
.crm .crm-cd-flag { padding: .125rem .5rem; font-size: var(--fs-label); border: .0625rem solid var(--border); border-radius: var(--r-lg); }
.crm .crm-cd-band-actions { display: flex; flex-wrap: wrap; gap: var(--s-2); }

.crm .crm-cd-grid {
  display: grid; gap: var(--s-4); align-items: start;
  grid-template-columns: minmax(15rem, 1fr) minmax(0, 2.2fr) minmax(16rem, 1.15fr);
}
.crm .crm-cd-col { display: flex; flex-direction: column; gap: var(--s-4); min-width: 0; }
.crm .crm-cd-col > .crm-cd-card { margin-bottom: 0; }
/* Unter Laptop-Breite rutscht die rechte Spalte unter die Mitte, schmal alles untereinander. */
@media (max-width: 80rem) {
  .crm .crm-cd-grid { grid-template-columns: minmax(14rem, 1fr) minmax(0, 2.4fr); }
  .crm .crm-cd-col-side { grid-column: 2; }
}
@media (max-width: 54rem) {
  .crm .crm-cd-grid { grid-template-columns: minmax(0, 1fr); }
  .crm .crm-cd-col-side { grid-column: auto; }
  .crm .crm-cd-band { 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; }
.crm .crm-cd-gaps {
  display: flex; justify-content: space-between; align-items: center; gap: var(--s-3); margin-top: var(--s-3);
  padding: var(--s-2) var(--s-3); font-size: var(--fs-ui); color: var(--text-1); background: var(--tint-warn); border-radius: var(--r-md);
}
.crm .crm-cd-gap-fix { flex: 0 0 auto; padding: .125rem; font: inherit; font-weight: 600; color: var(--ad-blue-700); background: none; border: 0; text-decoration: underline; cursor: pointer; }

/* 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; }
}

/* Status + Ausblick — 1-Fugen aus dem Rahmengrund statt Randregeln je Kachelposition. */
.crm .crm-cd-ktiles {
  display: grid; grid-template-columns: 1fr 1fr; gap: .0625rem; overflow: hidden;
  background: var(--border); border: .0625rem solid var(--border); border-radius: var(--r-md);
}
.crm .crm-cd-tile-k { min-width: 0; padding: var(--s-3); background: var(--bg-surface); }
.crm .crm-cd-tile-wide { grid-column: 1 / -1; }
.crm .crm-cd-k-label { font-size: var(--fs-ui); color: var(--text-2); }
.crm .crm-cd-k-label span[title] { border-bottom: .0625rem dotted var(--text-3); cursor: help; }
.crm .crm-cd-k-value { margin-top: .125rem; font-size: var(--fs-title); font-weight: 600; color: var(--text-1); }
.crm .crm-cd-k-value small { font-size: var(--fs-body); font-weight: 500; color: var(--text-2); }
.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-split { display: flex; height: .5rem; margin-top: var(--s-2); overflow: hidden; background: var(--ad-blue-300); border-radius: .25rem; }
.crm .crm-cd-split span { background: var(--ad-blue-700); }
.crm .crm-cd-split-legend { display: flex; gap: var(--s-3); margin-top: .375rem; font-size: var(--fs-meta); color: var(--text-2); }
.crm .crm-cd-split-legend i { display: inline-block; width: .55rem; height: .55rem; margin-right: .3rem; border-radius: .125rem; vertical-align: -.0625rem; }
.crm .crm-cd-sw-in { background: var(--ad-blue-700); }
.crm .crm-cd-sw-ex { background: var(--ad-blue-300); }
.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-forecast { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--s-1) var(--s-2); }
.crm .crm-cd-ol-block { margin-top: var(--s-3); }
.crm .crm-cd-ol-block h4 { margin: 0 0 var(--s-1); font-size: var(--fs-body); }
.crm .crm-cd-ol-text { margin: 0; font-size: var(--fs-body); white-space: pre-line; overflow-wrap: anywhere; }
.crm .crm-cd-ol-view[hidden], .crm .crm-cd-ol-form[hidden], .crm .crm-cd-ol-edit[hidden] { display: none; }
.crm .crm-cd-ol-edit { margin-top: var(--s-2); padding: .125rem; font: inherit; font-size: var(--fs-ui); font-weight: 500; color: var(--ad-blue-700); background: none; border: 0; text-decoration: underline; cursor: pointer; }
.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-band { min-height: 6.75rem; }

/* Dunkel: Markenblau in der hellen Stufe (Linkfarbe dunkel unter AA, Merker). */
.crm.dark .crm-cd-title, html[data-theme="dark"] .crm .crm-cd-title,
.crm.dark .crm-cd-crumbs a, html[data-theme="dark"] .crm .crm-cd-crumbs a,
.crm.dark .crm-cd-gap-fix, html[data-theme="dark"] .crm .crm-cd-gap-fix,
.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-ol-edit, html[data-theme="dark"] .crm .crm-cd-ol-edit { 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-pill-active, html[data-theme="dark"] .crm .crm-cd-pill-active { color: var(--ad-green); }
.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.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).
   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::before, .crm .crm-cj::after {
  content: ''; position: absolute; top: 1.55rem; left: calc(100% / 12); height: .1875rem; border-radius: .125rem;
}
.crm .crm-cj::before { right: calc(100% / 12); background: var(--border-strong); }
.crm .crm-cj::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::after, html[data-theme="dark"] .crm .crm-cj::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::before, .crm .crm-cj::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-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); }

/* 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.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; }

.crm .chat-fehler {
  border: var(--chat-linie) solid var(--danger);
  border-radius: var(--r-md);
  padding: var(--s-3) var(--s-4);
  color: var(--text-1);
}

.crm .chat-fehler p { margin: 0; }
.crm .chat-fehler-code { margin-top: var(--s-1) !important; color: var(--text-3); font-size: var(--fs-meta); }

.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). */
.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); }
/* 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; }
.crm .org-tbl { width:100%; }
.crm .org-tbl th.num , .crm .org-tbl td.org-num { text-align:right; white-space:nowrap; }
.crm .org-name { display:flex; align-items:baseline; gap:0.5rem; }
.crm .org-lvl-1 .org-name { padding-left:1.25rem; }
.crm .org-lvl-2 .org-name { padding-left:2.75rem; }
.crm .org-glyph { color:var(--text-3); width:0.875rem; flex:0 0 auto; text-align:center; }
.crm .org-glyph .ic { width:0.875rem; height:0.875rem; } /* PR1.416: Zeichen passt in die Aufklapp-Spalte */
.crm .org-toggle { background:none; border:0; color:var(--text-3); cursor:pointer;
  font:inherit; padding:0; line-height:1; width:0.875rem; flex:0 0 auto; }
.crm .org-bl { font-family:var(--f-cond); font-weight:600; }
.crm .org-cc-wrap { display:flex; align-items:baseline; gap:0.375rem; flex-wrap:wrap; min-width:0; }
.crm .org-cc { font-weight:600; color:var(--text-1); }
.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. */
.crm .org-sub-warn { color:var(--ad-orange-900); }
.crm.dark .org-sub-warn , html[data-theme="dark"] .crm .org-sub-warn { color:var(--ad-orange); }
.crm .org-link { background:none; border:0; padding:0; font:inherit; cursor:pointer;
  color:var(--text-1); text-align:left; }
.crm .org-link:hover { text-decoration:underline; }
.crm .org-ma { font-weight:500; color:var(--text-2); }
.crm .org-proj , .crm .org-sep { color:var(--text-3); font-size:var(--fs-meta); }
.crm .org-proj.org-link { color:var(--text-3); }
.crm .org-note { color:var(--text-3); font-size:var(--fs-meta); margin-left:0.375rem; }
/* 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-bl , .crm .org-cc , .crm .org-ma { white-space: nowrap; }
.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 .kb-org-seg { margin-left: var(--s-3); }
.crm .och { display: flex; flex-direction: column; gap: var(--s-6); padding: var(--s-4); }
.crm .och-tree { display: flex; flex-direction: column; align-items: stretch; }
.crm .och-root { display: flex; justify-content: center; position: relative; padding-bottom: var(--s-4); }
.crm .och-root::after { content: ""; position: absolute; left: 50%; bottom: 0; height: var(--s-4); border-left: thin solid var(--border-strong); }
.crm .och-row { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-3);
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 13.5rem), 1fr)); }
.crm .och-ccs { border-top: thin solid var(--border-strong); padding-top: var(--s-4); }
.crm .och-node { position: relative; min-width: 0; }
.crm .och-box { height: 100%; display: flex; flex-direction: column; gap: var(--s-2); min-width: 0;
  padding: var(--s-3); background: var(--bg-surface); border: thin solid var(--border); border-radius: var(--r-md); }
.crm .och-bl { width: min(100%, 20rem); border: 0.125rem solid var(--ad-blue); }
.crm .och-box.is-muted { background: var(--bg-surface-2); }
.crm .och-cc.is-open { border-color: var(--ad-blue); }
.crm .och-hd { display: flex; flex-direction: column; gap: 0.125rem; min-width: 0; }
.crm .och-name { font-family: var(--f-cond); font-weight: 600; font-size: var(--fs-body); color: var(--text-1); text-align: left; overflow-wrap: anywhere; }
.crm .och-link { background: none; border: 0; padding: 0; cursor: pointer; }
.crm .och-link:hover { text-decoration: underline; }
.crm .och-sub { font-size: var(--fs-meta); color: var(--text-2); }
.crm .och-faces { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-1); }
.crm .och-face { display: block; padding: 0; border: 0; background: none; border-radius: 50%; cursor: pointer; line-height: 0; }
.crm .och-face:focus-visible, .crm .och-link:focus-visible, .crm .och-toggle:focus-visible { outline: 0.125rem solid var(--focus); outline-offset: 0.125rem; }
.crm .och-more { font-size: var(--fs-meta); color: var(--text-2); padding: 0 var(--s-1); }
.crm .och-stats { display: flex; align-items: baseline; gap: var(--s-1); flex-wrap: wrap; }
.crm .och-num { font-weight: 600; font-size: var(--fs-body); color: var(--text-1); }
.crm .och-lbl { font-size: var(--fs-meta); color: var(--text-2); }
.crm .och-pct { margin-left: auto; font-size: var(--fs-meta); font-weight: 600; }
.crm .och-bl .och-stats { justify-content: space-between; }
.crm .och-bl .och-pct { margin-left: 0; }
.crm .och-bar { height: 0.375rem; border-radius: 62.5rem; background: var(--bg-surface-3); overflow: hidden; }
.crm .och-fill { display: block; height: 100%; border-radius: inherit; }
.crm .och-frei { font-size: var(--fs-meta); color: var(--text-2); }
.crm .och-note { margin-left: var(--s-2); color: var(--text-2); }
.crm .och-ft { display: flex; justify-content: flex-end; margin-top: auto; }
.crm .och-toggle { background: none; border: 0; padding: 0; cursor: pointer; font: inherit; font-size: var(--fs-meta); font-weight: 600; color: var(--ad-blue-700); }
.crm .och-toggle:hover { text-decoration: underline; }
.crm .och-teams { margin-top: var(--s-4); padding: var(--s-3); border: thin solid var(--border); border-radius: var(--r-md); background: var(--bg-surface-2); }
.crm .och-teams-h { margin: 0 0 var(--s-2); font-size: var(--fs-ui); font-weight: 600; color: var(--text-1); }
.crm .och-hint { margin: 0 0 var(--s-2); font-size: var(--fs-meta); color: var(--text-2); }
.crm .och-t-rot { color: var(--ad-red-700); }
.crm .och-t-gelb { color: var(--ad-orange-900); }
.crm .och-t-gruen { color: var(--ad-green-700); }
.crm .och-fill.och-t-rot { background: var(--ad-red-700); }
.crm .och-fill.och-t-gelb { background: var(--ad-orange-700); }
.crm .och-fill.och-t-gruen { background: var(--ad-green-700); }
.crm.dark .och-t-rot , html[data-theme="dark"] .crm .och-t-rot { color: var(--ad-red-300); }
.crm.dark .och-t-gelb , html[data-theme="dark"] .crm .och-t-gelb { color: var(--ad-orange); }
.crm.dark .och-t-gruen , html[data-theme="dark"] .crm .och-t-gruen { color: var(--ad-green); }
.crm.dark .och-fill.och-t-rot , html[data-theme="dark"] .crm .och-fill.och-t-rot { background: var(--ad-red-300); }
.crm.dark .och-fill.och-t-gelb , html[data-theme="dark"] .crm .och-fill.och-t-gelb { background: var(--ad-orange); }
.crm.dark .och-fill.och-t-gruen , html[data-theme="dark"] .crm .och-fill.och-t-gruen { background: var(--ad-green); }
.crm.dark .och-toggle , html[data-theme="dark"] .crm .och-toggle { color: var(--ad-blue-300); }
.crm.dark .och-bl , html[data-theme="dark"] .crm .och-bl ,
.crm.dark .och-cc.is-open , html[data-theme="dark"] .crm .och-cc.is-open { border-color: var(--ad-blue-300); }

/* ── 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). */
.crm .ctree-tbl { width:100%; }
.crm .ctree-tbl th.num , .crm .ctree-tbl td.ctree-num { text-align:right; white-space:nowrap; }
.crm .ctree-name { display:flex; align-items:baseline; gap:var(--s-2); flex-wrap:wrap; }
/* Die Einrueckung ist die einzige Tiefenanzeige — ohne sie waere ein Projekt
   unter einem Vorgang von einem Vorgang nicht zu unterscheiden. */
.crm .ctree-lvl-1 .ctree-name { padding-left:1.25rem; }
.crm .ctree-lvl-2 .ctree-name { padding-left:2.75rem; }
.crm .ctree-lvl-3 .ctree-name { padding-left:4.25rem; }
.crm .ctree-glyph { color:var(--text-3); width:0.875rem; flex:0 0 auto; text-align:center; }
.crm .ctree-toggle { background:none; border:0; color:var(--text-3); cursor:pointer;
  font:inherit; padding:0; line-height:1; width:0.875rem; flex:0 0 auto; }
/* 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. */
.crm .ctree-wrap { display:flex; align-items:baseline; gap:var(--s-2); flex-wrap:wrap;
  min-width:0; flex:1 1 0; }
.crm .ctree-sub { flex-basis:100%; color:var(--text-3); font-size:var(--fs-meta); }
.crm .ctree-link { background:none; border:0; padding:0; font:inherit; cursor:pointer;
  color:var(--text-1); text-align:left; white-space:nowrap; }
.crm .ctree-link:hover { text-decoration:underline; }
.crm .ctree-cust { font-weight:600; }
.crm .ctree-person .ctree-link { color:var(--text-2); font-weight:500; }
/* 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. */
.crm .ctree-logo { width:1.25rem; height:1.25rem; font-size:var(--fs-label); align-self:center; }
.crm .ctree-zeit { color:var(--text-3); font-size:var(--fs-meta); white-space:nowrap; }
.crm .ctree-bar { display:flex; align-items:center; gap:var(--s-3); flex-wrap:wrap;
  padding:var(--s-3) var(--s-4); }
.crm .ctree-bar .grow { flex:1 1 auto; }
.crm .ctree-opt { display:inline-flex; align-items:center; gap:var(--s-2);
  color:var(--text-2); font-size:var(--fs-ui); white-space:nowrap; }
/* Die Kundenzeile ist der Blockanfang — bei 40+ Kunden findet das Auge ihn sonst
   nicht wieder. Tonung statt zweiter Linienstaerke, sonst wird das Raster unruhig. */
.crm .ctree-customer > td { background:var(--bg-surface-2); }
.crm .ctree-more .ctree-link { color:var(--text-3); font-size:var(--fs-ui); white-space:normal; }
.crm .ctree-retry { padding:var(--s-3) var(--s-4) 0; }
/* 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. */
.crm .ctree-card { display:flex; flex-direction:column; flex:1 1 auto; min-height:0; }
.crm .ctree-scroll { overflow-y:auto; flex:1 1 auto; min-height:0; }

/* ── 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). */
.crm .cmap-chips { display:flex; flex-wrap:wrap; align-items:center; gap:var(--s-2);
  padding:var(--s-3) var(--s-4) 0; }
.crm .cmap-chip { border:0.0625rem solid var(--border-strong); background:var(--bg-surface);
  color:var(--text-1); border-radius:999rem; padding:0.25rem 0.75rem; font:inherit;
  font-size:var(--fs-ui); cursor:pointer; }
.crm .cmap-chip:hover { border-color:var(--text-3); }
.crm .cmap-chip.is-active { background:var(--bg-surface-2); border-color:var(--primary);
  box-shadow:inset 0 0 0 0.0625rem var(--primary); color:var(--text-1); font-weight:600; }
.crm .cmap-chip:focus-visible { outline:0.125rem solid var(--focus); outline-offset:0.125rem; }
.crm .cmap-chips-more { color:var(--text-3); font-size:var(--fs-meta); }
/* 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); }
.crm .cmap-lines { position:absolute; inset:0; width:100%; height:100%; pointer-events:none; overflow:visible; }
.crm .cmap-grid { position:relative; display:grid;
  grid-template-columns:minmax(12rem, 0.8fr) repeat(3, minmax(13rem, 1fr));
  column-gap:3.5rem; align-items:stretch; }
.crm .cmap-col { display:flex; flex-direction:column; min-width:0; }
.crm .cmap-col-hd { display:flex; align-items:center; gap:var(--s-2); margin:0 0 var(--s-3);
  font-size:var(--fs-ui); font-weight:600; color:var(--text-2); }
.crm .cmap-col.is-cust .cmap-col-hd { visibility:hidden; }
.crm .cmap-dot { width:0.5rem; height:0.5rem; border-radius:50%; background:var(--card-type); }
.crm .cmap-count { color:var(--text-3); font-weight:500; }
.crm .cmap-col-body { display:flex; flex-direction:column; justify-content:safe center;
  gap:var(--s-3); flex:1 1 auto; }
.crm .cmap-none { color:var(--text-3); font-size:var(--fs-meta); }
.crm .cmap-card { display:flex; align-items:center; gap:0.625rem; width:100%; text-align:left;
  padding:0.625rem 0.75rem; 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;
  cursor:pointer; }
.crm .cmap-card:hover { border-color:var(--text-3); }
.crm .cmap-card:focus-visible { outline:0.125rem solid var(--focus); outline-offset:0.125rem; }
.crm .cmap-card.is-customer { border:0.125rem solid var(--primary); }
/* Handlungsbedarf: offen, aber weder Projekt noch Team. Ton ueber Flaeche + Rand, der
   Text bleibt in Textfarbe (AA in beiden Themes). */
.crm .cmap-card.tone-gap { background:var(--tint-warn); border-color:var(--warning); }
/* Verloren tritt zurueck — ueber Farbe, nicht Deckkraft: der Text bleibt lesbar. */
.crm .cmap-card.tone-lost { background:var(--bg-surface-2); box-shadow:none; }
.crm .cmap-card.tone-lost .cmap-name { color:var(--text-2); font-weight:500; }
.crm .cmap-card.tone-lost .cmap-glyph { opacity:0.5; }
.crm .cmap-card.is-more { border-style:dashed; box-shadow:none; }
.crm .cmap-glyph { flex:0 0 auto; width:2rem; height:2rem; border-radius:var(--r-sm);
  display:inline-flex; align-items:center; justify-content:center; }
.crm .cmap-glyph.is-icon { background:var(--card-type); color:white; }
.crm .cmap-glyph.is-photo { border-radius:50%; overflow:hidden; }
.crm .cmap-text { display:flex; flex-direction:column; min-width:0; }
.crm .cmap-name { font-weight:600; overflow-wrap:anywhere; }
.crm .cmap-meta { color:var(--text-3); font-size:var(--fs-meta); overflow-wrap:anywhere; }
.crm .cmap-card.tone-gap .cmap-meta { color:var(--text-2); }
.crm .cmap-edge { fill:none; stroke:var(--border-strong); stroke-width:0.09rem; }
.crm .cmap-edge.is-origin { stroke:var(--primary); stroke-dasharray:0.3rem 0.25rem; }
.crm .cmap-legend { position:relative; display:flex; align-items:center; gap:var(--s-2);
  margin-top:var(--s-4); color:var(--text-3); font-size:var(--fs-meta); }
.crm .cmap-legend-line { width:1.5rem; border-top:0.125rem dashed var(--primary); }

/* ── 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.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.266 (#460) — KONVERSIONEN ==============
   Fuenfte Sicht der Wissens-Zentrale. Der Zwilling steht in style.css als
   .kbcc-conv-*. 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. */

/* Hoehenkette (RD1.11) wie bei .ctree-card: #crm-content ist der Flex-KONTEXT, die
   Karte fuellt die Hoehe, gescrollt wird eine Ebene tiefer. */
.crm .conv-card { display:flex; flex-direction:column; flex:1 1 auto; min-height:0; }
/* Der EINZIGE Scroll-Bereich dieser Sicht: Kacheln, Bild und beide Tabellen liegen
   darin. Zwei Scroll-Bereiche uebereinander sind nicht vorhersagbar bedienbar
   (Konvention 20, Punkt 2). */
.crm .conv-scroll { overflow-y:auto; flex:1 1 auto; min-height:0; padding:0 var(--s-4) var(--s-4); }

.crm .conv-bar { display:flex; align-items:center; gap:var(--s-3); flex-wrap:wrap;
  padding:var(--s-3) var(--s-4); }
.crm .conv-bar .grow { flex:1 1 auto; }

.crm .conv-kpis { margin-bottom:var(--s-3); }

/* Die Auffaelligkeitszeile: eine Zeile mit Zahl und Sprung, keine zweite Liste —
   die vollstaendige Aufarbeitung baut die Datenqualitaets-Sicht (#461). */
.crm .conv-hint { display:flex; align-items:center; gap:var(--s-3); flex-wrap:wrap;
  padding:var(--s-3); margin-bottom:var(--s-4);
  background:var(--tint-warn); border-radius:var(--r-sm);
  border-left:0.1875rem solid var(--ad-orange);
  font-size:var(--fs-ui); color:var(--text-1); }
/* --ad-orange auf --tint-warn ergibt 2.73:1 — fuer Text zu wenig. Dieselbe
   Korrektur wie bei .crm .warn-box b. */
.crm .conv-hint b { color:var(--ad-orange-900); }
.crm.dark .conv-hint b , html[data-theme="dark"] .crm .conv-hint b { color:var(--ad-orange); }
.crm .conv-hint-more { color:var(--text-2); }
.crm .conv-hint .conv-jump { margin-left:auto; }
.crm .conv-hint-ok { background:var(--tint-green); border-left-color:var(--ad-green); }
/* Gruen ist im Redesign KEINE Textfarbe: --ad-green-700 auf --tint-green ergibt im
   hellen Theme 2.85:1. Es gibt keine -900-Stufe, also traegt der Balken links die
   Farbe und der Text die Primaerfarbe — dieselbe Entscheidung wie im Zwilling. */
.crm .conv-hint-ok b { color:var(--text-1); }

.crm .conv-block { margin-bottom:var(--s-5); }
.crm .conv-h { margin:0 0 var(--s-3); font-size:var(--fs-body); font-weight:500; color:var(--text-1);
  display:flex; align-items:baseline; gap:var(--s-2); }
.crm .conv-chart { margin-bottom:var(--s-2); }
.crm .conv-note { margin:var(--s-2) 0 0; color:var(--text-3); font-size:var(--fs-meta); }

.crm .conv-tbl { width:100%; }
/* Nur die ZAHLEN bleiben ungebrochen. Die Kopfzeilen duerfen umbrechen — sonst
   hielt allein "davon mit Projekt" eine Spalte auf 162 px und die Tabelle sprengte
   bei 900 px Fensterbreite ihre Spalte. */
/* Der Tabellen-Grundstil haelt Kopfzellen in EINER Zeile. Bei sechs bzw. sieben
   Spalten hielten allein "Konvertiert am" und "Wert Vorgang" je 123 px besetzt, und
   die Liste lief 37 px aus ihrem Bereich heraus. Die Koepfe duerfen umbrechen —
   die ZAHLEN darunter nicht. */
.crm .conv-tbl thead th { white-space:normal; }
.crm .conv-tbl th.num { text-align:right; }
.crm .conv-tbl td.num { text-align:right; white-space:nowrap; }
/* Zeilenkoepfe tragen lange Kundennamen: ohne diese Regel erbt die Zelle ein
   white-space:nowrap aus dem Tabellen-Grundstil und bricht nie um. */
.crm .conv-tbl tbody th { white-space:normal; }
/* Dieselbe Absicherung wie im Zwilling: `anywhere` senkt auch die intrinsische
   MINDESTbreite, damit ein sehr langer Projektname die Tabelle nicht aufspannt. */
/* `break-word` statt `anywhere`: letzteres bricht MITTEN im Wort und machte aus
   "Containerplattform" ein "Containerplattf orm". Gebrochen wird nur, wenn ein
   einzelnes Wort allein nicht in die Spalte passt. */
.crm .conv-liste td:first-child , .crm .conv-liste td:nth-child(2) ,
.crm .conv-tbl tbody th { overflow-wrap:break-word; }
/* Ohne Breitenvorgabe raeumt der Tabellenalgorithmus den Zahlenspalten so viel Platz
   ein, dass Vorgangs- und Projektname auf vier Zeilen umbrechen und jede Zeile ueber
   100 px hoch wird. Prozent statt px — der ui-craft-Ratchet zaehlt rohe px. */
.crm .conv-liste th:first-child , .crm .conv-liste th:nth-child(2) { width:24%; }
/* KEIN display:flex auf einer Tabellenzelle: das ersetzt `table-cell` vollstaendig,
   der Browser schiebt eine anonyme Zelle darunter — die zweite Spalte rutschte unter
   die erste und alle Folgespalten waren um eins verschoben. Die Zelle bleibt eine
   Zelle; gestapelt wird ueber den Block-Umbruch der Unterzeile. */
.crm .conv-name { font-weight:inherit; text-align:left; }
.crm .conv-sub { display:block; color:var(--text-3); font-size:var(--fs-meta); }
.crm .conv-link { background:none; border:0; padding:0; font:inherit; cursor:pointer;
  color:var(--text-1); text-align:left; }
.crm .conv-link:hover { text-decoration:underline; }
.crm .conv-glyph { display:inline-block; color:var(--text-3); width:0.875rem; text-align:center; }
.crm .conv-toggle { display:inline-block; background:none; border:0; color:var(--text-3);
  cursor:pointer; font:inherit; padding:0; line-height:1; width:0.875rem; }

/* Die Gruppenzeile ist der Blockanfang — dieselbe Tonung wie bei der Kundenzeile
   im Kunden-Baum, damit beide Sichten dieselbe Sprache sprechen. */
/* Zeilenkoepfe tragen DATEN (den Statusnamen, den Kundennamen), keine
   Spaltenueberschrift: die geerbte Grossschreibung der Kopfzellen machte aus
   `Lead` ein `LEAD`. Nur thead bleibt in Versalien. */
.crm .conv-tbl tbody th , .crm .conv-tbl tfoot th { text-transform:none; letter-spacing:normal; }
.crm .conv-grp > th { background:var(--bg-surface-2); font-weight:600; }
.crm .conv-kind > td { color:var(--text-2); }
/* Die Einrueckung ist die einzige Tiefenanzeige. */
.crm .conv-kind .conv-name { padding-left:1.25rem; }
.crm .conv-sum > th , .crm .conv-sum > td { border-top:0.125rem solid var(--border-strong);
  font-weight:600; }
.crm .conv-warn { color:var(--ad-orange-900); font-weight:600; }
.crm.dark .conv-warn , html[data-theme="dark"] .crm .conv-warn { color:var(--ad-orange); }
/* Archivierte Zeilen bleiben lesbar: die Deckkraft sitzt bewusst NICHT am Kind,
   sonst laesst sie sich fuer den Text nicht mehr zuruecknehmen. */
.crm .conv-archiv > td { color:var(--text-3); }
.crm .conv-retry { padding:var(--s-3) var(--s-4) 0; }
/* ── 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); }
.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;
}
.crm .fb-karte:hover { transform: none; background: var(--bg-hover); box-shadow: var(--shadow-1); }
.crm .fb-karte.k-offen { border-left-color: var(--ad-blue); }
.crm .fb-karte.k-in_bearbeitung { border-left-color: var(--ad-violet); }
.crm .fb-karte.k-verfuegbar { border-left-color: var(--ad-turq); }
.crm .fb-karte.k-abgelehnt { border-left-color: var(--ad-red-700); }
.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; }
.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.k-abgelehnt , html[data-theme="dark"] .crm .fb-karte.k-abgelehnt { border-left-color: 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-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:var(--s-4); 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-grid { display:grid; grid-template-columns:minmax(0, 1.2fr) minmax(0, 1fr); gap:var(--s-4); align-items:start; }
.crm .cnkv-pivots { display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:var(--s-4); align-items:start; }
.crm .cnkv-grid > .card, .crm .cnkv-pivots > .card { min-width:0; overflow-x:auto; }
.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-ok::before { background:var(--ad-green); }
.crm .cnkv-big-mid::before { background:var(--ad-orange); }
.crm .cnkv-big-high::before { background:var(--ad-red); }
.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-dot.nkv-ok { background:var(--ad-green); }
.crm .cnkv-dot.nkv-mid { background:var(--ad-orange); }
.crm .cnkv-dot.nkv-high { background:var(--ad-red); }
.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.397 #627 — Folgewochen als getoente Kacheln mit grosser Hauptzahl; nutzen die Kartenbreite. */
.crm .cnkv-follow { display:grid; grid-template-columns:repeat(auto-fit, minmax(14rem, 1fr)); gap:var(--s-3);
  padding-top:var(--s-3); border-top:0.0625rem solid var(--border); }
.crm .cnkv-followcard { display:flex; flex-direction:column; gap:var(--s-1); padding:var(--s-3) var(--s-4);
  border:0.0625rem solid var(--border); border-radius:var(--r-md); font-size:var(--fs-body); }
.crm .cnkv-follow-head { display:inline-flex; align-items:center; gap:var(--s-2); }
.crm .cnkv-follow-val { font-family:var(--f-cond); font-size:var(--fs-display); font-weight:500; line-height:1.15; color:var(--text-1); }
.crm .cnkv-followcard .cnkv-trend { font-size:var(--fs-ui); }
/* PR1.397 #627 — Ampel als ganze Flaeche (Wochenleiste + Folgewochen), Bernds Power-BI-Blick.
   Ton = --tint-*, Rand = Vollfarbe; Hover laesst den Ton stehen (sonst kippt die Ampel weg).
   Text auf dem Ton nie --text-3 (4,2:1) — Meta und „gleich" steigen auf --text-2 (≥ 6,3:1). */
.crm .cnkv-amp-ok, .crm .cnkv-amp-ok:hover { background:var(--tint-green); border-color:var(--ad-green); }
.crm .cnkv-amp-mid, .crm .cnkv-amp-mid:hover { background:var(--tint-warn); border-color:var(--ad-orange); }
.crm .cnkv-amp-high, .crm .cnkv-amp-high:hover { background:var(--tint-red); border-color:var(--ad-red); }
.crm .cnkv-amp .cnkv-week-meta, .crm .cnkv-amp .cnkv-trend-gleich { color:var(--text-2); }
.crm .cnkv-week.cnkv-amp:hover { box-shadow:inset 0 0 0 0.0625rem var(--border-strong); }
/* Gewaehlte Woche: doppelter Rand in der Ampelfarbe (ohne Layoutsprung) + fette Zahl. */
.crm .cnkv-week.active { box-shadow:inset 0 0 0 0.125rem currentColor; font-weight:600; }
.crm .cnkv-week.active.cnkv-amp-ok { box-shadow:inset 0 0 0 0.125rem var(--ad-green); }
.crm .cnkv-week.active.cnkv-amp-mid { box-shadow:inset 0 0 0 0.125rem var(--ad-orange); }
.crm .cnkv-week.active.cnkv-amp-high { box-shadow:inset 0 0 0 0.125rem var(--ad-red); }
.crm .cnkv-week.active .cnkv-week-val { font-weight:600; }
.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); }
/* Zweispaltig wie im Kompass erst auf grossen Monitoren — darunter bekaemen Matrix und
   Betroffenen-Tabelle zu wenig Breite und scrollten seitlich. */
@media (max-width: 100rem) {
  .crm .cnkv-grid { grid-template-columns:minmax(0, 1fr); }
}
@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-body, 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) var(--s-3); }
.crm .crm-ep-head { display:flex; flex-direction:column; gap:var(--s-2);
  padding:var(--s-3); 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); }
.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.541 — Aufgaben-Leiste: vier Kacheln, jede ein Filter-Knopf. Taeglich genutzt -> keine
   Bewegung; der gedrueckte Zustand traegt Rahmen UND „Filter aufheben" (nie Farbe allein). */
.crm .crm-ep-aufgaben { display:grid; grid-template-columns:repeat(auto-fit, minmax(15rem, 1fr)); gap:var(--s-3); }
.crm .crm-ep-aufgabe { display:flex; align-items:flex-start; gap:var(--s-3); min-height:4.5rem; padding:var(--s-3) var(--s-4);
  background:var(--bg-surface); border:0.0625rem solid var(--border); border-radius:var(--r-lg);
  color:var(--text-1); font:inherit; text-align:left; cursor:pointer; }
.crm .crm-ep-aufgabe:hover:not(:disabled) { border-color:var(--border-strong); background:var(--bg-hover); }
.crm .crm-ep-aufgabe:focus-visible { outline:0.125rem solid var(--focus); outline-offset:0.125rem; }
.crm .crm-ep-aufgabe.is-on { border-color:var(--ad-blue); box-shadow:inset 0 0 0 0.0625rem var(--ad-blue); }
.crm .crm-ep-aufgabe:disabled { cursor:default; color:var(--text-2); }
.crm .crm-ep-aufgabe-n { flex:0 0 auto; min-width:2.5rem; padding:var(--s-1) var(--s-2); border-radius:var(--r-md);
  text-align:center; font-size:var(--fs-section); font-weight:700; font-variant-numeric:tabular-nums; background:var(--bg-surface-2); }
.crm .crm-ep-aufgabe--frei .crm-ep-aufgabe-n { background:var(--tint-red); color:var(--ad-red-700); }
.crm .crm-ep-aufgabe--ueberplant .crm-ep-aufgabe-n { background:var(--tint-warn); color:var(--ad-orange-900); }
.crm .crm-ep-aufgabe--planung .crm-ep-aufgabe-n { background:var(--tint-blue); color:var(--ad-blue-700); }
.crm .crm-ep-aufgabe:disabled .crm-ep-aufgabe-n { background:var(--bg-surface-2); color:var(--text-2); }
.crm .crm-ep-aufgabe-text { display:flex; flex-direction:column; min-width:0; flex:1 1 auto; }
.crm .crm-ep-aufgabe-title { font-weight:650; }
.crm .crm-ep-aufgabe-sub { font-size:var(--fs-ui); color:var(--text-2); }
.crm .crm-ep-aufgabe-go { display:inline-flex; align-items:center; gap:var(--s-1); margin-top:var(--s-1);
  font-size:var(--fs-ui); font-weight:600; color:var(--ad-blue-700); }
.crm.dark .crm-ep-aufgabe--frei .crm-ep-aufgabe-n, html[data-theme="dark"] .crm .crm-ep-aufgabe--frei .crm-ep-aufgabe-n { color:var(--ad-red-300); }
.crm.dark .crm-ep-aufgabe--ueberplant .crm-ep-aufgabe-n, html[data-theme="dark"] .crm .crm-ep-aufgabe--ueberplant .crm-ep-aufgabe-n { color:var(--ad-orange); }
.crm.dark .crm-ep-aufgabe--planung .crm-ep-aufgabe-n, html[data-theme="dark"] .crm .crm-ep-aufgabe--planung .crm-ep-aufgabe-n,
.crm.dark .crm-ep-aufgabe-go, html[data-theme="dark"] .crm .crm-ep-aufgabe-go { color: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:wrap; 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:4rem; vertical-align:bottom; background:var(--bg-surface-2);
  box-shadow:inset 0 -0.125rem 0 var(--border-strong); }
.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:20rem; min-width:20rem; max-width:20rem;
  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-nkv-saeule { display:flex; align-items:flex-end; justify-content:center; height:2.25rem; }
.crm .crm-ep-nkv-saeule i { display:block; width:60%; min-height:0.125rem; background:currentColor; border-radius:0.125rem 0.125rem 0 0; }
.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; background:var(--ad-red-700); color:var(--ea-ink-light);
  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: Reiterleiste + Gruppenzeilen.
   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-leiste { display:flex; flex-wrap:wrap; align-items:center; gap:var(--s-2); padding:0 1.375rem; }
.crm .crm-ep-grp-leiste-label { font-size:var(--fs-ui); color:var(--text-2); }
.crm .crm-ep-grp-chip { font-weight:600; }
.crm .crm-ep-grp-chip-n { font-weight:500; color:var(--text-3); font-variant-numeric:tabular-nums; }
.crm .crm-ep-grp-chip.is-on .crm-ep-grp-chip-n { color:inherit; }
.crm .crm-ep-grp-leiste-hint { flex:1 0 100%; margin:0; font-size:var(--fs-ui); color:var(--text-2); }
.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,
.crm .crm-ep-grp-chip: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 { --ep-gelb:color-mix(in oklch, var(--ad-orange) 50%, var(--ad-green));
  --ep-stufe-niedrig:color-mix(in srgb, var(--ad-red) 42%, var(--bg-surface));
  --ep-stufe-mittel:color-mix(in srgb, var(--ep-gelb) 55%, var(--bg-surface));
  --ep-stufe-gut:color-mix(in srgb, var(--ad-green) 45%, var(--bg-surface));
  --ep-stufe-hoch:color-mix(in srgb, var(--ad-green-700) 80%, var(--bg-surface)); }
.crm.dark, html[data-theme="dark"] .crm {
  --ep-stufe-niedrig:color-mix(in srgb, var(--ad-red) 50%, var(--bg-surface));
  --ep-stufe-mittel:color-mix(in srgb, var(--ep-gelb) 40%, var(--bg-surface));
  --ep-stufe-gut:color-mix(in srgb, var(--ad-green) 32%, var(--bg-surface));
  --ep-stufe-hoch:color-mix(in srgb, var(--ad-green) 50%, var(--bg-surface)); }
.crm .crm-ep-stufe--niedrig .crm-ep-grp-wert, .crm .crm-ep-lg-farbe.crm-ep-stufe--niedrig { background:var(--ep-stufe-niedrig); }
.crm .crm-ep-stufe--mittel .crm-ep-grp-wert, .crm .crm-ep-lg-farbe.crm-ep-stufe--mittel { background:var(--ep-stufe-mittel); }
.crm .crm-ep-stufe--gut .crm-ep-grp-wert, .crm .crm-ep-lg-farbe.crm-ep-stufe--gut { background:var(--ep-stufe-gut); }
.crm .crm-ep-stufe--hoch .crm-ep-grp-wert, .crm .crm-ep-lg-farbe.crm-ep-stufe--hoch { background:var(--ep-stufe-hoch); }
.crm .crm-ep-lg-farbe.crm-ep-stufe--niedrig, .crm .crm-ep-lg-farbe.crm-ep-stufe--mittel,
.crm .crm-ep-lg-farbe.crm-ep-stufe--gut, .crm .crm-ep-lg-farbe.crm-ep-stufe--hoch { 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(--ad-red-700); font-weight:600; }
.crm.dark .crm-ep-grp-ueber, html[data-theme="dark"] .crm .crm-ep-grp-ueber { color:var(--ad-red-300); }
/* 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:var(--ad-red-700); }

.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); }
/* 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. */
.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(--tint-warn); color: var(--ad-orange-900); border-color: color-mix(in srgb, var(--ad-orange-700) 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(--ad-orange); }
.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 { flex: none; width: 1.75rem; height: 1.75rem; border-radius: 50%; display: grid; place-items: center; font-size: var(--fs-label); font-weight: 500; background: var(--tint-blue); color: var(--text-1); }
.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 .dash-cat-sprung,
  .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-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-rolelist ul { list-style: none; margin: 0; padding: var(--s-2); display: flex; flex-direction: column; gap: var(--s-1); }
.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-listhead, .crm .crm-mc-row { display: grid; grid-template-columns: 1.25rem 1.25rem 2rem minmax(0, 1fr) 7.5rem 12.5rem 6rem; gap: var(--s-3); align-items: center; padding: var(--s-2) var(--s-5); }
.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 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); }
.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: 1rem; 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); 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); }
  .crm .crm-mc-stage { grid-template-columns: minmax(13rem, 17rem) minmax(0, 1fr) minmax(20rem, 26rem); }
  .crm .crm-mc-rolelist, .crm .crm-mc-detail { position: sticky; top: 0; }
}
@media (max-width: 48em) {
  .crm .crm-mc-page { padding: var(--s-4) var(--s-4) var(--s-8); }
  .crm .crm-mc-listhead { display: none; }
  .crm .crm-mc-row { grid-template-columns: 1.25rem 2rem minmax(0, 1fr) auto; }
  .crm .crm-mc-row .crm-mc-rank { display: none; }
  .crm .crm-mc-row .crm-mc-strip { grid-column: 3 / -1; }
  .crm .crm-mc-staff { opacity: 1; grid-column: 3 / -1; justify-self: start; }
  .crm .crm-mc-search { margin-left: 0; }
}
@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.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%; }
.crm .eorg-face.is-busy { filter: grayscale(1); opacity: .55; }
.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); }
@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 { flex: none; width: 1.75rem; height: 1.75rem; border-radius: 50%; display: grid; place-items: center;
  background: var(--tint-blue); color: var(--adm-blau); font-size: var(--fs-meta); font-weight: 700; }
.crm .adm-ov-protokoll b { font-weight: 600; }

/* Echter Ein/Aus-Schalter (Funktionen + Ueberblick). Zustand steht auch als Wort daneben. */
.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.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-achtung { background: var(--tint-warn); }
.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.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.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; }
.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; }
.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 thin 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.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-bar-warn { background: var(--ad-orange); }
.crm .cz-bar-bad { background: var(--ad-red); }
.crm .cz-lg-ok::before { background: var(--ad-green); }
.crm .cz-lg-warn::before { background: var(--ad-orange); }
.crm .cz-lg-bad::before { background: var(--ad-red); }
.crm .cz-yv-bar--exp, .crm .cz-pg-fill { background: var(--ad-orange); }
.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__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(--ad-orange-700); }
.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%; font-size: var(--fs-meta); 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(--ad-orange-900); 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(--ad-orange); }
.crm .stamm-warn-dot { flex: none; width: .5rem; height: .5rem; border-radius: 50%; background: var(--ad-orange); }
.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.375rem; bottom: 0; width: 0.75rem; z-index: 5; cursor: col-resize; touch-action: none; }
.crm .tbl.xl-sheet .col-resize::after { content: ""; position: absolute; top: 25%; bottom: 25%; left: 0.3125rem; 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; left: 0.25rem; 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; }
.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.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); }
.crm .chat-panel.is-leer .chat-leer { padding: 0; text-align: left; }
.crm .chat-leer-titel { font-family: var(--f-cond); font-size: var(--fs-title); margin: 0 0 var(--s-2); }
.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%; font-size: var(--fs-label); 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.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); }