/* ============================================================
   Apollon – Design System
   ============================================================ */

/* PR1.567: Fira Sans in beiden Shells (fonts.css, self-hosted); Inter entfaellt. Rollen-Tokens --fs-* in fonts.css. */

/* ── Tokens ── */
:root {
  /* PR1.416 Nachzug — Kandidaten/Klassifizierung: Aufklapp-Pfeile als Maske (Pfade = icons.js
     caret-*), gezeichnet in currentColor. Nutzer: `content:''` + `-webkit-mask`/`mask`. */
  --ic-mask-caret-down: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'><path d='M213.66,101.66l-80,80a8,8,0,0,1-11.32,0l-80-80A8,8,0,0,1,48,88H208a8,8,0,0,1,5.66,13.66Z'/></svg>") center / contain no-repeat;
  --ic-mask-caret-right: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'><path d='M181.66,133.66l-80,80A8,8,0,0,1,88,208V48a8,8,0,0,1,13.66-5.66l80,80A8,8,0,0,1,181.66,133.66Z'/></svg>") center / contain no-repeat;
  --ic-mask-caret-up: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'><path d='M215.39,163.06A8,8,0,0,1,208,168H48a8,8,0,0,1-5.66-13.66l80-80a8,8,0,0,1,11.32,0l80,80A8,8,0,0,1,215.39,163.06Z'/></svg>") center / contain no-repeat;
  --ic-mask-caret-left: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'><path d='M168,48V208a8,8,0,0,1-13.66,5.66l-80-80a8,8,0,0,1,0-11.32l80-80A8,8,0,0,1,168,48Z'/></svg>") center / contain no-repeat;
  /* Sagt dem Browser, in welchem Schema er SEINE eigenen Bedienelemente zeichnen
     soll — Kalender-Popup eines <input type=date>, Zahlen-Pfeilchen, die
     Optionsliste eines <select>, die Scrollbar in einem Textfeld. Ohne die Angabe
     malt er sie im Hellschema, auch wenn die App dunkel ist: weisses Kalenderblatt
     auf dunklem Grund. Das war der augenfaelligste „alt"-Eindruck der Masken. */
  color-scheme: dark;
  --bg-base: #080c14;
  --bg-card: #0e1420;
  --bg-card2: #121928;
  --bg-hover: #1a2236;
  --bg-input: #0d1322;
  --border: #1e2d4a;
  --border-light: #243554;

  --primary: #6366f1;
  --primary-dark: #4f52d0;
  --primary-text: #9ba0fa;      /* PR1.279 — --primary als TEXT reicht nicht (4.38:1 auf --bg-base, 2.82:1 auf dem Chip-Grund); diese Stufe schafft 8.20:1 bzw. 5.28:1 */
  --primary-glow: rgba(99, 102, 241, 0.35);
  --accent: #06b6d4;
  --accent-glow: rgba(6, 182, 212, 0.25);
  --success: #10b981;
  --warning: #f59e0b;
  --danger: #ef4444;
  --success-light: #34d399;
  --attention: #eab308;
  --info: #3b82f6;   /* PR1.114 K7 — Pre-Staffing/Info-Blau (AA 5.01:1 auf --bg-card) */
  --purple: #a78bfa;
  --util-ok: #76c800;   /* HF2.9 — adesso-Grün, Auslastungs-KPI (capacity/dashboard) */

  /* Hyperscaler */
  --aws: #ff9900;
  --azure: #0078d4;
  --gcp: #34a853;
  --ovh: #123f6d;
  --stackit: #e5007d;
  --multi: #8b5cf6;

  /* Status */
  --lead: #64748b;
  --qualification: #f59e0b;
  --proposal: #6366f1;
  --won: #10b981;
  --lost: #ef4444;
  --running: #06b6d4;

  --text-1: #f0f4ff;
  --text-2: #94a3b8;
  --text-3: #7a879b;            /* PR1.279 — AA: 3.62->4.73:1 auf dem hellsten Kartengrund (#151b27) */

  --radius-sm: 6px;
  --radius: 10px;
  --radius-lg: 16px;
  --radius-xl: 22px;

  /* PR1.486 #700 — Bewegungs-Baukasten (public/js/components/motion.js). Gleiche Werte
     wie MOTION dort und im .crm-Scope von style-redesign.css; ein Test haelt sie gleich. */
  --motion-fast: 200ms;
  --motion-base: 300ms;
  --ease-out: cubic-bezier(.2,.7,.3,1);
  --mo-flash-bg: var(--primary-glow);

  /* PR1.200 #359 — Formular-Rhythmus. Vorher stand der Abstand zwischen zwei
     Bloecken eines Wizard-Schritts als Inline-Style am Element und schwankte
     zwischen 10, 14 und 18px. Ein Token, ein Wert, eine Stelle zum Aendern. */
  --form-block-gap: 14px;

  /* PR1.438 — layer for floating lists (selects, multiselects): above every dialog (1000). */
  --z-popover: 1100;

  --transition: 0.2s cubic-bezier(.4, 0, .2, 1);
  --shadow-sm: 0 2px 8px rgba(0, 0, 0, .4);
  --shadow: 0 4px 20px rgba(0, 0, 0, .5);
  --shadow-lg: 0 8px 40px rgba(0, 0, 0, .7);

  /* adesso Brand Colors (Ticket 5.1) */
  --adesso-blue: #006EC7;
  --adesso-lila: #461EBE;

  /* HF2.9 — Phantom-Tokens: bislang nur als var(--x, fallback) referenziert
     (matching-dialog/kb-history-viewer :--surface-2/-3, .jira-upload :--text).
     Explizit auf ihren bisherigen Fallback gesetzt → Dark byte-identisch;
     Light-Wert im [data-theme="light"]-Block. Nur Tokens mit einheitlichem Fallback. */
  --surface-2: #1f2530;
  --surface-3: #2a3140;
  --text: #f0f4ff;
  /* PR1.324 #533 — Pythia-Terrakotta: zweckgebundene Identitaetsfarbe NUR fuer das
     Pythia-Medaillon (keine Status-/Hyperscaler-Farbe). Grund deckend, damit das
     Gewand die Linien dahinter verdeckt. Linie auf Karte ≥ 3:1. */
  --pythia-terra: #E8966A;
  --pythia-terra-grund: #2A1D1A;
}

/* ============================================================
   HF2.9 — Light Theme (neuer Default · Issue #54)
   ------------------------------------------------------------
   User-Direktive 17.07.2026: Light = Default, Dark bleibt per Toggle.
   Mechanik: die :root oben behält die Dark-Werte (greift bei
   data-theme="dark" + als JS-aus-Fallback); dieser Block überschreibt
   sie, sobald data-theme="light" gesetzt ist (Default via Pre-Paint-Script).
   Prinzip „tokenize-don't-recolor": jeder Wert WCAG-AA-kalibriert
   (≥4.5:1 Text / ≥3:1 UI), verifiziert per scratchpad/contrast.mjs.
   ============================================================ */
:root[data-theme="light"] {
  color-scheme: light;
  --bg-base: #F4F6F9;
  --bg-card: #FFFFFF;
  --bg-card2: #EEF1F6;
  --bg-hover: #E4E9F1;
  --bg-input: #FFFFFF;
  --border: #D5DCE6;
  --border-light: #C3CDDA;

  --primary: #006EC7;
  --primary-dark: #0057A0;
  --primary-text: #0057A0;      /* PR1.279 — dunklere Markenstufe: --primary reicht auf --bg-base (4.78:1), aber nicht auf dem lila Chip-Grund von .chip__rating (3.38:1); mit dieser Stufe 4.77:1 */
  --primary-glow: rgba(0, 110, 199, 0.25);
  --accent: #0E7490;
  --accent-glow: rgba(14, 116, 144, 0.18);
  --success: #047857;
  --warning: #B45309;
  --danger: #C81E1E;
  --success-light: #059669;
  --attention: #A16207;
  --info: #1d4ed8;   /* PR1.114 K7 — Info-Blau abgedunkelt (AA 6.70:1 auf Weiß) */
  --purple: #6D28D9;
  --util-ok: #4D7C0F;   /* adesso-Grün abgedunkelt (AA 4.99:1 auf Weiß) */

  /* Hyperscaler — Markenton beibehalten, aber auf Hell AA-fähig abgedunkelt */
  --aws: #B45309;
  --azure: #006EC7;
  --gcp: #1E7E34;
  --ovh: #123F6D;
  --stackit: #B00069;
  --multi: #6D28D9;

  /* Status / Pipeline */
  --lead: #586072;
  --qualification: #B45309;
  --proposal: #006EC7;
  --won: #047857;
  --lost: #C81E1E;
  --running: #0E7490;

  --text-1: #0B1A2B;   /* PR1.567 — Tinte mit Navy-Stich (Typografie v2) */
  --text-2: #435066;
  --text-3: #5F6B7E;

  /* Schatten — im Hellen dezent statt schwarz-schwer */
  --shadow-sm: 0 1px 2px rgba(16, 23, 38, 0.08);
  --shadow: 0 4px 12px rgba(16, 23, 38, 0.10);
  --shadow-lg: 0 8px 28px rgba(16, 23, 38, 0.14);

  /* Phantom-Tokens (Light) */
  --surface-2: #F4F6F9;
  --surface-3: #E4E9F1;
  --text: #0E1726;
  /* PR1.324 #533 — Pythia-Terrakotta (Light) */
  --pythia-terra: #9A4A1E;
  --pythia-terra-grund: #FBEBE1;
}

/* HF2.9 #54 — Light Theme: Komponenten-Overrides
   ------------------------------------------------------------
   Additiv (BB4): heilt hartkodierte Komponenten-Farben, die NICHT über
   var(--token) laufen und im Light-Theme sonst nicht adaptieren. Nur NEUE
   [data-theme="light"]-Regeln → Dark bleibt byte-identisch (nie in-place).
   Prinzip: heller Tint via color-mix(<token> ~8%, white), Text = dunkle,
   AA-kalibrierte Token-Variante. Tint bewusst niedrig (8%) gehalten, damit
   die auf WEISS kalibrierten Tokens auch auf dem leicht getönten Grund
   ≥4.5:1 bleiben. */

/* Fehlende Fallback-Tokens im Light-Scope definieren.
   --text-primary/--text-secondary/--bg-card-alt/--bg-subtle/--bg-1 werden
   projektweit nur als var(--x, <dark-fallback>) referenziert, NIE definiert
   → im Dark greift der weiße/graue/dunkle Fallback (unverändert), im Light
   wären es unlesbare weiße Texte / unsichtbare Flächen. Hier einmalig auf die
   AA-Light-Tokens gemappt → ~30 Fundstellen (sb-count, sr-*, hf327-*, staff-*,
   linking-*, enrich-* …) auf einen Schlag geheilt. */
:root[data-theme="light"] {
  --text-primary: var(--text-1);
  --text-secondary: var(--text-2);
  --bg-card-alt: var(--bg-card2);
  --bg-subtle: var(--bg-card2);
  --bg-1: var(--bg-card);
}

/* — Hyperscaler-/Portfolio-Badges (hartkodierte helle Textfarben #4da8e8/
     #4ade80/#5b9bd5/#e5007d/#a78bfa → unsichtbar auf Weiß) — */
[data-theme="light"] .badge-pf.cc-platforms { color: var(--purple); border-color: color-mix(in srgb, var(--purple) 30%, white); }

/* — Qualification-Heatmap (.comp-0..5: harte rgba-Flächen + helle Labels) —
     Ramp rot→orange→amber→grün→grün mit AA-sicheren dunklen Tokens; comp-4
     nutzt --gcp (Forstgrün), comp-5 --success (Tealgrün) zur Abgrenzung. */
[data-theme="light"] .comp-0 { background: var(--bg-card2); color: var(--text-3); }
[data-theme="light"] .comp-1 { background: color-mix(in srgb, var(--danger) 8%, white);    color: var(--danger); }
[data-theme="light"] .comp-2 { background: color-mix(in srgb, var(--warning) 8%, white);   color: var(--warning); }
[data-theme="light"] .comp-3 { background: color-mix(in srgb, var(--attention) 8%, white); color: var(--attention); }
[data-theme="light"] .comp-4 { background: color-mix(in srgb, var(--gcp) 8%, white);       color: var(--gcp); }
[data-theme="light"] .comp-5 { background: color-mix(in srgb, var(--success) 8%, white);   color: var(--success); }

/* — Einsatzplan / Capacity: Chips, Badges, dunkle Border/Flächen — */
[data-theme="light"] .opp-filter-chip-staffability                    { background: color-mix(in srgb, var(--success) 8%, white);   border-color: var(--success);   color: var(--success); }
[data-theme="light"] .opp-filter-chip-staffability.bucket-partly      { background: color-mix(in srgb, var(--attention) 8%, white); border-color: var(--attention); color: var(--attention); }
[data-theme="light"] .opp-filter-chip-staffability.bucket-notStaffable{ background: color-mix(in srgb, var(--danger) 8%, white);    border-color: var(--danger);    color: var(--danger); }
[data-theme="light"] .dash-freeing-count   { background: color-mix(in srgb, var(--attention) 8%, white); }
[data-theme="light"] .cap-drilldown-chip   { background: color-mix(in srgb, var(--primary) 8%, white);   border-color: color-mix(in srgb, var(--primary) 30%, white); }
[data-theme="light"] .cap-drilldown-chip:hover { background: color-mix(in srgb, var(--primary) 14%, white); }
[data-theme="light"] .staff-detail-table th,
[data-theme="light"] .staff-detail-table td { border-bottom-color: var(--border); }
[data-theme="light"] .staff-cand-score       { color: var(--text-2); }

/* — Dashboard-Pill mit hartkodiertem #eab308 (unlesbar auf Weiß) — */
[data-theme="light"] .dash-ending-pill { background: color-mix(in srgb, var(--warning) 8%, white); color: var(--warning); border-color: color-mix(in srgb, var(--warning) 30%, white); }

/* — Employee-Detail / Enrich-Dialog — */
/* Hartkodierte helle Textfarben */
[data-theme="light"] .sr-score-ki  { background: color-mix(in srgb, var(--primary) 8%, white); color: var(--primary); }
[data-theme="light"] .sr-score-det { background: color-mix(in srgb, var(--success) 8%, white); color: var(--success); }
[data-theme="light"] .sr-score-current { background: var(--bg-card2); }
/* Weiße Overlay-Separatoren (rgba(255,255,255,.04)) → dezente Light-Border */
[data-theme="light"] .emp-kv,
[data-theme="light"] .emp-coaching-entry,
[data-theme="light"] .linking-row td { border-color: var(--border); }
/* Weiße/dunkle Overlay-Flächen → helle Surface; Input auf Weiß + Light-Border */
[data-theme="light"] .chip--sub,
[data-theme="light"] .emp-cert-entry,
[data-theme="light"] .emp-photo-drop,
[data-theme="light"] .linking-table th,
[data-theme="light"] .emp-allocations-empty,
[data-theme="light"] .emp-alloc-row,
[data-theme="light"] .emp-alloc-grid input { background: var(--bg-input); border-color: var(--border); }

/* — Prominente hartkodierte Schatten (rgba(0,0,0,.35–.5)) im Hellen zu schwer
     → auf die dezenten Light-Shadow-Tokens abmildern — */
[data-theme="light"] .autocomplete-dropdown { box-shadow: var(--shadow); }
[data-theme="light"] .opp-action-menu,
[data-theme="light"] .project-action-menu   { box-shadow: var(--shadow); }
[data-theme="light"] .notification-banner   { box-shadow: var(--shadow-lg); }
[data-theme="light"] .ai-banner             { box-shadow: var(--shadow-sm); }

/* ── Strict-AA-Nachzug (Option C — WCAG-AA ausnahmslos, ≥4.5:1 Text) ──────
   Rein additiv: alle Regeln hier stehen NACH ihren Erstdeklarationen oben →
   bei gleicher Spezifität gewinnt die spätere. Damit wird KEINE Zeile oben
   in-place geändert (0 Deletions, zeilendisjunkt zu #237); die 8%-Tints
   bleiben als Basis stehen, werden hier nur wo nötig übersteuert.
   Endverhältnisse je Zeile aus sRGB-Handrechnung gegen den neuen Tint-Grund. */

/* (a) Zuvor als „marginal" (~4.2–4.4:1) belassene Tint-Pills strikt gemacht:
   dichter Roh-Tint (.18–.22) → hellerer color-mix, Text = dunkle Token-Variante
   (Text-Token ist bereits gesetzt; hier nur der Hintergrund). */
[data-theme="light"] .confidence-badge.confidence-high { background: color-mix(in srgb, var(--success) 8%, white); }  /* success  ~4.9:1 */
[data-theme="light"] .confidence-badge.confidence-med  { background: color-mix(in srgb, var(--warning) 6%, white); }  /* warning  ~4.6:1 */
[data-theme="light"] .confidence-badge.confidence-low  { background: color-mix(in srgb, var(--danger) 8%, white); }   /* danger   ~5.0:1 */
[data-theme="light"] .emp-cert-expired  { background: color-mix(in srgb, var(--danger) 8%, white); }   /* danger  ~5.0:1 */
[data-theme="light"] .emp-cert-expiring { background: color-mix(in srgb, var(--warning) 6%, white); }  /* warning ~4.6:1 */
[data-theme="light"] .dash-status-won   { background: color-mix(in srgb, var(--success) 8%, white); }  /* success ~4.9:1 */
[data-theme="light"] .dash-status-lost  { background: color-mix(in srgb, var(--danger) 8%, white); }   /* danger  ~5.0:1 */
[data-theme="light"] .dash-free-pill    { background: color-mix(in srgb, var(--success) 8%, white); }  /* success ~4.9:1 */
[data-theme="light"] .dash-auftrag-pill { background: color-mix(in srgb, var(--primary) 8%, white); }  /* primary ~4.6:1 */

/* (b) Tokens mit L≈warning/attention (#B45309 / #A16207): auf 8%-Tint nur
   ~4.44–4.50:1 → auf 6% aufgehellt (spätere Regel gewinnt) → ≥4.55:1.
   (--aws ist im Light identisch #B45309, daher gleiche Behandlung.)
   --azure/--primary (#006EC7 ~4.6) und --gcp (#1E7E34 ~4.6) liegen auf 8%
   bereits ≥4.5 → bewusst NICHT angefasst. */
[data-theme="light"] .comp-2                                     { background: color-mix(in srgb, var(--warning) 6%, white); }    /* warning   ~4.6:1 */
[data-theme="light"] .comp-3                                     { background: color-mix(in srgb, var(--attention) 6%, white); }  /* attention ~4.55:1 */
[data-theme="light"] .dash-ending-pill                           { background: color-mix(in srgb, var(--warning) 6%, white); }    /* warning   ~4.6:1 */
[data-theme="light"] .opp-filter-chip-staffability.bucket-partly { background: color-mix(in srgb, var(--attention) 6%, white); }  /* attention ~4.55:1 */
[data-theme="light"] .dash-freeing-count                         { background: color-mix(in srgb, var(--attention) 6%, white); }  /* attention ~4.55:1 */
[data-theme="light"] .cap-drilldown-chip:hover                   { background: color-mix(in srgb, var(--primary) 10%, white); }   /* primary-Hover ~4.5:1 (Schwelle) */

/* (d) PR1.147 (#296) — Ampel-Score-Kachel der KI-Kandidatenliste. Erster
   Light-Override im .opp-cand-*-Namensraum überhaupt. Die getönten Stufen
   (tier-good/-ok) werden im Hellen zum weiß-basierten 6–8%-Tint, Textfarbe
   bleibt das Token (= die dunkle AA-Light-Variante).
   tier-high ist in beiden Themes gefüllt (Begründung an der Basisregel); im
   Light ist --success dunkel (#047857) → weiße Schrift, 5.48:1.
   Gemessen gegen --bg-card (#FFFFFF): high 5.48:1 · good 4.90:1 · ok 4.56:1. */
[data-theme="light"] .opp-cand-scoretile.tier-high {
  color: #fff;
}
[data-theme="light"] .opp-cand-scoretile.tier-good {
  background: color-mix(in srgb, var(--success) 8%, white);
  border-color: color-mix(in srgb, var(--success) 30%, white);
  /* NICHT --success-light erben: das ist im Light #059669 und reißt AA auf
     jedem Tint (max 3.6:1). Dasselbe Grün wie tier-high, nur getönt statt
     gefüllt — die Stufe trägt die Intensität, nicht der Farbton. */
  color: var(--success);
}
[data-theme="light"] .opp-cand-scoretile.tier-ok {
  background: color-mix(in srgb, var(--attention) 6%, white);
  border-color: color-mix(in srgb, var(--attention) 30%, white);
}

/* (e) PR1.148 (#297) — Detail-Kiste. Nur EIN Token braucht im Hellen eine Korrektur:
   --success-light ist dort #059669 und reißt auf jedem Tint AA (max 3.6:1) — dieselbe
   Falle, die schon bei tier-good dokumentiert ist. Der „Stärken"-Chip erbt deshalb
   --success (#047857, dunkel) statt --success-light. Alle übrigen neuen Flächen tragen
   Text in --attention (#A16207), --info (#1d4ed8) oder --text-2 (#4A5568) — alle im
   Hellen bereits dunkel und auf einem 10–18%-Tint über Weiß AA-fest. */
[data-theme="light"] .opp-cand-chip-ok {
  background: color-mix(in srgb, var(--success) 10%, white);
  border-color: color-mix(in srgb, var(--success) 30%, white);
  color: var(--success);
}
[data-theme="light"] .opp-cand-metric-fill.high { background: var(--success); }
/* --attention ist im Hellen #A16207 und trägt auf dem EIGENEN Tint nur bis 6 % noch AA
   (4.92:1 auf der blanken Karte, 4.03:1 bei 15 %). Im Dunklen sind es 9.61:1 — dort
   bleiben die 15 % der Basisregel stehen. Dieselbe Asymmetrie wie bei tier-ok. */
[data-theme="light"] .opp-cand-chip-assumed,
[data-theme="light"] .opp-cand-chip-tentative {
  background: color-mix(in srgb, var(--attention) 5%, white);
  border-color: color-mix(in srgb, var(--attention) 32%, white);
}

/* ── Reset ── */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-size: 15px; /* rem-Basis der App (PR1.567: bewusst Literal, nicht die Rolle) */
  scroll-behavior: smooth;
}

body {
  font-family: 'Fira Sans', system-ui, sans-serif;
  font-size: var(--fs-body);
  letter-spacing: var(--ls-body);
  font-kerning: normal;
  background: var(--bg-base);
  color: var(--text-1);
  min-height: 100vh;
  overflow-x: hidden;
}

a {
  color: inherit;
  text-decoration: none;
}

button {
  font-family: inherit;
  cursor: pointer;
  border: none;
  background: none;
}

input,
select,
textarea {
  font-family: inherit;
}

/* PR1.64 — Native <option>/<optgroup>-Popups erben Theme-Farben nicht
   zuverlässig (Simon-Finding 13.07: „CC wählen" = weiße Schrift auf weißem
   Grund). Explizite Token-Farben halten die Optionsliste im Dark-Theme lesbar.
   Token-basiert → adaptiert automatisch an einen späteren Light-Mode (#54). */
option,
optgroup {
  background-color: var(--bg-input);
  color: var(--text-1);
}

/* ── Scrollbar ── */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

::-webkit-scrollbar-track {
  background: var(--bg-base);
}

::-webkit-scrollbar-thumb {
  background: var(--border-light);
  border-radius: 99px;
}

/* ============================================================
   LAYOUT
   ============================================================ */

.app-wrapper {
  display: flex;
  height: 100vh;
  overflow: hidden;
}

/* ── Sidebar ── */
.sidebar {
  width: 240px;
  flex-shrink: 0;
  background: var(--bg-card);
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  padding: 0 0 20px;
  overflow-y: auto;
  z-index: 100;
}

.sidebar-logo {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 24px 20px 20px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 12px;
}

.sidebar-logo .logo-icon {
  width: 36px;
  height: 36px;
  flex-shrink: 0;
  object-fit: contain;
}

.sidebar-logo .logo-text {
  font-family: 'Fira Sans', sans-serif;
  font-size: var(--fs-ui);
  font-weight: 500;
  line-height: 1.3;
}

.sidebar-logo .logo-text span {
  display: block;
  font-family: 'Fira Sans', sans-serif;
  color: var(--text-2);
  font-weight: 400;
  font-size: var(--fs-label);
}

nav .nav-section-label {
  font-size: var(--fs-label);
  font-weight: 500;
  color: var(--text-3);
  padding: 14px 20px 6px;
}

/* PR1.223 #383 — die Hauptpunkte sind seit diesem Ticket echte <button>-Elemente statt
   <div>. Vorher war die gesamte Hauptnavigation nicht per Tabulator erreichbar. Der Block
   unten setzt deshalb zuerst die Vorgaben der Schaltfläche zurück; die Optik bleibt
   unverändert. Kein role/tabindex-Ersatz — echte Schaltflächen bringen Enter UND Leertaste
   von sich aus mit. */
.nav-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 20px;
  border-radius: var(--radius-sm);
  margin: 2px 8px;
  font-size: var(--fs-body);
  font-weight: 500;
  color: var(--text-2);
  cursor: pointer;
  transition: all var(--transition);
  position: relative;
  /* Zurücksetzung der Schaltflächen-Vorgaben */
  width: calc(100% - 16px);
  background: none;
  border: 0;
  font-family: inherit;
  text-align: left;
}

.nav-item:hover {
  background: var(--bg-hover);
  color: var(--text-1);
}

.nav-item.active {
  background: linear-gradient(90deg, rgba(99, 102, 241, .18), rgba(99, 102, 241, .06));
  color: var(--primary);
  border-left: 2px solid var(--primary);
  margin-left: 8px;
  padding-left: 18px;
}

.nav-item:focus-visible,
.nav-subitem:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: -2px;
}

.nav-item .nav-icon {
  font-size: var(--fs-section);
  width: 20px;
  text-align: center;
}

/* 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 (aria-expanded, Pfeiltasten, gemerkter Zustand), die hier nur
   Aufwand ohne Gegenwert wäre. Bewusst ohne Animation — tägliche Navigation. */
.nav-sub {
  display: flex;
  flex-direction: column;
  margin: 0 8px 4px;
}

.nav-subitem {
  padding: 5px 20px 5px 50px;
  border-radius: var(--radius-sm);
  font-size: var(--fs-ui);
  font-weight: 500;
  /* --text-2, nicht --text-3: das ist ein Bedienelement, kein Nebentext. */
  color: var(--text-2);
  cursor: pointer;
  transition: all var(--transition);
  width: 100%;
  background: none;
  border: 0;
  font-family: inherit;
  text-align: left;
}

.nav-subitem:hover {
  background: var(--bg-hover);
  color: var(--text-1);
}

.nav-subitem.active {
  color: var(--primary);
  font-weight: 600;
}

.nav-badge {
  margin-left: auto;
  background: var(--primary);
  color: white;
  font-size: var(--fs-label);
  font-weight: 500;
  padding: 2px 7px;
  border-radius: 99px;
  min-width: 20px;
  text-align: center;
}

.sidebar-footer {
  margin-top: auto;
  padding: 16px 20px 0;
  border-top: 1px solid var(--border);
}

.user-chip {
  display: flex;
  align-items: center;
  gap: 10px;
}

.btn-logout {
  background: none;
  border: 1px solid var(--border);
  color: var(--text-2);
  cursor: pointer;
  border-radius: 6px;
  padding: 4px 8px;
  font-size: var(--fs-body);
  transition: all var(--transition);
  margin-left: auto;
}

.btn-logout:hover {
  color: var(--danger);
  border-color: var(--danger);
}

.avatar {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--primary), var(--purple));
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--fs-ui);
  font-weight: 500;
  flex-shrink: 0;
}

.user-info {
  font-size: var(--fs-ui);
  font-weight: 500;
  line-height: 1.3;
}

.user-info span {
  display: block;
  font-size: var(--fs-label);
  color: var(--text-3);
  font-weight: 400;
}

/* ── Main ── */
.main {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.topbar {
  background: var(--bg-card);
  border-bottom: 1px solid var(--border);
  padding: 0 28px;
  height: 62px;
  display: flex;
  align-items: center;
  gap: 16px;
  flex-shrink: 0;
}

.topbar-title {
  font-size: var(--fs-section);
  font-weight: 600;
  flex: 1;
}

.topbar-title span {
  color: var(--text-3);
  font-weight: 400;
  font-size: var(--fs-body);
  margin-left: 8px;
}

.content {
  flex: 1;
  overflow-y: auto;
  /* BF-118 (#807) — am Ende nicht an das Dokument weiterreichen, sonst rutscht der Rahmen. */
  overscroll-behavior: contain;
  padding: 28px;
}

/* BF-118 (#807) — der leere Container der Anhang-Vorschau (index.html, class="modal") lag
   geschlossen im Dokumentfluss unter dem App-Rahmen; sein 1px-Rahmen machte das Dokument
   2px hoeher als das Fenster. Am Ende jeder Scrollbox scrollte dann das Dokument weiter und
   nahm Sidebar und Kopfleiste mit. Geoeffnet traegt er immer `.open` (beide Shells). */
#kb-attachment-preview-modal:not(.open) { display: none; }

/* BF-118 (#807) — Schutzgürtel klassische Shell: .app-wrapper fuellt das Fenster, das Dokument
   selbst scrollt nie. Absolut positionierte Vorlese-Texte (.sr-only) ohne positionierten
   Vorfahren verlaengerten das Dokument sonst um tausende Pixel (Opp-Detail), und ein Rad ueber
   Sidebar oder Kopfleiste schob den ganzen Rahmen weg. Nur mit App-Rahmen — login.html u. a.
   scrollen weiter normal. Der Druckblock weiter unten setzt das zurueck. */
html:has(> body > .app-wrapper) { overflow: hidden; overscroll-behavior: none; }

/* ============================================================
   COMPONENTS
   ============================================================ */

/* ── Buttons ── */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 16px;
  border-radius: var(--radius-sm);
  font-size: var(--fs-body);
  font-weight: 500;
  transition: all var(--transition);
  white-space: nowrap;
}

.btn-primary {
  background: var(--primary);
  color: white;
  box-shadow: 0 2px 12px var(--primary-glow);
}

.btn-primary:hover {
  background: var(--primary-dark);
  transform: translateY(-1px);
  box-shadow: 0 4px 16px var(--primary-glow);
}

.btn-secondary {
  background: var(--bg-hover);
  color: var(--text-1);
  border: 1px solid var(--border-light);
}

.btn-secondary:hover {
  background: var(--border);
}

.btn-ghost {
  color: var(--text-2);
  padding: 7px 12px;
}

.btn-ghost:hover {
  color: var(--text-1);
  background: var(--bg-hover);
  border-radius: var(--radius-sm);
}

.btn-sm {
  padding: 5px 12px;
  font-size: var(--fs-meta);
}

.btn-danger {
  background: rgba(239, 68, 68, .15);
  color: var(--danger);
  border: 1px solid rgba(239, 68, 68, .3);
}

.btn-danger:hover {
  background: rgba(239, 68, 68, .25);
}

/* PR1.293 (#494) — Loeschen in einer Tabellenzeile. `.btn-danger` waere hier zu laut: es
   traegt Flaeche und Rahmen und zoege in einer Zeile mit drei weiteren Knoepfen die
   Aufmerksamkeit auf sich, obwohl Loeschen die seltenste der vier Aktionen ist. Diese
   Variante bleibt ein Ghost-Knopf und faerbt nur die Schrift — erst beim Ueberfahren
   kommt Flaeche dazu, im Moment der Absicht. */
.btn-danger-ghost { color: var(--danger); }
.btn-danger-ghost:hover {
  background: rgba(239, 68, 68, .12);
  border-color: rgba(239, 68, 68, .3);
  color: var(--danger);
}

.btn-success {
  background: rgba(16, 185, 129, .15);
  color: var(--success);
  border: 1px solid rgba(16, 185, 129, .3);
}

.btn-icon {
  padding: 7px;
  border-radius: var(--radius-sm);
}

/* ── PR1.14: Filter-Reset-Button (uniform in allen 5 Views) ── */
.btn-filter-reset {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}

/* PR1.60 (#208): count=0 → disabled/ausgegraut statt hidden (Button bleibt sichtbar,
   kein Layout-Sprung nach dem Zurücksetzen). Folgt dem bestehenden Disabled-Muster. */
.btn-filter-reset:disabled {
  opacity: .5;
  cursor: not-allowed;
}

.btn-filter-reset .count-badge {
  display: inline-flex;
  align-items: center;
  padding: 1px 7px;
  border-radius: 999px;
  font-size: var(--fs-label);
  font-weight: 500;
  background: rgba(99, 102, 241, .18);
  color: var(--primary, #818cf8);
  border: 1px solid rgba(99, 102, 241, .35);
  line-height: 1.4;
}

/* ── Cards ── */
.card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 20px;
  transition: border-color var(--transition), box-shadow var(--transition);
}

.card:hover {
  border-color: var(--border-light);
}

.card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 18px;
}

.card-title {
  font-size: var(--fs-body);
  font-weight: 600;
}

.card-subtitle {
  font-size: var(--fs-meta);
  color: var(--text-2);
  margin-top: 2px;
}

/* ── KPI Cards ── */
.kpi-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 16px;
  margin-bottom: 24px;
}

.kpi-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 20px;
  position: relative;
  overflow: hidden;
  transition: all var(--transition);
}

.kpi-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--kpi-color, var(--primary));
  border-radius: 2px 2px 0 0;
}

.kpi-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow);
  border-color: var(--border-light);
}

/* PR1.337 (#551) — klickbare Kennzahl-Kachel (Dashboard-Reiter „Opportunities").
   Echter <button> mit der Optik der .kpi-card; Hover kommt von .kpi-card:hover.
   Die Spans im Knopf (ein <button> traegt nur Phrasing-Inhalt) stehen als Bloecke. */
.kpi-card-btn {
  font: inherit;
  color: inherit;
  text-align: left;
  width: 100%;
  cursor: pointer;
}
.kpi-card-btn .kpi-value,
.kpi-card-btn .kpi-label { display: block; }
.kpi-card-btn:hover { border-color: var(--primary); }
.kpi-card-btn:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }

.kpi-icon {
  font-size: var(--fs-title);
  margin-bottom: 10px;
  display: block;
}

.kpi-value {
  font-family: var(--font-num);
  font-size: var(--fs-kpi);
  font-weight: 500;
  letter-spacing: var(--ls-kpi);
  font-variant-numeric: tabular-nums lining-nums;
  line-height: 1;
  margin-bottom: 4px;
}

.kpi-label {
  font-size: var(--fs-meta);
  color: var(--text-2);
  font-weight: 500;
}

.kpi-delta {
  font-size: var(--fs-label);
  margin-top: 8px;
  display: flex;
  align-items: center;
  gap: 4px;
}

.kpi-delta.positive {
  color: var(--success);
}

.kpi-delta.negative {
  color: var(--danger);
}

.kpi-delta.neutral {
  color: var(--text-3);
}

/* ── Badges / Tags ── */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 9px;
  border-radius: 99px;
  font-size: var(--fs-label);
  font-weight: 500;
}







/* PR1.414 (#648) — Hyperscaler-Logos (hyperscaler-logo.js), beide Shells. Logos in Originalfarbe,
   direkt auf dem Grund (PO-Entscheid); Logos mit dunkler Schrift haben eine helle Zweitfassung.
   Klassisch: dunkel ist Standard, hell ueber [data-theme="light"]. Die Redesign-Shell stellt in
   style-redesign.css (.crm) selbst um. Keine Animation: taeglich ueberflogen. */
.hs-logo { display: inline-flex; align-items: center; gap: 6px; vertical-align: middle; white-space: nowrap; line-height: 1.2; }
.hs-logo--compact { gap: 4px; }
/* PR1.430 (#675) — eine Groesse: 24 px in Masken, Listen, Kanban und Detail (Entscheid 22.10.2026
   am Bild „Logo-Groessen"); 16 px (.hs-logo--sm) nur in den Filterleisten. Wortbilder werden
   optisch angeglichen: VMware fuellt die Hoehe ganz, STACKIT nur zur Haelfte, „aws" mit Bogen. */
.hs-logo-img { display: inline-block; height: 24px; width: auto; max-width: 7rem; flex: none; object-fit: contain; }
.hs-logo-img--wordmark { height: 22px; }
.hs-logo-img--vmware { height: 14px; }
.hs-logo-img--stackit { height: 20px; }
.hs-logo--sm .hs-logo-img { height: 16px; max-width: 4.5rem; }
.hs-logo--sm .hs-logo-img--wordmark { height: 15px; }
.hs-logo--sm .hs-logo-img--vmware { height: 9px; }
.hs-logo--sm .hs-logo-img--stackit { height: 13px; }
.hs-logo--sm { gap: 5px; }
.hs-logo-name { font-size: var(--fs-ui); color: var(--text-1); }
.hs-logo-img--light { display: none; }
[data-theme="light"] .hs-logo-img--light { display: inline-block; }
[data-theme="light"] .hs-logo-img--dark { display: none; }
.hs-tag-src { font-size: var(--fs-meta); color: var(--text-2); margin-left: 2px; }
.dbp-logo { margin-right: 6px; }
.dbp-logo .hs-logo-img { height: .9rem; }
.dbp-logo .hs-logo-img--wordmark { height: .7rem; max-width: 3.5rem; }
.dbp-logo .hs-logo-img--vmware { height: .5rem; }
/* PR1.441 (#683) — Hyperscaler-Kompetenz: Logo + Stufe + 4er-Leiste + Belege statt Sternen
   (hyperscaler-competency-model.js, beide Shells; Redesign-Farben in style-redesign.css .crm).
   Keine Animation: die Karte wird beim Besetzen mehrmals taeglich ueberflogen. */
.hs-comp { display: flex; flex-direction: column; gap: .5rem; }
.hs-comp-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .125rem; }
.hs-comp-row { display: grid; align-items: center; column-gap: .75rem; row-gap: .25rem; padding: .5rem .625rem; border-radius: 8px;
  grid-template-columns: 4.5rem minmax(6rem, 1fr) minmax(6.5rem, 1fr) 8.5rem minmax(7rem, 1.6fr); font-size: var(--fs-body); }
.hs-comp-row.is-strongest { background: color-mix(in srgb, var(--primary) 14%, transparent); }
.hs-comp-logo { display: inline-flex; align-items: center; min-height: 1.5rem; }
.hs-comp-logo .hs-logo-img--wordmark { max-width: 4.25rem; }
.hs-comp-name { color: var(--text-1); font-weight: 600; min-width: 0; }
.hs-comp-level { color: var(--text-1); font-weight: 600; }
.hs-comp-evidence { color: var(--text-2); font-size: var(--fs-ui); }
.hs-comp-bar { display: grid; grid-template-columns: repeat(4, 1fr); gap: .1875rem; }
.hs-comp-seg { height: .5rem; border-radius: 2px; background: var(--border-light); }
.hs-comp-seg.is-on { background: var(--primary); }
.hs-comp-row.is-none .hs-comp-name, .hs-comp-row.is-none .hs-comp-level { color: var(--text-3); font-weight: 500; }
.hs-comp-row.is-none .hs-comp-logo { opacity: .55; }
.hs-comp-conflict { grid-column: 2 / -1; display: inline-flex; align-items: center; gap: .375rem; font-size: var(--fs-meta); color: var(--warning); }
.hs-comp-sort { display: inline-flex; align-items: center; gap: .25rem; align-self: flex-start; padding: .1875rem; border-radius: 8px;
  background: var(--bg-card2); border: 1px solid var(--border-light); }
.hs-comp-sort-label { font-size: var(--fs-meta); color: var(--text-2); padding: 0 .5rem 0 .375rem; }
.hs-comp-sort-btn { font: inherit; font-size: var(--fs-ui); padding: .3125rem .75rem; border-radius: 6px; border: 1px solid transparent;
  background: transparent; color: var(--text-2); cursor: pointer; }
.hs-comp-sort-btn:hover { color: var(--text-1); }
.hs-comp-sort-btn[aria-pressed="true"] { background: var(--bg-card); color: var(--text-1); font-weight: 600; border-color: var(--border-light); }
.hs-comp-sort-btn:focus-visible, .hs-level-opt:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.hs-comp-foot { margin: 0; font-size: var(--fs-meta); color: var(--text-2); }
.hs-comp-empty { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem; }
.hs-comp-empty p { margin: 0; font-size: var(--fs-body); color: var(--text-2); }
/* rechte Spalte: Name + Belege uebereinander, Leiste kurz, kein Schalter.
   PR1.521 (#801) — feste Spalten Logo · Name/Belege · Stufe · Leiste (Entwurf 03); Name und
   Belegzeile einzeilig mit Auslassung, voller Text im Tooltip — nichts ueberlappt mehr. */
.hs-comp--compact .hs-comp-row { grid-template-columns: 30px minmax(0, 1fr) 92px 58px; column-gap: 10px; padding: .375rem .25rem; font-size: var(--fs-ui); }
.hs-comp--compact .hs-comp-name { display: block; min-width: 0; }
.hs-comp--compact .hs-comp-name-text,
.hs-comp--compact .hs-comp-evidence { display: block; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hs-comp--compact .hs-comp-evidence { font-weight: 400; font-size: var(--fs-label); }
.hs-comp--compact .hs-comp-level { font-size: var(--fs-meta); text-align: right; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hs-comp--compact .hs-comp-logo { justify-content: center; }
.hs-comp--compact .hs-comp-logo .hs-logo-img--wordmark { max-width: 30px; }
/* PR1.521 (#801) — Kompetenzen-Karte: Kopf mit Umschalter Cloud | Portfolio, Portfolio-Zeilen. */
.comp-card { display: flex; flex-direction: column; gap: .5rem; min-width: 0; }
.comp-card-head { display: flex; align-items: center; justify-content: space-between; gap: .5rem; flex-wrap: wrap; }
.comp-card-head .comp-card-title { margin: 0; }
.comp-card--full .comp-card-head { justify-content: flex-start; }
.comp-tabs { display: inline-flex; gap: .125rem; padding: .1875rem; border-radius: 8px; background: var(--bg-card2); border: 1px solid var(--border-light); }
.comp-tab { font: inherit; font-size: var(--fs-meta); font-weight: 500; padding: .25rem .75rem; border-radius: 6px; border: 1px solid transparent;
  background: transparent; color: var(--text-2); cursor: pointer; }
.comp-tab:hover { color: var(--text-1); }
.comp-tab[aria-pressed="true"] { background: var(--bg-card); color: var(--text-1); border-color: var(--border-light); }
.comp-tab:focus-visible, .comp-link:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.comp-link { font: inherit; padding: 0; border: 0; background: none; color: var(--primary); cursor: pointer; text-decoration: underline; text-underline-offset: 2px; }
.comp-pf-dot { display: inline-block; width: 10px; height: 10px; border-radius: 3px; background: var(--border-light); }
.comp-pf-dot--2 { background: color-mix(in srgb, var(--primary) 45%, transparent); }
.comp-pf-dot--3 { background: color-mix(in srgb, var(--primary) 70%, transparent); }
.comp-pf-dot--4 { background: var(--primary); }
.comp-pf-dot--1 { background: color-mix(in srgb, var(--primary) 25%, transparent); }
.comp-pf-row.is-conflict .hs-comp-evidence, .comp-pf-row.is-conflict .hs-comp-level, .hs-comp-hint { color: var(--warning); }
.hs-comp-hint .icon, .hs-comp-hint svg { width: .75rem; height: .75rem; vertical-align: -.125rem; }
.comp-pf-foot { min-width: 0; }
.comp-pf-mentioned { display: inline-flex; gap: .25rem; min-width: 0; max-width: 100%; }
.comp-pf-names { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.comp-state { margin: 0; font-size: var(--fs-ui); color: var(--text-2); }
.comp-state.is-error { color: var(--warning); }
.hs-comp-none { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; padding: .25rem .5rem 0; font-size: var(--fs-meta); color: var(--text-3); }
.hs-comp-none-item { display: inline-flex; opacity: .55; }
.hs-comp-none-item .hs-logo-img--wordmark { max-width: 2.5rem; }
@media (max-width: 640px) {
  .hs-comp-row { grid-template-columns: 3.5rem minmax(0, 1fr) 6rem; }
  .hs-comp-logo .hs-logo-img--wordmark { max-width: 3.25rem; }
  .hs-comp-row .hs-comp-level { grid-column: 2; grid-row: 2; }
  .hs-comp-row .hs-comp-bar { grid-column: 3; grid-row: 1; }
  .hs-comp-row .hs-comp-evidence { grid-column: 3; grid-row: 2; }
  .hs-comp--compact .hs-comp-row { grid-template-columns: 30px minmax(0, 1fr) 92px 58px; }
  .hs-comp--compact .hs-comp-row .hs-comp-level, .hs-comp--compact .hs-comp-row .hs-comp-bar { grid-row: auto; grid-column: auto; }
}
/* Bearbeiten-Dialog: Stufen-Auswahl statt Sternleiste (eine Radiogruppe je Anbieter) */
.hs-level-grid { display: grid; gap: .625rem; margin-bottom: 14px; }
.hs-level-row { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1rem; }
.hs-level-name { display: inline-flex; align-items: center; gap: .5rem; width: 8.5rem; font-weight: 500; font-size: var(--fs-ui); color: var(--text-1); }
.hs-level-pick { display: inline-flex; flex-wrap: wrap; gap: .25rem; }
.hs-level-opt { font: inherit; font-size: var(--fs-meta); padding: .3125rem .625rem; border-radius: 6px; cursor: pointer;
  border: 1px solid var(--border-light); background: transparent; color: var(--text-2); }
.hs-level-opt:hover { color: var(--text-1); border-color: var(--text-3); }
.hs-level-opt[aria-checked="true"] { background: var(--primary-dark); border-color: var(--primary-dark); color: #fff; font-weight: 600; }
/* Portfolio badges — CC-based color families */
.badge-pf { font-size: var(--fs-label); padding: 2px 8px; border-radius: 10px; }
.badge-pf.cc-advisory    { background: rgba(99, 102, 241, .15); color: var(--primary); border: 1px solid rgba(99, 102, 241, .25); }
.badge-pf.cc-infra       { background: rgba(16, 185, 129, .15); color: var(--success); border: 1px solid rgba(16, 185, 129, .25); }
.badge-pf.cc-app2cloud   { background: rgba(245, 158, 11, .15); color: var(--warning); border: 1px solid rgba(245, 158, 11, .25); }
.badge-pf.cc-platforms   { background: rgba(139, 92, 246, .15); color: #a78bfa;        border: 1px solid rgba(139, 92, 246, .25); }
.badge-pf.cc-integration { background: rgba(6, 182, 212, .15);  color: var(--accent);  border: 1px solid rgba(6, 182, 212, .25); }
.badge-pf.cc-default     { background: rgba(107, 114, 128, .15); color: var(--text-2); border: 1px solid rgba(107, 114, 128, .25); }

/* PR1.207 (#367) — hier standen `.portfolio-grid` und `.portfolio-cc-*`, die Huelle und
   die Gruppen der Portfolio-/Hyperscaler-Kaestchen. Ihr einziger Erzeuger war
   `taxonomy-checkboxes.js`; mit dessen Loeschung sind sie verwaist. `.portfolio-grid`
   haette den Umbau ausserdem aktiv gestoert: `max-height: 260px; overflow-y: auto`
   schnitt die Aufklappliste des Auswahl-Bausteins ab. */

/* RD1.08 (#331) — Ankreuzfelder in den Rollen-Karten sind keine Textfelder.
   `.form-group input { width: 100% }` (siehe Design-System-Block weiter unten) trifft auch
   Checkboxen: das Kaestchen wurde dadurch ~370 px breit und schob seine Beschriftung quer
   durch die Zeile ("Freelancer erlaubt" rutschte unter das Kaestchen, die Portfolio-Spalten
   liefen auseinander). Sichtbar geworden ist es erst, als der Rollen-Editor mit RD1.08 in
   die zweite Shell kam — der Fehler steckt aber im gemeinsamen Markup aus roleCardHtml und
   trat damit in BEIDEN Shells auf.
   Bewusst hier und nicht unter `.crm`: eine Korrektur nur fuer das Redesign haette die
   Opp-Maske kaputt gelassen und genau die Shell-Divergenz erzeugt, die Konvention 20
   verhindern soll. Eng auf die Rollen-Karte begrenzt — die generische `.form-group`-Regel
   bleibt unangetastet. */
.opp-role-card input[type="checkbox"],
.opp-role-card input[type="radio"] { width: auto; flex: 0 0 auto; }

/* PR1.200 #359 — Rahmen und Rhythmus der Rollen-Karte. Standen bis hierher als
   Inline-Styles in roleCardHtml und brachten eigene px-Werte mit (6px Radius,
   8px/10px Polster, 10px Abstaende), die von der uebrigen Maske abwichen. */
.opp-role-card {
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
  margin-bottom: var(--form-block-gap);
}

.opp-role-card > summary {
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
}

/* BF-105 — Name und „1 Person · 1 FTE" untereinander statt verschachtelt im Fliesstext.
   Der Name endet nach zwei Zeilen; der volle Name steht im title des Spans. */
.opp-role-card-title { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.role-name-text {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
  overflow-wrap: anywhere;
}

.opp-role-card-meta {
  font-weight: normal;
  color: var(--text-3);
  font-size: var(--fs-body);
  overflow-wrap: anywhere;
}

/* Gleicher Block-Rhythmus wie in einem Wizard-Schritt (.fw-panel oben). Das erste
   Raster braucht zusaetzlich Luft zur Kopfzeile. */
.opp-role-card > .form-grid,
.opp-role-card > .form-group {
  margin-bottom: var(--form-block-gap);
}

.opp-role-card > summary + .form-grid { margin-top: var(--form-block-gap); }
.opp-role-card > :last-child { margin-bottom: 0; }

.opp-role-card textarea { min-height: 70px; }

/* PR1.455 (#704) — Rolle als Zeile, Personen als Unterzeilen.
   Ein Spaltenraster fuer Kopf und Zeilen: Rolle | Zeitraum | PT | Summe | Aktionen.
   Keine Transition an Balken oder Zahlen (taeglich genutzt; geaenderte PT leuchten nur
   kurz ueber .mo-flash aus motion.js auf, aus bei „Bewegung reduzieren"). */
.role-table-head,
.role-row-sum {
  display: grid;
  grid-template-columns: minmax(170px, 1.6fr) minmax(130px, 1.5fr) 92px 112px 72px;
  align-items: center;
  gap: 12px;
}
.role-table-head {
  padding: 0 12px 4px;
  font-size: var(--fs-meta);
  color: var(--text-3);
}
.role-months { position: relative; height: 1.2em; }
.role-month {
  position: absolute;
  top: 0;
  border-left: 1px solid var(--border);
  padding-left: 3px;
  overflow: hidden;
  white-space: nowrap;
}
.role-month--none { position: static; border: 0; padding: 0; }
.role-num { text-align: right; }

.opp-role-card.role-row { padding: 8px 12px; }
.opp-role-card > summary.role-row-sum { display: grid; list-style: none; }
.opp-role-card > summary.role-row-sum::-webkit-details-marker { display: none; }
.opp-role-card > summary.role-row-sum:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}
.role-figures { display: contents; }
.role-cell { display: flex; flex-direction: column; min-width: 0; }
.role-cell-name { flex-direction: row; align-items: center; gap: 6px; }
/* PR1.502 — Rollenfarbe als Punkt vor dem Namen; Farbe nur auf der Flaeche, nie auf Text. */
.role-color-dot { flex: none; width: 8px; height: 8px; border-radius: 50%; }
.role-caret { display: inline-flex; color: var(--text-3); }
.opp-role-card[open] > summary .role-caret { transform: rotate(90deg); }
/* Aktionen stehen neben dem <summary> (keine Knoepfe im Ausloeser) und liegen ueber dem
   reservierten Platz am Zeilenende. */
.role-row-wrap { position: relative; }
.role-actions {
  position: absolute;
  top: 8px;
  right: 12px;
  display: flex;
  gap: 2px;
}
.role-sub { font-size: var(--fs-meta); font-weight: normal; color: var(--text-3); overflow-wrap: anywhere; }
.role-pt { font-variant-numeric: tabular-nums; }

/* Balken je Person, uebereinander — nur Anzeige, kein Griff, kein Ziehen. */
.role-bars {
  position: relative;
  display: block;
  height: calc(var(--rows, 1) * 6px + (var(--rows, 1) - 1) * 2px);
  min-height: 6px;
  background: var(--bg-subtle);
  border-radius: 3px;
  pointer-events: none;
}
.role-bar {
  position: relative;
  display: block;
  height: 6px;
  margin-bottom: 2px;
  background: var(--primary);
  border-radius: 3px;
}
.role-bar:last-child { margin-bottom: 0; }

/* PR1.495 (#764) — Team und Aufwand auf einen Blick.
   Auslastungsbalken je Rolle: Laenge = Arbeitstage des Zeitraums, Strich bei 100 %,
   Ueberhang schraffiert. Kontingent-Karte mit einem Segment je Rolle (Rollenfarbe nur auf
   Flaechen), 2-px-Fugen, Strich beim Kontingent, Griffe zum Ziehen. Keine Breiten-
   Transition (taeglich genutzt); einzige Bewegung ist die Deckkraft beim Zeigen. */
.role-load { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.role-load-track {
  position: relative;
  display: block;
  height: 8px;
  border-radius: 4px;
  background: var(--bg-subtle);
}
.role-load-fill { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 4px; }
.role-load-over {
  position: absolute;
  top: 0;
  bottom: 0;
  border-radius: 0 4px 4px 0;
  background: repeating-linear-gradient(135deg, var(--danger) 0 2px, transparent 2px 6px);
}
.role-load-end { position: absolute; top: -3px; bottom: -3px; width: 2px; margin-left: -1px; background: var(--text-3); }
.role-load-text {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  font-size: var(--fs-meta);
  color: var(--text-2);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.role-load-text strong { color: var(--text-1); font-weight: 600; }
.role-load.is-over .role-load-text strong { color: var(--danger); }
.role-load.is-missing .role-load-text { color: var(--text-3); white-space: normal; }

.role-head-av { flex: none; width: 28px; height: 28px; font-size: var(--fs-label); }
.role-cell-name .role-name-text { overflow-wrap: normal; hyphens: auto; }

.role-load-hint {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 14px;
  padding: 2px 12px 10px 40px;
  font-size: var(--fs-ui);
}
.role-load-hint[hidden] { display: none; }
.role-load-pill {
  display: inline-flex;
  align-items: center;
  height: 22px;
  padding: 0 9px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--danger) 16%, transparent);
  color: var(--text-1);
  font-weight: 500;
  white-space: nowrap;
}
.role-load-act {
  background: none;
  border: 0;
  padding: 2px 0;
  color: var(--primary-text);
  font: inherit;
  cursor: pointer;
}
.role-load-act:hover { text-decoration: underline; }
.role-load-act:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; border-radius: 2px; }

.role-totals {
  display: flex;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 8px 28px;
  padding: 12px 12px 4px;
  margin-top: 8px;
  border-top: 1px solid var(--border);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.role-totals[hidden] { display: none; }
.role-totals-k { color: var(--text-3); margin-right: 6px; }

.opp-team-finding { margin: 2px 0 12px; max-width: 78ch; color: var(--text-2); line-height: 1.5; }
.opp-team-finding[hidden] { display: none; }
.opp-team-finding b { color: var(--text-1); font-weight: 600; }

.quota-card {
  margin: 4px 0 16px;
  padding: 16px 20px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg-card2);
}
.quota-card-h { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.quota-card-h h4 { margin: 0; font-size: var(--fs-body); font-weight: 600; color: var(--text-1); }
.quota-card-h span { font-size: var(--fs-meta); color: var(--text-3); }
.quota-fig { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-top: 10px; }
.quota-big { font-size: var(--fs-display); line-height: 1.2; font-weight: 600; color: var(--text-1); font-variant-numeric: tabular-nums; }
.quota-of { color: var(--text-2); }
.quota-state { margin-left: auto; color: var(--text-2); font-weight: 500; }
.quota-state.is-over { color: var(--danger); }
.quota-track {
  position: relative;
  height: 36px;
  margin-top: 12px;
  border-radius: 8px;
  background: var(--bg-subtle);
  touch-action: none;
  user-select: none;
}
.quota-seg {
  position: absolute;
  top: 0;
  bottom: 0;
  border-right: 2px solid var(--bg-card2);
  transition: opacity 150ms var(--ease-out);
}
.quota-seg:first-child { border-radius: 8px 0 0 8px; }
.quota-track.has-hi .quota-seg { opacity: .45; }
.quota-track.has-hi .quota-seg.is-hi { opacity: 1; }
.quota-over {
  position: absolute;
  top: 0;
  bottom: 0;
  border-radius: 0 8px 8px 0;
  background: repeating-linear-gradient(135deg, var(--danger) 0 2px, transparent 2px 7px);
}
.quota-limit { position: absolute; top: -6px; bottom: -6px; width: 2px; margin-left: -1px; background: var(--text-1); }
.quota-handle {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 20px;
  margin-left: -11px;
  display: grid;
  place-items: center;
  cursor: ew-resize;
  z-index: 2;
  border-radius: 4px;
}
.quota-handle::after {
  content: "";
  width: 4px;
  height: 22px;
  border-radius: 2px;
  background: var(--text-1);
  opacity: 0;
  transition: opacity 150ms var(--ease-out);
}
.quota-track:hover .quota-handle::after { opacity: .7; }
.quota-handle:hover::after,
.quota-handle.is-active::after,
.quota-handle:focus-visible::after { opacity: 1; }
.quota-handle:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.quota-axis { position: relative; height: 18px; margin-top: 6px; font-size: var(--fs-meta); color: var(--text-3); }
.quota-axis span { position: absolute; transform: translateX(-50%); white-space: nowrap; }
.quota-axis span:first-child { transform: none; }
.quota-axis span.is-quota { color: var(--text-1); font-weight: 500; }
.quota-note { margin: 8px 0 0; font-size: var(--fs-ui); color: var(--text-2); }
@media (prefers-reduced-motion: reduce) {
  .quota-seg, .quota-handle::after { transition: none; }
}

.role-body { margin-top: var(--form-block-gap); }
.role-body > * + * { margin-top: var(--form-block-gap); }
.role-name-field { max-width: 360px; }

.role-persons { display: flex; flex-direction: column; gap: 8px; container: role-persons / inline-size; }
/* Schmal (Standard): Name, dann Umfang | Tagessatz | PT, darunter Zeitraum | Entfernen. Breit (Container ≥ 860px): alles in einer Zeile. Gemessen wird der
   Rollenbereich, nicht das Fenster — die Masken sind schmaler als der Bildschirm. */
.role-person {
  display: grid;
  grid-template-columns: auto auto 1fr;
  grid-template-areas: "name name name" "fte rate pt" "range range del";
  align-items: end;
  gap: 8px 12px;
  padding: 8px 10px;
  background: var(--bg-subtle);
  border-radius: var(--radius-sm);
}
.role-person > .role-person-name { grid-area: name; }
.role-person > .role-person-cell:nth-of-type(2) { grid-area: fte; }
.role-person > .role-person-range { grid-area: range; }
.role-person > .role-person-cell:nth-of-type(4) { grid-area: rate; }
.role-person > .role-person-cell.role-num { grid-area: pt; align-items: flex-end; }
.role-person > .role-person-cell:last-of-type { grid-area: del; justify-self: end; }
@container role-persons (min-width: 860px) {
  .role-person {
    grid-template-columns: 72px auto minmax(220px, 1fr) auto 100px 36px;
    grid-template-areas: "name fte range rate pt del";
  }
}
.role-person-name { align-self: center; font-weight: 500; font-size: var(--fs-body); }
.role-person-cell { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.role-person-cell.role-num { align-items: flex-end; }
.role-person-range .drp { margin: 0; }
.role-person-range .drp-hint { display: none; }
.role-cap { font-size: var(--fs-label); color: var(--text-3); }
.role-person-error {
  grid-column: 1 / -1;
  margin: 0;
  font-size: var(--fs-ui);
  color: var(--warning);
}
.role-person-note { margin: 0; }
/* PR1.494 — eine Zahl je Rolle: Person · Personentage · Tagessatz · Zeitraum in einer Zeile,
   darunter der Rechenweg. Keine Animation; Warn-Ton = vorhandenes --warning. */
.role-slot {
  display: flex; flex-wrap: wrap; align-items: flex-end; gap: 8px 16px;
  padding: 8px 10px; background: var(--bg-subtle); border-radius: var(--radius-sm);
}
.role-slot-cell { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.role-slot-who { flex: 1 1 200px; }
.role-slot-range { flex: 1 1 220px; }
.role-slot-range .drp { margin: 0; }
.role-slot-range .drp-hint { display: none; }
.role-slot > p { flex: 1 0 100%; }
.role-calc { margin: 0; font-size: var(--fs-ui); color: var(--text-2); font-variant-numeric: tabular-nums; }
.role-calc.is-warn { color: var(--warning); }

/* PR1.497 — Rolle als Satz. Der Satz ersetzt Namenszeile, Kennzahlen und Personen-Leiste;
   das <details> darunter traegt nur noch Tagessatz, Skills und Anforderungen. Das Markup der
   ausgeblendeten Teile bleibt (Pflichtfeld-Gate, Wizard, Tests). Keine Animation — nur der
   Farbwechsel bei Hover/Fokus als Rueckmeldung. */
.role-row-wrap.is-sentence { display: block; padding: 6px 0 10px; border-bottom: 1px solid var(--border); }
.role-row-wrap.is-sentence > .role-who-strip,
.role-row-wrap.is-sentence .role-figures,
.role-row-wrap.is-sentence .role-color-dot,
.role-row-wrap.is-sentence .opp-role-card-title,
.role-row-wrap.is-sentence .role-actions-slot,
.role-row-wrap.is-sentence .role-slot-who,
/* Kopf-Avatar und Ueberlast-Hinweis der Zeile: beides traegt jetzt der Satz (Folgezeile mit
   „Auf Vollzeit kürzen" · „Zweite Person") — sonst stuende die Loesung doppelt da. */
.role-row-wrap.is-sentence .role-head-av,
.role-row-wrap.is-sentence > .role-load-hint { display: none; }
#opp-roles-container .role-table-head,
#pm-roles-container .role-table-head,
#project-roles-container .role-table-head,
#crm-opp-roles-container .role-table-head,
#crm-project-roles-container .role-table-head { display: none; }
.role-row-wrap.is-sentence > .opp-role-card { margin: 4px 0 0 52px; border: 0; background: transparent; box-shadow: none; }
.role-row-wrap.is-sentence > .opp-role-card > .role-row-sum { min-height: 0; padding: 4px 0; grid-template-columns: 1fr; }
.role-sum-label { font-size: var(--fs-body); color: var(--primary-text); }
.role-row-wrap.is-sentence > .role-actions { top: 10px; }

.role-sentence { display: flex; gap: 14px; align-items: flex-start; padding: 8px 4px 2px; }
.role-sentence.is-new { opacity: .92; padding-bottom: 10px; }
.role-sent-main { flex: 1 1 auto; min-width: 0; padding-right: 72px; }
.role-sentence.is-new .role-sent-main { padding-right: 0; }
.role-sent-av {
  flex: none; display: inline-flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; margin-top: 2px; border-radius: 50%;
  background: color-mix(in srgb, var(--primary) 18%, transparent);
  color: var(--primary-text); font-size: var(--fs-meta); font-weight: 500;
  background-size: cover; background-position: center;
}
/* PR1.517 — offene Rolle: gestrichelter Kreis in Rollenfarbe mit „?". */
.role-sent-av.is-open { background: transparent; border: 2px dashed var(--role-c, var(--border-light)); color: var(--role-c, var(--text-3)); font-size: var(--fs-body); }
.role-sent-av.is-add { background: transparent; border: 1.5px dashed var(--border-light); color: var(--text-3); font-size: var(--fs-section); font-weight: 400; }
.role-sent-txt { margin: 0; font-size: var(--fs-body); line-height: 2.4rem; color: var(--text-2); }
.role-blank {
  display: inline-flex; align-items: center; gap: 8px; height: 2.1rem; max-width: 100%;
  padding: 0 12px; margin: 0 2px; border: 0; border-radius: 8px; vertical-align: middle;
  background: var(--bg-hover); color: var(--text-1); font: inherit; font-weight: 500;
  box-shadow: inset 0 -2px 0 var(--border-light); cursor: pointer;
  transition: background-color .15s ease-out;
}
.role-blank:hover { background: var(--bg-card2); }
.role-blank:focus-visible, .role-blank-clear:focus-visible, .role-sent-act:focus-visible,
.role-pop-item:focus-visible, .role-pop-preset:focus-visible, .role-pop-more:focus-visible {
  outline: 2px solid var(--primary); outline-offset: 2px;
}
.role-blank.is-open { box-shadow: inset 0 0 0 2px var(--primary); }
.role-blank.is-empty { background: transparent; color: var(--text-3); font-weight: 400; box-shadow: inset 0 0 0 1.5px var(--border-light); }
.role-blank.is-static { cursor: default; box-shadow: none; }
.role-blank.is-ext { box-shadow: inset 0 -2px 0 var(--role-ext-ink, var(--border-light)); }
.role-blank-dot { flex: none; width: 8px; height: 8px; border-radius: 50%; }
.role-blank-warn { display: inline-flex; color: var(--warning); }
.role-blank-av {
  flex: none; display: inline-flex; align-items: center; justify-content: center;
  width: 24px; height: 24px; border-radius: 50%; font-size: var(--fs-label); font-weight: 500;
  background: color-mix(in srgb, var(--primary) 18%, transparent); color: var(--primary-text);
  background-size: cover; background-position: center;
}
.role-blank-av.is-ph { background: transparent; border: 1px dashed var(--role-ext-ink, var(--border-light)); }
.role-blank-clear {
  display: inline-flex; align-items: center; justify-content: center; width: 1.6rem; height: 1.6rem;
  margin-left: -2px; padding: 0; border: 0; border-radius: 6px; vertical-align: middle;
  background: transparent; color: var(--text-3); cursor: pointer;
}
.role-blank-clear:hover { color: var(--text-1); background: var(--bg-hover); }
.role-sent-follow { margin: 0; font-size: var(--fs-body); line-height: 1.45; color: var(--text-2); font-variant-numeric: tabular-nums; }
.role-sent-follow b { color: var(--text-1); font-weight: 600; }
.role-sent-follow b.is-over { color: var(--danger); }
.role-sent-follow.is-warn { color: var(--warning); }
.role-sent-follow .ic { vertical-align: -2px; }
.role-sent-act { padding: 0; border: 0; background: none; color: var(--primary-text); font: inherit; cursor: pointer; text-decoration: underline; text-underline-offset: 2px; }
.role-sent-adopted { margin: 4px 0 0; font-size: var(--fs-ui); color: var(--success); }
/* PR1.517 — Treffer an offenen Rollen: drei Vorschläge als Chips direkt am Satz. */
.role-sent-open { color: var(--text-3); }
.role-sent-matches:empty { display: none; }
.om-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 8px 0 2px; font-size: var(--fs-ui); color: var(--text-2); }
.om-label { color: var(--text-3); }
.om-note { color: var(--text-3); }
.om-note.is-error { color: var(--danger); }
.om-chip {
  display: inline-flex; align-items: center; gap: 8px; max-width: 100%; min-height: 34px;
  padding: 3px 12px 3px 3px; border: 1px solid var(--border-light); border-radius: 999px;
  background: var(--bg-card); color: var(--text-1); font: inherit; font-weight: 600; cursor: pointer;
}
.om-chip:hover { background: var(--bg-hover); }
.om-chip.is-static { cursor: default; }
.om-fit { font-style: normal; font-weight: 600; color: var(--success); font-variant-numeric: tabular-nums; }
.om-ava {
  flex: none; display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; border-radius: 50%; font-size: var(--fs-label); font-weight: 500;
  background: color-mix(in srgb, var(--primary) 18%, transparent); color: var(--primary-text);
  background-size: cover; background-position: center;
}
.om-all { padding: 4px 6px; border: 0; border-radius: 6px; background: none; color: var(--primary-text); font: inherit; font-weight: 600; cursor: pointer; text-decoration: underline; text-underline-offset: 2px; }
.om-all:disabled { opacity: .55; cursor: progress; }
.om-chip:focus-visible, .om-all:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }

.role-pop {
  margin: 8px 0 6px; padding: 14px; width: min(560px, 100%);
  border: 1px solid var(--border-light); border-radius: 12px;
  background: var(--bg-card2); box-shadow: var(--shadow-lg);
}
.role-pop-lbl { margin: 0 0 10px; font-size: var(--fs-ui); color: var(--text-2); }
.role-pop-search {
  width: 100%; height: 2.25rem; margin-bottom: 8px; padding: 0 10px;
  border: 1px solid var(--border-light); border-radius: 8px; background: var(--bg-input); color: var(--text-1); font: inherit;
}
.role-pop-list { display: flex; flex-direction: column; gap: 2px; max-height: 260px; overflow-y: auto; }
.role-pop-item {
  padding: 8px 10px; border: 0; border-radius: 8px; background: transparent; color: var(--text-1);
  font: inherit; text-align: left; cursor: pointer; transition: background-color .15s ease-out;
}
.role-pop-item:hover, .role-pop-item:focus-visible { background: var(--bg-hover); }
.role-pop-item[aria-pressed="true"] { font-weight: 600; box-shadow: inset 3px 0 0 var(--primary); }
.role-pop-none { margin: 4px 0 0; font-size: var(--fs-body); color: var(--text-2); }
.role-pop-presets { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.role-pop-preset {
  display: flex; flex-direction: column; align-items: flex-start; gap: 2px; padding: 10px 12px;
  border: 0; border-radius: 8px; background: var(--bg-hover); color: var(--text-1);
  font: inherit; text-align: left; cursor: pointer; transition: background-color .15s ease-out;
}
.role-pop-preset:hover { background: var(--bg-card); }
.role-pop-preset b { font-weight: 600; }
.role-pop-preset span { font-size: var(--fs-meta); color: var(--text-2); }
.role-pop-preset[aria-pressed="true"] { box-shadow: inset 0 0 0 2px var(--primary); }
.role-pop-preset:disabled { opacity: .5; cursor: not-allowed; }
.role-pop-more { margin-top: 10px; padding: 0; border: 0; background: none; color: var(--primary-text); font: inherit; font-size: var(--fs-body); cursor: pointer; }
/* Die Masken haben je nach Shell und Fensterbreite eine schmale Formularspalte (Redesign:
   ab ~250 px). Deshalb richtet sich der Satz nach seiner eigenen Breite, nicht nach dem Fenster. */
.role-row-wrap.is-sentence, .role-sentence.is-new { container-type: inline-size; }
@container (max-width: 560px) {
  .role-pop-presets { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .role-sent-main { padding-right: 56px; }
  .role-sentence { gap: 10px; }
  .role-sent-av { width: 30px; height: 30px; }
  .role-row-wrap.is-sentence > .opp-role-card { margin-left: 0; }
}
@container (max-width: 380px) {
  .role-pop-presets { grid-template-columns: minmax(0, 1fr); }
  .role-sent-main { padding-right: 0; padding-top: 28px; }
  .role-sent-av { display: none; }
  .role-sent-txt { line-height: 2.2rem; }
  .role-pop { padding: 10px; }
}
@media (prefers-reduced-motion: reduce) {
  .role-blank, .role-pop-item, .role-pop-preset { transition: none; }
}
/* PR1.496 — Karte „So rechnet Apollon" unter der Rollen-Tabelle (beide Shells, Tokens).
   Keine Animation: taeglich genutzt, der Reiterwechsel ist ein Zustandswechsel. */
.rw-card {
  margin-top: 16px; padding: 16px; border: 1px solid var(--border);
  border-radius: var(--radius); background: var(--bg-card);
}
.rw-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 12px; }
.rw-title { margin: 0; font-size: var(--fs-body); font-weight: 600; color: var(--text-1); }
.rw-hint { font-size: var(--fs-ui); color: var(--text-3); }
.rw-tabs {
  /* Innenabstand: die scrollende Leiste schneidet sonst den Fokusring der Redesign-Shell ab. */
  display: flex; gap: 4px; margin: 12px 0; padding: 4px; overflow-x: auto;
  border-bottom: 1px solid var(--border); scrollbar-width: thin;
}
.rw-tab {
  flex: 0 0 auto; display: flex; flex-direction: column; align-items: center; gap: 6px;
  min-width: 72px; padding: 6px 10px 10px; background: none; border: 0;
  border-bottom: 2px solid transparent; color: var(--text-2); cursor: pointer; font: inherit;
  font-size: var(--fs-ui);
}
.rw-tab:hover { color: var(--text-1); }
.rw-tab.is-active { color: var(--text-1); font-weight: 600; border-bottom-color: var(--primary); }
/* Innerer Ring statt outline: die seitlich scrollende Leiste schnitte eine outline ab. */
.rw-tab:focus-visible { outline: none; box-shadow: inset 0 0 0 2px var(--primary); border-radius: var(--radius-sm); }
/* Redesign: dort traegt die generische .crm-Fokusregel den Ring — kein zweiter. */
.crm .rw-tab:focus-visible { box-shadow: none; }
.rw-tab-photo { display: inline-flex; }
/* Gleiche Bubble wie in der Rollen-Tabelle (Foto-Ebene legt sich darueber), nur groesser. */
.rw-av { position: relative; width: 40px; height: 40px; font-size: var(--fs-body); overflow: hidden; }
.rw-avatar-empty { display: inline-block; width: 40px; height: 40px; border-radius: 50%; background: var(--bg-subtle); }
.rw-eq { display: flex; flex-wrap: wrap; align-items: stretch; gap: 8px; }
.rw-term {
  display: flex; flex-direction: column; gap: 4px; min-width: 96px; flex: 1 1 96px;
  /* Aus dem Text-Ton gemischt: hebt sich in beiden Themes und beiden Shells vom Kartengrund ab
     (--bg-subtle liegt im dunklen Theme fast auf --bg-card). */
  padding: 10px 12px; background: color-mix(in srgb, var(--text-1) 6%, transparent); border: 1px solid transparent;
  border-radius: var(--radius-sm);
}
.rw-num { font-size: var(--fs-title); font-weight: 600; color: var(--text-1); font-variant-numeric: tabular-nums; line-height: 1.15; }
.rw-label { font-size: var(--fs-meta); color: var(--text-2); overflow-wrap: anywhere; }
.rw-term.is-muted .rw-num { color: var(--text-3); }
.rw-term.is-over .rw-num { color: var(--warning); }
.rw-total { border: 2px solid var(--primary); }
.rw-total.is-over { border-color: var(--warning); }
.rw-op { align-self: center; color: var(--text-3); font-size: var(--fs-body); }
.rw-bar { position: relative; height: 8px; margin-top: 16px; border-radius: 4px; background: color-mix(in srgb, var(--text-1) 10%, transparent); }
.rw-bar-fill { position: absolute; inset: 0 auto 0 0; border-radius: 4px; background: var(--primary); }
.rw-bar.is-over .rw-bar-fill { background: var(--warning); }
.rw-bar-mark { position: absolute; top: -4px; bottom: -4px; width: 2px; margin-left: -1px; background: var(--text-1); }
.rw-scale { position: relative; height: 1.2em; margin-top: 4px; font-size: var(--fs-meta); color: var(--text-3); font-variant-numeric: tabular-nums; }
.rw-scale > span { position: absolute; top: 0; white-space: nowrap; }
.rw-scale-mark { transform: translateX(-50%); color: var(--text-2); }
.rw-scale-end { right: 0; }
.rw-note, .rw-state { margin: 10px 0 0; font-size: var(--fs-body); color: var(--text-2); }
.rw-state.is-warn { color: var(--warning); }
.rw-next { color: var(--text-2); }
/* Der Rollen-Editor steht in keiner .form-group — die Felder brauchen ihren eigenen Rahmen,
   sonst greift der Browser-Standard (in der hellen Shell ein dunkler Kasten). */
.role-slot input:where(:not([type="hidden"])) {
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text-1);
  padding: 6px 8px;
  font-size: var(--fs-body);
  min-height: 2.25rem;
  outline: none;
}
.role-slot input:where(:not([type="hidden"])):focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px var(--primary-glow);
}
.role-slot input[aria-invalid="true"] { border-color: var(--warning); }
.role-add-person { align-self: flex-start; }
/* ─────────────────────────────────────────
   PR1.531 (#806) — „So rechnet Apollon" je Person (MA-Detail, beide Shells)
   Werkzeug fuer den taeglichen Abgleich: keine Uebergaenge, keine Animation.
   Einsatzfarben kommen als --c am Element (Palette aus role-colors.js).
   ───────────────────────────────────────── */
.rwp {
  min-width: 0; max-width: 100%; margin-top: 16px; border: 1px solid var(--border); border-radius: var(--radius);
  background: var(--bg-card2, var(--bg-card));
  --rwp-fest: var(--attention); --rwp-plan: var(--info);
  --rwp-hatch: repeating-linear-gradient(135deg, rgba(232, 140, 100, .55) 0 4px, rgba(60, 48, 43, .55) 4px 8px);
}
.rwp-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; padding: 10px 14px; }
.rwp-toggle {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; flex: 1 1 320px; min-width: 0;
  padding: 4px 2px; border: 0; background: none; color: var(--text-1); text-align: left; cursor: pointer; font: inherit;
}
.rwp-caret { width: 1em; color: var(--text-2); }
.rwp-title { font-weight: 600; }
.rwp-kurz { color: var(--text-2); font-size: var(--fs-body); font-variant-numeric: tabular-nums; }
.rwp-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.rwp-segment, .rwp-nav { display: inline-flex; border: 1px solid var(--border); border-radius: var(--radius-sm); overflow: hidden; }
.rwp-seg-btn, .rwp-nav-btn, .rwp-copy {
  min-height: 32px; padding: 4px 12px; border: 0; background: transparent; color: var(--text-2); font: inherit; font-size: var(--fs-body); cursor: pointer;
}
.rwp-seg-btn + .rwp-seg-btn { border-left: 1px solid var(--border); }
.rwp-seg-btn[aria-pressed="true"] { background: var(--bg-hover); color: var(--rwp-plan); font-weight: 600; }
.rwp-period { display: inline-flex; align-items: center; padding: 0 10px; min-width: 9em; justify-content: center; border-inline: 1px solid var(--border); color: var(--text-1); font-size: var(--fs-body); }
.rwp-copy { border: 1px solid var(--border); border-radius: var(--radius-sm); color: var(--text-1); }
.rwp-copy[disabled] { opacity: .5; cursor: not-allowed; }
.rwp-copied { font-size: var(--fs-ui); color: var(--success); min-width: 4em; }
.rwp-toggle:focus-visible, .rwp-seg-btn:focus-visible, .rwp-nav-btn:focus-visible, .rwp-copy:focus-visible {
  outline: 2px solid var(--primary); outline-offset: 2px;
}
.rwp-seg-btn:hover, .rwp-nav-btn:hover, .rwp-copy:not([disabled]):hover { background: var(--bg-hover); }
.rwp-body { min-width: 0; padding: 4px 14px 16px; border-top: 1px solid var(--border); }
.rwp-body[hidden] { display: none; }
.rwp-state { margin: 12px 0; color: var(--text-2); }
.rwp-state span { color: var(--text-3); }
.rwp-state.is-warn { color: var(--attention); }
.rwp-state.is-error { color: var(--danger); }
.rwp-warn { margin: 8px 0 0; font-size: var(--fs-ui); color: var(--attention); }
.rwp-muted { color: var(--text-3); }
.rwp-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Gleichung */
.rwp-eq { display: flex; flex-wrap: wrap; align-items: stretch; gap: 8px; margin: 14px 0 18px; }
.rwp-box {
  flex: 1 1 130px; display: flex; flex-direction: column; gap: 2px; padding: 10px 14px;
  border: 1px solid var(--border); border-radius: var(--radius); background: var(--bg-card);
}
.rwp-box-label { font-size: var(--fs-label); font-weight: 500; color: var(--text-3); }
.rwp-box-val { font-size: var(--fs-display); font-weight: 600; color: var(--text-1); font-variant-numeric: tabular-nums; }
.rwp-box-val small { font-size: var(--fs-ui); font-weight: 400; color: var(--text-2); }
.rwp-box-sub { font-size: var(--fs-ui); color: var(--text-2); }
.rwp-box.is-result { border-color: color-mix(in srgb, var(--rwp-fest) 55%, transparent); }
.rwp-box.is-result .rwp-box-val { color: var(--rwp-fest); }
.rwp-box.is-plan { border-color: color-mix(in srgb, var(--rwp-plan) 55%, transparent); }
.rwp-box.is-plan .rwp-box-val { color: var(--rwp-plan); }
.rwp-op { align-self: center; font-size: var(--fs-title); color: var(--text-3); }
.rwp-ton--frei { --rwp-fest: var(--danger); }
.rwp-ton--voll, .rwp-ton--ueber { --rwp-fest: var(--success); }
.rwp-ton--leer, .rwp-ton--intern { --rwp-fest: var(--text-3); }
.rwp-c-fest { color: var(--rwp-fest); }
.rwp-c-plan { color: var(--rwp-plan); }
.rwp-c-abw { color: #e88c64; }

.rwp-sec-h { margin: 18px 0 8px; font-size: var(--fs-label); font-weight: 500; color: var(--text-3); }
.rwp-sec-h span { margin-left: 8px; font-weight: 400; letter-spacing: 0; text-transform: none; }

/* Farbfelder */
.rwp-sw { display: inline-block; width: 11px; height: 11px; margin-right: 6px; border-radius: 2px; background: var(--c, var(--text-3)); vertical-align: -1px; flex: none; }
.rwp-sw.is-hatch { background: var(--rwp-hatch); }
.rwp-sw.is-frei { background: transparent; border: 1px dashed var(--text-3); }
.rwp-sw.is-geb { background: var(--text-3); }

/* Wochenbalken */
.rwp-week { position: relative; }
.rwp-bar { display: flex; height: 48px; border-radius: var(--radius-sm); overflow: hidden; }
.rwp-seg {
  display: flex; align-items: center; justify-content: center; min-width: 0; overflow: hidden;
  background: var(--c, var(--text-3)); color: #0b1220; font-size: var(--fs-label); font-weight: 500; text-align: center; line-height: 1.2;
}
.rwp-seg + .rwp-seg { border-left: 2px solid var(--bg-card2, var(--bg-card)); }
.rwp-seg.is-rest { background: color-mix(in srgb, var(--c) 55%, #000); color: var(--text-1); }
.rwp-seg.is-frei { background: transparent; border: 1px dashed var(--text-3); color: var(--text-2); }
.rwp-seg.is-hatch { background: var(--rwp-hatch); color: #ffd2bd; }
.rwp-seg-label { padding: 0 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rwp-braces { display: flex; margin-top: 4px; font-size: var(--fs-meta); color: var(--text-2); }
.rwp-braces.is-top { margin: 0 0 4px; }
.rwp-brace { border-top: 1px solid var(--text-3); padding-top: 3px; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.rwp-braces.is-top .rwp-brace { border-top: 0; border-bottom: 1px solid var(--text-3); padding: 0 0 3px; }
.rwp-brace.is-fest { border-color: var(--rwp-fest); }
.rwp-brace.is-abw { color: #e88c64; }
.rwp-brace b { color: var(--text-1); }
.rwp-planrow { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin-top: 10px; font-size: var(--fs-ui); color: var(--text-2); }
.rwp-planbar { flex: 1 1 240px; height: 14px; }
.rwp-plan-fill { display: block; height: 100%; border: 1px solid var(--rwp-plan); border-radius: 2px;
  background: repeating-linear-gradient(135deg, color-mix(in srgb, var(--rwp-plan) 70%, transparent) 0 4px, transparent 4px 8px); }
.rwp-planrow-text { color: var(--rwp-plan); }

/* Tabellen */
.rwp-scroll { overflow-x: auto; }
.rwp-table { width: 100%; border-collapse: collapse; font-size: var(--fs-ui); font-variant-numeric: tabular-nums; }
.rwp-table th, .rwp-table td { padding: 7px 8px; border-bottom: 1px solid var(--border); text-align: left; vertical-align: top; font-weight: 400; color: var(--text-1); }
.rwp-table tbody th { font-size: inherit; letter-spacing: 0; text-transform: none; }
.rwp-table thead th { font-size: var(--fs-label); font-weight: 500; color: var(--text-3); white-space: nowrap; }
.rwp-table thead th small { display: block; font-weight: 400; letter-spacing: 0; text-transform: none; }
.rwp-table .num { text-align: right; white-space: nowrap; }
.rwp-table td small, .rwp-table th small { display: block; color: var(--text-3); font-size: var(--fs-label); }
.rwp-table .is-sum th, .rwp-table .is-sum td { font-weight: 600; }
.rwp-table tbody .is-group th { padding-top: 12px; font-size: var(--fs-label); font-weight: 500; color: var(--text-3); border-bottom: 0; }
.rwp-table .is-pct th, .rwp-table .is-pct td { font-weight: 600; }
.rwp-table .is-pct.rwp-c-fest th, .rwp-table .is-pct.rwp-c-fest td { color: var(--rwp-fest); }
.rwp-table .is-pct.rwp-c-plan th, .rwp-table .is-pct.rwp-c-plan td { color: var(--rwp-plan); }
.rwp-einsatz { display: flex; gap: 2px; min-width: 240px; }
.rwp-einsatz small { display: block; }
.rwp-chip { display: inline-block; margin-left: 4px; padding: 0 6px; border-radius: 999px; font-size: var(--fs-label);
  background: color-mix(in srgb, var(--c) 22%, transparent); color: var(--text-1); }
.rwp-tf .rwp-fte { display: inline; font-size: var(--fs-label); color: var(--text-3); }
.rwp-tf.is-strong .rwp-t { font-weight: 600; }
.rwp-sum-col { background: var(--bg-hover); }
.rwp-mini { display: inline-block; width: 90px; height: 6px; margin-right: 6px; border-radius: 3px; background: var(--bg-hover); vertical-align: middle; overflow: hidden; }
.rwp-mini span { display: block; height: 100%; background: var(--c); }
.rwp-tag { display: inline-block; margin-left: 4px; padding: 0 6px; border-radius: 999px; font-size: var(--fs-label); background: var(--bg-hover); color: var(--text-2); }
.rwp-tag.is-abw { color: #e88c64; }
.rwp-tag.is-plan { color: var(--rwp-plan); }
.rwp-opc { width: 1.2em; color: var(--text-3); }

/* Rechenzettel + Ergebnis */
.rwp-zettel-wrap > *, .rwp-month-grid > * { min-width: 0; }
.rwp-zettel-wrap { display: grid; grid-template-columns: minmax(0, 2fr) minmax(220px, 1fr); gap: 16px; align-items: start; }
.rwp-result { margin-top: 18px; padding: 14px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--bg-card); }
.rwp-res-row { display: flex; justify-content: space-between; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--border); }
.rwp-res-row small { display: block; color: var(--text-3); font-size: var(--fs-label); font-variant-numeric: tabular-nums; }
.rwp-res-label { color: var(--text-1); }
.rwp-res-row strong { font-size: var(--fs-title); font-variant-numeric: tabular-nums; white-space: nowrap; }
.rwp-res-row.rwp-ton--teil strong, .rwp-res-row[class*="rwp-ton--"] strong { color: var(--rwp-fest); }
.rwp-res-row.is-plan strong { color: var(--rwp-plan); }
.rwp-res-note { margin: 10px 0 0; font-size: var(--fs-meta); color: var(--text-2); }
.rwp-foot { margin: 14px 0 0; font-size: var(--fs-ui); color: var(--text-2); }
.rwp-foot b { color: var(--text-1); }

/* Monat */
.rwp-month-grid { display: grid; grid-template-columns: minmax(200px, 1fr) minmax(0, 2.6fr); gap: 16px; align-items: start; }
.rwp-cols { display: flex; align-items: flex-end; gap: 10px; }
.rwp-col { flex: 1 1 0; display: flex; flex-direction: column; min-width: 0; }
.rwp-col-pct { display: flex; flex-direction: column; align-items: center; margin-bottom: 4px; font-size: var(--fs-meta); font-weight: 500; line-height: 1.25; }
.rwp-stack { position: relative; display: flex; flex-direction: column-reverse; height: 180px; }
.rwp-stack-line { position: absolute; left: -5px; right: -5px; border-top: 1px dashed var(--text-3); pointer-events: none; }
.rwp-stack-seg { display: block; background: var(--c, var(--text-3)); }
.rwp-stack-seg + .rwp-stack-seg { border-bottom: 2px solid var(--bg-card2, var(--bg-card)); }
.rwp-stack-seg.is-geb { background: var(--text-3); }
.rwp-stack-seg.is-frei { background: transparent; border: 1px dashed var(--text-3); }
.rwp-stack-seg.is-hatch { background: var(--rwp-hatch); }
.rwp-col-kw { margin-top: 6px; text-align: center; font-size: var(--fs-meta); color: var(--text-2); }
.rwp-col-kw small { display: block; color: var(--text-3); }
.rwp-legend { display: flex; flex-wrap: wrap; gap: 4px 12px; margin: 10px 0 0; padding: 0; list-style: none; font-size: var(--fs-meta); color: var(--text-2); }
.rwp-month .rwp-tf { display: inline-flex; gap: 4px; align-items: baseline; }

@media (max-width: 900px) {
  .rwp-zettel-wrap, .rwp-month-grid { grid-template-columns: 1fr; }
  .rwp-op { display: none; }
}


/* PR1.485 A — Spalte „Wer" je Person (intern · extern · Extern, noch offen · offen), Leiste
   unter der zugeklappten Rolle, Zeile „Ohne Rolle" und die Suchliste (person-picker.js).
   Geometrie fuer beide Shells hier; style-redesign.css mappt nur die Tokens. Keine
   Animation (taeglich genutzt). Marke „Extern": eigene Tinte, weil --warning im hellen
   Thema auf dem getoenten Grund unter 4,5:1 faellt. */
:root[data-theme="light"] { --role-ext-ink-light: #8A4005; }
.role-row-wrap, .role-unassigned, .role-pick {
  --role-ext-ink: var(--role-ext-ink-light, var(--warning));
  --role-ext-ground: color-mix(in srgb, var(--warning) 16%, transparent);
  --role-who-ok: var(--success);
}

@container role-persons (min-width: 860px) {
  .role-person.role-person--who {
    grid-template-columns: minmax(200px, 1.4fr) auto minmax(200px, 1fr) auto 100px 36px;
    grid-template-areas: "name fte range rate pt del";
  }
}
.role-person-who { display: flex; flex-direction: column; gap: 3px; min-width: 0; font-weight: normal; }
.role-who { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px; min-width: 0; max-width: 100%; }

.role-who-open,
.role-who-chip,
.role-who-ph {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  min-height: 2rem;
  max-width: 100%;
  border-radius: 1rem;
  font: inherit;
  font-size: var(--fs-body);
}
.role-who-open {
  padding: 0 .75rem;
  border: 1px dashed var(--primary);
  background: color-mix(in srgb, var(--primary) 8%, transparent);
  color: var(--primary-text);
  font-weight: 600;
  cursor: pointer;
}
.role-who-open .ic { flex: none; }
.role-who-hint { font-weight: normal; color: var(--text-2); }
.role-who-chip {
  padding: 0 .625rem 0 .25rem;
  border: 1px solid var(--border-light);
  background: var(--bg-card);
  color: var(--text-1);
  font-weight: 500;
  cursor: pointer;
  text-align: left;
}
.role-who-chip.is-static { cursor: default; }
.role-who-open:hover, .role-who-chip:not(.is-static):hover { background: var(--bg-hover); }
.role-who-open:focus-visible,
.role-who-chip:focus-visible,
.role-who-clear:focus-visible,
.role-who-act:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}
.role-who-ph {
  padding: 0 .625rem 0 .25rem;
  border: 1px dashed var(--role-ext-ink);
  color: var(--text-1);
}
.role-who-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.role-who-av {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 50%;
  background: color-mix(in srgb, var(--primary) 18%, transparent);
  color: var(--primary-text);
  font-size: var(--fs-label);
  font-weight: 500;
}
.role-who-av.is-ext { background: var(--role-ext-ground); color: var(--role-ext-ink); }
.role-who-av.is-ph { background: transparent; border: 1px dashed var(--role-ext-ink); color: var(--role-ext-ink); }
.role-ext-tag {
  flex: none;
  padding: .0625rem .3125rem;
  border-radius: 4px;
  background: var(--role-ext-ground);
  color: var(--role-ext-ink);
  font-size: var(--fs-label);
  font-weight: 500;
  letter-spacing: .02em;
}
.role-who-new {
  flex: none;
  padding: 0 .3125rem;
  border: 1px dashed var(--border-light);
  border-radius: 4px;
  color: var(--text-2);
  font-size: var(--fs-label);
}
.role-who-clear { min-width: 2rem; min-height: 2rem; }
.role-who-act { min-height: 2rem; }

.role-person-buy {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .375rem .75rem;
}
.role-margin { font-size: var(--fs-ui); color: var(--text-2); }
.role-margin.is-neg { color: var(--role-ext-ink); font-weight: 600; }
.role-who-rate-error,
.role-who-feedback,
.role-who-note {
  grid-column: 1 / -1;
  margin: 0;
  font-size: var(--fs-ui);
}
.role-who-rate-error { color: var(--role-ext-ink); }
.role-who-feedback { display: flex; align-items: center; gap: .375rem; color: var(--text-1); font-weight: 600; }
.role-who-feedback .ic { flex: none; color: var(--role-who-ok); }
.role-who-feedback.is-warn .ic { color: var(--role-ext-ink); }
.role-who-note { color: var(--text-3); font-size: var(--fs-meta); }

/* Leiste unter der zugeklappten Rolle — verschwindet, sobald die Rolle offen ist
   (dann traegt jede Personenzeile ihre Zelle selbst). */
.role-who-strip {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .375rem .75rem;
  padding: 0 .75rem .5rem 2.25rem;
}
.opp-role-card[open] ~ .role-who-strip { display: none; }
.role-who-cells { display: flex; flex-wrap: wrap; gap: .375rem .75rem; min-width: 0; }
.role-who-strip > p { flex-basis: 100%; }

.role-who-banner {
  display: flex;
  align-items: center;
  gap: .5rem;
  margin: 0 0 .5rem;
  padding: .5rem .75rem;
  border-left: 3px solid var(--primary);
  background: var(--bg-card2);
  color: var(--text-1);
  font-size: var(--fs-body);
}
.role-who-count { margin: 0 0 .25rem; font-size: var(--fs-ui); color: var(--text-3); }

.role-unassigned {
  display: flex;
  flex-direction: column;
  gap: .5rem;
  margin-top: .75rem;
  padding: .625rem .75rem;
  border: 1px dashed var(--border-light);
  border-radius: var(--radius-sm);
}
.role-unassigned-title { margin: 0; font-size: var(--fs-body); }
.role-unassigned-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem .75rem; }
.role-unassigned-pick { display: inline-flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
.role-unassigned-pick select { max-width: 16rem; }

/* Suchliste: Popover unter dem Ausloeser (Position per --pick-top/--pick-left aus
   person-picker.js), unter 720 px bildschirmfuellend. */
.role-pick {
  position: absolute;
  top: var(--pick-top, 100%);
  left: var(--pick-left, 0);
  z-index: var(--z-popover);
  display: flex;
  flex-direction: column;
  width: min(26rem, calc(100vw - 2rem));
  max-height: min(32rem, 70vh, var(--pick-max, 70vh));
  overflow: hidden;
  background: var(--bg-card);
  border: 1px solid var(--border-light);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  color: var(--text-1);
  font-size: var(--fs-body);
}
.role-pick.is-up { top: auto; bottom: var(--pick-bottom, 100%); }
@media (max-width: 719px) {
  .role-pick,
  .role-pick.is-up {
    position: fixed;
    inset: 0;
    z-index: var(--z-popover);
    top: 0;
    bottom: 0;
    width: auto;
    max-height: none;
    border-radius: 0;
  }
}
.role-pick-head { display: flex; align-items: flex-start; justify-content: space-between; gap: .5rem; padding: .75rem .5rem .5rem 1rem; }
.role-pick-titles { display: flex; flex-direction: column; gap: .125rem; min-width: 0; }
.role-pick-titles strong { font-size: var(--fs-body); }
.role-pick-sub { font-size: var(--fs-meta); font-weight: normal; color: var(--text-3); }
.role-pick-tools { display: flex; flex-direction: column; gap: .5rem; padding: 0 1rem .5rem; }
.role-pick-seg {
  display: inline-flex;
  align-self: flex-start;
  border: 1px solid var(--border-light);
  border-radius: var(--radius-sm);
  overflow: hidden;
}
.role-pick-seg-btn {
  padding: .375rem .875rem;
  border: 0;
  background: transparent;
  color: var(--text-2);
  font: inherit;
  font-size: var(--fs-ui);
  cursor: pointer;
}
.role-pick-seg-btn + .role-pick-seg-btn { border-left: 1px solid var(--border-light); }
.role-pick-seg-btn.is-active { background: var(--primary-dark); color: #fff; }
.role-pick-seg-btn:focus-visible { outline: 2px solid var(--primary); outline-offset: -2px; }
.role-pick-search {
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: 0 .625rem;
  border: 1px solid var(--border-light);
  border-radius: var(--radius-sm);
  background: var(--bg-input);
  color: var(--text-3);
}
.role-pick-search:focus-within { outline: 2px solid var(--primary); outline-offset: 1px; }
.role-pick-search input {
  flex: 1;
  min-width: 0;
  min-height: 2.25rem;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--text-1);
  font: inherit;
  box-shadow: none;
}
.role-pick-search input:focus, .role-pick-search input:focus-visible { outline: none; box-shadow: none; }
.role-pick-body { flex: 1; min-height: 0; overflow: auto; padding: 0 .5rem; }
.role-pick-list { margin: 0; padding: .25rem 0; list-style: none; }
.role-pick-opt,
.role-pick-skel {
  display: grid;
  grid-template-columns: 1.75rem minmax(0, 1fr) 6.5rem;
  align-items: center;
  gap: .625rem;
  padding: .5rem;
  border-radius: var(--radius-sm);
}
.role-pick-opt { cursor: pointer; }
.role-pick-opt:hover { background: color-mix(in srgb, var(--bg-hover) 55%, transparent); }
.role-pick-opt.is-active { background: var(--bg-hover); outline: 2px solid var(--primary); outline-offset: -2px; }
.role-pick-opt .role-who-av { width: 1.75rem; height: 1.75rem; }
.role-pick-main { display: flex; flex-direction: column; gap: .125rem; min-width: 0; }
.role-pick-name { display: flex; align-items: center; gap: .375rem; min-width: 0; font-weight: 500; }
.role-pick-main .role-pick-sub { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text-2); }
.role-pick-opt.is-over .role-pick-name { color: var(--text-2); font-weight: normal; }
.role-pick-free { display: flex; flex-direction: column; align-items: flex-end; gap: .25rem; text-align: right; }
.role-pick-free-text { font-size: var(--fs-ui); font-weight: 500; color: var(--text-2); }
.role-pick-opt.is-over .role-pick-free-text { color: var(--role-ext-ink); }
.role-pick-bar { display: block; width: 100%; height: .375rem; overflow: hidden; border-radius: .25rem; background: var(--bg-card2); }
.role-pick-bar > span { display: block; height: 100%; background: var(--primary); }
.role-pick-opt.is-over .role-pick-bar > span { background: var(--role-ext-ink); }
.role-pick-skel > span { display: block; height: .75rem; border-radius: .25rem; background: var(--bg-card2); }
.role-pick-skel > span:first-child { grid-column: 1 / 3; width: 70%; }
.role-pick-state { margin: 0 .5rem .5rem; font-size: var(--fs-meta); color: var(--text-3); }
.role-pick-more { margin: .25rem .5rem .5rem; font-size: var(--fs-meta); color: var(--text-3); }
.role-pick-empty { padding: 1rem .5rem; color: var(--text-2); }
.role-pick-empty p { display: flex; align-items: center; gap: .375rem; margin: 0 0 .625rem; }
.role-pick-empty-actions { display: flex; flex-wrap: wrap; gap: .5rem; }
.role-pick-foot { display: flex; flex-direction: column; padding: .375rem .5rem; border-top: 1px solid var(--border); }
.role-pick-foot-btn {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: .25rem .5rem;
  padding: .5rem;
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--primary-text);
  font: inherit;
  font-size: var(--fs-body);
  font-weight: 500;
  text-align: left;
  cursor: pointer;
}
.role-pick-foot-btn:hover { background: var(--bg-hover); }
.role-pick-foot-btn:focus-visible { outline: 2px solid var(--primary); outline-offset: -2px; }
.role-pick-form-slot:empty { display: none; }
.role-pick-form-slot { padding: .25rem 1rem 1rem; overflow: auto; }
.role-pick-form { display: flex; flex-direction: column; gap: .625rem; }
.role-pick-field { display: flex; flex-direction: column; gap: .25rem; }
.role-pick-field label { font-size: var(--fs-meta); color: var(--text-2); }
.role-pick-input { display: flex; align-items: center; gap: .25rem; }
.role-pick-input input { flex: 1; min-width: 0; }
.role-pick-err { font-size: var(--fs-meta); color: var(--danger); }
.role-pick-form-actions { display: flex; flex-wrap: wrap; gap: .5rem; }

.role-stepper { display: inline-flex; align-items: center; gap: 2px; }
.role-stepper input {
  width: 64px;
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.role-stepper .role-step { min-width: 32px; min-height: 32px; font-size: var(--fs-body); line-height: 1; }
.role-unit { font-size: var(--fs-meta); color: var(--text-3); margin: 0 2px; }

.role-ptmode { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.role-seg {
  display: inline-flex;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  overflow: hidden;
}
.role-seg-btn {
  border: 0;
  background: transparent;
  color: var(--text-2);
  padding: 6px 12px;
  font: inherit;
  font-size: var(--fs-body);
  cursor: pointer;
}
.role-seg-btn + .role-seg-btn { border-left: 1px solid var(--border); }
.role-seg-btn.is-active { background: var(--primary-dark); color: #fff; }
.role-seg-btn:focus-visible { outline: 2px solid var(--primary); outline-offset: -2px; }
.role-fixed { display: inline-flex; align-items: center; gap: 10px; flex-wrap: wrap; }

.role-reqs > summary { cursor: pointer; font-weight: 600; padding: 4px 0; }
.role-reqs > summary .role-sub { margin-left: 6px; }
.role-reqs[open] > summary { margin-bottom: var(--form-block-gap); }
.role-reqs > .form-grid,
.role-reqs > .form-group,
.role-reqs > .form-group-check { margin-bottom: var(--form-block-gap); }

.role-empty {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  padding: 12px;
  border: 1px dashed var(--border);
  border-radius: var(--radius-sm);
  color: var(--text-2);
}
.role-empty p { margin: 0; flex: 1 1 280px; }

/* Schmaler Rollenbereich: Kopf weg, Zeitraum unter Name/Zahlen. Gemessen wird der
   Bereich selbst (Container), nicht das Fenster. */
:has(> .role-table-head) { container: role-list / inline-size; }
@container role-list (max-width: 620px) {
  .role-table-head { display: none; }
  /* BF-105 — feste Plaetze statt Fliessen: Name allein in Zeile 1 (Spalte 4 bleibt fuer die
     Aktionen frei), PT und Summe darunter, Zeitraum zuletzt. Vorher teilte sich der Name die
     Zeile mit PT und Summe und schrumpfte auf wenige Zeichen. */
  .role-row-sum { grid-template-columns: minmax(0, 1fr) auto auto 72px; gap: 4px 8px; }
  .role-row-sum > .role-cell-name { grid-column: 1 / 4; grid-row: 1; }
  .role-row-sum > .role-actions-slot { grid-column: 4; grid-row: 1; }
  .role-row-sum .role-cell-pt { grid-column: 2; grid-row: 2; }
  .role-row-sum .role-cell-sum { grid-column: 3; grid-row: 2; }
  .role-cell-span { grid-column: 1 / -1; grid-row: 3; }
}

/* PR1.200 #359 — Vererbung: Marke, Ruecksetzer, Hinweis, Ergebniszeile.
   Markiert wird NUR die Ausnahme („eigen"); „geerbt" ist der stille Normalfall.
   Bei acht vererbbaren Feldern und fuenf Rollen waeren vierzig Marken Rauschen. */
.role-own-mark {
  font-size: var(--fs-label);
  font-weight: 500;
  color: var(--warning);
  border: 1px solid var(--warning);
  border-radius: var(--radius-sm);
  padding: 1px 5px;
  white-space: nowrap;
}

/* Echter <button>: `role="button"` auf einem <span> macht den Fokus-Ratchet blind
   und waere ohne Tastatur nicht bedienbar (RD1.10-Falle). */
.role-own-reset {
  background: none;
  border: none;
  color: var(--text-3);
  cursor: pointer;
  font-size: var(--fs-body);
  line-height: 1;
  padding: 2px 4px;
  border-radius: var(--radius-sm);
}

.role-own-reset:hover { color: var(--text-1); }

.role-own-reset:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 1px;
}

.role-inherit-note {
  margin: 8px 0 0;
  font-size: var(--fs-meta);
  color: var(--text-3);
}

.role-union-band {
  margin-top: 6px;
  padding: 6px 10px;
  border-left: 3px solid var(--border);
  font-size: var(--fs-ui);
  color: var(--text-2);
}

.role-union-diverged { color: var(--warning); }

/* ── PR1.201 #360 — Das Budget-Band unter den Rollen-Karten ──────────────────
   Ein Segment je Rolle plus gestricheltes Restsegment, darunter die Aufstellung
   mit PT, Euro und Anteil.

   BEWUSST OHNE `transition`. Vorbild ist `.fte-bar-track/-fill` weiter unten, aber
   deren `transition: width .5s` waere hier falsch: das Band rechnet bei JEDEM
   Tastendruck neu, und eine halbe Sekunde Nachlauf machte die Zahl beim Tippen
   unlesbar. Die Breiten wechseln hart.

   Steht hier und nicht in `style-redesign.css`: beide Stylesheets sind global
   geladen, die Klassen greifen also auch in der `.crm`-Shell, und der ui-craft-
   Ratchet zaehlt ausschliesslich die Redesign-Datei (Konvention 21). Alle Farben
   kommen aus Tokens, die in beiden Shells definiert sind. */
.role-bands { display: block; }

.role-budget-band {
  margin-top: 8px;
  padding: 8px 10px;
  border-left: 3px solid var(--border);
  background: var(--bg-surface-2, transparent);
  font-size: var(--fs-ui);
}

.role-budget-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}

.role-budget-status {
  margin: 0;
  color: var(--text-2);
}

/* Ueberplanung ist der einzige Zustand mit Warnfarbe — „noch nicht verteilt" ist
   ein Zwischenstand, kein Fehler. */
.role-budget-status.over {
  color: var(--warning);
  font-weight: 600;
}

.role-budget-distribute {
  flex: none;
  background: none;
  border: 1px solid var(--border-light);
  border-radius: var(--radius-sm);
  color: var(--text-2);
  cursor: pointer;
  font: inherit;
  padding: 2px 8px;
}

.role-budget-distribute:hover {
  color: var(--text-1);
  border-color: var(--primary);
}

.role-budget-distribute:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 1px;
}

/* ── PR1.456 #707 — PT-Kontingent ────────────────────────────────────────────
   Frage in Schritt 1 (pt-quota-question.js) und Kontingent-Zeile ueber den Rollen.
   Ohne Animation: die Maske wird mehrmals pro Woche benutzt, das Feld soll sofort
   tippbereit sein. Die Aussage traegt der Wortlaut („frei", „drüber", „passt genau");
   Farbe kommt nur dazu. Gruen ist im Redesign keine AA-Textfarbe — „passt genau"
   bleibt deshalb Textfarbe, das Gruen steht nur im Balken. Knoepfe/Stepper erben
   `.role-seg`/`.role-stepper` und sind damit in beiden Shells gestaltet. */
.pt-quota-q {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg-surface-2, transparent);
}
.pt-quota-q-head { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.pt-quota-q-text { flex: 1 1 220px; font-weight: 600; color: var(--text-1); }
.pt-quota-q-field { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.pt-quota-q-field[hidden], .pt-quota-q-hint[hidden] { display: none; }
.pt-quota-q-field label { font-weight: 600; color: var(--text-1); }
.pt-quota-q-field .role-stepper input { width: 80px; }
.pt-quota-q-hint { margin: 0; font-size: var(--fs-ui); color: var(--text-2); }

.pt-quota-host { margin-bottom: 12px; }
.pt-quota-host[hidden] { display: none; }
.pt-quota-line { margin-top: 0; }
.pt-quota-status { color: var(--text-1); font-weight: 600; }
.pt-quota-status.is-over { color: var(--warning); }
.pt-quota-used { background: var(--primary); }
.pt-quota-line.is-exact .pt-quota-used { background: var(--success); }
.pt-quota-over { background: var(--warning); }

.role-budget-track {
  display: flex;
  height: 10px;
  margin: 8px 0;
  border-radius: 99px;
  overflow: hidden;
  background: var(--bg-input);
}

/* Die Haarlinie trennt benachbarte Segmente. Ohne sie verschwimmen zwei aufeinander
   folgende Palettenfarben, die zufaellig nah beieinanderliegen, zu einem Block — und
   der Balken behauptet dann eine Rolle weniger, als es gibt. */
.role-budget-seg {
  display: block;
  height: 100%;
  box-shadow: inset -1px 0 0 var(--bg-card);
}

.role-budget-seg:last-child { box-shadow: none; }

/* Das Restsegment ist kein Wert, sondern eine Leerstelle — deshalb gestrichelt
   umrandet statt gefuellt. */
.role-budget-seg.rest {
  background: repeating-linear-gradient(
    45deg,
    transparent, transparent 3px,
    var(--border-light) 3px, var(--border-light) 5px
  );
}

.role-budget-legend {
  list-style: none;
  margin: 0;
  padding: 0;
}

.role-budget-legend-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto auto auto;
  align-items: center;
  gap: 8px;
  padding: 1px 0;
  color: var(--text-2);
}

.role-budget-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
}

.role-budget-legend-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.role-budget-legend-pt,
.role-budget-legend-eur,
.role-budget-legend-share {
  font-variant-numeric: tabular-nums;
  text-align: right;
}

.role-budget-legend-share { color: var(--text-3); }
/* PR1.395 (#623, C3) — verplant je Rolle, gedämpft neben dem Namen. */
.role-budget-legend-verplant { color: var(--text-3); font-variant-numeric: tabular-nums; }

/* Die Summenzeile — sie hat die Aufgabe des alten Σ-Bands übernommen. */
.role-budget-legend-row.total {
  margin-top: 2px;
  padding-top: 4px;
  border-top: 1px solid var(--border);
  color: var(--text-1);
  font-weight: 600;
}

/* Der Punkt bleibt als Platzhalter stehen, damit die Spalten fluchten — er steht aber
   für keine Farbe im Balken und wird deshalb nicht gefüllt. */
.role-budget-legend-row.total .role-budget-dot { background: none; }

.role-budget-margin {
  margin: 6px 0 0;
  color: var(--text-2);
}

/* Ein Festpreis unter der Kalkulation ist die Zahl, wegen der es dieses Feld gibt. */
.role-budget-margin.negative {
  color: var(--warning);
  font-weight: 600;
}

/* Dieselbe Aussage direkt unter dem Budget-Feld in Schritt 3. */
.opp-budget-fixed-hint {
  margin: 4px 0 0;
  font-size: var(--fs-meta);
  color: var(--text-3);
}

.opp-budget-fixed-hint.negative { color: var(--warning); }

/* PR1.375 #594 — Auftragsdaten in beiden Masken (Opportunity + Projekt).
   Abrechnungsmodell: native Radios als Pillen — ein Klick, Pfeiltasten wechseln die
   Auswahl ohne eigenes Tastatur-Handling. Das Radio ist nur optisch verborgen (nicht
   display:none), damit es fokussierbar bleibt; der Fokusring sitzt an der Pille.
   Liefereinheit: offen und vorbelegt (keine zweite Aufklapp-Mechanik neben den Schritten).
   Keine Transition: die Felder werden einmal je Auftrag gepflegt, nicht taeglich. */
.order-data-wide { grid-column: 1 / -1; }
.order-data-hint { font-size: var(--fs-meta); color: var(--text-3); }
.order-billing { border: 0; margin: 0; padding: 0; min-width: 0; }
.order-billing-legend { font-size: var(--fs-body); font-weight: 500; color: var(--text-2); padding: 0; margin-bottom: 8px; } /* PR1.438 — = field label */
.order-billing-row { display: flex; flex-wrap: wrap; gap: 6px; }
.order-billing-opt {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  padding: 6px 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg-input);
  color: var(--text-2);
  font-size: var(--fs-body);
  font-weight: 500;
  cursor: pointer;
}
.order-billing-opt input[type="radio"] {
  /* Deckt die ganze Pille ab (unsichtbar): beim Tab-Fokus scrollt der Browser so die
     GANZE Pille ins Bild statt nur eines 1-px-Punkts an ihrer Oberkante. */
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  margin: 0; padding: 0;
  opacity: 0;
  pointer-events: none;
}
.order-billing-opt:hover { color: var(--text-1); border-color: var(--text-3); }
.order-billing-opt:has(input:checked) {
  border-color: var(--primary);
  background: var(--primary-glow);
  color: var(--text-1);
  font-weight: 600;
}
.order-billing-opt:has(input:focus-visible) { outline: 2px solid var(--primary); outline-offset: 2px; }

/* BF-90 #706 / PR1.499 #766 — Schritt „Preis" (components/billing-price-block.js), beide
   Masken, beide Shells (Farben der Redesign-Shell in style-redesign.css). Vorbild: Entwurf
   „Preis und Festpreis". Status wie im Zahlungsplan: Text in Textfarbe, Farbe nur am Marker —
   so bleibt der Kontrast in jedem Theme. Bewegung nur als Rueckmeldung (Fuellbalken 150 ms),
   bei reduzierter Bewegung aus. */
.price-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px 20px; flex-wrap: wrap; margin-bottom: 6px; }
.price-head-text { min-width: 0; flex: 1 1 260px; }
.price-head-text .fw-panel-lead { margin-bottom: 0; }
.billing-cards-mount { margin-bottom: 0; }
.billing-cards-group { border: 0; margin: 0; padding: 0; min-width: 0; }
.billing-cards-legend { font-size: var(--fs-meta); font-weight: 500; color: var(--text-2); padding: 0; margin-bottom: 6px; }
/* Ein Raster statt Umbruch: in schmalen Masken brechen die Beschriftungen in der Option um,
   die drei Optionen bleiben nebeneinander. */
.billing-seg { display: inline-grid; grid-auto-flow: column; grid-auto-columns: minmax(0, auto); max-width: 100%; gap: 2px; padding: 3px; border-radius: 20px; background: var(--bg-input); border: 1px solid var(--border); }
.billing-seg-opt { position: relative; display: inline-flex; align-items: center; justify-content: center; min-height: 32px; padding: 4px 14px; border-radius: 17px; color: var(--text-2); font-size: var(--fs-body); line-height: 1.2; text-align: center; cursor: pointer; }
.billing-seg-opt input[type="radio"] { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.billing-seg-opt:hover { color: var(--text-1); }
.billing-seg-opt:has(input:checked) { background: var(--text-1); color: var(--bg-input); font-weight: 600; }
.billing-seg-opt:has(input:focus-visible) { outline: 2px solid var(--primary); outline-offset: 2px; }
.billing-seg-opt:has(input:disabled) { cursor: default; opacity: .6; }
.billing-suggest-note { margin: 6px 0 0; font-size: var(--fs-meta); color: var(--text-2); max-width: 340px; }

/* Das Raster richtet sich nach der Breite des Schritts, nicht des Fensters: die Masken sind
   schmaler als der Bildschirm (Projektmaske ~560 px Inhalt). */
.price-panel { display: flex; flex-direction: column; gap: 12px; margin-top: 10px; min-width: 0; width: 100%; box-sizing: border-box; container-type: inline-size; }
.price-finding { margin: 0; font-size: var(--fs-body); color: var(--text-2); }
.price-finding:empty { display: none; }
.price-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(240px, 300px); gap: 14px; align-items: start; width: 100%; }
.price-cards { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.price-aside { position: sticky; top: 0; min-width: 0; }
.price-card { display: flex; flex-direction: column; gap: 10px; margin: 0; padding: 14px 16px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--bg-input); min-width: 0; }
.price-card[hidden] { display: none; }
.price-card-h { display: flex; align-items: baseline; justify-content: space-between; gap: 8px 12px; flex-wrap: wrap; }
.price-card-h h4 { margin: 0; font-size: var(--fs-body); font-weight: 600; color: var(--text-1); }
.price-card-hint { font-size: var(--fs-meta); color: var(--text-2); }
.price-figs { display: flex; align-items: flex-end; gap: 12px 28px; flex-wrap: wrap; }
.price-fig-input { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.price-fig-input > label { font-size: var(--fs-ui); color: var(--text-2); }
.price-input-row { display: flex; align-items: center; gap: 6px; }
.price-big { display: inline-flex; align-items: baseline; gap: 6px; padding: 2px 12px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--bg-card, var(--bg-input)); }
.price-big:focus-within { outline: 2px solid var(--primary); outline-offset: 1px; }
.price-big input { width: 9.5rem; border: 0 !important; background: transparent !important; box-shadow: none !important; padding: 4px 0; font-size: var(--fs-display); font-weight: 600; text-align: right; color: var(--text-1); font-variant-numeric: tabular-nums; outline: none; }
.price-big input[readonly] { color: var(--text-2); }
.price-big span { font-size: var(--fs-section); color: var(--text-2); }
.price-fig-calc { display: flex; align-items: flex-end; gap: 10px 20px; flex-wrap: wrap; min-height: 44px; }
.price-calc { display: flex; flex-direction: column; gap: 2px; }
.price-calc-lbl { font-size: var(--fs-ui); color: var(--text-2); }
.price-calc-val { font-size: var(--fs-title); font-weight: 500; color: var(--text-2); font-variant-numeric: tabular-nums; line-height: 44px; }
.price-delta-pill { line-height: 44px; }
.price-pill { display: inline-flex; align-items: center; gap: 6px; padding: 3px 11px; border-radius: 999px; border: 1px solid var(--border); font-size: var(--fs-body); font-weight: 500; color: var(--text-1); font-variant-numeric: tabular-nums; white-space: nowrap; line-height: 1.4; }
.price-pill.is-discount::before, .price-pill.is-buffer::before { content: ''; width: 8px; height: 8px; border-radius: 2px; }
.price-pill.is-discount::before { background: var(--warning); }
.price-pill.is-buffer::before { background: var(--success); }
.price-pill.is-even, .price-pill.is-empty { color: var(--text-2); font-weight: 500; }
.price-slider { display: flex; flex-direction: column; gap: 6px; margin-top: 4px; }
.price-range { width: 100%; height: 28px; margin: 0; background: transparent; cursor: ew-resize; accent-color: var(--primary); -webkit-appearance: none; appearance: none; }
.price-range:disabled { cursor: default; opacity: .5; }
.price-range::-webkit-slider-runnable-track { height: 8px; border-radius: 4px; background: linear-gradient(90deg, var(--border) 0 var(--fill-a, 0%), var(--primary) 0 var(--fill-b, 0%), var(--border) 0) , var(--border); }
.price-range::-moz-range-track { height: 8px; border-radius: 4px; background: var(--border); }
.price-range::-moz-range-progress { height: 8px; border-radius: 4px; background: transparent; }
.price-range::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 20px; height: 20px; margin-top: -6px; border-radius: 50%; background: var(--text-1); border: 3px solid var(--bg-input); }
.price-range::-moz-range-thumb { width: 16px; height: 16px; border-radius: 50%; background: var(--text-1); border: 3px solid var(--bg-input); }
.price-range:focus-visible { outline: 2px solid var(--primary); outline-offset: 3px; border-radius: 4px; }
.price-slider-axis { display: flex; justify-content: space-between; font-size: var(--fs-meta); color: var(--text-3); }
.price-slider-axis b { color: var(--text-1); font-weight: 500; }
.price-rate-field { margin: 4px 0 0; max-width: 320px; }
.price-rate-field[hidden] { display: none; }
.price-empty, .price-loading { font-size: var(--fs-ui); color: var(--text-2); margin: 0; }
.price-empty-block { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; max-width: 420px; }
.price-bullets { list-style: none; margin: 0; padding: 0; }
.price-bullet { display: grid; grid-template-columns: 150px minmax(0, 1fr) 120px; gap: 14px; align-items: center; padding: 8px 0; }
.price-bullet + .price-bullet { border-top: 1px solid var(--border); }
.price-bullet-name { color: var(--text-2); font-size: var(--fs-body); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.price-bullet-track { position: relative; height: 10px; border-radius: 5px; background: var(--border); }
.price-bullet-fill { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 5px; background: var(--primary); transition: width .15s ease-out; }
.price-bullet-tick { position: absolute; top: -5px; bottom: -5px; width: 2px; margin-left: -1px; background: var(--text-1); }
.price-bullet-val { text-align: right; font-variant-numeric: tabular-nums; }
.price-bullet-val b { font-weight: 600; color: var(--text-1); }
.price-bullet-val small { display: block; color: var(--text-3); font-size: var(--fs-meta); }
.price-other { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 10px 14px; align-items: start; }
.price-switch { position: relative; width: 38px; height: 22px; margin-top: 1px; padding: 0; border: 0; border-radius: 11px; background: var(--text-3); cursor: pointer; }
.price-switch::after { content: ''; position: absolute; left: 3px; top: 3px; width: 16px; height: 16px; border-radius: 50%; background: var(--bg-input); transition: transform .15s ease-out; }
.price-switch[aria-checked="true"] { background: var(--success); }
.price-switch[aria-checked="true"]::after { transform: translateX(16px); }
.price-switch:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.price-switch:disabled { cursor: default; opacity: .5; }
.price-other-title { display: block; font-size: var(--fs-body); color: var(--text-1); cursor: pointer; }
.price-other-help { margin: 2px 0 0; font-size: var(--fs-ui); color: var(--text-2); }
.price-other-row { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 10px; }
.price-other-row[hidden] { display: none; }
.price-mini-in { display: inline-flex; align-items: center; gap: 4px; padding: 0 10px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--bg-card, var(--bg-input)); }
.price-mini-in:focus-within { outline: 2px solid var(--primary); outline-offset: 1px; }
.price-mini-in input { width: 4.5rem; min-height: 34px; border: 0 !important; background: transparent !important; box-shadow: none !important; padding: 0; text-align: right; color: var(--text-1); font-variant-numeric: tabular-nums; outline: none; }
.price-mini-in.is-wide input { width: 6.5rem; }
.price-mini-in input.field-error { color: var(--danger); }
.price-mini-in:has(input.field-error) { border-color: var(--danger); }
.price-mini-in span { color: var(--text-3); font-size: var(--fs-meta); }
.price-other-error { margin: 8px 0 0; font-size: var(--fs-ui); color: var(--danger); }
.price-other-sum { margin: 10px 0 0; font-size: var(--fs-body); color: var(--text-2); font-variant-numeric: tabular-nums; }
.price-other-sum:empty { display: none; }
.price-other-sum b { color: var(--text-1); font-weight: 600; }
.price-receipt { display: flex; flex-direction: column; }
.price-kv { display: flex; justify-content: space-between; gap: 12px; padding: 7px 0; border-bottom: 1px solid var(--border); font-size: var(--fs-body); }
.price-kv:last-child { border-bottom: 0; }
.price-kv span { color: var(--text-2); min-width: 0; }
.price-kv small { display: block; color: var(--text-3); font-size: var(--fs-meta); font-variant-numeric: tabular-nums; }
.price-kv b { font-weight: 500; color: var(--text-1); text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.price-kv.is-total b { font-weight: 600; }
.price-kv b.is-warn::before { content: ''; display: inline-block; width: 8px; height: 8px; margin-right: 6px; border-radius: 2px; vertical-align: 1px; background: var(--warning); }
@container (max-width: 780px) {
  .price-layout { grid-template-columns: minmax(0, 1fr); }
  .price-aside { position: static; }
}
@container (max-width: 560px) {
  .price-bullet { grid-template-columns: minmax(0, 1fr) auto; row-gap: 6px; }
  .price-bullet-track { grid-column: 1 / -1; grid-row: 2; }
}
@media (prefers-reduced-motion: reduce) {
  .price-bullet-fill, .price-switch::after { transition: none; }
}

/* PR1.460 #708 — Zahlungsplan (components/payment-plan.js). Eine Karte fuer Opp- und
   Projektmaske, beide Shells (style-redesign.css setzt im .crm-Scope nur Flaeche und
   Marker um). Status wie beim Preisvergleich: Text in Textfarbe, Farbe nur am Marker —
   so bleibt der Kontrast in jedem Theme. Keine Bewegung (selten genutzt, Formular). */
.payment-plan { display: flex; flex-direction: column; gap: 10px; margin-top: 14px; padding: 14px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--bg-input); min-width: 0; }
.payment-plan[hidden] { display: none; }
.payment-plan-head { display: flex; align-items: baseline; gap: 8px; }
.payment-plan-title { margin: 0; flex: 1 1 auto; font-size: var(--fs-body); font-weight: 600; color: var(--text-1); }
.payment-plan-opt, .payment-plan-empty, .payment-plan-hint { margin: 0; font-size: var(--fs-ui); color: var(--text-2); }
.payment-plan-scroll { overflow-x: auto; }
.payment-plan-table { width: 100%; min-width: 520px; border-collapse: collapse; font-size: var(--fs-body); }
.payment-plan-table th { padding: 4px 6px; text-align: left; font-weight: 600; color: var(--text-2); white-space: nowrap; border-bottom: 1px solid var(--border); }
.payment-plan-table td { padding: 4px 6px; vertical-align: middle; }
.payment-plan-table tfoot th, .payment-plan-table tfoot td { padding-top: 8px; color: var(--text-1); border-top: 1px solid var(--border); border-bottom: 0; }
.payment-plan-table input[type="text"] { width: 100%; min-width: 0; box-sizing: border-box; }
.payment-plan-due { width: 10.5rem; }
.payment-plan-due .drp { margin: 0; }
.payment-plan-due .drp-hint:empty { display: none; }
.payment-plan-share { width: 6.5rem; }
.payment-plan-share-wrap { display: inline-flex; align-items: center; gap: 4px; color: var(--text-2); }
.payment-plan-share-wrap input[type="text"] { width: 4.5rem; text-align: right; font-variant-numeric: tabular-nums; }
.payment-plan-num { width: 8rem; text-align: right !important; font-variant-numeric: tabular-nums; white-space: nowrap; }
.payment-plan-act { width: 2.75rem; text-align: right; }
.payment-plan-total::before,
.payment-plan-status.is-warn::before { content: ''; display: inline-block; width: 8px; height: 8px; margin-right: 6px; border-radius: 2px; vertical-align: 1px; }
.payment-plan-total.is-ok::before { background: var(--success); }
.payment-plan-total.is-warn::before, .payment-plan-status.is-warn::before { background: var(--warning); }
.payment-plan-total:not(.is-ok):not(.is-warn)::before { display: none; }
.payment-plan-status { margin: 0; font-size: var(--fs-body); font-weight: 500; color: var(--text-1); }
.payment-plan-status:empty { display: none; }
.payment-plan-error { margin: 0; font-size: var(--fs-ui); color: var(--danger); }
.payment-plan-table input.field-error { border-color: var(--danger) !important; }
.payment-plan-add { align-self: flex-start; }
/* PR1.499 #766 — Vorlagen, Zeitstrahl und Anteil-Stepper. */
.payment-plan-head { flex-wrap: wrap; }
.payment-plan-presets { display: inline-flex; flex-wrap: wrap; gap: 2px; padding: 3px; border-radius: 999px; border: 1px solid var(--border); background: var(--bg-card, var(--bg-input)); }
.payment-plan-preset { min-height: 30px; padding: 0 12px; border: 0; border-radius: 999px; background: transparent; color: var(--text-2); font-size: var(--fs-ui); cursor: pointer; }
.payment-plan-preset:hover { color: var(--text-1); background: var(--border); }
.payment-plan-preset:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.payment-plan-preset:disabled { cursor: default; opacity: .5; }
.payment-plan-preset-hint { margin: 0; font-size: var(--fs-ui); color: var(--text-2); }
.payment-plan-strip { position: relative; height: 72px; margin: 2px 8px 4px; }
.payment-plan-strip-axis { position: absolute; left: 0; right: 0; top: 36px; height: 2px; background: var(--primary); }
.payment-plan-strip-ms { position: absolute; top: 0; transform: translateX(-50%); text-align: center; white-space: nowrap; }
.payment-plan-strip-ms b { display: block; font-size: var(--fs-ui); font-weight: 500; color: var(--text-1); font-variant-numeric: tabular-nums; }
.payment-plan-strip-ms i { display: block; width: 12px; height: 12px; margin: 7px auto 0; border-radius: 50%; background: var(--primary); border: 3px solid var(--bg-input); box-sizing: content-box; }
.payment-plan-strip-mo { position: absolute; top: 54px; transform: translateX(-50%); font-size: var(--fs-meta); color: var(--text-3); }
.payment-plan-share { width: 9rem; }
.payment-plan-step { width: 28px; height: 30px; padding: 0; border: 0; border-radius: var(--radius-sm); background: transparent; color: var(--text-2); font-size: var(--fs-body); cursor: pointer; }
.payment-plan-step:hover { color: var(--text-1); background: var(--border); }
.payment-plan-step:focus-visible { outline: 2px solid var(--primary); outline-offset: 1px; }
.payment-plan-step:disabled { cursor: default; opacity: .5; }
.payment-plan-share-wrap input[type="text"] { width: 3.5rem; }
.price-cards > .payment-plan { margin-top: 0; }
/* Detailseiten (beide Shells): kompakte Liste. */
.payment-plan-summary { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; text-align: left; }
.payment-plan-item { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 4px 10px; align-items: baseline; }
.payment-plan-item-due, .payment-plan-item-amt { color: var(--text-2); font-variant-numeric: tabular-nums; white-space: nowrap; }
.opp-sb-value .payment-plan-status { margin-top: 4px; text-align: left; }

/* Die Rueckfrage beim Speichern. Vier randlose Absaetze uebereinander lesen sich als
   ein Block — der Befund muss zuerst ins Auge fallen, die Einordnung danach. */
.pt-deviation-kern {
  margin: 0 0 6px;
  font-size: var(--fs-body);
  font-weight: 500;
  color: var(--text-1);
}

.pt-deviation-folge,
.pt-deviation-marge {
  margin: 0 0 6px;
  color: var(--text-2);
}

.pt-deviation-hinweis {
  margin: 12px 0 0;
  font-size: var(--fs-ui);
  color: var(--text-3);
}

/* PR1.380 — Hinweis „gibt es vielleicht schon". Gleiche Hierarchie wie die PT-Rueckfrage:
   Befund fett, Treffer als knappe Liste, Einordnung klein darunter. */
.opp-dup-section + .opp-dup-section { margin-top: 12px; }

.opp-dup-kern {
  margin: 0 0 6px;
  font-weight: 600;
  color: var(--text-1);
}

.opp-dup-list {
  margin: 0;
  padding-left: 18px;
  color: var(--text-1);
}

.opp-dup-item + .opp-dup-item { margin-top: 4px; }

/* Als Verweis erkennbar, ohne eigene Linkfarbe: Unterstrich statt Farbe — die Linkfarben
   beider Shells liegen im Dunklen unter AA, der Unterstrich traegt in jedem Theme. */
.opp-dup-link {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 2px;
  margin-left: 4px;
}

.opp-dup-meta,
.opp-dup-more {
  color: var(--text-2);
}

.opp-dup-more { margin: 4px 0 0; }

.opp-dup-hinweis {
  margin: 12px 0 0;
  font-size: var(--fs-ui);
  color: var(--text-3);
}

.opp-profil-lead {
  margin: 0 0 var(--form-block-gap);
  font-size: var(--fs-ui);
  color: var(--text-3);
}

/* PR1.200 #359 — die fehlenden Pflichtangaben, bevor jemand auf „Speichern" klickt.
   Zugeklappt ist es eine Zeile; wer wissen will, WELCHE fehlen, klappt auf und
   springt per Klick zum Feld. */
.opp-gaps {
  margin: 0 0 var(--form-block-gap);
  font-size: var(--fs-ui);
}

.opp-gaps-head {
  margin: 0;
  color: var(--warning);
}

.opp-gaps-list {
  list-style: none;
  margin: 6px 0 0;
  padding: 0 0 0 2px;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

/* PR1.393 (#621) — Hinweis auf ein sehr aehnliches Projekt beim Umwandeln: Zeilen untereinander. */
.pm-dup-hinweis .opp-gaps-list { flex-direction: column; gap: 2px; color: var(--text-1); }
.pm-dup-hinweis .opp-gaps-list + .opp-gaps-head { margin-top: 6px; color: var(--text-2); }

.opp-gaps-jump {
  background: none;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text-2);
  cursor: pointer;
  font-size: var(--fs-meta);
  padding: 2px 8px;
}

.opp-gaps-jump:hover {
  border-color: var(--warning);
  color: var(--text-1);
}

.opp-gaps-jump:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 1px;
}

/* PR1.337 (#551) — Kennzahl-Leiste ueber der Opp-Liste: „41 offen · 29 Leads · …".
   Eine ruhige Zeile statt vier bunter Kacheln; jede Zahl ist ein echter Knopf (Filter an/aus).
   Mehrmals taeglich genutzt → keine Animation, auch kein Uebergang beim Zeigen. */
.opp-kz-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
  min-height: 44px;
  margin-bottom: 16px;
  padding: 4px 8px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg-card);
}
.opp-kz {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  padding: 6px 10px;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--text-2);
  font: inherit;
  font-size: var(--fs-body);
  cursor: pointer;
}
.opp-kz-num {
  color: var(--text-1);
  font-size: var(--fs-title);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.opp-kz:hover { background: var(--bg-hover); color: var(--text-1); }
.opp-kz:focus-visible { outline: 2px solid var(--primary); outline-offset: 1px; }
.opp-kz.is-active,
.opp-kz[aria-pressed="true"] {
  border-color: var(--primary);
  background: var(--primary-glow);
  color: var(--text-1);
}
.opp-kz.is-alert .opp-kz-num { color: var(--danger); }
.opp-kz-sep { color: var(--text-3); user-select: none; }
.opp-kz-hint { padding: 6px 10px; color: var(--text-3); font-size: var(--fs-body); }
.opp-kz-hint--error { color: var(--danger); }
/* PR1.532 (#808) — Trefferzahl rechts in der Leiste (ersetzt die Fusszeile unter der Tabelle)
   und Kennzahl-Tooltip bei Hover UND Tastatur-Fokus (title erschiene nur bei Hover).
   Taeglich genutzt → ohne Uebergang. */
.opp-kz { position: relative; }
.opp-kz-count {
  margin-left: auto;
  padding: 6px 10px;
  color: var(--text-3);
  font-size: var(--fs-ui);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.opp-kz[data-tip]:hover::after,
.opp-kz[data-tip]:focus-visible::after {
  content: attr(data-tip); position: absolute; left: 0; top: calc(100% + 4px); z-index: 40;
  width: max-content; max-width: 320px; padding: 6px 10px; border-radius: 6px;
  white-space: normal; text-align: left; font-size: var(--fs-ui); font-weight: 500; line-height: 1.4;
  background: var(--bg-card); color: var(--text-1); border: 1px solid var(--border);
  box-shadow: 0 6px 16px -8px rgba(0,0,0,.4);
  pointer-events: none;
}
@media (max-width: 640px) {
  .opp-kz-sep { display: none; }
  .opp-kz { padding: 6px 8px; }
}

/* PR1.364 (#578) — Dashboard-Karte „Projekt-Health": Zahlenleiste wie die Projektliste,
   darunter die aufgeklappten Projekte. Jede Zeile ist ein echter Knopf (oeffnet das
   Projekt). Woechentlich bis taeglich genutzt → keine Animation. */
.dash-ph { display: flex; flex-direction: column; gap: 10px; }
.dash-ph-bar { margin-bottom: 0; }
.dash-ph-hint,
.dash-ph-leer { margin: 0; padding: 2px; color: var(--text-3); font-size: var(--fs-body); }
.dash-ph-leer { color: var(--text-2); }
.dash-ph-liste { list-style: none; margin: 0; padding: 0; }
.dash-ph-item + .dash-ph-item { border-top: 1px solid var(--border); }
.dash-ph-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas: "kopf meta" "schilder schilder" "satz satz";
  gap: 4px 12px;
  width: 100%;
  padding: 8px 6px;
  border: 0;
  border-radius: var(--radius-sm);
  background: none;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.dash-ph-row:hover { background: var(--bg-hover); }
.dash-ph-row:focus-visible,
.dash-ph-alle:focus-visible { outline: 2px solid var(--primary); outline-offset: 1px; }
.dash-ph-kopf { grid-area: kopf; display: flex; align-items: baseline; gap: 8px; min-width: 0; }
.dash-ph-name { color: var(--text-1); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dash-ph-kunde { color: var(--text-2); font-size: var(--fs-ui); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dash-ph-meta { grid-area: meta; color: var(--text-3); font-size: var(--fs-ui); white-space: nowrap; }
.dash-ph-schilder { grid-area: schilder; display: flex; flex-wrap: wrap; gap: 4px; }
.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-body);
}
.dash-ph-fuss { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 12px; }
.dash-ph-mehr { margin-right: auto; color: var(--text-3); font-size: var(--fs-ui); }
.dash-ph-alle { padding: 4px 2px; border: 0; background: none; color: var(--primary-text); font: inherit; font-size: var(--fs-body); cursor: pointer; }
.dash-ph-alle:hover { text-decoration: underline; }
@media (max-width: 640px) {
  .dash-ph-row { grid-template-columns: minmax(0, 1fr); grid-template-areas: "kopf" "meta" "schilder" "satz"; }
}

.badge-lead {
  background: rgba(100, 116, 139, .15);
  color: var(--lead);
}
/* PR1.353 (#567) — Status-Schildchen der Projekttabelle in der Form der Opp-Tabelle, aber mit
   gemessenem Kontrast ≥ 4.5:1 in Hell und Dunkel (axe: Planung 3.34, Abschluss 4.37, On Hold
   4.46 mit den reinen Opp-Toenen). Nur hier gescoped — die Opp-Schildchen bleiben unberuehrt.
   Abschluss als Umriss statt Flaeche: sonst waeren Planung und Abschluss nicht zu unterscheiden. */
table.project-table .badge-lead { color: var(--text-2); }
table.project-table .badge-qualification { color: color-mix(in srgb, var(--warning) 75%, var(--text-1)); }
table.project-table .badge-lead.project-status-closed {
  color: var(--text-2);
  background: transparent;
  box-shadow: inset 0 0 0 1px var(--border);
}

.badge-qualification {
  background: rgba(245, 158, 11, .15);
  color: var(--warning);
}

.badge-proposal {
  background: rgba(99, 102, 241, .15);
  color: var(--primary);
}

.badge-won {
  background: rgba(16, 185, 129, .15);
  color: var(--success);
}

.badge-lost {
  background: rgba(239, 68, 68, .15);
  color: var(--danger);
}

.badge-running {
  background: rgba(6, 182, 212, .15);
  color: var(--accent);
}

/* ── FTE Bar ── */
.fte-bar-wrap {
  margin-top: 6px;
}

.fte-bar-header {
  display: flex;
  justify-content: space-between;
  font-size: var(--fs-label);
  color: var(--text-2);
  margin-bottom: 5px;
}

.fte-bar-track {
  background: var(--border);
  border-radius: 99px;
  height: 6px;
  overflow: hidden;
}

.fte-bar-fill {
  height: 100%;
  border-radius: 99px;
  transition: width .5s ease;
}

.fte-bar-fill.green {
  background: linear-gradient(90deg, var(--success), #34d399);
}

.fte-bar-fill.yellow {
  background: linear-gradient(90deg, var(--warning), #fbbf24);
}

.fte-bar-fill.red {
  background: linear-gradient(90deg, var(--danger), #f87171);
}

/* ── Consultant Matching ── */
#matching-container {
  background: var(--bg-base);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 10px;
  max-height: 340px;
  overflow-y: auto;
}

.matching-placeholder {
  font-size: var(--fs-meta);
  color: var(--text-2);
  text-align: center;
  padding: 16px;
}

/* PR1.61 (#209) — Freitext-Namenssuche über der Kandidatenliste.
   Self-contained (die .search-wrap-Optik ist an .filter-bar gebunden). */
.matching-search-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 7px 12px;
  margin: 8px 0 10px;
}
.matching-search-wrap input {
  background: none;
  border: none;
  outline: none;
  color: var(--text-1);
  font-size: var(--fs-body);
  width: 100%;
}
.matching-search-wrap input::placeholder {
  color: var(--text-3);
}

.match-card {
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg-card);
  margin-bottom: 6px;
  transition: border-color .2s;
}

.match-card:hover { border-color: var(--primary); }
.match-card.assigned { border-color: var(--success); }

.match-card-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  cursor: pointer;
}

.match-info { flex: 1; min-width: 0; }
.match-name { font-size: var(--fs-ui); font-weight: 500; }
.match-role { font-size: var(--fs-label); color: var(--text-2); }

.match-score-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 110px;
}

.match-score-bar {
  flex: 1;
  height: 6px;
  background: var(--border);
  border-radius: 99px;
  overflow: hidden;
  min-width: 50px;
}

.match-score-fill {
  height: 100%;
  border-radius: 99px;
  transition: width .4s ease;
}

.match-score-fill.high { background: linear-gradient(90deg, var(--success), #34d399); }
.match-score-fill.medium { background: linear-gradient(90deg, var(--warning), #fbbf24); }
.match-score-fill.low { background: linear-gradient(90deg, var(--danger), #f87171); }

.match-score-label {
  font-size: var(--fs-label);
  font-weight: 500;
  min-width: 32px;
  text-align: right;
}

.match-assign-btn {
  padding: 3px 10px;
  font-size: var(--fs-label);
  border-radius: 4px;
  border: 1px solid var(--primary);
  background: transparent;
  color: var(--primary);
  cursor: pointer;
  white-space: nowrap;
  transition: all .2s;
}

.match-assign-btn:hover { background: var(--primary); color: #fff; }

.match-assignment-fields {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px 8px 50px;
  border-top: 1px solid var(--border);
  font-size: var(--fs-label);
}
.match-assignment-fields label { color: var(--text-2); font-size: var(--fs-label); }
.match-assignment-fields input {
  background: var(--bg-base);
  border: 1px solid var(--border);
  border-radius: 4px;
  color: var(--text-1);
  padding: 3px 7px;
  font-size: var(--fs-label);
}
.match-role-input { width: 110px; }
.match-fte-input { width: 60px; }

.match-unassign-btn {
  padding: 3px 10px;
  font-size: var(--fs-label);
  border-radius: 4px;
  border: 1px solid var(--success);
  background: var(--success)22;
  color: var(--success);
  cursor: pointer;
  white-space: nowrap;
  font-weight: 500;
  transition: all .2s;
}
.match-unassign-btn:hover { background: var(--danger); border-color: var(--danger); color: #fff; }

/* Score Breakdown (collapsible) */
.match-breakdown {
  display: none;
  padding: 8px 10px 10px 50px;
  border-top: 1px solid var(--border);
  font-size: var(--fs-label);
}

.match-breakdown.open { display: block; }

.match-breakdown-title {
  font-weight: 600;
  color: var(--accent);
  font-size: var(--fs-label);
  margin-bottom: 6px;
}

.match-breakdown-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 3px;
}

.match-breakdown-label {
  min-width: 120px;
  color: var(--text-2);
  font-size: var(--fs-label);
}

.match-mini-bar-track {
  flex: 1;
  height: 4px;
  background: var(--border);
  border-radius: 99px;
  overflow: hidden;
}

.match-mini-bar-fill {
  height: 100%;
  border-radius: 99px;
}

.match-mini-bar-fill.high { background: var(--success); }
.match-mini-bar-fill.medium { background: var(--warning); }
.match-mini-bar-fill.low { background: var(--danger); }

.match-breakdown-value {
  min-width: 24px;
  text-align: right;
  font-weight: 600;
  color: var(--text-1);
}

.match-breakdown-detail {
  font-size: var(--fs-label);
  color: var(--text-3);
  margin-bottom: 6px;
  padding-left: 128px;
}

.match-breakdown-total {
  margin-top: 6px;
  padding-top: 6px;
  border-top: 1px dashed var(--border);
  font-size: var(--fs-label);
  color: var(--text-1);
}

/* ── Sort Toggle Bar (HF2.4) ── */
#matching-sort-bar {
  display: flex;
  gap: 4px;
  margin-bottom: 8px;
  padding: 2px;
  background: var(--bg-base);
  border-radius: 6px;
  border: 1px solid var(--border);
}

.match-sort-btn {
  flex: 1;
  padding: 4px 8px;
  font-size: var(--fs-label);
  font-weight: 500;
  border: none;
  border-radius: 4px;
  background: transparent;
  color: var(--text-2);
  cursor: pointer;
  transition: all .2s;
}
.match-sort-btn:hover { color: var(--text-1); background: var(--border); }
.match-sort-btn.active { background: var(--primary); color: #fff; font-weight: 600; }

/* ── PR1.45 — Candidate-Sort-Toggle (Opp-Detail / Matching-Dialog / Project-Detail) ── */
.candidate-sort-toggle {
  display: flex;
  gap: 4px;
  align-items: center;
  margin-bottom: 10px;
  padding: 4px 6px;
  background: var(--bg-base);
  border: 1px solid var(--border);
  border-radius: 6px;
  flex-wrap: wrap;
}
.candidate-sort-toggle .candidate-sort-label {
  font-size: var(--fs-label);
  color: var(--text-3);
  margin-right: 4px;
  flex-shrink: 0;
}
.candidate-sort-toggle .match-sort-btn {
  flex: 0 1 auto;
  padding: 3px 9px;
  font-size: var(--fs-label);
}
.candidate-sort-toggle .match-sort-btn[aria-pressed="true"] { background: var(--primary); color: #fff; font-weight: 600; }

/* ── Dual Score Bars (HF2.4) ── */
.match-dual-scores {
  display: flex;
  gap: 12px;
  padding: 6px 10px 2px 50px;
}

.match-score-col { flex: 1; min-width: 0; }

.match-score-label-sm {
  font-size: var(--fs-label);
  color: var(--text-3);
  margin-bottom: 2px;
  font-weight: 500;
}

.match-score-bar-wrap {
  display: flex;
  align-items: center;
  gap: 6px;
}

.match-score-bar {
  flex: 1;
  height: 6px;
  background: var(--border);
  border-radius: 99px;
  overflow: hidden;
  min-width: 40px;
}
.match-score-bar.comp { }
.match-score-bar.avail { }

.match-score-fill-comp {
  height: 100%;
  border-radius: 99px;
  background: linear-gradient(90deg, #6366f1, #818cf8);
  transition: width .4s ease;
}

.match-score-fill-avail {
  height: 100%;
  border-radius: 99px;
  transition: width .4s ease;
}
.match-score-fill-avail.high { background: linear-gradient(90deg, var(--success), #34d399); }
.match-score-fill-avail.medium { background: linear-gradient(90deg, var(--warning), #fbbf24); }
.match-score-fill-avail.low { background: linear-gradient(90deg, var(--danger), #f87171); }

.match-score-pct {
  font-size: var(--fs-label);
  font-weight: 500;
  min-width: 28px;
  text-align: right;
  color: var(--text-1);
}

.match-avail-hint {
  font-size: var(--fs-label);
  color: var(--text-3);
  margin-top: 1px;
}

/* ── Recommendation Badge & Text (HF2.4) ── */
.match-recommendation {
  padding: 4px 10px 6px 50px;
}

.match-rec-badge {
  display: inline-block;
  padding: 1px 8px;
  font-size: var(--fs-label);
  font-weight: 500;
  border-radius: 4px;
  border: 1px solid;
  margin-bottom: 3px;
}

.match-rec-text {
  font-size: var(--fs-label);
  color: var(--text-2);
  line-height: 1.35;
}

/* ── Strengths & Gaps Chips (HF2.4) ── */
.match-bd-section {
  margin-top: 6px;
  font-size: var(--fs-label);
}
.match-bd-section-label {
  font-weight: 600;
  color: var(--text-2);
  margin-right: 4px;
}

.match-strength-chip {
  display: inline-block;
  padding: 1px 6px;
  margin: 1px 3px;
  font-size: var(--fs-label);
  background: var(--success)18;
  color: var(--success);
  border-radius: 3px;
  border: 1px solid var(--success)33;
}

.match-gap-chip {
  display: inline-block;
  padding: 1px 6px;
  margin: 1px 3px;
  font-size: var(--fs-label);
  background: var(--danger)18;
  color: var(--danger);
  border-radius: 3px;
  border: 1px solid var(--danger)33;
  cursor: help;
}

/* ── Star Rating ── */
.star-rating {
  display: flex;
  gap: 2px;
}

.star {
  color: var(--border-light);
  font-size: var(--fs-body);
}

.star.filled {
  color: var(--warning);
}

/* ── Star Picker (Modal) ── */
.star-pick {
  display: inline-block;
  transition: color .15s, transform .15s;
  user-select: none;
  line-height: 1;
}

.star-pick:hover {
  transform: scale(1.25);
}

/* ── Competency Row ── */
.competency-row {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: var(--fs-meta);
  padding: 4px 0;
}

.competency-label {
  width: 60px;
  font-weight: 500;
  font-size: var(--fs-label);
}

/* ── Tables ── */
.table-wrap {
  overflow-x: auto;
  border-radius: var(--radius-lg);
  border: 1px solid var(--border);
}

table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fs-body);
}

thead tr {
  background: var(--bg-card2);
  border-bottom: 1px solid var(--border);
}

th {
  padding: 11px 14px;
  text-align: left;
  font-size: var(--fs-label);
  font-weight: 500;
  color: var(--text-2);
  white-space: nowrap;
}

tbody tr {
  border-bottom: 1px solid var(--border);
  transition: background var(--transition);
}

tbody tr:last-child {
  border-bottom: none;
}

tbody tr:hover {
  background: var(--bg-hover);
  cursor: pointer;
}

td {
  padding: 11px 14px;
  vertical-align: middle;
}

/* ── Filter Bar ── */
.filter-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 18px;
}

.filter-bar .search-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 7px 12px;
  flex: 1;
  min-width: 200px;
  max-width: 320px;
}

.filter-bar .search-wrap input {
  background: none;
  border: none;
  outline: none;
  color: var(--text-1);
  font-size: var(--fs-body);
  width: 100%;
}

.filter-bar .search-wrap input::placeholder {
  color: var(--text-3);
}

.filter-bar select {
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text-1);
  padding: 7px 12px;
  font-size: var(--fs-ui);
  outline: none;
  cursor: pointer;
}

.filter-bar select:focus {
  border-color: var(--primary);
}

/* ── Forms (modal) ── */
/* PR1.438 — section pattern for every mask and dialog (both shells; the redesign maps tokens).
   Browsers draw <fieldset>/<legend> as a framed box; nothing in Apollon wants that box, so the
   reset is global. Semantics stay (screen readers announce the legend as group name). */
fieldset {
  border: 0;
  margin: 0;
  padding: 0;
  min-width: 0;
}

legend {
  padding: 0;
}

.form-section + .form-section {
  margin-top: 24px;
}

/* One look for every section head — masks, dialogs and detail panels. Sentence case, ink colour,
   hairline below. The old per-component classes keep only their layout (margins, flex). */
.form-section > legend,
.form-section-label,
.ch-section-title,
.kbcc-detail-section-header,
.gap-section-title,
.opp-cand-detail-section-title,
.opp-cand-section-title,
.clsf-section-title,
.cd-section-title,
.cd-group-title,
.crm-cd-group-title,
.column-picker-section-title {
  font-size: var(--fs-body);
  font-weight: 600;
  line-height: 1.35;
  text-transform: none;
  letter-spacing: 0;
  color: var(--text-1);
  padding-bottom: 8px;
  border-bottom: 1px solid var(--border);
}

.form-section > legend {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  margin-bottom: 16px;
}

/* Quiet status on the right of a section head ("1 Pflichtfeld fehlt"); empty = nothing shown. */
.form-section-status {
  font-size: var(--fs-meta);
  font-weight: 500;
  color: var(--danger);
}

.form-section-status:empty {
  display: none;
}

/* Field hint below a control — replaces inline <small style="…">. */
.field-hint {
  display: block;
  margin-top: 6px;
  font-size: var(--fs-meta);
  font-weight: 400;
  line-height: 1.4;
  color: var(--text-3);
}

.field-hint.is-warning { color: var(--warning); }
.field-hint.is-error { color: var(--danger); }
.field-hint[hidden] { display: none; }
/* PR1.453 — `.form-group` is flex; without this a hidden group (Kernkompetenz off) stays visible. */
.form-group[hidden] { display: none; }
/* Hint ABOVE a list (introduces it), slightly stronger. */
.field-hint.is-lead { margin: 0 0 6px; color: var(--text-2); }
/* Hint under a checkbox row: aligned with the checkbox label text. */
.field-hint.is-indented { margin-left: 22px; }

/* "* Pflichtfeld" legend at the top of a mask and the star after a label. */
.form-required-legend {
  margin: 0 0 12px;
  font-size: var(--fs-meta);
  color: var(--text-3);
}

.req-star {
  color: var(--danger);
  margin-left: 2px;
}

.form-grid {
  display: grid;
  gap: 16px;
}

/* PR1.438 — 6-column field grid: short fields share a row (span-1…span-6), one column only when
   the section/panel itself is narrower than 26rem. Not 36rem: the Opp-Maske panel next to the
   step rail is ~29rem wide at 1280px and would otherwise never show two fields side by side
   (live finding 23.10.2026). */
.form-section,
.fw-panel {
  container-type: inline-size;
}

.form-grid-6 {
  grid-template-columns: repeat(6, minmax(0, 1fr));
}

.form-grid-6 > .span-1 { grid-column: span 1; }
.form-grid-6 > .span-2 { grid-column: span 2; }
.form-grid-6 > .span-3 { grid-column: span 3; }
.form-grid-6 > .span-4 { grid-column: span 4; }
.form-grid-6 > .span-5 { grid-column: span 5; }
.form-grid-6 > .span-6 { grid-column: 1 / -1; }

/* A button bar (.cs-segment) does not shrink like a field: in a narrow section a short cell
   (span-1/2/3) would clip its last button ("Nein" in the Opp-Maske ANUE, redesign 1280px,
   live finding 23.10.2026). Below 36rem section width it takes its own row. */
@container (max-width: 36rem) {
  .form-grid-6 > .form-group:has(.cs-segment) { grid-column: 1 / -1; }
}

@container (max-width: 26rem) {
  .form-grid-6 { grid-template-columns: minmax(0, 1fr); }
  .form-grid-6 > [class*="span-"] { grid-column: 1 / -1; }
}

.form-grid-2 {
  grid-template-columns: 1fr 1fr;
}

.form-grid-3 {
  grid-template-columns: 1fr 1fr 1fr;
}

.form-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* PR1.438 — label above the field, 13.5px/500 in --text-2 (Taste §8.1). `.form-label` is the
   same label for groups without a single control (pills). */
.form-group label,
.form-group > .form-label {
  font-size: var(--fs-body);
  font-weight: 500;
  color: var(--text-2);
}

/* The hint sits 6px under its field, not 8px (gap) + 6px. */
.form-group > .field-hint {
  margin-top: -2px;
}

/* BF-82 (#671) — Ankreuzfelder und Optionsknoepfe sind keine Textfelder. Bis hierher traf
   diese Regel JEDES input in einem Formularblock: Kaestchen wurden bis zu 370 px breit, bekamen
   Polster, Rahmen und Fokus-Glow und schoben ihre Beschriftung aus der Zeile. Bisher nur
   punktuell geflickt (.opp-role-card, .form-group-check). `:where()` haelt die Spezifitaet bei
   (0,1,1) — keine Komponenten-Regel gewinnt oder verliert dadurch ploetzlich. Die gemeinsame
   Form fuer „Kaestchen + Text" ist `.check-row` weiter unten. */
.form-group input:where(:not([type="checkbox"]):not([type="radio"])),
.form-group select,
.form-group textarea {
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text-1);
  padding: 8px 12px;
  font-size: var(--fs-body);
  outline: none;
  transition: border-color var(--transition);
  width: 100%;
}

/* PR1.438 — every single-line control is 38px high (dates included), multi-line ones grow. */
.form-group input:where(:not([type="checkbox"]):not([type="radio"]):not([type="file"])),
.form-group select:not([multiple]):not([size]) {
  min-height: 2.375rem;
}

/* Locked field: dashed frame, still fully readable; the reason sits below as .field-hint. */
.form-group input:where(:not([type="checkbox"]):not([type="radio"])):disabled,
.form-group select:disabled,
.form-group textarea:disabled {
  border-style: dashed;
  color: var(--text-1);
  opacity: 1;
  cursor: not-allowed;
}

/* Field error: red frame, the sentence below names the next step. */
.form-group.has-error input:where(:not([type="checkbox"]):not([type="radio"])),
.form-group.has-error select,
.form-group.has-error textarea,
.form-group.has-error .cs-field,
.form-group.has-error .ms-input {
  border-color: var(--danger);
}

.form-group input:where(:not([type="checkbox"]):not([type="radio"])):focus,
.form-group select:focus,
.form-group textarea:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px var(--primary-glow);
}

.form-group textarea {
  resize: vertical;
  min-height: 80px;
}

/* PR1.200 #359 — Checkbox-Zelle in einem Formular-Raster.
   Eine Checkbox traegt ihren Text IM <label> und hat damit keine Beschriftungs-
   zeile ueber sich. Im Raster klebte sie deshalb an der Oberkante, waehrend die
   Nachbarfelder erst unter ihrem Label beginnen — zwei Grundlinien in einer
   Zeile. Die Zelle schiebt ihren Inhalt nach unten und gibt ihm Feldhoehe. */
.form-group-check {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

.form-group-check > label {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 37px;   /* = Hoehe eines Eingabefelds: 8px Polster + .85rem + Rahmen */
  margin: 0;
  font-size: var(--fs-ui);
  font-weight: 400;
  color: var(--text-1);
  cursor: pointer;
}

.form-group-check input[type="checkbox"] {
  width: auto;
  flex: 0 0 auto;
  margin: 0;
}

/* PR1.438 — look from the shared section-head rule above; spacing for the div variant
   (10px + the 14px block gap above = 24px between sections). */
.form-section-label {
  margin: 10px 0 16px;
}

/* ── Modal ── */
.modal-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, .7);
  backdrop-filter: blur(6px);
  z-index: 1000;
  align-items: center;
  justify-content: center;
  animation: fadeIn .15s ease;
}

.modal-overlay.open {
  display: flex;
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

.modal {
  background: var(--bg-card);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-lg);
  width: 90%;
  max-width: 760px;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  animation: slideUp .2s ease;
}

/* PR1.139 #289 — Vollbild-Variante des Modals (Opp-Anlege-/Bearbeiten-Maske).
   Füllt die gesamte Ansicht → kein versehentliches Wegklicken. Nur diese Klasse,
   disjunkt zu Parallelticket #287 (.match-progress). .modal-body behält
   overflow-y:auto → Inhalt scrollt innerhalb des Vollbilds. */
.modal.modal--fullscreen {
  width: 100%;
  max-width: none;
  height: 100vh;
  max-height: 100vh;
  border-radius: 0;
}

@keyframes slideUp {
  from {
    opacity: 0;
    transform: translateY(24px);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

.modal-header {
  padding: 22px 24px 16px;
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-shrink: 0;
}

/* PR1.368 #582 — Aktionsgruppe im Kopf von Opportunity- und Projektmaske (vorher
   Inline-Styles). margin-left:auto statt des geerbten space-between: der Edit-Guard
   haengt den ✏️-Knopf als drittes Kind an den Kopf, gleichmaessig verteilt schwaemme
   die Gruppe sonst in der Mitte. So steht der Titel links, alle Knoepfe als Block rechts. */
.modal-header-actions {
  display: flex;
  gap: 8px;
  align-items: center;
  margin-left: auto;
}

.modal-header-actions .btn-icon {
  font-size: var(--fs-title);
}

.modal-title {
  font-size: var(--fs-section);
  font-weight: 600;
}

.modal-body {
  padding: 22px 24px;
  overflow-y: auto;
  flex: 1;
}

.modal-footer {
  padding: 16px 24px;
  border-top: 1px solid var(--border);
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  flex-shrink: 0;
}

/* ── Section Header ── */
.section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 18px;
}

.section-header h2 {
  font-size: var(--fs-body);
  font-weight: 600;
}

/* ── Grid layouts ── */
.grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.grid-3 {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 16px;
}

/* ── Employee Cards ── */
.employee-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 14px;
}

.employee-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 18px;
  cursor: pointer;
  transition: all var(--transition);
  position: relative;
  overflow: hidden;
}

.employee-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow);
  border-color: var(--border-light);
}

.employee-card-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
}

.emp-avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--fs-body);
  font-weight: 500;
  flex-shrink: 0;
  /* Anker fuer absolut positionierte Overlays auf dem Avatar. */
  position: relative;
}

/* PR1.280 (#475): die Sourcing-Badges auf dem MA-Avatar (.avatar-badge*) sind entfallen —
   sie zeigten auf 99 % der Karten nichts an. Kein Renderer schreibt sie mehr. */

/* PR1.280 (#475) — Kopf des Shoring-Abschnitts in der klassischen MA-Uebersicht.
   Ein echter Knopf (nicht nur optisch): mit Tastatur erreichbar, Fokus sichtbar. Eigener
   Klassenname, weil `.emp-shoring-head` im Redesign bereits vergeben ist und im
   `.crm`-Scope liegt. */
.emp-shoring-toggle {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  margin-top: 18px;
  padding: 10px 2px;
  background: none;
  border: none;
  border-top: 1px solid var(--border-light);
  color: var(--text-2);
  font-size: var(--fs-meta);
  font-weight: 500;
  letter-spacing: .04em;
  text-align: left;
  cursor: pointer;
}
.emp-shoring-toggle:hover { color: var(--text-1); }
.emp-shoring-toggle:focus-visible {
  outline: 2px solid var(--primary, #6366f1);
  outline-offset: 2px;
}
.emp-shoring-caret { font-size: var(--fs-label); opacity: .8; }
.emp-shoring-count {
  margin-left: auto;
  font-weight: 500;
  /* --text-2 statt --text-3: letzteres liegt auf dem dunklen Grund bei ~4,2:1 und damit
     unter den 4,5:1, die WCAG AA fuer normalen Text verlangt. */
  color: var(--text-2);
}

/* PR1.12 — Sourcing-Filter-Chips (Multi-Toggle, geteilt MA-View + Kapa-View).
   Erbt von .btn aber zeigt aktive/inaktive Variante uniform — der active/inaktive
   Zustand wird ueber .active von JS gesetzt. */
.sourcing-chip {
  /* BF-98 (#731): nicht gewählt = gedämpfte Schrift statt 55 % Deckkraft (die lag unter AA);
     täglich genutzt → kein Übergang. */
  color: var(--text-2);
}
.sourcing-chip.active {
  opacity: 1;
  background: rgba(99, 102, 241, .15);
  border-color: rgba(99, 102, 241, .55);
  color: var(--text-1);
}
.sourcing-chip[data-sourcing="all"].active {
  background: rgba(99, 102, 241, .25);
  border-color: rgba(99, 102, 241, .85);
}
.sourcing-chip:hover { color: var(--text-1); }

/* PR1.28 (#166) — CC-Filter-Chips (Competence-Center, Multi-Select). Spiegelt das
   Sourcing-Chip-Verhalten: .active von JS gesetzt, Master "Alle CC" stärker hervorgehoben. */
.cc-chip {
  opacity: .55;
  transition: opacity .14s ease, background-color .14s ease, border-color .14s ease;
}
.cc-chip.active {
  opacity: 1;
  background: rgba(99, 102, 241, .15);
  border-color: rgba(99, 102, 241, .55);
  color: var(--text-1);
}
.cc-chip[data-cc="__all__"].active {
  background: rgba(99, 102, 241, .25);
  border-color: rgba(99, 102, 241, .85);
}
/* PR1.97 (#244) — „Ohne CC"-Sonder-Eimer: kein echtes CC → optisch als Sonderfall
   (gestrichelter Rand, kursives Label, neutral-grauer Aktiv-Ton statt Indigo). */
.cc-chip.cc-chip-nocc {
  border-style: dashed;
  font-style: italic;
}
.cc-chip.cc-chip-nocc.active {
  background: rgba(148, 163, 184, .22);
  border-color: rgba(148, 163, 184, .85);
  color: var(--text-1);
}
.cc-chip:hover { opacity: 1; }

/* PR1.162 — CC-Filter als Dropdown (opt-in via renderCCChips({dropdown:true})). Die Chips
   im Panel bleiben unverändert .cc-chip, nur die Anordnung ist vertikal (Menü-Optik).
   Kein Auto-Close bei Klick daneben — konsistent zu den <details>-Gruppen der Chips-Bar. */
.cc-dropdown { position: relative; }
.cc-dropdown > summary {
  list-style: none;
  cursor: pointer;
  user-select: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text-1);
  padding: 7px 12px;
  font-size: var(--fs-ui);
  outline: none;
}
.cc-dropdown > summary::-webkit-details-marker { display: none; }
.cc-dropdown > summary::after {
  content: '';
  display: inline-block; width: 1em; height: 1em; background-color: currentColor;
  -webkit-mask: var(--ic-mask-caret-down); mask: var(--ic-mask-caret-down);
  font-size: var(--fs-label);
  color: var(--text-3);
}
.cc-dropdown > summary:hover { border-color: var(--primary); }
.cc-dropdown[open] > summary { border-color: var(--primary); }
.cc-dropdown-count {
  /* PR1.435 — weiss auf --primary liegt bei 4,46:1 (knapp unter AA); die -dark-Stufe traegt. */
  background: var(--primary-dark);
  color: #fff;
  border-radius: 999px;
  padding: 1px 7px;
  font-size: var(--fs-label);
  line-height: 1.5;
}
.cc-dropdown-panel {
  position: absolute;
  z-index: 30;
  top: calc(100% + 4px);
  left: 0;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 4px;
  min-width: 240px;
  max-height: 300px;
  overflow-y: auto;
  padding: 8px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: 0 8px 24px rgba(0, 0, 0, .28);
}
.cc-dropdown-panel .cc-chip { text-align: left; white-space: nowrap; }
/* PR1.309 (#518) — der Kopf des Dropdowns hatte `outline: none` ohne Ersatz: per Tastatur
   war nicht zu sehen, wo der Fokus steht. `--focus` gibt es nur im Redesign (.crm); dort
   bleibt so dessen Fokusfarbe, klassisch greift --primary. */
.cc-dropdown > summary:focus-visible {
  outline: 2px solid var(--focus, var(--primary));
  outline-offset: 2px;
}

/* PR1.97 (#244) — „Ohne CC"-Pill im Redesign-Shell (#app-crm.crm). style.css lädt in
   beiden Shells; .crm-Scope grenzt diese Regel auf das Redesign ein. Gleiche Sonderoptik
   wie der klassische Chip (gestrichelt, kursiv), Aktiv-Ton neutral-grau statt Blau. */
.crm .fpill[data-val="__NO_CC__"] {
  border-style: dashed;
  font-style: italic;
}
.crm .fpill[data-val="__NO_CC__"].is-on {
  background: rgba(148, 163, 184, .22);
  border-color: rgba(148, 163, 184, .55);
  color: var(--text-1);
}

.emp-name {
  font-size: var(--fs-body);
  font-weight: 500;
}

.emp-role {
  font-size: var(--fs-meta);
  color: var(--text-2);
  margin-top: 1px;
}

.emp-level {
  font-size: var(--fs-label);
  font-weight: 500;
  padding: 2px 7px;
  border-radius: 99px;
  background: rgba(99, 102, 241, .15);
  /* PR1.281 (#477): --primary reicht als Textfarbe auf diesem Schleier nicht (axe:
     color-contrast, serious, in allen drei Theme-Zustaenden). Bei .67rem/600 gilt die
     4.5:1-Schwelle, nicht die 3:1 fuer grossen Text. --primary-text ist die dafuer in
     PR1.279 eingefuehrte Stufe — kein neuer Farbwert. Der Befund ist aelter als dieses
     Ticket; er wird hier behoben, weil PR1.281 das Level in BEIDE Shells bringt und ein
     unlesbares Abzeichen die Paritaets-Aussage unterlaufen wuerde. */
  color: var(--primary-text);
  margin-top: 3px;
  display: inline-block;
}

.competency-grid {
  display: flex;
  flex-direction: column;
  gap: 5px;
  margin-bottom: 12px;
}

/* ── Mini Timeline (Employee Card) ── */
.mini-tl {
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  overflow: hidden;
  font-size: var(--fs-label);
}

.mini-tl-row {
  display: grid;
  grid-template-columns: 70px repeat(6, 1fr);
  border-bottom: 1px solid var(--border);
}

.mini-tl-row:last-child {
  border-bottom: none;
}

.mini-tl-header-row {
  background: var(--bg-card2);
}

.mini-tl-header-cell {
  padding: 3px 2px;
  text-align: center;
  font-size: var(--fs-label);
  font-weight: 500;
  color: var(--text-3);
}

.mini-tl-header-cell.current {
  color: var(--accent);
}

.mini-tl-label {
  padding: 3px 6px;
  font-size: var(--fs-label);
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: flex;
  align-items: center;
  border-right: 1px solid var(--border);
}

.mini-tl-cell {
  padding: 3px 2px;
  min-height: 16px;
  border-right: 1px solid var(--border);
}

.mini-tl-cell:last-child {
  border-right: none;
}

.mini-tl-cell.mini-tl-active {
  border: 1px solid;
  border-radius: 2px;
  margin: 2px 1px;
}

/* ── Gantt / Timeline ── */
.timeline-wrap {
  overflow-x: auto;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
}

.timeline-grid {
  min-width: 900px;
  font-size: var(--fs-meta);
}

.timeline-header {
  display: grid;
  background: var(--bg-card2);
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  z-index: 10;
}

.timeline-header-cell {
  padding: 10px 6px;
  text-align: center;
  font-size: var(--fs-label);
  font-weight: 500;
  color: var(--text-2);
  border-right: 1px solid var(--border);
}

.timeline-header-cell:first-child {
  text-align: left;
  padding-left: 14px;
  color: var(--text-1);
  position: sticky;
  left: 0;
  z-index: 11;
  background: var(--bg-card2);
}

.timeline-header-cell:last-child {
  border-right: none;
}

.timeline-header-cell.current-month {
  color: var(--accent);
  background: rgba(6, 182, 212, .05);
}

.timeline-row {
  display: grid;
  border-bottom: 1px solid var(--border);
  transition: background var(--transition);
}

.timeline-row:last-child {
  border-bottom: none;
}

.timeline-row:hover {
  background: rgba(255, 255, 255, .02);
}

.timeline-cell {
  padding: 8px 6px;
  border-right: 1px solid var(--border);
  position: relative;
  min-height: 46px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.timeline-cell:first-child {
  justify-content: flex-start;
  padding-left: 14px;
  position: sticky;
  left: 0;
  z-index: 5;
  background: var(--bg-card);
}

.timeline-row:hover .timeline-cell:first-child {
  background: rgba(255, 255, 255, .04);
}

.timeline-cell:last-child {
  border-right: none;
}

.gantt-block {
  height: 22px;
  border-radius: 4px;
  position: absolute;
  left: 2px;
  right: 2px;
  display: flex;
  align-items: center;
  padding: 0 6px;
  font-size: var(--fs-label);
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  opacity: .9;
  transition: opacity var(--transition);
}

.gantt-block:hover {
  opacity: 1;
  z-index: 5;
}

.timeline-cell-multi {
  flex-direction: column;
  gap: 2px;
  padding: 4px 3px;
  min-height: auto;
}

.gantt-block-stacked {
  width: 100%;
  border-radius: 3px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 2px 5px;
  font-size: var(--fs-label);
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  opacity: .9;
  transition: opacity var(--transition);
  min-height: 18px;
}

.gantt-block-stacked:hover {
  opacity: 1;
}

.gantt-block-stacked .gantt-label {
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1;
  min-width: 0;
}

.gantt-block-stacked .gantt-fte {
  flex-shrink: 0;
  margin-left: 3px;
  font-size: var(--fs-label);
  opacity: .8;
}

/* HF3.11: Tentative Mini-Timeline-Zellen — Schraffur */
.mini-tl-cell.mini-tl-active.mini-tl-tentative {
  border-style: dashed !important;
  opacity: .6;
  background-image: repeating-linear-gradient(
    135deg,
    transparent,
    transparent 2px,
    rgba(255, 255, 255, .15) 2px,
    rgba(255, 255, 255, .15) 4px
  );
}

/* HF3.11: Pre-Staffed-Suffix in Employee-FTE-Bar */
.fte-tentative {
  color: var(--text-3);
  font-weight: 500;
  font-style: italic;
  margin-left: 6px;
}

.timeline-heatmap-row {
  display: grid;
  border-top: 2px solid var(--border-light);
  background: var(--bg-card2);
}

.heatmap-cell {
  padding: 8px 6px;
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  font-size: var(--fs-label);
  font-weight: 500;
}

.heatmap-cell:first-child {
  align-items: flex-start;
  padding-left: 14px;
  font-weight: 600;
  color: var(--text-2);
  position: sticky;
  left: 0;
  z-index: 5;
  background: var(--bg-card2);
}

.heatmap-cell:last-child {
  border-right: none;
}

.heatmap-bar {
  width: 100%;
  height: 5px;
  border-radius: 99px;
}

/* ── Event Timeline ── */
.event-tl-block {
  cursor: pointer;
  transition: opacity var(--transition), transform 0.15s ease;
}
.event-tl-block:hover {
  opacity: 1 !important;
  transform: scale(1.04);
  z-index: 5;
}
.event-tl-overdue {
  animation: pulse-overdue 2s ease-in-out infinite;
}
@keyframes pulse-overdue {
  0%, 100% { box-shadow: none; }
  50% { box-shadow: 0 0 0 2px var(--danger); }
}
.event-tl-done {
  opacity: 0.45 !important;
}
.event-tl-done .gantt-label {
  text-decoration: line-through;
}
.evt-tl-gran-btn.active {
  background: var(--primary) !important;
  color: #fff !important;
  border-color: var(--primary) !important;
}

/* ── Opportunity Kanban ── */
.kanban-board {
  display: flex;
  gap: 14px;
  overflow-x: auto;
  padding-bottom: 8px;
}

.kanban-col {
  min-width: 230px;
  flex-shrink: 0;
  background: var(--bg-card2);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 14px;
  transition: all var(--transition);
}

.kanban-col.drag-over {
  background: var(--bg-hover);
  border-color: var(--primary);
  box-shadow: inset 0 0 0 1px var(--primary);
}

/* PR1.04: Eingeklappte Kanban-Spalte (Default fuer 'Irrelevant'). */
.kanban-col.collapsed {
  min-width: 70px;
  width: 70px;
  padding: 14px 8px;
  opacity: 0.7;
}
.kanban-col.collapsed .kanban-col-header {
  flex-direction: column;
  align-items: center;
  gap: 6px;
  margin-bottom: 0;
}
.kanban-col.collapsed .kanban-col-title {
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  font-size: var(--fs-meta);
}
.kanban-col.collapsed .kanban-card,
.kanban-col.collapsed .kanban-lost-archiv {
  display: none;
}

.kanban-col-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}

.kanban-col-title {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: var(--fs-ui);
  font-weight: 600;
}

.kanban-count {
  background: var(--border);
  color: var(--text-2);
  font-size: var(--fs-label);
  font-weight: 500;
  padding: 2px 7px;
  border-radius: 99px;
}

.kanban-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 12px;
  margin-bottom: 8px;
  cursor: pointer;
  transition: all var(--transition);
  position: relative; /* PR2.01 #131 — Anker für .apollon-num-card (top-right) */
}

.kanban-card:hover {
  transform: translateY(-1px);
  box-shadow: var(--shadow-sm);
  border-color: var(--border-light);
}

.kanban-card.dragging {
  opacity: 0.5;
  transform: scale(0.98);
  box-shadow: none;
  border-style: dashed;
}

/* PR1.02 — Won-Card nach Conversion: gegrauter Stil + sichtbare Ableitung. */
.kanban-card.card-converted {
  opacity: 0.72;
  border-style: dashed;
}
.kanban-card.card-converted .kanban-card-title {
  color: var(--text-2);
}
.kanban-card .card-converted-footer a:hover,
.kanban-card .card-convert-footer .btn-link-action:hover {
  text-decoration: underline;
}

.kanban-card:last-child {
  margin-bottom: 0;
}

.kanban-card-title {
  font-size: var(--fs-ui);
  font-weight: 600;
  margin-bottom: 6px;
}

.kanban-card-meta {
  font-size: var(--fs-label);
  color: var(--text-2);
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-top: 8px;
}

/* BF-27 #421 — Spaltenbreite, NUR fuer das Opportunity-Brett.
   Eine Flex-Spalte mit `flex-shrink: 0` und ohne Breitengrenze waechst mit ihrem breitesten
   Kind — deshalb schob eine Karte mit sechs Portfolio-Tags die hinteren Pipeline-Stufen aus
   dem Fenster. Jetzt teilen sich die Spalten den Platz und fallen nie unter 230px; darunter
   greift das overflow-x:auto des Bretts als Rueckfall (und der Balken sitzt dann direkt
   unter dem verkuerzten Brett, ist also erreichbar).
   Vorbild: `grid-template-columns: repeat(4, minmax(0,1fr))` der Redesign-Shell.

   Bewusst ueber die Brett-Id gescopt: `.kanban-col` gehoert auch dem Termin-Brett
   (#event-kanban-board, views/events.js) und dem Projekt-Brett (#project-kanban,
   views/projects.js). Beide haben denselben strukturellen Fehler, aber keine Meldung und
   keinen Messbeleg in diesem Ticket — ungepruefte Breitenaenderung an fremden Brettern
   waere ein blindes Risiko. */
/* PR1.564 (#850) — feste Spaltenbreite 280px statt geteiltem Platz (Entwurf 4): die Spalten
   werden nicht mehr gequetscht, das Brett scrollt waagrecht (.kanban-lanes unten). */
#kanban-board .kanban-col {
  flex: 0 0 280px;
}

/* Ohne eigene Kurzform schlaegt flex-basis:0 + grow:1 das `width` von oben und die
   eingeklappte „Irrelevant"-Spalte waere mitgewachsen. */
#kanban-board .kanban-col.collapsed {
  flex: 0 0 56px;
}

/* Sobald die Spalte geklemmt ist, kann ein langes Titel-Token nicht mehr durch Mitwachsen
   ausweichen und ragte sonst aus der Karte. PR1.433-optik: `break-word` statt `anywhere` —
   sonst brach der Titel neben breiten Logos mitten im Wort („Umgebun / g"). `break-word`
   trennt nur ein Wort, das allein breiter als die Zeile ist; die Spalte haelt ihre
   min-width:230px, ein langes Wort blaeht sie nicht auf. */
#kanban-board .kanban-card-title {
  overflow-wrap: break-word;
}

/* PR1.367 #581 — das Projekt-Brett bekommt dieselben Spaltenregeln wie das Opp-Brett
   (BF-27 oben), damit es sich zu 99,9 % gleich anfuehlt. Eigene Regeln statt einer
   Selektor-Gruppe: das Termin-Brett (#event-kanban-board) teilt .kanban-col und bleibt
   bewusst unberuehrt. Die fruehere Sonderregel „Projects-Kanban dezenter"
   (.kanban-projects .kanban-col-header, font-weight 500) ist entfallen — Kopf wie Opp. */
#project-kanban .kanban-col {
  flex: 0 0 280px;
}

#project-kanban .kanban-col.collapsed {
  flex: 0 0 56px;
}

#project-kanban .kanban-card-title {
  overflow-wrap: anywhere;
}

/* Die Projektnummer sitzt wie bei den Opps oben rechts in der Karte (.apollon-num-card,
   absolut). Fuenf Spalten (mit Waisen) machen die Karten schmaler als im Opp-Brett — ohne
   Freiraum lief der Titel unter die Nummer (lokaler Bildvergleich 08.10.2026). */
#project-kanban .apollon-num-card + .kc-head {
  padding-right: 4.5rem;
}

/* Kartenkopf wie im Opp-Brett: Kundenlogo bzw. Kuerzel links, Titel und Kunde daneben. */
#project-kanban .kc-head {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  min-width: 0;
}
#project-kanban .kc-head-text {
  flex: 1 1 auto;
  min-width: 0;
}
#project-kanban .kc-head .kanban-card-title {
  margin-bottom: 2px;
  line-height: 1.3;
}
#project-kanban .kc-customer {
  font-size: var(--fs-label);
  color: var(--text-2);
  overflow-wrap: break-word;
}

/* PR1.367 #581 — ohne Maus bedienbar: Karte (Enter oeffnet) und Spaltenkopf (Enter klappt)
   sind per Tab erreichbar und zeigen, wo der Fokus steht. */
#project-kanban .kanban-card:focus-visible,
#project-kanban .kanban-col-header:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}

/* BF-27 #421 — Tag-Zeile der Kanban-Karte. Die Abstaende standen bis dahin inline in
   views/opportunities.js. `overflow-wrap` ist der dritte Teil des Fehlers: .badge ist
   display:inline-flex und damit unteilbar, ein Name wie
   „Platform Integration - Transformation/Migration" allein ist breiter als die Spalte. */
.kanban-card-tags {
  margin-top: 4px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 3px;
  min-width: 0;
}

.kanban-card-tags .badge {
  max-width: 100%;
  overflow-wrap: anywhere;
}

.kanban-card-meta span {
  background: var(--bg-card2);
  padding: 2px 7px;
  border-radius: 99px;
  border: 1px solid var(--border);
}

/* PR1.433 (#676) — Opp-Kanban nach Entwurf K6. Alles unter #kanban-board: .kanban-col und
   .kanban-card gehoeren auch dem Termin- und dem Projekt-Brett, die hier nichts aendert.
   Zahlen in der Grundschrift (Fira Sans, PR1.437) mit festen Ziffernbreiten. */
#kanban-board .kanban-col-sums {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 12px;
  margin: -6px 0 10px;
  font-size: var(--fs-meta);
  color: var(--text-2);
  font-variant-numeric: tabular-nums;
}
#kanban-board .kanban-col-sums span,
#kanban-board .kc-facts span,
#kanban-board .kc-events,
#kanban-board .kc-next {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
#kanban-board .kanban-col-leer {
  padding: 24px 8px;
  text-align: center;
  font-size: var(--fs-meta);
  color: var(--text-3);
  border: 1px dashed var(--border);
  border-radius: var(--radius);
}
/* Die Kartenregel unten (display:flex) ist spezifischer als .kanban-col.collapsed .kanban-card —
   ohne die Karte in dieser Liste kaemen die Karten in der eingeklappten Spalte zurueck. */
#kanban-board .kanban-col.collapsed .kanban-card,
#kanban-board .kanban-col.collapsed .kanban-col-sums,
#kanban-board .kanban-col.collapsed .kanban-col-leer {
  display: none;
}
#kanban-board .kanban-card {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
#kanban-board .kanban-card:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}
#kanban-board .kc-head {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  min-width: 0;
}
#kanban-board .kc-head-text {
  flex: 1 1 auto;
  min-width: 0;
}
#kanban-board .kc-head .kanban-card-title {
  margin-bottom: 2px;
  line-height: 1.3;
}
#kanban-board .kc-customer {
  font-size: var(--fs-meta);
  color: var(--text-2);
  overflow-wrap: break-word;
}
/* PR1.433-optik — Wortmarken wie STACKIT nahmen bis zu 7rem und drueckten die Titelspalte
   zusammen. Zwei Kappen: hoechstens 4.5rem, in schmalen Spalten hoechstens 30 % des
   Kartenkopfs; object-fit:contain verkleinert das Bild proportional. */
#kanban-board .kc-hs {
  flex: none;
  max-width: 30%;
}
#kanban-board .kc-hs .hs-logo-img {
  max-width: min(4.5rem, 100%);
}
#kanban-board .kc-hints {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}
#kanban-board .kanban-card-tags {
  margin-top: 0;
}
/* Schlagworte neutral wie im Entwurf K6. Die CC-Farbe der Portfolio-Badges (.cc-advisory u. a.)
   faellt auf Kartengroesse unter AA (axe: 4.28:1 hell, 3.54:1 dunkel); der CC steht im Tooltip. */
#kanban-board .kanban-card-tags .badge {
  background: var(--bg-card2);
  color: var(--text-2);
  border: 1px solid var(--border);
}
#kanban-board .kc-facts {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 12px;
  padding-top: 8px;
  border-top: 1px solid var(--border);
  font-size: var(--fs-meta);
  color: var(--text-2);
  font-variant-numeric: tabular-nums;
}
#kanban-board .kc-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 12px;
  font-size: var(--fs-label);
  color: var(--text-2);
  font-variant-numeric: tabular-nums;
}
/* Kanban-Karte: dieselben Staffing-Kaestchen, etwas kleiner. */
#kanban-board .kc-foot .staff-slot { width: 14px; height: 14px; border-radius: 4px; }
#kanban-board .kc-overdue { color: var(--danger); font-weight: 600; }
#kanban-board .kc-id {
  margin-left: auto;
  font-size: var(--fs-label);
  color: var(--text-3);
}

/* ── PR1.564 (#850) — Kanban neu geordnet (Entwurf 4), Opp- UND Projekt-Brett ──
   Sortierleiste ueber dem Brett, Spalten in einer eigenen Spur mit horizontalem Scroll,
   Kopf mit Anzahl und Volumen, Gruppen „Start < 30 Tage" / „spaeter", Karte immer gleich
   (Kopf · drei Fakten · Fusszeile Besetzung + Team + Start), leere oder eingeklappte Spalte
   als schmale Leiste. Taeglich genutzt: keine Einblend-Animation. Termin-Brett unberuehrt. */
.kanban-board.has-sortbar {
  display: block;
  overflow: visible;
  padding-bottom: 0;
}
.kanban-sortbar {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 3px;
  margin-bottom: 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg-card);
}
.kanban-sortbar-lbl {
  padding: 0 8px 0 6px;
  font-size: var(--fs-meta);
  color: var(--text-2);
}
.kanban-sort-btn {
  font: inherit;
  font-size: var(--fs-meta);
  border: 0;
  background: transparent;
  color: var(--text-2);
  padding: 5px 10px;
  border-radius: var(--radius-sm);
  cursor: pointer;
}
.kanban-sort-btn:hover { color: var(--text-1); background: var(--bg-hover); }
.kanban-sort-btn.is-on { color: var(--primary-text); background: var(--primary-glow); font-weight: 600; }
.kanban-sort-btn:focus-visible { outline: 2px solid var(--primary); outline-offset: 1px; }
.kanban-lanes {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  overflow-x: auto;
  padding-bottom: 8px;
}
:is(#kanban-board, #project-kanban) .kanban-col-header {
  gap: 8px;
}
:is(#kanban-board, #project-kanban) .kanban-col-header[role="button"]:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}
:is(#kanban-board, #project-kanban) .kanban-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  flex-shrink: 0;
  display: inline-block;
}
:is(#kanban-board, #project-kanban) .kanban-col-volume {
  margin-left: auto;
  font-size: var(--fs-meta);
  color: var(--text-2);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
:is(#kanban-board, #project-kanban) .kanban-collapse-toggle {
  font-size: var(--fs-label);
  opacity: .6;
}
:is(#kanban-board, #project-kanban) .kanban-group {
  margin: 4px 2px 6px;
  font-size: var(--fs-label);
  font-weight: 500;
  color: var(--text-2);
}
:is(#kanban-board, #project-kanban) .kanban-group-soon { color: var(--warning); }
:is(#kanban-board, #project-kanban) .kanban-col.collapsed :is(.kanban-group, .kanban-card, .kanban-col-volume, .kanban-collapse-toggle, .kanban-lost-archiv) {
  display: none;
}
:is(#kanban-board, #project-kanban) .kanban-col.collapsed .kanban-col-title {
  writing-mode: horizontal-tb;
  transform: none;
}
:is(#kanban-board, #project-kanban) .kanban-col.collapsed {
  width: 56px;
  min-width: 56px;
}
/* Der Spaltenname steht in der Leiste senkrecht (.kanban-strip-label); im Kopf bleibt nur der Punkt. */
:is(#kanban-board, #project-kanban) .kanban-col.collapsed .kanban-col-title {
  font-size: 0;
  justify-content: center;
}
:is(#kanban-board, #project-kanban) .kanban-col.collapsed .kanban-col-title > :not(.kanban-dot) {
  display: none;
}
:is(#kanban-board, #project-kanban) .kanban-strip-label {
  display: block;
  margin: 8px auto 0;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  font-size: var(--fs-meta);
  font-weight: 500;
  color: var(--text-2);
  white-space: nowrap;
}
/* Spalte und Karte etwas enger als das Termin-Brett, damit die drei Fakten bei 280px in
   einer Zeile stehen (Entwurf 4) — sonst brach „Tagessatz" je nach Zahl mal um, mal nicht,
   und die Karten waren ungleich hoch. */
:is(#kanban-board, #project-kanban) .kanban-col:not(.collapsed) {
  padding: 12px 10px;
}
:is(#kanban-board, #project-kanban) .kanban-card {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 11px 10px;
}
:is(#kanban-board, #project-kanban) .kanban-card:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}
:is(#kanban-board, #project-kanban) .kc-head .kanban-card-title {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-weight: 600;
}
:is(#kanban-board, #project-kanban) .kc-hs {
  flex: none;
  max-width: 30%;
}
:is(#kanban-board, #project-kanban) .kc-hs .hs-logo-img {
  max-width: min(4.5rem, 100%);
}
#project-kanban .kanban-card-health:empty { display: none; }
:is(#kanban-board, #project-kanban) .kc-facts {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 6px;
  font-size: var(--fs-label);
  color: var(--text-2);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  padding-top: 0;
  border-top: 0;
}
:is(#kanban-board, #project-kanban) .kc-facts b { color: var(--text-1); font-weight: 600; }
:is(#kanban-board, #project-kanban) .kc-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 10px;
  padding-top: 8px;
  border-top: 1px solid var(--border);
  font-size: var(--fs-label);
  color: var(--text-2);
  font-variant-numeric: tabular-nums;
}
:is(#kanban-board, #project-kanban) .kc-foot .staff-slot { width: 14px; height: 14px; border-radius: 4px; }
:is(#kanban-board, #project-kanban) .kc-team { display: inline-flex; }
:is(#kanban-board, #project-kanban) .kc-av {
  display: inline-grid;
  place-items: center;
  width: 22px;
  height: 22px;
  margin-left: -4px;
  border-radius: 50%;
  border: 2px solid var(--bg-card);
  background-size: cover;
  font-size: var(--fs-label);
  font-weight: 500;
  color: #fff;
}
:is(#kanban-board, #project-kanban) .kc-av:first-child { margin-left: 0; }
:is(#kanban-board, #project-kanban) .kc-av-0 { background-color: #4f6d8f; }
:is(#kanban-board, #project-kanban) .kc-av-1 { background-color: #8a5a44; }
:is(#kanban-board, #project-kanban) .kc-av-2 { background-color: #3f7a63; }
:is(#kanban-board, #project-kanban) .kc-av-3 { background-color: #6b5b95; }
:is(#kanban-board, #project-kanban) .kc-av-more { background-color: var(--bg-card2); color: var(--text-2); }
:is(#kanban-board, #project-kanban) .kc-av[data-ma-photo-done] { color: transparent; }
:is(#kanban-board, #project-kanban) .kc-events { display: inline-flex; align-items: center; gap: 4px; }
:is(#kanban-board, #project-kanban) .kc-overdue { color: var(--danger); font-weight: 600; }
:is(#kanban-board, #project-kanban) .kc-start { margin-left: auto; }
:is(#kanban-board, #project-kanban) .kc-start.is-soon { color: var(--warning); font-weight: 600; }
:is(#kanban-board, #project-kanban) .kc-start.is-open { color: var(--text-3); }
#project-kanban .kanban-event-badge { position: static; }

/* ── Tabs ── */
.tabs {
  display: flex;
  gap: 2px;
  background: var(--bg-card2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 3px;
  margin-bottom: 20px;
  width: fit-content;
}

.tab {
  padding: 7px 16px;
  border-radius: 7px;
  font-size: var(--fs-ui);
  font-weight: 500;
  color: var(--text-2);
  cursor: pointer;
  transition: all var(--transition);
}

.tab.active {
  background: var(--bg-hover);
  color: var(--text-1);
}

/* PR1.353 (#567) — Reiter als echte Knoepfe (klassische Projektliste): gleiche Optik wie die
   div-Reiter der Opp-Liste, aber per Tab erreichbar. Nur der Browser-Knopfrahmen faellt weg. */
.tabs > button.tab { border: 0; font-family: inherit; line-height: inherit; }
.tabs > button.tab:not(.active) { background: transparent; }
.tabs > button.tab:focus-visible { outline: 2px solid var(--primary); outline-offset: 1px; }

/* ── Charts (pure CSS) ── */
.bar-chart {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  height: 80px;
  padding: 0 4px;
}

.bar-col {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  height: 100%;
  justify-content: flex-end;
}

.bar-col .bar {
  width: 100%;
  border-radius: 3px 3px 0 0;
  transition: height .5s ease;
  min-height: 3px;
}

.bar-col .bar-label {
  font-size: var(--fs-label);
  color: var(--text-3);
  font-weight: 500;
}

/* Donut chart via conic-gradient */
.donut-wrap {
  display: flex;
  align-items: center;
  gap: 24px;
}

.donut {
  width: 110px;
  height: 110px;
  border-radius: 50%;
  flex-shrink: 0;
  position: relative;
}

.donut-center {
  position: absolute;
  inset: 18px;
  background: var(--bg-card);
  border-radius: 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-size: var(--fs-label);
  color: var(--text-2);
  text-align: center;
  font-weight: 500;
}

.donut-center strong {
  font-size: var(--fs-title);
  color: var(--text-1);
  display: block;
  line-height: 1;
}

.legend {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.chart-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  padding-top: 10px;
  border-top: 1px solid var(--border);
}

.legend-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: var(--fs-meta);
}

.legend-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  flex-shrink: 0;
}

/* ── View container ── */
.view {
  display: none;
}

.view.active {
  display: block;
}

/* ── Chip ── */
.chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: var(--bg-hover);
  border: 1px solid var(--border);
  border-radius: 99px;
  padding: 3px 9px;
  font-size: var(--fs-label);
  font-weight: 500;
  color: var(--text-2);
}

/* ── Assigned employees in table ── */
.emp-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

/* ── Notification toast ── */
.toast {
  position: fixed;
  bottom: 24px;
  right: 24px;
  background: var(--bg-card);
  border: 1px solid var(--border-light);
  border-radius: var(--radius);
  padding: 12px 18px;
  font-size: var(--fs-body);
  font-weight: 500;
  box-shadow: var(--shadow-lg);
  z-index: 9999;
  display: flex;
  align-items: center;
  gap: 10px;
  animation: slideInRight .25s ease;
  max-width: 360px;
}

/* PR1.310 (#519) — Aktionsknopf im Toast ("Erneut versuchen").
   Die Aktionsleiste war in helpers.js seit BF-25 gebaut, aber bis hierher nie
   benutzt und darum nie gestaltet — ohne diese Regeln erschiene ein nativer
   Browser-Knopf mitten im Toast.
   Alles laeuft ueber `currentColor`: der Toast kommt in drei Toenen (Erfolg,
   Hinweis, Fehler mit rotem Verlauf), in zwei Themes und in beiden Shells. Ein
   fester Farbwert waere in mindestens einer dieser Kombinationen unlesbar;
   currentColor kann es nicht sein, weil es die Textfarbe des Toasts selbst ist.
   Der Toast haengt an `body` und damit AUSSERHALB des `.crm`-Bereichs — diese
   eine Regel bedient deshalb beide Shells (Konvention 20). */
.toast-actions {
  display: inline-flex;
  gap: 8px;
  margin-left: 4px;
}

.toast-action {
  font: inherit;
  font-size: var(--fs-ui);
  font-weight: 500;
  color: currentColor;
  background: transparent;
  border: 1px solid currentColor;
  border-radius: var(--radius-sm);
  padding: 4px 10px;
  cursor: pointer;
  white-space: nowrap;
}

/* Mittleres Grau deckt hellen wie dunklen Grund ab, ohne den Text zu schlucken. */
.toast-action:hover {
  background: rgba(127, 127, 127, .25);
}

.toast-action:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 2px;
}

/* BF-109 — Hinweis mit aufklappbarer Liste („Welche?"): Satz oben, Knöpfe darunter
   rechtsbündig, die Liste darunter scrollt in sich. So bleibt der Hinweis so breit wie
   jeder andere und wird nie zur schmalen, hohen Säule. Hängt an `body` → beide Shells. */
.toast.toast-mit-details {
  flex-wrap: wrap;
  row-gap: 8px;
}

.toast-mit-details .toast-text {
  flex: 1 1 0;
  min-width: 0;
}

.toast-mit-details .toast-actions {
  flex-basis: 100%;
  justify-content: flex-end;
  margin-left: 0;
}

.toast-details {
  flex-basis: 100%;
  margin: 0;
  padding: 8px 0 0 18px;
  max-height: 9.5em;
  overflow-y: auto;
  border-top: 1px solid var(--border-light);
  color: var(--text);
  font-weight: 400;
  line-height: 1.5;
}

/* BF-109 — eine offene Maske (klassisch: .modal-overlay.open, neu: .modal-veil) oder ein
   Seitenpanel (.crm .drawer) hat ihren Fuß mit „Weiter"/„Speichern" unten. Dann rückt
   jeder Hinweis nach oben in die Mitte. Kein transform (die Einblendung nutzt es schon).
   Nur direkte body-Kinder: der eigene Hinweis der neuen Shell (.crm .toast) zentriert per
   transform und bleibt unberührt. */
body:has(.modal-overlay.open, .modal-veil, .crm .drawer) > .toast {
  top: 16px;
  bottom: auto;
  left: 0;
  right: 0;
  margin-inline: auto;
  width: fit-content;
  z-index: 10000;
}

.toast.success {
  border-color: rgba(16, 185, 129, .4);
  color: var(--success);
}

.toast.info {
  border-color: rgba(6, 182, 212, .4);
  color: var(--accent);
}

@keyframes slideInRight {
  from {
    opacity: 0;
    transform: translateX(20px);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

/* ── Divider ── */
.divider {
  border: none;
  border-top: 1px solid var(--border);
  margin: 16px 0;
}

/* ── Customer Cards ── */
.customer-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
  gap: 16px;
}

.customer-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 20px;
  transition: all var(--transition);
}

.customer-card:hover {
  border-color: var(--border-light);
  box-shadow: var(--shadow);
}

.customer-card-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
}

.customer-icon {
  width: 42px;
  height: 42px;
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--fs-title);
  flex-shrink: 0;
  background: linear-gradient(135deg, var(--primary), var(--accent));
}

.customer-name {
  font-size: var(--fs-body);
  font-weight: 500;
}

.customer-industry {
  font-size: var(--fs-meta);
  color: var(--text-2);
}

.customer-projects {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 12px;
}

.customer-project-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  background: var(--bg-card2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: var(--fs-ui);
  cursor: pointer;
  transition: all var(--transition);
}

.customer-project-item:hover {
  background: var(--bg-hover);
  border-color: var(--border-light);
}

.customer-consultants {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 10px;
}

/* ── Customer Stats Grid (Mini KPI Cards) ── */
.customer-stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  margin: 12px 0;
}

.customer-stat-card {
  background: var(--bg-card2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 10px 8px;
  text-align: center;
  position: relative;
  overflow: hidden;
}

.customer-stat-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--kpi-color, var(--primary));
  border-radius: 2px 2px 0 0;
}

.customer-stat-value {
  font-size: var(--fs-section);
  font-weight: 600;
  line-height: 1.2;
}

.customer-stat-label {
  font-size: var(--fs-label);
  color: var(--text-2);
  margin-top: 2px;
}

/* ── Customer Timeline ── */
.customer-timeline-header {
  font-size: var(--fs-label);
  font-weight: 500;
  color: var(--text-2);
  margin-bottom: 8px;
  margin-top: 14px;
}

.customer-timeline-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  background: var(--bg-card2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: var(--fs-ui);
  cursor: pointer;
  transition: all var(--transition);
  margin-bottom: 4px;
}

.customer-timeline-item:hover {
  background: var(--bg-hover);
  border-color: var(--border-light);
}

.customer-timeline-date {
  font-size: var(--fs-label);
  color: var(--text-2);
  min-width: 55px;
  flex-shrink: 0;
}

.customer-timeline-name {
  flex: 1;
  min-width: 0;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.customer-timeline-budget {
  font-size: var(--fs-meta);
  color: var(--success);
  white-space: nowrap;
}

.customer-timeline-staff {
  font-size: var(--fs-label);
  color: var(--text-3);
  white-space: nowrap;
}

/* ── PR1.277 (#471) — Bewegung, Logo in der Zeile, Fokus-Ansicht ─────────────── */

/* Bewegungs-Kennzeichen: Punkt UND Wort. Nie nur Farbe — ein Zustand, den man allein an
   der Farbe erkennt, ist fuer Farbfehlsichtige kein Zustand. Dieselben Klassennamen wie im
   Redesign; dort sind die Regeln lediglich `.crm`-gescopet. */
/* PR1.293 (#494) — von .72rem (~11,5px) auf .8125rem (13px). Die Marke steht in einer
   Zelle mit 14px-Text (table.customer-table) und ist eine der fuenf Fuehrungs-Spalten;
   auf Etiketten-Groesse (.badge = .72rem) wirkte sie wie eine Fussnote. 13px liegt knapp
   unter dem Zellentext und entspricht dem, was die Redesign-Shell hier ohnehin schon
   zeigt (.crm .tbl erbt 13px) — die beiden Shells waren an dieser Stelle verschieden
   gross. Der Punkt waechst proportional mit. */
.mv-tag { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; font-size: var(--fs-ui); }
.mv-dot { width: 9px; height: 9px; border-radius: 50%; flex: 0 0 auto; }
.mv-active { background: var(--success); }
.mv-quiet { background: var(--warning); }
.mv-dormant { background: var(--danger); }
.mv-unknown { background: var(--text-3); }
.mv-label { color: var(--text-2); }

/* Logo in der Namensspalte — die Luecke, die „keine Logos" meinte. */
.cust-name-cell { display: flex; align-items: center; gap: 8px; min-width: 0; }
/* PR1.293 (#494) — die Namenszelle ist jetzt ein <button> (Klick oeffnet die Kundenseite).
   Er soll wie Text aussehen, sich aber wie ein Bedienelement verhalten: Zeiger, Unterstrich
   beim Ueberfahren, sichtbarer Fokus. Ohne diese Regeln braechte der Browser-Default die
   Zelle mit Rahmen und zentrierter Schrift auseinander. */
.cust-name-btn { background: none; border: 0; padding: 0; margin: 0; font: inherit; color: inherit;
  text-align: left; cursor: pointer; width: 100%; }
.cust-name-btn:hover .cust-name-text { text-decoration: underline; }
.cust-name-btn:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; border-radius: 4px; }
.cust-name-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cust-strat { color: var(--primary); font-size: var(--fs-label); 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), Namens-Ellipsis innerhalb des
   Knopfs und Zahlenspalten rechtsbuendig mit gleich breiten Ziffern. */
.cust-status-dot { width: 8px; height: 8px; border-radius: 50%; flex: 0 0 auto; }
.cust-status-active { background: var(--success); }
.cust-status-quiet { background: var(--warning); }
.cust-status-dormant { background: var(--text-3); }
.cust-status-unknown { background: transparent; box-shadow: inset 0 0 0 1.5px var(--text-3); }
.cust-name-btn .cust-name-text { min-width: 0; }
table.customer-table th.num, table.customer-table td.num { text-align: right; font-variant-numeric: tabular-nums; }

/* Keine farbige Akzentkante an der Karte — Begruendung siehe style-redesign.css.
   Punkt und Wort im Kartenfuss tragen den Zustand; in der Tabelle bleibt die Leiste. */
.customer-card[data-customer-page] { cursor: pointer; }
.customer-card:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.customer-card-foot {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  margin-top: 10px; padding-top: 8px;
  border-top: 1px solid var(--border);
  font-size: var(--fs-label); color: var(--text-3);
}

/* ── Kundenkarte nach Entwurf 07 (Kopf · geteilte Zahlenzeile · Projekte · Fuss) ──
   Karte als Spalte, Fuss unten: alle Karten einer Reihe sind gleich hoch. Ab 1440 px
   genau drei je Reihe. Keine Animation — die Ansicht wird taeglich benutzt. */
.customer-grid { align-items: stretch; }
@media (min-width: 1440px) {
  .customer-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.customer-grid .customer-card {
  display: flex; flex-direction: column;
  padding: 0; overflow: visible;
}
.customer-grid .customer-card-header {
  padding: 16px 18px 14px; margin: 0; align-items: center;
}
.customer-card-title { flex: 1; min-width: 0; }
.customer-card-title .customer-name { overflow-wrap: anywhere; }
.customer-card-title .customer-industry { display: flex; flex-wrap: wrap; align-items: center; gap: 0 4px; margin-top: 2px; }
.customer-card-hs { flex: none; display: inline-flex; align-items: center; }
.cust-figs {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  border-top: 1px solid var(--border); border-bottom: 1px solid var(--border);
}
.cust-fig { padding: 10px 14px; min-width: 0; }
.cust-fig + .cust-fig { border-left: 1px solid var(--border); }
.cust-fig-label { display: block; font-size: var(--fs-label); color: var(--text-2); white-space: nowrap; }
.cust-fig-value {
  display: block; margin-top: 2px;
  font-size: var(--fs-section); font-weight: 600; color: var(--text-1);
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.cust-card-body { flex: 1; padding: 12px 18px 10px; }
.cust-card-line {
  display: flex; justify-content: space-between; gap: 8px;
  font-size: var(--fs-meta); color: var(--text-2); margin-bottom: 6px;
}
.cust-card-line strong { color: var(--text-1); font-variant-numeric: tabular-nums; }
.cust-proj-list { display: flex; flex-direction: column; }
.cust-proj {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; align-items: center; gap: 10px;
  width: 100%; padding: 7px 0; border: 0; border-top: 1px solid var(--border);
  background: transparent; color: var(--text-1); font: inherit; font-size: var(--fs-ui); text-align: left; cursor: pointer;
}
.cust-proj:first-child { border-top: 0; }
.cust-proj:hover { background: var(--bg-hover); }
.cust-proj:focus-visible { outline: 2px solid var(--primary); outline-offset: -2px; }
.cust-proj-month { color: var(--text-2); font-variant-numeric: tabular-nums; }
.cust-proj-name { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cust-proj-pill {
  padding: 2px 8px; border-radius: 999px; font-size: var(--fs-label); font-weight: 500;
  background: var(--bg-card2); color: var(--text-2);
}
.cust-proj-pill--won { background: rgba(16, 185, 129, .14); color: var(--success); }
.cust-proj-pill--proposal { background: rgba(234, 179, 8, .14); color: var(--attention); }
.cust-proj-amt { font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.cust-proj-more, .cust-proj-empty { padding-top: 4px; font-size: var(--fs-meta); color: var(--text-2); }
.customer-grid .customer-card-foot {
  margin: 0; padding: 10px 18px; font-size: var(--fs-meta); color: var(--text-2);
}
.cust-team { display: inline-flex; align-items: center; gap: 8px; min-width: 0; }
.cust-team-stack { display: inline-flex; flex: none; }
.cust-team-stack > * + * { margin-left: -6px; }
.cust-team-stack .emp-avatar { box-shadow: 0 0 0 2px var(--bg-card); }
.cust-team-more { margin-left: 4px; font-size: var(--fs-label); color: var(--text-2); }
.cust-card-actions { display: inline-flex; align-items: center; gap: 6px; flex: none; }
.cust-card-menu { position: relative; }
.cust-card-menu .more-menu-btn { display: inline-flex; align-items: center; justify-content: center; }
.cust-card-menu .more-menu-btn span:empty { display: none; }
.cust-card-menu .more-menu-list {
  position: absolute; right: 0; bottom: calc(100% + 4px); z-index: 40;
  min-width: 200px; display: flex; flex-direction: column; padding: 6px;
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: var(--radius); box-shadow: var(--shadow);
}
.cust-card-menu .more-menu-list[hidden] { display: none; }
.cust-card-menu .more-menu-item {
  font: inherit; font-size: var(--fs-body); text-align: left;
  display: flex; align-items: center; gap: 9px;
  padding: 8px 10px; border: 0; border-radius: var(--radius-sm);
  background: transparent; color: var(--text-1); cursor: pointer;
}
.cust-card-menu .more-menu-item:hover,
.cust-card-menu .more-menu-item:focus-visible { background: var(--bg-hover); }
.cust-card-menu .more-menu-item:focus-visible { outline: 2px solid var(--primary); outline-offset: -2px; }

/* Fokus-Ansicht: gruppiert nach Bewegung, innerhalb der Gruppe das groesste Geld zuerst. */
#customer-focus { padding: 4px 0 24px; }
.cust-focus-sect { margin-bottom: 20px; }
.cust-focus-head {
  display: flex; align-items: center; gap: 8px; margin: 0 0 4px;
  font-size: var(--fs-meta); font-weight: 500;
  color: var(--text-2);
}
.cust-focus-n { font-weight: 400; color: var(--text-3); }
.cust-focus-hint { margin: 0 0 8px; font-size: var(--fs-label); color: var(--text-3); }
.cust-focus-row {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 12px; margin-bottom: 5px; cursor: pointer;
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: var(--radius-sm);
}
.cust-focus-row:hover { background: var(--bg-hover); }
.cust-focus-row:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.cust-focus-main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.cust-focus-main .strong { color: var(--text-1); font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* --text-3 erreicht auf der dunklen Karte nur 3.87:1 und verfehlt AA fuer Text.
   --text-2 liegt bei 7.19:1. Die Zeile traegt Bewegung, Alter und Owner — das ist
   Nebeninformation, aber es ist Text und will gelesen werden. */
.cust-focus-main .muted { font-size: var(--fs-label); color: var(--text-2); }
.cust-focus-pipe { font-weight: 600; color: var(--text-1); white-space: nowrap; font-variant-numeric: tabular-nums; }
.cust-focus-rest { font-size: var(--fs-label); color: var(--text-3); margin: 0; }
.cust-focus-empty {
  border: 1px dashed var(--border); border-radius: var(--radius);
  padding: 28px 20px; text-align: center; color: var(--text-3);
  display: flex; flex-direction: column; gap: 4px;
}
.cust-focus-empty strong { color: var(--text-2); font-size: var(--fs-body); }

/* PR1.424 (#661) — keine dauerhafte Bewegungs-Farbkante mehr (User-Entscheid 22.10.2026):
   nur Referenzkunden tragen links eine Kante; die Bewegung zeigt der Punkt vor dem Namen. */
.customer-table tbody tr.mv-lead > td:first-child { border-left: 3px solid transparent; }
.customer-table tbody tr.is-reference > td:first-child { border-left-color: var(--primary); }

/* ── Customer History Modal ── */
.ch-meta {
  font-size: var(--fs-ui);
  color: var(--text-2);
  margin-bottom: 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--border);
}

.ch-section {
  margin-bottom: 20px;
}

/* PR1.438 — look comes from the shared section-head rule (.form-section-label block). */
.ch-section-title { margin-bottom: 10px; }

/* Bar chart rows (horizontal) */
.ch-bar-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 6px;
  font-size: var(--fs-ui);
}

.ch-bar-label {
  min-width: 160px;
  flex-shrink: 0;
  color: var(--text-2);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ch-bar-track {
  flex: 1;
  height: 20px;
  background: var(--bg-card);
  border-radius: 3px;
  overflow: hidden;
  position: relative;
}

.ch-bar-fill {
  height: 100%;
  border-radius: 3px;
  transition: width 0.4s ease;
  min-width: 2px;
}

.ch-bar-value {
  font-size: var(--fs-label);
  color: var(--text-2);
  white-space: nowrap;
  min-width: 80px;
  text-align: right;
}

/* Top consultants */
.ch-consultant-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 0;
  font-size: var(--fs-ui);
  border-bottom: 1px solid var(--border);
}

.ch-consultant-row:last-child {
  border-bottom: none;
}

.ch-consultant-dots {
  color: var(--primary);
  letter-spacing: 2px;
}

/* ── Gantt Chart (CC-clustered) ── */
.ch-gantt {
  overflow-x: auto;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg-card);
}

.ch-gantt-inner {
  min-width: 600px;
}

.ch-gantt-header {
  display: flex;
  border-bottom: 1px solid var(--border);
  background: var(--bg-card2);
  position: sticky;
  top: 0;
  z-index: 1;
}

.ch-gantt-header-label {
  width: 180px;
  min-width: 180px;
  padding: 6px 10px;
  font-size: var(--fs-label);
  font-weight: 500;
  color: var(--text-2);
  border-right: 1px solid var(--border);
}

.ch-gantt-header-months {
  flex: 1;
  display: flex;
}

.ch-gantt-month {
  flex: 1;
  text-align: center;
  font-size: var(--fs-label);
  color: var(--text-3);
  padding: 6px 2px;
  border-right: 1px solid var(--border);
}

.ch-gantt-month:last-child {
  border-right: none;
}

.ch-gantt-group-title {
  font-size: var(--fs-label);
  font-weight: 600;
  color: var(--accent);
  padding: 8px 10px 4px;
  background: var(--bg-card2);
  border-bottom: 1px solid var(--border);
}

.ch-gantt-row {
  display: flex;
  border-bottom: 1px solid var(--border);
  min-height: 28px;
}

.ch-gantt-row:last-child {
  border-bottom: none;
}

.ch-gantt-row-label {
  width: 180px;
  min-width: 180px;
  padding: 4px 10px;
  font-size: var(--fs-label);
  color: var(--text-1);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  border-right: 1px solid var(--border);
  display: flex;
  align-items: center;
}

.ch-gantt-bar-area {
  flex: 1;
  position: relative;
  min-height: 28px;
}

.ch-gantt-bar {
  position: absolute;
  top: 4px;
  height: 20px;
  border-radius: 3px;
  cursor: pointer;
  opacity: 0.85;
  transition: opacity var(--transition);
  display: flex;
  align-items: center;
  padding: 0 6px;
  font-size: var(--fs-label);
  color: #fff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ch-gantt-bar:hover {
  opacity: 1;
  z-index: 2;
}

.ch-gantt-bar--won { background: var(--success); }
.ch-gantt-bar--running { background: var(--accent); }
.ch-gantt-bar--proposal { background: var(--primary); }
.ch-gantt-bar--lead { background: var(--lead); }
.ch-gantt-bar--lost { background: var(--danger); }

/* Customer card history button */
.customer-history-btn {
  font-size: var(--fs-label);
  color: var(--primary);
  cursor: pointer;
  padding: 4px 8px;
  border: 1px solid var(--primary);
  border-radius: var(--radius-sm);
  background: transparent;
  transition: all var(--transition);
  white-space: nowrap;
}

.customer-history-btn:hover {
  background: var(--primary);
  color: #fff;
}

/* ── Responsive ── */
@media (max-width: 900px) {
  .sidebar {
    width: 64px;
  }

  .sidebar-logo .logo-text,
  .nav-item>*:not(.nav-icon),
  .sidebar-footer .user-info {
    display: none;
  }

  .nav-item {
    justify-content: center;
    padding: 10px;
    margin: 2px 4px;
    /* PR1.223 #383 — die Breitenangabe des Hauptblocks rechnet mit dem dortigen Rand
       (8px je Seite); hier sind es 4px. Zurück auf die Vorgabe, damit die Icon-Spalte
       exakt sitzt. */
    width: auto;
  }

  .nav-item.active {
    margin-left: 4px;
    padding-left: 10px;
    border-left: none;
  }

  /* PR1.223 #383 — in der schmalen Ansicht bleibt die Unterebene bedienbar, nur enger.
     Sie wird NICHT ausgeblendet wie die Beschriftungen der Hauptpunkte: die tragen dort
     ihr Symbol weiter, „Aktuell/Archiv" hat keines und wäre sonst gar nicht erreichbar. */
  .nav-sub {
    margin: 0 4px 4px;
  }

  .nav-subitem {
    padding: 4px 2px;
    font-size: var(--fs-label);
    text-align: center;
  }

  .grid-2,
  .form-grid-2,
  .form-grid-3 {
    grid-template-columns: 1fr;
  }

  .content {
    padding: 16px;
  }

  .customer-stats-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .ch-bar-label {
    min-width: 100px;
  }

  .ch-gantt-row-label,
  .ch-gantt-header-label {
    width: 120px;
    min-width: 120px;
  }
}

/* ── Customer Autocomplete Dropdown ── */

.autocomplete-dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 1000;
  background: var(--bg-card);
  border: 1px solid var(--border-light, var(--border));
  border-radius: var(--radius-sm);
  box-shadow: 0 8px 24px rgba(0, 0, 0, .4);
  max-height: 280px;
  overflow-y: auto;
  display: none;
  margin-top: 2px;
}

.autocomplete-dropdown.visible {
  display: block;
}

.autocomplete-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  cursor: pointer;
  border-bottom: 1px solid var(--border);
  transition: background .15s;
}

.autocomplete-item:last-of-type {
  border-bottom: none;
}

.autocomplete-item:hover,
.autocomplete-item.active {
  background: var(--bg-hover, rgba(255, 255, 255, .06));
}

.autocomplete-icon {
  font-size: var(--fs-title);
  flex-shrink: 0;
}

.autocomplete-info {
  flex: 1;
  min-width: 0;
}

.autocomplete-name {
  font-size: var(--fs-body);
  font-weight: 500;
  color: var(--text-1);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.autocomplete-meta {
  font-size: var(--fs-label);
  color: var(--text-2);
}

.autocomplete-hint {
  padding: 6px 12px;
  font-size: var(--fs-label);
  color: var(--text-3, var(--text-2));
  border-top: 1px solid var(--border);
  text-align: center;
  background: rgba(0, 0, 0, .15);
  border-radius: 0 0 var(--radius-sm) var(--radius-sm);
}

/* PR1.34 #171 (S7) — Email-Vorschlag: KBSourcePill rechts im Vorschlag-Item.
   Erbt sonst alle Styles von .autocomplete-dropdown / .autocomplete-item. */
.email-suggest-item .kb-source-pill {
  flex: 0 0 auto;
  margin-left: 8px;
  max-width: 45%;
}

.autocomplete-duplicate-warn {
  display: none;
  margin-top: 6px;
  padding: 8px 12px;
  font-size: var(--fs-meta);
  color: var(--warning, #f59e0b);
  background: rgba(245, 158, 11, .1);
  border-left: 3px solid var(--warning, #f59e0b);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background .15s;
}

.autocomplete-duplicate-warn.visible {
  display: block;
}

.autocomplete-duplicate-warn:hover {
  background: rgba(245, 158, 11, .18);
}

.autocomplete-duplicate-link {
  text-decoration: underline;
  font-weight: 600;
}

/* ============================================================
   QUALIFICATIONS MATRIX VIEW
   ============================================================ */

/* ── Matrix Table ── */
.qual-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: var(--fs-body);
}

.qual-table thead th {
  position: sticky;
  top: 0;
  z-index: 2;
  background: var(--bg-card);
  color: var(--text-2);
  font-weight: 500;
  font-size: var(--fs-meta);
  padding: 10px 14px;
  border-bottom: 2px solid var(--border);
  text-align: center;
  white-space: nowrap;
}

.qual-table thead th:first-child {
  text-align: left;
  min-width: 180px;
}

.qual-table tbody td {
  padding: 10px 14px;
  border-bottom: 1px solid var(--border);
  vertical-align: middle;
  transition: background .15s;
}

.qual-table tbody tr:hover td {
  background: var(--bg-hover);
}

.qual-table tbody td:first-child {
  font-weight: 600;
  color: var(--text-1);
  white-space: nowrap;
}

.qual-table .emp-info-cell {
  display: flex;
  align-items: center;
  gap: 10px;
}

.qual-table .emp-info-cell .mini-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 500;
  font-size: var(--fs-label);
  color: #fff;
  flex-shrink: 0;
}

.qual-table .emp-meta {
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.qual-table .emp-meta .emp-role {
  font-size: var(--fs-label);
  color: var(--text-3);
  font-weight: 400;
}

/* ── Heatmap Competency Cells ── */
.comp-cell {
  text-align: center;
  font-weight: 500;
  font-size: var(--fs-body);
  border-radius: var(--radius-sm);
  cursor: pointer;
  min-width: 56px;
  position: relative;
  transition: transform .12s, box-shadow .12s;
}

.comp-cell:hover {
  transform: scale(1.08);
  z-index: 1;
}

.comp-0 { background: rgba(30, 45, 74, 0.3); color: var(--text-3); }
.comp-1 { background: rgba(239, 68, 68, 0.2); color: #f87171; }
.comp-2 { background: rgba(245, 158, 11, 0.2); color: #fbbf24; }
.comp-3 { background: rgba(234, 179, 8, 0.22); color: #facc15; }
.comp-4 { background: rgba(74, 222, 128, 0.2); color: #4ade80; }
.comp-5 { background: rgba(16, 185, 129, 0.25); color: #34d399; }

.comp-cell .comp-raw {
  font-size: var(--fs-label);
  color: var(--text-3);
  font-weight: 400;
  display: block;
  margin-top: -2px;
}

/* ── Qual Score Badge ── */
.qual-score-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  border-radius: var(--radius-sm);
  font-weight: 500;
  font-size: var(--fs-body);
  min-width: 48px;
  justify-content: center;
}

/* ── Team Average Row ── */
.team-avg-row td {
  font-weight: 500;
  color: var(--text-2);
  border-top: 2px solid var(--border);
  background: var(--bg-card2);
  font-size: var(--fs-ui);
}

/* ── Legend ── */
.qual-legend {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 14px;
  font-size: var(--fs-label);
  color: var(--text-3);
}

.qual-legend .legend-swatch {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.qual-legend .legend-swatch .swatch {
  width: 14px;
  height: 14px;
  border-radius: 3px;
}

/* ── Drilldown Panel ── */
.drilldown-row td {
  padding: 0 !important;
  border-bottom: 1px solid var(--border);
}

.drilldown-panel {
  background: var(--bg-card2);
  border-left: 3px solid var(--accent);
  padding: 16px 20px;
  margin: 0;
  animation: slideDown .2s ease-out;
}

@keyframes slideDown {
  from { opacity: 0; max-height: 0; padding-top: 0; padding-bottom: 0; }
  to { opacity: 1; max-height: 500px; }
}

.drilldown-panel .drilldown-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
  font-weight: 500;
  font-size: var(--fs-body);
  color: var(--text-1);
}

.drilldown-panel .drilldown-header .hs-tag {
  padding: 2px 10px;
  border-radius: var(--radius-sm);
  font-size: var(--fs-meta);
  font-weight: 500;
}

/* ── Sub-Competency Bars ── */
.sub-comp-bars {
  display: grid;
  gap: 8px;
  margin-bottom: 16px;
}

.sub-comp-bar-row {
  display: grid;
  grid-template-columns: 160px 1fr 40px;
  align-items: center;
  gap: 10px;
  font-size: var(--fs-meta);
}

.sub-comp-bar-row .bar-label {
  color: var(--text-2);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sub-comp-bar-row .bar-track {
  height: 8px;
  background: var(--border);
  border-radius: 4px;
  overflow: hidden;
}

.sub-comp-bar-row .bar-fill {
  height: 100%;
  border-radius: 4px;
  transition: width .3s ease;
}

.sub-comp-bar-row .bar-value {
  font-weight: 500;
  text-align: right;
  font-size: var(--fs-meta);
  color: var(--text-2);
}

/* ── Confidence Badge (HF3.12) ── */
.comp-confidence {
  display: inline-block;
  margin-left: 4px;
  font-size: var(--fs-label);
  font-weight: 500;
  color: var(--text-3);
  letter-spacing: .02em;
  vertical-align: middle;
  white-space: nowrap;
}

/* ── Score Formula (HF3.12) ── */
.score-formula {
  background: var(--bg-base);
  border-radius: var(--radius-sm);
  padding: 12px 14px;
  margin-bottom: 12px;
  font-size: var(--fs-meta);
  color: var(--text-2);
}

.score-formula .formula-header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  margin-bottom: 8px;
  flex-wrap: wrap;
}

.score-formula .formula-header strong {
  color: var(--text-1);
  font-size: var(--fs-body);
}

.score-formula .formula-confidence {
  font-size: var(--fs-label);
  color: var(--text-3);
}

.score-formula .formula-factors {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 4px;
}

.score-formula .formula-row {
  display: grid;
  grid-template-columns: 150px 50px 1fr;
  gap: 10px;
  align-items: baseline;
  padding: 3px 0;
}

.score-formula .formula-row.unrated {
  opacity: .55;
  font-style: italic;
}

.score-formula .formula-label {
  color: var(--text-2);
  font-weight: 600;
}

.score-formula .formula-value {
  font-weight: 600;
  color: var(--text-1);
}

.score-formula .formula-weight {
  color: var(--text-3);
  font-size: var(--fs-label);
}

.score-formula .formula-detail {
  grid-column: 3 / 4;
  color: var(--text-3);
  font-size: var(--fs-label);
}

.score-formula .formula-hint {
  margin: 8px 0 0;
  font-size: var(--fs-label);
  color: var(--text-3);
  border-top: 1px dashed var(--border);
  padding-top: 6px;
}

/* ── Score Breakdown ── */
.score-breakdown {
  background: var(--bg-base);
  border-radius: var(--radius-sm);
  padding: 12px 14px;
  font-size: var(--fs-meta);
  color: var(--text-2);
}

.score-breakdown .breakdown-title {
  font-weight: 600;
  color: var(--text-1);
  margin-bottom: 8px;
  font-size: var(--fs-ui);
}

.score-breakdown .breakdown-row {
  display: flex;
  justify-content: space-between;
  padding: 3px 0;
}

.score-breakdown .breakdown-row .label {
  color: var(--text-2);
}

.score-breakdown .breakdown-row .value {
  font-weight: 600;
  color: var(--text-1);
}

.score-breakdown .breakdown-total {
  display: flex;
  justify-content: space-between;
  padding-top: 6px;
  margin-top: 6px;
  border-top: 1px solid var(--border);
  font-weight: 600;
  color: var(--accent);
}

/* ── Project list in drilldown ── */
.drilldown-projects {
  margin-top: 12px;
  font-size: var(--fs-meta);
  color: var(--text-3);
}

.drilldown-projects .proj-item {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  background: var(--bg-hover);
  border-radius: var(--radius-sm);
  margin: 2px 4px 2px 0;
}

/* ── Skill / Cert Chips ── */
.qual-skills-section {
  display: grid;
  gap: 12px;
}

.qual-skill-row {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 14px;
  background: var(--bg-card);
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
}

.qual-skill-row .emp-name {
  font-weight: 500;
  font-size: var(--fs-ui);
  color: var(--text-1);
  min-width: 120px;
  flex-shrink: 0;
}

.skill-chip {
  display: inline-block;
  padding: 2px 8px;
  background: rgba(99, 102, 241, 0.15);
  color: var(--primary);
  border-radius: var(--radius-sm);
  font-size: var(--fs-label);
  font-weight: 500;
  margin: 2px 3px;
}

.cert-chip {
  display: inline-block;
  padding: 2px 8px;
  background: rgba(16, 185, 129, 0.15);
  color: var(--success);
  border-radius: var(--radius-sm);
  font-size: var(--fs-label);
  font-weight: 500;
  margin: 2px 3px;
}

.hidden {
  display: none !important;
}

/* ── Qualification View No-Data ── */
.qual-empty {
  text-align: center;
  padding: 48px 20px;
  color: var(--text-3);
  font-size: var(--fs-body);
}

.qual-empty .qual-empty-icon {
  font-size: var(--fs-icon);
  margin-bottom: 12px;
}

/* ============================================================
   Notifications (1.7)
   ============================================================ */

.notification-wrapper {
  position: relative;
  display: flex;
  align-items: center;
  margin-left: auto;
  margin-right: 8px;
}

.notification-bell {
  background: none;
  border: none;
  cursor: pointer;
  font-size: var(--fs-title);
  padding: 6px 10px;
  border-radius: var(--radius-sm);
  position: relative;
  transition: background var(--transition);
  color: var(--text-2);
  line-height: 1;
}

.notification-bell:hover {
  background: var(--bg-hover);
  color: var(--text-1);
}

.notification-badge {
  position: absolute;
  top: 2px;
  right: 2px;
  background: var(--danger);
  color: #fff;
  font-size: var(--fs-label);
  font-weight: 500;
  min-width: 16px;
  height: 16px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 4px;
  font-family: 'Fira Sans', sans-serif;
  pointer-events: none;
}

.notification-dropdown {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  width: 380px;
  max-height: 460px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  z-index: 1000;
  display: flex;
  flex-direction: column;
  animation: fadeIn 0.15s ease;
}

.notification-dropdown-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 16px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}

.notification-dropdown-title {
  font-weight: 600;
  font-size: var(--fs-body);
  color: var(--text-1);
}

.notification-list {
  overflow-y: auto;
  flex: 1;
  max-height: 400px;
}

.notification-list::-webkit-scrollbar { width: 5px; }
.notification-list::-webkit-scrollbar-track { background: transparent; }
.notification-list::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }

/* PR1.336 #550 — Zeile = Eintrag (Knopf, öffnet die Opportunity) + optional „→ Event"
   als Geschwister daneben. Der Eintrag ist ein echter <button>: Tab, Enter, Leertaste. */
.notification-row {
  display: flex;
  align-items: flex-start;
  border-bottom: 1px solid var(--border);
}

.notification-row:last-child { border-bottom: none; }

.notification-row .notification-event-btn { margin: 10px 12px 0 0; }

.notification-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  flex: 1;
  min-width: 0;
  width: 100%;
  padding: 10px 16px;
  background: none;
  border: none;
  border-left: 3px solid transparent;
  font: inherit;
  color: inherit;
  text-align: left;
  cursor: pointer;
  transition: background var(--transition);
}

.notification-item:hover { background: var(--bg-hover); }

.notification-bell:focus-visible,
.notification-item:focus-visible,
.notification-event-btn:focus-visible,
#notification-mark-all:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: -2px;
}

.notification-message,
.notification-time { display: block; }

/* ── Type colors ── */
.notification-item.type-new-opp.unread {
  border-left-color: var(--success);
  background: rgba(16, 185, 129, 0.06);
}

.notification-item.type-status-change.unread {
  border-left-color: var(--warning);
  background: rgba(245, 158, 11, 0.06);
}

.notification-item.type-assignment.unread {
  border-left-color: var(--primary);
  background: rgba(99, 102, 241, 0.06);
}

/* Read items — subtle */
.notification-item:not(.unread) {
  opacity: 0.65;
}

.notification-item:not(.unread):hover {
  opacity: 0.85;
}

.notification-icon {
  font-size: var(--fs-section);
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-sm);
  background: var(--bg-card2);
}

.type-new-opp .notification-icon { background: rgba(16, 185, 129, 0.15); }
.type-status-change .notification-icon { background: rgba(245, 158, 11, 0.15); }
.type-assignment .notification-icon { background: rgba(99, 102, 241, 0.15); }

.notification-content {
  flex: 1;
  min-width: 0;
}

.notification-message {
  font-size: var(--fs-ui);
  color: var(--text-1);
  line-height: 1.4;
  word-break: break-word;
}

.notification-time {
  font-size: var(--fs-label);
  color: var(--text-3);
  margin-top: 2px;
}

.notification-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--primary);
  flex-shrink: 0;
  margin-top: 6px;
}

.type-new-opp .notification-dot { background: var(--success); }
.type-status-change .notification-dot { background: var(--warning); }
.type-assignment .notification-dot { background: var(--primary); }

.notification-empty {
  text-align: center;
  padding: 32px 16px;
  color: var(--text-3);
  font-size: var(--fs-body);
}

/* ── Notification Banner (slide-in from top) ── */

.notification-banner {
  position: fixed;
  top: 0;
  left: 50%;
  transform: translateX(-50%) translateY(-100%);
  z-index: 2000;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 24px;
  border-radius: 0 0 var(--radius-lg) var(--radius-lg);
  border: none;
  box-shadow: 0 8px 32px rgba(0, 0, 0, .5);
  min-width: 480px;
  max-width: 680px;
  opacity: 0;
  transition: transform 0.3s cubic-bezier(.4,0,.2,1), opacity 0.3s ease;
  pointer-events: auto;
}

.notification-banner.visible {
  transform: translateX(-50%) translateY(0);
  opacity: 1;
}

.notification-banner.type-new-opp {
  background: linear-gradient(135deg, #0d6b4a, #10b981);
}

.notification-banner.type-status-change {
  background: linear-gradient(135deg, #92400e, #f59e0b);
}

.notification-banner.type-assignment {
  background: linear-gradient(135deg, #3730a3, #6366f1);
}

.notification-banner-icon {
  font-size: var(--fs-title);
  flex-shrink: 0;
}

.notification-banner-text {
  font-size: var(--fs-body);
  color: #fff;
  flex: 1;
  line-height: 1.4;
  font-weight: 500;
}

.notification-banner-close {
  background: rgba(255, 255, 255, 0.15);
  border: none;
  color: rgba(255, 255, 255, 0.8);
  cursor: pointer;
  font-size: var(--fs-ui);
  padding: 4px 8px;
  border-radius: var(--radius-sm);
  transition: color var(--transition), background var(--transition);
  flex-shrink: 0;
}

.notification-banner-close:hover {
  color: #fff;
  background: rgba(255, 255, 255, 0.25);
}

/* ═══════════════════════════════════════════
   EVENT-CENTER
   ═══════════════════════════════════════════ */

.event-kpi-active { outline: 2px solid var(--primary); outline-offset: -2px; }

/* ── View Preset Bar (EC 1.6) ── */
.event-preset-bar {
  display: flex;
  gap: 8px;
  margin-bottom: 14px;
  flex-wrap: wrap;
}
.event-preset-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: var(--bg-card);
  color: var(--text-2);
  font-size: var(--fs-body);
  font-weight: 500;
  cursor: pointer;
  transition: all var(--transition);
}
.event-preset-btn:hover {
  border-color: var(--primary);
  color: var(--text-1);
  background: rgba(99, 102, 241, 0.06);
}
.event-preset-btn.event-preset-active {
  background: rgba(99, 102, 241, 0.12);
  border-color: var(--primary);
  color: var(--primary);
  font-weight: 600;
}
.event-preset-icon { font-size: var(--fs-body); }
.event-preset-label { white-space: nowrap; }

.event-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 14px 16px;
  margin-bottom: 10px;
  transition: border-color var(--transition);
}
.event-card:hover { border-color: var(--primary); }
.event-card.event-overdue { border-left: 3px solid var(--danger); }
.event-card.event-done { opacity: 0.6; }
.event-card.event-done .event-card-title { text-decoration: line-through; color: var(--text-secondary); }

/* HF3.04: Done-Checkbox (Task erledigt-Toggle, nicht zu verwechseln mit Bulk-Selection) */
.event-done-checkbox {
  display: inline-flex;
  align-items: center;
  cursor: pointer;
  padding: 2px;
  flex-shrink: 0;
}
.event-done-checkbox input[type="checkbox"] {
  cursor: pointer;
  width: 16px;
  height: 16px;
  accent-color: var(--success);
}

.event-card-header {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}

.event-type-icon { font-size: var(--fs-title); flex-shrink: 0; margin-top: 2px; }

.event-card-title-wrap { flex: 1; min-width: 0; }
.event-card-title { font-weight: 600; font-size: var(--fs-body); color: var(--text-1); }
.event-card-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 4px;
  font-size: var(--fs-meta);
}

.event-opp-link {
  color: var(--accent);
  cursor: pointer;
  text-decoration: underline;
  text-decoration-style: dotted;
}
.event-opp-link:hover { color: var(--primary); }

.event-phase-badge, .event-cluster-badge {
  background: rgba(99, 102, 241, 0.12);
  color: var(--text-2);
  padding: 1px 6px;
  border-radius: 4px;
  font-size: var(--fs-label);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 180px;
}

.event-card-actions { display: flex; gap: 4px; flex-shrink: 0; }

.event-card-body { margin-top: 8px; }

.event-card-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
  margin-bottom: 6px;
}

.event-status-badge {
  font-size: var(--fs-label);
  padding: 2px 8px;
  border-radius: 4px;
  font-weight: 500;
}

.event-status-open { background: rgba(99, 102, 241, 0.15); color: #818cf8; }
.event-status-in_progress { background: rgba(6, 182, 212, 0.15); color: #22d3ee; }
.event-status-in_review { background: rgba(245, 158, 11, 0.15); color: #fbbf24; }
.event-status-blocked { background: rgba(239, 68, 68, 0.15); color: #f87171; }
.event-status-escalated { background: rgba(239, 68, 68, 0.2); color: #ef4444; }
.event-status-done { background: rgba(16, 185, 129, 0.15); color: #34d399; }
.event-status-cancelled { background: rgba(100, 116, 139, 0.15); color: #94a3b8; }

.event-prio-badge {
  font-size: var(--fs-label);
  padding: 1px 6px;
  border-radius: 4px;
  border: 1px solid;
}

.event-mgmt-flag, .event-escalation-flag {
  font-size: var(--fs-body);
  cursor: help;
}

.event-card-info {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  font-size: var(--fs-ui);
  color: var(--text-3);
  margin-bottom: 6px;
}

.event-date { color: var(--text-3); }
.event-date-overdue { color: var(--danger); font-weight: 600; }
.event-owner, .event-owner-role { color: var(--text-2); }
.event-auto-badge {
  background: rgba(99, 102, 241, 0.1);
  color: var(--text-3);
  padding: 1px 6px;
  border-radius: 4px;
  font-size: var(--fs-label);
}

/* EC 1.7: Aging badges */
.event-aging-badge {
  padding: 1px 6px;
  border-radius: 4px;
  font-size: var(--fs-label);
  font-weight: 500;
}
.aging-1 { background: rgba(251, 191, 36, 0.15); color: var(--warning); }
.aging-2 { background: rgba(239, 68, 68, 0.15); color: var(--danger); }
.aging-3 { background: rgba(239, 68, 68, 0.25); color: var(--danger); border: 1px solid var(--danger); }

/* EC 1.7: Completion note on closed events */
.event-completion-note {
  color: var(--text-3);
  font-size: var(--fs-meta);
  font-style: italic;
  margin-top: 6px;
  padding: 4px 8px;
  background: rgba(99, 102, 241, 0.05);
  border-radius: 4px;
  border-left: 2px solid var(--primary);
}

.event-card-status-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid var(--border);
}

/* Notification → Event button */
.notification-event-btn {
  background: rgba(99, 102, 241, 0.1);
  color: var(--primary);
  border: 1px solid var(--primary);
  border-radius: 4px;
  font-size: var(--fs-label);
  padding: 2px 6px;
  cursor: pointer;
  white-space: nowrap;
  margin-left: auto;
  flex-shrink: 0;
  transition: background var(--transition);
}
.notification-event-btn:hover {
  background: var(--primary);
  color: #fff;
}

/* Kanban event badges */
.kanban-event-badge { font-size:var(--fs-label); color:var(--text-2); margin-top:4px; }
.kanban-event-badge-overdue { color:var(--danger); font-weight:600; }

/* ── Event Kanban Cards ── */
.event-kanban-card-header {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 6px;
}
.event-kanban-done { opacity: 0.5; }
.event-kanban-done .kanban-card-title { text-decoration: line-through; }
.event-kanban-overdue { border-left: 3px solid var(--danger); }
.event-kanban-date-overdue { color: var(--danger); font-weight: 600; }
.event-kanban-empty {
  text-align: center;
  padding: 20px 8px;
  color: var(--text-3);
  font-size: var(--fs-meta);
}

/* Opportunity Modal: Events section */
.opp-event-done { opacity: 0.5; }

/* ── Bulk Actions (OH 1.3) ── */
.event-bulk-toolbar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  margin-top: 12px;
  background: rgba(99, 102, 241, 0.08);
  border: 1px solid rgba(99, 102, 241, 0.25);
  border-radius: 8px;
  flex-wrap: wrap;
}
.event-bulk-count {
  font-weight: 500;
  font-size: var(--fs-body);
  color: var(--primary);
  white-space: nowrap;
}
.event-bulk-select {
  padding: 4px 8px;
  font-size: var(--fs-ui);
  border-radius: 6px;
  border: 1px solid var(--border);
  background: var(--bg-card);
  color: var(--text-1);
}
.event-bulk-checkbox {
  display: inline-flex;
  align-items: center;
  cursor: pointer;
  flex-shrink: 0;
}
.event-bulk-checkbox input[type="checkbox"] {
  width: 16px;
  height: 16px;
  accent-color: var(--primary);
  cursor: pointer;
}
.event-card.event-selected {
  background: rgba(99, 102, 241, 0.06);
  border-color: rgba(99, 102, 241, 0.35);
}
.kanban-card.event-selected {
  background: rgba(99, 102, 241, 0.08);
  outline: 2px solid var(--primary);
  outline-offset: -2px;
}

/* ── Validation ── */
.field-error {
  border-color: var(--danger) !important;
  box-shadow: 0 0 0 2px rgba(239, 68, 68, .15);
}
.field-valid {
  border-color: var(--success) !important;
}
.field-error-msg {
  color: var(--danger);
  font-size: var(--fs-ui);
  margin-top: 4px;
  display: block;
}
.toast.error {
  background: linear-gradient(135deg, var(--danger), #dc2626);
  /* PR1.310 (#519) — Mitnahme-Befund: die Regel setzte bisher nur den roten Grund.
     Die Textfarbe erbte von `body` und war im hellen Zustand dunkelblau auf Rot —
     3,4:1 und damit unter dem Mindestwert, in JEDEM Fehler-Toast der App. Aufgefallen
     beim Messen des neuen Aktionsknopfs, der ueber currentColor denselben Wert erbte.
     Weiss auf diesem Rot ergibt 4,9:1; im dunklen Zustand aendert sich nichts. */
  color: #fff;
}

/* ═══════════════════════════════════════════
   PRINT STYLES
   ═══════════════════════════════════════════ */

/* On-screen: print elements hidden */
.print-header { display: none; }
.print-filter { display: none; }

/* BF-81 (#660): waehrend triggerPrint() keine laufende Bauplan-Animation. */
html.is-printing .dbp-balken,
html.is-printing .dbp-saeule-balken { animation: none !important; }
html.is-printing .dbp-kum, html.is-printing .dbp-kum-punkt, html.is-printing .dbp-schnitt { animation: none !important; } /* PR1.563 */

@media print {
  /* Hide UI chrome */
  .sidebar,
  .topbar,
  .filter-bar,
  .notification-wrapper,
  .notification-dropdown,
  .modal-overlay,
  .toast,
  .tabs,
  .event-card-actions,
  .event-card-status-buttons,
  .event-bulk-toolbar,
  .event-bulk-checkbox,
  .customer-history-btn,
  /* BF-81 (#660): KI-Stoerungsband und die (geschlossene) Anhang-Vorschau druckten mit. */
  .ai-banner,
  #kb-attachment-preview-modal,
  #event-kanban-wrap { display: none !important; }
  #event-list-wrap { display: block !important; }

  /* Hide all buttons except we need to be thorough */
  .btn,
  button {
    display: none !important;
  }

  /* White theme overrides — BF-81 (#660): `:root[data-theme]` mit, sonst gewinnt das
     dunkle Theme (hoehere Spezifitaet) und Strg+P druckt dunkel. */
  :root,
  :root[data-theme] {
    --bg-base: #fff;
    --bg-card: #fff;
    --bg-card2: #f8f9fa;
    --text-1: #1a1a1a;
    --text-2: #444;
    --text-3: #666;
    --border: #ddd;
  }

  html:has(> body > .app-wrapper) { overflow: visible !important; }

  /* CRITICAL: Break flex layout for print — make everything block + full width */
  body {
    background: #fff !important;
    color: #1a1a1a !important;
    margin: 0 !important;
    padding: 0 !important;
    width: 100% !important;
  }

  .app-wrapper {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    overflow: visible !important;
    background: #fff !important;
  }

  .main {
    display: block !important;
    width: 100% !important;
    overflow: visible !important;
    background: #fff !important;
  }

  .content {
    display: block !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 10px !important;
    overflow: visible !important;
    background: #fff !important;
    height: auto !important;
  }

  /* Show print header */
  .print-header {
    display: flex !important;
    align-items: center;
    gap: 16px;
    margin-bottom: 20px;
    padding-bottom: 12px;
    border-bottom: 2px solid #333;
  }

  .print-title {
    font-size: var(--fs-title);
    font-weight: 600;
    color: #1a1a1a;
  }

  .print-date {
    font-size: var(--fs-body);
    color: #666;
  }

  .print-header { flex-wrap: wrap; }
  /* Filterzeile nur beim Dashboard — der Kopf der klassischen Shell gilt fuer jede Ansicht. */
  .content:has(> #view-dashboard.active) .print-filter,
  .crm .print-filter {
    display: block !important;
    flex-basis: 100%;
    font-size: var(--fs-ui);
    color: #444;
  }

  /* Only active view visible */
  .view { display: none !important; }
  .view.active { display: block !important; overflow: visible !important; }

  /* KPI cards print-friendly */
  .kpi-card {
    background: #fff !important;
    border: 1px solid #ddd !important;
    box-shadow: none !important;
  }

  .kpi-card .kpi-icon { filter: grayscale(0); }

  .kpi-value,
  .kpi-label,
  .kpi-delta {
    color: #1a1a1a !important;
  }

  .kpi-grid {
    gap: 12px;
  }

  /* Tables */
  table {
    width: 100%;
    border-collapse: collapse;
  }

  th, td {
    border: 1px solid #ccc;
    padding: 6px 8px;
    font-size: var(--fs-ui);
    color: #1a1a1a;
  }

  th {
    background: #f0f0f0 !important;
    font-weight: 600;
  }

  /* Opportunities: hide Kanban, show Table */
  #kanban-board-wrap { display: none !important; }
  #opp-table-wrap { display: block !important; }

  /* Employee cards */
  .employee-grid {
    gap: 12px;
  }

  .employee-card {
    background: #fff !important;
    border: 1px solid #ddd !important;
    box-shadow: none !important;
    break-inside: avoid;
    page-break-inside: avoid;
  }

  .emp-name,
  .emp-role,
  .emp-level {
    color: #1a1a1a !important;
  }

  /* Customer cards */
  .customer-card {
    background: #fff !important;
    border: 1px solid #ddd !important;
    box-shadow: none !important;
    break-inside: avoid;
    page-break-inside: avoid;
  }

  .customer-name,
  .customer-industry {
    color: #1a1a1a !important;
  }

  .customer-stat-card {
    background: #f8f9fa !important;
    border: 1px solid #ddd !important;
  }

  .customer-stat-value,
  .customer-stat-label {
    color: #1a1a1a !important;
  }

  /* Event cards */
  .event-card {
    background: #fff !important;
    border: 1px solid #ddd !important;
    box-shadow: none !important;
    break-inside: avoid;
  }

  .event-card-title {
    color: #1a1a1a !important;
  }

  /* Badges */
  .badge {
    border: 1px solid #999 !important;
    background: #f5f5f5 !important;
    color: #333 !important;
  }

  /* Chips */
  .chip {
    border-color: #ccc !important;
    color: #333 !important;
  }

  /* Cards (generic) */
  .card {
    background: #fff !important;
    border: 1px solid #ddd !important;
    box-shadow: none !important;
  }

  /* Timeline (capacity) */
  .timeline-wrap {
    overflow: visible !important;
  }

  .timeline-cell,
  .timeline-header-cell,
  .heatmap-cell {
    color: #1a1a1a !important;
    border-color: #ddd !important;
  }

  /* Qualifications matrix */
  .qual-matrix-table th,
  .qual-matrix-table td {
    color: #1a1a1a !important;
  }

  /* Star ratings in print */
  .star-rating {
    filter: grayscale(0.3);
  }

  /* Dashboard: Reiter, Hinweiszeile und Knopf-/Filterzeile nicht mitdrucken (BF-81 #660 —
     vorher `> div:first-child`, das nach dem Einbau der Reiter die falsche Zeile traf). */
  #view-dashboard .dash-cat-bar,
  #view-dashboard .dash-cat-sprung,
  #view-dashboard #dash-std-note,
  #view-dashboard .dash-toolbar {
    display: none !important;
  }

  /* BF-81 (#660): Bauplan-Kacheln, Ranglisten-Zeilen und Saeulen SIND Knoepfe (Drill-down)
     — die pauschale Knopf-Regel oben leerte deshalb den ganzen Bericht. Hier zurueckholen. */
  .dbp .dbp-kpi-knopf,
  .dbp .dbp-rang-zeile,
  .dbp .dbp-saeule {
    display: grid !important;
  }
  .dbp .dbp-ecke-knopf {
    display: inline !important;
    text-decoration: none;
  }
  .dbp .dbp-zeitraum,
  .dbp .dbp-erneut {
    display: none !important;
  }
  .dbp .dbp-top-wrap {
    max-height: none;
    overflow: visible;
  }
  /* Endzustand statt Startbild der Animation. */
  .dbp-balken,
  .dbp-saeule-balken {
    animation: none !important;
  }
  .dbp-kum, .dbp-kum-punkt, .dbp-schnitt, .dbp-monate, .dbp-mk { animation: none !important; } /* PR1.563 */
  .dbp-kachel {
    break-inside: avoid;
    page-break-inside: avoid;
  }

  /* Ensure grid layouts remain visible */
  .grid-2 {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 12px !important;
  }

  /* Dashboard sections — all visible, no overflow clips */
  #view-dashboard .card,
  #view-dashboard .kpi-grid,
  #view-dashboard .grid-2 {
    overflow: visible !important;
  }

  /* Dashboard card headers & text */
  .card-header,
  .card-title {
    color: #1a1a1a !important;
  }

  .card {
    break-inside: avoid;
    page-break-inside: avoid;
  }

  /* All text should be dark */
  * {
    color-adjust: exact !important;
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
  }

  /* Canvas charts (donut, bars) — ensure they print */
  canvas {
    max-width: 100% !important;
  }

  /* Emp chips in table */
  .emp-chips .chip {
    display: inline-block !important;
    border: 1px solid #ccc !important;
    color: #333 !important;
    font-size: var(--fs-label) !important;
  }

  /* Table wrapper — no scroll, show all */
  .table-wrap {
    overflow: visible !important;
    max-height: none !important;
  }

  /* PR1.75 (#224) — Print-Härtung: Scroll-Container der Opp-Tabelle entklammern
     und sticky Header/Spalte auf static setzen. Ursache des Vorschau-Hangs:
     sticky thead/Spalte in einem auf max-height geklammerten Container (.opp-table-scroll)
     zwingt Chromium in eine Endlos-Pagination. Die generische .table-wrap-Regel oben
     traf den echten Scroll-Wrapper .opp-table-scroll nie. */
  .opp-table-scroll {
    overflow: visible !important;
    max-height: none !important;
  }
  table.opp-table thead tr.col-heads-row th,
  table.opp-table .col-sticky-name,
  table.opp-table thead tr th.col-sticky-name,
  .crm .tbl thead th {
    position: static !important;
    box-shadow: none !important;
  }
  /* Redesign-Shell (?ui=new): fixed Overlays/Drawer/Toasts nicht mitdrucken */
  .crm .cmdk-overlay,
  .crm .drawer-veil,
  .crm .drawer,
  .crm .modal-veil,
  .crm .toast,
  .crm .coachmarks,
  .crm .coach-toggle {
    display: none !important;
  }

  /* Page settings */
  @page {
    margin: 12mm;
    size: A4 landscape;
  }
}

/* ════════════════════════════════════════════
   KI-MATCHING — Document Upload & AI Results (HF2.5b)
   ════════════════════════════════════════════ */

/* Upload area */
.ki-upload-area {
  border: 2px dashed var(--border);
  border-radius: var(--radius);
  padding: 20px;
  text-align: center;
  cursor: pointer;
  transition: border-color var(--transition), background var(--transition);
  background: var(--bg-card);
}

.ki-upload-area:hover {
  border-color: var(--accent);
  background: rgba(6, 182, 212, 0.05);
}

.ki-upload-area.dragover {
  border-color: var(--accent);
  background: rgba(6, 182, 212, 0.1);
}

.ki-upload-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}

/* Upload status */
.ki-upload-status {
  font-size: var(--fs-body);
  color: var(--text-2);
  padding: 8px 0;
  display: flex;
  align-items: center;
  gap: 8px;
}

.ki-analyzing-spinner {
  display: inline-block;
  width: 16px;
  height: 16px;
  border: 2px solid var(--border);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: ki-spin 0.8s linear infinite;
}

@keyframes ki-spin {
  to { transform: rotate(360deg); }
}

/* Analysis results */
.ki-analysis-results {
  margin-top: 10px;
}

.ki-analysis-section {
  margin-bottom: 8px;
}

.ki-section-label {
  font-size: var(--fs-meta);
  font-weight: 500;
  color: var(--text-3);
  margin-bottom: 4px;
}

/* Fallback banner */
.ki-fallback-banner {
  background: rgba(245, 158, 11, 0.1);
  border: 1px solid rgba(245, 158, 11, 0.3);
  border-radius: var(--radius);
  padding: 8px 12px;
  font-size: var(--fs-ui);
  color: var(--warning);
  margin-bottom: 10px;
}

/* Skill chips */
.ki-skill-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}

.ki-skill-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 10px;
  border-radius: 12px;
  font-size: var(--fs-ui);
  background: rgba(6, 182, 212, 0.15);
  color: var(--accent);
  border: 1px solid rgba(6, 182, 212, 0.3);
}

.ki-chip-remove {
  background: none;
  border: none;
  color: var(--text-3);
  cursor: pointer;
  font-size: var(--fs-body);
  padding: 0 2px;
  line-height: 1;
  transition: color var(--transition);
}

.ki-chip-remove:hover {
  color: var(--danger);
}

.ki-tech-chip {
  display: inline-flex;
  padding: 3px 10px;
  border-radius: 12px;
  font-size: var(--fs-ui);
  background: rgba(99, 102, 241, 0.1);
  color: var(--primary);
  border: 1px solid rgba(99, 102, 241, 0.2);
}

.ki-role-tag {
  display: inline-flex;
  padding: 3px 10px;
  border-radius: 12px;
  font-size: var(--fs-ui);
  background: transparent;
  color: var(--text-2);
  border: 1px solid var(--border);
}

.ki-skill-add-btn {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 1px dashed var(--border);
  background: none;
  color: var(--text-3);
  cursor: pointer;
  font-size: var(--fs-body);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: all var(--transition);
}

.ki-skill-add-btn:hover {
  border-color: var(--accent);
  color: var(--accent);
}

.ki-skill-input {
  padding: 3px 8px;
  border-radius: 12px;
  border: 1px solid var(--accent);
  background: var(--bg-card);
  color: var(--text-1);
  font-size: var(--fs-ui);
  width: 120px;
  outline: none;
}

/* Requirements list */
.ki-requirements-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.ki-requirements-list li {
  font-size: var(--fs-ui);
  color: var(--text-2);
  padding: 2px 0;
}

.ki-requirements-list li::before {
  content: "→ ";
  color: var(--text-3);
}

/* Match cards */
.ki-match-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 12px;
  margin-bottom: 8px;
}

.ki-match-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
}

.ki-match-info {
  flex: 1;
}

.ki-match-name {
  font-weight: 500;
  font-size: var(--fs-body);
  color: var(--text-1);
}

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

.avatar-sm {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--fs-label);
  font-weight: 500;
  color: #fff;
  flex-shrink: 0;
}

/* Total score */
.ki-total-score {
  font-size: var(--fs-title);
  font-weight: 600;
  width: 44px;
  text-align: center;
  flex-shrink: 0;
}

.ki-total-score.high { color: var(--success); }
.ki-total-score.medium { color: var(--warning); }
.ki-total-score.low { color: var(--danger); }

/* Score bars */
.ki-match-scores {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-bottom: 8px;
}

.ki-score-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.ki-score-label {
  font-size: var(--fs-meta);
  color: var(--text-3);
  width: 90px;
  flex-shrink: 0;
}

.ki-score-bar {
  flex: 1;
  height: 6px;
  background: var(--bg-sidebar);
  border-radius: 3px;
  overflow: hidden;
}

.ki-score-fill {
  height: 100%;
  border-radius: 3px;
  transition: width 0.3s ease;
}

.ki-score-fill.high { background: var(--success); }
.ki-score-fill.medium { background: var(--warning); }
.ki-score-fill.low { background: var(--danger); }

.ki-score-value {
  font-size: var(--fs-meta);
  font-weight: 500;
  color: var(--text-2);
  width: 24px;
  text-align: right;
  flex-shrink: 0;
}

/* Matched skill badges */
.ki-matched-skills {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-bottom: 8px;
}

.ki-matched-skill-badge {
  font-size: var(--fs-label);
  padding: 1px 6px;
  border-radius: 8px;
  background: rgba(16, 185, 129, 0.1);
  color: var(--success);
  border: 1px solid rgba(16, 185, 129, 0.2);
}

/* Assign button */
.ki-match-actions {
  display: flex;
  justify-content: flex-end;
}

.ki-assign-btn {
  padding: 4px 14px;
  border-radius: 6px;
  border: none;
  font-size: var(--fs-ui);
  font-weight: 500;
  cursor: pointer;
  transition: all var(--transition);
  background: var(--accent);
  color: #fff;
}

.ki-assign-btn:hover {
  filter: brightness(1.1);
}

.ki-assign-btn.assigned {
  background: var(--success);
  cursor: default;
  opacity: 0.7;
}

/* Show all toggle */
.ki-show-all-btn {
  display: block;
  width: 100%;
  padding: 6px;
  border: 1px dashed var(--border);
  border-radius: var(--radius);
  background: none;
  color: var(--text-3);
  font-size: var(--fs-ui);
  cursor: pointer;
  text-align: center;
  transition: all var(--transition);
}

.ki-show-all-btn:hover {
  border-color: var(--accent);
  color: var(--accent);
}

/* ═══════════════════════════════════════════
   GAP ANALYSIS (HF2.5c)
   ═══════════════════════════════════════════ */

.match-gap-actions {
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid var(--border);
}

.gap-btn {
  background: none;
  border: 1px solid var(--accent);
  color: var(--accent);
  padding: 4px 12px;
  border-radius: var(--radius);
  font-size: var(--fs-meta);
  cursor: pointer;
  transition: all var(--transition);
}

.gap-btn:hover,
.gap-btn.active {
  background: var(--accent);
  color: #fff;
}

.gap-panel-container {
  margin-top: 4px;
}

.gap-panel {
  display: none;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 14px;
  margin-top: 8px;
}

.gap-panel.open {
  display: block;
}

.gap-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}

.gap-panel-title {
  font-size: var(--fs-body);
  font-weight: 600;
  color: var(--text-1);
}

/* PR1.148 (#297): .gap-fit-badge entfallen — die zweite Prozentzahl pro Kandidat
   ("XX % Fit") wurde abgeschafft. Es gibt genau eine Kompetenzzahl: die Score-Kachel. */

.gap-verdict-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
}

.gap-verdict-badge {
  padding: 2px 8px;
  border-radius: var(--radius);
  font-size: var(--fs-label);
  font-weight: 500;
  border: 1px solid;
}

.gap-fallback-banner {
  padding: 2px 8px;
  border-radius: var(--radius);
  font-size: var(--fs-label);
  background: rgba(251, 191, 36, .12);
  color: var(--warning);
  border: 1px solid rgba(251, 191, 36, .3);
}

.gap-section-group {
  margin-bottom: 12px;
}

/* PR1.438 — look comes from the shared section-head rule. */
.gap-section-title { margin-bottom: 6px; }

/* Dimension rows */
.gap-dimension-row {
  padding: 8px 0;
  border-bottom: 1px solid rgba(255,255,255,.04);
}

.gap-dimension-row:last-child {
  border-bottom: none;
}

.gap-dimension-label {
  font-size: var(--fs-meta);
  font-weight: 500;
  color: var(--text-1);
  margin-bottom: 4px;
}

.gap-dimension-bar-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 4px;
}

.gap-dimension-bar {
  flex: 1;
  height: 6px;
  background: var(--border);
  border-radius: 3px;
  overflow: hidden;
}

.gap-dimension-fill {
  height: 100%;
  border-radius: 3px;
  transition: width .3s ease;
}

.gap-dimension-fill.high {
  background: linear-gradient(90deg, var(--success), #34d399);
}

.gap-dimension-fill.medium {
  background: linear-gradient(90deg, var(--warning), #fbbf24);
}

.gap-dimension-fill.low {
  background: linear-gradient(90deg, var(--danger), #f87171);
}

.gap-dimension-pct {
  font-size: var(--fs-label);
  font-weight: 500;
  color: var(--text-2);
  min-width: 32px;
  text-align: right;
}

.gap-dimension-detail {
  font-size: var(--fs-label);
  color: var(--text-3);
}

.gap-dimension-items {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 3px;
}

.gap-dim-item {
  padding: 2px 6px;
  border-radius: 3px;
  font-size: var(--fs-label);
}

.gap-dim-item.ok {
  background: rgba(16, 185, 129, .12);
  color: var(--success);
}

.gap-dim-item.gap {
  background: rgba(239, 68, 68, .12);
  color: var(--danger);
}

/* PR1.80 (#229) — Match-Transparenz: dritte Stufe „teilweise" (vorhanden, aber Level/Auspraegung
   unter gefordert). Amber-Hausstil analog .gap-cert-chip.medium / .gap-fallback-banner. */
.gap-dim-item.warn {
  background: rgba(251, 191, 36, .12);
  color: var(--warning);
}

/* PR1.80 (#229) — kompakte Skill-Ampel in den Opp-Detail-Kandidaten-Zeilen (Standardansicht). */
.opp-cand-row-wrap {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 4px 0;
  border-bottom: 1px solid var(--border, #2a2f3a);
}
.opp-cand-row-wrap:last-child { border-bottom: 0; }
.opp-cand-skillampel-chips {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
  padding-left: 26px;
}
.opp-cand-skillampel-src { font-size: var(--fs-label); opacity: .8; }
.opp-cand-skillampel-conf {
  font-size: var(--fs-label);
  color: var(--text-3, #888);
  margin-left: 2px;
}
.opp-cand-skillampel-empty,
.opp-cand-skillampel-loading {
  font-size: var(--fs-label);
  color: var(--text-3, #888);
  padding-left: 26px;
}
.opp-cand-skillampel-idle {
  font-size: var(--fs-label);
  color: var(--text-2, #aaa);
  background: transparent;
  border: 1px solid var(--border, #333);
  border-radius: 3px;
  padding: 1px 6px;
  margin-left: 26px;
  cursor: pointer;
}
.opp-cand-skillampel-idle:hover { color: var(--text-1, #eee); border-color: var(--accent, #4a9eff); }

/* Gap cards */
.gap-card {
  background: rgba(255,255,255,.02);
  border: 1px solid var(--border);
  border-left: 3px solid var(--danger);
  border-radius: var(--radius);
  padding: 10px 12px;
  margin-bottom: 8px;
}

.gap-card-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 4px;
}

.gap-card-area {
  font-size: var(--fs-meta);
  font-weight: 500;
  color: var(--text-1);
  flex: 1;
}

.gap-card-pct {
  font-size: var(--fs-label);
  font-weight: 500;
  color: var(--danger);
}

.gap-priority-badge {
  padding: 1px 6px;
  border-radius: 3px;
  font-size: var(--fs-label);
  font-weight: 500;
  letter-spacing: .04em;
}

.gap-card-levels {
  font-size: var(--fs-label);
  color: var(--text-3);
  margin-bottom: 4px;
}

.gap-card-impact {
  font-size: var(--fs-label);
  color: var(--text-2);
  margin-bottom: 6px;
  font-style: italic;
}

.gap-card-actions {
  margin-top: 6px;
}

.gap-card-actions-label {
  font-size: var(--fs-label);
  font-weight: 500;
  color: var(--text-2);
  margin-bottom: 2px;
}

.gap-card-actions ul {
  margin: 0;
  padding-left: 16px;
  list-style: disc;
}

.gap-card-actions li {
  font-size: var(--fs-label);
  color: var(--text-2);
  line-height: 1.5;
}

/* Strengths */
.gap-strengths-list {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.gap-strength-chip {
  background: rgba(16, 185, 129, .12);
  color: var(--success);
  padding: 3px 8px;
  border-radius: 4px;
  font-size: var(--fs-label);
}

/* Verdict text */
.gap-verdict-text {
  font-size: var(--fs-meta);
  color: var(--text-2);
  line-height: 1.6;
  padding: 8px 12px;
  border-left: 3px solid var(--accent);
  background: rgba(99, 102, 241, .06);
  border-radius: 0 var(--radius) var(--radius) 0;
}

/* Certification chips */
.gap-cert-list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.gap-cert-chip {
  padding: 3px 8px;
  border-radius: 4px;
  font-size: var(--fs-label);
  font-weight: 500;
}

.gap-cert-chip.high {
  background: rgba(239, 68, 68, .12);
  color: var(--danger);
}

.gap-cert-chip.medium {
  background: rgba(251, 191, 36, .12);
  color: var(--warning);
}

.gap-cert-chip.low {
  background: rgba(148, 163, 184, .12);
  color: var(--text-3);
}

/* Loading spinner */
.gap-loading {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 16px;
  font-size: var(--fs-ui);
  color: var(--text-3);
}

.gap-spinner {
  display: inline-block;
  width: 16px;
  height: 16px;
  border: 2px solid var(--border);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: gap-spin .7s linear infinite;
}

@keyframes gap-spin {
  to { transform: rotate(360deg); }
}

/* ─── EC 1.8: Expansion event highlighting ─── */
.event-card.event-expansion {
  border-left: 3px solid #06b6d4;
}
.expansion-type-badge {
  color: #06b6d4;
  border-color: #06b6d4;
  font-weight: 600;
}
/* ─── HF3.01b: AI Banner ─── */
.ai-banner {
  position: sticky;
  top: 0;
  z-index: 1000;
  background: linear-gradient(90deg, #7c2d12, #b45309);
  color: #fff7ed;
  border-bottom: 1px solid #92400e;
  padding: 10px 16px;
  font-size: var(--fs-body);
  box-shadow: 0 2px 6px rgba(0,0,0,.35);
}
.ai-banner__content {
  display: flex;
  align-items: center;
  gap: 10px;
  max-width: 100%;
}
.ai-banner__icon {
  font-size: var(--fs-section);
  line-height: 1;
}
.ai-banner__message {
  flex: 1;
}
.ai-banner__label {
  font-weight: 600;
}
.ai-banner__category {
  font-family: 'Fira Sans', system-ui, sans-serif; font-variant-numeric: tabular-nums;
  font-size: var(--fs-meta);
  opacity: .85;
  margin-left: 4px;
}
.ai-banner__close {
  background: rgba(0,0,0,.25);
  border: 1px solid rgba(255,255,255,.2);
  color: inherit;
  font-size: var(--fs-body);
  padding: 2px 8px;
  border-radius: 4px;
  cursor: pointer;
  line-height: 1;
}
.ai-banner__close:hover {
  background: rgba(0,0,0,.5);
}

/* ─── PR4.14 #191: Won-Nudge-Banner ─── */
.won-nudge-banner {
  background: var(--bg-card2, #121928);
  color: var(--text-primary, #e5e7eb);
  border: 1px solid var(--border, #1e2d4a);
  border-left: 4px solid #eab308; /* hint-yellow, dezent für Pilot-Frust-Tag */
  border-radius: 6px;
  padding: 12px 16px;
  margin-bottom: 12px;
  font-size: var(--fs-body);
  box-shadow: 0 1px 3px rgba(0,0,0,.25);
}
.won-nudge-banner__content {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  flex-wrap: wrap;
}
.won-nudge-banner__body {
  flex: 1 1 280px;
  min-width: 0;
}
.won-nudge-banner__title {
  font-weight: 600;
  margin-bottom: 6px;
}
.won-nudge-banner__list {
  margin: 0;
  padding-left: 18px;
  list-style: disc;
  color: var(--text-secondary, #9ca3af);
}
.won-nudge-banner__list li {
  margin: 2px 0;
}
/* PR1.219 #379 — eine Zeile pro Vorgang: Name oben, Lage darunter, Sprungknopf rechts
   daneben. Bewusst ein Raster und kein Flex-Umbruch: bei Flex landet der Knopf je nach
   Textlänge mal in derselben, mal in der nächsten Zeile, und die Liste franst aus.
   Hier steht er in jeder Zeile an derselben Stelle. */
.won-nudge-banner__row {
  list-style: none;
  margin-left: -18px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  column-gap: 12px;
  align-items: center;
  padding: 4px 0;
}
.won-nudge-banner__name {
  grid-area: 1 / 1;
  color: var(--text-primary, #e5e7eb);
  font-weight: 500;
  min-width: 0;
  overflow-wrap: anywhere;
}
.won-nudge-banner__days {
  /* Trägt seit PR1.219 die eigentliche Aussage („Projekt-Entwurf offen seit N Tagen"),
     nicht mehr nur eine Randzahl — deshalb --text-secondary statt --text-tertiary.
     Letzteres ist nirgends definiert, es griff also immer der dunkle Rückfallwert. */
  grid-area: 2 / 1;
  color: var(--text-secondary, #9ca3af);
  font-variant-numeric: tabular-nums;
}
.won-nudge-banner__row .btn {
  grid-column: 2;
  grid-row: 1 / 3;
  justify-self: end;
}
/* Schmales Fenster: alles untereinander, der Knopf linksbündig unter seinem Text. */
@media (max-width: 640px) {
  .won-nudge-banner__row { grid-template-columns: minmax(0, 1fr); }
  .won-nudge-banner__name { grid-area: auto; }
  .won-nudge-banner__days { grid-area: auto; }
  .won-nudge-banner__row .btn { grid-column: 1; grid-row: auto; justify-self: start; margin-top: 4px; }
}
.won-nudge-banner__more {
  list-style: none;
  margin-left: -18px;
  font-style: italic;
  opacity: .8;
}
.won-nudge-banner__actions {
  display: flex;
  gap: 6px;
  align-items: center;
  flex-shrink: 0;
}

/* ═══════════════════════════════════════════════════════════════
   PR1.224 #384 — Band „Testdatensatz"
   ═══════════════════════════════════════════════════════════════
   Ein geteiltes Bauteil (components/test-records.js), sechs Mount-Ziele: drei
   Detailansichten mal zwei Shells. Das Layout steht hier einmal; style-redesign.css
   uebersetzt im .crm-Scope nur die Farbtoken — gleiche Aufteilung wie beim Won-Nudge-Band
   darueber.

   Warnfarbe statt Fehlerrot: ein Testdatensatz ist kein Defekt, er ist absichtlich so.
   Der linke Balken ist dasselbe Mittel wie bei .opp-role-stale-band — er macht das Band
   auf einen Blick als Zustandshinweis lesbar, ohne die Seite einzufaerben. */
.test-record-band {
  display: flex; align-items: flex-start; gap: 8px;
  padding: 8px 12px; margin: 0 0 12px; border-radius: 6px;
  font-size: var(--fs-ui); color: var(--text-2);
  background: var(--bg-hover);
  border: 1px solid var(--border);
  border-left: 3px solid var(--warning);
}
.test-record-band__mark { color: var(--warning); line-height: 1.35; }
.test-record-band__text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.test-record-band__text strong { color: var(--text-1); }
/* Der Nebentext steht ausserhalb jeder Tabelle — `.muted` greift dort nicht (Befund #399),
   deshalb die Farbe hier ausdruecklich. */
.test-record-band__hint { color: var(--text-2); }

/* ── PR1.239 (#414) — Der Suchlauf „Testdaten suchen" ───────────────────────
   Dieselbe Aufteilung wie beim Band darueber: hier steht das Layout, style-redesign.css
   uebersetzt im .crm-Scope nur die Farbtoken.

   Die Tabelle traegt sechs Spalten, davon eine mit Fliesstext (Begruendung). Auf schmalen
   Fenstern passt das nicht — deshalb scrollt sie in ihrem EIGENEN Behaelter statt die
   Seite querzuschieben (Konvention 20, Punkt 1 und 2). Ohne diesen Wrapper lief die
   Statusspalte auf der Pruefseite rechts aus dem Rahmen. */
.testrec-scan-dialog { max-width: 1040px; width: calc(100vw - 48px); }
.testrec-scan-intro { color: var(--text-2); font-size: var(--fs-body); margin: 0 0 12px; }
.testrec-scan-tablewrap { overflow-x: auto; max-height: 58vh; overflow-y: auto; }
.testrec-scan-table { width: 100%; min-width: 760px; }
/* Die Begruendungsspalte traegt den eigentlichen Wert des Dialogs — sie bekommt Platz,
   die uebrigen bleiben schmal. */
.testrec-scan-table th:nth-child(4), .testrec-scan-table td:nth-child(4) { min-width: 220px; }
.testrec-scan-table td { vertical-align: top; }

/* Begruendungen als abgesetzte Marken: mehrere pro Zeile sind der Regelfall, und als
   Fliesstext hintereinander waeren sie nicht mehr als einzelne Beobachtungen lesbar. */
.testrec-scan-reason {
  display: inline-block; margin: 0 4px 4px 0; padding: 1px 7px;
  border-radius: 10px; font-size: var(--fs-meta);
  background: var(--bg-hover); border: 1px solid var(--border); color: var(--text-2);
}

/* Gefunden, aber nicht kennzeichenbar (fehlendes Recht) oder bereits gekennzeichnet.
   Sichtbar statt ausgeblendet: eine stumme Luecke waere genau der Fehler, den dieses
   Ticket abstellt — man muss sehen, dass der Satz erfasst ist.

   BEWUSST KEIN `opacity`. Die erste Fassung daempfte die ganze Zeile auf .62; gemessen an
   der Pruefseite ergab das 3.42:1 (klassisch) und 2.82:1 (Redesign) fuer den Begruendungs-
   text — beides unter AA, bei 12px auch unter der Grossschrift-Schwelle. Deckkraft trifft
   eben nicht nur die Deko, sondern genau die Begruendung, die hier gelesen werden soll.
   Die Zeile ist ohnehin doppelt als inaktiv markiert: das Kaestchen ist gesperrt, und die
   Statusspalte sagt im Klartext, warum. Der abgesetzte Grund ordnet sie nur noch zu. */
.testrec-scan-row-off > td { background: var(--bg-hover); }
.testrec-scan-row-off > td:nth-child(3) { color: var(--text-2); font-weight: 400; }

.testrec-scan-summary { color: var(--text-2); font-size: var(--fs-body); margin: 10px 0 0; }
.testrec-scan-msg { font-size: var(--fs-body); margin: 8px 0 0; color: var(--text-2); }
.testrec-scan-msg--error { color: var(--danger); }
.testrec-scan-loading { color: var(--text-2); padding: 20px 0; text-align: center; }
.testrec-scan-empty p, .testrec-scan-error p { color: var(--text-2); margin: 0 0 8px; }
.testrec-scan-empty strong, .testrec-scan-error strong { color: var(--text-1); }
.testrec-scan-error { border-left: 3px solid var(--danger); padding-left: 12px; }

/* ═══════════════════════════════════════════════════════════════
   HF3.03b — Kundenansicht: Tabelle, Toolbar, Query-Builder, Pivot, Import
   ═══════════════════════════════════════════════════════════════ */

/* --- Toolbar --- */
.customer-toolbar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 12px;
  margin-bottom: 12px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  flex-wrap: wrap;
  position: relative;
}
.customer-view-toggle {
  display: inline-flex;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
}
.customer-view-toggle .tab-btn {
  background: transparent;
  color: var(--text-2);
  border: none;
  padding: 6px 14px;
  font-size: var(--fs-body);
  cursor: pointer;
  border-right: 1px solid var(--border);
  transition: background .15s, color .15s;
}
.customer-view-toggle .tab-btn:last-child { border-right: none; }
.customer-view-toggle .tab-btn:hover { background: rgba(99,102,241,.08); color: var(--text-1); }
.customer-view-toggle .tab-btn.active { background: var(--primary); color: #fff; }
/* PR1.115 (#262) — Kunden-Schnellfilter-Leiste (Alle/Aktive/Meine/…). Nutzt die
   bestehende .filter-chip-Optik (theme-fähig, Dark + Light). */
.customer-preset-bar { display: flex; gap: 4px; align-items: center; flex-wrap: wrap; }
.customer-count-badge {
  margin-left: auto;
  color: var(--text-2);
  font-size: var(--fs-ui);
  padding: 4px 10px;
  background: rgba(255,255,255,.03);
  border-radius: 999px;
}

/* --- Customer Table --- */
.customer-table-scroll {
  overflow-x: auto;
  overflow-y: visible;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg-card);
  max-width: 100%;
}
table.customer-table {
  border-collapse: separate;
  border-spacing: 0;
  font-size: var(--fs-body);
  min-width: 100%;
  color: var(--text-1);
}
table.customer-table thead tr.col-heads-row th {
  position: sticky;
  top: 0; /* PR1.407: die Gruppenzeile darueber ist dem Spaltenwaehler gewichen */
  background: var(--bg-card);
  color: var(--text-2);
  font-size: var(--fs-body);
  font-weight: 500;
  padding: 10px 14px;
  text-align: left;
  border-bottom: 2px solid var(--border);
  white-space: nowrap;
  z-index: 2;
  cursor: pointer;
  user-select: none;
}
table.customer-table thead tr.col-heads-row th[data-sortable="false"] { cursor: default; }
table.customer-table thead tr.col-heads-row th:hover[data-sortable="true"] { background: rgba(99,102,241,.08); }
.sort-idx {
  display: inline-block;
  margin-left: 4px;
  padding: 1px 5px;
  font-size: var(--fs-label);
  background: var(--primary);
  color: #fff;
  border-radius: 999px;
  vertical-align: middle;
}
/* PR1.424 (#661) — feste Zeilenhoehe, eine Zeile je Ebene (Kompass 4_Kundenliste). */
table.customer-table tbody tr {
  height: 56px;
}
table.customer-table tbody tr:nth-child(even) {
  background: rgba(255,255,255,.02);
}
table.customer-table tbody tr:hover {
  background: rgba(99,102,241,.05);
}
table.customer-table td {
  padding: 10px 14px;
  border-bottom: 1px solid rgba(255,255,255,.03);
  vertical-align: middle;
  white-space: nowrap;
  max-width: 220px;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* PR1.424 (#661) — leer ist nicht rot: kein rosa Zellhintergrund mehr, .cell-empty ist
   ein blasser Strich wie .list-empty (Rot nur fuer handlungsrelevante Zustaende). */
.cell-empty { color: var(--text-3); font-weight: 400; }
/* PR1.277 (#471) — „nicht gepflegt" ist kein Fehler und sieht auch nicht so aus.
   Nur die Kundentabelle nutzt diese Klasse; .cell-empty bleibt fuer die uebrigen
   Tabellen unveraendert. */
.cell-unset { color: var(--text-3); }
.cell-bool-yes { color: var(--success); font-weight: 600; }
.cell-bool-no { color: var(--text-3); }
.cell-link { color: var(--primary); text-decoration: none; }
.cell-link:hover { text-decoration: underline; }

/* Sticky Kundenname + Sticky Action-Spalte */
.customer-table .col-sticky-name {
  position: sticky;
  left: 0;
  z-index: 1;
  background: var(--bg-card);
  box-shadow: inset -1px 0 0 var(--border); /* PR1.424: Haarlinie statt hartem Schatten */
  font-weight: 600;
}
table.customer-table thead tr th.col-sticky-name {
  z-index: 4;
}
.customer-table .col-rownum {
  color: var(--text-3);
  font-size: var(--fs-meta);
  text-align: right;
  width: 40px;
}
.customer-table .col-action button { white-space: nowrap; }
/* PR1.293 (#494) — die Aktionsspalte ist von der 220px-Deckelung aller Zellen ausgenommen.
   Die Deckelung ist fuer Inhaltsspalten richtig (lange Kundennamen sollen abschneiden, nicht
   die Tabelle sprengen), fuer eine Knopfleiste ist sie es nicht: schon vor diesem Ticket
   brauchten die drei Knoepfe 381px und wurden bei 220px abgeschnitten — der neue
   Loesch-Knopf haette das weiter verschaerft. Die Tabelle scrollt ohnehin waagerecht, eine
   breitere Aktionsspalte kostet dort nichts. */
.customer-table td.col-action { max-width: none; overflow: visible; }

/* Inline-Edit */
.is-editable { cursor: pointer; transition: background .1s; }
.is-editable:hover { background: rgba(99,102,241,.04); }
.is-editing {
  background: rgba(99,102,241,.12) !important;
  outline: 1px solid var(--primary);
  padding: 0 !important;
}
.inline-edit-input,
.inline-edit-select,
.inline-edit-multi {
  width: 100%;
  background: var(--bg-input);
  color: var(--text-1);
  border: 1px solid var(--primary);
  border-radius: 4px;
  padding: 6px 8px;
  font-size: var(--fs-body);
}
.inline-edit-checkbox { width: 18px; height: 18px; cursor: pointer; }

/* Priority Dot */
.priority-dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 6px; vertical-align: middle; }
.priority-dot.low { background: var(--success); }
.priority-dot.med { background: var(--warning); }
.priority-dot.high { background: var(--danger); }
.priority-label { font-size: var(--fs-body); color: var(--text-1); vertical-align: middle; }

/* Progress Bar */
.progress-bar {
  position: relative;
  width: 100%;
  min-width: 120px;
  height: 18px;
  background: rgba(255,255,255,.05);
  border-radius: 9px;
  overflow: hidden;
}
.progress-bar-fill {
  height: 100%;
  background: var(--success);
  transition: width .2s;
}
.progress-bar.low .progress-bar-fill  { background: var(--danger); }
.progress-bar.med .progress-bar-fill  { background: var(--warning); }
.progress-bar.high .progress-bar-fill { background: var(--success); }
.progress-bar-label {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--fs-meta);
  font-weight: 500;
  color: var(--text-1);
  text-shadow: 0 1px 2px rgba(0,0,0,.5);
}

/* Col-Group collapsed (header only) */
.col-group-collapsed {
  background: rgba(99,102,241,.18) !important;
  writing-mode: vertical-lr;
  min-height: 80px;
}

/* Chips in multi-select cells */
.chip.chip-sm { font-size: var(--fs-meta); padding: 1px 6px; margin: 1px; }

/* Badge extensions */
.badge-active { background: rgba(99,102,241,.18); color: var(--primary); border: 1px solid rgba(99,102,241,.35); }
.badge-reference { background: rgba(245,158,11,.18); color: var(--warning); border: 1px solid rgba(245,158,11,.35); }

/* Confidence badges (import dialog) */
.confidence-badge {
  display: inline-block;
  padding: 1px 6px;
  font-size: var(--fs-label);
  border-radius: 999px;
  font-weight: 500;
  margin-left: 6px;
}
.confidence-badge.conf-high { background: rgba(16,185,129,.2); color: var(--success); }
.confidence-badge.conf-med  { background: rgba(234,179,8,.2);   color: var(--warning); }
.confidence-badge.conf-low  { background: rgba(239,68,68,.2);   color: var(--danger); }

/* --- Pivot View --- */
.pivot-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  padding: 8px 0;
}
.pivot-tile {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px;
  min-height: 260px;
}
.pivot-tile-wide { grid-column: 1 / -1; }
.pivot-title { margin: 0 0 12px 0; font-size: var(--fs-body); color: var(--text-1); font-weight: 600; }
.pivot-empty { color: var(--text-3); text-align: center; padding: 40px; font-style: italic; }
.pivot-donut-pair { display: flex; gap: 24px; flex-wrap: wrap; }
.pivot-donut { display: flex; align-items: center; gap: 12px; }
.pivot-legend { display: flex; flex-direction: column; gap: 6px; font-size: var(--fs-ui); }
.pivot-legend-item { display: flex; align-items: center; gap: 8px; color: var(--text-2); }
.pivot-swatch { display: inline-block; width: 12px; height: 12px; border-radius: 3px; }
.pivot-arc { cursor: pointer; transition: stroke-width .15s; }
.pivot-arc:hover { stroke-width: 26 !important; }
.pivot-bar { cursor: pointer; transition: opacity .15s; }
.pivot-bar:hover { opacity: .8; }
.pivot-controls {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 12px;
  font-size: var(--fs-ui);
  color: var(--text-2);
}
.pivot-controls select {
  background: var(--bg-input);
  color: var(--text-1);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 4px 8px;
  margin-left: 6px;
}
table.pivot-table { width: 100%; border-collapse: collapse; font-size: var(--fs-body); }
table.pivot-table th, table.pivot-table td {
  padding: 6px 10px;
  border-bottom: 1px solid rgba(255,255,255,.05);
  text-align: right;
}
table.pivot-table th:first-child, table.pivot-table td:first-child { text-align: left; }
table.pivot-table thead th { background: rgba(99,102,241,.1); color: var(--text-1); font-weight: 600; }
table.pivot-table .pivot-row-total, table.pivot-table tfoot td { background: rgba(99,102,241,.05); }

/* --- Query Builder Popover --- */
.qb-popover {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 50;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  padding: 16px;
  margin-top: 6px;
  max-width: 900px;
}
.qb-header {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 12px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--border);
}
.qb-op-toggle { display: flex; gap: 16px; font-size: var(--fs-body); color: var(--text-2); }
.qb-op-toggle label { cursor: pointer; }
.qb-children { display: flex; flex-direction: column; gap: 8px; margin-bottom: 12px; }
.qb-cond-row {
  display: flex;
  gap: 8px;
  align-items: center;
  padding: 8px;
  background: rgba(255,255,255,.02);
  border-radius: 6px;
}
.qb-cond-row select,
.qb-cond-row input {
  background: var(--bg-input);
  color: var(--text-1);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 6px 10px;
  font-size: var(--fs-body);
}
.qb-cond-row .qb-field    { flex: 0 0 180px; }
.qb-cond-row .qb-operator { flex: 0 0 160px; }
.qb-cond-row .qb-value, .qb-cond-row .qb-value2 { flex: 1; }
.qb-remove {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--danger);
  border-radius: 6px;
  padding: 6px 10px;
  cursor: pointer;
  font-weight: 600;
}
.qb-remove:hover { background: rgba(239,68,68,.1); }
.qb-no-value { flex: 1; color: var(--text-3); font-style: italic; padding: 6px 10px; }
.qb-actions { display: flex; gap: 8px; align-items: center; padding-top: 12px; border-top: 1px solid var(--border); }

/* --- Import Dialog --- */
.customer-import-overlay .modal { max-width: 900px; }
.customer-import-dropzone {
  border: 2px dashed var(--border);
  border-radius: var(--radius-lg);
  padding: 40px;
  text-align: center;
  cursor: pointer;
  transition: border-color .2s, background .2s;
  color: var(--text-2);
}
.customer-import-dropzone:hover,
.customer-import-dropzone.dz-hover {
  border-color: var(--primary);
  background: rgba(99,102,241,.05);
}
.dropzone-icon { font-size: var(--fs-icon); margin-bottom: 8px; }
.dropzone-hint { color: var(--text-3); font-size: var(--fs-ui); margin-top: 8px; }
.customer-import-status {
  margin-top: 16px;
  padding: 10px 16px;
  border-radius: 8px;
  font-size: var(--fs-body);
}
.customer-import-status.status-info    { background: rgba(6,182,212,.12);  color: var(--info); }
.customer-import-status.status-success { background: rgba(16,185,129,.12); color: var(--success); }
.customer-import-status.status-warning { background: rgba(234,179,8,.12);  color: var(--warning); }
.customer-import-status.status-error   { background: rgba(239,68,68,.12);  color: var(--danger); }
.customer-import-preview { margin-top: 16px; }
.import-mapping-table, .import-preview-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fs-ui);
  margin-bottom: 12px;
}
.import-mapping-table th, .import-mapping-table td,
.import-preview-table th, .import-preview-table td {
  padding: 6px 10px;
  border-bottom: 1px solid rgba(255,255,255,.04);
  text-align: left;
}
.import-mapping-table select {
  background: var(--bg-input);
  color: var(--text-1);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 4px 8px;
  font-size: var(--fs-ui);
}
.map-col-head { font-weight: 600; }
.map-col-sample { color: var(--text-3); font-size: var(--fs-meta); }
.import-preview-scroll { max-height: 220px; overflow: auto; border: 1px solid var(--border); border-radius: 6px; }
.import-preview-table thead th { position: sticky; top: 0; background: rgba(99,102,241,.1); }
.import-diff-summary { padding: 10px; background: rgba(255,255,255,.03); border-radius: 6px; font-size: var(--fs-body); color: var(--text-2); }
.import-missing { padding: 8px 12px; background: rgba(239,68,68,.08); color: var(--warning); font-size: var(--fs-ui); margin-bottom: 12px; border-radius: 6px; }
.confidence-cell { text-align: center; }

/* Import-Dialog-Modal — scope-spezifisch, damit die globale .modal-overlay-Regel
   (display: none / .open → display: flex) NICHT ueberschrieben wird.
   Der Import-Dialog wird immer mit open-Klasse angezeigt (kein Toggle).
   Hintergrund + Sizing werden hier nur fuer diesen einen Overlay gesetzt. */
.customer-import-overlay {
  display: flex;
  position: fixed; inset: 0;
  align-items: center; justify-content: center;
  background: rgba(0,0,0,.6);
  z-index: 1000;
}
.customer-import-overlay .modal.modal-lg {
  width: 92%; max-width: 960px; max-height: 90vh; overflow: auto;
  background: var(--bg-card); border-radius: var(--radius-lg);
  padding: 0; border: 1px solid var(--border);
}
.customer-import-overlay .modal-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 20px; border-bottom: 1px solid var(--border);
}
.customer-import-overlay .modal-header h2 { margin: 0; font-size: var(--fs-title); color: var(--text-1); }
.customer-import-overlay .modal-close {
  background: transparent; border: none; color: var(--text-2);
  font-size: var(--fs-display); cursor: pointer; line-height: 1;
}
.customer-import-overlay .modal-close:hover { color: var(--danger); }
.customer-import-overlay .modal-body { padding: 20px; }
.customer-import-overlay .modal-footer {
  display: flex; gap: 8px; justify-content: flex-end;
  padding: 12px 20px; border-top: 1px solid var(--border);
}

/* Responsive: Pivot single-column on narrow screens */
@media (max-width: 900px) {
  .pivot-grid { grid-template-columns: 1fr; }
}

/* ═══════════════════════════════════════════════════════════
   HF3.07a — MA-Import-Dialog (CSV/PPTX)
   Struktur angelehnt an .customer-import-overlay (HF3.03b).
   ═══════════════════════════════════════════════════════════ */
.employee-import-overlay {
  display: flex;
  position: fixed; inset: 0;
  align-items: center; justify-content: center;
  background: rgba(0,0,0,.6);
  z-index: 1000;
}
.employee-import-overlay .modal.modal-lg {
  width: 92%; max-width: 1040px; max-height: 90vh; overflow: auto;
  background: var(--bg-card); border-radius: var(--radius-lg);
  padding: 0; border: 1px solid var(--border);
}
.employee-import-overlay .modal-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 20px; border-bottom: 1px solid var(--border);
}
.employee-import-overlay .modal-header h2 { margin: 0; font-size: var(--fs-title); color: var(--text-1); }
.employee-import-overlay .modal-close {
  background: transparent; border: none; color: var(--text-2);
  font-size: var(--fs-display); cursor: pointer; line-height: 1;
}
.employee-import-overlay .modal-close:hover { color: var(--danger); }
.employee-import-overlay .modal-body { padding: 20px; }
.employee-import-overlay .modal-footer {
  display: flex; gap: 8px; justify-content: flex-end;
  padding: 12px 20px; border-top: 1px solid var(--border);
}

/* PR1.96 (#243) — Erklär-Block über der Dropzone */
.import-intro {
  color: var(--text-2);
  font-size: var(--fs-ui);
  margin: 0 0 16px;
  padding: 10px 12px;
  background: rgba(0,0,0,.12);
  border-radius: 6px;
  border-left: 3px solid var(--primary);
}
.import-intro strong { color: var(--text-1); }
.import-intro ul { margin: 6px 0 0; padding-left: 18px; }
.import-intro li { margin-bottom: 4px; }
.import-intro li:last-child { margin-bottom: 0; }

.employee-import-dropzone {
  border: 2px dashed var(--border);
  border-radius: var(--radius-lg);
  padding: 36px 24px;
  text-align: center;
  cursor: pointer;
  transition: border-color .2s, background .2s;
  color: var(--text-2);
}
.employee-import-dropzone:hover,
.employee-import-dropzone.dz-hover {
  border-color: var(--primary);
  background: rgba(99,102,241,.05);
}
.employee-import-dropzone code {
  background: rgba(255,255,255,.05);
  padding: 1px 4px;
  border-radius: 4px;
  font-size: var(--fs-body);
}

.employee-import-status {
  margin-top: 14px;
  padding: 10px 14px;
  border-radius: 8px;
  font-size: var(--fs-body);
  min-height: 0;
}
.employee-import-status:empty { display: none; }
.employee-import-status.status-info    { background: rgba(6,182,212,.12);  color: var(--info); }
.employee-import-status.status-success { background: rgba(16,185,129,.12); color: var(--success); }
.employee-import-status.status-warning { background: rgba(234,179,8,.12);  color: var(--warning); }
.employee-import-status.status-error   { background: rgba(239,68,68,.12);  color: var(--danger); }

.employee-import-files { margin-top: 14px; }
.import-file-list {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-direction: column; gap: 4px;
}
.import-file-item {
  display: flex; align-items: center; gap: 10px;
  padding: 6px 10px; border-radius: 6px;
  background: rgba(255,255,255,.03);
  font-size: var(--fs-body);
}
.import-file-item.ready   { border-left: 3px solid var(--success); }
.import-file-item.error   { border-left: 3px solid var(--danger); }
.import-file-item.deferred{ border-left: 3px solid var(--info); }
.import-file-item.queued  { border-left: 3px solid var(--border); }
.import-file-icon { width: 18px; text-align: center; }
.import-file-name { flex: 1; color: var(--text-1); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.import-file-size { font-size: var(--fs-meta); min-width: 60px; text-align: right; }
.import-file-error { color: var(--danger); font-size: var(--fs-meta); margin-left: 8px; }
.import-file-remove {
  background: transparent; border: none; color: var(--text-3);
  cursor: pointer; padding: 2px 6px; border-radius: 4px; font-size: var(--fs-body);
}
.import-file-remove:hover { background: rgba(239,68,68,.12); color: var(--danger); }

.import-progress {
  margin: 6px 0 8px;
  padding: 6px 10px;
  background: rgba(6,182,212,.08);
  color: var(--info);
  border-radius: 6px;
  font-size: var(--fs-ui);
}

.employee-import-preview { margin-top: 16px; }
.import-empty {
  padding: 24px; text-align: center; color: var(--text-3); font-size: var(--fs-body);
  border: 1px dashed var(--border); border-radius: 8px;
}

.import-review-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fs-body);
}
.import-review-table thead th {
  position: sticky; top: 0;
  background: rgba(99,102,241,.12);
  color: var(--text-1);
  text-align: left;
  padding: 8px 10px;
  border-bottom: 1px solid var(--border);
  font-weight: 600;
}
.import-review-table tbody td {
  padding: 8px 10px;
  border-bottom: 1px solid rgba(255,255,255,.04);
  vertical-align: middle;
}
.import-review-table tbody tr:hover { background: rgba(255,255,255,.03); }
.import-review-table .muted { color: var(--text-3); font-size: var(--fs-meta); }
.import-review-table tr.row-deferred td { opacity: .55; }
.import-review-table tr.row-error td { background: rgba(239,68,68,.05); }
.import-review-table tr.row-duplicate td { background: rgba(234,179,8,.05); }
.import-review-table .form-control-sm {
  background: var(--bg-input);
  color: var(--text-1);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 3px 6px;
  font-size: var(--fs-ui);
  min-width: 120px;
}
.btn-xs {
  padding: 2px 8px;
  font-size: var(--fs-meta);
  border-radius: 4px;
}

/* ═══════════════════════════════════════════════════════════
   HF3.07b — KI-Konfidenz, Skill-Rating, Cost-Footer, AI-CSV-Toggle
   ═══════════════════════════════════════════════════════════ */
.employee-import-options {
  margin-top: 10px; display: flex; gap: 16px; align-items: center; flex-wrap: wrap;
}
.employee-import-toggle {
  display: inline-flex; gap: 6px; align-items: center;
  font-size: var(--fs-ui); color: var(--text-2); cursor: pointer;
}
.employee-import-toggle input { margin: 0; }

.badge.badge-conf {
  font-size: var(--fs-meta); padding: 2px 7px; border-radius: 6px; margin-left: 6px;
  border: 1px solid transparent;
}
.badge-conf-high {
  background: rgba(16,185,129,.18); color: var(--success); border-color: rgba(16,185,129,.35);
}
.badge-conf-low {
  background: rgba(245,158,11,.18); color: var(--warning); border-color: rgba(245,158,11,.40);
}
.badge-conf-mini {
  display: inline-block; min-width: 14px; padding: 0 4px;
  font-size: var(--fs-label); line-height: 14px; border-radius: 7px; margin-left: 4px;
  text-align: center; font-weight: 500;
}
.badge-conf-mini.badge-conf-high { background: rgba(16,185,129,.28); color: var(--success); }
.badge-conf-mini.badge-conf-low  { background: rgba(245,158,11,.28); color: var(--warning); }

/* PR1.20 MR-8 — Honesty-Contract-Aggregat-Banner über der Import-Review-Tabelle.
   Macht confidence + missing[] prominent VOR dem Commit sichtbar (nicht nur Tooltip). */
.import-honesty-banner {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  padding: 7px 12px; margin: 0 0 10px; border-radius: 6px;
  font-size: var(--fs-ui); color: var(--text-2);
  background: rgba(255,255,255,.03); border: 1px solid transparent;
}
.import-honesty-banner.is-ok   { border-left: 3px solid var(--success); border-color: rgba(16,185,129,.30); }
.import-honesty-banner.is-warn { border-left: 3px solid var(--warning); border-color: rgba(245,158,11,.35); }
.import-honesty-banner strong { color: var(--text-1); }

.import-review-table .badge.skill-rating {
  font-size: var(--fs-meta); padding: 1px 6px; margin: 1px 2px;
  background: rgba(99,102,241,.12); color: var(--text-1); border: 1px solid rgba(99,102,241,.20);
  border-radius: 6px; display: inline-block;
}
.import-review-table .badge.skill-rating strong { color: var(--primary); margin-left: 3px; font-weight: 600; }

.employee-import-cost { margin-top: 8px; }
.import-cost-footer {
  display: flex; gap: 14px; justify-content: flex-end; align-items: center;
  font-size: var(--fs-ui); color: var(--text-2);
  padding: 8px 12px; background: rgba(99,102,241,.06); border-radius: 8px;
  border: 1px solid rgba(99,102,241,.18);
}
.import-cost-footer .cost-eur { color: var(--text-1); font-weight: 600; }

/* ═══════════════════════════════════════════════════════════
   HF3.06 — Opportunity Detail View + Extended Modal Fields
   ═══════════════════════════════════════════════════════════ */

#view-opportunity-detail { padding: 0; }

.opp-detail-empty { padding: 40px; }

.opp-hero {
  display: flex; align-items: center; gap: 16px;
  padding: 20px 24px; border-bottom: 1px solid var(--border);
  background: linear-gradient(180deg, var(--bg-card) 0%, var(--bg-base) 100%);
}
.opp-hero-back { cursor: pointer; }
.opp-hero-icon { font-size: var(--fs-display); }
/* PR1.342 #556 — der Titel behaelt eine Mindestbreite; reicht der Platz nicht, brechen die
   Knoepfe um statt den Titel auf drei Zeilen zu quetschen (oder rechts aus dem Bild zu laufen). */
.opp-hero-title { flex: 1 1 260px; min-width: 200px; }
/* PR1.473 (#726) — Hyperscaler-Logo mittig: mit Logo teilt sich der Titel den freien Raum
   nicht mehr, das Logo steht zentriert zwischen Titel und Schildern. */
.opp-hero-hs { flex: 1 1 auto; min-width: 0; display: flex; justify-content: center; align-items: center; }
.opp-hero:has(.opp-hero-hs) .opp-hero-title { flex: 0 1 auto; }
.opp-hero-title h1 {
  font-size: var(--fs-title); margin: 0 0 4px; font-weight: 600;
  color: var(--text-1); overflow: hidden; text-overflow: ellipsis;
}
.opp-hero-id {
  font-size: var(--fs-body); color: var(--text-3); font-weight: 400; margin-left: 8px;
}
.opp-hero-meta { display: flex; gap: 8px; align-items: center; font-size: var(--fs-ui); color: var(--text-2); flex-wrap: wrap; }
.opp-hero-sep { color: var(--text-3); opacity: .5; }
.opp-hero-actions {
  display: flex; gap: 8px; align-items: center;
  flex: 0 1 auto; min-width: 0; flex-wrap: wrap; justify-content: flex-end;
}

/* PR1.510 (#777) — Kopfleiste Opp + Projekt (components/detail-head-actions.js): EINE Reihe,
   hoechstens vier Elemente — Hauptaktion · naechster Schritt · Symbolgruppe · „Abschließen ▾".
   Keine Animation: die Seite wird taeglich mehrfach geoeffnet (Konvention 22). */
/* Eine Reihe, solange Platz ist; in schmalen Fenstern rechtsbuendig umbrechen statt
   ueber den Rand zu laufen. */
.opp-hero-actions { margin-left: auto; }
.head-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: 8px; }
.head-actions .head-text-btn { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.head-icon-group { display: inline-flex; }
.head-icon-group .head-icon-btn { border-radius: 0; margin-left: -1px; padding-left: 9px; padding-right: 9px; }
.head-icon-group .head-icon-btn:first-child { margin-left: 0; border-radius: var(--radius-sm) 0 0 var(--radius-sm); }
.head-icon-group .head-icon-btn:last-child { border-radius: 0 var(--radius-sm) var(--radius-sm) 0; }
.head-icon-group .head-icon-btn:focus-visible { position: relative; z-index: 2; outline: 2px solid var(--primary); outline-offset: 1px; }
/* Hinweis = Name + ein Satz, bei Hover UND Fokus (Muster .gap-count[data-tip]). */
.head-icon-btn { position: relative; }
.head-icon-btn[data-tip]:hover::after,
.head-icon-btn[data-tip]:focus-visible::after {
  content: attr(data-tip); position: absolute; right: 0; top: calc(100% + 6px); z-index: 45;
  width: max-content; max-width: 260px; white-space: pre-line; text-align: left;
  padding: 6px 10px; border-radius: 6px; font-size: var(--fs-meta); font-weight: 500; line-height: 1.4;
  background: var(--bg-card); color: var(--text-1); border: 1px solid var(--border);
  box-shadow: 0 6px 16px -8px rgba(0,0,0,.4); pointer-events: none;
}
.head-icon-btn[aria-busy="true"] { cursor: progress; opacity: .6; }
/* Gesperrt sieht gesperrt aus (Recht fehlt, schreibgeschuetzt) — bewusst nur in der Kopfleiste,
   nicht global auf .btn:disabled (siehe Hinweise weiter unten in dieser Datei). */
.head-actions .btn:disabled { opacity: .5; cursor: not-allowed; box-shadow: none; }
/* Menue „Abschließen" — Markup aus moreMenuHtml, Verhalten aus bindMoreMenus. */
.opp-hero .more-menu { position: relative; }
.opp-hero .more-menu-btn { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.opp-hero .more-menu-list {
  position: absolute; right: 0; top: calc(100% + 4px); z-index: 40;
  min-width: 250px; max-width: 300px;
  display: flex; flex-direction: column; padding: 6px;
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: var(--radius); box-shadow: var(--shadow);
}
.opp-hero .more-menu-list[hidden] { display: none; }
.opp-hero .more-menu-item {
  font: inherit; font-size: var(--fs-body); text-align: left;
  display: flex; align-items: flex-start; gap: 9px;
  padding: 8px 10px; border: 0; border-radius: var(--radius-sm);
  background: transparent; color: var(--text-1); cursor: pointer;
}
.opp-hero .more-menu-item .ic { flex: none; margin-top: 2px; }
.opp-hero .more-menu-item:hover:not(:disabled),
.opp-hero .more-menu-item:focus-visible { background: var(--bg-hover); }
.opp-hero .more-menu-item:focus-visible { outline: 2px solid var(--primary); outline-offset: -2px; }
.opp-hero .more-menu-item:disabled { cursor: not-allowed; opacity: .6; }
.opp-hero .more-menu-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.opp-hero .more-menu-label { font-weight: 600; }
.opp-hero .more-menu-hint { font-size: var(--fs-meta); color: var(--text-2); line-height: 1.35; }
.opp-hero .more-menu-item.is-danger { color: var(--danger); }
/* Endgueltiges sitzt abgesetzt am Ende der Liste. */
.opp-hero .more-menu-item.is-danger:not(:first-child) { margin-top: 5px; box-shadow: 0 -3px 0 -2px var(--border); }

.opp-detail-3col {
  display: grid;
  /* PR1.127 #278 — rechte Spalte breiter (Quick-Staffing/Kandidaten brauchen mehr Platz). */
  grid-template-columns: 260px minmax(380px, 1fr) 340px;
  gap: 16px; padding: 20px 24px;
  align-items: start;
}

.opp-col { min-width: 0; }
.opp-col-left, .opp-col-middle {
  background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 16px;
}
.opp-col-middle { padding: 20px; }
.opp-col-right { display: flex; flex-direction: column; gap: 12px; }
.opp-col-section + .opp-col-section { margin-top: 16px; }

.opp-sb-row {
  display: flex; justify-content: space-between; gap: 12px;
  padding: 4px 0; font-size: var(--fs-ui);
}
.opp-sb-label { color: var(--text-2); }
.opp-sb-value { color: var(--text-1); font-weight: 500; text-align: right; word-break: break-word; }
.opp-sb-value a { color: var(--accent); text-decoration: none; }
.opp-sb-value a:hover { text-decoration: underline; }

/* PR1.366 #580 — „Anhänge · N“ unter Kunde & Ansprechpartner (beide Shells; das Redesign
   nutzt dieselben Token-Namen im .crm-Scope). Der ganze Block ist EIN Knopf, der das
   Anhänge-Fenster öffnet. Täglich genutzt → keine Bewegung, nur Hover-Fläche + Fokusring. */
.proj-att-count { font-variant-numeric: tabular-nums; }
.proj-att-row {
  display: flex; flex-direction: column; align-items: stretch; gap: 2px;
  width: 100%; margin: 4px 0 0; padding: 6px 8px; text-align: left;
  font: inherit; color: var(--text-1); background: transparent;
  border: 1px solid var(--border); border-radius: 6px; cursor: pointer;
}
.proj-att-row:hover { background: var(--bg-hover); }
.proj-att-row:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.proj-att-names { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.proj-att-name {
  display: flex; align-items: center; gap: 8px; min-width: 0;
  padding: 3px 0; font-size: var(--fs-ui); border-bottom: 1px solid var(--border);
}
.proj-att-name:last-child { border-bottom: none; }
.proj-att-icon { flex-shrink: 0; }
.proj-att-file { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.proj-att-msg { font-size: var(--fs-ui); color: var(--text-2); padding: 3px 0; }
.proj-att-msg.is-error { color: var(--danger); }
.proj-att-foot { display: flex; align-items: center; gap: 8px; font-size: var(--fs-meta); color: var(--text-2); }
.proj-att-hint { margin-left: auto; white-space: nowrap; }
.proj-att-row:hover .proj-att-hint { color: var(--text-1); }
.proj-att-dialog-body { max-height: 70vh; overflow-y: auto; }

.opp-flag-row {
  display: flex; justify-content: space-between;
  padding: 5px 0; font-size: var(--fs-ui);
  border-bottom: 1px dashed var(--border);
}
.opp-flag-row:last-child { border-bottom: none; }
.flag-yes { color: var(--success); }
.flag-no { color: var(--danger); opacity: .6; }
.flag-unknown { color: var(--text-muted, var(--text-2)); font-style: italic; }

.opp-skills-box, .opp-languages-box, .opp-portfolio-box {
  display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 8px;
}
.skill-badge {
  display: inline-flex; align-items: center; gap: 6px;
  background: rgba(245, 158, 11, 0.12); color: var(--warning);
  border: 1px solid rgba(245, 158, 11, 0.25);
  padding: 4px 10px; border-radius: var(--radius-sm);
  font-size: var(--fs-meta); font-weight: 500;
}
.skill-badge { list-style: none; }
/* PR1.516 — Gesuchte Skills gruppiert nach Stufe (Wort statt Sterne), beide Shells teilen das Markup. */
.skill-groups { width: 100%; margin: 0; display: grid; gap: 10px; }
/* Wort + Erklaerung ueber den Chips: haelt auch in der schmalen Wertespalte der Matching-Karte. */
.skill-group { display: grid; gap: 4px; }
.skill-group-label { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; margin: 0; }
.skill-group-name { font-size: var(--fs-ui); font-weight: 500; color: var(--text-primary); }
.skill-group-hint { font-size: var(--fs-label); color: var(--text-secondary); }
.skill-group-chips { margin: 0; min-width: 0; }
.skill-group-chips ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px; }
.skill-group-chips li { max-width: 100%; }
.lang-badge {
  background: var(--primary-glow); color: var(--primary);
  padding: 3px 8px; border-radius: var(--radius-sm);
  font-size: var(--fs-label); font-weight: 500;
}
.badge-level {
  background: rgba(99, 102, 241, 0.15); color: var(--primary);
  padding: 2px 8px; border-radius: var(--radius-sm); font-size: var(--fs-label); font-weight: 500;
}

.opp-description-box {
  padding: 10px 12px; background: var(--bg-base);
  border-radius: var(--radius-sm); font-size: var(--fs-body);
  color: var(--text-1); line-height: 1.5; white-space: normal;
}


.opp-field { min-width: 0; }
.opp-field .form-section-label { margin-top: 0; }
.opp-field-value { padding: 2px 0; font-size: var(--fs-body); color: var(--text-1); }
.opp-field-placeholder {
  color: var(--text-3);
  font-style: italic;
  font-size: var(--fs-ui);
}

/* PR1.86 #235 — Footer-Leerzeile: kompakter Einzeiler statt voller leerer Box. */
.opp-footer-row-empty {
  display: flex; align-items: baseline; gap: 10px;
  padding: 6px 2px;
}
.opp-footer-row-empty .form-section-label {
  border-bottom: none; padding: 0; margin: 0;
}

.opp-col-right .card { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 14px; }
.opp-col-right .card-title { font-weight: 600; font-size: var(--fs-body); margin-bottom: 10px; color: var(--text-1); padding-bottom: 6px; border-bottom: 1px solid var(--border); }
.opp-contact-row { display: flex; justify-content: space-between; padding: 4px 0; font-size: var(--fs-ui); gap: 8px; }
.opp-contact-label { color: var(--text-3); flex-shrink: 0; }

/* ═══════════════════════════════════════════════════════════
   PR1.354 #568 — Projekt-Detail im Geruest der Opp-Detailseite.
   Kopf, Spalten und Zeilen kommen aus den .opp-*-Regeln oben; hier steht nur, was die
   Projektseite zusaetzlich braucht. Mobile: @media (max-width:1024px) .opp-detail-3col.
   ═══════════════════════════════════════════════════════════ */
#view-project-detail { padding: 0; }
/* Reservierte Plaetze der Folgetickets (#580 …) belegen keinen Raum, solange sie leer sind. */
#view-project-detail [data-slot]:empty { display: none; }
/* Gleiche Spalten wie .opp-detail-3col, aber mit nachgebenden Raendern: bei 1280 px mit
   Seitenleiste reichen 260+380+340 px nicht, die rechte Spalte liefe sonst aus dem Bild. */
/* Steht VOR dem @media (max-width:1024px)-Block weiter unten, der auf eine Spalte stapelt —
   gleiche Spezifitaet, also entscheidet die Reihenfolge. Nicht hinter den Block verschieben. */
.proj-detail-3col { grid-template-columns: minmax(220px, 260px) minmax(340px, 1fr) minmax(260px, 340px); }
.proj-detail-empty h2 { margin: 0 0 8px; font-size: var(--fs-section); }
.proj-detail-empty p { margin: 0 0 16px; color: var(--text-2); font-size: var(--fs-body); }
.proj-detail-empty-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.proj-status-badge { color: var(--bg-base); font-weight: 600; }
.proj-dash { color: var(--text-3); }
.proj-origin { font-size: var(--fs-meta); color: var(--text-3); font-weight: 400; }
.proj-portfolio-badges { display: inline-flex; flex-wrap: wrap; gap: 4px; justify-content: flex-end; }
.proj-col-left .opp-contact-row .opp-sb-value { text-align: right; }
/* Die Mittelspalte IST die Karte — die Team-Karte darin bringt keine eigene Huelle mit. */
.proj-team-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 8px; }
/* PR1.386 #607 Nachjustierung — „Einsatzplanung öffnen" ragte bei 1280px ~45px aus der Karte
   unter die Nachbarkarte (Titel ist nowrap). Wenig Platz: der Knopf rueckt in die zweite Zeile. */
.proj-team-head { flex-wrap: wrap; row-gap: 6px; }
.proj-team-head > * { min-width: 0; }
.proj-team-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.proj-team-empty { color: var(--text-3); font-size: var(--fs-ui); margin-top: 8px; }
/* PR1.355 #569 — Projektteam-Tabelle in der Mitte: Optik der Team-Tabelle (.team-table).
   Offene Rolle = Badge „offen" + Tönung der Zeile — Text, nie nur Farbe (kein Seitenstreifen). Keine Motion:
   die Tabelle wird mehrmals täglich benutzt, Auf-/Zuklappen geschieht sofort. */
.proj-team-openhint { font-size: var(--fs-meta); font-weight: 500; color: var(--warning); white-space: nowrap; }
.proj-team-table { table-layout: fixed; }
.proj-team-table th, .proj-team-table td { overflow-wrap: break-word; hyphens: auto; }
/* BF-77 #642 — feste Breiten aus dem laengsten Kopf (Grossbuchstaben, nowrap): sonst lagen
   „UMFANG (%)" und „TAGESSATZ" breit uebereinander. Name gibt dafuer Anteil ab (Rolle bleibt lesbar). */
/* PR1.412 #645 — Grundaufteilung fuer breite Bildschirme: Zahlenspalten wachsen anteilig mit
   (Untergrenze = BF-77-Kopfbreite), Name hat eine Obergrenze, Rolle nimmt den Rest. cqi statt %:
   Chrome wertet Prozent in max()/clamp() an Tabellenkoepfen als auto (alle Spalten gleich). Gezogene
   Breiten kommen als --colw-* vom Baustein column-resize.js; der Schmal-Block ueberstimmt sie. */
.proj-team-table .proj-team-c-name { width: var(--colw-name, clamp(10rem, 24cqi, 26rem)); }
.proj-team-table .proj-team-c-pct { width: var(--colw-pct, max(5rem, 8cqi)); }
/* PR1.386 #607 — Tagessatz je Person; geerbter Satz mit gedaempfter Unterzeile „Projektsatz". */
.proj-team-table .proj-team-c-rate { width: var(--colw-rate, max(7rem, 10cqi)); }
.proj-team-rate-src { display: block; margin-top: 2px; font-size: var(--fs-meta); color: var(--text-2); }
.proj-team-table .proj-team-c-period { width: var(--colw-period, max(5.5rem, 11cqi)); }
.proj-team-table .proj-team-c-act { width: 4.75rem; }
/* PR1.412 #645 Nachjustierung — Griff dauerhaft als dezente Linie erkennbar (Live-Abnahme: unsichtbar bis
   zum Hover), Hover/Fokus = Akzent, volle Hoehe. Trefferzone 12px, damit man nicht zielen muss. Keine
   Transition (taeglich genutzt). Auch in der schmalen Karte sichtbar; dort bestimmt Name den Rest. */
.proj-team-table thead th { position: relative; }
.proj-team-table thead th { white-space: nowrap; }
.proj-team-table .col-resize { position: absolute; top: 0; right: -6px; bottom: 0; width: 12px; z-index: 1; cursor: col-resize; touch-action: none; }
.proj-team-table .col-resize::after { content: ""; position: absolute; top: 20%; bottom: 20%; left: 5px; width: 1px; background: var(--text-3); opacity: .6; }
.proj-team-table .col-resize:hover::after, .proj-team-table .col-resize:focus-visible::after { top: 0; bottom: 0; left: 4px; width: 3px; border-radius: 1px; background: var(--primary); opacity: 1; }
.proj-team-table .col-resize:focus-visible { outline: 2px solid var(--primary); outline-offset: -2px; }
body.col-resizing { cursor: col-resize; user-select: none; }
[data-col-widths-reset][hidden] { display: none; }
.proj-team-table .proj-team-act .btn { padding: 2px 6px; }
.proj-team-table .proj-team-panel > td { overflow-wrap: normal; }
/* Die Mittelspalte ist bei 1280px nur ~300px breit — die festen Spalten liessen der Rolle dann
   0px, sie stand Buchstabe fuer Buchstabe untereinander (Live-Befund #569, 08.10.2026).
   Schmal ruecken Rolle UND Zeitraum als zweite Zeile unter den Namen (nur Rolle reichte nicht:
   Einsatz + Zeitraum + Aktionen liessen dem Namen ~50px); breit bleiben es eigene Spalten. */
.proj-team-table-wrap { container-type: inline-size; }
.proj-team-role-sub { display: none; }
/* BF-62 #587 — Rest-Anteil einer besetzten Rolle: Hinweis, kein Befund (keine Warnfarbe).
   Schmal faellt er mit der Rollenspalte weg; dann traegt ihn die Unterzeile (teamSubLine). */
.proj-team-rest { display: block; margin-top: 2px; font-size: var(--fs-meta); color: var(--text-2); }
@container (max-width: 36rem) {
    /* auto statt fixed: die Fusszeile (colspan=6) haelt im festen Layout die ausgeblendeten
       Spalten offen — sie belegten live unsichtbar ~130px (zweiter Live-Befund 08.10.). */
    .proj-team-table { table-layout: auto; }
    .proj-team-table .proj-team-c-role,
    .proj-team-table .proj-team-c-period,
    .proj-team-table .proj-team-period { display: none; }
    .proj-team-table .proj-team-c-name { width: auto; }
    /* BF-77: schmal bestimmt der Inhalt die Breite der Zahlenspalten — wie vor dem Umbau. */
    .proj-team-table .proj-team-c-pct { width: var(--colw-pct, auto); }
    .proj-team-table .proj-team-c-rate { width: var(--colw-rate, auto); }
    /* PR1.412 #645 Nacharbeit — break-word senkt die Mindestbreite einer Tabellenzelle nicht: ein
       langes Wort in der Rollen-Unterzeile (Migrationsverantwortung) hielt die Namensspalte auf ~146px,
       die Tabelle ragte aus der Karte und gezogene Breiten blieben unsichtbar. anywhere senkt sie. */
    .proj-team-table tbody td.proj-team-name { overflow-wrap: anywhere; }
    /* BF-62: keine Silbentrennung in der Unterzeile (sonst: noch of-fen); overflow-wrap faengt Ueberlaenge. */
    .proj-team-role-sub { display: block; margin-top: 2px; font-size: var(--fs-meta); color: var(--text-2); hyphens: manual; }
}
.proj-team-open-cell { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.proj-team-open-cell .proj-team-find { max-width: 100%; white-space: normal; text-align: left; }
.proj-team-table td.num, .proj-team-table th.num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.proj-team-table .proj-team-period { color: var(--text-2); }
.proj-team-table .proj-team-act { text-align: right; white-space: nowrap; }
/* PR1.386 #607 Nachjustierung — die Tagessatz-Spalte liess dem Namen schmal (1280px, Mittelspalte
   ~300px) zu wenig Platz: Tabelle ragte live ~40px aus der Karte. Schmal: engere Zellen,
   Aktionen untereinander. Steht NACH der nowrap-Regel, sonst gewinnt sie. */
@container (max-width: 36rem) {
    /* .team-table tbody td (0,2,1) setzt die Zell-Polsterung — doppelte Klasse schlaegt sie. */
    .team-table.proj-team-table thead th, .team-table.proj-team-table tbody td { padding-left: 6px; padding-right: 6px; }
    .proj-team-table .proj-team-c-act { width: 28px; }
    .proj-team-table .proj-team-act { white-space: normal; }
    .proj-team-table .proj-team-act .btn { display: block; margin: 0 0 4px auto; }
}
/* „Kandidaten finden" bricht zwischen den Woertern, nie mitten im Wort (Kandida-ten). */
.proj-team-table .proj-team-find { hyphens: manual; overflow-wrap: normal; }
.proj-team-link { background: none; border: 0; padding: 0; color: var(--text-1); font: inherit; font-weight: 600; cursor: pointer; text-align: left; }
.proj-team-link:hover { text-decoration: underline; }
/* PR1.475 (#729) — Foto/Initialen vor dem Namen im Projektteam (Schmuck, aria-hidden). */
.proj-team-av { display: inline-flex; vertical-align: middle; margin-right: .5rem; }
.proj-team-pre { display: block; font-size: var(--fs-label); color: var(--warning); white-space: nowrap; }
.proj-team-row-open td { background: color-mix(in srgb, var(--warning) 9%, transparent); }
.proj-team-open-badge { display: inline-block; padding: 1px 8px; border: 1px solid var(--warning); border-radius: 999px; color: var(--warning); font-size: var(--fs-label); font-weight: 500; white-space: nowrap; }
.proj-team-table .proj-team-panel > td,
.proj-team-table .proj-team-subrow > td { padding: 10px; background: var(--bg-card); }
.proj-team-table tfoot td { padding: 8px 10px; border-top: 1px solid var(--border); }
.proj-team-add-cell { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; justify-content: space-between; }
.proj-team-panel-body { display: flex; flex-direction: column; gap: 10px; }
.proj-team-panel-body .proj-roles-matching > :last-child { border-bottom: none !important; }
.proj-team-extras { display: flex; flex-direction: column; gap: 8px; margin-top: 12px; }
.proj-team-more { border: 1px solid var(--border); border-radius: 8px; padding: 8px 10px; }
.proj-team-more > summary { cursor: pointer; font-size: var(--fs-ui); font-weight: 500; color: var(--text-2); }
.proj-team-more[open] > summary { margin-bottom: 8px; }
/* Ist-Werte und Externe bringen eine eigene Kartenhuelle mit (Inline-Stile) — im Aufklapper
   waere das ein Rahmen im Rahmen. Nur diese beiden, die Planwerkzeuge behalten ihre Optik. */
.proj-team-more[data-proj-open-key="actual"] > .proj-team-more-body > div,
.proj-team-more[data-proj-open-key="external"] > .proj-team-more-body > div { margin: 0 !important; border: none !important; padding: 0 !important; background: none !important; }
.proj-team-link:focus-visible,
.proj-team-more > summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
/* PR1.355 #569 — dieselbe Hinzufügen-Zeile an der Opp-Teamliste. */
.opp-team-add-row { margin-top: 10px; }
/* PR1.355 #569 — Rolle + Einsatz % im Hinzufügen-Fenster (beide Shells, beide Ziele). */
.staff-picker-fields { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 10px; }
.staff-picker-field { display: flex; flex-direction: column; gap: 4px; flex: 1 1 12rem; font-size: var(--fs-meta); color: var(--text-2); }
.staff-picker-field-pct { flex: 0 0 7rem; }
/* Rechte Spalte: Karten untereinander, den Abstand gibt die Spalte (gap aus .opp-col-right);
   Qualitaets- und Expansion-Karte tragen dafuer keinen eigenen Aussenabstand mehr. */
/* PR1.363 #577 — Projektqualitaet + Projektinfo: zwei Ampel-Listen im Zeilenmuster der
   Statusmeldung (.psr-*), eine Zeile je Pruefung: Punkt · Bereich · Wert. Farbe nie allein —
   jede Zeile nennt ihren Zustand im Text und im aria-label. Keine Animation: taeglich gelesen. */
.pq-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.pq-row {
  display: grid; grid-template-columns: auto auto minmax(0, 1fr); column-gap: 8px; align-items: baseline;
  width: 100%; margin: 0; padding: 5px 6px; border: 0; border-radius: 6px; background: transparent;
  font: inherit; font-size: var(--fs-body); color: inherit; text-align: left; min-width: 0;
}
button.pq-row, .pq-more > summary { cursor: pointer; }
button.pq-row:hover, .pq-more > summary:hover { background: var(--bg-hover); }
button.pq-row:focus-visible, .pq-more > summary:focus-visible { outline: 2px solid var(--primary); outline-offset: 1px; }
.pq-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--text-3); display: inline-block; align-self: center; }
.pq-row.is-ok .pq-dot { background: var(--success); }
.pq-row.is-warn .pq-dot { background: var(--warning); }
.pq-row.is-bad .pq-dot { background: var(--danger); }
.pq-lbl { font-weight: 600; color: var(--text-1); white-space: nowrap; }
.pq-val { color: var(--text-2); text-align: right; overflow-wrap: anywhere; }
.pq-row.is-bad .pq-val { color: var(--text-1); }
/* Datenpflege: natives <details>; der Pfeil sagt, dass sich die Zeile aufklappen laesst. */
.pq-more > summary { list-style: none; }
.pq-more > summary::-webkit-details-marker { display: none; }
.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); }
.pq-more[open] > summary .pq-val::after { -webkit-mask: var(--ic-mask-caret-up); mask: var(--ic-mask-caret-up); }
.pq-sub { list-style: none; margin: 2px 0 4px 17px; padding: 0 0 0 6px; border-left: 1px solid var(--border); display: flex; flex-direction: column; gap: 2px; }
.pq-skeleton { height: 26px; background: var(--bg-hover); opacity: .5; }
.pq-note { color: var(--text-3); font-size: var(--fs-body); padding: 4px 6px; }
/* Sprungziele der Zeilen (Projektteam, Statusmeldung) — per Skript fokussiert. */
.proj-team-card:focus-visible, .psr-card:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.proj-team-card:focus:not(:focus-visible), .psr-card:focus:not(:focus-visible) { outline: none; }
/* Unter dem Geruest: die breiten Arbeitsflaechen in der Flucht der Spalten. Ihre Karten
   (Rollen, Matching, Ist-PT, Externe) tragen Inline-Aussenabstaende — den Abstand gibt hier
   der gap, daher !important. */
.proj-detail-below { padding: 0 24px 24px; display: flex; flex-direction: column; gap: 14px; }
.proj-detail-below > * { margin: 0 !important; }
.proj-panel { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 16px; }
.proj-panel-title { margin: 0 0 10px; font-size: var(--fs-body); font-weight: 600; color: var(--text-1); }
.proj-team-head .proj-panel-title { margin: 0; white-space: nowrap; }
.proj-prose { white-space: pre-wrap; font-size: var(--fs-body); color: var(--text-2); }

/* ═══════════════════════════════════════════════════════════
   PR1.405 (#635) — Opportunity-Detail im Spaltenbild der Projektseite (Kompassbild 1).
   Links Stammdaten/Kontakte/Anhänge, Mitte Beschreibung/Aufgaben/Anforderungen/Staffing,
   rechts Qualität/Datenpflege. Die Spalten sind hier keine Karte mehr, sie stapeln Karten
   (.opp-card, Muster .proj-panel). Breiten wie .proj-detail-3col; steht VOR dem
   @media (max-width:1024px)-Block, der auf eine Spalte stapelt (rechts rutscht unter Mitte).
   Nur Tokens — hell und dunkel tragen sich selbst. Keine Bewegung: täglich gelesen.
   ═══════════════════════════════════════════════════════════ */
.opp-detail-cols { grid-template-columns: minmax(220px, 300px) minmax(340px, 1fr) minmax(260px, 340px); }
.opp-detail-cols > .opp-col-left,
.opp-detail-cols > .opp-col-middle {
  background: none; border: 0; padding: 0;
}
.opp-detail-cols > .opp-col { display: flex; flex-direction: column; gap: 12px; }
/* PR1.405 (#635) — Laptop-Breite (AC „rechte Spalte rutscht unter die Mitte"): bis 1280 px
   zwei Spalten. Links ueberspannt beide Reihen, rechts steht unter der Mitte; die DOM-Reihenfolge
   (links → Mitte → rechts) bleibt Tab-Reihenfolge. Nur die Opp-Seite (#view-opportunity-detail),
   die Projektseite (.proj-detail-3col) bleibt dreispaltig. Unter 1024 px greift wieder der
   Einspalter — wegen der hoeheren Spezifitaet hier ausdruecklich zurueckgesetzt. */
@media (max-width: 1280px) {
  #view-opportunity-detail .opp-detail-cols { grid-template-columns: minmax(220px, 280px) minmax(0, 1fr); }
  #view-opportunity-detail .opp-detail-cols > .opp-col-left { grid-column: 1; grid-row: 1 / span 2; }
  #view-opportunity-detail .opp-detail-cols > .opp-col-middle { grid-column: 2; grid-row: 1; }
  #view-opportunity-detail .opp-detail-cols > .opp-col-right { grid-column: 2; grid-row: 2; }
}
@media (max-width: 1024px) {
  #view-opportunity-detail .opp-detail-cols { grid-template-columns: minmax(0, 1fr); }
  #view-opportunity-detail .opp-detail-cols > .opp-col { grid-column: auto; grid-row: auto; }
}
.opp-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-lg); min-width: 0; }
.opp-card-head {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 12px 16px; border-bottom: 1px solid var(--border);
}
.opp-card-title { margin: 0; font-size: var(--fs-body); font-weight: 600; color: var(--text-1); }
.opp-card-body { padding: 12px 16px; }
.opp-card-link {
  background: none; border: 0; padding: 0; font: inherit; font-size: var(--fs-ui); cursor: pointer;
  color: var(--primary-text); text-decoration: underline; text-underline-offset: 2px;
}
.opp-card-link:focus-visible { outline: 2px solid var(--primary-text); outline-offset: 2px; }
.opp-subhead { margin: 12px 0 4px; font-size: var(--fs-label); font-weight: 500; color: var(--text-3); }
.opp-card-body > .opp-subhead:first-child { margin-top: 0; }

/* PR1.490 #755 — Karte „Notizen" (Detailseite, beide Shells; Redesign-Feinschliff in
   style-redesign.css). Taeglich genutzt: keine Animation, nur sofortiges Einfuegen. */
.opp-notes-count {
  margin-left: auto; font-size: var(--fs-meta); font-variant-numeric: tabular-nums; color: var(--text-3);
}
.opp-notes-form { display: flex; flex-direction: column; gap: 6px; margin-bottom: 12px; }
.opp-notes-input {
  width: 100%; box-sizing: border-box; min-height: 5.25rem; resize: vertical;
  padding: 8px 10px; font: inherit; font-size: var(--fs-body); line-height: 1.45;
  color: var(--text-1); background: var(--bg-input);
  border: 1px solid var(--border); border-radius: var(--radius);
}
.opp-notes-input:focus-visible { outline: 2px solid var(--primary-text); outline-offset: 1px; border-color: transparent; }
.opp-notes-actions { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.opp-notes-hint { font-size: var(--fs-label); color: var(--text-3); }
.opp-notes-msg { margin: 0; font-size: var(--fs-meta); color: var(--text-2); }
.opp-notes-msg.is-error { color: var(--danger); }
.opp-notes-empty { margin: 0; font-size: var(--fs-ui); color: var(--text-2); }
.opp-notes-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.opp-note { padding: 10px 0; border-top: 1px solid var(--border); }
.opp-note:first-child { border-top: 0; padding-top: 0; }
.opp-note-meta {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px;
  font-size: var(--fs-label); color: var(--text-3); font-variant-numeric: tabular-nums;
}
.opp-note-author { font-weight: 600; color: var(--text-2); }
.opp-note-edited { font-style: italic; }
.opp-note-text { margin: 4px 0 0; font-size: var(--fs-body); line-height: 1.5; color: var(--text-1); white-space: pre-wrap; overflow-wrap: anywhere; }
.opp-note.is-editing .opp-notes-input { margin-top: 6px; }
.opp-note-actions { display: flex; gap: 12px; margin-top: 6px; }
.opp-note-link {
  background: none; border: 0; padding: 0; font: inherit; font-size: var(--fs-meta); cursor: pointer;
  color: var(--primary-text); text-decoration: underline; text-underline-offset: 2px;
}
.opp-note-link:focus-visible { outline: 2px solid var(--primary-text); outline-offset: 2px; }
.opp-notes-more { margin-top: 10px; }

/* Kopf: Kundenlogo, Titel mit Unterzeile, Status + Besetzungsstufe, Knöpfe. */
.opp-hero-logo { border-radius: var(--radius); }
.opp-hero-badges { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.opp-staffing-level {
  display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 999px;
  font-size: var(--fs-meta); font-weight: 500; white-space: nowrap;
  background: var(--bg-card2); color: var(--text-1); border: 1px solid var(--border);
}
.opp-staffing-level-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--text-3); }
.opp-staffing-level.is-gestafft .opp-staffing-level-dot { background: var(--success); }
.opp-staffing-level.is-teilweise .opp-staffing-level-dot { background: var(--warning); }
.opp-staffing-level.is-nicht .opp-staffing-level-dot { background: var(--danger); }

/* Links: Stammdaten (Zeilen wie die Projektseite), Ø-Tagessatz mit Unterzeile. */
.opp-stamm-more, .opp-stamm-flags { padding-top: 4px; border-top: 1px solid var(--border); margin-top: 10px; }
.opp-rate { display: block; }
.opp-rate-sub { display: block; font-size: var(--fs-label); font-weight: 400; color: var(--text-3); }
.opp-contact-person { display: flex; align-items: center; gap: 10px; padding: 6px 0; min-width: 0; }
.opp-contact-avatar {
  flex: none; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center;
  font-size: var(--fs-label); font-weight: 500; background: var(--bg-card2); color: var(--text-2);
}
.opp-contact-text { min-width: 0; }
.opp-contact-name { font-size: var(--fs-body); font-weight: 500; color: var(--text-1); overflow-wrap: anywhere; }
.opp-contact-fn { font-size: var(--fs-meta); color: var(--text-3); }
.opp-contact-empty { margin: 0; font-size: var(--fs-ui); color: var(--text-3); }
/* Label-Spalte der Karten-Zeilen bricht nicht um („Ø-Tagessatz" blieb sonst zweizeilig). */
.opp-card .opp-sb-label { white-space: nowrap; flex: none; }

/* Mitte: Beschreibung, Aufgaben, Anforderungen als Label-links-Wert-rechts-Zeilen. */
.opp-card .opp-description-box { padding: 0; background: none; }
.opp-additional-info { margin-top: 12px; font-size: var(--fs-body); color: var(--text-2); }
.opp-tasks { font-size: var(--fs-body); color: var(--text-1); line-height: 1.5; }
.opp-req-row { display: grid; grid-template-columns: minmax(110px, 160px) minmax(0, 1fr); gap: 4px 12px; padding: 6px 0; align-items: baseline; }
.opp-req-label { font-size: var(--fs-ui); color: var(--text-2); }
.opp-req-value { min-width: 0; font-size: var(--fs-body); color: var(--text-1); }
.opp-req-value.opp-skills-box, .opp-req-value.opp-languages-box, .opp-req-value.opp-portfolio-box { margin-bottom: 0; }

/* Bereich unter dem Staffing-Block: Vergleichen / Andere Person suchen, je eine Rolle. */
.opp-staffing-tool { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 12px 14px; min-width: 0; }
.opp-staffing-tool:focus-visible { outline: 2px solid var(--primary-text); outline-offset: 2px; }
.opp-staffing-tool:focus:not(:focus-visible) { outline: none; }
.opp-staffing-tool-head { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 12px; margin-bottom: 10px; }
.opp-staffing-tool-title { margin: 0; font-size: var(--fs-body); font-weight: 600; color: var(--text-1); }
.opp-staffing-tool-role { display: inline-flex; gap: 8px; align-items: baseline; font-size: var(--fs-ui); }
.opp-staffing-tool-spacer { flex: 1; }
.opp-staffing-tool .opp-cand-shoring-toggle { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-ui); color: var(--text-2); cursor: pointer; }
.opp-staffing-tool .opp-cand-shoring-toggle input { accent-color: var(--primary); }
.opp-staffing-tool .opp-cand-panels, .opp-staffing-tool .opp-compare-section, .opp-staffing-tool .opp-alt-section { margin: 0; padding: 0; border: 0; background: none; }
/* Sprungziel aus der Qualitätskarte (per Skript fokussiert). */
.opp-staffing-mount .opp-staffing-role:focus-visible { outline: 2px solid var(--primary-text); outline-offset: -2px; }
.opp-staffing-mount .opp-staffing-role:focus:not(:focus-visible) { outline: none; }
/* Einsatzplanung zugeklappt unter dem Block: die Team-Sektion bringt keinen Seitenrand mit. */
.opp-plan-more { background: var(--bg-card); }
.opp-plan-more .opp-team-section { padding: 0; }

/* Rechts: Qualität (große Zahl, Zeilen mit Zeichen) und Datenpflege. */
.opp-quality-score { display: flex; align-items: baseline; gap: 8px; margin-bottom: 8px; }
.opp-quality-score b { font-size: var(--fs-display); line-height: 1; color: var(--text-1); font-variant-numeric: tabular-nums; }
.opp-quality-score span { font-size: var(--fs-ui); color: var(--text-2); }
.opp-quality-list { list-style: none; margin: 0; padding: 0; }
.opp-quality-item { display: flex; gap: 10px; padding: 8px 0; align-items: flex-start; }
.opp-quality-item + .opp-quality-item { border-top: 1px solid var(--border); }
.opp-quality-icon {
  flex: none; width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center;
  font-size: var(--fs-label); font-weight: 500; background: var(--bg-card2); color: var(--text-2);
}
.opp-quality-item.is-ok .opp-quality-icon { background: color-mix(in srgb, var(--success) 18%, transparent); color: var(--text-1); }
.opp-quality-item.is-warn .opp-quality-icon { background: color-mix(in srgb, var(--warning) 22%, transparent); color: var(--text-1); }
.opp-quality-body { min-width: 0; font-size: var(--fs-body); color: var(--text-1); }
.opp-quality-detail { display: block; margin-top: 2px; font-size: var(--fs-meta); color: var(--text-3); }
.opp-quality-jump {
  background: none; border: 0; padding: 0; font: inherit; color: var(--text-1); text-align: left; cursor: pointer;
  text-decoration: underline; text-underline-offset: 2px;
}
.opp-quality-jump:focus-visible { outline: 2px solid var(--primary-text); outline-offset: 2px; }

/* ─────────────────────────────────────────────────────────────
   PR1.359 #573 — Statusmeldung (klassische Shell)
   Health-Schild im Kopf, Karte „Statusmeldung" oben in der rechten Spalte und das
   Meldefenster (.srm-*, geteilt mit der Redesign-Shell — dort ueberstimmt
   style-redesign-modals.css die Farben im `.crm`-Scope). Farbe nie allein: jede Ampel
   traegt ihren Text (Grün/Gelb/Rot). Keine Animation (Arbeitsfenster, Konvention 22).
   ───────────────────────────────────────────────────────────── */
.proj-health-badge {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 10px; border-radius: 99px; font-size: var(--fs-label); font-weight: 500;
  border: 1px solid var(--border); background: var(--bg-hover); color: var(--text-2);
  white-space: nowrap;
}
.proj-health-dot { width: 8px; height: 8px; border-radius: 50%; background: currentColor; flex: 0 0 auto; }
.proj-health-badge--ok   { color: color-mix(in srgb, var(--success) 65%, var(--text-1)); background: color-mix(in srgb, var(--success) 14%, transparent); border-color: color-mix(in srgb, var(--success) 40%, transparent); }
.proj-health-badge--warn { color: color-mix(in srgb, var(--warning) 65%, var(--text-1)); background: color-mix(in srgb, var(--warning) 14%, transparent); border-color: color-mix(in srgb, var(--warning) 40%, transparent); }
.proj-health-badge--bad  { color: color-mix(in srgb, var(--danger) 65%, var(--text-1));  background: color-mix(in srgb, var(--danger) 14%, transparent);  border-color: color-mix(in srgb, var(--danger) 40%, transparent); }
.proj-health-badge--neutral .proj-health-dot { background: var(--text-3); }
/* Ueberfaellig: Farbe bleibt, gestrichelter Rand + Zusatz im Text (Grill A9). */
.proj-health-badge--overdue { border-style: dashed; border-width: 2px; }
/* PR1.360 #574 — Liste + Kanban-Karte: kurzer Text ohne „überfällig", deshalb traegt der
   graue Strichrand den Hinweis allein (Grill A9: „Liste grau umrandet"); Satz im Tooltip. */
.proj-health-badge--compact { gap: 5px; padding: 2px 8px; font-size: var(--fs-label); }
.proj-health-badge--compact .proj-health-dot { width: 7px; height: 7px; }
.proj-health-badge--compact.proj-health-badge--overdue { border-color: var(--text-2); }
.kanban-card-health { margin-top: 6px; }

.psr-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: 10px; padding: 14px; display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.psr-head { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.psr-head h3 { margin: 0; font-size: var(--fs-body); }
.psr-meta { color: var(--text-3); font-size: var(--fs-meta); }
.psr-rows { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
/* Bei ~300px Spaltenbreite (1280er Fenster) bricht der Satz unter Bereich + Farbe um. */
.psr-row { display: grid; grid-template-columns: auto 1fr auto; column-gap: 8px; row-gap: 2px; align-items: baseline; font-size: var(--fs-body); min-width: 0; }
.psr-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--text-3); display: inline-block; flex: 0 0 auto; align-self: center; }
.psr-dot--ok { background: var(--success); }
.psr-dot--warn { background: var(--warning); }
.psr-dot--bad { background: var(--danger); }
.psr-dim { font-weight: 600; color: var(--text-1); }
.psr-color { color: var(--text-3); font-size: var(--fs-meta); }
.psr-text { grid-column: 2 / -1; color: var(--text-2); overflow-wrap: anywhere; }
.psr-empty { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
.psr-note { margin: 0; color: var(--text-3); font-size: var(--fs-body); }
.psr-fresh { margin: 0; padding: 6px 10px; border-radius: 8px; font-size: var(--fs-ui); color: var(--text-1);
  border: 1px dashed var(--border-light); background: var(--bg-hover); }
.psr-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.psr-history { border-top: 1px solid var(--border); padding-top: 8px; display: flex; flex-direction: column; gap: 4px; }
.psr-history-h { margin: 0; font-size: var(--fs-label); color: var(--text-3); font-weight: 500; }
.psr-hist { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.psr-hist-item + .psr-hist-item { border-top: 1px solid var(--border); }
.psr-hist-row {
  width: 100%; display: grid; grid-template-columns: auto 1fr auto; gap: 8px; align-items: center;
  background: transparent; border: 0; border-radius: 6px; padding: 7px 4px; font: inherit; font-size: var(--fs-ui);
  color: var(--text-1); text-align: left; cursor: pointer; min-width: 0;
}
.psr-hist-row:hover { background: var(--bg-hover); }
.psr-hist-row:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.psr-hist-date { white-space: nowrap; color: var(--text-2); }
.psr-hist-who { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.psr-dots { display: inline-flex; gap: 3px; }
.psr-hist-detail { padding: 2px 4px 10px; }
.psr-all { align-self: flex-start; }

/* Meldefenster (beide Shells; Redesign-Farben in style-redesign-modals.css). */
.srm-modal { max-width: 720px; }
.srm-head { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.srm-sub { color: var(--text-3); font-size: var(--fs-ui); }
.srm-hint { margin: 0 0 10px; color: var(--text-2); font-size: var(--fs-body); }
.srm-error { margin: 0 0 12px; padding: 8px 12px; border-radius: 8px; font-size: var(--fs-body); font-weight: 500;
  color: color-mix(in srgb, var(--danger) 65%, var(--text-1)); background: color-mix(in srgb, var(--danger) 12%, transparent); border: 1px solid color-mix(in srgb, var(--danger) 45%, transparent); }
.srm-rows { display: flex; flex-direction: column; gap: 10px; }
/* Eine Zeile je Bereich: Farbknoepfe nebeneinander, Satz darunter — fuenf Bereiche passen
   ohne Scrollen in ein uebliches Fenster. */
.srm-row { border: 1px solid var(--border); border-radius: 10px; padding: 6px 12px 10px; margin: 0; min-width: 0;
  display: flex; flex-direction: column; gap: 6px; }
.srm-row--missing { border-color: var(--danger); border-width: 2px; }
.srm-dim { padding: 0 4px; font-weight: 500; font-size: var(--fs-body); color: var(--text-1); }
.srm-pick { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; }
.srm-colors { display: flex; gap: 4px; flex-wrap: wrap; }
.srm-color {
  display: inline-flex; align-items: center; gap: 5px; padding: 4px 9px; border-radius: 99px; cursor: pointer;
  border: 1px solid var(--border-light); background: transparent; color: var(--text-2); font: inherit; font-size: var(--fs-meta); font-weight: 500;
}
.srm-color:hover { background: var(--bg-hover); }
.srm-color:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.srm-pip { width: 9px; height: 9px; border-radius: 50%; background: var(--text-3); }
.srm-color-ok .srm-pip { background: var(--success); }
.srm-color-warn .srm-pip { background: var(--warning); }
.srm-color-bad .srm-pip { background: var(--danger); }
.srm-color-ok[aria-checked="true"]   { color: color-mix(in srgb, var(--success) 65%, var(--text-1)); background: color-mix(in srgb, var(--success) 16%, transparent); border-color: var(--success); }
.srm-color-warn[aria-checked="true"] { color: color-mix(in srgb, var(--warning) 65%, var(--text-1)); background: color-mix(in srgb, var(--warning) 16%, transparent); border-color: var(--warning); }
.srm-color-bad[aria-checked="true"]  { color: color-mix(in srgb, var(--danger) 65%, var(--text-1));  background: color-mix(in srgb, var(--danger) 16%, transparent);  border-color: var(--danger); }
.srm-last { color: var(--text-3); font-size: var(--fs-label); }
.srm-text {
  width: 100%; min-height: 2.25rem; resize: vertical; box-sizing: border-box; padding: 7px 10px; border-radius: 8px;
  border: 1px solid var(--border-light); background: var(--bg-input); color: var(--text-1); font: inherit; font-size: var(--fs-body); line-height: 1.35;
}
.srm-text::placeholder { color: var(--text-3); font-style: italic; }
.srm-text:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.srm-text[aria-invalid="true"] { border-color: var(--danger); }
.srm-confirm { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 10px 24px; border-top: 1px solid var(--border);
  background: color-mix(in srgb, var(--warning) 10%, transparent); }
.srm-confirm[hidden], .srm-error[hidden], .psr-hist-detail[hidden] { display: none; }
.srm-confirm-text { margin-right: auto; font-weight: 500; font-size: var(--fs-body); color: var(--text-1); }
.srm-foot { flex-wrap: wrap; align-items: center; }
.srm-legend { margin: 0; padding: 8px 24px; color: var(--text-3); font-size: var(--fs-meta); background: var(--bg-hover); }
/* PR1.479 #737 — vier Pflicht-Ampeln + Team, Leitfragen, „Wie zuletzt" (Entwurf Meldefenster). */
.srm-modal { max-width: 820px; }
.srm-head-right { display: flex; align-items: center; gap: 12px; }
.srm-lastinfo { text-align: right; font-size: var(--fs-meta); color: var(--text-3); line-height: 1.35; }
.srm-lastinfo b { color: var(--text-2); }
.srm-dim, .srm-sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.srm-row { padding: 10px 12px 12px; gap: 8px; }
.srm-row--optional { border-style: dashed; }
.srm-dim-col { display: flex; flex-direction: column; width: 11rem; min-width: 0; font-size: var(--fs-body); color: var(--text-1); }
.srm-opt { font-size: var(--fs-label); color: var(--text-3); font-weight: 400; }
.srm-color { min-height: 2.25rem; padding: 4px 10px; }
.srm-kbd { font: inherit; font-size: var(--fs-label); font-weight: 500; color: var(--text-3); border: 1px solid var(--border-light); border-radius: 3px; padding: 0 4px; margin-left: 2px; }
.srm-same { margin-left: auto; display: inline-flex; align-items: center; gap: 4px; min-height: 2.25rem; padding: 0 12px; border-radius: 8px; cursor: pointer;
  border: 1px solid var(--border-light); background: transparent; color: var(--accent); font: inherit; font-size: var(--fs-ui); font-weight: 500; }
.srm-same:hover { background: var(--bg-hover); }
.srm-same:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.srm-same[aria-pressed="true"] { background: color-mix(in srgb, var(--accent) 14%, transparent); border-color: var(--accent); }
.srm-same-sub { color: var(--text-3); font-weight: 400; }
.srm-guide { background: var(--bg-hover); border-radius: 6px; padding: 7px 10px; font-size: var(--fs-meta); color: var(--text-2); }
.srm-guide-q { margin: 0 0 4px; font-weight: 600; color: var(--text-1); }
.srm-guide-list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 3px 16px; }
.srm-guide-item { display: inline-flex; align-items: baseline; gap: 6px; }
.srm-guide-item .srm-pip { flex: none; transform: translateY(-1px); }
.srm-pip-ok { background: var(--success); }
.srm-pip-warn { background: var(--warning); }
.srm-pip-bad { background: var(--danger); }
.srm-text-label { display: flex; flex-direction: column; gap: 4px; }
.srm-text-cap { font-size: var(--fs-label); color: var(--text-3); }
.srm-text--taken { background: var(--bg-hover); color: var(--text-2); }
.srm-row-error { margin: 0; font-size: var(--fs-ui); font-weight: 500; color: color-mix(in srgb, var(--danger) 70%, var(--text-1)); }
.srm-row-error[hidden] { display: none; }
.srm-opt-note { margin: 0; font-size: var(--fs-meta); color: var(--text-3); }
.srm-preview { margin: 0 auto 0 0; display: inline-flex; align-items: center; gap: 8px; font-size: var(--fs-ui); color: var(--text-2); }
.srm-status { display: inline-flex; align-items: center; gap: 6px; padding: 2px 10px 2px 8px; border-radius: 99px; font-weight: 600; }
.srm-status-ok { color: color-mix(in srgb, var(--success) 65%, var(--text-1)); background: color-mix(in srgb, var(--success) 16%, transparent); }
.srm-status-warn { color: color-mix(in srgb, var(--warning) 65%, var(--text-1)); background: color-mix(in srgb, var(--warning) 16%, transparent); }
.srm-status-bad { color: color-mix(in srgb, var(--danger) 65%, var(--text-1)); background: color-mix(in srgb, var(--danger) 16%, transparent); }
.srm-status-neutral { color: var(--text-3); background: var(--bg-hover); font-weight: 500; }
.srm-save-kbd { font-weight: 400; opacity: .85; font-size: var(--fs-meta); margin-left: 4px; }
.psr-carried { font-size: var(--fs-label); color: var(--text-3); font-style: italic; }
.psr-row .psr-carried { grid-column: 2 / -1; }
@media (max-width: 640px) {
  .srm-dim-col { width: 100%; }
  .srm-same { margin-left: 0; }
  .srm-lastinfo { display: none; }
}
/* PR1.361 #575 — Fenster „Monitoring abschalten" (beide Shells, Grundbausteine .srm-*). */
.mof-modal { max-width: 520px; }
.mof-label { display: block; margin: 0 0 6px; font-weight: 500; font-size: var(--fs-body); color: var(--text-1); }
.mof-req { font-weight: 400; color: var(--text-3); }
.mof-reason { min-height: 5rem; }
.mof-meta { display: flex; justify-content: flex-end; margin: 4px 0 8px; }
.mof-meta .mof-count { margin: 0; }
/* PR1.560 #842 — Konflikt-Dialog beim Speichern (beide Shells; Farben Redesign in style-redesign-modals.css). */
.scd-modal { max-width: 640px; }
.scd-modal:focus { outline: none; }
.scd-intro { margin: 0 0 12px; color: var(--text-2); font-size: var(--fs-body); line-height: 1.45; }
.scd-entry { margin: 0 0 14px; }
.scd-entry + .scd-entry { padding-top: 12px; border-top: 1px solid var(--border); }
.scd-who { margin: 0 0 2px; font-weight: 600; color: var(--text-1); }
.scd-name { margin: 0 0 8px; color: var(--text-3); font-size: var(--fs-ui); }
.scd-table-wrap { overflow-x: auto; }
.scd-table { width: 100%; border-collapse: collapse; font-size: var(--fs-body); }
.scd-table th, .scd-table td { padding: 6px 8px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--border); overflow-wrap: anywhere; }
.scd-table thead th { color: var(--text-3); font-weight: 500; font-size: var(--fs-meta); }
.scd-table tbody th { color: var(--text-1); font-weight: 600; white-space: nowrap; }
.scd-table td { color: var(--text-2); }
.scd-empty { margin: 0 0 8px; color: var(--text-2); }
.scd-status { margin: 8px 0 0; color: var(--text-2); font-size: var(--fs-body); }
.scd-error { margin: 8px 0 0; padding: 8px 12px; border-radius: 8px; font-size: var(--fs-body); font-weight: 500;
  color: var(--danger, #f87171); background: rgba(248, 113, 113, .12); }
.scd-status[hidden], .scd-error[hidden] { display: none; }
.scd-foot { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; }
.scd .btn:focus-visible { outline: 2px solid var(--accent, #60a5fa); outline-offset: 2px; }
.psr-off .psr-note { color: var(--text-2); }
.proj-skill-list { display: flex; flex-wrap: wrap; gap: 6px; }
@media (max-width: 1024px) {
  .proj-detail-below { padding: 0 16px 16px; }
}

.opp-cand-row {
  display: flex; gap: 10px; align-items: center;
  padding: 6px 0; font-size: var(--fs-ui);
  border-bottom: 1px solid var(--border);
}
.opp-cand-row:last-child { border-bottom: none; }
.opp-cand-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
/* PR1.86 #235 — Rolle · FTE der ausgewählten (gestafften) Kandidaten. Bewusst schlicht,
   kein Score-Badge (die Auswahl ist keine Rangliste). */
.opp-cand-role {
  color: var(--text-3); font-size: var(--fs-label); flex-shrink: 0; text-align: right;
}
.opp-cand-score {
  background: var(--primary-glow); color: var(--primary);
  padding: 2px 8px; border-radius: var(--radius-sm);
  font-size: var(--fs-label); font-weight: 500;
  display: inline-flex; align-items: center; gap: 4px;
}

/* HF3.14 (B8) — Top-Kandidaten zwei getrennte Mini-Listen in Detail-Sidebar */
.opp-cand-card-b8 .opp-cand-section { margin-top: 10px; }
.opp-cand-card-b8 .opp-cand-section:first-of-type { margin-top: 6px; }
/* PR1.438 — look comes from the shared section-head rule. */
.opp-cand-section-title { margin-bottom: 4px; }
.opp-cand-empty { color: var(--text-3); font-size: var(--fs-ui); padding: 4px 0; }

/* PR1.154 (#310) — CC-Stufen-Überschrift INNERHALB der Trefferliste. Nutzt .opp-cand-section-title
   (gleicher Typ, gleicher Namensraum) und ergänzt nur, was die scrollende Liste braucht:
   sticky, damit beim Scrollen sichtbar bleibt, zu welcher Stufe die Zeilen gehören
   (Muster: .mos-pool-block-title). Deckender Hintergrund ist Pflicht — sonst scrollen die
   Zeilen sichtbar durch die Überschrift hindurch.
   Die Farbe kommt bewusst aus .opp-cand-section-title (--text-2) und wird NICHT auf --text-3
   heruntergezogen (wie bei .mos-pool-cc): --text-3 erreicht auf --bg-card im Dark-Theme nur
   3,87:1 und verfehlt damit WCAG AA (4,5:1). --text-2 liegt bei 7,19:1 (dark) / 7,53:1 (light). */
.opp-cand-cc-group {
  position: sticky; top: 0; z-index: 1;
  background: var(--bg-card);
  padding: 8px 2px 4px; margin-bottom: 0;
}
/* Die Zeile VOR einer Überschrift bringt ihren eigenen border-bottom mit
   (.opp-cand-row-wrap) — ein zweiter Strich direkt darüber doppelt die Linie. */
.opp-cand-row-wrap + .opp-cand-cc-group { border-top: 0; margin-top: 2px; }

/* ── PR1.135 (#285) — Kandidaten-Vorschläge als breiter Zwei-Panel-Bereich unter dem Grid ──
   Löst die schmale rechte „Kandidaten"-Card ab. Volle Breite wie .opp-team-section; links
   Kompetenz (mit Balken), rechts Verfügbarkeit (Kompetenz als Zahl). Empty-State = großer CTA. */
.opp-cand-panels { padding: 0 24px 20px; }
.opp-cand-panels .form-section-label { margin-bottom: 10px; }
/* PR1.147 (#296): .opp-cand-panels-grid (2-spaltiges Raster) + zugehöriger
   900px-Breakpoint entfallen — es gibt nur noch EIN .opp-cand-panel direkt
   unter .opp-cand-panels. */
.opp-cand-panel {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 14px 16px;
  min-width: 0;
}
.opp-cand-panel-title {
  font-weight: 600; font-size: var(--fs-body); color: var(--text-1);
  margin-bottom: 10px; padding-bottom: 6px;
  border-bottom: 1px solid var(--border);
}
/* PR1.244 (#423) — Wer gar nicht erst bewertet wurde. Stand bis hierher als graue Zeile
   UNTER dem letzten Kandidaten; im Meldefall waren das 64 von 112 Personen. Eine Stufe
   kraeftiger als die Fusszeile (.72rem/--text-3), aber bewusst ohne Statusfarbe: eine
   benannte Einschraenkung ist keine Warnung. Leer gerendert nimmt der Block keinen Platz
   ein — der Anker bleibt fuer die Live-Ticks trotzdem stehen. */
.opp-cand-notice { font-size: var(--fs-meta); color: var(--text-2); margin-bottom: 8px; }
.opp-cand-notice:empty { margin-bottom: 0; }
/* ── PR1.147 (#296) — EIN Panel mit max. 20 Zeilen und internem Scroll ──
   Ersetzt das Zwei-Panel-Raster (Kompetenz | Verfügbarkeit). Die Liste scrollt
   in sich, statt die Detailseite zu strecken; Höhe ≈ 6 sichtbare Zeilen. */
.opp-cand-list {
  max-height: 560px;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding-right: 4px;
}
/* Scrollbar dezent — Muster von .notification-list. */
.opp-cand-list::-webkit-scrollbar { width: 5px; }
.opp-cand-list::-webkit-scrollbar-track { background: transparent; }
.opp-cand-list::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }

/* Score-Kachel — Hauptelement der Zeile, löst .opp-cand-score + .opp-cand-comp-bar
   optisch ab. Prozentzahl groß/fett, Label klein darunter. Grund dezent in der
   Ampelfarbe getönt (Hausmuster color-mix(<token> 15%, transparent) wie
   .match-portfolio-badge.foreign), Text in der satten Ampelfarbe.
   Beide Sub-Spans erben currentColor → AA gilt für Zahl UND Label.
   Feste min-width, damit die Kacheln über die Zeilen hinweg bündig stehen. */
.opp-cand-scoretile {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
  flex-shrink: 0;
  min-width: 76px;
  padding: 4px 8px;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  line-height: 1.15;
  text-align: center;
}
.opp-cand-scoretile-pct {
  font-size: var(--fs-body);
  font-weight: 500;
  letter-spacing: -.01em;
}
.opp-cand-scoretile-label {
  font-size: var(--fs-label);
  font-weight: 500;
  white-space: nowrap;
}
/* Ampel-Bänder: tier-high ≥90 · tier-good 75–89 · tier-ok 60–74.
   Unter 60 wird gar nicht gerendert → es gibt bewusst KEINE rote Stufe.
   Achtung: --success-light ist eine Vollfarbe (#34d399), kein Tint — deshalb
   hier ausschließlich als Text-/Basisfarbe, nie roh als Hintergrund.

   tier-high ist bewusst GEFÜLLT statt getönt: zwei getönte Grünstufen
   nebeneinander sind auf einer 76px-Kachel nicht unterscheidbar (gemessen:
   Flächenkontrast 1.07 — praktisch identische Helligkeit, nur Farbton). Gefüllt
   vs. getönt hebt den Abstand auf 4.90 (Light) bzw. 5.46 (Dark) und macht die
   Progression „gefüllt → blass grün → gelb" auf einen Blick dreistufig.
   Die Textfarbe der gefüllten Stufe dreht sich je Theme: im Dark ist --success
   hell (#10b981) und braucht dunkle Schrift (7.55:1; weiß wären nur 2.54:1),
   im Light ist es dunkel (#047857) und braucht weiße (5.48:1). */
.opp-cand-scoretile.tier-high {
  background: var(--success);
  border-color: var(--success);
  color: #08110c;
}
.opp-cand-scoretile.tier-good {
  background: color-mix(in srgb, var(--success-light) 15%, transparent);
  border-color: color-mix(in srgb, var(--success-light) 30%, transparent);
  color: var(--success-light);
}
.opp-cand-scoretile.tier-ok {
  background: color-mix(in srgb, var(--attention) 15%, transparent);
  border-color: color-mix(in srgb, var(--attention) 30%, transparent);
  color: var(--attention);
}

/* Verfügbarkeitszeile — Füllung neutral-blau (--info), bewusst klar unterscheidbar
   vom Ampel-Grün der Kachel, damit nicht zwei konkurrierende „Bewertungs"-Farben
   in derselben Zeile stehen. Einzeilig (Balken + Text nebeneinander), damit die
   Zeile kompakt bleibt und ~6 Zeilen ins Scroll-Fenster passen. */
.opp-cand-avail {
  display: flex;
  align-items: center;
  gap: 8px;
  padding-left: 26px;
}
.opp-cand-avail-bar {
  flex: 0 0 110px;
  height: 5px;
  border-radius: 3px;
  background: var(--bg-hover);
  overflow: hidden;
}
.opp-cand-avail-bar-fill {
  height: 100%;
  border-radius: 3px;
  background: var(--info);
  transition: width .2s ease;
}
.opp-cand-avail-text { font-size: var(--fs-label); color: var(--text-3); }

/* Footer (KI-Ranking-Stand) — war bis PR1.147 ein Inline-style-Attribut
   (font-size:.72rem; color:var(--text-3); margin-top:8px), jetzt echte Klasse. */
.opp-cand-footer { font-size: var(--fs-label); color: var(--text-3); margin-top: 8px; }

/* PR1.147 (#296) — .opp-cand-comp-bar/-fill/-num (PR1.135) sind hier entfallen:
   der dünne Kompetenz-Balken ist durch die Score-Kachel ersetzt, der Zahl-Indikator
   verschwand mit dem zweiten Panel, und der 'gap-analysis:updated'-In-Place-Patch,
   der als letzter auf sie zugriff, wurde ebenfalls entfernt (kein Sender mehr).
   .opp-cand-tier-badge bleibt dagegen bestehen — views/project-detail.js:384 rendert es. */
.opp-cand-panels-actions { margin-top: 10px; max-width: 420px; }
/* Empty-State: großer „Matching jetzt berechnen"-CTA statt irreführender „nicht bewertet"-Liste. */
.opp-cand-empty-state {
  text-align: center; padding: 40px 20px;
  background: var(--bg-card);
  border: 1px dashed var(--border);
  border-radius: var(--radius-lg);
}
.opp-cand-empty-state .opp-cand-empty-icon { font-size: var(--fs-icon); margin-bottom: 12px; }
.opp-cand-empty-state .btn { display: block; }
.opp-cand-empty-hint {
  color: var(--text-3); font-size: var(--fs-body); margin: 4px auto 0; max-width: 480px;
}
.opp-cand-degraded { color: var(--warning, #f59e0b); font-size: var(--fs-body); margin-top: 4px; }

/* BF-32 (#427) — Fehlerzustand und „nicht dauerhaft"-Hinweis der Kandidatenliste.
   Der naechste Schritt steht in einer eigenen Zeile, damit er nicht im Fliesstext
   der Absage untergeht — und in ruhigerer Farbe: die Absage ist die Nachricht,
   die Handlung die Fussnote. */
.opp-cand-degraded-action { display: block; margin-top: 4px; color: var(--text-3, #888); font-size: var(--fs-ui); }
.opp-cand-unpersisted {
    color: var(--warning, #f59e0b);
    font-size: var(--fs-body);
    line-height: 1.45;
    margin: 0 0 8px;
    padding: 8px 10px;
    border-left: 3px solid var(--warning, #f59e0b);
    background: rgba(245, 158, 11, .08);
    border-radius: 4px;
}
.opp-cand-unpersisted-action { color: var(--text-3, #888); }

/* ═══════════════════════════════════════════════════════════════════════════
   PR1.148 (#297) — Detail-Kiste rechts neben der Trefferliste

   .opp-cand-split ist ein reiner Grid-Wrapper. Er sitzt bewusst NICHT auf
   .opp-cand-panels: dort hängen Label, Toolbar und Actions in voller Breite,
   ein Grid würde sie in Spalten pressen.

   Der 1100px-Breakpoint ist der Wiedergänger des mit PR1.147 entfernten
   900px-Breakpoints — höher angesetzt, weil die Kiste (Zitate, Metrik-Balken,
   Zeitstrahl) deutlich inhaltsreicher ist als das alte Verfügbarkeits-Panel.
   Darunter stapelt sich die Kiste UNTER die Liste; die Quelltext-Reihenfolge
   ist zugleich die Lesereihenfolge, deshalb kein order-Hack.
   ═══════════════════════════════════════════════════════════════════════════ */
.opp-cand-split {
  display: grid;
  grid-template-columns: minmax(320px, 4fr) minmax(360px, 6fr);
  gap: 14px;
  align-items: start;
}
@media (max-width: 1100px) {
  .opp-cand-split { grid-template-columns: 1fr; }
}

.opp-cand-detail {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  min-width: 0;
  /* KEIN overflow hier: der Sticky-Kopf braucht einen durchgehend sichtbaren
     Overflow bis zum Scroll-Container (.opp-cand-detail-body), sonst klebt er nicht. */
}
.opp-cand-detail-body {
  /* Höhen-Parität zur Liste (.opp-cand-list: 560px) — beide Spalten gleich hoch,
     unabhängig scrollend. */
  max-height: 560px;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 0 16px 14px;
}
.opp-cand-detail-body::-webkit-scrollbar { width: 5px; }
.opp-cand-detail-body::-webkit-scrollbar-track { background: transparent; }
.opp-cand-detail-body::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }

/* ── Leerzustand (Default — kein Auto-Select) ── */
.opp-cand-detail-empty {
  text-align: center;
  padding: 48px 24px;
  color: var(--text-3);
}
.opp-cand-detail-empty-icon { font-size: var(--fs-kpi); margin-bottom: 10px; opacity: .55; }
.opp-cand-detail-empty-text { font-size: var(--fs-body); max-width: 320px; margin: 0 auto; color: var(--text-2); }

/* ── Sticky-Kopf ── */
.opp-cand-detail-head {
  position: sticky;
  top: 0;
  z-index: 1;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 16px 10px;
  background: var(--bg-card);
  border-bottom: 1px solid var(--border);
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}
.opp-cand-detail-head-main { min-width: 0; }
.opp-cand-detail-name {
  font-weight: 500; font-size: var(--fs-body); color: var(--text-1);
  overflow-wrap: anywhere;
}
.opp-cand-detail-meta { font-size: var(--fs-meta); color: var(--text-2); margin-top: 2px; }
.opp-cand-detail-badges { margin-top: 6px; display: flex; flex-wrap: wrap; gap: 4px; }
.opp-cand-detail-badge {
  font-size: var(--fs-label); font-weight: 500;
  padding: 2px 7px; border-radius: var(--radius-sm);
  /* 8 %: --info trägt im Dark auf dem eigenen Tint nur bis 9 % AA (5.01:1 auf der
     blanken Karte, 4.17:1 bei 15 %). Light verträgt bis 24 % — die 8 % gelten für beide. */
  background: color-mix(in srgb, var(--info) 8%, transparent);
  border: 1px solid color-mix(in srgb, var(--info) 30%, transparent);
  color: var(--info);
}
/* Größere Variante derselben Kachel — Ampelfarben erbt sie unverändert von
   .opp-cand-scoretile.tier-*, damit Liste und Kopf nie auseinanderlaufen. */
.opp-cand-scoretile-lg { min-width: 92px; padding: 7px 10px; }
.opp-cand-scoretile-lg .opp-cand-scoretile-pct { font-size: var(--fs-title); }
.opp-cand-scoretile-lg .opp-cand-scoretile-label { font-size: var(--fs-label); }

/* ── Sektionen ── */
.opp-cand-detail-section { margin-top: 14px; }
/* PR1.438 — look comes from the shared section-head rule. */
.opp-cand-detail-section-title { margin-bottom: 7px; }
.opp-cand-detail-muted { font-size: var(--fs-ui); color: var(--text-2); }
.opp-cand-detail-summary {
  font-size: var(--fs-ui); color: var(--text-2); line-height: 1.5;
  margin: 0 0 7px;
}

/* ── Metrik-Zeilen (natives <details>) ── */
.opp-cand-metric { border-bottom: 1px solid var(--border); }
.opp-cand-metric:last-child { border-bottom: 0; }
.opp-cand-metric-summary {
  display: grid;
  /* FÜNF Spalten: Label · Balken · Wert · Belegzähler · das ::after-Dreieck.
     Mit nur vier rutscht der Marker in eine zweite Grid-Zeile und steht als
     einsamer Punkt unter dem Label. */
  grid-template-columns: minmax(96px, 1.1fr) 1fr auto auto auto;
  align-items: center;
  gap: 8px;
  padding: 7px 0;
  cursor: pointer;
  list-style: none;
  font-size: var(--fs-meta);
}
/* Den Standard-Marker verstecken (Hausmuster) und durch ein eigenes ▸ ersetzen,
   das den Zustand über [open] dreht. */
.opp-cand-metric-summary::-webkit-details-marker { display: none; }
.opp-cand-metric-summary::marker { content: ''; }
.opp-cand-metric-summary::after {
  content: '';
  display: inline-block; width: 1em; height: 1em; background-color: currentColor;
  -webkit-mask: var(--ic-mask-caret-right); mask: var(--ic-mask-caret-right);
  color: var(--text-3);
  font-size: var(--fs-label);
  transition: transform .15s ease;
}
.opp-cand-metric[open] > .opp-cand-metric-summary::after { transform: rotate(90deg); }
.opp-cand-metric-summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.opp-cand-metric-label { color: var(--text-2); font-weight: 600; }
.opp-cand-metric-bar {
  height: 6px; border-radius: 3px;
  background: color-mix(in srgb, var(--border) 60%, transparent);
  overflow: hidden;
}
.opp-cand-metric-fill { display: block; height: 100%; border-radius: 3px; }
.opp-cand-metric-fill.high { background: var(--success); }
.opp-cand-metric-fill.medium { background: var(--attention); }
.opp-cand-metric-fill.low { background: var(--danger); }
.opp-cand-metric-pct {
  font-variant-numeric: tabular-nums;
  font-weight: 600; color: var(--text-1); white-space: nowrap;
}
.opp-cand-metric-count { font-size: var(--fs-label); color: var(--text-2); white-space: nowrap; }
.opp-cand-metric-detail { padding: 2px 0 10px; }
.opp-cand-metric-rationale {
  font-size: var(--fs-meta); color: var(--text-2); line-height: 1.45; margin: 0 0 8px;
}

/* ── Belege ── */
.opp-cand-evidence { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.opp-cand-evidence-item {
  padding: 8px 10px;
  border-left: 2px solid var(--border);
  background: color-mix(in srgb, var(--border) 18%, transparent);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}
.opp-cand-evidence-quote {
  margin: 0; font-size: var(--fs-meta); font-style: italic;
  color: var(--text-2); line-height: 1.45;
  overflow-wrap: anywhere;
}
.opp-cand-evidence-facts {
  margin-top: 5px; display: flex; flex-wrap: wrap; gap: 5px; align-items: center;
}
.opp-cand-evidence-level,
.opp-cand-evidence-fact {
  font-size: var(--fs-label); color: var(--text-2);
  padding: 1px 6px; border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  white-space: nowrap;
}
.opp-cand-evidence-level { color: var(--text-2); font-weight: 600; }

/* ── Chips ──
   „Annahme" und „übertragbar" hängen am EINZELNEN Beleg, nicht an der Metrik —
   sie sind der fachliche Kern der Bewertung (Fremd-Hyperscaler-Rabatt bzw.
   abgeleiteter Skill) und müssen deshalb genau dort stehen, wo sie gelten. */
.opp-cand-chip {
  font-size: var(--fs-label); font-weight: 500;
  padding: 2px 7px; border-radius: var(--radius-sm);
  border: 1px solid transparent;
  white-space: nowrap;
}
.opp-cand-chip-assumed {
  background: color-mix(in srgb, var(--attention) 15%, transparent);
  border-color: color-mix(in srgb, var(--attention) 35%, transparent);
  color: var(--attention);
}
.opp-cand-chip-transfer {
  background: color-mix(in srgb, var(--info) 8%, transparent);
  border-color: color-mix(in srgb, var(--info) 30%, transparent);
  color: var(--info);
}
.opp-cand-chip-ok {
  background: color-mix(in srgb, var(--success-light) 15%, transparent);
  border-color: color-mix(in srgb, var(--success-light) 30%, transparent);
  color: var(--success-light);
}
.opp-cand-chip-firm {
  background: color-mix(in srgb, var(--info) 8%, transparent);
  border-color: color-mix(in srgb, var(--info) 28%, transparent);
  color: var(--info);
}
.opp-cand-chip-tentative {
  background: color-mix(in srgb, var(--attention) 12%, transparent);
  border-color: color-mix(in srgb, var(--attention) 32%, transparent);
  color: var(--attention);
}

/* ── Gap, dreigeteilt ── */
.opp-cand-gapblock { margin-bottom: 10px; }
.opp-cand-gapblock:last-child { margin-bottom: 0; }
.opp-cand-gapblock-title {
  font-size: var(--fs-meta); font-weight: 600; color: var(--text-2); margin-bottom: 5px;
}
.opp-cand-gapchips { display: flex; flex-wrap: wrap; gap: 5px; }
.opp-cand-gapcard {
  padding: 7px 9px; margin-bottom: 5px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--border) 12%, transparent);
}
.opp-cand-gapcard-head {
  display: flex; align-items: baseline; justify-content: space-between; gap: 8px;
}
.opp-cand-gapcard-label { font-size: var(--fs-meta); color: var(--text-1); font-weight: 500; }
.opp-cand-gapcard-gain {
  font-size: var(--fs-label); font-weight: 500; color: var(--attention); white-space: nowrap;
}
.opp-cand-gapcard-rel { font-size: var(--fs-label); color: var(--text-2); margin-top: 2px; }
.opp-cand-gaprec-text { font-size: var(--fs-ui); color: var(--text-2); line-height: 1.45; margin: 0; }
.opp-cand-assumptions {
  margin: 0; padding-left: 16px; font-size: var(--fs-meta); color: var(--text-2); line-height: 1.5;
}

/* ── Verfügbarkeits-Steckbrief ── */
.opp-cand-avail-facts {
  font-size: var(--fs-meta); font-weight: 500; color: var(--text-2);
  padding: 6px 9px; margin-bottom: 8px;
  border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--info) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--info) 22%, transparent);
}
.opp-cand-avail-headline { font-size: var(--fs-ui); color: var(--text-1); line-height: 1.5; margin: 0 0 5px; }
.opp-cand-avail-note,
.opp-cand-avail-from,
.opp-cand-avail-detail {
  font-size: var(--fs-meta); color: var(--text-2); line-height: 1.45; margin: 0 0 5px;
}
.opp-cand-allocs { list-style: none; margin: 0 0 8px; padding: 0; display: grid; gap: 5px; }
.opp-cand-alloc {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
  font-size: var(--fs-meta);
  padding: 5px 8px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
}
.opp-cand-alloc-name { font-weight: 600; color: var(--text-1); overflow-wrap: anywhere; }
.opp-cand-alloc-facts { color: var(--text-2); }
.opp-cand-alloc-more { font-size: var(--fs-label); color: var(--text-2); padding-left: 8px; }

/* ── Mini-Zeitstrahl ──
   Rein visuell (aria-hidden) — die Belegungen stehen als Liste darüber. Offsets
   sind reine Prozentrechnung auf Monatsindizes, keine Messung, keine Library. */
.opp-cand-tl { margin-top: 6px; display: grid; gap: 3px; }
/* Eine Spur je Belegung — überlappende Zeiträume (Projekt + Pre-Staffing parallel)
   sind hier der Normalfall, und genau die Überschneidung ist die Aussage. Auf einer
   gemeinsamen Zeile würde der längere Balken den kürzeren verdecken. */
.opp-cand-tl-track {
  position: relative;
  height: 12px;
  border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--border) 40%, transparent);
  overflow: hidden;
}
.opp-cand-tl-bar {
  position: absolute; top: 2px; height: 8px;
  border-radius: 2px;
  background: color-mix(in srgb, var(--info) 55%, transparent);
}
/* Pre-Staffings sind eingeplant, zählen aber nicht zur Auslastung — die gestrichelte
   Kontur trägt genau diesen Unterschied. */
.opp-cand-tl-bar.tentative {
  background: color-mix(in srgb, var(--attention) 22%, transparent);
  border: 1px dashed color-mix(in srgb, var(--attention) 65%, transparent);
}
.opp-cand-tl-ticks {
  display: grid;
  margin-top: 3px;
  font-size: var(--fs-label); color: var(--text-2);
}
.opp-cand-tl-tick { text-align: center; white-space: nowrap; overflow: hidden; }

/* ── Markierung der gewählten Zeile in der Liste ── */
.opp-cand-row-wrap.is-detail-selected {
  background: color-mix(in srgb, var(--accent) 10%, transparent);
  box-shadow: inset 3px 0 0 var(--accent);
}
.opp-cand-row-wrap:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }

/* Gestapelter Zustand — MUSS nach den Basisregeln stehen: bei gleicher Spezifität
   gewinnt die später notierte Regel, eine Media-Query weiter oben würde von der
   Basisregel wieder überschrieben. Zwei verschachtelte Scroll-Container auf einem
   schmalen Viewport sind eine Falle, und ein Sticky-Kopf ohne eigenen Scroll-Container
   klebt am Seiten-Scroll fest statt an der Kiste. */
@media (max-width: 1100px) {
  .opp-cand-detail-body { max-height: none; overflow: visible; }
  .opp-cand-detail-head { position: static; }
}

.opp-team-section {
  padding: 0 24px 20px;
}
.staffing-group {
  padding: 12px 16px; border-radius: var(--radius-sm);
  margin-bottom: 10px;
}
.staffing-tentative {
  border: 2px dashed var(--border-light); background: var(--bg-base);
}
.staffing-final {
  border: 2px solid var(--border-light); background: var(--bg-card);
}
.staffing-header { font-weight: 500; font-size: var(--fs-ui); margin-bottom: 8px; color: var(--text-1); }
.staffing-hint { font-weight: 400; color: var(--text-3); font-size: var(--fs-label); margin-left: 6px; }
.staffing-member {
  display: flex; gap: 10px; align-items: center;
  padding: 4px 0; font-size: var(--fs-body);
}
.staffing-member-name { flex: 1; }
.staffing-member-fte { color: var(--text-3); font-size: var(--fs-meta); }
.staffing-empty { color: var(--text-3); font-size: var(--fs-meta); font-style: italic; }

/* PR1.11 · B5 — Allocation-Row mit SVG-Mini-Gantt (Read-only Visualisierung) */
.allocation-row {
  display: flex; flex-direction: column; gap: 4px;
  padding: 6px 0;
  border-bottom: 1px solid var(--border);
}
.allocation-row:last-child { border-bottom: none; }
.allocation-row-header {
  display: flex; gap: 10px; align-items: center;
  font-size: var(--fs-body);
}
.allocation-row-header .staffing-member-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.allocation-role { color: var(--text-3); font-size: var(--fs-meta); font-weight: 400; }
.allocation-kw-range { color: var(--text-3); font-size: var(--fs-label); min-width: 130px; text-align: right; }
.allocation-row-tentative .allocation-row-header { opacity: .75; font-style: italic; }
.staffing-member-fte-warn { color: #ef4444; font-weight: 600; }

/* ── PR1.170 (#323) — Einsatz-Editor pro Team-Zeile (Legacy-Shell) ──
   Aufklappbarer Block unter der MA-Zeile: FTE (0–1) · Von/Bis · Stufen-Verlauf.
   Nutzt die vorhandenen Tabellen-Input-Tokens (.team-input, .team-input-fte,
   .team-input-date) und .opp-dynrow für die Stufen-Zeilen — kein neues Input-Design. */
.einsatz-editor {
  display: flex; flex-direction: column; gap: 10px;
  margin: 6px 0 4px;
  padding: 10px 12px;
  background: var(--bg-input, var(--bg-card));
  border: 1px solid var(--border);
  border-radius: 8px;
}
.einsatz-editor-grid {
  display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-end;
}
.einsatz-editor-lbl {
  display: flex; flex-direction: column; gap: 3px;
  font-size: var(--fs-label); font-weight: 500; color: var(--text-3);
}
.einsatz-editor-actions { display: flex; gap: 8px; }
/* PR1.344 (#558) — Herkunft des FTE-Vorschlags, eigene Zeile unter den Feldern. */
.einsatz-fte-hint { flex: 1 0 100%; font-size: var(--fs-label); color: var(--text-3); }
.einsatz-fte[aria-invalid="true"],
.einsatz-rate[aria-invalid="true"] { border-color: var(--danger, var(--warning)); }
/* PR1.386 #607 — der Fokusrand ueberdeckt sonst das Rot, waehrend der Fokus im Feld bleibt. */
.einsatz-rate[aria-invalid="true"] { box-shadow: 0 0 0 2px var(--danger, var(--warning)); }
/* PR1.344 (#558) — Team-Kosten > 20 % über Budget. Warnung, kein Block (Konvention 18). */
.team-budget-warn {
  margin: 6px 0 10px; padding: 8px 12px;
  font-size: var(--fs-ui); color: var(--text-1);
  background: color-mix(in srgb, var(--warning) 10%, var(--bg-card));
  border: 1px solid var(--warning); border-radius: 8px;
}
.einsatz-edit-btn { flex: 0 0 auto; }
.allocation-seg-badge { flex: 0 0 auto; white-space: nowrap; }
/* Stufen-Zeile: Datum · FTE · Prozent-Hinweis · Löschen. Eigenes Grid statt des
   3-spaltigen .opp-dynrow-Defaults, weil hier vier Elemente stehen. */
.einsatz-editor .fte-seg-row.opp-dynrow {
  grid-template-columns: minmax(120px, 150px) minmax(70px, 90px) 1fr 40px;
  align-items: center;
}
.fte-seg-editor .fte-seg-hint { text-align: left; }

@media (max-width: 720px) {
  .einsatz-editor .fte-seg-row.opp-dynrow { grid-template-columns: 1fr 1fr; }
  .einsatz-editor-grid { flex-direction: column; align-items: stretch; }
}

.mini-gantt {
  width: 100%;
  height: 24px;
  display: block;
  border-radius: var(--radius-sm);
  overflow: hidden;
}
.mini-gantt-tentative { opacity: .7; }
.mini-gantt-overcommit { box-shadow: 0 0 0 1px rgba(239, 68, 68, .35) inset; }

/* Optionaler Team-Block-Container (zur Konsistenz mit anderen Sections) */
.team-block { padding: 4px 0; }

.opp-footer-section { padding: 0 24px; margin-bottom: 20px; }
.opp-tasks-list { margin: 0; padding-left: 20px; }
.opp-tasks-list li { margin-bottom: 4px; }

/* Sourcing-Badges (auch Kanban-Card + Detail) */
.sourcing-badge-onshore   { background: rgba(16, 185, 129, 0.15); color: #10b981; border: 1px solid rgba(16, 185, 129, 0.4); padding: 2px 8px; border-radius: var(--radius-sm); font-size: var(--fs-label); font-weight: 500; }
.sourcing-badge-nearshore { background: rgba(245, 158, 11, 0.15); color: #f59e0b; border: 1px solid rgba(245, 158, 11, 0.4); padding: 2px 8px; border-radius: var(--radius-sm); font-size: var(--fs-label); font-weight: 500; }
.sourcing-badge-offshore  { background: rgba(249, 115, 22, 0.15); color: #f97316; border: 1px solid rgba(249, 115, 22, 0.4); padding: 2px 8px; border-radius: var(--radius-sm); font-size: var(--fs-label); font-weight: 500; }
.badge-freelancer { background: rgba(139, 92, 246, 0.15); color: #8b5cf6; border: 1px solid rgba(139, 92, 246, 0.4); padding: 2px 8px; border-radius: var(--radius-sm); font-size: var(--fs-label); font-weight: 500; }

/* Modal: dynamische Skill- / Language-Rows */
.opp-skills-list, .opp-languages-list {
  display: flex; flex-direction: column; gap: 6px; margin-bottom: 8px;
}
.opp-dynrow {
  display: grid; grid-template-columns: 1fr 120px 40px; gap: 8px; align-items: center;
}
.opp-dynrow input, .opp-dynrow select {
  background: var(--bg-input); border: 1px solid var(--border);
  border-radius: var(--radius-sm); padding: 6px 10px; color: var(--text-1);
  font-size: var(--fs-ui);
}
.form-checkbox-group { display: flex; flex-direction: column; gap: 6px; font-size: var(--fs-ui); }

/* BF-82 (#671) — Die eine Form fuer „Kaestchen + Text", in beiden Shells (style.css laedt in
   beiden; style-redesign.css setzt unter .crm nur Farben und Schrift). Das <label> umschliesst
   Kaestchen und Text: die ganze Zeile ist klickbar, die Leertaste bedient das echte Kaestchen.
   Text vertikal mittig zum Kaestchen, 8 px Abstand. Wer neue Kaestchen baut, nimmt diese Klasse
   statt Inline-Abstaenden — test/bf-82-ankreuzfelder.test.mjs und der Layout-Prueftest
   (test/layout/bf-82-ankreuzfelder.spec.mjs) halten das fest. */
.check-row,
.form-checkbox-group label {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 24px;
  margin: 0;
  cursor: pointer;
}
.check-row > input[type="checkbox"],
.check-row > input[type="radio"],
.form-checkbox-group label > input[type="checkbox"],
.form-checkbox-group label > input[type="radio"] {
  flex: 0 0 auto;
  width: auto;
  margin: 0;
  accent-color: var(--primary);
  cursor: pointer;
}
.check-row > input:focus-visible,
.form-checkbox-group label > input:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}
/* In einem Formularblock gewinnt sonst `.form-group label` (Feldueberschrift: klein, fett,
   gedimmt) — eine Kaestchen-Beschriftung ist aber Inhalt wie „Freelancer erlaubt" in
   .form-group-check und bekommt dessen Schrift. */
.form-group .check-row,
.form-checkbox-group label { font-size: var(--fs-ui); font-weight: 400; color: var(--text-1); }
.check-row:has(> input:disabled),
.form-checkbox-group label:has(> input:disabled) { cursor: not-allowed; opacity: .6; }

/* Attachments */
.attachment-dropzone {
  border: 2px dashed var(--border); border-radius: var(--radius-md);
  padding: 18px; text-align: center; color: var(--text-3);
  cursor: pointer; transition: border-color .15s ease, background .15s ease;
  margin-bottom: 10px;
}
.attachment-dropzone:hover, .attachment-dropzone:focus {
  border-color: var(--primary); background: var(--primary-glow); outline: none;
}
.attachment-dropzone.drag-over { border-color: var(--primary); background: var(--primary-glow); }
/* PR1.345 #559 — Zone des einen Upload-Wegs: Tab-Stopp ist der Knopf, nicht die Zone. */
.attachment-dropzone--single:focus-within { border-color: var(--primary); }
.attachment-dropzone--single.is-busy { border-style: solid; }
.attachment-limit-hint { font-size: var(--fs-label); color: var(--text-3); margin-top: 4px; }
/* PR1.345 #559 Nachbesserung — Ablagezone einzeilig (schmal bricht der Hinweis sauber um).
   PR1.405 (#635) — „Anhänge" ist eine Karte der linken Spalte: kein zweiter Einzug, die
   Karte gibt den Rand. */
.opp-card .opp-kb-docs-section { padding: 0; margin: 0; }
.opp-card .attachment-dropzone--single {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: 4px 10px; padding: 6px 8px; margin-top: 8px; font-size: var(--fs-meta);
}
.opp-card .attachment-dropzone--single .attachment-status { flex-basis: 100%; }
.opp-card .attachment-limit-hint { margin-top: 0; }
.attachment-status { margin-top: 8px; font-size: var(--fs-meta); color: var(--text-2); }
.attachment-status.is-error { color: var(--danger); }
/* PR1.345 #559 — Liste „Dokumente" (kb-documents-list.js) hatte keine eigene Gestaltung:
   in der schmalen Maske brach der Papierkorb in eine eigene Zeile. */
.opp-kb-docs-list { display: flex; flex-direction: column; }
/* Eine Zeile je Dokument: nur der Name (bzw. die Mail-Vorschau) darf schrumpfen. */
.opp-kb-doc-row {
  display: flex; align-items: center; gap: 10px;
  padding: 6px 0; border-bottom: 1px solid var(--border); font-size: var(--fs-ui);
}
.opp-kb-doc-row > * { flex-shrink: 0; }
.opp-kb-doc-row > .opp-kb-doc-filename, .opp-kb-doc-row > .opp-kb-email-preview {
  flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: left;
}
.opp-kb-doc-row:last-child { border-bottom: none; }
.opp-kb-doc-size, .opp-kb-doc-uploaded { color: var(--text-2); white-space: nowrap; }
.opp-kb-docs-empty, .opp-kb-docs-loading, .opp-kb-docs-disabled { font-size: var(--fs-body); color: var(--text-2); padding: 4px 0 8px; }
.opp-kb-docs-error { font-size: var(--fs-body); color: var(--danger); padding: 4px 0 8px; }
/* BF-65 #611 — Layout 'clean' der Dokumente-Liste (Mitarbeiter-Detail, beide Shells).
   Eine ruhige Dateiliste: Dateiart-Kachel (Kürzel + Farbe, nie nur Farbe), sprechender
   Name mit Größe · Datum darunter, Status nur als Punkt, Symbol-Knöpfe rechts.
   Täglich genutzte Ansicht → keine Animation. Global (nicht .crm-gescoped), damit beide
   Shells dasselbe Bild zeigen — wie die übrigen .opp-kb-*-Regeln oben. */
.opp-kb-docs-section[data-kb-layout="clean"] { padding: 0; margin: 0; }
.kb-docs-list--clean { display: flex; flex-direction: column; }
.kb-doc-row--clean {
  display: flex; align-items: center; gap: .75rem;
  padding: .5rem 0; border-bottom: 1px solid var(--border);
}
.kb-doc-row--clean:last-child { border-bottom: none; }
/* Kachel: je Art ein Paar dunkel/hell. Klassisch ist Dunkel der Default und Hell
   [data-theme="light"]; im Redesign ist .crm hell und html[data-theme="dark"] .crm dunkel
   — die Redesign-Shell steuert html[data-theme] nicht zuverlässig (vgl. style-redesign.css
   „Legacy-Kompatibilitaet"), daher beide Achsen ausdrücklich. */
.kb-file-tile {
  --kb-fg-d: #cbd5e1; --kb-bg-d: rgba(148, 163, 184, .16);
  --kb-fg-l: #4A5568; --kb-bg-l: rgba(74, 85, 104, .10);
  flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center;
  width: 2.5rem; height: 2.5rem; border-radius: .5rem;
  color: var(--kb-fg-d); background: var(--kb-bg-d);
  font-size: var(--fs-label); font-weight: 500; letter-spacing: .02em; line-height: 1;
}
.kb-file-tile--pdf        { --kb-fg-d: #fca5a5; --kb-bg-d: rgba(239, 68, 68, .16);  --kb-fg-l: #b91c1c; --kb-bg-l: rgba(220, 38, 38, .10); }
.kb-file-tile--word       { --kb-fg-d: #93c5fd; --kb-bg-d: rgba(59, 130, 246, .16); --kb-fg-l: #1d4ed8; --kb-bg-l: rgba(37, 99, 235, .10); }
.kb-file-tile--excel      { --kb-fg-d: #86efac; --kb-bg-d: rgba(34, 197, 94, .14);  --kb-fg-l: #166534; --kb-bg-l: rgba(22, 163, 74, .10); }
.kb-file-tile--powerpoint { --kb-fg-d: #fdba74; --kb-bg-d: rgba(249, 115, 22, .16); --kb-fg-l: #9a3412; --kb-bg-l: rgba(234, 88, 12, .10); }
.kb-file-tile--image      { --kb-fg-d: #c4b5fd; --kb-bg-d: rgba(139, 92, 246, .18); --kb-fg-l: #6d28d9; --kb-bg-l: rgba(124, 58, 237, .10); }
.kb-file-tile--email      { --kb-fg-d: #5eead4; --kb-bg-d: rgba(20, 184, 166, .16); --kb-fg-l: #0f766e; --kb-bg-l: rgba(13, 148, 136, .10); }
[data-theme="light"] .kb-file-tile, .crm .kb-file-tile { color: var(--kb-fg-l); background: var(--kb-bg-l); }
html[data-theme="dark"] .crm .kb-file-tile, .crm.dark .kb-file-tile { color: var(--kb-fg-d); background: var(--kb-bg-d); }
.kb-doc-main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: .125rem; }
.kb-doc-name {
  display: block; max-width: 100%; padding: 0; border: 0; background: none;
  color: var(--text-1); font: inherit; font-size: var(--fs-body); font-weight: 500; text-align: left;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
button.kb-doc-name { cursor: pointer; }
button.kb-doc-name:hover { text-decoration: underline; text-underline-offset: 2px; }
.kb-doc-meta { font-size: var(--fs-meta); color: var(--text-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kb-doc-dot { flex: 0 0 auto; width: .5rem; height: .5rem; border-radius: 50%; background: var(--warning); }
.kb-doc-dot--failed { background: var(--danger); }
.kb-doc-actions { flex: 0 0 auto; display: inline-flex; gap: .25rem; }
.kb-doc-iconbtn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 2rem; height: 2rem; padding: 0; border-radius: .375rem;
  border: 1px solid transparent; background: transparent; color: var(--text-2); cursor: pointer;
}
.kb-doc-iconbtn:hover { background: rgba(148, 163, 184, .14); color: var(--text-1); }
.kb-doc-iconbtn--danger:hover { color: var(--danger); }
.kb-doc-name:focus-visible, .kb-doc-iconbtn:focus-visible {
  outline: 2px solid var(--primary); outline-offset: 2px; border-radius: .375rem;
}
.crm .kb-doc-name:focus-visible, .crm .kb-doc-iconbtn:focus-visible { outline-color: var(--focus); }
.crm .kb-doc-dot { background: var(--ad-orange-700); }
.crm .kb-doc-dot--failed { background: var(--ad-red); }
/* PR1.476 #732 — ältere Lebensläufe/Fotos hinter einem nativen <details> (beide Shells).
   Linkfarbe aus dem Kurzprofil-Satz (≥ 4.5:1 in allen drei Theme-Zuständen). Keine Animation. */
.kb-docs-older, .esb-head-aside, .cert-load-error {
  --pr476-link: #8CC8FF;
}
[data-theme="light"] .kb-docs-older, [data-theme="light"] .esb-head-aside, [data-theme="light"] .cert-load-error,
.crm .kb-docs-older, .crm .esb-head-aside, .crm .cert-load-error { --pr476-link: #005AA3; }
html[data-theme="dark"] .crm .kb-docs-older, html[data-theme="dark"] .crm .esb-head-aside,
html[data-theme="dark"] .crm .cert-load-error, .crm.dark .kb-docs-older, .crm.dark .esb-head-aside,
.crm.dark .cert-load-error { --pr476-link: #8CC8FF; }
.kb-docs-older { margin-top: .25rem; }
.kb-docs-older > summary {
  display: inline-flex; align-items: center; gap: .25rem; padding: .375rem .25rem; border-radius: .375rem;
  color: var(--pr476-link); font-size: var(--fs-ui); font-weight: 500; cursor: pointer; list-style: none;
}
.kb-docs-older > summary::-webkit-details-marker { display: none; }
.kb-docs-older > summary::after {
  content: ''; display: inline-block; width: .875em; height: .875em; background-color: currentColor;
  -webkit-mask: var(--ic-mask-caret-down); mask: var(--ic-mask-caret-down);
}
.kb-docs-older[open] > summary::after { -webkit-mask: var(--ic-mask-caret-up); mask: var(--ic-mask-caret-up); }
.kb-docs-older > summary:hover { text-decoration: underline; text-underline-offset: 2px; }
.kb-docs-older > summary:focus-visible { outline: 2px solid var(--pr476-link); outline-offset: 2px; }
.kb-docs-older .kb-doc-name { font-weight: 500; color: var(--text-2); }
/* PR1.423 #659 — Fusszeile der Anhänge-Karte + Änderungsverlauf (kb-documents-list.js,
   modals/kb-history-viewer.js). Global wie BF-65 oben, damit beide Shells dasselbe Bild
   zeigen; .crm-Zeilen tauschen nur Farben. Täglich genutzte Karte → keine Animation. */
.kb-docs-footer {
  display: flex; align-items: center; gap: .5rem; min-height: 2.25rem;
  margin-top: .5rem; padding: .5rem 0 0; border-top: 1px solid var(--border);
  font-size: var(--fs-ui); color: var(--text-2);
}
.kb-docs-footer:empty { border-top-color: transparent; }
.kb-docs-footer-icon { display: inline-flex; color: var(--text-3); }
.kb-docs-footer-text { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kb-docs-footer-link {
  flex: 0 0 auto; padding: .25rem .375rem; border: 0; border-radius: .375rem; background: none;
  color: var(--primary); font: inherit; font-weight: 600; cursor: pointer;
}
.kb-docs-footer-link:hover { text-decoration: underline; text-underline-offset: 2px; }
.kb-docs-footer-link:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.crm .kb-docs-footer-link { color: var(--ad-blue-700); }
.crm .kb-docs-footer-link:focus-visible { outline-color: var(--focus); }
.kb-history-viewer { width: min(640px, 96vw); max-height: 88vh; display: flex; flex-direction: column; }
.kb-hist-head { display: flex; justify-content: space-between; align-items: center; gap: 1rem; }
.kb-hist-head h2 { margin: 0; }
.kb-hist-body { overflow: auto; max-height: 70vh; padding: 1rem 1.25rem; }
.kb-hist-state { margin: 0; padding: 1.5rem 0; text-align: center; font-size: var(--fs-body); color: var(--text-2); }
.kb-hist-state--error { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: .5rem; color: var(--danger); }
.kb-hist-state-icon { display: inline-flex; }
/* PR1.535 #816 — Filter-Chips, Tagesgruppen, Titel-Satz + Zeilen „Feld | alt → neu | Differenz".
   Farbe der Differenz heisst gut/schlecht, das Vorzeichen steht immer dabei. */
.kb-hist-filters { display: flex; flex-wrap: wrap; gap: .375rem; margin: 0 0 1rem; }
.kb-hist-chip {
  display: inline-flex; align-items: center; gap: .375rem; min-height: 2rem; padding: .25rem .75rem;
  border: 1px solid var(--border); border-radius: 999px; background: transparent;
  color: var(--text-2); font: inherit; font-size: var(--fs-ui); cursor: pointer;
}
.kb-hist-chip:hover { color: var(--text-1); border-color: var(--text-3); }
.kb-hist-chip:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.kb-hist-chip[aria-pressed="true"] { border-color: var(--primary); background: var(--primary); color: #fff; }
.kb-hist-chip-count { font-variant-numeric: tabular-nums; opacity: .8; }
.kb-hist-day + .kb-hist-day { margin-top: 1rem; }
.kb-hist-day-title {
  margin: 0 0 .5rem; font-size: var(--fs-meta); font-weight: 600; color: var(--text-3);
}
.kb-hist-timeline { list-style: none; margin: 0; padding: 0; }
.kb-hist-entry { position: relative; display: flex; gap: .75rem; padding: 0 0 1rem; }
/* Senkrechte Linie zwischen den Symbolen; der letzte Eintrag des Tages endet am Symbol. */
.kb-hist-entry:not(:last-child)::before {
  content: ""; position: absolute; left: .6875rem; top: 1.75rem; bottom: .25rem;
  width: 2px; background: var(--border);
}
.kb-hist-sym {
  flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center;
  width: 1.5rem; height: 1.5rem; border-radius: 50%;
  background: var(--bg-card); border: 1px solid var(--border); color: var(--primary);
}
.kb-hist-sym svg { width: .875rem; height: .875rem; }
.kb-hist-entry-main { flex: 1 1 auto; min-width: 0; }
.kb-hist-entry-head { display: flex; align-items: baseline; gap: .75rem; }
.kb-hist-title { flex: 1 1 auto; min-width: 0; font-size: var(--fs-body); font-weight: 600; line-height: 1.4; color: var(--text-1); }
.kb-hist-time { flex: 0 0 auto; font-size: var(--fs-meta); font-variant-numeric: tabular-nums; color: var(--text-3); }
.kb-hist-who { margin-top: .0625rem; font-size: var(--fs-meta); color: var(--text-3); }
.kb-hist-rows { list-style: none; margin: .375rem 0 0; padding: 0; display: grid; gap: .1875rem; }
.kb-hist-row {
  display: grid; grid-template-columns: minmax(7rem, 11rem) 1fr auto; align-items: baseline; gap: .5rem;
  font-size: var(--fs-ui); line-height: 1.5; color: var(--text-2);
}
.kb-hist-row--text { display: block; }
.kb-hist-label { color: var(--text-3); overflow-wrap: anywhere; }
.kb-hist-vals { min-width: 0; overflow-wrap: anywhere; }
.kb-hist-delta { font-variant-numeric: tabular-nums; font-weight: 600; white-space: nowrap; color: var(--text-2); }
.kb-hist-delta.is-good { color: var(--success); }
.kb-hist-delta.is-bad { color: var(--danger); }
.kb-hist-hint { grid-column: 2 / -1; font-size: var(--fs-meta); color: var(--text-3); }
.kb-hist-folge { margin: .375rem 0 0; font-size: var(--fs-ui); font-weight: 500; color: var(--text-1); }
.kb-hist-tech { margin: .5rem 0 0; padding-top: .75rem; border-top: 1px solid var(--border); font-size: var(--fs-ui); color: var(--text-3); }
.kb-hist-tech-toggle { padding: 0; border: 0; background: none; color: var(--primary); font: inherit; font-weight: 600; cursor: pointer; }
.kb-hist-tech-toggle:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.kb-hist-old { text-decoration: line-through; color: var(--text-3); }
.kb-hist-arrow { display: inline-flex; vertical-align: -2px; color: var(--text-3); }
.kb-hist-new {
  padding: 0 .3125rem; border-radius: .25rem;
  background: rgba(34, 197, 94, .14); color: #86efac;
}
[data-theme="light"] .kb-hist-new { background: rgba(22, 163, 74, .10); color: #166534; }
@media (max-width: 560px) {
  .kb-hist-row { grid-template-columns: 1fr auto; row-gap: 0; }
  .kb-hist-label { grid-column: 1 / -1; }
}
.attachment-list { display: flex; flex-direction: column; }
.attachment-item {
  display: grid; grid-template-columns: 24px 1fr auto 32px 32px;
  gap: 10px; align-items: center; padding: 8px 0;
  border-bottom: 1px solid var(--border); font-size: var(--fs-ui);
}
.attachment-item:last-child { border-bottom: none; }
.att-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.att-meta { color: var(--text-3); font-size: var(--fs-label); white-space: nowrap; }

.opp-jira-link { color: var(--accent); text-decoration: none; font-weight: 600; }
.opp-jira-link:hover { text-decoration: underline; }

/* ─────────────────────────────────────────
   PR1.127 (#278) — Quick-Staffing Drag&Drop (Legacy-Shell)
   Nur Custom-Properties (kein hartes Hex für Text/Border) → WCAG-AA in Dark (:root)
   UND Light (:root[data-theme=light]) folgt automatisch den Tokens.
   ───────────────────────────────────────── */
.opp-quick-staffing {
  margin: 16px 0;
  padding: 14px;
  background: var(--bg-2, var(--bg-card));
  border: 1px solid var(--border);
  border-radius: var(--radius-lg, 10px);
}
.opp-qs-head {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 8px;
}
.opp-qs-head .form-section-label { margin: 0; }
.opp-qs-util { font-size: var(--fs-ui); color: var(--text-2); font-weight: 500; }
.opp-qs-under-hint { font-size: var(--fs-meta); color: var(--warning); font-weight: 500; margin-left: auto; }

.opp-qs-bar {
  height: 6px; border-radius: 999px; overflow: hidden; margin-bottom: 12px;
  background: color-mix(in srgb, var(--text-3) 22%, transparent);
}
.opp-qs-bar-fill {
  height: 100%; border-radius: 999px; background: var(--success);
  transition: width .25s ease;
}
.opp-qs-bar-fill.under { background: var(--warning); }
/* PR1.343 (#557) — Staffing-Ampel. Ton kommt aus der einen Rechnung (dashboard-widgets.js
   staffingAmpel), nicht aus einer eigenen Zaehlung. Gemessen gegen den Kartengrund:
   Dark #0e1420 → gruen 7.26 · gelb 8.58 · rot 4.90; Light #fff → 5.48 · 5.02 · 5.74 (≥ 3:1). */
.opp-qs-bar-fill.tone-green  { background: var(--success); }
.opp-qs-bar-fill.tone-yellow { background: var(--warning); }
.opp-qs-bar-fill.tone-red    { background: var(--danger); }
/* Ohne Zuordnung ist der Balken leer — der Hinweis sagt, was zu tun ist. */
.opp-qs-empty-hint {
  margin: -4px 0 10px; font-size: var(--fs-meta); font-weight: 500; color: var(--staff-ink-red);
}
/* „Mehr Kandidaten" — vorher ein Ghost-Link, „den übersieht man leicht". Jetzt ein
   sekundärer Knopf in voller Breite direkt unter der Ablage. */
.opp-qs-more {
  display: flex; justify-content: center; align-items: center; gap: 6px;
  width: 100%; margin-top: 10px; font-weight: 600;
}

.opp-staffing-dropzone {
  min-height: 64px; padding: 12px;
  border: 1.5px dashed var(--border); border-radius: var(--radius, 10px);
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px;
  text-align: center;
  transition: border-color .15s ease, background .15s ease;
}
.opp-staffing-dropzone.staffing-dropzone { cursor: copy; }
.opp-staffing-dropzone-readonly { border-style: solid; opacity: .85; }
.opp-qs-drop-hint { font-size: var(--fs-ui); color: var(--text-3); }
/* Highlight beim Drüberziehen (dezent, akzentgetönt) — vom Contract gesetzt. */
.staffing-dropzone-over {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 12%, transparent);
}

.opp-qs-chips { display: flex; flex-wrap: wrap; gap: 6px; width: 100%; justify-content: flex-start; }
.opp-qs-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 8px 3px 4px;
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: 999px; font-size: var(--fs-meta); color: var(--text-1);
}
.opp-qs-chip-ini {
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px; border-radius: 50%; flex: 0 0 auto;
  border: 1.5px solid; font-size: var(--fs-label); font-weight: 500;
}
.opp-qs-chip-name { color: var(--text-2); }

/* ─────────────────────────────────────────
   PR1.169 (#322) — Besetzungs-Cockpit (Rollen-Modus)
   Eine Zeile + eigene Dropzone pro Rolle, plus „ohne Rolle". Über-/Unterbesetzung ist
   ein Etikett (Ticket-Beschluss 9): --warning für „offen", --danger-getönt für
   „überbesetzt" — beides Textfarbe, KEIN gesperrter Zustand. Nur Tokens, damit Light
   (:root[data-theme=light]) automatisch folgt.
   ───────────────────────────────────────── */
.opp-qs-roles { display: flex; flex-direction: column; gap: 10px; }
.opp-qs-role { display: flex; flex-direction: column; gap: 5px; }
.opp-qs-role-head {
  display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap;
}
.opp-qs-role-name { font-size: var(--fs-ui); font-weight: 500; color: var(--text-1); }
.opp-qs-role-count { font-size: var(--fs-meta); color: var(--text-2); font-family: 'Fira Sans', system-ui, sans-serif; font-variant-numeric: tabular-nums; }
/* PR1.233 #404 — FTE-Bilanz neben der Kopfzaehlung. Bewusst dieselbe Optik: „1/2 besetzt"
   und „0,5 von 1,5 FTE" sind gleichwertige Aussagen ueber dieselbe Rolle, nur in anderer
   Einheit — eine davon zu daempfen hiesse, sie zur Fussnote zu erklaeren. Der Abstand
   kommt aus dem `gap` der Kopfzeile; ein Trennzeichen im Text muessten Screenreader
   mitlesen. */
.opp-qs-role-fte { font-size: var(--fs-meta); color: var(--text-2); font-family: 'Fira Sans', system-ui, sans-serif; font-variant-numeric: tabular-nums; }
.opp-qs-role-warn { font-size: var(--fs-label); font-weight: 500; margin-left: auto; }
.opp-qs-role-under { color: var(--warning); }
.opp-qs-role-over { color: var(--danger, var(--warning)); }
/* Die Zonen pro Rolle sind flacher als die einzelne Gesamt-Zone — bei fünf Rollen
   wären fünf 64px-Kästen sonst eine Bildschirmseite Leerraum. */
.opp-qs-role .opp-staffing-dropzone { min-height: 46px; padding: 9px; }
.opp-qs-role-none .opp-qs-role-name { color: var(--text-3); font-weight: 500; }
/* PR1.343 (#557) — leere „ohne Rolle"-Zone als flache Hinweiszeile statt eines Kastens,
   der wie eine weitere offene Rolle aussah. Bleibt Drop-Ziel. */
.opp-qs-role-none-hint .opp-staffing-dropzone { min-height: 32px; padding: 6px 9px; }
.opp-qs-role-none-hint .opp-qs-drop-hint { font-size: var(--fs-meta); }

/* Rollen-Auswahl im Team-Grid (ersetzt im Rollen-Modus das Freitext-Feld). */
.team-input-role-select {
  width: 100%; box-sizing: border-box;
  background: var(--bg-card); color: var(--text-1);
  border: 1px solid var(--border); border-radius: var(--radius-sm, 6px);
  padding: 4px 6px; font-size: var(--fs-meta);
}

/* Vorschlags-Kandidaten als Drag-Quelle (rechte Spalte). */
.opp-cand-row-wrap[data-staffing-drag] { cursor: grab; }
.opp-cand-row-wrap[data-staffing-drag]:active { cursor: grabbing; }
.opp-cand-row-wrap.dragging { opacity: .5; }

/* On-Demand-MA-Pool. */
.opp-ma-pool { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--border); }
.opp-ma-pool[hidden] { display: none; }
.opp-ma-pool-search {
  width: 100%; box-sizing: border-box; margin-bottom: 8px;
  padding: 7px 10px; font-size: var(--fs-ui);
  background: var(--bg-card); color: var(--text-1);
  border: 1px solid var(--border); border-radius: var(--radius, 8px);
}
.opp-ma-pool-search:focus { outline: none; border-color: var(--accent); }
.opp-ma-pool-list { display: flex; flex-direction: column; gap: 6px; max-height: 260px; overflow-y: auto; }
.opp-ma-pool-empty { font-size: var(--fs-ui); color: var(--text-3); padding: 6px 2px; }
.opp-ma-card {
  display: flex; align-items: center; gap: 10px; padding: 7px 10px;
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: var(--radius, 8px); cursor: grab;
}
.opp-ma-card:active { cursor: grabbing; }
.opp-ma-card.dragging { opacity: .5; }
.opp-ma-card-ini {
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; border-radius: 50%; flex: 0 0 auto;
  border: 1.5px solid; font-size: var(--fs-label); font-weight: 500;
}
.opp-ma-card-body { display: flex; flex-direction: column; min-width: 0; }
.opp-ma-card-name { font-size: var(--fs-ui); color: var(--text-1); font-weight: 500; }
.opp-ma-card-role { font-size: var(--fs-label); color: var(--text-3); }

/* PR1.253 (#447) — Freie Kapazität in den Staffing-Auswahlpunkten.
   Als Klasse und nicht als Inline-Farbe: `--warning` ist pro Shell UND pro Theme anders
   belegt, und eine fest verdrahtete Farbe fiel im hellen Redesign auf 2,14:1 zurück.
   Hier greifen die Theme-Belegungen dieser Datei (#f59e0b dunkel, #B45309 hell), die auf
   ihrem jeweiligen Grund tragen. Das Redesign belegt dieselben Klassen eigens. */
.cap-tag { font-size: var(--fs-label); white-space: nowrap; }
.cap-tag-ok { color: var(--text-2); }
.cap-tag-none { color: var(--warning); }
.cap-tag-unknown { color: var(--text-3); }
/* In der schmalen Ablage steht die Zahl unter Rolle und Level statt rechts daneben. */
.opp-ma-card-cap { font-size: var(--fs-label); }

/* Responsive: Detail-View < 1024px → stacked */
@media (max-width: 1024px) {
  .opp-detail-3col { grid-template-columns: 1fr; }
  .opp-hero { flex-wrap: wrap; }
  .opp-dynrow { grid-template-columns: 1fr 100px 36px; }
}



/* ─────────────────────────────────────────
   HF3.26 — Jira-Upload-Dialog
   ───────────────────────────────────────── */
/* Scope-spezifisches Overlay (analog zu .customer-import-overlay aus HF3.03b) —
   wird immer mit display:flex sichtbar (kein .open-Toggle). */
.jira-upload-overlay {
    display: flex;
    position: fixed; inset: 0;
    align-items: center; justify-content: center;
    background: rgba(0,0,0,.6);
    z-index: 1000;
}
.jira-upload-overlay .modal {
    background: var(--bg-card); border-radius: var(--radius-lg);
    border: 1px solid var(--border);
    padding: 0; overflow: auto;
}
.jira-upload-overlay .modal.modal-xl {
    width: 96vw; max-width: 1400px; max-height: 92vh;
}
.jira-upload-overlay .modal-header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 12px 16px; border-bottom: 1px solid var(--border);
}
.jira-upload-overlay .modal-header h2 { margin: 0; font-size: var(--fs-title); color: var(--text-1); }
.jira-upload-overlay .modal-close {
    background: transparent; border: none; font-size: var(--fs-display);
    color: var(--text-2); cursor: pointer; padding: 0 8px;
}
.jira-upload-overlay .modal-body { padding: 16px; }
.jira-upload-overlay .modal-footer {
    display: flex; align-items: center; justify-content: flex-end; gap: 8px;
    padding: 12px 16px; border-top: 1px solid var(--border);
}
.jira-upload-hint {
    font-size: var(--fs-ui);
    color: var(--text-2);
    margin: 0 0 10px 0;
    line-height: 1.4;
}
.jira-upload-dropzone {
    border: 2px dashed var(--border);
    border-radius: 8px;
    padding: 24px 16px;
    text-align: center;
    cursor: pointer;
    background: var(--bg-card-alt, rgba(255,255,255,0.02));
    transition: all 0.15s;
    margin-bottom: 12px;
}
.jira-upload-dropzone:hover,
.jira-upload-dropzone.dz-hover {
    border-color: var(--accent);
    background: rgba(78, 162, 255, 0.08);
}
.jira-upload-dropzone .dropzone-icon {
    font-size: var(--fs-kpi);
    margin-bottom: 8px;
}
.jira-paste-block {
    margin: 12px 0;
    padding: 10px;
    background: var(--bg-card-alt, rgba(255,255,255,0.02));
    border-radius: 6px;
}
.jira-paste-header {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
    margin-bottom: 8px;
    font-size: var(--fs-body);
}
.jira-paste-header label {
    color: var(--text-2);
}
.jira-paste-header input[type="text"],
.jira-paste-header input[type="url"] {
    flex: 1 1 180px;
    padding: 4px 8px;
    font-size: var(--fs-ui);
}
#ju-paste-text {
    width: 100%;
    font-family: monospace; /* PR1.437 Ausnahme: eingefuegter Jira-Rohtext */
    font-size: var(--fs-ui);
    padding: 8px;
    border: 1px solid var(--border);
    border-radius: 4px;
    background: var(--bg-input);
    color: var(--text);
    resize: vertical;
}
.jira-upload-queue {
    margin: 12px 0;
    padding: 10px;
    background: var(--bg-card-alt, rgba(255,255,255,0.02));
    border-radius: 6px;
}
.jira-upload-queue h4,
.jira-upload-review h4 {
    margin: 0 0 8px 0;
    font-size: var(--fs-body);
    font-weight: 600;
    color: var(--text-2);
}
.jira-queue-table,
.jira-review-table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--fs-meta);
}
.jira-queue-table th,
.jira-review-table th {
    background: var(--bg-table-head, rgba(0,0,0,0.2));
    padding: 6px 8px;
    text-align: left;
    font-weight: 500;
    font-size: var(--fs-label);
    color: var(--text-2);
    border-bottom: 1px solid var(--border);
    white-space: nowrap;
}
.jira-queue-table td,
.jira-review-table td {
    padding: 6px 8px;
    border-bottom: 1px solid var(--border);
    vertical-align: top;
}
.jira-review-scroll {
    max-height: 50vh;
    overflow: auto;
    border: 1px solid var(--border);
    border-radius: 4px;
}
.jira-review-table .ju-edit {
    padding: 3px 6px;
    font-size: var(--fs-meta);
    width: 100%;
    min-width: 80px;
    background: var(--bg-input);
    border: 1px solid var(--border);
    border-radius: 3px;
    color: var(--text);
}
.jira-review-table .ju-num {
    max-width: 80px;
    text-align: right;
}
.jira-review-table .badge-sm {
    display: inline-block;
    font-size: var(--fs-label);
    padding: 2px 5px;
    background: var(--primary);
    color: white;
    border-radius: 3px;
    margin-right: 3px;
    white-space: nowrap;
}
.jira-review-table .badge-warning-sm {
    display: inline-block;
    font-size: var(--fs-label);
    padding: 2px 5px;
    background: var(--warning, #d97706);
    color: white;
    border-radius: 10px;
}
/* PR1.37 Hotfix-3 (2026-05-11): Missing-Felder als Chip-Liste statt anonymer Zahl.
   User sieht direkt welche Felder fehlen; hint-Text bleibt als hover-Tooltip pro Chip. */
.jira-review-table .ju-missing { max-width: 220px; line-height: 1.6; }
.jira-review-table .ju-missing-chip {
    display: inline-block;
    font-size: var(--fs-label);
    padding: 1px 6px;
    margin: 1px 2px 1px 0;
    background: rgba(217, 119, 6, 0.18);
    color: var(--warning, #d97706);
    border: 1px solid rgba(217, 119, 6, 0.4);
    border-radius: 8px;
    white-space: nowrap;
    cursor: help;
}
.ju-status-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    margin-right: 6px;
    vertical-align: middle;
}
.ju-status-dot.queued { background: var(--text-3); }
.ju-status-dot.running { background: var(--primary); animation: pulse 1.5s ease-in-out infinite; }
.ju-status-dot.ok { background: var(--success); }
.ju-status-dot.err { background: var(--danger); }
@keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.4; }
}
.ju-error {
    color: var(--danger);
    font-size: var(--fs-label);
}
.ju-dup-warn,
.ju-rel-warn {
    display: block;
    margin-top: 4px;
    padding: 4px 6px;
    background: rgba(217, 119, 6, 0.12);
    border-left: 3px solid var(--warning, #d97706);
    font-size: var(--fs-label);
    border-radius: 3px;
}
.ju-dup-warn label { display: block; margin-top: 2px; }

/* PR1.198 #357 — Pflichtfeld-Gate im Import.
   Eine gesperrte Zeile wird gedaempft, nicht rot durchgestrichen: sie ist kein
   Fehler, sondern unfertig. Die Nachpflege-Zeile direkt darunter sagt, was fehlt. */
.jira-review-table tr.ju-row-blocked > td { opacity: 0.72; }
.ju-fix-row > td {
    padding: 8px 10px 10px;
    background: rgba(217, 119, 6, 0.08);
    border-left: 3px solid var(--warning, #d97706);
}
.ju-fix-head {
    margin: 0 0 8px;
    font-size: var(--fs-meta);
    color: var(--text-2);
}
.ju-fix-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 8px 12px;
}
.ju-fix-field--wide { grid-column: 1 / -1; }
.ju-fix-field label {
    display: block;
    margin-bottom: 3px;
    font-size: var(--fs-label);
    /* --text-3 kaeme auf 3.87:1 — fuer 0.7-rem-Text zu wenig (WCAG 1.4.3 verlangt 4.5:1). */
    color: var(--text-2);
}
.ju-fix-field .ju-fix {
    width: 100%;
    padding: 4px 6px;
    background: var(--bg-card2);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-sm);
    color: var(--text-1);
    font: inherit;
    font-size: var(--fs-meta);
}
.ju-fix-field textarea.ju-fix { resize: vertical; min-height: 48px; }
.ju-fix-field .ju-fix:focus-visible { outline: 2px solid var(--primary); outline-offset: 1px; }

.jira-upload-footer-status {
    flex: 1;
    font-size: var(--fs-ui);
    color: var(--text-2);
    padding: 0 8px;
}
.confidence-badge.conf-high { background: var(--success); color: white; padding: 2px 6px; border-radius: 3px; font-size: var(--fs-label); }
.confidence-badge.conf-med { background: var(--warning, #d97706); color: white; padding: 2px 6px; border-radius: 3px; font-size: var(--fs-label); }
.confidence-badge.conf-low { background: var(--danger); color: white; padding: 2px 6px; border-radius: 3px; font-size: var(--fs-label); }

/* Skill-Rating-Editor */
.skill-rating-list {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 200px;
}
.skill-rating-row {
    display: flex;
    gap: 4px;
    align-items: center;
}
.skill-rating-name {
    flex: 1;
    padding: 2px 5px;
    font-size: var(--fs-meta);
    background: var(--bg-input);
    border: 1px solid var(--border);
    border-radius: 3px;
    color: var(--text);
}
.skill-rating-level {
    font-size: var(--fs-meta);
    padding: 2px 4px;
    background: var(--bg-input);
    border: 1px solid var(--border);
    border-radius: 3px;
    color: var(--text);
}
.skill-rating-level.skill-rating-unknown {
    font-style: italic;
    color: var(--text-2);
    border-color: var(--warning, #d97706);
}
.skill-rating-remove {
    background: none;
    border: none;
    color: var(--danger);
    font-size: var(--fs-body);
    cursor: pointer;
    padding: 0 4px;
}
.skill-rating-add {
    align-self: flex-start;
    background: var(--bg-card-alt, rgba(255,255,255,0.05));
    border: 1px dashed var(--border);
    border-radius: 3px;
    padding: 3px 8px;
    font-size: var(--fs-label);
    color: var(--text-2);
    cursor: pointer;
    margin-top: 2px;
}
.skill-rating-add:hover { border-color: var(--accent); color: var(--accent); }

/* ============================================================
   HF3.09a — Dashboard-Widgets (5 State-Widgets)
   ============================================================ */

/* PR1.308 (#517): vier Spalten statt drei — erst damit geht „ein Viertel / die Haelfte
   / volle Breite" ueberhaupt auf. Bewusst OHNE `grid-auto-flow: dense`: eine breite
   Karte, die nicht mehr in die angebrochene Zeile passt, rutscht in die naechste und
   laesst die Luecke stehen. Auffuellen wuerde Karten an Stellen schieben, die niemand
   eingestellt hat — die Reihenfolge ist die Ansage des Nutzers (Entscheid 28.08.2026). */
.dash-widgets-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 18px;
    margin: 18px 0;
    /* PR1.308 (#517): jede Karte so hoch wie ihr Inhalt. Ohne das streckt das Raster
       jede Karte auf die Hoehe der hoechsten ihrer Zeile — eine Kachel mit einer Zahl
       darin bekam so die Hoehe einer Zehnerliste danebengestellt. Genau das war die
       „extrem geraeumige" Karte aus dem Grill. Das Redesign-Raster macht es seit jeher
       so (`align-items: start`); hier lief es auseinander. */
    align-items: start;
}

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

/* BF-94 (#722) — eine frisch hinzugefuegte Karte leuchtet nach dem Schliessen von
   „Dashboard anpassen" einmal kurz auf, damit man sie findet. Nur dann, nie im Alltag. */
@keyframes dash-card-neu-aus { from { outline-color: var(--primary); } to { outline-color: transparent; } }
.dash-card-neu { outline: 2px solid var(--primary); outline-offset: 2px; animation: dash-card-neu-aus 1.4s ease-out .2s forwards; }
@media (prefers-reduced-motion: reduce) { .dash-card-neu { animation: none; } }

/* Schmaler wird das Raster grober — und die Spannweiten muessen mit zurueck, sonst
   laeuft eine grosse Karte ueber den Rand hinaus. Bei einer Spalte ist ohnehin jede
   Karte voll breit; das ist genau die Zusicherung „gross wird volle Breite". */
@media (max-width: 1200px) {
    .dash-widgets-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .dash-widget-card.dash-size-klein  { grid-column: span 1; }
    .dash-widget-card.dash-size-mittel { grid-column: span 1; }
    .dash-widget-card.dash-size-gross  { grid-column: span 2; }
}
@media (max-width: 900px) {
    .dash-widgets-grid { grid-template-columns: minmax(0, 1fr); }
    .dash-widget-card.dash-size-klein,
    .dash-widget-card.dash-size-mittel,
    .dash-widget-card.dash-size-gross { grid-column: span 1; }
}

.dash-widget-card {
    display: flex;
    flex-direction: column;
    min-height: 260px;
}

/* Die Mindesthoehe war auf ein Drittel Breite geeicht. Ein Viertel mit 260px waere ein
   Hochkant-Streifen, volle Breite mit 260px eine leere Flaeche. */
.dash-widget-card.dash-size-klein { min-height: 150px; }
.dash-widget-card.dash-size-gross { min-height: 300px; }

/* Der Menue-Ausloeser sitzt als DRITTES Kind in der Kopfzeile. `.card-header` verteilt
   mit space-between — ohne diesen Schub landet der bestehende rechte Knopf mittig. */
.dash-widget-card > .card-header { gap: 8px; }
.dash-widget-card > .card-header > :first-child { margin-right: auto; min-width: 0; }

.dash-empty {
    color: var(--text-3);
    font-size: var(--fs-ui);
    padding: 12px 0;
    text-align: center;
}

.dash-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 4px;
    border-bottom: 1px solid var(--border);
    cursor: pointer;
    transition: background-color 120ms ease;
}
.dash-row:hover { background-color: rgba(255,255,255,0.03); }
.dash-row:last-child { border-bottom: none; }

.dash-row-main { flex: 1; min-width: 0; }
.dash-row-title {
    font-size: var(--fs-body);
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: var(--text-1);
}
.dash-row-sub {
    font-size: var(--fs-label);
    color: var(--text-2);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.dash-row-right {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
}
.dash-row-right-col {
    flex-direction: column;
    align-items: flex-end;
    gap: 1px;
}

.dash-rank {
    font-size: var(--fs-label);
    font-weight: 500;
    color: var(--text-3);
    width: 28px;
    text-align: right;
}

.dash-metric {
    font-size: var(--fs-body);
    font-weight: 500;
    color: var(--accent);
}
.dash-metric-sub {
    font-size: var(--fs-label);
    color: var(--text-3);
}

/* Staffing-Badges */
.staffing-badge {
    display: inline-block;
    font-size: var(--fs-label);
    font-weight: 500;
    padding: 2px 7px;
    border-radius: 10px;
    letter-spacing: .02em;
    white-space: nowrap;
}
/* PR1.343 (#557) — Schriftfarben der Ampel als eigene Tokens: --danger auf dem roten Tint
   kam im Dark-Theme nur auf 4.10:1, --warning im Light-Theme auf 4.45:1 — beide unter AA
   fuer die kleine Badge-Schrift. Gemessen auf dem jeweiligen Tint: Dark gruen 5.45 ·
   gelb 6.06 · rot 5.58; Light 4.61 · 6.29 · 4.51. */
:root {
  --staff-ink-green: var(--success);
  --staff-ink-yellow: var(--warning);
  --staff-ink-red: #f87171;
}
:root[data-theme="light"] {
  --staff-ink-yellow: #92400E;
  --staff-ink-red: var(--danger);
}
.staffing-badge-voll  { background: rgba(16, 185, 129, .18); color: var(--staff-ink-green);  border: 1px solid rgba(16, 185, 129, .4); }
.staffing-badge-teil  { background: rgba(234, 179, 8, .18);  color: var(--staff-ink-yellow); border: 1px solid rgba(234, 179, 8, .4); }
.staffing-badge-fehlt { background: rgba(239, 68, 68, .18);  color: var(--staff-ink-red);    border: 1px solid rgba(239, 68, 68, .4); }
/* Farbpunkt vor dem Text — die Ampel ist auch ohne Farbsehen ueber den Text lesbar. */
.staffing-dot {
    display: inline-block; width: .5em; height: .5em; margin-right: .4em;
    border-radius: 50%; background: currentColor; vertical-align: .05em;
}

.dash-fte-pill {
    display: inline-block;
    font-size: var(--fs-label);
    font-weight: 500;
    padding: 2px 7px;
    border-radius: 10px;
    background: var(--bg-card-alt, rgba(255,255,255,.04));
    color: var(--text-2);
    border: 1px solid var(--border);
    white-space: nowrap;
}

.event-count-pill {
    display: inline-block;
    font-size: var(--fs-label);
    font-weight: 500;
    padding: 2px 7px;
    border-radius: 10px;
    background: rgba(99, 102, 241, .18);
    color: var(--primary);
    border: 1px solid rgba(99, 102, 241, .4);
    cursor: pointer;
    white-space: nowrap;
}
.event-count-pill:hover { background: rgba(99, 102, 241, .3); }

.dash-new-pill {
    display: inline-block;
    font-size: var(--fs-label);
    font-weight: 500;
    padding: 2px 7px;
    border-radius: 10px;
    background: var(--accent);
    color: #fff;
    letter-spacing: .05em;
}
.dash-free-pill {
    display: inline-block;
    font-size: var(--fs-label);
    font-weight: 500;
    padding: 2px 7px;
    border-radius: 10px;
    background: rgba(16, 185, 129, .18);
    color: var(--success);
    border: 1px solid rgba(16, 185, 129, .4);
}

.dash-status-won  { font-size: var(--fs-label); font-weight: 500; color: var(--success); padding: 2px 7px; border-radius: 10px; background: rgba(16, 185, 129, .18); border: 1px solid rgba(16, 185, 129, .4); }
.dash-status-lost { font-size: var(--fs-label); font-weight: 500; color: var(--danger);  padding: 2px 7px; border-radius: 10px; background: rgba(239, 68, 68, .18); border: 1px solid rgba(239, 68, 68, .4); }

/* PR1.29 (#167) — Neue-Items-Split, Direkter-Auftrag, Beauftragungsende */
.dash-new-summary {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: var(--fs-ui);
    color: var(--text-2);
    padding: 4px 0 10px;
    border-bottom: 1px solid var(--border);
    margin-bottom: 6px;
}
.dash-new-summary strong { color: var(--text-1); }
.dash-new-sep { color: var(--text-3); }
.dash-new-auftraege.is-clickable {
    cursor: pointer;
    color: var(--accent);
    border-radius: 6px;
    padding: 1px 4px;
    transition: background-color .12s;
}
.dash-new-auftraege.is-clickable:hover,
.dash-new-auftraege.is-clickable:focus-visible { background: rgba(99, 102, 241, .15); outline: none; }
.dash-new-auftraege.is-clickable strong { color: var(--accent); }
.dash-auftrag-pill {
    background: rgba(99, 102, 241, .18);
    color: var(--primary);
    border: 1px solid rgba(99, 102, 241, .4);
}
.dash-ending-row { cursor: pointer; }
.dash-ending-pill {
    display: inline-block;
    font-size: var(--fs-label);
    font-weight: 500;
    padding: 2px 7px;
    border-radius: 10px;
    background: rgba(234, 179, 8, .14);
    color: #eab308;
    border: 1px solid rgba(234, 179, 8, .4);
    white-space: nowrap;
}

/* Range + Toggle Buttons in Widget-Header */
.dash-range-switch, .dash-top-switch {
    display: inline-flex;
    gap: 2px;
    background: var(--bg-card-alt, rgba(255,255,255,.04));
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 2px;
}
.dash-range-btn, .dash-top-btn {
    border: none;
    background: transparent;
    color: var(--text-2);
    font-size: var(--fs-label);
    font-weight: 500;
    padding: 4px 10px;
    border-radius: 6px;
    cursor: pointer;
    transition: background-color 120ms ease, color 120ms ease;
}
.dash-range-btn:hover, .dash-top-btn:hover { color: var(--text-1); }
.dash-range-btn.active, .dash-top-btn.active {
    background: var(--primary);
    color: #fff;
}

/* PR1.100 (#247) Phase B — Anzahl-Kacheln (Legacy „Anzahl Opps/Projekte"). */
.dash-count-big {
    font-size: var(--fs-kpi);
    font-weight: 600;
    line-height: 1.1;
    color: var(--text-1);
}
.dash-count-sub {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 8px;
}
.dash-count-chip {
    font-size: var(--fs-label);
    padding: 2px 8px;
    border-radius: 999px;
    color: var(--text-2);
    background: var(--bg-card-alt, rgba(255, 255, 255, .04));
    border: 1px solid var(--border);
}

/* PR1.100 (#247) — Dashboard-Kategorie-Leiste (oberste Zeile) + Sichtbarkeits-Toggle.
   `.dash-cat-off` blendet Karten kategorie-abhängig aus (Sichtbarkeits-Toggle statt
   Re-Render → #221-sicher). Aktiv-Look = `.dash-range-btn`-Muster (var(--primary)/#fff,
   in beiden Themes AA-konform, bereits produktiv). */
.dash-cat-off { display: none !important; }
.dash-cat-bar {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    margin-bottom: 12px;
}
/* PR1.525 (#794) — Reiterzeile: Tablist links, Sprungknopf „Für Kapazität: Einsatzplan öffnen"
   rechts. Schmal bricht der Knopf unter die Reiter. Keine Bewegung (taegliche Startseite). */
.dash-cat-zeile {
    display: flex;
    align-items: center;
    gap: 8px 12px;
    flex-wrap: wrap;
    margin-bottom: 12px;
}
.dash-cat-zeile > .dash-cat-bar { margin-bottom: 0; flex: 1 1 auto; }
.dash-cat-sprung {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
}
.dash-cat-tab {
    border: 1px solid var(--border);
    background: var(--bg-card-alt, rgba(255,255,255,.04));
    color: var(--text-2);
    font-size: var(--fs-ui);
    font-weight: 500;
    padding: 6px 14px;
    border-radius: 8px;
    cursor: pointer;
    transition: background-color 120ms ease, color 120ms ease, border-color 120ms ease;
}
.dash-cat-tab:hover { color: var(--text-1); border-color: var(--text-3); }

/* PR1.388 (#609) — Hinweiszeile der Standardansichten + Leerzustand „Mein Dashboard".
   Beide Shells (Markup aus dashboard-registry.js). Bewusst ruhig: eine Textzeile in der
   Sekundaerfarbe, kein Kasten — es ist eine Erklaerung, keine Warnung. Keine Bewegung:
   das Dashboard ist die taegliche Startseite. */
.dash-std-note {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    margin: 0 0 12px;
    color: var(--text-2);
    font-size: var(--fs-ui);
}
.dash-mein-leer {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    padding: 20px;
}
.dash-mein-leer-titel { color: var(--text-1); font-weight: 600; }
.dash-mein-leer-text { color: var(--text-2); font-size: var(--fs-body); max-width: 60ch; }
/* Standardansicht: nichts anzupassen → Karten-Menue weg (klassische Shell; das Redesign
   rendert es dort gar nicht erst). */
#view-dashboard.dash-ist-standard .dash-card-menu-btn { display: none; }
/* PR1.408 (#638): „Dashboard anpassen" steht auf jedem Reiter (es passt „Mein Dashboard" an). */
.dash-cat-tab.active {
    background: var(--primary);
    border-color: var(--primary);
    color: #fff;
}

/* PR1.309 (#518) — Seitenfilter-Leiste (Zentrum · Zeitraum · Hyperscaler) und die
   Hinweiszeile im Kartenkopf. Bewusst ohne transition: die Startseite wird taeglich
   mehrfach geoeffnet, jede Bewegung hier waere Laerm. */
.dash-pf {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}
.dash-pf-cc {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
}
.dash-pf-info {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}
/* Leer bleibt die Statuszeile im Barrierefreiheits-Baum (role="status", kein
   display:none) — sonst wird die erste Meldung womoeglich nicht vorgelesen. Leer hat
   sie ohnehin keine Ausdehnung. */
.dash-pf-status {
    margin: 0;
    font-size: var(--fs-meta);
    color: var(--text-2);
}
.dash-pf-reset { white-space: nowrap; }
/* Design-Audit: die geteilte .cc-chip-Regel dimmt inaktive Chips auf opacity .55 —
   im hellen Thema ~4:1. In DIESER Leiste (Zeitraum, Hyperscaler und das eingebettete
   CC-Dropdown) voll deckend in der Sekundaer-Textfarbe; aktiv bleibt an Toenung + Rand
   (und aria-pressed) erkennbar. Die uebrigen Ansichten behalten ihre Chips. */
.dash-pf .cc-chip { opacity: 1; transition: none; }
.dash-pf .cc-chip:not(.active) { color: var(--text-2); }
/* Klassisch: Status + Zuruecksetzen in einer reservierten eigenen Zeile. Vorher schoben
   sie beim Einschalten des Filters die Knoepfe rechts in eine zweite Zeile und die ganze
   Kartenwand rutschte ~40px nach unten. Die Leiste nimmt den freien Platz, die Knoepfe
   bleiben oben rechts. */
#dash-page-filter { flex: 1 1 24rem; min-width: 0; }
#dash-page-filter + div { align-self: flex-start; }
#dash-page-filter .dash-pf-info { flex: 1 0 100%; min-height: 2rem; }
/* Die Hinweiszeile bricht um statt zu kuerzen: das tragende Wort („nicht", die fehlende
   Achse) steht am Ende und darf nie hinter einer Auslassung verschwinden. Umbruch nur
   zwischen Woertern (break-word), nicht mitten im Wort. */
.dash-pf-note {
    margin: 0;
    font-size: var(--fs-label);
    color: var(--text-2);
    overflow-wrap: break-word;
}
/* Klassisch steht sie als eigener Block unter dem Kartenkopf, volle Kartenbreite; der
   Kopf traegt 18px Abstand nach unten — die Zeile rueckt an ihn heran. */
.card-header + .dash-pf-note { margin: -12px 0 12px; }
/* Design-Audit: die Aufklapp-Tafeln der Leiste duerfen nicht aus dem Fenster ragen. */
.dash-pf .cc-dropdown-panel { max-width: calc(100vw - 2rem); }
/* Schmal: an die ganze Leiste haengen statt an den einzelnen Knopf. Steht NACH den
   Grundregeln — ein @media-Block davor gewaenne nie. */
@media (max-width: 40rem) {
    .dash-pf { position: relative; }
    .dash-pf .cc-dropdown { position: static; }
    .dash-pf .cc-dropdown-panel { left: 0; right: 0; min-width: 0; }
}

/* ── PR1.100 (#247) Phase C — Per-User Dashboard-Config (Ein-/Ausblenden + Drag&Drop) ──
   Grab-Cursor auf den Grid-Karten; visuelles Feedback beim Ziehen + über dem Drop-Ziel.
   Gilt für beide Shells (Legacy `.dash-widget-card`, Redesign `.dw-card`). */
.dash-widget-card[draggable="true"],
.dw-card[draggable="true"] { cursor: grab; }
.dash-widget-card.dash-dragging,
.dw-card.dash-dragging { opacity: .5; cursor: grabbing; }
.dash-widget-card.dash-drop-target,
.dw-card.dash-drop-target { outline: 2px dashed var(--primary); outline-offset: 2px; }

/* Konfig-Dialog: Kachel-Liste mit Checkbox + ↑/↓-Reorder (Muster .column-picker-*). */
.dash-cfg-hint { color: var(--text-2); font-size: var(--fs-body); margin: 0 0 12px; line-height: 1.4; }
.dash-cfg-list { display: flex; flex-direction: column; gap: 2px; max-height: 340px; overflow-y: auto; }
 /* PR1.308 (#517): mit der Groessenwahl traegt eine Zeile jetzt Name + drei Stufen +
    zwei Pfeile. In 420px blieb vom Kartennamen ein Stummel („Beauftragungse…"). Eigene
    Breite statt `.modal-sm` global anzufassen — die Klasse teilen sich mehrere Dialoge. */
.modal.modal-sm.dash-cfg-modal { max-width: 580px; }

.dash-cfg-row {
    display: flex; align-items: center; gap: 8px;
    padding: 6px 8px; border-radius: 6px;
    /* Wird es doch einmal eng (schmales Fenster), bricht die Steuerung unter den
       Namen, statt ihn wegzukuerzen. */
    flex-wrap: wrap;
}
.dash-cfg-row:hover { background: var(--bg-hover); }
.dash-cfg-label { display: flex; align-items: center; gap: 8px; flex: 1 1 12rem; cursor: pointer; min-width: 0; }
.dash-cfg-label span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dash-cfg-label input[type="checkbox"] { accent-color: var(--primary); cursor: pointer; flex-shrink: 0; }
.dash-cfg-moves { display: flex; gap: 4px; flex-shrink: 0; }
/* PR1.309 (#518) — Schalter „Folgt dem Seitenfilter" je Zeile. */
.dash-cfg-pf { display: inline-flex; align-items: center; gap: 4px; flex-shrink: 0; font-size: var(--fs-meta); color: var(--text-2); white-space: nowrap; }
.dash-cfg-pf input[type="checkbox"] { accent-color: var(--primary); cursor: pointer; margin: 0; }
.dash-cfg-pf label { cursor: pointer; }
.dash-cfg-move {
    width: 26px; height: 26px; line-height: 1;
    border: 1px solid var(--border); border-radius: 6px;
    background: var(--bg-2); color: var(--text-1); cursor: pointer;
}
.dash-cfg-move:hover:not(:disabled) { border-color: var(--primary); color: var(--primary); }

/* ── PR1.308 (#517): Groessenwahl, Karten-Menue, Hinweis ──
   Alles hier und nicht in style-redesign.css: das Menue und der Hinweis haengen an
   `document.body` und damit AUSSERHALB von `.crm` — dort greifen die Redesign-Tokens
   nicht. Genau darum liegt auch die bestehende `.crm-action-menu`-Optik in dieser
   Datei. Beide Shells teilen sich diese Regeln. */

.dash-size-pick {
    display: inline-flex;
    gap: 2px;
    flex-shrink: 0;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 2px;
}
.dash-size-btn {
    background: transparent;
    border: none;
    border-radius: 4px;
    color: var(--text-3);
    font: inherit;
    font-size: var(--fs-meta);
    padding: 3px 8px;
    cursor: pointer;
    white-space: nowrap;
}
.dash-size-btn:hover { color: var(--text-1); background: var(--bg-hover); }
.dash-size-btn.is-active {
    background: var(--primary);
    color: #fff;
    font-weight: 600;
}

/* Der Ausloeser sitzt in der Kartenkopfzeile und haelt sich zurueck, bis die Karte
   angesteuert wird — sichtbar bleibt er trotzdem immer, denn ein Bedienelement, das
   erst beim Darueberfahren erscheint, findet mit der Tastatur niemand. */
.dash-card-menu-btn {
    background: transparent;
    border: 1px solid transparent;
    border-radius: var(--radius-sm);
    color: var(--text-3);
    cursor: pointer;
    font-size: var(--fs-body);
    line-height: 1;
    padding: 2px 6px;
    flex-shrink: 0;
}
.dash-card-menu-btn:hover,
.dash-card-menu-btn[aria-expanded="true"] { color: var(--text-1); border-color: var(--border); }

.dash-card-menu { min-width: 220px; }
.dash-card-menu-head {
    color: var(--text-3);
    font-size: var(--fs-meta);
    font-weight: 500;
    padding: 6px 14px 2px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.dash-card-menu-groesse {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 14px 8px;
}
.dash-card-menu-legende { color: var(--text-2); font-size: var(--fs-ui); }
.dash-card-menu-sep { border-top: 1px solid var(--border); margin: 4px 0; }
.dash-card-menu-item:disabled { color: var(--text-3); cursor: default; opacity: .55; }
.dash-card-menu-item:disabled:hover { background: transparent; }

/* Leerzustand des Anpassen-Fensters — vorher stand hier ein leerer Kasten ohne Ausweg. */
.dash-cfg-leer {
    color: var(--text-2);
    font-size: var(--fs-body);
    line-height: 1.5;
    margin: 0;
    padding: 18px 4px;
    text-align: center;
}

/* PR1.312 (#521) — „Teilen & übernehmen": Freigabe-Formular + zwei Listen. Der Dialog
   haengt am <body>, also ausserhalb von .crm — Farben nur aus den globalen Tokens. */
.dash-share-h { font-size: var(--fs-body); font-weight: 500; margin: 16px 0 6px; color: var(--text-1); }
.dash-share-form .dash-share-h { margin-top: 0; }
.dash-share-label { display: block; font-size: var(--fs-ui); color: var(--text-2); margin-bottom: 4px; }
.dash-share-formrow { display: flex; gap: 8px; flex-wrap: wrap; }
.dash-share-formrow .form-control { flex: 1 1 14rem; min-width: 0; }
.dash-share-formrow .btn { flex: 0 0 auto; }
.dash-share-feld { margin-bottom: 0; }
/* Gesperrt heisst hier „in dieser Umgebung nicht eingerichtet" oder „laeuft gerade" —
   das muss man sehen, nicht erst beim Klicken merken. */
.dash-share-modal .btn:disabled { opacity: .5; cursor: not-allowed; }
.dash-share-modal input:disabled { opacity: .6; cursor: not-allowed; }
.dash-share-meldung { font-size: var(--fs-body); line-height: 1.4; margin: 8px 0 0; min-height: 1.2em; color: var(--text-2); }
.dash-share-meldung[data-art="fehler"] { color: var(--danger); }
.dash-share-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; max-height: 260px; overflow-y: auto; }
.dash-share-row { display: flex; align-items: center; gap: 8px; padding: 8px; border-radius: var(--radius-sm); }
.dash-share-row:hover { background: var(--bg-hover); }
.dash-share-info { display: flex; flex-direction: column; gap: 2px; flex: 1 1 auto; min-width: 0; }
.dash-share-name { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dash-share-meta { font-size: var(--fs-ui); color: var(--text-2); }
.dash-share-warn { font-size: var(--fs-ui); color: var(--warning); line-height: 1.35; }
.dash-share-acts { display: flex; gap: 6px; flex-shrink: 0; }
.dash-share-fehler { padding: 14px 4px; text-align: center; color: var(--text-2); font-size: var(--fs-body); }
.dash-share-fehler p { margin: 0 0 10px; }
@media (max-width: 520px) {
    .dash-share-row { flex-wrap: wrap; }
    .dash-share-acts { width: 100%; justify-content: flex-end; }
}

/* PR1.349 (#563) — „Gespeicherte Auswertungen hinzufügen" im Anpassen-Fenster. Haengt wie
   „Teilen & übernehmen" am <body>, also ausserhalb von .crm — nur globale Tokens, gilt
   fuer beide Shells. Formensprache bewusst wie .dash-share-row. */
.dash-cfg-sv { border-top: 1px solid var(--border); margin-top: 14px; padding-top: 12px; }
.dash-cfg-sv-h { font-size: var(--fs-body); font-weight: 500; margin: 0 0 6px; color: var(--text-1); }
.dash-cfg-sv-h:focus { outline: none; }
.dash-cfg-sv-h:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; border-radius: 4px; }
.dash-cfg-sv-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; max-height: 220px; overflow-y: auto; }
.dash-cfg-sv-row { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-radius: var(--radius-sm); }
.dash-cfg-sv-row:hover { background: var(--bg-hover); }
.dash-cfg-sv-info { display: flex; flex-direction: column; gap: 2px; flex: 1 1 auto; min-width: 0; }
.dash-cfg-sv-name { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dash-cfg-sv-meta { font-size: var(--fs-ui); color: var(--text-2); }
.dash-cfg-sv-row .btn { flex-shrink: 0; }
.dash-cfg-sv .btn:disabled { opacity: .5; cursor: not-allowed; }
.dash-cfg-sv-text { color: var(--text-2); font-size: var(--fs-body); line-height: 1.45; margin: 0 0 8px; }
.dash-cfg-sv-zustand { padding: 6px 4px; }
.dash-cfg-sv-skelett { display: block; height: 2.25rem; border-radius: var(--radius-sm); background: var(--bg-hover); }
@media (max-width: 520px) {
    .dash-cfg-sv-row { flex-wrap: wrap; }
}

/* Der einmalige Hinweis auf den Anpassen-Knopf. */
.dash-hint {
    background: var(--bg-card);
    border: 1px solid var(--primary);
    border-radius: var(--radius);
    box-shadow: 0 8px 24px rgba(0,0,0,.4);
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 10px;
    max-width: 280px;
    padding: 14px;
    z-index: 10000;
}
.dash-hint-text { color: var(--text-1); font-size: var(--fs-body); line-height: 1.45; }
.dash-cfg-move:disabled { opacity: .35; cursor: default; }


/* ══════════════════════════════════════════════
 * HF3.07c — Enrich-Employee-Dialog (MA-Anreicherung via KI)
 * ══════════════════════════════════════════════ */

.enrich-employee-overlay .modal { max-width: 860px; }
.enrich-intro { color: var(--text-2); font-size: var(--fs-body); margin: 0 0 16px; line-height: 1.4; }
.enrich-intro strong { color: var(--text-1); }

.enrich-dropzone {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    min-height: 160px; padding: 24px; border: 2px dashed var(--border, #334155);
    border-radius: 12px; background: var(--bg-subtle, rgba(255,255,255,.03));
    cursor: pointer; transition: border-color 150ms ease, background-color 150ms ease;
}
.enrich-dropzone:hover, .enrich-dropzone.is-dragover {
    border-color: var(--primary);
    background: rgba(99,102,241,.05);
}
.enrich-dropzone__icon { font-size: var(--fs-icon); margin-bottom: 8px; opacity: .75; }
.enrich-dropzone__label { color: var(--text-2); font-size: var(--fs-body); }

.enrich-loading { margin-top: 16px; padding: 12px; background: rgba(99,102,241,.1); border-radius: 8px; color: var(--text-1); }
.enrich-loading .spinner { display: inline-block; animation: spin 1.4s linear infinite; margin-right: 8px; }
@keyframes spin { to { transform: rotate(360deg); } }
.enrich-error { color: var(--danger); margin-top: 12px; font-size: var(--fs-body); min-height: 1.2em; }

.enrich-stage-upload.is-loading .enrich-dropzone { pointer-events: none; opacity: .5; }

/* BF-127 (#858) — gespeicherten Lebenslauf auswerten statt erneut hochzuladen. */
.enrich-stored-cv {
    display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
    padding: 12px 14px; border: 1px solid var(--border, #334155); border-radius: 10px;
    background: var(--bg-subtle, rgba(255,255,255,.03));
}
.enrich-stored-cv__text { display: inline-flex; align-items: center; gap: 8px; color: var(--text-1); font-size: var(--fs-body); }
.enrich-stored-cv__or { margin: 12px 0 8px; color: var(--text-2); font-size: var(--fs-ui); }
.enrich-stage-upload.is-loading [data-enrich-stored-cv] { pointer-events: none; opacity: .5; }

/* BF-127 (#858) — Profil-Hinweis „Lebenslauf noch nicht ausgewertet" (Karte Unterlagen). */
.emp-cv-hint {
    display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap;
    margin-bottom: 10px; padding: 10px 12px; border-radius: 8px;
    border: 1px solid var(--border, #334155); background: var(--bg-subtle, rgba(255,255,255,.03));
}
.emp-cv-hint__text { margin: 0; color: var(--text-1); font-size: var(--fs-ui); line-height: 1.4; }

.enrich-summary { color: var(--text-2); font-size: var(--fs-body); margin: 0 0 6px; }
.enrich-summary em { color: var(--text-3); font-style: normal; margin-left: 8px; }
.enrich-summary strong { color: var(--text-1); }
.enrich-note {
    color: var(--text-3); font-size: var(--fs-ui); margin: 0 0 16px;
    padding: 8px 12px; background: rgba(0,0,0,.12); border-radius: 6px;
    border-left: 3px solid var(--primary);
}
/* BF-46 (#492) — Luecken-Hinweis der KI im KLASSISCHEN Enrich-Dialog.
   Eigene Klasse, KEIN Reuse von .honesty-note: die lebt in style-redesign.css
   unter `.crm .honesty-note` und greift ausserhalb von #app-crm nicht.
   Optik bewusst wie .enrich-note (gleicher Akzentbalken, gleiche Flaeche),
   damit Hinweis und Legende im Dialog eine Familie bilden. Keine Animation. */
.enrich-honesty-note {
    color: var(--text-2); font-size: var(--fs-ui); margin: 10px 0 16px;
    padding: 8px 12px; background: rgba(0,0,0,.12); border-radius: 6px;
    border-left: 3px solid var(--primary);
}
.enrich-honesty-note > summary {
    cursor: pointer; user-select: none; color: var(--text-2);
    border-radius: 3px;
}
.enrich-honesty-note > summary:focus-visible {
    outline: 2px solid var(--primary); outline-offset: 2px;
}
.enrich-honesty-note[open] > summary { margin-bottom: 4px; }
.enrich-honesty-note ul { margin: 4px 0 0 16px; padding: 0; }
.enrich-honesty-note li { margin: 2px 0; color: var(--text-2); }

/* PR1.68 (#216) — Master-„eine Entscheidung für alle"-Aktionen über der Diff-Tabelle. */
.enrich-bulk-actions {
    display: flex; align-items: center; flex-wrap: wrap; gap: 8px;
    margin: 0 0 12px; font-size: var(--fs-body); color: var(--text-2);
}
.enrich-bulk-actions span { color: var(--text-3); }
.enrich-debug { margin: 0 0 16px; font-size: var(--fs-body); color: var(--text-2); }
.enrich-debug summary { cursor: pointer; padding: 6px 0; user-select: none; color: var(--text-2); }
.enrich-debug-grid {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 4px 12px; padding: 8px 12px; background: rgba(0,0,0,.15); border-radius: 6px;
    margin: 4px 0 8px;
}
.enrich-debug-grid strong { color: var(--text-1); }
.enrich-debug-note { margin: 6px 0; color: var(--text-3); font-size: var(--fs-ui); }
.enrich-debug-hint { margin: 6px 0; color: var(--primary); font-size: var(--fs-body); }

.diff-table {
    width: 100%; border-collapse: collapse; font-size: var(--fs-body);
}
.diff-table thead th {
    text-align: left; padding: 8px 10px; background: var(--bg-subtle, rgba(255,255,255,.04));
    border-bottom: 1px solid var(--border, #334155); color: var(--text-2); font-weight: 600;
}
.diff-table tbody td {
    padding: 10px; vertical-align: top; border-bottom: 1px solid var(--border-light, rgba(255,255,255,.05));
}
.diff-row-autofill { background: rgba(16,185,129,.06); }
.diff-row-conflict { background: rgba(234,179,8,.08); }
.diff-field strong { display: block; }
.diff-existing, .diff-suggestion { word-break: break-word; }
.diff-empty { color: var(--text-3); font-style: italic; }

.diff-radio-group { display: flex; flex-direction: column; gap: 4px; white-space: nowrap; }
.diff-radio-group label { cursor: pointer; font-size: var(--fs-body); color: var(--text-2); }
.diff-radio-group input[type=radio] { margin-right: 6px; }

.chip__rating {
    display: inline-block; margin-left: 6px; padding: 1px 6px;
    background: rgba(99,102,241,.2); color: var(--primary-text, #9ba0fa);
    border-radius: 10px; font-size: var(--fs-label); font-weight: 500;
}

/* Sub-Chip für Phase-4-Hook (HF3.27): Portfolio-Element-Tags pro Skill */
.chip--sub {
    margin-left: 4px; padding: 1px 8px; font-size: var(--fs-label);
    background: rgba(255,255,255,.06); color: var(--text-3);
    border: 1px dashed var(--border-light, rgba(255,255,255,.1));
}

/* HF3.07c Confidence-Klassen (rekursiv, auch für Sub-Chips) */
.confidence-badge.confidence-high { background: rgba(16,185,129,.22); color: var(--success); padding: 2px 6px; border-radius: 10px; font-size: var(--fs-label); }
.confidence-badge.confidence-med  { background: rgba(234,179,8,.22);   color: var(--warning); padding: 2px 6px; border-radius: 10px; font-size: var(--fs-label); }
.confidence-badge.confidence-low  { background: rgba(239,68,68,.22);   color: var(--danger);  padding: 2px 6px; border-radius: 10px; font-size: var(--fs-label); }

/* ══════════════════════════════════════════════
 * HF3.29 — Employee-Detail-View
 * ══════════════════════════════════════════════ */

.emp-detail-empty { padding: 40px; text-align: center; }

/* PR1.519 (#796) — Ruhiger Mitarbeiter-Kopf (Markup geteilt mit der Redesign-Shell:
   components/employee-head-model.js). Ueber der Karte der Zurueck-Pfad; in der Karte oben
   Foto | Name + eine Unterzeile | Aktionen, darunter die Kennzahlenleiste mit fuenf gleich
   breiten Feldern. Farbe nur bei Ueberlast (`--bad`), sonst Tinte.

   Vorgeschichte BF-45 (#491): Aktionen und Inhalt duerfen nicht um dieselbe Breite
   konkurrieren. Die Inhaltsspalte steht deshalb auf `minmax(0, 1fr)` — ein reines `1fr`
   faellt auf `min-content` zurueck, sobald die `auto`-Spalten ihre Breite zuerst nehmen. */
.emp-head-wrap {
    --emp-head-gap: 12px;
    --emp-head-tight: 6px;
    padding: 12px 14px 0;
    margin-bottom: 14px;
}
.emp-head-path {
    display: flex;
    align-items: center;
    gap: var(--emp-head-tight);
    margin-bottom: 8px;
    font-size: var(--fs-body);
    color: var(--text-2);
}
.emp-head-back {
    display: inline-flex;
    align-items: center;
    gap: var(--emp-head-tight);
    padding: 2px 4px;
    border: 0;
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--text-1);
    font: inherit;
    font-weight: 600;
    cursor: pointer;
}
.emp-head-back:hover { text-decoration: underline; }
.emp-head-path-sep { color: var(--text-3); }
.emp-head {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: visible;
}
.emp-head-top {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 18px;
    padding: 16px 20px;
}
.emp-head-avatar .emp-avatar { width: 76px; height: 76px; }
.emp-head-id { min-width: 0; }
.emp-head-name-row { display: flex; align-items: center; gap: 4px; min-width: 0; }
.emp-head-name {
    margin: 0 8px 0 0;
    font-size: var(--fs-title);
    font-weight: 650;
    line-height: 1.2;
    color: var(--text-1);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.emp-head-contact {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: var(--radius-sm);
    color: var(--text-2);
    flex-shrink: 0;
}
.emp-head-contact:hover { background: var(--bg-hover); color: var(--text-1); }
.emp-head-sub {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--emp-head-tight);
    margin-top: 4px;
    font-size: var(--fs-body);
    color: var(--text-2);
}
.emp-head-sep { color: var(--text-3); }
.emp-head-actions { display: flex; align-items: center; gap: 8px; }
.emp-head-actions .btn { display: inline-flex; align-items: center; gap: var(--emp-head-tight); }
.emp-head-actions .btn-icon { width: 32px; height: 32px; padding: 0; justify-content: center; }
.emp-head-back:focus-visible,
.emp-head-contact:focus-visible,
.emp-head-actions .btn:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }

/* KI-Menue — list-more-menu.js mit Erklaerzeile je Eintrag. */
.emp-ki-menu { position: relative; }
.emp-ki-menu .more-menu-list {
    position: absolute; right: 0; top: calc(100% + 6px); z-index: 40;
    min-width: 290px;
    display: flex; flex-direction: column;
    padding: 6px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
}
.emp-ki-menu .more-menu-list[hidden] { display: none; }
.emp-ki-menu .more-menu-item {
    display: flex; align-items: flex-start; gap: 10px;
    padding: 8px 10px;
    border: 0; border-radius: var(--radius-sm);
    background: transparent; color: var(--text-1);
    font: inherit; font-size: var(--fs-body); text-align: left;
    cursor: pointer;
}
.emp-ki-menu .more-menu-item .ic { margin-top: 2px; flex-shrink: 0; }
.emp-ki-menu .more-menu-item:hover:not([disabled]),
.emp-ki-menu .more-menu-item:focus-visible { background: var(--bg-hover); }
.emp-ki-menu .more-menu-item:focus-visible { outline: 2px solid var(--primary); outline-offset: -2px; }
.emp-ki-menu .more-menu-item[disabled] { opacity: .55; cursor: not-allowed; }
.emp-ki-menu .more-menu-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.emp-ki-menu .more-menu-label { font-weight: 600; }
.emp-ki-menu .more-menu-hint { font-size: var(--fs-ui); color: var(--text-3); }

/* Kennzahlenleiste — fuenf gleich breite Felder, Etikett / Wert / Unterzeile. */
.emp-kz {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    margin: 0;
    border-top: 1px solid var(--border);
    /* Grund wie die Karte: auf --bg-hover fiel das Rot der Ueberlast im dunklen Design
       unter 4,5:1. Die Leiste trennt sich ueber die Linie, nicht ueber eine Flaeche. */
    background: var(--bg-card);
    border-radius: 0 0 var(--radius) var(--radius);
}
.emp-kz-cell { min-width: 0; padding: 12px 20px; }
.emp-kz-cell + .emp-kz-cell { border-left: 1px solid var(--border); }
.emp-kz-label { font-size: var(--fs-ui); color: var(--text-3); margin: 0 0 4px; }
.emp-kz-value {
    display: flex; align-items: center; gap: var(--emp-head-tight);
    margin: 0; min-height: 24px;
    font-size: var(--fs-section); font-weight: 650; color: var(--text-1);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.emp-kz-value--bad { color: var(--danger); }
.emp-kz-sub {
    margin: 2px 0 0; min-height: 16px;
    font-size: var(--fs-ui); color: var(--text-3);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.emp-kz-logos { display: inline-flex; gap: 2px; flex-shrink: 0; }
.emp-kz-namen { min-width: 0; overflow: hidden; text-overflow: ellipsis; }

.emp-detail-2col {
    display: grid;
    /* PR1.522 (#802) — Entwurf 02: links die Inhalte (flexibel), rechts schmal die Fakten.
       420 px tragen die Kompetenzen-Zeilen (30/1fr/92/58, PR1.521) ohne Kürzen. */
    grid-template-columns: minmax(0, 1fr) 420px;
    gap: 14px;
    padding: 0 14px;
    align-items: start;
}

.emp-col { display: flex; flex-direction: column; gap: 12px; min-width: 0; }

/* ── PR1.522 (#802) — Profil-Überblick: Einsätze als Jahres-Zeitleiste, Zertifikate als
   Abzeichen (beide Shells, Markup aus employee-einsatz-zeitleiste.js /
   employee-cert-abzeichen.js). Keine Deko, keine Verläufe, keine Animation — lebendig
   wird die Karte durch Logos, Abzeichen und die Zeitleiste. Farben nur über Tokens; das
   Redesign setzt seine Tokens in style-redesign.css. ── */
.emp-ov {
    --ov-done: color-mix(in srgb, var(--primary, #4f46e5) 14%, transparent);
    --ov-done-text: var(--text-1);
    --ov-now: var(--primary, #4f46e5);
    --ov-now-text: #fff;
    --ov-today: #E5484D;
    --ov-line: var(--border);
    color: var(--text-1);
}
.emp-ov-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.emp-ov-title { margin: 0; font-size: var(--fs-meta); color: var(--text-2); font-weight: 600; }
.emp-ov-title small { margin-left: 6px; font-size: var(--fs-ui); letter-spacing: 0; text-transform: none; font-weight: 400; color: var(--text-3); }
.emp-ov-more {
    border: 0; background: transparent; padding: 2px 4px; border-radius: 6px;
    font: inherit; font-size: var(--fs-ui); color: var(--text-2); cursor: pointer;
}
.emp-ov-more:hover { color: var(--text-1); text-decoration: underline; }
.emp-ov-more:focus-visible, .emp-ov-bar:focus-visible { outline: 2px solid var(--primary, #4f46e5); outline-offset: 2px; }
.emp-ov-state { padding: 6px 0 2px; font-size: var(--fs-body); color: var(--text-2); }
.emp-ov-state p { margin: 0 0 6px; }
.emp-ov-sub { margin: 8px 0 0; font-size: var(--fs-ui); color: var(--text-3); }
.emp-ov-tl { position: relative; }
.emp-ov-years { position: relative; height: 22px; border-bottom: 1px solid var(--ov-line); }
.emp-ov-yr { position: absolute; top: 0; padding-left: 2px; font-size: var(--fs-ui); color: var(--text-3); font-variant-numeric: tabular-nums; }
.emp-ov-lanes { position: relative; display: grid; gap: 8px; padding-top: 10px; }
.emp-ov-gridline { position: absolute; top: 0; bottom: 0; width: 1px; background: var(--ov-line); opacity: .6; }
.emp-ov-today { position: absolute; top: -12px; bottom: 0; width: 2px; margin-left: -1px; background: var(--ov-today); z-index: 2; pointer-events: none; }
.emp-ov-lane { position: relative; height: 30px; }
.emp-ov-bar {
    position: absolute; top: 0; height: 30px; box-sizing: border-box;
    display: flex; align-items: center; gap: 7px; padding: 0 8px 0 5px;
    border-radius: 7px; background: var(--ov-done); color: var(--ov-done-text);
    font-size: var(--fs-ui); font-weight: 500; white-space: nowrap; overflow: hidden; z-index: 1;
}
.emp-ov-bar--now { background: var(--ov-now); color: var(--ov-now-text); }
.emp-ov-bar--possible { background: color-mix(in srgb, var(--ov-now) 70%, transparent); }
.emp-ov-bar[role="link"] { cursor: pointer; }
.emp-ov-bar[role="link"]:hover .emp-ov-bar-text { text-decoration: underline; }
.emp-ov-bar-text { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.emp-ov-logo { flex: 0 0 auto; border-radius: 4px; box-shadow: 0 0 0 1px rgba(0, 0, 0, .06); }
.emp-ov-legend { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-top: 12px; font-size: var(--fs-ui); color: var(--text-3); }
.emp-ov-legend span { display: inline-flex; align-items: center; gap: 6px; }
.emp-ov-key { width: 10px; height: 10px; border-radius: 3px; display: inline-block; }
.emp-ov-key--done { background: var(--ov-done); box-shadow: inset 0 0 0 1px var(--ov-line); }
.emp-ov-key--now { background: var(--ov-now); }
.emp-ov-key--today { background: var(--ov-today); }
.emp-ov-rest { margin-left: auto; }
.emp-ov-badges { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.emp-ov-badge { position: relative; }
.emp-ov-badge-pic {
    width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center;
    border-radius: 8px; font-size: var(--fs-meta); font-weight: 500; color: var(--text-2);
}
.emp-ov-badge-img, .emp-ov-badge-logo { width: 44px; height: 44px; object-fit: contain; }
.emp-ov-badge-logo { width: 30px; height: 30px; }
.emp-ov-badge-mono { width: 40px; height: 40px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: var(--bg-card2); border: 1px solid var(--border); }
.emp-ov-badge-mono img { width: 40px; height: 40px; border-radius: 50%; object-fit: contain; }
.emp-ov-badge--expired .emp-ov-badge-pic { filter: grayscale(1); opacity: .45; }
.emp-ov-badge--rest .emp-ov-badge-pic { background: var(--bg-card2); border: 1px solid var(--border); }

/* Block „Mehr zur Person": eingeklappte Reiter unter den Karten (klassische Shell). */
.emp-card.emp-more { padding: 0; }
.emp-more-summary {
    display: flex; align-items: center; gap: 10px; padding: 12px 14px; cursor: pointer;
    list-style: none; border-radius: 10px;
}
.emp-more-summary::-webkit-details-marker { display: none; }
.emp-more-summary:focus-visible { outline: 2px solid var(--primary, #4f46e5); outline-offset: 2px; }
.emp-more-summary .ic { flex: 0 0 auto; color: var(--text-2); }
.emp-more[open] > .emp-more-summary .ic { transform: rotate(90deg); }
.emp-more-title { font-size: var(--fs-body); font-weight: 600; color: var(--text-1); }
.emp-more-hint { font-size: var(--fs-ui); color: var(--text-3); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.emp-more > .emp-tabs-header { margin: 0 14px; }
.emp-more > .emp-tab-panels { padding: 0 14px 14px; }

.emp-card {
    background: var(--bg-card, rgba(255,255,255,.04));
    border-radius: 10px;
    padding: 12px 14px;
    font-size: var(--fs-ui);
}
.emp-card-title { font-size: var(--fs-meta); color: var(--text-2, #a5b4fc); margin-bottom: 10px; }
.emp-card-sub { font-size: var(--fs-label); font-weight: 400; opacity: .5; margin-left: 8px; text-transform: none; }
.emp-card-confidential { border-left: 2px solid rgba(245,158,11,.5); }
.emp-card-more { font-size: var(--fs-label); opacity: .55; margin-top: 6px; text-align: right; font-style: italic; }
.emp-empty { color: var(--text-3, #64748b); font-style: italic; font-size: var(--fs-meta); }
.emp-empty-panel { text-align: center; padding: 40px 20px; color: var(--text-3); font-style: italic; }

.emp-kv { display: flex; justify-content: space-between; padding: 3px 0; gap: 10px; font-size: var(--fs-meta); border-bottom: 1px solid rgba(255,255,255,.04); }
.emp-kv:last-child { border-bottom: none; }
.emp-kv-label { color: var(--text-3, #64748b); }
.emp-kv-value { text-align: right; word-break: break-word; }

.emp-summary-text { margin: 0; line-height: 1.5; font-size: var(--fs-ui); opacity: .9; }

/* Tabs */
.emp-tabs-header {
    display: flex; gap: 2px; border-bottom: 2px solid rgba(99,102,241,.35);
    overflow-x: auto; margin-bottom: 12px;
}
.emp-tab-btn {
    padding: 10px 14px; background: transparent; border: none;
    color: var(--text-2, #94a3b8); font-size: var(--fs-ui); font-weight: 500;
    cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -2px;
    white-space: nowrap; transition: color 150ms;
}
.emp-tab-btn:hover { color: var(--text-1, #e5e7eb); }
.emp-tab-btn.emp-tab-active { color: var(--primary-text, #a5b4fc); border-bottom-color: var(--primary, #a5b4fc); font-weight: 600; }

.kbcc-dq-ek-gruppe-nav { padding: 2px 10px 4px 32px; }
.opp-team-historie-zeile { display: flex; flex-wrap: wrap; gap: 4px 8px; align-items: baseline; padding: 4px 0; }
.opp-team-historie-name { font-weight: 600; color: var(--text-2); }
.opp-team-vermerk { font-size: var(--fs-ui); color: var(--text-3); }
.opp-team-projekt-link { margin-left: 8px; font-size: var(--fs-ui); font-weight: 500; color: var(--accent); text-transform: none; letter-spacing: 0; }
/* PR1.443 (#685) — Reiter „Einsätze": Zeitleiste und Kundensicht (beide Shells, ein Renderer:
   employee-timeline-html.js). Nur Tokens, die beide Shells definieren; Farbe allein im Balken
   und im Statuspunkt. Kein Motion — meistgenutzte Ansicht der Seite. Die Spalten richten sich
   nach der Breite des Reiters (Container-Query), nicht nach dem Fenster: im Redesign steht der
   Reiter neben der Stammdaten-Spalte. */
.emp-ez {
    --ez-today: #E5484D;
    --ez-today-label: #B42318;
    --ez-cols: minmax(0, 1fr) minmax(0, 1.25fr) 52px 150px;
    container-type: inline-size;
    color: var(--text-1);
}
.emp-ez-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin-bottom: 12px; }
.emp-ez-switch { display: inline-flex; padding: 3px; border-radius: 8px; background: var(--bg-card2); border: 1px solid var(--border); }
.emp-ez-switch-btn {
    border: 0; background: transparent; color: var(--text-2); font: inherit; font-size: var(--fs-body);
    padding: 5px 12px; border-radius: 6px; cursor: pointer;
}
.emp-ez-switch-btn:hover { color: var(--text-1); }
.emp-ez-switch-btn[aria-pressed="true"] { background: var(--bg-card); color: var(--text-1); font-weight: 600; box-shadow: 0 1px 2px rgba(0, 0, 0, .14); }
.emp-ez-summary { font-size: var(--fs-ui); color: var(--text-3); }
.emp-ez-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: 12px; padding: 8px 20px 16px; }

.emp-ez-row {
    display: grid; grid-template-columns: var(--ez-cols);
    grid-template-areas: "who track umfang state";
    column-gap: 16px; align-items: center; padding: 10px 6px; border-top: 1px solid var(--border);
}
.emp-ez-who { grid-area: who; display: flex; align-items: center; gap: 12px; min-width: 0; }
.emp-ez-track { grid-area: track; }
.emp-ez-umfang { grid-area: umfang; }
.emp-ez-state { grid-area: state; }
.emp-ez-row[role="link"], .emp-ez-crow[role="link"], .emp-ez-proposal[role="link"] { cursor: pointer; border-radius: 6px; }
.emp-ez-row[role="link"]:hover, .emp-ez-crow[role="link"]:hover, .emp-ez-proposal[role="link"]:hover { background: color-mix(in srgb, var(--text-1) 4%, transparent); }
.emp-ez [role="link"]:focus-visible,
.emp-ez button:focus-visible,
.emp-ez summary:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }

.emp-ez-text { display: flex; flex-direction: column; min-width: 0; gap: 2px; }
/* Titel und Unterzeile dürfen zweizeilig werden — abgeschnitten wird erst danach. */
.emp-ez-title, .emp-ez-sub { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; overflow-wrap: anywhere; }
.emp-ez-title { font-size: var(--fs-body); font-weight: 600; line-height: 1.3; color: var(--text-1); }
.emp-ez-sub { font-size: var(--fs-ui); line-height: 1.35; color: var(--text-3); }
.emp-ez-bald { color: var(--text-1); font-weight: 600; }
.emp-ez-logo { flex: none; border-radius: 8px; }
.emp-ez-logo--leer { width: 32px; height: 32px; background: var(--bg-card2); }
.emp-ez-umfang { text-align: right; font-size: var(--fs-body); font-weight: 500; font-variant-numeric: tabular-nums; white-space: nowrap; }
.emp-ez-state { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.emp-ez-status { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-ui); color: var(--text-2); white-space: nowrap; }
.emp-ez-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--text-3); }
.emp-ez-status--committed .emp-ez-dot { background: var(--success); }
.emp-ez-status--possible .emp-ez-dot { background: var(--primary); }

/* Achse */
.emp-ez-row--axis { border-top: 0; padding-top: 6px; padding-bottom: 14px; }
.emp-ez-axis { grid-area: track; position: relative; height: 44px; border-bottom: 1px solid var(--border); }
.emp-ez-year, .emp-ez-quarter { position: absolute; white-space: nowrap; }
.emp-ez-year { top: 0; padding-left: 5px; border-left: 1px solid var(--text-3); font-size: var(--fs-ui); font-weight: 500; line-height: 16px; }
.emp-ez-quarter { top: 19px; font-size: var(--fs-meta); color: var(--text-3); transform: translateX(-50%); }
.emp-ez-quarter[style="left:0%"] { transform: none; }
.emp-ez-today-label {
    position: absolute; bottom: -10px; transform: translateX(-50%); z-index: 3;
    padding: 1px 8px; border-radius: 999px; background: var(--ez-today-label); color: #fff;
    font-size: var(--fs-meta); font-weight: 500; line-height: 16px; white-space: nowrap;
}

/* Spur + Balken */
.emp-ez-track { position: relative; height: 28px; border-radius: 6px; background: color-mix(in srgb, var(--text-3) 7%, transparent); }
.emp-ez-gridline { position: absolute; top: 0; bottom: 0; width: 1px; background: var(--border); }
.emp-ez-today { position: absolute; top: -10px; bottom: -10px; width: 2px; margin-left: -1px; background: var(--ez-today); z-index: 2; }
.emp-ez-bar {
    position: absolute; top: 5px; height: 18px; border-radius: 4px; z-index: 1;
    display: flex; align-items: center; overflow: hidden; min-width: 4px;
}
.emp-ez-bar--committed { background: color-mix(in srgb, var(--primary) 86%, #000); color: #fff; }
.emp-ez-bar--possible {
    background: repeating-linear-gradient(135deg,
        color-mix(in srgb, var(--primary) 32%, transparent) 0 4px,
        color-mix(in srgb, var(--primary) 12%, transparent) 4px 8px);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--primary) 60%, transparent);
    color: var(--text-1);
}
.emp-ez-bar--done { background: color-mix(in srgb, var(--text-3) 34%, var(--bg-card)); color: var(--text-1); }
.emp-ez-bar--point { width: 10px; margin-left: -5px; }
.emp-ez-bar-label { padding: 0 8px; font-size: var(--fs-meta); font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.emp-ez-bar-label--aussen { position: absolute; top: 5px; line-height: 18px; padding: 0; font-weight: 500; color: var(--text-2); z-index: 1; }

.emp-ez-group-h { display: flex; align-items: baseline; gap: 8px; padding: 14px 6px 8px; font-size: var(--fs-body); font-weight: 500; }
.emp-ez-count { font-weight: 500; color: var(--text-3); }

.emp-ez-notice {
    display: flex; align-items: flex-start; gap: 10px; margin: 6px 0 4px; padding: 12px 14px; border-radius: 8px;
    background: color-mix(in srgb, var(--primary) 10%, var(--bg-card)); font-size: var(--fs-body); color: var(--text-1);
}
.emp-ez-notice .ic { flex: none; margin-top: 2px; }
.emp-ez-notice-link { border: 0; background: none; padding: 0; font: inherit; font-weight: 600; color: inherit; text-decoration: underline; cursor: pointer; }

.emp-ez-legend { display: flex; flex-wrap: wrap; gap: 6px 18px; padding: 14px 6px 0; font-size: var(--fs-ui); color: var(--text-2); }
.emp-ez-key { display: inline-block; width: 12px; height: 12px; margin-right: 6px; border-radius: 3px; vertical-align: -2px; }
.emp-ez-key--committed { background: color-mix(in srgb, var(--primary) 86%, #000); }
.emp-ez-key--possible { background: repeating-linear-gradient(135deg, color-mix(in srgb, var(--primary) 45%, transparent) 0 3px, transparent 3px 6px); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--primary) 60%, transparent); }
.emp-ez-key--done { background: color-mix(in srgb, var(--text-3) 34%, var(--bg-card)); }
.emp-ez-key--today { width: 2px; background: var(--ez-today); border-radius: 0; }

.emp-ez-proposals { margin-top: 12px; border-top: 1px solid var(--border); }
.emp-ez-proposals summary { padding: 10px 6px; font-size: var(--fs-ui); color: var(--text-2); cursor: pointer; }
.emp-ez-proposal { display: grid; grid-template-columns: 24px minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 8px 6px; border-top: 1px solid var(--border); }
.emp-ez-proposal .emp-ez-title { font-weight: 500; color: var(--text-2); }
.emp-ez-range { font-size: var(--fs-ui); color: var(--text-3); white-space: nowrap; font-variant-numeric: tabular-nums; }

/* Kundensicht */
.emp-ez-customer { padding: 12px 0 8px; border-top: 1px solid var(--border); }
.emp-ez-customer:first-child { border-top: 0; }
.emp-ez-customer-h { display: flex; align-items: center; gap: 12px; padding: 0 6px 6px; }
.emp-ez-crow {
    display: grid; grid-template-columns: minmax(0, 1fr) 150px 56px 156px; align-items: center; column-gap: 16px;
    padding: 8px 6px 8px 54px;
}
.emp-ez-crow .emp-ez-title { font-weight: 500; }
.emp-ez-crow .emp-ez-umfang { grid-area: auto; }

/* Zustände */
.emp-ez-state-box { padding: 32px 16px; text-align: center; color: var(--text-2); font-size: var(--fs-body); }
.emp-ez-state-box p { margin: 0 0 8px; }
.emp-ez-assign, .emp-ez .emp-proj-create {
    display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 8px;
    border: 1px solid var(--border); background: var(--bg-card2); color: var(--text-1);
    font: inherit; font-size: var(--fs-ui); font-weight: 500; cursor: pointer;
}
.emp-ez .emp-proj-create { padding: 3px 8px; font-size: var(--fs-ui); white-space: nowrap; }
.emp-ez-assign:disabled { opacity: .55; cursor: not-allowed; }

/* Mittlere Breite (klassische Shell, Reiter zwischen zwei Spalten): Status unter den Umfang,
   damit der Titel Platz behält; Quartale nur als Linien. */
@container (min-width: 681px) and (max-width: 900px) {
    .emp-ez-row { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr) 128px; grid-template-areas: "who track umfang" "who track state"; row-gap: 2px; }
    .emp-ez-row--axis { grid-template-areas: "who track umfang"; }
    .emp-ez-row--axis > div:last-child { display: none; }
    .emp-ez-umfang { text-align: left; }
    .emp-ez-quarter { display: none; }
    .emp-ez-crow { grid-template-columns: minmax(0, 1fr) 130px 52px 128px; }
}
/* Schmaler Reiter: Spur unter den Titel, Umfang + Status bleiben in der Zeile. */
@container (max-width: 680px) {
    .emp-ez-quarter { display: none; }
    .emp-ez-row { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "who umfang" "track track" "state state"; row-gap: 8px; }
    .emp-ez-row--axis { grid-template-columns: minmax(0, 1fr); grid-template-areas: "track"; }
    .emp-ez-row--axis > div:not(.emp-ez-axis) { display: none; }
    .emp-ez-crow { grid-template-columns: minmax(0, 1fr) auto; padding-left: 6px; row-gap: 4px; }
}
.linking-hint { display: block; margin-top: 4px; font-size: var(--fs-body); opacity: .7; }
.emp-allocations-editor { display: flex; flex-direction: column; gap: 10px; margin-top: 6px; }
.emp-allocations-empty { padding: 14px; text-align: center; color: var(--text-3); font-size: var(--fs-body); background: rgba(0,0,0,.12); border-radius: 6px; }
.emp-alloc-row { padding: 10px 12px; background: rgba(0,0,0,.18); border-radius: 8px; border-left: 3px solid var(--ea-row, var(--primary, #818cf8)); }
.emp-alloc-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
.emp-alloc-badge { font-size: var(--fs-body); color: var(--text-2); }
.emp-alloc-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 8px; }
.emp-alloc-grid label { display: flex; flex-direction: column; gap: 4px; font-size: var(--fs-meta); color: var(--text-3); }
/* PR1.453 — label + list as siblings (a div inside <label> is invalid). */
.emp-alloc-feld { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.emp-alloc-grid input, .emp-alloc-grid select { padding: 6px 8px; font-size: var(--fs-body); background: rgba(0,0,0,.25); border: 1px solid rgba(255,255,255,.08); border-radius: 4px; color: var(--text-1); }
.emp-alloc-grid input:read-only { opacity: .6; cursor: not-allowed; }

/* Skills panel */
.emp-skills-panel, .emp-cert-panel { display: flex; flex-direction: column; gap: 10px; }
.emp-comp-row { display: flex; justify-content: space-between; padding: 4px 0; font-size: var(--fs-ui); }
.emp-comp-label { opacity: .9; }
.emp-comp-stars { color: var(--warning, #fbbf24); letter-spacing: 2px; }

/* Heatmap */
.emp-heatmap { display: flex; flex-direction: column; gap: 2px; font-size: var(--fs-label); }
.emp-heatmap-row { display: grid; grid-template-columns: 70px repeat(8, 1fr); gap: 2px; align-items: center; }
.emp-heatmap-header { color: var(--text-3, #64748b); font-size: var(--fs-label); }
.emp-heatmap-axis { padding: 4px 0; font-weight: 500; font-size: var(--fs-label); }
.emp-heatmap-cell { padding: 6px 0; text-align: center; border-radius: 3px; color: var(--text-1, #fff); font-weight: 500; font-size: var(--fs-label); min-height: 18px; }

/* Cert mini/full entries */
.emp-cert-entry { padding: 7px 9px; background: rgba(255,255,255,.04); border-radius: 5px; margin-bottom: 5px; }
.emp-cert-entry:last-child { margin-bottom: 0; }
.emp-cert-expired-row { border-left: 2px solid var(--danger, #ef4444); }
.emp-cert-expiring-row { border-left: 2px solid var(--warning, #fbbf24); }
.emp-cert-meta { font-size: var(--fs-label); opacity: .7; }
.emp-cert-name { font-weight: 500; font-size: var(--fs-meta); margin-top: 2px; }
.emp-cert-sub { font-size: var(--fs-label); opacity: .65; margin-top: 2px; }
.emp-cert-badge { display: inline-block; margin-left: 6px; padding: 1px 6px; border-radius: 6px; font-size: var(--fs-label); }
.emp-cert-expired { background: rgba(239,68,68,.22); color: var(--danger, #fca5a5); }
.emp-cert-expiring { background: rgba(245,158,11,.22); color: var(--warning, #fbbf24); }

/* PR1.442 (#684) — Zertifikate als Badge-Karten, gruppiert nach Aussteller (Kompass R2_08).
   Gleiches Markup wie die Redesign-Shell (components/cert-badges.js). Herstellerlogos sind oft
   dunkle Grafiken — sie stehen deshalb in beiden Themes auf Weiß. */
.cert-badges { display: flex; flex-direction: column; gap: 16px; }
.cert-group-h { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; font-weight: 500; font-size: var(--fs-body); color: var(--text-1); }
.cert-issuer-logo { height: 22px; width: auto; max-width: 64px; object-fit: contain; padding: 2px 4px; background: #fff; border-radius: 4px; }
.cert-issuer-mono { display: inline-flex; align-items: center; justify-content: center; min-width: 22px; height: 22px; padding: 0 4px; border-radius: 4px; background: var(--bg-card2); color: var(--text-2); font-size: var(--fs-label); font-weight: 500; }
.cert-issuer-count { color: var(--text-3); font-weight: 500; font-variant-numeric: tabular-nums; }
.cert-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 8px; }
.cert-card { display: flex; align-items: center; gap: 12px; min-height: 80px; padding: 10px 12px; border: 1px solid var(--border); border-radius: 8px; background: var(--bg-card); }
.cert-badge { flex: 0 0 56px; width: 56px; height: 56px; display: inline-flex; align-items: center; justify-content: center; }
.cert-badge-img { width: 56px; height: 56px; object-fit: contain; }
.cert-badge--logo { background: #fff; border-radius: 8px; border: 1px solid var(--border); }
.cert-badge-logo { max-width: 44px; max-height: 32px; object-fit: contain; }
.cert-badge--mono { border-radius: 8px; background: var(--bg-card2); color: var(--text-2); font-size: var(--fs-ui); font-weight: 500; letter-spacing: .02em; }
.cert-body { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.cert-name { font-size: var(--fs-body); font-weight: 500; line-height: 1.3; color: var(--text-1); overflow-wrap: anywhere; }
.cert-status { display: inline-flex; align-items: center; gap: 4px; font-size: var(--fs-ui); color: var(--text-3); }
.cert-status--valid { color: var(--success); }
.cert-status--expiring { color: var(--warning); }
.cert-status--expired { color: var(--danger); }
.cert-sub { font-size: var(--fs-meta); color: var(--text-3); }
.cert-card--retired .cert-badge-img, .cert-card--retired .cert-badge-logo { filter: grayscale(1); opacity: .55; }
.cert-more { border: 1px solid var(--border); border-radius: 8px; padding: 8px 12px; }
.cert-more > summary { cursor: pointer; font-size: var(--fs-ui); color: var(--text-2); }
.cert-more[open] > summary { margin-bottom: 8px; }
.cert-more > summary:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; border-radius: 4px; }
.cert-unmatched-hint { margin: 0 0 6px; font-size: var(--fs-ui); color: var(--text-3); }
.cert-unmatched ul { margin: 0; padding-left: 18px; font-size: var(--fs-ui); color: var(--text-2); }
.cert-empty { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px; border: 1px dashed var(--border); border-radius: 8px; }
.cert-empty-text { font-size: var(--fs-body); color: var(--text-3); }
@media (max-width: 480px) { .cert-grid { grid-template-columns: 1fr; } }
/* PR1.446 (#688) — Credly-Abgleich: Statuswort, Vorschlagskarten, Seitenkarten.
   Gleiches Markup wie die Redesign-Shell (components/credential-cards.js). Die Seitenspalte
   bricht ohne Media-Query unter die Badges, sobald der Platz nicht mehr reicht. */
.cert-status-word { font-weight: 600; }
.cert-status-detail { color: var(--text-3); white-space: nowrap; }
.cert-status:has(.cert-status-word) { flex-wrap: wrap; column-gap: 6px; row-gap: 0; }
.cert-status--revoked { color: var(--danger); }
.cert-status--not-found, .cert-status--unverifiable { color: var(--text-2); }
/* Linkfarbe: --primary allein kommt im dunklen Theme nur auf 4,1:1 — zur Textfarbe hin gemischt
   (dunkel heller, hell dunkler) liegt sie in beiden Themes über 4,5:1. */
.cert-verify-link, .cert-cred-link { color: color-mix(in srgb, var(--primary) 70%, var(--text-1)); text-decoration: underline; text-underline-offset: 2px; }
.cert-cred-link { display: inline-flex; vertical-align: middle; margin-left: 4px; text-decoration: none; }
.cert-verify-link:focus-visible, .cert-cred-link:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; border-radius: 4px; }
.cert-card--suggested { border-style: dashed; background: transparent; }
.cert-suggest-h { justify-content: flex-start; }
.cert-suggest-all { margin-left: auto; }
.cert-suggest-all.btn-primary { background: var(--primary-dark); border-color: var(--primary-dark); }   /* Weiß auf --primary: 4,46:1 */
.cert-suggest-act { margin-top: 4px; }
.cred-layout { display: flex; flex-wrap: wrap; gap: 16px; align-items: flex-start; }
.cred-main { flex: 999 1 420px; min-width: 0; display: flex; flex-direction: column; gap: 16px; }
.cred-side { flex: 1 1 260px; min-width: 0; display: flex; flex-direction: column; gap: 12px; }
.cred-card { display: flex; flex-direction: column; gap: 8px; padding: 12px 14px; border: 1px solid var(--border); border-radius: 8px; background: var(--bg-card); }
.cred-card-h { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.cred-card-title { font-size: var(--fs-body); font-weight: 600; color: var(--text-1); }
.cred-flag { display: inline-flex; align-items: center; gap: 4px; font-size: var(--fs-ui); font-weight: 500; }
.cred-flag--ok { color: var(--success); }
.cred-flag--warn { color: var(--warning); }
.cred-flag--muted { color: var(--text-3); font-weight: 500; }
.cred-link { color: color-mix(in srgb, var(--primary) 70%, var(--text-1)); font-size: var(--fs-body); overflow-wrap: anywhere; }
.cred-link:focus-visible, .cred-src-name:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; border-radius: 4px; }
.cred-row { display: flex; justify-content: space-between; gap: 12px; font-size: var(--fs-ui); }
.cred-row-k { color: var(--text-2); display: inline-flex; align-items: center; gap: 4px; }
.cred-row-v { color: var(--text-1); text-align: right; }
.cred-ok { color: var(--success); }
.cred-num { font-variant-numeric: tabular-nums; }
.cred-sum--valid .cred-row-k { color: var(--success); }
.cred-sum--expiring .cred-row-k { color: var(--warning); }
.cred-sum--expired .cred-row-k, .cred-sum--revoked .cred-row-k { color: var(--danger); }
.cred-text, .cred-note { margin: 0; font-size: var(--fs-ui); line-height: 1.45; color: var(--text-2); }
.cred-note { display: flex; gap: 6px; align-items: flex-start; color: var(--warning); }
.cred-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.cred-off { align-self: flex-start; padding: 2px 0; border: 0; background: none; color: var(--text-3); font-size: var(--fs-ui); text-decoration: underline; text-underline-offset: 2px; cursor: pointer; }
.cred-off:hover { color: var(--text-1); }
.cred-off:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; border-radius: 4px; }
.cred-cands { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 8px; }
.cred-cand { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; }
.cred-cand-meta { font-size: var(--fs-meta); color: var(--text-3); flex: 1 1 auto; }
.cred-src { display: flex; gap: 10px; align-items: flex-start; padding-top: 8px; border-top: 1px solid var(--border); }
.cred-card-h + .cred-src { border-top: 0; padding-top: 0; }
.cred-src-mono { flex: 0 0 28px; height: 28px; display: inline-flex; align-items: center; justify-content: center; border-radius: 6px; background: var(--bg-card2); color: var(--text-2); font-size: var(--fs-meta); font-weight: 500; }
.cred-src-body { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.cred-src-name { font-size: var(--fs-body); font-weight: 500; color: var(--text-1); }
a.cred-src-name { color: color-mix(in srgb, var(--primary) 70%, var(--text-1)); }
.cred-src-text { margin: 0; font-size: var(--fs-ui); line-height: 1.4; color: var(--text-2); }
.cred-link-form { display: flex; flex-direction: column; gap: 4px; }
.cred-link-label { font-size: var(--fs-ui); color: var(--text-2); }
.cred-link-row { display: flex; gap: 8px; }
.cred-link-row .form-control { flex: 1 1 auto; min-width: 0; }
.cred-live { margin: 0; min-height: 1em; font-size: var(--fs-ui); color: var(--text-3); }
.cred-live:empty { display: none; }
.cred-live--error { display: flex; gap: 6px; color: var(--danger); }

/* Languages */
.emp-lang-row { display: flex; justify-content: space-between; padding: 3px 0; font-size: var(--fs-meta); }
.emp-lang-level { opacity: .7; }

/* Matching-fit */
.emp-match-panel { display: flex; flex-direction: column; gap: 10px; }
.emp-match-intro { font-size: var(--fs-meta); opacity: .75; padding: 0 4px; }
.emp-match-row {
    display: grid; grid-template-columns: 1fr auto auto; gap: 10px; padding: 10px 14px;
    background: var(--bg-card, rgba(255,255,255,.04)); border-radius: 8px; align-items: center;
    border-left: 3px solid transparent;
}
.emp-match-high { border-left-color: var(--success, #10b981); }
.emp-match-med { border-left-color: var(--warning, #fbbf24); }
.emp-match-low { border-left-color: var(--text-3, #64748b); }
/* PR1.128 (KI-only) F: „nicht bewertet" — dezent neutral, KEIN Score-Look (keine erfundene Zahl). */
.emp-match-unrated { border-left-color: var(--border, #334155); opacity: .68; }
.emp-match-name { font-weight: 500; font-size: var(--fs-ui); color: var(--text-1); text-decoration: none; }
.emp-match-name:hover { text-decoration: underline; }
/* PR1.254: `opacity` statt Farbe war hier der stille Kontrast-Killer. Deckkraft am
   Elternelement laesst sich am KIND nicht zuruecknehmen (sie erzeugt eine eigene
   Composite-Ebene) — der Herkunfts-Hinweis darin blieb deshalb trotz eigener
   Textfarbe bei gemessenen 3,57:1. Die zweite Textstufe ohne Deckkraft-Abschlag
   liest sich identisch und haelt AA. */
.emp-match-sub { font-size: var(--fs-label); color: var(--text-2); margin-top: 2px; }
.emp-match-score { font-size: var(--fs-title); font-weight: 600; color: var(--primary, #a5b4fc); }
.emp-match-unrated .emp-match-score { font-size: var(--fs-ui); font-weight: 500; color: var(--text-3, #64748b); }

/* PR1.254 (#448) — Reverse-Matching: der Reiter zeigt jetzt Vorgaenge statt nur Zahlen.
   Die Zeilenoptik oben bleibt unveraendert (dieselben Border-Akzente, dieselben
   Schwellen); hier kommen nur Kopfzeile, Zustaende und die Aktionsspalte dazu.
   Redesign-Pendant: .crm .crm-rev-* in style-redesign.css. */
.emp-match-intro {
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
}
.emp-match-actions { display: flex; gap: 6px; flex-shrink: 0; }
.emp-match-body { display: flex; flex-direction: column; gap: 10px; }
.emp-match-act { display: flex; align-items: center; }
.emp-match-reason {
    font-size: var(--fs-meta); color: var(--text-2); margin-top: 4px; line-height: 1.45;
}
.emp-match-origin { font-style: italic; }

/* Ladezustand: Host fuer den Fortschrittsbalken plus Zwischenstand darunter. */
.emp-match-loading { display: flex; flex-direction: column; gap: 6px; padding: 4px; }
/* Kontrast statt Eleganz: `opacity` auf --text-3 ergab gemessene 3,47:1 (axe-core,
   21.08.2026) — unter der AA-Schwelle von 4,5:1 fuer Fliesstext. Die zweite Textstufe
   ohne Deckkraft-Abschlag liegt darueber. Betrifft alle Hinweiszeilen dieses Panels;
   sie tragen die Begruendungen und den naechsten Schritt und sind damit genau die
   Texte, die gelesen werden muessen. */
.emp-match-progress-note { font-size: var(--fs-meta); color: var(--text-2); }

/* Fehlerzustand: Was + Warum + naechster Schritt (Pajamas-Muster). Eine generische
   Meldung waere hier besonders teuer — der Nutzer hat gerade einen Lauf bezahlt. */
.emp-match-error {
    display: flex; flex-direction: column; gap: 6px; align-items: flex-start;
    padding: 12px 14px; border-radius: 8px;
    background: var(--bg-card, rgba(255,255,255,.04));
    /* Volle Umrandung statt farbigem Seitenstreifen: der Streifen ist im Panel bereits
       vergeben — dort kodiert er die Score-Stufe der Trefferzeilen (.emp-match-high/med/low).
       Ihn zusaetzlich als Alarm-Akzent zu benutzen, hiesse dieselbe Form zweimal
       verschieden zu lesen. */
    border: 1px solid var(--danger, #ef4444);
}
.emp-match-error-msg { font-size: var(--fs-ui); font-weight: 500; color: var(--text-1); }
.emp-match-error-hint { font-size: var(--fs-meta); color: var(--text-2); line-height: 1.45; }

/* Leerzustand: aktives Verb + primaere Aktion (Konvention 20, Punkt 3). */
.emp-match-empty-title { font-size: var(--fs-ui); font-weight: 600; color: var(--text-1); }
.emp-match-empty-hint { font-size: var(--fs-meta); color: var(--text-2); margin: 4px 0 10px; line-height: 1.45; }

/* PR1.447 (#689) — „Passende Einsätze": Logo | Haupt | Score | Zeitlich | Aktionen,
   darunter der aufklappbare Begruendungsblock. Redesign-Pendant: .crm .crm-rev-* in
   style-redesign.css. Keine Animation beim Aufklappen — der Reiter wird mehrmals pro
   Woche beim Besetzen benutzt (Konvention 22, Motion-Budget). */
.emp-match-body { container-type: inline-size; }
/* PR1.447-optik — Breite kommt vom Panel, nicht vom Fenster (siehe Redesign-Pendant):
   zweizeilig als Standard, einzeilig erst ab 900px Panelbreite. */
.emp-match-panel .emp-match-row {
    grid-template-columns: 40px minmax(0, 1fr);
    gap: 8px 14px; align-items: center;
}
.emp-match-side {
    grid-column: 2; display: flex; flex-wrap: wrap; align-items: center;
    gap: 8px 18px; min-width: 0;
}
.emp-match-side .emp-match-score { flex: 1 1 140px; max-width: 220px; }
.emp-match-side .emp-match-act { margin-left: auto; flex-wrap: wrap; }
.emp-match-logo { align-self: start; }
.emp-match-main { min-width: 0; }
.emp-match-chips { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; }
.emp-match-chip {
    font-size: var(--fs-meta); line-height: 1; padding: 4px 7px; border-radius: 4px;
    background: var(--bg-card2); color: var(--text-2);
}
.emp-match-chip.is-fit {
    background: color-mix(in srgb, var(--success) 16%, transparent); color: var(--text-1);
}
/* 20px fett bleibt „grosse Schrift" (AA 3:1) — kleiner faellt --primary im Dunkeln unter die Schwelle. */
.emp-match-score { display: flex; align-items: center; gap: 10px; }
.emp-match-pct { min-width: 3.2em; font-variant-numeric: tabular-nums; }
.emp-match-bar {
    flex: 1; height: 6px; border-radius: 3px; overflow: hidden;
    background: var(--bg-card2); display: block;
}
.emp-match-bar > span { display: block; height: 100%; background: var(--primary); border-radius: inherit; }
.emp-match-when { display: flex; flex-direction: column; gap: 2px; font-size: var(--fs-meta); color: var(--text-2); }
.emp-match-time { font-weight: 600; }
.emp-match-time.is-busy { color: var(--danger); }
.emp-match-time.is-freeFrom { color: var(--warning); }
.emp-match-time.is-free,
.emp-match-time.is-possible { color: var(--success); }
.emp-match-time.is-unknown { color: var(--text-2); font-weight: 500; }
.emp-match-act { gap: 6px; justify-content: flex-end; }
.emp-match-filters { display: inline-flex; gap: 4px; margin-right: 6px; }
.emp-match-filter {
    font: inherit; font-size: var(--fs-meta); padding: 4px 9px; border-radius: 6px; cursor: pointer;
    background: var(--bg-card2); color: var(--text-1); border: 1px solid transparent;
}
.emp-match-filter.is-on { background: var(--text-1); color: var(--bg-card); }
.emp-match-filter:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.emp-match-filter-n { opacity: .8; margin-left: 2px; }
.emp-match-why {
    grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 1fr);
    gap: 18px; padding: 14px 16px; border-radius: 8px; background: var(--bg-card2);
}
.emp-match-why-h { font-size: var(--fs-ui); font-weight: 500; color: var(--text-1); margin: 0 0 6px; }
.emp-match-why-h ~ .emp-match-why-h { margin-top: 12px; }
.emp-match-why-list { margin: 0; padding-left: 18px; font-size: var(--fs-ui); line-height: 1.5; color: var(--text-1); }
.emp-match-why-rec { font-size: var(--fs-ui); color: var(--text-1); margin: 10px 0 0; line-height: 1.5; }
.emp-match-why-src, .emp-match-why-none { font-size: var(--fs-meta); color: var(--text-2); margin: 12px 0 0; }
.emp-match-parts { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.emp-match-part {
    display: grid; grid-template-columns: minmax(140px, 190px) minmax(40px, 1fr) 80px; gap: 10px; align-items: center;
    font-size: var(--fs-ui); color: var(--text-1);
}
.emp-match-part-val { font-variant-numeric: tabular-nums; text-align: right; color: var(--text-2); }
.emp-match-part-sum, .emp-match-tier { font-size: var(--fs-meta); color: var(--text-2); margin: 10px 0 0; }
.emp-match-panel .emp-match-intro { flex-wrap: wrap; }
/* BF-115 — „Noch nicht bewertet": eigener Abschnitt unter den Treffern, ohne Score-Streifen
   (es gibt keine Stufe). Redesign-Pendant: .crm .crm-rev-unrated (style-redesign.css). */
.emp-match-unrated { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--border); }
.emp-match-unrated-h { font-size: var(--fs-ui); font-weight: 500; color: var(--text-1); margin: 0 0 8px; }
.emp-match-unrated-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.emp-match-unrated-row { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 8px 14px; }
.emp-match-unrated-main { flex: 1 1 260px; min-width: 0; }
.emp-match-unrated-why { font-weight: 600; color: var(--text-1); }
.emp-match-unrated-why.is-failed { color: var(--warning); }
.emp-match-unrated-hint { font-size: var(--fs-meta); color: var(--text-2); margin: 4px 0 0; line-height: 1.45; }
/* Breite Panels — NACH den Grundregeln, sonst ueberstimmen diese die Container-Abfrage. */
@container (min-width: 760px) {
    .emp-match-why { grid-column: 2 / -1; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); }
}
@container (min-width: 900px) {
    .emp-match-panel .emp-match-row { grid-template-columns: 40px minmax(280px, 1fr) auto; }
    .emp-match-side { grid-column: 3; flex-wrap: nowrap; }
    .emp-match-side .emp-match-score { flex: 0 0 160px; }
    .emp-match-side .emp-match-when { flex: 0 0 170px; }
}

/* Coaching */
.emp-coaching-entry { padding: 7px 0; border-bottom: 1px solid rgba(255,255,255,.04); }
.emp-coaching-entry:last-child { border-bottom: none; }
.emp-coaching-meta { font-size: var(--fs-label); opacity: .55; }
.emp-coaching-note { font-size: var(--fs-meta); line-height: 1.4; margin-top: 3px; font-style: italic; }

/* AI-Status */
.emp-ai-line { font-size: var(--fs-meta); opacity: .85; padding: 2px 0; }

/* Footer */
/* PR1.279 (#473): eine Spalte statt zwei. Der Fussbereich trug bis dahin die
   FTE-Zeitleiste UND eine Zweitausgabe der Hyperscaler-x-Portfolio-Matrix; mit dem
   Wegfall der Matrix stand die Zeitleiste sonst auf halber Breite neben einer leeren
   Haelfte. Die Redesign-Shell zeigt sie ohnehin ueber die volle Breite. */
.emp-detail-footer {
    display: grid; grid-template-columns: 1fr; gap: 14px;
    padding: 14px;
}
.emp-tl-row { display: grid; grid-template-columns: repeat(12, 1fr); gap: 2px; height: 28px; }
.emp-tl-cell { border-radius: 3px; min-width: 6px; }
.emp-tl-labels { display: grid; grid-template-columns: repeat(12, 1fr); gap: 2px; margin-top: 4px; font-size: var(--fs-label); opacity: .6; text-align: center; }

/* ── PR1.444 (#686) — Auslastung: ein Diagramm und eine Aussage ────────────────
   Ersetzt Steckbrief-Tabelle, Balkenreihe, Kennzahl-Kacheln und die zweite Einsatzliste
   (PR1.252/PR1.326). Bewusst UNGESCOPT und in style.css: beide Shells laden diese Datei,
   und das Redesign ueberschreibt darueber nur Tokens im `.crm`-Scope — derselbe Baustein
   sieht in jeder Shell nach ihr aus (Muster `.actual-pt-table`). Layout-Masse stehen hier,
   weil `check-ui-craft` rohe Pixel in style-redesign.css ratcht.
   Keine Transition: die Flaeche wird taeglich gelesen (Motion-Budget null, Konvention 22).
   Farben nach Kompass 03 Variante A: fest = --primary, ueber 100 % = --attention,
   „in Planung" = Schraffur in --primary. */

.wl-head {
    display: flex; align-items: center; justify-content: space-between; gap: 8px 12px;
    flex-wrap: wrap; margin-bottom: 10px;
}
.wl-head .emp-card-title { margin-bottom: 0; }
.wl-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-left: auto; }

.wl-aussage {
    display: flex; align-items: flex-start; gap: 8px;
    padding: 8px 12px; margin-bottom: 14px; border-radius: 8px;
    font-size: var(--fs-body); line-height: 1.45; color: var(--text-1);
    background: color-mix(in srgb, var(--text-3) 10%, transparent);
}
.wl-aussage strong { font-weight: 600; }
.wl-aussage--warn { background: color-mix(in srgb, var(--attention) 16%, transparent); }
.wl-aussage-icon { flex: none; display: inline-flex; color: var(--attention); }

.wl-plot {
    position: relative; height: 96px;
    display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 6px; align-items: end;
    border-bottom: 1px solid var(--border);
}
/* Leere Saeule als zarte Spur, damit zwoelf Monate auch ohne Einsatz als Achse lesbar sind. */
.wl-col {
    height: 100%; min-width: 0;
    display: flex; flex-direction: column; justify-content: flex-end;
    border-radius: 3px 3px 0 0; overflow: hidden;
    background: color-mix(in srgb, var(--text-3) 7%, transparent);
}
.wl-col-fest { flex: none; background: var(--primary); }
.wl-col-fest.is-over { background: var(--attention); }
.wl-col-plan, .wl-key--plan {
    flex: none;
    background: repeating-linear-gradient(135deg,
        color-mix(in srgb, var(--primary) 55%, transparent) 0 2px, transparent 2px 5px);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--primary) 45%, transparent);
}
.wl-line {
    position: absolute; left: 0; right: 0; z-index: 1; pointer-events: none;
    border-top: 1px dashed var(--text-3);
}

.wl-axis {
    display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 6px;
    margin-top: 4px; text-align: center;
}
.wl-axis-cell { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.wl-axis-month { font-size: var(--fs-meta); color: var(--text-2); }
.wl-axis-cell.is-current .wl-axis-month { font-weight: 600; color: var(--text-1); }
/* `tabular-nums`: zwoelf Werte nebeneinander sollen ruhig stehen, nicht tanzen. */
.wl-axis-val { font-size: var(--fs-meta); color: var(--text-2); font-variant-numeric: tabular-nums; white-space: nowrap; }
.wl-axis-val.is-over { color: var(--attention); font-weight: 600; }

.wl-legend {
    display: flex; flex-wrap: wrap; gap: 4px 14px; list-style: none;
    margin: 10px 0 0; padding: 0; font-size: var(--fs-meta); color: var(--text-2);
}
.wl-legend li { display: flex; align-items: center; gap: 5px; }
.wl-key { width: 10px; height: 10px; border-radius: 2px; flex: none; }
.wl-key--fest { background: var(--primary); }
.wl-key--over { background: var(--attention); }

/* Schmal: zwoelf Spalten bleiben, nur enger; die Einheit faellt weg, die Zahl bleibt
   (bei 420px laufen zwoelf „100 %" sonst ineinander). */
@media (max-width: 560px) {
    .wl-plot, .wl-axis { gap: 3px; }
    .wl-axis-month, .wl-axis-val { font-size: var(--fs-label); }
    .wl-unit { display: none; }
}

/* Sichtbarer Fokus ist Pflicht (RD1.10): Projektnamen im Reiter „Einsätze" sind role="link"
   mit tabindex; ohne eigene Fokus-Regel waeren sie mit der Tastatur unsichtbar erreichbar.

   Die Linkfarbe ist eine hellere Stufe von `--primary`, nicht das Token selbst: `#6366f1`
   misst auf `--bg-card` 4,13:1 und liegt knapp unter AA. `#818cf8` ist derselbe Farbton
   eine Stufe heller und kommt auf 6,18:1. */
.emp-workload-link { color: #818cf8; cursor: pointer; }
.emp-workload-link:hover { text-decoration: underline; }
.emp-workload-link:focus-visible {
    outline: 2px solid var(--primary, #6366f1); outline-offset: 2px; border-radius: 2px;
}

/* Chip Cloud */
.chip-cloud { display: flex; gap: 4px; flex-wrap: wrap; }

/* Avatar */
.emp-avatar {
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 50%; position: relative; overflow: hidden;
    color: #fff; font-weight: 600;
    vertical-align: middle;
    flex-shrink: 0;
}
.emp-avatar-img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* PR1.501 — Personen-Zuweisungen: immer rund. Das Portraet liegt deckend ueber
   den Initialen; schlaegt es fehl, entfernt ma-photo.js das <img> und die
   Buchstaben bleiben stehen — gleiche Groesse, nichts springt. */
.emp-avatar.is-round { border-radius: 50%; }
.emp-avatar-photo > .emp-avatar-img { position: absolute; inset: 0; border-radius: inherit; }
/* PR1.27 #168 (B10) — sobald ein CV-extrahiertes Foto (kb:<docId>) async pre-signed
   nachgeladen wurde (background-image + .kb-photo-loaded), die Initialen ausblenden.
   Das Sourcing-Badge (separat positioniert) bleibt sichtbar. */
.emp-avatar.kb-photo-loaded { color: transparent; }
.emp-avatar.kb-photo-loaded .emp-avatar-text { visibility: hidden; }
/* Debug #586 — das Foto liegt als eigene Bild-Ebene UEBER der Initialen-Bubble
   (ma-photo-layer.js). Deckend und an keine Farbregel gebunden: Inline-`color`
   (Redesign-Liste) oder fehlende .emp-avatar-Klasse (Chips, Gantt-Hover) koennen
   die Buchstaben nicht mehr ueber das Gesicht schieben. Ecken folgen der Bubble. */
.ma-photo-layer {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    object-fit: cover; object-position: center;
    border-radius: inherit;
    z-index: 1;
    pointer-events: none;
    display: block;
    max-width: none;
}
/* Status-Punkte, Sourcing-Badges und der Foto-Button bleiben ueber dem Foto. */
.has-ma-photo > .emp-dot,
.has-ma-photo > .emp-avatar-edit,
.has-ma-photo > [class*="badge"],
.has-ma-photo > [class*="dot"] { z-index: 2; }
.emp-avatar-edit {
    position: absolute; bottom: -2px; right: -2px;
    width: 22px; height: 22px; border-radius: 50%;
    background: var(--primary, #6366f1); color: #fff; border: 2px solid var(--bg-1, #1a1d2e);
    cursor: pointer; font-size: var(--fs-label); display: flex; align-items: center; justify-content: center;
    padding: 0;
}

/* Career log */
.career-log-list { list-style: none; padding: 0; margin: 0; font-size: var(--fs-meta); }
.career-log-entry { display: grid; grid-template-columns: 22px 60px 1fr; gap: 6px; padding: 4px 0; align-items: start; }
.career-log-icon { text-align: center; }
.career-log-date { opacity: .7; font-size: var(--fs-label); }
.career-log-desc { line-height: 1.4; }
.career-log-more { font-size: var(--fs-label); opacity: .55; margin-top: 6px; font-style: italic; }
.career-log-empty { font-size: var(--fs-meta); opacity: .55; font-style: italic; padding: 4px 0; }

/* Responsive */
@media (max-width: 1279px) {
    /* PR1.522 (#802) — unter 1280 px bleibt es zweispaltig, die Fakten werden schmaler. */
    .emp-detail-2col { grid-template-columns: minmax(0, 1fr) 360px; }
}
@media (max-width: 1000px) {
    .emp-detail-2col { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 1200px) {
    /* BF-45 (#491) — ab hier reicht die Breite nicht mehr fuer Name UND Angaben in einer
       Zeile. Die Angaben rutschen unter Bild + Name und nutzen dort die volle Breite;
       der Name bleibt einzeilig. Die Grenze liegt bewusst hier und nicht erst bei 800 px:
       dazwischen war der Name sonst wieder auf gut 200 px gequetscht. */
    /* PR1.519 (#796) — Leiste auf drei Spalten, die Aktionen unter Name und Bild. */
    .emp-kz { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .emp-kz-cell + .emp-kz-cell { border-left: 0; }
    .emp-kz-cell { border-top: 1px solid var(--border); }
    .emp-kz-cell:nth-child(-n+3) { border-top: 0; }
}
@media (max-width: 800px) {
    /* BF-45 (#491) — der Kopf ist ab hier einspaltig; das Faktenraster faellt auf zwei
       Spalten, damit die Beschriftungen lesbar bleiben statt auf 60 px zu schrumpfen.
       Der Desktop-Fall bleibt der Massstab — die Einspaltigkeit ist keine Ausrede dafuer. */
    /* Bild und Name bleiben nebeneinander — sie untereinander zu stapeln macht den Kopf
       fast doppelt so hoch, ohne dass etwas lesbarer wuerde. Nur die Angaben rutschen
       unter beide und nutzen dort die volle Breite. */
    /* PR1.519 (#796) — Bild und Name bleiben nebeneinander, die Aktionen rutschen
       darunter; die Leiste faellt auf zwei Spalten. */
    .emp-head-top { grid-template-columns: auto minmax(0, 1fr); gap: 12px; padding: 14px 16px; }
    .emp-head-avatar .emp-avatar { width: 56px; height: 56px; }
    .emp-head-actions { grid-column: 1 / -1; flex-wrap: wrap; }
    .emp-kz { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .emp-kz-cell:nth-child(-n+3) { border-top: 1px solid var(--border); }
    .emp-kz-cell:nth-child(-n+2) { border-top: 0; }
    .emp-kz-cell { padding: 10px 16px; }
}

/* HF3.29 — Kleiner Edit-Shortcut im Card-Corner (überspringt Detail-View) */
.employee-card { position: relative; }
.emp-card-edit-btn {
    position: absolute; top: 6px; right: 34px;
    width: 26px; height: 26px; border-radius: 50%;
    background: rgba(99,102,241,.15); color: var(--text-2, #a5b4fc);
    border: none; cursor: pointer; font-size: var(--fs-ui);
    display: flex; align-items: center; justify-content: center;
    transition: background 150ms, transform 150ms;
    z-index: 2;
}
.emp-card-edit-btn:hover { background: rgba(99,102,241,.35); transform: scale(1.1); }

/* PR1.98 #245 — Skill-Profil-Einstieg auf der Karte (Deep-Link auf den Skills-Tab der
   Detail-View). PR1.435 (#674): Werkzeug oben rechts, Aussehen in #view-employees. */

/* HF3.29 — Photo-Upload-Section im Edit-Modal */
.emp-photo-preview {
    width: 96px; height: 96px; border-radius: 50%;
    background: linear-gradient(135deg, #6366f1, #ec4899);
    display: flex; align-items: center; justify-content: center;
    color: #fff; font-weight: 600; font-size: var(--fs-kpi);
    overflow: hidden; flex-shrink: 0;
    border: 2px solid rgba(255,255,255,.12);
}
.emp-photo-preview-img { width: 100%; height: 100%; object-fit: cover; }
/* Debug #586 — Vorschau in der Maske: Foto-Ebene sitzt auf dem 96-px-Kreis. */
.emp-photo-preview { position: relative; }
.emp-photo-actions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; align-items: center; }

/* Debug #586 — Foto-Editor (photo-crop-dialog.js). Ueber der MA-Maske (z 1000). */
.photo-crop-overlay {
    position: fixed; inset: 0; z-index: 1100;
    display: flex; align-items: center; justify-content: center;
    background: rgba(0, 0, 0, .72);
    padding: 16px;
}
.photo-crop-dialog {
    background: var(--bg-card);
    color: var(--text);
    border: 1px solid var(--border);
    border-radius: var(--radius-xl, 16px);
    box-shadow: var(--shadow-lg);
    padding: 20px 22px;
    width: min(380px, 100%);
    max-height: calc(100vh - 32px);
    overflow: auto;
}
.photo-crop-title { margin: 0 0 4px; font-size: var(--fs-section); }
.photo-crop-hint { margin: 0 0 14px; font-size: var(--fs-ui); color: var(--text-muted, var(--text)); line-height: 1.4; }
.photo-crop-stage {
    position: relative; overflow: hidden; margin: 0 auto;
    border-radius: 12px;
    background: #111;
    cursor: grab; touch-action: none; user-select: none;
    outline: none;
}
.photo-crop-stage.is-dragging { cursor: grabbing; }
.photo-crop-stage:focus-visible { box-shadow: 0 0 0 3px var(--primary); }
.photo-crop-img {
    position: absolute; left: 0; top: 0;
    max-width: none; transform-origin: 0 0;
    pointer-events: none;
}
/* Abgedunkelter Rand ausserhalb des Kreises: zeigt, was spaeter abgeschnitten ist. */
.photo-crop-mask {
    position: absolute; inset: 0; pointer-events: none;
    border-radius: 50%;
    box-shadow: 0 0 0 999px rgba(0, 0, 0, .55);
    outline: 2px solid rgba(255, 255, 255, .85); outline-offset: -2px;
}
.photo-crop-zoom { display: flex; align-items: center; gap: 10px; margin: 14px 4px 4px; font-weight: 600; }
.photo-crop-range { flex: 1; accent-color: var(--primary); }
.photo-crop-previews { display: flex; align-items: center; gap: 10px; margin: 10px 0 4px; }
.photo-crop-preview-label { font-size: var(--fs-meta); color: var(--text-muted, var(--text)); margin-right: auto; }
.photo-crop-preview { width: 48px; height: 48px; border-radius: 50%; background: #222; }
.photo-crop-preview.is-sm { width: 32px; height: 32px; }
.photo-crop-preview.is-xs { width: 22px; height: 22px; border-radius: 6px; }
.photo-crop-actions { display: flex; align-items: center; gap: 8px; margin-top: 16px; }
.photo-crop-spacer { flex: 1; }
.emp-photo-drop {
    display: flex; align-items: center; justify-content: center;
    min-height: 64px; padding: 12px;
    border: 2px dashed var(--border, rgba(255,255,255,.18));
    border-radius: 10px;
    background: rgba(255,255,255,.03);
    cursor: pointer; transition: border-color 150ms, background 150ms;
}
.emp-photo-drop:hover { border-color: var(--primary, #6366f1); background: rgba(99,102,241,.05); }
.emp-photo-drop-label { color: var(--text-2, #94a3b8); font-size: var(--fs-meta); text-align: center; }
.emp-photo-status { font-size: var(--fs-meta); opacity: .85; }
.emp-photo-status-ok { color: var(--success, #10b981); }
.emp-photo-status-err { color: var(--danger, #ef4444); }

/* HF3.29 — Project-Linking-Dialog (Stage 2.5) */
.linking-intro { color: var(--text-2, #a5b4fc); font-size: var(--fs-ui); margin-bottom: 14px; line-height: 1.5; }
.linking-table { width: 100%; border-collapse: collapse; font-size: var(--fs-ui); }
.linking-table th {
    text-align: left; padding: 8px 10px; background: rgba(255,255,255,.04);
    color: var(--text-3, #64748b); font-size: var(--fs-label); border-bottom: 1px solid var(--border, rgba(255,255,255,.1));
}
.linking-row td { padding: 10px; vertical-align: top; border-bottom: 1px solid rgba(255,255,255,.04); }
.linking-input strong { display: block; font-weight: 600; }
.linking-input-sub { font-size: var(--fs-label); opacity: .7; margin-top: 2px; }
.linking-cand-preview { }
.linking-cand-reason { display: block; font-size: var(--fs-label); opacity: .65; margin-top: 3px; line-height: 1.4; }
.linking-cand-empty { font-style: italic; opacity: .55; }
.linking-select { width: 100%; padding: 6px 8px; font-size: var(--fs-meta); }

/* ───────────────────────────────────────── */
/*  HF3.27 — Scoring-Card + Review-Dialog     */
/* ───────────────────────────────────────── */

/* PR1.440 (#682) — Scoring-Karte (Domain-Scores) aus beiden Shells entfernt; der
   Review-Dialog unten bleibt (Modul score-review-dialog.js besteht weiter). */

/* Score-Review-Dialog */
.score-review-overlay .score-review-modal {
    background: var(--bg-card, #1c1e28);
    color: var(--text-primary, #fff);
    border-radius: 6px;
    border: 1px solid var(--border, #3b3f4d);
}
.score-review-modal h2 { color: var(--text-primary, #fff); margin: 0; }
.sr-sub { color: var(--text-secondary, #cbd5e1); }

.sr-table th,
.sr-table td {
    color: var(--text-primary, #fff);
}
.sr-row-conflict {
    background: rgba(245,158,11,0.08);
}

.sr-score {
    font-family: 'Fira Sans', system-ui, sans-serif; font-variant-numeric: tabular-nums;
    padding: 1px 6px;
    border-radius: 3px;
    display: inline-block;
    min-width: 28px;
    text-align: center;
}
.sr-score-current { background: rgba(255,255,255,0.05); color: var(--text-primary, #fff); }
.sr-score-ki      { background: rgba(99,102,241,0.20); color: #c7d2fe; cursor: help; }
.sr-score-det     { background: rgba(16,185,129,0.20); color: #a7f3d0; cursor: help; }

.sr-manual-value,
.sr-manual-note {
    background: var(--bg-input, #2a2d3a);
    color: var(--text-primary, #fff);
    border: 1px solid var(--border, #3b3f4d);
    padding: 3px 6px;
    border-radius: 3px;
    font-size: var(--fs-ui);
    margin-right: 4px;
}

.sr-banner {
    color: var(--text-primary, #fff);
    font-size: var(--fs-body);
}

/* PR1.440 (#682) — Hyperscaler × Portfolio-Matrix entfernt (ersetzt durch die
   Portfolio-Schwerpunkte des Steckbriefs, `sb-*`). */

/* Below-Threshold-Kandidaten-Legende */
.opp-cand-row-fallback {
    opacity: 0.72;
}
.opp-cand-row-fallback .opp-cand-score {
    color: var(--text-3);
    font-style: italic;
}
.opp-cand-legend {
    margin-top: 4px;
    font-size: var(--fs-label);
    color: var(--text-3);
    line-height: 1.3;
}

/* ─────────────────────────────────────────────────────────────
   PR1.03 — Opportunity-Tabellenansicht
   13-Spalten-Tabelle mit sticky-header, sticky-customer-Spalte,
   Multi-Column-Sort-Indicators, Filter-Chip-Bar, Action-Menü.
   ───────────────────────────────────────────────────────────── */

.opp-table-scroll {
  overflow-x: auto;
  overflow-y: visible;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg-card);
  max-width: 100%;
  max-height: calc(100vh - 280px);
}
table.opp-table {
  border-collapse: separate;
  border-spacing: 0;
  font-size: var(--fs-body);
  min-width: 100%;
  color: var(--text-1);
}
table.opp-table thead tr.col-heads-row th {
  position: sticky;
  top: 0;
  background: var(--bg-card);
  color: var(--text-2);
  font-size: var(--fs-body);
  font-weight: 500;
  padding: 10px 12px;
  text-align: left;
  border-bottom: 2px solid var(--border);
  white-space: nowrap;
  z-index: 2;
  cursor: pointer;
  user-select: none;
}
table.opp-table thead tr.col-heads-row th[data-sortable="false"] { cursor: default; }
table.opp-table thead tr.col-heads-row th:hover[data-sortable="true"] { background: rgba(99,102,241,.08); }
table.opp-table tbody tr.opp-row {
  height: 56px; /* PR1.424 (#661) — feste Zeilenhoehe */
  cursor: pointer;
}
table.opp-table tbody tr.opp-row:nth-child(even) { background: rgba(255,255,255,.02); }
table.opp-table tbody tr.opp-row:hover { background: rgba(99,102,241,.06); }
table.opp-table td {
  padding: 8px 12px;
  border-bottom: 1px solid rgba(255,255,255,.03);
  vertical-align: middle;
  white-space: nowrap;
  max-width: 240px;
  overflow: hidden;
  text-overflow: ellipsis;
}
table.opp-table td.col-portfolio { white-space: normal; max-width: 280px; }
table.opp-table td.col-name { font-weight: 600; }
table.opp-table .num { font-variant-numeric: tabular-nums; text-align: right; display: inline-block; min-width: 40px; }
table.opp-table .muted { color: var(--text-3); }
table.opp-table .apollon-num { font-family: 'Fira Sans', system-ui, sans-serif; font-variant-numeric: tabular-nums; font-size: var(--fs-ui); color: var(--text-2); }

/* PR2.01 #131 — sprechbare Opp-Nummer APOLLON-XXXX */
.apollon-number-badge {
  font-family: 'Fira Sans', system-ui, sans-serif; font-variant-numeric: tabular-nums;
  font-size: var(--fs-ui); letter-spacing: .02em;
  color: var(--text-2); margin-top: 2px;
}
.apollon-num-card {
  position: absolute; top: 7px; right: 9px;
  font-family: 'Fira Sans', system-ui, sans-serif; font-variant-numeric: tabular-nums;
  font-size: var(--fs-label); letter-spacing: .02em;
  color: var(--text-3); opacity: .7;
  pointer-events: none;
}
table.opp-table .opp-table-empty {
  text-align: center;
  color: var(--text-3);
  padding: 32px 12px !important;
  font-style: italic;
}
/* PR1.338 (#552) — die Leerzeile spannt die ganze (oft ueberbreite) Tabelle; zentriert lag
   ein laengerer Hinweis halb ausserhalb des sichtbaren Bereichs. Der Text klebt jetzt im
   Sichtfenster (Breite ≈ Fenster minus Seitenleiste) und bricht dort zentriert um. */
table.opp-table .opp-table-empty-text {
  position: sticky;
  left: 0;
  display: block;
  width: calc(100vw - 300px);
  max-width: 100%;
  white-space: normal;
  text-align: center;
}

/* Sticky Kundenname-Spalte (col-sticky-name kommt aus customer-table.js Pattern wiederverwendbar) */
table.opp-table .col-sticky-name {
  position: sticky;
  left: 0;
  background: var(--bg-card);
  box-shadow: inset -1px 0 0 var(--border); /* PR1.424: Haarlinie statt hartem Schatten */
  font-weight: 600;
  z-index: 1;
}
table.opp-table thead tr th.col-sticky-name { z-index: 3; }

/* 3-Dots Action-Spalte */
table.opp-table td.col-action {
  width: 40px;
  text-align: right;
}
.btn-icon {
  background: transparent;
  border: 1px solid transparent;
  color: var(--text-2);
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 6px;
  font-size: var(--fs-title);
  line-height: 1;
}
.btn-icon:hover { background: rgba(99,102,241,.12); color: var(--text-1); }

/* 3-Dots-Menü (Opportunity: Bearbeiten / Duplizieren / Archivieren —
   Projekt ab PR1.220 #380: Bearbeiten / Duplizieren / Beenden / Löschen).
   Beide Menüs teilen sich bewusst dieselben Regeln: gleiche Mechanik, gleiche Optik. */
.opp-action-menu,
.project-action-menu,
/* PR1.221 #381 — die Statusauswahl ist dasselbe schwebende Menü, nur mit anderem Inhalt.
   Sie teilt die Regeln, damit sie in beiden Shells nicht auseinanderläuft. */
.status-change-menu {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: 0 8px 24px rgba(0,0,0,.4);
  min-width: 180px;
  z-index: 10000;
  padding: 4px 0;
  display: flex;
  flex-direction: column;
}
.opp-action-item,
.project-action-item,
.status-change-item {
  background: transparent;
  border: none;
  color: var(--text-1);
  padding: 8px 14px;
  text-align: left;
  cursor: pointer;
  font-size: var(--fs-body);
}
.opp-action-item:hover,
.project-action-item:hover,
.status-change-item:hover { background: rgba(99,102,241,.10); }
.opp-action-item.opp-action-danger,
.project-action-item.project-action-danger { color: var(--danger); }
.opp-action-item.opp-action-danger:hover,
.project-action-item.project-action-danger:hover { background: rgba(239,68,68,.10); }

/* ── PR1.221 #381 — Statuswechsel aus der Tabelle ──────────────────────────────────
   Der Auslöser ist ein durchsichtiger Rahmen um das unveränderte Schildchen: die Spalte
   sieht aus wie vorher, zeigt aber bei Hover und Tastatur-Fokus, dass hier etwas geht.
   Negatives Margin gleicht das Padding aus, damit die Zeilenhöhe exakt gleich bleibt. */
.status-change-trigger {
  background: none;
  border: 0;
  /* Klickfläche ≥ 24 px hoch (WCAG 2.2, 2.5.8 Zielgröße). Das Schildchen allein misst
     rund 19 px; das Polster hebt die Fläche, das negative Margin nimmt es aus dem Fluss
     wieder heraus — die Zeilenhöhe der Tabelle bleibt damit unverändert. */
  padding: 3px 4px;
  margin: -3px -4px;
  border-radius: var(--radius);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font: inherit;
  color: inherit;
  line-height: inherit;
}
.status-change-trigger:hover { background: rgba(99,102,241,.12); }
.status-change-trigger:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
/* Zustand „lädt": der Begründungs-Dialog bzw. die Projektmaske werden nachgeladen. */
.status-change-trigger[aria-busy="true"] { opacity: .55; cursor: progress; }
/* Im Ruhezustand dezent, aber erkennbar: bei opacity .5 / 10px sah der Pfeil im ersten
   Entwurf wie ein Staubkorn aus — man erkannte nicht, dass die Zelle bedienbar ist. */
.status-change-caret { color: var(--text-3); font-size: var(--fs-meta); opacity: .75; }
.status-change-trigger:hover .status-change-caret,
.status-change-trigger:focus-visible .status-change-caret { opacity: 1; }
/* Zustand „leer": kein anderer Status verfügbar — Hinweis statt leerem Kasten.
   --text-2 statt --text-3: der Hinweis ist echter Fließtext und muss 4.5:1 halten
   (gemessen 7.19:1; --text-3 lag bei 3.87:1 und wäre ein AA-Verstoß gewesen). */
.status-change-empty {
  color: var(--text-2);
  padding: 8px 14px;
  font-size: var(--fs-body);
  white-space: nowrap;
}
/* Menü-Eintrag mit Untermenü: Pfeil rechtsbündig, damit man ihn vor dem Klick sieht. */
.opp-action-item.has-submenu,
.project-action-item.has-submenu {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.opp-action-caret,
.project-action-caret { color: var(--text-3); font-size: var(--fs-body); }

/* Filter-Chip-Bar (über der Tabelle) */
/* PR1.162 — Zeile 3 der Opp-Filterzone: Filterkriterien + Filter-Werkzeuge (Presets,
   Reset, Spalten) in EINER Box. Die Box-Optik sitzt am Wrapper, weil #opp-table-filters
   per innerHTML neu gebaut wird und deshalb keine Geschwister aufnehmen kann. */
.opp-filter-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: flex-start;
  padding: 12px;
  background: rgba(99,102,241,.04);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  margin-bottom: 12px;
}
/* PR1.508 — Zeile 2 ist das Panel hinter „Filter & Anpassen": standardmäßig zu.
   `hidden` allein reicht nicht, weil .opp-filter-toolbar `display:flex` setzt. Täglich
   genutzt → kein Übergang, das Panel ist sofort da. */
.opp-filter-toolbar.filter-panel[hidden] { display: none; }
.filter-panel-toggle-wrap { display: contents; }
.filter-panel-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}
.filter-panel-toggle .filter-panel-caret { display: inline-flex; font-size: var(--fs-ui); color: var(--text-3); }
.filter-panel-toggle.is-open .filter-panel-caret { transform: rotate(180deg); }
.filter-panel-toggle.has-filters,
.filter-panel-toggle.is-open { border-color: var(--primary); color: var(--primary); }
.filter-panel-count {
  display: inline-block;
  min-width: 18px;
  background: var(--primary);
  color: #fff;
  border-radius: 999px;
  padding: 1px 6px;
  font-size: var(--fs-label);
  font-weight: 500;
  text-align: center;
  line-height: 1.5;
}
.filter-panel-toggle:focus-visible,
.filter-pill:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}
/* Aktive Filter als Pillen: ein Klick löst den Filter. In der klassischen Leiste stehen
   sie in einer eigenen Zeile unter Suche/Knopf/Aktionen (`order` + volle Breite) — neben dem
   Knopf ist bei 1440 px mit Seitenleiste kein Platz, und inline schoben sie CSV/Drucken/Neu
   in eine zweite Zeile. Ohne aktive Filter gibt es die Zeile nicht. */
.filter-pills {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  min-width: 0;
}
.filter-bar .filter-pills { order: 99; flex: 1 1 100%; }
.filter-pills:empty { display: none; }
/* Schmale Fenster: nur Symbol + Zahl, damit Suche, Knopf und Aktionen in einer Zeile bleiben.
   Der Name bleibt über aria-label und title erhalten. */
@media (max-width: 1280px) {
  .filter-bar .filter-panel-toggle > span:not(.filter-panel-count):not(.filter-panel-caret) { display: none; }
}
.filter-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  max-width: min(320px, 100%);
  padding: 4px 6px 4px 10px;
  border: 1px solid rgba(99,102,241,.35);
  border-radius: 999px;
  background: rgba(99,102,241,.10);
  color: var(--primary);
  font: inherit;
  font-size: var(--fs-ui);
  font-weight: 500;
  cursor: pointer;
}
.filter-pill:hover { border-color: var(--primary); }
.filter-pill-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.filter-pill-dim { font-weight: 500; }
.filter-pill-x {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  border-radius: 999px;
  background: rgba(99,102,241,.18);
  font-size: var(--fs-ui);
  line-height: 1;
}
.filter-pill:hover .filter-pill-x { background: var(--primary); color: #fff; }

.opp-filter-toolbar-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-left: auto;
}
.opp-filter-toolbar-actions .opp-preset-bar { margin-bottom: 0; }
.opp-filter-toolbar-actions .opp-column-picker-btn { margin: 0; }
/* PR1.340 (#554) — nur noch das Zahnrad: in Knopfschrift (12px) war es kaum zu erkennen. */
#btn-opp-column-picker { font-size: var(--fs-section); line-height: 1; padding: 6px 9px; }
/* PR1.340 (#554) — alle 9 Filter in EINER Zeile (Bernd 01.10.2026). Mit `flex: 1 1 0` und
   112px Mindestbreite wurden die Filter bei 1440px auf vier Zeilen gequetscht, während die
   Werkzeuge rechts eine Zeile belegten. Jetzt behalten die Filter ihre Inhaltsbreite; ist
   es zu eng (1280px), rutschen die Werkzeuge als Block rechtsbündig in Zeile 2.
   Nur hier gescoped — .filter-chip-group nutzen auch andere klassische Ansichten. */
.opp-filter-toolbar { gap: 8px; }
.opp-filter-toolbar .filter-chips-bar { flex: 0 1 auto; gap: 6px; }
.opp-filter-toolbar .filter-chip-group { min-width: 0; padding: 6px 8px; }
/* Der Leerhinweis „Noch keine gespeicherten Filter" kostete 190px; der Speichern-Knopf
   erklärt sich selbst. */
.opp-filter-toolbar .opp-preset-empty { display: none; }
/* Die Anzahl aktiver Filter steht schon an jedem Kästchen („Status 1"); am Reset-Knopf
   kostete „2 aktiv" die eine Zeile ab zwei aktiven Filtern. Aktiv bleibt erkennbar: der
   Knopf ist nur dann bedienbar. (User-Entscheidung 05.10.2026) */
.opp-filter-toolbar .btn-filter-reset .count-badge { display: none; }
/* Tastatur: die Filterkästchen hatten mit `outline: none` keinen sichtbaren Fokus. */
.opp-filter-toolbar .filter-chip-group summary:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
  border-radius: 4px;
}

.filter-chips-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: flex-start;
  /* flex-basis 0 statt auto: sonst ist die hypothetische Größe die volle Inhaltsbreite
     der 7 Filtergruppen, und die Werkzeuge rechts rutschen in eine zweite Zeile. */
  flex: 1 1 0;
  min-width: 0;
}
.filter-chip-group {
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg-card);
  padding: 6px 10px;
  /* PR1.162: 130 → 112px. Die 7 Gruppen teilen sich Zeile 3 jetzt mit Reset + Presets +
     Spalten-Button; bei 130px passte der Reset auf üblichen Breiten nicht mehr daneben.
     Nur eingeklappt relevant — beim Aufklappen wächst die Gruppe an ihren Inhalt. */
  min-width: 112px;
  max-width: 380px;
}
.filter-chip-group summary {
  cursor: pointer;
  user-select: none;
  font-size: var(--fs-body);
  color: var(--text-2);
  font-weight: 500;
  list-style: none;
  outline: none;
}
.filter-chip-group summary::-webkit-details-marker { display: none; }
.filter-chip-group[open] summary { margin-bottom: 6px; }
.filter-chip-count {
  display: inline-block;
  background: var(--primary);
  color: #fff;
  border-radius: 999px;
  padding: 1px 6px;
  font-size: var(--fs-label);
  margin-left: 4px;
  vertical-align: middle;
}
.filter-chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  max-height: 200px;
  overflow-y: auto;
}
.filter-chip {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text-2);
  padding: 4px 10px;
  border-radius: 999px;
  cursor: pointer;
  font-size: var(--fs-ui);
  white-space: nowrap;
}
.filter-chip:hover { border-color: var(--primary); color: var(--text-1); }
.filter-chip.active {
  background: var(--primary);
  border-color: var(--primary);
  color: #fff;
}
/* PR1.162 — kein `margin-left:auto` mehr: der Reset sitzt jetzt in .opp-filter-toolbar-actions
   zwischen Presets und Spalten-Button, nicht mehr am Ende der Chip-Leiste. */
#opp-filters-reset { align-self: center; white-space: nowrap; }

/* ── PR1.32 #169 — User-bezogene gespeicherte Filter-Presets (Opportunities) ── */
.opp-preset-bar { margin-bottom: 10px; }
.opp-preset-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}
.opp-preset-select-wrap { display: inline-flex; align-items: center; gap: 6px; }
.opp-preset-label { font-size: var(--fs-ui); color: var(--text-2); font-weight: 500; }
.opp-preset-select {
  background: var(--bg-input);
  border: 1px solid var(--border);
  color: var(--text-1);
  border-radius: 8px;
  padding: 6px 10px;
  font-size: var(--fs-body);
  cursor: pointer;
  min-width: 160px;
}
.opp-preset-select:focus { outline: none; border-color: var(--primary); }
.opp-preset-star,
.opp-preset-del {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text-2);
  border-radius: 8px;
  padding: 6px 9px;
  cursor: pointer;
  font-size: var(--fs-body);
  line-height: 1;
}
.opp-preset-star:hover,
.opp-preset-del:hover { border-color: var(--primary); color: var(--text-1); }
.opp-preset-star.is-default { color: #fbbf24; border-color: rgba(251,191,36,.4); }
.opp-preset-empty { font-size: var(--fs-ui); color: var(--text-2); font-style: italic; }
.preset-dialog-hint { font-size: var(--fs-ui); color: var(--text-2); margin: 8px 0 0; }
.modal.modal-sm { max-width: 420px; }

/* Yes/No Badges für ANÜ-Spalte */
.badge.badge-yes { background: rgba(16,185,129,.15); color: var(--success); border: 1px solid rgba(16,185,129,.3); }
.badge.badge-no  { background: rgba(107,114,128,.12); color: var(--text-2); border: 1px solid rgba(107,114,128,.25); }
.badge.badge-overflow {
  background: rgba(99,102,241,.12);
  color: var(--text-2);
  border: 1px solid rgba(99,102,241,.25);
  font-weight: 600;
}

/* v61 (23.09.2026) — Freitext-Tags (components/opp-tags.js): neutral, damit sie sich von
   den farbigen Portfolio-/Hyperscaler-Chips abheben. Tokens → gilt in beiden Themes. */
.badge.badge-tag {
  background: color-mix(in srgb, var(--text-1) 6%, transparent);
  color: var(--text-2);
  border: 1px solid color-mix(in srgb, var(--text-1) 14%, transparent);
  font-weight: 500;
}

/* PR1.05 — Markdown-Light Renderer Output (helpers.js renderMarkdownLight) */
.markdown-light ol { margin: 4px 0 4px 22px; padding: 0; list-style: decimal; }
.markdown-light li { margin: 2px 0; line-height: 1.45; }
.markdown-light a { color: var(--accent); text-decoration: underline; }
.markdown-light strong { color: var(--text-1); }
.markdown-light em { color: var(--text-2); font-style: italic; }
/* PR1.131 — ATX-Überschriften im CV-/Profil-Render (renderMarkdownLight ml-h). */
.markdown-light h4.ml-h { font-size: var(--fs-body); font-weight: 600; color: var(--text-1); margin: 14px 0 4px; }
.markdown-light h5.ml-h { font-size: var(--fs-body); font-weight: 500; color: var(--text-1); margin: 12px 0 3px; }
.markdown-light h6.ml-h { font-size: var(--fs-ui); font-weight: 500; color: var(--text-2); margin: 10px 0 2px; }
.markdown-light > .ml-h:first-child { margin-top: 0; }

/* PR1.133 #283 — CV-Profil strukturiert (helpers.js renderCvStructured). Global geladen
   (index.html), deckt beide Shells ab — .cvp-* bewusst kollisionsfrei (nicht .cv-*, das
   in style-redesign.css der Sales-Funnel-Stepper belegt). Nur CSS Custom Properties → Dark/Light. */
.cvp-root { font-size: var(--fs-body); line-height: 1.5; color: var(--text-2); }
.cvp-section { padding: 10px 0; border-bottom: 1px solid var(--border); }
.cvp-section:first-child { padding-top: 0; }
.cvp-section:last-child { border-bottom: 0; padding-bottom: 0; }
.cvp-title { font-size: var(--fs-ui); font-weight: 600; color: var(--text-2); margin: 0 0 6px; }
.cvp-body { color: var(--text-1); }
.cvp-list { margin: 2px 0; padding-left: 18px; list-style: disc; }
.cvp-list li, .cvp-body li { margin: 2px 0; line-height: 1.45; }
.cvp-exp { width: 100%; border-collapse: collapse; margin: 2px 0; }
.cvp-exp th { text-align: left; font-size: var(--fs-label); font-weight: 500; color: var(--text-3); padding: 3px 10px 3px 0; border-bottom: 1px solid var(--border); }
.cvp-exp td { padding: 4px 10px 4px 0; vertical-align: top; border-bottom: 1px solid var(--border-subtle, var(--border)); }
.cvp-exp td:first-child { white-space: nowrap; color: var(--text-2); font-variant-numeric: tabular-nums; }
.cvp-exp tr:last-child td { border-bottom: 0; }
/* Inline-Formatierung im CV-Body (Bold/Italic/Links, aus cvInline/renderMarkdownLight). */
.cvp-body strong { color: var(--text-1); }
.cvp-body em { color: var(--text-2); font-style: italic; }
.cvp-body a { color: var(--accent); text-decoration: underline; }
.cvp-body ol { margin: 4px 0 4px 22px; padding: 0; list-style: decimal; }
.cvp-body h4.ml-h, .cvp-body h5.ml-h, .cvp-body h6.ml-h { font-weight: 600; color: var(--text-1); margin: 8px 0 3px; }

/* ─────────────────────────────────────────
   PR1.11 — Team-Tabelle + Ramp-Setup-Dialog
   ───────────────────────────────────────── */
.team-table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--fs-body);
    background: var(--bg-card2);
    border: 1px solid var(--border);
    border-radius: 6px;
    overflow: hidden;
}
.team-table thead th {
    background: var(--bg-card);
    color: var(--text-2);
    font-weight: 500;
    font-size: var(--fs-meta);
    padding: 8px 10px;
    border-bottom: 1px solid var(--border);
}
.team-table tbody td {
    padding: 6px 10px;
    border-bottom: 1px solid var(--border);
    vertical-align: middle;
}
.team-table tbody tr:last-child td { border-bottom: none; }
.team-table .team-cell-name { color: var(--text-1); font-weight: 500; }
.team-person { display: inline-flex; align-items: center; gap: .5rem; min-width: 0; }
.team-person-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.team-table .team-input {
    width: 100%;
    padding: 4px 6px;
    background: var(--bg-input);
    color: var(--text-1);
    border: 1px solid var(--border);
    border-radius: 4px;
    font-size: var(--fs-body);
    box-sizing: border-box;
}
.team-table .team-input-fte { max-width: 90px; text-align: right; }
.team-table .team-input-date { max-width: 150px; }
.team-table .team-input-pt  { max-width: 80px; text-align: right; }
/* PR1.212 #372 — Ist-PT: gleiche Breite wie die Plan-PT daneben, damit Soll und Ist
   optisch als Paar lesbar sind. Die Abweichungs-Zelle ist reine Ausgabe. */
.team-table .team-input-actual-pt { max-width: 80px; text-align: right; }
.team-table .team-actual-delta { white-space: nowrap; }
/* PR1.211 #371 — Bei schmalem Fenster quetscht der Browser zuerst die Zahlenspalten
   zusammen, bis FTE und PT nur noch leere Kästchen sind (bei 768 px reproduzierbar): die
   Inputs haben ein `max-width`, aber keine Untergrenze. Mindestbreiten auf Tabelle und
   Zahlenfeldern halten alle Spalten lesbar; zusammen mit dem `overflow-x` des
   Containers scrollt stattdessen die Tabelle, statt das Formular auseinanderzudrücken.
   PR1.212 #372 — mit freigeschalteten Ist-Werten sind es elf statt neun Spalten; die
   Mindestbreite gilt dann nur für diese Variante (`.has-actual-pt`), damit die
   Regel-Tabelle nicht unnötig breit scrollt.
   BF-19 #398 — bis hierher war die Regel bewusst an #pm-team-container gebunden, weil die
   Opportunity-Maske dieselbe Tabelle ohne Scroll-Rahmen rendert und eine Mindestbreite dort
   das Formular gesprengt hätte. Der Rahmen ist jetzt da (#opp-team-container, index.html),
   also gilt die Regel für beide Masken — ein Wert an einer Stelle, statt zweier, die
   auseinanderlaufen. `.has-actual-pt` kann in der Opportunity heute nicht auftreten (die
   Ist-Spalten hängen an `project.actualPtEnabled`); mitgescopt ist sie trotzdem, damit die
   Regel nicht wieder aufgetrennt werden muss, falls sich das ändert.
   BF-19 #398 — 1000 px waren eine großzügige Aufrundung aus PR1.211 („rund 810 px"). Am
   17.08.2026 nachgemessen: die neun Spalten brauchen mit den 56-px-Untergrenzen der
   Zahlenfelder intrinsisch **873 px**. Die 1000 px kosteten genau das, was sie retten
   sollten — bei 1280 px Fensterbreite standen der Tabelle 923 px zur Verfügung, also
   scrollte sie um 77 px, obwohl sie gepasst hätte. 900 px lassen 27 px Luft über dem
   gemessenen Bedarf und passen in die 923.
   Ein zu kleiner Wert wäre hier ungefährlich: `min-width` ist eine Untergrenze, keine
   Fixbreite — unter ihren min-content-Bedarf schrumpft eine Tabelle ohnehin nicht. Die
   eigentliche Sicherung für FTE und PT sind die 56 px weiter unten. */
#pm-team-container .team-table,
#opp-team-container .team-table { min-width: 900px; }
#pm-team-container .team-table.has-actual-pt,
#opp-team-container .team-table.has-actual-pt { min-width: 1180px; }
#pm-team-container .team-table .team-input-fte,
#pm-team-container .team-table .team-input-pt,
#pm-team-container .team-table .team-input-actual-pt,
#opp-team-container .team-table .team-input-fte,
#opp-team-container .team-table .team-input-pt,
#opp-team-container .team-table .team-input-actual-pt { min-width: 56px; }
.team-table .team-input.fte-warn {
    border-color: var(--danger);
    color: var(--danger);
    background: rgba(239, 68, 68, 0.08);
}
/* PR1.31 #162 — Footer-Summary mit color-coded PT-Sum-Indikator */
.team-table tfoot .team-table-summary td {
    padding: 8px 10px;
    border-top: 1px solid var(--border);
    background: var(--bg-card);
}
/* PR1.395 (#623) — Personentage (errechnet): Anzeige, optisch zurückgenommen. */
.team-table .team-cell-pt-calc { text-align: right; font-variant-numeric: tabular-nums; color: var(--text-3); white-space: nowrap; }
.team-pt-calc { font-variant-numeric: tabular-nums; font-size: var(--fs-label); color: var(--text-3); white-space: nowrap; }
.team-pt-calc-missing, .team-table .team-pt-calc-missing { color: var(--text-3); font-style: italic; }
.team-pt-einsatzplan {
  background: none; border: 0; padding: 0; font: inherit; font-style: normal;
  color: var(--text-1); text-decoration: underline; cursor: pointer;
}
.team-pt-einsatzplan:focus-visible { outline: 2px solid var(--text-1); outline-offset: 2px; border-radius: 2px; }
/* PR1.395 (#623, A5) — neutrale Budget-Zeile unter dem Team (keine Ampel), darf umbrechen. */
.team-budget-line {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px;
  margin: 8px 0 4px; font-size: var(--fs-ui); color: var(--text-2);
  font-variant-numeric: tabular-nums;
}
.team-budget-line-text { flex: 1 1 16rem; min-width: 0; }
.team-budget-line .team-budget-split { flex: 0 0 auto; }
/* PR1.396 (#624) — Ampel verplant gegen verkauft. Warnen, nicht blockieren (Konvention 18).
   Text bleibt in --text-1 (Lesbarkeit), die Farbe trägt nur Rahmen, Tönung und Zeichen. */
.team-budget-ampel {
  flex: 1 0 100%; display: inline-flex; align-items: baseline; gap: 6px;
  padding: 6px 10px; border-radius: 8px; color: var(--text-1);
  border: 1px solid var(--border); background: var(--bg-card);
}
.team-budget-line.is-ok .team-budget-ampel { border-color: var(--success); background: color-mix(in srgb, var(--success) 8%, var(--bg-card)); }
.team-budget-line.is-ok .team-budget-ampel > span[aria-hidden] { color: var(--success); }
.team-budget-line.is-knapp .team-budget-ampel,
.team-budget-line.is-ueber .team-budget-ampel { border-color: var(--warning); background: color-mix(in srgb, var(--warning) 10%, var(--bg-card)); }
.team-budget-line.is-ueber .team-budget-ampel { border-color: var(--danger); background: color-mix(in srgb, var(--danger) 10%, var(--bg-card)); }
.team-budget-line.is-knapp .team-budget-ampel > span[aria-hidden] { color: var(--warning); }
.team-budget-line.is-ueber .team-budget-ampel > span[aria-hidden] { color: var(--danger); }
/* PR1.396 — Personenbudget: leise neben den errechneten PT, Eingabe in der Maske */
.team-pt-budget { font-size: var(--fs-label); color: var(--text-3); white-space: nowrap; }
.team-table .team-input-pt-budget { width: 4.5rem; text-align: right; }
.team-table .team-row-verplanen { font-size: var(--fs-meta); }
.team-budget-erhoeht {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px;
  margin: 6px 0; padding: 8px 12px; font-size: var(--fs-ui); color: var(--text-1);
  background: color-mix(in srgb, var(--warning) 10%, var(--bg-card));
  border: 1px solid var(--warning); border-radius: 8px;
}
.team-budget-erhoeht > span { flex: 1 1 18rem; min-width: 0; }
/* PR1.396 — Rückfrage „ganzes Team / pro Person" unter dem PT-Feld */
.pt-rueckfrage {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px;
  margin: -4px 0 10px; padding: 8px 10px; font-size: var(--fs-ui); color: var(--text-2);
  border: 1px solid var(--border); border-radius: 8px; background: var(--bg-card);
}
.pt-rueckfrage-gruppe { display: inline-flex; border: 1px solid var(--border); border-radius: 6px; overflow: hidden; }
.pt-rueckfrage-wahl {
  font: inherit; padding: 4px 10px; border: 0; background: transparent; color: var(--text-2); cursor: pointer;
}
.pt-rueckfrage-wahl + .pt-rueckfrage-wahl { border-left: 1px solid var(--border); }
.pt-rueckfrage-wahl.is-an { background: var(--primary-dark); color: #fff; font-weight: 600; }
.pt-rueckfrage-wahl:focus-visible, .pt-rueckfrage-zu:focus-visible { outline: 2px solid var(--text-1); outline-offset: 2px; }
.pt-rueckfrage-zu { margin-left: auto; background: none; border: 0; padding: 0; font: inherit; color: var(--text-3); text-decoration: underline; cursor: pointer; }
.pt-rueckfrage-ergebnis { flex: 1 0 100%; color: var(--text-1); font-weight: 600; font-variant-numeric: tabular-nums; }
.pt-rueckfrage-tipp { flex: 1 0 100%; color: var(--text-2); }
.pt-rueckfrage-warn { flex: 1 0 100%; }
/* PR1.396 — Verplanen-Panel unter der Team-Tabelle */
.team-verplanen-panel {
  margin: 8px 0; padding: 10px 12px; font-size: var(--fs-ui); color: var(--text-1);
  border: 1px solid var(--border); border-radius: 8px; background: var(--bg-card);
  display: flex; flex-direction: column; gap: 8px;
}
.team-verplanen-panel .vp-titel { font-weight: 600; }
.team-verplanen-panel .vp-hinweis { margin: 0; color: var(--text-2); font-size: var(--fs-meta); }
.team-verplanen-panel .vp-feld { display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.team-verplanen-panel .vp-pt { width: 5rem; }
.team-verplanen-panel .vp-frage { margin: 0; }
.team-verplanen-panel .vp-zaehler { color: var(--text-2); font-variant-numeric: tabular-nums; margin-left: 8px; }
.team-verplanen-panel .vp-warn { margin: 0; }
.team-verplanen-panel .vp-warn.is-aktiv, .team-verplanen-panel .vp-warn:not([data-vp-warn]) {
  padding: 6px 10px; border: 1px solid var(--warning); border-radius: 6px;
  background: color-mix(in srgb, var(--warning) 10%, var(--bg-card));
}
.team-verplanen-panel .vp-warn:empty { display: none; }
.team-verplanen-panel .vp-aktionen { display: flex; flex-wrap: wrap; gap: 8px; }
/* `.btn` setzt display und überstimmt sonst das hidden-Attribut */
.team-verplanen-panel [hidden] { display: none !important; }
.vp-kal { display: flex; flex-wrap: wrap; gap: 12px; max-height: 18rem; overflow-y: auto; }
.vp-kal-monat { min-width: 11rem; }
.vp-kal-titel { font-size: var(--fs-meta); font-weight: 500; color: var(--text-2); margin-bottom: 4px; }
.vp-kal-kopf, .vp-kal-raster { display: grid; grid-template-columns: repeat(5, 2rem); gap: 2px; }
.vp-kal-kopf span { font-size: var(--fs-label); color: var(--text-3); text-align: center; }
.vp-kal-tag {
  height: 2rem; font: inherit; font-size: var(--fs-meta); font-variant-numeric: tabular-nums;
  border: 1px solid var(--border); border-radius: 4px; background: transparent; color: var(--text-1); cursor: pointer;
}
.vp-kal-tag.is-an { background: var(--primary-dark); border-color: var(--primary-dark); color: #fff; font-weight: 600; }
.vp-kal-tag[aria-disabled="true"] { opacity: .45; cursor: not-allowed; }
.vp-kal-tag:focus-visible { outline: 2px solid var(--text-1); outline-offset: 1px; }
.team-table .team-ramp-btn {
    font-size: var(--fs-meta);
    white-space: nowrap;
}
.team-table .team-ramp-btn.team-ramp-active {
    color: var(--accent);
    border: 1px solid var(--accent);
}
.team-table .team-row-remove { color: var(--danger); }

/* Ramp-Dialog */
.ramp-dialog-overlay .ramp-dialog .ramp-form-grid {
    display: grid;
    grid-template-columns: 1fr 120px;
    gap: 8px 12px;
    align-items: center;
}
.ramp-dialog-overlay .ramp-dialog .ramp-form-grid label {
    font-size: var(--fs-body);
    color: var(--text-2);
}
.ramp-dialog-overlay .ramp-dialog .ramp-form-grid input {
    padding: 5px 8px;
    background: var(--bg-input);
    color: var(--text-1);
    border: 1px solid var(--border);
    border-radius: 4px;
    font-size: var(--fs-body);
}
.ramp-dialog-overlay .ramp-dialog code {
    background: var(--bg-input);
    padding: 1px 4px;
    border-radius: 3px;
    font-size: var(--fs-meta);
    color: var(--accent);
}

/* ============================================================
   HF3.14 — Top-10-Matching-Dialog + KB-Quick-View + KB-Components
   (Konvention 16 ERWEITERT, Phase C 2026-05-07)
   ============================================================ */

/* ── A) Matching-Dialog Layout ── */
.hf3-14-matching-overlay {
  /* erbt von .modal-overlay — keine Override notwendig */
}

.hf3-14-matching-dialog {
  background: var(--bg-card);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-lg);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.hf3-14-banner-bar {
  padding: 10px 18px;
  background: rgba(245, 158, 11, .12);
  border-left: 4px solid var(--warning);
  color: var(--text-1);
  font-size: var(--fs-body);
}

.hf3-14-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  flex: 1;
  overflow: hidden;
  min-height: 0;
}

.hf3-14-list {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  min-height: 0;
}

.hf3-14-list h3 {
  margin: 0 0 12px 0;
  font-size: var(--fs-body);
  font-weight: 600;
  color: var(--text-1);
}

.hf3-14-list-competency {
  border-right: 1px solid var(--border);
}

.hf3-14-cards-competency,
.hf3-14-cards-availability {
  overflow-y: auto;
  flex: 1;
  min-height: 0;
}

/* ── Karten ── */
.hf3-14-card {
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
  margin-bottom: 10px;
  background: var(--bg-card2);
  transition: border-color var(--transition), background var(--transition);
}

.hf3-14-card:hover {
  border-color: var(--border-light);
  background: var(--bg-hover);
}

.hf3-14-card-competency {
  border-left: 3px solid var(--accent);
}

.hf3-14-card-availability {
  border-left: 3px solid var(--success);
}

.hf3-14-card.selected {
  border-color: var(--primary);
  background: rgba(99, 102, 241, .08);
  box-shadow: 0 0 0 1px var(--primary-glow);
}

.hf3-14-card[data-also-in-other-list="true"] {
  outline: 1px dashed var(--accent-glow);
  outline-offset: 1px;
}

/* ── B) Karten-Innenteil ── */
.hf3-14-pick {
  cursor: pointer;
  accent-color: var(--primary);
}

.hf3-14-fte {
  background: var(--bg-input);
  color: var(--text-1);
  border: 1px solid var(--border);
  border-radius: 4px;
  font-size: var(--fs-meta);
  padding: 2px 6px;
  cursor: pointer;
}

.hf3-14-fte:focus {
  outline: none;
  border-color: var(--accent);
}

.hf3-14-skill-profile {
  font-size: var(--fs-meta);
  padding: 4px 8px;
}

.hf3-14-metric {
  margin-bottom: 6px;
}

.hf3-14-bar {
  height: 6px;
  background: var(--border);
  border-radius: 3px;
  overflow: hidden;
}

.hf3-14-bar-fill {
  height: 100%;
  background: var(--accent);
  transition: width var(--transition);
}

.hf3-14-card-availability .hf3-14-bar-fill {
  background: var(--success);
}

.hf3-14-source-pill-host {
  margin: 0 0 6px 0;
  min-height: 0;
}

.hf3-14-justification {
  font-size: var(--fs-meta);
  font-style: italic;
  color: var(--text-2);
  margin-bottom: 8px;
  min-height: 0;
  line-height: 1.35;
}

.hf3-14-justification:empty {
  display: none;
}

/* ── C) Footer / Selection-Info ── */
.hf3-14-selection-info {
  font-size: var(--fs-body);
  color: var(--text-2);
}

.hf3-14-selection-count {
  font-weight: 600;
  color: var(--text-1);
}

.hf3-14-commit:disabled {
  opacity: .5;
  cursor: not-allowed;
}

.hf3-14-close-x {
  background: transparent;
  border: 0;
  color: var(--text-2);
  font-size: var(--fs-title);
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 4px;
  transition: background var(--transition), color var(--transition);
}

.hf3-14-close-x:hover {
  background: rgba(255, 255, 255, .05);
  color: var(--text-1);
}

/* Mobile-Tolerant — bei kleineren Screens stapeln */
@media (max-width: 1024px) {
  .hf3-14-grid {
    grid-template-columns: 1fr;
    grid-template-rows: 1fr 1fr;
  }
  .hf3-14-list-competency {
    border-right: 0;
    border-bottom: 1px solid var(--border);
  }
}

/* ── D) KB-Quick-View-Modal ── */
.kb-quickview-overlay {
  /* erbt von .modal-overlay */
}

.kb-quickview-modal {
  background: var(--bg-card);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.kb-quickview-body {
  flex: 1;
  overflow: auto;
  max-height: 70vh;
  padding: 0;
}

.kb-quickview-frame {
  width: 100%;
  height: 70vh;
  border: 0;
  background: #fff;
  display: block;
}

.kb-quickview-image {
  max-width: 100%;
  max-height: 70vh;
  display: block;
  margin: 0 auto;
}

.kb-quickview-close {
  background: transparent;
  border: 0;
  color: var(--text-2);
  font-size: var(--fs-title);
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 4px;
  transition: background var(--transition), color var(--transition);
}

.kb-quickview-close:hover {
  background: rgba(255, 255, 255, .05);
  color: var(--text-1);
}

/* ── E) KBSourcePill ── */
.kb-source-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  max-width: 100%;
  background: rgba(6, 182, 212, .08);
  color: var(--text-1);
  border: 1px solid rgba(6, 182, 212, .25);
  border-radius: 999px;
  padding: 2px 8px;
  font-size: var(--fs-label);
  font-family: inherit;
  cursor: pointer;
  transition: background var(--transition), border-color var(--transition);
}

.kb-source-pill:hover {
  background: rgba(6, 182, 212, .15);
  border-color: var(--accent);
}

.kb-source-pill:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}

.kb-source-pill-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 200px;
}

/* ── E) KBLineageIndicator ── */
.kb-lineage-indicator {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: var(--fs-label);
  border-radius: 999px;
  padding: 1px 6px;
  line-height: 1.4;
  vertical-align: middle;
}

.kb-lineage-icon {
  font-size: var(--fs-body);
  line-height: 1;
}

.kb-lineage-label {
  color: var(--text-2);
}

.kb-lineage-ai {
  background: rgba(6, 182, 212, .12);
  color: var(--accent);
  border: 1px solid rgba(6, 182, 212, .25);
}

.kb-lineage-manual {
  background: rgba(148, 163, 184, .1);
  color: var(--text-2);
  border: 1px solid rgba(148, 163, 184, .2);
}

.kb-lineage-autosync {
  background: rgba(16, 185, 129, .12);
  color: var(--success);
  border: 1px solid rgba(16, 185, 129, .25);
}

/* ── PR1.33 Sub-Agent H: KB-Reindex-Admin-Tab ── */
.kb-reindex-panel {
  padding: 16px 4px;
  color: var(--text-1);
}

.kb-reindex-panel h3 {
  margin: 0 0 4px;
  font-size: var(--fs-section);
  color: var(--text-1);
}

.kb-reindex-panel h4 {
  margin: 0 0 8px;
  font-size: var(--fs-body);
  color: var(--text-2);
  font-weight: 600;
}

.kb-reindex-trigger {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  padding: 12px;
  background: var(--bg-card, rgba(255, 255, 255, .02));
  border: 1px solid var(--border, #1e2d4a);
  border-radius: 6px;
  margin-bottom: 12px;
}

.kb-reindex-trigger label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: var(--fs-body);
  color: var(--text-2);
}

.kb-reindex-trigger input[type="number"] {
  width: 80px;
  padding: 4px 6px;
  background: var(--bg-input, rgba(0, 0, 0, .2));
  border: 1px solid var(--border, #1e2d4a);
  color: var(--text-1);
  border-radius: 4px;
}

.kb-reindex-active-host {
  min-height: 0;
}

.kb-reindex-active {
  padding: 8px 12px;
  background: rgba(6, 182, 212, .06);
  border: 1px solid rgba(6, 182, 212, .2);
  border-radius: 6px;
  font-size: var(--fs-body);
  color: var(--text-1);
}

.kb-reindex-state {
  font-weight: 600;
}

.kb-reindex-recent-wrap {
  overflow-x: auto;
}

.kb-reindex-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fs-body);
}

.kb-reindex-table th,
.kb-reindex-table td {
  padding: 6px 10px;
  text-align: left;
  border-bottom: 1px solid var(--border, #1e2d4a);
  color: var(--text-1);
}

.kb-reindex-table th {
  font-weight: 600;
  color: var(--text-2);
  background: var(--bg-card, rgba(255, 255, 255, .02));
}

/* ============================================================
   PR1.16 — Edit-Guard / Audit-Log-View (Wave 2 B4 + B6)
   ============================================================ */

.edit-mode {
  border: 1px solid var(--warning, #f59e0b);
  box-shadow: 0 0 0 2px rgba(245, 158, 11, 0.2);
}

.edit-guard-toggle-btn {
  background: transparent;
  border: 1px solid var(--border, #1e2d4a);
  color: var(--text-1, #f1f5f9);
  padding: 4px 12px;
  border-radius: 4px;
  cursor: pointer;
  font-size: var(--fs-body);
  margin-left: 8px;
}

.edit-guard-toggle-btn:hover {
  background: var(--bg-hover, #1a2236);
  border-color: var(--border-light, #243554);
}

.edit-guard-undo-btn,
.edit-guard-cancel-btn,
.edit-guard-save-btn {
  padding: 6px 16px;
  border-radius: 4px;
  cursor: pointer;
  font-size: var(--fs-body);
  margin-left: 8px;
}

.edit-guard-save-btn {
  background: var(--accent, #06b6d4);
  color: var(--bg-base, #080c14);
  border: none;
  font-weight: 600;
}

.edit-guard-save-btn:hover {
  filter: brightness(1.1);
}

.edit-guard-undo-btn:disabled,
.edit-guard-save-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

/* Audit-Log-View ── B6 */
.audit-log-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fs-body);
}

.audit-log-table th,
.audit-log-table td {
  padding: 8px 12px;
  text-align: left;
  border-bottom: 1px solid var(--border, #1e2d4a);
  vertical-align: top;
}

.audit-log-table th {
  font-weight: 600;
  color: var(--text-2, #94a3b8);
  background: var(--bg-card2, #121928);
}

.audit-log-action {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 3px;
  font-size: var(--fs-meta);
  font-weight: 500;
}

.audit-log-action-create {
  background: rgba(16, 185, 129, .12);
  color: var(--success, #10b981);
}

.audit-log-action-update {
  background: rgba(6, 182, 212, .12);
  color: var(--accent, #06b6d4);
}

.audit-log-action-delete {
  background: rgba(239, 68, 68, .12);
  color: var(--danger, #ef4444);
}

.audit-log-diff-toggle {
  background: transparent;
  border: none;
  color: var(--accent, #06b6d4);
  cursor: pointer;
  font-size: var(--fs-ui);
  padding: 0;
}

.audit-log-diff-toggle:hover {
  text-decoration: underline;
}

.audit-log-diff-content {
  background: var(--bg-card2, #121928);
  padding: 8px;
  border-radius: 4px;
  font-family: ui-monospace, SFMono-Regular, monospace; /* PR1.437 Ausnahme: Roh-Diff */
  font-size: var(--fs-meta);
  white-space: pre-wrap;
  margin-top: 4px;
  max-width: 480px;
  overflow-x: auto;
}

/* ─────────────────────────────────────────
   ADMIN-PANEL · PR1.16 B12 (Wave 3)
   ───────────────────────────────────────── */

.admin-panel-header {
  margin-bottom: 16px;
}
.admin-panel-header h2 {
  font-size: var(--fs-title);
  font-weight: 600;
  color: var(--text-1);
  margin: 0;
}

.admin-panel-tabs {
  display: flex;
  flex-wrap: wrap;  /* 12 Reiter passen bei 1280 px nicht in eine Zeile — umbrechen statt abschneiden */
  gap: 0 4px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 16px;
}
.admin-panel-tabs button {
  background: none;
  border: none;
  color: var(--text-2);
  padding: 10px 18px;
  font-size: var(--fs-body);
  font-weight: 500;
  cursor: pointer;
  border-bottom: 2px solid transparent;
  transition: all var(--transition);
}
.admin-panel-tabs button:hover:not(:disabled) {
  color: var(--text-1);
  background: var(--bg-hover);
}
.admin-panel-tabs button.active {
  color: var(--primary);
  border-bottom-color: var(--primary);
}
.admin-panel-tabs button:disabled {
  opacity: .4;
  cursor: not-allowed;
}

.admin-panel-toolbar {
  display: flex;
  gap: 8px;
  margin-bottom: 12px;
}

.admin-users-wrapper {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  overflow: hidden;
}

.admin-users-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fs-body);
}
.admin-users-table th,
.admin-users-table td {
  text-align: left;
  padding: 10px 14px;
  border-bottom: 1px solid var(--border);
}
.admin-users-table th {
  background: var(--bg-card2, #121928);
  color: var(--text-2);
  font-weight: 500;
  font-size: var(--fs-meta);
}
.admin-users-table tbody tr:hover {
  background: var(--bg-hover);
}
.admin-users-table td.actions {
  white-space: nowrap;
  text-align: right;
}
.admin-users-table td.actions button {
  background: none;
  border: 1px solid var(--border);
  color: var(--text-2);
  padding: 4px 8px;
  border-radius: 4px;
  cursor: pointer;
  font-size: var(--fs-body);
  margin-left: 4px;
  transition: all var(--transition);
}
.admin-users-table td.actions button:hover {
  background: var(--bg-hover);
  color: var(--text-1);
  border-color: var(--primary);
}

/* PR1.39 #176 — Branche→BD-Lead Mapping-Editor (Admin-Tab „Mappings") */
.industry-mapping-panel h3 { margin: 0 0 4px; }
.admin-mappings-table td input[type="text"] {
  width: 100%;
  box-sizing: border-box;
  padding: 6px 8px;
  background: var(--bg-card2, #121928);
  border: 1px solid var(--border);
  border-radius: 4px;
  color: var(--text-1);
  font-size: var(--fs-body);
}
.admin-mappings-table tr.bd-mapping-edit-row td { vertical-align: top; }

/* Status-Pills (Cognito-Status) */
.status-pill {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 99px;
  font-size: var(--fs-label);
  font-weight: 500;
}
.status-pill.status-confirmed {
  background: rgba(16, 185, 129, .16);
  color: #10b981;
}
.status-pill.status-force-change-password {
  background: rgba(245, 158, 11, .16);
  color: #fbbf24;
}
.status-pill.status-unconfirmed {
  background: rgba(99, 102, 241, .16);
  color: var(--primary);
}
.status-pill.status-archived,
.status-pill.status-disabled {
  background: rgba(239, 68, 68, .14);
  color: #f87171;
}
.status-pill.status-reset-required {
  background: rgba(245, 158, 11, .16);
  color: #fbbf24;
}

/* Permissions-Matrix-Editor */
/* PR1.545 — Rollen und Rechte als lesbare Matrix (geteilter Editor, beide Shells).
   Rollen = Spalten, Rechte = Zeilen. Erlaubt gruen, nicht erlaubt blass, Abweichung gelb.
   Keine Animation: selten genutztes Admin-Werkzeug, Ruhe vor Effekt. */
.permissions-matrix-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 16px;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
  font-size: var(--fs-body);
  color: var(--text-2);
}
.permissions-matrix-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.pm-state {
  padding: 20px;
  text-align: center;
  color: var(--text-2);
  font-size: var(--fs-body);
  line-height: 1.5;
}
.pm-state.is-error {
  color: var(--danger);
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  justify-content: center;
}
.pm-readonly-note {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
  color: var(--text-2);
  font-size: var(--fs-body);
}
.pm-scroll {
  overflow-x: auto;
  outline-offset: 2px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--bg-card);
}
.permissions-matrix-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fs-body);
}
.permissions-matrix-table th,
.permissions-matrix-table td {
  border-bottom: 1px solid var(--border);
  padding: 10px 12px;
  vertical-align: middle;
  text-align: center;
}
.permissions-matrix-table thead th {
  color: var(--text-2);
  font-weight: 500;
  font-size: var(--fs-label);
}
.permissions-matrix-table tfoot th,
.permissions-matrix-table tfoot td {
  border-bottom: 0;
}
.permissions-matrix-table .pm-perm-head,
.permissions-matrix-table .pm-perm {
  text-align: left;
  min-width: 220px;
}
.pm-perm-head {
  color: var(--text-2);
  font-weight: 500;
  font-size: var(--fs-label);
}
.pm-perm-label {
  display: block;
  color: var(--text-primary, var(--text-1));
  font-weight: 600;
}
.pm-perm-desc {
  display: block;
  margin-top: 2px;
  color: var(--text-2);
  font-size: var(--fs-label);
  font-weight: 400;
}
.pm-role-head {
  min-width: 120px;
}
.pm-role-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 8px;
  font-size: var(--fs-label);
  font-weight: 700;
  /* Zur Tinte hin gemischt: haelt AA in hell und dunkel, die Farbe bleibt erkennbar. */
  color: color-mix(in srgb, var(--pm-mark) 55%, var(--text-1));
  background: color-mix(in srgb, var(--pm-mark) 16%, transparent);
}
.pm-role-mark--0 { --pm-mark: var(--primary-text, var(--primary)); }
.pm-role-mark--1 { --pm-mark: var(--info); }
.pm-role-mark--2 { --pm-mark: var(--text-2); }
.pm-role-mark--3 { --pm-mark: var(--success); }
.pm-role-mark--4 { --pm-mark: var(--warning); }
.pm-role-mark--5 { --pm-mark: var(--danger); }
.pm-role-name {
  display: block;
  margin-top: 6px;
  color: var(--text-primary, var(--text-1));
  font-weight: 600;
  font-size: var(--fs-body);
}
.pm-role-count {
  display: block;
  color: var(--text-2);
  font-size: var(--fs-label);
  font-variant-numeric: tabular-nums;
}
.pm-cell {
  min-width: 96px;
}
.pm-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  padding: 0;
  border-radius: 8px;
  border: 1px solid transparent;
  font: inherit;
  cursor: pointer;
}
.pm-cell.is-on .pm-toggle {
  color: var(--success);
  background: color-mix(in srgb, var(--success) 16%, transparent);
  border-color: color-mix(in srgb, var(--success) 35%, transparent);
}
.pm-cell.is-off .pm-toggle {
  color: var(--text-3);
  background: color-mix(in srgb, var(--text-3) 8%, transparent);
}
.pm-toggle:hover:not(:disabled) {
  border-color: var(--text-2);
}
.pm-toggle:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}
.pm-toggle:disabled {
  cursor: default;
}
.pm-dash {
  font-weight: 600;
}
.permissions-matrix-cell.has-override {
  background: color-mix(in srgb, var(--warning) 14%, transparent);
}
.pm-cell.is-pending .pm-toggle {
  box-shadow: 0 0 0 2px var(--warning);
}
.pm-changed {
  display: block;
  margin-top: 4px;
  color: var(--text-1);
  font-size: var(--fs-label);
  font-weight: 600;
}
.pm-foot-cell {
  white-space: nowrap;
}
.pm-bar {
  display: inline-block;
  width: 56px;
  height: 4px;
  border-radius: 2px;
  vertical-align: middle;
  background: color-mix(in srgb, var(--text-3) 22%, transparent);
  overflow: hidden;
}
.pm-bar-fill {
  display: block;
  height: 100%;
  background: var(--pm-mark);
}
.pm-foot-count {
  margin-left: 6px;
  color: var(--text-2);
  font-size: var(--fs-label);
  font-variant-numeric: tabular-nums;
}
.pm-foot-reset {
  margin-top: 6px;
}
.pm-catalogs {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr));
  gap: 20px;
  margin-top: 24px;
  align-items: start;
}
.pm-catalogs > :empty { display: none; }
.pm-catalog-mapping {
  grid-column: 1 / -1;
  min-width: 0;
  overflow-x: auto;
}
.pm-lead-missing {
  color: var(--danger);
  font-weight: 600;
}

.drift-banner {
  background: rgba(245, 158, 11, .12);
  border: 1px solid rgba(245, 158, 11, .4);
  color: #fbbf24;
  padding: 12px 14px;
  border-radius: var(--radius-sm);
  margin-bottom: 12px;
  font-size: var(--fs-body);
  line-height: 1.5;
}

/* Admin-Modals (gemeinsame Klassen) */
#admin-user-modal .form-group,
#admin-set-password-modal .form-group {
  margin-bottom: 14px;
}
#admin-user-modal label,
#admin-set-password-modal label {
  display: block;
  font-size: var(--fs-ui);
  color: var(--text-2);
  font-weight: 500;
  margin-bottom: 4px;
}

/* PR1.263 #457 — Schalterliste im Nutzer-Dialog.
   Hier stehen mehrere Schalter untereinander, jeder mit seinem Erklaertext DARUNTER.
   Zwei Regeln daneben passen dafuer nicht:
   • `#admin-user-modal label` (oben) macht jedes Label zum Block — Kaestchen und Text
     stehen dann nur zufaellig nebeneinander, weil beide inline sind, und ohne `gap`.
   • `.form-group-check > label` bringt `min-height: 37px` mit. Das ist richtig fuer eine
     Checkbox NEBEN Eingabefeldern (dafuer wurde die Klasse mit PR1.200 gebaut), schiebt
     hier aber den Erklaertext so weit nach unten, dass er naeher am NAECHSTEN Schalter
     steht als an seinem eigenen — die Zuordnung kippt optisch um eine Zeile.
   Die ID-plus-Klasse-Spezifitaet gewinnt gegen beide. */
#admin-user-modal .form-group-check > label {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 0;
  margin-bottom: 2px;
  font-size: var(--fs-ui);
  font-weight: 400;
  color: var(--text-1);
  cursor: pointer;
}
#admin-user-modal .form-group-check > small {
  display: block;
  margin-left: 24px;   /* auf die Beschriftung eingerueckt, nicht aufs Kaestchen */
}
/* PR1.347 #561 — "Bestaetigungsmail erneut senden" steht unter der Statuszeile und
   gehoert zu ihr: gleiche Einrueckung wie der Text, sonst wirkt er wie ein loser Knopf. */
#admin-user-modal .form-group-check > .btn {
  width: auto;
  align-self: flex-start;   /* der Block ist eine Spalte und wuerde ihn sonst strecken */
  margin: 8px 0 0 24px;
}
/* Die Knopf-Regel setzt `display` und schlaegt damit das `hidden`-Attribut — der Knopf
   stand sonst auch in "aus" und "Fehler" da, wo er nichts zu tun hat. */
#admin-user-modal .form-group-check > .btn[hidden] {
  display: none;
}
#admin-user-modal input[type="email"],
#admin-user-modal input[type="text"],
#admin-user-modal select,
#admin-set-password-modal input[type="text"] {
  width: 100%;
  padding: 8px 10px;
  background: var(--bg-input, #0f1729);
  border: 1px solid var(--border);
  color: var(--text-1);
  border-radius: var(--radius-sm);
  font-size: var(--fs-body);
}
#admin-user-modal input[readonly] {
  opacity: .65;
  cursor: not-allowed;
}

.btn-warning {
  background: #f59e0b;
  color: #1a1a2e;
  border: none;
  font-weight: 600;
}
.btn-warning:hover {
  background: #fbbf24;
}
.btn-warning:disabled {
  opacity: .5;
  cursor: not-allowed;
}

/* ─────────────────────────────────────────
   PR1.18 — Staffability-Indikator (Dashboard-Widget)
   3-Box-KPI: staffable=grün / partly=gelb / notStaffable=rot
   ───────────────────────────────────────── */
.staffability-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin-top: 4px;
}
.staffability-box {
  position: relative;
  padding: 16px 18px;
  border-radius: 10px;
  cursor: pointer;
  background: var(--bg-card2, var(--bg-card));
  border: 1px solid #2a3548;
  border-left: 4px solid var(--sb-clr, #64748b);
  transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease;
}
.staffability-box:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(0, 0, 0, .25);
  border-color: var(--sb-clr, #64748b);
}
.staffability-box:focus-visible {
  outline: 2px solid var(--sb-clr, #64748b);
  outline-offset: 2px;
}
.staffability-box.staffable    { --sb-clr: #10b981; }
.staffability-box.partly       { --sb-clr: #eab308; }
.staffability-box.notStaffable { --sb-clr: #ef4444; }

.staffability-box .sb-head {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 6px;
}
.staffability-box .sb-icon { font-size: var(--fs-section); }
.staffability-box .sb-title {
  font-size: var(--fs-body);
  font-weight: 600;
  color: var(--sb-clr);
  text-decoration: underline dotted;
  text-underline-offset: 3px;
  cursor: pointer;
}
.staffability-box .sb-title:hover {
  color: var(--text-primary, #fff);
}
.staffability-box .sb-count {
  font-size: var(--fs-kpi);
  font-weight: 600;
  line-height: 1.1;
  color: var(--text-primary, #fff);
}
.staffability-box .sb-volume {
  color: var(--text-secondary, #94a3b8);
  font-size: var(--fs-body);
  margin-top: 2px;
}
.staffability-box .sb-sub {
  color: var(--text-secondary, #94a3b8);
  font-size: var(--fs-meta);
  margin-top: 8px;
  opacity: .75;
}

/* Detail-Modal (B5) ────────────────────────────────────── */
#staffability-detail-modal .modal-content {
  max-width: 900px;
  width: 90vw;
}
.staff-detail-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fs-body);
}
.staff-detail-table th,
.staff-detail-table td {
  padding: 8px 10px;
  border-bottom: 1px solid #1f2a3a;
  text-align: left;
  vertical-align: top;
}
.staff-detail-table th {
  color: var(--text-secondary, #94a3b8);
  font-weight: 600;
  position: sticky;
  top: 0;
  background: var(--bg-card, #0e1420);
}
.staff-detail-table .staff-cand-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: var(--fs-ui);
}
.staff-detail-table .staff-cand {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.staff-detail-table .staff-cand-score {
  color: #94a3b8;
  font-variant-numeric: tabular-nums;
}
.staff-detail-empty {
  padding: 32px 16px;
  color: var(--text-secondary, #94a3b8);
  text-align: center;
}

/* Opp-View Staffability-Filter-Chip (B4) ────────────────── */
.opp-filter-chip-staffability {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 4px 10px;
  border-radius: 14px;
  background: rgba(16, 185, 129, 0.12);
  border: 1px solid #10b981;
  color: #10b981;
  font-size: var(--fs-ui);
  font-weight: 500;
}
.opp-filter-chip-staffability.bucket-partly       { background: rgba(234, 179, 8, .12);  border-color: #eab308; color: #eab308; }
.opp-filter-chip-staffability.bucket-notStaffable { background: rgba(239, 68, 68, .12);  border-color: #ef4444; color: #ef4444; }
.opp-filter-chip-staffability .chip-clear {
  cursor: pointer;
  margin-left: 4px;
  font-weight: 600;
  opacity: .8;
}
.opp-filter-chip-staffability .chip-clear:hover { opacity: 1; }

@media (max-width: 720px) {
  .staffability-grid { grid-template-columns: 1fr; }
}

/* ─────────────────────────────────────────
   PR2.03 (#133) — Beauftragungs-Ende-Vorschau: Dashboard-Widget + Kapa-Drilldown-
   Reset-Chip (das Freiwerdungs-Badge am MA-Row ist mit PR1.385 entfallen).
   ───────────────────────────────────────── */
/* Drilldown-Reset-Chip in der Kapa-Filter-Bar (nur sichtbar bei aktivem Drilldown). */
.cap-drilldown-chip {
  background: rgba(99, 102, 241, .18);
  color: var(--primary, #6366f1);
  border: 1px solid rgba(99, 102, 241, .35);
}
.cap-drilldown-chip .cap-drilldown-x { margin-left: 4px; font-weight: 600; opacity: .8; }
.cap-drilldown-chip:hover { background: rgba(99, 102, 241, .28); }
/* BF-67 (#601) — Hinweis „N Treffer außerhalb der Filter" unter der Kapa-Filterleiste. */
.cap-hidden-hits {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: -6px 0 14px;
  font-size: var(--fs-ui);
  color: var(--text-2);
}
.cap-hidden-hits[hidden] { display: none; }
/* Dashboard "MA werden frei" — KW-Gruppen-Zeile + Count-Pill. */
.dash-freeing-row { cursor: pointer; }
.dash-freeing-count {
  display: inline-block;
  padding: 2px 9px;
  border-radius: 99px;
  font-size: var(--fs-label);
  font-weight: 500;
  background: rgba(234, 179, 8, .18);
  color: var(--attention);
}

/* ─────────────────────────────────────────
   PR1.35 — Soft-Validation (Konvention 18) + Tentative-Allocation
   Visuelle Hints ohne Hard-Block. Genutzt von project-detail.js + project-modal.js.
   ───────────────────────────────────────── */
.pflichtfeld-warn       { border-color: var(--warning, #f0a020) !important; color: var(--warning, #f0a020); }
.pflichtfeld-error      { border-color: var(--danger, #d33) !important; color: var(--danger, #d33); }
.pflichtfeld-warn-text  { color: var(--warning, #f0a020); font-size: var(--fs-label); font-weight: 500; }
.tentative-allocation   { border-left: 3px solid var(--warning, #f0a020); padding-left: 8px; }

/* PR2.07 #137 — Delivery-AP Auto-Assign-Badge (Opportunity-Detail-Contacts-Card). */
.auto-assign-badge {
  display: inline-flex; align-items: center; gap: 3px;
  margin-left: 6px; padding: 1px 7px;
  border-radius: 99px; font-size: var(--fs-label); font-weight: 500;
  background: var(--accent-glow, rgba(6,182,212,.18));
  color: var(--accent, #06b6d4);
  border: 1px solid var(--accent-glow, rgba(6,182,212,.3));
  white-space: nowrap;
}
.auto-assign-edit {
  margin-left: 4px; padding: 0 4px;
  background: none; border: none; color: var(--text-3);
  cursor: pointer; font-size: var(--fs-meta); line-height: 1;
}
.auto-assign-edit:hover { color: var(--accent, #06b6d4); }

/* PR2.07 #137 — Settings-View (CC-Leiter-Mapping). */
.settings-card { max-width: 680px; }
.settings-hint { color: var(--text-3); font-size: var(--fs-ui); line-height: 1.4; margin: 4px 0 18px; }
.settings-row {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; padding: 8px 0; border-bottom: 1px solid var(--border, rgba(255,255,255,.06));
}
.settings-label { font-size: var(--fs-body); font-weight: 500; }
.settings-select { min-width: 260px; max-width: 320px; }
.settings-actions { margin-top: 18px; display: flex; justify-content: flex-end; }

/* ─────────────────────────────────────────
   PR1.46 — Hard-Gate + Tier-Rendering
   Tier-2 = "Onboarding"-Kandidat (Konvention 10: kein Ausschluss, nur visuelle
   Differenzierung). Skeleton fuer Async-AI-Aufruf.
   ───────────────────────────────────────── */
.match-card.tier-2 {
    border-left: 3px solid #d97706;  /* orange Akzent — Tier-2 = Onboarding-Pfad */
    background: linear-gradient(180deg, rgba(217, 119, 6, 0.04), transparent);
}

.match-tier-badge.onboarding {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    border-radius: 4px;
    background: rgba(217, 119, 6, 0.15);
    color: #fb923c;
    font-size: var(--fs-label);
    font-weight: 500;
    border: 1px solid rgba(217, 119, 6, 0.3);
}

.match-effort-pill {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    border-radius: 12px;
    background: var(--bg-hover, rgba(255, 255, 255, 0.05));
    color: var(--text-2, #94a3b8);
    font-size: var(--fs-label);
    margin-left: 6px;
}

/* PR1.20 MR-5 — Tier-Badge in opp-detail/project-detail Kandidaten-Listen (aus Snapshot). */
.opp-cand-tier-badge {
    display: inline-block;
    margin-left: 6px;
    padding: 1px 7px;
    border-radius: 10px;
    font-size: var(--fs-label);
    font-weight: 500;
    vertical-align: middle;
}
.opp-cand-tier-badge.optimal {
    background: var(--success-light, rgba(16, 185, 129, 0.14));
    color: var(--success, #10b981);
}
.opp-cand-tier-badge.onboarding {
    background: var(--attention-light, rgba(245, 158, 11, 0.14));
    color: var(--attention, #f59e0b);
}

/* PR1.147 (#296) — „Mitarbeiter aus anderem CC": reiner Hinweis, kein Problem →
   bewusst neutral getönt (Flächen-/Textmuster von .match-effort-pill) statt im
   Warn-Ton der Portfolio-Badges. --bg-hover/--text-2 adaptieren über die Tokens,
   AA in beiden Themes (Dark 6.18:1, Light 6.17:1) → kein Light-Override nötig. */
/* ── PR1.168 (#321) — Matching pro Rolle ──────────────────────────────────────
   Ausschliesslich Design-Tokens, KEINE rgba(255,255,255,…)-Flaechen: die sind auf
   hellem Grund unsichtbar (Light-Theme-Lehre aus PR4.15). --bg-hover / --text-2 /
   --warning tragen beide Themes von sich aus; die Vorbilder .opp-cand-cc-badge und
   .opp-cand-cc-group machen es genauso.
   PR1.405 (#635) — Sektion, Sammel-Lauf-Zeile und aufklappbare Rollen-Bloecke sind mit
   „Matching pro Rolle" entfallen; geblieben sind Rollen-Kopf (Name/Meta im Bereich
   #opp-staffing-tool), Veraltet-Band, Soft-Gate und Cross-Badge. */

.opp-role-block-name { font-weight: 600; }
.opp-role-block-meta { font-size: var(--fs-meta); color: var(--text-3); }

/* „Veraltet — Anforderung geaendert". Option A: das Ergebnis bleibt LESBAR, das Band sagt
   nur, worauf man schaut. Liegt bewusst OBERHALB der Toolbar und damit ausserhalb von
   [data-opp-cand-list]/[data-opp-cand-footer], die der Live-Tick tauscht. */
.opp-role-stale-band {
    display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
    padding: 7px 12px; margin: 0 0 10px; border-radius: 6px;
    font-size: var(--fs-meta); color: var(--text-2);
    background: var(--bg-hover);
    border: 1px solid rgba(245,158,11,.35);
    border-left: 3px solid var(--warning);
}
.opp-role-stale-text { flex: 1 1 260px; }

/* Soft-Gate: „optional bei Anlage, Pflicht fuers Matching". Kein Fehler-Rot — es ist ein
   fehlender Pflegeschritt, kein Defekt. */
.opp-role-softgate {
    display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
    padding: 12px 14px; border-radius: 6px;
    font-size: var(--fs-ui); color: var(--text-2);
    background: var(--bg-hover);
    border: 1px dashed var(--border);
}
.opp-role-softgate-text { flex: 1 1 260px; }

/* „auch Top-10 in ‚Architekt'" — erbt die Form des CC-Badges (dessen Kontrast gemessen ist)
   und unterscheidet sich nur im Ton, damit beide nebeneinander lesbar bleiben. */
.opp-role-cross-badge {
    display: inline-block;
    margin-left: 6px;
    padding: 1px 7px;
    border-radius: 10px;
    font-size: var(--fs-label);
    font-weight: 500;
    vertical-align: middle;
    white-space: nowrap;
    background: rgba(245,158,11,.16);
    color: var(--warning);
}

.opp-cand-cc-badge {
    display: inline-block;
    margin-left: 6px;
    padding: 1px 7px;
    border-radius: 10px;
    font-size: var(--fs-label);
    font-weight: 500;
    vertical-align: middle;
    white-space: nowrap;
    background: var(--bg-hover);
    color: var(--text-2);
}

/* Portfolio-fremd-Hinweis — spiegelt die Onboarding-Badges optisch, aber im Warn-Ton (--warning),
   damit "portfolio-fremd" klar als Hinweis von "Onboarding-Kandidat" (--attention) unterscheidbar bleibt. */
.match-portfolio-badge.foreign {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 10px;
    background: color-mix(in srgb, var(--warning) 15%, transparent);
    color: var(--warning);
    font-size: var(--fs-label);
    font-weight: 500;
    border: 1px solid color-mix(in srgb, var(--warning) 30%, transparent);
}

.opp-cand-portfolio-badge.foreign {
    display: inline-block;
    margin-left: 6px;
    padding: 1px 7px;
    border-radius: 10px;
    font-size: var(--fs-label);
    font-weight: 500;
    vertical-align: middle;
    background: var(--warning-light, rgba(245, 158, 11, 0.14));
    color: var(--warning, #f59e0b);
}

/* PR1.81 — Karten-Akzent fuer portfolio-fremde Stufe-2-Kandidaten (analog .match-card.tier-2,
   aber Warn-Ton). Macht den Hinweis auf Kartenebene sichtbar, nicht nur im Inline-Badge. */
.match-card.portfolio-foreign {
    border-left: 3px solid var(--warning);
    background: linear-gradient(180deg, color-mix(in srgb, var(--warning) 5%, transparent), transparent);
}

/* PR1.20 MR-5 — Snapshot-Konsistenz: sichtbare Quelle/Honesty (keine stillen Fallbacks). */
.match-meta-banner {
    padding: 6px 10px;
    border-radius: 8px;
    font-size: var(--fs-label);
    margin-bottom: 8px;
    border: 1px solid transparent;
}
.match-meta-fallback {
    background: var(--attention-light, rgba(245, 158, 11, 0.12));
    color: var(--attention, #f59e0b);
    border-color: rgba(245, 158, 11, 0.35);
}
.match-meta-missing {
    background: rgba(59, 130, 246, 0.10);
    color: #93c5fd;
    border-color: rgba(59, 130, 246, 0.30);
}
.match-meta-lowconf {
    background: var(--attention-light, rgba(245, 158, 11, 0.10));
    color: var(--attention, #f59e0b);
    border-color: rgba(245, 158, 11, 0.30);
    margin-top: 4px;
}
.match-source-badge { font-size: var(--fs-meta); margin-right: 2px; opacity: 0.85; }
.match-source-badge.det { filter: grayscale(0.4); }
/* PR1.106 (#253) — Freitext-Treffer über alle Mitarbeiter (außerhalb der Vorschläge). */
.match-source-badge.manual {
    font-size: var(--fs-label); font-weight: 500; opacity: 1;
    padding: 1px 6px; border-radius: 8px;
    background: var(--attention, #b8860b); color: #fff;
}
.matching-manual-results { margin-top: 10px; }
.matching-manual-heading {
    font-size: var(--fs-label); font-weight: 600;
    color: var(--text-3);
    margin: 6px 0 4px; padding-top: 8px; border-top: 1px dashed var(--border, #333);
}
.match-card.manual-card { opacity: 0.96; }
.match-ai-conf {
    display: inline-block;
    margin-left: 6px;
    padding: 1px 6px;
    border-radius: 10px;
    background: var(--bg-hover, rgba(255, 255, 255, 0.06));
    color: var(--text-2, #94a3b8);
    font-size: var(--fs-label);
}
.match-focus-chip {
    display: inline-block;
    padding: 2px 8px;
    margin: 2px 3px 0 0;
    border-radius: 10px;
    background: rgba(59, 130, 246, 0.10);
    color: #93c5fd;
    font-size: var(--fs-label);
}

/* ===== PR1.137 (#287) — Geschätzter Matching-Fortschrittsbalken =====
   Löst das frühere .match-skeleton-Shimmer ab. Zeitbasierte Schätzung, ehrlich als
   „geschätzt" gelabelt. Theme-aware über CSS-Custom-Properties. */
.match-progress {
    padding: 18px 14px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.match-progress-status {
    text-align: center;
    color: var(--text-primary, #e2e8f0);
    font-size: var(--fs-body);
    font-weight: 500;
}

.match-progress-track {
    height: 10px;
    border-radius: 999px;
    background: var(--bg-hover, rgba(255, 255, 255, 0.06));
    overflow: hidden;
}

.match-progress-fill {
    height: 100%;
    width: 0%;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--primary, #6366f1), var(--accent, #06b6d4));
    transition: width 0.4s ease-out;
    animation: pr137-progress-pulse 1.8s ease-in-out infinite;
}

@keyframes pr137-progress-pulse {
    0%, 100% { opacity: 1; }
    50%      { opacity: 0.72; }
}

.match-progress-meta {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 8px;
    font-size: var(--fs-meta);
    color: var(--text-2, #94a3b8);
}

.match-progress-note {
    font-style: italic;
    opacity: 0.8;
}

/* Fehlerzustand: „nicht bewertbar" + Wiederholen (kein Endlos-Laden). */
.match-progress-error {
    align-items: center;
    text-align: center;
}

.match-progress-error-msg {
    color: var(--warning, #f59e0b);
    font-size: var(--fs-body);
}

.match-progress-retry {
    align-self: center;
}

@media (prefers-reduced-motion: reduce) {
    .match-progress-fill { animation: none; }
}

/* ===== BF-31 (#415) — Fortschritt der Kaskaden-Loeschung =====
   Bewusst NICHT .match-progress wiederverwendet: dort zeigt ein pulsierender
   Balken eine SCHAETZUNG an. Hier zaehlt der Server echte Objekte, und ein
   Dauerpuls auf einer destruktiven Aktion liest sich als Alarm.

   Nur --text-2/-3, --bg-hover und --border: diese vier sind in style.css UND
   in style-redesign.css definiert. Damit traegt der Block in beiden Shells,
   ohne eine einzige Zeile im Redesign-Stylesheet (Konvention 20 — ein Gehirn).
   --accent waere hier NICHT portabel. */
.cascade-progress {
    margin: 0 0 14px 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.cascade-progress[hidden] { display: none; }

.cascade-progress-step {
    font-size: var(--fs-body);
    font-weight: 500;
    color: var(--text-1, #e5e7eb);
}

.cascade-progress-track {
    position: relative;
    height: 6px;
    border-radius: 999px;
    background: var(--bg-hover, #1f2937);
    border: 1px solid var(--border, #1e2d4a);
    overflow: hidden;
}

.cascade-progress-fill {
    height: 100%;
    width: 0;
    border-radius: 999px;
    background: var(--text-2, #94a3b8);
    /* linear, NICHT ease-out: die Breite bildet eine gemessene Groesse ab, und
       eine Beschleunigungskurve stellt die Rate falsch dar. 240 ms liegen unter
       dem 1000-ms-Poll-Takt — der Balken ist da, bevor die naechste Zahl kommt.

       `width` statt `transform: scaleX()` ist bewusst, obwohl es eine
       Layout-Property ist: (a) scaleX verzerrt den border-radius sichtbar zu
       Ellipsen, (b) alle sieben Fortschrittsbalken des Projekts animieren
       `width` — ein Ausreisser waere Inkohaerenz, (c) der Reflow bleibt im
       6 px hohen Track (overflow:hidden, feste Hoehe) und laeuft einmal je
       Poll-Takt. Der Preis ist nicht messbar, der Verlust waere sichtbar. */
    transition: width 240ms linear;
}

/* Solange der Server keine Zahl gemeldet hat, gibt es nichts zu messen. Nur
   dieser eine Zustand bewegt sich, und bewusst langsam. */
.cascade-progress-indeterminate .cascade-progress-fill {
    width: 35%;
    transition: none;
    animation: bf31-cascade-sweep 1400ms linear infinite;
}

@keyframes bf31-cascade-sweep {
    0%   { transform: translateX(-100%); }
    100% { transform: translateX(285%); }
}

.cascade-progress-count {
    font-size: var(--fs-body);
    color: var(--text-2, #94a3b8);
    font-variant-numeric: tabular-nums;
}

.cascade-progress-hint {
    font-size: var(--fs-ui);
    /* --text-2, NICHT --text-3: letzteres liegt in der klassischen Shell auf
       --bg-card bei 3,87:1 und damit unter AA. Fuer die DSGVO-Fusszeile ist das
       Bestand, hier waere es falsch — dieser Satz begruendet den gesperrten
       Abbrechen-Knopf und meldet Poll-Ausfaelle, er muss gelesen werden.
       --text-2 bringt 7,19:1 (klassisch) bzw. 7,44:1 (Redesign). */
    color: var(--text-2, #94a3b8);
}

.cascade-progress-hint:empty { display: none; }

/* Vorgelesen, nicht gesehen. */
.cascade-progress-sr {
    position: absolute;
    width: 1px; height: 1px;
    margin: -1px; padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

/* Die Zaehlliste bleibt stehen und tritt zurueck: aus dem Versprechen wird
   Kontext. Ein harter Sprung saehe wie ein Rendering-Fehler aus. */
.cascade-delete-counts-dimmed {
    opacity: .55;
    transition: opacity 160ms ease;
}

@media (prefers-reduced-motion: reduce) {
    /* Bewegung faellt weg, Information nicht: der Balken springt auf den Wert,
       und statt des Streifens traegt der Text den unbestimmten Zustand. */
    .cascade-progress-fill { transition: none; }
    .cascade-progress-indeterminate .cascade-progress-fill {
        animation: none;
        width: 8%;
        background: var(--text-3, #9ca3af);
    }
    .cascade-delete-counts-dimmed { transition: none; }
}

/* ===== PR1.20b KB Command Center ===== */

/* ── Wrapper & Layout ── */
.kbcc-wrapper {
    display: flex;
    flex-direction: column;
    height: 100vh;
    overflow: hidden;
    background: var(--bg-base);
    color: var(--text-1);
    font-family: 'Fira Sans', system-ui, sans-serif;
}

.kbcc-main {
    display: flex;
    flex: 1;
    overflow: hidden;
    min-height: 0;
}

.kbcc-graph-wrap {
    position: relative;
    flex: 1;
    display: flex;
    flex-direction: column;
    min-width: 0;
    overflow: hidden;
}

/* ── Toolbar ── */
.kbcc-toolbar {
    display: flex;
    flex-direction: column;
    gap: 0;
    padding: 10px 16px 8px;
    background: var(--bg-card);
    border-bottom: 1px solid var(--border);
    flex-shrink: 0;
    z-index: 10;
}

.kbcc-toolbar-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
}

.kbcc-toolbar-top {
    padding-bottom: 8px;
}

.kbcc-chips-row {
    padding-top: 6px;
    border-top: 1px solid var(--border);
    gap: 6px;
    min-height: 34px;
}

.kbcc-toolbar-section {
    display: flex;
    align-items: center;
    gap: 8px;
}

.kbcc-toolbar-label {
    font-size: var(--fs-label);
    font-weight: 500;
    color: var(--text-3);
    white-space: nowrap;
}

/* ── Layer-Toggles ── */
.kbcc-layer-group {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}

.kbcc-layer-toggle {
    display: flex;
    align-items: center;
    gap: 5px;
    cursor: pointer;
    padding: 4px 10px;
    border-radius: var(--radius-sm);
    background: var(--bg-hover);
    border: 1px solid var(--border);
    font-size: var(--fs-meta);
    color: var(--text-2);
    transition: background var(--transition), border-color var(--transition), color var(--transition);
    user-select: none;
}

.kbcc-layer-toggle:hover {
    background: var(--bg-card2);
    color: var(--text-1);
}

.kbcc-layer-toggle.is-active {
    background: rgba(99, 102, 241, 0.15);
    border-color: var(--primary);
    color: var(--primary);
}

.kbcc-layer-toggle input[type="checkbox"] {
    width: 13px;
    height: 13px;
    accent-color: var(--primary);
    cursor: pointer;
}

/* ── Typ-Filter-Chips ── */
.kbcc-type-chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 9px 3px 7px;
    border-radius: 99px;
    border: 1.5px solid var(--chip-color, var(--border));
    background: color-mix(in srgb, var(--chip-color, #94a3b8) 12%, transparent);
    color: var(--text-1);
    font-size: var(--fs-meta);
    cursor: pointer;
    transition: background var(--transition), opacity var(--transition);
    white-space: nowrap;
}

.kbcc-type-chip:hover {
    background: color-mix(in srgb, var(--chip-color, #94a3b8) 22%, transparent);
}

.kbcc-type-chip.is-inactive {
    opacity: 0.38;
    text-decoration: line-through;
}

.kbcc-chip-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--chip-color, #94a3b8);
    flex-shrink: 0;
}

.kbcc-chip-label {
    font-weight: 500;
}

.kbcc-chip-count {
    font-size: var(--fs-label);
    opacity: 0.75;
    font-variant-numeric: tabular-nums;
}

/* ── Suche ── */
.kbcc-search {
    padding: 5px 10px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border);
    background: var(--bg-input);
    color: var(--text-1);
    font-size: var(--fs-ui);
    width: 200px;
    outline: none;
    transition: border-color var(--transition);
}

.kbcc-search:focus {
    border-color: var(--primary);
}

.kbcc-search-section {
    flex: 0 0 auto;
}

/* ── Layout-Select ── */
.kbcc-layout-select {
    padding: 4px 8px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border);
    background: var(--bg-input);
    color: var(--text-1);
    font-size: var(--fs-ui);
    cursor: pointer;
    outline: none;
}

.kbcc-layout-select:focus {
    border-color: var(--primary);
}

/* ── Startpunkt-Leiste (PR1.241 #418) ───────────────────────────────────────
   Der Graph beginnt bei einem Datensatz. Worum das Bild gebaut ist, steht deshalb
   oben und nicht irgendwo im Detail-Panel. Der frühere „Fokus zurücksetzen"-Knopf
   ist entfallen: Fokus ist kein Sonderzustand mehr, aus dem man zurückkehrt. */
.kbcc-focus-bar {
    align-items: center;
    gap: 8px;
}

.kbcc-focus-label {
    font-size: var(--fs-label);
    color: var(--text-3);
}

.kbcc-focus-name {
    font-size: var(--fs-body);
    color: var(--text-1);
}

/* PR1.302 (#510) — Vollstaendigkeit des Startpunkts, direkt ueber dem Bild.
   Feststellend gesetzt, nicht alarmierend: keine Signalfarbe, kein Rahmen, kein
   Zeichen. Die Zahl steht in der Vordergrundfarbe, die Aufzaehlung eine Stufe
   zurueckgenommen. */
.kbcc-expect {
    align-items: baseline;
    gap: 8px;
    flex-wrap: wrap;
}

.kbcc-expect-count {
    font-size: var(--fs-ui);
    font-weight: 500;
    color: var(--text-1);
    font-variant-numeric: tabular-nums;
}

.kbcc-expect-missing {
    font-size: var(--fs-meta);
    color: var(--text-3);
}

.kbcc-focus-clear,
.kbcc-depth-btn {
    padding: 4px 10px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border);
    background: var(--bg-input);
    color: var(--text-2);
    font-size: var(--fs-meta);
    font-weight: 500;
    cursor: pointer;
    transition: border-color var(--transition), color var(--transition);
    white-space: nowrap;
}

.kbcc-focus-clear:hover,
.kbcc-depth-btn:hover {
    border-color: var(--primary);
    color: var(--text-1);
}

.kbcc-depth-group {
    display: flex;
    gap: 4px;
}

.kbcc-depth-btn.is-active {
    border-color: var(--primary);
    background: var(--primary-soft, rgba(59, 130, 246, 0.14));
    color: var(--text-1);
}

/* Die Trefferliste hängt unter dem Suchfeld und darf die Toolbar nicht auseinander-
   schieben — sonst springt beim Tippen das ganze Gerüst. */
.kbcc-start-picker {
    position: relative;
}

.kbcc-start-results {
    position: absolute;
    z-index: 20;
    top: calc(100% + 4px);
    left: 0;
    min-width: 240px;
    max-height: 280px;
    overflow-y: auto;
    padding: 4px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border);
    background: var(--bg-card);
    box-shadow: var(--shadow-lg, 0 8px 24px rgba(0, 0, 0, 0.35));
}

.kbcc-start-hit {
    display: flex;
    align-items: baseline;
    gap: 8px;
    width: 100%;
    padding: 6px 8px;
    border: 0;
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--text-1);
    font-size: var(--fs-ui);
    text-align: left;
    cursor: pointer;
}

.kbcc-start-hit:hover {
    background: var(--bg-card2, rgba(148, 163, 184, 0.12));
}

.kbcc-start-hit-label {
    flex: 1;
}

.kbcc-start-hit-type,
.kbcc-start-none {
    color: var(--text-3);
    font-size: var(--fs-meta);
}

.kbcc-start-none {
    display: block;
    margin: 0;
    padding: 6px 8px;
    line-height: 1.45;
}

/* ── Graph-Canvas ── */
.kbcc-cy {
    flex: 1;
    min-height: 0;
    background: var(--bg-card);
    border-bottom: 1px solid var(--border);
    position: relative;
}

/* ── Empty Overlay ── */
.kbcc-empty-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    color: var(--text-3);
    font-size: var(--fs-body);
    z-index: 5;
}

/* ── Full-view Empty States (Access-Gate, Lib-Guard) ── */
.kbcc-empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    gap: 12px;
    color: var(--text-2);
    padding: 40px;
    text-align: center;
}

.kbcc-empty-icon {
    font-size: var(--fs-icon);
}

.kbcc-empty-msg {
    font-size: var(--fs-section);
    font-weight: 600;
    color: var(--text-1);
}

.kbcc-empty-hint {
    font-size: var(--fs-body);
    color: var(--text-3);
}

.kbcc-empty-hint code {
    background: var(--bg-hover);
    padding: 1px 5px;
    border-radius: 4px;
    font-size: var(--fs-ui);
}

/* ── Legend ── */
.kbcc-legend {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 18px;
    padding: 8px 14px;
    background: var(--bg-card);
    border-top: 1px solid var(--border);
    flex-shrink: 0;
    font-size: var(--fs-label);
    color: var(--text-3);
}

.kbcc-legend-stats {
    display: flex;
    gap: 10px;
    font-weight: 600;
    color: var(--text-2);
    font-variant-numeric: tabular-nums;
    margin-right: 6px;
}

.kbcc-legend-nodes,
.kbcc-legend-edges {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 12px;
    align-items: center;
}

.kbcc-legend-item {
    display: flex;
    align-items: center;
    gap: 5px;
}

.kbcc-legend-dot {
    display: inline-block;
    width: 10px;
    height: 10px;
    flex-shrink: 0;
}

/* PR1.294 (#499) — das Zeichen ersetzt den Farbpunkt. Dreizehn identische Punkte
   trugen ihre Bedeutung ausschliesslich ueber die Farbe; wer Farben nicht
   unterscheidet, sah dreizehnmal dasselbe Zeichen. Weiss auf der Typfarbe — dieselbe
   Kombination wie im Graphen, damit Legende und Bild als dasselbe gelesen werden. */
.kbcc-legend-mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    border-radius: 50%;
    color: #FFFFFF;
}

/* Ordnungsbegriffe eckig — die Unterscheidung traegt auch ohne Farbe. */
.kbcc-legend-mark--hub { border-radius: 5px; }

.kbcc-legend-count {
    color: var(--text-3);
    font-variant-numeric: tabular-nums;
}

/* PR1.294 — der dritte Zustand des Graphen: waehrend das Layout rechnet. Vorher
   stand hier eine leere Flaeche, die von „kaputt" nicht zu unterscheiden war. */
.kbcc-busy {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    background: var(--bg-card);
    color: var(--text-3);
    font-size: var(--fs-ui);
    pointer-events: none;
    z-index: 2;
}

/* ============== PR1.303 (#511) — NAMENSSCHILDER ==============
   Der Zwilling zu .crm .kbg-label* in style-redesign.css. Struktur und Verhalten sind
   identisch — beide Shells binden dieselbe Ebene (kb-graph-label-layer.js) ein und
   unterscheiden sich nur im Klassen-Praefix.

   Die Masse sind die Sicht-Entsprechung der Rechnung in kb-graph-labels.js
   (LABEL_HEIGHT 34, LABEL_PAD_X 14, Schriftgroessen 11/9). Wer hier Schrift oder
   Innenabstand aendert, muss sie dort nachziehen — sonst schiebt der Mindestabstand
   nach einem Schild auseinander, das es so nicht gibt. */
.kbcc-labels {
    position: absolute;
    inset: 0;
    overflow: hidden;
    /* Faengt NICHTS ab: Klicken, Doppeltippen und Ziehen gehen unveraendert an die
       Zeichenflaeche darunter. */
    pointer-events: none;
    z-index: 1;
}
.kbcc-labels[hidden] { display: none; }
.kbcc-label {
    position: absolute;
    transform-origin: top center;
    display: flex;
    flex-direction: column;
    gap: 1px;
    padding: 2px 6px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--bg-card);
    box-shadow: var(--shadow-sm);
    text-align: center;
    pointer-events: none;
    /* Zweiter Guertel zur Kuerzung in kb-graph-labels.js. */
    white-space: nowrap;
    overflow: hidden;
}
.kbcc-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;
}
.kbcc-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;
}
/* Ueberfahren oder ausgewaehlt: der volle Name. Kein Uebergang — das Schild sitzt auf
   einer Flaeche, die sich beim Zoomen ohnehin bewegt. */
.kbcc-label.is-open {
    max-width: 320px !important;
    white-space: normal;
    z-index: 2;
}
.kbcc-label.is-open .kbcc-label-name { white-space: normal; overflow: visible; }

/* ============== PR1.546 (#827) — GRAPH ALS KARTEN (klassisch) ==============
   Zwilling von .crm .kbg-card in style-redesign.css. Masse (240 x 52, Startpunkt
   280 x 64) rechnet kb-graph-cards.js mit. Die Karten fangen nichts ab. */
.kbcc-card {
    position: absolute;
    transform-origin: center;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0 12px;
    border: 1px solid var(--border-light);
    border-radius: var(--radius);
    background: var(--bg-card);
    box-shadow: var(--shadow-sm);
    pointer-events: none;
    overflow: hidden;
}
.kbcc-card.is-root {
    border: 2px solid var(--primary);
    box-shadow: 0 0 0 4px var(--primary-glow), var(--shadow-sm);
}
.kbcc-card.is-hover { border-color: var(--text-3); }
/* Verloren/irrelevant tritt zurueck — ueber Farbe, nicht Deckkraft: der Text bleibt AA. */
.kbcc-card.is-muted { box-shadow: none; background: var(--bg-subtle); }
.kbcc-card.is-muted .kbcc-card-name { color: var(--text-2); font-weight: 500; }
.kbcc-card.is-muted .kbcc-card-glyph { opacity: 0.5; }
.kbcc-card.is-selected {
    border-color: var(--primary);
    outline: 2px solid var(--primary);
    outline-offset: 2px;
    z-index: 2;
}
.kbcc-card.is-ghost {
    border: 1px dashed var(--danger);
    background: color-mix(in srgb, var(--danger) 10%, var(--bg-card));
    box-shadow: none;
}
.kbcc-card.is-ghost .kbcc-card-name { color: var(--danger); }
/* PR1.547 — 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) {
    .kbcc-card.is-ghost::after {
        content: "";
        position: absolute;
        inset: 0;
        border-radius: inherit;
        box-shadow: inset 0 0 0 2px var(--danger);
        opacity: 0;
        pointer-events: none;
        animation: kbcc-gap-pulse 2.4s ease-in-out infinite;
    }
}
@keyframes kbcc-gap-pulse { 0%, 100% { opacity: 0; } 50% { opacity: 0.55; } }
.kbcc-card-glyph { flex: none; display: grid; place-items: center; }
.kbcc-card-glyph.is-icon {
    width: 32px;
    height: 32px;
    border-radius: var(--radius-sm);
    background: var(--card-type);
    color: white;
}
.kbcc-card.is-ghost .kbcc-card-glyph.is-icon {
    background: transparent;
    color: var(--danger);
    border: 1px dashed var(--danger);
}
.kbcc-card-glyph.is-brand {
    width: 32px;
    height: 32px;
    border-radius: var(--radius-sm);
    background: var(--bg-subtle);
}
.kbcc-card-glyph.is-brand img { max-width: 24px; max-height: 20px; }
.kbcc-card-text { min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.kbcc-card-name,
.kbcc-card-meta { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kbcc-card-name {
    font-size: var(--fs-meta);
    font-weight: 600;
    line-height: 1.25;
    color: var(--text-1);
}
.kbcc-card.is-root .kbcc-card-name { font-size: var(--fs-section); }
.kbcc-card-meta { font-size: var(--fs-label); line-height: 1.25; color: var(--text-2); }
.kbcc-group {
    position: absolute;
    transform-origin: left bottom;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding-bottom: 4px;
    font-size: var(--fs-label);
    font-weight: 600;
    color: var(--text-2);
    white-space: nowrap;
    pointer-events: none;
}
.kbcc-group-dot { width: 8px; height: 8px; border-radius: 2px; }
.kbcc-story { margin: 0; font-size: var(--fs-body); line-height: 1.45; color: var(--text-1); }
.kbcc-story-gap { color: var(--danger); font-weight: 600; }
.kbcc-zoom {
    /* Oben rechts: unten liegt in der klassischen Shell die Legende im selben Rahmen. */
    position: absolute;
    right: 12px;
    top: 12px;
    z-index: 3;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.kbcc-zoom[hidden] { display: none; }
.kbcc-zoom-btn {
    width: 36px;
    height: 36px;
    display: grid;
    place-items: center;
    padding: 0;
    border: 1px solid var(--border-light);
    border-radius: var(--radius-sm);
    background: var(--bg-card);
    box-shadow: var(--shadow-sm);
    color: var(--text-1);
    font: inherit;
    font-size: var(--fs-section);
    line-height: 1;
    cursor: pointer;
}
.kbcc-zoom-btn:hover { background: var(--bg-hover); }
.kbcc-zoom-btn:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.kbcc-restart-btn {
    margin-top: 8px;
    margin-right: 6px;
    padding: 5px 12px;
    border: 1px solid var(--primary);
    border-radius: var(--radius-sm);
    background: var(--primary);
    color: white;
    font: inherit;
    font-size: var(--fs-ui);
    font-weight: 500;
    cursor: pointer;
}
.kbcc-restart-btn:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) {
    .kbcc-card, .kbcc-group, .kbcc-zoom-btn { transition: none; animation: none; }
}

/* PR1.305 (#513) — die Linienvorschau ist jetzt ein SVG aus kb-graph-icons.js,
   kein Rahmen mehr. Grund: `border-top` kann das Strich-Punkt-Muster der Linienart
   „KI-Vorschlag" nicht darstellen, und die Legende soll exakt zeigen, was der Graph
   zeichnet. Deshalb faellt auch `height: 0` weg — das SVG bringt seine Hoehe mit.

   `color` setzt die Farbe fuer die Art „gehoert zu": die traegt bewusst keine eigene
   und folgt per `currentColor` der Rahmenfarbe des Themes, genau wie im Bild. */
.kbcc-legend-edge {
    display: inline-flex;
    align-items: center;
    width: 22px;
    flex-shrink: 0;
    /* Muss der Kantenfarbe im Graphen folgen — dort ist es seit PR1.305 `--text-3`. */
    color: var(--text-3);
}

/* Eine Verbindungszeile in der Detailkarte: Linie, Beziehungswort, Gegenueber. */
.kbcc-edgerow {
    align-items: center;
    gap: 8px;
}

.kbcc-edgerow .kbcc-detail-val {
    color: var(--text-2);
}

.kbcc-legend-label {
    color: var(--text-2);
    white-space: nowrap;
}

/* ── Detail Panel ── */
.kbcc-detail {
    width: 320px;
    flex-shrink: 0;
    background: var(--bg-card2);
    border-left: 1px solid var(--border);
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    /* smooth slide-in */
    animation: kbcc-slide-in 0.18s ease;
}

.kbcc-detail[hidden] {
    display: none;
}

@keyframes kbcc-slide-in {
    from { opacity: 0; transform: translateX(16px); }
    to   { opacity: 1; transform: translateX(0); }
}

.kbcc-detail-inner {
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.kbcc-detail-header {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--border);
}

.kbcc-detail-type-badge {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 99px;
    font-size: var(--fs-label);
    font-weight: 500;
    align-self: flex-start;
}

.kbcc-detail-title {
    font-size: var(--fs-body);
    font-weight: 600;
    color: var(--text-1);
    margin: 0;
    word-break: break-word;
}

/* Deep-Link-Button */
.kbcc-deeplink-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin-top: 4px;
    padding: 5px 12px;
    border-radius: var(--radius-sm);
    border: none;
    background: var(--primary);
    color: #fff;
    font-size: var(--fs-meta);
    font-weight: 500;
    cursor: pointer;
    transition: background var(--transition), box-shadow var(--transition);
    align-self: flex-start;
}

.kbcc-deeplink-btn:hover {
    background: var(--primary-dark);
    box-shadow: 0 0 0 3px var(--primary-glow);
}

/* ── Detail Body ── */
.kbcc-detail-body {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.kbcc-detail-section {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

/* PR1.438 — look comes from the shared section-head rule; only layout here. */
.kbcc-detail-section-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 4px;
}

.kbcc-detail-lineage {
    margin-left: auto;
}

.kbcc-detail-row {
    display: flex;
    align-items: baseline;
    gap: 6px;
    min-height: 22px;
}

.kbcc-detail-key {
    flex-shrink: 0;
    min-width: 90px;
    font-size: var(--fs-label);
    color: var(--text-3);
}

.kbcc-detail-val {
    font-size: var(--fs-meta);
    color: var(--text-1);
    word-break: break-all;
}

.kbcc-detail-hint {
    font-size: var(--fs-meta);
    color: var(--text-3);
    font-style: italic;
    margin: 0;
    padding: 4px 0;
}

.kbcc-detail-offline {
    color: var(--warning);
    font-style: normal;
}

.kbcc-detail-subsection-label {
    font-size: var(--fs-label);
    font-weight: 500;
    color: var(--text-2);
    margin: 6px 0 3px;
}

/* KB-Loading Spinner Text */
.kbcc-kb-loading {
    font-size: var(--fs-meta);
    color: var(--text-3);
    font-style: italic;
    animation: kbcc-pulse 1.2s ease infinite;
}

@keyframes kbcc-pulse {
    0%, 100% { opacity: 1; }
    50%       { opacity: 0.45; }
}

/* ── Dokument-Liste ── */
.kbcc-doc-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 3px;
    max-height: 160px;
    overflow-y: auto;
}

.kbcc-doc-item {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: var(--fs-meta);
    padding: 3px 6px;
    border-radius: 4px;
    background: var(--bg-hover);
}

.kbcc-doc-icon {
    flex-shrink: 0;
    font-size: var(--fs-ui);
}

.kbcc-doc-name {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--text-1);
}

.kbcc-doc-type {
    font-size: var(--fs-label);
    color: var(--text-3);
    flex-shrink: 0;
}

/* ── Member-Chips (Taxonomy-Detail) ── */
.kbcc-member-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    max-height: 220px;
    overflow-y: auto;
    padding: 2px;
}

.kbcc-member-chip {
    display: inline-block;
    padding: 3px 9px;
    border-radius: 99px;
    border: 1.5px solid var(--chip-color, var(--border));
    background: color-mix(in srgb, var(--chip-color, #94a3b8) 10%, transparent);
    color: var(--text-1);
    font-size: var(--fs-label);
    cursor: pointer;
    transition: background var(--transition);
    white-space: nowrap;
    max-width: 160px;
    overflow: hidden;
    text-overflow: ellipsis;
}

.kbcc-member-chip:hover {
    background: color-mix(in srgb, var(--chip-color, #94a3b8) 22%, transparent);
}

/* ── Scrollbars (Detail Panel) ── */
.kbcc-detail::-webkit-scrollbar,
.kbcc-doc-list::-webkit-scrollbar,
.kbcc-member-chips::-webkit-scrollbar {
    width: 4px;
}

.kbcc-detail::-webkit-scrollbar-track,
.kbcc-doc-list::-webkit-scrollbar-track,
.kbcc-member-chips::-webkit-scrollbar-track {
    background: transparent;
}

.kbcc-detail::-webkit-scrollbar-thumb,
.kbcc-doc-list::-webkit-scrollbar-thumb,
.kbcc-member-chips::-webkit-scrollbar-thumb {
    background: var(--border);
    border-radius: 4px;
}

/* ── Responsive: Detail-Panel auf schmalen Screens einklappen ── */
@media (max-width: 900px) {
    .kbcc-detail {
        width: 280px;
    }
    .kbcc-search {
        width: 140px;
    }
}

@media (max-width: 640px) {
    .kbcc-main {
        flex-direction: column;
    }
    .kbcc-detail {
        width: 100%;
        border-left: none;
        border-top: 1px solid var(--border);
        max-height: 45vh;
    }
}

/* ===== END PR1.20b KB Command Center ===== */

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

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

   Alle Farben aus Custom Properties (Token-Regel, DESIGN.md).

   ⚠️ Durchgaengig `--text-2`, nirgends `--text-3`: gemessen liegt die Tertiaerstufe
   auf `--bg-card` bei nur 3,9-4,1:1 und verfehlt damit WCAG AA fuer kleinen Text.
   Auf dieser Seite ist praktisch jeder Nebentext ein Satz, den man LESEN muss
   (was der Befund bedeutet, was als Naechstes zu tun ist) — Tertiaerfarbe waere
   hier die falsche Sparsamkeit. `--text-2` liegt bei rund 7:1.
   ═══════════════════════════════════════════════════════════════════════════ */

.kbcc-mode-bar {
    display: flex;
    /* PR1.264 (#458): mit dem vierten Knopf („Kunden-Baum") wird die Leiste im
       schmalen Fenster laenger als die Spalte. Das Redesign-Pendant (.page-head
       .actions) bricht laengst um; hier fehlte es. */
    flex-wrap: wrap;
    gap: 6px;
    padding: 12px 16px 0;
}

.kbcc-mode-btn {
    appearance: none;
    background: var(--bg-card);
    color: var(--text-2);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 6px 14px;
    font: inherit;
    font-size: var(--fs-ui);
    cursor: pointer;
}

.kbcc-mode-btn:hover { background: var(--bg-hover); color: var(--text-1); }

.kbcc-mode-btn.is-active {
    background: var(--primary);
    border-color: var(--primary);
    color: #fff;
    font-weight: 600;
}

.kbcc-status {
    padding: 16px;
    /* Ein Scroll-Bereich pro Ansicht (Konvention 20, Punkt 2). */
    overflow-y: auto;
    max-height: 100%;
}

.kbcc-status-head { margin-bottom: 16px; }

.kbcc-status-title {
    margin: 0 0 4px;
    font-size: var(--fs-section);
    color: var(--text-1);
}

.kbcc-status-sub {
    margin: 0;
    font-size: var(--fs-ui);
    color: var(--text-2);
}

/* ── Kennzahlen ── */
.kbcc-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 10px;
    margin-bottom: 18px;
}

.kbcc-stat {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 12px 14px;
}

.kbcc-stat-value {
    font-size: var(--fs-title);
    font-weight: 600;
    color: var(--text-1);
    line-height: 1.1;
}

.kbcc-stat-label {
    margin-top: 2px;
    font-size: var(--fs-label);
    color: var(--text-2);
}

/* Nur die Stufe „kaputt" traegt Farbe — Statusfarben bedeuten Status, nicht Dekoration. */
.kbcc-stat-broken .kbcc-stat-value { color: var(--danger); }

/* ── Tabelle ── */
.kbcc-status-caption {
    caption-side: top;
    text-align: left;
    padding: 0 0 8px;
    font-size: var(--fs-meta);
    color: var(--text-2);
}

.kbcc-status-table tbody tr:hover { cursor: default; }
.kbcc-status-table td { text-align: right; font-variant-numeric: tabular-nums; }
.kbcc-status-table th[scope="col"]:not(:first-child) { text-align: right; }
.kbcc-status-table .kbcc-status-type { text-align: left; font-weight: 600; color: var(--text-1); }
.kbcc-status-table .kbcc-num-broken { color: var(--danger); font-weight: 600; }
.kbcc-status-table .kbcc-nv { color: var(--text-2); cursor: help; }

/* ── Ereignis-Ebene ── */
.kbcc-events-toggle {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 14px 0 20px;
    font-size: var(--fs-ui);
    color: var(--text-2);
    cursor: pointer;
}

/* ── Befunde ── */
.kbcc-finding-group { margin-bottom: 22px; }

.kbcc-finding-group-title {
    margin: 0 0 4px;
    font-size: var(--fs-body);
    color: var(--text-1);
}

.kbcc-finding-group-hint {
    margin: 0 0 10px;
    font-size: var(--fs-meta);
    color: var(--text-2);
    max-width: 70ch;
}

.kbcc-finding {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    margin-bottom: 8px;
}

.kbcc-finding-broken { border-left: 3px solid var(--danger); }

.kbcc-finding-summary {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    cursor: pointer;
    font-size: var(--fs-body);
    color: var(--text-1);
    list-style: none;
}

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

.kbcc-finding-summary::before {
    content: '';
    display: inline-block; width: 1em; height: 1em; background-color: currentColor; flex: 0 0 auto;
    -webkit-mask: var(--ic-mask-caret-right); mask: var(--ic-mask-caret-right);
    color: var(--text-2);
    font-size: var(--fs-ui);
}

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

.kbcc-finding-summary:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: -2px;
}

.kbcc-finding-title { flex: 1; }

.kbcc-finding-count {
    background: var(--bg-card2);
    border-radius: 10px;
    padding: 1px 9px;
    font-size: var(--fs-meta);
    font-variant-numeric: tabular-nums;
    color: var(--text-2);
}

.kbcc-finding-hint {
    margin: 0;
    padding: 0 14px 8px;
    font-size: var(--fs-meta);
    color: var(--text-2);
    max-width: 70ch;
}

.kbcc-finding-list {
    margin: 0;
    padding: 0 14px 12px;
    list-style: none;
    /* Lange Listen scrollen in sich, statt die Seite zu strecken. */
    max-height: 320px;
    overflow-y: auto;
}

.kbcc-finding-item {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 8px;
    padding: 4px 0;
    border-bottom: 1px solid var(--border);
    font-size: var(--fs-ui);
}

.kbcc-finding-item:last-child { border-bottom: none; }

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

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

.kbcc-finding-link:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
    border-radius: 2px;
}

/* PR1.241 (#418) — zweiter Weg pro Befund: „wie hängt DAS hier zusammen".
   Bewusst zurückhaltend gesetzt: der Sprung in die Detailansicht (der Name) ist
   der häufigere Weg und soll die stärkere Farbe behalten. */
.kbcc-finding-graph {
    margin-left: auto;
    padding: 3px 10px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border);
    background: transparent;
    color: var(--text-3);
    font-size: var(--fs-label);
    font-weight: 500;
    cursor: pointer;
    transition: border-color var(--transition), color var(--transition);
}

.kbcc-finding-graph:hover {
    border-color: var(--primary);
    color: var(--text-1);
}

.kbcc-finding-graph:focus-visible,
.kbcc-focus-clear:focus-visible,
.kbcc-depth-btn:focus-visible,
.kbcc-start-hit:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
}

/* Ohne Detailansicht kein Absprung — der Eintrag bleibt trotzdem sichtbar. */
.kbcc-finding-plain { color: var(--text-2); }

.kbcc-finding-value { color: var(--text-2); font-size: var(--fs-meta); }

.kbcc-finding-more {
    padding: 6px 0 0;
    font-size: var(--fs-meta);
    color: var(--text-2);
}

/* Null Befunde ist ein Ergebnis, kein Leerzustand. */
.kbcc-findings-clear {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-left: 3px solid var(--success);
    border-radius: var(--radius);
    padding: 14px 16px;
    font-size: var(--fs-body);
    color: var(--text-2);
}

.kbcc-findings-clear strong { color: var(--text-1); display: block; margin-bottom: 2px; }

@media (max-width: 640px) {
    .kbcc-status { padding: 12px; }
    .kbcc-stats { grid-template-columns: repeat(2, 1fr); }
}

/* ===== PR1.242 (#419) — Dokumentenabdeckung =====
   Der Block erbt Tabelle, Kennzahlen und Befundlisten vom PR1.240-Abschnitt oben;
   neu ist allein die Spalte mit den Dokumentarten. --text-2, nicht --text-3: das
   Design-Gate von PR1.240 hat gezeigt, dass --text-3 auf --bg-card das AA-Verhaeltnis
   verfehlt (3,87-4,11:1). */
.kbcc-doc-kinds {
    color: var(--text-2);
    font-size: var(--fs-ui);
}

/* ===== END PR1.240 KB-Status ===== */


/* ===== PR1.26 #160 — E-Mail-Präferenzen Modal Tabs + Frequenz ===== */

/* Tab-Leiste */
.email-prefs-tabs {
    display: flex;
    gap: 0;
    border-bottom: 1px solid var(--border);
    padding: 0 16px;
}

.email-prefs-tab {
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    color: var(--text-2);
    cursor: pointer;
    font-size: var(--fs-body);
    font-weight: 500;
    margin-bottom: -1px;
    padding: 10px 16px;
    transition: color 0.15s, border-color 0.15s;
}

.email-prefs-tab:hover {
    color: var(--text-1, #e8eaed);
}

.email-prefs-tab.active {
    border-bottom-color: var(--primary);
    color: var(--primary);
}

/* Frequenz-Fieldset */
.email-prefs-freq-fieldset {
    border: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.email-prefs-freq-row {
    align-items: center;
    border-bottom: 1px solid var(--border);
    cursor: pointer;
    display: flex;
    font-size: inherit;
    gap: 12px;
    padding: 10px 0;
}

.email-prefs-freq-row input[type="radio"] {
    accent-color: var(--primary);
    cursor: pointer;
    flex-shrink: 0;
    height: 16px;
    width: 16px;
}

/* Accessibility helper */
.sr-only {
    border: 0;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    white-space: nowrap;
    width: 1px;
}

/* ===== END PR1.26 Email-Frequenz ===== */

/* ══════════════════════════════════════════════
 * HF3.17 (BB4) — Enrich-Account-Dialog
 * Additive Klassen — reuse .diff-table / .badge-conf-* / .enrich-loading / .spinner.
 * ══════════════════════════════════════════════ */

/* KI-Anreichern-Button im Customer-Card-Header (neben 📊 Details). */
.customer-enrich-btn {
    margin-top: 4px;
    padding: 4px 10px;
    font-size: var(--fs-label);
    border: 1px solid var(--border, #334155);
    border-radius: 6px;
    background: rgba(99,102,241,.12);
    color: var(--primary, #818cf8);
    cursor: pointer;
    white-space: nowrap;
}
.customer-enrich-btn:hover {
    background: rgba(99,102,241,.22);
}

/* Quelle-Zelle: klickbarer Link (Hostname). */
.enrich-source-cell { max-width: 160px; word-break: break-word; }
.enrich-source-link { color: var(--primary, #818cf8); text-decoration: none; }
.enrich-source-link:hover { text-decoration: underline; }

/* Confidence-Zelle in der Diff-Tabelle. */
.enrich-conf-cell { white-space: nowrap; }

/* Inline-SVG-Logo-Vorschau in der Vorschlag-Zelle. */
.enrich-logo-preview {
    max-width: 72px;
    max-height: 36px;
    object-fit: contain;
    background: rgba(255,255,255,.06);
    border-radius: 4px;
    padding: 3px;
    vertical-align: middle;
}

/* Display-only Initials-Placeholder, wenn kein SVG-Logo gefunden wurde. */
.enrich-logo-placeholder {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 6px;
    background: rgba(255,255,255,.08);
    color: var(--text-2);
    font-size: var(--fs-ui);
    font-weight: 500;
    vertical-align: middle;
}
.enrich-logo-note {
    display: block;
    margin-top: 4px;
    font-size: var(--fs-label);
    color: var(--text-3);
    font-style: italic;
}

/* Batch-Anreicherung-Toggle unter der Diff-Tabelle. */
.enrich-batch-toggle {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 14px;
    font-size: var(--fs-ui);
    color: var(--text-2);
    cursor: pointer;
}
.enrich-batch-toggle input[type=checkbox] { cursor: pointer; }

/* ── PR1.287 (#485) — Stufe 0: Feldauswahl vor dem Lauf ──
   Gilt fuer BEIDE Anreicherungs-Dialoge (Kunde: acht Felder, Mitarbeiter: vier
   Bereiche). Die Redesign-Fassung bringt ihre eigenen, auf #app-crm gescopten
   Regeln im Markup mit — hier steht ausschliesslich die klassische Optik. */
.enrich-field-actions {
    display: flex;
    gap: 8px;
    margin: 12px 0 8px;
}
.enrich-field-list {
    list-style: none;
    margin: 0;
    padding: 0;
    border: 1px solid var(--border);
    border-radius: 8px;
    overflow: hidden;
}
.enrich-field-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 8px 12px;
    border-top: 1px solid var(--border);
    background: var(--bg-card2);
}
.enrich-field-row:first-child { border-top: none; }
.enrich-field-row:hover { background: var(--bg-hover); }
.enrich-field-label {
    display: flex;
    align-items: center;
    gap: 9px;
    cursor: pointer;
    font-size: var(--fs-body);
    color: var(--text-primary);
}
.enrich-field-label input[type=checkbox] { cursor: pointer; }
/* Der heutige Inhalt neben dem Haekchen — er beantwortet die Frage, ob eine
   Suche hier ueberhaupt etwas bringt (User-Entscheid 22.08.2026). Lange Werte
   brechen um, statt die Zeile zu sprengen. */
.enrich-field-current {
    font-size: var(--fs-meta);
    color: var(--text-2);
    text-align: right;
    max-width: 55%;
    overflow-wrap: anywhere;
}
.enrich-field-current.is-empty {
    font-style: italic;
    color: var(--text-3);
}
/* Bereichszeile des Mitarbeiter-Dialogs: eine Zeile Erlaeuterung unter dem Namen. */
.enrich-group-hint {
    display: block;
    font-size: var(--fs-meta);
    color: var(--text-3);
    font-weight: 400;
}
.enrich-select-error {
    margin: 10px 0 0;
    font-size: var(--fs-meta);
    color: var(--danger);
}
/* Der Satz, der VOR dem Start sagt, was der Lauf kostet (AC 7). Steht links in
   der Fusszeile, die sonst rechtsbuendig ausrichtet. */
.enrich-run-cost {
    margin-right: auto;
    align-self: center;
    font-size: var(--fs-meta);
    color: var(--text-2);
}
/* Gesperrter Startknopf.

   ⚠️ Bewusst an DIESEM Knopf statt global auf `.btn:disabled` — dieselbe
   Entscheidung wie an zwei anderen Stellen dieser Datei. Eine App-weite Regel
   wuerde jeden vorhandenen deaktivierten Knopf im Bestand umfaerben, und das
   ist eine Aenderung, die in kein einzelnes Ticket gehoert. */
[data-enrich-start][disabled] {
    opacity: .5;
    cursor: not-allowed;
}

/* ============================================================
   PR1.88 (#237) — Multi-Opp-Staffing-Vergleichsansicht
   ============================================================
   Auswahl in der Opp-Tabelle (Sibling-Agent-Markup: .opp-select /
   .opp-select-cell / .opp-staffing-launch / #btn-open-multi-staffing)
   + die gestapelte Full-Page-Vergleichsansicht. Dark-Theme, nur Tokens.
   Doppelbelegung nutzt das --warning-Vokabular (wie .pflichtfeld-warn),
   Überallokation das --danger-Vokabular (wie .staffing-member-fte-warn).
============================================================ */

/* ── Tabellen-Auswahl (Checkbox + Launch-Button) ── */
.opp-select-cell {
    width: 34px;
    text-align: center;
    padding-left: 4px;
    padding-right: 4px;
}
.opp-select {
    width: 15px;
    height: 15px;
    accent-color: var(--primary);
    cursor: pointer;
    vertical-align: middle;
}
/* Toolbar-Button „Vergleichen" — Primary-Accent, sichtbar wenn ≥2 gewählt.
   display:none/inline wird inline vom Sibling-Agent gesteuert; hier nur der Look. */
.opp-staffing-launch,
#btn-open-multi-staffing {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 8px 16px;
    border-radius: var(--radius-sm);
    font-size: var(--fs-body);
    font-weight: 500;
    background: var(--primary);
    color: #fff;
    box-shadow: 0 2px 12px var(--primary-glow);
    transition: all var(--transition);
    white-space: nowrap;
    cursor: pointer;
}
.opp-staffing-launch:hover,
#btn-open-multi-staffing:hover {
    background: var(--primary-dark);
    transform: translateY(-1px);
    box-shadow: 0 4px 16px var(--primary-glow);
}
.opp-staffing-launch:disabled,
#btn-open-multi-staffing:disabled {
    opacity: .5;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

/* ── View-Layout ── */
#view-multi-opp-staffing {
    padding: 4px 2px 40px;
}
.mos-header {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    margin-bottom: 20px;
}
.mos-back { flex-shrink: 0; }
.mos-title-wrap { display: flex; flex-direction: column; gap: 4px; }
.mos-title {
    font-size: var(--fs-title);
    font-weight: 600;
    color: var(--text-1);
    line-height: 1.2;
}
.mos-hint { font-size: var(--fs-ui); color: var(--text-2); max-width: 720px; }
.mos-empty {
    padding: 40px 20px;
    text-align: center;
    color: var(--text-3);
    background: var(--bg-card);
    border: 1px dashed var(--border);
    border-radius: var(--radius-lg);
}

/* ── Gestapelte Opp-Karten (untereinander) ── */
.mos-stack { display: flex; flex-direction: column; gap: 18px; }
.mos-opp-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 16px 18px;
    box-shadow: var(--shadow-sm);
}
.mos-opp-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 10px;
}
.mos-opp-kunde { font-size: var(--fs-body); font-weight: 500; color: var(--text-1); }
.mos-opp-count {
    flex-shrink: 0;
    font-size: var(--fs-label);
    font-weight: 500;
    color: var(--text-2);
    background: var(--bg-hover);
    border: 1px solid var(--border);
    border-radius: 99px;
    padding: 2px 10px;
}
.mos-opp-info {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 18px;
    margin-bottom: 14px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--border);
    font-size: var(--fs-ui);
    color: var(--text-1);
}
.mos-info-item { display: inline-flex; flex-direction: column; gap: 1px; }
.mos-info-label {
    font-size: var(--fs-label);
    font-weight: 500;
    color: var(--text-3);
}

/* ── Drop-Zone ── */
.mos-dropzone {
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-height: 56px;
    padding: 8px;
    border: 1px dashed var(--border);
    border-radius: var(--radius);
    transition: all var(--transition);
}
.mos-dropzone.drag-over {
    background: var(--bg-hover);
    border-color: var(--primary);
    box-shadow: inset 0 0 0 1px var(--primary);
}
.mos-dropzone-empty {
    padding: 14px 8px;
    text-align: center;
    color: var(--text-3);
    font-size: var(--fs-meta);
    font-style: italic;
}

/* ── Mitarbeiter-Karte ── */
.mos-emp-card {
    background: var(--bg-card2);
    border: 1px solid var(--border-light);
    border-radius: var(--radius);
    padding: 9px 12px;
    cursor: grab;
    transition: border-color var(--transition), box-shadow var(--transition), opacity var(--transition);
}
.mos-emp-card:hover { border-color: var(--primary); }
.mos-emp-card:active { cursor: grabbing; }
.mos-emp-card.dragging {
    opacity: .5;
    border-style: dashed;
    box-shadow: none;
}
/* Ghost-Klon des Touch-Polyfills (folgt dem Finger). */
.mos-emp-card-ghost { cursor: grabbing; }

.mos-emp-head {
    display: flex;
    align-items: center;
    gap: 9px;
}
.mos-emp-chip { flex-shrink: 0; background: var(--bg-hover); }
.mos-emp-name {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: var(--fs-body);
    color: var(--text-1);
}
.mos-emp-role { color: var(--text-3); font-size: var(--fs-meta); font-weight: 400; }
.mos-emp-fte { color: var(--text-2); font-size: var(--fs-ui); font-weight: 500; flex-shrink: 0; }
.mos-emp-kw {
    color: var(--text-3);
    font-size: var(--fs-label);
    min-width: 120px;
    text-align: right;
    flex-shrink: 0;
}
.mos-emp-edit {
    flex-shrink: 0;
    background: transparent;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    color: var(--text-2);
    font-size: var(--fs-ui);
    line-height: 1;
    padding: 4px 7px;
    cursor: pointer;
    transition: all var(--transition);
}
.mos-emp-edit:hover { border-color: var(--primary); color: var(--text-1); }

/* ── Konflikt-Markierungen (warnen, nie blocken — Konvention 18) ── */
.mos-emp-markers { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 7px; }
/* Doppelbelegung → --warning-Vokabular (wie .pflichtfeld-warn). */
.mos-marker-double {
    display: inline-flex;
    align-items: center;
    font-size: var(--fs-label);
    font-weight: 500;
    color: var(--warning);
    background: rgba(245, 158, 11, .12);
    border: 1px solid var(--warning);
    border-radius: 99px;
    padding: 1px 9px;
}
.mos-doublebooked {
    border-color: var(--warning);
    box-shadow: inset 3px 0 0 var(--warning);
}
/* Überallokation (>105%) → --danger-Vokabular (wie .staffing-member-fte-warn). */
.mos-badge-overcommit {
    display: inline-flex;
    align-items: center;
    font-size: var(--fs-label);
    font-weight: 500;
    color: var(--danger);
    background: rgba(239, 68, 68, .12);
    border: 1px solid var(--danger);
    border-radius: 99px;
    padding: 1px 9px;
}
.mos-overcommit .mos-emp-fte { color: var(--danger); }

/* ── Inline-Edit (Zeitraum / FTE) ── */
.mos-edit-form {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 10px;
    margin-top: 10px;
    padding: 10px;
    background: var(--bg-input);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
}
.mos-edit-field {
    display: flex;
    flex-direction: column;
    gap: 3px;
    font-size: var(--fs-label);
    font-weight: 500;
    color: var(--text-3);
}
.mos-edit-field input {
    background: var(--bg-base);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-sm);
    color: var(--text-1);
    font-size: var(--fs-ui);
    font-weight: 400;
    padding: 5px 8px;
    text-transform: none;
    letter-spacing: normal;
}
.mos-edit-field input:focus { outline: none; border-color: var(--primary); }
.mos-edit-fte { width: 78px; }
.mos-edit-actions { display: flex; gap: 8px; margin-left: auto; }
.mos-edit-actions .btn { padding: 6px 14px; font-size: var(--fs-ui); }

/* ── Bernd-Feedback (22.09.2026) — Bemerkungen im Multi-Opp-Vergleich ── */
.mos-edit-field textarea {
    background: var(--bg-base);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-sm);
    color: var(--text-1);
    font-family: inherit;
    font-size: var(--fs-ui);
    font-weight: 400;
    padding: 5px 8px;
    text-transform: none;
    letter-spacing: normal;
    resize: vertical;
    min-height: 44px;
}
.mos-edit-field textarea:focus { outline: none; border-color: var(--primary); }
/* Bemerkung (Kandidat) spannt die volle Formularbreite statt neben FTE/Datum zu quetschen. */
.mos-edit-field-remark { flex: 1 1 100%; }

/* Bemerkung (Opp) — read-only Zeile + Formular, Konvention 13 (Klick-Guard). */
.mos-opp-remark {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 14px;
    padding: 8px 10px;
    background: var(--bg-input);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    font-size: var(--fs-ui);
    color: var(--text-1);
}
.mos-opp-remark-text { flex: 1; white-space: pre-wrap; word-break: break-word; }
.mos-opp-remark-empty .mos-opp-remark-text { color: var(--text-3); }
.mos-remark-form {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 14px;
    padding: 10px;
    background: var(--bg-input);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
}
.mos-remark-input {
    background: var(--bg-base);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-sm);
    color: var(--text-1);
    font-family: inherit;
    font-size: var(--fs-ui);
    padding: 6px 8px;
    min-height: 60px;
    resize: vertical;
}
.mos-remark-input:focus { outline: none; border-color: var(--primary); }

/* Bemerkung (Kandidat) — sichtbare Zeile ausserhalb des Edit-Formulars, damit die Notiz
   im Vergleich lesbar ist, ohne jede Karte extra aufzuklappen. */
.mos-emp-remark {
    margin-top: 6px;
    padding: 4px 8px;
    background: var(--bg-hover);
    border-radius: var(--radius-sm);
    font-size: var(--fs-meta);
    color: var(--text-2);
    white-space: pre-wrap;
    word-break: break-word;
}

/* ─────────────────────────────────────────
   MITARBEITER-POOL (PR1.129) — rechte Arbeitsflächen-Spalte
   ───────────────────────────────────────── */
.mos-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 340px;
    gap: 20px;
    align-items: start;
}
.mos-layout.mos-pool-collapsed { grid-template-columns: minmax(0, 1fr) auto; }

/* „+ Mitarbeiter"-Button (Weg C) + Ziel-Hervorhebung der Opp-Karte */
.mos-add-btn {
    flex-shrink: 0;
    font-size: var(--fs-label);
    font-weight: 500;
    color: var(--primary);
    background: transparent;
    border: 1px solid var(--primary);
    border-radius: 99px;
    padding: 2px 10px;
    cursor: pointer;
    transition: all var(--transition);
}
.mos-add-btn:hover { background: var(--primary); color: #fff; }
.mos-add-btn-active { background: var(--primary); color: #fff; }
.mos-opp-target { box-shadow: inset 0 0 0 2px var(--primary); }

/* Panel */
.mos-pool-panel {
    position: sticky;
    top: 12px;
    display: flex;
    flex-direction: column;
    max-height: calc(100vh - 90px);
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
}
.mos-pool-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 14px 8px;
}
.mos-pool-title { font-size: var(--fs-body); font-weight: 600; color: var(--text-1); }
.mos-pool-collapse {
    background: transparent;
    border: none;
    color: var(--text-3);
    font-size: var(--fs-body);
    cursor: pointer;
    line-height: 1;
    padding: 2px 6px;
    border-radius: var(--radius);
}
.mos-pool-collapse:hover { color: var(--text-1); background: var(--bg-hover); }
.mos-pool-search {
    margin: 0 14px 10px;
    padding: 7px 12px;
    background: var(--bg-card2);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    color: var(--text-1);
    font-size: var(--fs-ui);
}
.mos-pool-search:focus { outline: none; border-color: var(--primary); }

/* Kollabierter Wiederöffnen-Griff */
.mos-pool-reopen {
    position: sticky;
    top: 12px;
    writing-mode: vertical-rl;
    padding: 10px 6px;
    font-size: var(--fs-label);
    font-weight: 500;
    color: var(--text-2);
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    cursor: pointer;
}
.mos-pool-reopen:hover { color: var(--primary); border-color: var(--primary); }

/* Ziel-Banner (Weg C aktiv) */
.mos-pool-target-banner {
    margin: 0 14px 10px;
    padding: 7px 10px;
    font-size: var(--fs-meta);
    color: var(--text-1);
    background: var(--bg-hover);
    border: 1px solid var(--primary);
    border-radius: var(--radius);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}
.mos-pool-target-cancel {
    flex-shrink: 0;
    font-size: var(--fs-label);
    color: var(--text-2);
    background: transparent;
    border: 1px solid var(--border);
    border-radius: 99px;
    padding: 1px 8px;
    cursor: pointer;
}
.mos-pool-target-cancel:hover { color: var(--text-1); border-color: var(--text-2); }

/* Liste + Blöcke */
.mos-pool-list { overflow-y: auto; padding: 0 12px 12px; }
.mos-pool-block { margin-bottom: 12px; }
.mos-pool-block-title {
    position: sticky;
    top: 0;
    z-index: 1;
    font-size: var(--fs-label);
    font-weight: 600;
    color: var(--text-2);
    background: var(--bg-card);
    padding: 6px 2px 4px;
}
.mos-pool-verplant .mos-pool-block-title { color: var(--text-3); }
.mos-pool-ccgroup { margin-bottom: 8px; }
.mos-pool-cc {
    font-size: var(--fs-label);
    font-weight: 500;
    color: var(--text-3);
    padding: 4px 2px 2px;
}
.mos-pool-empty, .mos-pool-empty-block {
    font-size: var(--fs-meta);
    font-style: italic;
    color: var(--text-3);
    padding: 8px 2px;
}

/* Pool-Karte */
.mos-pool-card {
    background: var(--bg-card2);
    border: 1px solid var(--border-light);
    border-radius: var(--radius);
    padding: 7px 9px;
    margin-bottom: 5px;
    cursor: grab;
    transition: border-color var(--transition);
}
.mos-pool-card:hover { border-color: var(--primary); }
.mos-pool-card:active { cursor: grabbing; }
.mos-pool-card.dragging { opacity: .5; }
.mos-pool-verplant .mos-pool-card { opacity: .7; }
.mos-pool-card-main { display: flex; align-items: center; gap: 8px; }
.mos-pool-avatar {
    flex-shrink: 0;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: var(--fs-label);
    font-weight: 500;
    color: #fff;
}
.mos-pool-ident { display: flex; flex-direction: column; gap: 1px; min-width: 0; flex: 1; }
.mos-pool-name {
    font-size: var(--fs-ui);
    font-weight: 500;
    color: var(--text-1);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.mos-pool-role {
    font-size: var(--fs-label);
    color: var(--text-3);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.mos-pool-chip { flex-shrink: 0; font-size: var(--fs-label); font-weight: 500; }
.mos-pool-chip-off { font-style: italic; }

/* Ziel-Chip-Zeile (Weg B) */
.mos-pool-chiprow { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.mos-chip {
    font-size: var(--fs-label);
    font-weight: 500;
    border-radius: 99px;
    padding: 3px 10px;
    border: 1px solid var(--border);
}
.mos-chip-go {
    color: var(--primary);
    background: transparent;
    border-color: var(--primary);
    cursor: pointer;
}
.mos-chip-go:hover { background: var(--primary); color: #fff; }
.mos-chip-done { color: var(--text-3); background: var(--bg-hover); cursor: default; }

/* Schmaler Viewport → Pool unter den Stapel */
@media (max-width: 900px) {
    .mos-layout, .mos-layout.mos-pool-collapsed { grid-template-columns: 1fr; }
    .mos-pool-panel { position: static; max-height: none; }
    .mos-pool-list { max-height: 60vh; }
    .mos-pool-reopen { writing-mode: horizontal-tb; position: static; }
}

/* ── PR1.92 (#239) — Column-Picker (pro-User Spalten-Sichtbarkeit) ── */
.column-picker-hint { color: var(--text-2); font-size: var(--fs-ui); margin: 0 0 10px; }
.column-picker-list { display: flex; flex-direction: column; gap: 2px; max-height: 340px; overflow-y: auto; }
.column-picker-row {
    display: flex; align-items: center; gap: 10px;
    padding: 7px 10px; border-radius: var(--radius-sm); cursor: pointer;
    color: var(--text-1); font-size: var(--fs-body);
}
.column-picker-row:hover { background: var(--bg-hover); }
.column-picker-row input[type="checkbox"] { accent-color: var(--accent); cursor: pointer; }
.column-picker-row.is-locked { cursor: default; color: var(--text-2); }
.column-picker-row.is-locked:hover { background: transparent; }
.column-picker-label { flex: 1; }
.column-picker-lock { font-size: var(--fs-meta); opacity: .6; }
.opp-column-picker-btn { margin: 0 0 10px; }

/* ── PR1.370 (#588) — Spalten-Reihenfolge: zwei Bereiche + ↑/↓ (Muster .dash-cfg-move) ──
   Der Dialog haengt an document.body, also ausserhalb von `.crm` — beide Shells teilen
   diese Regeln. Keine Bewegung: die Zeile springt, das ist bei einem Einstellungsdialog
   ruhiger als ein Gleiten. */
.column-picker-section + .column-picker-section { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--border); }
/* PR1.438 — look comes from the shared section-head rule; only layout here. */
.column-picker-section-title {
    margin: 0 0 4px; padding: 0 10px 8px;
}
.column-picker-row--order { cursor: default; padding: 4px 6px 4px 10px; }
.column-picker-main { display: flex; align-items: center; gap: 10px; flex: 1; min-width: 0; cursor: pointer; padding: 3px 0; }
.column-picker-row--order.is-locked .column-picker-main { cursor: default; }
.column-picker-main .column-picker-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.column-picker-moves { display: flex; gap: 4px; flex-shrink: 0; }
.column-picker-move {
    width: 26px; height: 26px; padding: 0; line-height: 1;
    border: 1px solid var(--border); border-radius: 6px;
    /* `--bg-card2` statt `--bg-2` (Vorlage .dash-cfg-move): `--bg-2` ist nirgends definiert. */
    background: var(--bg-card2); color: var(--text-1); cursor: pointer;
}
.column-picker-move:hover:not(:disabled) { border-color: var(--primary); color: var(--primary); }
.column-picker-move:disabled { opacity: .35; cursor: default; }
.column-picker-move:focus-visible,
.column-picker-main input[type="checkbox"]:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.column-picker-empty { margin: 2px 0 0; padding: 4px 10px; font-size: var(--fs-ui); color: var(--text-2); }
.column-picker-error { margin: 10px 0 0; font-size: var(--fs-ui); color: var(--danger, #ef4444); }

/* ── PR1.121 · TOP10-Kundenreview: Umsatzverlauf / Ausblick / Verantwortliche ──
   Konsistent mit dem Customer-History-Modal-Look. Nur CSS-Custom-Properties
   (Dark + Redesign/Light identisch), Balkenfarben kommen inline als Token. */
.ch-empty {
  color: var(--text-3);
  font-size: var(--fs-ui);
  padding: 6px 0;
}

/* Vertikaler Balkenchart (Monats-Serie) */
.ch-colchart {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  padding-top: 8px;
  overflow-x: auto;
}
.ch-colchart-col {
  flex: 1 1 0;
  min-width: 44px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}
.ch-colchart-val {
  font-size: var(--fs-label);
  color: var(--text-2);
  white-space: nowrap;
}
.ch-colchart-track {
  width: 100%;
  height: 120px;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  background: var(--bg-card);
  border-radius: var(--radius-sm);
  overflow: hidden;
}
.ch-colchart-bar {
  width: 60%;
  min-height: 2px;
  border-radius: 3px 3px 0 0;
  transition: height 0.4s ease;
}
.ch-colchart-label {
  font-size: var(--fs-label);
  color: var(--text-2);
  white-space: nowrap;
}

/* Ausblick — KPI-Kacheln + Freitextblöcke */
.ch-outlook-kpis {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 12px;
}
.ch-outlook-kpi {
  flex: 1 1 120px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
}
.ch-outlook-kpi-value {
  font-size: var(--fs-section);
  font-weight: 600;
  color: var(--text-1);
}
.ch-outlook-kpi-label {
  font-size: var(--fs-label);
  color: var(--text-2);
  margin-top: 2px;
}
.ch-freetext-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: 12px;
}
.ch-freetext {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
}
.ch-freetext-label {
  font-size: var(--fs-label);
  font-weight: 500;
  color: var(--text-2);
  margin-bottom: 4px;
}
.ch-freetext-body {
  font-size: var(--fs-ui);
  color: var(--text-1);
  white-space: pre-wrap;
}
.ch-ph2-hint {
  font-size: var(--fs-label);
  color: var(--text-3);
  margin-top: 8px;
  font-style: italic;
}

/* Verantwortliche — gelabelte Karten */
.ch-resp-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: 10px;
}
.ch-resp-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
}
.ch-resp-label {
  font-size: var(--fs-label);
  font-weight: 500;
  color: var(--text-2);
  margin-bottom: 4px;
}
.ch-resp-value {
  font-size: var(--fs-body);
  color: var(--text-1);
  word-break: break-word;
}

/* Enger Modal-Viewport: Freitext einspaltig */
@media (max-width: 520px) {
  .ch-freetext-grid { grid-template-columns: 1fr; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   PR1.145 (#294) — Profil-Klassifizierer: Evidenz-Karte, Report-Ansicht,
   Auswahl in der MA-Liste, Bulk-Dialog, Fortschritt, Topbar-Lauf-Indikator.
   Prefix `clsf-`.

   Theme-Regeln (Light ist Default, Dark via :root ohne data-theme):
   - NUR kanonische Tokens (--bg-card, --border, --text-1/2/3, --success,
     --warning, --danger, --primary). KEINE `var(--x, <hex-fallback>)`-
     Konstruktionen: genau dieses Muster hat ~30 Fundstellen im Light-Theme
     unlesbar gemacht (siehe Kommentar bei :root[data-theme="light"]).
   - Flächen per color-mix() aus den Tokens ableiten ⇒ EINE Regel trägt beide
     Themes, es braucht keinen [data-theme="light"]-Zusatzblock.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Frische-Badge (Liste + Detail + Report) ───────────────────────────────── */
.clsf-badge {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 1px 7px; border-radius: 10px;
  font-size: var(--fs-meta); font-weight: 500; line-height: 1.6;
  border: 1px solid var(--border);
  background: var(--bg-card2); color: var(--text-2);
  white-space: nowrap;
}
.clsf-badge-never {
  border-color: color-mix(in srgb, var(--text-3) 45%, transparent);
  background: color-mix(in srgb, var(--text-3) 12%, transparent);
  color: var(--text-2);
}
.clsf-badge-stale-age,
.clsf-badge-unknown-age {
  border-color: color-mix(in srgb, var(--warning) 50%, transparent);
  background: color-mix(in srgb, var(--warning) 13%, transparent);
  color: var(--warning);
}
/* CV seither getauscht — inhaltlich überholt, nicht nur alt. Stärkeres Signal. */
.clsf-badge-stale-source {
  border-color: color-mix(in srgb, var(--attention) 55%, transparent);
  background: color-mix(in srgb, var(--attention) 15%, transparent);
  color: var(--attention);
}
.clsf-badge-fresh,
.clsf-badge-fresh-no-source {
  border-color: color-mix(in srgb, var(--success) 45%, transparent);
  background: color-mix(in srgb, var(--success) 11%, transparent);
  color: var(--success);
}

/* ── Evidenz-Karte im MA-Detail (rahmenlos: .emp-card liefert den Rahmen) ──── */
.clsf-card-actions { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.clsf-card-body { margin-top: 8px; }
.clsf-summary {
  margin: 6px 0 10px; padding: 8px 10px;
  border-left: 3px solid var(--primary);
  background: color-mix(in srgb, var(--primary) 7%, transparent);
  border-radius: 0 6px 6px 0;
  font-size: var(--fs-ui); line-height: 1.55; color: var(--text-1);
}
.clsf-progress-host:empty { display: none; }

/* ── Sektionen + Belegzeilen ───────────────────────────────────────────────── */
.clsf-section { margin-top: 12px; }
/* PR1.438 — look comes from the shared section-head rule. */
.clsf-section-title { margin-bottom: 5px; }
.clsf-section-missing { font-size: var(--fs-ui); color: var(--text-3); font-style: italic; }
.clsf-row {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  padding: 5px 0; border-bottom: 1px solid color-mix(in srgb, var(--border) 60%, transparent);
}
.clsf-row:last-child { border-bottom: none; }
.clsf-row-key { font-size: var(--fs-ui); font-weight: 500; color: var(--text-1); min-width: 116px; }
.clsf-row-refs { font-size: var(--fs-meta); color: var(--text-3); }

/* Belegstufen — vier Stufen, absteigende Stärke. Die Farbe kodiert die Stärke,
   der Text nennt sie ausdrücklich (Farbe allein ist kein Informationsträger). */
.clsf-level {
  display: inline-flex; align-items: center;
  padding: 1px 7px; border-radius: 4px;
  font-size: var(--fs-meta); font-weight: 500; white-space: nowrap;
  border: 1px solid var(--border);
}
.clsf-level-projekt {
  border-color: color-mix(in srgb, var(--success) 55%, transparent);
  background: color-mix(in srgb, var(--success) 14%, transparent);
  color: var(--success);
}
.clsf-level-zertifikat {
  border-color: color-mix(in srgb, var(--info) 55%, transparent);
  background: color-mix(in srgb, var(--info) 13%, transparent);
  color: var(--info);
}
.clsf-level-services {
  border-color: color-mix(in srgb, var(--accent) 50%, transparent);
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  color: var(--accent);
}
.clsf-level-erwaehnt {
  border-color: color-mix(in srgb, var(--text-3) 50%, transparent);
  background: color-mix(in srgb, var(--text-3) 12%, transparent);
  color: var(--text-2);
}

/* Zitat-Aufklapper */
.clsf-quote-btn {
  background: none; border: 1px solid var(--border); color: var(--text-2);
  border-radius: 4px; padding: 0 6px; font-size: var(--fs-meta); cursor: pointer;
  transition: background .12s ease, color .12s ease;
}
.clsf-quote-btn:hover { background: var(--bg-hover); color: var(--text-1); }

/* ── Hinweise, Warnungen, Leerzustände ─────────────────────────────────────── */
.clsf-note, .clsf-note-footer { font-size: var(--fs-meta); color: var(--text-3); line-height: 1.5; }
.clsf-note-footer { margin-top: 10px; padding-top: 8px; border-top: 1px solid var(--border); }
.clsf-empty, .clsf-empty-never, .clsf-empty-pointer {
  font-size: var(--fs-ui); color: var(--text-3); padding: 8px 0;
}
.clsf-warn {
  font-size: var(--fs-ui); color: var(--warning);
  background: color-mix(in srgb, var(--warning) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--warning) 35%, transparent);
  border-radius: 6px; padding: 6px 9px; margin: 6px 0;
}
/* „Zitat im Profiltext nicht auffindbar" — der Eintrag bleibt sichtbar, nur markiert. */
.clsf-unverified, .clsf-unverified-entry { color: var(--warning); font-size: var(--fs-meta); font-weight: 500; }
.clsf-unverified-entry { margin-left: 4px; }
.clsf-missing-list { margin: 4px 0 0 16px; font-size: var(--fs-ui); color: var(--text-3); }

/* ── Zitat-Panel ───────────────────────────────────────────────────────────── */
.clsf-quotes {
  margin: 4px 0 8px; padding: 8px 10px;
  background: var(--bg-card2); border: 1px solid var(--border); border-radius: 6px;
}
.clsf-quotes-embedded { margin-left: 12px; }
.clsf-quote-list { display: flex; flex-direction: column; gap: 8px; }
.clsf-quote { border-left: 2px solid var(--border-light); padding-left: 8px; }
.clsf-quote-text { font-size: var(--fs-ui); color: var(--text-1); line-height: 1.5; }
.clsf-quote-meta { font-size: var(--fs-meta); color: var(--text-3); margin-top: 2px; }

/* ── Eigene Report-Ansicht ─────────────────────────────────────────────────── */
.clsf-report { max-width: 980px; }
.clsf-report-head {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 12px; flex-wrap: wrap;
  padding-bottom: 10px; margin-bottom: 12px; border-bottom: 1px solid var(--border);
}
.clsf-report-title { font-size: var(--fs-section); font-weight: 600; color: var(--text-1); }
.clsf-report-meta { font-size: var(--fs-ui); color: var(--text-3); display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.clsf-entry { padding: 8px 0; border-bottom: 1px solid color-mix(in srgb, var(--border) 60%, transparent); }
.clsf-entry:last-child { border-bottom: none; }
.clsf-entry-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

/* ── Fortschritt ───────────────────────────────────────────────────────────── */
/* Der Bulk-Lauf hat ECHTE Zahlen (processed/toProcess). Er nutzt bewusst dieselben
   .match-progress-*-Klassen wie das Matching (identische Optik), aber ohne den
   Puls-Keyframe: der signalisiert „Schätzung", und ein echter Zähler darf nicht so
   aussehen. Der Einzel-Lauf ist zeitgeschätzt und behält den Puls. */
.clsf-progress-exact .match-progress-fill { animation: none; }
.clsf-line1 { font-size: var(--fs-ui); font-weight: 500; color: var(--text-1); }
.clsf-line2, .clsf-line3 { font-size: var(--fs-meta); color: var(--text-3); line-height: 1.5; }
.clsf-keep-running { font-size: var(--fs-meta); color: var(--text-3); font-style: italic; margin-top: 4px; }
.clsf-tone-running .match-progress-fill { background: var(--primary); }
.clsf-tone-done .match-progress-fill { background: var(--success); }
.clsf-tone-warning .match-progress-fill { background: var(--warning); }
.clsf-tone-error .match-progress-fill { background: var(--danger); }
.clsf-tone-warning .clsf-line2 { color: var(--warning); }
.clsf-tone-error .clsf-line1 { color: var(--danger); }
.clsf-errors { margin-top: 8px; }
.clsf-error-list { display: flex; flex-direction: column; gap: 3px; margin-top: 4px; }
.clsf-error-row { font-size: var(--fs-meta); color: var(--text-2); }
.clsf-error-capped { font-size: var(--fs-meta); color: var(--text-3); font-style: italic; margin-top: 3px; }

/* ── Vorschau (plan-Antwort) ───────────────────────────────────────────────── */
.clsf-preview {
  padding: 9px 11px; border-radius: 6px;
  background: var(--bg-card2); border: 1px solid var(--border);
}
.clsf-preview-line, .clsf-preview-main { font-size: var(--fs-ui); color: var(--text-1); font-weight: 500; }
.clsf-preview-note, .clsf-preview-cc { font-size: var(--fs-meta); color: var(--text-3); margin-top: 3px; }
.clsf-preview-row { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 3px; }

/* ── Bulk-Dialog ───────────────────────────────────────────────────────────── */
.clsf-dialog-body { display: flex; flex-direction: column; gap: 12px; }
.clsf-dialog-row { display: flex; flex-direction: column; gap: 5px; }
.clsf-dialog-label {
  font-size: var(--fs-meta); font-weight: 500;
  color: var(--text-3);
}
.clsf-selection-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.clsf-selection-count { font-size: var(--fs-ui); color: var(--text-1); font-weight: 500; }
.clsf-cc-row { display: flex; flex-direction: column; gap: 5px; }
.clsf-cc-chips { display: flex; gap: 5px; flex-wrap: wrap; }
.clsf-cc-chip {
  padding: 2px 9px; border-radius: 11px; cursor: pointer;
  font-size: var(--fs-meta); border: 1px solid var(--border);
  background: var(--bg-card2); color: var(--text-2);
  transition: background .12s ease, color .12s ease, border-color .12s ease;
}
.clsf-cc-chip:hover { background: var(--bg-hover); color: var(--text-1); }
.clsf-cc-chip-active {
  border-color: var(--primary); color: var(--primary);
  background: color-mix(in srgb, var(--primary) 13%, transparent);
}
.clsf-scope-row { display: flex; flex-direction: column; gap: 5px; }
.clsf-scope-opt {
  display: flex; align-items: flex-start; gap: 7px;
  font-size: var(--fs-ui); color: var(--text-1); cursor: pointer;
}
.clsf-dialog-actions { display: flex; gap: 8px; justify-content: flex-end; align-items: center; }

/* ── Auswahl-Checkbox auf der MA-Karte ─────────────────────────────────────── */
/* Die ganze Karte navigiert per onclick — die Checkbox braucht eine großzügige,
   eigene Trefferfläche, damit niemand versehentlich in das Detail springt. */
.emp-select-cell {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 5px; margin: -5px 2px -5px -5px; cursor: pointer;
}
.emp-select-cell input { cursor: pointer; width: 15px; height: 15px; accent-color: var(--primary); }

/* ── PR1.251 (#445) — „alle sichtbaren" neben der Zähler-Pill ─────────────── */
/* Steht bewusst in style.css und nicht in style-redesign.css: beide Shells lesen
   diese Datei, das Redesign überschreibt darüber nur Tokens im .crm-Scope. Eine
   Regel, zwei Shells — und der ui-craft-Ratchet, der ausschließlich
   style-redesign.css zählt, bleibt unberührt. */
.emp-select-all-wrap {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: var(--fs-ui); color: var(--text-2); cursor: pointer; white-space: nowrap;
}
.emp-select-all-wrap input { cursor: pointer; width: 15px; height: 15px; accent-color: var(--primary); }

/* Gesperrtes „Anwenden" MUSS gesperrt aussehen. Apollon hat keine generische
   `.btn:disabled`-Regel — ein deaktivierter Knopf trug bisher volle Farbe und
   `cursor: pointer`, und wer daraufklickt, bekommt keine Erklaerung, warum nichts
   geschieht (gemessen auf test/ui-harness/pr1-251-bulk-edit.html).
   Bewusst am Knopf dieses Dialogs statt an `.btn:disabled` global: eine App-weite
   Regel wuerde das Aussehen fremder Knoepfe mitten in einer parallelen Welle
   veraendern. Werte aus dem Hausmuster (.btn-warning:disabled, style.css:10264). */
[data-bulk-apply]:disabled { opacity: .5; cursor: not-allowed; }

/* ── Zähler-Pill in der Filterleiste ──────────────────────────────────────── */
.clsf-select-count {
  display: inline-flex; align-items: center;
  padding: 2px 9px; border-radius: 11px;
  font-size: var(--fs-meta); font-weight: 500;
  border: 1px solid var(--primary); color: var(--primary);
  background: color-mix(in srgb, var(--primary) 12%, transparent);
  white-space: nowrap;
}

/* ── Topbar-Lauf-Indikator ────────────────────────────────────────────────── */
/* Nur sichtbar, solange serverseitig gerechnet wird — er ist der Beweis, dass
   Navigation und Reload den Lauf nicht abbrechen. */
.clsf-run-indicator {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 4px 11px; border-radius: 13px; cursor: pointer;
  font-size: var(--fs-ui); font-weight: 500;
  border: 1px solid color-mix(in srgb, var(--primary) 55%, transparent);
  background: color-mix(in srgb, var(--primary) 13%, transparent);
  color: var(--primary);
  animation: clsf-run-pulse 2.2s ease-in-out infinite;
}
.clsf-run-indicator:hover { background: color-mix(in srgb, var(--primary) 22%, transparent); }
@keyframes clsf-run-pulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: .62; }
}

@media (prefers-reduced-motion: reduce) {
  .clsf-run-indicator { animation: none; }
}

/* ── BF-33 #428 · Outbox-Anzeige ──────────────────────────────────────────── */
/* Sichtbar nur, solange Schreibvorgänge ausstehen. Bewusst OHNE Puls (anders als
   der Klassifizierungs-Indikator daneben): dieses Element erscheint in einem
   Moment, in dem der Nutzer ohnehin beunruhigt ist — Bewegung erhöht dort die
   Angst, statt zu informieren. Einziges Motion-Budget ist ein kurzes Einblenden.
   Basis-Regeln hier; die Redesign-Shell tont sie in style-redesign.css nur um. */
.outbox-indicator {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 4px 11px; border-radius: 13px; cursor: pointer;
  font-size: var(--fs-ui); font-weight: 500;
  border: 1px solid transparent;
  animation: outbox-appear 120ms ease-out;
}
.outbox-indicator.is-pending {
  border-color: color-mix(in srgb, var(--warning, #d98324) 55%, transparent);
  background: color-mix(in srgb, var(--warning, #d98324) 13%, transparent);
  color: var(--warning, #d98324);
}
.outbox-indicator.is-busy {
  border-color: color-mix(in srgb, var(--primary) 55%, transparent);
  background: color-mix(in srgb, var(--primary) 13%, transparent);
  color: var(--primary);
  cursor: progress;
}
.outbox-indicator.is-error {
  border-color: color-mix(in srgb, var(--danger, #e5484d) 60%, transparent);
  background: color-mix(in srgb, var(--danger, #e5484d) 15%, transparent);
  color: var(--danger, #e5484d);
}
.outbox-indicator.is-pending:hover { background: color-mix(in srgb, var(--warning, #d98324) 22%, transparent); }
.outbox-indicator.is-error:hover   { background: color-mix(in srgb, var(--danger, #e5484d) 24%, transparent); }
.outbox-indicator[disabled] { cursor: progress; }

@keyframes outbox-appear {
  from { opacity: 0; transform: translateY(-2px); }
  to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .outbox-indicator { animation: none; }
}

/* Enge Viewports: Belegzeilen umbrechen statt zu quetschen */
@media (max-width: 640px) {
  .clsf-row-key { min-width: 0; }
  .clsf-report-head { flex-direction: column; }
}

/* ── PR1.145 (#294) · P2: Einzel-Lauf-Notizen + Report-Ansicht ─────────────── */
/* Der Fortschritts-Mount liegt NEBEN dem Balken-Container, weil startMatchProgress
   das innerHTML seines Containers überschreibt — der „du kannst die Seite verlassen"-
   Hinweis würde sonst bei jedem Tick weggeschrieben. */
.clsf-progress-mount { display: flex; flex-direction: column; gap: 4px; }

/* Transienter Poll-Fehler: die letzten bekannten Zahlen und der Balken BLEIBEN stehen,
   es kommt nur eine Notiz dazu. Ein ersetzter Container würde behaupten, der Lauf sei
   gescheitert — während er serverseitig weiterläuft. */
.clsf-poll-note { font-size: var(--fs-meta); color: var(--text-3); font-style: italic; }

.clsf-run-note {
  display: flex; align-items: flex-start; gap: 7px; flex-wrap: wrap;
  font-size: var(--fs-ui); line-height: 1.5;
  padding: 6px 9px; margin-top: 6px; border-radius: 6px;
  border: 1px solid var(--border); background: var(--bg-card2); color: var(--text-2);
}
.clsf-run-note-warn {
  border-color: color-mix(in srgb, var(--warning) 40%, transparent);
  background: color-mix(in srgb, var(--warning) 10%, transparent);
  color: var(--warning);
}
.clsf-run-note-error {
  border-color: color-mix(in srgb, var(--danger) 40%, transparent);
  background: color-mix(in srgb, var(--danger) 10%, transparent);
  color: var(--danger);
}
.clsf-run-note-msg { flex: 1 1 auto; min-width: 0; }
.clsf-retry, .clsf-report-retry {
  background: none; cursor: pointer;
  border: 1px solid currentColor; color: inherit;
  border-radius: 4px; padding: 1px 8px; font-size: var(--fs-meta); font-weight: 500;
}
.clsf-retry:hover, .clsf-report-retry:hover { background: color-mix(in srgb, currentColor 12%, transparent); }

/* Eigene Report-Ansicht */
.clsf-report-view { padding: 4px 0; }
.clsf-report-header {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 12px; flex-wrap: wrap; margin-bottom: 12px;
}
.clsf-report-header-title { font-size: var(--fs-section); font-weight: 600; color: var(--text-1); }
.clsf-report-header-sub { font-size: var(--fs-ui); color: var(--text-3); margin-top: 2px; }
.clsf-report-back {
  background: none; border: 1px solid var(--border); color: var(--text-2);
  border-radius: 6px; padding: 3px 11px; font-size: var(--fs-ui); cursor: pointer;
}
.clsf-report-back:hover { background: var(--bg-hover); color: var(--text-1); }
.clsf-report-loading, .clsf-report-no-selection, .clsf-report-none-hint {
  font-size: var(--fs-body); color: var(--text-3); padding: 14px 0;
}
.clsf-report-error {
  display: flex; align-items: center; gap: 9px; flex-wrap: wrap;
  font-size: var(--fs-ui); padding: 9px 11px; border-radius: 6px;
  border: 1px solid color-mix(in srgb, var(--danger) 40%, transparent);
  background: color-mix(in srgb, var(--danger) 9%, transparent);
  color: var(--danger);
}
.clsf-report-error-msg { flex: 1 1 auto; min-width: 0; }

/* In der Report-Ansicht sind die Fundstellen eingebettet; dieser Zustand klappt sie ein. */
.clsf-quotes-collapsed { display: none; }

/* ── PR1.145 (#294) · P3: Bulk-Dialog-Meldungen, Auswahl-Zeile, Vorschau-Zustände ── */
.clsf-message {
  display: flex; align-items: flex-start; gap: 7px; flex-wrap: wrap;
  font-size: var(--fs-ui); line-height: 1.5; padding: 6px 9px; border-radius: 6px;
  border: 1px solid var(--border); background: var(--bg-card2); color: var(--text-2);
}
.clsf-message-info {
  border-color: color-mix(in srgb, var(--info) 40%, transparent);
  background: color-mix(in srgb, var(--info) 10%, transparent);
  color: var(--info);
}
.clsf-message-warn {
  border-color: color-mix(in srgb, var(--warning) 40%, transparent);
  background: color-mix(in srgb, var(--warning) 10%, transparent);
  color: var(--warning);
}
.clsf-message-error {
  border-color: color-mix(in srgb, var(--danger) 40%, transparent);
  background: color-mix(in srgb, var(--danger) 10%, transparent);
  color: var(--danger);
}

.clsf-dialog-progress { margin-top: 4px; }
.clsf-dialog-progress:empty { display: none; }
.clsf-dialog-hint, .clsf-progress-note { font-size: var(--fs-meta); color: var(--text-3); line-height: 1.5; }

/* „Alle Mitarbeiter (N, ohne Shoring-Slots)" — vorbelegt, wenn keine Checkbox gesetzt ist.
   Nötig, weil ein leerer Filter serverseitig den GESAMTEN Kanon bedeutet: ohne diese
   sichtbare Zeile wäre „nichts ausgewählt" stillschweigend der teuerste Lauf. */
.clsf-all-row {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  padding: 6px 9px; border-radius: 6px;
  border: 1px dashed var(--border-light); background: var(--bg-card2);
}
.clsf-all-toggle {
  display: flex; align-items: center; gap: 7px;
  font-size: var(--fs-ui); color: var(--text-1); cursor: pointer;
}
.clsf-all-toggle input { cursor: pointer; accent-color: var(--primary); }

.clsf-preview-loading { font-size: var(--fs-ui); color: var(--text-3); font-style: italic; }
.clsf-preview-error { font-size: var(--fs-ui); color: var(--danger); }

/* Die Zähler-Pill ist klickbar (leert die Auswahl) — sie muss sich auch so anfühlen
   und per Tastatur erreichbar sein. */
.clsf-select-count { cursor: pointer; }
.clsf-select-count:hover { background: color-mix(in srgb, var(--primary) 20%, transparent); }
.clsf-select-count:focus-visible {
  outline: 2px solid var(--primary); outline-offset: 2px;
}

/* ═══════════════════════════════════════════════════════════
   PR1.150 (#299) — Kandidaten-Vergleich
   Breiter Abschnitt unter den Kandidaten-Kisten: Tabelle mit Anforderungen als
   Zeilen und Kandidaten als Spalten, Zeilen-Sieger markiert, Fazit, Hinweis-Block
   bei Abweichung von der Listenreihenfolge, ⚠-Marker bei Belegkonflikt.

   Zwei bewusste Entscheidungen:
   • Farbflächen laufen über `color-mix(... , white)` gegen die Theme-Tokens statt
     über hartkodierte rgba-Werte. `.drift-banner` (Zeile ~9287) ist als Muster
     inhaltlich richtig, technisch aber ein schlechtes Vorbild: sein
     `rgba(245,158,11,.12)` + `#fbbf24` erreicht auf hellem Grund nur ~2:1.
   • Der Zeilen-Sieger wird NIE nur über Farbe markiert (★-Glyph + aria-label),
     sonst ist die Kernaussage der Tabelle für Farbfehlsichtige und im Ausdruck weg.
   ═══════════════════════════════════════════════════════════ */

/* Padding-Achse identisch zu .opp-cand-panels (6224) und .opp-team-section (6684). */
.opp-compare-section { padding: 0 24px 20px; }
.opp-compare-section:empty { padding: 0; }

/* Die Aktivierungsregel IST die Fachlichkeit dieses Buttons — man muss ihr
   Ergebnis sehen können. `.btn` hat projektweit kein `:disabled`-Styling
   (gemessen: ein deaktivierter Button ist optisch nicht von einem aktiven zu
   unterscheiden, der Grund steht nur im title). Bewusst NUR für diesen Button
   gesetzt statt global auf `.btn:disabled`: eine globale Regel würde jeden
   deaktivierten Button der Anwendung verändern und gehört nicht in dieses Ticket.
   Der Pre-Staffing-Button daneben hat dasselbe Problem — eigener Vorgang. */
#opp-cand-compare:disabled {
  opacity: .45;
  cursor: not-allowed;
}
#opp-cand-compare:disabled:hover { background: var(--bg-hover); }

/* Der Scroll-Container gehört um die Tabelle, nicht an die Seite: bei vier
   Kandidaten ist die Tabelle breiter als die Spalte, der Body darf trotzdem nie
   horizontal scrollen. */
.opp-compare-scroll {
  overflow-x: auto;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--bg-card);
}

.opp-compare-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: var(--fs-body);
}

/* Die globale `th`-Regel (Zeile ~1371) setzt `text-transform: uppercase`,
   `white-space: nowrap` und ein weites `letter-spacing`. Für einen Spaltenkopf ist
   das richtig — für die Zeilenköpfe dieser Tabelle nicht: dort stehen ganze
   Anforderungssätze samt wörtlichem Zitat. Ohne dieses Zurücksetzen brach der
   Text nicht um und lief quer über die Nachbarzellen. */
.opp-compare-table th {
  text-transform: none;
  white-space: normal;
  letter-spacing: normal;
  overflow-wrap: anywhere;
}

/* Die globale Regel macht jede Tabellenzeile klickbar aussehend
   (`tbody tr:hover { cursor: pointer }`). Diese Tabelle ist reine Anzeige. */
.opp-compare-table tbody tr:hover { background: transparent; cursor: default; }

.opp-compare-table thead th {
  position: sticky;
  top: 0;
  z-index: 2;
  /* Deckend, nicht transparent: sonst scheint der scrollende Inhalt durch. */
  background: var(--bg-card);
  color: var(--text-2);
  font-weight: 500;
  font-size: var(--fs-meta);
  padding: 10px 14px;
  border-bottom: 2px solid var(--border);
  text-align: center;
  vertical-align: top;
}

/* Der Spaltenkopf der Anforderungs-Spalte darf die Versalien behalten — er trägt
   ein einzelnes Wort, keinen Satz. */
.opp-compare-table thead th.opp-compare-req-head {
  text-align: left;
  width: 260px;
  min-width: 220px;
}

.opp-compare-cand-name { font-size: var(--fs-body); color: var(--text-1); font-weight: 500; }
.opp-compare-cand-score { font-size: var(--fs-section); font-weight: 600; margin-top: 2px; }
/* Score-Ampel wie in der Liste (.opp-cand-scoretile): dieselben Tier-Klassen. */
.opp-compare-cand-score.tier-high { color: var(--success); }
.opp-compare-cand-score.tier-good { color: var(--success-light); }
.opp-compare-cand-score.tier-ok   { color: var(--attention); }
/* Ebenfalls --text-2 statt --text-3: dieser Hinweis ist der Fairness-Vermerk
   („kein Lebenslauf hinterlegt") und darf im Dunklen nicht wegdämmern. */
.opp-compare-cv-note {
  font-size: var(--fs-label); color: var(--text-2); font-weight: 400;
  margin-top: 4px; white-space: normal; max-width: 220px;
}

/* Erste Spalte: die Anforderung selbst. Deckender Hintergrund, weil sie beim
   horizontalen Scrollen stehen bleibt. */
.opp-compare-table th.opp-compare-req {
  position: sticky;
  left: 0;
  z-index: 1;
  background: var(--bg-card);
  text-align: left;
  vertical-align: top;
  padding: 10px 14px;
  border-bottom: 1px solid var(--border);
  border-right: 1px solid var(--border);
  width: 260px;
  min-width: 220px;
  font-weight: 500;
}

.opp-compare-req-label { color: var(--text-1); font-weight: 600; }
/* --text-3 (#64748b) erreicht im Dunklen auf der Karte nur 3.87:1. Diese Zeile
   trägt „MUSS/SOLL" und die geforderte Mindestdauer — das ist Inhalt, kein Beiwerk. */
.opp-compare-req-meta {
  font-size: var(--fs-label); color: var(--text-2); margin-top: 2px;
}
.opp-compare-quote {
  font-size: var(--fs-meta); color: var(--text-2); font-style: italic;
  margin-top: 5px; line-height: 1.35;
}

.opp-compare-cell {
  padding: 10px 14px;
  border-bottom: 1px solid var(--border);
  vertical-align: top;
  text-align: left;
  min-width: 190px;
}

.opp-compare-verdict { font-weight: 500; font-size: var(--fs-ui); }
.opp-compare-rationale {
  font-size: var(--fs-meta); color: var(--text-2); line-height: 1.4; margin-top: 4px;
}

.opp-compare-v-yes .opp-compare-verdict     { color: var(--success); }
.opp-compare-v-part .opp-compare-verdict    { color: var(--attention); }
.opp-compare-v-no .opp-compare-verdict      { color: var(--danger); }
/* „nicht bewertbar" ist ein Urteil in der Tabelle, kein Platzhalter — auf
   --text-3 lag es im Dunklen bei 3.87:1 und damit unter AA. */
.opp-compare-v-unknown .opp-compare-verdict { color: var(--text-2); }

/* Zeilen-Sieger: getönte Fläche PLUS ★-Glyph (siehe Kopfkommentar). */
.opp-compare-cell.opp-compare-winner {
  background: color-mix(in srgb, var(--success) 8%, transparent);
  box-shadow: inset 3px 0 0 var(--success);
}
.opp-compare-winner-mark { color: var(--success); }

/* Belegkonflikt — Vokabular von .mos-marker-double (10785). */
.opp-compare-row-conflict th.opp-compare-req {
  box-shadow: inset 3px 0 0 var(--warning);
}
.opp-compare-conflict {
  margin-top: 6px;
  font-size: var(--fs-label);
  color: var(--warning);
  line-height: 1.35;
}

/* Abweichungs-Hinweis. Muster .drift-banner, aber tokenisiert (siehe Kopf). */
.opp-compare-divergence {
  margin-bottom: 12px;
  padding: 12px 14px;
  border-radius: var(--radius-sm);
  border: 1px solid color-mix(in srgb, var(--attention) 40%, transparent);
  border-left: 4px solid var(--attention);
  background: color-mix(in srgb, var(--attention) 12%, transparent);
}
.opp-compare-divergence-title {
  font-weight: 600; font-size: var(--fs-ui); color: var(--attention); margin-bottom: 5px;
}
.opp-compare-divergence-text {
  font-size: var(--fs-ui); color: var(--text-1); line-height: 1.5; margin: 0 0 6px;
}
.opp-compare-divergence-text:last-child { margin-bottom: 0; }

/* „Die Auswahl hat sich geändert" — dezenter als die Divergenz, es ist ein
   Bedienhinweis und kein Befund. */
.opp-compare-stale {
  margin-bottom: 10px; padding: 8px 12px;
  border-radius: var(--radius-sm);
  border-left: 3px solid var(--info);
  background: color-mix(in srgb, var(--info) 8%, transparent);
  font-size: var(--fs-meta); color: var(--text-2);
}

.opp-compare-conclusion {
  margin-top: 12px; padding: 12px 14px;
  border: 1px solid var(--border); border-radius: var(--radius-lg);
  background: var(--bg-card2);
}
.opp-compare-conclusion-title {
  font-size: var(--fs-label); font-weight: 600; color: var(--accent); margin-bottom: 5px;
}
.opp-compare-conclusion p { margin: 0; font-size: var(--fs-body); color: var(--text-1); line-height: 1.55; }

.opp-compare-equal, .opp-compare-missing { margin-top: 10px; }
.opp-compare-equal > summary, .opp-compare-missing > summary {
  cursor: pointer; font-size: var(--fs-meta); color: var(--text-2); padding: 4px 0;
}
.opp-compare-equal > summary:hover, .opp-compare-missing > summary:hover { color: var(--text-1); }
.opp-compare-equal .opp-compare-scroll { margin-top: 8px; }
.opp-compare-missing ul { margin: 6px 0 0 18px; font-size: var(--fs-meta); color: var(--text-2); line-height: 1.5; }

.opp-compare-running { padding: 4px 0 2px; }
.opp-compare-error { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 8px 0; }
.opp-compare-error-msg { font-size: var(--fs-ui); color: var(--warning); }

/* ── Light-Overrides ───────────────────────────────────────────────────────
   Direkt neben den Regeln statt im :root-Block: eine getönte Fläche, die im
   Dunklen trägt, ist im Hellen fast immer zu blass — und umgekehrt. Die
   Basisregeln oben bleiben unangetastet (Konvention aus PR1.147/PR1.148). */
[data-theme="light"] .opp-compare-cell.opp-compare-winner {
  background: color-mix(in srgb, var(--success) 10%, white);
}
/* --attention ist im Hellen #A16207 und trägt auf dem eigenen Tint nur bis ~6 %
   noch AA — dieselbe Asymmetrie wie bei .opp-cand-chip-assumed (Zeile ~305). */
[data-theme="light"] .opp-compare-divergence {
  background: color-mix(in srgb, var(--attention) 6%, white);
  border-color: color-mix(in srgb, var(--attention) 32%, white);
}
[data-theme="light"] .opp-compare-stale {
  background: color-mix(in srgb, var(--info) 7%, white);
}

/* ═══════════════════════════════════════════════════════════════════════════
   PR1.149 (#298) — ALTERNATIVE SUCHEN (dritte Kiste)

   Eigener Namensraum `.opp-alt-*`, damit die beiden Listen auch im CSS nicht
   ineinanderlaufen. Wiederverwendet werden bewusst nur die Bausteine, die in
   beiden Listen dasselbe BEDEUTEN: die Score-Kachel (.opp-cand-scoretile samt
   Ampelstufen), der Verfuegbarkeitsbalken (.opp-cand-avail*) und der komplette
   Innenausbau der Detail-Kiste (.opp-cand-detail-*, .opp-cand-metric*,
   .opp-cand-gap*). Eine zweite Ampel mit eigenen Schwellen waere die sicherste
   Art, zwei Wahrheiten ueber dieselbe Zahl zu erzeugen.

   Layout-Vorbild ist der Compare-Abschnitt (PR1.150): Geschwister der beiden
   Kisten, `:empty { padding: 0 }` haelt den Idle-Zustand unsichtbar.
   ═══════════════════════════════════════════════════════════════════════════ */

.opp-alt-section { padding: 0 24px 20px; }
.opp-alt-section:empty { padding: 0; }

.opp-alt-head { margin-bottom: 12px; }

#opp-alt-start:disabled {
  /* Gleiche Begruendung wie bei #opp-cand-compare: `.btn` hat projektweit kein
     :disabled-Styling, und hier traegt der deaktivierte Zustand eine Aussage
     („diese Anfrage nennt kein Fachthema"). Bewusst NUR fuer diesen Button. */
  opacity: .45;
  cursor: not-allowed;
}
#opp-alt-start:disabled:hover { background: var(--bg-hover); }

.opp-alt-intro {
  margin: 0;
  /* --text-2, NICHT --text-3: letzteres traegt im Dark-Theme auf --bg-card nur
     3,87:1 und faellt damit unter AA (gemessen 28.07.). PR1.148 nutzt aus demselben
     Grund durchgehend --text-2 fuer lesbaren Sekundaertext. */
  color: var(--text-2);
  font-size: var(--fs-body);
  line-height: 1.5;
  max-width: 72ch;
}

.opp-alt-idle { padding: 2px 0 4px; }

/* ── Spezifitaets-Banner: gilt fuer die ANFRAGE, steht deshalb ueber der Liste ── */
.opp-alt-specificity {
  border: 1px solid var(--border);
  border-left-width: 3px;
  border-radius: var(--radius-lg);
  background: var(--bg-card);
  padding: 10px 14px;
  margin-bottom: 12px;
}
/* Die drei Stufen tragen KEINE Ampel-Semantik: „stark plattformgebunden" ist
   kein Fehler und kein Risiko, sondern eine Eigenschaft der Anfrage. Deshalb
   Akzentfarben statt Rot/Gelb/Gruen. */
.opp-alt-specificity.is-bound { border-left-color: var(--attention); }
.opp-alt-specificity.is-partly { border-left-color: var(--info); }
.opp-alt-specificity.is-neutral { border-left-color: var(--success); }

.opp-alt-specificity-head { display: flex; align-items: center; gap: 8px; }
.opp-alt-specificity-label { font-weight: 500; font-size: var(--fs-body); color: var(--text-1); }
.opp-alt-specificity-text {
  margin: 6px 0 0;
  color: var(--text-2);
  font-size: var(--fs-ui);
  line-height: 1.55;
}

.opp-alt-aspects { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.opp-alt-aspect {
  font-size: var(--fs-meta);
  padding: 2px 8px;
  border-radius: 999px;
  border: 1px solid var(--border);
  color: var(--text-2);
  background: var(--bg-hover);
}
.opp-alt-aspect.is-bound {
  border-color: color-mix(in srgb, var(--attention) 45%, transparent);
  color: var(--attention);
}
.opp-alt-aspect.is-transferable {
  border-color: color-mix(in srgb, var(--success) 45%, transparent);
  color: var(--success);
}

/* ── Zwei-Spalten-Raster: identisch zu .opp-cand-split, eigener Name ── */
.opp-alt-split {
  display: grid;
  grid-template-columns: minmax(320px, 4fr) minmax(360px, 6fr);
  gap: 14px;
  align-items: start;
}
@media (max-width: 1100px) {
  .opp-alt-split { grid-template-columns: 1fr; }
}

.opp-alt-list {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 8px;
  max-height: 560px;
  overflow-y: auto;
  overscroll-behavior: contain;
  min-width: 0;
}
.opp-alt-list::-webkit-scrollbar { width: 5px; }
.opp-alt-list::-webkit-scrollbar-track { background: transparent; }
.opp-alt-list::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }

.opp-alt-row-wrap {
  padding: 8px 10px;
  border-radius: var(--radius);
  cursor: pointer;
  border: 1px solid transparent;
}
.opp-alt-row-wrap:hover { background: var(--bg-hover); }
.opp-alt-row-wrap.is-detail-selected {
  background: var(--bg-hover);
  border-color: var(--accent);
}
.opp-alt-row-wrap:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* PR1.248 (#442) — Uebernahme als Pre-Staffing.
   Der Knopf sitzt IN der Zeile, die selbst ein Bedienelement ist: er braucht
   deshalb seinen eigenen sichtbaren Fokus, sonst ist beim Tabben nicht zu sehen,
   ob die Zeile oder der Knopf dran ist. */
.opp-alt-prestaff { margin-left: auto; flex-shrink: 0; }
.opp-alt-prestaff:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* Uebernommener Treffer. `--success` darf hier Textfarbe sein: die klassische Shell
   pflegt das Token je Theme AA-konform (dark #10b981 auf --bg-card 7.26:1, light
   #047857 auf weiss 5.48:1). Im Redesign ist das ANDERS — `--ad-green` ist dort eine
   Markenfarbe und kommt auf hellem Grund nur auf 2.09:1; `.crm-alt-done` nutzt
   deshalb bewusst `--text-2`. */
.opp-alt-row-wrap.is-prestaffed { border-color: var(--success); }
.opp-alt-prestaffed {
  margin-left: auto;
  flex-shrink: 0;
  color: var(--success);
  font-size: var(--fs-ui);
  font-weight: 500;
  white-space: nowrap;
}
.opp-alt-detail-actions {
  display: flex;
  justify-content: flex-end;
  padding: 8px 0 0;
}
.opp-alt-row {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

/* ── Das „{HS} Fokus"-Badge — die Kernaussage dieser Liste ──
   Es sagt NICHT „Mangel", sondern „Herkunft". Deshalb neutral-informativ
   (--info) und nicht warnend eingefaerbt. */
.opp-alt-focus-badge {
  flex: 0 0 auto;
  font-size: var(--fs-label);
  font-weight: 500;
  padding: 2px 8px;
  border-radius: 999px;
  white-space: nowrap;
  /* Dark: --info pur traegt auf dem eigenen 14 %-Tint nur 4,25:1 (gemessen 28.07.).
     Die Aufhellung gilt NUR hier — im Light-Theme liegt --info bereits bei 5,72:1,
     dieselbe Aufhellung fiele dort auf 3,05:1. Deshalb Basis hell, Light-Override
     zurueck auf pur (unten). */
  color: color-mix(in srgb, var(--info) 70%, white);
  background: color-mix(in srgb, var(--info) 14%, transparent);
  border: 1px solid color-mix(in srgb, var(--info) 38%, transparent);
}

.opp-alt-detail {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  min-width: 0;
  /* KEIN overflow — wie bei .opp-cand-detail: der Sticky-Kopf braucht einen
     durchgehenden Overflow bis zum Scroll-Container. */
}

.opp-alt-footer {
  margin-top: 10px;
  color: var(--text-2);   /* AA im Dark — siehe .opp-alt-intro */
  font-size: var(--fs-meta);
}
.opp-alt-footer:empty { margin-top: 0; }

/* ── Uebertragbarkeits-Sektion in der Detail-Kiste ── */
.opp-alt-feasibility { border-left: 2px solid color-mix(in srgb, var(--info) 40%, transparent); padding-left: 10px; }
.opp-alt-feasibility-stage,
.opp-alt-feasibility-verdict,
.opp-alt-feasibility-focus,
.opp-alt-feasibility-missing {
  margin: 4px 0 0;
  font-size: var(--fs-ui);
  line-height: 1.55;
  color: var(--text-2);
}
.opp-alt-feasibility-verdict { color: var(--text-1); }
.opp-alt-feasibility-missing { color: var(--text-2); }   /* AA im Dark — siehe .opp-alt-intro */

/* ── Fehlerzustand ── */
.opp-alt-error {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  padding: 10px 14px;
  border-radius: var(--radius-lg);
  border: 1px solid color-mix(in srgb, var(--danger) 35%, transparent);
  background: color-mix(in srgb, var(--danger) 8%, transparent);
}
.opp-alt-error-msg { color: var(--text-1); font-size: var(--fs-body); }

/* ── Der Verweis aus dem Empty-State der Hauptliste ──
   Ein <button>, kein <a>: er navigiert nicht, er springt im Dokument. Sieht aber
   wie ein Link aus, weil er sich so verhaelt. */
.opp-cand-empty-link {
  background: none;
  border: none;
  padding: 0;
  font: inherit;
  color: var(--accent);
  text-decoration: underline;
  cursor: pointer;
}
.opp-cand-empty-link:hover { color: var(--accent-hover, var(--accent)); }
.opp-cand-empty-link:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ── Light-Theme ──
   Die color-mix-Tints ueber `transparent` tragen im Hellen zu wenig Kontrast;
   dieselbe Asymmetrie wie im .opp-compare-*-Namensraum (Zeile ~11835). */
[data-theme="light"] .opp-alt-focus-badge {
  color: var(--info);   /* pur — im Hellen 5,72:1; die Dark-Aufhellung faellt hier auf 3,05:1 */
  background: color-mix(in srgb, var(--info) 10%, white);
  border-color: color-mix(in srgb, var(--info) 34%, white);
}
[data-theme="light"] .opp-alt-aspect {
  background: color-mix(in srgb, var(--text-3) 6%, white);
}
[data-theme="light"] .opp-alt-error {
  background: color-mix(in srgb, var(--danger) 7%, white);
  border-color: color-mix(in srgb, var(--danger) 30%, white);
}

/* ─────────────────────────────────────────
   RD1.03 #303 — Redesign-Liste: sortierbare Kopfzellen + Zeilen-Menü
   `.crm`-gescopt, damit die klassische Ansicht unberührt bleibt. Das schwebende Menü hängt
   an <body> (ausserhalb `.crm`) und trägt deshalb eine eigene Klasse statt eines Ancestors.
   Alle Farben über Theme-Tokens → Light + Dark automatisch.
   ───────────────────────────────────────── */
/* Der Knopf erbt die Kopfzeilen-Optik restlos (auch Kapitälchen und Laufweite, die `font`
   allein nicht mitbringt), damit sortierbare und feste Spalten gleich aussehen. Die Zelle
   behält ihre Polsterung; der Knopf füllt sie aus. */
.crm th.th-sort { white-space: nowrap; }
.crm th.th-sort .th-sort-btn {
  display: block;
  width: 100%;
  margin: 0;
  padding: 0;
  background: none;
  border: 0;
  cursor: pointer;
  user-select: none;
  font: inherit;
  color: inherit;
  text-align: inherit;
  text-transform: inherit;
  letter-spacing: inherit;
}
.crm th.th-sort .th-sort-btn:hover { color: var(--ad-violet); }
.crm th.th-sort .th-sort-btn:focus-visible {
  outline: 2px solid var(--ad-violet);
  outline-offset: 2px;
  border-radius: 2px;
}
.crm th.th-sort[aria-sort="ascending"] .th-sort-btn,
.crm th.th-sort[aria-sort="descending"] .th-sort-btn { color: var(--ad-violet); }

/* Zeilen-Menü-Knopf (⋯) — dezent, wird auf Zeilen-Hover/Fokus deutlicher. */
.crm .opp-row-menu,
.crm .project-row-menu {
  line-height: 1;
  padding: 2px 6px;
  border-radius: var(--radius);
  color: var(--text-3);
}
.crm tr:hover .opp-row-menu,
.crm .opp-row-menu:hover,
.crm .opp-row-menu:focus-visible,
.crm tr:hover .project-row-menu,
.crm .project-row-menu:hover,
.crm .project-row-menu:focus-visible { color: var(--text-1); }
.crm .opp-row-menu:focus-visible,
.crm .project-row-menu:focus-visible {
  outline: 2px solid var(--ad-violet);
  outline-offset: 1px;
}

/* Schwebendes Aktionsmenü im Redesign-Look (Violett statt Indigo als Akzent). */
.opp-action-menu.crm-action-menu,
.project-action-menu.crm-action-menu,
.status-change-menu.crm-action-menu {
  border-radius: 10px;
  box-shadow: 0 10px 30px rgba(15, 20, 30, .22);
}
.opp-action-menu.crm-action-menu .opp-action-item,
.project-action-menu.crm-action-menu .project-action-item,
.status-change-menu.crm-action-menu .status-change-item {
  font-size: var(--fs-body);
  padding: 9px 14px;
}
.opp-action-menu.crm-action-menu .opp-action-item:hover,
.opp-action-menu.crm-action-menu .opp-action-item:focus-visible,
.project-action-menu.crm-action-menu .project-action-item:hover,
.project-action-menu.crm-action-menu .project-action-item:focus-visible,
.status-change-menu.crm-action-menu .status-change-item:hover,
.status-change-menu.crm-action-menu .status-change-item:focus-visible {
  background: color-mix(in srgb, var(--ad-violet) 10%, transparent);
  outline: none;
}
/* PR1.221 #381 — der Fokusring des Auslösers folgt in dieser Shell dem Violett, wie schon
   beim Zeilen-Menü (.crm .opp-row-menu:focus-visible weiter oben). */
.crm .status-change-trigger:focus-visible {
  outline: 2px solid var(--ad-violet);
  outline-offset: 1px;
}
.crm .status-change-trigger:hover {
  background: color-mix(in srgb, var(--ad-violet) 10%, transparent);
}
.opp-action-menu.crm-action-menu .opp-action-item.opp-action-danger:hover,
.opp-action-menu.crm-action-menu .opp-action-item.opp-action-danger:focus-visible,
.project-action-menu.crm-action-menu .project-action-item.project-action-danger:hover,
.project-action-menu.crm-action-menu .project-action-item.project-action-danger:focus-visible {
  background: color-mix(in srgb, var(--danger) 10%, transparent);
}

/* ============================================================
   PR1.189 (#347) — In-App-Feedback (klassische Shell)
   ============================================================
   Das Formular bringt kein eigenes Farb- oder Abstandssystem mit: es benutzt
   durchgaengig die Tokens dieser Datei. Das Redesign-Gegenstueck steht in
   style-redesign.css und teilt sich dieselben Klassennamen — beide Zweige des
   Modals vergeben identische IDs und Klassen (Konvention 20).
   Keine eigene Animation: der Dialog erbt fadeIn/slideUp der Modal-Basis. */

.fb-form { display: flex; flex-direction: column; gap: 18px; }

.fb-meta {
  font-size: var(--fs-ui);
  color: var(--text-2);
  padding-bottom: 10px;
  border-bottom: 1px solid var(--border-light);
}

.fb-cats { border: 0; margin: 0; padding: 0; }
.fb-legend {
  font-size: var(--fs-body);
  font-weight: 500;
  color: var(--text-1);
  padding: 0;
  margin-bottom: 8px;
}
.fb-cat-row { display: flex; flex-wrap: wrap; gap: 8px; }

.fb-cat {
  flex: 1 1 auto;
  min-height: 40px;
  padding: 8px 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg-input);
  color: var(--text-2);
  font-size: var(--fs-body);
  font-weight: 500;
  cursor: pointer;
  transition: var(--transition);
}
.fb-cat:hover { border-color: var(--primary); color: var(--text-1); }
.fb-cat.is-active {
  border-color: var(--primary);
  background: var(--primary-glow);
  color: var(--text-1);
  font-weight: 600;
}

.fb-fields { display: flex; flex-direction: column; gap: 14px; }
.fb-field { display: flex; flex-direction: column; gap: 5px; }
.fb-label { font-size: var(--fs-body); font-weight: 500; color: var(--text-1); }
.fb-req { color: var(--danger); }
.fb-opt { font-weight: 400; color: var(--text-3); }
.fb-empty {
  margin: 0;
  padding: 14px;
  border: 1px dashed var(--border);
  border-radius: var(--radius);
  color: var(--text-3);
  font-size: var(--fs-body);
}

.fb-input {
  width: 100%;
  padding: 9px 11px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg-input);
  color: var(--text-1);
  font: inherit;
  font-size: var(--fs-body);
  resize: vertical;
}
.fb-input::placeholder { color: var(--text-3); }

.fb-shots { display: flex; flex-direction: column; gap: 8px; }
.fb-shots-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.fb-count { font-size: var(--fs-meta); color: var(--text-3); }
.fb-hint { margin: 0; font-size: var(--fs-ui); color: var(--warning); }
.fb-shots-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: stretch; }

.fb-drop {
  flex: 1 1 240px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  min-height: 52px;
  padding: 10px 14px;
  border: 1px dashed var(--border);
  border-radius: var(--radius);
  background: var(--bg-card2);
  color: var(--text-3);
  font-size: var(--fs-ui);
  cursor: pointer;
  transition: var(--transition);
}
.fb-drop:hover, .fb-drop.is-dragover {
  border-color: var(--primary);
  color: var(--text-2);
}
.fb-drop kbd {
  padding: 1px 5px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg-input);
  font-family: inherit;
  font-size: inherit;
}

.fb-btn-ghost {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 10px 16px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg-input);
  color: var(--text-1);
  font-size: var(--fs-body);
  font-weight: 500;
  cursor: pointer;
  transition: var(--transition);
}
.fb-btn-ghost:hover { border-color: var(--primary); }

.fb-strip { display: flex; flex-wrap: wrap; gap: 8px; }
.fb-strip:empty { display: none; }
.fb-thumb {
  position: relative;
  width: 108px;
  margin: 0;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--bg-card2);
}
.fb-thumb img { display: block; width: 100%; height: 68px; object-fit: cover; }
.fb-thumb figcaption {
  padding: 3px 6px;
  font-size: var(--fs-label);
  color: var(--text-3);
  text-align: center;
}
.fb-thumb-x {
  position: absolute;
  top: 4px;
  right: 4px;
  width: 22px;
  height: 22px;
  border: 0;
  border-radius: 50%;
  background: rgba(0, 0, 0, .65);
  color: #fff;
  font-size: var(--fs-label);
  line-height: 1;
  cursor: pointer;
}
.fb-thumb-x:hover { background: var(--danger); }

/* PR1.259 — Datenauszug aus dem Problem-Cockpit.
   Eine Textdatei hat keine Vorschau, deshalb eine Zeile statt einer Kachel:
   Name links, Groesse rechts, Entfernen ganz aussen. Der Knopf steht hier in
   der Zeile und nicht wie bei den Bildern ueberlagernd — es gibt nichts, was
   er verdecken duerfte. */
.fb-files { display: flex; flex-direction: column; gap: 6px; }
.fb-file {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg-card2);
}
.fb-file-name {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: var(--fs-ui);
  font-family: 'Fira Sans', system-ui, sans-serif; font-variant-numeric: tabular-nums;
}
.fb-file-size { flex: none; font-size: var(--fs-label); color: var(--text-3); }
.fb-file-x {
  flex: none;
  width: 22px;
  height: 22px;
  border: 0;
  border-radius: 50%;
  background: var(--bg-card);
  color: var(--text-2);
  font-size: var(--fs-label);
  line-height: 1;
  cursor: pointer;
}
.fb-file-x:hover { background: var(--danger); color: #fff; }

.fb-note { margin: 0; font-size: var(--fs-meta); color: var(--text-3); }

/* PR1.330 (#542) — Board-Abkuerzung im Kopf, Foto-Sichtbarkeit, Bestaetigung.
   Alles liegt in .fb-form und erbt damit im Redesign dieselbe Token-Bruecke
   (style-redesign.css). Keine Animation: der Dialog wird selten und gezielt
   benutzt, die Bestaetigung soll sofort dastehen. */
.fb-meta {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 4px 12px;
}
.fb-link {
  border: 0;
  background: transparent;
  padding: 0;
  font: inherit;
  font-size: var(--fs-ui);
  /* Textfarbe statt --primary: Blau auf dunklem Grund lag bei 3,2–4,1:1 (AA verfehlt).
     Als Link erkennbar bleibt er ueber die Unterstreichung. */
  color: var(--text-1);
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
}
.fb-link:hover { text-decoration-thickness: 2px; }

.fb-check {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 4px;
  font-size: var(--fs-body);
  color: var(--text-1);
  cursor: pointer;
}
.fb-check input {
  width: 16px;
  height: 16px;
  margin: 0;
  flex: none;
  accent-color: var(--primary);
  cursor: pointer;
}
/* Der Erklaersatz gehoert zum Haekchen — eingerueckt auf die Hoehe des Labels. */
.fb-check + .fb-note { padding-left: 24px; }

.fb-done {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 20px 8px 8px;
  text-align: center;
}
.fb-done-mark {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 2px solid var(--primary);
  border-radius: 50%;
  color: var(--primary);
  font-size: var(--fs-title);
  line-height: 1;
}
.fb-done-title { margin: 0; font-size: var(--fs-section); color: var(--text-1); }
/* Nach dem Absenden wird der Fuss (Abbrechen/Einreichen) per `hidden` ausgeblendet.
   Die Fuss-Container beider Shells setzen selbst `display:flex` und schlagen damit
   das [hidden] des Browsers — ohne diese Regel stuende „Wird gesendet …" unter der
   Bestaetigung. */
.fb-overlay .modal-footer[hidden],
.fb-veil .modal-foot[hidden] { display: none; }
.fb-done-text { margin: 0; max-width: 42ch; font-size: var(--fs-body); color: var(--text-2); }
.fb-done-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  margin-top: 12px;
}

.fb-error {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 11px 13px;
  border: 1px solid var(--danger);
  border-radius: var(--radius);
  background: color-mix(in srgb, var(--danger) 12%, transparent);
  color: var(--text-1);
  font-size: var(--fs-body);
}
.fb-error[hidden] { display: none; }

.fb-foot { display: flex; align-items: center; gap: 12px; }
#fb-reason { font-size: var(--fs-meta); color: var(--text-3); }

/* Der Einreichen-Knopf ist die meiste Zeit deaktiviert (Screenshot-Pflicht) und
   muss das auch zeigen. Ohne diese Regel gewinnt .btn-primary und der Knopf sah
   voll klickbar aus — ein toter Klick ohne jede Rueckmeldung. Die Begruendung
   darunter sagt dann auch, was noch fehlt. */
.fb-btn:disabled,
.fb-btn[aria-disabled="true"] {
  opacity: .45;
  cursor: not-allowed;
  box-shadow: none;
}

.fb-close {
  border: 0;
  background: transparent;
  color: var(--text-3);
  font-size: var(--fs-body);
  cursor: pointer;
  padding: 4px 8px;
  border-radius: var(--radius-sm);
}
.fb-close:hover { color: var(--text-1); background: var(--bg-hover); }

/* Sichtbarer Fokus in beiden Shells — ohne ihn ist der Dialog ohne Maus
   unbenutzbar, weil man die aktuelle Position nicht sieht. */
.fb-form :focus-visible,
.fb-foot :focus-visible,
.fb-close:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}

@media (max-width: 560px) {
  .fb-cat-row { flex-direction: column; }
  .fb-shots-actions { flex-direction: column; }
}

/* ============================================================
   PR1.191 (#350) — Auswahl-Baustein (crm-multiselect.js)
   ============================================================
   Struktur und Abstaende stehen hier bewusst UN-gescopt: die Datei wird in beiden
   Shells global geladen (index.html:27), damit greift dieses Layout auch im
   Redesign. style-redesign.css uebersetzt darueber nur noch die Designsprache
   (Token-Mapping, kein zweites Layout) — ein Gehirn, zwei Gesichter, Konvention 20.

   Kein `transition`, kein `@keyframes`: Portfolio und Hyperscaler werden dutzende
   Male am Tag ueber die Tastatur bedient. Konvention 22 und DESIGN.md-Prinzip 2
   verlangen hier ausdruecklich keine Animation.

   Wiederverwendet statt neu erfunden: `.ms-list` traegt zusaetzlich
   `.autocomplete-dropdown` (style.css:3099), `.ms-option` zusaetzlich
   `.autocomplete-item` (:3119), `.ms-chip` zusaetzlich `.chip` (:2579).
   Hier steht nur, was darueber hinaus noetig ist. */

.ms { position: relative; }

/* ── Chips oberhalb des Feldes ── */
.ms-chips { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 6px; }
.ms-chips:empty { display: none; }
.ms-chip { gap: 4px; }

/* BF-40 (#439) — Der Chip, den der naechste Ruecktasten-Anschlag entfernt. Bis dahin
   loeschte der erste Anschlag im leeren Feld sofort und lautlos; jetzt markiert er erst.

   Der zweite Rahmen liegt INNEN (box-shadow inset) statt als breiterer border: so
   verdoppelt sich die sichtbare Staerke, ohne dass der Chip einen Pixel waechst — ein
   Layoutsprung mitten im Tippen waere genau die Bewegung, die dieses Feld nicht haben
   darf (Motion-Budget null, siehe Kopf von crm-multiselect.js). Der Text geht auf die
   volle Vordergrundfarbe, damit die Marke nicht allein an der Farbe haengt. */
.ms-chip.is-armed {
  /* Die Farbe liegt in einer eigenen Eigenschaft, damit die Redesign-Shell im Dunkeln
     nur SIE umschalten muss (style-redesign.css) und nicht den ganzen box-shadow noch
     einmal hinschreibt — das waere ein zweiter roher px-Wert und damit ein Ausschlag
     im ui-craft-Ratchet (Konvention 21). */
  --ms-armed: var(--danger);
  border-color: var(--ms-armed);
  box-shadow: inset 0 0 0 1px var(--ms-armed);
  color: var(--text-1);
}

/* Echter <button>, kein role="button" — Fokus-Ratchet RD1.10 und ohne Maus bedienbar. */
.ms-chip-x {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 14px;
  height: 14px;
  padding: 0;
  border: none;
  border-radius: 99px;
  background: transparent;
  color: var(--text-3, var(--text-2));
  font-size: var(--fs-body);
  line-height: 1;
  cursor: pointer;
}
.ms-chip-x:hover { background: var(--danger); color: #fff; }
.ms-chip-x:focus-visible { outline: 2px solid var(--primary); outline-offset: 1px; }

/* Das Kreuz misst 14 px — als Ziel zu klein, auch mit der Maus. Die Trefferflaeche
   waechst hier auf 24 px, ohne dass sich am Aussehen oder am Layout etwas aendert
   (das Chip bliebe sonst unnoetig breit). */
.ms-chip-x::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 24px;
  height: 24px;
  transform: translate(-50%, -50%);
}

/* ── Eingabefeld + Liste ── */
.ms-field { position: relative; }

/* Grundoptik des Feldes mit niedriger Spezifitaet (0,1,0): steht der Baustein in einem
   Formular, gewinnt dessen `.form-group input` (0,1,1) und der Baustein fuegt sich ein.
   Steht er allein, sieht er trotzdem wie ein Feld aus statt wie nacktes HTML. */
.ms-input {
  width: 100%;
  box-sizing: border-box;
  padding: 7px 10px;
  background: var(--bg-input, var(--bg-card));
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text-1);
  font-size: var(--fs-body);
}
.ms-input:focus-visible { outline: 2px solid var(--primary); outline-offset: 1px; }

/* Die Liste haengt absolut, erbt ihre Textfarbe aber vom DOM-Elternteil — ohne diese
   Zeile nimmt sie die Farbe des umgebenden Blocks an und wird auf ihrem eigenen
   Kartengrund unlesbar (heller Text auf heller Liste). */
.ms-list { max-height: 320px; color: var(--text-1); }

.ms-group + .ms-group { border-top: 1px solid var(--border); }
.ms-group-header {
  font-size: var(--fs-meta); /* PR1.438 — 12px/600, sentence case (no uppercase kicker) */
  font-weight: 500;
  color: var(--text-3, var(--text-2));
  padding: 8px 12px 4px;
  background: var(--bg-card2, var(--bg-card));
  position: sticky;
  top: 0;
}

/* Die Option traegt `.autocomplete-item` — hier nur Haken-Spalte und Zustand. */
.ms-option { gap: 8px; }
.ms-option-mark { width: 12px; flex-shrink: 0; color: var(--primary); font-weight: 600; }
.ms-option-label { flex: 1; min-width: 0; }
.ms-option.is-on .ms-option-label { color: var(--text-1); font-weight: 500; }
.ms-option:focus-visible { outline: 2px solid var(--primary); outline-offset: -2px; }

.ms-hint { border-top: 1px solid var(--border); }

/* PR1.418 #653 — Anlege-Zeile am Listenende: ein neuer Kunde ist ein bewusster Schritt. */
.ms-option.ms-create { border-top: 1px solid var(--border); }
.ms-option.ms-create .ms-option-mark,
.ms-option.ms-create .ms-option-label { color: var(--primary); font-weight: 600; }

/* PR1.418 #653 — Kundenauswahl: Feld und Knopf „Neuen Kunden anlegen" in einer Zeile,
   schmal untereinander. Opp-Anlage und Jira-Pruef-Tabelle teilen das Markup. */
.account-picker { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 6px 8px; }
.account-picker-field { flex: 1 1 220px; min-width: 0; }
.account-picker-new { flex: 0 0 auto; white-space: nowrap; }
.jira-review-table .ju-customer { min-width: 260px; }
.ju-customer-hint { margin-top: 4px; font-size: var(--fs-ui); line-height: 1.35; color: var(--text-2); }

/* ── Die drei Zustaende ── */
.ms-state { display: flex; flex-direction: column; gap: 6px; padding: 14px 12px; }
.ms-state-text { font-size: var(--fs-ui); color: var(--text-2); }
.ms-state-next { font-size: var(--fs-meta); color: var(--text-3, var(--text-2)); }
.ms-error .ms-state-text { color: var(--danger); }

/* Statisch, nicht pulsierend — ein Skelett-Puls waere Motion auf einem taeglichen Weg. */
.ms-skeleton { display: block; height: 10px; border-radius: var(--radius-sm); background: var(--bg-hover); }
.ms-skeleton:nth-of-type(2) { width: 72%; }
.ms-skeleton:nth-of-type(3) { width: 54%; }

.ms-retry {
  align-self: flex-start;
  padding: 4px 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg-hover);
  color: var(--text-1);
  font-size: var(--fs-meta);
  cursor: pointer;
}
.ms-retry:focus-visible { outline: 2px solid var(--primary); outline-offset: 1px; }

/* ── Hinweiszeile am Feld (Slot fuer PR1.194: „uebernommen als …") ──
   Sie steht UEBER dem Feld — unterhalb laege sie unter der offenen Liste, also
   ausgerechnet dann verdeckt, wenn sie erscheint (Begruendung im Modul). */
.ms-notice { margin: 0 0 6px; font-size: var(--fs-meta); color: var(--text-2); }

/* ── Pillen-Variante fuer kurze Listen (Hyperscaler: 6 Werte) ── */
.ms-pill-row { display: flex; flex-wrap: wrap; gap: 6px; }
.ms-pill-group + .ms-pill-group { margin-top: 8px; }
.ms-pill {
  padding: 4px 11px;
  border: 1px solid var(--border);
  border-radius: 99px;
  background: var(--bg-hover);
  color: var(--text-2);
  font-size: var(--fs-meta);
  font-weight: 500;
  cursor: pointer;
}
.ms-pill:hover:not(:disabled) { border-color: var(--primary); color: var(--text-1); }
.ms-pill.is-on { background: var(--primary); border-color: var(--primary); color: #fff; }
.ms-pill:disabled { opacity: .5; cursor: default; }
.ms-pill:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
/* PR1.430 (#675) — Hyperscaler-Auswahl: Logo + Name, Knopf 40 px hoch (Bild „Logo-Groessen").
   Gewaehlt = getoenter Grund + kraeftiger Rand statt Vollton: Logos mit dunkler Schrift
   (aws, STACKIT) blieben auf Vollton-Blau unlesbar. Keine Animation: Masken taeglich genutzt. */
.ms-pill--logo {
  display: inline-flex; align-items: center;
  min-height: 40px; padding: 4px 14px 4px 12px;
  border-radius: 8px;
  background: transparent;
}
.ms-pill--logo .hs-logo { gap: 8px; }
.ms-pill--logo .hs-logo-name { font-size: var(--fs-body); color: inherit; }
.ms-pill--logo.is-on {
  background: color-mix(in srgb, var(--primary) 14%, transparent);
  border-color: var(--primary);
  box-shadow: inset 0 0 0 1px var(--primary);
  color: var(--text-1);
}
.filter-chip .hs-logo-name { font-size: inherit; color: inherit; }
/* Gewaehlter Hyperscaler-Filter: getoent statt Vollton — dunkelblaue Logos (Azure, OVH)
   verschwaenden auf dem Blau des aktiven Chips. Gleiche Sprache wie die Logo-Knoepfe oben. */
.filter-chip.active:has(.hs-logo) {
  background: color-mix(in srgb, var(--primary) 14%, transparent);
  border-color: var(--primary);
  box-shadow: inset 0 0 0 1px var(--primary);
  color: var(--text-1);
}

/* ============================================================
   PR1.196 (#355) — Skill-Auswahl mit Bewertung
   ============================================================
   Ein Auswahlfeld oben, darunter je gewaehltem Skill eine Bewertungszeile.
   Bewusst NICHT .crm-gescopt: beide Shells rendern dieselben Bausteine
   (Konvention 20, wie die Schritt-Huelle darunter).

   Der Name traegt `min-width: 0`, weil er in einem Grid-Track liegt: ohne das
   waere seine min-content-Breite der Boden des Tracks, und ein langer Skill-Name
   („Platform Integration - OpenShift") schoebe den Bewertungs-Waehler aus der
   Karte statt zu kuerzen. Dieselbe Falle wie bei den Rollen-Karten. */
.sre-ratings:empty { display: none; }
.sre-ratings { margin-top: 8px; }
.sre-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(96px, 118px);
  gap: 8px;
  font-size: var(--fs-label);
  font-weight: 500;
  color: var(--text-3, var(--text-2));
  padding-bottom: 4px;
}
.sre-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(96px, 118px);
  gap: 8px;
  align-items: center;
  padding: 5px 0;
  border-top: 1px solid var(--border);
}
.sre-name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: var(--fs-ui);
  color: var(--text-1);
}
.sre-level { width: 100%; }
/* „keine Bewertung" ist ein gueltiger Zustand, kein Fehler — der Waehler tritt
   dafuer nur zurueck, statt sich zu faerben.
   PR1.203 (#362): Der Rahmen muss ausdruecklich zurueckgesetzt werden. Die aeltere
   HF3.26-Regel `.skill-rating-level.skill-rating-unknown` (oben, ~Z. 7670) faerbt ihn
   orange — als Warnung gedacht, als der unbewertete Eintrag die Ausnahme war. Seit der
   Zusammenlegung skills[] → skillsRated[] ist er der NORMALFALL: jeder Name, der bisher
   nur im flachen Feld stand, kommt ohne Zahl herein. Eine Liste voller oranger Rahmen
   liest sich als „hier ist alles falsch". */
.sre-level.skill-rating-unknown {
  color: var(--text-2);
  border-color: var(--border);
}
/* PR1.453 — same calm look on the list face (the class stays on the hidden carrier). */
.sre-level.skill-rating-unknown + .cs .cs-field { color: var(--text-2); }

/* ── PR1.203 (#362) — Herkunft, Entfernen, Leerzustand ─────────────────────
   Die dritte Spalte gibt es nur, wo der Entfernen-Knopf gebraucht wird: `.sre-head`
   und `.sre-row` teilen sich alle vier Verwender, und eine leere Spalte in der
   Opp-Maske und den Rollen-Karten waere der Preis fuer eine Bequemlichkeit hier. */
.sre-ratings.sre-with-x .sre-head,
.sre-ratings.sre-with-x .sre-row {
  grid-template-columns: minmax(0, 1fr) minmax(96px, 118px) auto;
}
/* Das Abzeichen sitzt IN der Namenszelle und traegt seine Bedeutung im `title` der
   Zelle plus einem .sr-only-Text — ein Glyph allein ist keine Information. */
.sre-origin {
  margin-right: 5px;
  font-size: var(--fs-meta);
  opacity: .75;
}
.sre-x {
  background: none;
  border: 1px solid transparent;
  border-radius: 4px;
  color: var(--text-2);
  cursor: pointer;
  font-size: var(--fs-body);
  line-height: 1;
  padding: 2px 6px;
}
.sre-x:hover { color: var(--danger, var(--text-1)); border-color: var(--border); }
/* Die Maske wird taeglich ohne Maus bedient. Der Ring ist hier kein Zubehoer. */
.sre-x:focus-visible,
.sre-level:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 1px;
}
/* Ein ersatzlos leerer Bereich saehe in der Mitarbeitermaske aus wie ein Fehler —
   dort ist dieses Feld der einzige Skill-Eingang. */
.sre-empty {
  margin: 6px 0 0;
  font-size: var(--fs-meta);
  color: var(--text-2);
}

/* ── PR1.503 — Chip-Modus der Opp-Maske ───────────────────────────────────
   Skills als Chips, die Stufe nur bei Bedarf als kleiner Balken im Chip.
   Die Chips des Auswahlfeldes treten zurueck, sonst stuende jeder Skill doppelt da;
   Entfernen laeuft ueber das Kreuz am Stufen-Chip. Keine Bewegung: taeglich genutzte
   Maske (Konvention 22). Ungescoped wie die uebrigen .sre-Regeln — beide Shells. */
.sre--chips .ms-chips { display: none; }
.sre-chips-hint {
  margin: 0 0 6px;
  font-size: var(--fs-meta);
  color: var(--text-2);
}
.sre-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.sre-chip {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  max-width: 100%;
  padding: 0 2px 0 0;
}
.sre-chip.is-open { border-color: var(--primary); }
.sre-chip-name {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  max-width: 260px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  background: none;
  border: 0;
  border-radius: 4px;
  color: inherit;
  font: inherit;
  cursor: pointer;
  padding: 2px 4px 2px 8px;
}
.sre-chip-x {
  background: none;
  border: 0;
  border-radius: 4px;
  color: var(--text-2);
  cursor: pointer;
  line-height: 1;
  padding: 2px 4px;
}
.sre-chip-x:hover { color: var(--danger, var(--text-1)); }
.sre-bar {
  display: inline-flex;
  gap: 2px;
  flex: none;
}
.sre-bar-step {
  display: block;
  width: 3px;
  height: 10px;
  border-radius: 1px;
  background: var(--border);
}
.sre-bar-step.is-on { background: var(--primary); }
.sre-pick {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
  margin-top: 8px;
  padding: 6px 8px;
  border: 1px solid var(--border);
  border-radius: 6px;
}
.sre-pick-label {
  margin-right: 4px;
  font-size: var(--fs-meta);
  color: var(--text-2);
}
.sre-pick-label strong { color: var(--text-1); font-weight: 600; }
.sre-pick-btn {
  min-width: 32px;
  padding: 3px 8px;
  border: 1px solid var(--border);
  border-radius: 4px;
  background: none;
  color: var(--text-1);
  font: inherit;
  font-size: var(--fs-ui);
  cursor: pointer;
}
.sre-pick-btn:hover { border-color: var(--primary); }
.sre-pick-btn[aria-pressed="true"] {
  background: var(--primary);
  border-color: var(--primary);
  color: var(--bg-card, #fff);
}
.sre-chip-name:focus-visible,
.sre-chip-x:focus-visible,
.sre-pick-btn:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 1px;
}

/* Herkunfts-Zeichen im Chip der Detailansicht + Legende darunter. Nur die klassische
   Shell braucht das; das Redesign kommt mit dem vorhandenen `.chip` aus. */
.chip__src {
  margin-right: 4px;
  font-size: var(--fs-body);
  opacity: .7;
}
.emp-card-meta {
  display: block;
  margin: -4px 0 8px;
  font-size: var(--fs-label);
  color: var(--text-2);
}

/* ============================================================
   PR1.190 (#349) — Schritt-Huelle fuer Formulare
   ============================================================
   Layout und Abstaende stehen NUR hier und sind bewusst NICHT .crm-gescopt —
   damit greifen sie in beiden Shells (ein Gehirn, zwei Gesichter, Konvention 20).
   style-redesign.css wiederholt dieses Layout nicht, sondern uebersetzt im
   .crm-Scope lediglich die hier benutzten Legacy-Tokens.

   Die Maximalbreite ist der eigentliche Zweck: die heutige Opp-Maske gibt einem
   einzeiligen Namensfeld 1224 px. Als rem statt px, damit sie mit der
   Schriftgroesse mitwaechst. */
.fw {
    /* 19rem statt 15rem (Optik-Abnahme 07.08.2026, PR1.197 #356). Gemessen statt
       geschaetzt: das laengste Label „Portfolio und Hyperscaler" ist 168 px breit,
       dazu Haken (1.25rem), zwei Abstaende (je 0.5rem), Innenabstand (2x 0.75rem)
       und das Etikett „optional" (54 px) — zusammen 280 px = 18.7rem. Bei 15rem
       (225 px) brach als einzige Zeile dieses Label um, und „optional" stand dann
       mittig neben einem doppelt hohen Block statt in der Spalte der anderen. */
    --fw-rail-w: 19rem;
    --fw-gap: 1.5rem;
    --fw-max: 45rem;
    display: grid;
    grid-template-columns: minmax(10rem, var(--fw-rail-w)) minmax(0, 1fr);
    gap: var(--fw-gap);
    align-items: start;
}

/* Die Leiste bleibt beim Scrollen stehen — sie ist die Landkarte des Formulars
   und nuetzt nichts, wenn sie oben aus dem Bild laeuft. */
.fw-rail {
    display: flex;
    flex-direction: column;
    gap: 2px;
    position: sticky;
    top: 0;
}

.fw-step {
    display: grid;
    grid-template-columns: 1.25rem 1fr auto;
    align-items: center;
    gap: 0.5rem;
    width: 100%;
    padding: 0.5rem 0.75rem;
    border: 1px solid transparent;
    border-radius: var(--radius-sm);
    background: none;
    color: var(--text-secondary);
    font: inherit;
    font-size: var(--fs-body);
    text-align: left;
    cursor: pointer;
    transition: background var(--transition), color var(--transition);
}

.fw-step:hover { background: var(--bg-hover); color: var(--text-primary); }

/* Der aktive Schritt traegt eine Kante statt nur einer Farbe — Farbe allein
   waere fuer Rot-Gruen-Sehschwaeche kein verlaesslicher Unterschied. */
.fw-step.active {
    background: var(--bg-card2, var(--bg-hover));
    border-color: var(--border-light);
    color: var(--text-primary);
    font-weight: 600;
}

.fw-step-mark {
    width: 1.25rem;
    text-align: center;
    color: var(--success, var(--primary));
    font-weight: 600;
}

.fw-step-label { overflow-wrap: anywhere; }

.fw-step-opt {
    font-size: var(--fs-meta);
    color: var(--text-muted, var(--text-secondary));
    font-weight: 400;
}

.fw-main {
    max-width: var(--fw-max);
    min-width: 0;
    margin-inline: auto;
    width: 100%;
}

/* ── Die Team-Tabelle darf aus der Lesespalte ausbrechen ────────────────────
   `--fw-max` (45rem) ist die Lesebreite fuer FORMULARFELDER und dort richtig.
   Die Team-Tabelle ist kein Formularfeld, sondern ein Datengitter mit elf
   Spalten und einer Mindestbreite von 1180 px (siehe #pm-team-container weiter
   oben, PR1.211/PR1.212). In der Projektmaske traf beides aufeinander: die
   Spalte war 657 px breit, die Tabelle 1180 px, und rechts daneben standen
   ~590 px ungenutzt — gemessen am 12.08.2026 bei 1325 px Fensterbreite. Sichtbar
   waren fuenf von elf Spalten; `verbraucht (PT)` und `Abweichung`, also genau die
   zwei, die PR1.212 eingefuehrt hat, lagen hinter dem Scrollrand.

   Der Deckel faellt deshalb fuer die Rasterspalte, in der die Tabelle steht — und
   wird fuer alles darin sofort wieder gesetzt, ausser fuer den Block, der die
   Tabelle traegt. Ergebnis: Formularfelder behalten ihre 45rem, die Tabelle
   bekommt die volle Spalte (944 px statt 657), und sichtbar sind alle acht
   Datenspalten bis `Abweichung`. `Tagessatz`, `Ramp` und `Aktionen` scrollen
   weiterhin — die Mindestbreiten aus PR1.211 bleiben unangetastet, sie halten
   die Zahlenspalten lesbar und sind bewusst gesetzt.

   Bewusst NICHT `.crm`-gescopt: dieselbe Regel bedient beide Shells
   (Konvention 20, Muster PR1.197). `:has()` steht in dieser Datei bereits im
   Einsatz (`#opp-form .form-group:has([data-suggested="1"])`).

   ⚠️ Die Ruecknahme greift bewusst auf JEDER Ebene, nicht nur bei den direkten
   Kindern des Panels. Erster Versuch war `.fw-panel > *:not(:has(…))` — der ging
   daneben: die Projektmaske haengt ihre Feldbloecke in einen namenlosen Wrapper,
   das Panel hat nur zwei Kinder (Ueberschrift + Wrapper), und weil der Wrapper die
   Tabelle enthaelt, war er ausgenommen — und mit ihm jedes Feld darin. Auffallen
   konnte das nur im Bild; eine Messung ueber die direkten Kinder sah sauber aus.
   Die drei `:not()` lesen sich deshalb als: ausgenommen ist der Tabellenblock
   selbst, alles darin, und jeder Vorfahr auf dem Weg dorthin. Alles andere wird
   gedeckelt, egal wie tief es haengt. */
.fw-main:has(#pm-team-container) { max-width: none; }
.fw-main:has(#pm-team-container) .fw-panel
    :not(#pm-team-section):not(:has(#pm-team-section)):not(#pm-team-section *) {
    max-width: var(--fw-max);
}

/* BF-19 #398 — dieselbe Lage in der Opportunity-Maske, und dieselbe Antwort.
   Sie ist seit PR1.197 (#356) ebenfalls eine Schrittmaske: `#opp-team-container` haengt in
   `.fw-main > .fw-panel`, und der Deckel von 45rem gilt dort genauso. Ohne diese Ausnahme
   stuende die 900 px breite Tabelle in einer 720-px-Spalte und scrollte bei JEDER
   Fensterbreite — der Scroll-Rahmen aus diesem Ticket haette die Maske bei breitem Fenster
   schlechter gemacht als vorher, statt sie bei schmalem zu retten.

   Anders als bei der Projektmaske gibt es hier keinen Wrapper wie #pm-team-section: der
   Container ist direktes Kind seines Panels, die Ausnahme kann sich unmittelbar auf ihn
   beziehen. Die drei `:not()` sind trotzdem Pflicht und in derselben Lesart wie oben —
   ausgenommen ist der Container selbst, alles darin und jeder Vorfahr auf dem Weg dorthin.

   `:has()` findet den Container auch in den sechs versteckten Schritten. Das ist gewollt:
   der Deckel faellt fuer die ganze Maske, und die Ruecknahme setzt ihn fuer jedes
   Formularfeld sofort wieder — sonst haetten die Felder je nach Schritt eine andere Breite. */
.fw-main:has(#opp-team-container) { max-width: none; }
.fw-main:has(#opp-team-container) .fw-panel
    :not(#opp-team-container):not(:has(#opp-team-container)):not(#opp-team-container *) {
    max-width: var(--fw-max);
}

/* Die Antwort auf „was fehlt noch?" steht ueber dem Formular, nicht unter dem
   Speichern-Knopf. */
.fw-progress {
    margin: 0 0 1rem;
    color: var(--text-secondary);
    font-size: var(--fs-body);
}

.fw-progress-num { font-weight: 600; color: var(--text-primary); }

.fw-panel { min-width: 0; }
.fw-panel[hidden] { display: none; }

/* PR1.200 #359 — Der Abstand zwischen zwei Bloecken eines Schritts kommt aus dem
   Stylesheet statt aus einem Inline-Style am Element. Vorher trug fast jede
   Feldgruppe ihr eigenes margin-bottom (10, 14 oder 18px, je nach Alter der
   Stelle) — der Rhythmus eines Schritts haing damit davon ab, wer ihn zuletzt
   angefasst hatte. `.form-section-label` bleibt ausgenommen: es ist eine
   Zwischenueberschrift und haelt bewusst enger an seinen Block. */
.fw-panel > .form-group,
.fw-panel > .form-grid {
    margin-bottom: var(--form-block-gap);
}
.fw-panel > :last-child { margin-bottom: 0; }

/* ── Eingabefelder in den Schritt-Panels ────────────────────────────────────
   Die Masken bauen ihre Felder ueber lokale `field()`-Helfer als blankes
   `<label><span>…</span><input></label>` — ohne `.form-group`. Die Regel ab
   Zeile 1810 traf sie deshalb NICHT, und was man sah, war das nackte
   Browser-Bedienelement: `border: 2px inset`, `border-radius: 0`,
   `padding: 0`, 20 px hoch (gemessen live am 12.08.2026). Neben den
   gestalteten Bausteinen derselben Maske — Chips, Auswahl, Schrittleiste —
   sah das aus wie ein Formular aus einer anderen Zeit.

   Bewusst hier und NICHT `.crm`-gescopt: dieselbe Regel bedient beide Shells
   (Konvention 20), und `.crm .fw` uebersetzt die benutzten Legacy-Tokens
   bereits — deshalb kommt in style-redesign.css keine Zeile dazu und der
   ui-craft-Ratchet (raw-px/raw-hex zaehlen nur dort) bleibt unberuehrt.
   Dieselbe Begruendung wie beim PR1.197-Block weiter unten.

   Werte absichtlich identisch zu `.form-group input` — die zwei Schreibweisen
   sollen nicht zwei Aussehen ergeben. */
.fw-panel input:not([type="checkbox"]):not([type="radio"]),
.fw-panel select,
.fw-panel textarea {
    width: 100%;
    background: var(--bg-input);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    color: var(--text-1);
    padding: 8px 12px;
    font-size: var(--fs-body);
    font-family: inherit;
    outline: none;
    transition: border-color var(--transition), box-shadow var(--transition);
}

/* Das Suchfeld von `crm-multiselect` faellt bewusst MIT unter die Regel, obwohl
   es sich selbst schon gestaltet hatte (31 px hoch, 7/10 Innenabstand, gemessen
   live). Der Unterschied waere sonst zwei Feldhoehen untereinander in derselben
   Maske gewesen — 33 px fuer Text und Auswahl, 31 px fuer die Kundenauswahl
   direkt darueber. Seine eigenen Werte entstanden zu einer Zeit, als die
   Nachbarfelder ueberhaupt keine hatten; es gibt also nichts zu erhalten.
   Randlose Bedienelemente (Kaestchen, Radios) sind oben ausgenommen — die haben
   mit Feldgeometrie nichts zu tun. */

.fw-panel input:not([type="checkbox"]):not([type="radio"]):hover,
.fw-panel select:hover,
.fw-panel textarea:hover {
    border-color: var(--text-3);
}

.fw-panel input:not([type="checkbox"]):not([type="radio"]):focus,
.fw-panel select:focus,
.fw-panel textarea:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px var(--primary-glow);
}

.fw-panel input::placeholder,
.fw-panel textarea::placeholder { color: var(--text-3); }

.fw-panel textarea {
    resize: vertical;
    min-height: 80px;
}

/* Der Pfeil des Auswahlfeldes bleibt der des Systems — hier stand kurzzeitig ein
   selbst gezeichneter aus zwei `currentColor`-Verlaeufen, und er ist bewusst
   wieder rausgeflogen: `.crm .modal-overlay .modal select` in
   style-redesign-modals.css (0,3,1) setzt `background` als Kurzform und loescht
   damit jedes `background-image` einer schwaecheren Regel. Der Pfeil waere also
   ausgerechnet in der Redesign-Maske unsichtbar gewesen. Ihn zu gewinnen haette
   entweder eine `.crm`-Regel in dieser Datei gebraucht (bricht die
   Shell-Trennung) oder einen Block in style-redesign.css mit rohen px-Werten
   (hebt den ui-craft-Ratchet). Beides zu teuer fuer einen Pfeil — zumal
   `color-scheme` oben den Systempfeil ohnehin im richtigen Schema zeichnet,
   was der eigentliche Befund war. */

.fw-step:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
}

/* Unter der Breite kostet die Leiste mehr Platz als sie einspart — sie legt sich
   quer ueber das Formular. */
@media (max-width: 720px) {
    .fw { grid-template-columns: 1fr; }
    .fw-rail {
        position: static;
        flex-direction: row;
        flex-wrap: wrap;
    }
    .fw-step { width: auto; }
}

/* ── PR1.457 #703 — Seitenspalte, „+ Feld"-Chips, Zurueck ────────────────────
   Opp- und Projektmaske in vier Schritten (Prototyp E). Bewusst NICHT .crm-gescopt:
   dieselben Regeln bedienen beide Shells (Konvention 20); im .crm-Scope uebersetzt
   style-redesign.css nur Tokens. Bewegung allein ueber motion.js (.mo-*), hier keine.

   Raster mit Seitenspalte: Leiste | Formular | Zusammenfassung. Die Leiste wird
   schmaler (die neuen Schrittnamen sind kurz, der Untertitel steht in eigener Zeile),
   damit das Formular bei 1280 px seine Lesebreite behaelt. */
.fw.has-aside {
    --fw-rail-w: 14rem;
    --fw-aside-w: 17rem;
    grid-template-columns: minmax(10rem, var(--fw-rail-w)) minmax(0, 1fr) minmax(13rem, var(--fw-aside-w));
}
/* Die Textzeile „X von N" sagt dasselbe wie der Ring — mit Seitenspalte faellt sie weg. */
.fw.has-aside .fw-main > .fw-progress { display: none; }

.fw-aside {
    position: sticky;
    top: 0;
    min-width: 0;
    background: var(--bg-card2);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 1rem;
    font-size: var(--fs-body);
    color: var(--text-secondary);
}
/* PR1.505 #775 — Seitenspalte mit Zusatzblock (Projektmaske: Notizen). Nicht mehr klebend:
   eine aufgeklappte Notizliste ist laenger als das Fenster und waere sonst unten abgeschnitten. */
.fw-aside.has-extra { position: static; }
.fw-aside-extra { margin-top: 1rem; }
/* Der Zusammenfassungs-Knopf existiert nur fuer schmale Fenster (unten). */
.fw-aside-toggle { display: none; }
.fw-aside-progress {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}
.fw-ring-wrap {
    position: relative;
    flex: 0 0 auto;
    width: 4rem;
    height: 4rem;
}
.fw-ring { width: 100%; height: 100%; transform: rotate(-90deg); }
.fw-ring circle { fill: none; stroke-width: 6; }
.fw-ring-bg { stroke: var(--border); }
.fw-ring-fill { stroke: var(--primary); stroke-linecap: round; }
.fw-ring-num {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    font-weight: 500;
    font-size: var(--fs-body);
    color: var(--text-primary);
    font-variant-numeric: tabular-nums;
}
.fw-aside-status { margin: 0; color: var(--text-primary); line-height: 1.35; }
.fw-aside-steps {
    list-style: none;
    margin: 0.75rem 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}
.fw-aside-step {
    display: flex;
    justify-content: space-between;
    gap: 0.5rem;
}
.fw-aside-step-num { font-variant-numeric: tabular-nums; color: var(--text-primary); }
.fw-aside-step.is-done .fw-aside-step-num { color: var(--success); }
.fw-aside-title {
    margin: 1rem 0 0.5rem;
    padding-top: 0.75rem;
    border-top: 1px solid var(--border);
    font-size: var(--fs-label);
    font-weight: 600;
    color: var(--text-secondary);
}
.fw-glance { margin: 0; display: flex; flex-direction: column; gap: 0.4rem; }
.fw-glance-row { display: flex; justify-content: space-between; gap: 0.75rem; }
.fw-glance dt { margin: 0; }
.fw-glance dd {
    margin: 0;
    text-align: right;
    font-weight: 600;
    color: var(--text-primary);
    font-variant-numeric: tabular-nums;
}

/* „+ Feld"-Chips: optionale Angaben erst auf Klick. Echte <button>, gestrichelter Rand
   als Zeichen „noch nicht da". */
.fw-chips { margin-top: 1.25rem; }
.fw-chips[hidden] { display: none; }
.fw-chips-lead { margin: 0 0 0.5rem; font-size: var(--fs-ui); color: var(--text-secondary); }
.fw-chips-row { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.fw-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    min-height: 2.25rem;
    padding: 0.25rem 0.85rem;
    border: 1px dashed var(--border);
    border-radius: 999px;
    background: transparent;
    color: var(--text-secondary);
    font: inherit;
    font-size: var(--fs-ui);
    cursor: pointer;
}
.fw-chip:hover { border-color: var(--primary); color: var(--text-primary); }
.fw-chip:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.fw-chip-field { margin-top: 1rem; }
.fw-chip-field[hidden] { display: none; }
.fw-soft-hint { margin: 0.35rem 0 0; font-size: var(--fs-ui); color: var(--text-secondary); }
.fw-soft-hint[hidden] { display: none; }

/* Mittlere Breiten: drei Spalten quetschten das Formular auf ~260 px (gemessen an der
   Projekt-Pruefseite, 1050 px Maskenbreite). Die Seitenspalte rueckt deshalb unter die
   Schrittleiste in deren Spalte; das Formular behaelt die ganze rechte Seite. */
@media (min-width: 721px) and (max-width: 1100px) {
    .fw.has-aside {
        grid-template-columns: minmax(10rem, var(--fw-rail-w)) minmax(0, 1fr);
        grid-template-rows: auto 1fr;
    }
    .fw.has-aside .fw-rail { grid-column: 1; grid-row: 1; position: static; }
    .fw.has-aside .fw-aside { grid-column: 1; grid-row: 2; align-self: start; }
    .fw.has-aside .fw-main { grid-column: 2; grid-row: 1 / span 2; }
}

/* Unter 720 px: Seitenspalte als einklappbare Leiste direkt unter der Schrittleiste.
   `order` nur visuell — im DOM (und fuer Tab) bleibt Leiste → Felder → Zusammenfassung. */
@media (max-width: 720px) {
    .fw.has-aside { grid-template-columns: 1fr; }
    .fw.has-aside .fw-rail { order: 0; }
    .fw.has-aside .fw-aside { order: 1; position: static; padding: 0; }
    .fw.has-aside .fw-main { order: 2; }
    .fw-aside-toggle {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 0.5rem;
        width: 100%;
        min-height: 2.75rem;
        padding: 0.5rem 1rem;
        border: 0;
        background: transparent;
        color: var(--text-primary);
        font: inherit;
        cursor: pointer;
    }
    .fw-aside-toggle:focus-visible { outline: 2px solid var(--primary); outline-offset: -2px; }
    .fw-aside-toggle[aria-expanded="true"] .fw-aside-chev { transform: rotate(180deg); }
    .fw-aside-body { padding: 0 1rem 1rem; }
    .fw-aside:not(.is-open) .fw-aside-body { display: none; }
    .fw-aside-extra { margin-top: 0; padding: 0 1rem 1rem; }
}

/* ============================================================
   PR1.197 (#356) — Opportunity-Anlage in sieben Schritten
   ============================================================
   Bewusst NICHT .crm-gescopt: dieselbe Regel bedient beide Shells (Konvention 20).
   Alles hier steht INNERHALB von .fw, und der Block `.crm .fw` in style-redesign.css
   uebersetzt die benutzten Legacy-Tokens bereits — deshalb kommt in dieser Aenderung
   keine einzige Zeile in style-redesign.css dazu, und der ui-craft-Ratchet
   (raw-px / raw-hex zaehlen nur dort) bleibt unberuehrt.

   KEINE transition, KEINE Animation: die Maske wird taeglich benutzt und man springt
   staendig zwischen den Schritten — Bewegung waere hier Reibung, nicht Politur
   (Konvention 22, Motion-Budget). Die Hover-Rueckmeldung der Ablageflaeche ist eine
   Zustandsanzeige, kein Effekt. */

/* Die Ueberschrift wiederholt den Schrittnamen aus der Leiste. Das ist Absicht:
   unter 720 px legt sich die Leiste quer ueber das Formular, und dann ist sie die
   einzige Stelle, an der steht, wo man gerade ist. */
.fw-panel-title {
    margin: 0 0 1rem;
    font-size: var(--fs-section);
    font-weight: 600;
    color: var(--text-primary);
}

/* ── PR1.198 #357 — Der ⓘ neben einem Formular-Label ────────────────────────
   Erklaert, welche Bewertung ausfaellt, wenn das Feld leer bleibt. Echter
   <button> statt role/tabindex (RD1.10-Falle, siehe Ablageflaeche unten).

   `.fh-row` ist `position: relative`, der Hinweis `position: absolute` mit
   left/right 0. Damit kann er seitlich per Konstruktion nicht ueber den
   Panelrand hinauslaufen, und weil er ausserhalb des Flusses steht, verschiebt
   sein Ein- und Ausblenden nichts. Kein Motion — Konvention 22, taegliches
   Werkzeug.

   `--text-primary`/`--text-secondary`/`--text-muted` sind hier bewusst NICHT
   verwendet: sie existieren nur im Light-Block dieser Datei und sind im
   Dark-Theme ungueltig. */
.fh-row {
    position: relative;
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

/* Die Klickflaeche ist 1.5rem (24 px) gross — WCAG 2.2, 2.5.8 „Target Size (Minimum)".
   Der sichtbare Kreis bleibt kleiner und sitzt im `<span>`, damit ein 24-px-Ring neben
   einem 0.78-rem-Label nicht dominanter wirkt als die Beschriftung selbst. */
.fh-btn {
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    width: 1.5rem;
    height: 1.5rem;
    /* Feste Untergrenze zusaetzlich zur rem-Angabe: die Wurzel-Schriftgroesse ist hier
       nicht 16 px, 1.5rem landete gemessen bei 23 px — einen Pixel unter der Norm. */
    min-width: 24px;
    min-height: 24px;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--text-2);
    font: 500 var(--fs-label)/1 inherit;
    cursor: pointer;
}

.fh-btn > span {
    display: grid;
    place-items: center;
    width: 1.05rem;
    height: 1.05rem;
    border: 1px solid var(--border-light);
    border-radius: 50%;
}

.fh-btn:hover,
.fh-btn[aria-expanded="true"] {
    color: var(--primary);
}

.fh-btn:hover > span,
.fh-btn[aria-expanded="true"] > span {
    border-color: var(--primary);
}

.fh-btn:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
}

/* Der Hinweis schwebt ueber dem Feld, zu dem er gehoert. Deshalb muss er sich
   deutlich davon abheben: `--bg-card2` ist fast derselbe Ton wie `--bg-input`, und
   in `--text-2` gesetzter Text sah in der Sichtpruefung 07.08.2026 aus wie der
   Placeholder des Textfeldes darunter. Also hellere Flaeche (`--surface-2`),
   Textfarbe `--text-1` und der grosse Schatten — er soll erkennbar DAVOR liegen. */
.fh-pop {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 20;
    margin: 0.25rem 0 0;
    padding: 0.55rem 0.7rem;
    background: var(--surface-2);
    border: 1px solid var(--primary);
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-lg);
    color: var(--text-1);
    font-size: var(--fs-meta);
    font-weight: 400;
    line-height: 1.45;
}

/* Am unteren Rand des Scroll-Bereichs klappt der Hinweis nach oben. */
.fh-pop--above {
    top: auto;
    bottom: 100%;
    margin: 0 0 0.25rem;
}

/* ── Ablageflaeche fuer eine Ausschreibung (Schritt 1) ──────────────────────
   Ersetzt den Vordialog „Freihaendig / Aus Datei". Ein echter <button> traegt die
   Flaeche: Tastaturbedienung und Fokusring gibt es damit gratis, und der
   Fokus-Ratchet bleibt aussagekraeftig (RD1.10 — role="button" mit tabindex macht
   ihn blind). */
.opp-intake {
    margin-bottom: 1.25rem;
}

.opp-intake-drop {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.35rem;
    width: 100%;
    padding: 1.5rem 1rem;
    border: 1px dashed var(--border-light);
    border-radius: var(--radius-sm);
    background: var(--bg-card2);
    color: var(--text-secondary);
    font: inherit;
    text-align: center;
    cursor: pointer;
}

.opp-intake-drop:hover,
.opp-intake-drop.is-over {
    border-color: var(--primary);
    color: var(--text-primary);
}

.opp-intake-drop:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
}

.opp-intake-icon { font-size: var(--fs-title); }

.opp-intake-title {
    font-weight: 600;
    color: var(--text-primary);
}

.opp-intake-hint {
    font-size: var(--fs-ui);
    color: var(--text-muted);
}

/* „oder von Hand" — der Trenner sagt, dass es auch ohne Datei weitergeht.
   Die Linien links und rechts entstehen aus zwei wachsenden Pseudo-Elementen,
   damit der Text immer mittig sitzt, egal wie breit das Panel ist. */
.opp-intake-or {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-top: 1rem;
    color: var(--text-muted);
    font-size: var(--fs-ui);
}

.opp-intake-or::before,
.opp-intake-or::after {
    content: '';
    flex: 1;
    border-top: 1px solid var(--border-light);
}

/* ── PR1.205 #364 — Anfragetext einfuegen + Vorschlags-Kennzeichnung ──────────
   Motion-Budget null: die Maske liegt auf einem taeglich begangenen, tastatur-
   initiierten Weg — die Frequenz-Regel aus DESIGN.md in ihrer schaerfsten Form.
   Keine Transition, kein Skeleton, kein Spinner; der Ladezustand ist Text.

   Farb-Disziplin: --accent = "das hat die KI vorgeschlagen" (dasselbe Vokabular
   wie .auto-assign-badge), --warning = weicher Hinweis ohne Sperrwirkung,
   --danger bleibt harten Fehlern vorbehalten. */
/* Der Block ist ein `.form-group` — Feld, Label und Fokusring kommen damit aus dem
   Design-System und nicht aus einer zweiten Quelle. Hier steht nur, was ihn vom
   gewoehnlichen Formularfeld unterscheidet. */
.opp-intake-text {
    margin-top: 0.75rem;
}

.opp-intake-text > textarea { min-height: 5.5rem; }

/* Der Ausloeser sitzt rechts unter dem Feld: er schliesst den Block ab, statt ihn
   anzufuehren. `.btn` bringt keinen Gesperrt-Zustand mit — ohne den hier waere der
   Knopf bei leerem Feld die graue Schrift des Browsers auf dunklem Grund, also
   praktisch unsichtbar. */
.opp-intake-run {
    display: inline-flex;
    margin-top: 0.5rem;
    margin-left: auto;
}

.opp-intake-run:disabled {
    background: var(--bg-hover);
    color: var(--text-3);
    box-shadow: none;
    cursor: not-allowed;
}

.opp-intake-run:disabled:hover { transform: none; }

.opp-intake-status {
    margin: 0.6rem 0 0;
    font-size: var(--fs-ui);
    line-height: 1.5;
    color: var(--text-secondary);
}

.opp-intake-status.is-error { color: var(--danger); }
/* Bewusst `--text-2` und nicht `--text-muted`: letzteres ist in der klassischen
   Shell gar nicht belegt (nur im .crm-Scope) und fiele auf die geerbte Farbe
   zurueck. `--text-3` waere belegt, laege aber bei 3.87:1 unter AA. */
.opp-intake-status.is-ok { color: var(--text-2); }

/* Das Banner steht ueber allen Schritten, weil sich die Vorschlaege auf mehrere
   verteilen — der Zaehler muss auch aus Schritt 3 heraus lesbar bleiben. */
.opp-suggest {
    margin-bottom: 1rem;
    padding: 0.7rem 0.9rem;
    border: 1px solid var(--border-light);
    border-left: 3px solid var(--suggest-accent);
    border-radius: var(--radius-sm);
    background: var(--bg-card2);
}

.opp-suggest-head {
    margin: 0;
    font-size: var(--fs-body);
    color: var(--text-primary);
}

.opp-suggest-notes {
    margin: 0.5rem 0 0;
    padding-left: 1.1rem;
    list-style: disc;
}

/* Der Hinweistext traegt NICHT die Warnfarbe: Amber auf hellem Grund kommt im
   Redesign auf 2.02:1 (auch das abgedunkelte --ad-orange-700 nur auf 2.85:1) und
   reisst AA deutlich. Die Warn-Bedeutung sitzt deshalb im Listenpunkt — der ist
   Grafik und faellt unter die 3:1-Regel —, der Text bleibt lesbar.
   `--text-2`: 6.85:1 klassisch, 7.00:1 im Redesign. */
.opp-suggest-note {
    font-size: var(--fs-ui);
    line-height: 1.5;
    color: var(--text-2);
}

.opp-suggest-note::marker { color: var(--warning); }

.opp-suggest-actions {
    display: flex;
    gap: 0.5rem;
    margin-top: 0.7rem;
}

/* Die Kennzeichnung am Feld. Bewusst nur ein Rand und ein Label — ein farbiger
   Hintergrund haette das Feld wie eine Fehlermeldung aussehen lassen, und ein
   Vorschlag ist kein Fehler. Nie schreibgeschuetzt (PR1.63-Lehre).

   `--suggest-accent` ist ein eigenes semantisches Token, weil die beiden Shells
   verschiedene Zweitakzente fuehren: klassisch Cyan, im Redesign adesso-Violett
   (belegt in style-redesign-modals.css). Direkt `--accent` zu benutzen haette
   Legacy-Cyan in die neue Shell getragen — die Shell-Trennungs-Regel aus DESIGN.md.
   Die Interaktivfarbe bleibt dabei fuer Interaktion reserviert (Ein-Zweck-Regel). */
:root { --suggest-accent: var(--accent); }

/* Die ID im Selektor ist noetig, nicht Kosmetik: `.form-group input` (0,2,0) und der
   `.crm`-Feldscope (0,3,0) setzen beide `border`, und ein blosses Attribut (0,1,0)
   verloere gegen sie — der Rand waere da, aber in der neutralen Randfarbe. */
#opp-form [data-suggested="1"] {
    border-left-width: 3px;
    border-left-style: solid;
    border-left-color: var(--suggest-accent);
}

/* Zwei Label-Lagen: gewoehnlich Direktkind der Gruppe, bei Feldern mit ⓘ-Hinweis
   (PR1.198) aber in einer `.fh-row`. Ohne die zweite Zeile verloeren genau die
   matching-relevanten Felder ihre Kennzeichnung. */
#opp-form .form-group:has([data-suggested="1"]) > label::after,
#opp-form .form-group:has([data-suggested="1"]) > .fh-row > label::after {
    content: ' · vorgeschlagen';
    color: var(--suggest-accent);
    font-size: var(--fs-meta);
    font-weight: 400;
}

/* ─────────────────────────────────────────────────────────────────────────────
   PR1.406 #636 — Opportunity anlegen in drei Schritten (beide Shells; das Redesign
   ergaenzt nur Schrift und Gruenstufe in style-redesign.css).
   Kompass: Entwurf „2_Opportunity-Anlage" hell/dunkel.
   KEINE transition, KEINE Animation: die Anlage wird woechentlich benutzt, Bewegung
   waere Reibung (Konvention 22, Motion-Budget). Die Entwuerfe-View (PR1.192) ist weg.
   ───────────────────────────────────────────────────────────────────────────── */

/* Schritt mit Untertitel: Nummer im Kreis, darunter „Für ‚Fertig' nötig". */
.fw-step.has-sub {
    grid-template-columns: 1.75rem 1fr;
    grid-template-rows: auto auto;
    align-items: start;
    row-gap: 0.1rem;
    padding: 0.6rem 0.75rem;
}
.fw-step.has-sub .fw-step-mark {
    grid-row: 1 / span 2;
    width: 1.5rem;
    height: 1.5rem;
    border: 1px solid var(--border-light, var(--border));
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: var(--fs-meta);
    color: var(--text-secondary);
}
.fw-step.has-sub.active .fw-step-mark {
    /* --primary-dark: Weiss auf --primary kommt im dunklen Theme nur auf 4,47:1. */
    background: var(--primary-dark, var(--primary));
    border-color: var(--primary-dark, var(--primary));
    color: #fff;
}
.fw-step.has-sub.is-done .fw-step-mark { color: var(--success, var(--primary)); }
.fw-step-sub {
    grid-column: 2;
    font-size: var(--fs-meta);
    font-weight: 400;
    color: var(--text-2, var(--text-secondary));
}

.fw-panel-lead {
    margin: -0.5rem 0 1.25rem;
    font-size: var(--fs-body);
    color: var(--text-2, var(--text-secondary));
}
.fw-panel-subtitle {
    margin: 1.75rem 0 0.75rem;
    padding-top: 1rem;
    border-top: 1px solid var(--border);
    font-size: var(--fs-body);
    font-weight: 600;
    color: var(--text-primary);
}

/* ─────────────────────────────────────────────────────────────────────────────
   PR1.512 #778 — Abschnitte mit Frage-Marke (Wer? Was? Wo? Wann?) in den Schritten der
   Opp- und Projektmaske (Entwurf 06). Beide Shells; das Redesign setzt in
   style-redesign-modals.css nur Farben und Schrift. Keine Animation (taeglich genutzt).
   ───────────────────────────────────────────────────────────────────────────── */
.fw-sec {
    margin: 0 0 0.9rem;
    padding: 0.9rem 1rem 1rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-md, 8px);
    background: var(--bg-card, transparent);
}
.fw-sec-head { display: flex; align-items: baseline; gap: 0.55rem; }
.fw-sec-ask {
    flex: none;
    padding: 0.1rem 0.45rem;
    border-radius: 4px;
    background: color-mix(in srgb, var(--primary) 14%, transparent);
    color: var(--text-1, var(--text-primary));
    font-size: var(--fs-label);
    font-weight: 500;
}
.fw-sec-title { margin: 0; font-size: var(--fs-body); font-weight: 600; color: var(--text-1, var(--text-primary)); }
.fw-sec-hint { margin: 0.25rem 0 0.75rem; font-size: var(--fs-ui); color: var(--text-2, var(--text-secondary)); }
.fw-sec-body > .form-group:last-child,
.fw-sec-body > .form-grid:last-child { margin-bottom: 0; }

/* Kachelgruppen mit festem Raster: Hyperscaler 6, Plattform 4 Spalten — keine Kachel
   bricht allein in die naechste Zeile („Private Cloud" allein in Zeile 2). */
#opp-hyperscaler-grid .ms-pill-row,
#pm-hyperscaler .ms-pill-row { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; }
#opp-platform-grid .ms-pill-row,
#pm-platform .ms-pill-row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
#opp-hyperscaler-grid .ms-pill,
#pm-hyperscaler .ms-pill,
#opp-platform-grid .ms-pill,
#pm-platform .ms-pill { width: 100%; min-width: 0; justify-content: center; text-align: center; }
/* Gemessen an der Breite der Gruppe, nicht des Fensters (Seitenspalte und Leiste nehmen
   unterschiedlich viel weg): reicht der Platz fuer sechs Logo-Kacheln nicht, 3 × 2 bzw.
   2 × 2 — nie eine Kachel allein in einer Zeile. */
#opp-hyperscaler-grid, #pm-hyperscaler, #opp-platform-grid, #pm-platform { container-type: inline-size; }
@container (max-width: 780px) {
    .ms-pill-row { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
}
@container (max-width: 520px) {
    .ms-pill-row { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}
#opp-hyperscaler-grid .ms-pill--logo,
#pm-hyperscaler .ms-pill--logo { overflow: hidden; }
#opp-hyperscaler-grid .ms-pill--logo .hs-logo,
#pm-hyperscaler .ms-pill--logo .hs-logo { min-width: 0; }

/* Ruecksetzen des Zeitraums als Textlink unter dem Feld statt als Symbol darin. */
.fw-sec-reset {
    align-self: flex-start;
    margin: 0.3rem 0 0;
    padding: 0;
    border: 0;
    background: none;
    font: inherit;
    font-size: var(--fs-meta);
    text-align: left;
    color: var(--text-2, var(--text-secondary));
    cursor: pointer;
}
.fw-sec-reset-link { color: var(--primary); text-decoration: underline; text-underline-offset: 2px; }
.fw-sec-reset:hover .fw-sec-reset-link { text-decoration-thickness: 2px; }
.fw-sec-reset:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; border-radius: 2px; }

/* Kurzsumme des Eingetragenen unter dem Schritt in der Leiste. */
.fw-step-summary {
    grid-column: 2;
    font-size: var(--fs-meta);
    font-weight: 400;
    color: var(--text-1, var(--text-primary));
    overflow-wrap: anywhere;
}

/* „Übernommen: Branche · BD · Ort" unter dem Kundenfeld. */
.opp-customer-takeover {
    margin: 0.3rem 0 0;
    font-size: var(--fs-meta);
    color: var(--success);
}

/* Hilfezeile unter einem Feld („gilt für Personen ohne eigenen Satz"). --text-2 statt
   --text-3: --text-3 verfehlt im dunklen Klassik-Theme AA (PR1.217-Messung). */
.opp-field-help {
    display: block;
    margin-top: 0.3rem;
    font-size: var(--fs-meta);
    color: var(--text-2, var(--text-secondary));
}

/* Fusszeile der Neuanlage: links was fehlt, rechts die drei Knoepfe. */
.opp-create-bar {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.75rem;
    flex: 1 1 auto;
    min-width: 0;
}
.opp-create-bar[hidden] { display: none; }
.opp-create-bar .opp-gaps {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin: 0;
    flex: 1 1 18rem;
    min-width: 0;
}
.opp-create-bar .opp-gaps[hidden] { display: none; }
.opp-create-bar .opp-gaps-head { color: var(--text-secondary); }
.opp-create-bar .opp-gaps-list { margin: 0; }
.opp-gaps-icon { color: var(--warning); }
.opp-create-actions {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-left: auto;
}
/* Bei der Neuanlage gelten die drei Knoepfe oben; die Knoepfe des Edit-Guards
   (Rückgängig/Abbrechen/Speichern) waeren dieselben Absichten ein zweites Mal. */
#opp-modal.is-create .edit-guard-undo-btn,
#opp-modal.is-create .edit-guard-cancel-btn,
#opp-modal.is-create .edit-guard-save-btn,
#project-modal.is-create .edit-guard-undo-btn,
#project-modal.is-create .edit-guard-cancel-btn,
#project-modal.is-create .edit-guard-save-btn { display: none !important; }

/* Gesperrte Knoepfe der Anlage-Fusszeile (Zwischenspeichern vor Kunde + Name) muessen
   auch so aussehen — `.btn:disabled` gibt es global nicht. */
.opp-create-actions .btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* PR1.409 #639 — „Weitere Angaben" der Projektmaske, zugeklappt im Schritt
   Aufgaben und Team (Cross-Selling, Auftragsdaten, Testprojekt). */
.pm-more {
    border-top: 1px solid var(--border);
    padding-top: 0.75rem;
}
.pm-more > summary {
    cursor: pointer;
    font-weight: 600;
    color: var(--text-secondary);
    margin-bottom: 0.5rem;
}
.pm-more > summary:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
}

/* Fortsetzen-Band oben in der Anlagemaske (Opportunity, Mitarbeiter, Projekt). */
.draft-offer-host { margin: 0 0 1rem; }
.draft-offer-host[hidden] { display: none; }
.draft-offer {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.75rem;
    padding: 0.65rem 0.9rem;
    border: 1px solid color-mix(in srgb, var(--primary) 30%, transparent);
    border-radius: var(--radius-sm);
    background: color-mix(in srgb, var(--primary) 9%, transparent);
    color: var(--text-primary);
}
.draft-offer-icon { color: var(--primary); font-size: var(--fs-body); }
.draft-offer-text { margin: 0; flex: 1 1 16rem; font-size: var(--fs-body); }
.draft-offer-actions { display: flex; gap: 0.5rem; }

/* Etikett „unvollständig" in der Opp-Liste: ruhig grau, nie rot — es ist eine
   Aufforderung, kein Fehler (Grill 19.10.: „ruhige graue Leersaetze"). */
.opp-incomplete-badge {
    display: inline-block;
    margin-left: 0.35rem;
    padding: 1px 6px;
    border: 1px dashed var(--border-light, var(--border));
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--text-2, var(--text-secondary));
    font-size: var(--fs-label);
    font-weight: 500;
    vertical-align: middle;
}

/* ═══════════════════════════════════════════════════════════
   BF-15 #394 — KB-Doc-Ingestion-Status (Legacy-Shell)
   ═══════════════════════════════════════════════════════════
   Gerendert von public/js/components/kb-doc-status.js — dasselbe Markup wie in
   der Redesign-Shell (Konvention 20: ein Gehirn, zwei Gesichter). Dort erbt es
   die .bdg-Basis, hier die .chip-Geometrie.
   Bewusst KEINE Rolle fuer `ready`: der Normalfall bleibt stumm, sonst haengt an
   nahezu jeder Zeile ein „Bereit"-Etikett und die eine kaputte Zeile geht unter. */
.kb-doc-status {
    display: inline-flex;
    align-items: center;
    border-radius: 99px;
    padding: 3px 9px;
    font-size: var(--fs-label);
    font-weight: 500;
    white-space: nowrap;
}
/* Dark ist die Basis: --warning/--danger sind als Schrift auf ihrem eigenen dunklen
   Tint zu dunkel (--danger kam auf 4.18:1, AA verlangt 4.5:1 fuer diese Schriftgroesse),
   deshalb aufgehellt — dasselbe Vorgehen wie .comp-1/.comp-2 weiter oben, die dafuer
   hellere Rot-/Gelbstufen setzen. Der Light-Zweig kippt zurueck auf die Tokens, die
   dort bereits die dunklen Varianten fuehren. */
.kb-doc-status-pending {
    background: color-mix(in srgb, var(--warning) 16%, transparent);
    border: 1px solid color-mix(in srgb, var(--warning) 38%, transparent);
    color: color-mix(in srgb, var(--warning) 70%, white);
}
.kb-doc-status-failed {
    background: color-mix(in srgb, var(--danger) 16%, transparent);
    border: 1px solid color-mix(in srgb, var(--danger) 38%, transparent);
    color: color-mix(in srgb, var(--danger) 62%, white);
}
[data-theme="light"] .kb-doc-status-pending {
    background: color-mix(in srgb, var(--warning) 10%, white);
    border-color: color-mix(in srgb, var(--warning) 32%, white);
    /* --warning pur ergibt auf dem eigenen Tint nur 4.38:1 — knapp unter AA. */
    color: color-mix(in srgb, var(--warning) 86%, black);
}
[data-theme="light"] .kb-doc-status-failed {
    background: color-mix(in srgb, var(--danger) 10%, white);
    border-color: color-mix(in srgb, var(--danger) 32%, white);
    color: var(--danger);
}

/* ─────────────────────────────────────────────────────────────
   PR1.275 (#469) — Kundenlogo / Initialen-Monogramm
   Geteilter Baustein, gerendert von components/account-logo.js.
   Das Bild kommt NIE als <img>, sondern als background-image mit einer
   blob:-URL aus services/account-logo-client.js (CSP + Bearer-Auth, siehe
   Kopfkommentar dort). Das Monogramm ist zugleich der Ladezustand — die
   Endmasse stehen ab dem ersten Frame, es springt nichts.
   ───────────────────────────────────────────────────────────── */

.acc-logo {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  border-radius: var(--radius-sm);
  overflow: hidden;
  color: #fff;
  font-weight: 600;
  letter-spacing: 0.02em;
  line-height: 1;
  user-select: none;
}

.acc-logo-text { line-height: 1; }

/* Aufgeloestes Logo. Die helle Platte ist bewusst NICHT theme-abhaengig:
   eine einfarbig dunkle Wortmarke waere auf der dunklen Karte sonst
   unsichtbar. `contain` statt `cover`, weil ein Logo nicht beschnitten
   werden darf (anders als ein Portraetfoto, vgl. .emp-avatar-img). */
/* Die Platte wird zusaetzlich INLINE vom Resolver gesetzt — das Monogramm traegt
   sein Gradient als background-Shorthand im style-Attribut, und dagegen verliert
   jede Stylesheet-Regel. Diese Regel bleibt als Rueckfallebene fuer Markup, das
   ohne Inline-Gradient auskommt. */
.acc-logo.is-loaded {
  background-color: #fff;
  /* Sichtbare Kante: ein Logo, dessen Farbe der Platte gleicht (rein weisse
     Wortmarke), waere sonst ein leeres Kaestchen ohne erkennbare Grenze.
     Der Fall ist selten — Favicons und Apple-Touch-Icons sind fuer hellen Grund
     gemacht — aber die Kante kostet nichts. Belegt in
     test/ui-harness/pr1-275-kundenlogo.html, Schalter "Testlogo: weiss". */
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.14);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  /* BF-76 (#641): Prozent-Padding bezieht sich auf die Breite des UMGEBENDEN Blocks,
     nicht auf die Kachel — im Projektkopf blaehte es die 44-px-Kachel auf 150-300 px auf.
     em haengt an der Kachel (font-size = 0,38 x size): .16em ~ 6 % der Kante. */
  box-sizing: border-box;
  padding: .16em;
}

.acc-logo.is-loaded .acc-logo-text { visibility: hidden; }

/* Fehlgeschlagene Aufloesung bleibt bewusst beim Monogramm — in einer Liste
   waere jede andere Behandlung Laerm. Die Klasse existiert nur als Haken
   fuer die Diagnose. */
.acc-logo-failed { }

/* Logo-Bereich im Kunden-Edit-Modal. */
.acc-logo-section {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 16px;
  align-items: start;
  margin-bottom: 18px;
}

.acc-logo-drop {
  display: block;
  padding: 12px 16px;
  border: 1px dashed var(--border);
  border-radius: var(--radius-sm);
  color: var(--text-secondary);
  cursor: pointer;
  text-align: center;
  transition: border-color 150ms, background 150ms;
}

.acc-logo-drop:hover,
.acc-logo-drop.is-dragover {
  border-color: var(--accent);
  background: var(--bg-hover);
}

.acc-logo-status { display: block; margin-top: 8px; font-size: var(--fs-body); color: var(--text-secondary); }
.acc-logo-status-ok  { color: var(--emerald, #10b981); }
.acc-logo-status-err { color: var(--danger, #ef4444); }
.acc-logo-origin { display: block; margin-top: 6px; font-size: var(--fs-ui); color: var(--text-secondary); }

/* ═══════════════════════════════════════════════════════════════════
   PR1.276 (#470) — Kunden-Dossier als Full-Page (klassische Shell).
   Pendant im Redesign: .crm-cd-* in style-redesign.css.
   ═══════════════════════════════════════════════════════════════════ */

.cd-page { padding-bottom: 24px; }

/* ── PR1.407 (#637) Kundenseite neu — Kopfband, drei Spalten, Reiter, Status, Ausblick ──
   Ein Look mit dem Redesign (.crm-cd-*), eigene Tokens der klassischen Shell. Keine
   Uebergaenge: die Seite wird mehrmals pro Woche benutzt. Zahlen in tabular-nums. */
.cd-crumbs { margin: 12px 0 8px; font-size: var(--fs-ui); color: var(--text-2); display: flex; gap: 6px; min-width: 0; }
.cd-crumbs a { color: var(--primary-text); text-decoration: none; }
.cd-crumbs a:hover, .cd-crumbs a:focus-visible { text-decoration: underline; }
.cd-crumbs > span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.cd-band {
  display: flex; align-items: center; gap: 18px; padding: 18px 22px; margin-bottom: 16px;
  background: color-mix(in srgb, var(--primary) 9%, var(--bg-card));
  border: 1px solid var(--border); border-radius: var(--radius-lg);
}
.cd-logo {
  width: 72px; height: 72px; flex: 0 0 auto; border-radius: var(--radius);
  background: var(--primary-dark) center/contain no-repeat;
  display: flex; align-items: center; justify-content: center;
  font-size: var(--fs-title); font-weight: 600; color: #fff;
}
.cd-logo.is-loaded { background-color: #fff; }
/* BF-63 — geladenes Logo: Initialen weg, sonst stehen sie auf dem Bild. */
.cd-logo.is-loaded .cd-logo-text { visibility: hidden; }
.cd-band-text { flex: 1; min-width: 0; }
.cd-title {
  margin: 0; font-size: var(--fs-title); line-height: 1.2; color: var(--primary-text);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.cd-band-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 16px; margin-top: 6px; font-size: var(--fs-body); color: var(--text-2); }
.cd-pill {
  display: inline-flex; align-items: center; gap: 6px; padding: 2px 10px; border-radius: 999px;
  font-size: var(--fs-ui); font-weight: 500; color: var(--text-2); background: var(--bg-card2);
}
.cd-pill-active { color: var(--success); background: color-mix(in srgb, var(--success) 8%, var(--bg-card)); }
.cd-pill-dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.cd-flag { font-size: var(--fs-label); padding: 2px 8px; border-radius: 10px; border: 1px solid var(--border); }
.cd-band-actions { display: flex; gap: 8px; flex-wrap: wrap; }

.cd-grid {
  display: grid; gap: 16px; align-items: start;
  grid-template-columns: minmax(240px, 1fr) minmax(0, 2.2fr) minmax(260px, 1.15fr);
}
.cd-col { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.cd-col > .cd-section { margin-bottom: 0; }
/* Unter Laptop-Breite rutscht die rechte Spalte unter die Mitte, schmal alles untereinander. */
@media (max-width: 1280px) {
  .cd-grid { grid-template-columns: minmax(220px, 1fr) minmax(0, 2.4fr); }
  .cd-col-side { grid-column: 2; }
}
@media (max-width: 860px) {
  .cd-grid { grid-template-columns: minmax(0, 1fr); }
  .cd-col-side { grid-column: auto; }
  .cd-band { flex-wrap: wrap; }
}

.cd-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); padding: 14px 16px; }
.cd-card-head { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; margin: -2px 0 10px; border-bottom: 1px solid var(--border); }
.cd-card-head .cd-section-title { border-bottom: 0; margin: 0; padding-bottom: 8px; }
.cd-card-aside { font-size: var(--fs-meta); color: var(--text-2); white-space: nowrap; }
.cd-num { font-variant-numeric: tabular-nums; }

/* Stammdaten */
.cd-facts { margin: 0; }
.cd-fact { display: grid; grid-template-columns: minmax(96px, 40%) minmax(0, 1fr); gap: 10px; padding: 5px 0; font-size: var(--fs-body); }
.cd-fact dt { color: var(--text-2); }
.cd-fact dd { margin: 0; overflow-wrap: anywhere; }
.cd-fact a { color: var(--primary-text); text-decoration: none; }
.cd-fact a:hover, .cd-fact a:focus-visible { text-decoration: underline; }
.cd-gaps {
  display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-top: 10px;
  padding: 10px 12px; border-radius: var(--radius-sm); font-size: var(--fs-ui);
  color: var(--text-1); background: color-mix(in srgb, var(--warning) 16%, var(--bg-card));
}
.cd-gap-fix { flex: 0 0 auto; font: inherit; font-weight: 600; color: var(--primary-text); background: none; border: 0; padding: 2px; text-decoration: underline; cursor: pointer; }
.cd-gap-fix:focus-visible { outline: 2px solid var(--primary-text); outline-offset: 2px; }

/* Reiter */
.cd-tabcard { padding: 0; overflow: hidden; }
.cd-tabs { display: flex; gap: 4px; padding: 0 12px; border-bottom: 1px solid var(--border); overflow-x: auto; }
.cd-tab {
  padding: 12px 10px 10px; font: inherit; font-weight: 500; font-size: var(--fs-body); color: var(--text-2);
  background: none; border: 0; border-bottom: 3px solid transparent; cursor: pointer; white-space: nowrap;
}
.cd-tab:hover { color: var(--text-1); }
.cd-tab:focus-visible { outline: 2px solid var(--primary-text); outline-offset: -2px; }
.cd-tab[aria-selected="true"] { color: var(--text-1); border-bottom-color: var(--primary-text); }
.cd-tab-count { font-weight: 400; color: var(--text-2); font-variant-numeric: tabular-nums; }
.cd-panel { padding: 0; }
.cd-panel[hidden], .cd-all[hidden] { display: none; }
.cd-items { list-style: none; margin: 0; padding: 0; }
.cd-item {
  /* BF-99 (#734): Name · Budget · PT · Status · Person. Team-Zeilen nutzen die ersten drei. */
  display: grid; grid-template-columns: minmax(0, 1fr) 104px 64px 120px 128px; gap: 12px; align-items: center;
  padding: 10px 16px; border-top: 1px solid var(--border); font-size: var(--fs-body);
}
.cd-item:first-child { border-top: 0; }
.cd-item:hover { background: var(--bg-hover); }
.cd-item-main { display: flex; flex-direction: column; min-width: 0; color: var(--text-1); text-decoration: none; }
.cd-item-main:focus-visible { outline: 2px solid var(--primary-text); outline-offset: 2px; border-radius: 2px; }
.cd-item-main:hover .cd-item-name { text-decoration: underline; }
.cd-item-name { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cd-item-sub { font-size: var(--fs-meta); color: var(--text-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cd-item-hs { display: flex; flex-wrap: wrap; gap: 4px 8px; font-size: var(--fs-ui); color: var(--text-2); min-width: 0; }
.cd-item-num { text-align: right; font-size: var(--fs-ui); color: var(--text-2); white-space: nowrap; }
.cd-item-budget, .cd-item-days { text-align: right; font-size: var(--fs-ui); color: var(--text-1); white-space: nowrap; font-variant-numeric: tabular-nums; }
.cd-item-owner { min-width: 0; font-size: var(--fs-ui); color: var(--text-1); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cd-item-none { color: var(--text-2); }
.cd-tab-summary { margin: 0; padding: 8px 16px; border-bottom: 1px solid var(--border); font-size: var(--fs-ui); color: var(--text-2); font-variant-numeric: tabular-nums; }
.cd-hs { display: inline-flex; align-items: center; gap: 5px; color: var(--text-1); }
.cd-hs-dot { width: 8px; height: 8px; border-radius: 2px; background: var(--text-3); }
.cd-hs-aws { background: var(--aws); } .cd-hs-azure { background: var(--azure); } .cd-hs-gcp { background: var(--gcp); }
.cd-hs-ovh { background: var(--ovh); } .cd-hs-stackit { background: var(--stackit); }
/* Text in Textfarbe, der Status-Ton nur im Punkt — die Status-Tokens erreichen dunkel als
   Schrift auf der Kartenflaeche kein AA (axe im lokalen Durchlauf). */
.cd-status {
  display: inline-flex; align-items: center; gap: 6px; padding: 2px 9px; border-radius: 999px;
  font-size: var(--fs-meta); font-weight: 500; background: var(--bg-card2); color: var(--text-1);
}
.cd-status::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--cd-status-dot, var(--text-3)); }
.cd-status-lead { --cd-status-dot: var(--lead); } .cd-status-prop { --cd-status-dot: var(--proposal); } .cd-status-won { --cd-status-dot: var(--won); }
.cd-status-running { --cd-status-dot: var(--running); } .cd-status-warn { --cd-status-dot: var(--warning); }
.cd-staff { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-meta); font-weight: 500; white-space: nowrap; }
.cd-staff-dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.cd-staff-voll { color: var(--success); } .cd-staff-teil { color: var(--warning); } .cd-staff-fehlt { color: var(--danger); }
.cd-tab-foot { padding: 10px 16px; border-top: 1px solid var(--border); }
.cd-more-link, .cd-invite-btn {
  font: inherit; font-weight: 600; color: var(--primary-text); background: none; border: 0; padding: 2px; cursor: pointer;
}
.cd-more-link:hover, .cd-invite-btn { text-decoration: underline; }
.cd-more-link:focus-visible, .cd-invite-btn:focus-visible { outline: 2px solid var(--primary-text); outline-offset: 2px; }
.cd-invite { padding: 18px 16px; color: var(--text-2); font-size: var(--fs-body); }
.cd-all { padding: 6px 16px 14px; border-top: 1px solid var(--border); }
@media (max-width: 1100px) {
  .cd-item { grid-template-columns: minmax(0, 1fr) auto auto; }
  .cd-item-hs, .cd-item-staff, .cd-item-budget, .cd-item-owner { display: none; }
}

/* Status + Ausblick */
/* 1px-Fugen aus dem Rahmengrund: keine Randregeln je Kachelposition noetig. */
.cd-ktiles { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--border); border: 1px solid var(--border); border-radius: var(--radius-sm); overflow: hidden; }
.cd-tile-k { padding: 12px 14px; min-width: 0; background: var(--bg-card); }
.cd-tile-wide { grid-column: 1 / -1; }
.cd-k-label { font-size: var(--fs-ui); color: var(--text-2); }
.cd-k-label span[title] { border-bottom: 1px dotted var(--text-3); cursor: help; }
.cd-k-value { font-size: var(--fs-title); font-weight: 600; margin-top: 2px; color: var(--text-1); }
.cd-k-value small { font-size: var(--fs-body); font-weight: 500; color: var(--text-2); }
.cd-bars { display: flex; align-items: flex-end; gap: 6px; height: 52px; margin-top: 10px; }
.cd-bar { flex: 1; min-height: 2px; background: color-mix(in srgb, var(--primary) 70%, var(--bg-card)); border-radius: 2px 2px 0 0; }
.cd-bars-future .cd-bar { background: transparent; border: 1.5px dashed var(--primary-text); border-bottom: 0; }
.cd-bar-labels { display: flex; gap: 6px; margin-top: 4px; font-size: var(--fs-label); color: var(--text-2); }
.cd-bar-labels span { flex: 1; text-align: center; }
.cd-split { display: flex; height: 8px; margin-top: 10px; border-radius: 4px; overflow: hidden; background: color-mix(in srgb, var(--primary) 35%, var(--bg-card)); }
.cd-split span { background: var(--primary); }
.cd-split-legend { display: flex; gap: 14px; margin-top: 6px; font-size: var(--fs-meta); color: var(--text-2); }
.cd-split-legend i { display: inline-block; width: 9px; height: 9px; margin-right: 5px; border-radius: 2px; vertical-align: -1px; }
.cd-sw-in { background: var(--primary); } .cd-sw-ex { background: color-mix(in srgb, var(--primary) 35%, var(--bg-card)); }
.cd-warn-note { margin-top: 8px; font-size: var(--fs-meta); color: var(--warning); }

/* PR1.434 (#667) — Foto/Initialen im Team beim Kunden und das ⓘ am Ausblick. */
.cd-item-person, .cd-team-person { display: flex; align-items: center; gap: 10px; min-width: 0; }
.cd-team-person { gap: 8px; }
.cd-item-person .emp-avatar, .cd-team-person .emp-avatar { flex: 0 0 auto; }
.cd-hint { margin-right: auto; align-self: center; }
.cd-hint .fh-pop { right: auto; width: 18rem; max-width: 70vw; }
.cd-warn-note a { color: inherit; text-decoration: underline; }
.fh-btn--icon > .fh-icon { width: auto; height: auto; border: 0; border-radius: 0; font-size: var(--fs-body); }
.fh-btn--icon > .fh-icon svg { width: 1rem; height: 1rem; }
.cd-forecast { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; }
.cd-ol-block { margin-top: 14px; }
.cd-ol-block h4 { margin: 0 0 4px; font-size: var(--fs-body); }
.cd-ol-text { margin: 0; font-size: var(--fs-body); white-space: pre-line; overflow-wrap: anywhere; }
.cd-ol-view[hidden], .cd-ol-form[hidden], .cd-ol-edit[hidden] { display: none; }
.cd-ol-edit { margin-top: 10px; font: inherit; font-size: var(--fs-ui); font-weight: 500; color: var(--primary-text); background: none; border: 0; padding: 2px; text-decoration: underline; cursor: pointer; }
.cd-ol-edit:focus-visible { outline: 2px solid var(--primary-text); outline-offset: 2px; }
.cd-ol-form { display: flex; flex-direction: column; gap: 6px; margin-top: 14px; font-size: var(--fs-body); }
.cd-ol-form textarea { width: 100%; font: inherit; padding: 8px; color: var(--text-1); background: var(--bg-input); border: 1px solid var(--border); border-radius: var(--radius-sm); resize: vertical; }
.cd-ol-actions { display: flex; gap: 8px; margin-top: 4px; }

/* Weitere Angaben */
.cd-more { margin-top: 16px; background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); }
.cd-more > summary { padding: 12px 16px; font-weight: 600; cursor: pointer; }
.cd-more > summary:focus-visible { outline: 2px solid var(--primary-text); outline-offset: -2px; }
.cd-more-body { padding: 4px 16px 8px; }

/* Lade-Skelett */
.cd-skel { display: block; height: 12px; margin: 10px 0; border-radius: 4px; background: var(--bg-card2); }
.cd-skel-card { min-height: 160px; }
.cd-skel-band { min-height: 108px; }

.cd-section { margin-bottom: 24px; }
/* PR1.438 — look comes from the shared section-head rule. */
.cd-section-title { margin: 0 0 10px; }
.cd-group { margin-bottom: 14px; }
.cd-group-title { margin-bottom: 6px; } /* PR1.438 — look from the shared section-head rule */
.cd-count { color: var(--text-secondary); font-weight: 400; }
.cd-row { display: flex; gap: 12px; padding: 4px 0; border-bottom: 1px dashed var(--border); font-size: var(--fs-body); }
.cd-row-label { flex: 0 0 40%; color: var(--text-secondary); }
.cd-row-value { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.cd-dash { color: var(--text-3, var(--text-secondary)); }
.cd-muted { color: var(--text-secondary); font-size: var(--fs-meta); }
.cd-note { margin-bottom: 8px; }
.cd-legend { margin-bottom: 8px; }

.cd-empty, .cd-locked {
  color: var(--text-secondary);
  font-size: var(--fs-body);
  padding: 10px 0;
}
.cd-empty-page { padding: 24px 0; }

.cd-list { list-style: none; margin: 0; padding: 0; }
.cd-list li { display: flex; gap: 10px; justify-content: space-between; padding: 4px 0; font-size: var(--fs-body); }
/* PR1.377 (#596) — Kopf der langen Abgeschlossen-Liste als echter Button; keine Transition. */
.cd-group-toggle {
  display: inline-flex; align-items: center; gap: 6px; padding: 2px 4px; margin-left: -4px;
  font: inherit; font-weight: 500; font-size: var(--fs-body); color: inherit;
  background: none; border: 0; border-radius: var(--radius-sm); cursor: pointer;
}
.cd-group-toggle:hover { background: var(--bg-hover); }
.cd-group-toggle:focus-visible { outline: 2px solid var(--primary-text); outline-offset: 2px; }
.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-secondary); }
.cd-group-toggle[aria-expanded="true"] .cd-chev::before { transform: rotate(90deg); }
.cd-list[hidden] { display: none; }
/* Mehrere Team-Tabellen untereinander: feste Spaltenbreiten, damit die Spalten fluchten. */
.cd-team-table { table-layout: fixed; }
.cd-team-table th:nth-child(1) { width: 20%; }
.cd-team-table th:nth-child(2) { width: 18%; }
.cd-team-table th:nth-child(3) { width: 10%; }
.cd-team-table th:nth-child(4) { width: 26%; }
.cd-team-table th, .cd-team-table td { white-space: normal; overflow-wrap: break-word; }

.cd-table { width: 100%; border-collapse: collapse; font-size: var(--fs-body); }
.cd-table th, .cd-table td { text-align: left; padding: 6px 8px; border-bottom: 1px solid var(--border); }
.cd-table th { color: var(--text-secondary); font-weight: 500; font-size: var(--fs-meta); }

.cd-link { color: var(--primary-text); text-decoration: none; } /* PR1.376: --primary dunkel 4.1:1 < AA */
.cd-link:hover, .cd-link:focus-visible { text-decoration: underline; }

.cd-portfolio {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 4px 16px;
}
.cd-pf { display: flex; align-items: center; gap: 8px; padding: 5px 0; font-size: var(--fs-body); }
.cd-pf-dot { width: 9px; height: 9px; border-radius: 50%; flex: 0 0 auto; background: var(--text-3, var(--text-secondary)); }
.cd-pf-bezogen .cd-pf-dot { background: var(--emerald, #10b981); }
.cd-pf-nicht-bezogen .cd-pf-dot { background: transparent; border: 2px solid var(--text-2); }
.cd-pf-label { flex: 1; min-width: 0; }
.cd-pf-state { font-size: var(--fs-label); color: var(--text-secondary); }
.cd-pf-driftmark { font-size: var(--fs-label); padding: 1px 6px; border-radius: 8px; border: 1px solid var(--primary); color: var(--primary); }

/* ── PR1.376 (#595) / PR1.407 (#637) Cloud Journey als Weg — klassisches Gesicht ─────
   Sechs Stationen auf einer Linie (Buttons; Klick/Enter klappt die Vorgaenge auf). Der
   Fuellstand der Linie reicht bis zur letzten erreichten/laufenden Station (--cj-fill).
   erreicht = gefuellt, laufend = hervorgehoben mit Ring, offen = grau/gestrichelt. Der Stand
   steht als Wort in der Zaehlzeile. Darunter Marken auf der Zeitachse. Kein Uebergang. */
.cd-cj-wrap { container-type: inline-size; }
.cd-cj {
  position: relative; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 4px;
  padding-top: 4px;
}
.cd-cj::before, .cd-cj::after {
  content: ''; position: absolute; top: 25px; left: calc(100% / 12); height: 3px; border-radius: 2px;
}
.cd-cj::before { right: calc(100% / 12); background: var(--border); }
.cd-cj::after { width: calc((100% - 100% / 6) * var(--cj-fill-n, 0)); background: var(--primary-text); }
.cd-cj-tile {
  position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: 4px; min-width: 0;
  padding: 0 4px 6px; font: inherit; text-align: center; color: var(--text-1);
  background: none; border: 0; border-radius: var(--radius-sm); cursor: pointer;
}
.cd-cj-dot {
  display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 50%;
  color: var(--text-2); background: var(--bg-card); border: 2px dashed var(--border);
}
.cd-cj-station.is-reached .cd-cj-dot { color: #fff; background: var(--primary-text); border: 2px solid var(--primary-text); }
.cd-cj-station.is-current .cd-cj-dot {
  color: var(--primary-text); background: var(--bg-card); border: 2px solid var(--primary-text);
  box-shadow: 0 0 0 5px color-mix(in srgb, var(--primary-text) 20%, transparent);
}
.cd-cj-station.is-current .cd-cj-cc { color: var(--primary-text); }
.cd-cj-tile:hover .cd-cj-cc { text-decoration: underline; }
.cd-cj-tile:focus-visible { outline: 2px solid var(--primary-text); outline-offset: 2px; }
.cd-cj-tile[aria-expanded="true"] .cd-cj-dot { outline: 2px solid var(--primary-text); outline-offset: 3px; }
.cd-cj-cc { margin-top: 4px; font-weight: 500; font-size: var(--fs-ui); line-height: 1.25; overflow-wrap: break-word; hyphens: auto; }
.cd-cj-counts { font-size: var(--fs-label); color: var(--text-2); }
.cd-cj-placeholder { cursor: default; color: var(--text-3); }
.cd-cj-stage {
  display: inline-block; font-size: var(--fs-label); font-weight: 500; padding: 1px 8px; border-radius: 999px;
  border: 1px solid currentColor; background: var(--bg-card);
}
.cd-cj-stage-closed { color: var(--success); }
.cd-cj-stage-running { color: var(--accent); }
.cd-cj-stage-offered { color: var(--info); }
.cd-cj-stage-empty { color: var(--text-2); border-style: dashed; }
.cd-cj-panel { margin-top: 12px; padding: 12px; border: 1px solid var(--border); border-radius: var(--radius-sm); }
.cd-cj-panel-title { font-weight: 600; margin-bottom: 8px; }
.cd-cj-items { list-style: none; margin: 0; padding: 0; }
.cd-cj-item {
  display: grid; grid-template-columns: 104px minmax(0, 1fr) minmax(0, 1fr) auto; gap: 12px;
  align-items: center; padding: 6px 0; border-top: 1px solid var(--border); font-size: var(--fs-body);
}
.cd-cj-item:first-child { border-top: 0; }
.cd-cj-type { font-size: var(--fs-label); color: var(--text-2); }
.cd-cj-elements { font-size: var(--fs-ui); color: var(--text-2); }
.cd-cj-unassigned { margin-top: 12px; }
.cd-cj-unassigned .cd-link { text-decoration: underline; }

/* Marken auf der Zeitachse */
.cd-cj-axis { margin-top: 16px; padding-top: 10px; border-top: 1px solid var(--border); }
.cd-cj-lane { display: grid; grid-template-columns: 72px minmax(0, 1fr); gap: 8px; align-items: center; min-height: 30px; }
.cd-cj-lane-label { font-size: var(--fs-meta); color: var(--text-2); }
.cd-cj-lane-track { position: relative; height: 26px; }
.cd-cj-ticks .cd-cj-lane-track { height: 18px; }
.cd-cj-tick { position: absolute; top: 0; padding-left: 4px; border-left: 1px solid var(--border); font-size: var(--fs-label); color: var(--text-2); white-space: nowrap; }
.cd-cj-now { position: absolute; top: 0; bottom: -60px; width: 2px; margin-left: -1px; background: var(--primary-text); opacity: .5; }
.cd-cj-lane-empty { font-size: var(--fs-meta); color: var(--text-3); line-height: 26px; }
.cd-cj-mark {
  position: absolute; top: 2px; height: 22px; min-width: 6px; padding: 0 6px; overflow: hidden;
  font: inherit; font-size: var(--fs-meta); text-align: left; white-space: nowrap; text-overflow: ellipsis; cursor: pointer;
  color: var(--text-1); background: color-mix(in srgb, var(--primary) 18%, var(--bg-card));
  border: 1px solid color-mix(in srgb, var(--primary) 40%, var(--bg-card)); border-radius: 4px;
}
.cd-cj-mark span { overflow: hidden; text-overflow: ellipsis; display: block; }
.cd-cj-lane-track.has-slots-2 { height: 52px; }
.cd-cj-lane-track.has-slots-3 { height: 78px; }
.cd-cj-mark.is-slot-1 { top: 28px; }
.cd-cj-mark.is-slot-2 { top: 54px; }
.cd-cj-mark-closed { background: var(--bg-card2); border-color: var(--border); color: var(--text-2); }
.cd-cj-mark-opp { background: var(--bg-card); border-style: dashed; border-color: var(--text-3); }
.cd-cj-mark:hover { border-color: var(--primary-text); }
.cd-cj-mark:focus-visible { outline: 2px solid var(--primary-text); outline-offset: 2px; z-index: 2; }
.cd-cj-undated { margin-top: 8px; }
@container (max-width: 560px) {
  .cd-cj { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 14px; }
  .cd-cj::before, .cd-cj::after { display: none; }
  .cd-cj-item { grid-template-columns: minmax(0, 1fr) auto; }
  .cd-cj-type, .cd-cj-elements { grid-column: 1 / -1; }
}

.cd-timeline { list-style: none; margin: 0; padding: 0; }
.cd-tl { display: flex; gap: 12px; padding: 5px 0; border-bottom: 1px dashed var(--border); font-size: var(--fs-body); }
.cd-tl-date { flex: 0 0 90px; color: var(--text-secondary); }
.cd-tl-label { flex: 1; min-width: 0; }

@media (max-width: 720px) {
  .cd-hero { grid-template-columns: 1fr; grid-template-areas: "back" "main" "actions" "stamp"; }
  .cd-row { flex-direction: column; gap: 2px; }
  .cd-row-label { flex: none; }
}

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

   Zwilling der `.crm .dcp-*`-Regeln in style-redesign.css. Gleiche Struktur,
   gleiche Klassennamen, Formensprache der klassischen Shell. Hier gilt kein
   ui-craft-Ratchet, deshalb px statt rem — konsistent mit dem Rest dieser Datei.
   ═══════════════════════════════════════════════════════════════════════════ */

.dcp-body > * + * { margin-top: 14px; }
.dcp-body .card { padding: 16px; }

.dcp-label {
  display: block;
  font-size: var(--fs-body);
  font-weight: 500;
  color: var(--text-secondary);
  margin-bottom: 6px;
}

.dcp-frage-zeile { display: flex; gap: 10px; align-items: flex-start; }

.dcp-input {
  flex: 1;
  min-width: 0;
  padding: 8px 12px;
  font: inherit;
  font-size: var(--fs-body);
  color: var(--text-primary);
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-radius: 6px;
  resize: vertical;
}

.dcp-hint { margin-top: 8px; font-size: var(--fs-ui); color: var(--text-3); }
.dcp-beispiele { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }

/* Die Beispielfragen sind Knoepfe, keine Fliesstext-Zeile. Ohne eigenen Rahmen sahen
   sie in der klassischen Shell aus wie Text und wurden nicht als anklickbar gelesen. */
.dcp-beispiel {
  padding: 5px 10px;
  font-size: var(--fs-body);
  color: var(--text-secondary);
  background: var(--bg-card2);
  border: 1px solid var(--border);
  border-radius: 6px;
  cursor: pointer;
}
.dcp-beispiel:hover { color: var(--text-primary); background: var(--bg-hover); border-color: var(--border-light); }

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

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

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

.dcp-zeile {
  display: grid;
  grid-template-columns: minmax(112px, max-content) 1fr;
  gap: 8px 12px;
  align-items: start;
  padding: 7px 0;
  border-top: 1px solid var(--border);
}
.dcp-zeile:first-of-type { border-top: 0; }

.dcp-zeile-titel {
  font-size: var(--fs-ui);
  font-weight: 500;
  color: var(--text-3);
  padding-top: 5px;
}

.dcp-zeile-chips { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.dcp-chip-wrap { display: inline-flex; align-items: center; gap: 2px; }

.dcp-chip {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  padding: 5px 10px;
  font: inherit;
  font-size: var(--fs-body);
  color: var(--text-primary);
  background: var(--bg-card2);
  border: 1px solid var(--border);
  border-radius: 6px;
  cursor: pointer;
}
.dcp-chip:hover { background: var(--bg-hover); }
.dcp-chip.is-open { border-color: var(--primary); }
.dcp-chip.is-missing { border-color: var(--warning); }
.dcp-chip.is-invalid { border-color: var(--danger); }

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

.dcp-chip-x {
  padding: 2px 5px;
  font: inherit;
  line-height: 1;
  color: var(--text-3);
  background: transparent;
  border: 0;
  border-radius: 4px;
  cursor: pointer;
}
.dcp-chip-x:hover { color: var(--danger); background: var(--bg-hover); }

.dcp-add {
  padding: 5px 10px;
  font: inherit;
  font-size: var(--fs-body);
  color: var(--text-secondary);
  background: transparent;
  border: 1px dashed var(--border-light);
  border-radius: 6px;
  cursor: pointer;
}
.dcp-add:hover:not(:disabled) { color: var(--text-primary); border-color: var(--text-3); }
.dcp-add:disabled { opacity: 0.45; cursor: not-allowed; }

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

.dcp-editor {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(176px, 1fr));
  gap: 8px 12px;
  align-items: end;
  margin-top: 10px;
  padding: 12px;
  background: var(--bg-card2);
  border: 1px solid var(--border);
  border-radius: 6px;
}

.dcp-control {
  width: 100%;
  padding: 6px 8px;
  font: inherit;
  font-size: var(--fs-body);
  color: var(--text-primary);
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-radius: 6px;
}

.dcp-check { display: flex; align-items: center; gap: 6px; font-size: var(--fs-body); color: var(--text-secondary); }

.dcp-band {
  display: inline-block;
  padding: 3px 8px;
  font-size: var(--fs-ui);
  font-weight: 500;
  border-radius: 6px;
  background: var(--bg-card2);
  color: var(--text-secondary);
}
.dcp-band-hoch { color: var(--success-light); }
.dcp-band-mittel { color: var(--warning); }
.dcp-band-niedrig { color: var(--danger); }

.dcp-missing-note { margin-left: 10px; font-size: var(--fs-body); color: var(--text-3); }
.dcp-missing-list { margin: 8px 0 0; padding-left: 18px; font-size: var(--fs-body); color: var(--text-secondary); }

.dcp-rueckfrage-titel,
.dcp-fehler-titel,
.dcp-leer-titel {
  font-size: var(--fs-body);
  font-weight: 500;
  color: var(--text-primary);
  margin-bottom: 6px;
}
.dcp-rueckfrage-text,
.dcp-fehler-text { margin: 0 0 10px; font-size: var(--fs-body); color: var(--text-secondary); }
.dcp-leer-hinweis { font-size: var(--fs-body); color: var(--text-3); }

/* PR1.323 (#532) — Hinweiskasten unter einer Auswertung.
   Die Klasse gab es seit PR1.270 im Markup (Kuerzungsmeldung), aber ohne eine einzige
   Regel: der Satz stand dort als gewoehnlicher Fliesstext, nicht als Hinweis erkennbar.
   Aufgefallen beim Einhaengen des Sicht-Hinweises, mitgestaltet auf Entscheid des
   Auftraggebers (12.09.2026) — das Pendant `.warn-box` im Redesign ist seit RD1.x gesetzt.

   Bewusst OHNE farbigen Seitenstreifen: die Farbe sitzt am ganzen Rahmen. Der Grund bleibt
   `--bg-card2`, damit der Textkontrast der bewaehrte bleibt und nicht neu zu belegen ist —
   Farbe auf dem Grund haette die Lesbarkeit angefasst, und das ist kein Nebeneffekt, den
   ein Hinweis rechtfertigt. Ruhig statt laut (Design-Prinzip 1: Dichte vor Dekoration). */
.dcp-warnung {
  margin: 10px 0;
  padding: 8px 12px;
  background: var(--bg-card2);
  border: 1px solid var(--warning);
  border-radius: 6px;
  font-size: var(--fs-ui);
  color: var(--text-primary);
}

.dcp-fehler-wege { display: flex; flex-wrap: wrap; gap: 6px; }
.dcp-request { margin-top: 8px; font-size: var(--fs-ui); color: var(--text-3); }
.dcp-laedt { color: var(--text-secondary); }

.dcp-tabelle { overflow-x: auto; }
.dcp-tabelle table { width: 100%; }

/* ── PR1.270 (#464) — Diagramm-Baukasten ────────────────────────────────────
   Gilt fuer beide Shells; das Redesign ueberschreibt in style-redesign.css nur
   Farben und Abstaende. Die Geometrie der Diagramme steckt im SVG (chart-kit.js),
   hier steht ausschliesslich die Umgebung: Leiste, Legende, Kacheln, Namensliste.

   KEINE Bewegung: kein transition, kein @keyframes. Ein Auswertungsbild soll
   sofort dastehen — wer Zahlen vergleicht, wartet nicht gern auf sie. */

.ck-leiste {
    display: flex;
    flex-wrap: wrap;
    gap: 0.375rem;
    margin: 0.75rem 0;
}

.ck-typ.is-active {
    background: var(--primary);
    border-color: var(--primary);
    color: #fff;
}

.ck-bild {
    margin-top: 0.5rem;
}

/* Das SVG passt sich der Breite an, statt einen zweiten Scroll-Bereich aufzumachen.
   Die Diagramme wachsen deshalb nach UNTEN (liegende Balken), nicht nach rechts. */
.ck-svg {
    display: block;
    width: 100%;
    max-width: 100%;
    height: auto;
}

.ck-el {
    cursor: pointer;
}

.ck-el:hover .ck-bar,
.ck-el:hover .ck-arc,
.ck-el:hover .ck-cell,
.ck-el:hover .ck-tile {
    fill-opacity: 0.75;
    stroke-opacity: 0.75;
}

/* Die Baender liegen bei 0.45 — beim Ueberfahren treten sie hervor, statt blasser
   zu werden wie die flaechigen Formen darueber. */
.ck-el:hover .ck-flow {
    fill-opacity: 0.85;
}

.ck-el:hover .ck-dot {
    r: 7;
}

.ck-el:focus-visible {
    outline: 0.125rem solid var(--primary);
    outline-offset: 0.125rem;
}

/* Elemente ohne Rueckweg zu einzelnen Datensaetzen: sichtbar, aber nicht bedienbar.
   Der Grund steht im Tooltip — ein toter Klick waere schlimmer als gar keiner. */
.ck-el-tot {
    cursor: default;
}

.ck-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem 1rem;
    list-style: none;
    margin: 0.5rem 0 0;
    padding: 0;
    font-size: var(--fs-ui);
}

.ck-legend-item {
    display: flex;
    align-items: center;
    gap: 0.375rem;
}

.ck-swatch {
    width: 0.75rem;
    height: 0.75rem;
    border-radius: 0.125rem;
    flex: 0 0 auto;
}

.ck-kacheln {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    margin-top: 0.5rem;
}

/* Bewusst OHNE eigene Flaeche: die Kacheln stehen bereits IN der Ergebniskarte, und
   eine Karte in der Karte ist immer falsch. Getrennt wird ueber Abstand, nicht ueber
   einen zweiten Rahmen — das ist zugleich dichter (Design-Prinzip 1). */
.ck-kachel {
    flex: 1 1 12rem;
    padding: 0.25rem 0;
}

.ck-kachel-wert {
    font-size: var(--fs-display);
    font-weight: 600;
    line-height: 1.2;
}

.ck-kachel-label {
    margin-top: 0.25rem;
    font-size: var(--fs-ui);
    opacity: 0.75;
}

.ck-leer {
    padding: 1.5rem;
    text-align: center;
    opacity: 0.8;
}

.ck-sort {
    background: none;
    border: 0;
    padding: 0;
    font: inherit;
    color: inherit;
    cursor: pointer;
    text-align: inherit;
}

.ck-sort:focus-visible {
    outline: 0.125rem solid var(--primary);
    outline-offset: 0.125rem;
}

/* Die Namensliste hinter einem Diagramm-Element. */
.ck-drill {
    margin-top: 1rem;
    padding-top: 0.75rem;
    border-top: 0.0625rem solid var(--border);
}

.ck-drill-kopf {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 0.5rem;
}

.ck-drill-titel {
    margin: 0;
    font-size: var(--fs-body);
    font-weight: 500;
}

.ck-drill-liste {
    display: flex;
    flex-wrap: wrap;
    gap: 0.375rem 1rem;
    list-style: none;
    margin: 0;
    padding: 0;
    font-size: var(--fs-body);
}

.ck-drill-item {
    flex: 0 1 16rem;
}

.ck-drill-link {
    background: none;
    border: 0;
    padding: 0;
    font: inherit;
    color: var(--primary-text, var(--primary));
    cursor: pointer;
    text-align: left;
    text-decoration: underline;
}

.ck-drill-link:focus-visible {
    outline: 0.125rem solid var(--primary);
    outline-offset: 0.125rem;
}

.ck-drill-leer,
.ck-drill-hinweis {
    margin: 0.25rem 0 0;
    font-size: var(--fs-ui);
    opacity: 0.8;
}
/* ── PR1.286 (#484) — Freigabe-Rueckfrage fuer Kundenseiten-Abrufe ──────────
   Ein Regelsatz fuer BEIDE Shells: beide laden style.css, das Redesign
   ueberschreibt darueber nur die Token-Werte im .crm-Scope. Deshalb stehen hier
   ausschliesslich var(--…) und keine festen Farben — sonst saehe das Fenster in
   der Redesign-Shell aus wie ein Alt-Design-Einsprengsel (Konvention 20, Punkt 5). */
.website-consent-body { font-size: var(--fs-body); line-height: 1.55; }
.website-consent-body p { margin: 0 0 10px; }
.website-consent-lead { color: var(--text-2); }

.website-consent-list { margin: 0 0 12px; padding-left: 20px; }
.website-consent-list li { margin-bottom: 4px; }
.website-consent-list code,
.website-consent-limits code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace; /* PR1.437 Ausnahme: Code-Ausschnitt */
  font-size: var(--fs-ui);
  padding: 1px 5px;
  border-radius: 4px;
  background: var(--bg-card2);
  border: 1px solid var(--border);
}

.website-consent-limits { padding: 10px 12px; border-radius: 8px; background: var(--bg-card2); border: 1px solid var(--border); }
.website-consent-agent { color: var(--text-2); font-size: var(--fs-body); }

/* Das Haekchen ist die Bedingung fuer "Freigeben" — es bekommt deshalb die
   optische Betonung, nicht der gesperrte Knopf. */
.website-consent-check {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  cursor: pointer;
  margin: 14px 0 8px;
  padding: 12px;
  border: 1px solid var(--border-light);
  border-radius: 8px;
}
.website-consent-check input { margin-top: 3px; flex-shrink: 0; }
.website-consent-check:hover { border-color: var(--primary); }
.website-consent-check:focus-within { outline: 2px solid var(--primary); outline-offset: 2px; }

.website-consent-note { color: var(--text-3); font-size: var(--fs-ui); margin: 0; }
.website-consent-error { color: var(--danger); }

/* Der gesperrte Knopf muss als gesperrt LESBAR sein, nicht nur nicht klickbar —
   sonst haelt der Nutzer den Dialog fuer kaputt statt fuer wartend.

   Die Regel haengt am KNOPF, nicht am Schleier: das Fenster wird auch in einen
   fremden Rahmen eingebaut (Stufe 1b des Anreicherns liegt in
   .enrich-account-overlay, nicht in .website-consent-veil). Am Schleier
   festgemacht griffe sie dort nicht — genau das war beim ersten Anlauf der Fall
   und fiel erst in der Pruefseite auf. */
.btn[data-consent-grant][disabled] { opacity: 0.5; cursor: not-allowed; }

/* PR1.286 (#484) — Knopfzeile der Logo-Sektion in der Kundenmaske.
   Zwei Knoepfe nebeneinander statt uebereinander; `hidden` statt display:none
   im JS, damit die Zeile ihre Hoehe behaelt und nichts springt, wenn ein Knopf
   verschwindet. */
.acc-logo-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 8px; }
.acc-logo-actions [hidden] { display: none; }

/* ── PR1.286 (#484) — Nutzerverwaltung ─────────────────────────────────────
   Ein Regelsatz fuer BEIDE Shells (beide laden style.css; das Redesign
   ueberschreibt darueber nur Token-Werte im .crm-Scope). Nur var(--…), keine
   festen Farben. */
.admin-users-erklaerung {
  margin: 0 0 12px; padding: 10px 12px; border-radius: 8px;
  background: var(--bg-card2); border: 1px solid var(--border);
  color: var(--text-2); font-size: var(--fs-body); line-height: 1.5;
}
.admin-users-suche { display: inline-flex; align-items: center; }
.admin-users-suche input {
  min-width: 240px; padding: 6px 10px; border-radius: 6px;
  border: 1px solid var(--border); background: var(--bg-input, var(--bg-card2));
  color: var(--text-primary); font-size: var(--fs-body);
}
.admin-users-suche input:focus-visible,
.admin-users-select:focus-visible,
.admin-sort:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }

.admin-users-bulk { display: inline-flex; gap: 6px; align-items: center; margin-left: auto; }
.admin-users-bulk select { padding: 5px 8px; border-radius: 6px; border: 1px solid var(--border);
  background: var(--bg-input, var(--bg-card2)); color: var(--text-primary); font-size: var(--fs-ui); }

/* Die Auswahlfelder in der Zeile bleiben schmal: acht Spalten passen sonst in
   keine reale Fensterbreite, und ausgerechnet die Aktionsspalte landete hinter
   dem Scrollrand (im Bildbeleg der Prüfseite gut zu sehen). 150px reichen für
   „Editor (BD-Manager)" mit Kürzung, und der volle Wert steht im title. */
.admin-users-select {
  padding: 5px 8px; border-radius: 6px; border: 1px solid var(--border);
  background: var(--bg-input, var(--bg-card2)); color: var(--text-primary); font-size: var(--fs-ui);
  width: 100%; max-width: 150px; min-width: 96px;
}

.admin-users-status { margin: 8px 0; font-size: var(--fs-ui); color: var(--text-2); }
.admin-users-status.is-error { color: var(--danger); }

/* Skeleton statt einer einzelnen Zeile: eine Ein-Zeilen-Liste sieht aus wie
   "ein Konto im System" und nicht wie "wird geladen". */
.admin-users-skeleton { display: flex; flex-direction: column; gap: 8px; padding: 8px 0; }
.admin-users-skeleton .skeleton-row {
  height: 34px; border-radius: 6px;
  background: var(--bg-card2); border: 1px solid var(--border);
}
.admin-users-leer { padding: 24px; text-align: center; color: var(--text-2); }
.admin-users-mehr { padding: 10px 0; text-align: center; }

.admin-users-pick { width: 36px; text-align: center; }
.admin-users-table tr.is-geaendert { background: var(--bg-hover, var(--bg-card2)); }
.admin-users-table tr.is-gesperrt { opacity: .65; }
.admin-users-warnung { display: block; margin-top: 4px; font-size: var(--fs-label); color: var(--warning, var(--text-2)); }
/* ═══════════════════════════════════════════════════════════════════════════
   PR1.544 (#825) — Nutzerverwaltung: Rollen-Legende, Zustands-Chips, Person-Zelle
   und Seitenfenster je Person (admin-user-drawer.js). Beide Shells laden diese
   Datei; style-redesign.css setzt im `.crm`-Scope nur die Farben um.
   Motion-Budget: Verwalter-Werkzeug, wenige Male pro Woche → eine kurze
   Einblendung des Fensters, abgeschaltet bei prefers-reduced-motion.
   ═══════════════════════════════════════════════════════════════════════════ */
.aud-filterleiste {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 10px 20px; margin: 8px 0 10px;
}
.aud-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.aud-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px; border: 1px solid var(--border); border-radius: 999px;
  background: transparent; color: var(--text-2); font: inherit; font-size: var(--fs-ui); cursor: pointer;
}
.aud-chip:hover { border-color: var(--border-light); color: var(--text-1); }
.aud-chip[aria-pressed="true"] { border-color: var(--primary); color: var(--text-1); background: var(--bg-card2); font-weight: 600; }
.aud-chip-red { color: var(--danger); }
.aud-chip-red[aria-pressed="true"] { border-color: var(--danger); color: var(--danger); }
.aud-chip:focus-visible, .aud-menue:focus-visible, .aud-zu:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.aud-chip-zahl { font-variant-numeric: tabular-nums; color: var(--text-3); font-weight: 500; }
.aud-chip[aria-pressed="true"] .aud-chip-zahl { color: inherit; }

.aud-legende { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: var(--fs-ui); }
.aud-legende-titel { color: var(--text-3); }
.aud-legende ul { display: flex; flex-wrap: wrap; gap: 6px 14px; list-style: none; margin: 0; padding: 0; }
.aud-legende li { display: inline-flex; align-items: center; gap: 4px; }

/* Rollenmarke: Punkt + Name. Die Farbe ist Zugabe, der Name traegt die Aussage. */
.aud-rolle { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; color: var(--text-1); white-space: nowrap; }
.aud-punkt { width: 8px; height: 8px; border-radius: 50%; background: currentColor; flex: none; }
.aud-ton-violet .aud-punkt { color: var(--purple); }
.aud-ton-blue .aud-punkt   { color: var(--info); }
.aud-ton-grey .aud-punkt   { color: var(--text-2); }
.aud-ton-muted             { color: var(--text-3); font-weight: 500; }
.aud-ton-muted .aud-punkt  { background: transparent; border: 1px solid var(--text-3); }

/* Breite: bei 1280 px darf die Seite nicht quer scrollen. Die Tabelle passt sich an
   (Rollen und Zustand duerfen umbrechen); reicht das nicht, scrollt nur die Tabelle. */
#crm-admin-users-mount, #admin-users-table { position: relative; max-width: 100%; overflow-x: auto; }
/* Die alte Aktionsleiste brauchte 190 px; jetzt steht dort nur noch ein Knopf. */
#crm-admin-users-mount td.admin-users-actions, #admin-users-table td.actions { min-width: 0; width: 1%; white-space: nowrap; }
/* PR1.570 — .admin-users-actions (unten, display:flex fuer die alte Leiste) nahm die Zelle aus
   dem Tabellenlayout: Spalte 29 px, der Knopf ragte 17 px aus der Zeile. Zurueck zur Tabellenzelle. */
#crm-admin-users-mount td.admin-users-actions { display: table-cell; text-align: right; }
#crm-admin-users-mount th.admin-users-actions-kopf { width: 1%; }
.aud-person-name { overflow-wrap: anywhere; }
#crm-admin-users-mount .tbl td, #crm-admin-users-mount .tbl th,
#admin-users-table td, #admin-users-table th { white-space: normal; }
td .aud-rolle { white-space: normal; align-items: baseline; }
td .aud-rolle .aud-punkt { transform: translateY(-1px); }
td .status-pill { white-space: nowrap; }

/* Person-Zelle */
.aud-person { display: flex; align-items: center; gap: 10px; min-width: 0; }
.aud-person-text { display: flex; flex-direction: column; min-width: 0; }
.aud-person-name { font-weight: 600; color: var(--text-1); }
.aud-person-mail { color: var(--text-3); font-size: var(--fs-label); overflow-wrap: anywhere; }
.aud-monogramm {
  flex: none; width: 32px; height: 32px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--bg-card2); color: var(--text-2); border: 1px solid var(--border);
  font-size: var(--fs-label); font-weight: 700; letter-spacing: .02em;
}
.aud-seit { display: block; margin-top: 2px; color: var(--text-3); font-size: var(--fs-label); }
.aud-profil { display: inline-flex; align-items: center; gap: 4px; color: var(--text-2); white-space: nowrap; }
.aud-profil.is-leer { color: var(--text-3); }

/* Zeile: ganz klickbar, sichtbarer Fokus, aktive Zeile hervorgehoben */
tr.aud-zeile { cursor: pointer; }
tr.aud-zeile:hover > td { background: var(--bg-card2); }
tr.aud-zeile:focus-visible { outline: 2px solid var(--primary); outline-offset: -2px; }
tr.aud-zeile.is-aktiv > td { background: var(--bg-card2); }
tr.aud-zeile.is-aktiv > td:first-child { box-shadow: inset 3px 0 0 var(--primary); }
.aud-menue { min-width: 32px; justify-content: center; }

/* Seitenfenster — kein Schleier: die Tabelle bleibt sichtbar und bedienbar. */
.aud {
  position: fixed; top: 0; right: 0; bottom: 0; z-index: 70;
  width: min(420px, 100vw);
  display: flex; flex-direction: column;
  background: var(--bg-card); color: var(--text-1);
  border-left: 1px solid var(--border-light);
  box-shadow: -12px 0 32px rgba(0, 0, 0, .22);
  animation: audEin .16s ease-out;
}
@keyframes audEin { from { transform: translateX(24px); opacity: 0; } to { transform: none; opacity: 1; } }
/* Erst ab breiten Fenstern rueckt die Tabelle zur Seite; darunter liegt das Fenster
   ueber dem rechten Rand, statt die Tabelle in einen Querscroller zu zwingen. */
@media (min-width: 1600px) {
  .aud-host-offen { padding-right: 436px; }
}
.aud-kopf { display: flex; align-items: flex-start; gap: 12px; padding: 18px 18px 14px; border-bottom: 1px solid var(--border); }
.aud-kopf .aud-monogramm { width: 40px; height: 40px; }
.aud-kopf-text { flex: 1; min-width: 0; }
.aud-titel { margin: 0; font-size: var(--fs-section); line-height: 1.3; }
.aud-titel:focus { outline: none; }
.aud-titel:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.aud-mail { color: var(--text-3); font-size: var(--fs-ui); overflow-wrap: anywhere; }
.aud-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin-top: 8px; }
.aud-meta .aud-seit { display: inline; margin: 0; }
.aud-zu { flex: none; }
.aud-body { flex: 1; overflow-y: auto; padding: 0 18px 18px; display: flex; flex-direction: column; }
.aud-abschnitt { padding: 14px 0; border-bottom: 1px solid var(--border); }
.aud-abschnitt:last-child { border-bottom: 0; }
.aud-h { margin: 14px 0 8px; font-size: var(--fs-ui); font-weight: 700; color: var(--text-1); }
.aud-form .aud-h:first-of-type { margin-top: 0; }
.aud-form .form-group { margin-bottom: 12px; }
.aud-konto .aud-h { margin-top: 0; }

.aud-problem {
  margin: 14px 0 0; padding: 12px 14px; border-radius: var(--radius-sm);
  border: 1px solid var(--danger); background: var(--bg-card2);
}
.aud-problem-titel { margin: 0 0 4px; font-size: var(--fs-ui); color: var(--danger); }
.aud-problem p { margin: 0; color: var(--text-1); font-size: var(--fs-ui); line-height: 1.45; }
.aud-knoepfe { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.aud-konto .aud-knoepfe { margin-top: 0; }
.aud-gefahr {
  background: transparent; color: var(--danger); border: 1px solid var(--danger);
  border-radius: var(--radius-sm); padding: 4px 10px; font: inherit; font-size: var(--fs-ui); cursor: pointer;
}
.aud-gefahr:hover { background: var(--bg-card2); }
.aud-gefahr:focus-visible { outline: 2px solid var(--danger); outline-offset: 2px; }
.aud-hinweis { margin: 8px 0 0; color: var(--text-3); font-size: var(--fs-label); }
.aud-fehler { margin: 14px 0 0; padding: 10px 12px; border-radius: var(--radius-sm); border: 1px solid var(--danger); color: var(--text-1); }

.aud-fuss { padding: 12px 18px; border-top: 1px solid var(--border); background: var(--bg-card2); }
.aud-fuss-knoepfe, .aud-fuss-frage { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 8px; }
.aud-fuss-frage span { margin-right: auto; color: var(--text-1); font-size: var(--fs-ui); }
.aud-fuss-meldung { margin: 0 0 8px; color: var(--danger); font-size: var(--fs-ui); }
.aud-fuss [hidden] { display: none; }

@media (prefers-reduced-motion: reduce) {
  .aud { animation: none; }
}
/* Hell: das Orange der Statuspille erreicht auf dem Zeilengrund nur 4,43:1 — in der
   Nutzerverwaltung eine Stufe dunkler (5,6:1), damit "Eingeladen" AA haelt. */
:root[data-theme="light"] .aud,
:root[data-theme="light"] #admin-users-table { --warning: #92400E; }
/* Dunkel: Weiss auf --primary erreicht 4,46:1; im Fenster die dunklere Markenstufe (AA). */
.aud .btn-primary { background: var(--primary-dark); border-color: var(--primary-dark); }

.admin-users-selbst { margin-left: 6px; font-size: var(--fs-label); color: var(--text-3); white-space: nowrap; }

.admin-sort {
  background: none; border: 0; padding: 0; margin: 0; cursor: pointer;
  color: inherit; font: inherit; text-align: left;
}
.admin-sort:hover { color: var(--primary); }

.admin-users-speichern {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--border);
}
.admin-users-changes { font-size: var(--fs-ui); color: var(--text-2); margin-right: auto; }

/* PR1.410 (#643) — Vorschau der gefundenen Logos (Stufe 2 der Logo-Freigabe).
   Liste scrollt in der Karte, nicht die Seite; Auswahl standardmaessig komplett. */
.logo-preview-grid {
  list-style: none; margin: 0; padding: 0; max-height: 420px; overflow-y: auto;
  display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
}
.logo-preview-card { border: 1px solid var(--border); border-radius: 8px; background: var(--bg-card2); }
.logo-preview-card label {
  display: grid; gap: 4px; justify-items: center; padding: 10px; cursor: pointer; position: relative;
}
.logo-preview-card input[type="checkbox"] { position: absolute; top: 8px; left: 8px; }
.logo-preview-img {
  display: flex; align-items: center; justify-content: center; width: 100%; height: 64px;
  background: #fff; border-radius: 6px; padding: 6px; box-sizing: border-box;
}
.logo-preview-img img { max-width: 100%; max-height: 100%; object-fit: contain; }
.logo-preview-name { font-weight: 500; font-size: var(--fs-body); text-align: center; overflow-wrap: anywhere; }
.logo-preview-quelle { font-size: var(--fs-meta); }
.logo-preview-rest-titel { margin: 16px 0 8px; font-size: var(--fs-body); }

/* PR1.529 (#803) — Kennzeichen unsicherer Funde, Firmenwahl, Umfaerben.
   Rand + Text statt Flaechenfarbe: --warning ist in beiden Shells belegt. */
.logo-preview-kennzeichen { display: flex; flex-wrap: wrap; gap: 4px; justify-content: center; margin-top: 2px; }
.logo-kennzeichen {
  display: inline-block; font-size: var(--fs-label); line-height: 1.3; padding: 2px 6px; border-radius: 4px; text-align: center;
  border: 1px solid var(--warning); color: var(--text-1, inherit); background: transparent;
}
.logo-preview-wahl { border: 0; margin: 0; padding: 0 10px 10px; display: grid; gap: 4px; }
.logo-preview-wahl legend { font-size: var(--fs-meta); font-weight: 500; padding: 0; margin-bottom: 2px; }
.logo-preview-wahl-option { display: grid; grid-template-columns: auto 1fr; gap: 2px 6px; align-items: center; font-size: var(--fs-meta); cursor: pointer; }
.logo-preview-wahl-option span { grid-column: 1 / -1; min-width: 0; overflow-wrap: break-word; line-height: 1.3; }
.logo-preview-wahl-option small { display: block; color: var(--text-2); }
.logo-preview-wahl-option img { width: 100%; height: 28px; object-fit: contain; background: #fff; border-radius: 4px; }
.logo-preview-card > .btn { margin: 0 10px 10px; }
.logo-preview-card :is(input, button):focus-visible { outline: 2px solid var(--focus, var(--accent)); outline-offset: 2px; }

/* Ein Zustand pro Zelle statt zweier widerspruechlicher Marker.
   --success statt --emerald: nur --success ist in beiden Shells belegt
   (style-redesign.css bindet es auf --ad-green-700, die Textstufe; --ad-green
   selbst bleibt unter 3:1 und taugt nicht als Schriftfarbe). */
.status-pill.status-ton-green  { background: var(--bg-card2); color: var(--success); }
.status-pill.status-ton-orange { background: var(--bg-card2); color: var(--warning); }
.status-pill.status-ton-red    { background: var(--bg-card2); color: var(--danger); }
.status-pill.status-ton-grey   { background: var(--bg-card2); color: var(--text-2); }

/* Der Freigabe-Abschnitt ist fachlich Kundenpflege und steht trotzdem hier —
   deshalb sichtbar abgesetzt, mit eigener Ueberschrift und Erklaerung. */
.admin-section-abgesetzt { margin-top: 28px; padding-top: 20px; border-top: 2px solid var(--border); }
.admin-section-titel { margin: 0 0 4px; font-size: var(--fs-body); }
.admin-section-erklaerung { margin: 0 0 12px; color: var(--text-2); font-size: var(--fs-body); line-height: 1.5; max-width: 70ch; }

/* PR1.286 (#484) — die Nutzertabelle hat acht Spalten und passt damit nicht mehr
   in jede Fensterbreite. Sie bekommt ihren EIGENEN waagerechten Scrollbereich:
   die Seite selbst darf nicht seitwaerts scrollen (Konvention 20, Punkt 1), und
   `overflow-x: hidden` am Umschlag — der Stand vor diesem Ticket — machte die
   rechten Spalten schlicht unerreichbar.

   min-width an der Tabelle: ohne sie quetscht der Browser die Spalten zusammen,
   statt zu scrollen, und die Auswahlfelder werden unbedienbar schmal. */
.admin-users-wrapper,
#crm-admin-users-mount,
.admin-section-abgesetzt [data-consent-body],
#logo-consent-body {
  overflow-x: auto;
  overflow-y: visible;
  -webkit-overflow-scrolling: touch;
}
.admin-users-wrapper .admin-users-table,
#crm-admin-users-mount .tbl { min-width: 820px; }
/* Kompaktere Zellen: die Tabelle wurde sonst natuerlich ~1850px breit und
   scrollte auch dort, wo genug Platz gewesen waere. */
.admin-users-table td, .admin-users-table th { padding-left: 8px; padding-right: 8px; }
.admin-users-table td { vertical-align: middle; }
.admin-users-actions { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; min-width: 190px; }
.admin-users-actions .btn { white-space: nowrap; padding-left: 7px; padding-right: 7px; }
#logo-consent-body .admin-users-table,
[data-consent-body] .tbl { min-width: 520px; }

/* ===========================================================================
   PR1.273 (#467) — KB-Chat im Daten-Cockpit, klassisches Gesicht
   ---------------------------------------------------------------------------
   Zwilling: der Block am Ende von style-redesign.css. Dieselbe Struktur, die
   Formensprache der klassischen Shell — und dieselbe Zurueckhaltung bei der
   Bewegung: der Chat laeuft mehrmals taeglich, also animiert hier nur der
   wartende Punkt.

   Die Sprechblasen nutzen `.card` aus dieser Datei; alles darunter sind
   Feinheiten, die es dort nicht schon gibt.
   =========================================================================== */

.dcp-reiter {
  display: flex;
  gap: 4px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 16px;
}

.dcp-reiter-btn {
  appearance: none;
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  color: var(--text-secondary);
  padding: 8px 16px;
  font: inherit;
  cursor: pointer;
  transition: color 0.2s cubic-bezier(.4, 0, .2, 1), border-color 0.2s cubic-bezier(.4, 0, .2, 1);
}

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

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

.chat-panel { display: flex; flex-direction: column; gap: 16px; }
.chat-verlauf { display: flex; flex-direction: column; gap: 16px; }

.chat-zeile.chat-ich {
  align-self: flex-end;
  max-width: 80%;
  padding: 8px 16px;
}

.chat-zeile.chat-apollon { padding: 16px; }
.chat-zeile p { margin: 0; }

.chat-hinweis { margin-top: 8px !important; color: var(--text-secondary); font-size: var(--fs-body); }

.chat-quellen {
  margin-top: 12px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

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

.chat-quelle {
  display: inline-block;
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 4px 8px;
  font-size: var(--fs-ui);
  color: var(--text-secondary);
  max-width: 22rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

button.chat-quelle-doc {
  cursor: pointer;
  font-family: inherit;
  background: none;
  transition: border-color 0.2s cubic-bezier(.4, 0, .2, 1), color 0.2s cubic-bezier(.4, 0, .2, 1);
}

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

.chat-ohne-beleg {
  margin-top: 12px !important;
  color: var(--text-secondary);
  font-size: var(--fs-body);
  font-style: italic;
}

/* PR1.320 (#529) — was offen bleibt: ein ruhiger Nachsatz, keine Warnkarte. Zwilling zu
   .crm .chat-luecke in style-redesign.css. */
.chat-luecke {
  margin-top: 12px;
  padding-left: 12px;
  border-left: 1px solid var(--border);
  font-size: var(--fs-body);
  color: var(--text-secondary);
}
.chat-luecke p { margin: 0 0 4px; }
.chat-luecke-titel { font-weight: 600; }
.chat-luecke ul { margin: 4px 0 0; padding-left: 20px; }

/* Rueckfrage: dieselben Knoepfe wie die Beispiele im Leerzustand, nur nebeneinander. */
.chat-rueckfrage { margin-top: 12px; }
.chat-rueckfrage p { margin: 0 0 8px; }
.chat-rueckfrage-optionen { display: flex; flex-wrap: wrap; gap: 8px; }
/* Gesperrt waehrend eines Zugs — ohne opacity, damit der Hover nicht durchschlaegt. */
.chat-rueckfrage-option:disabled,
.chat-rueckfrage-option:disabled:hover {
  cursor: not-allowed;
  color: var(--text-3);
  border-color: var(--border);
}

.chat-diagramm { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--border); }
.chat-uebernehmen { margin-top: 12px; }

.chat-leer { padding: 32px 16px; text-align: center; color: var(--text-secondary); }
.chat-leer-titel { color: var(--text-primary); font-weight: 600; margin: 0 0 8px; }
.chat-leer-sub { margin: 0 0 24px; font-size: var(--fs-body); }

.chat-beispiele { display: flex; flex-direction: column; gap: 8px; align-items: center; }

.chat-beispiel {
  appearance: none;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--text-secondary);
  padding: 8px 16px;
  font: inherit;
  font-size: var(--fs-body);
  cursor: pointer;
  max-width: 100%;
  transition: border-color 0.2s cubic-bezier(.4, 0, .2, 1), color 0.2s cubic-bezier(.4, 0, .2, 1);
}

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

.chat-laeuft {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--text-secondary);
  font-size: var(--fs-body);
  padding: 8px 0;
}

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

@keyframes chat-puls {
  0%, 100% { opacity: 0.35; }
  50%      { opacity: 1; }
}

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

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

/* ── PR1.319 (#528) — Pythia: Bereich, Seitenleiste, Protokoll, Funde, Belege ──
   Zwilling zum Block in style-redesign.css; die klassische Shell hat keinen Drawer,
   deshalb steht die Seitenleiste hier komplett. Keine neue Bewegung ausser dem
   Einschieben der Leiste (unter 300 ms, reduced-motion beachtet). */
.pythia-bereich { display: grid; grid-template-columns: 16rem minmax(0, 1fr); gap: 16px; align-items: start; }
@media (max-width: 900px) { .pythia-bereich { grid-template-columns: minmax(0, 1fr); } }
.pythia-gespraeche { padding: 12px; }
.pythia-hauptteil { padding: 16px; }
.pythia-kopf { margin-bottom: 16px; display: flex; align-items: center; gap: 14px; }
.pythia-titel { margin: 0; font-size: var(--fs-title); color: var(--text-primary); }
/* PR1.324 #533 — Pythia-Zeichen. Medaillon nur im Bereichskopf (64 px), sonst der
   Dreifuss in Textfarbe. Statisch: keine Motion auf Knopf und Menuepunkt. */
.pythia-kopf-zeichen { flex: none; width: 64px; height: 64px; }
.pythia-kopf-text { min-width: 0; }
.pythia-medaillon { display: block; color: var(--pythia-terra); }
.pythia-medaillon .pz-grund,
.pythia-medaillon .pz-gewand { fill: var(--pythia-terra-grund); }
.pythia-zeichen { flex: none; }
.nav-item .nav-icon .pythia-dreifuss { display: block; margin: 0 auto; }
#btn-pythia-ask { display: inline-flex; align-items: center; gap: 6px; }
.pythia-knopf-zeichen { display: inline-flex; }
/* Das 20-px-Zeichen darf den Knopf nicht hoeher machen als seine Nachbarn. */
.pythia-knopf-zeichen .pythia-dreifuss { margin-block: -4px; }
.pythia-leiste-titel { display: inline-flex; align-items: center; gap: 6px; }
.pythia-sub { margin: 4px 0 0; color: var(--text-secondary); font-size: var(--fs-body); }

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

.chat-laeuft { flex-direction: column; align-items: stretch; gap: 12px; }
.chat-schritt { display: flex; align-items: center; gap: 8px; }
.chat-protokoll { list-style: none; margin: 0; padding: 0 0 0 12px; border-left: 2px solid var(--border); display: flex; flex-direction: column; gap: 4px; font-size: var(--fs-ui); color: var(--text-secondary); }
.chat-protokoll-schritt { display: flex; align-items: center; gap: 8px; }
.chat-protokoll-schritt.is-fertig { color: var(--text-3, var(--text-secondary)); }
.chat-protokoll-ok { color: var(--success, var(--accent)); font-weight: 600; }
.chat-suchweg { margin-top: 12px; font-size: var(--fs-body); color: var(--text-secondary); }
.chat-suchweg summary { cursor: pointer; }
.chat-suchweg .chat-protokoll { margin-top: 8px; }

.chat-funde { display: flex; flex-direction: column; gap: 8px; margin-top: 12px; }
.chat-fund { padding: 8px 12px; background: var(--bg-card2); font-size: var(--fs-ui); }
.chat-fund-kopf { display: flex; justify-content: space-between; gap: 8px; color: var(--text-secondary); margin-bottom: 4px; }
.chat-fund-titel { font-weight: 600; color: var(--text-primary); }
.chat-fund-anzahl { color: var(--text-secondary); white-space: nowrap; }
.chat-fund-tabelle { overflow-x: auto; }
.chat-fund-liste { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.chat-fund-link { appearance: none; background: none; border: none; padding: 0; font: inherit; font-size: var(--fs-ui); color: var(--accent); cursor: pointer; text-align: left; }
.chat-fund-link:hover { text-decoration: underline; }
.chat-fund-auszug { color: var(--text-secondary); }
.chat-fund-hinweis { margin: 4px 0 0; color: var(--text-secondary); font-size: var(--fs-meta); font-style: italic; }
/* PR1.346 (#560) — Treffer oeffnen den Datensatz: Gruppen klappen auf, Chips ohne Ziel sind
   sichtbar reine Angabe. Taeglich genutzt → kein Uebergang. */
.chat-fund-gruppe > summary { cursor: pointer; color: var(--accent); }
.chat-fund-tabelle td { vertical-align: top; }
.chat-fund-gruppe-anzahl { color: var(--text-secondary); }
.chat-fund-gruppe .chat-fund-liste { margin: 4px 0 0 12px; }
.chat-fund-gruppe-mehr { margin: 4px 0 0 12px; color: var(--text-secondary); font-size: var(--fs-meta); }
.chat-fund-link:focus-visible,
.chat-fund-gruppe > summary:focus-visible,
button.chat-quelle:focus-visible { outline: 2px solid var(--primary); outline-offset: 1px; border-radius: 4px; }
.chat-quelle-text { border-style: dashed; cursor: default; }

.chat-beleg {
  appearance: none; display: inline-flex; align-items: center; justify-content: center;
  min-width: 18px; height: 18px; padding: 0 4px; margin: 0 2px;
  border: 1px solid var(--accent); border-radius: 4px; background: var(--bg-card2); color: var(--accent);
  font: inherit; font-size: var(--fs-label); font-weight: 500; line-height: 1; vertical-align: 2px; cursor: pointer;
}
.chat-beleg:hover { background: var(--accent); color: #fff; }
.chat-quelle-nr { color: var(--text-secondary); font-size: var(--fs-meta); }
button.chat-quelle-datensatz, button.chat-quelle-zahl { cursor: pointer; font-family: inherit; background: none; }
button.chat-quelle-datensatz:hover, button.chat-quelle-zahl:hover { border-color: var(--accent); color: var(--text-primary); }

.chat-kontext { display: inline-flex; align-items: center; gap: 4px; border-radius: 999px; padding: 4px 12px; background: var(--bg-card2); border: 1px solid var(--border); font-size: var(--fs-ui); color: var(--text-secondary); max-width: 100%; }
.chat-kontext-titel { color: var(--text-secondary); }
.chat-kontext-weg { appearance: none; background: none; border: none; color: var(--text-secondary); cursor: pointer; font: inherit; padding: 0 4px; }
.chat-kontext-weg:hover { color: var(--text-primary); }
.chat-ich .chat-kontext { margin-bottom: 8px; }

.chat-dokument { margin-top: 12px; border: 1px solid var(--border); border-radius: 8px; padding: 8px 12px; font-size: var(--fs-ui); color: var(--text-secondary); }
.chat-dokument-kopf { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-bottom: 8px; color: var(--text-primary); }
.chat-dokument-text { margin: 0; white-space: pre-wrap; max-height: 20rem; overflow: auto; font: inherit; }
.chat-dokument-fehler { border-color: var(--danger); }

.chat-wegweiser { padding: 24px; text-align: center; }
.chat-wegweiser-titel { margin: 0 0 8px; font-weight: 600; color: var(--text-primary); }
.chat-wegweiser-sub { margin: 0 0 16px; color: var(--text-secondary); font-size: var(--fs-body); }
.chat-erneut { margin-top: 8px; }
.chat-fehler { border: 1px solid var(--danger); border-radius: 8px; padding: 12px 16px; color: var(--text-primary); }
.chat-fehler p { margin: 0; }
.chat-fehler-code { margin-top: 4px !important; color: var(--text-secondary); font-size: var(--fs-meta); }

/* Seitenleiste „Apollon fragen" — die klassische Shell hat keinen Drawer. */
.pythia-leiste-veil { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.45); z-index: 900; }
.pythia-leiste {
  position: fixed; top: 0; right: 0; bottom: 0; width: min(34rem, 96vw);
  background: var(--bg-card); border-left: 1px solid var(--border);
  box-shadow: -16px 0 40px rgba(0, 0, 0, 0.3); z-index: 901;
  display: flex; flex-direction: column;
  animation: pythia-leiste-ein 0.2s ease-out;
}
@keyframes pythia-leiste-ein { from { transform: translateX(40px); opacity: 0; } to { transform: none; opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .pythia-leiste { animation: none; } }
.pythia-leiste-kopf { display: flex; align-items: center; gap: 8px; padding: 14px 16px; border-bottom: 1px solid var(--border); }
.pythia-leiste-titel { font-weight: 600; color: var(--text-primary); }
.pythia-leiste-hinweis { color: var(--text-secondary); font-size: var(--fs-meta); margin-left: auto; }
.pythia-leiste-body { flex: 1; overflow-y: auto; padding: 16px; display: flex; flex-direction: column; }
.pythia-leiste-body .chat-panel { flex: 1; }
@media (max-width: 768px) { .pythia-leiste { width: 100vw; } }
#btn-pythia-ask { white-space: nowrap; }

.chat-fehler {
  border: 1px solid var(--danger);
  border-radius: 6px;
  padding: 12px 16px;
  color: var(--text-primary);
}

.chat-fehler p { margin: 0; }
.chat-fehler-code { margin-top: 4px !important; color: var(--text-secondary); font-size: var(--fs-meta); }

.chat-form { display: flex; gap: 8px; align-items: flex-end; flex-wrap: wrap; }
.chat-eingabe { flex: 1 1 12rem; resize: vertical; min-height: 40px; font: inherit; }
.chat-senden { flex: 0 0 auto; }
.chat-rest { margin: 0; text-align: right; color: var(--text-secondary); font-size: var(--fs-meta); }

/* Zwilling zur Regel am Ende von style-redesign.css: gesperrt heisst sichtbar gesperrt.
   Lokal statt global aus demselben Grund wie oben im Feedback-Dialog. */
.chat-senden:disabled,
.chat-eingabe:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}
/* ── PR1.274 (#468) — Bestaetigungskarten fuer Chat-Aktionen, klassische Shell ────
   Zwilling zum gleichnamigen Block in style-redesign.css.

   Bewusst KEINE Bewegung: die Karte erscheint in einem scrollenden Verlauf, und ein
   Aufblenden dort liest sich als Unruhe, nicht als Erklaerung (PRODUCT.md, Prinzip 2).
   Der linke Balken traegt die ganze Unterscheidung zur normalen Sprechblase — er ist
   das einzige, was sagt: hier wird gleich etwas veraendert. */
.chat-aktionen { display: flex; flex-direction: column; gap: 10px; margin-top: 12px; }

.chat-aktion {
  border-left: 3px solid var(--primary);
  padding: 12px;
  background: var(--bg-card2);
}

.chat-aktion-titel {
  margin: 0 0 8px;
  font-weight: 600;
  color: var(--text-primary);
}

/* Zweispaltig, solange Platz ist: Beschriftung und Wert nebeneinander liest sich
   schneller als untereinander. Unter 26rem klappt es auf eine Spalte um. */
.chat-aktion-felder { margin: 0; display: grid; gap: 4px 12px; }
.chat-aktion-feld { display: grid; grid-template-columns: minmax(7rem, 11rem) 1fr; gap: 4px 12px; }
.chat-aktion-feld dt { color: var(--text-secondary); font-size: var(--fs-ui); }
.chat-aktion-feld dd { margin: 0; color: var(--text-primary); font-size: var(--fs-body); overflow-wrap: anywhere; }

.chat-aktion-knoepfe { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; }

.chat-aktion-status { margin: 8px 0 0; color: var(--text-secondary); font-size: var(--fs-ui); }
.chat-aktion-fehler { margin: 8px 0 0; color: var(--danger); font-size: var(--fs-ui); }

/* Erledigt und verworfen bleiben stehen, treten aber zurueck — der Verlauf soll
   nachvollziehbar bleiben, ohne dass Abgeschlossenes um Aufmerksamkeit wirbt.
   Die Abschwaechung sitzt an der Karte, nicht an den Kindern: an einem Kind waere sie
   fuer den Statustext nicht mehr zuruecknehmbar. */
.chat-aktion.is-erledigt { border-left-color: var(--success); }
.chat-aktion.is-fehler { border-left-color: var(--danger); }
.chat-aktion.is-abgelehnt { border-left-color: var(--border); opacity: 0.7; }
.chat-aktion.is-laeuft { border-left-color: var(--text-secondary); }

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

/* ── PR1.321 (#530) — Pythias Bestaetigungsliste, klassische Shell ────────────
   Ein Dialog, eine Tabelle: je Zeile der Stand von jetzt und der neue. Sperren
   (halten die Freigabe an) rot, der geaenderte Zwischenstand orange, alles andere
   ruhig. Keine Animation — gelegentlich genutzt, hoher Einsatz: Klarheit vor Effekt. */
.pythia-plan-modal { width: min(1040px, 96vw); max-width: none; }
.pythia-plan-unterzeile { margin: 0 0 12px; color: var(--text-secondary); font-size: var(--fs-body); }
.chat-plan-zaehlung { margin: 0; color: var(--text-secondary); font-size: var(--fs-body); }

.pythia-plan-hinweise { display: flex; flex-direction: column; gap: 6px; margin-bottom: 12px; }
.pythia-plan-hinweise:empty { display: none; }
.pythia-plan-hinweise p { margin: 0; padding: 8px 12px; font-size: var(--fs-body); border-left: 3px solid var(--border); background: var(--bg-card2); color: var(--text-primary); }
.pythia-plan-hinweise .pythia-plan-sperre,
.pythia-plan-hinweise .pythia-plan-fehler { border-left-color: var(--danger); font-weight: 600; }
.pythia-plan-hinweise .pythia-plan-hinweis.is-warnung { border-left-color: var(--warning); }
.pythia-plan-hinweise .pythia-plan-lauf { border-left-color: var(--primary); }
.pythia-plan-hinweise .pythia-plan-leer { color: var(--text-secondary); }

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

/* Abgewaehlt tritt ueber die Farbe zurueck, nicht ueber opacity — die ist am Kind nicht
   ruecknehmbar und laesst den Kontrast unter die Messgrenze fallen. */
.pythia-plan-zeile.is-ab td:not(.pythia-plan-wahl),
.pythia-plan-zeile.is-unmoeglich td:not(.pythia-plan-wahl) { color: var(--text-secondary); }
.pythia-plan-zeile.is-geaendert td:first-child { box-shadow: inset 3px 0 0 var(--warning); }
.pythia-plan-zeile.is-geaendert .pythia-plan-status,
.pythia-plan-zeile.is-geaendert .pythia-plan-meldung { color: var(--warning); }
.pythia-plan-zeile.is-fehler td:first-child { box-shadow: inset 3px 0 0 var(--danger); }
.pythia-plan-zeile.is-fehler .pythia-plan-meldung,
.pythia-plan-zeile.is-fehler .pythia-plan-status { color: var(--danger); }
.pythia-plan-zeile.is-erledigt td:first-child { box-shadow: inset 3px 0 0 var(--success); }

.modal-footer .pythia-plan-zaehler { margin-right: auto; color: var(--text-secondary); font-size: var(--fs-body); }
.pythia-plan-knoepfe { display: flex; gap: 8px; }
/* Gesperrt MUSS gesperrt aussehen — Apollon hat keine globale `.btn:disabled`-Regel
   (Begruendung bei [data-bulk-apply]:disabled). Deshalb nur an den Knoepfen dieser Liste. */
.pythia-plan-knoepfe .btn:disabled,
.pythia-plan-maske:disabled { opacity: .5; cursor: not-allowed; }

/* ── PR1.265 (#459) — Org-Struktur (BL → CC → MA), klassische Shell ──────────
   Schlichter als das Redesign, aber ohne Informationsverlust: dieselben Knoten
   aus demselben Modul. px sind hier konsistent zum Rest der Datei. */
.kbcc-org-head { padding: 4px 0 12px; }
.kbcc-org-title { margin: 0; font-size: var(--fs-title); }
.kbcc-org-sub { margin: 2px 0 0; color: var(--text-secondary); font-size: var(--fs-body); }
.kbcc-org-table { width: 100%; border-collapse: collapse; font-size: var(--fs-body); }
.kbcc-org-table th { text-align: left; padding: 6px 10px; font-size: var(--fs-meta); color: var(--text-secondary);
  border-bottom: 1px solid var(--border); }
.kbcc-org-table td { padding: 7px 10px; border-bottom: 1px solid var(--border); }
.kbcc-org-table th.kbcc-org-num , .kbcc-org-table td.kbcc-org-num {
  text-align: right; white-space: nowrap; }
.kbcc-org-name { display: flex; align-items: baseline; gap: 8px; }
.kbcc-org-lvl-1 .kbcc-org-name { padding-left: 20px; }
.kbcc-org-lvl-2 .kbcc-org-name { padding-left: 44px; }
.kbcc-org-glyph { color: var(--text-secondary); width: 14px; flex: 0 0 auto; text-align: center; }
.kbcc-org-glyph .ic { width: 0.875rem; height: 0.875rem; } /* PR1.416: Zeichen passt in die Aufklapp-Spalte */
.kbcc-org-toggle { background: none; border: 0; color: var(--text-secondary); cursor: pointer;
  font: inherit; padding: 0; line-height: 1; width: 14px; flex: 0 0 auto; }
.kbcc-org-bl { font-weight: 600; }
.kbcc-org-ccwrap { display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; min-width: 0; }
.kbcc-org-cc { font-weight: 600; }
.kbcc-org-count { color: var(--text-secondary); font-size: var(--fs-meta); }
.kbcc-org-sub { flex-basis: 100%; color: var(--text-secondary); font-size: var(--fs-ui); }
.kbcc-org-warn { color: var(--warning); }
.kbcc-org-link { background: none; border: 0; padding: 0; font: inherit; cursor: pointer;
  color: var(--text-primary); text-align: left; }
.kbcc-org-link:hover { text-decoration: underline; }
.kbcc-org-proj , .kbcc-org-sep { color: var(--text-secondary); font-size: var(--fs-ui); }
.kbcc-org-note { color: var(--text-secondary); font-size: var(--fs-ui); margin-left: 6px; }
.kbcc-org-error { color: var(--text-secondary); padding: 12px 0; }
/* PR1.265 — siehe style-redesign.css: Personennamen brechen nicht mehr um. */
.kbcc-org-name { flex-wrap: wrap; }
.kbcc-org-bl , .kbcc-org-cc , .kbcc-org-name > .kbcc-org-link { white-space: nowrap; }
.kbcc-org-error-msg { margin: 0 0 4px; color: var(--text-primary); font-weight: 600; }
.kbcc-org-error-hint { margin: 0 0 10px; }
/* PR1.548 (#829) — Organigramm, klassisches Gesicht. Zwilling der .crm .och-*-Regeln
   in style-redesign.css; kein Motion, kein eigener Scroll-Bereich. */
.kbcc-och-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.kbcc-och { display: flex; flex-direction: column; gap: 28px; padding: 8px 0 16px; }
.kbcc-och-tree { display: flex; flex-direction: column; }
.kbcc-och-root { display: flex; justify-content: center; position: relative; padding-bottom: 16px; }
.kbcc-och-root::after { content: ""; position: absolute; left: 50%; bottom: 0; height: 16px; border-left: 1px solid var(--border); }
.kbcc-och-row { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 216px), 1fr)); }
.kbcc-och-ccs { border-top: 1px solid var(--border); padding-top: 16px; }
.kbcc-och-node { position: relative; min-width: 0; }
.kbcc-och-box { height: 100%; display: flex; flex-direction: column; gap: 8px; min-width: 0; padding: 12px;
  background: var(--bg-card); border: 1px solid var(--border); border-radius: 8px; }
.kbcc-och-bl { width: min(100%, 320px); border: 2px solid var(--accent); }
.kbcc-och-box.is-muted { background: var(--bg-hover); }
.kbcc-och-cc.is-open { border-color: var(--accent); }
.kbcc-och-hd { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.kbcc-och-name { font-weight: 600; font-size: var(--fs-body); color: var(--text-1); text-align: left; overflow-wrap: anywhere; }
button.kbcc-och-name { background: none; border: 0; padding: 0; cursor: pointer; }
.kbcc-och-sub { font-size: var(--fs-meta); color: var(--text-2); }
.kbcc-och-faces { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 4px; }
.kbcc-och-face { display: block; padding: 0; border: 0; background: none; border-radius: 50%; cursor: pointer; line-height: 0; }
.kbcc-och-face:focus-visible, .kbcc-och-toggle:focus-visible, button.kbcc-och-name:focus-visible,
[data-kbcc-org-darst]:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.kbcc-och-more { font-size: var(--fs-meta); color: var(--text-2); padding: 0 4px; }
.kbcc-och-stats { display: flex; align-items: baseline; gap: 4px; flex-wrap: wrap; }
.kbcc-och-num { font-weight: 600; color: var(--text-1); }
.kbcc-och-lbl { font-size: var(--fs-meta); color: var(--text-2); }
.kbcc-och-pct { margin-left: auto; font-size: var(--fs-meta); font-weight: 600; }
.kbcc-och-bl .kbcc-och-stats { justify-content: space-between; }
.kbcc-och-bl .kbcc-och-pct { margin-left: 0; }
.kbcc-och-bar { height: 6px; border-radius: 999px; background: var(--bg-hover); overflow: hidden; }
.kbcc-och-fill { display: block; height: 100%; border-radius: inherit; }
.kbcc-och-frei { font-size: var(--fs-meta); color: var(--text-2); }
.kbcc-och-note { margin-left: 8px; }
.kbcc-och-ft { display: flex; justify-content: flex-end; margin-top: auto; }
.kbcc-och-toggle { background: none; border: 0; padding: 0; cursor: pointer; font: inherit; font-size: var(--fs-meta); font-weight: 600; color: var(--accent); }
.kbcc-och-toggle:hover { text-decoration: underline; }
.kbcc-och-teams { margin-top: 16px; padding: 12px; border: 1px solid var(--border); border-radius: 8px; background: var(--bg-hover); }
.kbcc-och-teams-h { margin: 0 0 8px; font-size: var(--fs-ui); font-weight: 600; color: var(--text-1); }
.kbcc-och-hint { margin: 0 0 8px; font-size: var(--fs-meta); color: var(--text-2); }
.kbcc-och-t-rot { color: var(--danger); }
.kbcc-och-t-gelb { color: var(--attention); }
.kbcc-och-t-gruen { color: var(--success); }
.kbcc-och-fill.kbcc-och-t-rot { background: var(--danger); }
.kbcc-och-fill.kbcc-och-t-gelb { background: var(--attention); }
.kbcc-och-fill.kbcc-och-t-gruen { background: var(--success); }
/* ── PR1.264 (#458) — Kunden-Baum, klassische Shell ─────────────────────────
   Zwilling zu .crm .ctree-* in style-redesign.css. Schlichter, aber ohne
   Informationsverlust: dieselben Knoten aus demselben Modul. */
.kbcc-ctree-table td { vertical-align: top; }
.kbcc-ctree-name { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.kbcc-ctree-lvl-1 .kbcc-ctree-name { padding-left: 20px; }
.kbcc-ctree-lvl-2 .kbcc-ctree-name { padding-left: 44px; }
.kbcc-ctree-lvl-3 .kbcc-ctree-name { padding-left: 68px; }
.kbcc-ctree-glyph { color: var(--text-secondary); width: 14px; flex: 0 0 auto; text-align: center; }
.kbcc-ctree-toggle { background: none; border: 0; color: var(--text-secondary); cursor: pointer;
  font: inherit; padding: 0; line-height: 1; width: 14px; flex: 0 0 auto; }
/* siehe style-redesign.css: ohne flex-Basis 0 bricht die Zelle um und der Pfeil
   steht ueber dem Namen statt davor. */
.kbcc-ctree-wrap { display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap;
  min-width: 0; flex: 1 1 0; }
.kbcc-ctree-logo { width: 20px; height: 20px; font-size: var(--fs-label); align-self: center; }
.kbcc-ctree-sub { flex-basis: 100%; color: var(--text-secondary); font-size: var(--fs-ui); }
.kbcc-ctree-link { background: none; border: 0; padding: 0; font: inherit; cursor: pointer;
  color: var(--text-primary); text-align: left; white-space: nowrap; }
.kbcc-ctree-link:hover { text-decoration: underline; }
.kbcc-ctree-customer .kbcc-ctree-link { font-weight: 600; }
.kbcc-ctree-person .kbcc-ctree-link { color: var(--text-secondary); }
.kbcc-ctree-stand { white-space: nowrap; color: var(--text-secondary); font-size: var(--fs-ui); }
.kbcc-ctree-bar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 0 0 10px; }
/* Ohne diese Regel bleibt das Suchfeld ein natives Bedienelement — weisser Grund,
   schwarze Schrift, Systemrahmen — mitten in der dunklen klassischen Shell.
   Self-contained wie .matching-search-wrap, weil es hier keine .filter-bar gibt. */
.kbcc-ctree-bar input[type="search"] {
    min-width: 220px;
    background: var(--bg-input);
    color: var(--text-primary);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 7px 10px;
    font: inherit;
}
.kbcc-ctree-bar input[type="search"]::placeholder { color: var(--text-secondary); }
/* Die Kundenzeile ist der Blockanfang. Bei 40+ Kunden findet das Auge ihn sonst
   nicht wieder — alle Zeilen saehen gleich aus. Tonung statt Trennlinie: eine
   zweite Linienstaerke haette das Tabellenraster unruhig gemacht. */
.kbcc-ctree-customer > td { background: var(--bg-card2); }
.kbcc-ctree-opt { display: inline-flex; align-items: center; gap: 6px;
  color: var(--text-secondary); font-size: var(--fs-ui); }
.kbcc-ctree-more td { padding-top: 12px; }
.kbcc-ctree-more .kbcc-ctree-link { color: var(--text-secondary); font-size: var(--fs-ui); white-space: normal; }
/* Statusfarben: dieselbe Entscheidung wie im Redesign (statusTone), hier auf die
   Badge-Toene der klassischen Shell abgebildet. */
.kbcc-ctree-bdg-lead    { color: var(--info); }
.kbcc-ctree-bdg-prop    { color: var(--primary); }
.kbcc-ctree-bdg-running { color: var(--warning); }
.kbcc-ctree-bdg-won     { color: var(--success); }
.kbcc-ctree-bdg-warn    { color: var(--warning); }
.kbcc-ctree-bdg-neut    { color: var(--text-secondary); }

/* ── PR1.549 (#830) — Kundenlandkarte (klassisches Gesicht) ──────────────────
   Zwilling zu .crm .cmap-* in style-redesign.css; dasselbe Markup aus
   customer-map-html.js mit Praefix kbcc-cmap. Keine Bewegung. */
.kbcc-cmap-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 4px 0 12px; }
.kbcc-cmap-chip { border: 1px solid var(--border); background: var(--bg-card); color: var(--text-primary);
    border-radius: 999px; padding: 4px 12px; font: inherit; font-size: var(--fs-ui); cursor: pointer; }
.kbcc-cmap-chip:hover { border-color: var(--text-secondary); }
.kbcc-cmap-chip.is-active { border-color: var(--primary); box-shadow: inset 0 0 0 1px var(--primary);
    color: var(--text-primary); font-weight: 600; background: var(--bg-card2); }
.kbcc-cmap-chip:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.kbcc-cmap-chips-more { color: var(--text-secondary); font-size: var(--fs-ui); }
.kbcc-cmap-scroll { overflow-x: auto; }
.kbcc-cmap { position: relative; min-width: 964px; padding: 8px 0 16px; }
.kbcc-cmap-lines { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; }
.kbcc-cmap-grid { position: relative; display: grid;
    grid-template-columns: minmax(190px, 0.8fr) repeat(3, minmax(210px, 1fr)); column-gap: 48px; }
/* PR1.570 — Mindestbreite = Summe der Spuren (190 + 3*210 + 3*48 = 964). Vorher 988 > 960:
   die Team-Spalte ragte bei 984 px Rahmen 4 px ueber den Rand. */
.kbcc-cmap-col { display: flex; flex-direction: column; min-width: 0; }
.kbcc-cmap-col-hd { display: flex; align-items: center; gap: 8px; margin: 0 0 12px;
    font-size: var(--fs-ui); font-weight: 600; color: var(--text-secondary); }
.kbcc-cmap-col.is-cust .kbcc-cmap-col-hd { visibility: hidden; }
.kbcc-cmap-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--card-type); }
.kbcc-cmap-count { font-weight: 500; }
.kbcc-cmap-col-body { display: flex; flex-direction: column; justify-content: safe center; gap: 12px; flex: 1 1 auto; }
.kbcc-cmap-none { color: var(--text-secondary); font-size: var(--fs-ui); }
.kbcc-cmap-card { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left;
    padding: 10px 12px; border: 1px solid var(--border); border-radius: var(--radius-sm);
    background: var(--bg-card); color: var(--text-primary); font: inherit; cursor: pointer; }
.kbcc-cmap-card:hover { border-color: var(--text-secondary); }
.kbcc-cmap-card:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.kbcc-cmap-card.is-customer { border: 2px solid var(--primary); }
.kbcc-cmap-card.tone-gap { border-color: var(--warning); background: color-mix(in srgb, var(--warning) 14%, var(--bg-card)); }
.kbcc-cmap-card.tone-lost { background: var(--bg-card2); }
.kbcc-cmap-card.tone-lost .kbcc-cmap-name { color: var(--text-secondary); font-weight: 500; }
.kbcc-cmap-card.tone-lost .kbcc-cmap-glyph { opacity: 0.5; }
.kbcc-cmap-card.is-more { border-style: dashed; }
.kbcc-cmap-glyph { flex: 0 0 auto; width: 32px; height: 32px; border-radius: 6px;
    display: inline-flex; align-items: center; justify-content: center; }
.kbcc-cmap-glyph.is-icon { background: var(--card-type); color: #fff; }
.kbcc-cmap-glyph.is-photo { border-radius: 50%; overflow: hidden; }
.kbcc-cmap-text { display: flex; flex-direction: column; min-width: 0; }
.kbcc-cmap-name { font-weight: 600; overflow-wrap: anywhere; }
.kbcc-cmap-meta { color: var(--text-secondary); font-size: var(--fs-ui); overflow-wrap: anywhere; }
.kbcc-cmap-edge { fill: none; stroke: var(--border); stroke-width: 1.5px; }
.kbcc-cmap-edge.is-origin { stroke: var(--primary); stroke-dasharray: 5 4; }
.kbcc-cmap-legend { position: relative; display: flex; align-items: center; gap: 8px; margin-top: 16px;
    color: var(--text-secondary); font-size: var(--fs-ui); }
.kbcc-cmap-legend-line { width: 24px; border-top: 2px dashed var(--primary); }

/* ── PR1.267 (#461) — Sicht „Datenqualitaet" (klassische Shell) ─────────────
   Gegenstueck zu .dq-* in style-redesign.css. Gleiche Daten-Attribute, gleiche
   Bedienung, eigene Optik: die klassische Shell trennt ueber Linien und die
   Flaechenleiter, das Redesign ueber Flaechenwechsel.
   Die Regelzeilen sind natives <details>/<summary> — tastaturbedienbar mit
   sichtbarem Fokus, ohne eine Zeile Skript, und ohne Bewegung.

   Farbtokens sind --text-1/2/3, NICHT --text-primary/-secondary/-muted: die beiden
   letzteren sind nur im Light-Scope als Alias definiert (style.css:169) und fallen
   im dunklen Default ins Leere — der Text erbt dann die volle Vordergrundfarbe,
   und die Abstufung zwischen Bezeichnung, Hinweis und Begruendung verschwindet
   lautlos. Bei der Kontrastmessung auf der Pruefseite genau so aufgefallen. */
.kbcc-dq-head { display: flex; align-items: center; justify-content: space-between;
  gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
.kbcc-dq-rules { display: flex; flex-direction: column; gap: 6px; }
.kbcc-dq-rule { background: var(--bg-card2); border: 1px solid var(--border);
  border-radius: 8px; }
.kbcc-dq-summary { display: flex; align-items: baseline; gap: 12px; padding: 8px 12px;
  cursor: pointer; flex-wrap: wrap; }
.kbcc-dq-summary::-webkit-details-marker { display: none; }
/* Eigenes Dreieck: das Standardglyph sitzt je nach Plattform anders und bricht die
   Grundlinie der Zeile. */
.kbcc-dq-summary::before { content: ""; color: var(--text-3); flex: 0 0 auto;
  width: 14px; height: 14px; background-color: currentColor; align-self: center;
  -webkit-mask: var(--ic-mask-caret-right); mask: var(--ic-mask-caret-right); }
.kbcc-dq-rule[open] > .kbcc-dq-summary::before { -webkit-mask: var(--ic-mask-caret-down); mask: var(--ic-mask-caret-down); }
.kbcc-dq-count { font-weight: 600; font-size: var(--fs-title); min-width: 32px; text-align: right;
  flex: 0 0 auto; color: var(--text-1); }
.kbcc-dq-count.is-clean { color: var(--text-2); }
.kbcc-dq-count.is-open { color: var(--warning); }
.kbcc-dq-count.is-unknown { color: var(--text-3); }
.kbcc-dq-label { font-weight: 600; color: var(--text-1); }
.kbcc-dq-hint { color: var(--text-2); font-size: var(--fs-ui); }
/* Siehe style-redesign.css: flex-basis wird im Spalten-Container zur Hoehe. */
.kbcc-dq-summary .kbcc-dq-hint { flex: 1 1 200px; min-width: 0; }
.kbcc-dq-muted { flex: 0 0 auto; color: var(--text-3); font-size: var(--fs-ui); }
.kbcc-dq-list { list-style: none; margin: 0; padding: 0 12px 12px; display: flex;
  flex-direction: column; gap: 6px; }
.kbcc-dq-empty { padding: 0 12px 12px; color: var(--text-2); font-size: var(--fs-ui); }
.kbcc-dq-item { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap;
  padding-top: 6px; border-top: 1px solid var(--border); }
.kbcc-dq-link { background: none; border: 0; padding: 0; font: inherit; cursor: pointer;
  color: var(--accent); font-weight: 600; text-align: left; text-decoration: underline;
  text-underline-offset: 2px; }
.kbcc-dq-grund { flex: 1 1 220px; min-width: 0; color: var(--text-2);
  font-size: var(--fs-ui); }
/* Siehe style-redesign.css: das Urteilswort erbt die Farbstufen, nicht die Groesse. */
.kbcc-dq-verdict { font-size: var(--fs-ui); font-weight: 500; min-width: 88px; flex: 0 0 auto; }
.kbcc-dq-pair-names { flex: 1 1 260px; min-width: 0; color: var(--text-1); }
.kbcc-dq-vs { color: var(--text-3); }
.kbcc-dq-mute-wrap { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap;
  flex: 0 0 auto; }
.kbcc-dq-mute { background: none; border: 1px solid var(--border-light);
  border-radius: 6px; padding: 2px 8px; font: inherit; font-size: var(--fs-ui); cursor: pointer;
  color: var(--text-2); }
.kbcc-dq-mute:hover { background: var(--bg-card); color: var(--text-1); }
.kbcc-dq-reason { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
/* Siehe style-redesign.css: display:flex schlaegt das UA-Stylesheet fuer [hidden]. */
.kbcc-dq-reason[hidden] { display: none; }
/* Sichtbares Label, mit dem Feld verbunden — ein Platzhalter allein verschwindet
   beim Tippen und ist kein Ersatz. */
.kbcc-dq-reason-lbl { font-size: var(--fs-ui); color: var(--text-3); }
.kbcc-dq-reason-in { font: inherit; font-size: var(--fs-body); padding: 3px 8px;
  border: 1px solid var(--border-light); border-radius: 6px; background: var(--bg-card);
  color: var(--text-1); min-width: 200px; }
.kbcc-dq-reason-ok { background: none; border: 1px solid var(--border-light);
  border-radius: 6px; padding: 3px 10px; font: inherit; font-size: var(--fs-ui); cursor: pointer;
  color: var(--text-1); }
.kbcc-dq-reason-ok:hover { background: var(--bg-card); }
.kbcc-dq-actions { margin-top: 8px; }
.kbcc-dq-dupes-hd { margin: 24px 0 8px; font-size: var(--fs-body); color: var(--text-1); }
.kbcc-dq-dupes-idle { display: flex; flex-direction: column; gap: 8px; }
/* Sichtbarer Tastatur-Fokus. Die klassische Shell hat KEINE generische
   :focus-visible-Regel (anders als das Redesign, wo `.crm :focus-visible` alles
   abdeckt) — sie vergibt ihn pro Komponente. Ohne diese vier Zeilen bliebe hier nur
   der Browser-Standardring, der auf dem dunklen Grund je nach Plattform kaum zu
   sehen ist. Konvention 20, Punkt 4. */
.kbcc-dq-summary:focus-visible ,
.kbcc-dq-link:focus-visible ,
.kbcc-dq-mute:focus-visible ,
.kbcc-dq-reason-in:focus-visible ,
.kbcc-dq-reason-ok:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px;
  border-radius: 4px; }

/* BF-71 (#616, BB8) — Zeile „Team, Einsätze und Auslastung". Rot = --danger (beide
   Themes), Gruppen als native <details> ohne Animation, Fokus wie oben. */
.kbcc-dq-ek-body { padding: 0 12px 12px; display: flex; flex-direction: column; gap: 8px; }
.kbcc-dq-ek-rot { color: var(--danger); }
.kbcc-dq-count.kbcc-dq-ek-rot { color: var(--danger); }
.kbcc-dq-ek-gruen { color: var(--success); }
.kbcc-dq-ek-ok, .kbcc-dq-ek-fehler { color: var(--text-2); font-size: var(--fs-ui); }
.kbcc-dq-ek-fehler { color: var(--danger); }
.kbcc-dq-ek-gruppe { border: 1px solid var(--border); border-radius: 6px; }
.kbcc-dq-ek-gruppe-kopf { display: flex; align-items: baseline; gap: 8px; padding: 6px 10px; cursor: pointer; }
.kbcc-dq-ek-gruppe-kopf::-webkit-details-marker { display: none; }
.kbcc-dq-ek-gruppe-kopf::before { content: ""; color: var(--text-3); width: 14px; height: 14px; flex: 0 0 auto; background-color: currentColor; align-self: center;
  -webkit-mask: var(--ic-mask-caret-right); mask: var(--ic-mask-caret-right); }
.kbcc-dq-ek-gruppe[open] > .kbcc-dq-ek-gruppe-kopf::before { -webkit-mask: var(--ic-mask-caret-down); mask: var(--ic-mask-caret-down); }
.kbcc-dq-ek-gruppe-akt { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 0 10px 8px; }
.kbcc-dq-ek-frage { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; color: var(--text-1); font-size: var(--fs-ui); }
.kbcc-dq-ek-frage[hidden], .kbcc-dq-ek-gruppe-akt [hidden] { display: none; }
.kbcc-dq-ek-person { font-weight: 600; color: var(--text-1); }
.kbcc-dq-ek-vorschau { flex: 1 1 100%; display: grid; grid-template-columns: max-content 1fr; gap: 2px 12px; margin: 0; font-size: var(--fs-ui); }
.kbcc-dq-ek-vorschau dt { color: var(--text-3); }
.kbcc-dq-ek-vorschau dd { margin: 0; color: var(--text-1); }
.kbcc-dq-ek-akt { display: flex; gap: 8px; flex-wrap: wrap; }
.kbcc-dq-ek-stellen { flex: 1 1 100%; margin: 0; padding-left: 18px; font-size: var(--fs-ui); color: var(--text-2); }
.kbcc-dq-ek-selbst-kopf { font-weight: 500; color: var(--text-1); margin-top: 8px; font-size: var(--fs-body); }
.kbcc-dq-ek-zeit { color: var(--text-3); font-variant-numeric: tabular-nums; font-size: var(--fs-ui); }
.kbcc-dq-ek-gruppe-kopf:focus-visible,
.kbcc-dq-ek-body .kbcc-mode-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }

/* PR1.393 (#621) — Zeile „Mögliche doppelte Projekte". Je Gruppe eine Tabelle, die bei
   schmaler Breite in sich scrollt (nicht die Seite); Vorschau inline, ohne Animation. */
.kbcc-dq-pd-body { padding: 0 12px 12px; display: flex; flex-direction: column; gap: 10px; }
.kbcc-dq-pd-gruppe { border: 1px solid var(--border); border-radius: 6px; padding: 8px 10px; display: flex; flex-direction: column; gap: 8px; }
.kbcc-dq-pd-titel { margin: 0; font-size: var(--fs-body); font-weight: 500; color: var(--text-1); }
.kbcc-dq-pd-scroll { overflow-x: auto; }
.kbcc-dq-pd-tab { width: 100%; border-collapse: collapse; font-size: var(--fs-ui); }
.kbcc-dq-pd-tab th, .kbcc-dq-pd-tab td { text-align: left; padding: 4px 8px; border-bottom: 1px solid var(--border); vertical-align: top; }
.kbcc-dq-pd-tab thead th { color: var(--text-3); font-weight: 500; }
.kbcc-dq-pd-tab { min-width: 560px; }
.kbcc-dq-pd-tab tbody th { font-weight: 400; text-transform: none; letter-spacing: normal; }
.kbcc-dq-pd-zeit { white-space: nowrap; }
.kbcc-dq-pd-tab td:last-child { min-width: 200px; }
.kbcc-dq-pd-zahl { text-align: right; font-variant-numeric: tabular-nums; }
.kbcc-dq-pd-fuehrt { font-weight: 600; color: var(--text-1); }
.kbcc-dq-pd-akt { display: flex; gap: 8px; flex-wrap: wrap; }
.kbcc-dq-pd-akt [hidden], .kbcc-dq-pd-vorschau[hidden] { display: none; }
.kbcc-dq-pd-vorschau { display: flex; flex-direction: column; gap: 8px; border-top: 1px solid var(--border); padding-top: 8px; font-size: var(--fs-ui); }
.kbcc-dq-pd-wahl { border: 0; margin: 0; padding: 0; display: flex; gap: 4px 16px; flex-wrap: wrap; }
.kbcc-dq-pd-wahl legend { padding: 0; margin-bottom: 4px; color: var(--text-3); }
.kbcc-dq-pd-radio { display: inline-flex; align-items: center; gap: 6px; color: var(--text-1); }
.kbcc-dq-pd-folgen { display: grid; grid-template-columns: max-content 1fr; gap: 4px 12px; margin: 0; }
.kbcc-dq-pd-folgen dt { color: var(--text-3); }
.kbcc-dq-pd-folgen dd { margin: 0; color: var(--text-1); }
.kbcc-dq-pd-liste { margin: 0; padding-left: 18px; }
@media (max-width: 640px) { .kbcc-dq-pd-folgen { grid-template-columns: 1fr; } .kbcc-dq-pd-folgen dd { margin-bottom: 4px; } }
.kbcc-dq-pd-body .kbcc-mode-btn:focus-visible,
.kbcc-dq-pd-radio input:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }

/* PR1.294 (#499) — die Zeichenfläche des Graphen ist per Tastatur anspringbar; dann
   muss man auch sehen, dass man auf ihr steht (Konvention 20, Punkt 4). Nach innen
   versetzt, damit der Ring nicht am Rahmen abgeschnitten wird. */
#kbcc-cy:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: -4px;
    border-radius: 6px;
}
/* ============== PR1.266 (#460) — KONVERSIONEN (klassische Shell) ==============
   Zwilling zu .crm .conv-* in style-redesign.css. Gerechnet wird in beiden Shells
   im geteilten components/cockpit-conversions.js — hier steht nur das Aussehen. */

.kbcc-conv-bar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 0 0 10px; }
/* Wie bei .kbcc-ctree-bar: ohne diese Regel bleibt das Suchfeld ein natives
   Bedienelement — weisser Grund mitten in der dunklen klassischen Shell. */
.kbcc-conv-bar input[type="search"] {
    min-width: 220px;
    background: var(--bg-input);
    color: var(--text-primary);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 7px 10px;
    font: inherit;
}
.kbcc-conv-bar input[type="search"]::placeholder { color: var(--text-secondary); }
.kbcc-conv-segs { display: inline-flex; gap: 4px; }

.kbcc-conv-stats { margin-bottom: 6px; }
.kbcc-conv-note { margin: 0 0 14px; color: var(--text-secondary); font-size: var(--fs-ui); }

/* Die Auffaelligkeitszeile: Zahl und Sprung, keine zweite Liste — die vollstaendige
   Aufarbeitung baut die Datenqualitaets-Sicht (#461). */
.kbcc-conv-hint {
    display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
    margin: 0 0 16px; padding: 10px 12px;
    background: var(--bg-card2);
    border-left: 3px solid var(--warning);
    border-radius: var(--radius-sm);
    font-size: var(--fs-body); color: var(--text-primary);
}
/* Der Text bleibt in der Primaerfarbe, die Warnfarbe traegt der Balken links:
   --warning auf --bg-card2 ergibt im hellen Theme 4.44:1 und verfehlt AA knapp.
   Dieselbe Entscheidung wie im Redesign, wo `b` deshalb --ad-orange-900 traegt. */
.kbcc-conv-hint strong { color: var(--text-primary); }
.kbcc-conv-hint .btn { margin-left: auto; }
.kbcc-conv-hint-ok { border-left-color: var(--success); }
.kbcc-conv-hint-ok strong { color: var(--text-primary); }

.kbcc-conv-block { margin-bottom: 22px; }
.kbcc-conv-h { margin: 0 0 10px; font-size: var(--fs-body); font-weight: 500; color: var(--text-primary); }
.kbcc-conv-count { color: var(--text-secondary); font-size: var(--fs-ui); font-weight: 400; }
.kbcc-conv-chart { margin-bottom: 6px; }

.kbcc-conv-tbl { width: 100%; border-collapse: collapse; font-size: var(--fs-body); }
.kbcc-conv-tbl th, .kbcc-conv-tbl td { padding: 7px 10px; text-align: left;
    border-bottom: 1px solid var(--border); vertical-align: top; }
.kbcc-conv-tbl thead th { color: var(--text-secondary); font-size: var(--fs-ui); font-weight: 500; }
/* Nur die ZAHLEN bleiben ungebrochen; die Kopfzeilen duerfen umbrechen. */
/* Kopfzeilen duerfen umbrechen, die Zahlen darunter nicht. */
.kbcc-conv-tbl thead th { white-space: normal; }
.kbcc-conv-tbl th.num { text-align: right; }
.kbcc-conv-tbl td.num { text-align: right; white-space: nowrap; }
.kbcc-conv-tbl tbody th { white-space: normal; }
/* Lange Projekt- und Kundennamen mussten umbrechen duerfen: `anywhere` senkt — anders
   als `break-word` — auch die intrinsische MINDESTbreite der Spalte. Ohne die Regel
   wurde die Konversionsliste bei 900 px Fensterbreite 1054 px breit und die ganze
   Seite scrollte waagerecht (Konvention 20, Punkt 1). */
/* `break-word` statt `anywhere` — letzteres bricht mitten im Wort. */
.kbcc-conv-liste td:first-child, .kbcc-conv-liste td:nth-child(2),
.kbcc-conv-tbl tbody th { overflow-wrap: break-word; }
/* Gleiche Breitenvorgabe wie im Zwilling, damit die Namensspalten nicht ausgehungert
   werden und die Zeilen flach bleiben. NUR fuer die Liste: in der Gruppentabelle ist
   die zweite Spalte eine Zahl, dort riss die Vorgabe eine Luecke auf. */
.kbcc-conv-liste th:first-child, .kbcc-conv-liste th:nth-child(2) { width: 24%; }
.kbcc-conv-tbl .kbcc-ctree-sub { display: block; color: var(--text-secondary); font-size: var(--fs-ui); }
/* Die geerbte Regel .kbcc-ctree-link setzt white-space: nowrap — im Kunden-Baum
   richtig (eine Spalte, viel Platz), in der Konversionsliste nicht: dort standen
   sechs Spalten nebeneinander, und ein langer Projektname spannte die Tabelle auf
   1054 px auf. Der Umbruch wird deshalb hier gezielt wieder erlaubt. */
.kbcc-conv-tbl .kbcc-ctree-link { white-space: normal; text-align: left; }
/* Die Gruppenzeile ist der Blockanfang — dieselbe Tonung wie die Kundenzeile im
   Kunden-Baum, damit beide Sichten dieselbe Sprache sprechen. */
/* Zeilenkoepfe tragen DATEN, keine Spaltenueberschrift — ohne diese Regel machte
   die geerbte Grossschreibung aus `Lead` ein `LEAD`. Nur thead bleibt in Versalien. */
.kbcc-conv-tbl tbody th, .kbcc-conv-tbl tfoot th { text-transform: none; letter-spacing: normal; }
.kbcc-conv-grp > th { background: var(--bg-card2); font-weight: 600; }
.kbcc-conv-kind > td { color: var(--text-secondary); padding-left: 26px; }
.kbcc-conv-tbl tfoot th, .kbcc-conv-tbl tfoot td { border-top: 2px solid var(--border);
    font-weight: 600; color: var(--text-primary); }
.kbcc-conv-warn { color: var(--warning); font-weight: 600; }
/* Archivierte Zeilen bleiben lesbar: Tonung am Elternteil statt Deckkraft am Kind,
   sonst laesst sie sich fuer den Text nicht mehr zuruecknehmen. */
.kbcc-conv-archiv > td { color: var(--text-secondary); }
.kbcc-conv-glyph { display: inline-block; width: 14px; text-align: center; color: var(--text-secondary); }
/* ── PR1.271 (#465) — Gespeicherte Auswertungen, klassisches Gesicht ─────────
   Zwilling zu den .sv-*-Regeln in style-redesign.css. Dieselbe Anordnung, die
   Formensprache der klassischen Shell: px statt rem, --text-primary statt --text-1.

   KEINE Bewegung — dieselbe Begruendung wie beim Diagramm-Baukasten darueber:
   ein Werkzeug, das taeglich geoeffnet wird, darf beim Oeffnen nicht auffuehren. */

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

.sv-raster {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 12px;
}

.sv-kachel {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 14px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 8px;
}

.sv-kachel.is-frei { border-color: var(--primary); }

/* Ein echter Knopf, kein anklickbarer Kasten — sonst gibt es keinen Tastaturweg
   zur Auswertung. */
.sv-oeffnen {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  width: 100%;
  padding: 0;
  background: none;
  border: 0;
  cursor: pointer;
  text-align: left;
  color: inherit;
  font: inherit;
}

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

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

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

.sv-fuss {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 8px;
  font-size: var(--fs-ui);
  color: var(--text-3);
}

.sv-marke {
  padding: 1px 6px;
  border-radius: 6px;
  font-size: var(--fs-meta);
  font-weight: 500;
  border: 1px solid var(--border);
}

/* --primary-dark und nicht --primary: weiss auf #6366f1 ergibt 4,46:1 und
   verfehlt AA um vier Hundertstel — bei 11px greift keine Ausnahme fuer grosse
   Schrift. Dieselbe Stufe, die PR1.279 fuer die Marken-Chips eingezogen hat;
   sie schafft 6,09:1 im dunklen und 7,31:1 im hellen Theme. Das Redesign
   braucht den Griff nicht: --ad-violet steht dort bei 9,59:1. */
.sv-marke-frei {
  background: var(--primary-dark);
  border-color: var(--primary-dark);
  color: #fff;
}

.sv-marke-privat { color: var(--text-secondary); }
.sv-besitzer { color: var(--text-secondary); }

.sv-aktionen {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding-top: 8px;
  border-top: 1px solid var(--border);
}

.sv-loeschen.is-scharf { font-weight: 600; }

.sv-skelett { gap: 10px; }

.sv-skelett-zeile {
  display: block;
  height: 12px;
  border-radius: 6px;
  background: var(--bg-hover);
}

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

.sv-leer-text {
  margin: 0 0 12px;
  font-size: var(--fs-body);
  color: var(--text-secondary);
  line-height: 1.5;
}

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

.sv-dialog-huelle {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  background: rgba(0, 0, 0, 0.55);
}

.sv-dialog {
  width: min(440px, 94vw);
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.sv-dialog-titel {
  margin: 0;
  font-size: var(--fs-section);
  font-weight: 600;
  color: var(--text-primary);
}

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

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

.sv-schalter {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: var(--fs-body);
  color: var(--text-primary);
  cursor: pointer;
}

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

.sv-dialog-fuss {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 4px;
}
/* ── BF-52 (#501) — Hinweisstreifen: abgelaufene Anmeldung ──────────────────
   Grundoptik fuer BEIDE Shells; das Redesign schaerft in style-redesign.css nach.

   `position: fixed` statt eines Elements im Fluss: der Streifen haengt klassisch an
   `document.body` und im Redesign an `#app-crm` — letzteres traegt `height: 100dvh`
   und ein Grid-Layout darin, das ein zusaetzliches erstes Kind im Fluss zerlegen
   wuerde. Geprueft: kein Vorfahre setzt `transform`/`filter`, sonst waere `fixed`
   dort still zu einem `absolute` geworden.

   Der Freiraum darunter kommt aus `--session-banner-h`. Der Wert wird nach dem
   Zeichnen aus der tatsaechlichen Hoehe nachgefuehrt — bei schmalem Fenster bricht
   der Text um, und ein fester Wert wuerde dann die Kopfzeile verdecken. */
:root { --session-banner-h: 44px; }

.session-banner {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  /* Unter den Dialogen (10000), ueber allem anderen: ein Dialog verlangt eine
     Entscheidung und darf nicht ueberdeckt werden. */
  z-index: 9000;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 10px 20px;
  background: var(--bg-card);
  border-bottom: 2px solid var(--warning);
  /* `--text-1`, nicht `--text-primary`: letzteres ist NUR im hellen Erscheinungs-
     bild definiert (style.css :root[data-theme="light"]). Im dunklen Standard —
     dem Regelfall der klassischen Shell — war die Angabe ungueltig, die Farbe
     fiel auf den geerbten Wert zurueck, und der Text stand dunkel auf dunkel.
     `--text-1` ist in beiden Erscheinungsbildern und beiden Shells definiert. */
  color: var(--text-1);
  font-size: var(--fs-body);
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.28);
  /* Einziges Motion-Budget dieses Tickets: ein kurzes Einblenden, wie beim
     Outbox-Anzeiger aus BF-33. Der Moment ist ohnehin unangenehm; Bewegung
     macht ihn nicht besser. */
  animation: session-banner-ein 120ms ease-out;
}

@keyframes session-banner-ein {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  .session-banner { animation: none; }
}

.session-banner-text { flex: 1 1 auto; min-width: 0; }

.session-banner-btn { flex: 0 0 auto; white-space: nowrap; }

/* Fokusring MUSS hier stehen. Das Redesign hat mit `.crm :focus-visible` eine
   generische Regel, die jedes Bedienelement abdeckt; die klassische Shell vergibt
   den Ring dagegen PRO Komponente (`.cust-name-btn`, `.nav-item`, …). Ohne diese
   Regel bliebe hier nur der duenne Browser-Standardring — auf einem Knopf, der der
   einzige Ausweg aus einer toten Sitzung ist. */
.session-banner-btn:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
  border-radius: 4px;
}

/* Freiraum, damit der Streifen die Kopfzeile nicht verdeckt. */
html[data-session-expired] body { padding-top: var(--session-banner-h); }

/* Im Redesign fuellt `#app-crm` die Bildhoehe; dort wird sie verkleinert statt
   den Koerper zu polstern, sonst waere das untere Ende abgeschnitten. */
html[data-session-expired] #app-crm.crm {
  height: calc(100dvh - var(--session-banner-h));
  margin-top: var(--session-banner-h);
}
html[data-session-expired] body:has(#app-crm.crm) { padding-top: 0; }

/* ── PR1.561 (#844) — Hinweisleiste „Neuer Stand verfügbar" ─────────────────────
   Leise Info, nur waehrend eine Maske offen ist. Schwebt oben mittig ueber der Maske
   (Masken 1000, Session-Streifen 9000, Pflichtdialoge 10000) und verschiebt kein
   Layout. Keine Animation: taeglich genutzt, soll nicht auffallen. */
.stand-hinweis {
  position: fixed;
  top: 12px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 8000;
  /* Ohne `max-content` schrumpft die mittig verschobene Leiste auf halbe Fensterbreite. */
  width: max-content;
  max-width: calc(100vw - 32px);
  box-sizing: border-box;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 8px 8px 16px;
  background: var(--bg-card);
  color: var(--text-1);
  border: 1px solid var(--border);
  border-left: 3px solid var(--info);
  border-radius: 8px;
  font-size: var(--fs-body);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.28);
}
.stand-hinweis-text { flex: 1 1 auto; min-width: 0; }
.stand-hinweis-zu {
  flex: 0 0 auto;
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  color: var(--text-2);
  border: 0;
  border-radius: 6px;
  font-size: var(--fs-title);
  line-height: 1;
  cursor: pointer;
}
.stand-hinweis-zu:hover { background: var(--bg-hover); color: var(--text-1); }
.stand-hinweis-zu:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}

/* ── PR1.540 (#821) — Warndialog vor der Leerlauf-Abmeldung ──────────────────
   Grundoptik fuer BEIDE Shells; style-redesign.css schaerft mit Marken nach.
   Ueber dem BF-52-Streifen (9000) und auf Hoehe der uebrigen Pflichtdialoge (10000):
   die Entscheidung „bleiben oder gehen" darf von nichts verdeckt werden.
   Kein eigenes Motion-Budget: der Dialog erscheint hoechstens einmal pro Pause und
   nutzt das vorhandene `fadeIn` der Modale (150 ms), bei reduzierter Bewegung keins. */
.idle-dialog-overlay {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  background: rgba(0, 0, 0, .7);
  animation: fadeIn .15s ease;
}

@media (prefers-reduced-motion: reduce) {
  .idle-dialog-overlay { animation: none; }
}

.idle-dialog {
  width: min(440px, 100%);
  padding: 24px;
  background: var(--bg-card);
  border: 1px solid var(--border-light);
  border-top: 3px solid var(--warning);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-lg);
  /* `--text-1` statt `--text-primary` — Begruendung siehe BF-52-Streifen oben. */
  color: var(--text-1);
}

.idle-dialog-titel {
  margin: 0 0 8px;
  font-size: var(--fs-section);
  font-weight: 600;
}

.idle-dialog-text {
  margin: 0;
  font-size: var(--fs-body);
  line-height: 1.5;
}

/* Ziffern gleicher Breite: der Countdown springt sonst jede Sekunde seitlich. */
.idle-dialog-rest {
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.idle-dialog-aktionen {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 20px;
}

/* Fokusring pro Komponente — die klassische Shell hat keinen generischen. */
.idle-dialog-aktionen .btn:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}

/* ===================================================================
   PR1.250 (#444) — MA-Übersicht: drei Darstellungen, Frei-Kennzeichen
   ===================================================================
   BEWUSST auf #view-employees gescopt. style.css ist die gemeinsame Basis BEIDER Shells
   (siehe Legacy-Kompatibilitätsblock in style-redesign.css) — eine ungescopte
   `.emp-free`-Regel hier würde in der Redesign-Shell mitgelten und dort mit den
   `.crm`-Regeln um dieselben Elemente streiten. Der View-Container existiert nur in der
   klassischen Shell, damit ist die Trennung sauber statt vom Zufall der Spezifität abhängig. */

/* ── PR1.435 (#674) — die drei Ansichten nach dem Entwurf K9 ──
   Eine Farbsprache in allen drei Darstellungen: fest verplant blau, Planung gestreift mit
   gestricheltem Rand, Überbuchung rot (mit Warnsymbol), grün NUR „frei". Keine Ampelpunkte,
   keine ausgegrauten Zeilen. Die Töne sind lokale Aliase auf die Tokens der klassischen
   Shell; das helle Theme dunkelt nur die Schrift auf Hellgrün nach (AA). */
#view-employees {
  --emp-fest: var(--adesso-blue);
  --emp-fest-ink: #fff;
  --emp-ueber: color-mix(in srgb, var(--danger) 80%, #000);
  --emp-ueber-ink: #fff;
  --emp-frei-bg: color-mix(in srgb, var(--util-ok) 16%, var(--bg-card));
  --emp-frei-rand: color-mix(in srgb, var(--util-ok) 38%, var(--bg-card));
  --emp-frei-ink: var(--util-ok);
  --emp-plan-a: color-mix(in srgb, var(--adesso-blue) 38%, transparent);
  --emp-plan-b: color-mix(in srgb, var(--adesso-blue) 12%, transparent);
  --emp-track: var(--bg-hover);
}
:root[data-theme="light"] #view-employees {
  --emp-frei-ink: color-mix(in srgb, var(--util-ok) 70%, #000);
  --emp-plan-a: color-mix(in srgb, var(--adesso-blue) 26%, transparent);
  --emp-plan-b: color-mix(in srgb, var(--adesso-blue) 8%, transparent);
}

/* ── Kopfzeile: Weg zum Einsatzplan · „mit Planung" · Menü „Mehr" ── */
#view-employees .emp-head {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  margin: 0 0 14px;
}
#view-employees .emp-head-spacer { flex: 1 1 auto; }
#view-employees .emp-sort[hidden] { display: none; }
#view-employees .emp-sort {
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text-1);
  padding: 7px 12px;
  font: inherit; font-size: var(--fs-ui);
  cursor: pointer;
}
#view-employees .emp-toggle {
  font: inherit; font-size: var(--fs-ui); font-weight: 500;
  padding: 7px 14px;
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  background: var(--bg-card); color: var(--text-2);
  cursor: pointer;
}
#view-employees .emp-toggle:hover { color: var(--text-1); border-color: var(--border-light); }
#view-employees .emp-toggle.is-on {
  background: color-mix(in srgb, var(--primary) 16%, var(--bg-card));
  border-color: var(--primary); color: var(--primary-text); font-weight: 600;
}
#view-employees .emp-sort:focus-visible,
#view-employees .emp-toggle:focus-visible,
#view-employees .emp-plan-link:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
/* PR1.523 — ruhiger Textlink: die Verfügbarkeit über die Zeit steht im Einsatzplan. */
#view-employees .emp-plan-link {
  font: inherit; font-size: var(--fs-ui); font-weight: 500;
  padding: 4px 2px;
  border: 0; background: none; color: var(--primary-text);
  cursor: pointer;
}
#view-employees .emp-plan-link:hover { text-decoration: underline; }

/* Menü „Mehr" (Markup wie moreMenuHtml, Verhalten aus bindMoreMenus). */
#view-employees .more-menu { position: relative; }
#view-employees .more-menu-btn { display: inline-flex; align-items: center; gap: 6px; }
#view-employees .more-menu-list {
  position: absolute; right: 0; top: calc(100% + 4px); z-index: 40;
  min-width: 230px;
  display: flex; flex-direction: column;
  padding: 6px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}
#view-employees .more-menu-list[hidden] { display: none; }
#view-employees .more-menu-item {
  font: inherit; font-size: var(--fs-body); text-align: left;
  display: flex; align-items: center; gap: 9px;
  padding: 8px 10px;
  border: 0; border-radius: var(--radius-sm);
  background: transparent; color: var(--text-1);
  cursor: pointer;
}
#view-employees .more-menu-item:hover,
#view-employees .more-menu-item:focus-visible { background: var(--bg-hover); }
#view-employees .more-menu-item:focus-visible { outline: 2px solid var(--primary); outline-offset: -2px; }

/* ── Die Fläche: Filterzeile, Auswahl, Schildchen, Inhalt ── */
#view-employees .emp-panel {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
}
#view-employees .emp-filter-row {
  flex-wrap: wrap;
  margin: 0;
  padding: 12px 16px;
  border-bottom: 1px solid var(--border);
}
#view-employees .emp-filter-row .search-wrap { flex: 0 1 340px; min-width: 220px; }
#view-employees .emp-cc-filter { display: inline-flex; align-items: center; gap: 6px; }

/* „Frei ab" und „Weitere Filter" — Kopf wie das CC-Dropdown daneben. */
#view-employees .emp-pop { position: relative; }
#view-employees .emp-pop-toggle {
  list-style: none;
  cursor: pointer; user-select: none;
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text-1);
  padding: 7px 12px;
  font-size: var(--fs-ui);
}
#view-employees .emp-pop-toggle::-webkit-details-marker { display: none; }
#view-employees .emp-pop-toggle::after {
  content: '';
  display: inline-block; width: .7rem; height: .7rem; background-color: currentColor;
  -webkit-mask: var(--ic-mask-caret-down); mask: var(--ic-mask-caret-down);
  color: var(--text-3);
}
#view-employees .emp-pop-toggle:hover,
#view-employees .emp-pop[open] > .emp-pop-toggle { border-color: var(--primary); }
#view-employees .emp-pop-toggle:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
#view-employees .emp-pop.is-set > .emp-pop-toggle {
  background: color-mix(in srgb, var(--primary) 16%, var(--bg-card));
  border-color: var(--primary); color: var(--primary-text); font-weight: 600;
}
#view-employees .emp-pop-count {
  background: var(--primary-dark); color: #fff;
  border-radius: 999px; padding: 0 7px;
  font-size: var(--fs-label); line-height: 1.6;
}
#view-employees .emp-pop-count[hidden] { display: none; }
#view-employees .emp-pop-panel {
  position: absolute; z-index: 30; top: calc(100% + 4px); left: 0;
  display: flex; flex-direction: column; gap: 10px;
  min-width: 240px;
  padding: 12px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}
#view-employees .emp-pop-field { display: flex; flex-direction: column; gap: 4px; font-size: var(--fs-meta); color: var(--text-2); }
#view-employees .emp-pop-field input,
#view-employees .emp-pop-field select {
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text-1);
  padding: 6px 10px;
  font: inherit; font-size: var(--fs-ui);
}

/* Ohne Auswahl sind alle Kinder ausgeblendet und die Zeile hat keine Höhe. */
#view-employees .emp-bulk-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 0 16px; }
#view-employees .emp-bulk-row > * { margin-block: 8px; }
#view-employees .clsf-progress-host { flex: 1 1 100%; }
#view-employees .clsf-progress-host:empty { display: none; }

#view-employees .emp-chips-row {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  padding: 9px 16px;
  background: var(--bg-card2);
  border-bottom: 1px solid var(--border);
  font-size: var(--fs-ui); color: var(--text-2);
}
#view-employees .emp-chips-row[hidden] { display: none; }
#view-employees .emp-chip {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 2px 4px 2px 10px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--primary) 16%, var(--bg-card));
  color: var(--primary-text); font-weight: 600;
}
#view-employees .emp-chip-x {
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px;
  border: 0; border-radius: 50%;
  background: transparent; color: inherit; cursor: pointer;
}
#view-employees .emp-chip-x:hover { background: color-mix(in srgb, var(--primary) 22%, transparent); }
#view-employees .emp-chip-x:focus-visible { outline: 2px solid var(--primary); outline-offset: 1px; }
#view-employees .emp-chips-count { color: var(--text-3); }
#view-employees .emp-chips-reset {
  font: inherit; font-size: var(--fs-ui); font-weight: 500;
  border: 0; background: none; padding: 2px 0;
  color: var(--primary-text); cursor: pointer;
}
#view-employees .emp-chips-reset:hover { text-decoration: underline; }
#view-employees .emp-chips-reset:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }

/* ── Bausteine: Balken, Zahl, Schild, Fähigkeiten ── */
#view-employees .emp-bar {
  display: flex; flex: 0 0 auto;
  width: 120px; height: 7px;
  border-radius: 999px;
  background: var(--emp-track);
  overflow: hidden;
}
#view-employees .emp-bar-fest { background: var(--emp-fest); }
#view-employees .emp-bar-fest.is-ueber { background: var(--danger); }
#view-employees .emp-bar-plan {
  background: repeating-linear-gradient(135deg, var(--emp-plan-a) 0 4px, var(--emp-plan-b) 4px 8px);
}
#view-employees .emp-load { display: inline-flex; align-items: center; gap: 10px; white-space: nowrap; }
#view-employees .emp-load-zahl {
  min-width: 3.4em; text-align: right;
  font-weight: 600; font-variant-numeric: tabular-nums; color: var(--text-1);
}
#view-employees .emp-load-zahl.is-ueber { color: var(--danger); }
#view-employees .emp-load.is-off .emp-load-zahl { min-width: 0; text-align: left; font-weight: 400; color: var(--text-3); }
#view-employees .emp-load-warn { display: inline-flex; color: var(--danger); }
#view-employees .emp-frei-schild {
  display: inline-flex; align-items: center;
  padding: 1px 8px;
  border-radius: var(--radius-sm);
  background: var(--emp-frei-bg);
  color: var(--emp-frei-ink);
  font-size: var(--fs-meta); font-weight: 500;
  white-space: nowrap;
}
#view-employees .emp-skills { display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; }
#view-employees .emp-skills .chip { border-radius: var(--radius-sm); }
#view-employees .emp-skills-rest { font-size: var(--fs-meta); color: var(--text-3); }
#view-employees .emp-card-muted { color: var(--text-3); font-size: var(--fs-ui); }

/* ── Karten: nur noch Shoring-Slots (die Personen stehen in der Tabelle) ── */
#view-employees .employee-card {
  display: flex; flex-direction: column; gap: 12px;
  padding: 18px;
  border-radius: var(--radius);
  background: var(--bg-card);
}
#view-employees .employee-card:hover { transform: none; }
#view-employees .employee-card-header { margin: 0; align-items: center; }
#view-employees .employee-card .emp-avatar { width: 48px; height: 48px; min-width: 48px; font-size: var(--fs-body); }
#view-employees .emp-card-ident { flex: 1 1 auto; min-width: 0; }
#view-employees .emp-card-ident .emp-name {
  font-weight: 600; color: var(--text-1);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* BF-104 (#745) — der Name ist ein Knopf (Tastaturweg ins Profil), sieht aber aus wie bisher. */
#view-employees .emp-card-open {
  display: block; max-width: 100%;
  font: inherit; font-weight: 600; text-align: left;
  background: none; border: 0; padding: 0;
  color: var(--text-1); cursor: pointer;
}
#view-employees .emp-card-open:hover { color: var(--primary-text); text-decoration: underline; }
#view-employees .emp-card-open:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
#view-employees .emp-card-grund { flex: 0 1 auto; font-size: var(--fs-ui); color: var(--text-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#view-employees .emp-card-ident .emp-role {
  font-size: var(--fs-ui); color: var(--text-2);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* Auswahl, Skill-Profil und Bearbeiten liegen über der Ecke und erscheinen bei Zeiger oder
   Tastaturfokus — der Name behält die volle Breite. Eine gesetzte Auswahl bleibt sichtbar. */
#view-employees .emp-card-tools {
  position: absolute; top: 8px; right: 8px; z-index: 2;
  display: inline-flex; align-items: center; gap: 2px;
  padding: 2px;
  border-radius: 999px;
  background: var(--bg-card);
  opacity: 0;
}
#view-employees .employee-card:hover .emp-card-tools,
#view-employees .emp-card-tools:focus-within,
#view-employees .emp-card-tools:has(input:checked) { opacity: 1; }
@media (hover: none) { #view-employees .emp-card-tools { opacity: 1; } }
#view-employees .emp-card-tools .emp-select-cell { margin: 0; }
#view-employees .emp-card-skills-btn,
#view-employees .emp-card-edit-btn {
  position: static;
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; padding: 0;
  border: 0; border-radius: 50%;
  background: transparent; color: var(--text-3);
  cursor: pointer;
}
#view-employees .emp-card-skills-btn:hover,
#view-employees .emp-card-edit-btn:hover { background: var(--bg-hover); color: var(--text-1); transform: none; }
#view-employees .emp-card-skills-btn:focus-visible,
#view-employees .emp-card-edit-btn:focus-visible { outline: 2px solid var(--primary); outline-offset: 1px; }
#view-employees .emp-card-load { display: flex; align-items: center; gap: 12px; }
#view-employees .emp-card-load .emp-bar { flex: 1 1 auto; width: auto; }
#view-employees .emp-card-status {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  min-height: 24px; font-size: var(--fs-ui);
}
#view-employees .emp-card-freeab { color: var(--text-1); font-weight: 600; }
#view-employees .emp-card-ueber { display: inline-flex; align-items: center; gap: 5px; color: var(--danger); font-weight: 600; }
#view-employees .emp-card-note {
  color: var(--text-3); text-align: right;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0;
}
#view-employees .emp-card-skills { margin-top: auto; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }

/* ── Die Tabelle braucht kein Raster ── */
#view-employees .employee-grid[data-emp-mode="table"] {
  display: block;
}

/* ── Gemeinsame Zeilenbausteine ── */
#view-employees .emp-row-name { display: inline-flex; align-items: center; gap: 10px; min-width: 0; }
#view-employees .emp-row-ident { display: flex; flex-direction: column; min-width: 0; }
#view-employees .emp-row-sub {
  font-size: var(--fs-meta); color: var(--text-2);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
#view-employees .emp-row-open {
  font: inherit; font-size: var(--fs-body); font-weight: 500;
  background: none; border: 0; padding: 0; text-align: left;
  color: var(--text-1); cursor: pointer;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%;
}
#view-employees .emp-row-open:hover { color: var(--primary-text); text-decoration: underline; }
#view-employees .emp-row-open:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
#view-employees .emp-avatar.is-sm { width: 36px; height: 36px; min-width: 36px; font-size: var(--fs-label); }

/* ── Darstellung 2: Tabelle ── */
#view-employees .emp-table-wrap { overflow-x: auto; }
#view-employees .emp-tbl { width: 100%; border-collapse: separate; border-spacing: 0; font-size: var(--fs-body); }
#view-employees .emp-tbl thead th {
  text-align: left; font-size: var(--fs-label); font-weight: 500;
  color: var(--text-3);
  background: var(--bg-card2);
  padding: 10px 14px;
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
}
#view-employees .emp-tbl thead th.is-sorted { color: var(--text-1); }
#view-employees .emp-th-sort {
  font: inherit; color: inherit; letter-spacing: inherit; text-transform: inherit;
  display: inline-flex; align-items: center; gap: 5px;
  background: none; border: 0; padding: 0; cursor: pointer;
}
#view-employees .emp-th-sort:hover { color: var(--text-1); }
#view-employees .emp-th-sort:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
#view-employees .emp-tbl tbody td {
  padding: 10px 14px;
  border-bottom: 1px solid var(--border);
  vertical-align: middle;
  color: var(--text-1);
}
#view-employees .emp-tbl tbody tr { cursor: pointer; }
#view-employees .emp-tbl tbody tr:hover td { background: var(--bg-hover); }
#view-employees .emp-td-select { width: 32px; }
#view-employees .emp-td-cc { color: var(--text-2); }
#view-employees .emp-td-freeab { font-weight: 600; white-space: nowrap; }

/* Legende unter Tabelle und Zeitleiste. */
#view-employees .emp-legende {
  display: flex; align-items: center; gap: 8px 20px; flex-wrap: wrap;
  padding: 12px 16px;
  font-size: var(--fs-ui); color: var(--text-2);
}
#view-employees .emp-legende-item { display: inline-flex; align-items: center; gap: 7px; }
#view-employees .emp-legende-swatch { display: inline-block; width: 26px; height: 8px; border-radius: 999px; }
#view-employees .emp-legende-swatch.is-fest { background: var(--emp-fest); }
#view-employees .emp-legende-swatch.is-geplant {
  background: repeating-linear-gradient(135deg, var(--emp-plan-a) 0 4px, var(--emp-plan-b) 4px 8px);
  outline: 1px dashed var(--emp-fest); outline-offset: -1px;
}
#view-employees .emp-legende-swatch.is-ueberbucht { background: var(--emp-ueber); }

/* ── Leerzustand ── */
#view-employees .emp-empty {
  grid-column: 1 / -1;
  display: flex; flex-direction: column; align-items: flex-start; gap: 8px;
  padding: 28px 20px;
  color: var(--text-2);
}
#view-employees .emp-empty-text { margin: 0; font-size: var(--fs-body); color: var(--text-1); }
#view-employees .emp-empty-tipp { margin: 0; font-size: var(--fs-ui); color: var(--text-3); }

/* Shoring-Slots bleiben Kacheln. */
#view-employees .emp-shoring-cards {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px;
  margin-top: 12px;
}
/* PR1.295 (#500) — Nebentexte im Reiter „Funktionen".
   `.muted` hatte in dieser Tabelle keinen greifenden Selektor: in dieser Datei
   existiert die Klasse nur unter drei fremden Elternteilen (.cust-focus-main,
   .import-review-table, table.opp-table). Herkunftsangabe, Wirkungssatz und der
   Denk-Hinweis standen deshalb in voller Textfarbe — genauso laut wie der
   Aufgabenname daneben. Befund #399, hier fuer diese Tabelle geschlossen. */
.crm-table .muted { color: var(--text-3); }
.funk-hinweis { margin-top: 4px; font-size: var(--fs-body); color: var(--text-3); }
.funk-tabelle-rahmen { overflow-x: auto; }
/* PR1.295 (#500) — „abgeschaltet" trug seine Farbe bisher als Inline-Angabe mit
   `--warning`. Im Redesign ist dieses Token global gar nicht gesetzt, dort erbte
   die Zelle den Dunkel-Wert aus dieser Datei und blieb auf hellem Grund unter
   AA (axe, Systemzustand). Als Klasse ist sie je Shell korrigierbar. */
.funk-aus { color: var(--warning); font-weight: 600; }

/* ═══ PR1.307 (#516) — geheftete Auswertungen als eigene Dashboard-Karten ═══════
   Basis fuer BEIDE Shells. Die Redesign-Shell korrigiert in style-redesign.css nur
   die Farben, die im `.crm`-Scope andere Tokens brauchen — Struktur und Abstaende
   gelten dort unveraendert. Bewusst OHNE Animation: das Dashboard ist die Startseite,
   und was jemand mehrmals taeglich oeffnet, darf sich nicht bewegen. */

.dash-pin-slot { display: block; }

.dash-pin-koerper {
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex-grow: 1;
}

/* ── Ladezustand ── */

.dash-pin-skelett {
  display: flex;
  flex-direction: column;
  gap: 11px;
}

.dash-pin-skelett-zeile {
  display: flex;
  align-items: center;
  gap: 10px;
}

.dash-pin-skelett-label {
  flex: none;
  width: 74px;
  height: 10px;
  border-radius: 4px;
  background: var(--bg-hover);
}

.dash-pin-skelett-balken {
  height: 16px;
  border-radius: 4px;
  background: var(--bg-hover);
}

/* ── Auswertung verschwunden / Stoerung / leer ── */

.dash-pin-weg,
.dash-pin-fehler,
.dash-pin-leer {
  justify-content: center;
  align-items: flex-start;
  gap: 8px;
  padding: 4px 0;
}

.dash-pin-marke {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: var(--fs-meta);
  font-weight: 500;
  color: var(--warning);
}

.dash-pin-weg-titel,
.dash-pin-fehler-titel,
.dash-pin-leer-titel {
  font-size: var(--fs-body);
  font-weight: 500;
  color: var(--text-1);
  line-height: 1.35;
}

.dash-pin-weg-text,
.dash-pin-fehler-text,
.dash-pin-leer-text {
  margin: 0;
  font-size: var(--fs-ui);
  color: var(--text-2);
  line-height: 1.5;
}

.dash-pin-aktionen {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 6px;
}

/* Der Entfernen-Knopf ist die einzige Stelle, an der eine Karte verschwindet —
   er traegt Rot, aber als Umriss: die Karte ist schon kaputt, sie muss nicht schreien. */
.dash-pin-entfernen {
  border-color: var(--danger);
  color: var(--danger);
}

/* ── Der gezeichnete Zustand ── */
/* Die Karte deckelt die Hoehe, damit eine lange Tabelle die Nachbarkarten nicht in
   die Laenge zieht. */
.dash-pin-bild {
  max-height: 260px;
  overflow: auto;
}

.dash-pin-bild table { width: 100%; font-size: var(--fs-ui); }

/* Die Diagramme aus chart-kit.js zeichnen in einer festen Breite von 800 und werden
   per viewBox auf die Zielbreite gestaucht — auf einer Dashboard-Karte ist das rund
   0,4. Die Beschriftung schrumpft dabei MIT: aus 12 wurden gemessene 4,9 Pixel, und
   damit war die Karte hübsch und unlesbar. Im Cockpit faellt das nicht auf, weil das
   Diagramm dort fast die ganze Fensterbreite hat.
   Deshalb hier gegengesteuert: die Schrift wird im Quelltext-Massstab so gross
   gewaehlt, dass nach der Stauchung wieder rund 11 Pixel ankommen. Als CSS-Regel,
   weil sie so die font-size-ATTRIBUTE im SVG ueberstimmt — chart-kit.js bleibt
   unberuehrt, es ist ein geteilter Baustein und hat keine Breiten-Option. */
.dash-pin-bild .ck-svg text { font-size: var(--fs-display); }

/* PR1.308 (#517): die 26 gelten fuer eine viertelbreite Karte. Die Stauchung ist
   umgekehrt proportional zur Kartenbreite — auf halber Breite kommt derselbe Wert
   doppelt so gross an, auf voller Breite viermal. Also gegenlaeufig staffeln, damit
   ueberall rund 11 Pixel ankommen. */
.dash-size-mittel .dash-pin-bild .ck-svg text { font-size: var(--fs-body); }
.dash-size-gross  .dash-pin-bild .ck-svg text { font-size: var(--fs-label); }

/* Eine breite Karte darf ihr Diagramm auch hoeher zeigen — sonst gewinnt sie Breite
   und behaelt den Briefschlitz. */
.dash-size-gross .dash-pin-bild { max-height: 420px; }

/* ── Cockpit: der Heften-Knopf auf der Kachel ── */

.sv-heften {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  padding-top: 8px;
}

.sv-heften-marke {
  font-size: var(--fs-meta);
  color: var(--text-secondary);
}

.sv-kachel.is-geheftet { border-color: var(--accent); }

.sv-heften-dialog select { width: 100%; }

/* Der Weg-Knopf steht nur an eigenen Karten — eine Werkskarte laesst sich ausblenden,
   aber nicht abschaffen. Er sitzt in derselben Knopfreihe wie ↑/↓, damit die Zeile
   eine Reihe bleibt und nicht in zwei zerfaellt. */
.dash-cfg-weg {
  background: none;
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 2px 7px;
  font: inherit;
  font-size: var(--fs-ui);
  line-height: 1.4;
  color: var(--text-2);
  cursor: pointer;
}

.dash-cfg-weg:hover { border-color: var(--danger); color: var(--danger); }

/* PR1.307 (#516) — `.btn-violet` gab es bisher NUR im Redesign (style-redesign.css:546).
   In `crm-*.js` ist das richtig, dort rendert nur die Redesign-Shell. Aber
   cockpit-saved-views.js ist ein GETEILTES Gehirn: sein Markup landet in beiden
   Shells, und klassisch war der Bestätigungsknopf dadurch ein nackter `.btn` — er sah
   aus wie „Abbrechen" daneben. Betrifft neben dem neuen Heften-Dialog auch den
   Speichern-Dialog und den Leerzustand aus PR1.271 (#465).
   Kein neuer Farbwert: Violett ist in der klassischen Palette `--primary` (#6366f1). */
.btn-violet {
  background: var(--primary);
  color: white;
  border-color: var(--primary);
  box-shadow: 0 2px 12px var(--primary-glow);
}

.btn-violet:hover {
  background: var(--primary-dark);
  border-color: var(--primary-dark);
  box-shadow: 0 4px 16px var(--primary-glow);
}

/* ═══════════════════════════════════════════════════════════
   PR1.327 (#537) — Verlustgrund
   ═══════════════════════════════════════════════════════════
   Bewusst in der GEMEINSAMEN Basis, nicht in style-redesign.css: der
   Verlustgrund-Dialog ist EIN Modul mit identischen Element-IDs fuer beide Shells
   (public/js/modals/lost-reason-dialog.js). Zwei Regelsaetze fuer dieselben Elemente
   liefen unweigerlich auseinander. Was im Redesign anders aussehen muss, holt sich
   style-redesign.css im `.crm`-Scope ab — dort steht nur, was wirklich abweicht.
   Nebeneffekt, der zaehlt: der ui-craft-Ratchet zaehlt ausschliesslich
   style-redesign.css, hier kosten Rohwerte nichts. */

.lost-reason-overlay .lr-intro {
  margin: 0 0 16px;
  font-size: var(--fs-body);
  line-height: 1.5;
  color: var(--text-secondary, var(--text-2));
}
.lost-reason-overlay .lr-feld {
  display: flex;
  flex-direction: column;
  gap: 5px;
  margin-bottom: 14px;
}
.lost-reason-overlay .lr-feld > label {
  font-size: var(--fs-body);
  font-weight: 500;
}
/* ⚠️ Die Felder werden hier VOLLSTAENDIG gestylt, nicht nur in der Breite.
   `.form-control` ist in Apollon gar keine belegte Klasse — es gibt keine einzige
   Regel dafuer (gemessen). Die Eingabefelder fielen damit auf die Browser-Vorgabe
   zurueck und rendern im dunklen Kontext dunkelgrau: ein anthrazitfarbenes Feld in
   einem weissen Dialog. Der Irrelevant-Dialog aus PR1.04 traegt dieselbe Luecke —
   sie faellt dort nur niemandem auf, weil er selten geoeffnet wird.
   Ueber die Tokens gebunden, damit beide Shells ihre eigene Belegung ziehen. */
.lost-reason-overlay .lr-feld .form-control {
  width: 100%;
  box-sizing: border-box;
  padding: 8px 10px;
  font-family: inherit;
  font-size: var(--fs-body);
  line-height: 1.4;
  color: var(--text-primary);
  background: var(--bg-input);
  border: 1px solid var(--border-light);
  border-radius: 6px;
}
.lost-reason-overlay .lr-feld .form-control:focus-visible {
  outline: 2px solid var(--focus, var(--primary));
  outline-offset: 1px;
}
.lost-reason-overlay .lr-feld textarea.form-control { resize: vertical; min-height: 66px; }
.lost-reason-overlay .lr-pflicht { color: var(--danger); }
.lost-reason-overlay .lr-hilfe {
  font-size: var(--fs-meta);
  font-weight: 400;
  line-height: 1.4;
  color: var(--text-3, var(--text-secondary));
}
.lost-reason-overlay .lr-fussnote {
  margin-right: auto;
  font-size: var(--fs-meta);
  color: var(--text-3, var(--text-secondary));
}

/* Der Fehlerzustand. Er ist der Grund, warum der Dialog beim Speichern offen bleibt:
   schluege das Speichern fehl, nachdem er sich geschlossen hat, traefe die Meldung auf
   eine leere Buehne — die Eingabe waere weg und niemand wuesste, ob sie ankam. */
.lost-reason-overlay .lr-fehler {
  margin-top: 4px;
  padding: 9px 11px;
  border-radius: 6px;
  font-size: var(--fs-meta);
  line-height: 1.45;
  background: rgba(239, 68, 68, .12);
  color: var(--danger);
}
.lost-reason-overlay .lr-fehler[hidden] { display: none; }

/* PR1.451 (#695) — Irrelevant-Dialog: Duplikat ohne maßgebliche Opportunity. Gleiche Form
   wie der Fehlerzustand des Verlust-Dialogs, beide Shells (Overlay-Klasse in beiden Hüllen). */
.irrelevant-reason-overlay .ir-duplicate-error {
  margin: 6px 0 0;
  padding: 9px 11px;
  border-radius: 6px;
  font-size: var(--fs-meta);
  line-height: 1.45;
  background: rgba(239, 68, 68, .12);
  color: var(--danger);
}
.irrelevant-reason-overlay .ir-duplicate-error[hidden],
.irrelevant-reason-overlay #ir-duplicate-wrap[hidden] { display: none; }

/* Gesperrtes „Als verloren melden" MUSS gesperrt aussehen. Apollon hat keine generische
   `.btn:disabled`-Regel (siehe [data-bulk-apply]:disabled weiter oben, dieselbe Lehre):
   ein deaktivierter Knopf trug bisher volle Farbe und `cursor: pointer`, und wer
   daraufklickt, erfaehrt nicht, warum nichts geschieht. Bewusst NUR an diesem Dialog
   statt global — eine app-weite Regel veraenderte fremde Knoepfe mitten in einer
   laufenden Welle. Werte aus dem Hausmuster. */
.lost-reason-overlay .btn:disabled {
  opacity: .5;
  cursor: not-allowed;
}
.lost-reason-overlay .form-control:disabled { opacity: .6; }

/* Der Verlustgrund auf der klassischen Kanban-Karte. Kein eigener Farbton — die Karte
   traegt ihre Zugehoerigkeit schon ueber den linken Rand; ein zweites Rot daneben waere
   Laerm. */
.kanban-card .card-lost-footer {
  margin-top: 6px;
  padding-top: 6px;
  /* Bewusst `--border` statt des `--border-soft`-Fallbacks, den die Won-Fusszeile
     inline traegt: `--border-soft` ist in KEINEM Scope belegt (weder klassisch noch
     im Redesign), der Fallback war dort also die einzige wirksame Angabe. Ein neues
     ungemapptes Token haette ausserdem den Token-Waechter aus PR1.229 gerissen. */
  border-top: 1px solid var(--border);
  font-size: var(--fs-meta);
  line-height: 1.4;
  color: var(--danger);
}
.kanban-card .card-lost-footer .muted { color: var(--text-3, var(--text-secondary)); }

/* PR1.387 #608 — Lost-Spalte im Modus „Aktuell": Hinweis + Weg ins Archiv. Gedaempft,
   kein Rot: die Spalte meldet keinen Fehler, sie sagt nur, wo die Karten liegen. */
.kanban-lost-archiv {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
  padding: 14px 8px;
  text-align: center;
  font-size: var(--fs-ui);
  line-height: 1.45;
  color: var(--text-3, var(--text-secondary));
}
.kanban-lost-archiv p { margin: 0; }

/* Klassisch trug `Irrelevant` bisher gar keine Badge-Rolle und fiel auf die nackte
   `.badge` zurueck — neben dem roten `.badge-lost` war das nicht als Endzustand lesbar.
   Grau, gedaempft: aussortiert, nicht verloren. */
.badge-irrelevant {
  background: rgba(113, 113, 122, .16);
  color: var(--text-secondary);
}

/* PR1.392 (#619) — abgeleiteter Zustand „Geliefert" (Won + Projekt fertig): gedämpft wie
   Irrelevant — erledigt, kein Signal. */
.badge-geliefert {
  background: rgba(113, 113, 122, .16);
  color: var(--text-secondary);
}

/* ══════════════════════════════════════════════════════════════════════════
   PR1.311 (#520) — Werkskarten mit Diagrammen

   Bewusst in style.css und NICHT in style-redesign.css: beide Shells teilen sich
   diese Datei (Konvention 20), und der ui-craft-Ratchet zaehlt raw-px/raw-hex
   ausschliesslich im Redesign-Stylesheet — dort ist die Baseline exakt erreicht,
   jeder neue Pixelwert wuerde die CI blocken. Hier stehen ohnehin nur Tokens.

   Die Schrift-Gegenskalierung gegen die 800er-Stauchung von chart-kit steht weiter
   oben bei den gehefteten Karten; `.dash-chart-bild` haengt dort mit drin.
   ══════════════════════════════════════════════════════════════════════════ */

/* Kein max-height, kein overflow: ein SVG mit viewBox waechst nicht ueber seine
   Breite hinaus, und das Dashboard darf genau EINEN Scroll-Bereich haben. */
.dash-chart-koerper { min-height: 0; }

.dash-chart-bild .ck-svg { display: block; }

/* ── Die Beschriftung lesbar halten, unabhaengig von Raster und Shell ──
   chart-kit zeichnet JEDES Diagramm 800 Einheiten breit und laesst die viewBox auf die
   Zielbreite stauchen (chart-kit.js:46 — es gibt keine Breiten-Option). Die
   `font-size`-ATTRIBUTE im SVG schrumpfen dabei mit: aus 12 wurden auf einer
   Dashboard-Karte gemessene 4,9 Pixel, das Bild war huebsch und unlesbar.

   Die gehefteten Karten aus PR1.307/1.308 steuern dagegen, indem sie die
   Kartengroesse-Klasse auswerten (`dash-size-klein/mittel/gross`, weiter oben). Fuer die
   Werkskarten taugt das NICHT: die vier grossen Schaubilder liegen im `charts`-Slot, und
   `stampLegacyWidgetKeys` stempelt Groessenklassen ausdruecklich nur auf den `grid`-Slot
   (views/dashboard.js). Sie haetten also dauerhaft die 26 einer viertelbreiten Karte —
   auf halber Breite rund 21 Pixel, auf voller rund 41. Dazu kommt, dass dieselbe Karte in
   den beiden Shells in verschieden breiten Rastern steht (klassisch zwei Spalten, Redesign
   `auto-fill minmax(20rem, …)`); eine Klasse koennte nur eine der beiden treffen.

   Deshalb hier an der TATSAECHLICHEN Breite der Bildflaeche entlang. Gerechnet ist
   Quellgroesse = 11 * 800 / Containerbreite, das Ziel sind rund 11 effektive Pixel.
   Die Grundregel steht VOR den @container-Bloecken — umgekehrt wuerde sie sie
   ueberschreiben und nichts davon waere je wirksam. */
.dash-chart-bild { container-type: inline-size; }

.dash-chart-bild:not(.dash-chart-bild-ring) .ck-svg text { font-size: var(--fs-kpi); }            /* bis 400px */

@container (min-width: 400px) {
  .dash-chart-bild:not(.dash-chart-bild-ring) .ck-svg text { font-size: var(--fs-title); }          /* 400-600px */
}
@container (min-width: 600px) {
  .dash-chart-bild:not(.dash-chart-bild-ring) .ck-svg text { font-size: var(--fs-body); }          /* 600-900px */
}
@container (min-width: 900px) {
  .dash-chart-bild:not(.dash-chart-bild-ring) .ck-svg text { font-size: var(--fs-label); }          /* 900-1200px */
}
@container (min-width: 1200px) {
  .dash-chart-bild:not(.dash-chart-bild-ring) .ck-svg text { font-size: var(--fs-label); }           /* ab 1200px */
}

/* Balken und gestapelte Balken fuehren ihre Kategorienamen links neben dem Bild, in
   einem festen Streifen von 168 der 800 Einheiten (chart-kit.js:48). Der reicht fuer
   26 gekappte Zeichen in Groesse 11 — mehr nicht (in Inter, der Schrift der
   klassischen Shell; in Fira Sans waeren 12 noch gegangen, aber die Regel gilt beiden). Eine staerkere Gegenskalierung
   schiebt die Namen dort hinaus; gemessen bei 900px Fensterbreite liefen drei
   Portfolio-Elemente links aus dem Bild.

   Gedeckelt wird deshalb NUR dieser eine Text und nicht das ganze Bild: die linken
   Namen sind die einzigen mit `text-anchor="end"` (chart-kit.js, balkenSvg und
   gestapeltSvg), waehrend Achsen-Ticks `middle` und die Werte am Balkenende den
   Vorgabewert tragen. Die duerfen der allgemeinen Staffel oben folgen — nur der Name
   im festen Streifen darf es nicht.

   Steht NACH der allgemeinen Staffel, sonst wirkt es nicht. */
.dash-chart-bild-achsen .ck-svg text[text-anchor="end"] { font-size: var(--fs-meta); }

@container (min-width: 900px) {
  .dash-chart-bild-achsen .ck-svg text[text-anchor="end"] { font-size: var(--fs-label); }
}
@container (min-width: 1200px) {
  .dash-chart-bild-achsen .ck-svg text[text-anchor="end"] { font-size: var(--fs-label); }
}

/* Kachelbaum: Beschriftung und Wert einer Kachel liegen 16 Einheiten auseinander
   (chart-kit.js, kachelbaumSvg). Ab Groesse 14 ueberlappen sie — gemessen an der
   Dashboard-Route bei 768px Fensterbreite, sechs Paare. Deshalb hier ein Schritt
   flacher als die allgemeine Staffel.

   Doppelte Klasse mit Absicht: die allgemeine Regel traegt seit dem `:not()` fuer den
   Ring drei Klassen und haette diese hier sonst ueberstimmt — die Ueberlappung war
   danach prompt zurueck. */
@container (min-width: 600px) {
  .dash-chart-bild.dash-chart-bild-kacheln .ck-svg text { font-size: var(--fs-body); }
}
/* Nach oben wieder auf die allgemeine Staffel einschwenken. Ohne diese beiden Bloecke
   bliebe der Deckel von 13 auch auf einer vollbreiten Karte stehen — dort kamen dann
   23px an, weit ueber dem Rest des Bildes. Die Regel oben steht spaeter in der Datei
   als die allgemeine und gewinnt bei gleicher Spezifitaet; sie muss deshalb selbst
   weiterstaffeln. */
@container (min-width: 900px) {
  .dash-chart-bild.dash-chart-bild-kacheln .ck-svg text { font-size: var(--fs-label); }
}
@container (min-width: 1200px) {
  .dash-chart-bild.dash-chart-bild-kacheln .ck-svg text { font-size: var(--fs-label); }
}

/* Linie: die letzte Zeitmarke steht mittig ueber dem rechten Achsenende bei 776 von 800
   Einheiten. Ab Groesse 13 ragt „2026-12" ueber die viewBox hinaus und wird dort
   lautlos abgeschnitten — gemessen in der klassischen Shell bei 768 bis 900px
   Fensterbreite. Erst ab 900px Kartenbreite ist wieder Luft, dort schwenkt die Regel
   auf die allgemeine Staffel ein. */
.dash-chart-bild.dash-chart-bild-zeit .ck-svg text { font-size: var(--fs-ui); }

@container (min-width: 900px) {
  .dash-chart-bild.dash-chart-bild-zeit .ck-svg text { font-size: var(--fs-label); }
}
@container (min-width: 1200px) {
  .dash-chart-bild.dash-chart-bild-zeit .ck-svg text { font-size: var(--fs-label); }
}

/* Der Ring ist oben per `:not()` von der Staffel AUSGENOMMEN — es gibt hier bewusst
   keine eigene Regel. Seine Mitte traegt eine Zahl (26) und darunter ihr Beiwort (12),
   22 Einheiten auseinander. Eine gemeinsame Groesse macht beide gleich gross, nimmt der
   Zahl ihren Rang und laesst die Zeilen zusammenstossen. Die Attribute aus chart-kit
   bleiben deshalb stehen: die Zahl ist mit 26 die groesste Schrift des ganzen Baukastens
   und auch gestaucht gut lesbar, das Beiwort bleibt nachgeordnet. Andere Texte hat der
   Ring nicht — seine Legende ist HTML und skaliert ohnehin nicht mit.

   Nicht mit `font-size: unset` versucht: das heisst bei einer vererbbaren Eigenschaft
   `inherit` und stellt das SVG-Attribut NICHT wieder her — gemessen kamen 8,3px heraus
   statt der 14,4 des Attributs. */

/* ── Ladezustand ── */
/* Gleiche Sprache wie das Skelett der gehefteten Karten, nur ohne Label-Spalte:
   ein Diagramm hat keine Zeilenbeschriftung, die man vortaeuschen koennte. */
.dash-chart-skelett {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 6px 0;
}

.dash-chart-skelett-zeile { display: flex; }

.dash-chart-skelett-balken {
  height: 14px;
  border-radius: 3px;
  background: var(--bg-card2);
}

/* ── Leerzustand ── */
.dash-chart-leer , .dash-chart-fehler { padding: 10px 0; }

.dash-chart-leer-titel {
  font-size: var(--fs-body);
  font-weight: 500;
  color: var(--text-1);
}

.dash-chart-leer-text , .dash-chart-fehler-text {
  margin: 4px 0 0;
  font-size: var(--fs-meta);
  line-height: 1.5;
  color: var(--text-2);
}

/* ── Fehlerzustand ── */
/* Rot als Umriss, nicht als Flaeche — dieselbe Zurueckhaltung wie bei der
   verwaisten Pin-Karte: die Karte ist schon kaputt, sie muss nicht schreien. */
.dash-chart-fehler-titel {
  font-size: var(--fs-body);
  font-weight: 500;
  color: var(--danger);
}

.dash-chart-aktionen {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 10px;
}

/* ── Umschalter im Kartenkopf (Hyperscaler: Projekte / Opportunities) ── */
/* Echte Knoepfe mit aria-pressed; der Fokusring kommt aus der globalen Regel. */
.dash-chart-umschalter {
  display: flex;
  gap: 4px;
  margin-left: auto;
}

.dash-chart-modus {
  font: inherit;
  font-size: var(--fs-label);
  padding: 3px 9px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: none;
  color: var(--text-3);
  cursor: pointer;
}

.dash-chart-modus:hover { color: var(--text-2); }

/* Kein `--primary`: das Token ist im `.crm`-Scope NICHT neu belegt und erbt dort im
   dunklen Theme das Legacy-Indigo (#6366f1 statt adesso-Blau) — eine Vermischung der
   beiden Designsprachen, die kein Test bemerkt hätte. Die Textstufen sind in beiden
   Shells belegt, und es ist dieselbe Sprache, die `dwToggle` in views/dashboard.js für
   genau diese Art Umschalter schon verwendet. */
.dash-chart-modus.is-active {
  color: var(--text-1);
  border-color: var(--text-3);
  font-weight: 600;
}

/* ── Der Listenbereich unter dem Bild ── */
/* Gedeckelt statt scrollbar (siehe oben). Abgesetzt durch eine Linie, nicht durch
   eine eigene Flaeche — die Liste gehoert zur Karte, sie ist kein Dialog. */
.dash-chart-koerper + .ck-drill , .dash-chart-bild + .ck-drill {
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid var(--border);
}

/* PR1.299 (#506) — Einzelfall-Knopf im Betriebs-Reiter.
   Jede Meldungszeile ist seit dem Einzelfall-Fenster ein Knopf. Inline laesst
   sich `:hover` nicht setzen, und ein klickbarer Bereich ohne Rueckmeldung
   fuehlt sich tot an. Nur Farbtoken, kein rohes px — die Zwillingsregel in
   `style-redesign.css` muss inhaltsgleich bleiben. */
.ops-fall-btn:hover {
    /* `!important`, weil der Knopf seine Grundflaeche inline traegt (der
       Datei-Kopf von `admin-ops-cockpit.js` sagt warum) und Inline sonst jede
       Klassenregel schlaegt. Das ist hier kein Spezifitaets-Wettruesten,
       sondern die einzige Ebene, die gegen ein Style-Attribut ankommt. */
    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. */
.ops-ef-btn:disabled {
    opacity: .5;
    cursor: not-allowed;
}

/* PR1.347 #561 — Fenster "E-Mail-Benachrichtigungen" (views/email-preferences.js, beide
   Shells). Es nutzt `.modal-content`, und dafuer gibt es keine allgemeine Regel — das
   Fenster lag deshalb durchsichtig auf der Abdunkelung, Erklaertexte waren kaum lesbar.
   Ab diesem Ticket steht dort auch der eigene Freischalt-Stand, der gelesen werden muss.
   Werte wie `.modal`. */
.email-prefs-modal {
  background: var(--bg-card);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-lg);
  width: 90%;
}

/* ===== PR1.331 #543 — Seite „Feedback" (klassisch) =====
   views/feedback-board.js. Eigene fb-*-Klassen statt .kanban-col/.kanban-card: die gehoeren
   schon drei Brettern (Opportunities, Termine, Projekte). Optik von dort uebernommen,
   ohne Hover-Anheben — Bewegungsbudget null, nur Farbwechsel.
   Farbe je Stand ueber --fb-farbe (Kartenrand, Spaltenpunkt, Stand-Abzeichen, Leistenkante). */
#view-feedback .fb-seite [data-stand="offen"] { --fb-farbe: var(--accent); }
#view-feedback .fb-seite [data-stand="in_bearbeitung"] { --fb-farbe: var(--warning); }
#view-feedback .fb-seite [data-stand="verfuegbar"] { --fb-farbe: var(--success); }
#view-feedback .fb-seite [data-stand="abgelehnt"] { --fb-farbe: var(--danger); }

#view-feedback .fb-seite {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

#view-feedback .fb-unterzeile {
  margin: 0;
  font-size: var(--fs-body);
  color: var(--text-2);
}

/* Werkzeugleiste — wird nur beim vollen Zeichnen gebaut (Suchfeld behaelt den Fokus). */
#view-feedback .fb-werkzeug {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}

#view-feedback .fb-suche {
  flex: 0 1 280px;
  min-width: 200px;
  padding: 7px 12px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text-1);
  font-size: var(--fs-body);
}
#view-feedback .fb-suche::placeholder { color: var(--text-3); }
#view-feedback .fb-suche:focus { border-color: var(--primary); outline: none; }
#view-feedback .fb-suche:focus-visible { outline: 2px solid var(--primary); outline-offset: 1px; }

/* .btn setzt display:inline-flex und schlaegt damit das hidden-Attribut. */
#view-feedback .fb-reset[hidden] { display: none; }

#view-feedback .fb-chips {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}

#view-feedback .fb-chip-gruppe {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 6px;
}
#view-feedback .fb-chip-gruppe + .fb-chip-gruppe {
  padding-left: 8px;
  border-left: 1px solid var(--border);
}

#view-feedback .fb-chip {
  padding: 4px 11px;
  border: 1px solid var(--border);
  border-radius: 99px;
  background: var(--bg-card);
  color: var(--text-2);
  font-size: var(--fs-meta);
  font-weight: 500;
  white-space: nowrap;
}
#view-feedback .fb-chip:hover {
  background: var(--bg-hover);
  color: var(--text-1);
}
#view-feedback .fb-chip[aria-pressed="true"] {
  background: color-mix(in srgb, var(--primary) 18%, transparent);
  border-color: var(--primary);
  color: var(--primary-text);
}

#view-feedback .fb-seite .fb-chip:focus-visible,
#view-feedback .fb-seite .fb-karte:focus-visible,
#view-feedback .fb-seite .fb-reiter-tab:focus-visible,
#view-feedback .fb-seite .fb-leiste-zu:focus-visible,
#view-feedback .fb-seite .btn:focus-visible,
#view-feedback .fb-leiste-titel:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}
#view-feedback .fb-leiste-titel:focus:not(:focus-visible) { outline: none; }

/* Reiter — nur im schmalen Fenster sichtbar (siehe @media unten). */
/* Umbrechen statt waagrecht scrollen: alle vier Reiter bleiben sichtbar, auch der
   automatisch gewaehlte (z. B. nach dem Ablehnen einer Karte). */
#view-feedback .fb-reiter {
  display: none;
  flex-wrap: wrap;
  gap: 2px 4px;
  border-bottom: 1px solid var(--border);
}

#view-feedback .fb-reiter-tab {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  border-bottom: 2px solid transparent;
  color: var(--text-2);
  font-size: var(--fs-ui);
  font-weight: 500;
  white-space: nowrap;
}
#view-feedback .fb-reiter-tab:hover { color: var(--text-1); }
#view-feedback .fb-reiter-tab[aria-selected="true"] {
  color: var(--text-1);
  border-bottom-color: var(--primary);
}

#view-feedback .fb-zahl {
  background: var(--border);
  color: var(--text-2);
  font-size: var(--fs-label);
  font-weight: 500;
  padding: 2px 7px;
  border-radius: 99px;
  font-variant-numeric: tabular-nums;
}

/* Brett + Seitenleiste nebeneinander; das Brett gibt Breite ab, die Leiste ist nicht modal. */
#view-feedback .fb-flaeche {
  display: flex;
  align-items: flex-start;
  gap: 16px;
}

#view-feedback .fb-brett-region {
  flex: 1 1 auto;
  min-width: 0;
}

#view-feedback .fb-brett {
  display: grid;
  grid-template-columns: repeat(4, minmax(220px, 1fr));
  gap: 14px;
  overflow-x: auto;
  padding-bottom: 8px;
}
#view-feedback .fb-seite[data-leiste-offen] .fb-brett {
  grid-template-columns: repeat(4, minmax(180px, 1fr));
}

#view-feedback .fb-spalte {
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: 14px 12px;
  background: var(--bg-card2);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
}

#view-feedback .fb-spalte-kopf {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 12px;
}

#view-feedback .fb-spalte-titel {
  display: flex;
  align-items: center;
  gap: 7px;
  margin: 0;
  font-size: var(--fs-ui);
  font-weight: 500;
  color: var(--text-1);
}
#view-feedback .fb-spalte-titel::before {
  content: '';
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--fb-farbe);
  flex-shrink: 0;
}

#view-feedback .fb-spalte-liste {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

#view-feedback .fb-spalte-leer {
  margin: 0;
  padding: 16px 8px;
  border: 1px dashed var(--border);
  border-radius: var(--radius);
  color: var(--text-3);
  font-size: var(--fs-meta);
  text-align: center;
}

#view-feedback .fb-spalte-fuss {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  margin-top: 10px;
}
#view-feedback .fb-spalte-fuss-hinweis {
  font-size: var(--fs-label);
  color: var(--text-3);
  text-align: center;
}
#view-feedback .fb-spalte-fuss .btn[aria-disabled="true"] {
  opacity: .6;
  cursor: progress;
}

/* Karte — echter <button>; Stand-Farbe als linke Kante. */
#view-feedback .fb-karte {
  display: flex;
  flex-direction: column;
  gap: 4px;
  width: 100%;
  padding: 10px 12px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-left: 3px solid var(--fb-farbe, var(--border));
  border-radius: var(--radius);
  color: var(--text-1);
  text-align: left;
  font-size: inherit;
}
#view-feedback .fb-karte:hover {
  background: var(--bg-hover);
  border-color: var(--border-light);
  border-left-color: var(--fb-farbe, var(--border-light));
}
#view-feedback .fb-karte.ist-gewaehlt {
  background: color-mix(in srgb, var(--primary) 9%, var(--bg-card));
  border-color: var(--primary);
  border-left-color: var(--fb-farbe, var(--primary));
  box-shadow: 0 0 0 1px var(--primary);
}

#view-feedback .fb-karte-marken {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

#view-feedback .fb-marke {
  padding: 1px 7px;
  border-radius: 99px;
  font-size: var(--fs-label);
  font-weight: 500;
  letter-spacing: .02em;
}
/* Schrift Richtung --text-1 gemischt: im hellen Theme dunkler, im dunklen heller —
   so traegt sie in beiden Themes >= 4,5:1 auf der getoenten Flaeche (axe). */
#view-feedback .fb-marke--neu {
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  color: color-mix(in srgb, var(--accent) 65%, var(--text-1));
}
#view-feedback .fb-marke--pruefen {
  background: color-mix(in srgb, var(--warning) 12%, transparent);
  color: color-mix(in srgb, var(--warning) 65%, var(--text-1));
}
#view-feedback .fb-marke--meine {
  border: 1px solid var(--border-light);
  color: var(--text-2);
}
/* PR1.352 — Admin-Hinweis: Karte gehoert noch niemandem (gestrichelt = Luecke, kein Alarm). */
#view-feedback .fb-marke--ohne-owner {
  border: 1px dashed var(--border-light);
  color: var(--text-2);
}

#view-feedback .fb-karte-titel {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  overflow-wrap: anywhere;
  font-size: var(--fs-ui);
  font-weight: 500;
  line-height: 1.35;
}

#view-feedback .fb-karte-tags,
#view-feedback .fb-karte-fortschritt,
#view-feedback .fb-karte-ablehnung {
  font-size: var(--fs-label);
  color: var(--text-2);
}
#view-feedback .fb-karte-fortschritt { font-weight: 600; }

#view-feedback .fb-karte-hinweis {
  font-size: var(--fs-label);
  font-weight: 500;
  /* Reines --success liegt im hellen Theme auf dem Hover-Grund bei 4,49:1. */
  color: color-mix(in srgb, var(--success) 80%, var(--text-1));
}

#view-feedback .fb-karte-ablehnung {
  display: block;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

#view-feedback .fb-karte-fuss {
  margin-top: 2px;
  font-size: var(--fs-label);
  color: var(--text-3);
}
/* --text-3 traegt auf --bg-hover im dunklen Theme nur 4,34:1. */
#view-feedback .fb-karte:hover .fb-karte-fuss,
#view-feedback .fb-karte.ist-gewaehlt .fb-karte-fuss { color: var(--text-2); }

/* Ladezustand: statische Platzhalter, kein Pulsieren. */
#view-feedback .fb-skel {
  height: 64px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}

#view-feedback .fb-hinweiskarte {
  max-width: 520px;
  margin: 32px auto;
  text-align: center;
}
#view-feedback .fb-hinweiskarte h3 {
  margin: 0 0 6px;
  font-size: var(--fs-body);
}
#view-feedback .fb-hinweiskarte p {
  margin: 0 0 12px;
  color: var(--text-2);
}
#view-feedback .fb-hinweiskarte p:last-child { margin-bottom: 0; }

/* Seitenleiste */
#view-feedback .fb-leiste-host {
  flex: 0 0 clamp(300px, 32%, 420px);
  min-width: 0;
  position: sticky;
  top: 12px;
}
#view-feedback .fb-leiste-host:empty { display: none; }

#view-feedback .fb-leiste {
  display: flex;
  flex-direction: column;
  gap: 8px;
  /* Gemessen in views/feedback-board.js (passeLeisteHoeheAn); calc() nur als Rueckfall. */
  max-height: var(--fb-leiste-max, calc(100vh - 140px));
  overflow-y: auto;
  padding: 16px 18px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-top: 3px solid var(--fb-farbe, var(--border));
  border-radius: var(--radius-lg);
}

#view-feedback .fb-leiste-kopf {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

#view-feedback .fb-leiste-zu {
  order: 2;
  padding: 4px 8px;
  border-radius: var(--radius-sm);
  color: var(--text-2);
  font-size: var(--fs-body);
}
#view-feedback .fb-leiste-zu:hover {
  background: var(--bg-hover);
  color: var(--text-1);
}
#view-feedback .fb-zu-schmal { display: none; }

#view-feedback .fb-stand {
  padding: 2px 9px;
  border: 1px solid color-mix(in srgb, var(--fb-farbe) 45%, transparent);
  border-radius: 99px;
  background: color-mix(in srgb, var(--fb-farbe) 16%, transparent);
  color: var(--text-1);
  font-size: var(--fs-label);
  font-weight: 500;
}

#view-feedback .fb-leiste-titel {
  margin: 4px 0 0;
  font-size: var(--fs-section);
  line-height: 1.3;
  overflow-wrap: anywhere;
}

#view-feedback .fb-leiste-meta {
  margin: 0;
  font-size: var(--fs-ui);
  color: var(--text-2);
}

#view-feedback .fb-leiste-lade {
  margin: 0;
  font-size: var(--fs-meta);
  color: var(--text-3);
}

#view-feedback .fb-leiste-fehler,
#view-feedback .fb-ablehnung {
  padding: 10px 12px;
  border: 1px solid color-mix(in srgb, var(--danger) 40%, transparent);
  border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--danger) 10%, transparent);
  font-size: var(--fs-ui);
}
#view-feedback .fb-leiste-fehler p { margin: 0 0 8px; }
#view-feedback .fb-ablehnung strong { font-size: var(--fs-ui); }
#view-feedback .fb-ablehnung p {
  margin: 4px 0 0;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

#view-feedback .fb-abschnitt {
  margin-top: 4px;
  padding-top: 10px;
  border-top: 1px solid var(--border);
}
#view-feedback .fb-abschnitt h3 {
  margin: 0 0 8px;
  font-size: var(--fs-label);
  font-weight: 600;
  color: var(--text-3);
}

#view-feedback .fb-meldung { margin: 0; }
#view-feedback .fb-meldung dt {
  margin-top: 8px;
  font-size: var(--fs-meta);
  font-weight: 500;
  color: var(--text-2);
}
#view-feedback .fb-meldung dt:first-child { margin-top: 0; }
#view-feedback .fb-meldung dd {
  margin: 2px 0 0;
  font-size: var(--fs-body);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

#view-feedback .fb-fotos {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
  gap: 8px;
}
#view-feedback .fb-foto {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--bg-card2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
}
#view-feedback .fb-foto img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
#view-feedback .fb-foto-leer {
  padding: 6px;
  font-size: var(--fs-label);
  color: var(--text-3);
  text-align: center;
}

#view-feedback .fb-tickets {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}
#view-feedback .fb-ticket {
  padding: 8px 10px;
  background: var(--bg-card2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
}
#view-feedback .fb-ticket-kopf {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
}
#view-feedback .fb-ticket-titel {
  font-size: var(--fs-ui);
  font-weight: 500;
  overflow-wrap: anywhere;
}
#view-feedback .fb-ticket-zustand {
  flex-shrink: 0;
  padding: 1px 7px;
  border: 1px solid var(--border-light);
  border-radius: 99px;
  font-size: var(--fs-label);
  color: var(--text-2);
}
#view-feedback .fb-ticket-text {
  margin: 4px 0 0;
  font-size: var(--fs-ui);
  color: var(--text-2);
}
#view-feedback .fb-ticket-fertig {
  margin: 4px 0 0;
  font-size: var(--fs-label);
  color: var(--success);
}
#view-feedback .fb-ticket-admin {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-top: 6px;
}
#view-feedback .fb-ticket-iid {
  font-size: var(--fs-label);
  color: var(--text-3);
  font-variant-numeric: tabular-nums;
}

#view-feedback .fb-verlauf {
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: var(--fs-ui);
}
#view-feedback .fb-verlauf li { padding: 3px 0; }
#view-feedback .fb-verlauf-am {
  display: inline-block;
  min-width: 5.6em;
  color: var(--text-3);
  font-variant-numeric: tabular-nums;
}
#view-feedback .fb-verlauf-von { color: var(--text-3); }

#view-feedback .fb-kommentare-slot:empty { display: none; }

/* PR1.332 #544 — Kommentarstrang im Slot der Leiste (components/feedback-kommentare.js).
   Typo und Abstaende des Verlaufs; kein eigener Scroll-Container (die Leiste scrollt),
   keine Bewegung (auch nicht der Hub der globalen .btn). */
#view-feedback .fbk-leer {
  margin: 0;
  font-size: var(--fs-ui);
  color: var(--text-2);
}
#view-feedback .fbk-liste {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}
#view-feedback .fbk-kopf {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-height: 1.6rem;
  font-size: var(--fs-meta);
}
#view-feedback .fbk-wer { min-width: 0; overflow-wrap: anywhere; }
#view-feedback .fbk-autor { font-weight: 600; color: var(--text-1); }
#view-feedback .fbk-du,
#view-feedback .fbk-am {
  color: var(--text-3);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
#view-feedback .fbk-inhalt {
  margin: 2px 0 0;
  font-size: var(--fs-body);
  line-height: 1.45;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
#view-feedback .fbk .btn {
  transition: none;
}
#view-feedback .fbk .btn:hover { transform: none; }
#view-feedback .fbk-loeschen {
  flex: none;
  padding: 3px 8px;
}
#view-feedback .fbk-loeschen.btn-danger {
  color: color-mix(in srgb, var(--danger) 75%, var(--text-1));
}
#view-feedback .fbk .btn[aria-disabled="true"] {
  opacity: .6;
  cursor: progress;
  box-shadow: none;
}
#view-feedback .fbk-fehler {
  margin-top: 10px;
  padding: 9px 11px;
  border: 1px solid color-mix(in srgb, var(--danger) 40%, transparent);
  border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--danger) 10%, transparent);
  font-size: var(--fs-ui);
  line-height: 1.45;
}
#view-feedback .fbk-fehler[hidden] { display: none; }
#view-feedback .fbk-verlauf > .fb-leiste-fehler p { margin: 0 0 8px; }
#view-feedback .fbk-form {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 10px;
}
#view-feedback .fbk-feld {
  width: 100%;
  box-sizing: border-box;
  padding: 8px 10px;
  font-family: inherit;
  font-size: var(--fs-body);
  line-height: 1.4;
  color: var(--text-1);
  background: var(--bg-input);
  border: 1px solid var(--border-light, var(--border));
  border-radius: var(--radius-sm);
  resize: vertical;
}
#view-feedback .fbk-feld::placeholder { color: var(--text-3); }
#view-feedback .fbk-feld:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 1px;
}
#view-feedback .fbk-feld[readonly] { color: var(--text-2); }
#view-feedback .fbk-fuss {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 10px;
  font-size: var(--fs-meta);
  color: var(--text-3);
}
#view-feedback .fbk-rest {
  color: var(--text-2);
  font-variant-numeric: tabular-nums;
}
#view-feedback .fbk-rest[data-knapp] { color: var(--danger); }
#view-feedback .fbk-status { color: var(--text-2); }
#view-feedback .fbk-senden { margin-left: auto; }

/* Aktionsknoepfe kleben am unteren Rand der scrollenden Leiste. */
/* Globales .btn-danger: --danger auf der roten Toenung = 4,26:1 im dunklen Theme. */
#view-feedback .fb-leiste .btn-danger {
  color: color-mix(in srgb, var(--danger) 75%, var(--text-1));
}

#view-feedback .fb-leiste-fuss {
  position: sticky;
  bottom: -16px;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 4px 0 -16px;
  padding: 12px 0 16px;
  background: var(--bg-card);
  border-top: 1px solid var(--border);
}

/* Schmales Fenster: Reiter statt vier Spalten; die offene Meldung uebernimmt die Flaeche
   des Bretts, der Schliessen-Knopf wird zu „Zurück". Alle Spalten bleiben im DOM. */
@media (max-width: 768px) {
  #view-feedback .fb-reiter { display: flex; }
  #view-feedback .fb-reiter-tab { padding: 7px 8px; }
  #view-feedback .fb-suche { flex: 1 1 100%; }
  #view-feedback .fb-chip-gruppe + .fb-chip-gruppe {
    padding-left: 0;
    border-left: 0;
  }
  #view-feedback .fb-brett {
    grid-template-columns: 1fr;
    overflow-x: visible;
  }
  #view-feedback .fb-seite[data-leiste-offen] .fb-brett { grid-template-columns: 1fr; }
  #view-feedback .fb-spalte:not([data-aktiv]) { display: none; }

  #view-feedback .fb-flaeche { display: block; }
  #view-feedback .fb-seite[data-leiste-offen] > .fb-unterzeile,
  #view-feedback .fb-seite[data-leiste-offen] > .fb-werkzeug,
  #view-feedback .fb-seite[data-leiste-offen] > .fb-reiter,
  #view-feedback .fb-seite[data-leiste-offen] .fb-brett-region { display: none; }
  #view-feedback .fb-leiste-host {
    position: static;
    width: 100%;
  }
  #view-feedback .fb-leiste {
    max-height: none;
    overflow: visible;
  }
  #view-feedback .fb-leiste-zu {
    order: 0;
    font-size: var(--fs-body);
    font-weight: 500;
  }
  #view-feedback .fb-zu-weit { display: none; }
  #view-feedback .fb-zu-schmal { display: inline; }
  /* Hier klebt der Fuss am Rand von .content (die Leiste scrollt nicht selbst);
     -16px schliesst die Luecke unter dem Fuss, die Knoepfe bleiben ueber dem Rand. */
  #view-feedback .fb-leiste-fuss {
    bottom: -16px;
    margin-bottom: -16px;
  }
}
/* ===== END PR1.331 #543 ===== */

/* ===== PR1.331 #543 — Aktions-Dialog der Seite „Feedback" (beide Shells) =====
   Zwilling der .lost-reason-overlay-Regeln oben (PR1.327): `.form-control` ist keine
   belegte Klasse, die Felder werden deshalb hier vollstaendig gestylt. Ueber Tokens
   gebunden — die Redesign-Shell belegt --bg-input/--border-light selbst. Bewusst NICHT
   unter #view-feedback: der Dialog haengt an document.body bzw. #app-crm. */
.fb-dialog .fbd-intro {
  margin: 0 0 16px;
  font-size: var(--fs-body);
  line-height: 1.5;
  color: var(--text-secondary, var(--text-2));
}
.fb-dialog .fbd-feld {
  display: flex;
  flex-direction: column;
  gap: 5px;
  margin-bottom: 14px;
}
.fb-dialog .fbd-feld > label {
  font-size: var(--fs-body);
  font-weight: 500;
}
.fb-dialog .fbd-feld .form-control {
  width: 100%;
  box-sizing: border-box;
  padding: 8px 10px;
  font-family: inherit;
  font-size: var(--fs-body);
  line-height: 1.4;
  color: var(--text-primary);
  background: var(--bg-input);
  border: 1px solid var(--border-light);
  border-radius: 6px;
}
.fb-dialog .fbd-feld .form-control:focus-visible {
  outline: 2px solid var(--focus, var(--primary));
  outline-offset: 1px;
}
.fb-dialog .fbd-feld textarea.form-control { resize: vertical; min-height: 96px; }
.fb-dialog .fbd-pflicht { color: var(--danger); }
.fb-dialog .fbd-hilfe {
  font-size: var(--fs-meta);
  line-height: 1.4;
  color: var(--text-3, var(--text-secondary));
}
/* PR1.352 — Owner-Auswahl als Radioliste: ein Klick waehlt, Pfeiltasten wechseln.
   Name oben, E-Mail klein darunter; ab ~8 Zeilen scrollt nur die Liste. */
.fb-dialog .fbd-liste { min-width: 0; padding: 0; border: 0; }
.fb-dialog .fbd-liste > legend {
  padding: 0;
  margin-bottom: 5px;
  font-size: var(--fs-body);
  font-weight: 500;
}
.fb-dialog .fbd-liste-scroll {
  max-height: min(18rem, 45vh);
  overflow-y: auto;
  background: var(--bg-input);
  border: 1px solid var(--border-light);
  border-radius: 6px;
}
.fb-dialog .fbd-liste-zeile {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  column-gap: 10px;
  align-items: center;
  padding: 8px 10px;
  cursor: pointer;
  border-top: 1px solid var(--border-light);
}
.fb-dialog .fbd-liste-zeile:first-child { border-top: 0; }
.fb-dialog .fbd-liste-zeile input {
  grid-row: span 2;
  margin: 0;
  accent-color: var(--primary);
}
.fb-dialog .fbd-liste-zeile input:focus-visible {
  outline: 2px solid var(--focus, var(--primary));
  outline-offset: 2px;
}
.fb-dialog .fbd-liste-name { font-size: var(--fs-body); color: var(--text-primary); }
.fb-dialog .fbd-liste-zusatz {
  grid-column: 2;
  font-size: var(--fs-meta);
  color: var(--text-2);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.fb-dialog .fbd-liste-zeile:hover { background: color-mix(in srgb, var(--text-primary) 5%, transparent); }
.fb-dialog .fbd-liste-zeile:has(input:checked) { background: color-mix(in srgb, var(--primary) 12%, transparent); }
.fb-dialog .fbd-liste:disabled .fbd-liste-zeile { cursor: default; }
.fb-dialog .fbd-fehler {
  margin-top: 4px;
  padding: 9px 11px;
  border-radius: 6px;
  font-size: var(--fs-meta);
  line-height: 1.45;
  color: var(--danger);
  background: color-mix(in srgb, var(--danger) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--danger) 35%, transparent);
}
.fb-dialog .fbd-fehler[hidden] { display: none; }
.fb-dialog .fbd-fuss { display: flex; justify-content: flex-end; gap: 8px; }
/* Gesperrt muss man SEHEN — am Knopf dieses Dialogs, nicht global an `.btn:disabled`
   (dieselbe Abwaegung wie bei .chat-senden und dem Lost-Dialog). */
.fb-dialog [data-fbd-ok]:disabled,
.fb-dialog [data-fbd-ok]:disabled:hover {
  opacity: .5;
  cursor: not-allowed;
  box-shadow: none;
}

/* ── PR1.328 (#538) — Pythia-Routinen, klassische Shell ─────────────────────────
   Liste unter den Gespraechen, Knopf im Kopf, Dialog zum Speichern. Taeglich bis
   woechentlich genutzt → keine Animation, alles erscheint sofort. */
.pythia-kopf .chat-routine-speichern { margin-left: auto; flex: 0 0 auto; }
/* Wird es eng, rutscht der Knopf unter den Text — statt den Text auf ein Wort je Zeile
   zusammenzudruecken (gemessen bei schmaler Spalte, Pruefung 05.10.2026). */
.pythia-kopf { flex-wrap: wrap; }
.pythia-kopf-text { flex: 1 1 12rem; }
.pythia-leiste-kopf .chat-routine-speichern { margin-left: auto; }

.chat-routinen { margin-top: 16px; padding-top: 12px; border-top: 1px solid var(--border); }
.chat-routinen-titel { margin: 0 0 8px; color: var(--text-secondary); font-size: var(--fs-meta); font-weight: 500; }
.chat-routinen-gruppe + .chat-routinen-gruppe { margin-top: 10px; }
.chat-routinen-ueberschrift { margin: 0 0 4px; font-size: var(--fs-ui); font-weight: 500; color: var(--text-primary); }
.chat-routinen-liste { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.chat-routine { display: flex; align-items: flex-start; gap: 4px; border-radius: 6px; }
.chat-routine-nutzen {
    flex: 1; min-width: 0; appearance: none; background: none; border: none; text-align: left;
    padding: 6px 8px; font: inherit; cursor: pointer; border-radius: 6px; color: var(--text-primary);
}
.chat-routine-nutzen:hover { background: var(--bg-card2); }
.chat-routine-nutzen:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.chat-routine-titel { display: block; font-size: var(--fs-body); font-weight: 500; overflow-wrap: anywhere; }
.chat-routine-beschreibung {
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
    font-size: var(--fs-ui); color: var(--text-secondary);
}
.chat-routinen-leer, .chat-routinen-laedt { color: var(--text-secondary); font-size: var(--fs-body); margin: 0; padding: 4px 8px; }
.chat-routinen-fehler { border: 1px solid var(--danger); border-radius: 6px; padding: 8px 12px; font-size: var(--fs-body); }
.chat-routinen-fehler p { margin: 0 0 8px; }

.pythia-routine-modal { width: min(640px, 96vw); max-width: none; }
.pythia-routine-unterzeile, .pythia-routine-hinweis { margin: 0 0 12px; color: var(--text-secondary); font-size: var(--fs-body); }
.pythia-routine-form .form-group { margin-bottom: 14px; }
.pythia-routine-form textarea { resize: vertical; }
.pythia-routine-ablage { border: 1px solid var(--border); border-radius: 6px; padding: 8px 12px; margin: 0 0 8px; display: flex; flex-wrap: wrap; gap: 8px 20px; }
.pythia-routine-ablage legend { padding: 0 4px; font-size: var(--fs-body); color: var(--text-secondary); }
.pythia-routine-ablage label { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; }
.pythia-routine-fehler { margin: 0; min-height: 1.2em; color: var(--danger); font-size: var(--fs-body); font-weight: 500; }
.pythia-routine-form [aria-invalid="true"] { border-color: var(--danger); }

/* ============================================================
   PR1.378 (#597) — Persönliche Zugangsschlüssel (Einstellungen + Admin-Übersicht)
   Geteiltes Markup beider Shells (components/api-keys-section.js). Hier die klassische
   Optik; style-redesign.css überschreibt im .crm-Scope. Keine Bewegung: selten genutzt,
   und der Ablauf ist tastaturgetragen (Frequenz-Regel, DESIGN.md).
   ============================================================ */
/* Gleiche Breite wie die CC-Leiter-Karte darueber (680px aus .settings-card) und derselbe
   Abstand wie gestapelte Karten sonst (16px). Passt die Tabelle nicht hinein, stapeln sich
   die Zeilen (Container-Abfrage am Ende des Blocks). */
.settings-card.api-keys-card { margin-top: 16px; }
.api-keys-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 14px; }
.api-keys-head-text { flex: 1 1 22rem; min-width: 0; }
.api-keys-title { margin: 0 0 6px; }
.api-keys-intro { margin: 0 0 4px; }
.api-keys-docs { margin: 0; color: var(--text-3); font-size: var(--fs-meta); }
/* position: relative — sonst entkommt das absolut positionierte .sr-only im Kopf dem Scroller und schiebt die Seite breit.
   container — die gestapelte Ansicht richtet sich nach dem Platz der Tabelle, nicht nach dem
   Fenster: dieselbe Tabelle steht in der 680px-Karte, im Admin-Bereich und auf dem Telefon. */
.api-keys-table-wrap { position: relative; overflow-x: auto; container: api-keys / inline-size; }
.api-keys-table tbody tr:hover { cursor: default; }
/* Zellen-Beschriftung nur in der gestapelten Ansicht (aria-hidden, der Spaltenkopf spricht). */
.api-keys-cell-label { display: none; }
.api-keys-table td { vertical-align: middle; }
.api-keys-label { font-weight: 600; overflow-wrap: anywhere; }
/* Datum und Uhrzeit duerfen am Komma umbrechen — sonst schiebt eine schmale Karte die
   Aktionsspalte aus dem sichtbaren Bereich. */
.api-keys-date { color: var(--text-2); font-variant-numeric: tabular-nums; }
.api-keys-action { text-align: right; white-space: nowrap; }
.api-keys-email { color: var(--text-3); font-size: var(--fs-meta); }
.api-keys-status { font-size: var(--fs-meta); color: var(--text-3); }
.api-keys-status--active { color: var(--success); font-weight: 600; }
.api-keys-status-date { display: block; margin-top: 2px; color: var(--text-3); font-size: var(--fs-meta); white-space: nowrap; }
.api-keys-row--revoked td { color: var(--text-3); }
.api-keys-row--revoked .api-keys-label { font-weight: 500; }
.api-keys-loading { display: flex; flex-direction: column; gap: 8px; color: var(--text-2); font-size: var(--fs-body); }
.api-keys-skel { height: 1.6rem; border-radius: var(--radius-sm); background: var(--bg-card2); }
.api-keys-empty { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 14px 16px; border: 1px dashed var(--border); border-radius: var(--radius-sm); }
.api-keys-empty-text { margin: 0; color: var(--text-2); font-size: var(--fs-body); }
.api-keys-note { margin: 0; padding: 12px 14px; border-radius: var(--radius-sm); background: var(--bg-card2); color: var(--text-2); font-size: var(--fs-body); line-height: 1.5; }
.api-keys-alert { padding: 10px 12px; border: 1px solid var(--border); border-left: 3px solid var(--warning); border-radius: var(--radius-sm); background: var(--bg-card2); color: var(--text-1); font-size: var(--fs-body); line-height: 1.5; }
.api-keys-actions { margin-top: 10px; display: flex; }

/* Der Dialog ist ein natives <dialog> (showModal): Fokusfalle und ESC vom Browser. Das
   Zentrieren (UA: margin auto) nimmt der globale Reset weg — darum hier ausdrücklich. */
.api-keys-dialog {
  margin: auto;
  width: min(34rem, calc(100vw - 2rem));
  max-height: calc(100vh - 2rem);
  overflow: auto;
  padding: 22px 24px;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--bg-card);
  color: var(--text-1);
  box-shadow: var(--shadow-lg);
}
.api-keys-dialog::backdrop { background: rgba(0, 0, 0, .55); }
.api-keys-dialog-title { margin: 0 0 8px; font-size: var(--fs-section); font-weight: 600; }
.api-keys-dialog-text { margin: 0 0 16px; color: var(--text-2); font-size: var(--fs-body); line-height: 1.5; }
.api-keys-field-error { margin: 4px 0 0; color: var(--danger); font-size: var(--fs-ui); font-weight: 500; }
.api-keys-field-error[hidden] { display: none; }
.api-keys-form [aria-invalid="true"] { border-color: var(--danger); }
.api-keys-warning { margin: 0 0 14px; padding: 10px 12px; border-left: 3px solid var(--warning); border-radius: var(--radius-sm); background: var(--bg-card2); font-size: var(--fs-body); font-weight: 500; line-height: 1.5; }
.api-keys-key-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: stretch; }
.api-keys-key-row .api-keys-key { flex: 1 1 16rem; min-width: 0; width: auto; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: var(--fs-ui); } /* PR1.437 Ausnahme: API-Schluessel, Zeichen unterscheidbar */
.api-keys-copy-hint { margin: 4px 0 0; min-height: 1.2em; color: var(--text-2); font-size: var(--fs-ui); }
/* Leer haelt der Hinweis keinen Platz frei — sonst klafft zwischen Schluessel und „Fertig"
   eine Luecke. Er bleibt im Baum (aria-live), nur ohne Hoehe. */
.api-keys-copy-hint:empty { min-height: 0; margin: 0; }
.api-keys-dialog-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 18px; }
/* Gesperrt muss gesperrt aussehen — am Baustein, nicht global an `.btn:disabled`. */
.api-keys-dialog .btn:disabled { opacity: .55; cursor: not-allowed; transform: none; box-shadow: none; }
/* Sichtbarer Tastatur-Fokus: die klassische Shell hat keine globale `.btn:focus-visible`-Regel. */
.api-keys .btn:focus-visible,
.api-keys-dialog .btn:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }

/* Schmale Breite: jede Zeile wird ein Block — Bezeichnung fett, darunter Erstellt · zuletzt
   genutzt, dann der Status, die Aktion darunter. Kein inneres Seitwaerts-Scrollen fuer „Widerrufen".
   Steht bewusst NACH allen Grundregeln: eine Abfrage davor verliert die Kaskade. Die Rollen
   im Markup (role="table|row|cell") halten die Tabellen-Bedeutung trotz geaendertem display. */
@container api-keys (max-width: 40rem) {
  .api-keys-table thead {
    position: absolute; width: 1px; height: 1px; overflow: hidden;
    clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
  }
  .api-keys-table, .api-keys-table tbody { display: block; }
  .api-keys-table tr {
    display: flex; flex-wrap: wrap; align-items: baseline;
    column-gap: 8px; row-gap: 4px; padding: 12px 14px;
  }
  .api-keys-table td { display: block; padding: 0; }
  .api-keys-label, .api-keys-person-cell { flex: 1 1 100%; }
  .api-keys-meta { flex: 0 1 auto; font-size: var(--fs-ui); }
  .api-keys-date + .api-keys-date::before { content: '·'; content: '·' / ''; margin-right: 8px; color: var(--text-3); }
  /* Status in eine eigene Zeile: liefe er mit, finge die Folgezeile beim Umbruch mit „·" an. */
  .api-keys-status-cell { flex-basis: 100%; }
  .api-keys-cell-label { display: inline; margin-right: .3em; color: var(--text-3); }
  .api-keys-status-date { display: inline; margin: 0 0 0 .3em; }
  .api-keys-action { flex: 1 0 100%; margin-top: 6px; text-align: left; }
  .api-keys-action--empty { display: none; }
}


/* ============================================================
   PR1.381 (#602) — Einsatzarten wie im adesso-Einsatzplan v2.0
   Farben = Legende des Kompass-Bildes an #606 (pixelgenau gemessen). Bewusst EIN Satz
   fuer beide Shells und beide Themes: es sind die Markenfarben des Einsatzplans, die
   dort ebenfalls nicht wechseln. Lesbarkeit im Dunkel sichert der Ring um `.ea-dot`;
   Schrift auf der Flaeche ist je Art hell oder dunkel (`ink` im Katalog
   components/einsatzarten.js) — gemessen, jede Kombination ≥ 5,8:1 (AA).
   Text nie IN Art-Farbe auf dem Seitengrund.
   ============================================================ */
:root {
  --ea-kein-einsatz: #6E1D3B;
  --ea-beauftragt: #4CAF2A;
  --ea-moeglich: #2BB8EE;
  --ea-urlaub: #1E6A85;
  --ea-intern: #EE8565;
  --ea-schulung: #39C7B8;
  --ea-nicht-bei-adesso: #A9A9A9;
  --ea-gewaehrleistung: #9D8FD0;
  --ea-abwesend: #3B302B;
  --ea-akquise: #EA97D6;
  --ea-ausbildung: #1FCF72;
  --ea-ink-light: #FFFFFF;
  --ea-ink-dark: #10202A;
}

/* Chip wie im Einsatzplan: Flaeche ohne Rahmen (auch „Möglicher Einsatz" — blau ohne
   Rahmen, Kompass Punkt 4), kurzer Name + Umfang. */
.ea-chip {
  display: inline-block; max-width: 100%; vertical-align: middle;
  padding: 1px 7px; border-radius: 3px;
  font-size: var(--fs-meta); font-weight: 500; line-height: 1.55; letter-spacing: .01em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  background: var(--ea-chip-bg, var(--ea-beauftragt)); color: var(--ea-chip-ink, var(--ea-ink-light));
}
.ea-chip--kein-einsatz { --ea-chip-bg: var(--ea-kein-einsatz); --ea-chip-ink: var(--ea-ink-light); }
.ea-chip--beauftragt { --ea-chip-bg: var(--ea-beauftragt); --ea-chip-ink: var(--ea-ink-dark); }
.ea-chip--moeglich { --ea-chip-bg: var(--ea-moeglich); --ea-chip-ink: var(--ea-ink-dark); }
.ea-chip--urlaub { --ea-chip-bg: var(--ea-urlaub); --ea-chip-ink: var(--ea-ink-light); }
.ea-chip--intern { --ea-chip-bg: var(--ea-intern); --ea-chip-ink: var(--ea-ink-dark); }
.ea-chip--schulung { --ea-chip-bg: var(--ea-schulung); --ea-chip-ink: var(--ea-ink-dark); }
.ea-chip--nicht-bei-adesso { --ea-chip-bg: var(--ea-nicht-bei-adesso); --ea-chip-ink: var(--ea-ink-dark); }
.ea-chip--gewaehrleistung { --ea-chip-bg: var(--ea-gewaehrleistung); --ea-chip-ink: var(--ea-ink-dark); }
.ea-chip--abwesend { --ea-chip-bg: var(--ea-abwesend); --ea-chip-ink: var(--ea-ink-light); }
.ea-chip--akquise { --ea-chip-bg: var(--ea-akquise); --ea-chip-ink: var(--ea-ink-dark); }
.ea-chip--ausbildung { --ea-chip-bg: var(--ea-ausbildung); --ea-chip-ink: var(--ea-ink-dark); }
/* „? %" — Wert fehlt: rot unterstrichen wie im Einsatzplan (Kompass Punkt 6). */
.ea-chip--wert-fehlt { box-shadow: inset 0 -2px 0 var(--danger, #E5484D); }

.ea-dot {
  display: inline-block; flex: 0 0 auto; width: 10px; height: 10px; border-radius: 2px;
  background: var(--ea-dot, transparent); box-shadow: 0 0 0 1px rgba(127, 127, 127, .5);
}
.ea-dot--kein-einsatz { --ea-dot: var(--ea-kein-einsatz); }
.ea-dot--beauftragt { --ea-dot: var(--ea-beauftragt); }
.ea-dot--moeglich { --ea-dot: var(--ea-moeglich); }
.ea-dot--urlaub { --ea-dot: var(--ea-urlaub); }
.ea-dot--intern { --ea-dot: var(--ea-intern); }
.ea-dot--schulung { --ea-dot: var(--ea-schulung); }
.ea-dot--nicht-bei-adesso { --ea-dot: var(--ea-nicht-bei-adesso); }
.ea-dot--gewaehrleistung { --ea-dot: var(--ea-gewaehrleistung); }
.ea-dot--abwesend { --ea-dot: var(--ea-abwesend); }
.ea-dot--akquise { --ea-dot: var(--ea-akquise); }
.ea-dot--ausbildung { --ea-dot: var(--ea-ausbildung); }

.ea-legend {
  list-style: none; display: flex; flex-wrap: wrap; gap: 4px 14px;
  margin: 12px 0 0; padding: 0; font-size: var(--fs-meta); color: var(--text-2);
}
.ea-legend li { display: inline-flex; align-items: center; gap: 6px; }

/* Art-Auswahl im Entwurf: native Radios (Pfeiltasten, Formular-Semantik), als Pillen. */
.ea-radiogroup { border: 0; margin: 0 0 10px; padding: 0; min-width: 0; }
.ea-radiogroup legend { padding: 0; margin-bottom: 6px; font-size: var(--fs-meta); color: var(--text-3); }
.ea-radiogroup-list { display: flex; flex-wrap: wrap; gap: 6px; }
.ea-radio {
  position: relative; display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px; border: 1px solid var(--border); border-radius: 999px;
  font-size: var(--fs-ui); color: var(--text-1); cursor: pointer; user-select: none;
}
.ea-radio input { position: absolute; inset: 0; margin: 0; opacity: 0; cursor: pointer; }
.ea-radio:hover { border-color: var(--text-3); }
.ea-radio:has(input:checked) { border-color: var(--text-1); box-shadow: inset 0 0 0 1px var(--text-1); font-weight: 600; }
.ea-radio:has(input:focus-visible) { outline: 2px solid var(--primary); outline-offset: 2px; }

.emp-alloc-head-end { display: inline-flex; align-items: center; gap: 8px; min-width: 0; }
.emp-alloc-chip { display: inline-flex; min-width: 0; max-width: 240px; }
.emp-alloc-grid--art, .emp-alloc-grid--ziel { margin-bottom: 10px; }
.emp-alloc-grid--zeit { margin-top: 8px; grid-template-columns: repeat(2, minmax(0, 12rem)); }
.ea-radiogroup-list + .emp-alloc-hint { display: block; margin-top: 4px; }
.emp-alloc-quickrow { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.emp-alloc-quick[aria-pressed="true"] { border-color: var(--primary); color: var(--text-1); }
.emp-alloc-quick:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.emp-alloc-hint { color: var(--text-3); font-weight: 400; }

/* ── PR1.383 (#604) — Auslastung: zwei Werte + Aufschluesselung ─────────────
   Eine Farbsprache Person × Woche: 0 % rot (frei), 1–99 % gelb (noch z % frei),
   100 % gruen, > 100 % gruen + ⚠. Farbe nur am Marker (Punkt), die Zahl bleibt in
   Textfarbe — Kontrast haengt so nicht an Gelb/Gruen. Keine Animation (taeglich
   genutzt, Konvention 22). Verhalten: components/auslastung-popover.js. */
.ausl { display: inline-flex; flex-wrap: wrap; align-items: baseline; gap: 0.15rem 0.5rem; }
.ausl--kompakt { gap: 0 0.35rem; }
.ausl-zahl {
    display: inline-flex; align-items: baseline; gap: 0.3rem;
    padding: 0; border: 0; background: none; cursor: pointer;
    color: var(--text-1); font: inherit; font-weight: 600; font-variant-numeric: tabular-nums;
    border-bottom: 1px dotted var(--text-3);
}
.ausl-zahl:hover, .ausl-zahl[aria-expanded="true"] { border-bottom-color: var(--primary); }
.ausl-zahl:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; border-radius: 2px; }
.ausl-titel { font-weight: 400; color: var(--text-2); }
.ausl-wert { font-size: inherit; }
.ausl--kompakt .ausl-wert { font-size: inherit; }
.ausl-dot { width: 0.55rem; height: 0.55rem; border-radius: 50%; align-self: center; background: var(--text-3); flex: none; }
.ausl--frei .ausl-dot { background: var(--danger); }
.ausl--teil .ausl-dot { background: var(--attention); }
.ausl--voll .ausl-dot, .ausl--ueber .ausl-dot { background: var(--success); }
.ausl--intern .ausl-dot { background: var(--text-3); }
.ausl--leer .ausl-dot { background: transparent; border: 1px solid var(--text-3); }
.ausl-sub { display: inline-flex; flex-wrap: wrap; gap: 0 0.5rem; font-size: var(--fs-meta); font-weight: 400; line-height: 1.4; color: var(--text-2); }
.ausl-plan--warn { color: var(--text-1); font-weight: 600; }
.ausl-chip { padding: 0 0.35rem; border: 1px solid var(--border); border-radius: 999px; color: var(--text-2); }
.ausl-fehlt { color: var(--text-1); text-decoration: underline wavy var(--danger); text-underline-offset: 2px; }
.ausl--fehler { color: var(--text-1); font-size: var(--fs-body); text-decoration: underline wavy var(--danger); }
.ausl-pop {
    position: fixed; z-index: 1200; max-width: min(22rem, calc(100vw - 1rem)); min-width: 14rem;
    padding: 0.6rem 0.75rem; background: var(--surface-2); color: var(--text-1);
    border: 1px solid var(--primary); border-radius: var(--radius-sm); box-shadow: var(--shadow-lg);
    font-size: var(--fs-ui); font-weight: 400; line-height: 1.45; text-align: left; white-space: normal;
}
.ausl-pop p { margin: 0; }
.ausl-pop-kopf { color: var(--text-2); font-size: var(--fs-meta); margin-bottom: 0.25rem !important; }
.ausl-pop-titel { margin-top: 0.4rem !important; color: var(--text-2); font-size: var(--fs-label); }
.ausl-pop-liste { list-style: none; margin: 0.1rem 0 0; padding: 0; }
.ausl-pop-zeile { display: flex; justify-content: space-between; gap: 0.75rem; }
.ausl-pop-pct { font-variant-numeric: tabular-nums; white-space: nowrap; }
.ausl-pop-summe { font-weight: 600; text-align: right; border-top: 1px solid var(--border); margin-top: 0.15rem !important; padding-top: 0.1rem; }
.ausl-pop-hinweis { margin-top: 0.4rem !important; color: var(--text-2); }
/* Kasten haengt waehrend er offen ist ausserhalb der Karte — Schrift nicht erben. */
.ausl-pop { font-family: inherit; letter-spacing: normal; text-transform: none; font-style: normal; }

/* ── PR1.384 #605 — Kapazität · NKV-Einsatzplan, klassisches Gesicht (views/capacity-nkv.js) ──
   Wöchentlich genutztes Arbeitswerkzeug → keine Übergänge. Ampel als Zellgrund (color-mix)
   bzw. Punkt; Text bleibt --text-1, damit beide Themes ohne Kontrastfalle lesbar sind. */
.cap-nkv { display: flex; flex-direction: column; gap: 16px; }
/* Nachjustierung #628 — fuenf gleich breite Kacheln im Raster; schmal: gleichmaessiger Umbruch, nie eine Einzelkachel ueber die volle Zeile. */
.cap-nkv-weeks { display: grid; grid-template-columns: repeat(auto-fit, minmax(max(9.5rem, calc((100% - 4 * 8px) / 5 - 1px)), 1fr)); align-items: stretch; gap: 8px; }
.cap-nkv-week { display: inline-flex; align-items: center; gap: 8px; padding: 8px 12px; background: var(--bg-card);
  border: 1px solid var(--border); border-radius: var(--radius-sm); color: var(--text-1); font: inherit; font-size: var(--fs-ui); cursor: pointer; }
.cap-nkv-weeks .cap-nkv-week { flex-direction: column; align-items: flex-start; justify-content: flex-start; gap: 2px; white-space: nowrap; min-width: 0; }
.cap-nkv-week-head { display: inline-flex; align-items: center; gap: 6px; }
.cap-nkv-week-val { font-size: var(--fs-title); font-weight: 600; line-height: 1.2; font-variant-numeric: tabular-nums; }
/* PR1.398 — zweite Zeile je Woche: "mit Planung" in der Planungsfarbe (wie .cap-nkv-plan b). */
.cap-nkv-week-plan { text-align: left; color: var(--primary-text); font-size: var(--fs-meta); font-weight: 500; }
.cap-nkv-weeks .cap-nkv-src { grid-column: 1 / -1; text-align: right; }
.cap-nkv-week:hover { background: var(--bg-hover); }
.cap-nkv-week:focus-visible, .cap-nkv-rowbtn:focus-visible, .cap-nkv-chip button:focus-visible {
  outline: 2px solid var(--primary-text); outline-offset: 2px; }
.cap-nkv-src { margin-left: auto; font-size: var(--fs-meta); color: var(--text-3); }
.cap-nkv-muted { color: var(--text-3); font-size: var(--fs-meta); }
.cap-nkv-dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; flex: none; }
.cap-nkv-dot.cap-nkv-amp-ok { background: var(--success); }
.cap-nkv-dot.cap-nkv-amp-mid { background: var(--warning); }
.cap-nkv-dot.cap-nkv-amp-high { background: var(--danger); }
.cap-nkv-amp-text-ok, .cap-nkv-amp-text-mid, .cap-nkv-amp-text-high { color: var(--text-1); font-weight: 600; }
.cap-nkv-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); gap: 16px; align-items: start; }
.cap-nkv-pivots { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; align-items: start; }
.cap-nkv-card { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.cap-nkv-card h3 { margin: 0; font-size: var(--fs-body); }
.cap-nkv-cardhead { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; justify-content: space-between; }
.cap-nkv-sentence { margin: 0; color: var(--text-2); }
.cap-nkv-big { font-size: var(--fs-kpi); font-weight: 600; line-height: 1.1; display: flex; align-items: center; gap: 10px; }
.cap-nkv-big::before { content: ""; width: 14px; height: 14px; border-radius: 50%; flex: none; }
.cap-nkv-big.cap-nkv-amp-text-ok::before { background: var(--success); }
.cap-nkv-big.cap-nkv-amp-text-mid::before { background: var(--warning); }
.cap-nkv-big.cap-nkv-amp-text-high::before { background: var(--danger); }
.cap-nkv-plan { color: var(--text-2); }
.cap-nkv-plan b, .cap-nkv-hint { color: var(--primary-text); }
.cap-nkv-hint { font-size: var(--fs-meta); white-space: nowrap; }
.cap-nkv-legend, .cap-nkv-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; font-size: var(--fs-meta); color: var(--text-2); }
.cap-nkv-legend span { display: inline-flex; align-items: center; gap: 4px; }
.cap-nkv-legend i { display: inline-block; width: 10px; height: 10px; border-radius: 50%; }
.cap-nkv-chip { display: inline-flex; align-items: center; gap: 4px; padding: 3px 4px 3px 10px; border-radius: 999px;
  background: color-mix(in srgb, var(--info) 18%, transparent); color: var(--text-1); font-size: var(--fs-meta); }
.cap-nkv-chip button { background: none; border: 0; color: inherit; cursor: pointer; font: inherit; padding: 0 6px; }
.cap-nkv-scroll { overflow-x: auto; }
.cap-nkv-scroll:focus-visible { outline: 2px solid var(--primary-text); outline-offset: 2px; }
.cap-nkv-table { width: 100%; border-collapse: collapse; font-size: var(--fs-ui); }
.cap-nkv-table th, .cap-nkv-table td { padding: 6px 8px; border-bottom: 1px solid var(--border); text-align: left; }
.cap-nkv-table th { color: var(--text-3); font-weight: 500; font-size: var(--fs-label); }
.cap-nkv-table .cap-nkv-num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.cap-nkv-table td.cap-nkv-amp-ok { background: color-mix(in srgb, var(--success) 28%, transparent); }
.cap-nkv-table td.cap-nkv-amp-mid { background: color-mix(in srgb, var(--warning) 30%, transparent); }
.cap-nkv-table td.cap-nkv-amp-high { background: color-mix(in srgb, var(--danger) 30%, transparent); }
.cap-nkv-table tr.is-total td { font-weight: 600; }
.cap-nkv-table tr:not(.is-total) td:first-child { padding-left: 20px; }
/* Nachjustierung #628 — Auswahl ueber Balken + fette Schrift an der Namenszelle; die Ampelzellen behalten ihre Farbe. */
.cap-nkv-table tr.is-active td:first-child { box-shadow: inset 3px 0 0 var(--primary-text); }
.cap-nkv-table tr.is-active .cap-nkv-rowbtn, .cap-nkv-table tr.is-active td:first-child { font-weight: 600; }
.cap-nkv-table tr.is-dimmed td:not([class*="cap-nkv-amp-"]), .cap-nkv-table tr.is-dimmed .cap-nkv-rowbtn { color: var(--text-3); }
.cap-nkv-rowbtn { background: none; border: 0; padding: 0; color: var(--text-1); font: inherit; text-align: left; cursor: pointer; }
.cap-nkv-rowbtn:hover { text-decoration: underline; }
.cap-nkv-trend-steigend { color: var(--danger); }
.cap-nkv-trend-sinkend { color: var(--success); }
.cap-nkv-trend-gleich { color: var(--text-3); }
/* Folgewochen als Kurzzeile (Ticket), keine Kaestchen in der Karte. */
/* PR1.397 #627 — Folgewochen als getoente Kacheln mit grosser Hauptzahl; nutzen die Kartenbreite. */
.cap-nkv-follow { display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: 12px;
  padding-top: 12px; border-top: 1px solid var(--border); }
.cap-nkv-followcard { display: flex; flex-direction: column; gap: 4px; padding: 12px 16px; border: 1px solid var(--border);
  border-radius: var(--radius-sm); font-size: var(--fs-body); }
.cap-nkv-follow-head { display: inline-flex; align-items: center; gap: 8px; }
.cap-nkv-follow-val { font-family: var(--font-num); font-size: var(--fs-display); font-weight: 500; line-height: 1.15; color: var(--text-1); font-variant-numeric: tabular-nums; }
/* PR1.397 #627 — Ampel als ganze Flaeche (Wochenleiste + Folgewochen). Ton 12 % auf dem Kartengrund,
   Rand in Vollfarbe; Hover laesst den Ton stehen. Gemessen (hell/dunkel): --text-1 ≥ 13,8:1,
   --text-2 ≥ 5,9:1, --text-3 nur 4,2:1 → auf dem Ton --text-2. Tendenzfarben 30 % zur Schriftfarbe
   gezogen, sonst rot auf rot 4,0:1 (dunkel). */
.cap-nkv-amp-bg-ok, .cap-nkv-amp-bg-ok:hover { background: color-mix(in srgb, var(--success) 12%, var(--bg-card)); border-color: var(--success); }
.cap-nkv-amp-bg-mid, .cap-nkv-amp-bg-mid:hover { background: color-mix(in srgb, var(--warning) 12%, var(--bg-card)); border-color: var(--warning); }
.cap-nkv-amp-bg-high, .cap-nkv-amp-bg-high:hover { background: color-mix(in srgb, var(--danger) 12%, var(--bg-card)); border-color: var(--danger); }
.cap-nkv-amp-block .cap-nkv-muted, .cap-nkv-amp-block .cap-nkv-trend-gleich { color: var(--text-2); }
.cap-nkv-amp-block .cap-nkv-trend-steigend { color: color-mix(in srgb, var(--danger) 70%, var(--text-1)); }
.cap-nkv-amp-block .cap-nkv-trend-sinkend { color: color-mix(in srgb, var(--success) 70%, var(--text-1)); }
.cap-nkv-week.cap-nkv-amp-block:hover { box-shadow: inset 0 0 0 1px var(--border); }
/* Gewaehlte Woche: doppelter Rand in der Ampelfarbe (ohne Layoutsprung) + fette Zahl. */
.cap-nkv-week.is-sel.cap-nkv-amp-bg-ok { box-shadow: inset 0 0 0 2px var(--success); }
.cap-nkv-week.is-sel.cap-nkv-amp-bg-mid { box-shadow: inset 0 0 0 2px var(--warning); }
.cap-nkv-week.is-sel.cap-nkv-amp-bg-high { box-shadow: inset 0 0 0 2px var(--danger); }
.cap-nkv-week.is-sel [class^="cap-nkv-amp-text-"] { font-weight: 600; }
/* Zweispaltig wie im Kompass erst auf grossen Monitoren (Matrix + Betroffene brauchen Breite). */
@media (max-width: 1600px) {
  .cap-nkv-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 1200px) {
  .cap-nkv-pivots { grid-template-columns: minmax(0, 1fr); }
}

/* ── PR1.385 #606 — Einsatzplan ausführlich, klassisches Gesicht (views/capacity.js) ──
   Täglich genutzte Arbeitsmatrix: keine Übergänge, maximale Dichte, Farben nur über Tokens.
   Rot steht ausschließlich für „frei". Kopf + Zeile „nicht verrechnet" kleben beim
   vertikalen Scrollen oben, die Namensspalte beim horizontalen links. */
.ep-card { display: flex; flex-direction: column; gap: 10px; padding: 12px; }
.ep-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0; }
.ep-toolbar .filter-chips { display: flex; flex-wrap: wrap; gap: 4px; }
#btn-cap-krank.active, #btn-cap-ueberplant.active {
  background: color-mix(in srgb, var(--primary) 15%, transparent);
  border-color: color-mix(in srgb, var(--primary) 55%, transparent);
  color: var(--text-1);
}
.ep-switch { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-ui); color: var(--text-1); cursor: pointer; }
.ep-switch input { margin: 0; accent-color: var(--primary); cursor: pointer; }
.ep-switch:has(input:focus-visible) { outline: 2px solid var(--primary-text); outline-offset: 2px; border-radius: 4px; }
.ep-toolbar-end { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-left: auto; }
/* PR1.399 #629: Filter einklappen — eingeklappt bleibt eine Zeile, das Raster bekommt die Höhe. */
.ep-toolbar.is-folded [data-ep-foldable] { display: none; }
.ep-fold[aria-expanded="true"] { background: color-mix(in srgb, var(--info) 16%, var(--bg-card2)); border-color: var(--info); }
#btn-cap-sort-customer.active { color: var(--primary-text); }
#cap-toolbar-end .btn:focus-visible, #cap-plan-toolbar .filter-chips .btn:focus-visible {
  outline: 2px solid var(--primary-text); outline-offset: 2px; }

.ep-scroll {
  overflow: auto; max-height: calc(100vh - 10rem); min-height: 12rem;
  border: 1px solid var(--border); border-radius: var(--radius-sm);
}
/* PR1.399 #629: drei Schriftstufen für das Raster — kleinste 12px, Text 13px, Name 14px (html-Wurzel 15px). */
.ep-grid { --ep-fs-klein: var(--fs-ui); --ep-fs-text: var(--fs-body); --ep-fs-name: var(--fs-body); }
.ep-grid { border-collapse: separate; border-spacing: 0; width: max-content; min-width: 100%; font-size: var(--ep-fs-text); }
.ep-grid th, .ep-grid td {
  padding: 0; vertical-align: top; background: var(--bg-card); color: var(--text-1);
  border-right: 1px solid var(--border); border-bottom: 1px solid var(--border);
}
/* Globale `th`-Regel (Großschrift, Sperrung, nowrap, --text-2) gilt hier nicht. */
.ep-grid th { font-size: inherit; font-weight: 400; text-transform: none; letter-spacing: normal; white-space: normal; }
.ep-grid tr > :last-child { border-right: 0; }
/* Namensspalte klebt links; Kopfzeilen kleben oben (Kopf feste Höhe → NKV-Zeile darunter). */
.ep-grid tr > :first-child { position: sticky; left: 0; z-index: 2; }
.ep-grid .ep-headrow th { position: sticky; top: 0; z-index: 4; height: 3rem; box-sizing: border-box; background: var(--bg-card2); }
.ep-grid .ep-nkv th, .ep-grid .ep-nkv td {
  position: sticky; top: var(--ep-head-h, 3rem); z-index: 4;
  background: var(--bg-card2); border-bottom: 2px solid var(--border-light);
}
.ep-grid .ep-headrow > :first-child, .ep-grid .ep-nkv > :first-child { z-index: 5; }

.ep-grid .ep-head { text-align: center; }
.ep-grid .ep-head--name { padding: .35rem .5rem; text-align: left; font-weight: 600; }
.ep-head-sub { display: block; font-size: var(--ep-fs-klein); font-weight: 400; color: var(--text-2); }
.ep-kw {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px;
  width: 100%; height: 100%; padding: .3rem .25rem; border: 0; border-radius: 0;
  background: none; color: var(--text-1); font: inherit; cursor: pointer;
}
.ep-kw:hover { background: var(--bg-hover); }
.ep-kw:focus-visible { outline: 2px solid var(--primary-text); outline-offset: -2px; }
.ep-kw-label { font-size: var(--ep-fs-text); font-weight: 600; white-space: nowrap; }
.ep-kw-sub { font-size: var(--ep-fs-klein); color: var(--text-2); white-space: nowrap; }
/* BF-98 (#731): aktuelle KW in Blau — Rot heißt für Bernd „Problem". */
.ep-head--current .ep-kw-label { color: var(--info); }
.ep-grid .ep-headrow th.ep-head--sorted { background: color-mix(in srgb, var(--info) 16%, var(--bg-card2)); }
.ep-head--sorted .ep-kw-label { color: var(--info); }

.ep-grid .ep-nkv-label { padding: .3rem .5rem; text-align: left; font-weight: 600; color: var(--text-2); }
.ep-grid .ep-nkv-cell { padding: .3rem .25rem; text-align: center; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.ep-grid .ep-nkv--ok { color: var(--success); }
.ep-grid .ep-nkv--mid { color: var(--attention); }
.ep-grid .ep-nkv--high { color: var(--danger); }

.ep-grid .ep-name { width: 20rem; min-width: 20rem; max-width: 20rem; padding: .4rem .5rem; text-align: left; }
/* PR1.403 (#633) — eine Zeile je Person: Foto + Name. CC, Teilzeit und Prozentwerte stehen in
   der Infokarte (person-infocard.js); die Namensspalte ist dafür breiter (16 → 20rem). */
.ep-name-wrap { display: flex; align-items: center; gap: .5rem; min-width: 0; }
.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: #fff; }
.ep-name-btn { min-width: 0; font-size: var(--ep-fs-name); font-weight: 600; color: var(--text-1); text-align: left;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ep-name-btn { padding: 0; border: 0; background: none; font-family: inherit; cursor: pointer; }
.ep-name-btn:hover { text-decoration: underline; }
.ep-name-btn:focus-visible { outline: 2px solid var(--primary-text); outline-offset: 2px; border-radius: 2px; }

/* Zelle: volle Fläche ist der Knopf (td height:1px lässt height:100% greifen). */
.ep-grid .ep-cell { width: 7rem; min-width: 7rem; max-width: 7rem; height: 1px; }
/* Chips im Raster eine Stufe größer als die globale 11px-Regel; Kürzung mit „…“ bleibt. */
.ep-grid .ea-chip { font-size: var(--ep-fs-klein); }
.ep-grid .ep-cell--frei { background: color-mix(in srgb, var(--danger) 10%, var(--bg-card)); }
.ep-status { align-self: flex-end; margin-top: auto; font-size: var(--ep-fs-klein); font-weight: 600; white-space: nowrap; }
.ep-status--frei { color: var(--danger); }
.ep-status--teil { color: var(--attention); }
.ep-status--ueber { color: var(--warning); }
.ep-grid .ep-sep th { padding: .35rem .5rem; text-align: left; font-size: var(--ep-fs-klein); font-weight: 600; letter-spacing: .04em; color: var(--text-2); background: var(--bg-card2); }

/* PR1.524 — Einsatzplan nach Competence Center: Reiterleiste + Gruppenzeilen.
   Keine eigene Farbe: der Farbcode gehört allein den Einsatzarten (--ea-*). Ø-Balken neutral grau.
   Täglich genutzt → keine Animation (Chevron dreht ohne Übergang). */
#cap-cc-bar[hidden] { display: none; }
.ep-ccbar { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; margin: 0 0 .5rem; }
.ep-ccbar-label { font-size: var(--fs-body); color: var(--text-2); margin-right: .15rem; }
.ep-ccbar-gap { flex: 1 1 auto; }
.ep-ccbar-hint { flex: 1 0 100%; margin: .15rem 0 0; font-size: var(--fs-ui); color: var(--text-2); }
.ep-ccchip {
  display: inline-flex; align-items: center; gap: .4rem; padding: .3rem .65rem;
  border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--bg-card);
  color: var(--text-1); font: inherit; font-size: var(--fs-body); font-weight: 500; cursor: pointer;
}
.ep-ccchip:hover { background: var(--bg-hover); }
.ep-ccchip.is-on { background: color-mix(in srgb, var(--text-1) 16%, var(--bg-card)); border-color: var(--text-1); }
.ep-ccchip.is-on .ep-ccchip-n { color: var(--text-1); }
.ep-ccchip-n { font-weight: 500; color: var(--text-2); font-variant-numeric: tabular-nums; }
.ep-ccchip:focus-visible, .ep-cc-toggle:focus-visible { outline: 2px solid var(--primary-text); outline-offset: 2px; }
.ep-grid .ep-ccgroup th, .ep-grid .ep-ccgroup td { background: var(--bg-card2); vertical-align: middle; }
.ep-grid .ep-ccgroup-name { padding: 0; }
.ep-cc-toggle {
  display: flex; align-items: center; gap: .5rem; width: 100%; min-height: 2.75rem; padding: .35rem .5rem;
  border: 0; background: none; color: var(--text-1); font: inherit; text-align: left; cursor: pointer;
}
.ep-cc-toggle:hover { background: var(--bg-hover); }
.ep-cc-chev { display: inline-flex; flex: 0 0 auto; color: var(--text-2); }
.ep-cc-toggle[aria-expanded="true"] .ep-cc-chev { transform: rotate(90deg); }
.ep-cc-text { display: flex; flex-direction: column; min-width: 0; }
.ep-cc-title { font-size: var(--ep-fs-name); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ep-cc-info { font-size: var(--ep-fs-klein); color: var(--text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ep-grid .ep-cc-avg { padding: 0 .4rem; }
.ep-cc-bar { display: block; height: .5rem; border-radius: .25rem; background: var(--border); overflow: hidden; }
.ep-cc-bar i { display: block; height: 100%; background: var(--text-3); }
/* PR1.541 — CC-Wochenzelle: Ø-Belegung als Zahl UND Farbstufe (rot < 25 %, gelb < 50 %,
   hellgruen < 80 %, gruen ab 80 %). Text in --text-1 auf leichtem Tint: AA in beiden Themes. */
.ep-grid .ep-cc-avg { padding: .2rem; text-align: center; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; color: var(--text-1); }
.ep-cc-wert { display: block; padding: .3rem .2rem; border-radius: 4px; }
/* PR1.542 — Stufen deckend und kraeftiger (Abnahme: halbtransparent zu blass, dunkel 50-79 %
   und ab 80 % kaum unterscheidbar). Dunkel: Mischung mit der Kartenflaeche, Zahl >= 4.9:1.
   Hell: feste Helligkeit je Stufe aus dem Ton des Tokens (oklch relativ), Zahl >= 6:1. */
.ep-stufe--niedrig .ep-cc-wert, .ep-legend-mark.ep-stufe--niedrig { background: color-mix(in srgb, var(--danger) 50%, var(--bg-card)); }
.ep-stufe--mittel .ep-cc-wert, .ep-legend-mark.ep-stufe--mittel { background: color-mix(in srgb, var(--attention) 42%, var(--bg-card)); }
.ep-stufe--gut .ep-cc-wert, .ep-legend-mark.ep-stufe--gut { background: color-mix(in srgb, var(--success) 32%, var(--bg-card)); }
.ep-stufe--hoch .ep-cc-wert, .ep-legend-mark.ep-stufe--hoch { background: color-mix(in srgb, var(--success) 58%, var(--bg-card)); }
[data-theme="light"] .ep-stufe--niedrig .ep-cc-wert, [data-theme="light"] .ep-legend-mark.ep-stufe--niedrig { background: oklch(from var(--danger) 0.85 0.08 h); }
[data-theme="light"] .ep-stufe--mittel .ep-cc-wert, [data-theme="light"] .ep-legend-mark.ep-stufe--mittel { background: oklch(from var(--attention) 0.89 0.13 h); }
[data-theme="light"] .ep-stufe--gut .ep-cc-wert, [data-theme="light"] .ep-legend-mark.ep-stufe--gut { background: oklch(from var(--success) 0.89 0.08 h); }
[data-theme="light"] .ep-stufe--hoch .ep-cc-wert, [data-theme="light"] .ep-legend-mark.ep-stufe--hoch { background: oklch(from var(--success) 0.72 0.12 h); }
.ep-stufe--leer .ep-cc-wert { color: var(--text-3); }
.ep-legend-head { font-weight: 600; color: var(--text-1); }
/* PR1.541 — Aufgaben-Leiste der klassischen Shell: vier Kacheln, jede ein Filter-Knopf. */
.ep-aufgaben { display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: .6rem; margin-bottom: .75rem; }
.ep-aufgaben:empty { display: none; }
.ep-aufgabe { display: flex; align-items: flex-start; gap: .6rem; padding: .6rem .8rem; background: var(--bg-card); border: 1px solid var(--border);
  border-radius: 8px; color: var(--text-1); font: inherit; text-align: left; cursor: pointer; }
.ep-aufgabe:hover:not(:disabled) { border-color: var(--primary-text); }
.ep-aufgabe:focus-visible { outline: 2px solid var(--primary-text); outline-offset: 2px; }
.ep-aufgabe.active { border-color: var(--primary-text); box-shadow: inset 0 0 0 1px var(--primary-text); }
.ep-aufgabe:disabled { cursor: default; color: var(--text-2); }
.ep-aufgabe-n { flex: 0 0 auto; min-width: 2.2rem; padding: .2rem .4rem; border-radius: 6px; text-align: center; font-size: var(--fs-section); font-weight: 700;
  font-variant-numeric: tabular-nums; background: var(--bg-card2); }
.ep-aufgabe--frei .ep-aufgabe-n { background: color-mix(in srgb, var(--danger) 18%, transparent); }
.ep-aufgabe--ueberplant .ep-aufgabe-n { background: color-mix(in srgb, var(--attention) 20%, transparent); }
.ep-aufgabe:disabled .ep-aufgabe-n { background: var(--bg-card2); }
.ep-aufgabe-text { display: flex; flex-direction: column; min-width: 0; flex: 1 1 auto; }
.ep-aufgabe-title { font-weight: 600; }
.ep-aufgabe-sub { font-size: var(--fs-ui); color: var(--text-2); }
.ep-aufgabe-go { margin-top: .25rem; font-size: var(--fs-ui); font-weight: 600; color: var(--primary-text); }

/* Planung (mögliche Einsätze): blau ohne Rahmen, Kompass Punkt 4. */
.ea-chip--planung { --ea-chip-bg: var(--ea-moeglich); --ea-chip-ink: var(--ea-ink-dark); }

.ep-empty { padding: 2rem 1rem; text-align: center; color: var(--text-2); }
.ep-empty p { margin: 0 0 .75rem; font-weight: 600; color: var(--text-1); }
.ep-empty p.ep-empty-hint { font-weight: 400; color: var(--text-2); }

.ep-legend { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 14px; }
.ep-legend .ea-legend { margin: 0; }
.ep-legend-states { list-style: none; display: flex; flex-wrap: wrap; gap: 4px 14px; margin: 0; padding: 0; font-size: var(--fs-ui); color: var(--text-2); }
.ep-legend-states li { display: inline-flex; align-items: center; gap: 6px; }
.ep-legend-mark { display: inline-block; width: .7rem; height: .7rem; border-radius: 2px; }
.ep-legend-mark--frei { border: 1px solid var(--danger); background: color-mix(in srgb, var(--danger) 10%, transparent); }
.ep-legend-mark--teil { background: color-mix(in srgb, var(--attention) 25%, transparent); }
.ep-legend-mark--wert-fehlt { width: .9rem; height: 2px; border-radius: 0; background: var(--danger); }
.ep-legend-mark--ueber { display: none; }

/* PR1.571 — Personenzeile als durchgehende Einsatzbalken (klassisch; Gehirn spansFor wie PR1.542).
   Je Person EIN Feld über alle Wochen: Wochen-Knöpfe als Fläche dahinter (Aufschlüsselung wie
   bisher), Balken auf Bahnen davor. Farbe gehört allein der Einsatzart (--ea-chip-bg/-ink);
   Zustände per Muster + Text, Text immer auf deckendem Grund (AA). Täglich genutzt → keine Animation. */
.ep-grid .ep-headrow .ep-head:not(.ep-head--name) { width: 7rem; min-width: 7rem; max-width: 7rem; }
.ep-grid .ep-lauf { padding: .3rem 0; vertical-align: middle; }
.ep-bahnen { display: grid; grid-template-columns: repeat(var(--ep-wochen, 16), minmax(7rem, 1fr));
  grid-template-rows: repeat(var(--ep-bahnen, 1), 1.6rem); row-gap: .25rem; }
.ep-bahnen > .ep-cell { z-index: 0; width: auto; min-width: 0; max-width: none; height: auto; margin-block: -.3rem; }
.ep-bahnen > .ep-cell + .ep-cell { border-left: 1px solid var(--border); }
.ep-bahnen > .ep-cell.is-current { background: color-mix(in srgb, var(--info) 10%, transparent); }
.ep-bahnen > .ep-cell--frei { background: color-mix(in srgb, var(--danger) 6%, transparent); }
.ep-bahnen > .ep-cell .ausl-zelle { display: block; min-height: 0; height: 100%; padding: 0; }
.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: 3px; font: inherit; font-size: var(--ep-fs-klein);
  line-height: 1.2; text-align: left; white-space: nowrap; overflow: hidden; cursor: pointer; }
.ep-bar--einsatz { background: var(--ea-chip-bg, var(--ea-beauftragt)); color: var(--ea-chip-ink, var(--ea-ink-light)); }
.ep-bar-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; font-weight: 700; }
.ep-bar-pct { flex: none; font-weight: 500; }
.ep-bar-txt { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
button.ep-bar:hover { box-shadow: inset 0 0 0 10rem color-mix(in srgb, var(--text-1) 12%, transparent); }
.ep-bar:focus-visible { z-index: 2; outline: 2px solid var(--primary-text); outline-offset: 1px; }
.ep-bar--wert-fehlt { box-shadow: inset 0 -3px 0 var(--danger); }
/* Planung (möglicher Einsatz): heller Grund, gestrichelter Rand — noch nicht beauftragt. */
.ep-bar--gestrichelt { background: color-mix(in srgb, var(--ea-chip-bg) 18%, var(--bg-card)); color: var(--text-1);
  border: 1px dashed color-mix(in srgb, var(--ea-chip-bg) 70%, var(--text-1)); }
/* Abwesenheit: schraffiert; Name und Umfang auf vollem Grund, damit der Text lesbar bleibt. */
.ep-bar--schraffiert { background: repeating-linear-gradient(135deg, var(--ea-chip-bg) 0 .375rem,
  color-mix(in srgb, var(--ea-chip-bg) 65%, var(--bg-card)) .375rem .75rem); }
.ep-bar--schraffiert .ep-bar-name, .ep-bar--schraffiert .ep-bar-pct { padding: 0 .25rem; border-radius: 2px; background: var(--ea-chip-bg); }
/* Lücken: frei rot schraffiert mit „frei ab KW", teilweise frei gelb — Text auf Kartengrund. */
.ep-bar--frei { background: repeating-linear-gradient(135deg, color-mix(in srgb, var(--danger) 22%, var(--bg-card)) 0 .375rem, var(--bg-card) .375rem .75rem);
  color: var(--danger); font-weight: 600; border: 1px solid color-mix(in srgb, var(--danger) 45%, transparent); }
.ep-bar--teil { background: color-mix(in srgb, var(--attention) 14%, var(--bg-card)); color: var(--attention); font-weight: 600;
  border: 1px solid color-mix(in srgb, var(--attention) 40%, transparent); }
.ep-bar--frei .ep-bar-txt, .ep-bar--teil .ep-bar-txt { padding: 0 .25rem; border-radius: 2px; background: var(--bg-card); }
.ep-bar--hinweis { color: var(--text-2); background: none; cursor: default; pointer-events: none; }
/* Überplant: eigene Zeile mit Klartext und Handlungshinweis, linksbündig; Klicks gehen durch
   auf die Wochen dahinter. Getönter Grund + kräftiger Rand statt Weiß auf Rot (Rot reicht im Dunkel nicht für AA). */
.ep-ueber { position: relative; z-index: 1; display: flex; align-items: center; gap: .375rem; min-width: 0; margin: 0 .125rem;
  padding: 0 .5rem; border-radius: 3px; border-left: 4px solid var(--danger);
  background: color-mix(in srgb, var(--danger) 24%, var(--bg-card)); color: var(--text-1);
  font-size: var(--ep-fs-klein); font-weight: 600; white-space: nowrap; overflow: hidden; pointer-events: none; }
.ep-ueber .ep-bar-txt { text-overflow: ellipsis; }
/* Referenzwoche rechts neben dem Kurznamen. */
.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; }
.ep-ref-pct { font-weight: 700; white-space: nowrap; }
.ep-ref-kw { color: var(--text-2); }
.ep-ref--voll .ep-ref-pct { color: var(--success); }
.ep-ref--teil .ep-ref-pct { color: var(--attention); }
.ep-ref--frei .ep-ref-pct, .ep-ref--ueber .ep-ref-pct { color: var(--danger); }
/* „nicht verrechnet" als Säule je Woche, Wert darüber (Ampelfarbe wie bisher). */
.ep-grid .ep-nkv th, .ep-grid .ep-nkv td { vertical-align: bottom; }
.ep-grid .ep-nkv .ep-nkv-label { vertical-align: middle; }
.ep-nkv-wert { display: block; }
.ep-nkv-saeule { display: flex; align-items: flex-end; justify-content: center; height: 2rem; margin-top: .15rem; }
.ep-nkv-saeule i { display: block; width: 55%; min-height: 2px; background: currentColor; border-radius: 2px 2px 0 0; }
/* Legende: Muster je Art + Hinweis „nur sichtbare Arten". */
.ep-lg-muster--schraffiert { background-image: repeating-linear-gradient(135deg, transparent 0 2px,
  color-mix(in srgb, var(--bg-card) 55%, transparent) 2px 4px); }
.ep-lg-muster--gestrichelt { background: color-mix(in srgb, var(--ea-moeglich) 18%, var(--bg-card));
  box-shadow: none; border: 1px dashed color-mix(in srgb, var(--ea-moeglich) 70%, var(--text-1)); }
.ep-legend-hint { flex: 1 0 100%; margin: 0; font-size: var(--fs-ui); color: var(--text-2); }

/* Einsatzplan-Zelle mit Aufschlüsselung (auslastung-popover.js, beide Shells): flache
   Tabellenzelle statt Knopf-Optik, ganze Fläche klickbar, Fokusring sichtbar. */
.ausl-zelle-wrap { display: block; height: 100%; }
.ausl-zelle {
  display: flex; flex-direction: column; align-items: stretch; gap: 2px;
  width: 100%; height: 100%; min-height: 3rem; padding: 3px; margin: 0;
  border: 0; border-radius: 0; background: transparent; color: inherit;
  font: inherit; text-align: left; cursor: pointer;
}
.ausl-zelle:hover { background: color-mix(in srgb, var(--text-1) 5%, transparent); }
.ausl-zelle[aria-expanded="true"] { box-shadow: inset 0 0 0 2px var(--primary); }
.ausl-zelle:focus-visible { outline: 2px solid var(--primary-text); outline-offset: -2px; }
.ausl-zelle .ea-chip { display: block; }
.ausl-pop--zelle { min-width: 18rem; }
.ausl-pop-person { margin-bottom: .2rem !important; font-size: var(--fs-body); font-weight: 500; }

/* ── PR1.394 (#622, B7) — Team-Verlauf, klassische Shell ─────────────────────
   Angebot (Fussabschnitt), Projekt (Karte unter der Beschreibung), Mitarbeiter
   (Reiter „Verlauf"). Nachschlage-Werkzeug: ruhige Liste, keine Animation.
   Markup: components/team-verlauf-classic.js. */
.tvk-body { display: flex; flex-direction: column; gap: 12px; font-size: var(--fs-body); color: var(--text-1); }
.opp-footer-section.tvk .tvk-body {
  padding: 12px 16px; background: var(--bg-card); border: 1px solid var(--border);
  border-radius: var(--radius-sm);
}
.tvk-status { margin: 0; color: var(--text-2); line-height: 1.5; }
.tvk-fehler { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; color: var(--text-1); }
.tvk-platzhalter { display: flex; flex-direction: column; gap: 8px; }
.tvk-platzhalter span { display: block; height: 2.2rem; border-radius: var(--radius-sm); background: var(--bg-hover); }
.tvk-platzhalter span:nth-child(2) { width: 85%; }
.tvk-platzhalter span:nth-child(3) { width: 70%; }
.tvk-fokus { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.tvk-fokus-chip { color: var(--text-1); font-weight: 600; }
.tvk-tag { display: flex; flex-direction: column; gap: 4px; }
.tvk-tag-titel {
  margin: 0; font-size: var(--fs-label); font-weight: 500; color: var(--text-2);
}
.tvk-liste { list-style: none; margin: 0; padding: 0; }
.tvk-eintrag { padding: 8px 0; border-top: 1px solid var(--border); }
.tvk-eintrag:first-child { border-top: 0; }
.tvk-kopf { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; }
.tvk-zeit { font-variant-numeric: tabular-nums; color: var(--text-2); }
.tvk-wer { font-weight: 600; color: var(--text-1); overflow-wrap: anywhere; }
.tvk-weg {
  display: inline-flex; align-items: center; padding: 1px 8px; border-radius: 99px;
  font-size: var(--fs-label); font-weight: 500; color: var(--primary-text);
  background: color-mix(in srgb, var(--primary) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--primary) 30%, transparent);
}
/* Systemwege (Zusammenfuehrung, Selbstreparatur, Abgleich): gedaempft, kein Mensch hat geplant. */
.tvk-weg.tvk-weg-system { color: var(--text-2); background: transparent; border: 1px dashed var(--border); font-weight: 500; }
.tvk-satz { margin-top: 2px; line-height: 1.45; overflow-wrap: anywhere; }
.tvk-felder { list-style: none; margin: 4px 0 0; padding: 0 0 0 12px; border-left: 2px solid var(--border); color: var(--text-2); }
.tvk-felder li { line-height: 1.5; font-variant-numeric: tabular-nums; }
.tvk-feld { color: var(--text-2); font-weight: 600; }
.tvk-hinweis { margin: 0; color: var(--text-2); font-size: var(--fs-ui); }
.tvk-mehr { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }

/* PR1.448 (#690) — Reiter „Änderungen" am Mitarbeiter (Kompassbild R2_10_verlauf), gleiches
   Gerüst wie die Redesign-Shell (.tv-person): Filter-Chips, Tagesgruppen links, Symbol je Art,
   ganzer Satz, alt (durchgestrichen) → neu, Uhrzeit rechts. Keine Animation. */
.tvk-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.tvk-chip {
  padding: 5px 12px; border-radius: var(--radius-sm); border: 1px solid var(--border);
  background: var(--bg-hover); color: var(--text-1); font: inherit; font-size: var(--fs-ui); cursor: pointer;
}
.tvk-chip:hover { border-color: var(--text-2); }
.tvk-chip.is-on { background: var(--text-1); border-color: var(--text-1); color: var(--bg-card); font-weight: 600; }
.tvk-chip:focus-visible, .tvk-link:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.tvk-tage { display: flex; flex-direction: column; }
.tvk-tagg { display: grid; grid-template-columns: 10rem minmax(0, 1fr); gap: 8px 16px; padding: 16px 0; }
.tvk-tagg + .tvk-tagg { border-top: 1px solid var(--border); }
.tvk-tagg:first-child { padding-top: 4px; }
.tvk-tagg-kopf { display: flex; flex-direction: column; gap: 2px; }
.tvk-tagg-t { margin: 0; font-size: var(--fs-body); font-weight: 500; color: var(--text-1); }
.tvk-tagg-n { font-size: var(--fs-ui); color: var(--text-2); }
.tvk-aes { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.tvk-ae { display: grid; grid-template-columns: 2.25rem minmax(0, 1fr) auto; gap: 12px; align-items: start; }
.tvk-sym {
  display: inline-flex; align-items: center; justify-content: center; width: 2.25rem; height: 2.25rem;
  border-radius: var(--radius-sm); background: var(--bg-hover); color: var(--text-2);
}
.tvk-sym-koffer { background: color-mix(in srgb, var(--primary) 14%, transparent); color: var(--primary-text); }
.tvk-sym-funken { background: color-mix(in srgb, var(--purple) 16%, transparent); color: var(--purple); }
.tvk-sym-haken { background: color-mix(in srgb, var(--success) 16%, transparent); color: var(--success); }
.tvk-ae-body { display: flex; flex-direction: column; gap: 4px; min-width: 0; padding-top: 6px; }
.tvk-ae-satz { margin: 0; font-size: var(--fs-body); line-height: 1.45; color: var(--text-1); overflow-wrap: anywhere; }
.tvk-ae-satz strong { font-weight: 600; }
.tvk-link { display: inline; background: none; border: 0; padding: 0; font: inherit; color: var(--primary-text); cursor: pointer; text-align: inherit; }
/* Unterstrichen: Farbe allein reicht im Fliesstext nicht (axe link-in-text-block). */
.tvk-link { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px;
  text-decoration-color: color-mix(in srgb, currentColor 45%, transparent); }
.tvk-link:hover { text-decoration-color: currentColor; }
.tvk-det { margin: 0; font-size: var(--fs-ui); color: var(--text-2); overflow-wrap: anywhere; font-variant-numeric: tabular-nums; }
.tvk-alt { color: var(--text-2); text-decoration: line-through; }
.tvk-pfeil { margin: 0 4px; color: var(--text-2); }
.tvk-neu { color: var(--text-1); }
.tvk-zusatz { margin: 0; font-size: var(--fs-meta); color: var(--text-2); }
.tvk-ae .tvk-zeit { padding-top: 6px; font-size: var(--fs-ui); white-space: nowrap; }
@media (max-width: 640px) {
  .tvk-tagg { grid-template-columns: minmax(0, 1fr); }
  .tvk-tagg-kopf { flex-direction: row; align-items: baseline; gap: 8px; }
}

/* BF-73 (#625) — Kennzeichen „· gestuft" hinter dem Umfang (Verlauf im title + .sr-only).
   Zurückgenommen, aber lesbar: --text-2 statt --text-3 (AA auf beiden Themes). */
.umfang-gestuft {
    color: var(--text-2);
    font-weight: 400;
    font-size: var(--fs-body);
    white-space: nowrap;
}
.umfang-gesperrt-hinweis {
    color: var(--text-2);
    font-size: var(--fs-body);
}
/* Gesperrtes Umfang-Feld (gestufter Einsatz): gestrichelter Rahmen statt Ausgrauen —
   bleibt lesbar und fokussierbar (readonly, nicht disabled). */
input[readonly][aria-describedby*="-gesperrt-"] {
    border-style: dashed;
    cursor: not-allowed;
}

/* ============================================================
   PR1.402 (#632) — Feedback-Sprechblase in der klassischen Kopfleiste.
   Knopf und Zahl tragen .notification-bell/.notification-badge (gleiche Optik
   wie die Glocke daneben); das Fenster ist hier gestaltet. Markup und Verhalten
   kommen aus components/feedback-sprechblase.js (geteilt mit dem Redesign).
   Keine Animation: die Kopfleiste ist täglich sichtbar (Konvention 22).
   ============================================================ */
.fb-blase-badge[hidden] { display: none; }
#fb-blase-mount { display: flex; align-items: center; }
#fb-blase-mount .fb-blase-wrap { position: relative; display: flex; align-items: center; }
#fb-blase-mount .fb-blase-btn:focus-visible,
#fb-blase-mount .fb-blase-tab:focus-visible,
#fb-blase-mount .fb-blase-eintrag:focus-visible,
#fb-blase-mount .fb-blase-alle:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
#fb-blase-mount .fb-blase-panel {
  position: absolute; top: calc(100% + 8px); right: 0; z-index: 1000;
  width: 340px; max-height: 460px; overflow-y: auto;
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: var(--radius); box-shadow: var(--shadow-lg);
}
#fb-blase-mount .fb-blase-panel[hidden] { display: none; }
#fb-blase-mount .fb-blase-tabs { display: flex; gap: 4px; padding: 6px; border-bottom: 1px solid var(--border); }
#fb-blase-mount .fb-blase-tab {
  flex: 1; padding: 8px 10px; border: 0; border-radius: var(--radius-sm);
  background: transparent; font: inherit; font-size: var(--fs-body); font-weight: 500;
  color: var(--text-2); cursor: pointer;
}
#fb-blase-mount .fb-blase-tab:hover { background: var(--bg-hover); }
#fb-blase-mount .fb-blase-tab[aria-selected="true"] { background: var(--bg-hover); color: var(--text-1); }
#fb-blase-mount .fb-blase-pane { padding: 12px; display: flex; flex-direction: column; gap: 12px; }
#fb-blase-mount .fb-blase-pane[hidden] { display: none; }
#fb-blase-mount .fb-blase-hinweis { margin: 0; font-size: var(--fs-body); line-height: 1.45; color: var(--text-2); }
#fb-blase-mount .fb-blase-neu { align-self: flex-start; }
#fb-blase-mount .fb-blase-eintraege { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
#fb-blase-mount .fb-blase-eintrag {
  width: 100%; display: flex; flex-direction: column; gap: 2px; text-align: left;
  padding: 8px; border: 0; border-radius: var(--radius-sm); background: transparent;
  font: inherit; color: var(--text-1); cursor: pointer;
}
#fb-blase-mount .fb-blase-eintrag:hover { background: var(--bg-hover); }
#fb-blase-mount .fb-blase-eintrag-kopf { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; font-size: var(--fs-body); }
#fb-blase-mount .fb-blase-eintrag small { font-size: var(--fs-meta); color: var(--text-3, var(--text-2)); }
#fb-blase-mount .fb-blase-stand { flex: 0 0 auto; font-size: var(--fs-meta); color: var(--text-2); }
#fb-blase-mount .fb-blase-leer { margin: 0; padding: 12px 0; font-size: var(--fs-body); color: var(--text-2); text-align: center; }
#fb-blase-mount .fb-blase-fehler { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; font-size: var(--fs-body); color: var(--text-2); }
#fb-blase-mount .fb-blase-fehler p { margin: 0; }
#fb-blase-mount .fb-blase-skelett { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
#fb-blase-mount .fb-blase-skelett li { height: 2.4em; border-radius: var(--radius-sm); background: var(--bg-hover); }
#fb-blase-mount .fb-blase-alle {
  align-self: flex-start; background: transparent; border: 0; padding: 0;
  font: inherit; font-size: var(--fs-body); font-weight: 500; color: var(--text-1);
  text-decoration: underline; cursor: pointer;
}
#fb-blase-mount .fb-blase-alle:hover { color: var(--text-2); }
/* PR1.404 #634 — Hinweis unter einem Rollen-Auswahlfeld (Rollenkarte, Team-Zeile):
   „Rolle bitte aus Liste wählen" bei einem Altwert, der nicht in der Rollenliste steht. */
.role-name-hint { display: block; margin-top: 4px; font-size: var(--fs-meta); line-height: 1.35; color: var(--text-secondary); }
.role-name-hint--warn { color: var(--warning); font-weight: 600; }
/* PR1.404 #634 / PR1.420 #655 — Spalte „Was fehlt": jede Lücke ein Kästchen, das ins Projekt
   springt. Rot = überfällig, Orange = fehlt noch; Textfarbe wie die Health-Schilder (Mischung
   mit --text-1 hält AA in beiden Themes). Keine Bewegung — täglich genutzte Liste. */
.project-gap-cell { white-space: nowrap; }
/* Klassische Tabelle: die eingehängte Spalte braucht eine feste Breite — sonst schiebt die
   Tabellen-Engine sie schmal, und „+N" rutscht unter die angeheftete Kunden-Spalte. */
.project-table th.col-gap-head, .project-table td.col-gap, th.col-gap-head, td.col-gap { width: 18rem; min-width: 18rem; }
/* Die Engine schneidet Zellinhalt ab (overflow: hidden) — der „+N“-Hinweis muss darüber hinaus. */
.project-table td.col-gap { overflow: visible; }
/* Kästchen nebeneinander, nie gestapelt — höchstens zwei plus „+N" passen in eine Zeile. */
.project-gap-list { display: inline-flex; flex-wrap: nowrap; gap: 4px; align-items: center; }
.project-gap-chip, .project-gap-ok { white-space: nowrap; }
.project-gap-chip {
  display: inline-flex; align-items: center; padding: 2px 8px; border-radius: var(--radius-sm);
  border: 1px solid transparent; font: inherit; font-size: var(--fs-meta); font-weight: 500; line-height: 1.4;
  cursor: pointer; position: relative;
}
.project-gap-chip.is-bad  { color: color-mix(in srgb, var(--danger) 65%, var(--text-1));  background: color-mix(in srgb, var(--danger) 14%, transparent);  border-color: color-mix(in srgb, var(--danger) 40%, transparent); }
.project-gap-chip.is-warn,
.project-gap-chip.is-more { color: color-mix(in srgb, var(--warning) 65%, var(--text-1)); background: color-mix(in srgb, var(--warning) 14%, transparent); border-color: color-mix(in srgb, var(--warning) 40%, transparent); }
.project-gap-chip:hover { border-color: currentColor; }
.project-gap-chip:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
/* „+N": der Rest steht im Tooltip — per Maus UND Tastatur-Fokus (title erscheint nie per Fokus). */
.project-gap-chip.is-more[data-tip]:hover::after,
.project-gap-chip.is-more[data-tip]:focus-visible::after {
  content: attr(data-tip); position: absolute; left: 0; top: calc(100% + 4px); z-index: 30;
  padding: 4px 8px; border-radius: var(--radius-sm); white-space: nowrap; font-weight: 500;
  background: var(--bg-card); color: var(--text-1); border: 1px solid var(--border); box-shadow: 0 4px 12px rgba(0,0,0,.18);
}
.project-gap-ok { display: inline-flex; align-items: center; gap: 4px; font-size: var(--fs-ui); font-weight: 500; color: color-mix(in srgb, var(--success) 65%, var(--text-1)); }
/* PR1.405 #635 — Staffing-Block der Opportunity (components/opp-staffing-block.js), klassische
   Shell. Kopf mit Segment-Fortschritt, je Rolle eine Zeile: Rolle · Inhalt je Zustand · Aktion.
   Einzige Bewegung: einmaliges Aufleuchten nach „Übernehmen" (is-flash), reduced-motion aus. */
.opp-staffing { border: 1px solid var(--border); border-radius: var(--radius); background: var(--bg-card); container-type: inline-size; min-width: 0; }
.opp-staffing-head { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 12px; padding: 12px 14px; border-bottom: 1px solid var(--border); }
.opp-staffing-title { margin: 0; font-size: var(--fs-body); font-weight: 600; color: var(--text-1); }
.opp-staffing-meter { display: inline-flex; gap: 3px; }
.opp-staffing-meter i { width: 18px; height: 6px; border-radius: 2px; background: var(--border-light); }
.opp-staffing-meter i.is-filled { background: var(--success); }
.opp-staffing-note { font-size: var(--fs-meta); color: var(--text-3); white-space: nowrap; }
.opp-staffing-spacer { flex: 1; }
.opp-staffing-ico { display: inline-block; margin-right: 5px; }
.opp-staffing-lnk { background: none; border: 0; padding: 0; font: inherit; color: var(--primary-text); text-decoration: underline; text-underline-offset: 2px; cursor: pointer; }
.opp-staffing button:focus-visible { outline: 2px solid var(--primary-text); outline-offset: 2px; }
.opp-staffing [aria-disabled="true"] { opacity: .55; cursor: not-allowed; }
.opp-staffing-missing { margin: 0; padding: 8px 14px; font-size: var(--fs-ui); border-bottom: 1px solid var(--border); }
.opp-staffing-missing .opp-staffing-lnk { color: var(--warning); }
.opp-staffing-empty { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px; font-size: var(--fs-body); color: var(--text-3); }
.opp-staffing-role { display: grid; grid-template-columns: minmax(0, 168px) minmax(0, 1fr) auto; gap: 14px; padding: 12px 14px; align-items: start; scroll-margin-top: 80px; }
.opp-staffing-role + .opp-staffing-role { border-top: 1px solid var(--border); }
.opp-staffing-role-name { font-size: var(--fs-body); font-weight: 500; color: var(--text-1); }
.opp-staffing-role-spec { margin-top: 2px; font-size: var(--fs-meta); color: var(--text-3); font-variant-numeric: tabular-nums; }
.opp-staffing-role-status { margin-top: 6px; }
.opp-staffing-pill { display: inline-flex; align-items: center; gap: 6px; padding: 2px 9px; border-radius: 999px; font-size: var(--fs-meta); font-weight: 500; background: var(--bg-card2); color: var(--text-2); }
.opp-staffing-pill.is-ok { background: color-mix(in srgb, var(--success) 14%, transparent); color: var(--text-1); }
.opp-staffing-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--text-3); }
.opp-staffing-pill.is-ok .opp-staffing-dot { background: var(--success); }
.opp-staffing-slot { min-width: 0; }
.opp-staffing-person { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 10px; min-height: 36px; min-width: 0; }
.opp-staffing-person + .opp-staffing-person { margin-top: 4px; }
.opp-staffing-person-text { flex: 1 1 8rem; min-width: 0; }
.opp-staffing-person-name, .opp-staffing-person-sub { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.opp-staffing-person-name { font-size: var(--fs-body); font-weight: 500; color: var(--text-1); }
.opp-staffing-person-sub { font-size: var(--fs-meta); color: var(--text-3); }
.opp-staffing-person.is-suggestion .opp-staffing-person-name, .opp-staffing-person.is-suggestion .opp-staffing-avatar { color: var(--text-2); }
.opp-staffing-tag { margin-left: 8px; padding: 0 5px; border: 1px dashed var(--border-light); border-radius: 4px; font-size: var(--fs-label); font-weight: 500; color: var(--text-3); }
.opp-staffing-avatar { flex: none; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; font-size: var(--fs-label); font-weight: 500; background: var(--bg-card2); color: var(--text-2); }
.opp-staffing-fit { flex: none; display: inline-flex; align-items: center; gap: 8px; font-size: var(--fs-meta); color: var(--text-2); white-space: nowrap; font-variant-numeric: tabular-nums; }
.opp-staffing-fitbar { width: 56px; height: 5px; border-radius: 3px; background: var(--border-light); overflow: hidden; }
.opp-staffing-fitbar b { display: block; height: 100%; background: var(--primary); }
.opp-staffing-take, .opp-staffing-remove { flex: none; }
.opp-staffing-more { margin-top: 4px; font-size: var(--fs-meta); color: var(--text-3); }
.opp-staffing-more-list { margin-top: 8px; padding: 8px 10px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--bg-card2); }
.opp-staffing-more-links { display: flex; gap: 16px; margin-top: 8px; font-size: var(--fs-meta); }
.opp-staffing-run { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 10px; min-height: 36px; }
.opp-staffing-run-label { font-size: var(--fs-ui); color: var(--text-2); min-width: 0; }
.opp-staffing-skel { flex: 1 1 4rem; height: 10px; border-radius: 4px; background: var(--bg-hover); }
.opp-staffing-error { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 8px; min-height: 36px; font-size: var(--fs-body); color: var(--danger); }
.opp-staffing-error .opp-staffing-lnk { color: var(--danger); }
.opp-staffing-hint { color: var(--text-3); }
.opp-staffing-open { display: flex; align-items: center; min-height: 36px; font-size: var(--fs-body); color: var(--text-3); }
/* BF-100 (#736) — Veraltet-Band, „auch fuer Rolle X", „Erfahrung nicht bestaetigt", gleiche Anforderungen. */
.opp-staffing-open .opp-staffing-lnk { margin-left: 6px; }
.opp-staffing-outdated { display: flex; align-items: flex-start; gap: 8px; margin-bottom: 6px; padding: 6px 10px; border: 1px solid color-mix(in srgb, var(--warning) 45%, transparent); border-radius: 4px; background: color-mix(in srgb, var(--warning) 10%, transparent); font-size: var(--fs-ui); color: var(--text-2); }
.opp-staffing-note.is-outdated { color: var(--warning); }
.opp-staffing-tag.is-unverified { border-style: solid; border-color: color-mix(in srgb, var(--warning) 60%, transparent); color: var(--text-2); }
.opp-staffing-person-also { font-size: var(--fs-meta); color: var(--text-3); }
.opp-staffing-person-flag { margin-top: 2px; }
.opp-staffing-person-flag .opp-staffing-tag { display: inline-block; margin: 2px 6px 0 0; white-space: nowrap; }
.opp-staffing-tag.is-short { border-style: solid; border-color: color-mix(in srgb, var(--danger) 55%, transparent); color: var(--text-2); }
.opp-staffing-same { display: flex; align-items: flex-start; gap: 8px; margin: 0; padding: 8px 14px; font-size: var(--fs-ui); color: var(--text-2); border-bottom: 1px solid var(--border); }
.opp-staffing-same .opp-staffing-ico { color: var(--warning); }
.opp-staffing-role.is-flash { animation: opp-staffing-flash .55s cubic-bezier(.22, 1, .36, 1); }
@keyframes opp-staffing-flash { from { background: color-mix(in srgb, var(--success) 18%, transparent); } to { background: transparent; } }
@media (prefers-reduced-motion: reduce) { .opp-staffing-role.is-flash { animation: none; } }
/* Schmale Mitte (Container, nicht Fenster): Rolle + Aktion oben, Inhalt darunter in voller Breite.
   So liegt kein Knopf ueber Lauftext oder „Übernehmen", egal wie breit das Fenster ist. */
@container (max-width: 40rem) {
  .opp-staffing-role { grid-template-columns: minmax(0, 1fr) auto; row-gap: 8px; }
  .opp-staffing-role-info { grid-column: 1; grid-row: 1; }
  .opp-staffing-side { grid-column: 2; grid-row: 1; justify-self: end; }
  .opp-staffing-slot { grid-column: 1 / -1; grid-row: 2; }
}

/* ─────────────────────────────────────────
   PR1.408 (#638) — Dashboard nach einem Bauplan (Datadog-Kompass, Grill 19.10.)
   Ein Markup fuer beide Shells (components/dashboard-bauplan-html.js); hier das Layout mit
   Tokens, die beide Shells fuehren. style-redesign.css mappt im .crm-Scope nur die Tokens um
   (Konvention 21: dort keine Rohwerte). 12er-Raster, Abstand 16 px, flache Kacheln (1 px
   Rahmen, Radius 8, kein Schatten), Ziffern gleich breit, Farbe nur bei Handlungsbedarf.
   ───────────────────────────────────────── */
.dbp { --dbp-gap: 16px; --dbp-radius: 8px; --dbp-dauer: 450ms; --dbp-linie: var(--primary-text, var(--primary)); container-type: inline-size; }
.dbp-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--dbp-gap); align-items: stretch; }
.dbp-span-3 { grid-column: span 3; }
.dbp-span-4 { grid-column: span 4; }
.dbp-span-6 { grid-column: span 6; }
.dbp-span-8 { grid-column: span 8; }
.dbp-span-12 { grid-column: span 12; }
/* PR1.471 (#723): Kopf-Knoepfe je Reiter (PR1.470 dashKnoepfe) werden per `hidden` ausgeblendet —
   `.btn { display: inline-flex }` ueberstimmte das, sodass Report-Knoepfe auf jedem Reiter standen. */
#view-dashboard .btn[hidden] { display: none; }
/* PR1.471 (#723): eine Karte ueber zwei Reihen (Top 10 neben Branche + Hyperscaler gestapelt). */
.dbp-rows-2 { grid-row: span 2; }
.dbp-kachel {
  position: relative; min-width: 0; background: var(--bg-card); color: var(--text-1);
  border: 1px solid var(--border); border-radius: var(--dbp-radius); padding: 14px 16px;
  box-shadow: none; font-variant-numeric: tabular-nums;
}
/* Titel links, Ecke rechts in einer Zeile — nichts liegt uebereinander, auch schmal nicht. */
.dbp-kpi { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: start; column-gap: 8px; }
.dbp-kpi-knopf {
  display: flex; flex-direction: column; align-items: flex-start; gap: 6px; width: 100%;
  background: none; border: 0; padding: 0; margin: 0; color: inherit; font: inherit; text-align: left; cursor: pointer;
}
.dbp-kpi-titel { font-size: var(--fs-body); font-weight: 500; color: var(--text-2); }
.dbp-warnzeichen { margin-right: .35em; }
.dbp-zahl { font-size: var(--fs-kpi); font-weight: 600; line-height: 1.1; color: var(--text-1); letter-spacing: -.01em; }
.dbp-einheit { font-size: var(--fs-label); font-weight: 500; margin-left: .3em; color: var(--text-2); letter-spacing: 0; }
.dbp-satz { font-size: var(--fs-ui); color: var(--text-3); }
.dbp-ecke { font-size: var(--fs-meta); color: var(--text-2); white-space: nowrap; }
.dbp-ecke-knopf { background: none; border: 0; padding: 0; font: inherit; color: inherit; cursor: pointer; text-decoration: underline; text-underline-offset: 2px; }
.dbp-kopf { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.dbp-titel { margin: 0; font-size: var(--fs-body); font-weight: 500; color: var(--text-1); }
.dbp-kpi-knopf:hover .dbp-zahl { color: var(--primary-text, var(--primary)); }
.dbp-achtung { background: color-mix(in srgb, var(--warning) 12%, var(--bg-card)); border-color: color-mix(in srgb, var(--warning) 60%, transparent); }
.dbp-achtung .dbp-kpi-titel, .dbp-achtung .dbp-zahl, .dbp-achtung .dbp-satz, .dbp-achtung .dbp-ecke, .dbp-top td.dbp-achtung-text { color: var(--warning); }
.dbp-leer { margin: 8px 0; font-size: var(--fs-body); color: var(--text-3); }
.dbp-fehler .dbp-leer { color: var(--text-2); }
.dbp-erneut { margin-top: 6px; background: none; border: 1px solid var(--border); border-radius: 6px; padding: 5px 12px; font: inherit; font-size: var(--fs-ui); color: var(--text-1); cursor: pointer; }

/* Ranglisten: Label oben, Balken auf einer Spur, Zahl rechts. */
.dbp-rang { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.dbp-rang-zeile {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "label zahl" "spur zahl";
  column-gap: 16px; row-gap: 5px; align-items: center; width: 100%;
  background: none; border: 0; padding: 2px 0; margin: 0; font: inherit; color: inherit; text-align: left; cursor: pointer;
}
.dbp-rang-label { grid-area: label; font-size: var(--fs-body); color: var(--text-1); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dbp-rang-zahl { grid-area: zahl; font-size: var(--fs-body); color: var(--text-2); }
.dbp-rang-zeile .dbp-spur { grid-area: spur; }
.dbp-spur { display: block; height: 8px; border-radius: 4px; background: color-mix(in srgb, var(--text-3) 18%, transparent); overflow: hidden; }
.dbp-balken {
  display: block; height: 100%; width: 100%; border-radius: inherit; background: var(--primary);
  transform: scaleX(var(--dbp-anteil, 0)); transform-origin: left center;
}
.dbp-rang-zeile:hover .dbp-rang-label { text-decoration: underline; }
.dbp-punkt { display: inline-block; width: 8px; height: 8px; border-radius: 2px; margin-right: 6px; vertical-align: middle; background: var(--text-3); }
.dbp-hs-aws { background: var(--aws); }
.dbp-hs-azure { background: var(--azure); }
.dbp-hs-gcp { background: var(--gcp); }
.dbp-hs-ovh { background: var(--ovh); }
.dbp-hs-stackit { background: var(--stackit); }
.dbp-hs-multi, .dbp-hs-private { background: var(--multi); }
.dbp-hs-ohne { background: color-mix(in srgb, var(--text-3) 55%, transparent); }

/* Saeulen je Monat: der laufende Monat kraeftig, die uebrigen gedaempft. */
.dbp-saeulen { display: grid; grid-template-columns: repeat(var(--dbp-spalten, 6), minmax(0, 1fr)); gap: 12px; height: 220px; align-items: end; }
.dbp-saeule {
  display: grid; grid-template-rows: auto 1fr auto; justify-items: center; row-gap: 6px; height: 100%;
  background: none; border: 0; padding: 0; margin: 0; font: inherit; color: inherit; cursor: pointer;
}
.dbp-saeule-wert { font-size: var(--fs-ui); color: var(--text-2); }
.dbp-saeule-spur { display: flex; align-items: flex-end; width: 100%; max-width: 44px; height: 100%; border-bottom: 1px solid var(--border); }
.dbp-saeule-balken {
  display: block; width: 100%; height: 100%; border-radius: 4px 4px 0 0;
  background: color-mix(in srgb, var(--primary) 50%, transparent);
  transform: scaleY(var(--dbp-anteil, 0)); transform-origin: center bottom;
}
.dbp-saeule-jetzt .dbp-saeule-balken { background: var(--primary); }
.dbp-saeule-label { font-size: var(--fs-meta); color: var(--text-3); }
.dbp-saeule:hover .dbp-saeule-wert { color: var(--text-1); }

/* PR1.563 (#849) — Monatssaeulen mit Aussage: Kopfzeile, Ø-Linie (Saeulen-Skala), kumulierte
   Linie (eigene Skala, obere Haelfte). Feste Zeilenhoehen + Spalten ohne Abstand, damit die
   Linien exakt ueber der Spurmitte jeder Saeule liegen. */
.dbp-monate { --dbp-zeile: 1.2rem; position: relative; column-gap: 0; }
.dbp-monate .dbp-saeule { position: relative; grid-template-rows: var(--dbp-zeile) 1fr var(--dbp-zeile); }
.dbp-monate .dbp-saeule-spur { max-width: 48px; width: 64%; }
.dbp-mk { display: flex; flex-wrap: wrap; gap: 6px 28px; margin: -4px 0 14px; }
.dbp-mk-eintrag { display: flex; flex-direction: column; gap: 2px; }
.dbp-mk-zahl { font-size: var(--fs-title); font-weight: 600; line-height: 1.1; color: var(--text-1); font-variant-numeric: tabular-nums; }
.dbp-mk-label { font-size: var(--fs-meta); color: var(--text-2); }
.dbp-linien { position: absolute; inset: calc(var(--dbp-zeile) + 6px) 0; pointer-events: none; }
.dbp-schnitt { position: absolute; left: 0; right: 0; bottom: var(--dbp-y); border-top: 1px dashed var(--text-3); }
.dbp-schnitt-wert { position: absolute; right: 0; bottom: 2px; font-size: var(--fs-label); color: var(--text-2); background: var(--bg-card); padding: 0 2px; }
.dbp-kum { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.dbp-kum polyline { fill: none; stroke: var(--dbp-linie); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.dbp-kum-punkt {
  position: absolute; left: var(--dbp-x); bottom: var(--dbp-y); width: 8px; height: 8px; border-radius: 50%;
  background: var(--bg-card); border: 2px solid var(--dbp-linie); transform: translate(-50%, 50%); box-sizing: border-box;
}
.dbp-kum-wert { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); font-size: var(--fs-meta); font-weight: 500; color: var(--dbp-linie); white-space: nowrap; }
.dbp-saeule-tipp {
  position: absolute; top: 0; left: 50%; transform: translateX(-50%); z-index: 2; white-space: nowrap;
  padding: 3px 8px; border-radius: 6px; border: 1px solid var(--border); background: var(--bg-card);
  font-size: var(--fs-meta); color: var(--text-1); box-shadow: 0 2px 8px color-mix(in srgb, var(--text-1) 14%, transparent);
  opacity: 0; visibility: hidden;
}
.dbp-monate .dbp-saeule:first-child .dbp-saeule-tipp { left: 0; transform: none; }
.dbp-monate .dbp-saeule-jetzt .dbp-saeule-tipp { left: auto; right: 0; transform: none; }
.dbp-saeule:hover .dbp-saeule-tipp, .dbp-saeule:focus-visible .dbp-saeule-tipp { opacity: 1; visibility: visible; }
.dbp-legende { display: flex; flex-wrap: wrap; gap: 4px 16px; margin-top: 10px; font-size: var(--fs-meta); color: var(--text-2); }
.dbp-leg::before { content: ""; display: inline-block; width: 10px; height: 10px; margin-right: 6px; vertical-align: -1px; border-radius: 2px; }
.dbp-leg-monat::before { background: color-mix(in srgb, var(--primary) 50%, transparent); }
.dbp-leg-jetzt::before { background: var(--primary); }
.dbp-leg-kum::before { height: 2px; vertical-align: 3px; border-radius: 1px; background: var(--dbp-linie); }
.dbp-leg-schnitt::before { height: 0; vertical-align: 3px; border-top: 1px dashed var(--text-3); border-radius: 0; }

/* Top 10: Balken in der Zelle, Zahlen rechtsbuendig. */
.dbp-top-summe { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 12px; margin-bottom: 12px; }
.dbp-top-betrag { font-size: var(--fs-title); font-weight: 600; color: var(--text-1); }
.dbp-top { width: 100%; border-collapse: collapse; font-size: var(--fs-body); }
.dbp-top th, .dbp-top thead td { text-align: left; font-weight: 500; font-size: var(--fs-meta); color: var(--text-3); padding: 6px 8px; border-bottom: 1px solid var(--border); }
.dbp-top td { padding: 8px; border-bottom: 1px solid var(--border); color: var(--text-1); }
.dbp-top tr:last-child td { border-bottom: 0; }
.dbp-top .dbp-num, .dbp-top th.dbp-num { text-align: right; white-space: nowrap; }
.dbp-top-rang { width: 2.5em; color: var(--text-3); }
.dbp-top-name { max-width: 16em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dbp-top-balken { width: 32%; }
.dbp-top-zeile { cursor: pointer; }
.dbp-top-zeile:hover td { background: var(--bg-hover); }
/* PR1.470 (#721): „Alle Kunden" kann lang werden — die Tabelle scrollt in ihrer Kachel, der
   Kopf bleibt stehen. Projekte/Opps schmal, der Balken gibt dafuer Platz ab. */
.dbp-top-wrap { max-height: 28rem; overflow-y: auto; overscroll-behavior: contain; }
.dbp-top-wrap thead th, .dbp-top-wrap thead td { position: sticky; top: 0; z-index: 1; background: var(--bg-card); }
.dbp-top-wrap .dbp-top-balken { width: 22%; }
.dbp-kopf .dbp-kunden-modus { margin-left: auto; align-self: center; }
.dbp-kunden-modus .dbp-zeitraum-knopf { padding: 3px 10px; font-size: var(--fs-meta); }

/* Tastatur: jede Kachel, jeder Balken, jede Zeile zeigt ihren Fokus. */
.dbp button:focus-visible, .dbp-top-zeile:focus-visible, .dbp-zeitraum-knopf:focus-visible {
  outline: 2px solid var(--primary); outline-offset: 2px; border-radius: 4px;
}

/* Zeitraum 3 · 6 · 12 Monate — Segment, bewusst nicht wie die Reiter (BF-56 #539). */
.dbp-zeitraum { display: inline-flex; border: 1px solid var(--border); border-radius: 6px; overflow: hidden; }
.dbp-zeitraum-knopf { white-space: nowrap; background: var(--bg-card); border: 0; border-right: 1px solid var(--border); padding: 5px 12px; font: inherit; font-size: var(--fs-ui); color: var(--text-2); cursor: pointer; }
.dbp-zeitraum-knopf:last-child { border-right: 0; }
.dbp-zeitraum-knopf[aria-pressed="true"] { background: color-mix(in srgb, var(--primary) 14%, var(--bg-card)); color: var(--text-1); font-weight: 600; }

/* Laden: Bloecke in Form der Kacheln. */
.dbp-skelett { display: flex; flex-direction: column; gap: 10px; min-height: 108px; }
.dbp-skelett-zeile, .dbp-skelett-zahl, .dbp-skelett-block { display: block; border-radius: 4px; background: color-mix(in srgb, var(--text-3) 16%, transparent); }
.dbp-skelett-zeile { height: 10px; width: 55%; }
.dbp-skelett-zahl { height: 30px; width: 35%; }
.dbp-skelett-block { flex: 1; min-height: 140px; }

/* Bewegung: nur beim ersten Oeffnen je Reiter (Klasse dbp-anim), < 500 ms, ease-out. */
@keyframes dbp-wachse-x { from { transform: scaleX(0); } }
@keyframes dbp-wachse-y { from { transform: scaleY(0); } }
.dbp-anim .dbp-balken { animation: dbp-wachse-x var(--dbp-dauer) cubic-bezier(.2, .7, .3, 1) both; }
.dbp-anim .dbp-saeule-balken { animation: dbp-wachse-y var(--dbp-dauer) cubic-bezier(.2, .7, .3, 1) both; }
@media (prefers-reduced-motion: reduce) {
  .dbp-anim .dbp-balken, .dbp-anim .dbp-saeule-balken { animation: none; }
}
/* PR1.563 (#849): Monatssaeulen wachsen gestaffelt (45 ms), danach zeichnet sich die kumulierte
   Linie von links nach rechts (clip-path — stroke-dash passt nicht zu non-scaling-stroke), Punkte und Ø-Linie blenden ein. Reduzierte Bewegung: nur Einblenden (dbp-einblenden). */
@keyframes dbp-zeichne { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes dbp-blende { from { opacity: 0; } }
.dbp-anim .dbp-monate { --dbp-linie-start: calc(var(--dbp-spalten, 6) * 45ms + var(--dbp-dauer)); }
.dbp-anim .dbp-monate .dbp-saeule-balken { animation-delay: calc(var(--dbp-i, 0) * 45ms); }
.dbp-anim .dbp-kum { animation: dbp-zeichne 500ms cubic-bezier(.2, .7, .3, 1) var(--dbp-linie-start) both; }
.dbp-anim .dbp-kum-punkt, .dbp-anim .dbp-schnitt { animation: dbp-blende 200ms ease-out var(--dbp-linie-start) both; }
.dbp-einblenden .dbp-monate, .dbp-einblenden .dbp-mk { animation: dbp-blende 200ms ease-out both; }
@media (prefers-reduced-motion: reduce) {
  .dbp-anim .dbp-kum, .dbp-anim .dbp-kum-punkt, .dbp-anim .dbp-schnitt { animation: none; }
}

/* PR1.471 (#723) — Report „Kunden nach Hyperscaler" (Dialog, beide Shells). Selten genutzt,
   aber zum Lesen gebaut: keine Animation, Gruppen als kompakte Tabellen, Zahlen rechts. */
.rhs-modal { max-width: 640px; max-height: min(86vh, 760px); }
.rhs-modal:focus { outline: none; }
.rhs-modal:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.rhs-kopf { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 16px; border-bottom: 1px solid var(--border); }
.rhs-kopf h2 { margin: 0; display: flex; align-items: center; gap: 8px; font-size: var(--fs-section); }
.rhs-koerper { padding: 12px 16px 16px; overflow-y: auto; overscroll-behavior: contain; font-variant-numeric: tabular-nums; }
.rhs-summe { margin: 0 0 12px; font-size: var(--fs-body); color: var(--text-2); }
.rhs-leer { margin: 8px 0; font-size: var(--fs-body); color: var(--text-2); }
.rhs-gruppe + .rhs-gruppe { margin-top: 16px; }
.rhs-gruppe-titel { display: flex; align-items: center; gap: 8px; margin: 0 0 6px; font-size: var(--fs-body); font-weight: 500; color: var(--text-1); }
.rhs-gruppe-zahl { margin-left: auto; font-size: var(--fs-ui); font-weight: 500; color: var(--text-3); }
.rhs-logo { flex: none; }
.rhs-punkt { display: inline-block; width: 10px; height: 10px; border-radius: 2px; flex: none; }
.rhs-tabelle { width: 100%; border-collapse: collapse; font-size: var(--fs-body); }
.rhs-tabelle th { text-align: left; font-weight: 500; font-size: var(--fs-meta); color: var(--text-3); padding: 4px 8px; border-bottom: 1px solid var(--border); }
.rhs-tabelle td { padding: 6px 8px; border-bottom: 1px solid var(--border); color: var(--text-1); }
.rhs-tabelle tr:last-child td { border-bottom: 0; }
.rhs-tabelle .rhs-num { text-align: right; white-space: nowrap; width: 5.5em; }
.rhs-name { max-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rhs-fehler { margin: 0; padding: 8px 16px; font-size: var(--fs-body); color: var(--danger); border-top: 1px solid var(--border); }
.rhs-fuss { display: flex; justify-content: flex-end; gap: 8px; padding: 12px 16px; border-top: 1px solid var(--border); }

.dbp-drill-banner { margin-bottom: 12px; }
.dbp-drill-banner .chip-clear { background: none; border: 0; color: inherit; font: inherit; cursor: pointer; padding: 0 2px; }

/* Umbruch nach der Breite des Dashboards selbst, nicht des Fensters — Seitenleiste und
   KI-Band nehmen unterschiedlich viel weg. */
@container (max-width: 1000px) {
  .dbp-span-3, .dbp-span-4 { grid-column: span 6; }
  .dbp-span-8 { grid-column: span 12; }
  .dbp-rows-2 { grid-row: auto; }
  .dbp-top-balken { width: 22%; }
}
@container (max-width: 560px) {
  .dbp-grid > .dbp-kachel { grid-column: span 12; }
  .dbp-top-balken { display: none; }
}

/* ─────────────────────────────────────────
   PR1.403 (#633) — Personen-Infokarte (beide Shells; schwebt an <body>, außerhalb `.crm`,
   Farben deshalb aus den Theme-Tokens am Dokument). Täglich genutzt → nur ein kurzes
   Einblenden (≤ 200 ms), bei reduzierter Bewegung sofort.
   ───────────────────────────────────────── */
.person-infocard { position: fixed; z-index: 1200; width: 18rem; max-width: calc(100vw - 1rem); padding: .75rem .875rem;
    background: var(--bg-card); color: var(--text-1); border: 1px solid var(--border); border-radius: 10px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, .18); font-size: var(--fs-ui); line-height: 1.4; pointer-events: none;
    opacity: 0; transform: translateY(-2px); transition: opacity .16s ease-out, transform .16s ease-out; }
.person-infocard.is-above { transform: translateY(2px); }
.person-infocard.is-open { opacity: 1; transform: none; }
.person-infocard.is-instant { transition: none; }
.person-infocard-name { font-weight: 600; margin-bottom: .375rem; }
.person-infocard-facts { display: grid; grid-template-columns: auto 1fr; gap: .2rem .75rem; margin: 0; }
.person-infocard-facts dt { color: var(--text-2); }
.person-infocard-facts dd { margin: 0; overflow-wrap: anywhere; }
@media (prefers-reduced-motion: reduce) {
    .person-infocard, .person-infocard.is-above { transition: none; transform: none; }
}

/* PR1.403 (#633) — CC-Ampel an den CC-Chips: Symbol + Name + Quote; Farbe trägt mit, nie allein. */
.cc-chip--amp { display: inline-flex; align-items: center; gap: .3rem; }
.cc-amp-sym { font-weight: 600; }
.cc-amp-pct { font-variant-numeric: tabular-nums; font-size: var(--fs-meta); opacity: .9; }
.cc-chip--amp-ok .cc-amp-sym { color: var(--success); }
.cc-chip--amp-mid .cc-amp-sym, .cc-chip--amp-mid .cc-amp-pct { color: var(--attention); }
.cc-chip--amp-high .cc-amp-sym, .cc-chip--amp-high .cc-amp-pct { color: var(--danger); }
.cc-chip--amp-high { border-color: color-mix(in srgb, var(--danger) 55%, transparent); }
/* Symbol in der NKV-Matrix vor der Zahl. */
.cap-nkv-sym { display: inline-block; min-width: 1em; margin-right: .2rem; font-weight: 600; }

/* PR1.403 (#633) — Offshore-Etikett im Projektteam (klassisch). */
.proj-team-offshore { display: inline-block; margin-left: .375rem; padding: 0 .375rem; border: 1px solid var(--border);
    border-radius: 999px; font-size: var(--fs-label); color: var(--text-2); vertical-align: middle; }

/* PR1.403 (#633) — Einsatzplan klassisch: Skelettzeilen beim Laden, Knopf im Fehlerzustand. */
.ep-skeleton { display: flex; flex-direction: column; gap: .5rem; padding: .75rem .5rem; }
.ep-skel-row { display: flex; align-items: center; gap: .5rem; }
.ep-skel { display: block; height: .9rem; border-radius: 6px; background: var(--bg-card2, var(--border)); }
.ep-skel--avatar { flex: 0 0 2rem; height: 2rem; border-radius: 50%; }
.ep-skel--name { flex: 0 0 12rem; }
.ep-skel--cells { flex: 1 1 auto; height: 1.5rem; }
.ep-retry { display: flex; justify-content: center; padding-bottom: 1.5rem; }

/* PR1.400 (#630) — Planungsfenster im Einsatzplan (einsatz-plan-dialog.js). Grundregeln fuer
   beide Shells; das Redesign ergaenzt in style-redesign.css nur Abstaende und den Namensknopf.
   Links lesen, rechts planen; unter 900px untereinander, Planen zuerst. Keine Animation
   ausser dem Einblenden des Fensters selbst — taeglich genutzt. */
.eplan-modal { width: min(1080px, 96vw); max-width: 1080px; }
.eplan-sub { font-weight: 400; color: var(--text-3); margin-left: 6px; }
.eplan { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); gap: 24px; align-items: start; }
.eplan--nurlesen { grid-template-columns: minmax(0, 1fr); }
@media (max-width: 900px) {
  .eplan { grid-template-columns: minmax(0, 1fr); }
  .eplan-form { order: -1; }
}
.eplan-person { display: flex; gap: 12px; align-items: center; margin-bottom: 4px; }
.eplan-name { margin: 0; font-size: var(--fs-section); font-weight: 600; color: var(--text-1); }
.eplan-meta { margin: 2px 0 0; color: var(--text-3); font-size: var(--fs-ui); }
.eplan-h { margin: 16px 0 6px; font-size: var(--fs-meta); font-weight: 500; color: var(--text-3); }
.eplan-h--form { margin: 0; font-size: var(--fs-body); text-transform: none; letter-spacing: 0; color: var(--text-1); }
.eplan-profil { margin: 0; font-size: var(--fs-body); line-height: 1.45; color: var(--text-1); display: -webkit-box; -webkit-line-clamp: 5; -webkit-box-orient: vertical; overflow: hidden; }
.eplan-skills { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.eplan-skills li { padding: 2px 8px; border: 1px solid var(--border); border-radius: 999px; font-size: var(--fs-meta); color: var(--text-1); }
.eplan-einsaetze { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.eplan-einsatz { display: flex; gap: 8px; align-items: flex-start; width: 100%; padding: 6px 8px; border: 1px solid transparent; border-radius: 6px; background: none; color: inherit; font: inherit; text-align: left; }
button.eplan-einsatz { cursor: pointer; }
button.eplan-einsatz:hover { border-color: var(--border); }
button.eplan-einsatz:focus-visible { outline: 2px solid var(--primary-text); outline-offset: 1px; }
.eplan-einsatz[aria-current="true"] { border-color: var(--primary-text); }
.eplan-einsatz-txt { display: flex; flex-direction: column; min-width: 0; font-size: var(--fs-body); color: var(--text-1); }
.eplan-einsatz-txt small { color: var(--text-3); font-size: var(--fs-meta); }
.eplan-dot { margin-top: 5px; flex: 0 0 auto; }
.eplan-empty { margin: 0; color: var(--text-3); font-size: var(--fs-ui); }
.eplan-all { margin-top: 16px; }
.eplan-form { min-width: 0; }
/* Lange Opportunity-Namen duerfen die Auswahl nicht ueber den Fensterrand schieben. */
.eplan-form .emp-alloc-grid label { min-width: 0; }
.eplan-form .emp-alloc-grid select, .eplan-form .emp-alloc-grid input { min-width: 0; max-width: 100%; box-sizing: border-box; }
.eplan-form .emp-alloc-grid--ziel select { width: 100%; text-overflow: ellipsis; }
/* #630 Nachjustierung (21.10.2026): Opportunity/Projekt als Hauptfeld, Kunde nur Anzeige. */
.eplan-ziel { display: flex; flex-direction: column; gap: 6px; margin: 10px 0 12px; padding: 10px 12px; border: 1px solid var(--border); border-left: 3px solid var(--primary-text); border-radius: 6px; min-width: 0; }
.eplan-ziel-label { font-weight: 500; font-size: var(--fs-body); color: var(--text-1); }
.eplan-ziel select { width: 100%; min-width: 0; max-width: 100%; box-sizing: border-box; text-overflow: ellipsis; }
.eplan-ziel select, .eplan-form .emp-alloc-grid select { padding: 6px 8px; font: inherit; font-size: var(--fs-body); background: var(--bg-input); border: 1px solid var(--border); border-radius: 4px; color: var(--text-1); }
.eplan-kunde { margin: 2px 0 0; font-size: var(--fs-body); color: var(--text-1); }
.eplan-kunde-k { color: var(--text-3); margin-right: 4px; }
.eplan-sperrhinweis { align-self: center; color: var(--text-3); font-size: var(--fs-ui); }
.eplan-foot .btn-primary[aria-disabled="true"] { opacity: .55; cursor: not-allowed; }
.eplan-form-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 10px; }
.eplan-error { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 10px; padding: 8px 10px; border: 1px solid var(--danger); border-left-width: 3px; border-radius: 6px; font-size: var(--fs-body); color: var(--text-1); }
.eplan-error ul { margin: 0; padding-left: 18px; }
.eplan-foot, .eplan-confirm { display: flex; align-items: center; gap: 10px; width: 100%; }
.eplan-foot-end { margin-left: auto; display: flex; gap: 10px; }
.eplan-hint { margin-right: auto; color: var(--text-3); font-size: var(--fs-ui); }
.eplan-confirm { justify-content: flex-end; }
.eplan-confirm > span { margin-right: auto; font-weight: 600; color: var(--text-1); }
.ausl-pop-aktion { margin: 8px 0 0; }

/* ─────────────────────────────────────────────────────────────────────────
   PR1.413 (#646) — Einsatz-Übersicht im Projekt-/Opp-Detail (klassisch):
   Budget-Balken mit Heute-Linie + Wochenkacheln je Person. Ersetzt den Detail-Gantt.
   Täglich genutzt → keine Animation. Farbe trägt nur Flächen/Rahmen, Text bleibt --text-1/-2.
   ───────────────────────────────────────────────────────────────────────── */
.einsatz-budget { margin: 8px 0 12px; font-size: var(--fs-ui); color: var(--text-2); font-variant-numeric: tabular-nums; }
.einsatz-budget-kopf { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin-bottom: 6px; }
.einsatz-budget-titel { font-weight: 600; color: var(--text-1); }
.einsatz-budget-kopf .team-budget-split { margin-left: auto; }
.einsatz-ampel {
  display: inline-flex; align-items: center; padding: 2px 8px; border-radius: 999px;
  font-size: var(--fs-label); color: var(--text-1); border: 1px solid var(--border); background: var(--bg-card2);
}
.einsatz-ampel.is-ok { border-color: var(--success); background: color-mix(in srgb, var(--success) 12%, var(--bg-card)); }
.einsatz-ampel.is-knapp { border-color: var(--warning); background: color-mix(in srgb, var(--warning) 14%, var(--bg-card)); }
.einsatz-ampel.is-ueber { border-color: var(--danger); background: color-mix(in srgb, var(--danger) 14%, var(--bg-card)); }
.einsatz-ueber-text { font-weight: 600; color: var(--text-1); }
.einsatz-balken {
  position: relative; display: flex; height: 22px; border-radius: 6px; overflow: hidden;
  border: 1px solid var(--border-light); background: var(--bg-card);
}
/* PR1.515 — Budget und Plan auf einer Skala: zwei Spuren, rechts die Werte. */
.einsatz-skala { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 6px 10px; }
.einsatz-skala-titel { font-weight: 600; color: var(--text-1); }
.einsatz-skala-spur { position: relative; display: flex; height: 22px; border-radius: 6px; background: var(--bg-card2); overflow: hidden; }
.einsatz-skala-spur.einsatz-balken { border: 0; background: var(--bg-card2); }
.einsatz-skala-budget { flex: 0 0 var(--breite); background: color-mix(in srgb, var(--text-3) 35%, var(--bg-card2)); }
.einsatz-skala-wert { white-space: nowrap; color: var(--text-2); }
.einsatz-skala-wert strong { color: var(--text-1); }
.einsatz-skala-person { flex: 0 0 var(--breite); min-width: 0; }
.einsatz-skala-person + .einsatz-skala-person { border-left: 2px solid var(--bg-card); }
.einsatz-skala-person.is-ton-0, .einsatz-leg.is-ton-0::before { background: var(--primary-dark); }
.einsatz-skala-person.is-ton-1, .einsatz-leg.is-ton-1::before { background: var(--primary); }
.einsatz-skala-person.is-ton-2, .einsatz-leg.is-ton-2::before { background: color-mix(in srgb, var(--primary) 62%, var(--bg-card)); }
.einsatz-skala-person.is-ton-3, .einsatz-leg.is-ton-3::before { background: color-mix(in srgb, var(--primary) 38%, var(--bg-card)); }
.einsatz-urteil {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; margin: 10px 0 4px; padding: 8px 12px;
  border-radius: 8px; border: 1px solid var(--border); background: var(--bg-card2); color: var(--text-1);
}
.einsatz-urteil.is-ueber { border-color: var(--danger); background: color-mix(in srgb, var(--danger) 12%, var(--bg-card)); }
.einsatz-urteil.is-warn { border-color: var(--warning); background: color-mix(in srgb, var(--warning) 12%, var(--bg-card)); }
.einsatz-urteil-text { display: flex; align-items: baseline; gap: 8px; flex: 1 1 16rem; margin: 0; font-size: var(--fs-ui); line-height: 1.4; }
.einsatz-urteil-zeichen { flex: 0 0 auto; font-weight: 600; }
.einsatz-urteil-knoepfe { display: flex; flex-wrap: wrap; gap: 8px; margin-left: auto; }
/* Nachjustierung #646: Balken = gesamte Planung; Budget als Linie, Überzug als Schraffur darüber. */
.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(--danger) 55%, transparent) 0 5px, transparent 5px 10px);
  box-shadow: inset 0 0 0 2px var(--danger);
}
.einsatz-budget-linie { position: absolute; top: 0; bottom: 0; left: var(--pos); width: 0; margin-left: -1px; z-index: 2; border-left: 2px solid var(--text-1); }
.einsatz-budget-summe { font-size: var(--fs-body); font-weight: 500; color: var(--text-1); }
.einsatz-hinweis a { color: inherit; font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }
.einsatz-budget-legende { display: flex; flex-wrap: wrap; gap: 4px 14px; margin-top: 6px; font-size: var(--fs-label); }
.einsatz-leg { display: inline-flex; align-items: center; gap: 6px; }
.einsatz-leg::before { content: ''; width: 10px; height: 10px; border-radius: 2px; }
.einsatz-leg.is-grenze::before { width: 0; height: 12px; border-radius: 0; border-left: 2px solid var(--text-1); }
.einsatz-leg.is-ueber::before {
  background: repeating-linear-gradient(135deg, color-mix(in srgb, var(--danger) 55%, transparent) 0 3px, transparent 3px 6px);
  box-shadow: inset 0 0 0 1px var(--danger);
}
.einsatz-achse {
  position: relative; display: flex; justify-content: space-between; align-items: flex-start;
  margin-top: 6px; padding-top: 4px; min-height: 18px; border-top: 1px solid var(--border);
  font-size: var(--fs-label); color: var(--text-3);
}
.einsatz-heute { position: absolute; left: var(--pos); top: -4px; bottom: 0; width: 0; border-left: 2px solid var(--warning); }
.einsatz-heute-zeile { display: flex; align-items: center; gap: .375rem; margin-top: .125rem; font-size: var(--fs-label); color: var(--text-1); }
.einsatz-heute-zeile::before { content: ''; width: .125rem; height: .75rem; background: var(--warning); }
.einsatz-heute-zeile.is-ausserhalb { color: var(--text-2); }
.einsatz-heute-zeile.is-ausserhalb::before { content: none; }
.einsatz-kein-budget { font-weight: 600; color: var(--text-1); }
.einsatz-budget-zusatz { color: var(--text-2); }
.einsatz-leer, .einsatz-laedt, .einsatz-zeitraum-fehlt { margin: 4px 0; font-size: var(--fs-meta); color: var(--text-2); }
.einsatz-fehler {
  margin: 6px 0; padding: 8px 10px; border-radius: 8px; font-size: var(--fs-meta); color: var(--text-1);
  border: 1px solid var(--danger); background: color-mix(in srgb, var(--danger) 10%, var(--bg-card));
}
.einsatz-host { margin-top: 6px; }
/* Nachjustierung 2 #646 — Personenzeile der klassischen Projektteam-Karte. Breit eine Zeile;
   in der schmalen Mittelspalte (~300 px) rutschen PT/Umfang/Knöpfe als eigene Zeile unter
   den Namen, die Unterzeile bricht normal um (vorher Ein-Wort-Spalte + Überlappung). */
.einsatz-zeile { container-type: inline-size; padding: 6px 0; border-bottom: 1px solid var(--border); }
.einsatz-zeile-kopf { display: flex; align-items: center; gap: 6px 10px; }
.einsatz-zeile-wer { display: flex; align-items: center; gap: 10px; flex: 1 1 auto; min-width: 0; }
.einsatz-zeile-avatar {
  flex: 0 0 32px; width: 32px; height: 32px; border-radius: 50%; color: #000;
  display: flex; align-items: center; justify-content: center; font-weight: 500; font-size: var(--fs-ui);
}
.einsatz-zeile-info { flex: 1 1 auto; min-width: 0; }
.einsatz-zeile-name { font-weight: 500; font-size: var(--fs-body); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.einsatz-zeile-unter { font-size: var(--fs-label); color: var(--text-3); }
.einsatz-zeile-werte { display: flex; align-items: center; gap: 10px; flex: 0 0 auto; }
.einsatz-zeile-umfang { font-size: var(--fs-body); color: var(--text-2); min-width: 42px; text-align: right; }
@container (max-width: 30rem) {
  .einsatz-zeile-kopf { flex-wrap: wrap; }
  .einsatz-zeile-wer { flex-basis: 100%; }
  .einsatz-zeile-name { white-space: normal; }
  .einsatz-zeile-unter { overflow-wrap: anywhere; }
  .einsatz-zeile-werte { flex: 1 1 100%; flex-wrap: wrap; justify-content: flex-end; }
}
/* PR1.500 (#767) — Wochenstreifen: je KW ein Segment, Farbe = Gesamtauslastung aller Projekte. */
.einsatz-streifen-zeile { display: flex; align-items: center; gap: 12px; }
.einsatz-streifen {
  flex: 1 1 auto; min-width: 0; display: flex; gap: 3px; margin: 0; padding: 2px 0; list-style: none;
  overflow-x: auto;
}
/* PR1.515 — Wochenzelle mit KW und Prozentzahl. Farbe der Stufe als getönte Fläche + voller
   Balken oben (Farben der Stufen unverändert), Text bleibt --text-1 für den Kontrast. */
.einsatz-streifen-woche {
  --stufe: var(--border-light);
  flex: 1 1 0; min-width: 44px; padding: 3px 2px 4px; border-radius: 4px; text-align: center;
  display: flex; flex-direction: column; align-items: center; gap: 1px;
  background: color-mix(in srgb, var(--stufe) 22%, var(--bg-card)); border: 1px solid transparent;
  box-shadow: inset 0 3px 0 var(--stufe); color: var(--text-1); font-variant-numeric: tabular-nums;
}
.einsatz-zelle-kw { font-size: var(--fs-label); color: var(--text-2); white-space: nowrap; }
.einsatz-zelle-wert { display: inline-flex; align-items: center; font-size: var(--fs-meta); font-weight: 500; white-space: nowrap; }
.einsatz-zelle-zeichen { margin-right: 2px; }
.einsatz-streifen-woche.is-gering { --stufe: var(--accent); }
.einsatz-streifen-woche.is-normal { --stufe: var(--info); }
.einsatz-streifen-woche.is-hoch { --stufe: var(--warning); }
.einsatz-streifen-woche.is-ueber { --stufe: var(--danger); }
.einsatz-streifen-woche.is-frei { background: var(--bg-card2); box-shadow: none; }
.einsatz-streifen-woche.is-frei .einsatz-zelle-wert { font-weight: 400; color: var(--text-3); }
.einsatz-streifen-woche.is-vergangen { opacity: .55; }
.einsatz-streifen-woche.is-aktuell { border-color: var(--text-1); }
.einsatz-satz { margin: 6px 0 0; font-size: var(--fs-ui); line-height: 1.4; color: var(--text-1); }
.einsatz-weitere { margin-top: 4px; }
.einsatz-weitere-sum { cursor: pointer; font-size: var(--fs-meta); color: var(--text-2); width: fit-content; }
.einsatz-weitere-sum:hover { color: var(--text-1); }
.einsatz-weitere-sum:focus-visible { outline: 2px solid var(--text-1); outline-offset: 2px; }
.einsatz-rollen-stand { margin: 0 0 8px; font-size: var(--fs-ui); color: var(--text-2); }
.einsatz-rolle-offen {
  display: flex; align-items: center; gap: 12px; padding: 8px 0; border-top: 1px solid var(--border);
  font-size: var(--fs-ui); color: var(--text-2);
}
.einsatz-rolle-besetzen {
  padding: 4px 10px; border-radius: 999px; border: 1px dashed var(--border);
  background: transparent; color: var(--text-1); font: inherit; cursor: pointer;
}
.einsatz-rolle-besetzen:hover { border-color: var(--info); }
.einsatz-rolle-besetzen:focus-visible { outline: 2px solid var(--text-1); outline-offset: 2px; }
.einsatz-legende { display: flex; flex-wrap: wrap; gap: 4px 16px; margin: 12px 0 0; padding: 0; list-style: none; font-size: var(--fs-meta); color: var(--text-2); }
.einsatz-legende-punkt { display: inline-flex; align-items: center; gap: 6px; }
.einsatz-legende-punkt::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--bg-card2); }
.einsatz-legende-punkt.is-gering::before { background: var(--accent); }
.einsatz-legende-punkt.is-normal::before { background: var(--info); }
.einsatz-legende-punkt.is-hoch::before { background: var(--warning); }
.einsatz-legende-punkt.is-ueber::before { background: var(--danger); }
.einsatz-legende-punkt.is-frei::before { border: 1px solid var(--border-light); }
.einsatz-hinweise { display: flex; flex-wrap: wrap; gap: 4px 6px; margin: 4px 0 0; padding: 0; list-style: none; }
.einsatz-hinweis {
  padding: 2px 8px; border-radius: 999px; font-size: var(--fs-label); color: var(--text-1);
  border: 1px solid var(--warning); background: color-mix(in srgb, var(--warning) 10%, var(--bg-card));
}
.einsatz-hinweis.is-konflikt { border-color: var(--danger); background: color-mix(in srgb, var(--danger) 10%, var(--bg-card)); }

/* PR1.416 (#651) — Zeichen (Phosphor fill, components/icons.js). Gilt fuer beide Shells:
   das Zeichen erbt die Textfarbe (currentColor), folgt also Hell/Dunkel und Hover/aktiv/
   Fokus des Elternteils von selbst. Bewusst ohne Animation — taegliche Navigation. */
:root {
  --icon-16: 16px;
  --icon-20: 20px;
  --icon-24: 24px;
}

.ic {
  display: inline-block;
  flex: none;
  vertical-align: -0.2em;
}

.ic-16 { width: var(--icon-16); height: var(--icon-16); }
.ic-20 { width: var(--icon-20); height: var(--icon-20); }
.ic-24 { width: var(--icon-24); height: var(--icon-24); }

.ic-wrap {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}

.ic-wrap .ic { display: block; vertical-align: baseline; }

.nav-item .nav-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: inherit;
}

.nav-item .nav-icon .ic { display: block; vertical-align: baseline; }

/* Platz reservieren, bis hydrateIcons() das Zeichen einsetzt — sonst springt die Leiste
   beim Laden (die Zeichen der index.html entstehen erst im Modul). */
[data-icon]:empty {
  display: inline-block;
  width: var(--icon-16);
  height: var(--icon-16);
}

[data-icon-size="20"]:empty {
  width: var(--icon-20);
  height: var(--icon-20);
}

/* PR1.416 Nachzug — Farbton fuer Bedeutungszeichen (icon(name, { tone })). Die Tokens sind in
   beiden Shells und Themes gesetzt (der .crm-Scope ueberschreibt sie), das Zeichen bringt nie
   eine eigene Farbe mit. */
.ic-tone-ok { color: var(--success); }
.ic-tone-warn { color: var(--warning); }
.ic-tone-bad { color: var(--danger); }
.ic-tone-info { color: var(--info, var(--primary)); }
.ic-tone-muted { color: var(--text-muted, var(--text-secondary)); opacity: 0.85; }

/* PR1.416 Nachzug — Opportunities/Dashboard */
/* Kleine Aufklapp-/Untermenue-Pfeile, Haken im Qualitaets-Kreis und Skill-Sterne folgen der
   Schriftgroesse ihres Behaelters statt der festen 16-px-Kante. */
.status-change-caret .ic,
.opp-action-caret .ic,
.kanban-collapse-toggle .ic,
.opp-quality-icon .ic { width: 1em; height: 1em; }

/* PR1.416 Nachzug — Mitarbeiter/Kapazität/Shell */
kbd .ic,
.ms-hint .ic,
.star .ic,
.emp-sort-caret .ic,
.emp-shoring-caret .ic,
.cap-nkv-sym .ic,
.cap-nkv-hint .ic { width: 1em; height: 1em; }

/* PR1.416 Nachzug — Dialoge Personen/Kunden */
.ch-consultant-dots .ic { width: .75em; height: .75em; }

/* PR1.416 Nachzug — Dialoge Anhänge/Importe/Admin */
/* Runde Mini-Entfernen-Knoepfe im Feedback-Dialog: Icon mittig statt Grundlinie. */
.fb-thumb-x,
.fb-file-x { display: inline-grid; place-items: center; padding: 0; }
.fb-thumb-x .ic,
.fb-file-x .ic,
.fb-done-mark .ic { display: block; }

/* ===== PR1.424 (#661) — Listen-Optik Opportunities, Projekte, Kunden (klassische Shell) =====
   Gleiche Klassen wie in style-redesign.css, Werte aus den klassischen Tokens. Feste
   Zeilenhoehe 56px, je Zelle eine Zeile, leer = blasser Strich, Haarlinie statt Schatten.
   Keine Bewegung (taeglich genutzte Listen). */
table.opp-table tbody tr.opp-row > td,
table.customer-table tbody tr > td { height: 56px; padding-top: 0; padding-bottom: 0; }
table.opp-table tbody tr.opp-row:focus-visible,
table.customer-table tbody tr:focus-visible { outline: 2px solid var(--primary); outline-offset: -2px; }
table.opp-table td.col-projectDays, table.opp-table td.col-dailyRate, table.opp-table td.col-budget { text-align: right; font-variant-numeric: tabular-nums; }
table.opp-table thead tr.col-heads-row th[data-col="projectDays"], table.opp-table thead tr.col-heads-row th[data-col="dailyRate"],
table.opp-table thead tr.col-heads-row th[data-col="budget"] { text-align: right; }
/* PR1.506 — Hyperscaler-Logo als ruhige Mittelachse (Opp- und Projekttabelle, beide tragen .opp-table). */
table.opp-table td.col-hyperscaler,
table.opp-table thead tr.col-heads-row th[data-col="hyperscaler"] { text-align: center; }
/* PR1.506 — .btn setzt display und würde das hidden-Attribut (Archiv-Modus) sonst überstimmen. */
#btn-new-opp-toolbar[hidden] { display: none; }
.list-empty { color: var(--text-3); font-weight: 400; }

.list-entity { display: flex; align-items: center; gap: 12px; min-width: 0; max-width: 340px; }
.list-logo { flex: none; display: inline-flex; }
.list-logo .acc-logo { border-radius: 6px; }
.list-text { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
.list-line { display: flex; align-items: center; gap: 8px; min-width: 0; }
.list-name { font-weight: 600; color: var(--text-1); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.list-meta { font-size: var(--fs-ui); color: var(--text-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 400; }
table.opp-table td.col-sticky-name, table.customer-table td.col-sticky-name { overflow: visible; max-width: none; }

.gap-count {
  flex: none; position: relative;
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 20px; height: 20px; padding: 0 5px; border-radius: 10px;
  border: 1px solid color-mix(in srgb, var(--warning) 40%, transparent);
  background: color-mix(in srgb, var(--warning) 14%, transparent);
  color: color-mix(in srgb, var(--warning) 75%, var(--text-1));
  font: inherit; font-size: var(--fs-ui); font-weight: 500; font-variant-numeric: tabular-nums; line-height: 1;
  cursor: pointer;
}
.gap-count:hover { border-color: currentColor; }
.gap-count:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.gap-count[data-tip]:hover::after,
.gap-count[data-tip]:focus-visible::after {
  content: attr(data-tip); position: absolute; left: 0; top: calc(100% + 4px); z-index: 30;
  padding: 4px 8px; border-radius: 6px; white-space: nowrap; font-weight: 500;
  background: var(--bg-card); color: var(--text-1); border: 1px solid var(--border);
  box-shadow: 0 6px 16px -8px rgba(0,0,0,.4);
}

.staff-slots { display: inline-flex; align-items: center; gap: 8px; font-variant-numeric: tabular-nums; font-size: var(--fs-ui); font-weight: 500; white-space: nowrap; }
.staff-slot-row { display: inline-flex; align-items: center; gap: 4px; }
.staff-slot { display: inline-block; width: 18px; height: 18px; border-radius: 5px; box-sizing: border-box; border: 1.5px dashed var(--text-3); }
.staff-slot-filled { border: 1.5px solid var(--success); background: var(--success); }
.staff-slot-reserved { border: 1.5px solid var(--info); background: repeating-linear-gradient(135deg, var(--info) 0 2px, transparent 2px 6px); }
.staff-slot-more { color: var(--text-3); font-weight: 600; }
.staff-slot-num small { margin-left: 3px; color: var(--text-3); font-size: var(--fs-meta); font-weight: 500; }
.staff-slots-bad .staff-slot-num { color: var(--danger); }
.staff-slots-mid .staff-slot-num { color: var(--warning); }
.staff-slots-ok .staff-slot-num { color: var(--success); }

table.opp-table tbody tr.grp-row th {
  text-align: left; padding: 8px 14px; height: auto;
  font-size: var(--fs-meta); font-weight: 500;
  color: var(--text-2); background: var(--bg-card2, var(--bg-card)); border-bottom: 1px solid var(--border);
}
.chip-count { font-variant-numeric: tabular-nums; font-weight: 500; opacity: .75; margin-left: 2px; }
.list-foot { display: flex; justify-content: space-between; gap: 16px; padding: 8px 4px; font-size: var(--fs-ui); color: var(--text-3); }
#btn-opp-group-status[aria-pressed="true"] { background: color-mix(in srgb, var(--primary) 16%, transparent); border-color: var(--primary); }
table.opp-table tbody tr:nth-last-child(-n+2) .gap-count[data-tip]::after { top: auto; bottom: calc(100% + 4px); }

/* PR1.431 (#669) — Suchfeld im Dialog „Testdaten suchen": seit das Kästchen aus den Masken
   entfallen ist, ist das der Weg, einen bestimmten Datensatz zu kennzeichnen. */
.testrec-scan-search { margin: 0 0 14px; }
.testrec-scan-search input { max-width: 520px; }
.testrec-scan-search small { display: block; margin-top: 4px; color: var(--text-2); font-size: var(--fs-meta); }

/* ── PR1.427 (#664) — Admin · KI-Modelle, klassische Shell ────────────────
   Gleiches Markup wie im Redesign (components/admin-ki-modelle.js). Auf die
   Huelle des klassischen Reiters begrenzt, damit nichts in die .crm-Shell
   durchsickert. Keine Animation (seltenes Verwaltungswerkzeug). */
.ki-modelle-huelle .ki-einleitung { margin: 0 0 8px; color: var(--text-2); font-size: var(--fs-body); line-height: 1.5; }
.ki-modelle-huelle .ki-kosten-zeile { margin: 0 0 16px; color: var(--text-3); font-size: var(--fs-ui); }
.ki-modelle-huelle .ki-raster { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 22rem), 1fr)); gap: 16px; }
.ki-modelle-huelle .ki-gruppe {
  display: flex; flex-direction: column; gap: 12px; padding: 16px 20px;
  border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--bg-card);
}
.ki-modelle-huelle .ki-gruppe-kopf { display: flex; gap: 12px; align-items: flex-start; }
.ki-modelle-huelle .ki-gruppe-icon {
  display: inline-flex; align-items: center; justify-content: center; flex: none;
  width: 44px; height: 44px; border-radius: var(--radius);
  background: color-mix(in srgb, var(--primary) 16%, transparent); color: var(--primary-text);
}
.ki-modelle-huelle .ki-gruppe-icon--bewerten { background: color-mix(in srgb, var(--purple) 18%, transparent); color: var(--purple); }
.ki-modelle-huelle .ki-gruppe-icon--einordnen { background: color-mix(in srgb, var(--success) 18%, transparent); color: var(--success); }
.ki-modelle-huelle .ki-gruppe-icon--recherche { background: color-mix(in srgb, var(--accent) 18%, transparent); color: var(--accent); }
.ki-modelle-huelle .ki-gruppe-icon--antworten { background: color-mix(in srgb, var(--warning) 18%, transparent); color: var(--warning); }
.ki-modelle-huelle .ki-gruppe-icon--leitplanken { background: var(--bg-card2); color: var(--text-1); }
.ki-modelle-huelle .ki-gruppe-titel { margin: 0; font-size: var(--fs-body); font-weight: 500; color: var(--text-1); }
.ki-modelle-huelle .ki-gruppe-text { margin: 4px 0 0; color: var(--text-2); font-size: var(--fs-ui); }
.ki-modelle-huelle .ki-gruppe-modell {
  display: flex; gap: 12px; align-items: center; justify-content: space-between;
  padding: 12px 16px; border-radius: var(--radius); background: var(--bg-card2);
}
.ki-modelle-huelle .ki-gruppe-modellname { font-weight: 600; color: var(--text-1); }
.ki-modelle-huelle .ki-gruppe-meta { margin-top: 4px; color: var(--text-2); font-size: var(--fs-meta); }
.ki-modelle-huelle .ki-chip {
  display: inline-flex; align-items: center; gap: 4px; flex: none; padding: 4px 10px;
  border-radius: 999px; background: var(--bg-hover); color: var(--text-1); font-size: var(--fs-meta); font-weight: 500;
}
.ki-modelle-huelle .ki-chip--auto { background: color-mix(in srgb, var(--success) 16%, transparent); }
.ki-modelle-huelle .ki-chip--auto .ic { color: var(--success); }
.ki-modelle-huelle .ki-chip--bisher { background: transparent; border: 1px dashed var(--border-light); color: var(--text-2); }
.ki-modelle-huelle .ki-stufen { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.ki-modelle-huelle .ki-stufe {
  display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 8px 4px;
  font: inherit; cursor: pointer; border: 1px solid var(--border-light); border-radius: var(--radius);
  background: var(--bg-input); color: var(--text-1);
}
.ki-modelle-huelle .ki-stufe:hover:not(:disabled) { background: var(--bg-hover); }
.ki-modelle-huelle .ki-stufe.ist-aktiv { border-color: var(--primary); box-shadow: inset 0 0 0 1px var(--primary); background: color-mix(in srgb, var(--primary) 14%, transparent); }
.ki-modelle-huelle .ki-stufe.ist-aktiv .ki-stufe-name { color: var(--primary-text); }
.ki-modelle-huelle .ki-stufe:disabled { cursor: not-allowed; opacity: .6; }
.ki-modelle-huelle .ki-stufe:focus-visible,
.ki-modelle-huelle .btn:focus-visible,
.ki-modelle-huelle input:focus-visible,
.ki-modelle-huelle select:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.ki-modelle-huelle .ki-stufe-name { font-size: var(--fs-body); font-weight: 500; }
.ki-modelle-huelle .ki-stufe-familie { font-size: var(--fs-meta); color: var(--text-2); }
.ki-modelle-huelle .ki-optionen { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.ki-modelle-huelle .ki-option { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-ui); color: var(--text-1); }
.ki-modelle-huelle .btn .ic { margin-right: 4px; vertical-align: -.125em; }
.ki-modelle-huelle .ki-bestaetigung {
  padding: 12px 16px; border-radius: var(--radius); border-left: 3px solid var(--primary);
  background: color-mix(in srgb, var(--primary) 12%, transparent);
}
.ki-modelle-huelle .ki-bestaetigung p { margin: 0 0 8px; font-size: var(--fs-body); color: var(--text-1); }
.ki-modelle-huelle .ki-bestaetigung-knoepfe { display: flex; gap: 8px; }
.ki-modelle-huelle .ki-gruppe-aufgaben { margin: 0; color: var(--text-2); font-size: var(--fs-ui); line-height: 1.5; }
.ki-modelle-huelle .ki-gruppe-aufgaben strong { color: var(--text-1); }
.ki-modelle-huelle .ki-gruppe-fuss {
  display: flex; align-items: center; justify-content: space-between; margin-top: auto;
  padding-top: 12px; border-top: 1px solid var(--border); color: var(--text-2); font-size: var(--fs-ui);
}
.ki-modelle-huelle .ki-leitplanken { border-style: dashed; background: transparent; }
.ki-modelle-huelle .ki-leitplanken-liste { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.ki-modelle-huelle .ki-leitplanken-liste li { display: flex; gap: 8px; align-items: flex-start; font-size: var(--fs-body); color: var(--text-1); }
.ki-modelle-huelle .ki-fussnote { margin: 16px 0 0; color: var(--text-3); font-size: var(--fs-meta); }
.ki-modelle-huelle .ki-zustand {
  display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin: 0 0 16px; padding: 12px 16px;
  border-radius: var(--radius); background: var(--bg-card2); color: var(--text-1); font-size: var(--fs-body);
}
.ki-modelle-huelle .ki-zustand--fehler { border-left: 3px solid var(--warning); }
.ki-modelle-huelle .ki-gruppe--laedt { min-height: 18rem; }
.ki-modelle-huelle .ki-platzhalter { border-radius: var(--radius); background: var(--bg-card2); }
.ki-modelle-huelle .ki-platzhalter--kopf { height: 44px; width: 70%; }
.ki-modelle-huelle .ki-platzhalter--box { height: 64px; }
.ki-modelle-huelle .ki-platzhalter--stufen { height: 48px; }
.ki-modelle-huelle .ki-dialog {
  margin: auto; width: min(52rem, calc(100vw - 2rem)); max-height: calc(100vh - 4rem); overflow: auto;
  padding: 22px 24px; border: 1px solid var(--border); border-radius: var(--radius-lg);
  background: var(--bg-card); color: var(--text-1); box-shadow: var(--shadow-lg);
}
.ki-modelle-huelle .ki-dialog::backdrop { background: rgba(0, 0, 0, .55); }
.ki-modelle-huelle .ki-dialog-kopf { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 12px; }
.ki-modelle-huelle .ki-dialog-titel { margin: 0; font-size: var(--fs-section); font-weight: 600; }
.ki-modelle-huelle .ki-dialog-unter { margin: 20px 0 8px; font-size: var(--fs-body); font-weight: 500; }
.ki-modelle-huelle .ki-dialog-tabelle { overflow-x: auto; }
.ki-modelle-huelle .ki-dialog select { font: inherit; font-size: var(--fs-ui); padding: 4px 8px; border: 1px solid var(--border-light); border-radius: var(--radius-sm); background: var(--bg-input); color: var(--text-1); }
.ki-modelle-huelle .ki-klein { color: var(--text-2); font-size: var(--fs-meta); }
.ki-modelle-huelle .ki-marke { margin-left: 4px; padding: 0 8px; border-radius: var(--radius-sm); background: color-mix(in srgb, var(--warning) 20%, transparent); font-size: var(--fs-meta); }
.ki-modelle-huelle .ki-protokoll { margin: 0; padding-left: 20px; color: var(--text-2); font-size: var(--fs-ui); display: flex; flex-direction: column; gap: 4px; }

/* ── PR1.428 (#665) — Neue KI-Modelle: Banner, Slot, Freigabe-Dialog (Kompass-Bild 8),
   klassische Shell. Gleiches Markup wie im Redesign. Keine Animation; Ziffern tabellarisch. */
.ki-modelle-huelle .ki-banner {
  display: flex; flex-wrap: wrap; gap: 12px 16px; align-items: center; margin: 0 0 16px; padding: 14px 20px;
  border: 1px solid color-mix(in srgb, var(--primary) 35%, var(--border)); border-radius: var(--radius-lg);
  background: color-mix(in srgb, var(--primary) 10%, var(--bg-card));
}
.ki-modelle-huelle .ki-banner-icon {
  display: inline-flex; align-items: center; justify-content: center; flex: none;
  width: 44px; height: 44px; border-radius: var(--radius); background: var(--primary); color: white;   /* wie .btn-primary */
}
.ki-modelle-huelle .ki-banner-text { flex: 1 1 18rem; min-width: 0; }
.ki-modelle-huelle .ki-banner-titel { margin: 0; font-weight: 600; color: var(--text-1); }
.ki-modelle-huelle .ki-banner-unter { margin: 2px 0 0; color: var(--text-2); font-size: var(--fs-ui); }
.ki-modelle-huelle .ki-slot {
  display: flex; flex-wrap: wrap; gap: 8px 10px; align-items: center; padding: 10px 14px;
  border-radius: var(--radius); background: color-mix(in srgb, var(--primary) 10%, transparent);
  color: var(--text-1); font-size: var(--fs-body);
}
.ki-modelle-huelle .ki-slot--fehler,
.ki-modelle-huelle .ki-slot--vorsicht { background: color-mix(in srgb, var(--warning) 14%, transparent); }
.ki-modelle-huelle .ki-slot--laeuft { background: var(--bg-card2); color: var(--text-2); }
.ki-modelle-huelle .ki-slot-text { flex: 1 1 12rem; min-width: 0; }
.ki-modelle-huelle .ki-slot-zahlen { display: inline-flex; gap: 6px; align-items: baseline; margin-left: 4px; color: var(--text-2); }
.ki-modelle-huelle .ki-zahl { font-variant-numeric: tabular-nums; font-weight: 600; color: var(--text-1); }
/* Zur Textfarbe hin gemischt: --warning allein kommt hell auf dem Warn-Grund nur auf 4.1:1,
   --success knapp auf 4.5:1. Die Mischung dunkelt im hellen und hellt im dunklen Theme auf. */
.ki-modelle-huelle .ki-zahl--gut { color: color-mix(in srgb, var(--success) 85%, var(--text-1)); }
.ki-modelle-huelle .ki-zahl--schlecht { color: color-mix(in srgb, var(--warning) 75%, var(--text-1)); }
.ki-modelle-huelle .ki-zahl--still { color: var(--text-3); }
.ki-modelle-huelle .ki-freigabe {
  margin: auto; padding: 0; width: min(46rem, calc(100vw - 2rem)); max-height: calc(100vh - 4rem); overflow: auto;
  border: 1px solid var(--border); border-radius: var(--radius-lg);
  background: var(--bg-card); color: var(--text-1); box-shadow: var(--shadow-lg);
}
.ki-modelle-huelle .ki-freigabe::backdrop { background: rgba(0, 0, 0, .55); }
.ki-modelle-huelle .ki-fz-kopf { display: flex; gap: 12px; align-items: flex-start; padding: 18px 24px; border-bottom: 1px solid var(--border); }
.ki-modelle-huelle .ki-fz-kopf > div { flex: 1 1 auto; min-width: 0; }
.ki-modelle-huelle .ki-fz-unter { margin: 2px 0 0; color: var(--text-2); font-size: var(--fs-body); }
.ki-modelle-huelle .ki-fz-rumpf { display: flex; flex-direction: column; gap: 16px; padding: 18px 24px; }
.ki-modelle-huelle .ki-fz-vergleich { display: grid; grid-template-columns: 1fr auto 1fr; gap: 12px; align-items: center; }
.ki-modelle-huelle .ki-fz-karte { padding: 12px 16px; border: 1px solid var(--border); border-radius: var(--radius); }
.ki-modelle-huelle .ki-fz-karte--neu { border-color: var(--primary); background: color-mix(in srgb, var(--primary) 8%, transparent); }
.ki-modelle-huelle .ki-fz-karte p { margin: 0; }
.ki-modelle-huelle .ki-fz-marke { font-size: var(--fs-label); font-weight: 500; color: var(--text-2); }
.ki-modelle-huelle .ki-fz-karte--neu .ki-fz-marke { color: var(--primary-text); }
.ki-modelle-huelle .ki-fz-modell { margin-top: 4px; font-size: var(--fs-section); font-weight: 600; }
.ki-modelle-huelle .ki-fz-seit { margin-top: 4px; color: var(--text-2); font-size: var(--fs-ui); }
.ki-modelle-huelle .ki-fz-pfeil { color: var(--text-2); display: inline-flex; }
.ki-modelle-huelle .ki-fz-tabelle { width: 100%; border-collapse: collapse; font-size: var(--fs-body); }
.ki-modelle-huelle .ki-fz-tabelle th,
.ki-modelle-huelle .ki-fz-tabelle td { padding: 10px 12px; border-bottom: 1px solid var(--border); text-align: left; font-weight: 400; vertical-align: top; }
.ki-modelle-huelle .ki-fz-tabelle thead th { font-size: var(--fs-label); font-weight: 500; color: var(--text-2); }
.ki-modelle-huelle .ki-fz-tabelle tbody th { text-transform: none; letter-spacing: normal; font-size: inherit; color: var(--text-1); }
.ki-modelle-huelle .ki-freigabe input, .ki-modelle-huelle .ki-option input { accent-color: var(--primary); }
.ki-modelle-huelle .ki-fz-tabelle .ki-num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.ki-modelle-huelle .ki-fz-tabelle .ic { vertical-align: -.125em; }
.ki-modelle-huelle .ki-fz-schlechter > * { background: color-mix(in srgb, var(--warning) 14%, transparent); }
.ki-modelle-huelle .ki-fz-lassen { display: flex; gap: 6px; align-items: center; margin-top: 4px; font-size: var(--fs-meta); color: var(--text-1); }
.ki-modelle-huelle .ki-fz-np th, .ki-modelle-huelle .ki-fz-np td,
.ki-modelle-huelle .ki-fz-rest th, .ki-modelle-huelle .ki-fz-rest td { color: var(--text-3); }
.ki-modelle-huelle .ki-empfehlung { display: flex; gap: 12px; align-items: center; padding: 12px 16px; border-radius: var(--radius); }
.ki-modelle-huelle .ki-empfehlung p { margin: 0; font-size: var(--fs-body); }
.ki-modelle-huelle .ki-empfehlung--ok { background: color-mix(in srgb, var(--success) 14%, transparent); }
.ki-modelle-huelle .ki-empfehlung--warn { background: color-mix(in srgb, var(--warning) 14%, transparent); }
.ki-modelle-huelle .ki-empfehlung-titel { font-weight: 600; }
.ki-modelle-huelle .ki-fz-modus { display: flex; flex-direction: column; gap: 8px; margin: 0; padding: 0; border: 0; }
.ki-modelle-huelle .ki-fz-option {
  display: flex; gap: 10px; align-items: flex-start; padding: 10px 14px; cursor: pointer;
  border: 1px solid var(--border); border-radius: var(--radius);
}
.ki-modelle-huelle .ki-fz-option.ist-aktiv { border-color: var(--primary); background: color-mix(in srgb, var(--primary) 8%, transparent); }
.ki-modelle-huelle .ki-fz-option input { margin-top: 3px; }
.ki-modelle-huelle .ki-fz-option-titel { display: block; font-size: var(--fs-body); }
.ki-modelle-huelle .ki-fz-option-text { display: block; color: var(--text-2); font-size: var(--fs-meta); }
.ki-modelle-huelle .ki-preis { display: flex; gap: 10px; align-items: flex-start; padding: 12px 16px; border-radius: var(--radius); border-left: 3px solid var(--warning); background: var(--bg-card2); }
.ki-modelle-huelle .ki-preis p { margin: 0; }
.ki-modelle-huelle .ki-preis-titel { font-weight: 500; font-size: var(--fs-body); }
.ki-modelle-huelle .ki-preis-ok { display: flex; gap: 6px; align-items: flex-start; margin-top: 6px; font-size: var(--fs-ui); }
.ki-modelle-huelle .ki-fz-liste { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 8px; }
.ki-modelle-huelle .ki-fz-liste li { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px; padding: 10px 14px; border-radius: var(--radius); background: var(--bg-card2); font-size: var(--fs-body); }
.ki-modelle-huelle .ki-fz-fuss { display: flex; justify-content: flex-end; gap: 8px; padding: 14px 24px; border-top: 1px solid var(--border); background: var(--bg-card2); }
.ki-modelle-huelle .ki-freigabe .btn:disabled { opacity: .5; cursor: not-allowed; }
.ki-modelle-huelle .ki-freigabe .btn:focus-visible,
.ki-modelle-huelle .ki-freigabe input:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.type-ki-modell .notification-icon { background: color-mix(in srgb, var(--primary) 16%, transparent); }
@media (max-width: 600px) {
  .ki-modelle-huelle .ki-fz-vergleich { grid-template-columns: 1fr; }
  .ki-modelle-huelle .ki-fz-pfeil { justify-self: center; transform: rotate(90deg); }
}

/* ═══════════════════════════════════════════════════════════
   PR1.425 (#662) — Beschreibung gegliedert (description-view.js, ein Markup fuer beide
   Shells; Redesign-Gegenstueck in style-redesign.css unter `.crm`). Blick-Kasten,
   Abschnitte mit Versal-Kopf, Kaertchen, Originaltext eingeklappt. Keine Bewegung.
   ═══════════════════════════════════════════════════════════ */
.desc-structured { display: flex; flex-direction: column; gap: 12px; font-size: var(--fs-body); line-height: 1.55; color: var(--text-1); white-space: normal; }
.desc-glance { padding: 10px 12px; border: 1px solid color-mix(in srgb, var(--accent) 35%, var(--border)); border-radius: var(--radius-sm); background: color-mix(in srgb, var(--accent) 8%, var(--bg-card)); }
.desc-glance-h, .desc-sec-h { display: flex; align-items: center; gap: 6px; margin: 0 0 6px; font-size: var(--fs-label); font-weight: 500; }
.desc-glance-h { color: var(--accent); }
.desc-sec-h { color: var(--text-2); }
.desc-glance ul, .desc-items { margin: 0; padding-left: 18px; }
.desc-glance li + li, .desc-items li + li { margin-top: 4px; }
.desc-items li::marker { color: var(--accent); }
.desc-sec { padding-top: 10px; border-top: 1px solid var(--border); }
.desc-sec-text { margin: 0; max-width: 75ch; }
.desc-sec-text + .desc-items { margin-top: 6px; }
.desc-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.desc-chip { display: inline-flex; align-items: center; padding: 2px 9px; border: 1px solid transparent; border-radius: var(--radius-sm); font-size: var(--fs-meta); font-weight: 500; }
.desc-chip-tech { background: var(--bg-card2); color: var(--text-1); }
.desc-chip-must { background: color-mix(in srgb, var(--accent) 14%, var(--bg-card)); color: var(--text-1); border-color: color-mix(in srgb, var(--accent) 40%, transparent); }
.desc-chip-nice { border-style: dashed; border-color: var(--text-3); color: var(--text-2); }
.desc-more { margin-top: 4px; }
.desc-more > summary, .desc-original > summary { cursor: pointer; list-style: none; border-radius: 4px; }
.desc-more > summary::-webkit-details-marker, .desc-original > summary::-webkit-details-marker { display: none; }
.desc-more > summary { color: var(--accent); font-weight: 500; font-size: var(--fs-ui); }
.desc-more[open] > summary { display: none; }
.desc-original > summary { display: inline-flex; align-items: center; gap: 4px; font-size: var(--fs-meta); color: var(--text-3); }
.desc-original > summary:hover, .desc-more > summary:hover { text-decoration: underline; }
.desc-original[open] > summary .ic { transform: rotate(180deg); }
.desc-original-text { margin-top: 8px; padding: 10px 12px; border-radius: var(--radius-sm); background: var(--bg-base); }
.desc-more > summary:focus-visible, .desc-original > summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.desc-pending { display: flex; align-items: center; gap: 6px; margin: 0 0 6px; font-size: var(--fs-meta); color: var(--text-3); }
.proj-description { max-width: 960px; font-size: var(--fs-body); color: var(--text-2); }

/* ═══════════════════════════════════════════════════════════
   PR1.449 (#693) — Textbausteine Stil A (description-view.js, ein Markup fuer beide
   Shells; Redesign-Gegenstueck in style-redesign.css unter `.crm`). Abschnittskopf mit
   Farbkachel, Leitsatz, nummerierte Liste, Faktenkacheln, KI-Herkunftsband. Farben aus
   den Zustands-Tokens beider Themes, Flaechen per color-mix. Keine Bewegung.
   ═══════════════════════════════════════════════════════════ */
.txb-stack { display: flex; flex-direction: column; gap: 16px; white-space: normal; }
.txb-stack > * + .txb-sec, .txb-stack > * + .desc-mount { padding-top: 16px; border-top: 1px solid var(--border); }
.txb-h { display: flex; align-items: center; gap: 12px; margin: 0 0 8px; }
.txb-tile { flex: none; display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: var(--radius-sm); text-transform: none; }
.txb-blue { background: color-mix(in srgb, var(--info) 16%, var(--bg-card)); color: var(--info); }
.txb-green { background: color-mix(in srgb, var(--success) 16%, var(--bg-card)); color: var(--success); }
.txb-orange { background: color-mix(in srgb, var(--warning) 16%, var(--bg-card)); color: var(--warning); }
.txb-violet { background: color-mix(in srgb, var(--purple) 16%, var(--bg-card)); color: var(--purple); }
.txb-t { margin: 0; font-family: 'Fira Sans Condensed', 'Fira Sans', system-ui, sans-serif; font-size: var(--fs-ui); font-weight: 500; color: var(--text-1); }
.txb-meta { margin-left: auto; font-size: var(--fs-meta); color: var(--text-3); }
.desc-sec-h { gap: 12px; font-family: 'Fira Sans Condensed', 'Fira Sans', system-ui, sans-serif; font-size: var(--fs-ui); letter-spacing: .06em; color: var(--text-1); }
.txb-body { padding-left: 40px; }
.txb-lead { margin: 0 0 4px; max-width: 72ch; font-size: var(--fs-body); font-weight: 500; line-height: 1.5; color: var(--text-1); }
.txb-lead-s { font-size: var(--fs-body); }
.txb-body .markdown-light, .txb-text { max-width: 72ch; font-size: var(--fs-body); line-height: 1.6; color: var(--text-2); }
.txb-body .markdown-light .txb-lead { color: var(--text-1); }
p.txb-text { margin: 0 0 8px; }
.txb-sub { margin: 12px 0 4px; font-size: var(--fs-meta); font-weight: 500; color: var(--text-2); }
.txb-sub:first-child { margin-top: 0; }
.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); }
.txb-steps li { counter-increment: txb-step; display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 12px; padding: 7px 0; border-top: 1px dashed var(--border); }
.txb-steps li:first-child { border-top: 0; padding-top: 0; }
.txb-steps li + li { margin-top: 0; }
.txb-steps li::before { content: counter(txb-step); display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: color-mix(in srgb, var(--success) 16%, var(--bg-card)); color: var(--success); font-size: var(--fs-meta); font-weight: 500; font-variant-numeric: tabular-nums; }
.txb-more { margin-top: 4px; }
.txb-more > summary { display: inline-flex; align-items: center; gap: 4px; }
.txb-more > ol { border-top: 1px dashed var(--border); padding-top: 7px; }
.txb-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 8px; }
.txb-fact { display: flex; flex-direction: column; gap: 2px; padding: 8px 12px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--bg-card2); min-width: 0; }
.txb-fact-k { font-size: var(--fs-label); color: var(--text-3); }
.txb-fact-v { display: flex; align-items: center; gap: 6px; font-size: var(--fs-body); font-weight: 500; color: var(--text-1); overflow-wrap: anywhere; }
.txb-fact-v.txb-ja { color: var(--success); }
.txb-fact-v.txb-ja .ic { color: inherit; }
.txb-fact-v.txb-nein { color: var(--text-2); }
.txb-fact-n { font-size: var(--fs-label); color: var(--text-3); }
.txb-rest { margin-top: 12px; padding-left: 12px; border-left: 3px solid var(--border-light); font-size: var(--fs-body); }
.txb-prov { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; padding: 8px 12px; border-radius: var(--radius-sm); background: linear-gradient(90deg, color-mix(in srgb, var(--purple) 14%, var(--bg-card)), transparent 70%); font-size: var(--fs-meta); color: var(--text-2); }
.txb-prov .txb-tile { width: 24px; height: 24px; }
.txb-prov b { color: var(--text-1); font-weight: 600; }
.txb-prov-sicher { display: inline-flex; align-items: center; gap: 8px; }
.txb-meter { display: inline-block; width: 72px; height: 6px; border-radius: 3px; background: var(--bg-card2); overflow: hidden; }
.txb-meter > i { display: block; height: 100%; background: var(--purple); }
.txb-prov-fehlt { margin-left: auto; display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px; }
.txb-miss { padding: 0 6px; border: 1px dashed var(--border-light); border-radius: 4px; background: var(--bg-card); font-size: var(--fs-label); color: var(--text-2); }
.opp-card-sub { margin: -4px 0 10px; font-size: var(--fs-meta); color: var(--text-3); }
.opp-req-fill { padding: 0; border: 0; background: none; font: inherit; color: var(--accent); text-decoration: underline; cursor: pointer; }
.txb-more > summary:focus-visible, .opp-req-fill:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }
@media (max-width: 640px) {
  .txb-body { padding-left: 0; }
  .txb-prov-fehlt { margin-left: 0; }
}
/* PR1.449 Ende */

/* PR1.450 (#694) — Projekt: Lage-Kopf Stil A (Marke + Leitsatz vor den fuenf Bereichen),
   Beschreibungskarte oben in der Mitte. Gleiche Bausteine wie PR1.449, keine Bewegung. */
.psr-head .txb-h { flex: 1; margin: 0; min-width: 0; }
.psr-head h3.txb-t { font-size: var(--fs-ui); }
.psr-head .txb-meta { white-space: normal; }
.txb-lage { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 10px; margin: 2px 0 10px; }
.txb-lage .txb-lead { flex: 1 1 14rem; margin: 0; }
.txb-mark { flex: none; padding: 2px 10px; border-radius: 999px; font-size: var(--fs-ui); font-weight: 500; line-height: 1.5; }
.txb-mark-ok { background: color-mix(in srgb, var(--success) 16%, var(--bg-card)); color: var(--success); }
.txb-mark-warn { background: color-mix(in srgb, var(--warning) 18%, var(--bg-card)); color: color-mix(in srgb, var(--warning) 45%, var(--text-1)); }
.txb-mark-bad { background: color-mix(in srgb, var(--danger) 16%, var(--bg-card)); color: var(--danger); }
.txb-mark-neutral { background: var(--bg-card2); color: var(--text-2); }
.proj-col-middle .proj-desc-card { margin-bottom: 14px; }
.proj-empty-text { margin: 0; font-size: var(--fs-body); color: var(--text-3); }
/* PR1.450 Ende */

/* ═══════════════════════════════════════════════════════════════════════════
   PR1.440 (#682) — Mitarbeiter-Detail: Profil als Steckbrief (beide Shells).
   Prefix `esb-`. Geteiltes Bauteil aus components/employee-profile-sections.js;
   Belegfarben aus den clsf-level-*-Regeln oben (eine Farbsprache mit dem Report).
   Nur kanonische Tokens, Flächen per color-mix — trägt hell und dunkel.
   Keine Animation: täglich genutzte Ansicht.
   ═══════════════════════════════════════════════════════════════════════════ */
.emp-tab-btn:focus-visible { outline: 2px solid var(--primary); outline-offset: -2px; border-radius: 4px; }
.emp-steckbrief { display: flex; flex-direction: column; }
.esb-section { padding: 18px 0; border-top: 1px solid var(--border); scroll-margin-top: 12px; }
.esb-section:first-child { border-top: none; padding-top: 4px; }
.esb-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 10px; }
.esb-head h3 { margin: 0; font-size: var(--fs-body); font-weight: 600; color: var(--text-1); }
.esb-meta { font-size: var(--fs-ui); color: var(--text-3); }
/* PR1.476 #732 — Zertifikats-Kopf: Zahl · Kurzbilanz · Sprung in den Reiter. */
.esb-head-aside { display: inline-flex; align-items: baseline; gap: 4px 12px; flex-wrap: wrap; justify-content: flex-end; }
.esb-head-aside [data-cert-summary]:empty { display: none; }
.esb-link {
  padding: 2px 4px; border: 0; border-radius: 4px; background: none;
  color: var(--pr476-link, var(--text-2)); font: inherit; font-size: var(--fs-body); font-weight: 500; cursor: pointer;
}
.esb-link:hover { text-decoration: underline; text-underline-offset: 2px; }
.esb-link:focus-visible { outline: 2px solid var(--pr476-link, currentColor); outline-offset: 1px; }
.cert-load-error { margin: 10px 0 0; font-size: var(--fs-body); color: var(--text-2); }
.esb-ki { display: inline-flex; align-items: center; gap: 4px; font-size: var(--fs-ui); font-weight: 500; color: var(--accent, var(--primary)); }
.esb-hs-main { display: inline-flex; align-items: center; gap: 6px; }

/* Zustände: leer / lädt / Fehler */
.esb-state { font-size: var(--fs-body); color: var(--text-3); }
.esb-state p { margin: 0 0 8px; line-height: 1.5; }
.esb-state--error { color: var(--text-2); }
.esb-state--error p { color: var(--warning); }
.esb-state--loading { display: flex; flex-direction: column; gap: 8px; }
.esb-skel { display: block; height: 14px; border-radius: 4px; background: color-mix(in srgb, var(--text-3) 16%, transparent); }
.esb-skel:nth-child(2) { width: 82%; }
.esb-skel:nth-child(3) { width: 64%; }

/* Kurzprofil */
.esb-kv { display: grid; grid-template-columns: minmax(96px, max-content) 1fr; gap: 6px 18px; margin: 0; font-size: var(--fs-body); }
.esb-kv dt { color: var(--text-3); }
.esb-kv dd { margin: 0; color: var(--text-1); line-height: 1.5; }
.esb-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.esb-tag { display: inline-block; padding: 3px 9px; border-radius: 6px; font-size: var(--fs-ui); color: var(--text-2); background: var(--bg-card2); border: 1px solid var(--border); }

/* Portfolio-Schwerpunkte */
.esb-focus-list { display: flex; flex-direction: column; }
.esb-focus-row { border-top: 1px solid color-mix(in srgb, var(--border) 70%, transparent); }
.esb-focus-row:first-child { border-top: none; }
.clsf-quote-btn.esb-focus-btn {
  display: flex; align-items: center; gap: 12px; width: 100%;
  padding: 9px 4px; border: none; border-radius: 4px; background: none;
  font-size: var(--fs-body); color: var(--text-1); text-align: left; cursor: pointer;
}
.clsf-quote-btn.esb-focus-btn:hover, .clsf-quote-btn.esb-focus-btn.active { background: var(--bg-hover); }
.clsf-quote-btn.esb-focus-btn:focus-visible { outline: 2px solid var(--primary); outline-offset: -2px; }
.esb-focus-name { flex: 1 1 auto; min-width: 0; font-weight: 600; }
.esb-focus-count { flex: 0 0 auto; font-size: var(--fs-ui); color: var(--text-3); }
.esb-chip { display: inline-flex; gap: 4px; align-items: center; flex: 0 0 auto; }
/* Schriftfarbe der Schilder zur Textfarbe hin gemischt: hell dunkler, dunkel heller —
   die reinen Signalfarben lagen auf der getönten Fläche knapp unter 4,5:1 (axe). */
.esb-chip.clsf-level-projekt { color: color-mix(in srgb, var(--success) 70%, var(--text-1)); }
.esb-chip.clsf-level-zertifikat { color: color-mix(in srgb, var(--info) 65%, var(--text-1)); }
.esb-focus-row + .clsf-quotes, .esb-focus-more .clsf-quotes { margin-left: 4px; }
.esb-focus-more { margin-top: 6px; border-radius: 6px; background: var(--bg-card2); }
.esb-focus-more > summary { padding: 8px 10px; font-size: var(--fs-ui); color: var(--text-2); cursor: pointer; }
.esb-focus-more > summary:focus-visible { outline: 2px solid var(--primary); outline-offset: -2px; border-radius: 6px; }
.esb-focus-more[open] > summary { border-bottom: 1px solid var(--border); }
.esb-focus-more .esb-focus-row { padding: 0 6px; }
.esb-focus-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-top: 12px; }
.esb-actions { display: inline-flex; gap: 6px; flex-wrap: wrap; }
.esb-focus .clsf-progress-host { margin-top: 10px; }

/* Messbalken (Skills) */
.esb-meter { display: inline-flex; gap: 3px; }
.esb-meter i { display: block; width: 18px; height: 6px; border-radius: 2px; background: color-mix(in srgb, var(--text-3) 22%, transparent); }
.esb-meter i.on { background: var(--primary-dark, var(--primary)); }
.esb-meter--6 i { width: 9px; }

/* Zertifikate (schlicht — Badges folgen in PR1.442) */
.emp-cert-list, .esb-cert-list { display: flex; flex-direction: column; gap: 8px; }

/* Skills nach Themen */
.esb-skill-groups { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 18px 28px; }
.esb-skill-group h4 { margin: 0 0 6px; font-size: var(--fs-ui); font-weight: 600; color: var(--text-2); }
.esb-skill-group ul { list-style: none; margin: 0; padding: 0; }
.esb-skill-group li { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 4px 0; font-size: var(--fs-body); color: var(--text-1); }
.esb-skill-name small { font-size: var(--fs-meta); color: var(--text-3); margin-left: 4px; }

/* Sprachen als Kacheln */
.esb-tiles { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 8px; }
.esb-tiles li { display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; border-radius: 6px; background: var(--bg-card2); }
.esb-tiles b { font-size: var(--fs-body); color: var(--text-1); }
.esb-tiles span { font-size: var(--fs-ui); color: var(--text-3); }

/* Ausbildung */
.esb-edu { margin: 0; padding-left: 18px; font-size: var(--fs-body); color: var(--text-1); line-height: 1.6; }

@media (max-width: 640px) {
  .esb-kv { grid-template-columns: 1fr; gap: 2px; }
  .esb-kv dd { margin-bottom: 6px; }
  .clsf-quote-btn.esb-focus-btn { flex-wrap: wrap; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   PR1.445 (#687) — MA-Detail, linke Spalte: KI-Kurzprofil + „Auf einen Blick"
   (beide Shells). Markup aus components/employee-kurzprofil-model.js.
   Kopf Stil A (`tb-`, Kachel 28 px) — PR1.449 (#693) übernimmt ihn als geteilten
   Textbaustein. Eigene Komponenten-Tokens, weil die Shells ihr Theme verschieden
   schalten: klassisch dunkel per Default + [data-theme="light"], Redesign hell per
   Default + html[data-theme="dark"] .crm. Kontraste ≥ 4.5:1 auf Kartengrund.
   Keine Animation: täglich genutzte Ansicht.
   ═══════════════════════════════════════════════════════════════════════════ */
.kp, .aeb, .org-grid {
  --kp-ki: #B9A8FF;          /* Violett, dunkel */
  --kp-ok: #6EE7A0;
  --kp-bad: #FCA5A5;
  --kp-blue: #8CC8FF;
  --kp-tile-bg: color-mix(in srgb, #3B9BE8 22%, transparent);
  --kp-tag-bg: color-mix(in srgb, var(--text-3) 18%, transparent);
  --kp-line: rgba(255,255,255,.08);
  --kp-seg-ok: #4ADE80;
  --kp-seg-bad: #F0A0A0;
  --kp-seg-none: #64748B;
}
[data-theme="light"] .kp, [data-theme="light"] .aeb, [data-theme="light"] .org-grid,
.crm .kp, .crm .aeb, .crm .org-grid {
  --kp-ki: #5A38C9;
  --kp-ok: #3F6F00;
  --kp-bad: #B4232A;
  --kp-blue: #005AA3;
  --kp-tile-bg: #E6F1FB;
  --kp-tag-bg: #EEF1F5;
  --kp-line: #E3E8EF;
  --kp-seg-ok: #2E7D1F;
  --kp-seg-bad: #E3A39F;
  --kp-seg-none: #D5DBE3;
}
html[data-theme="dark"] .crm .kp, html[data-theme="dark"] .crm .aeb, html[data-theme="dark"] .crm .org-grid {
  --kp-ki: #B9A8FF;
  --kp-ok: #6EE7A0;
  --kp-bad: #FCA5A5;
  --kp-blue: #8CC8FF;
  --kp-tile-bg: color-mix(in srgb, #3B9BE8 22%, transparent);
  --kp-tag-bg: color-mix(in srgb, var(--text-3) 18%, transparent);
  --kp-line: rgba(255,255,255,.08);
  --kp-seg-ok: #4ADE80;
  --kp-seg-bad: #F0A0A0;
  --kp-seg-none: #64748B;
}

.tb-head { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; min-width: 0; }
.tb-tile {
  flex: 0 0 28px; width: 28px; height: 28px; border-radius: 6px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--kp-tile-bg); color: var(--kp-blue);
}
.tb-title {
  margin: 0; flex: 1 1 auto; min-width: 0;
  font-size: var(--fs-body); font-weight: 600;
  color: var(--text-1);
}
.tb-meta { display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: flex-end; font-size: var(--fs-ui); color: var(--text-3); }

.kp-ki { display: inline-flex; align-items: center; gap: 4px; font-weight: 600; color: var(--kp-ki); white-space: nowrap; }
.kp-hand { white-space: nowrap; }
.kp-redo {
  display: inline-flex; align-items: center; gap: 4px; padding: 2px 4px; border: 0; border-radius: 4px;
  background: none; color: var(--kp-blue); font: inherit; font-size: var(--fs-ui); font-weight: 500; cursor: pointer;
}
.kp-redo:hover { text-decoration: underline; }
.kp-redo:focus-visible { outline: 2px solid var(--kp-blue); outline-offset: 1px; }
.kp-redo[disabled] { color: var(--text-3); cursor: default; text-decoration: none; }

.kp-lead { margin: 0 0 14px; font-size: var(--fs-title); font-weight: 600; line-height: 1.35; color: var(--text-1); max-width: 60ch; text-wrap: pretty; }
/* PR1.520 — festes Raster Etikett 120 px / Inhalt; nichts wird abgeschnitten, Chips brechen um. */
.kp-grid { display: flex; flex-direction: column; gap: 10px; margin: 0; font-size: var(--fs-body); line-height: 1.45; }
.kp-row { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 12px; align-items: start; }
.kp-row dt { color: var(--text-3); padding-top: 4px; }
.kp-row dd { margin: 0; min-width: 0; color: var(--text-1); overflow-wrap: break-word; }
.kp-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.kp-chip {
  display: inline-flex; align-items: center; gap: 6px; max-width: 100%;
  padding: 3px 10px; border: 1px solid var(--kp-line); border-radius: 6px;
  font-size: var(--fs-ui); font-weight: 500; color: var(--text-1); background: transparent;
  overflow-wrap: break-word;
}
.kp-chip--lead { background: var(--kp-tile-bg); border-color: transparent; color: var(--kp-blue); }
.kp-chip--sm { padding: 2px 8px; font-size: var(--fs-ui); border-color: transparent; background: var(--kp-tag-bg); }
.kp-chip--sm.kp-chip--lead { background: var(--kp-tile-bg); }
.kp-chip--cust, .kp-chip--cert { font-weight: 500; }
.kp-chip--cert b { font-weight: 600; }
.kp-logo { flex: 0 0 auto; border-radius: 4px; }
.kp-text { color: var(--text-2); }
.kp-foot {
  display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap;
  margin-top: 14px; padding-top: 10px; border-top: 1px solid var(--kp-line);
  font-size: var(--fs-ui); color: var(--text-3);
}
.kp-hand-text { margin: 0; font-size: var(--fs-body); line-height: 1.55; color: var(--text-2); white-space: pre-line; }
.kp-error { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin: 10px 0 0; font-size: var(--fs-ui); color: var(--kp-bad); }
.kp--wide .kp-lead { max-width: 72ch; }

/* PR1.520 — Organisation: Etikett 132 px / Wert linksbündig, 1px-Trenner, lange Werte brechen um. */
.org-grid { display: flex; flex-direction: column; margin: 0; font-size: var(--fs-body); }
.org-row { display: grid; grid-template-columns: 132px minmax(0, 1fr); gap: 12px; align-items: baseline; padding: 7px 0; border-bottom: 1px solid var(--kp-line); }
.org-row:last-child { border-bottom: 0; }
.org-row .lbl { color: var(--text-3); }
.org-row .val { margin: 0; min-width: 0; color: var(--text-1); font-weight: 600; text-align: left; overflow-wrap: anywhere; }
.org-row .val.is-empty { color: var(--text-3); font-weight: 400; }
.org-row .val--copy { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.org-copy-text { min-width: 0; overflow-wrap: anywhere; }
.org-copy {
  display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px;
  padding: 0; border: 0; border-radius: 4px; background: none; color: var(--text-3); cursor: pointer;
}
.org-copy:hover { color: var(--kp-blue); background: var(--kp-tag-bg); }
.org-copy:focus-visible { outline: 2px solid var(--kp-blue); outline-offset: 1px; }
.org-copy-status { font-size: var(--fs-ui); font-weight: 500; color: var(--kp-ok); }
.org-copy-status.is-error { color: var(--kp-bad); }
.org-empty { margin: 0; font-size: var(--fs-body); color: var(--text-3); }

/* „Auf einen Blick": dasselbe Raster wie das Kurzprofil, Zertifikate als dreiteiliger Balken. */
.aeb { display: flex; flex-direction: column; gap: 12px; margin: 0; font-size: var(--fs-body); }
.aeb-row { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 12px; align-items: start; }
.aeb-row dt { color: var(--text-3); padding-top: 2px; }
.aeb-row dd { margin: 0; text-align: left; color: var(--text-1); min-width: 0; overflow-wrap: anywhere; }
.aeb-row--cert { grid-template-columns: minmax(0, 1fr) auto; row-gap: 6px; }
.aeb-row--cert dd { display: contents; }
.aeb-total { grid-column: 2; grid-row: 1; font-weight: 600; color: var(--text-1); }
.aeb-bar { grid-column: 1 / -1; display: flex; gap: 2px; height: 6px; border-radius: 3px; overflow: hidden; }
.aeb-seg { display: block; min-width: 4px; }
.aeb-seg--ok { background: var(--kp-seg-ok); }
.aeb-seg--bad { background: var(--kp-seg-bad); }
.aeb-seg--none { background: var(--kp-seg-none); }
.aeb-legend { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: var(--fs-ui); color: var(--text-2); }
.aeb-key { display: inline-flex; align-items: center; gap: 6px; }
.aeb-key::before { content: ""; width: 8px; height: 8px; border-radius: 2px; background: var(--kp-seg-none); }
.aeb-key--ok::before { background: var(--kp-seg-ok); }
.aeb-key--bad::before { background: var(--kp-seg-bad); }
.aeb-cust { display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; }
/* Ausbildung aus dem Lebenslauf kann lang sein: höchstens zwei Zeilen, voller Text im Tooltip. */
.aeb-row dd [data-aeb-ausbildung] { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.aeb-empty { margin: 0; font-size: var(--fs-body); color: var(--text-3); }
.aeb-muted { color: var(--text-3); }

/* Die linke Spalte ist in beiden Shells nur 240–320 px breit: dort steht das Etikett über
   dem Inhalt (gleiche Ordnung, kein gequetschtes Zweispalten-Raster). Ab 420 px Kartenbreite
   (eine Spalte auf schmalen Fenstern, Profil-Reiter) gilt das Raster Etikett / Inhalt. */
.kp, .org-grid, .aeb { container-type: inline-size; }
@container (max-width: 419px) {
  .kp-lead { font-size: var(--fs-section); margin-bottom: 12px; }
  .kp-row, .aeb-row:not(.aeb-row--cert) { grid-template-columns: minmax(0, 1fr); gap: 4px; }
  .kp-row dt, .aeb-row dt { padding-top: 0; font-size: var(--fs-ui); }
  .org-row { grid-template-columns: minmax(0, 1fr); gap: 1px; padding: 6px 0; }
  .org-row .lbl { font-size: var(--fs-ui); }
}
   PR1.438 (#677) — Masken und Auswahllisten, Etappe 1
   Shared by both shells; style-redesign.css only maps tokens inside .crm.
   No transition/animation on purpose: these lists open dozens of times a day.
   ═══════════════════════════════════════════════════════════════════════════ */

/* Small live hint inside a label ("(errechnet)", end-date mode …) — was inline style. */
.label-hint {
  margin-left: 6px;
  font-size: var(--fs-meta);
  font-weight: 400;
  color: var(--text-2);
}

/* Checkbox cell inside the 6-column grid: sits on the field baseline like its neighbours. */
.form-grid-6 > .form-group-check {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

/* Abrechnungsmodell: radio points stacked, one sentence each (template "Auswahlpunkte"). */
.order-billing.is-stacked .order-billing-row {
  flex-direction: column;
  gap: 8px;
}
.order-billing.is-stacked .order-billing-opt {
  align-items: center;
  gap: 10px;
  min-height: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--text-1);
  font-weight: 500;
}
.order-billing.is-stacked .order-billing-opt input[type="radio"] {
  position: static;
  width: 1rem;
  height: 1rem;
  margin: 0;
  opacity: 1;
  pointer-events: auto;
  accent-color: var(--primary);
  flex: 0 0 auto;
}
.order-billing.is-stacked .order-billing-opt:has(input:checked) {
  background: transparent;
  font-weight: 600;
}
.order-billing.is-stacked .order-billing-opt:has(input:focus-visible) { outline: 0; }
.order-billing.is-stacked .order-billing-opt input:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
/* The sentence sits outside the <label> (aria-describedby), indented under the option text. */
.order-billing-desc {
  display: block;
  margin: 2px 0 0 26px;
  font-size: var(--fs-meta);
  font-weight: 400;
  color: var(--text-2);
}

/* Multiselect additions: field height, "+N" chip, footer, read-only. */
.form-group .ms-input { min-height: 2.375rem; }
.ms-chip-more {
  border: 1px solid var(--border);
  background: var(--bg-input);
  color: var(--text-2);
  font: inherit;
  font-size: var(--fs-meta);
  font-weight: 500;
  cursor: pointer;
}
.ms-chip-more:focus-visible { outline: 2px solid var(--primary); outline-offset: 1px; }
.ms-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 12px;
  border-top: 1px solid var(--border);
  font-size: var(--fs-meta);
  color: var(--text-2);
}
.ms-clear-all {
  border: 0;
  background: none;
  padding: 0;
  color: var(--primary-text, var(--primary));
  font: inherit;
  font-weight: 600;
  text-decoration: underline;
  cursor: pointer;
}
.ms-clear-all:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.ms.is-readonly .ms-input { border-style: dashed; color: var(--text-1); opacity: 1; }
/* Second line + initials in multiselect options (customer picker). */
.ms-option-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 50%;
  background: var(--bg-hover);
  color: var(--text-2);
  font-size: var(--fs-label);
  font-weight: 500;
}
.ms-option-meta {
  display: block;
  font-size: var(--fs-meta);
  font-weight: 400;
  color: var(--text-2);
}

/* ============================================================
   PR1.438 — Einzelauswahl-Baustein (crm-select.js)
   ============================================================
   Das native <select> bleibt Datentraeger und wird nur visuell versteckt.
   Davor steht das Feld (.cs-field) bzw. die Knopfleiste (.cs-segment).
   Die Liste (.cs-pop) liegt im Host, wird aber per JS mit position:fixed
   ueber das Feld gelegt (positionPopover) — so schneidet kein overflow
   eines Dialogs sie ab. Kein transition/animation (Konvention 22). */
/* `.form-group select` (width:100%, padding, min-height) is more specific than one class —
   the doubled class wins without !important, so the carrier never widens the page. */
.cs-native.cs-native {
  position: absolute;
  width: 1px;
  height: 1px;
  min-height: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  margin: 0;
  padding: 0;
  border: 0;
}

.cs { position: relative; min-width: 0; }
.cs-control { position: relative; display: flex; align-items: center; }
/* PR1.453 — table cell (`data-auswahl-zelle`): row height of the neighbouring cell inputs. */
.cs--zelle .cs-field { height: 2rem; padding-left: 8px; font-size: var(--fs-body); }
.cs--zelle .cs-seg { min-height: 2rem; padding-block: 0; font-size: var(--fs-body); }
/* PR1.453 — carrier flagged by the caller (aria-invalid / pflichtfeld-warn). */
.cs.is-invalid .cs-field,
.cs.is-invalid .cs-segment { border-color: var(--danger); }

.cs-field {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  height: 2.375rem;
  padding: 0 32px 0 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg-input);
  color: var(--text-1);
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.cs-field:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 1px;
}
.cs-value {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.cs-field.is-placeholder .cs-value { color: var(--text-3); }
/* PR1.454 (E3) — compact variant for filter bars and toolbars: same height as the neighbouring
   small buttons, width follows the value (one line, no wrap), popover keeps its 240px minimum. */
.cs--kompakt {
  display: inline-block;
  flex: 0 0 auto;
  width: auto;
  min-width: 8rem;
  max-width: 16rem;
  vertical-align: middle;
}
.cs--kompakt .cs-field {
  height: 2rem;
  padding: 0 28px 0 10px;
  font-size: var(--fs-ui);
}
.cs--kompakt .cs-chevron { right: 10px; }
.cs--kompakt .cs-clear { display: none; }
/* Inline-Edit: the field fills the cell, the list floats above the table (position: fixed). */
td .cs--inline { width: 100%; min-width: 6rem; }
td .cs--inline .cs-field { height: 1.875rem; font-size: var(--fs-body); }
/* Query builder: "is one of" uses the multi list instead of a native multiple select. */
.qb-value-multi { flex: 1; min-width: 180px; }
.cs-chevron {
  position: absolute;
  right: 12px;
  top: 50%;
  width: 7px;
  height: 7px;
  margin-top: -5px;
  border-right: 1.5px solid var(--text-2);
  border-bottom: 1.5px solid var(--text-2);
  transform: rotate(45deg);
  pointer-events: none;
}
.cs-field[aria-expanded="true"] .cs-chevron { transform: rotate(225deg); margin-top: -1px; }

/* Mit Leeren-Knopf braucht das Feld rechts Platz fuer beide. */
.cs-control:has(.cs-clear:not([hidden])) .cs-field { padding-right: 60px; }
.cs-clear {
  position: absolute;
  right: 30px;
  top: 50%;
  width: 24px;
  height: 24px;
  margin-top: -12px;
  padding: 0;
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--text-2);
  font-size: var(--fs-body);
  line-height: 1;
  cursor: pointer;
}
.cs-clear:hover { background: var(--bg-hover); color: var(--text-1); }
.cs-clear:focus-visible { outline: 2px solid var(--primary); outline-offset: 1px; }

/* Popover: Flaeche + Suchleiste + scrollende Liste. Die Liste selbst (.cs-list)
   ist der listbox-Knoten; das Suchfeld darf nicht in ihr stehen (ARIA). */
.cs-pop {
  /* PR1.454 — fixed from the first frame: in flow, the list would grow a table row for one
     measurement, the centred cell content would shift and the list would land on the field. */
  position: fixed;
  z-index: var(--z-popover, 1100);
  display: flex;
  flex-direction: column;
  padding: 4px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg-card);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}
.cs-pop[hidden] { display: none; }
.cs-list { overflow: auto; min-height: 0; flex: 1 1 auto; }

.cs-searchbar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 2px 2px 6px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 4px;
}
.cs-search {
  flex: 1;
  min-width: 0;
  height: 2rem;
  padding: 0 8px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg-input);
  color: var(--text-1);
  font: inherit;
}
.cs-search:focus-visible { outline: 2px solid var(--primary); outline-offset: 1px; }
.cs-count { flex: none; font-size: var(--fs-meta); color: var(--text-3); white-space: nowrap; }

.cs-option {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 2.25rem;
  padding: 6px 10px 6px 12px;
  border-radius: var(--radius-sm);
  color: var(--text-1);
  cursor: pointer;
}
.cs-option:hover { background: var(--bg-hover); }
.cs-option.is-active {
  background: var(--bg-hover);
  box-shadow: inset 2px 0 0 var(--primary);
}
.cs-option[aria-selected="true"] { font-weight: 600; }
.cs-option[aria-disabled="true"] { color: var(--text-3); cursor: not-allowed; }
.cs-option[aria-disabled="true"]:hover { background: transparent; }

.cs-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.cs-text .cs-label { flex: none; }
.cs-text { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.cs-code {
  flex: none;
  width: 3ch;
  font-size: var(--fs-meta);
  font-weight: 400;
  color: var(--text-3);
}
.cs-meta { font-size: var(--fs-meta); font-weight: 400; color: var(--text-3); }
/* PR1.453 — one line in narrow lists (Redesign panel); the full text stays in the option. */
.cs-text .cs-meta { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Auf dem Hover-Grund reicht --text-3 nicht fuer 4.5:1 — eine Stufe dunkler. */
.cs-option.is-active .cs-meta,
.cs-option.is-active .cs-code { color: var(--text-2); }
.cs-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 50%;
  background: var(--bg-hover);
  color: var(--text-1);
  font-size: var(--fs-label);
  font-weight: 500;
}
/* PR1.453 — the empty choice („— kein Projektleiter —“) is no person: keep the column, drop the disc. */
.cs-avatar.is-empty { background: transparent; }
.cs-option.is-active .cs-avatar { background: var(--bg-card); }
.cs-check { flex: none; display: inline-flex; width: 16px; color: var(--primary); }
.cs-check:empty { visibility: hidden; }

.cs-group + .cs-group,
.cs-option + .cs-group { margin-top: 4px; }
.cs-group-label {
  padding: 8px 12px 4px;
  font-size: var(--fs-meta);
  font-weight: 500;
  color: var(--text-3);
  text-transform: none;
  letter-spacing: 0;
}

.cs-option mark {
  background: color-mix(in srgb, var(--primary) 18%, transparent);
  color: inherit;
  font-weight: 600;
  border-radius: 2px;
}

/* Zustaende: lädt / keine Treffer / Fehler */
.cs-loading { display: flex; flex-direction: column; gap: 6px; padding: 8px 12px; }
.cs-skeleton {
  display: block;
  height: 14px;
  border-radius: var(--radius-sm);
  background: var(--bg-hover);
}
.cs-skeleton:nth-child(2) { width: 80%; }
.cs-skeleton:nth-child(3) { width: 60%; }
.cs-empty,
.cs-error { padding: 10px 12px; font-size: var(--fs-body); color: var(--text-2); line-height: 1.45; }
.cs-tip { display: block; margin-top: 2px; color: var(--text-3); font-size: var(--fs-meta); }
.cs-error { color: var(--danger); }
.cs-retry {
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  text-decoration: underline;
  cursor: pointer;
}
.cs-retry:focus-visible { outline: 2px solid var(--primary); outline-offset: 1px; }

/* PR1.458 — Anlegen-Eintrag + Dublettenwarnung (Quelle `rolle`). Keine Bewegung. */
.cs-option.cs-create { border-top: 1px solid var(--border); margin-top: 4px; color: var(--primary-text, var(--text-1)); }
.cs-create-plus { flex: none; width: 1rem; text-align: center; font-weight: 600; }
.cs-warn {
  margin: 6px;
  padding: 10px 12px;
  border-left: 3px solid var(--warning);
  border-radius: var(--radius-sm);
  background: var(--bg-hover);
  color: var(--text-1);
  font-size: var(--fs-body);
  line-height: 1.45;
}
.cs-warn.is-error { border-left-color: var(--danger); }
.cs-warn-hint { display: block; margin-bottom: 2px; }
.cs-warn-text { margin: 0 0 8px; }
.cs-warn-actions { display: flex; flex-wrap: wrap; gap: 6px; }
.cs-warn-btn {
  min-height: 2rem;
  padding: 4px 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg-card);
  color: var(--text-1);
  font: inherit;
  cursor: pointer;
}
.cs-warn-take { background: var(--primary-dark); border-color: var(--primary-dark); color: #fff; font-weight: 600; }
.cs-warn-btn.is-active,
.cs-warn-btn:focus-visible { outline: 2px solid var(--primary); outline-offset: 1px; }

/* Knopfleiste (Form 'segment') */
.cs-segment {
  display: inline-flex;
  flex-wrap: wrap;
  max-width: 100%;
  min-height: 2.375rem;
  padding: 2px;
  gap: 2px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg-input);
}
.cs-seg {
  min-height: calc(2.375rem - 6px);
  padding: 0 14px;
  border: 0;
  border-radius: calc(var(--radius-sm) - 2px);
  background: transparent;
  color: var(--text-2);
  font: inherit;
  white-space: nowrap;
  cursor: pointer;
}
.cs-seg:hover:not(:disabled) { background: var(--bg-hover); color: var(--text-1); }
.cs-seg[aria-checked="true"] {
  background: color-mix(in srgb, var(--primary) 14%, transparent);
  color: var(--primary-text, var(--primary));
  font-weight: 600;
}
.cs-seg:focus-visible { outline: 2px solid var(--primary); outline-offset: 1px; }
.cs-seg:disabled { cursor: not-allowed; }

/* Nur lesen (fehlende Rechte / Edit-Guard): gestrichelt, kein Chevron, Text voll lesbar. */
.cs.is-readonly .cs-field,
.cs.is-readonly .cs-segment {
  border-style: dashed;
  cursor: default;
}
.cs.is-readonly .cs-field { background: transparent; }
.cs.is-readonly .cs-field,
.cs.is-readonly .cs-value { color: var(--text-1); }
.cs.is-readonly .cs-chevron { display: none; }
.cs-seg:disabled[aria-checked="true"] { color: var(--text-1); }

@media (max-width: 36rem) {
  .cs-option { min-height: 2.75rem; }
}


/* PR1.438 — the list components use the field text size of every other control (.85rem). */
.cs-field,
.cs-seg,
.cs-search,
.cs-option {
  font-size: var(--fs-body);
}

/* BF-88 (#692) — navigate() setzt den Fokus beim Öffnen eines Profils programmatisch auf
   den Ansichts-Container (tabindex=-1, preventScroll), damit Tab im Profil weiterläuft.
   Der Container ist kein Bedienelement: kein Rahmen um die ganze Ansicht.
   BF-103 (#747) — dasselbe für Opportunity-, Projekt- und Kundenseite. */
#view-employee-detail:focus,
#view-employee-detail:focus-visible,
#view-opportunity-detail:focus,
#view-opportunity-detail:focus-visible,
#view-project-detail:focus,
#view-project-detail:focus-visible,
#view-customer-detail:focus,
#view-customer-detail:focus-visible,
#crm-content:focus,
#crm-content:focus-visible { outline: none; }

/* ── PR1.486 #700 — Bewegungs-Baukasten ──────────────────────────────────────
   Klassen zu public/js/components/motion.js; beide Shells nutzen sie, die Werte kommen
   aus --motion-fast/--motion-base/--ease-out (im .crm-Scope gespiegelt). Nur Rueckmeldung
   auf eine Werteaenderung, alles unter 300 ms. Eintretend ease-out, Zuklappen ease-in. */
.mo-flash { animation: mo-flash var(--motion-base) var(--ease-out); }
@keyframes mo-flash { from { background-color: var(--mo-flash-bg); } to { background-color: transparent; } }
.mo-reveal {
  overflow: hidden;
  opacity: 0;
  transition: max-height var(--motion-fast) ease-in, opacity var(--motion-fast) ease-in;
}
.mo-reveal.is-open {
  opacity: 1;
  transition: max-height var(--motion-base) var(--ease-out), opacity var(--motion-base) var(--ease-out);
}
.mo-track { transition: transform var(--motion-base) var(--ease-out); will-change: transform; }
.mo-ring { transition: stroke-dashoffset var(--motion-base) var(--ease-out); }
/* PR1.457 #703 — Schritt-Panel gleitet von der Seite herein, aus der der Schritt kommt. */
.mo-enter { animation: mo-enter var(--motion-base) var(--ease-out); }
.mo-enter-back { animation: mo-enter-back var(--motion-base) var(--ease-out); }
@keyframes mo-enter { from { opacity: 0; transform: translateX(1rem); } to { opacity: 1; transform: none; } }
@keyframes mo-enter-back { from { opacity: 0; transform: translateX(-1rem); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .mo-flash, .mo-enter, .mo-enter-back { animation: none; }
  .mo-reveal, .mo-reveal.is-open, .mo-track, .mo-ring { transition: none; }
}

/* ── PR1.454 #702 — Zeitraum-Kalender (date-range-picker.js) ──────────────────
   Ein Feld + Popover mit zwei Monaten, Opp- und Projektmaske. Bewusst NICHT
   .crm-gescopt: dieselben Regeln bedienen beide Shells (Konvention 20); im
   .crm-Scope setzt style-redesign.css nur die --drp-*-Tokens um. Das Feld
   selbst erbt die Geometrie aus `.fw-panel input` / `.form-group input`.
   Bewegung: nur das Einblenden des Popovers (eine Stufe --motion-fast). */
.drp {
  --drp-surface: var(--bg-card);
  --drp-line: var(--border);
  --drp-hover: var(--bg-hover);
  --drp-range: var(--primary-glow);
  --drp-edge: var(--primary-dark);
  --drp-edge-text: #fff;
  --drp-focus: var(--primary);
  --drp-holiday: var(--warning);
  --drp-radius: var(--radius-lg);
  --drp-day-radius: var(--radius-sm);
  --drp-shadow: var(--shadow-lg);
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
.drp-field { display: flex; align-items: center; gap: 6px; }
.drp-field .drp-input { flex: 1 1 auto; min-width: 0; font-variant-numeric: tabular-nums; }
.drp-hint { margin: 0; font-size: var(--fs-meta); color: var(--text-3); min-height: 1.1em; }
.drp.is-invalid .drp-input { border-color: var(--danger) !important; }
.drp.is-invalid .drp-hint { color: var(--danger); }
/* Die Datums-Warnung (PR1.84) sitzt am versteckten Werttraeger — die sichtbare
   Huelle uebernimmt ihren Rahmen. */
:has(> .drp-carriers .pflichtfeld-warn) > .drp .drp-input { border-color: var(--warning) !important; }
/* Pflichtangabe fehlt (Gate, PR1.198): der Fehler sitzt am Feld selbst (Wirt-Tabelle)
   oder — ueber die Formular-Pruefung — am Werttraeger. */
.drp.field-error .drp-input,
:has(> .drp-carriers .field-error) > .drp .drp-input { border-color: var(--danger) !important; }
.drp-carriers { display: flex; flex-direction: column; gap: 2px; }
.drp-carriers:not(:has(.pflichtfeld-warn-text, .field-error-msg)) { display: none; }

.drp-pop {
  position: fixed;
  z-index: var(--z-popover, 1100);
  box-sizing: border-box;
  width: max-content;
  max-width: calc(100vw - 16px);
  max-height: calc(100vh - 16px);
  overflow-y: auto;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  background: var(--drp-surface);
  border: 1px solid var(--drp-line);
  border-radius: var(--drp-radius);
  box-shadow: var(--drp-shadow);
  color: var(--text-1);
}
.drp-pop[hidden] { display: none; }
.drp-pop:not([hidden]) { animation: drp-in var(--motion-fast) var(--ease-out); }
@keyframes drp-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }

.drp-head { display: flex; align-items: center; gap: 8px; }
.drp-phase { flex: 1 1 auto; text-align: center; font-size: var(--fs-body); color: var(--text-2); }
.drp-months { display: flex; gap: 24px; }
.drp-month { display: flex; flex-direction: column; gap: 6px; }
.drp-title { text-align: center; font-weight: 600; font-size: var(--fs-body); }
.drp-grid { display: grid; grid-template-columns: repeat(7, 2.5rem); row-gap: 2px; }
.drp-wd { text-align: center; font-size: var(--fs-label); font-weight: 500; color: var(--text-3); padding-bottom: 2px; }
.drp-blank { height: 2.25rem; }
.drp-day {
  height: 2.25rem;
  border: 0;
  border-radius: var(--drp-day-radius);
  background: transparent;
  color: var(--text-1);
  font: inherit;
  font-size: var(--fs-body);
  font-variant-numeric: tabular-nums;
  cursor: pointer;
}
.drp-day:hover:not(:disabled) { background: var(--drp-hover); }
.drp-day:focus-visible { outline: 2px solid var(--drp-focus); outline-offset: 1px; position: relative; z-index: 1; }
.drp-day.is-weekend { color: var(--text-3); }
.drp-day.is-holiday {
  text-decoration: underline dotted;
  text-decoration-color: var(--drp-holiday);
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}
.drp-day.is-today { box-shadow: inset 0 0 0 1px var(--drp-line); }
.drp-day.in-range { background: var(--drp-range); border-radius: 0; }
/* Auf dem Bereichsgrund reicht --text-3 nicht fuer 4,5:1 — Wochenenden dort eine Stufe kraeftiger. */
.drp-day.in-range.is-weekend { color: var(--text-2); }
.drp-day.is-edge,
.drp-day.is-edge:hover { background: var(--drp-edge); color: var(--drp-edge-text); font-weight: 600; }
.drp-day:disabled { color: var(--text-3); opacity: .45; cursor: not-allowed; text-decoration: none; }

.drp-foot {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  border-top: 1px solid var(--drp-line);
  padding-top: 12px;
}
.drp-foot-label { font-size: var(--fs-ui); color: var(--text-3); }
.drp-spacer { flex: 1 1 auto; }
.drp-legend { margin: 0; font-size: var(--fs-meta); color: var(--text-3); }

@media (max-width: 680px) {
  .drp-months { flex-direction: column; gap: 12px; }
  .drp-grid { grid-template-columns: repeat(7, minmax(2.25rem, 1fr)); }
}
.drp-pop.drp-instant:not([hidden]) { animation: none; }
@media (prefers-reduced-motion: reduce) {
  .drp-pop:not([hidden]) { animation: none; }
}

/* PR1.451 (#695) — Karte „Ausgang" (Stil A, violett) ueber den Spalten der klassischen
   Opp-Detailseite. Markup geteilt mit dem Redesign (description-view.js renderAusgangKarte). */
.opp-ausgang { margin: 0 0 16px; }
.opp-ausgang p.txb-text { margin: 0 0 4px; }
.txb-link {
  padding: 0; border: 0; background: none; font: inherit; font-weight: 600; cursor: pointer;
  color: var(--accent); text-decoration: underline; text-underline-offset: .15em;
}
.txb-link:hover { text-decoration-thickness: 2px; }
.txb-link:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }
.txb-ausgang-btn { margin-top: 8px; }
/* PR1.459 #705 — Rollenliste aufräumen (Admin → Zuordnungen). Gruppenkarten mit Zielname,
   Chips „Name · Anzahl", Levelwort-Chip gestrichelt markiert. Keine Bewegung: seltenes
   Admin-Werkzeug. Gleiche Regeln im .crm-Scope von style-redesign.css. */
.role-cleanup { margin-top: 28px; display: flex; flex-direction: column; gap: 10px; }
.role-cleanup-title { margin: 0; }
.role-cleanup-kpi { margin: 0; font-size: var(--fs-section); font-weight: 600; color: var(--text-primary); }
.role-cleanup-sub { margin: 0; font-size: var(--fs-body); color: var(--text-secondary); }
.role-cleanup-status { margin: 0; min-height: 1.2em; font-size: var(--fs-body); font-weight: 500; color: var(--text-primary); }
.role-cleanup-empty { margin: 0; padding: 16px; border: 1px dashed var(--border-light); border-radius: var(--radius); color: var(--text-secondary); text-align: center; }
.role-cleanup-cards, .role-cleanup-list, .role-cleanup-chips { list-style: none; margin: 0; padding: 0; }
.role-cleanup-cards { display: flex; flex-direction: column; gap: 10px; }
.role-cleanup-card { display: flex; flex-direction: column; gap: 10px; padding: 14px 16px; background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); }
.role-cleanup-card-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.role-cleanup-label { font-size: var(--fs-ui); font-weight: 500; color: var(--text-secondary); }
.role-cleanup-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.role-cleanup-chip { padding: 3px 10px; border-radius: 12px; background: var(--bg-card2); border: 1px solid var(--border); font-size: var(--fs-ui); color: var(--text-primary); }
.role-cleanup-chip--level { border-style: dashed; border-color: var(--warning); }
.role-cleanup-chip-note { color: var(--text-secondary); }
.role-cleanup-fold > summary { cursor: pointer; font-weight: 600; padding: 6px 0; }
.role-cleanup-h4 { margin: 8px 0 0; font-size: var(--fs-body); }
.role-cleanup-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 6px 0; border-bottom: 1px solid var(--border); }
.role-cleanup-target { flex: 0 1 28rem; padding: 7px 10px; border: 1px solid var(--border-light); border-radius: var(--radius-sm); background: var(--bg-input); color: var(--text-primary); font: inherit; font-weight: 600; }

/* PR1.485 B — Besetzung in Detailseiten und Mitarbeiterliste (klassische Shell).
   Marken „Extern · Partnerfirma", „neu, ungeprueft", „Extern, noch offen" (roster-display.js).
   Farbe nie allein: jede Marke traegt ihren Text. Kein Uebergang — taeglich gelesen. */
.roster-mark { margin-left: 4px; white-space: nowrap; background: transparent; border: 1px solid var(--border-light); color: var(--text-2); }
.roster-mark-ext { color: var(--primary-text); border-color: currentColor; }
.roster-mark-new { color: var(--warning); border-color: currentColor; }
.roster-mark-ph { margin-left: 0; border-style: dashed; color: var(--text-2); }
.roster-ph-detail { color: var(--text-2); font-size: var(--fs-ui); }
.roster-ph-role { color: var(--text-1); font-weight: 500; font-size: var(--fs-body); }
.roster-ph-group .roster-ph-row { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; padding: 4px 0; }
.proj-team-row-ph .proj-team-name { color: var(--text-2); }
.emp-roster-marks { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; margin-top: 4px; }
.emp-roster-marks .roster-mark { margin-left: 0; }
.roster-review-btn { margin-left: 4px; }
#view-employees .emp-pop-check { flex-direction: row; align-items: center; gap: 8px; font-size: var(--fs-ui); color: var(--text-1); cursor: pointer; }

/* ─────────────────────────────────────────
   PR1.464 (#715) — Reiter „Zertifikate" (Markup geteilt: components/cert-page.js)
   Der Aufbau steht hier EINMAL für beide Shells; style-redesign.css belegt nur die
   --cz-*-Werte mit den Redesign-Tokens um. Keine Animation (oft genutzt).
   ───────────────────────────────────────── */
.cz-host {
    --cz-surface: var(--bg-card);
    --cz-surface-2: var(--bg-card2);
    --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(--primary);
    --cz-accent-text: var(--primary-text);
    --cz-ok: var(--success);
    --cz-warn: var(--warning);
    --cz-bad: var(--danger);
    --cz-idle: var(--text-3);
    --cz-ok-bg: color-mix(in srgb, var(--success) 16%, transparent);
    --cz-warn-bg: color-mix(in srgb, var(--warning) 16%, transparent);
    --cz-bad-bg: color-mix(in srgb, var(--danger) 14%, transparent);
    --cz-idle-bg: color-mix(in srgb, var(--text-3) 14%, transparent);
    --cz-radius: var(--radius);
    --cz-radius-sm: var(--radius-sm);
    --cz-gap: 1rem;
    --cz-num-font: inherit;
}
.cz-legacy { padding: 1.5rem; }
.cz-legacy-sub { margin: .25rem 0 1rem; color: var(--cz-text-3); font-size: var(--fs-body); }
.cz-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.cz-host :is(button, select, input, a):focus-visible { outline: 2px solid var(--cz-accent); outline-offset: 2px; }

.cz-bar-top { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: .75rem; margin-bottom: var(--cz-gap); border-bottom: 1px solid var(--cz-line); }
.cz-tabs { display: flex; gap: .25rem; }
.cz-tabs button { background: none; border: 0; border-bottom: 2px solid transparent; padding: .625rem .875rem; color: var(--cz-text-2); font: inherit; font-weight: 500; cursor: pointer; margin-bottom: -1px; }
.cz-tabs button:hover { color: var(--cz-text); }
.cz-tabs button.is-on { color: var(--cz-accent-text); border-bottom-color: var(--cz-accent); font-weight: 600; }
/* PR1.551 — Zähler am Reiter (offene Prüfungen) und Unterreiter als leisere zweite Leiste. */
.cz-tab-n { display: inline-block; margin-left: .375rem; min-width: 1.25rem; padding: 0 .375rem; border-radius: 999px; background: var(--cz-warn-bg); color: var(--cz-warn); font-family: var(--cz-num-font); font-size: var(--fs-meta); font-weight: 600; line-height: 1.25rem; text-align: center; font-variant-numeric: tabular-nums; }
.cz-subtabs { display: flex; flex-wrap: wrap; gap: .25rem; margin: calc(var(--cz-gap) * -.5) 0 var(--cz-gap); }
.cz-subtabs button { background: none; border: 1px solid transparent; border-radius: 999px; padding: .3125rem .75rem; color: var(--cz-text-2); font: inherit; font-size: var(--fs-ui); cursor: pointer; }
.cz-subtabs button:hover { color: var(--cz-text); background: var(--cz-hover); }
.cz-subtabs button.is-on { color: var(--cz-accent-text); border-color: var(--cz-accent); font-weight: 600; }
.cz-views { display: inline-flex; gap: 0; border: 1px solid var(--cz-line); border-radius: var(--cz-radius-sm); overflow: hidden; margin-bottom: .5rem; }
.cz-view { background: var(--cz-surface); border: 0; padding: .375rem .75rem; color: var(--cz-text-2); font: inherit; font-size: var(--fs-ui); cursor: pointer; }
.cz-view + .cz-view { border-left: 1px solid var(--cz-line); }
.cz-view.is-on { background: var(--cz-accent); color: #fff; }

.cz-body { display: flex; flex-direction: column; gap: var(--cz-gap); }
.cz-card { background: var(--cz-surface); border: 1px solid var(--cz-line); border-radius: var(--cz-radius); padding: 1rem 1.125rem; min-width: 0; }
.cz-card:focus { outline: none; }
.cz-card:focus-visible { outline: 2px solid var(--cz-accent); outline-offset: 2px; }
.cz-h { margin: 0 0 .75rem; font-size: var(--fs-body); font-weight: 500; display: flex; align-items: center; gap: .5rem; }
.cz-hint, .cz-muted { color: var(--cz-text-3); font-size: var(--fs-ui); }
.cz-hint { margin: -.25rem 0 .75rem; }
.cz-empty { margin: 0; color: var(--cz-text-2); font-size: var(--fs-body); }
.cz-grid2 { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: var(--cz-gap); align-items: start; }
.cz-stack { display: flex; flex-direction: column; gap: var(--cz-gap); min-width: 0; }

/* Kennzahlen */
.cz-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--cz-gap); }
.cz-kpi { display: flex; flex-direction: column; gap: .125rem; text-align: left; background: var(--cz-surface); border: 1px solid var(--cz-line); border-left-width: 4px; border-radius: var(--cz-radius); padding: .875rem 1rem; font: inherit; color: var(--cz-text); }
button.cz-kpi { cursor: pointer; }
button.cz-kpi:hover { background: var(--cz-hover); }
.cz-kpi-n { font-family: var(--cz-num-font); font-size: var(--fs-kpi); font-weight: 600; line-height: 1.1; }
.cz-kpi-t { font-weight: 600; }
.cz-kpi-s { color: var(--cz-text-3); font-size: var(--fs-meta); }
.cz-kpi--ok { border-left-color: var(--cz-ok); }
.cz-kpi--warn { border-left-color: var(--cz-warn); }
.cz-kpi--bad { border-left-color: var(--cz-bad); }
.cz-kpi--idle { border-left-color: var(--cz-idle); }

/* Anbieter-Zeilen */
.cz-vrow { padding: .625rem 0; border-top: 1px solid var(--cz-line); }
.cz-vrow:first-of-type { border-top: 0; padding-top: 0; }
.cz-vhead { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; width: 100%; background: none; border: 0; padding: .25rem 0; font: inherit; color: var(--cz-text); text-align: left; }
button.cz-vhead { cursor: pointer; border-radius: var(--cz-radius-sm); }
button.cz-vhead:hover .cz-vname { text-decoration: underline; }
.cz-vname { font-weight: 600; }
.cz-vnums { color: var(--cz-text-2); font-size: var(--fs-ui); }
.cz-vtail { margin-left: auto; font-size: var(--fs-ui); }
.cz-t-ok { color: var(--cz-ok); }
.cz-t-warn { color: var(--cz-warn); }
.cz-t-bad { color: var(--cz-bad); }
.cz-vlogo { width: 1.125rem; height: 1.125rem; object-fit: contain; flex: none; }
.cz-vlogo--mono { display: inline-grid; place-items: center; font-size: var(--fs-label); font-weight: 500; background: var(--cz-surface-2); border-radius: var(--cz-radius-sm); color: var(--cz-text-2); }
.cz-bar { display: flex; height: .625rem; border-radius: .3125rem; overflow: hidden; background: var(--cz-surface-2); margin: .375rem 0; }
.cz-bar-ok { background: var(--cz-ok); }
.cz-bar-warn { background: var(--cz-warn); }
.cz-bar-bad { background: var(--cz-bad); }
.cz-vtop { display: flex; flex-wrap: wrap; align-items: center; gap: .375rem; }
.cz-vchip { display: inline-flex; align-items: center; gap: .375rem; background: var(--cz-surface-2); border: 1px solid var(--cz-line); border-radius: 999px; padding: .125rem .5rem .125rem .1875rem; font: inherit; font-size: var(--fs-meta); color: var(--cz-text); cursor: pointer; }
.cz-vchip:hover { border-color: var(--cz-accent); }
.cz-vchip b { font-weight: 600; }
.cz-vnone { color: var(--cz-bad); font-size: var(--fs-meta); }
.cz-legend { display: flex; gap: 1rem; margin-top: .5rem; color: var(--cz-text-3); font-size: var(--fs-meta); }
.cz-lg::before { content: ""; display: inline-block; width: .625rem; height: .625rem; border-radius: 2px; margin-right: .3125rem; vertical-align: -1px; }
.cz-lg-ok::before { background: var(--cz-ok); }
.cz-lg-warn::before { background: var(--cz-warn); }
.cz-lg-bad::before { background: var(--cz-bad); }

/* Listen (Läuft bald ab, Merkliste) */
.cz-list { list-style: none; margin: 0; padding: 0; }
.cz-row { display: flex; align-items: center; gap: .625rem; padding: .5rem 0; border-top: 1px solid var(--cz-line); }
.cz-row:first-child { border-top: 0; }
.cz-row-main { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.cz-row-sub { color: var(--cz-text-3); font-size: var(--fs-meta); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cz-person { display: inline-flex; align-items: center; gap: .5rem; background: none; border: 0; padding: 0; font: inherit; color: var(--cz-text); cursor: pointer; text-align: left; border-radius: var(--cz-radius-sm); }
.cz-person:hover .cz-person-name { text-decoration: underline; }
.cz-person-name { font-weight: 500; }
.cz-avatar { display: inline-grid; place-items: center; width: 1.75rem; height: 1.75rem; border-radius: 50%; background: var(--cz-surface-2); color: var(--cz-text-2); font-size: var(--fs-label); font-weight: 500; flex: none; }

/* Pillen */
.cz-pill { display: inline-block; border-radius: 999px; padding: .0625rem .5rem; font-size: var(--fs-meta); font-weight: 500; white-space: nowrap; }
.cz-pill--ok { background: var(--cz-ok-bg); color: var(--cz-ok); }
.cz-pill--warn { background: var(--cz-warn-bg); color: var(--cz-warn); }
.cz-pill--bad { background: var(--cz-bad-bg); color: var(--cz-bad); }
.cz-pill--idle { background: var(--cz-idle-bg); color: var(--cz-text-2); }

/* ─────────────────────────────────────────
   PR1.562 (#847) — Admin-Reiter „Zeitreise" (Gesicht geteilt: components/admin-zeitreise.js)
   Aufbau EINMAL für beide Shells auf den --cz-*-Tokens (style-redesign.css belegt sie um).
   Keine Animation: ruhiges Werkzeug. Rot nur für Entscheiden, Orange für Ansehen.
   ───────────────────────────────────────── */
.zr { color: var(--cz-text); display: flex; flex-direction: column; gap: 1rem; }
.zr-kopf { display: flex; flex-wrap: wrap; gap: 1rem; align-items: flex-start; justify-content: space-between; }
.zr-titel { margin: 0; font-size: var(--fs-title); font-weight: 600; }
.zr-sub { margin: .25rem 0 0; color: var(--cz-text-2); font-size: var(--fs-body); max-width: 40rem; }
.zr-zeitwahl { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
.zr-segmente { display: inline-flex; flex-wrap: wrap; gap: .125rem; padding: .1875rem; border-radius: var(--cz-radius); background: var(--cz-surface-2); border: 1px solid var(--cz-line); }
.zr-segment { border: 0; background: transparent; color: var(--cz-text-2); font: inherit; font-size: var(--fs-body); padding: .375rem .75rem; border-radius: var(--cz-radius-sm); cursor: pointer; }
.zr-segment:hover { color: var(--cz-text); background: var(--cz-hover); }
.zr-segment[aria-pressed="true"] { background: var(--cz-surface); color: var(--cz-text); font-weight: 600; box-shadow: 0 0 0 1px var(--cz-line); }
.zr-datum { display: inline-flex; align-items: center; gap: .375rem; font-size: var(--fs-ui); color: var(--cz-text-2); }
.zr-datum input { font: inherit; color: var(--cz-text); background: var(--cz-surface); border: 1px solid var(--cz-line); border-radius: var(--cz-radius-sm); padding: .3125rem .5rem; }

.zr-saeulen { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: .5rem; }
.zr-saeule { display: flex; flex-direction: column; align-items: stretch; gap: .25rem; border: 0; background: transparent; padding: .25rem; border-radius: var(--cz-radius-sm); cursor: pointer; color: var(--cz-text-3); font: inherit; }
.zr-saeule:hover { background: var(--cz-hover); }
.zr-saeule-flaeche { position: relative; height: 2.75rem; display: flex; align-items: flex-end; justify-content: center; }
.zr-saeule-bar { display: block; width: min(1.5rem, 60%); min-height: 0; border-radius: 2px 2px 0 0; background: var(--cz-idle-bg); }
.zr-saeule.is-aktiv .zr-saeule-bar { background: var(--cz-accent); }
.zr-saeule.is-aktiv .zr-saeule-label { color: var(--cz-text); font-weight: 600; }
.zr-punkt { position: absolute; top: 0; left: 50%; width: .4375rem; height: .4375rem; margin-left: -.21875rem; border-radius: 50%; background: var(--cz-bad); }
.zr-saeule-label { font-size: var(--fs-label); text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.zr-lage { margin: 0; font-size: var(--fs-section); line-height: 1.45; color: var(--cz-text-2); max-width: 60rem; }
.zr-lage strong { color: var(--cz-text); font-weight: 600; }
.zr-lage-warn { color: var(--cz-bad); font-weight: 600; }
.zr-lage--ruhig { color: var(--cz-ok); font-weight: 600; }
.zr-hinweis { margin: 0; font-size: var(--fs-ui); color: var(--cz-text-2); }

.zr-kacheln { display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: .75rem; }
.zr-kachel { display: flex; align-items: center; gap: 1rem; text-align: left; font: inherit; color: var(--cz-text); background: var(--cz-surface); border: 1px solid var(--cz-line); border-radius: var(--cz-radius); padding: .875rem 1.125rem; cursor: pointer; min-height: 4.5rem; }
.zr-kachel:hover { background: var(--cz-hover); }
.zr-kachel-zahl { font-family: var(--cz-num-font); font-size: var(--fs-kpi); font-weight: 600; line-height: 1; min-width: 1.5ch; color: var(--cz-text-3); }
.zr-kachel-text { display: flex; flex-direction: column; gap: .125rem; }
.zr-kachel-titel { font-weight: 600; }
.zr-kachel-sub { font-size: var(--fs-ui); color: var(--cz-text-2); }
.zr-kachel--entscheiden.has-punkte { border: 2px solid var(--cz-text); }
.zr-kachel--entscheiden.has-punkte .zr-kachel-zahl { color: var(--cz-bad); }
.zr-kachel--ansehen.has-punkte .zr-kachel-zahl { color: var(--cz-warn); }
.zr-platzhalter { cursor: default; background: var(--cz-surface-2); }

.zr-raster { display: grid; grid-template-columns: minmax(0, 1fr) 20rem; gap: 1.25rem; align-items: start; }
@media (max-width: 1100px) { .zr-raster { grid-template-columns: minmax(0, 1fr); } }
.zr-haupt { display: flex; flex-direction: column; gap: 1.25rem; min-width: 0; }
.zr-gruppe { display: flex; flex-direction: column; gap: .75rem; }
.zr-gruppe-titel { margin: 0; font-size: var(--fs-section); font-weight: 600; scroll-margin-top: 1rem; }
.zr-gruppe-titel:focus { outline: none; }
.zr-gruppe-titel:focus-visible { outline: 2px solid var(--cz-accent); outline-offset: 2px; }
.zr-gruppe-sub { font-size: var(--fs-ui); font-weight: 400; color: var(--cz-text-2); margin-left: .5rem; }

.zr-karte { background: var(--cz-surface); border: 1px solid var(--cz-line); border-top-width: 4px; border-radius: var(--cz-radius); padding: 1.125rem 1.25rem; display: flex; flex-direction: column; gap: .875rem; min-width: 0; }
.zr-karte--entscheiden { border-top-color: var(--cz-bad); }
.zr-karte--ansehen { border-top-color: var(--cz-warn); }
.zr-karte.is-erledigt { border-top-color: var(--cz-line); }
.zr-karte.is-erledigt .zr-karte-titel { color: var(--cz-text-2); }
.zr-karte-kopf { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: .875rem; align-items: start; }
.zr-symbol { width: 2rem; height: 2rem; border-radius: var(--cz-radius-sm); display: inline-flex; align-items: center; justify-content: center; font-weight: 600; }
.zr-karte--entscheiden .zr-symbol { background: var(--cz-bad-bg); color: var(--cz-bad); }
.zr-karte--ansehen .zr-symbol { background: var(--cz-warn-bg); color: var(--cz-warn); }
.zr-karte-titel { margin: 0; font-size: var(--fs-section); font-weight: 600; }
.zr-karte-titel:focus { outline: none; }
.zr-karte-titel:focus-visible { outline: 2px solid var(--cz-accent); outline-offset: 2px; }
.zr-karte-satz { margin: .25rem 0 0; color: var(--cz-text-2); line-height: 1.5; }
.zr-zeit { font-size: var(--fs-meta); color: var(--cz-text-3); white-space: nowrap; font-variant-numeric: tabular-nums; }

.zr-geschichte { list-style: none; margin: 0; padding: .25rem 0 0; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(7rem, 1fr); gap: .5rem; overflow-x: auto; position: relative; }
.zr-station { display: flex; flex-direction: column; align-items: center; text-align: center; gap: .25rem; position: relative; }
.zr-station::before { content: ""; position: absolute; top: 1.875rem; left: -50%; right: 50%; height: 2px; background: var(--cz-line); }
.zr-station:first-child::before { display: none; }
.zr-station-zeit { font-size: var(--fs-meta); color: var(--cz-text-3); font-variant-numeric: tabular-nums; }
.zr-station-kopf { position: relative; z-index: 1; width: 2.25rem; height: 2.25rem; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: var(--fs-meta); font-weight: 500; background: var(--cz-surface-2); border: 2px solid var(--cz-line); color: var(--cz-text-2); }
.zr-station--warn .zr-station-kopf { border-color: var(--cz-warn); }
.zr-station--bad .zr-station-kopf { border-color: var(--cz-bad); }
.zr-station-was { font-weight: 500; font-size: var(--fs-body); }
.zr-station-wer { font-size: var(--fs-meta); color: var(--cz-text-2); }

.zr-objekte { display: grid; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); gap: .75rem; }
.zr-objekt { display: flex; align-items: center; gap: .75rem; padding: .75rem .875rem; border: 1px solid var(--cz-line); border-radius: var(--cz-radius-sm); min-width: 0; }
.zr-objekt-name { flex: 1; min-width: 0; font-weight: 600; overflow-wrap: anywhere; }
.zr-objekt-status { font-size: var(--fs-ui); font-weight: 500; white-space: nowrap; display: inline-flex; align-items: center; gap: .25rem; }
.zr-pillen .cz-pill, .zr-erledigt { display: inline-flex; align-items: center; gap: .25rem; }
.zr-pfeil svg, .zr-verlassen svg { vertical-align: middle; }
.zr-verlassen .is-nicht span { color: var(--cz-text-3); }
.zr-objekt--da .zr-objekt-status { color: var(--cz-ok); }
.zr-objekt--weg { border-style: dashed; border-color: var(--cz-bad); background: var(--cz-bad-bg); }
.zr-objekt--weg .zr-objekt-status { color: var(--cz-bad); }
.zr-pillen { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .375rem; }
.zr-pillen .cz-pill { white-space: normal; }
.zr-empfehlung { padding: .75rem .875rem; border-radius: var(--cz-radius-sm); background: var(--cz-hi, var(--cz-surface-2)); line-height: 1.5; }
.zr-erledigt { margin: 0; color: var(--cz-ok); font-weight: 500; font-size: var(--fs-body); }

.zr-aktionen { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
.zr-details-knopf, .zr-mehr { margin-left: auto; border: 0; background: transparent; color: var(--cz-accent-text); font: inherit; font-weight: 600; cursor: pointer; padding: .375rem .5rem; border-radius: var(--cz-radius-sm); }
.zr-mehr { margin-left: 0; align-self: flex-start; }
.zr-details-knopf:hover, .zr-mehr:hover { background: var(--cz-hover); }

.zr-vorschau { border: 1px solid var(--cz-accent); border-radius: var(--cz-radius-sm); padding: .75rem .875rem; display: flex; flex-direction: column; gap: .5rem; grid-column: 1 / -1; }
.zr-vorschau-titel { margin: 0; font-weight: 600; }
.zr-vorschau-liste { margin: 0; padding-left: 1.125rem; display: flex; flex-direction: column; gap: .25rem; line-height: 1.45; }

.zr-details { border-top: 1px solid var(--cz-line); padding-top: .875rem; display: flex; flex-direction: column; gap: .625rem; }
.zr-details-kopf { margin: 0; font-size: var(--fs-ui); color: var(--cz-text-2); }
.zr-tabelle-rahmen { overflow-x: auto; max-height: 28rem; overflow-y: auto; }
.zr-tabelle { width: 100%; border-collapse: collapse; font-size: var(--fs-body); }
.zr-tabelle th, .zr-tabelle td { text-align: left; padding: .4375rem .5rem; border-bottom: 1px solid var(--cz-line); vertical-align: middle; }
.zr-tabelle thead th { font-size: var(--fs-meta); font-weight: 500; color: var(--cz-text-3); }
.zr-tabelle tbody th { font-weight: 500; }
.zr-tabelle tr.is-gleich { color: var(--cz-text-3); }
.zr-wert { background: var(--cz-ok-bg); border-radius: var(--cz-radius-sm); padding: .0625rem .375rem; }
.zr-pfeil { color: var(--cz-text-3); }

.zr-routine { list-style: none; margin: 0; padding: 0; background: var(--cz-surface); border: 1px solid var(--cz-line); border-radius: var(--cz-radius); }
.zr-zeile { display: grid; grid-template-columns: auto minmax(0, 1fr) auto 6.5rem; gap: .75rem; align-items: center; padding: .625rem .875rem; border-bottom: 1px solid var(--cz-line); }
.zr-zeile:last-child { border-bottom: 0; }
.zr-zeile:hover { background: var(--cz-hover); }
.zr-zeile-text { line-height: 1.45; overflow-wrap: anywhere; }
.zr-kopf-rund { width: 1.875rem; height: 1.875rem; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: var(--fs-label); font-weight: 500; background: var(--cz-surface-2); color: var(--cz-text-2); }
.zr-rueck { visibility: hidden; justify-self: end; }
.zr-zeile:hover .zr-rueck, .zr-zeile:focus-within .zr-rueck { visibility: visible; }
@media (hover: none) { .zr-rueck { visibility: visible; } }
@media (max-width: 640px) {
    .zr-zeile { grid-template-columns: auto minmax(0, 1fr); }
    .zr-zeile .zr-zeit { grid-column: 2; }
    .zr-rueck { grid-column: 2; justify-self: start; visibility: visible; }
    .zr-rueck-platz { display: none; }
    .zr-karte-kopf { grid-template-columns: auto minmax(0, 1fr); }
    .zr-karte-kopf .zr-zeit { grid-column: 2; }
}

.zr-seite { display: flex; flex-direction: column; gap: .75rem; }
.zr-box { background: var(--cz-surface); border: 1px solid var(--cz-line); border-radius: var(--cz-radius); padding: 1rem 1.125rem; }
.zr-box-titel { margin: 0 0 .625rem; font-size: var(--fs-body); font-weight: 500; }
.zr-box-text { margin: .5rem 0 0; font-size: var(--fs-body); color: var(--cz-text-2); }
.zr-fortschritt { height: .375rem; border-radius: 999px; background: var(--cz-idle-bg); overflow: hidden; }
.zr-fortschritt span { display: block; height: 100%; background: var(--cz-ok); }
.zr-verlassen { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .625rem; font-size: var(--fs-body); line-height: 1.45; }
.zr-verlassen li { display: grid; grid-template-columns: 1rem minmax(0, 1fr); gap: .5rem; }
.zr-verlassen .is-ok span { color: var(--cz-ok); font-weight: 600; }
.zr-verlassen .is-nicht { color: var(--cz-text-2); }
.zr-laden, .zr-fehler { display: flex; flex-direction: column; gap: .75rem; align-items: flex-start; }
.zr-fehler p { margin: 0; }

/* Badges */
.cz-badge { display: inline-grid; place-items: center; flex: none; border-radius: var(--cz-radius-sm); overflow: hidden; }
.cz-badge img { width: 100%; height: 100%; object-fit: contain; }
.cz-badge--xs { width: 1.25rem; height: 1.25rem; }
.cz-badge--sm { width: 1.75rem; height: 1.75rem; }
.cz-badge--md { width: 2.75rem; height: 2.75rem; }
.cz-badge--lg { width: 4.5rem; height: 4.5rem; }
.cz-badge--mono { background: var(--cz-surface-2); color: var(--cz-text-2); font-size: var(--fs-label); font-weight: 500; }
.cz-badge--logo { background: var(--cz-surface-2); padding: .1875rem; }

/* Badge-Wand */
.cz-wall-h .cz-muted { font-weight: 400; }
.cz-wall { display: grid; grid-template-columns: repeat(auto-fill, minmax(9.375rem, 1fr)); gap: .625rem; }
.cz-tile { position: relative; display: flex; flex-direction: column; align-items: center; gap: .375rem; text-align: center; background: var(--cz-surface); border: 1px solid var(--cz-line); border-radius: var(--cz-radius); padding: .875rem .625rem .75rem; font: inherit; color: var(--cz-text); cursor: pointer; }
.cz-tile:hover { border-color: var(--cz-accent); }
.cz-tile-name { font-size: var(--fs-ui); font-weight: 500; line-height: 1.25; }
.cz-tile-code { color: var(--cz-text-3); font-size: var(--fs-label); }
.cz-cnt { font-family: var(--cz-num-font); font-weight: 500; font-size: var(--fs-body); color: var(--cz-text); }
.cz-tile .cz-cnt { position: absolute; top: .375rem; right: .5rem; }
.cz-cnt.is-zero { color: var(--cz-bad); background: var(--cz-bad-bg); border-radius: 999px; padding: 0 .375rem; }

/* Finder — PR1.555 (#836): links suchen, rechts Inhaber; beide Shells (Redesign belegt nur Tokens um). */
.cz-who { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: var(--cz-gap); align-items: start; }
.cz-finder { padding: 0; overflow: hidden; }
.cz-finder > .cz-search { padding: 1rem 1.125rem 0; }
.cz-finder > .cz-frow { padding: 0 1.125rem; }
.cz-finder > #cz-hits { margin-top: .75rem; border-top: 1px solid var(--cz-line); }
.cz-finder > #cz-hits > .cz-empty, .cz-finder > #cz-hits > .cz-fres-h { padding: .75rem 1.125rem 0; }
.cz-finder > #cz-hits > .cz-empty { padding-bottom: 1rem; }
.cz-search input { width: 100%; box-sizing: border-box; padding: .625rem .75rem; font: inherit; font-size: var(--fs-body); background: var(--cz-surface-2); color: var(--cz-text); border: 1px solid var(--cz-line); border-radius: var(--cz-radius-sm); }
.cz-search--big input { padding: .75rem .875rem; font-size: var(--fs-section); border-width: 2px; }
.cz-search--big input:focus-visible { border-color: var(--cz-accent); outline: 2px solid var(--cz-accent); outline-offset: 1px; }
.cz-frow { display: flex; flex-wrap: wrap; align-items: center; gap: .375rem; margin-top: .625rem; }
.cz-frow--sel { gap: .5rem 1rem; }
.cz-flbl { width: 6.5rem; flex: none; color: var(--cz-text-3); font-size: var(--fs-label); font-weight: 500; }
.cz-fchip { display: inline-flex; align-items: center; gap: .375rem; background: var(--cz-surface); border: 1px solid var(--cz-line); border-radius: 999px; padding: .25rem .625rem; font: inherit; font-size: var(--fs-ui); color: var(--cz-text); cursor: pointer; }
.cz-fchip:hover { border-color: var(--cz-accent); }
.cz-fchip.is-on { border-color: var(--cz-accent); background: color-mix(in srgb, var(--cz-accent) 14%, transparent); }
.cz-fchip-n { color: var(--cz-text-3); font-size: var(--fs-meta); }
.cz-more select, .cz-team select { font: inherit; font-size: var(--fs-ui); padding: .25rem .5rem; background: var(--cz-surface); color: var(--cz-text); border: 1px solid var(--cz-line); border-radius: var(--cz-radius-sm); }
.cz-freset { margin-left: auto; background: none; border: 0; color: var(--cz-accent-text); font: inherit; font-size: var(--fs-ui); text-decoration: underline; cursor: pointer; }
.cz-fres-h { margin: 0 0 .5rem; font-size: var(--fs-ui); color: var(--cz-text-2); }
.cz-fres { display: flex; flex-direction: column; }
.cz-fcard { display: flex; align-items: center; gap: .875rem; text-align: left; background: none; border: 0; border-top: 1px solid var(--cz-line); padding: .75rem 1.125rem; font: inherit; color: var(--cz-text); cursor: pointer; }
.cz-fcard:hover { background: var(--cz-hover); }
.cz-fcard.is-on { background: var(--cz-hi); box-shadow: inset 3px 0 0 var(--cz-accent); }
.cz-fcard:focus-visible { outline: 2px solid var(--cz-accent); outline-offset: -2px; }
.cz-fcard-main { display: flex; flex-direction: column; min-width: 0; flex: 1; gap: .125rem; }
.cz-fcard-name { font-size: var(--fs-body); font-weight: 600; line-height: 1.25; }
.cz-fcard-meta { color: var(--cz-text-3); font-size: var(--fs-label); }
.cz-fcard-n { display: flex; flex-direction: column; align-items: flex-end; flex: none; color: var(--cz-text-3); font-size: var(--fs-label); }
.cz-fcard-n b { font-family: var(--cz-num-font); font-size: var(--fs-section); color: var(--cz-text); line-height: 1.1; }
.cz-fcard-n.is-zero b { color: var(--cz-bad); }

/* Zertifikatskopf + Inhaber */
/* Nachbesserung: Spaltenbreiten fest, Name und Team · Rolle brechen um statt die Tabelle breiter als die Karte zu machen;
   ist die Karte schmal, stapelt jede Zeile (Containerabfrage statt Fensterbreite — die Seitenleiste frisst Platz). */
.cz-who-right { padding: 0; overflow: hidden; container: cz-holders / inline-size; }
.cz-who-right > .cz-empty { padding: 1rem 1.125rem; }
.cz-certhead { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; padding: 1rem 1.125rem; }
.cz-certhead-main { flex: 1; min-width: 12rem; }
.cz-certhead-t { margin: 0 0 .25rem; font-size: var(--fs-section); font-weight: 600; }
.cz-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid var(--cz-line); border-bottom: 1px solid var(--cz-line); font-size: var(--fs-ui); color: var(--cz-text-2); }
.cz-stats > span { display: flex; flex-direction: column; gap: .125rem; padding: .75rem 1.125rem; }
.cz-stats > span + span { border-left: 1px solid var(--cz-line); }
.cz-stats b { font-family: var(--cz-num-font); font-size: var(--fs-section); color: var(--cz-text); }
.cz-stats .cz-stat--warn b { color: var(--cz-warn); }
.cz-stats .cz-stat--ok b { color: var(--cz-ok); }
.cz-certhead-act { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
.cz-team { display: inline-flex; align-items: center; gap: .375rem; font-size: var(--fs-ui); color: var(--cz-text-2); }
.cz-htools { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1rem; padding: .75rem 1.125rem; border-bottom: 1px solid var(--cz-line); }
.cz-seg { display: inline-flex; margin-left: auto; padding: .125rem; gap: .125rem; background: var(--cz-surface-2); border: 1px solid var(--cz-line); border-radius: var(--cz-radius-sm); }
.cz-seg-btn { background: none; border: 0; border-radius: var(--cz-radius-sm); padding: .25rem .625rem; font: inherit; font-size: var(--fs-ui); color: var(--cz-text-2); cursor: pointer; }
.cz-seg-btn:hover { color: var(--cz-text); }
.cz-seg-btn.is-on { background: var(--cz-surface); color: var(--cz-text); font-weight: 600; box-shadow: 0 0 0 1px var(--cz-line); }
.cz-who-right > .cz-tablewrap { border: 0; border-radius: 0; }
.cz-who-right > .cz-empty:last-child { padding: 1rem 1.125rem; }
.cz-holders { table-layout: fixed; }
.cz-holders td { padding: .625rem .75rem; overflow: hidden; }
.cz-holders td:first-child { padding-left: 1.125rem; }
.cz-holders td:last-child { padding-right: 1.125rem; }
.cz-holders th:nth-child(2), .cz-holders td:nth-child(2) { width: 8.5rem; }
.cz-holders th:nth-child(3), .cz-holders td:nth-child(3) { width: 9rem; }
.cz-hperson { display: flex; flex-direction: column; gap: .125rem; min-width: 0; }
.cz-hperson .cz-person { max-width: 100%; }
.cz-hperson .cz-person-name { min-width: 0; overflow-wrap: anywhere; }
.cz-hperson .cz-row-sub { white-space: normal; overflow-wrap: anywhere; }
.cz-hperson .cz-row-sub { padding-left: 2.25rem; }
.cz-avail { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: .25rem .5rem; min-width: 0; }
.cz-avail-t { font-size: var(--fs-ui); font-weight: 600; }
.cz-avail-n { color: var(--cz-text-3); font-size: var(--fs-meta); font-variant-numeric: tabular-nums; }
.cz-t-ok { color: var(--cz-ok); }
.cz-t-warn { color: var(--cz-warn); }
.cz-t-busy { color: var(--cz-text); }
.cz-t-idle { color: var(--cz-text-3); font-weight: 400; }
.cz-load { grid-column: 1 / -1; height: .3125rem; border-radius: 999px; background: var(--cz-idle-bg); overflow: hidden; }
.cz-load-fill { display: block; height: 100%; background: var(--cz-text-3); }
.cz-load--warn { background: var(--cz-warn); }
.cz-load--ok { background: var(--cz-ok); }
.cz-hvalid { text-align: right; white-space: normal; line-height: 1.9; }
@container cz-holders (max-width: 30rem) {
    .cz-holders, .cz-holders tbody { display: block; }
    .cz-holders tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; border-bottom: 1px solid var(--cz-line); }
    .cz-holders tr:last-child { border-bottom: 0; }
    .cz-holders td, .cz-holders td:nth-child(2), .cz-holders td:nth-child(3) { display: block; width: auto; border-bottom: 0; padding: .5rem 1.125rem; }
    .cz-holders td:nth-child(1) { grid-column: 1 / -1; padding-bottom: .25rem; }
    .cz-holders td:nth-child(2) { grid-column: 1; grid-row: 2; padding-top: 0; padding-right: .5rem; }
    .cz-holders td:nth-child(3) { grid-column: 2; grid-row: 2; padding-top: 0; padding-left: 0; max-width: 11rem; }
}
@media (max-width: 72rem) {
    .cz-who { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 40rem) {
    .cz-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .cz-stats > span:nth-child(3) { border-left: 0; }
    .cz-stats > span:nth-child(n+3) { border-top: 1px solid var(--cz-line); }
    .cz-seg { margin-left: 0; }
}
.cz-tablewrap { padding: 0; overflow-x: auto; }
.cz-table { width: 100%; border-collapse: collapse; font-size: var(--fs-ui); }
.cz-table th { text-align: left; padding: .625rem .75rem; color: var(--cz-text-3); font-size: var(--fs-label); font-weight: 500; border-bottom: 1px solid var(--cz-line); white-space: nowrap; }
.cz-table td { padding: .5rem .75rem; border-bottom: 1px solid var(--cz-line); vertical-align: middle; }
.cz-table tr:last-child td { border-bottom: 0; }
.cz-table .num { text-align: right; font-variant-numeric: tabular-nums; }

/* PR1.468 (#719) — Unterreiter „Katalog" und „Pflege und Prüfung" + Admin-Reiter
   „Zertifikate-Katalog" (components/cert-catalog-admin.js, Host trägt .cz-host). */
.cz-table .ctr { text-align: center; }
.cz-note { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin: 0; padding: .625rem .875rem; background: var(--cz-warn-bg); color: var(--cz-text); border: 1px solid var(--cz-warn); border-radius: var(--cz-radius-sm); font-size: var(--fs-ui); }
.cz-catbar { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem; }
.cz-catbar .cz-search { flex: 1 1 16rem; margin: 0; }
.cz-certlink { display: inline-flex; align-items: center; gap: .5rem; background: none; border: 0; padding: 0; font: inherit; color: var(--cz-text); cursor: pointer; text-align: left; border-radius: var(--cz-radius-sm); }
.cz-certlink:hover span:last-child { text-decoration: underline; }
.cz-src { display: inline-flex; align-items: center; gap: .375rem; white-space: nowrap; }
.cz-src-dot { width: .5rem; height: .5rem; border-radius: 50%; background: var(--cz-idle); flex: none; }
.cz-src--credly .cz-src-dot { background: var(--cz-src-credly, #ff6b00); }
.cz-src--mslearn .cz-src-dot { background: var(--cz-src-mslearn, #0078d4); }
.cz-flag { display: inline-grid; place-items: center; width: 1.75rem; height: 1.75rem; padding: 0; background: var(--cz-surface); color: var(--cz-ok); border: 1px solid var(--cz-line); border-radius: var(--cz-radius-sm); font: inherit; font-weight: 600; cursor: pointer; }
.cz-flag:hover:not(:disabled) { background: var(--cz-hover); }
.cz-flag.is-on { background: var(--cz-ok-bg); border-color: var(--cz-ok); }
.cz-flag.is-on::after { content: ''; width: .3125rem; height: .625rem; margin-top: -.125rem; border: solid currentColor; border-width: 0 2px 2px 0; transform: rotate(45deg); }
.cz-flag:disabled { cursor: not-allowed; opacity: .6; }
.cca-bar { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem; margin-bottom: var(--cz-gap); }
.cca-bar .cz-search { flex: 1 1 16rem; margin: 0; }
.cca-mark { margin-left: .375rem; }
.cca-actions { display: flex; gap: .375rem; justify-content: flex-end; white-space: nowrap; }
.cca-dialog { position: fixed; inset: 0; margin: auto; height: fit-content; width: min(36rem, calc(100vw - 2rem)); max-height: calc(100vh - 2rem); overflow: auto; padding: 1.25rem; background: var(--cz-surface); color: var(--cz-text); border: 1px solid var(--cz-line); border-radius: var(--cz-radius); }
.cca-dialog::backdrop { background: rgba(0, 0, 0, .55); }
.cca-dialog h2 { margin: 0 0 .25rem; font-size: var(--fs-section); }
.cca-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem 1rem; margin-top: 1rem; }
.cca-field { display: flex; flex-direction: column; gap: .25rem; font-size: var(--fs-ui); color: var(--cz-text-2); min-width: 0; }
.cca-field--wide { grid-column: 1 / -1; }
.cca-field :is(input, select) { font: inherit; font-size: var(--fs-body); padding: .5rem .625rem; background: var(--cz-surface-2); color: var(--cz-text); border: 1px solid var(--cz-line); border-radius: var(--cz-radius-sm); min-width: 0; }
.cca-field [aria-invalid="true"] { border-color: var(--cz-bad); }
.cca-error { grid-column: 1 / -1; margin: 0; color: var(--cz-bad); font-size: var(--fs-ui); }
.cca-foot { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: .5rem; margin-top: 1.25rem; }
@media (max-width: 40rem) { .cca-form { grid-template-columns: minmax(0, 1fr); } }
/* PR1.469 (#720) — „Aus Excel übernehmen": Vorschau passt / unklar / übersprungen. */
.cid-dialog { width: min(48rem, calc(100vw - 2rem)); }
.cid-dialog [hidden] { display: none !important; }
.cid-dialog .cca-foot { position: sticky; bottom: -1.25rem; margin-bottom: -1.25rem; padding-block: .75rem; background: var(--cz-surface); border-top: 1px solid var(--cz-line); }
.cid-body { margin-top: .75rem; }
.cid-drop { display: block; padding: 1.5rem 1rem; text-align: center; color: var(--cz-text-2); background: var(--cz-surface-2); border: 1px dashed var(--cz-line); border-radius: var(--cz-radius-sm); cursor: pointer; margin-bottom: .75rem; }
.cid-drop:focus-visible { outline: 2px solid var(--cz-accent); outline-offset: 2px; }
.cid-drop.is-over { border-color: var(--cz-accent); color: var(--cz-text); }
.cid-group { margin-top: 1rem; }
.cid-group h3 { display: inline-flex; align-items: center; gap: .5rem; margin: 0 0 .25rem; font-size: var(--fs-body); }
.cid-group summary { cursor: pointer; }
.cid-group summary:focus-visible { outline: 2px solid var(--cz-accent); outline-offset: 2px; border-radius: var(--cz-radius-sm); }
.cid-list { list-style: none; margin: .5rem 0 0; padding: 0; }
.cid-item { padding: .5rem 0; border-top: 1px solid var(--cz-line); min-width: 0; }
.cid-what, .cid-why { margin: 0; font-size: var(--fs-ui); overflow-wrap: anywhere; }
.cid-why { color: var(--cz-warn); margin-top: .125rem; }
.cid-line { color: var(--cz-text-3); font-variant-numeric: tabular-nums; }
.cid-fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: .5rem 1rem; margin-top: .5rem; }
.cid-next { margin: .75rem 0 0; }
.cz-pcards { display: grid; grid-template-columns: repeat(auto-fill, minmax(13.75rem, 1fr)); gap: .625rem; }
.cz-pcard { display: flex; flex-direction: column; gap: .375rem; }
.cz-pcard-pills { display: flex; gap: .375rem; }
.cz-stack-badges { display: flex; flex-wrap: wrap; gap: .25rem; }

/* Seitenleiste einer Person */
.cz-panel-veil { position: fixed; inset: 0; background: rgba(0, 0, 0, .35); z-index: 900; }
.cz-panel { position: fixed; top: 0; right: 0; bottom: 0; width: min(26.25rem, 100vw); overflow-y: auto; background: var(--cz-surface); color: var(--cz-text); border-left: 1px solid var(--cz-line); box-shadow: -8px 0 24px rgba(0, 0, 0, .25); z-index: 901; padding: 1.25rem; box-sizing: border-box; }
.cz-panel-head { display: flex; align-items: flex-start; justify-content: space-between; gap: .75rem; }
.cz-panel-head h2 { margin: 0; font-size: var(--fs-section); }
.cz-panel-meta { color: var(--cz-text-3); font-size: var(--fs-ui); margin-top: .125rem; }
.cz-panel-facts { display: flex; gap: 1.5rem; margin: 1rem 0; }
.cz-panel-facts dt { color: var(--cz-text-3); font-size: var(--fs-label); }
.cz-panel-facts dd { margin: .125rem 0 0; font-weight: 600; }
.cz-panel-h { margin: .5rem 0; font-size: var(--fs-body); }
.cz-panel-foot { margin-top: 1.25rem; }
@media (prefers-reduced-motion: no-preference) {
    .cz-panel { animation: cz-panel-in .16s var(--ease-out, ease-out); }
}
@keyframes cz-panel-in { from { opacity: 0; } to { opacity: 1; } }

/* Personen-Suchliste: Gruppen „Vorgemerkt für Staffing" / „Weitere" (PR1.464) */
.role-pick-group { padding: .5rem .75rem .25rem; color: var(--text-3); font-size: var(--fs-label); font-weight: 500; }

/* ── PR1.467 (#718) — Unterreiter „Partnerstatus" (cert-partner-view.js), beide Shells.
   Azure-Tabelle mit Eingabefeldern, Sollwert-Editor, Arbeitsliste (Partnerziele: PR1.553 unten).
   Keine Bewegung: Arbeitsansicht für den Partner-Verantwortlichen (Konvention 22). */
.cz-ps-wide { min-width: 0; }
.cz-ps-cardhead { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem .75rem; }
.cz-ps-cardhead .cz-views { margin-bottom: .5rem; }
.cz-ps-label { color: var(--cz-text); font-size: var(--fs-body); }
.cz-ps-num { color: var(--cz-text-2); font-variant-numeric: tabular-nums; white-space: nowrap; }
.cz-ps-num b { color: var(--cz-text); font-size: var(--fs-body); }
.cz-ps-tablewrap { overflow-x: auto; }
.cz-ps-table { width: 100%; border-collapse: collapse; font-size: var(--fs-ui); }
.cz-ps-table th, .cz-ps-table td { padding: .4375rem .5rem; border-top: 1px solid var(--cz-line); text-align: left; vertical-align: middle; }
.cz-ps-table thead th { border-top: 0; color: var(--cz-text-3); font-weight: 600; }
.cz-ps-table tbody th { font-weight: 500; color: var(--cz-text); text-transform: none; letter-spacing: normal; font-size: var(--fs-ui); }
.cz-ps-tablewrap + .cz-hint { margin-top: .75rem; }
.cz-ps-table .cz-ps-n { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.cz-ps-total th, .cz-ps-total td { border-top: 2px solid var(--cz-line); }
.cz-ps-input { width: 4.5rem; padding: .25rem .375rem; border: 1px solid var(--cz-line); border-radius: var(--cz-radius-sm); background: var(--cz-surface-2); color: var(--cz-text); font: inherit; text-align: right; font-variant-numeric: tabular-nums; }
.cz-ps-targets > summary { cursor: pointer; font-weight: 600; color: var(--cz-text); }
.cz-ps-tgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 19rem), 1fr)); gap: .75rem; margin-top: .75rem; }
.cz-ps-tgrid fieldset { border: 1px solid var(--cz-line); border-radius: var(--cz-radius-sm); padding: .5rem .75rem; margin: 0; min-width: 0; }
.cz-ps-tgrid legend { padding: 0 .25rem; color: var(--cz-text-2); font-size: var(--fs-ui); font-weight: 500; }
.cz-ps-tfield { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-start; gap: .375rem .5rem; padding: .25rem 0; font-size: var(--fs-ui); color: var(--cz-text-2); }
.cz-ps-tactions { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem; margin-top: .75rem; }
.cz-ps-meta { color: var(--cz-text-3); font-size: var(--fs-ui); white-space: nowrap; font-variant-numeric: tabular-nums; }
.cz-ps-tfield select.cz-ps-input { width: auto; text-align: left; }
/* Nachbesserung: Feldname steht über Zahl · Herkunft · Stand — so ragt der Stand nicht über den Kartenrand. */
.cz-ps-tfield > label { flex: 1 1 100%; }
.cz-ps-tfield select.cz-ps-input { min-width: 0; max-width: 100%; }
.cz-ps-asof { min-width: 0; font-size: var(--fs-meta); }

/* ── PR1.553 (#834) — Partnerziele: sieben Partner (Entwurf 4b), beide Shells.
   Je Partner drei Spalten: wer · Anforderungen (Ist/Soll-Balken, Strich am Soll, Herkunft) ·
   „Was wir wissen". Partnerportal-Werte schraffiert. Keine Bewegung, keine Übergänge —
   selten besuchte Arbeitsansicht (Konvention 22); die Balkenbreite ändert sich ohne Animation. */
.cz-pz-legend { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1rem; padding: .625rem .875rem; margin-bottom: var(--cz-gap);
    border: 1px solid var(--cz-line); border-radius: var(--cz-radius); background: var(--cz-surface); font-size: var(--fs-ui); }
.cz-pz-leg { display: inline-flex; align-items: center; gap: .375rem; }
.cz-pz-sources { margin-left: auto; }
.cz-pz-sources > summary { cursor: pointer; color: var(--cz-accent-text); font-weight: 600; }
.cz-pz-sources[open] { flex-basis: 100%; margin-left: 0; }
.cz-pz-srclist { margin: .5rem 0 0; padding-left: 1.125rem; display: grid; gap: .375rem; color: var(--cz-text); }
.cz-pz-srclist a { color: var(--cz-accent-text); overflow-wrap: anywhere; }
.cz-pz-banner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem 1rem; padding: .625rem .875rem;
    margin-bottom: var(--cz-gap); border: 1px solid var(--cz-warn); border-radius: var(--cz-radius); background: var(--cz-warn-bg); color: var(--cz-text); }
.cz-pz-emptyhint { margin: 0 0 var(--cz-gap); }
.cz-pz-list { border: 1px solid var(--cz-line); border-radius: var(--cz-radius); background: var(--cz-surface); margin-bottom: var(--cz-gap); }
.cz-pz { display: grid; grid-template-columns: minmax(11rem, 14rem) minmax(0, 1fr) minmax(14rem, 18rem); gap: 1.25rem; padding: 1rem 1.125rem; }
.cz-pz + .cz-pz { border-top: 1px solid var(--cz-line); }
.cz-pz-who { display: flex; flex-direction: column; align-items: flex-start; gap: .375rem; min-width: 0; }
.cz-pz-logo { height: 2rem; width: auto; max-width: 6rem; object-fit: contain; }
/* Dunkles Theme: dunkle Herstellerlogos (Red Hat, VMware) stehen auf einem hellen Chip. */
[data-theme="dark"] img.cz-pz-logo { box-sizing: content-box; padding: .25rem .375rem; border-radius: var(--cz-radius-sm); background: var(--cz-text); }
.cz-pz-logo--mono { display: inline-grid; place-items: center; width: 2.25rem; height: 2.25rem; border-radius: var(--cz-radius-sm);
    background: var(--cz-ok-bg); color: var(--cz-text); font-weight: 700; font-size: var(--fs-ui); }
.cz-pz-name { margin: .25rem 0 0; font-size: var(--fs-body); font-weight: 700; color: var(--cz-text); }
.cz-pz-goal, .cz-pz-hint { margin: 0; color: var(--cz-text-2); font-size: var(--fs-ui); }
/* Nachbesserung: „2 Foundational fehlen · 17 Accredited fehlen“ bricht in der Spalte um statt in die Mitte zu ragen. */
.cz-pz-who .cz-pill { white-space: normal; max-width: 100%; line-height: 1.4; }
.cz-pz-reqs, .cz-pz-know { min-width: 0; }
.cz-pz-cap { margin: 0 0 .375rem; color: var(--cz-text-3); font-size: var(--fs-meta); font-weight: 500; }
.cz-pz-row { display: grid; grid-template-columns: minmax(8rem, 12rem) minmax(5rem, 1fr) minmax(4rem, max-content) 7rem; align-items: center;
    gap: .75rem; padding: .3125rem 0; font-size: var(--fs-ui); color: var(--cz-text); }
.cz-pz-label { min-width: 0; overflow-wrap: anywhere; }
.cz-pz-text { grid-column: 2 / 4; color: var(--cz-text); }
.cz-pz-num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; color: var(--cz-text-2); }
.cz-pz-num b { color: var(--cz-text); }
.cz-pz-unset { display: block; font-size: var(--fs-meta); color: var(--cz-text-3); }
.cz-pz-bar { position: relative; display: flex; height: .625rem; border-radius: 999px; background: var(--cz-idle-bg); }
.cz-pz-fill { display: block; height: 100%; border-radius: inherit; background: var(--cz-accent); }
.cz-pz-fill.is-ok { background: var(--cz-ok); }
.cz-pz-fill.is-warn { background: var(--cz-warn); }
.cz-pz-fill.is-bad { background: var(--cz-bad); }
.cz-pz-fill.is-info { background: var(--cz-accent); }
.cz-pz-bar--hatch, .cz-pz-seg.is-hatch {
    background: repeating-linear-gradient(135deg, var(--cz-idle-bg) 0 .3125rem, transparent .3125rem .625rem); outline: 1px solid var(--cz-line); outline-offset: -1px; }
.cz-pz-bar--stack { overflow: visible; }
.cz-pz-seg { display: block; height: 100%; }
.cz-pz-seg:first-child { border-radius: 999px 0 0 999px; }
.cz-pz-seg:last-of-type { border-radius: 0 999px 999px 0; }
.cz-pz-seg.is-ok { background: var(--cz-ok); }
.cz-pz-seg.is-open { background: var(--cz-ok-bg); }
.cz-pz-seg.is-portal-on { background: var(--cz-accent); }
.cz-pz-tick { position: absolute; top: -.25rem; bottom: -.25rem; width: 2px; margin-left: -1px; background: var(--cz-text); border-radius: 1px; }
.cz-pz-tick--soft { background: var(--cz-text-3); }
.cz-src-tag { justify-self: start; display: inline-block; padding: .0625rem .5rem; border-radius: 999px; font-size: var(--fs-meta); font-weight: 600;
    white-space: nowrap; background: var(--cz-idle-bg); color: var(--cz-text-2); }
.cz-src-tag--official { background: color-mix(in srgb, var(--cz-accent) 14%, transparent); color: var(--cz-accent-text); }
.cz-src-tag--felix { background: color-mix(in srgb, var(--purple) 18%, transparent); color: var(--cz-text); }
.cz-src-tag--portal { background: var(--cz-warn-bg); color: var(--cz-text); }
.cz-src-tag--none { background: var(--cz-bad-bg); color: var(--cz-text); }
.cz-pz-notes { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }
.cz-pz-note { display: grid; grid-template-columns: 1.25rem minmax(0, 1fr); gap: .5rem; padding: .5rem .625rem; border: 1px solid var(--cz-line);
    border-radius: var(--cz-radius-sm); background: var(--cz-surface-2); font-size: var(--fs-ui); color: var(--cz-text); }
.cz-pz-ico { display: inline-grid; place-items: center; width: 1.25rem; height: 1.25rem; border-radius: 50%;
    background: var(--cz-idle-bg); color: var(--cz-text); }
.cz-pz-note.is-warn .cz-pz-ico { background: var(--cz-warn-bg); }
.cz-pz-note.is-ok .cz-pz-ico { background: var(--cz-ok-bg); }
.cz-pz-note.is-bad .cz-pz-ico { background: var(--cz-bad-bg); }
.cz-pz-edit { margin-top: .5rem; }
.cz-pz-edit > summary, .cz-ps-targets > summary { cursor: pointer; font-weight: 600; color: var(--cz-text); }
.cz-pz-editbody { padding-top: .5rem; }
.cz-pz-sources > summary:focus-visible, .cz-pz-edit > summary:focus-visible {
    outline: 2px solid var(--cz-accent); outline-offset: 2px; border-radius: var(--cz-radius-sm); }
@media (max-width: 72rem) {
    .cz-pz { grid-template-columns: minmax(0, 1fr); gap: .75rem; }
}
@media (max-width: 40rem) {
    .cz-pz-row { grid-template-columns: minmax(0, 1fr) max-content; }
    .cz-pz-bar { grid-column: 1 / -1; order: 3; }
    .cz-pz-text { grid-column: 1 / -1; }
}
@media (prefers-reduced-motion: reduce) {
    .cz-pz-fill, .cz-pz-seg { transition: none; }
}

@media (max-width: 56rem) {
    .cz-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .cz-grid2 { grid-template-columns: minmax(0, 1fr); }
    .cz-flbl { width: 100%; }
    .cz-ps-meta { white-space: normal; }
}

/* ── PR1.552 (#833) — Reiter „Lage" (cert-page.js lageHtml), beide Shells.
   Reihe 1: Partnerziele | Bestand je Anbieter | Läuft bald ab (3 → 1 Spalte);
   Reihe 2: Jahresblick | Staffing-Merkliste. Keine Bewegung (mehrmals pro Woche genutzt). */
.cz-lage-top { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1.15fr) minmax(0, 1fr); gap: var(--cz-gap); align-items: stretch; }
.cz-lage-bottom { display: grid; grid-template-columns: minmax(0, 2.3fr) minmax(0, 1fr); gap: var(--cz-gap); align-items: stretch; }
.cz-card-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: .25rem .75rem; margin-bottom: .75rem; }
.cz-card-head .cz-h { margin: 0; }
.cz-card-head .cz-legend { margin-top: 0; }
.cz-h .cz-muted { font-weight: 400; }
.cz-link { background: none; border: 0; padding: 0; font: inherit; font-size: var(--fs-ui); font-weight: 500; color: var(--cz-accent-text); cursor: pointer; border-radius: var(--cz-radius-sm); }
.cz-link:hover { text-decoration: underline; }
.cz-empty .cz-link, .cz-foot .cz-link, .cz-yv-say .cz-link, .cz-yv-gap .cz-link { font-size: inherit; }
.cz-foot { margin: .75rem 0 0; color: var(--cz-text-3); font-size: var(--fs-meta); }
.cz-lg-plan::before { background: var(--cz-accent); }

/* Partnerziele */
.cz-pg-row { display: flex; align-items: flex-start; gap: .75rem; padding: .75rem 0; border-top: 1px solid var(--cz-line); }
.cz-pg-row:first-child { border-top: 0; padding-top: 0; }
.cz-pg-row > .cz-vlogo { width: 2rem; height: 2rem; margin-top: .125rem; }
.cz-pg-main { display: flex; flex-direction: column; gap: .375rem; min-width: 0; flex: 1; }
.cz-pg-top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .25rem .5rem; }
.cz-pg-title { font-weight: 600; }
.cz-pg-top .cz-pill { white-space: normal; }
.cz-pg-bar { display: flex; gap: .25rem; }
.cz-pg-seg { flex: 1; height: .5rem; border-radius: .25rem; background: var(--cz-surface-2); overflow: hidden; }
.cz-pg-fill { display: block; height: 100%; background: var(--cz-warn); }
.cz-pg-seg.is-ok .cz-pg-fill { background: var(--cz-ok); }
.cz-pg-line { color: var(--cz-text-3); font-size: var(--fs-meta); font-variant-numeric: tabular-nums; }

/* Bestand je Anbieter */
.cz-stock-row { display: grid; grid-template-columns: minmax(6rem, 10rem) minmax(0, 1fr) auto; align-items: center; gap: .75rem; width: 100%; padding: .375rem .25rem; background: none; border: 0; font: inherit; color: var(--cz-text); text-align: left; cursor: pointer; border-radius: var(--cz-radius-sm); }
.cz-stock-row:hover { background: var(--cz-hover); }
.cz-stock-name { display: flex; align-items: center; gap: .5rem; min-width: 0; font-size: var(--fs-ui); }
.cz-stock-name > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cz-stock-track { min-width: 0; }
.cz-stock-bar { margin: 0; }
.cz-stock-n { font-size: var(--fs-ui); color: var(--cz-text-2); font-family: var(--cz-num-font); font-variant-numeric: tabular-nums; white-space: nowrap; text-align: right; }
.cz-stock-n b { color: var(--cz-text); font-weight: 600; }

/* Läuft bald ab: Rest hinter „weitere" */
.cz-soonmore { margin-top: .25rem; }
.cz-soonmore > summary { cursor: pointer; padding: .375rem 0; color: var(--cz-accent-text); font-size: var(--fs-ui); font-weight: 500; border-radius: var(--cz-radius-sm); }
.cz-soonmore > summary:focus-visible { outline: 2px solid var(--cz-accent); outline-offset: 2px; }

/* Jahresblick */
.cz-yv { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); border-bottom: 1px solid var(--cz-line); }
.cz-yv-col { display: flex; flex-direction: column; align-items: stretch; gap: .25rem; padding: 0 .25rem; border-left: 1px solid var(--cz-line); }
.cz-yv-col:first-child { border-left: 0; }
.cz-yv-bars { display: flex; align-items: flex-end; justify-content: center; gap: .1875rem; height: 5.5rem; padding-top: 1.25rem; }
.cz-yv-bar { position: relative; flex: 1; max-width: 2.25rem; min-height: 0; border-radius: .1875rem .1875rem 0 0; }
.cz-yv-bar--exp { background: var(--cz-warn); }
.cz-yv-bar--plan { background: var(--cz-accent); }
.cz-yv-n { position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%); padding-bottom: .125rem; color: var(--cz-text); font-family: var(--cz-num-font); font-size: var(--fs-meta); font-weight: 600; font-variant-numeric: tabular-nums; }
.cz-yv-m { text-align: center; color: var(--cz-text-3); font-size: var(--fs-meta); padding-bottom: .25rem; }
.cz-yv-foot { display: flex; flex-wrap: wrap; align-items: flex-start; gap: .75rem 1.5rem; margin-top: .75rem; }
.cz-yv-say { margin: 0; flex: 1 1 16rem; font-size: var(--fs-ui); color: var(--cz-text-2); }
.cz-yv-say b { color: var(--cz-text); }
.cz-yv-say b.cz-t-bad { color: var(--cz-bad); }
.cz-yv-gap { margin: 0; flex: 1 1 20rem; padding: .5rem .75rem; border-radius: var(--cz-radius-sm); background: var(--cz-warn-bg); color: var(--cz-text); font-size: var(--fs-ui); }

@media (max-width: 72rem) {
    .cz-lage-top { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
    .cz-lage-top > #cz-soon { grid-column: 1 / -1; }
}
@media (max-width: 56rem) {
    .cz-lage-top, .cz-lage-bottom { grid-template-columns: minmax(0, 1fr); }
    .cz-yv { grid-template-columns: repeat(6, minmax(0, 1fr)); row-gap: .5rem; }
    .cz-yv-col:nth-child(7) { border-left: 0; }
}

/* ── PR1.466 (#717) — Unterreiter „Planung" (cert-plan-view.js), beide Shells.
   Board mit vier Spalten (4 → 2 → 1), Karten, Soll-und-Ist-Säulen, Dialog „bestanden".
   Keine Bewegung: Arbeitsansicht, wöchentlich genutzt (Konvention 22). */
.cz-plan-bar { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1rem; margin-bottom: .75rem; font-size: var(--fs-ui); }
.cz-plan-year { display: inline-flex; align-items: center; gap: .5rem; color: var(--cz-text-2); }
.cz-plan-note { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem 1rem; margin-bottom: .75rem; }
.cz-plan-note p { margin: 0; }
.cz-plan-note--bad { border-color: var(--cz-bad); background: var(--cz-bad-bg); }
.cz-plan-new { margin-bottom: .75rem; }
.cz-plan-new > summary, .cz-plan-targets > summary { cursor: pointer; font-weight: 600; color: var(--cz-text); }
.cz-plan-form { display: grid; grid-template-columns: minmax(12rem, 1.2fr) minmax(14rem, 2fr) minmax(9rem, .8fr) minmax(8rem, .8fr); gap: .75rem; align-items: end; margin-top: .75rem; }
.cz-plan-form label { display: flex; flex-direction: column; gap: .25rem; min-width: 0; font-size: var(--fs-ui); color: var(--cz-text-2); }
.cz-plan-form .cz-ps-input, .cz-plan-dlg .cz-ps-input { width: 100%; min-height: 2.25rem; box-sizing: border-box; text-align: left; padding: .375rem .5rem; }
.cz-plan-form-actions { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: .75rem; }
.cz-plan-form-actions .is-bad { color: var(--cz-bad); }
.cz-plan-board { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .75rem; align-items: start; }
.cz-plan-col { background: var(--cz-surface-2); border: 1px solid var(--cz-line); border-radius: var(--cz-radius); padding: .625rem; min-width: 0; }
.cz-plan-col-h { display: flex; align-items: center; justify-content: space-between; margin: 0 0 .5rem; font-size: var(--fs-ui); font-weight: 500; color: var(--cz-text-2); }
.cz-plan-col-h:focus-visible { outline: 2px solid var(--cz-accent); outline-offset: 2px; }
.cz-plan-count { font-variant-numeric: tabular-nums; color: var(--cz-text-3); }
.cz-plan-cards { list-style: none; display: flex; flex-direction: column; gap: .5rem; margin: 0; padding: 0; }
.cz-plan-colempty { margin: .25rem 0; color: var(--cz-text-3); font-size: var(--fs-ui); }
.cz-plan-card { display: flex; flex-direction: column; gap: .375rem; padding: .625rem; background: var(--cz-surface); border: 1px solid var(--cz-line); border-radius: var(--cz-radius-sm); }
.cz-plan-card-top { display: flex; align-items: flex-start; gap: .5rem; }
.cz-plan-card-name { font-size: var(--fs-ui); font-weight: 500; color: var(--cz-text); overflow-wrap: anywhere; }
.cz-plan-card-meta { font-size: var(--fs-meta); color: var(--cz-text-3); font-variant-numeric: tabular-nums; }
.cz-plan-card-foot { display: flex; align-items: center; justify-content: space-between; gap: .5rem; min-width: 0; }
.cz-plan-prio { flex: none; padding: 0 .3125rem; border-radius: var(--cz-radius-sm); background: var(--cz-idle-bg); color: var(--cz-text-2); font-size: var(--fs-label); font-weight: 500; }
.cz-plan-prio--1 { background: var(--cz-bad-bg); color: var(--cz-bad); }
.cz-plan-moves { display: flex; flex-wrap: wrap; gap: .25rem; }
.cz-plan-mini { padding: .0625rem .375rem; border: 1px solid var(--cz-line); border-radius: var(--cz-radius-sm); background: none; color: var(--cz-accent-text); font: inherit; font-size: var(--fs-label); cursor: pointer; }
.cz-plan-mini:hover { border-color: var(--cz-accent); }
.cz-plan-mini--quiet { color: var(--cz-text-3); }
.cz-plan-mini--bad { color: var(--cz-bad); border-color: var(--cz-bad); }
.cz-plan-empty { margin-bottom: .75rem; }
.cz-plan-chart { display: block; width: 100%; height: auto; max-width: 35rem; }
.cz-plan-grid { stroke: var(--cz-line); stroke-width: 1; }
.cz-plan-axis { fill: var(--cz-text-3); font-size: var(--fs-meta); font-variant-numeric: tabular-nums; }
.cz-plan-val { fill: var(--cz-text-2); font-size: var(--fs-meta); font-variant-numeric: tabular-nums; }
.cz-plan-bar-plan { fill: var(--cz-hi); stroke: var(--cz-accent); stroke-width: 1; }
.cz-plan-bar-ist { fill: var(--cz-accent); }
.cz-plan-goal { stroke: var(--cz-warn); stroke-width: 1.5; stroke-dasharray: 5 4; }
.cz-plan-goal-t { fill: var(--cz-warn); font-size: var(--fs-meta); font-weight: 500; }
.cz-plan-legend { display: flex; flex-wrap: wrap; gap: .25rem 1rem; margin-bottom: .5rem; font-size: var(--fs-meta); color: var(--cz-text-2); }
.cz-plan-lg { display: inline-flex; align-items: center; gap: .375rem; }
.cz-plan-lg::before { content: ""; width: .75rem; height: .75rem; border-radius: 2px; }
.cz-plan-lg--ist::before { background: var(--cz-accent); }
.cz-plan-lg--plan::before { background: var(--cz-hi); border: 1px solid var(--cz-accent); box-sizing: border-box; }
.cz-plan-lg--goal::before { height: 0; border-top: 2px dashed var(--cz-warn); }
.cz-plan-si { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); gap: var(--cz-gap); align-items: start; }
.cz-plan-tablescroll { overflow-x: auto; margin: 0 -1.125rem; padding: 0 1.125rem; }
.cz-plan-table { width: 100%; }
.cz-plan-table th, .cz-plan-table td { white-space: nowrap; }
.cz-plan-tablescroll + .cz-hint { margin-top: .75rem; }
.cz-plan-table tfoot th, .cz-plan-table tfoot td { border-top: 2px solid var(--cz-line); font-weight: 600; }
.cz-plan-grad { display: inline-flex; align-items: center; gap: .5rem; font-size: var(--fs-meta); color: var(--cz-text-2); font-variant-numeric: tabular-nums; white-space: nowrap; }
.cz-plan-grad-bar { display: inline-block; width: 4rem; height: .375rem; border-radius: 999px; background: var(--cz-idle-bg); overflow: hidden; }
.cz-plan-grad-bar > span { display: block; height: 100%; background: var(--cz-accent); }
.cz-plan-targets { margin-top: var(--cz-gap); }
.cz-plan-tgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr)); gap: .25rem 1.25rem; margin-top: .75rem; }
.cz-plan-panel { list-style: none; margin: 0 0 1rem; padding: 0; display: flex; flex-direction: column; gap: .5rem; }
.cz-plan-panel li { display: flex; align-items: center; gap: .5rem; font-size: var(--fs-ui); }
.cz-plan-panel li > span:nth-child(2) { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.cz-plan-panel-name { color: var(--cz-text); overflow-wrap: anywhere; }
.cz-plan-dlg { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); width: min(28rem, calc(100vw - 2rem)); max-height: calc(100vh - 2rem); overflow-y: auto; box-sizing: border-box; padding: 1.25rem; background: var(--cz-surface); color: var(--cz-text); border: 1px solid var(--cz-line); border-radius: var(--cz-radius); box-shadow: 0 12px 32px rgba(0, 0, 0, .3); z-index: 901; }
.cz-plan-dlg h2 { margin: 0 0 .5rem; font-size: var(--fs-section); }
.cz-plan-dlg p { margin: 0 0 .75rem; font-size: var(--fs-body); color: var(--cz-text-2); }
.cz-plan-dlg form { display: flex; flex-direction: column; gap: .75rem; }
.cz-plan-dlg label { display: flex; flex-direction: column; gap: .25rem; font-size: var(--fs-ui); color: var(--cz-text-2); }
.cz-plan-dlg-msg { margin: 0; min-height: 1em; color: var(--cz-bad); font-size: var(--fs-ui); }
.cz-plan-dlg-actions { display: flex; justify-content: flex-end; gap: .5rem; }
.cz-plan-dlg :is(button, input):focus-visible { outline: 2px solid var(--cz-accent); outline-offset: 2px; }
@media (max-width: 56rem) {
    .cz-plan-board { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .cz-plan-si { grid-template-columns: minmax(0, 1fr); }
    .cz-plan-form { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}
@media (max-width: 32.5rem) {
    .cz-plan-board, .cz-plan-form { grid-template-columns: minmax(0, 1fr); }
}

/* ── PR1.465 (#716) — Mitarbeiter-Matrix (Markup geteilt: components/cert-matrix.js) ──
   Stabil: feste Spaltenbreiten (Name 210 · Zertifikat 52 · Anzahl 64 px), table-layout fixed —
   Auf-/Zuklappen ändert nur die Zahl der Spalten, nie ihre Breite. Kopf klebt oben (drei
   Stufen mit festen Höhen), Namen kleben links, Summenzeile klebt unten, eigener
   Scrollrahmen. Fadenkreuz über --cz-hi als Bildebene, damit klebende Zellen deckend
   bleiben. Keine Animation (täglich genutzt). */
.cz-host { --cz-hi: color-mix(in srgb, var(--cz-accent) 16%, transparent); }
.cz-matrix-card { padding-bottom: .75rem; }
.cz-mtools { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1.25rem; margin-bottom: .75rem; font-size: var(--fs-ui); }
.cz-mfilter { display: inline-flex; align-items: center; gap: .5rem; color: var(--cz-text-2); }
.cz-mfilter select { min-width: 11rem; }
.cz-mtog { display: inline-flex; align-items: center; gap: .375rem; color: var(--cz-text); cursor: pointer; }
.cz-mwrap { max-height: min(70vh, 720px); overflow: auto; border: 1px solid var(--cz-line); border-radius: var(--cz-radius-sm); }
.cz-mwrap:focus-visible { outline: 2px solid var(--cz-accent); outline-offset: 2px; }
/* width: 1px — feste Tabellen werden so breit wie die Summe ihrer <col>; max-content schaltet in Chromium zurück auf Inhaltsbreiten. */
.cz-matrix { table-layout: fixed; width: 1px; border-collapse: separate; border-spacing: 0; font-size: var(--fs-ui); }
.cz-matrix col.cz-mc-name { width: 210px; }
.cz-matrix col.cz-mc-cert { width: 52px; }
.cz-matrix col.cz-mc-sum { width: 64px; }
.cz-matrix th, .cz-matrix td { padding: 0; background-color: var(--cz-surface); border-bottom: 1px solid var(--cz-line); overflow: hidden; text-align: center; vertical-align: middle; }
.cz-matrix thead th { position: sticky; z-index: 2; background-color: var(--cz-surface-2); color: var(--cz-text-2); font-weight: 600; }
.cz-matrix thead tr:nth-child(1) th { top: 0; height: 38px; }
.cz-matrix thead tr:nth-child(2) th { top: 38px; height: 24px; }
.cz-matrix thead tr:nth-child(3) th { top: 62px; height: 58px; background-color: var(--cz-surface); box-shadow: 0 1px 0 var(--cz-line); }
.cz-matrix .cz-mname { position: sticky; left: 0; z-index: 1; padding: 0 .625rem; text-align: left; font-weight: 400; white-space: nowrap; text-overflow: ellipsis; box-shadow: 1px 0 0 var(--cz-line); }
.cz-matrix thead .cz-mcorner { left: 0; top: 0; z-index: 4; vertical-align: bottom; padding-bottom: .5rem; background-color: var(--cz-surface); color: var(--cz-text-3); font-size: var(--fs-label); }
.cz-matrix .cz-mname .cz-person { max-width: 100%; overflow: hidden; }
.cz-matrix .cz-mname .cz-person-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cz-matrix tbody tr { height: 34px; }
.cz-matrix tbody tr:nth-child(even) > * { background-color: var(--cz-surface-2); }
.cz-matrix tfoot > tr > * { position: sticky; bottom: 0; z-index: 1; height: 32px; background-color: var(--cz-surface-2); border-top: 1px solid var(--cz-line); font-weight: 600; color: var(--cz-text); font-variant-numeric: tabular-nums; font-family: var(--cz-num-font); }
.cz-matrix tfoot .cz-mname { z-index: 3; }
.cz-matrix .cz-sv { border-left: 1px solid var(--cz-line); }
.cz-matrix .cz-st { border-left: 1px dashed var(--cz-line); }
.cz-matrix tr.is-hi-row > *, .cz-matrix tbody tr:hover > *, .cz-matrix .is-hi { background-image: linear-gradient(var(--cz-hi), var(--cz-hi)); }
.cz-matrix tbody tr:hover > .is-hi, .cz-matrix tr.is-hi-row > .is-hi { background-image: linear-gradient(var(--cz-hi), var(--cz-hi)), linear-gradient(var(--cz-hi), var(--cz-hi)); }
/* Zellen schneiden über (overflow: hidden) — der Fokusrahmen liegt darum innen. */
.cz-matrix button:focus-visible { outline-offset: -2px; }
.cz-mfold, .cz-mtheme, .cz-mcert { background: none; border: 0; font: inherit; color: inherit; cursor: pointer; border-radius: var(--cz-radius-sm); }
.cz-mfold { display: inline-flex; align-items: center; gap: .375rem; max-width: calc(100% - .5rem); padding: .125rem .375rem; font-size: var(--fs-meta); font-weight: 500; color: var(--cz-text); }
.cz-mvname { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cz-mcaret, .cz-mvn, .cz-mth-n { color: var(--cz-text-3); font-weight: 400; }
.cz-mtheme { display: block; width: calc(100% - .375rem); margin: 0 auto; padding: .125rem .25rem 0; border-top: 2px solid var(--cz-line); font-size: var(--fs-label); font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--cz-text-2); }
.cz-mth-lbl { font-size: var(--fs-label); color: var(--cz-text-3); }
.cz-mfold:hover, .cz-mtheme:hover, .cz-mcert:hover { color: var(--cz-accent-text); background-color: var(--cz-hover); }
.cz-mcert { display: flex; flex-direction: column; align-items: center; gap: .25rem; width: 100%; padding: .25rem 0; }
.cz-mcc { display: block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--fs-label); font-weight: 500; }
.cz-msum .cz-mcc { color: var(--cz-text-3); font-weight: 400; }
.cz-mx { display: inline-flex; align-items: center; justify-content: center; width: 1.375rem; height: 1.375rem; border-radius: 50%; font-size: var(--fs-meta); font-weight: 500; line-height: 1; }
/* Icon-Zellen (Häkchen-Kästchen, Kreuz) tragen ihre Farbe selbst; nur das Ausrufezeichen behält den Kreis. */
.cz-mx:has(.ic) { background: none; }
.cz-mx .ic { width: 1rem; height: 1rem; }
.cz-mcaret .ic { width: .625rem; height: .625rem; vertical-align: -1px; }
.cz-mlegend .cz-mx .ic { width: .625rem; height: .625rem; }
.cz-mx--ok { background: var(--cz-ok-bg); color: var(--cz-ok); }
.cz-mx--idle { background: var(--cz-idle-bg); color: var(--cz-idle); }
.cz-mx--warn { background: var(--cz-warn-bg); color: var(--cz-warn); }
.cz-mx--bad { background: var(--cz-bad-bg); color: var(--cz-bad); }
.cz-mcnt { display: inline-block; min-width: 1.625rem; padding: .0625rem .5rem; border-radius: 999px; background: color-mix(in srgb, var(--cz-accent) 14%, transparent); color: var(--cz-accent-text); font-size: var(--fs-meta); font-weight: 500; font-variant-numeric: tabular-nums; }
.cz-mcnt.is-zero { background: transparent; color: var(--cz-text-3); font-weight: 400; }
.cz-mlegend { flex-wrap: wrap; align-items: center; margin-top: .75rem; }
.cz-mlegend .cz-mx { width: 1rem; height: 1rem; font-size: var(--fs-label); vertical-align: -3px; margin-right: .25rem; }
.cz-mlegend .cz-mcnt { font-size: var(--fs-label); margin-right: .25rem; }
.cz-mstack-v { display: flex; flex-wrap: wrap; gap: .375rem .75rem; }
.cz-mstack-g { display: inline-flex; align-items: center; gap: .25rem; }
.cz-mstack-b { background: none; border: 0; padding: 0; cursor: pointer; border-radius: var(--cz-radius-sm); }
.cz-mstack-b:disabled { cursor: default; }
.cz-mstack-b.is-bad { opacity: .35; }

/* ── PR1.463 (#714) — Zertifikats-Zeilen der Mitarbeiter-Maske (cert-rows-editor.js) ──
   Oben bündig statt unten: der Hinweis unter „gültig bis" machte die Zelle höher und
   schob bei `align-items: end` deren Beschriftung über die der Nachbarn. Haken und
   Entfernen rücken deshalb um eine Beschriftungshöhe (--cre-label-h) nach unten.
   Eine Maske für beide Shells, darum nur hier. Breit: eine Reihe (Name · bestanden am ·
   gültig bis · Haken · Entfernen). Schmal (Container < 720px): Name oben über die volle
   Breite, Daten und Haken darunter. Keine Bewegung — Pflegeformular (Konvention 22).
   `min-width: 0` am Namen: sonst schiebt ein langer Name die Datumsfelder aus der Zeile. */
.cert-rows-editor { --cre-label-h: calc(.74rem * 1.5 + 4px); container-type: inline-size; display: flex; flex-direction: column; gap: 8px; }
.cert-rows-editor .cre-rows:empty { display: none; }
.cert-rows-editor .cre-rows { display: flex; flex-direction: column; }
.cert-rows-editor .cre-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 9.5rem 9.5rem auto auto;
  gap: 8px 10px;
  align-items: start;
  padding: 8px 0;
  border-top: 1px solid var(--border);
}
.cert-rows-editor .cre-row:first-child { border-top: 0; padding-top: 0; }
.cert-rows-editor .cre-cell { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.cert-rows-editor .cre-cell input:where(:not([type="checkbox"])) { width: 100%; }
.cert-rows-editor .form-group label.cre-label,
.cert-rows-editor label.cre-label { font-size: var(--fs-meta); font-weight: 500; color: var(--text-2); }
.cert-rows-editor .cre-auto { min-height: 1.1em; font-size: var(--fs-label); color: var(--text-2); }
.cert-rows-editor .cre-cell--checks { flex-direction: column; gap: 4px; padding-top: var(--cre-label-h); }
.cert-rows-editor label.cre-check {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: var(--fs-ui); color: var(--text-1); white-space: nowrap; cursor: pointer;
}
.cert-rows-editor .cre-remove { margin-top: var(--cre-label-h); }
.cert-rows-editor .cre-add { align-self: flex-start; }
.cert-rows-editor .cre-empty,
.cert-rows-editor .cre-status { margin: 0; }
.cert-rows-editor .cre-status[data-state="error"] { color: var(--warning, var(--text-1)); }
@container (max-width: 719px) {
  .cert-rows-editor .cre-row { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto; }
  .cert-rows-editor .cre-cell--checks { grid-column: 1 / 3; flex-direction: row; flex-wrap: wrap; gap: 6px 16px; padding-top: 0; }
  .cert-rows-editor .cre-remove { grid-column: 3; grid-row: 1; }
  .cert-rows-editor .cre-cell--name { grid-column: 1 / 3; }
}

/* ─────────────────────────────────────────
   PR1.481 (#739) — Reiter „Project Excellence" + Verlauf (Markup geteilt:
   components/project-excellence-view.js). Der Aufbau steht hier EINMAL für beide Shells;
   style-redesign.css belegt nur Flächen/Text mit den Redesign-Tokens um (Muster .cz-host).
   Die Ampel-Palette (abgenommener Entwurf A8) steht hier je Theme, damit Symbol und Fläche
   in hell und dunkel ≥ 4,5:1 halten. Keine Animation (mehrmals pro Woche genutzt).
   ───────────────────────────────────────── */
.pex-host {
    --pex-surface: var(--bg-card);
    --pex-surface-2: var(--bg-card2);
    --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(--primary);
    --pex-accent-text: var(--primary-text);
    --pex-tint: color-mix(in srgb, var(--primary) 14%, transparent);
    --pex-radius: var(--radius);
    /* Ampeln — dunkel (Legacy-Standard) */
    --pex-g: #8FD14F; --pex-y: #F2B33D; --pex-r: #FF7A80; --pex-n: #8394A8; --pex-y-ring: #F2B33D;
    --pex-on-g: #0B1828; --pex-on-y: #0B1828; --pex-on-r: #0B1828;
    --pex-ok-text: #A6DE6E; --pex-ok-bg: #1B2D0A;
    --pex-warn-text: #FFC266; --pex-warn-bg: #3A2A10;
    --pex-bad-text: #FF9A9F; --pex-bad-bg: #3A1F20;
    --pex-idle-text: #B4C0CF; --pex-idle-bg: #18334F;
    color: var(--pex-text);
}
[data-theme="light"] .pex-host,
.crm .pex-host {
    --pex-g: #347C18; --pex-y: #E5A300; --pex-r: #C4353A; --pex-n: #6E7D8F; --pex-y-ring: #B07A00;
    --pex-on-g: #FFFFFF; --pex-on-y: #2A1C00; --pex-on-r: #FFFFFF;
    --pex-ok-text: #2F6B12; --pex-ok-bg: #E6F4DA;
    --pex-warn-text: #8A4B00; --pex-warn-bg: #FFF1D6;
    --pex-bad-text: #B02A30; --pex-bad-bg: #FDECEC;
    --pex-idle-text: #4D5B6C; --pex-idle-bg: #EEF1F5;
}
.crm.dark .pex-host,
html[data-theme="dark"] .crm .pex-host {
    --pex-g: #8FD14F; --pex-y: #F2B33D; --pex-r: #FF7A80; --pex-n: #8394A8; --pex-y-ring: #F2B33D;
    --pex-on-g: #0B1828; --pex-on-y: #0B1828; --pex-on-r: #0B1828;
    --pex-ok-text: #A6DE6E; --pex-ok-bg: #1B2D0A;
    --pex-warn-text: #FFC266; --pex-warn-bg: #3A2A10;
    --pex-bad-text: #FF9A9F; --pex-bad-bg: #3A1F20;
    --pex-idle-text: #B4C0CF; --pex-idle-bg: #18334F;
}
.pex { display: flex; flex-direction: column; gap: .875rem; min-width: 0; }
.pex-host :is(button, select, input, a, [tabindex]):focus-visible { outline: 2px solid var(--pex-accent); outline-offset: 2px; }
.pex-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Kopf + Umschalter */
.pex-kopf { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: .75rem; }
.pex-titel { margin: 0; font-size: var(--fs-title); font-weight: 600; text-transform: none; letter-spacing: normal; color: var(--pex-text); }
.pex-sub { margin: .125rem 0 0; color: var(--pex-text-3); font-size: var(--fs-ui); }
.pex-kopf-rechts { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; }
.pex-seg { display: inline-flex; border: 1px solid var(--pex-line); border-radius: var(--pex-radius); overflow: hidden; }
.pex-seg-btn { background: var(--pex-surface); border: 0; padding: .4375rem .875rem; font: inherit; font-size: var(--fs-ui); color: var(--pex-text-2); cursor: pointer; }
.pex-seg-btn + .pex-seg-btn { border-left: 1px solid var(--pex-line); }
.pex-seg-btn.is-on { background: var(--pex-accent); color: #fff; font-weight: 600; cursor: default; }
.pex-seg-btn:disabled { cursor: not-allowed; color: var(--pex-text-3); }
.pex-legende { display: inline-flex; flex-wrap: wrap; gap: .75rem; font-size: var(--fs-meta); color: var(--pex-text-2); }
.pex-legende > span { display: inline-flex; align-items: center; gap: .3125rem; }

/* Kacheln */
.pex-kacheln { display: grid; grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr)); gap: .625rem; }
.pex-kachel { display: flex; flex-direction: column; gap: .125rem; text-align: left; background: var(--pex-surface); border: 1px solid var(--pex-line); border-radius: var(--pex-radius); padding: .75rem .875rem; font: inherit; color: var(--pex-text); }
button.pex-kachel { cursor: pointer; }
button.pex-kachel:hover { border-color: var(--pex-text-3); }
.pex-kachel.is-on { border-color: var(--pex-accent); box-shadow: inset 0 0 0 1px var(--pex-accent); }
.pex-kachel-zahl { font-size: var(--fs-title); font-weight: 600; line-height: 1.15; font-variant-numeric: tabular-nums; }
.pex-kachel--bad .pex-kachel-zahl { color: var(--pex-bad-text); }
.pex-kachel--warn .pex-kachel-zahl { color: var(--pex-warn-text); }
.pex-kachel-label { font-size: var(--fs-ui); font-weight: 500; }
.pex-kachel-sub { font-size: var(--fs-meta); color: var(--pex-text-3); }
.pex-kachel--quote { background: var(--pex-surface-2); }

/* Filter */
.pex-filter { display: flex; flex-wrap: wrap; align-items: flex-end; gap: .5rem .75rem; }
.pex-feld { display: flex; flex-direction: column; gap: .1875rem; font-size: var(--fs-meta); color: var(--pex-text-3); font-weight: 500; }
.pex-input { min-height: 2.125rem; padding: .3125rem .625rem; border: 1px solid var(--pex-line); border-radius: var(--pex-radius); background: var(--pex-surface); color: var(--pex-text); font: inherit; font-size: var(--fs-ui); font-weight: 400; }
input.pex-input { width: 14rem; max-width: 100%; }
select.pex-input { max-width: 14rem; }
.pex-chip { min-height: 2.125rem; padding: .3125rem .875rem; border: 1px solid var(--pex-line); border-radius: 999px; background: var(--pex-surface); color: var(--pex-text-2); font: inherit; font-size: var(--fs-ui); cursor: pointer; }
.pex-chip.is-on { background: var(--pex-accent); border-color: var(--pex-accent); color: #fff; }
.pex-anzahl { margin: 0; font-size: var(--fs-meta); color: var(--pex-text-3); }

/* Matrix — Kopf sticky, Projektspalte fixiert, alles einzeilig, eigener Scroll-Rahmen */
.pex-tabwrap { overflow: auto; max-height: calc(100vh - 13rem); min-height: 12rem; border: 1px solid var(--pex-line); border-radius: var(--pex-radius); background: var(--pex-surface); }
.pex-tab { width: 100%; border-collapse: separate; border-spacing: 0; font-size: var(--fs-ui); }
.pex-tab th, .pex-tab td { padding: .5rem .625rem; white-space: nowrap; text-align: left; vertical-align: middle; border-bottom: 1px solid var(--pex-line); background: var(--pex-surface); text-transform: none; letter-spacing: normal; font-size: var(--fs-ui); color: var(--pex-text); }
/* Kopf der Ampel-Spalten darf umbrechen (Kunden-/zufriedenheit) — die Zeilen bleiben einzeilig. */
.pex-tab thead th.pex-c { white-space: normal; }
.pex-tab thead th.pex-c .pex-sort { white-space: normal; text-align: center; justify-content: center; hyphens: manual; max-width: 6.5rem; }
.pex-tab thead th { position: sticky; top: 0; z-index: 2; background: var(--pex-surface-2); }
.pex-tab .pex-sticky { position: sticky; left: 0; z-index: 1; box-shadow: 1px 0 0 var(--pex-line); }
.pex-tab thead .pex-sticky { z-index: 3; }
.pex-tab .pex-c { text-align: center; }
.pex-sort { display: inline-flex; align-items: center; gap: .25rem; background: none; border: 0; padding: 0; font: inherit; font-size: var(--fs-meta); font-weight: 500; color: var(--pex-text-3); cursor: pointer; white-space: nowrap; }
.pex-sort.is-on { color: var(--pex-accent-text); }
.pex-pfeil { display: inline-flex; }
.pex-pfeil svg { width: .75rem; height: .75rem; }
.pex-row { cursor: pointer; }
.pex-row:hover > * { background: var(--pex-hover); }
.pex-row.is-on > * { background: var(--pex-tint); }
.pex-row:focus-visible { outline: 2px solid var(--pex-accent); outline-offset: -2px; }
.pex-name { font-weight: 600; }
.pex-ell { display: block; overflow: hidden; text-overflow: ellipsis; max-width: 16rem; }
.pex-ell-td .pex-ell { max-width: 11rem; color: var(--pex-text-2); }
.pex-verlauf { display: inline-flex; align-items: center; gap: .375rem; padding: .125rem; }
.pex-meld-a { font-weight: 500; }
.pex-meld-b { color: var(--pex-text-3); }
.pex-meld--over .pex-meld-a { color: var(--pex-warn-text); font-weight: 600; }
.pex-opt .pex-sort, th.pex-opt { opacity: .8; }
.pex-keine { padding: 2rem 1rem !important; text-align: center !important; color: var(--pex-text-2); white-space: normal !important; }
.pex-keine .pex-chip { margin-left: .5rem; }
.pex-ph { display: block; height: .75rem; width: 70%; border-radius: .25rem; background: var(--pex-surface-2); }
.pex-legende-text { margin: 0; font-size: var(--fs-meta); color: var(--pex-text-3); max-width: 60rem; }

/* Ampel-Plaketten: Grün ✓ · Gelb ! · Rot ✕ · keine Angabe gestrichelt — Farbe nie allein */
.pex-amp { display: inline-flex; align-items: center; justify-content: center; flex: none; box-sizing: border-box; width: 1.375rem; height: 1.375rem; border-radius: 50%; font: 500 var(--fs-ui)/1 'Fira Sans', system-ui, sans-serif; vertical-align: middle; }
.pex-amp--ok { background: var(--pex-g); color: var(--pex-on-g); }
.pex-amp--ok::after { content: '✓'; }
.pex-amp--warn { background: var(--pex-y); color: var(--pex-on-y); box-shadow: inset 0 0 0 1px var(--pex-y-ring); }
.pex-amp--warn::after { content: '!'; }
.pex-amp--bad { background: var(--pex-r); color: var(--pex-on-r); }
.pex-amp--bad::after { content: '✕'; font-size: var(--fs-label); }
.pex-amp--none, .pex-amp--neutral { border: 1.5px dashed var(--pex-n); color: var(--pex-n); }
.pex-amp--none::after, .pex-amp--neutral::after { content: '–'; }
.pex-amp--leer { border: 1.5px solid var(--pex-line); }
.pex-amp--neu { outline: 2px solid var(--pex-text-2); outline-offset: 2px; }
.pex-amp--opt { opacity: .6; }
.pex-amp--sm { width: 1rem; height: 1rem; font-size: var(--fs-label); }
.pex-amp--sm.pex-amp--bad::after { font-size: var(--fs-label); }

/* Zustände */
.pex-zustand { display: flex; flex-direction: column; align-items: flex-start; gap: .5rem; padding: 2rem 1.5rem; border: 1px dashed var(--pex-line); border-radius: var(--pex-radius); background: var(--pex-surface); }
.pex-zustand-titel { margin: 0; font-weight: 500; font-size: var(--fs-body); }
.pex-zustand-text { margin: 0; color: var(--pex-text-2); font-size: var(--fs-ui); }

/* Schild */
.pex-pill { display: inline-flex; align-items: center; padding: .1875rem .625rem; border-radius: 999px; font-size: var(--fs-meta); font-weight: 500; white-space: nowrap; }
.pex-pill--ok { background: var(--pex-ok-bg); color: var(--pex-ok-text); }
.pex-pill--warn { background: var(--pex-warn-bg); color: var(--pex-warn-text); }
.pex-pill--bad { background: var(--pex-bad-bg); color: var(--pex-bad-text); }
.pex-pill--neutral, .pex-pill--none { background: var(--pex-idle-bg); color: var(--pex-idle-text); }

/* Seitenleiste */
.pex-veil { position: fixed; inset: 0; background: rgba(0, 0, 0, .35); z-index: 900; }
.pex-panel { position: fixed; top: 0; right: 0; bottom: 0; width: min(36rem, 100vw); overflow-y: auto; background: var(--pex-surface); color: var(--pex-text); border-left: 1px solid var(--pex-line); box-shadow: -8px 0 24px rgba(0, 0, 0, .25); z-index: 901; padding: 1.25rem; box-sizing: border-box; display: flex; flex-direction: column; gap: 1rem; }
.pex-panel-kopf { display: flex; align-items: flex-start; justify-content: space-between; gap: .75rem; }
.pex-panel-ueber { font-size: var(--fs-label); color: var(--pex-text-3); font-weight: 500; }
.pex-panel-titel { margin: .125rem 0 0; font-size: var(--fs-section); overflow-wrap: anywhere; text-transform: none; letter-spacing: normal; color: var(--pex-text); }
.pex-panel-meta { color: var(--pex-text-3); font-size: var(--fs-ui); margin-top: .125rem; }
.pex-panel-status { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .75rem; }
.pex-panel-meld { font-size: var(--fs-ui); color: var(--pex-text-2); }

/* Verlauf: Raster „Bereiche im Zeitverlauf" + Zeitstrahl (Seitenleiste + Projekt-Detail) */
.pex-verlaufblock { display: flex; flex-direction: column; gap: .5rem; min-width: 0; }
.pex-h { margin: .25rem 0 0; font-size: var(--fs-label); color: var(--pex-text-3, var(--text-3)); font-weight: 500; }
.pex-raster-wrap { overflow-x: auto; max-width: 100%; border: 1px solid var(--pex-line, var(--border)); border-radius: var(--pex-radius, var(--radius)); }
.pex-raster { border-collapse: separate; border-spacing: 0; font-size: var(--fs-meta); }
.pex-raster th, .pex-raster td { padding: .3125rem .4375rem; text-align: center; white-space: nowrap; background: var(--pex-surface, var(--bg-card)); text-transform: none; letter-spacing: normal; font-size: var(--fs-meta); border: 0; }
.pex-raster thead th { color: var(--pex-text-3, var(--text-3)); font-weight: 600; font-variant-numeric: tabular-nums; }
.pex-raster .pex-raster-bereich { position: sticky; left: 0; z-index: 1; text-align: left; font-weight: 500; box-shadow: 1px 0 0 var(--pex-line, var(--border)); }
.pex-raster tr.pex-opt .pex-raster-bereich { color: var(--pex-text-3, var(--text-3)); }
.pex-ts { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.pex-ts-item { display: grid; grid-template-columns: 1.25rem 1fr; gap: .5rem; padding: .625rem 0; border-top: 1px solid var(--pex-line, var(--border)); }
.pex-ts-punkt { padding-top: .125rem; }
.pex-ts-body { min-width: 0; display: flex; flex-direction: column; gap: .375rem; }
.pex-ts-kopf { display: flex; flex-wrap: wrap; align-items: center; gap: .25rem .625rem; font-size: var(--fs-ui); }
.pex-ts-von { color: var(--pex-text-3, var(--text-3)); font-size: var(--fs-meta); }
.pex-ts-zeilen { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .3125rem; }
.pex-ts-zeilen li { display: grid; grid-template-columns: 1rem 9.5rem 1fr; gap: .5rem; align-items: start; font-size: var(--fs-ui); }
.pex-ts-bereich { color: var(--pex-text-2, var(--text-2)); }
.pex-ts-text { min-width: 0; overflow-wrap: anywhere; }
.pex-wie { display: inline-block; margin-left: .25rem; padding: 0 .375rem; border-radius: 999px; font-size: var(--fs-label); background: var(--pex-idle-bg); color: var(--pex-idle-text); }
@media (max-width: 40rem) {
    .pex-ts-zeilen li { grid-template-columns: 1rem 1fr; }
    .pex-ts-zeilen .pex-ts-text { grid-column: 2; }
}

/* Karte „Projektstatus" → Reiter */
.dash-ph-pex { align-self: flex-start; margin-top: .5rem; }
/* PR1.480 (#738) — Statusmeldung überfällig: Hinweisleiste im Projekt + Kachel auf dem
   Dashboard (Gehirn: js/components/status-report-due.js). Ruhiger Warnton, kein Alarm-Rot,
   keine Bewegung — täglich gesehen. */
.status-due-banner { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; margin: 0 0 14px; padding: 12px 18px; border: 1px solid color-mix(in srgb, var(--warning) 45%, transparent); border-radius: var(--radius); background: color-mix(in srgb, var(--warning) 12%, var(--bg-card)); color: var(--text-1); }
.status-due-banner .sdb-icon { flex: none; color: var(--warning); }
.status-due-banner__text { flex: 1 1 26rem; margin: 0; line-height: 1.45; }
.status-due-banner__text strong { color: var(--warning); }
.status-due-card { margin: 0 0 14px; padding: 16px 18px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--bg-card); color: var(--text-1); }
.status-due-card__head { display: flex; align-items: baseline; gap: 10px; }
.status-due-card__count { font-size: var(--fs-kpi); font-weight: 600; line-height: 1; color: var(--warning); font-variant-numeric: tabular-nums; }
.status-due-card__count--ok { color: var(--success); }
.status-due-card__title { margin: 0; font-size: var(--fs-body); }
.status-due-card__list, .status-due-card__soon { margin: 10px 0 0; padding: 0; list-style: none; }
.status-due-card__row { display: flex; align-items: center; gap: 12px; padding: 9px 0; border-top: 1px solid var(--border); }
.status-due-card__name { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.status-due-card__age { font-size: var(--fs-ui); font-weight: 500; color: var(--warning); }
.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; }
.status-due-card__link:hover { text-decoration: underline; }
.status-due-card__link:focus-visible, .status-due-card [data-sdc-melden]:focus-visible, .status-due-card [data-sdc-alle]:focus-visible, .status-due-banner__btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.status-due-card__soon li { padding: 6px 0; border-top: 1px solid var(--border); font-size: var(--fs-body); color: var(--text-2); }
.status-due-card__soon .status-due-card__link { font-weight: 500; }
.status-due-card__ok { margin: 8px 0 0; font-weight: 600; color: var(--success); }
.status-due-card__note { margin: 8px 0 0; font-size: var(--fs-body); color: var(--text-2); }
.status-due-card__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin-top: 12px; }
.status-due-card__hint { font-size: var(--fs-ui); color: var(--text-2); }

/* ── PR1.483 (#741) — Monitoring-Verantwortliche (klassische Admin-Karte) ── */
.monitoring-verantwortliche-liste { margin: 0 0 10px; padding: 0; list-style: none; }
.monitoring-verantwortliche-liste li {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 6px 0; border-top: 1px solid var(--border); font-size: var(--fs-body);
}
.monitoring-verantwortliche-liste li:first-child { border-top: 0; }
.monitoring-verantwortliche-neu { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 6px 0; }
.monitoring-verantwortliche-neu select {
  flex: 1 1 260px; min-width: 0; padding: 6px 10px; border-radius: 6px;
  border: 1px solid var(--border); background: var(--bg-input, var(--bg-card2));
  color: var(--text-primary); font-size: var(--fs-body);
}
.monitoring-verantwortliche-neu select:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
#monitoring-verantwortliche-trockenlauf, #monitoring-verantwortliche-geaendert { display: block; margin-top: 6px; }
/* PR1.482 (#740) — Project Excellence: Dashboard-Ansicht (.pexd-*) + Dialog „Auswertung
   hinzufügen" (.pexa-*). Geteilt fuer beide Shells; nur pex-Tokens (hell/dunkel ueber
   .pex-host). Keine Animation — die Seite wird regelmaessig geoeffnet. */
.pexd { display: flex; flex-direction: column; gap: 1rem; }
.pexd-kacheln { display: grid; grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); gap: .625rem; }
.pexd-kachel { display: flex; flex-direction: column; gap: .125rem; background: var(--pex-surface); border: 1px solid var(--pex-line); border-radius: var(--pex-radius); padding: .75rem .875rem; }
.pexd-kachel-label { font-size: var(--fs-ui); font-weight: 500; }
.pexd-kachel-zahl { font-size: var(--fs-title); font-weight: 600; line-height: 1.15; font-variant-numeric: tabular-nums; }
.pexd-kachel-sub { font-size: var(--fs-meta); color: var(--pex-text-3); }
.pexd-kachel--bad .pexd-kachel-zahl { color: var(--pex-bad-text); }
.pexd-kachel--warn .pexd-kachel-zahl { color: var(--pex-warn-text); }
.pexd-kachel--ok .pexd-kachel-zahl { color: var(--pex-ok-text); }
.pexd-ph-zahl { width: 3rem; height: 1.25rem; margin: .125rem 0; }
.pexd-raster { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 26rem), 1fr)); gap: .75rem; }
.pexd-karte { display: flex; flex-direction: column; gap: .625rem; min-width: 0; background: var(--pex-surface); border: 1px solid var(--pex-line); border-radius: var(--pex-radius); padding: .875rem 1rem; color: var(--pex-text); }
.pexd-karte-kopf { display: flex; flex-direction: column; gap: .125rem; }
.pexd-karte-titel { margin: 0; font-size: var(--fs-body); font-weight: 500; }
.pexd-karte-sub { margin: 0; font-size: var(--fs-meta); color: var(--pex-text-3); }
.pexd-saeulen { width: 100%; max-height: 12rem; }
.pexd-achse { font-size: var(--fs-label); fill: var(--pex-text-3); }
.pexd-seg--ok, .pexd-swatch--ok { fill: var(--pex-g); background: var(--pex-g); }
.pexd-seg--warn, .pexd-swatch--warn { fill: var(--pex-y); background: var(--pex-y); }
.pexd-seg--bad, .pexd-swatch--bad { fill: var(--pex-r); background: var(--pex-r); }
.pexd-seg--none, .pexd-swatch--none { fill: var(--pex-surface-2); background: var(--pex-surface-2); }
.pexd-seg { stroke: var(--pex-surface); stroke-width: 1; }
.pexd-legende { display: flex; flex-wrap: wrap; gap: .25rem .875rem; margin: 0; font-size: var(--fs-meta); color: var(--pex-text-2); }
.pexd-legende span { display: inline-flex; align-items: center; gap: .3125rem; }
.pexd-swatch { display: inline-block; width: .625rem; height: .625rem; border-radius: 2px; box-shadow: inset 0 0 0 1px var(--pex-line); }
.pexd-bereiche { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .5rem; }
.pexd-bereich { display: grid; grid-template-columns: minmax(7rem, 9rem) 1fr auto; align-items: center; gap: .625rem; font-size: var(--fs-ui); }
.pexd-bereich--opt { opacity: .6; }
.pexd-bar { display: flex; height: .75rem; border-radius: .25rem; overflow: hidden; background: var(--pex-surface-2); }
.pexd-bar-seg { display: block; min-width: 2px; }
.pexd-bereich-zahl { font-size: var(--fs-meta); color: var(--pex-text-3); font-variant-numeric: tabular-nums; }
.pexd-opt { font-size: var(--fs-label); color: var(--pex-text-3); font-weight: 400; }
.pexd-tabwrap { overflow-x: auto; max-height: 18rem; overflow-y: auto; }
.pexd-tab { width: 100%; border-collapse: collapse; font-size: var(--fs-ui); }
.pexd-tab th, .pexd-tab td { padding: .4375rem .375rem; text-align: left; border-bottom: 1px solid var(--pex-line); vertical-align: top; }
.pexd-tab thead th { position: sticky; top: 0; background: var(--pex-surface); font-size: var(--fs-meta); font-weight: 500; color: var(--pex-text-3); }
.pexd-tab tbody th { font-weight: 500; font-size: var(--fs-ui); text-transform: none; letter-spacing: normal; color: var(--pex-text); }
.pexd-tab thead th { white-space: nowrap; letter-spacing: normal; }
.pexd-num { text-align: right !important; font-variant-numeric: tabular-nums; white-space: nowrap; }
.pexd-warn { color: var(--pex-warn-text); font-weight: 600; }
.pexd-satz { color: var(--pex-text-2); min-width: 9rem; }
.pexd-ohne { color: var(--pex-text-3); font-style: italic; }
.pexd-tab .pex-row:focus-visible { outline: 2px solid var(--pex-accent); outline-offset: -2px; }
.pexd-leer { margin: 0; padding: 1rem 0; color: var(--pex-text-2); font-size: var(--fs-ui); }
.pexd-eigene { display: flex; flex-direction: column; gap: .625rem; }
.pexd-eigene-kopf { display: flex; flex-direction: column; gap: .125rem; }
.pexd-eigene-titel { margin: 0; font-size: var(--fs-body); font-weight: 500; }
.pexd-eigene-raster { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 20rem), 1fr)); gap: .75rem; }
.pexd-eigen-kopf { flex-direction: row; justify-content: space-between; align-items: flex-start; gap: .5rem; }
.pexd-eigen-koerper { min-height: 7rem; display: flex; flex-direction: column; gap: .5rem; }
.pexd-eigen-skelett { min-height: 9rem; }
.pexd-eigen-skelett .pex-ph, .pexd-eigen-koerper .pex-ph { width: 80%; }
.pexd-marke { display: inline-block; padding: 0 .375rem; border-radius: .25rem; font-size: var(--fs-label); font-weight: 500; background: var(--pex-surface-2); color: var(--pex-text-2); }
.pexd-marke--alle { background: var(--pex-tint); color: var(--pex-accent-text); }
.pexd-eigen-hinweis { margin: 0; font-size: var(--fs-ui); color: var(--pex-text-2); display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
.pexd-eigen-hinweis p { margin: 0; }
.pexd-neu { align-items: center; justify-content: center; text-align: center; min-height: 9rem; border-style: dashed; cursor: pointer; font: inherit; }
.pexd-neu:hover { border-color: var(--pex-accent); background: var(--pex-tint); }
.pexd-neu:focus-visible { outline: 2px solid var(--pex-accent); outline-offset: 2px; }
.pexd-neu-plus { font-size: var(--fs-title); line-height: 1; color: var(--pex-accent-text); }
.pexd-neu-titel { font-weight: 600; }
.pexd-neu-sub { font-size: var(--fs-meta); color: var(--pex-text-3); }

.pexa-root { position: fixed; inset: 0; z-index: 1000; }
.pexa-huelle { position: absolute; inset: 0; display: flex; align-items: flex-start; justify-content: center; padding: 4vh 1rem; background: color-mix(in srgb, #000 45%, transparent); overflow-y: auto; }
.pexa-dialog { width: min(46rem, 100%); display: flex; flex-direction: column; gap: .875rem; background: var(--pex-surface); color: var(--pex-text); border: 1px solid var(--pex-line); border-radius: var(--pex-radius); padding: 1rem 1.25rem; }
.pexa-kopf { display: flex; justify-content: space-between; align-items: center; gap: .5rem; }
.pexa-titel { margin: 0; font-size: var(--fs-section); font-weight: 600; }
.pexa-wege { align-self: flex-start; }
.pexa-inhalt { display: flex; flex-direction: column; gap: .75rem; }
.pexa-ki { display: flex; flex-direction: column; gap: .625rem; }
.pexa-feld { display: flex; flex-direction: column; gap: .25rem; font-size: var(--fs-ui); min-width: 0; }
.pexa-feld > span, .pexa-feld > label { font-weight: 600; color: var(--pex-text-2); }
.pexa-feld--breit { grid-column: 1 / -1; }
.pexa-frage { resize: vertical; min-height: 3.25rem; }
.pexa-beispiele { margin: 0; font-size: var(--fs-meta); color: var(--pex-text-3); }
.pexa-beispiel { background: none; border: 0; padding: 0; font: inherit; color: var(--pex-accent-text); text-decoration: underline; text-underline-offset: 2px; cursor: pointer; }
.pexa-aktionen-links { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .875rem; }
.pexa-tipp { font-size: var(--fs-meta); color: var(--pex-text-3); }
.pexa-form { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr)); gap: .625rem .875rem; margin: 0; padding: 0; border: 0; min-width: 0; }
.pexa-hinweis { margin: 0; font-size: var(--fs-meta); color: var(--pex-text-3); grid-column: 1 / -1; }
.pexa-fehler { margin: 0; padding-left: 1.125rem; font-size: var(--fs-ui); color: var(--pex-bad-text); }
.pexa-status { margin: 0; font-size: var(--fs-ui); color: var(--pex-text-2); }
.pexa-meldung { margin: 0; padding: .625rem .75rem; border-radius: var(--pex-radius); background: var(--pex-warn-bg); color: var(--pex-text); font-size: var(--fs-ui); display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .75rem; }
.pexa-meldung p { margin: 0; }
.pexa-rueckfrage, .pexa-vorschlag { display: flex; flex-direction: column; gap: .5rem; padding: .75rem; border: 1px solid var(--pex-line); border-radius: var(--pex-radius); background: var(--pex-surface-2); }
.pexa-rueckfrage-titel, .pexa-vorschlag-titel { margin: 0; font-size: var(--fs-meta); font-weight: 500; color: var(--pex-text-3); }
.pexa-rueckfrage-text, .pexa-satz { margin: 0; font-size: var(--fs-body); }
.pexa-rueckfrage .btn { align-self: flex-start; }
.pexa-chips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .375rem; }
.pexa-chip { padding: .1875rem .5rem; border-radius: 999px; border: 1px solid var(--pex-line); background: var(--pex-surface); font-size: var(--fs-meta); }
.pexa-chip span { color: var(--pex-text-3); }
.pexa-vorschau { padding: .75rem; border: 1px solid var(--pex-line); border-radius: var(--pex-radius); min-height: 6rem; overflow-x: auto; }
.pexa-fuss { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: .5rem; }
.pexa-root :focus-visible { outline: 2px solid var(--pex-accent); outline-offset: 2px; }
@media (max-width: 40rem) {
    .pexd-bereich { grid-template-columns: 1fr; gap: .25rem; }
    .pexa-huelle { padding: 0; }
    .pexa-dialog { min-height: 100%; border-radius: 0; }
}

/* PR1.498 — Projektrollen: Fortschritt gebucht/geplant, Schalter „leitet das Projekt",
   „Änderungen gelten ab". Täglich genutzt → keine Animation; Rückmeldung nur über Farbe/Text. */
.role-lead-panel { display: flex; flex-direction: column; gap: 10px; padding: 10px; margin: 8px 0; background: var(--bg-subtle); border-radius: var(--radius-sm); }
.role-progress-head { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.role-progress-title { font-size: var(--fs-ui); font-weight: 600; color: var(--text-1, inherit); }
.role-progress-bar { position: relative; height: 8px; margin: 6px 0 4px; background: var(--border); border-radius: 4px; overflow: visible; }
.role-progress-fill { position: absolute; inset: 0 auto 0 0; background: var(--primary); border-radius: 4px; }
.role-progress-bar.is-ahead .role-progress-fill { background: var(--warning); }
.role-progress-today { position: absolute; top: -3px; bottom: -3px; width: 2px; margin-left: -1px; background: var(--text-1, #fff); border-radius: 1px; }
.role-progress-soll { position: absolute; top: 0; bottom: 0; width: 0; border-left: 2px dashed var(--text-2); }
.role-progress-legend { display: flex; flex-wrap: wrap; gap: 4px 16px; margin: 0; font-variant-numeric: tabular-nums; }
.role-lead-switch { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; font-size: var(--fs-body); font-weight: 500; }
.role-lead-switch input { width: 1.1rem; height: 1.1rem; margin: 0; accent-color: var(--success); cursor: pointer; }
.role-lead-switch input:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.role-lead > p { margin: 2px 0 0 calc(1.1rem + 8px); }
.role-eff { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.role-eff-label { font-size: var(--fs-ui); color: var(--text-2); }
.role-eff > p { flex: 1 0 100%; margin: 0; }
.role-eff-date { max-width: 11rem; }
.role-eff-warn { color: var(--warning); }
.role-booked { font-variant-numeric: tabular-nums; }
.role-booked.is-ahead { color: var(--warning); }
.pm-lead-line { display: flex; flex-direction: column; gap: 4px; font-size: var(--fs-ui); }
.pm-lead-line-label { color: var(--text-3); }
.pm-lead-line-text { margin: 0; color: var(--text-2); }
.pm-lead-line-text.pflichtfeld-warn { color: var(--warning); }
.proj-team-booked { display: block; margin-top: 2px; font-size: var(--fs-meta); color: var(--text-2); font-variant-numeric: tabular-nums; }

/* ── PR1.507 (#787) — Opp- und Projekt-Tabelle wie in Excel (klassische Shell) ──
   Baustein column-resize.js attachSheetColumns: `xl-sheet` = Griffe da, `xl-fixed` = der Nutzer hat
   eine Breite gesetzt (feste Spaltenbreiten, Tabelle waechst nach rechts und rollt quer),
   `data-row-lines` = Zeilenzahl fuer Namen/Kunden. Keine Transition (taeglich genutzt). */
table.xl-sheet .col-resize { position: absolute; top: 0; right: -6px; bottom: 0; width: 12px; z-index: 3; cursor: col-resize; touch-action: none; }
table.xl-sheet .col-resize::after { content: ""; position: absolute; top: 25%; bottom: 25%; left: 5px; width: 1px; background: var(--text-3); opacity: .5; }
table.xl-sheet .col-resize:hover::after, table.xl-sheet .col-resize:focus-visible::after { top: 0; bottom: 0; left: 4px; width: 3px; border-radius: 1px; background: var(--primary); opacity: 1; }
table.xl-sheet .col-resize:focus-visible { outline: 2px solid var(--primary); outline-offset: -2px; }
table.xl-sheet .row-resize { position: absolute; left: 0; right: 0; bottom: 0; height: 6px; z-index: 1; cursor: row-resize; touch-action: none; }
table.xl-sheet tr:hover .row-resize::after { content: ""; position: absolute; left: 25%; right: 25%; bottom: 1px; height: 2px; border-radius: 1px; background: var(--text-3); }
table.xl-sheet .row-resize:hover::after { background: var(--primary); }
body.row-resizing { cursor: row-resize; user-select: none; }
/* Feste Breiten: jede Zelle kuerzt auf ihre Spalte, die Inhaltskappen der Auto-Ansicht entfallen. */
table.opp-table.xl-fixed { table-layout: fixed; min-width: 0; }
table.opp-table.xl-fixed td, table.opp-table.xl-fixed td.col-portfolio, table.opp-table.xl-fixed td.col-sticky-name { max-width: none; overflow: hidden; text-overflow: ellipsis; }
table.opp-table.xl-fixed th.col-gap-head, table.opp-table.xl-fixed td.col-gap { min-width: 0; }
table.opp-table.xl-fixed .list-entity { max-width: none; }
/* Messlauf fuer „optimale Breite": kurz ohne Umbruch und ohne Klemmung. */
table.opp-table.xl-measure td { white-space: nowrap; }
table.opp-table.xl-measure .list-name, table.opp-table.xl-measure .list-meta, table.opp-table.xl-measure .xl-clamp { white-space: nowrap; display: inline; -webkit-line-clamp: none; }
/* Umbrechen: Namen und Kunden bis zur eingestellten Zeilenzahl, die Zeile waechst mit. */
table.opp-table:not([data-row-lines="1"])[data-row-lines] tbody tr.opp-row > td { padding-top: 8px; padding-bottom: 8px; }
table.opp-table:not([data-row-lines="1"])[data-row-lines] td:has(.list-name, .xl-clamp) { white-space: normal; }
table.opp-table:not([data-row-lines="1"])[data-row-lines] .list-name,
table.opp-table:not([data-row-lines="1"])[data-row-lines] .list-meta,
table.opp-table: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;
}

/* Spalten-Dialog: Abschnitt „Darstellung" (beide Shells — der Dialog haengt an document.body). */
.column-picker-layout { display: flex; flex-direction: column; gap: 8px; padding: 0 10px; }
.column-picker-layout .column-picker-section-title { padding-left: 0; padding-right: 0; }
.column-picker-layout > .btn { align-self: flex-start; }
.column-picker-layout-hint { margin: 0; }

/* Schalter „Zeilen: Einzeilig | Umbrechen" im Fenster „Filter & Anpassen" (klassische Shell). */
.row-mode-switch { display: inline-flex; align-items: center; gap: 8px; font-size: var(--fs-body); color: var(--text-2); }
.row-mode-segs { display: inline-flex; border: 1px solid var(--border); border-radius: var(--radius-sm); overflow: hidden; }
.row-mode-seg { padding: 4px 10px; border: 0; background: transparent; color: var(--text-2); font: inherit; cursor: pointer; }
.row-mode-seg + .row-mode-seg { border-left: 1px solid var(--border); }
.row-mode-seg.is-on { background: var(--primary); color: #fff; }
.row-mode-seg:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.row-mode-error { font-size: var(--fs-ui); color: var(--danger, #ef4444); }


/* ═══════════════════════════════════════════════════════════════════
   PR1.513 (#779) — Kundenmaske: kleines Logofeld im Kopf, Wichtiges offen,
   Rest eingeklappt. Ein Markup fuer beide Shells; die neue Ansicht zieht
   Farben/Schrift in style-redesign-modals.css nach. Keine Animation: die
   Maske wird mehrmals pro Woche benutzt, das Akkordeon klappt sofort.
   ═══════════════════════════════════════════════════════════════════ */
#account-modal .acc-head {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 16px;
  align-items: start;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--border);
}
#account-modal .acc-head [data-field="name"] .form-control {
  font-size: var(--fs-section);
  font-weight: 600;
}
#account-modal .form-section + .form-section { margin-top: 18px; }
#account-modal .acc-people > legend { border-bottom: 0; padding-bottom: 0; margin-bottom: 8px; }

/* Logofeld 72 px mit Kamera-Knopf und Menue */
.acc-logo-box {
  position: relative;
  width: 72px;
  height: 72px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  display: grid;
  place-items: center;
  background: var(--bg-card2);
}
.acc-logo-box.is-dragover { border-color: var(--accent); background: var(--bg-hover); }
.acc-logo-box.is-empty {
  border-style: dashed;
  color: var(--text-3);
  font-size: var(--fs-meta);
  gap: 2px;
  align-content: center;
}
.acc-logo-box.is-empty svg { width: 16px; height: 16px; }
.acc-logo-cam {
  position: absolute;
  right: -8px;
  bottom: -8px;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: var(--bg-card);
  color: var(--text-2);
  display: grid;
  place-items: center;
  cursor: pointer;
  padding: 0;
}
.acc-logo-cam svg { width: 14px; height: 14px; }
.acc-logo-cam:hover { color: var(--text-1); border-color: var(--accent); }
.acc-logo-cam:focus-visible,
.acc-logo-menu [role="menuitem"]:focus-visible,
.acc-sec > summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.acc-logo-cam:disabled { opacity: .5; cursor: progress; }
.acc-logo-menu {
  position: absolute;
  top: calc(100% + 10px);
  left: 0;
  z-index: 5;
  min-width: 250px;
  padding: 6px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg-card);
  box-shadow: 0 12px 30px rgba(0, 0, 0, .28);
}
.acc-logo-menu [role="menuitem"] {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  width: 100%;
  padding: 8px 10px;
  border: 0;
  border-radius: var(--radius-sm);
  background: none;
  color: var(--text-1);
  text-align: left;
  cursor: pointer;
}
.acc-logo-menu [role="menuitem"][hidden] { display: none; }
.acc-logo-menu [role="menuitem"]:hover,
.acc-logo-menu [role="menuitem"]:focus { background: var(--bg-hover); }
.acc-logo-menu [role="menuitem"] svg { width: 16px; height: 16px; flex: none; margin-top: 2px; }
.acc-logo-menu [role="menuitem"] b { display: block; font-weight: 500; font-size: var(--fs-body); }
.acc-logo-menu [role="menuitem"] small { display: block; color: var(--text-3); font-size: var(--fs-meta); }
.acc-logo-menu .is-danger { color: var(--danger); border-top: 1px solid var(--border); border-radius: 0; margin-top: 4px; padding-top: 10px; }

/* Dubletten-Hinweis unter dem Namen (Anlegen + Umbenennen, bis zu drei Treffer) */
.acc-dup {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: 8px;
  padding: 8px 10px;
  border-radius: var(--radius-sm);
  background: rgba(245, 158, 11, .12);
  color: var(--text-1);
  font-size: var(--fs-body);
}
.acc-dup[hidden] { display: none; }
.acc-dup svg { width: 16px; height: 16px; color: var(--warning); flex: none; }
.acc-dup-head { display: flex; gap: 8px; align-items: center; }
.acc-dup-row { display: flex; gap: 8px; align-items: center; padding-left: 24px; }
.acc-dup-row > span { flex: 1; min-width: 0; overflow-wrap: anywhere; }

/* Eingeklappte Abschnitte mit Fuellstand im Kopf */
.acc-secs { margin-top: 18px; display: grid; gap: 10px; }
.acc-sec { border: 1px solid var(--border); border-radius: var(--radius); }
.acc-sec > summary {
  list-style: none;
  display: flex;
  gap: 12px;
  align-items: center;
  padding: 12px 16px;
  cursor: pointer;
  font-weight: 600;
  color: var(--text-1);
}
.acc-sec > summary::-webkit-details-marker { display: none; }
.acc-sec > summary::after {
  content: '';
  width: 7px;
  height: 7px;
  border-right: 2px solid var(--text-3);
  border-bottom: 2px solid var(--text-3);
  transform: rotate(45deg);
  margin-top: -4px;
  flex: none;
}
.acc-sec[open] > summary::after { transform: rotate(-135deg); margin-top: 3px; }
.acc-sec-sum { margin-left: auto; font-weight: 400; font-size: var(--fs-ui); color: var(--text-3); text-align: right; }
.acc-sec > .form-grid { padding: 4px 16px 16px; }

/* Fuss: Logo-Herkunft bzw. Stand einer Logo-Aktion links, Knoepfe rechts */
#account-modal .modal-footer { align-items: center; }
.acc-foot-hint { margin-right: auto; font-size: var(--fs-ui); color: var(--text-3); max-width: 46ch; }
.acc-foot-hint.acc-logo-status-ok { color: var(--emerald, #10b981); }
.acc-foot-hint.acc-logo-status-err { color: var(--danger, #ef4444); }
.acc-create-opp { margin-left: 8px; border: 1px solid var(--border); }
/* „Rückgängig" erst nach einer Aenderung (der Edit-Guard setzt display inline). */
#account-modal:not(.is-dirty) .edit-guard-undo-btn { display: none !important; }
/* ═════════════════════════════════════════════════════════════════════════════
   PR1.536 (#817) — Matching-Cockpit, klassisches Gesicht (views/matching-cockpit.js)
   Zwei Stufen: Übersicht (Kennzahlen · alle Rollen · Zu erledigen) und Rolle im Fokus
   (Plätze · Kandidaten · Person/Kriterien). Breit drei Spalten, schmal gestapelt.
   ═════════════════════════════════════════════════════════════════════════════ */
/* Einstieg über dem Staffing-Block der Opportunity (views/opportunity-detail.js). */
.opp-cockpit-entry { display: flex; justify-content: flex-end; margin-bottom: 8px; }
.mc-page { display: flex; flex-direction: column; gap: 16px; padding-bottom: 88px; min-width: 0; }
.mc-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); min-width: 0; }
.mc-card-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 16px; border-bottom: 1px solid var(--border); }
.mc-card-title { margin: 0; font-size: var(--fs-body); font-weight: 600; color: var(--text-1); }
.mc-muted { color: var(--text-3); }
.mc-warn { color: var(--warning); font-weight: 600; }
.mc-ok { color: var(--success-light); }
.mc-run { color: var(--accent); }
.mc-empty { padding: 20px 16px; color: var(--text-2); }
.mc-link { background: none; border: 0; padding: 0; color: var(--primary-text); font: inherit; font-weight: 600; cursor: pointer; }
.mc-link:hover { text-decoration: underline; }
.mc-h3 { margin: 0 0 8px; font-size: var(--fs-body); font-weight: 500; color: var(--text-1); }
.mc-page button:focus-visible, .mc-page input:focus-visible, .mc-page summary:focus-visible {
    outline: 2px solid var(--primary-text); outline-offset: 2px;
}
.mc-page .btn:active, .mc-page .mc-seg-btn:active, .mc-page .mc-nav-item:active { transform: scale(.97); }

/* Kopf */
.mc-crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: var(--fs-ui); color: var(--text-2); }
.mc-crumb { background: none; border: 0; padding: 0; color: var(--text-2); font: inherit; cursor: pointer; }
.mc-crumb:hover { color: var(--text-1); text-decoration: underline; }
.mc-crumb-title { max-width: 32ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mc-crumb-current { color: var(--text-1); font-weight: 600; }
.mc-crumb-sep { color: var(--text-3); }
.mc-head-row { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px; margin-top: 6px; }
.mc-title { margin: 0; font-size: var(--fs-title); color: var(--text-1); }
.mc-sub { margin-top: 4px; color: var(--text-2); font-size: var(--fs-body); }
.mc-head-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.mc-last { font-size: var(--fs-ui); color: var(--text-3); }

/* Kennzahlen */
.mc-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); }
.mc-kpi { padding: 14px 16px; border-left: 1px solid var(--border); min-width: 0; }
.mc-kpi:first-child { border-left: 0; }
.mc-kpi-label { font-size: var(--fs-meta); color: var(--text-3); }
.mc-kpi-value { margin-top: 4px; font-size: var(--fs-title); font-weight: 600; color: var(--text-1); }
.mc-kpi-of { font-size: var(--fs-body); font-weight: 400; color: var(--text-2); }
.mc-kpi-foot { margin-top: 2px; font-size: var(--fs-ui); color: var(--text-2); }

/* Chips, Avatare, Punkte */
.mc-chip { display: inline-flex; align-items: center; padding: 2px 8px; border-radius: 999px; font-size: var(--fs-meta); font-weight: 500; background: var(--bg-card2); border: 1px solid var(--border-light); color: var(--text-2); }
.mc-chip-ok { color: var(--success-light); border-color: var(--success); }
.mc-chip-warn { color: var(--warning); border-color: var(--warning); }
.mc-chip-info { color: var(--primary-text); border-color: var(--primary); }
.mc-avatar { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; width: 28px; height: 28px; border-radius: 50%; background: var(--bg-hover); color: var(--primary-text); font-size: var(--fs-label); font-weight: 500; margin-right: 6px; }
.mc-avatar-open { background: transparent; border: 1px dashed var(--text-3); }
/* Foto statt Initialen: der innere Avatar (renderAvatar) fuellt den Kreis, die Huelle bleibt fuer Abstand und Stapel. */
.mc-avatar-photo { background: transparent; overflow: hidden; }
.mc-avatar-photo .emp-avatar { width: 100% !important; height: 100% !important; }
.mc-dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; margin-right: 6px; background: var(--text-3); }
.mc-dot-ok { background: var(--success); }
.mc-dot-warn { background: var(--warning); }

/* Übersicht */
.mc-overview { display: grid; grid-template-columns: minmax(0, 1fr) minmax(300px, 380px); gap: 16px; align-items: start; }
.mc-table-wrap { overflow-x: auto; }
.mc-table { width: 100%; border-collapse: collapse; font-size: var(--fs-body); }
.mc-table th { text-align: left; font-weight: 500; color: var(--text-3); padding: 10px 16px; border-bottom: 1px solid var(--border); }
.mc-table td { padding: 10px 16px; border-bottom: 1px solid var(--border); color: var(--text-1); vertical-align: middle; }
.mc-group-head td { background: var(--bg-card2); }
.mc-group-title { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.mc-group-line { margin-top: 4px; font-size: var(--fs-ui); }
.mc-person, .mc-best { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 2px; }
.mc-best strong { margin-right: 4px; }
.mc-td-num { text-align: right; white-space: nowrap; }
.mc-td-slot { white-space: nowrap; color: var(--text-2); }
.mc-td-act { text-align: right; white-space: nowrap; }
.mc-td-act .btn + .btn { margin-left: 6px; }
.mc-todo-list { list-style: none; margin: 0; padding: 0; }
.mc-todo { display: flex; gap: 12px; padding: 14px 16px; border-bottom: 1px solid var(--border); }
.mc-todo:last-child { border-bottom: 0; }
.mc-todo-mark { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 50%; background: var(--bg-hover); color: var(--primary-text); font-size: var(--fs-meta); font-weight: 500; }
.mc-todo-tasks .mc-todo-mark { color: var(--warning); }
.mc-todo-title { font-weight: 600; color: var(--text-1); }
.mc-todo-text { margin-top: 4px; font-size: var(--fs-body); color: var(--text-2); }
.mc-todo-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.mc-plan { list-style: none; margin: 10px 0 0; padding: 0; border: 1px solid var(--border); border-radius: var(--radius-sm); }
.mc-plan li { display: flex; align-items: center; gap: 6px; padding: 8px 10px; border-bottom: 1px solid var(--border); font-size: var(--fs-body); }
.mc-plan li:last-child { border-bottom: 0; }
.mc-plan-slot { font-weight: 600; }
.mc-plan li > :last-child { margin-left: auto; white-space: nowrap; }
.mc-plan-pct { margin-left: auto; color: var(--text-2); }

/* Rolle im Fokus */
.mc-stage-role { display: grid; grid-template-columns: minmax(200px, 250px) minmax(0, 1fr) minmax(300px, 360px); gap: 16px; align-items: start; }
.mc-nav { padding: 8px; }
.mc-nav-head { display: flex; justify-content: space-between; gap: 8px; padding: 6px 8px 10px; font-size: var(--fs-ui); font-weight: 500; color: var(--text-2); }
.mc-nav-list { display: flex; flex-direction: column; gap: 2px; }
.mc-nav-item { display: flex; flex-direction: column; gap: 4px; width: 100%; text-align: left; background: none; border: 1px solid transparent; border-radius: var(--radius-sm); padding: 8px 10px; color: var(--text-1); font: inherit; cursor: pointer; }
.mc-nav-item:hover { background: var(--bg-hover); }
.mc-nav-item.is-active { background: var(--bg-card2); border-color: var(--primary); }
.mc-nav-name { font-weight: 500; font-size: var(--fs-body); }
.mc-nav-line { display: flex; align-items: center; font-size: var(--fs-meta); color: var(--text-2); }
.mc-focus { padding: 16px; display: flex; flex-direction: column; gap: 12px; }
.mc-role-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px; }
.mc-role-title { margin: 0; font-size: var(--fs-section); color: var(--text-1); }
.mc-req-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.mc-state { padding: 12px 14px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--bg-card2); color: var(--text-2); font-size: var(--fs-body); }
.mc-state strong { color: var(--text-1); }
.mc-state-error { border-color: var(--danger); display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.mc-state-warn { border-color: var(--warning); display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.mc-state-actions { margin-top: 10px; }
.mc-preview, .mc-summary { display: flex; align-items: flex-start; gap: 10px; font-size: var(--fs-body); color: var(--text-2); }
.mc-summary strong { color: var(--text-1); }
.mc-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; padding-top: 4px; }
.mc-seg { display: inline-flex; flex-wrap: wrap; background: var(--bg-input); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 2px; }
.mc-seg-btn { background: none; border: 0; border-radius: 4px; padding: 4px 10px; color: var(--text-2); font: inherit; font-size: var(--fs-ui); font-weight: 500; cursor: pointer; }
.mc-seg-btn.is-on { background: var(--bg-hover); color: var(--text-1); }
.mc-check { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-body); color: var(--text-2); cursor: pointer; }
.mc-search { display: inline-flex; align-items: center; gap: 6px; margin-left: auto; padding: 4px 10px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--bg-input); color: var(--text-3); }
.mc-search input { background: none; border: 0; color: var(--text-1); font: inherit; font-size: var(--fs-body); min-width: 0; width: 14ch; }
.mc-search input:focus-visible { outline: none; }
.mc-search:focus-within { border-color: var(--primary-text); }
.mc-cand-list { display: flex; flex-direction: column; }
.mc-cand { display: grid; grid-template-columns: 24px 24px minmax(0, 1fr) 120px minmax(150px, 200px) auto; align-items: center; gap: 10px; padding: 10px 6px; border-bottom: 1px solid var(--border); }
.mc-cand.is-selected { background: var(--bg-card2); }
.mc-cand-headrow { font-size: var(--fs-meta); color: var(--text-3); padding-top: 0; }
.mc-cand-group { padding: 12px 6px 4px; font-size: var(--fs-ui); }
.mc-cand-group-title { font-weight: 600; color: var(--text-2); }
.mc-cand-rank { color: var(--text-3); font-size: var(--fs-ui); text-align: center; }
.mc-cand-who { display: flex; align-items: center; min-width: 0; background: none; border: 0; padding: 0; text-align: left; color: var(--text-1); font: inherit; cursor: pointer; }
.mc-cand-text { display: flex; flex-direction: column; min-width: 0; }
.mc-cand-name { font-weight: 600; }
.mc-cand-sub { font-size: var(--fs-meta); color: var(--text-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mc-cand-fit { display: flex; align-items: center; gap: 8px; }
.mc-cand-fit strong { font-size: var(--fs-section); color: var(--text-1); min-width: 2ch; }
.mc-fitbar { display: inline-flex; gap: 3px; }
.mc-fitbar-seg { width: 16px; height: 5px; border-radius: 3px; background: var(--bg-hover); overflow: hidden; }
.mc-fitbar-seg span { display: block; height: 100%; background: var(--primary); }
.mc-strip { position: relative; display: flex; align-items: flex-end; gap: 2px; height: 26px; }
.mc-week { flex: 1 1 0; min-width: 2px; background: var(--info); border-radius: 2px 2px 0 0; }
.mc-week.is-below { background: var(--warning); }
.mc-week.is-unknown { background: var(--bg-hover); }
.mc-strip-need { position: absolute; left: 0; right: 0; border-top: 1px dashed var(--text-2); pointer-events: none; }
.mc-strip-text { display: flex; justify-content: space-between; gap: 6px; margin-top: 3px; font-size: var(--fs-meta); color: var(--text-2); }
.mc-cand-foot { padding: 10px 6px 0; font-size: var(--fs-ui); }

/* Seitenspalte: Person | Kriterien */
.mc-side { display: flex; flex-direction: column; }
.mc-tabs { display: flex; gap: 4px; padding: 0 12px; border-bottom: 1px solid var(--border); }
.mc-tab { background: none; border: 0; border-bottom: 2px solid transparent; padding: 12px 8px 10px; color: var(--text-2); font: inherit; font-weight: 600; cursor: pointer; }
.mc-tab.is-on { color: var(--text-1); border-bottom-color: var(--primary-text); }
.mc-tab-panel { padding: 16px; }
.mc-fade { animation: mc-fade-in 150ms var(--ease-out); }
@keyframes mc-fade-in { from { opacity: 0; } to { opacity: 1; } }
.mc-detail { display: flex; flex-direction: column; gap: 14px; }
.mc-detail-who { display: flex; align-items: center; gap: 6px; }
.mc-detail-name { font-weight: 600; font-size: var(--fs-section); color: var(--text-1); }
.mc-detail-kpis { display: grid; grid-template-columns: 1fr 1fr; border: 1px solid var(--border); border-radius: var(--radius-sm); }
.mc-detail-kpis > div { padding: 10px 12px; font-size: var(--fs-ui); }
.mc-detail-kpis > div + div { border-left: 1px solid var(--border); }
.mc-detail-big { font-size: var(--fs-title); font-weight: 600; color: var(--text-1); }
.mc-bars { display: flex; flex-direction: column; gap: 8px; }
.mc-bar-row { display: grid; grid-template-columns: 90px minmax(0, 1fr) 32px; align-items: center; gap: 8px; font-size: var(--fs-body); color: var(--text-2); }
.mc-bar { height: 6px; border-radius: 3px; background: var(--bg-hover); overflow: hidden; }
.mc-bar span { display: block; height: 100%; background: var(--primary); }
.mc-bar-num { text-align: right; color: var(--text-1); }
.mc-proofs { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.mc-proof { display: flex; gap: 8px; align-items: flex-start; font-size: var(--fs-body); color: var(--text-1); }
.mc-proof-gap { color: var(--text-2); }
.mc-proof-gap .ic, .mc-proof-gap svg { color: var(--warning); }
.mc-detail-actions, .mc-crit-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.mc-crit { display: flex; flex-direction: column; gap: 16px; }
.mc-crit-sec { padding-bottom: 14px; border-bottom: 1px solid var(--border); }
.mc-crit-hint { font-size: var(--fs-ui); margin-bottom: 8px; }
.mc-radios { display: flex; flex-direction: column; gap: 8px; }
.mc-radio { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border: 1px solid var(--border); border-radius: var(--radius-sm); cursor: pointer; }
.mc-radio.is-on { border-color: var(--primary); background: var(--bg-card2); }
.mc-radio > span { display: flex; flex-direction: column; gap: 2px; font-size: var(--fs-body); color: var(--text-1); }
.mc-radio input { accent-color: var(--primary); margin-top: 3px; }
.mc-req-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; padding: 6px 0; font-size: var(--fs-body); color: var(--text-1); }
.mc-req-row > span:first-child { display: flex; flex-direction: column; }
.mc-req-row .mc-muted { font-size: var(--fs-meta); }
.mc-fine summary { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; cursor: pointer; list-style: none; }
.mc-fine summary::-webkit-details-marker { display: none; }
.mc-range-row { display: grid; grid-template-columns: 90px minmax(0, 1fr) 44px; align-items: center; gap: 8px; margin-top: 10px; font-size: var(--fs-body); color: var(--text-2); }
.mc-range-row input { width: 100%; accent-color: var(--primary); }
.mc-range-num { text-align: right; color: var(--text-1); font-weight: 600; }
.mc-range-foot { display: flex; justify-content: space-between; gap: 8px; margin-top: 10px; font-size: var(--fs-ui); }
.mc-info { padding: 12px; border-radius: var(--radius-sm); background: var(--bg-card2); border: 1px solid var(--border-light); font-size: var(--fs-body); color: var(--text-2); }
.mc-info strong { color: var(--text-1); }
.mc-info-run { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 8px; }

/* Vergleich als Bereich + schwebende Auswahl-Leiste */
.mc-compare { border-top: 1px solid var(--border); padding-top: 12px; }
.mc-compare-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.mc-cmpbar { position: fixed; left: 50%; bottom: 20px; transform: translateX(-50%); z-index: 50; display: flex; flex-wrap: wrap; align-items: center; gap: 12px; max-width: calc(100vw - 32px); padding: 10px 14px; background: var(--bg-card2); border: 1px solid var(--border-light); border-radius: var(--radius); box-shadow: 0 8px 24px rgba(0, 0, 0, .45); color: var(--text-1); animation: mc-rise 200ms var(--ease-out); }
.mc-cmpbar-faces { display: inline-flex; }
.mc-cmpbar-faces .mc-avatar { margin-right: -6px; border: 2px solid var(--bg-card2); }
@keyframes mc-rise { from { opacity: 0; transform: translate(-50%, 8px); } to { opacity: 1; transform: translate(-50%, 0); } }
.mc-blocked { padding: 24px; display: flex; flex-direction: column; align-items: flex-start; gap: 12px; color: var(--text-1); }

@media (max-width: 1280px) {
    .mc-stage-role { grid-template-columns: minmax(180px, 220px) minmax(0, 1fr); }
    .mc-side { grid-column: 1 / -1; }
}
@media (max-width: 1100px) {
    .mc-overview { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 860px) {
    .mc-stage-role { grid-template-columns: minmax(0, 1fr); }
    .mc-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .mc-kpi:nth-child(3) { border-left: 0; }
    .mc-kpi:nth-child(n+3) { border-top: 1px solid var(--border); }
    .mc-cand { grid-template-columns: 24px 20px minmax(0, 1fr) auto; }
    .mc-cand-free { grid-column: 3 / -1; }
    .mc-cand-act { grid-column: 3 / -1; }
    .mc-cand-headrow { display: none; }
    .mc-search { margin-left: 0; }
}
@media (prefers-reduced-motion: reduce) {
    .mc-fade, .mc-cmpbar { animation: none; }
    .mc-page .btn:active, .mc-page .mc-seg-btn:active, .mc-page .mc-nav-item:active { transform: none; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   PR1.511 (#782) — Stammdaten-Karte Opportunity + Projekt (geteiltes Gesicht
   components/stammdaten-card.js, beide Shells). Kennzahl-Kacheln oben, darunter
   Abschnitte mit kleiner Versal-Ueberschrift; Werte linksbuendig neben dem Etikett,
   12 px Zeilenabstand. Spaltenbreite unveraendert. Taeglich genutzt: keine Animation.
   Feinschliff fuer die Redesign-Shell in style-redesign.css (.crm .stamm-*).
   ═══════════════════════════════════════════════════════════════════════════ */
.stamm { display: flex; flex-direction: column; min-width: 0; container-type: inline-size; }
.stamm-head { display: flex; flex-direction: column; gap: 12px; padding-bottom: 16px; }
/* Schmale Spalte (Normalfall, 220–300 px): die drei Kacheln stehen untereinander, Etikett links,
   volle Zahl rechts — nebeneinander wuerden echte Betraege (Millionen) abgeschnitten. Erst wenn
   die Karte breit ist (Tablet, eine Spalte), stehen sie wie im Entwurf nebeneinander. */
.stamm-tiles { display: grid; grid-template-columns: minmax(0, 1fr); gap: 6px; }
.stamm-tile {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 8px; align-items: baseline; min-width: 0;
  padding: 8px 12px; border-radius: var(--radius);
  background: var(--bg-card2); border: 1px solid var(--border);
}
.stamm-tile-lbl { grid-column: 1; font-size: var(--fs-label); color: var(--text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.stamm-tile > .stamm-tile-val { grid-column: 2; grid-row: 1 / span 3; text-align: right; }
.stamm-tile > .stamm-tile-sub { grid-column: 1; }
@container (min-width: 22rem) {
  .stamm-tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
  .stamm-tile { display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; }
  .stamm-tile > .stamm-tile-val { text-align: left; }
}
.stamm-tile-val {
  font-size: var(--fs-section); font-weight: 600; color: var(--text-1); font-variant-numeric: tabular-nums;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.stamm-tile.is-empty .stamm-tile-val { font-size: var(--fs-body); font-weight: 500; color: var(--text-3); white-space: normal; }
.stamm-tile.is-warn .stamm-tile-val { color: var(--warning); }
.stamm-tile-sub { font-size: var(--fs-label); color: var(--text-3); }
.stamm-tile-sub.is-alert { color: var(--warning); }
.stamm-meter { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 12px; font-size: var(--fs-ui); }
.stamm-meter-lbl { color: var(--text-2); }
.stamm-meter-val { font-weight: 600; color: var(--text-1); font-variant-numeric: tabular-nums; }
.stamm-meter-val.is-empty { font-weight: 500; color: var(--text-3); }
.stamm-bar { display: block; height: 6px; border-radius: 999px; overflow: hidden; background: var(--bg-hover); }
.stamm-bar-fill { display: block; height: 100%; border-radius: 999px; background: var(--info); }
.stamm-bar.is-over .stamm-bar-fill { background: var(--warning); }
.stamm-usage-txt {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 12px;
  margin-top: 6px; font-size: var(--fs-meta); color: var(--text-2);
}
.stamm-sec { border-top: 1px solid var(--border); padding: 14px 0 16px; }
.stamm-sec:last-child { padding-bottom: 0; }
.stamm-sec-h {
  display: flex; align-items: center; gap: 6px; margin: 0 0 12px;
  font-size: var(--fs-label); font-weight: 500; color: var(--text-3);
}
.stamm-rows { display: flex; flex-direction: column; gap: 12px; }
.stamm-row {
  display: grid; grid-template-columns: minmax(5.75rem, 38%) minmax(0, 1fr);
  gap: 12px; align-items: baseline; font-size: var(--fs-ui);
}
.stamm-row.is-wide { grid-template-columns: minmax(0, 1fr); gap: 4px; }
.stamm-lbl { color: var(--text-2); }
.stamm-val { min-width: 0; color: var(--text-1); font-weight: 600; overflow-wrap: anywhere; }
.stamm-val.is-empty, .stamm-empty { color: var(--text-3); font-weight: 500; }
.stamm-empty { margin: 0; font-size: var(--fs-ui); }
.stamm-val a { color: var(--accent); text-decoration: none; }
.stamm-val a:hover { text-decoration: underline; }
.stamm-with-logo { display: inline-flex; align-items: center; gap: 8px; min-width: 0; max-width: 100%; }
.stamm-with-logo > :first-child { flex: none; }
.stamm-badges { display: flex; flex-wrap: wrap; gap: 4px; }
.stamm-span {
  display: grid; grid-template-columns: auto minmax(2rem, 1fr) auto; align-items: center; gap: 4px 10px;
  font-size: var(--fs-ui); font-weight: 500; color: var(--text-1); font-variant-numeric: tabular-nums;
}
.stamm-span-date.is-empty { color: var(--text-3); font-weight: 500; }
.stamm-span-track { position: relative; height: 2px; background: var(--border-light); }
.stamm-span-track::before, .stamm-span-track::after {
  content: ''; position: absolute; top: 50%; width: 8px; height: 8px; margin-top: -4px;
  border-radius: 50%; background: var(--info);
}
.stamm-span-track::before { left: -4px; }
.stamm-span-track::after { right: -4px; }
.stamm-span-lbl { grid-column: 1 / -1; text-align: center; font-size: var(--fs-label); font-weight: 500; color: var(--text-3); }
.stamm-span + .stamm-rows { margin-top: 12px; }
.stamm-people { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.stamm-person { display: flex; align-items: flex-start; gap: 10px; min-width: 0; }
.stamm-avatar.emp-avatar { width: 32px; height: 32px; font-size: var(--fs-label); background: var(--bg-hover); color: var(--text-1); }
.stamm-avatar.is-missing {
  display: inline-flex; align-items: center; justify-content: center; flex: none;
  width: 32px; height: 32px; border-radius: 50%; border: 1px dashed var(--border-light); color: var(--text-3);
}
.stamm-person-txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.stamm-person-name { font-size: var(--fs-body); font-weight: 500; color: var(--text-1); overflow-wrap: anywhere; }
.stamm-person-role { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: var(--fs-meta); color: var(--text-2); }
.stamm-person-sub { font-size: var(--fs-label); color: var(--text-3); }
.stamm-auto {
  padding: 1px 6px; border-radius: 999px; font-size: var(--fs-label); font-weight: 500;
  background: var(--bg-hover); color: var(--text-2);
}
.stamm-chips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.stamm-chip {
  padding: 3px 9px; border-radius: 999px; font-size: var(--fs-meta); font-weight: 500;
  background: var(--bg-hover); border: 1px solid var(--border); color: var(--text-1);
}
.stamm-chip.is-neg { background: transparent; border-style: dashed; color: var(--text-3); font-weight: 500; }
.stamm-link:focus-visible, .stamm .auto-assign-edit:focus-visible { outline: 2px solid var(--primary-text); outline-offset: 2px; }
.stamm-chips + .stamm-frame-open { margin-top: 8px; }
/* PR1.533 (#809) — Einordnung bleibt im Rahmen: Kunde als Knopf (Logo + Name) zum Kunden-Detail,
   Portfolio-Chips und Hyperscaler-Logos brechen um statt ueber den Kartenrand zu laufen; in
   schmaler Karte steht das Label ueber dem Wert. Keine Animation (taeglich genutzt). */
.stamm-link {
  display: inline-flex; align-items: center; gap: 8px; min-width: 0; max-width: 100%;
  padding: 0; border: 0; background: none; font: inherit; font-weight: 600; text-align: left;
  color: var(--accent); cursor: pointer; border-radius: 4px;
}
.stamm-link:hover .stamm-link-txt { text-decoration: underline; }
.stamm-link-txt { min-width: 0; overflow-wrap: anywhere; }
.stamm-badges { min-width: 0; max-width: 100%; }
.stamm-badges .badge-pf { max-width: 100%; white-space: normal; overflow-wrap: anywhere; line-height: 1.35; }
.stamm .hs-logo { flex-wrap: wrap; white-space: normal; max-width: 100%; row-gap: 4px; }
@container (max-width: 22rem) {
  .stamm-row { grid-template-columns: minmax(0, 1fr); gap: 4px; }
}
   PR1.527 — Pythia neu geordnet (Entwurf 08/09). Zwilling in style-redesign.css.
   Taeglich genutzt: keine Animation, keine Verlaeufe, keine Glows.
   ═══════════════════════════════════════════════════════════════════════════ */
.pythia-bereich { grid-template-columns: 17rem minmax(0, 1fr); }
.pythia-gespraeche { padding: 14px; }
.pythia-hauptteil { padding: 0; }
.pythia-kopf { margin: 0; padding: 12px 20px; border-bottom: 1px solid var(--border); flex-wrap: wrap; }
.pythia-kopf-rechts { margin-left: auto; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.pythia-bestand { display: inline-flex; align-items: center; gap: 4px; padding: 4px 10px; border-radius: 999px; background: var(--bg-card2); border: 1px solid var(--border); font-size: var(--fs-ui); color: var(--text-primary); white-space: nowrap; font-variant-numeric: tabular-nums; }
.pythia-bestand-titel { color: var(--text-secondary); }
.pythia-lesespalte { max-width: 820px; margin: 0 auto; padding: 24px 20px; }

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

/* Leerzustand: Ueberschrift, Satz, Eingabe-Karte, Vorschlaege nach Art */
.chat-panel.is-leer { padding-top: 32px; }
.chat-panel.is-leer .chat-leer { padding: 0; text-align: left; }
.chat-leer-titel { font-size: var(--fs-title); margin: 0 0 8px; }
.chat-leer-sub { margin: 0; font-size: var(--fs-body); }
.chat-beispiele { display: grid; grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); gap: 12px; align-items: stretch; }
.chat-beispiel { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; text-align: left; padding: 12px 14px; border-radius: 8px; max-width: none; }
.chat-beispiel-art { font-size: var(--fs-meta); font-weight: 500; color: var(--text-secondary); }
.chat-beispiel-text { color: var(--text-primary); }

/* Eingabe als Karte */
.chat-form.chat-eingabe-karte { flex-direction: column; align-items: stretch; flex-wrap: nowrap; gap: 8px; padding: 12px 14px; border: 1px solid var(--border); border-radius: 12px; background: var(--bg-card); }
.chat-eingabe-karte:focus-within { border-color: var(--primary); }
.chat-eingabe-karte .chat-eingabe { flex: none; width: 100%; min-height: 4.5rem; border: none; background: transparent; padding: 4px 2px; resize: none; box-shadow: none; outline: none; }
.chat-eingabe-fuss { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.chat-eingabe-platz { flex: 1 1 auto; }
.chat-eingabe-hinweis { color: var(--text-secondary); font-size: var(--fs-ui); }
.chat-eingabe-hinweis > span[aria-hidden] { display: inline-flex; align-items: center; gap: 4px; }
.chat-eingabe-hinweis kbd { font: inherit; display: inline-flex; align-items: center; }

/* Gespraech: eigene Frage rechts als Blase, Antwort links mit Marke */
.chat-zeile.chat-ich { border-radius: 12px; background: var(--bg-card2); border: none; padding: 10px 16px; }
.chat-zeile.chat-apollon { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 12px; padding: 0; background: none; border: none; box-shadow: none; }
.chat-marke { width: 28px; height: 28px; border-radius: 6px; display: inline-flex; align-items: center; justify-content: center; background: var(--pythia-terra-grund); color: var(--pythia-terra); }
.chat-antwort { min-width: 0; }

/* Belege als Chips, Nummer im Chip */
.chat-quellen { gap: 6px; }
.chat-quelle { display: inline-flex; align-items: center; gap: 6px; border-radius: 6px; }
.chat-quelle .chat-quelle-nr { flex: none; font-weight: 600; color: var(--accent); }
.chat-quelle-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Seitenleiste: schmal — Vorschlaege untereinander, kein Luftraum ueber der Ueberschrift */
.pythia-leiste .chat-beispiele { grid-template-columns: minmax(0, 1fr); gap: 8px; }
.pythia-leiste .chat-panel.is-leer { padding-top: 8px; }

/* PR1.514 — Team-Spalte der Projektliste: Fotos (34 px, ueberlappend, max. 3 + „+N")
   und eine Karte bei Maus/Fokus (team-stack.js). Keine Animation: taeglich benutzt. */
.team-stack { display: inline-flex; align-items: center; white-space: nowrap; }
.team-stack-item { display: inline-flex; border-radius: 50%; margin-left: -8px; cursor: default; }
.team-stack-item:first-child { margin-left: 0; }
.team-stack-item .emp-avatar { box-shadow: 0 0 0 2px var(--team-ring, var(--bg-card)); }
.team-stack-item:hover, .team-stack-item:focus-visible { position: relative; z-index: 1; }
.team-stack-item:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.team-stack-more {
    width: 34px; height: 34px; align-items: center; justify-content: center;
    background: var(--team-more-bg, var(--bg-card2)); color: var(--text-2); font-size: var(--fs-ui); font-weight: 500;
    box-shadow: 0 0 0 2px var(--team-ring, var(--bg-card)), 0 0 0 3px var(--border);
}
.team-hc {
    position: fixed; z-index: var(--z-popover, 1000); width: 290px; max-width: calc(100vw - 16px);
    background: var(--bg-card); color: var(--text-1); border: 1px solid var(--border);
    border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); padding: 12px 14px; font-size: var(--fs-body);
    pointer-events: none;
}
.team-hc-head { display: flex; gap: 10px; align-items: center; }
.team-hc-who { display: flex; flex-direction: column; min-width: 0; }
.team-hc-name { font-weight: 600; }
.team-hc-role, .team-hc-list span { color: var(--text-3); font-size: var(--fs-ui); }
.team-hc-meta { display: grid; grid-template-columns: auto 1fr; gap: 3px 12px; margin: 10px 0 0; font-size: var(--fs-ui); }
.team-hc-meta dt { color: var(--text-3); }
.team-hc-meta dd { margin: 0; font-weight: 600; font-variant-numeric: tabular-nums; }
.team-hc-bar { height: 6px; background: var(--team-more-bg, var(--bg-card2)); border-radius: 3px; overflow: hidden; margin-top: 8px; }
.team-hc-bar i { display: block; height: 100%; background: var(--primary); }
.team-hc-title { font-weight: 600; margin-bottom: 6px; }
.team-hc-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.team-hc-list li { display: flex; flex-direction: column; }

/* ──────────────────────────────────────────────────────────────────────────
   PR1.528 — Pythia liest Dateien (Entwurf 09). Zwilling in style-redesign.css.
   ────────────────────────────────────────────────────────────────────────── */
.chat-eingabe-karte { position: relative; }
.chat-anhaenge { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.chat-anhang { display: flex; align-items: center; gap: 8px; min-width: 0; flex: 0 1 15rem; padding: 8px; border: 1px solid var(--border); border-radius: 8px; background: var(--bg-card2); }
.chat-anhang.is-fehler { border-color: var(--danger); background: color-mix(in srgb, var(--danger) 12%, var(--bg-card2)); }
.chat-anhang-typ { flex: none; width: 36px; height: 36px; border-radius: 6px; display: inline-flex; align-items: center; justify-content: center; font-size: var(--fs-label); font-weight: 500; letter-spacing: 0.02em; color: var(--text-primary); background: var(--bg-card); }
.chat-anhang-typ.typ-pdf { background: color-mix(in srgb, var(--danger) 22%, var(--bg-card)); }
.chat-anhang-typ.typ-xlsx { background: color-mix(in srgb, var(--success) 22%, var(--bg-card)); }
.chat-anhang-typ.typ-docx { background: color-mix(in srgb, var(--primary) 22%, var(--bg-card)); }
.chat-anhang-typ.typ-eml { background: color-mix(in srgb, var(--multi) 22%, var(--bg-card)); }
.chat-anhang-text { display: flex; flex-direction: column; min-width: 0; flex: 1 1 auto; }
.chat-anhang-name { font-weight: 600; color: var(--text-primary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chat-anhang-stand { display: flex; align-items: center; gap: 8px; font-size: var(--fs-meta); color: var(--text-secondary); }
.chat-anhang.is-fehler .chat-anhang-stand { color: var(--text-primary); white-space: normal; }
.chat-anhang-weg, .chat-anhang-knopf { flex: none; display: inline-flex; align-items: center; justify-content: center; border: none; border-radius: 6px; background: none; color: var(--text-secondary); cursor: pointer; }
.chat-anhang-weg { width: 28px; height: 28px; }
.chat-anhang-knopf { width: 32px; height: 32px; }
.chat-anhang-weg:hover, .chat-anhang-knopf:hover { background: var(--bg-card); color: var(--text-primary); }
.chat-anhang-weg:focus-visible, .chat-anhang-knopf:focus-visible { outline: 2px solid var(--primary); outline-offset: 1px; }
.chat-anhang-knopf:disabled { opacity: 0.5; cursor: not-allowed; }
.chat-anhang-fuss { display: inline-flex; align-items: center; gap: 8px; min-width: 0; }
.chat-anhang-hinweis { display: inline-flex; flex-direction: column; line-height: 1.3; min-width: 0;  color: var(--text-secondary); font-size: var(--fs-ui); }
.chat-anhaenge-bekannt { margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: var(--fs-meta); color: var(--text-secondary); }
.chat-datei-chip { display: inline-flex; align-items: center; gap: 4px; max-width: 16rem; padding: 2px 8px; border: 1px solid var(--border); border-radius: 6px; background: var(--bg-card); font-size: var(--fs-meta); color: var(--text-primary); }
.chat-datei-chip span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chat-ich-anhaenge { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.chat-quelle-anhang, .chat-beleg-anhang { cursor: default; }
.chat-ablage-hinweis { display: none; }
.chat-eingabe-karte.is-ablage { border-style: dashed; border-color: var(--primary); background: color-mix(in srgb, var(--primary) 10%, var(--bg-card)); }
.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: color-mix(in srgb, var(--primary) 14%, var(--bg-card)); color: var(--text-primary); font-weight: 600; pointer-events: none; }
.pythia-leiste .chat-anhang { flex-basis: 100%; }
.pythia-leiste .chat-anhang-privat { display: none; }

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


/* ═══════════════════════════════════════════════════════════
   PR1.534 (#810) — Ansprechpartner-Zeilen (contact-rows.js), Opp und Projekt, beide Shells.
   Rolle als ruhige Spalte fester Breite, daneben Foto/Initialen 28 px + Name linksbuendig —
   so laufen alle Namen auf einer senkrechten Linie. Leere Rolle: unsichtbarer Platzhalter in
   Avatar-Groesse, „—" steht damit auf der Namenslinie. Keine Animation (taeglich genutzt).
   ═══════════════════════════════════════════════════════════ */
.contact-rows { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.contact-row { display: grid; grid-template-columns: 5.25rem minmax(0, 1fr); align-items: center; column-gap: 10px; min-width: 0; }
.contact-role { font-size: var(--fs-meta); color: var(--text-3); overflow-wrap: anywhere; }
.contact-who { display: flex; align-items: center; gap: 8px; min-width: 0; }
.contact-av.emp-avatar { flex: none; width: 28px; height: 28px; font-size: var(--fs-label); background: var(--bg-hover); color: var(--text-1); }
.contact-av.is-missing { flex: none; width: 28px; height: 28px; }
.contact-txt { display: flex; flex-direction: column; min-width: 0; }
.contact-name { font-size: var(--fs-body); font-weight: 500; color: var(--text-1); overflow-wrap: anywhere; }
.contact-name.is-empty { font-weight: 400; color: var(--text-3); }
a.contact-name, .stamm-person-link { color: var(--text-1); text-decoration: none; border-radius: 2px; }
a.contact-name:hover, .stamm-person-link:hover { text-decoration: underline; text-underline-offset: 2px; }
a.contact-name:focus-visible, .stamm-person-link:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.contact-note { font-size: var(--fs-label); color: var(--text-3); }
.contact-act { flex: none; }
.proj-contacts-meta { font-weight: 400; text-transform: none; letter-spacing: 0; color: var(--text-3); }

/* ─────────────────────────────────────────
   PR1.566 (#852) — Mitarbeiter „Organisation" (klassische Shell)
   Markup: js/components/employee-org-html.js · Redesign-Gesicht: style-redesign.css (.crm .eorg-*)
───────────────────────────────────────── */
#view-employees .emp-panel[hidden], #view-employees .eorg-host[hidden] { display: none; }
#view-employees .emp-tabs-host { display: contents; }
#view-employees .eorg-tabs { display: inline-flex; gap: 2px; padding: 3px; border-radius: var(--radius-md); background: var(--bg-card2); border: 1px solid var(--border); }
#view-employees .eorg-tab { border: 0; background: transparent; color: var(--text-2); padding: 6px 14px; border-radius: var(--radius-sm); font: inherit; font-size: var(--fs-body); cursor: pointer; }
#view-employees .eorg-tab:hover { color: var(--text-1); }
#view-employees .eorg-tab.is-active { background: var(--bg-card); color: var(--text-1); font-weight: 600; box-shadow: 0 1px 2px rgba(0,0,0,.25); }
#view-employees .eorg-tab:focus-visible,
#view-employees .eorg-card:focus-visible,
#view-employees .eorg-bd:focus-visible,
#view-employees .eorg-row:focus-visible,
#view-employees .eorg-hit:focus-visible,
#view-employees .eorg-link:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
#view-employees .eorg-host { display: flex; flex-direction: column; gap: 16px; margin-top: 12px; }
#view-employees .eorg-toolbar { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
#view-employees .eorg-search { flex: 1 1 280px; max-width: 460px; }
#view-employees .eorg-search-input { width: 100%; padding: 8px 12px; border-radius: var(--radius-md); border: 1px solid var(--border); background: var(--bg-input); color: var(--text-1); font: inherit; }
#view-employees .eorg-results { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-md); padding: 8px; }
#view-employees .eorg-hits { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 4px; }
#view-employees .eorg-hit { display: flex; align-items: center; gap: 8px; width: 100%; padding: 6px 8px; border: 0; background: transparent; color: var(--text-1); border-radius: var(--radius-sm); cursor: pointer; text-align: left; font: inherit; }
#view-employees .eorg-hit:hover { background: var(--bg-hover); }
#view-employees .eorg-hit .eorg-muted { margin-left: auto; font-size: var(--fs-meta); }
#view-employees .eorg-muted { color: var(--text-3); font-size: var(--fs-ui); }
#view-employees .eorg-eyebrow { color: var(--text-3); font-size: var(--fs-meta); letter-spacing: .02em; }
#view-employees .eorg-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
#view-employees .eorg-bl { display: grid; grid-template-columns: minmax(200px, 1.4fr) repeat(3, minmax(110px, .8fr)) minmax(260px, 2fr); gap: 20px; padding: 18px 20px; background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-lg); }
#view-employees .eorg-bl-title { margin: 2px 0 10px; font-size: var(--fs-title); color: var(--text-1); }
#view-employees .eorg-kpi { display: flex; flex-direction: column; gap: 4px; }
#view-employees .eorg-kpi strong { font-size: var(--fs-display); color: var(--text-1); font-variant-numeric: tabular-nums; line-height: 1.1; }
#view-employees .eorg-lead { display: flex; align-items: center; gap: 10px; }
#view-employees .eorg-lead > span:last-child { display: flex; flex-direction: column; min-width: 0; }
#view-employees .eorg-lead-name { color: var(--text-1); font-weight: 500; font-size: var(--fs-body); }
#view-employees .eorg-lead-ph { width: 40px; height: 40px; border-radius: 50%; border: 1px dashed var(--border-light); display: inline-flex; align-items: center; justify-content: center; color: var(--text-3); flex: none; }
#view-employees .eorg-tree { display: grid; grid-template-columns: minmax(200px, 260px) minmax(0, 1fr); gap: 16px; align-items: start; }
#view-employees .eorg-tree:not(:has(.eorg-bds)) { grid-template-columns: minmax(0, 1fr); }
#view-employees .eorg-bds { display: flex; flex-direction: column; gap: 12px; }
#view-employees .eorg-bd { padding: 14px 16px; border: 1px dashed var(--border-light); border-radius: var(--radius-md); background: var(--bg-card); cursor: pointer; display: flex; flex-direction: column; gap: 4px; }
#view-employees .eorg-bd-name { color: var(--text-1); font-weight: 600; }
#view-employees .eorg-bu { padding: 14px; border-radius: var(--radius-lg); background: var(--bg-card2); border: 1px solid var(--border); }
#view-employees .eorg-bu-head { display: flex; gap: 8px; align-items: baseline; margin-bottom: 12px; }
#view-employees .eorg-bu-name { color: var(--text-1); font-weight: 600; }
#view-employees .eorg-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 12px; }
#view-employees .eorg-card { display: flex; flex-direction: column; gap: 12px; padding: 16px; background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-md); cursor: pointer; }
#view-employees .eorg-card:hover, #view-employees .eorg-bd:hover { border-color: var(--primary); }
#view-employees .eorg-card.is-restricted { cursor: default; border-style: dashed; }
#view-employees .eorg-card.is-restricted:hover { border-color: var(--border); }
#view-employees .eorg-card-title { margin: 0; font-size: var(--fs-body); color: var(--text-1); line-height: 1.25; }
#view-employees .eorg-wall { display: flex; flex-wrap: wrap; gap: 6px; min-height: 28px; }
#view-employees .eorg-face { display: inline-flex; border-radius: 50%; }
#view-employees .eorg-face.is-busy { filter: grayscale(1); opacity: .55; }
#view-employees .eorg-face-more { display: inline-flex; align-items: center; justify-content: center; min-width: 28px; height: 28px; padding: 0 4px; border-radius: 14px; background: var(--bg-card2); color: var(--text-2); font-size: var(--fs-label); }
#view-employees .eorg-free-today { color: var(--text-2); font-size: var(--fs-body); }
#view-employees .eorg-free-today strong { font-size: var(--fs-title); color: var(--text-1); margin-right: 4px; font-variant-numeric: tabular-nums; }
#view-employees .eorg-cap { border-top: 1px solid var(--border); padding-top: 10px; display: flex; flex-direction: column; gap: 6px; }
#view-employees .eorg-cap-head { display: flex; justify-content: space-between; color: var(--text-2); font-size: var(--fs-ui); }
#view-employees .eorg-bars { display: flex; align-items: flex-end; gap: 3px; }
#view-employees .eorg-bars-sm { height: 40px; }
#view-employees .eorg-bars-lg { height: 72px; }
#view-employees .eorg-bar { flex: 1; background: var(--primary); border-radius: 2px 2px 0 0; min-height: 3px; }
#view-employees .eorg-axis { display: flex; justify-content: space-between; color: var(--text-3); font-size: var(--fs-label); }
#view-employees .eorg-card-foot { display: flex; justify-content: space-between; align-items: center; margin-top: auto; }
#view-employees .eorg-open { color: var(--primary-text); font-weight: 500; font-size: var(--fs-body); }
#view-employees .eorg-legend { display: flex; flex-wrap: wrap; gap: 18px; color: var(--text-3); font-size: var(--fs-ui); }
#view-employees .eorg-legend > span { display: inline-flex; align-items: center; gap: 6px; }
#view-employees .eorg-dot { width: 10px; height: 10px; border-radius: 50%; display: inline-block; }
#view-employees .eorg-dot.is-free { background: var(--warning); }
#view-employees .eorg-dot.is-busy { background: var(--text-3); }
#view-employees .eorg-dot.is-bar { background: var(--primary); border-radius: 2px; }
#view-employees .eorg-link { border: 0; background: transparent; padding: 0; color: var(--primary-text); font: inherit; cursor: pointer; text-decoration: underline; text-underline-offset: 2px; }
/* PR1.568 (#855) — Kopfzeile: „Frei ab", „Fähigkeit", Begriffe-Schalter, gesetzte Filter. */
#view-employees .eorg-toolbar .eorg-bar-host { display: contents; }
#view-employees .eorg-filters { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; flex: 1 1 auto; }
#view-employees .eorg-fpick { position: relative; }
#view-employees .eorg-fchip { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--bg-card); color: var(--text-2); font: inherit; font-size: var(--fs-body); cursor: pointer; }
#view-employees .eorg-fchip:hover { color: var(--text-1); }
#view-employees .eorg-fchip.is-set { color: var(--primary-text); border-color: var(--primary); font-weight: 600; }
#view-employees .eorg-caret { display: inline-flex; color: var(--text-3); }
#view-employees .eorg-pop { position: absolute; z-index: 30; top: calc(100% + 4px); left: 0; min-width: 210px; max-height: 352px; overflow: auto; display: flex; flex-direction: column; gap: 2px; padding: 6px; background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-md); box-shadow: 0 8px 24px rgba(0,0,0,.35); }
#view-employees .eorg-pop-skills { min-width: 256px; }
#view-employees .eorg-pop-search { width: 100%; padding: 6px 8px; margin-bottom: 4px; border-radius: var(--radius-sm); border: 1px solid var(--border); background: var(--bg-input); color: var(--text-1); font: inherit; }
#view-employees .eorg-pop-list { display: flex; flex-direction: column; gap: 2px; }
#view-employees .eorg-opt { display: flex; align-items: center; gap: 8px; width: 100%; padding: 6px 8px; border: 0; border-radius: var(--radius-sm); background: transparent; color: var(--text-1); font: inherit; text-align: left; cursor: pointer; }
#view-employees .eorg-opt:hover { background: var(--bg-hover); }
#view-employees .eorg-opt.is-active { color: var(--primary-text); font-weight: 600; }
#view-employees .eorg-opt-check input { width: 16px; height: 16px; margin: 0; accent-color: var(--primary); flex: none; }
#view-employees .eorg-opt-check .eorg-muted { margin-left: auto; font-variant-numeric: tabular-nums; }
#view-employees .eorg-pop-empty { margin: 4px 8px; }
#view-employees .eorg-terms { display: inline-flex; align-items: center; gap: 8px; margin-left: auto; }
#view-employees .eorg-seg { display: inline-flex; gap: 2px; padding: 3px; border-radius: var(--radius-md); background: var(--bg-card2); border: 1px solid var(--border); }
#view-employees .eorg-seg button { border: 0; background: transparent; color: var(--text-2); padding: 4px 12px; border-radius: var(--radius-sm); font: inherit; cursor: pointer; }
#view-employees .eorg-seg button:hover { color: var(--text-1); }
#view-employees .eorg-seg button.is-active { background: var(--bg-card); color: var(--text-1); font-weight: 600; box-shadow: 0 1px 2px rgba(0,0,0,.25); }
#view-employees .eorg-active { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; flex-basis: 100%; }
#view-employees .eorg-achip { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border: 1px solid var(--border); border-radius: 999px; background: var(--bg-card2); color: var(--text-1); font: inherit; cursor: pointer; }
#view-employees .eorg-achip span { color: var(--text-3); }
#view-employees .eorg-error { color: var(--danger); }
#view-employees .eorg-card.is-dimmed { opacity: .72; }
#view-employees .eorg-fchip:focus-visible,
#view-employees .eorg-opt:focus-visible,
#view-employees .eorg-opt-check:focus-within,
#view-employees .eorg-achip:focus-visible,
#view-employees .eorg-pop-search:focus-visible,
#view-employees .eorg-seg button:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
#view-employees .eorg-empty { padding: 32px; text-align: center; background: var(--bg-card); border: 1px dashed var(--border-light); border-radius: var(--radius-lg); display: flex; flex-direction: column; align-items: center; gap: 10px; }
#view-employees .eorg-empty-title { margin: 0; font-size: var(--fs-section); color: var(--text-1); }
#view-employees .eorg-crumbs { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; color: var(--text-3); font-size: var(--fs-body); }
#view-employees .eorg-unit { display: flex; flex-direction: column; gap: 12px; }
#view-employees .eorg-unit-title { margin: 0; font-size: var(--fs-title); color: var(--text-1); }
#view-employees .eorg-unit-title:focus { outline: none; }
#view-employees .eorg-unit-head { display: grid; grid-template-columns: minmax(0, 2fr) minmax(260px, 1.2fr); gap: 0; background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; }
#view-employees .eorg-chain, #view-employees .eorg-unit-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-column: 1; }
#view-employees .eorg-chain { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
#view-employees .eorg-chain-item, #view-employees .eorg-unit-kpis .eorg-kpi { padding: 14px 16px; border-right: 1px solid var(--border); border-bottom: 1px solid var(--border); display: flex; flex-direction: column; gap: 6px; }
#view-employees .eorg-chain-lead { display: flex; align-items: center; gap: 8px; color: var(--text-1); font-weight: 500; font-size: var(--fs-body); }
#view-employees .eorg-unit-head > .eorg-kpi-wide { grid-column: 2; grid-row: 1 / span 2; padding: 16px; }
#view-employees .eorg-table-wrap { overflow-x: auto; background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-lg); }
#view-employees .eorg-table { width: 100%; border-collapse: collapse; font-size: var(--fs-body); }
#view-employees .eorg-table th, #view-employees .eorg-table td { padding: 10px 14px; text-align: left; border-bottom: 1px solid var(--border); color: var(--text-1); vertical-align: middle; }
#view-employees .eorg-table thead th { color: var(--text-3); font-weight: 500; font-size: var(--fs-ui); }
#view-employees .eorg-group th { background: var(--bg-card2); font-weight: 600; }
#view-employees .eorg-row { cursor: pointer; }
#view-employees .eorg-row:hover { background: var(--bg-hover); }
#view-employees .eorg-num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
#view-employees .eorg-person { display: flex; align-items: center; gap: 10px; }
#view-employees .eorg-person > span:last-child { display: flex; flex-direction: column; }
#view-employees .eorg-person-name { font-weight: 600; color: var(--text-1); }
#view-employees .eorg-weeks { display: flex; gap: 2px; font-weight: 400; font-size: var(--fs-label); }
#view-employees .eorg-weeks > span, #view-employees .eorg-cell { width: 18px; text-align: center; }
#view-employees .eorg-strip { display: inline-flex; gap: 2px; }
#view-employees .eorg-cell { height: 14px; border-radius: 3px; background: var(--bg-card2); border: 1px solid var(--border); }
#view-employees .eorg-cell.is-low { background: color-mix(in srgb, var(--primary) 35%, transparent); }
#view-employees .eorg-cell.is-high { background: color-mix(in srgb, var(--primary) 65%, transparent); }
#view-employees .eorg-cell.is-full { background: var(--primary); border-color: var(--primary); }
#view-employees .eorg-chip { display: inline-block; padding: 2px 8px; margin: 0 4px 4px 0; border-radius: var(--radius-sm); background: var(--bg-card2); color: var(--text-2); font-size: var(--fs-meta); }
@media (max-width: 1100px) {
  #view-employees .eorg-bl { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #view-employees .eorg-kpi-wide { grid-column: 1 / -1; }
  #view-employees .eorg-tree, #view-employees .eorg-unit-head { grid-template-columns: minmax(0, 1fr); }
  #view-employees .eorg-unit-head > .eorg-kpi-wide { grid-column: 1; grid-row: auto; }
}
@media (max-width: 640px) {
  X
}

/* ── PR1.543 (#824) — Admin-Ueberblick (klassisches Gesicht) + echter Schalter ───
   Dasselbe Markup wie im Redesign (components/admin-overview.js). Zahlen und Texte
   stehen in --text-1/2 auf leicht getoenten Flaechen → Kontrast unabhaengig vom Ton. */
.adm-ov { display: flex; flex-direction: column; gap: 16px; padding: 16px 0; }
.adm-ov-stand { display: flex; align-items: center; gap: 12px; color: var(--text-2); font-size: var(--fs-meta); flex-wrap: wrap; }
.adm-ov-stand > span { flex: 1; }
.adm-ov-raster { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); gap: 16px; }
/* PR1.570 — breite Kachel („Zu erledigen") ueber zwei Spalten, sobald DREI nebeneinander passen
   (3 * 320 + 2 * 16 = 992): bei drei schmalen Spalten blieben ~135 px Text neben Zahl und
   Sprungknopf. Bei zwei Spalten ist die Kachel ohnehin breit genug — und ein Sprung ueber
   zwei Spalten liesse neben „Lage" eine Luecke. Die Redesign-Schwelle steht in style-redesign.css. */
.adm-ov { container: adm-ov / inline-size; }
@container adm-ov (min-width: 992px) { .adm-ov-raster > .adm-ov-breit { grid-column: span 2; } }
.adm-ov-karte { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-lg); display: flex; flex-direction: column; min-width: 0; }
.adm-ov-kopf { display: flex; align-items: baseline; gap: 8px; padding: 12px 16px; flex-wrap: wrap; }
.adm-ov-kopf h2 { margin: 0; font-size: var(--fs-section); font-weight: 600; color: var(--text-1); }
.adm-ov-luecke { flex: 1; }
.adm-ov-zusatz { color: var(--text-3); font-size: var(--fs-meta); }
.adm-ov-inhalt { padding: 0 16px 16px; display: flex; flex-direction: column; gap: 12px; flex: 1; }
.adm-ov-satz { margin: 0; color: var(--text-1); line-height: 1.5; }
.adm-ov-hinweis { margin: 0; color: var(--text-2); line-height: 1.5; }
.adm-ov-hinweis.adm-ov-fehler { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; border-left: 3px solid var(--danger); padding-left: 8px; color: var(--text-1); }
.adm-ov-pill { display: inline-flex; align-items: center; padding: 1px 8px; border-radius: 999px; font-size: var(--fs-meta); font-weight: 600;
  background: var(--bg-hover); color: var(--text-1); border: 1px solid var(--border); white-space: nowrap; }
.adm-ov-pill.adm-ov-bad { border-color: var(--danger); background: color-mix(in srgb, var(--danger) 14%, transparent); }
.adm-ov-pill.adm-ov-ok { border-color: var(--success); background: color-mix(in srgb, var(--success) 14%, transparent); }
.adm-ov-pill.adm-ov-info { border-color: var(--primary); background: color-mix(in srgb, var(--primary) 14%, transparent); }
.adm-ov-saeulen { display: flex; align-items: flex-end; gap: 3px; height: 72px; }
.adm-ov-saeulen i { flex: 1; min-height: 3px; background: color-mix(in srgb, var(--primary) 35%, transparent); border-radius: 2px 2px 0 0; }
.adm-ov-saeulen i.adm-ov-hoch { background: var(--danger); }
.adm-ov-achse { display: flex; justify-content: space-between; color: var(--text-3); font-size: var(--fs-meta); }
.adm-ov-zahlen { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 96px), 1fr)); border-top: 1px solid var(--border); padding-top: 12px; gap: 8px; }
.adm-ov-zahlen > div { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.adm-ov-zahl { font-size: var(--fs-kpi); font-weight: 600; font-variant-numeric: tabular-nums; color: var(--text-1); line-height: 1.15; overflow-wrap: anywhere; }
.adm-ov-bad-text { color: var(--danger); }
.adm-ov-zahlen span { color: var(--text-2); font-size: var(--fs-meta); }
.adm-ov-fuss { margin-top: auto; }
.adm-ov-liste { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.adm-ov-liste > li { display: flex; align-items: center; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--border); }
.adm-ov-liste > li:last-child { border-bottom: 0; }
.adm-ov-tx { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.adm-ov-tx b { font-weight: 600; }
.adm-ov-tx small { color: var(--text-2); font-size: var(--fs-meta); }
.adm-ov-anzahl { flex: none; width: 32px; height: 32px; border-radius: var(--radius-sm); display: grid; place-items: center; font-weight: 700;
  color: var(--text-1); border: 1px solid var(--border); }
.adm-ov-anzahl.adm-ov-warn { background: color-mix(in srgb, var(--warning) 18%, transparent); border-color: var(--warning); }
.adm-ov-anzahl.adm-ov-bad { background: color-mix(in srgb, var(--danger) 18%, transparent); border-color: var(--danger); }
.adm-ov-anzahl.adm-ov-violet { background: color-mix(in srgb, var(--purple) 18%, transparent); border-color: var(--purple); }
.adm-ov-todo-hinweis { color: var(--text-2); font-size: var(--fs-meta); }
.adm-ov-sprung { flex: none; display: inline-flex; align-items: center; gap: 4px; background: none; border: 0; padding: 4px; border-radius: var(--radius-sm);
  color: var(--primary-text, var(--primary)); font: inherit; font-weight: 600; cursor: pointer; }
.adm-ov-sprung:hover { text-decoration: underline; }
.adm-ov-sprung:focus-visible, .funk-switch:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.adm-ov-nutzer { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
.adm-ov-donut { width: 120px; height: 120px; flex: none; }
.adm-ov-donut-zahl { font-size: var(--fs-title); font-weight: 600; fill: var(--text-1); }
.adm-ov-ring-grund { stroke: var(--bg-hover); }
.adm-ov-ring-ok { stroke: var(--success); } .adm-ov-ring-ok-bg { background: var(--success); }
.adm-ov-ring-info { stroke: var(--primary); } .adm-ov-ring-info-bg { background: var(--primary); }
.adm-ov-ring-bad { stroke: var(--danger); } .adm-ov-ring-bad-bg { background: var(--danger); }
.adm-ov-ring-muted { stroke: var(--text-3); } .adm-ov-ring-muted-bg { background: var(--text-3); }
.adm-ov-legende { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; flex: 1; min-width: 144px; }
.adm-ov-legende li { display: flex; align-items: center; gap: 8px; }
.adm-ov-legende b { margin-left: auto; font-variant-numeric: tabular-nums; }
.adm-ov-punkt { width: 10px; height: 10px; border-radius: 50%; flex: none; }
.adm-ov-anteile { display: flex; height: 8px; border-radius: 999px; overflow: hidden; background: var(--bg-hover); }
.adm-ov-anteile i { display: block; height: 100%; }
.adm-ov-anteil-0 { background: var(--purple); } .adm-ov-anteil-1 { background: var(--primary); } .adm-ov-anteil-2 { background: var(--success); }
.adm-ov-anteil-3 { background: var(--warning); } .adm-ov-anteil-4 { background: var(--text-3); }
.adm-ov-betrag { min-width: 72px; text-align: right; color: var(--text-2); font-variant-numeric: tabular-nums; font-size: var(--fs-meta); }
.adm-ov-protokoll time { flex: none; width: 60px; color: var(--text-3); font-size: var(--fs-meta); font-variant-numeric: tabular-nums; }
.adm-ov-mono { flex: none; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: var(--bg-hover); color: var(--text-1);
  font-size: var(--fs-meta); font-weight: 700; }
.funk-switch { position: relative; flex: none; width: 40px; height: 24px; border-radius: 999px; border: 1px solid var(--border); background: var(--bg-hover); padding: 0; cursor: pointer; }
.funk-switch-knopf { position: absolute; top: 2px; left: 2px; width: 18px; height: 18px; border-radius: 50%; background: var(--text-2); }
.funk-switch[aria-checked="true"] { background: var(--primary); border-color: var(--primary); }
.funk-switch[aria-checked="true"] .funk-switch-knopf { left: 18px; background: #fff; }
.funk-switch:disabled { opacity: .5; cursor: not-allowed; }
.funk-switch[aria-busy="true"] { opacity: .7; cursor: progress; }

/* ─────────────────────────────────────────
   PR1.554 (#835) — Competencies und Specializations (Markup geteilt:
   components/cert-competency-view.js). Nutzt die --cz-*-Werte beider Shells, keine Animation.
   ───────────────────────────────────────── */
.cc-vendor { margin-bottom: var(--cz-gap); padding: 0; }
.cc-vhead { display: flex; flex-wrap: wrap; align-items: flex-start; gap: .75rem 1rem; padding: 1rem 1.125rem; border-bottom: 1px solid var(--cz-line); }
.cc-vtitle { flex: 1 1 20rem; min-width: 0; }
.cc-vtitle .cz-h { margin: 0 0 .25rem; font-weight: 600; }
.cc-vtitle p { margin: 0; font-size: var(--fs-meta); }
.cc-logo { height: 2rem; width: auto; max-width: 6rem; object-fit: contain; }
.cc-logo--lg { height: 3rem; max-width: 7rem; }
.cc-mono { display: inline-grid; place-items: center; flex: none; width: 2.25rem; height: 2.25rem; border-radius: var(--cz-radius-sm);
    background: var(--cz-surface-2); border: 1px solid var(--cz-line); color: var(--cz-text-2); font-size: var(--fs-meta); font-weight: 700; }
.cc-mono--lg { width: 3rem; height: 3rem; }
.cc-tablewrap { overflow-x: auto; }
.cc-table { width: 100%; border-collapse: collapse; font-size: var(--fs-ui); }
.cc-table th, .cc-table td { padding: .625rem .75rem; text-align: left; vertical-align: middle; border-top: 1px solid var(--cz-line); color: var(--cz-text); }
.cc-table thead th { border-top: 0; font-size: var(--fs-meta); font-weight: 600; color: var(--cz-text-2); white-space: nowrap; }
.cc-table tbody th { font-weight: 400; }
.cc-name { display: flex; align-items: center; gap: .625rem; }
.cc-sub { display: block; font-size: var(--fs-meta); }
.cc-inline { margin-left: .5rem; }
.cc-meter { display: flex; align-items: center; gap: .5rem; white-space: nowrap; }
.cc-bar { display: inline-block; width: 5rem; height: .375rem; border-radius: 999px; background: var(--cz-idle-bg); overflow: hidden; }
.cc-bar-fill { display: block; height: 100%; }
.cc-bar-fill.is-ok { background: var(--cz-ok); }
.cc-bar-fill.is-warn { background: var(--cz-warn); }
.cc-bar-fill.is-info { background: var(--cz-accent); }
.cc-bar-fill.is-idle { background: transparent; }
.cc-deadline { font-size: var(--fs-ui); }
.cc-deadline.is-bad { color: var(--cz-bad); font-weight: 600; }
.cc-deadline.is-warn { color: var(--cz-warn); font-weight: 600; }
.cc-deadline.is-ok { color: var(--cz-text); }
.cc-deadline.is-idle { color: var(--cz-text-2); }
.cc-open { white-space: nowrap; }
.cc-miss { color: var(--cz-bad); font-weight: 600; }
.cc-skill { font-size: var(--fs-ui); }
.cc-dots { display: inline-flex; gap: .25rem; }
.cc-dot { display: inline-block; width: .625rem; height: .625rem; border-radius: 2px; background: var(--cz-idle); flex: none; }
.cc-dot.is-ok { background: var(--cz-ok); }
.cc-dot.is-warn { background: var(--cz-warn); }
.cc-dot.is-bad { background: var(--cz-bad); }
.cc-status-select { min-width: 9rem; }
.cc-ggrid { list-style: none; margin: 0; padding: 1rem 1.125rem; display: grid; grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr)); gap: .75rem; }
.cc-gcard { display: flex; flex-direction: column; gap: .25rem; padding: .75rem .875rem; border: 1px solid var(--cz-line); border-radius: var(--cz-radius-sm); font-size: var(--fs-ui); }
.cc-gfoot { display: flex; align-items: center; justify-content: space-between; gap: .5rem; margin-top: .375rem; }
.cc-add { position: relative; margin-left: auto; }
.cc-add > summary { list-style: none; cursor: pointer; }
.cc-add > summary::-webkit-details-marker { display: none; }
.cc-add-body { position: absolute; right: 0; top: calc(100% + .375rem); z-index: 5; width: min(26rem, 80vw); padding: .875rem;
    background: var(--cz-surface); border: 1px solid var(--cz-line); border-radius: var(--cz-radius); box-shadow: 0 8px 24px rgb(0 0 0 / .18); }
.cc-add-body p { margin: 0 0 .5rem; font-size: var(--fs-meta); }
.cc-add-list { list-style: none; margin: 0 0 .75rem; padding: 0; display: flex; flex-wrap: wrap; gap: .375rem; }
.cc-add-free { display: grid; grid-template-columns: 1fr auto; gap: .375rem .5rem; align-items: center; margin-bottom: .5rem; }
.cc-add-free label { grid-column: 1 / -1; font-size: var(--fs-meta); color: var(--cz-text-2); }
.cc-foot { margin-top: .5rem; }
.cc-emptyhint { margin-bottom: var(--cz-gap); }
.cc-crumb { display: flex; flex-wrap: wrap; gap: .25rem; align-items: center; margin-bottom: .75rem; font-size: var(--fs-ui); color: var(--cz-text-2); }
.cc-detail { display: grid; grid-template-columns: minmax(0, 1fr) minmax(16rem, 22rem); gap: var(--cz-gap); align-items: start; }
.cc-main, .cc-aside { display: grid; gap: var(--cz-gap); min-width: 0; }
.cc-hero-top { display: flex; align-items: flex-start; gap: 1rem; }
.cc-hero-title { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: .125rem; font-size: var(--fs-ui); }
.cc-hero-h { margin: 0; font-size: var(--fs-title); font-weight: 700; color: var(--cz-text); }
.cc-hero-h:focus { outline: none; }
.cc-steps { list-style: none; margin: 1.25rem 0 0; padding: 0; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: .5rem; counter-reset: none; }
.cc-step { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; gap: .125rem; font-size: var(--fs-meta); }
.cc-step::before { content: ''; position: absolute; top: .875rem; left: calc(-50% + 1rem); right: calc(50% + 1rem); height: 2px; background: var(--cz-line); }
.cc-step:first-child::before { display: none; }
.cc-step.is-done::before, .cc-step.is-current::before { background: var(--cz-ok); }
.cc-step-dot { display: grid; place-items: center; width: 1.75rem; height: 1.75rem; border-radius: 50%; border: 2px solid var(--cz-line);
    background: var(--cz-surface); color: var(--cz-text-2); font-weight: 700; margin-bottom: .25rem; }
.cc-step.is-done .cc-step-dot { background: var(--cz-ok); border-color: var(--cz-ok); color: var(--cz-surface); }
.cc-step.is-done .cc-step-dot::before { content: ''; width: .375rem; height: .6875rem; border: solid currentColor; border-width: 0 2px 2px 0; transform: translateY(-1px) rotate(45deg); }
.cc-step.is-current .cc-step-dot { background: var(--cz-accent); border-color: var(--cz-accent); color: #fff; }
.cc-step.is-bad .cc-step-dot { background: var(--cz-bad); border-color: var(--cz-bad); color: #fff; }
.cc-sechead { display: flex; flex-wrap: wrap; align-items: center; gap: .375rem .625rem; margin-bottom: .5rem; }
.cc-sechead .cz-h { margin: 0; font-weight: 600; }
.cc-sechead .cz-muted { font-size: var(--fs-meta); }
.cc-sechead > .cz-pill:last-child { margin-left: auto; }
.cc-slots { list-style: none; margin: .5rem 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr)); gap: .625rem; }
.cc-slot { display: flex; flex-direction: column; gap: .25rem; min-height: 7.5rem; padding: .75rem; border: 1px solid var(--cz-line); border-radius: var(--cz-radius-sm); font-size: var(--fs-ui); }
.cc-slot.is-empty, .cc-slot.is-suggest { border-style: dashed; }
.cc-slot-foot { display: flex; flex-wrap: wrap; align-items: center; gap: .375rem .625rem; margin-top: auto; }
.cc-reqs { list-style: none; margin: 0; padding: 0; }
.cc-req { display: grid; grid-template-columns: auto minmax(0, 1.2fr) minmax(0, 1fr) auto; gap: .75rem; align-items: center; padding: .5rem 0; border-top: 1px solid var(--cz-line); font-size: var(--fs-ui); }
.cc-req:first-child { border-top: 0; }
.cc-req .cc-dot { border-radius: 50%; }
.cc-form { display: grid; gap: .5rem; }
.cc-field { display: grid; grid-template-columns: minmax(7rem, 9rem) minmax(0, 1fr); gap: .5rem; align-items: center; font-size: var(--fs-ui); }
.cc-field label { color: var(--cz-text-2); }
.cc-field .cz-ps-input { width: 100%; min-width: 0; }
.cc-dl { display: grid; grid-template-columns: minmax(7rem, 9rem) minmax(0, 1fr); gap: .375rem .5rem; margin: 0; font-size: var(--fs-ui); }
.cc-dl dt { color: var(--cz-text-2); }
.cc-dl dd { margin: 0; }
.cc-remove { margin-top: .75rem; }
.cc-remove > summary { cursor: pointer; display: inline-block; }
.cc-docs { list-style: none; margin: 0 0 .5rem; padding: 0; font-size: var(--fs-ui); }
.cc-docs li { display: flex; justify-content: space-between; gap: .5rem; padding: .375rem 0; border-top: 1px solid var(--cz-line); }
.cc-docs li:first-child { border-top: 0; }
.cc-docs a { color: var(--cz-accent-text); overflow-wrap: anywhere; }
.cc-docadd { display: grid; grid-template-columns: 1fr; gap: .375rem; }
@media (max-width: 960px) {
    .cc-detail { grid-template-columns: 1fr; }
    .cc-steps { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 1rem; }
    .cc-step::before { display: none; }
    .cc-req { grid-template-columns: auto minmax(0, 1fr); }
    .cc-req > :nth-child(n+4) { grid-column: 2; }
}

/* ── PR1.550 (#831) — KB-Zustand: Ring, Balken, Reparatur-Liste, Trichter, Wochensaeulen ──
   Zwilling der .crm-Regeln in style-redesign.css. Statisch, keine Transition
   (Frequenz-Regel). Farbe ist nie allein Traeger: jede Zahl steht als Text daneben. */
.kbcc-status .kbz-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin-bottom: 16px;
  align-items: flex-start;
}
.kbcc-status .kbz-grid > * { flex: 1 1 22rem; min-width: 0; }
.kbcc-status .kbz-grid > .kbz-ring-card { flex: 1 1 17rem; }
.kbcc-status .kbz-grid > .kbz-bars-card { flex: 2 1 30rem; }
.kbcc-status .kbz-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 14px 16px;
    min-width: 0;
}
.kbcc-status .kbz-card h3 { margin: 0; font-size: var(--fs-section); color: var(--text-1); }
.kbcc-status .kbz-card-h { display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px 12px; margin-bottom: 12px; }
.kbcc-status .kbz-card-h .kbz-legend { margin-left: auto; }
.kbcc-status .kbz-sub { color: var(--text-2); font-size: var(--fs-ui); font-weight: 400; }

.kbcc-status .kbz-ring { position: relative; width: 9.5rem; margin: 12px auto; }
.kbcc-status .kbz-ring svg { display: block; width: 100%; height: auto; }
.kbcc-status .kbz-ring circle { fill: none; stroke-width: 3.6; }
.kbcc-status .kbz-ring-bg { stroke: var(--border); }
.kbcc-status .kbz-ring-val { stroke: var(--success); }
.kbcc-status .kbz-ring-txt { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.kbcc-status .kbz-ring-txt b { font-size: var(--fs-title); line-height: 1.1; color: var(--text-1); }
.kbcc-status .kbz-ring-txt span { color: var(--text-2); font-size: var(--fs-ui); }
.kbcc-status .kbz-ring-stats { grid-template-columns: repeat(3, 1fr); margin-bottom: 0; gap: 8px; }
.kbcc-status .kbz-ring-stats .kbcc-stat { padding: 8px 10px; }

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

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

.kbcc-status .kbz-rep-card { padding-bottom: 4px; }
.kbcc-status .kbz-rep-list { list-style: none; margin: 0 -16px; padding: 0; }
.kbcc-status .kbz-rep-row { display: grid; grid-template-columns: auto 1fr; gap: 8px 12px; padding: 12px 16px; border-top: 1px solid var(--border); align-items: start; }
.kbcc-status .kbz-rep-count { min-width: 2rem; text-align: center; padding: 4px 8px; border-radius: var(--radius-sm); font-weight: 600; color: var(--text-1); font-variant-numeric: tabular-nums; }
.kbcc-status .kbz-rep-count.is-broken { background: color-mix(in srgb, var(--danger) 22%, transparent); }
.kbcc-status .kbz-rep-count.is-warn { background: color-mix(in srgb, var(--warning) 22%, transparent); }
.kbcc-status .kbz-rep-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.kbcc-status .kbz-rep-text b { color: var(--text-1); }
.kbcc-status .kbz-rep-text span { color: var(--text-2); font-size: var(--fs-ui); }
.kbcc-status .kbz-rep-actions { grid-column: 2; display: flex; flex-wrap: wrap; gap: 8px; }

.kbcc-status .kbz-funnel { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.kbcc-status .kbz-fun-row { display: grid; grid-template-columns: minmax(6rem, 9rem) 1fr; gap: 2px 12px; align-items: center; }
.kbcc-status .kbz-fun-track { display: block; }
.kbcc-status .kbz-fun-bar { display: block; min-width: max-content; padding: 4px 8px; border-radius: var(--radius-sm); background: var(--primary); color: white; font-weight: 600; font-variant-numeric: tabular-nums; }
.kbcc-status .kbz-fun-note { grid-column: 2; color: var(--text-2); font-size: var(--fs-ui); }
.kbcc-status .kbz-fun-note:empty { display: none; }
.kbcc-status .kbz-fun-note.is-loss { color: var(--text-1); font-weight: 600; }

.kbcc-status .kbz-cols { list-style: none; margin: 0 0 8px; padding: 0; display: grid; grid-template-columns: repeat(7, 1fr); gap: 8px; }
.kbcc-status .kbz-col { display: flex; flex-direction: column; gap: 4px; text-align: center; }
.kbcc-status .kbz-col-n, .kbcc-status .kbz-col-day { color: var(--text-2); font-size: var(--fs-ui); font-variant-numeric: tabular-nums; }
.kbcc-status .kbz-col-bar { display: flex; align-items: flex-end; height: 5rem; border-bottom: 1px solid var(--border); }
.kbcc-status .kbz-col-bar > span { display: block; width: 100%; background: color-mix(in srgb, var(--primary) 30%, transparent); border-radius: 3px 3px 0 0; }
.kbcc-status .kbz-col.is-peak .kbz-col-bar > span { background: var(--danger); }

.kbcc-status .kbz-table { margin-bottom: 16px; padding: 0; }
.kbcc-status .kbz-table-sum { cursor: pointer; padding: 12px 16px; color: var(--text-1); font-weight: 600; }
.kbcc-status .kbz-table[open] > .kbz-table-sum { border-bottom: 1px solid var(--border); }
.kbcc-status .kbz-table .table-wrap { padding: 8px 16px 12px; }
.kbcc-status .kbz-rep-more { margin: 0 -16px; padding: 8px 16px 10px; border-top: 1px solid var(--border); }


/* ═══════════════════════════════════════════════════════════════════════════
   PR1.556 (#837) — klassisches Gesicht von Kopfkarte, Stammdaten-Kacheln und Rollen-Team.
   Markup aus denselben Bausteinen wie das Redesign (header-strip-model.js, stammdaten-card.js
   `layout: 'grid'`, project-team-groups.js); hier nur die klassischen Tokens. Alle Regeln sind
   an `.hcard--classic` bzw. die klassischen View-IDs gebunden — style.css laedt auch in der
   Redesign-Shell, die ihr eigenes `.crm .hcard` / `.crm .stamm-*` mitbringt.
   Taeglich genutzt: keine Animation (Konvention 22).
   ═══════════════════════════════════════════════════════════════════════════ */

/* Kopf: Rueckweg ueber der Karte, die Karte selbst traegt Zeile 1 und den Streifen. */
.opp-hero.opp-hero--card { display: block; padding: 12px 24px 16px; }
.opp-hero--card > .opp-hero-back { margin: 0 0 8px -8px; }
.hcard--classic { container-type: inline-size; container-name: hcard-classic; }
.hcard--classic .hcard-row { display: flex; align-items: center; flex-wrap: wrap; gap: 12px 16px; }
.hcard--classic .hcard-row > .opp-hero-logo, .hcard--classic .hcard-row > .opp-hero-icon { flex: none; }
.hcard--classic .hcard-text { flex: 1 1 18rem; min-width: 0; }
.hcard--classic .hcard-title { margin: 0; font-size: var(--fs-title); line-height: 1.3; font-weight: 600; color: var(--text-1); overflow-wrap: anywhere; text-wrap: balance; }
.hcard--classic .hcard-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 8px; margin-top: 4px; font-size: var(--fs-ui); color: var(--text-2); }
.hcard--classic .hcard-customer { font: inherit; font-weight: 600; color: var(--text-1); }
.hcard--classic button.hcard-customer { padding: 0; border: 0; background: none; cursor: pointer; }
.hcard--classic button.hcard-customer:hover { text-decoration: underline; text-underline-offset: 2px; }
.hcard--classic button.hcard-customer:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; border-radius: 2px; }
.hcard--classic .hcard-sep { width: 4px; height: 4px; border-radius: 50%; background: var(--text-3); opacity: .6; }
.hcard--classic .hcard-actions { margin-left: auto; }
.hcard--classic .head-actions--strip .head-more-btn { padding-left: 9px; padding-right: 9px; }
.hcard--classic .head-actions--strip .more-menu-btn { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }

/* Kennzahl-Streifen: sechs Felder mit Trennlinie; schmaler drei bzw. zwei je Zeile. */
.hcard--classic .hstrip {
  display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px 0;
  margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--border);
}
.hcard--classic .hstrip-field { min-width: 0; padding: 0 16px; border-left: 1px solid var(--border); }
.hcard--classic .hstrip-field:first-child { padding-left: 0; border-left: 0; }
@container hcard-classic (max-width: 62rem) {
  .hcard--classic .hstrip { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .hcard--classic .hstrip-field:nth-child(3n+1) { padding-left: 0; border-left: 0; }
}
@container hcard-classic (max-width: 34rem) {
  .hcard--classic .hstrip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hcard--classic .hstrip-field:nth-child(3n+1) { padding-left: 16px; border-left: 1px solid var(--border); }
  .hcard--classic .hstrip-field:nth-child(2n+1) { padding-left: 0; border-left: 0; }
}
.hcard--classic .hstrip-lbl { font-size: var(--fs-label); font-weight: 500; color: var(--text-3); }
.hcard--classic .hstrip-val { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 8px; margin-top: 4px; min-height: 28px; font-variant-numeric: tabular-nums; }
.hcard--classic .hstrip-apo { font-size: var(--fs-section); font-weight: 600; letter-spacing: .03em; color: var(--text-1); }
.hcard--classic .hstrip-apo.is-empty, .hcard--classic .hstrip-empty { color: var(--text-3); font-weight: 500; }
.hcard--classic .hstrip-copy {
  display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; padding: 0;
  border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--bg-card); color: var(--text-2); cursor: pointer;
}
.hcard--classic .hstrip-copy:hover { color: var(--text-1); border-color: var(--text-3); }
.hcard--classic .hstrip-copy:focus-visible { outline: 2px solid var(--primary); outline-offset: 1px; }
.hcard--classic .hstrip-copy.is-copied { color: var(--success); border-color: currentColor; }
.hcard--classic .hstrip-copied { font-size: var(--fs-meta); font-weight: 500; color: var(--success); }
.hcard--classic .hstrip-copied:empty { display: none; }
.hcard--classic .hstrip-field[data-strip-field="health"] .proj-health-badge { max-width: 100%; white-space: normal; line-height: 1.3; }
.hcard--classic .hstrip-hs .hs-logo { padding: 3px 8px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--bg-card); }
.hcard--classic .hstrip-big { font-size: var(--fs-title); font-weight: 600; color: var(--text-1); }
.hcard--classic .hstrip-of { font-size: var(--fs-ui); color: var(--text-3); }
.hcard--classic .hstrip-meter { display: flex; gap: 3px; margin-top: 6px; max-width: 18rem; }
.hcard--classic .hstrip-meter i { flex: 1; height: 6px; border-radius: 2px; background: var(--bg-hover); }
.hcard--classic .hstrip-meter i.is-full { background: var(--primary); }
.hcard--classic .hstrip-meter i.is-half { background: color-mix(in srgb, var(--primary) 45%, var(--bg-hover)); }
.hcard--classic .hstrip-slots { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; }
.hcard--classic .hstrip-slots i { width: 14px; height: 14px; border-radius: 50%; border: 1.5px dashed var(--text-3); background: var(--bg-card); }
.hcard--classic .hstrip-slots i.is-filled { border: 0; background: var(--primary); }
.hcard--classic .hstrip-slots i.is-reserved { border-style: solid; border-color: var(--primary); }
.hcard--classic .hstrip-note { margin-top: 4px; font-size: var(--fs-meta); line-height: 1.35; color: var(--text-2); }
.hcard--classic .hstrip-note.is-warn { color: var(--warning); font-weight: 600; }
.hcard--classic .hstrip-note.is-ok { color: var(--success); font-weight: 600; }
.hcard--classic .hcard-src { color: var(--text-3); }

/* Stammdaten Variante B: breite Budget-Kachel oben, darunter zwei Kacheln; Zeitraum als Strecke. */
:is(#view-opportunity-detail, #view-project-detail) .stamm-head.is-grid { gap: 16px; }
:is(#view-opportunity-detail, #view-project-detail) .stamm-head.is-grid .stamm-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
:is(#view-opportunity-detail, #view-project-detail) .stamm-head.is-grid .stamm-tile { display: flex; flex-direction: column; gap: 4px; padding: 12px 14px; border: 0; background: var(--bg-card2); min-width: 0; }
:is(#view-opportunity-detail, #view-project-detail) .stamm-head.is-grid .stamm-tile.is-wide { grid-column: 1 / -1; }
:is(#view-opportunity-detail, #view-project-detail) .stamm-head.is-grid .stamm-tile-lbl { font-size: var(--fs-meta); font-weight: 500; white-space: normal; }
:is(#view-opportunity-detail, #view-project-detail) .stamm-head.is-grid .stamm-tile > .stamm-tile-val { text-align: left; font-size: var(--fs-title); line-height: 1.2; }
:is(#view-opportunity-detail, #view-project-detail) .stamm-head.is-grid .stamm-tile.is-wide > .stamm-tile-val { font-size: var(--fs-display); }
:is(#view-opportunity-detail, #view-project-detail) .stamm-head.is-grid .stamm-tile.is-empty > .stamm-tile-val { font-size: var(--fs-title); font-weight: 600; color: var(--text-3); }
:is(#view-opportunity-detail, #view-project-detail) .stamm-head.is-grid .stamm-tile-sub { font-size: var(--fs-meta); color: var(--text-2); }
:is(#view-opportunity-detail, #view-project-detail) .stamm-head.is-grid .stamm-tile-sub.is-alert { display: inline-flex; align-items: center; gap: 4px; color: var(--warning); font-weight: 600; }
:is(#view-opportunity-detail, #view-project-detail) .stamm-head.is-grid .stamm-warn-dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
:is(#view-opportunity-detail, #view-project-detail) .stamm-head.is-grid .stamm-usage { width: 100%; margin-top: 8px; }
:is(#view-opportunity-detail, #view-project-detail) .stamm-head.is-grid .stamm-bar { background: var(--bg-hover); }
:is(#view-opportunity-detail, #view-project-detail) .stamm-head.is-grid .stamm-usage-txt > :last-child { margin-left: auto; text-align: right; }
@container (max-width: 15rem) {
  :is(#view-opportunity-detail, #view-project-detail) .stamm-head.is-grid .stamm-tiles { grid-template-columns: minmax(0, 1fr); }
}
:is(#view-opportunity-detail, #view-project-detail) .stamm-run { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 6px 12px; font-variant-numeric: tabular-nums; }
:is(#view-opportunity-detail, #view-project-detail) .stamm-run-date { font-size: var(--fs-body); font-weight: 500; color: var(--text-1); }
:is(#view-opportunity-detail, #view-project-detail) .stamm-run-date + .stamm-run-date,
:is(#view-opportunity-detail, #view-project-detail) .stamm-run-note + .stamm-run-note { text-align: right; }
:is(#view-opportunity-detail, #view-project-detail) .stamm-run-date.is-empty { color: var(--text-3); font-weight: 500; }
:is(#view-opportunity-detail, #view-project-detail) .stamm-run-track { grid-column: 1 / -1; position: relative; height: 2px; margin: 4px 6px; background: var(--bg-hover); }
:is(#view-opportunity-detail, #view-project-detail) .stamm-run-track::before,
:is(#view-opportunity-detail, #view-project-detail) .stamm-run-track::after {
  content: ''; position: absolute; top: 50%; width: 12px; height: 12px; margin-top: -6px; border-radius: 50%;
  border: 3px solid var(--primary); background: var(--bg-card); box-sizing: border-box;
}
:is(#view-opportunity-detail, #view-project-detail) .stamm-run-track::before { left: -6px; }
:is(#view-opportunity-detail, #view-project-detail) .stamm-run-track::after { right: -6px; }
:is(#view-opportunity-detail, #view-project-detail) .stamm-run-note { font-size: var(--fs-meta); color: var(--text-2); }

/* Projektteam nach Rollen: je Rolle ein Tabellenkoerper mit Kopfzeile. */
.proj-team-table--grouped .proj-team-group-h > th {
  padding: 14px 8px 6px; text-align: left; font-weight: 400; background: transparent;
  text-transform: none; letter-spacing: normal; font-size: inherit; color: inherit;
  border-top: 1px solid var(--border);
}
.proj-team-table--grouped .proj-team-group:first-of-type .proj-team-group-h > th { border-top: 0; }
.proj-team-table--grouped .proj-team-group-hd { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 12px; }
.proj-team-table--grouped .proj-team-group-name { font-size: var(--fs-body); font-weight: 500; color: var(--text-1); }
.proj-team-table--grouped .proj-team-group-hd .proj-team-filled { font-size: var(--fs-meta); color: var(--text-2); font-variant-numeric: tabular-nums; }
.proj-team-table--grouped .proj-team-group-hd .proj-team-fill { display: inline-block; width: 64px; height: 6px; border-radius: 999px; overflow: hidden; background: var(--bg-hover); }
.proj-team-table--grouped .proj-team-group-hd .proj-team-fill > span { display: block; width: var(--fill, 0%); height: 100%; background: var(--warning); }
.proj-team-table--grouped .proj-team-group-hd .proj-team-fill[data-level="full"] > span { background: var(--success); }
.proj-team-table--grouped .proj-team-group-hd .proj-team-lead { background: var(--bg-hover); color: var(--text-1); font-size: var(--fs-label); }
.proj-team-table--grouped .proj-team-group-hd .proj-team-booked { font-size: var(--fs-label); color: var(--text-3); }
.proj-team-table--grouped .proj-team-group-act { margin-left: auto; }
.proj-team-table--grouped .proj-team-seat > td { border-top: 1px dashed var(--border); }
.proj-team-table--grouped .proj-team-seat .proj-team-seat-go { max-width: 100%; white-space: normal; text-align: left; }